/* ══════════════════════════════════════════════════════════════
   Loumya — site.css (v4 — look Planity : héro plein écran, 08/09/2026)
   Site de lancement — charte officielle Loumya :
   crème #F6F2EC · beige #E9E2D6 · sauge #A8B29A · brun #6B5A4A ·
   nude #DDBA9A. Titres Cormorant Garamond, corps Nunito Sans,
   CTA sauge, grands visuels photo. Mobile-first.

   v4 (décisions Gwen 08/09, cadrage 4 questions) :
   • UNE échelle verticale à TROIS crans (--sp-lg / --sp / --sp-sm, en
     clamp) — plus aucun padding de section écrit à la main.
   • Héro PLEIN ÉCRAN (.hero--full : min-height 100svh, repli 100vh,
     centrage flex, flèche « Découvrir » obligatoire en bas).
   • Nav TRANSPARENTE posée sur la photo, devient blanche au défilement
     (.nav--solide, posée par le script inline de accueil.php).
   • Bandeau photo « preuve pilote » pleine largeur avant Fonctionnalités
     (remplace la ligne de texte .preuve) + CTA final déjà en photo.
   • Hiérarchie mesurée à 390/768/900/1100/1440 : h2 ≥ 1,8× le corps à
     toutes les largeurs, filet nude sous chaque h2 (signal, pas que la
     taille), titres de cartes en serif 1,5rem (1,58× le texte de carte).
   • Plus de scroll-behavior:smooth sur html : « réduire les animations »
     ANNULE le défilement natif (ancres mortes). Le défilement doux est
     fait en JS au clic, durée réglable, réduit à 55 % sous reduced-motion.
   v3 (08/09) : mot-image SVG en nav/pied ; texte des CTA sauge en ENCRE
   #4A3F35 (4.63:1 — blanc 2.21 et brun charte 2.98 sous AA) ; survol en
   inversion encre/crème (sauge foncé 3.36) ; --encre-2 #756A5E (5.28).
   ══════════════════════════════════════════════════════════════ */

:root {
  --fond:        #F6F2EC;   /* crème charte */
  --carte:       #FFFFFF;
  --encre:       #4A3F35;   /* brun profond (texte) */
  --encre-2:     #756A5E;   /* texte secondaire — 5.28:1 sur blanc, 4.73 sur crème (AA) ;
                               l'ancien #94897C faisait 3.43 / 3.07 (mesuré 08/09/2026) */
  --lisere:      #E9E2D6;   /* beige charte */
  --sauge:       #A8B29A;   /* CTA, actifs */
  --sauge-fonce: #8C987C;
  --brun:        #6B5A4A;
  --nude:        #DDBA9A;
  --serif:       'Cormorant Garamond', Georgia, serif;
  --easing:      cubic-bezier(.16, 1, .3, 1);

  /* ── Échelle verticale : TROIS crans, et trois seulement.
     Ils grandissent avec l'écran (clamp) comme le héro (svh) : c'est ce
     qui rend l'ensemble proportionnel du téléphone au 27 pouces. Un
     besoin qui n'entre dans aucun cran = un cran qui manque, jamais un
     padding inline. */
  --sp-lg: clamp(88px, 10vw, 164px);   /* respiration forte : bandeaux photo, CTA */
  --sp:    clamp(64px, 7.5vw, 120px);  /* rythme courant : les sections de contenu */
  --sp-sm: clamp(44px, 5vw, 80px);     /* dense : pied de page */
  --nav-h: 64px;                       /* hauteur de la nav fixe (mesurée) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  background: var(--fond);
  color: var(--encre);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ══════ TYPOGRAPHIE ═══════════════════════════════════════── */
h1 { font-family: var(--serif); font-size: clamp(2.5rem, 6vw, 4.2rem); font-weight: 600; line-height: 1.08; text-wrap: balance; }
h2 { font-family: var(--serif); font-size: clamp(1.8rem, 3.8vw, 2.6rem); font-weight: 600; line-height: 1.15; margin-bottom: 14px; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--sauge); }
/* Filet court sous les h2 : le signal qui sépare « ce dont on parle »
   de « ce qu'on en dit » — la taille seule ne suffit pas. */
h2::after {
  content: ''; display: block; width: 56px; height: 3px; border-radius: 999px;
  margin: 16px 0 0; background: var(--nude);
}
h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin-bottom: 8px; }

.eyebrow {
  font-size: .74rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-2);
  margin-bottom: 10px;
}
.eyebrow--clair { color: rgba(255,255,255,.85); }

