/* =====================================================================
   NORA — Landing page (base responsive)
   Design system « Boréal » : bois + sauge + braise, Fraunces + Outfit.
   Tokens et composants. À reprendre par Claude Code pour la version finale.
   ===================================================================== */

:root {
  /* --- Couleurs Boréal --- */
  --blanc:   #FAF6EE;   /* fond principal, chaud */
  --pur:     #FFFFFF;   /* cartes */
  --creme:   #EFE7D6;   /* fond alterné */
  --sable:   #E4D8C2;   /* bordures */
  --cedre:   #B5814F;   /* bois, accent secondaire, footer */
  --sauge:   #97A487;   /* vert doux */
  --braise:  #C2693F;   /* accent chaud, CTA */
  --braise-d:#A9542E;   /* CTA hover */
  --foret:   #2C342A;   /* titres */
  --foret-c: #3C4636;   /* corps de texte */
  --ecorce:  #6B5A3A;   /* texte secondaire */
  --pierre:  #9A8A6F;   /* placeholders */

  /* --- Typographie --- */
  --disp: 'Fraunces', Georgia, serif;     /* titres, display */
  --body: 'Outfit', system-ui, sans-serif; /* corps, UI */

  /* --- Mesures --- */
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 76px);
  --radius: 16px;
  --radius-pill: 40px;
}

/* --- Reset léger --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  font-weight: 300;
  color: var(--foret-c);
  background: var(--blanc);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* --- Utilitaires --- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.eyebrow {
  font-family: var(--body); font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase;
  font-size: .72rem; color: var(--cedre);
}
.disp { font-family: var(--disp); font-weight: 500; color: var(--foret); line-height: 1.08; letter-spacing: .004em; }
.lead { font-size: 1.05rem; color: var(--foret-c); max-width: 60ch; }

/* --- Boutons --- */
.btn {
  display: inline-block; cursor: pointer; border: 0;
  background: var(--braise); color: var(--blanc);
  font-family: var(--body); font-weight: 500; font-size: 1rem; letter-spacing: .03em;
  border-radius: var(--radius-pill); padding: 15px 32px;
  transition: background .2s ease, transform .2s ease;
}
.btn:hover { background: var(--braise-d); transform: translateY(-1px); }
.btn:disabled, .btn:disabled:hover { background: var(--pierre); cursor: not-allowed; transform: none; }
.btn--block { display: block; width: 100%; text-align: center; padding: 16px; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 38px var(--pad);
}
.site-header__logo { height: 68px; width: auto; }
.site-header__tag {
  font-family: var(--body); font-weight: 500; font-size: .68rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--blanc); opacity: .82;
  margin-left: -3px; /* compense le side-bearing du « S » pour aligner sur le « N » du logo détouré */
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative; min-height: 88vh;
  display: flex; align-items: flex-end; justify-content: center;
  text-align: center; color: var(--blanc); overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(740px 500px at 4% 0%, rgba(18,24,18,.70), rgba(18,24,18,0) 60%),
    linear-gradient(180deg, rgba(18,24,18,.46) 0%, rgba(18,24,18,.10) 18%, rgba(18,24,18,0) 34%),
    linear-gradient(0deg, rgba(18,24,18,.86) 0%, rgba(18,24,18,.32) 28%, rgba(18,24,18,0) 54%);
}
.hero__inner { position: relative; z-index: 2; padding: 0 var(--pad) clamp(64px, 9vh, 110px); max-width: 820px; }
.hero__rule { width: 48px; height: 1px; background: rgba(250,246,238,.5); margin: 0 auto 26px; }
.hero__title { color: var(--blanc); font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.12; letter-spacing: .012em; }
.hero__cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero__meta {
  font-family: var(--body); font-weight: 400; font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--blanc); opacity: .8;
}

/* =====================================================================
   SECTIONS génériques
   ===================================================================== */
.section { padding: clamp(56px, 9vh, 104px) 0; }
.section--creme { background: var(--creme); }
.section--blanc { background: var(--blanc); }
.section__title { font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin-top: 14px; max-width: 22ch; }
.section__body { margin-top: 16px; font-size: 1.05rem; max-width: 64ch; }

/* Chips (concept) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.chip {
  display: inline-block; background: var(--creme); border: 1px solid var(--sable);
  border-radius: var(--radius-pill); padding: 9px 20px;
  font-weight: 500; font-size: .82rem; color: var(--ecorce);
}
.section--creme .chip { background: var(--pur); }

/* =====================================================================
   GESTES (grille de cartes)
   ===================================================================== */
.cards { display: grid; gap: 18px; margin-top: 34px; grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--pur); border: 1px solid var(--sable);
  border-radius: var(--radius); padding: 28px 24px;
}
.card__num { font-family: var(--disp); font-weight: 500; color: var(--cedre); font-size: 2.8rem; line-height: 1; }
.card__title { font-family: var(--disp); font-weight: 500; color: var(--foret); font-size: 1.4rem; margin-top: 14px; }
.card__text { font-size: .9rem; margin-top: 8px; }

/* =====================================================================
   SPLIT (rituel : image + features)
   ===================================================================== */