/* ══════ BOUTONS ═══════════════════════════════════════════── */
.btn {
  display: inline-block; font: inherit; font-weight: 800;
  padding: 13px 26px; border-radius: 999px; border: none;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .2s var(--easing), color .2s var(--easing), transform .15s var(--easing);
}
.btn:active { transform: scale(.985); }
.btn-principal { background: var(--sauge); color: var(--encre); text-transform: uppercase; letter-spacing: .1em; font-size: .92rem; }
.btn-principal:hover { background: var(--encre); color: var(--fond); }
.btn-contour { background: transparent; color: var(--encre); border: 1px solid var(--encre); }
.btn-contour:hover { background: var(--encre); color: #fff; }
.btn-clair { background: #fff; color: var(--encre); }
.btn-clair:hover { background: var(--fond); }
.btn-contour-clair { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
.btn-contour-clair:hover { background: rgba(255,255,255,.14); }
.btn:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* ══════ NAVIGATION — transparente sur la photo, blanche au défilement ─ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s var(--easing), border-color .3s var(--easing), box-shadow .3s var(--easing);
}
.nav--solide {
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom-color: var(--lisere);
}
.nav-int {
  max-width: 1120px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 22px; min-height: var(--nav-h);
}
.nav-logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo-mot  { height: 30px; width: auto; display: block; transition: filter .3s var(--easing); }   /* mot-image SVG, ratio 356:72 */
/* Sur la photo : le mot-image passe en blanc (monochrome, façon Planity) */
.nav:not(.nav--solide) .logo-mot { filter: brightness(0) invert(1); }
.signature {
  font-family: var(--serif); font-style: italic;
  font-size: 1.15rem; color: var(--nude); margin-top: 4px;
}
.nav-liens { display: none; gap: 22px; margin-left: 8px; }
.nav-liens a { color: var(--encre-2); text-decoration: none; font-weight: 700; font-size: .95rem; transition: color .3s var(--easing); }
.nav-liens a:hover { color: var(--encre); }
.nav:not(.nav--solide) .nav-liens a { color: rgba(255,255,255,.88); }
.nav:not(.nav--solide) .nav-liens a:hover { color: #fff; }
.btn-nav { margin-left: auto; background: var(--sauge); color: var(--encre); padding: 10px 20px; font-size: .92rem; white-space: nowrap; }
.btn-nav:hover { background: var(--encre); color: var(--fond); }
/* Mobile : logo + bouton doivent tenir sur UNE ligne dès 360px
   (mesuré 08/09 : à 390 le bouton passait sur 2 lignes, nav à 93px) */
@media (max-width: 779px) {
  .nav-int  { gap: 14px; }
  .logo-mot { height: 24px; }
  .btn-nav  { padding: 9px 14px; font-size: .85rem; }
}

/* ══════ HÉRO PLEIN ÉCRAN ══════════════════════════════════── */
.hero {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: var(--lisere);
}
.hero--full {
  min-height: 100vh;                 /* repli, DOIT rester avant */
  min-height: 100svh;                /* nav fixe posée dessus : rien à soustraire */
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Bloc de texte calé EN BAS, pas centré : centré, il tombait sur les
     visages de la photo (mesuré 08/09 à 1792×1032). En bas, les têtes
     (35–45 % de la hauteur) restent libres ; le texte occupe 52–89 %. */
  padding-top: calc(var(--nav-h) + 24px);
  padding-bottom: 128px;             /* place de la flèche */
}
.hero-voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(28,22,16,.58), rgba(28,22,16,.24) 52%, rgba(28,22,16,.06)),
    linear-gradient(to bottom, rgba(28,22,16,.38), rgba(28,22,16,0) 22%),
    linear-gradient(to top, rgba(28,22,16,.55), rgba(28,22,16,.06) 55%);
}
.hero h1 em { color: #EADFC8; } /* italique clair, lisible sur photo */
.hero-int {
  position: relative; color: #fff;
  max-width: 1120px; margin: 0 auto; width: 100%;
  padding: 0 20px;
}
.hero-sous {
  margin: 18px 0 28px; max-width: 48ch;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: rgba(255,255,255,.92);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* La flèche : contrepartie du plein écran — sans elle, la page a l'air
   de s'arrêter là. Le flottement est décoratif : coupé sous reduced-motion. */
.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.55); color: #fff;
  background: rgba(28,22,16,.18); backdrop-filter: blur(4px);
  transition: background .2s var(--easing), border-color .2s var(--easing);
  animation: flotter 2.4s ease-in-out infinite;
}
.scroll-cue:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.scroll-cue:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.scroll-cue svg { width: 18px; height: 18px; display: block; }
@keyframes flotter { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ══════ SECTIONS DE PAGE — un cran, jamais un padding à la main ─ */
.section-page { max-width: 1120px; margin: 0 auto; padding: var(--sp) 20px; }
/* Section pleine largeur (fond blanc) : la gouttière est portée par la
   SECTION, pas par chaque enfant — sinon un paragraphe à 62ch se retrouve
   centré sous un titre aligné à gauche (défaut hérité, corrigé 08/09). */
.section-page--fond {
  max-width: none;
  padding-left: max(20px, calc((100% - 1080px) / 2));
  padding-right: max(20px, calc((100% - 1080px) / 2));
  background: #fff; border-top: 1px solid var(--lisere); border-bottom: 1px solid var(--lisere);
}

/* Intro de section + titres de groupes (texte Amélie 19/08/2026) */
.section-intro { color: var(--encre-2); max-width: 62ch; }
.groupe-titre  { margin-top: 44px; }

.grille { display: grid; gap: 14px; margin-top: 26px; }
.grille-3 { grid-template-columns: 1fr; }

.carte {
  background: var(--carte); border: 1px solid var(--lisere);
  border-radius: 14px; padding: 26px 24px;
  box-shadow: 0 1px 3px rgba(23,24,28,.04);
}
.carte p { color: var(--encre-2); font-size: .95rem; }
.carte-num {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sauge); color: var(--encre);
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-weight: 800; font-size: .9rem; margin-bottom: 14px;
}

/* ══════ BANDEAUX PHOTO — preuve pilote + CTA final ═════════── */
.bandeau, .final {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: var(--lisere);
  display: flex; flex-direction: column; justify-content: center;
}
.bandeau--preuve { min-height: 380px; min-height: max(380px, 56svh); }
.bandeau-voile { position: absolute; inset: 0; background: rgba(10,10,12,.55); }
.bandeau-int {
  position: relative; color: #fff; text-align: center;
  max-width: 760px; margin: 0 auto; padding: var(--sp-lg) 20px;
}
.bandeau-int h2::after { margin-left: auto; margin-right: auto; }
.bandeau-int p { color: rgba(255,255,255,.88); max-width: 52ch; margin: 0 auto; }
.bandeau-int .preuve-chiffre { font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.bandeau-int .preuve-chiffre strong { color: #fff; }
.final .bandeau-int .btn { margin-top: 24px; }
.final-note { font-size: .85rem; margin-top: 12px; color: rgba(255,255,255,.75); }

/* ══════ OFFRES ════════════════════════════════════════════── */
.grille-offres { align-items: stretch; }
.carte-offre { display: flex; flex-direction: column; }
.carte-offre--essai { border-color: var(--sauge); box-shadow: 0 0 0 1.5px var(--sauge), 0 1px 3px rgba(74,63,53,.06); }
.offre-nom { font-weight: 800; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); }
.carte-offre--essai .offre-nom { color: var(--encre); }
.offre-prix { font-size: 1.35rem; font-weight: 900; margin: 4px 0 6px; color: var(--encre); }
.offre-desc { margin-bottom: 12px; }
.carte-offre ul { list-style: none; margin-bottom: 18px; }
.carte-offre li {
  padding: 6px 0 6px 24px; position: relative;
  color: var(--encre-2); font-size: .93rem;
  border-bottom: 1px solid var(--fond);
}
.carte-offre li::before { content: '✓'; position: absolute; left: 2px; font-weight: 800; color: var(--sauge-fonce); }
.carte-offre .btn { margin-top: auto; }

/* ══════ PIED DE PAGE ══════════════════════════════════════── */
.pied-site { background: #fff; border-top: 1px solid var(--lisere); }
.pied-int { max-width: 1120px; margin: 0 auto; padding: var(--sp-sm) 20px; }
.pied-int p { color: var(--encre-2); font-size: .9rem; margin-top: 6px; }
.pied-int a { color: var(--encre); font-weight: 700; }

/* ══════ DESKTOP ═══════════════════════════════════════════── */
@media (min-width: 780px) {
  .nav-liens { display: flex; }
  .grille-3 { grid-template-columns: repeat(3, 1fr); }
  .grille { gap: 18px; }
}

/* ── Formules v02 (25/09/2026) ── */
.offre-periode { font-size: .85rem; font-weight: 700; color: var(--encre-2); }
.offre-badge { align-self: flex-start; margin-bottom: 8px; padding: 3px 10px; border-radius: 100px; background: var(--sauge); color: var(--encre); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.carte-option { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.carte-option > div { flex: 1 1 420px; min-width: 0; }
.offres-note { margin-top: 14px; font-size: .85rem; color: var(--encre-2); }