.split { display: grid; grid-template-columns: 46% 54%; align-items: stretch; }
.split__media { min-height: 420px; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__content { padding: clamp(40px, 6vw, 80px) var(--pad); display: flex; flex-direction: column; justify-content: center; }
.split__title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 26px; }
.featlist { display: flex; flex-direction: column; gap: 20px; }
.feat { display: flex; gap: 14px; align-items: flex-start; }
.feat__dot { width: 11px; height: 11px; border-radius: 6px; background: var(--braise); flex: none; margin-top: 7px; }
.feat__title { font-family: var(--disp); font-weight: 500; color: var(--foret); font-size: 1.18rem; }
.feat__text { font-size: .9rem; margin-top: 3px; }

/* =====================================================================
   DESTINATION (full-bleed)
   ===================================================================== */
.feature { position: relative; min-height: 540px; display: flex; align-items: flex-end; color: var(--blanc); overflow: hidden; }
.feature__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,24,18,.78) 0%, rgba(18,24,18,.12) 46%, rgba(18,24,18,.30) 100%); }
.feature__inner { position: relative; z-index: 2; padding: clamp(48px, 7vh, 80px) var(--pad); }
.feature__title { color: var(--blanc); font-size: clamp(2rem, 4.6vw, 3.25rem); margin-top: 14px; }
.feature__body { color: var(--creme); font-size: 1.06rem; margin-top: 16px; max-width: 44ch; }
.feature .eyebrow { color: #E2CFA9; }

/* =====================================================================
   DEUX FAÇONS
   ===================================================================== */
.ways { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin-top: 28px; }
.way { background: var(--pur); border: 1px solid var(--sable); border-radius: var(--radius); padding: 28px 30px; }
.way__title { font-family: var(--disp); font-weight: 500; color: var(--foret); font-size: 1.4rem; }
.way__text { font-size: .94rem; margin-top: 10px; }
.note { font-style: italic; font-size: .98rem; margin-top: 22px; color: var(--ecorce); }

/* =====================================================================
   FORMULAIRE (liste d'attente)
   ===================================================================== */
.waitlist { background: var(--creme); position: relative; overflow: hidden; }
.waitlist__grid { display: grid; grid-template-columns: 1fr 460px; gap: 40px; align-items: start; }
.waitlist__intro { padding-top: 8px; }
.waitlist__title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-top: 12px; }
.waitlist__note {
  margin-top: 22px; padding: 16px 18px; background: rgba(250,246,238,.9);
  border: 1px solid var(--sable); border-radius: 12px;
  font-size: .82rem; color: var(--foret-c); line-height: 1.55; max-width: 42ch;
}
.formcard {
  background: var(--blanc); border: 1px solid var(--sable); border-radius: 20px;
  padding: 34px 36px; box-shadow: 0 26px 64px rgba(18,24,18,.18);
}
.formcard__title { font-family: var(--disp); font-weight: 500; color: var(--foret); font-size: 1.5rem; margin-top: 10px; }
.formcard__sub { font-size: .85rem; margin-top: 8px; margin-bottom: 22px; color: var(--ecorce); }
.field { margin-bottom: 16px; }
.field > label {
  display: block; font-weight: 500; font-size: .65rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ecorce); margin-bottom: 7px;
}
.field input {
  width: 100%; border: 1px solid var(--sable); border-radius: 11px;
  padding: 14px 16px; font-family: var(--body); font-size: .95rem; color: var(--foret);
  background: var(--pur);
}
.field input::placeholder { color: var(--pierre); }
.field input:focus { outline: 2px solid var(--braise); outline-offset: 1px; border-color: transparent; }
.fieldset { border: 0; margin-bottom: 18px; }
.fieldset > legend {
  font-weight: 500; font-size: .65rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ecorce); margin-bottom: 9px;
}
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-block; border: 1px solid var(--sable); color: var(--ecorce);
  background: var(--pur); border-radius: var(--radius-pill);
  padding: 11px 18px; font-size: .8rem; line-height: 1; transition: all .15s ease;
}
.choice input:checked + span { border: 1.5px solid var(--braise); color: var(--braise); background: #F7ECE3; font-weight: 500; }
.choice input:focus-visible + span { outline: 2px solid var(--braise); outline-offset: 2px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--cedre); color: var(--blanc); }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 44px; flex-wrap: wrap; }
.site-footer__brand { display: flex; align-items: center; gap: 20px; }
.site-footer__logo { height: 34px; opacity: .97; }
.site-footer__txt { font-size: .8rem; line-height: 1.7; }
.site-footer__legal { text-align: right; font-size: .7rem; letter-spacing: .06em; color: rgba(250,246,238,.78); line-height: 1.8; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 300px; }
  .ways { grid-template-columns: 1fr; }
  .waitlist__grid { grid-template-columns: 1fr; gap: 28px; }
  .formcard { max-width: 520px; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .site-header__logo { height: 52px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__legal { text-align: left; }
}

/* ===== Formulaire liste d'attente : honeypot + messages d'état ===== */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-statut { margin: 14px 0 0; font-size: 0.95rem; line-height: 1.45; min-height: 1.2em; }
.form-statut--ok { color: #2f6b4f; }
.form-statut--err { color: #b2402f; }