/* ============================================================
   Second Star — thesecondstar.com  ·  v2
   Charte « Celestial Night » (reprise du deck).
   Architecture : scènes plein écran, chaque scène = un cadre 16:9
   (image complète, zéro crop) posé sur un fond ambiant flouté,
   snap-scroll vertical + scrollytelling. Typo en unités de
   conteneur (cqw/cqh) → proportions du deck, tient sur 1 écran.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

/* ----------------------------- Tokens ----------------------------- */
:root{
  --ink-night:#0A0C12; --surface:#10131C; --elevated:#181C28;
  --ivory:#F2EFE6; --muted:#A8ABB5; --faint:rgba(242,239,230,.45);
  --gold:#C9A86A; --gold-bright:#E6D3A6;
  --hairline:rgba(242,239,230,.12); --gold-hairline:rgba(201,168,106,.55);
  --accent-soft:rgba(201,168,106,.14);

  --font-display:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --font-body:'Hanken Grotesk','Schibsted Grotesk',system-ui,-apple-system,sans-serif;

  --glow-gold:0 0 24px rgba(201,168,106,.30);
  --glow-star:0 0 10px rgba(230,211,166,.85),0 0 24px rgba(230,211,166,.35);

  --scrim-left:linear-gradient(90deg,var(--ink-night) 0%,rgba(10,12,18,.9) 22%,rgba(10,12,18,.5) 50%,rgba(10,12,18,0) 80%);
  --scrim-bottom:linear-gradient(0deg,var(--ink-night) 0%,rgba(10,12,18,.82) 24%,rgba(10,12,18,.2) 52%,rgba(10,12,18,0) 74%);
  --vignette:radial-gradient(125% 105% at 50% 45%,rgba(10,12,18,0) 50%,rgba(10,12,18,.5) 100%);
  --grain-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --ease-celestial:cubic-bezier(0.22,0.61,0.36,1);
  --ease-out-soft:cubic-bezier(0.16,1,0.3,1);
  --dur-base:560ms; --dur-slow:1100ms; --dur-drift:9s;

  --nav-h:74px;
}

/* ----------------------------- Base + snap scroller ----------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto; /* le glissé est piloté par JS (Lenis / scrollTo) */
  scroll-padding-top:0;
}
body{
  margin:0;background:var(--ink-night);color:var(--ivory);
  font-family:var(--font-body);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(201,168,106,.26);color:var(--ivory);}
a{color:inherit;}
img{display:block;max-width:100%;}

/* ----------------------------- Étoile (mask SVG) ----------------------------- */
.star{
  display:inline-block;width:1em;height:1em;flex:0 0 auto;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C12.6 7 17 11.4 24 12 C17 12.6 12.6 17 12 24 C11.4 17 7 12.6 0 12 C7 11.4 11.4 7 12 0 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C12.6 7 17 11.4 24 12 C17 12.6 12.6 17 12 24 C11.4 17 7 12.6 0 12 C7 11.4 11.4 7 12 0 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 5px rgba(201,168,106,.5)) drop-shadow(0 0 12px rgba(201,168,106,.22));
}

/* ============================================================
   SCÈNES
   ============================================================ */
.scene{
  position:relative;width:100%;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--edge,var(--ink-night));
}

/* Fond ambiant flouté (petite image upscalée → flou naturel, coût nul) */
.scene__ambient{
  position:absolute;inset:-4%;width:108%;height:108%;
  object-fit:cover;z-index:0;
  filter:brightness(.62) saturate(.92);
  transform:scale(1.04) translateY(var(--amb-y,0));
  transition:transform .2s linear;
}
.scene::after{ /* léger voile pour fondre le cadre dans la page */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 120% at 50% 50%,rgba(10,12,18,0) 58%,rgba(10,12,18,.6) 100%);
}

/* Cadre 16:9 net = la « slide » complète, ajustée à l'écran (zéro crop) */
.scene__stage{
  position:relative;z-index:2;
  width:min(100vw,calc(100vh * 16 / 9));
  width:min(100vw,calc(100svh * 16 / 9));
  aspect-ratio:16 / 9;max-height:100vh;max-height:100svh;
  container-type:size;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
/* image de fond = calée à DROITE à sa hauteur naturelle (height:100% / width:auto → zéro zoom,
   zéro crop vertical, image 16:9 montrée entière en hauteur). L'élément fort de chaque image
   est à droite (constellation, lune, aurore, sommet) → toujours préservé contre le bord droit.
   À gauche : bande unie = couleur du bord gauche de l'image (--edge par scène, échantillonnée) →
   raccord invisible (bords d'images sombres + uniformes, + scrim gauche par-dessus).
   16:9 = remplit pile (= deck) ; écran plus large = bande à gauche ; plus haut = léger débord rogné à gauche. */
.scene__bg{position:absolute;top:var(--shift-y,0);right:0;height:100%;width:auto;max-width:none;z-index:0;}
.scene__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;}
.scrim-l{background:var(--scrim-left);}
.scrim-b{background:var(--scrim-bottom);}
.scrim-vg{background:var(--vignette);}
.scene__grain{position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--grain-url);background-size:170px;opacity:.05;mix-blend-mode:overlay;}

/* Scène sobre (sans photo) — fond nuit uni, cadre invisible */
.scene--sober{background:var(--ink-night);}
.scene--sober::after{display:none;}
.scene--sober .scene__stage{background:var(--ink-night);box-shadow:none;}
.scene--sober .scene__stage::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(120% 100% at 50% 32%,rgba(24,28,40,.55) 0%,rgba(10,12,18,0) 60%);}

/* ----------------------------- Comblement immersif des bandes latérales -----------------------------
   Réversible : actif sous html.fill-on (défaut) ; le param dev ?nofill le retire pour comparer.
   Principe « ambient mode » (Apple TV / YouTube) : le fond reprend l'image floutée, et les bords
   nets du cadre 16:9 sont fondus au masque → la jointure disparaît, l'image semble remplir l'écran.
   Aucun crop, aucun étirement, image d'origine uniquement. Mobile inchangé (déjà full-bleed cover). */
/* ===== Scènes image en PLEIN ÉCRAN (bord à bord) =====
   bg + scrims + grain = enfants DIRECTS de .scene (inset:0) → couvrent exactement la zone
   de contenu, quelle que soit la scrollbar (fini le calcul 100vw qui laissait un liseré).
   Le cadre 16:9 (.scene__stage) ne sert plus qu'au calibrage typo + placement du texte.
   L'image, elle, est calée à droite (cf. .scene__bg) ; la gauche est comblée par --edge. */
.scene:not(.scene--sober):not(.scene--prose) .scene__stage{background:transparent;box-shadow:none;z-index:3;}
.scene:not(.scene--sober):not(.scene--prose)::after{display:none;}

/* Zone de contenu (= .pad du deck), placée dans le cadre */
.scene__pad{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;
  padding:6cqh 7cqw;
}
.scene__pad[data-align="center"]{justify-content:center;}
.scene__pad[data-align="end"]{justify-content:flex-end;}
.scene__pad[data-align="start"]{justify-content:flex-start;}
.stack{display:flex;flex-direction:column;}

/* ----------------------------- Composants typo (proportions deck, en cqw) ----------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:.8em;font-family:var(--font-body);font-weight:500;font-size:1cqw;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);line-height:1.4;}
.eyebrow .star{width:.85em;height:.85em;}
.eyebrow--muted{color:var(--muted);}

.display{font-family:var(--font-display);font-weight:500;font-size:5.3cqw;line-height:1.03;letter-spacing:-.012em;color:var(--ivory);margin:0;text-wrap:balance;}
.title{font-family:var(--font-display);font-weight:500;font-size:4cqw;line-height:1.07;letter-spacing:-.01em;color:var(--ivory);margin:0;text-wrap:balance;}
.title--sm{font-size:2.75cqw;}
.title--xs{font-size:2.4cqw;}
.display em,.title em,.accent{font-style:italic;color:var(--gold);font-weight:500;}

.lede{font-family:var(--font-body);font-weight:300;font-size:1.55cqw;line-height:1.46;color:var(--muted);margin:0;text-wrap:pretty;}
.body-txt{font-family:var(--font-body);font-weight:400;font-size:1.35cqw;line-height:1.58;color:var(--muted);margin:0;text-wrap:pretty;}
.micro{font-family:var(--font-body);font-weight:500;font-size:1cqw;letter-spacing:.2em;text-transform:uppercase;line-height:1.85;color:var(--muted);margin:0;}
.micro--ivory{color:var(--ivory);text-transform:none;letter-spacing:.04em;font-weight:400;}
.quote{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.5cqw;line-height:1.5;color:var(--muted);margin:0;}
.goldline{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.6cqw;line-height:1.42;color:var(--gold);margin:0;text-wrap:pretty;}
.result-label{font-style:normal;color:var(--faint);font-family:var(--font-body);font-size:.62em;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:.5em;}

.divider{width:10.5cqw;height:1px;border:0;background:var(--gold-hairline);margin:0;}

/* gaps proportionnels */
.g-s{gap:1.4cqh;} .g-m{gap:2.2cqh;} .g-l{gap:3.2cqh;}
.maxw{max-width:60cqw;} .maxw-l{max-width:72cqw;}

/* CTA */
.cta{display:inline-flex;align-items:center;gap:.8em;padding:1.3cqh 2.4cqw;background:transparent;border:1px solid var(--gold-hairline);border-radius:2px;color:var(--gold);font-family:var(--font-body);font-weight:500;font-size:1cqw;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:border-color var(--dur-base) var(--ease-celestial),box-shadow var(--dur-base) var(--ease-celestial),background-color var(--dur-base) var(--ease-celestial);}
.cta:hover,.cta:focus-visible{border-color:var(--gold);background:var(--accent-soft);box-shadow:var(--glow-gold);outline:none;}
.cta--ghost{border:0;padding-inline:.4cqw;color:var(--muted);}
.cta--ghost:hover,.cta--ghost:focus-visible{box-shadow:none;background:transparent;color:var(--ivory);}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:2cqw;margin-top:.6cqh;}

/* bullets */
.bullets{display:flex;flex-direction:column;gap:1.2cqh;margin:.4cqh 0 0;padding:0;list-style:none;}
.bullets li{display:flex;align-items:baseline;gap:.9em;font-family:var(--font-body);font-weight:400;font-size:1.2cqw;line-height:1.45;color:var(--ivory);}
.bullets li::before{content:"";width:.5cqw;height:.5cqw;min-width:7px;min-height:7px;flex:0 0 auto;transform:translateY(-.1em);background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C12.6 7 17 11.4 24 12 C17 12.6 12.6 17 12 24 C11.4 17 7 12.6 0 12 C7 11.4 11.4 7 12 0 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C12.6 7 17 11.4 24 12 C17 12.6 12.6 17 12 24 C11.4 17 7 12.6 0 12 C7 11.4 11.4 7 12 0 Z'/%3E%3C/svg%3E") center/contain no-repeat;}

.opt{font-family:var(--font-body);font-weight:400;font-size:1.2cqw;line-height:1.5;color:var(--muted);margin:0;text-wrap:pretty;}
.opt .opt-name{font-weight:500;color:var(--ivory);}
.proof{font-family:var(--font-body);font-weight:400;font-size:1cqw;letter-spacing:.04em;line-height:1.55;color:var(--muted);margin:0;}

/* ----------------------------- Recap des offres (menu produit, scène #offres) ----------------------------- */
.offers-recap{gap:2cqh;}
.offers-kicker{font-family:var(--font-body);font-weight:300;font-size:1.3cqw;line-height:1.4;color:var(--muted);margin:0;text-wrap:pretty;}
.offers-menu{display:flex;flex-direction:column;margin-top:1.2cqh;max-width:62cqw;}
.offer-link{display:flex;align-items:baseline;gap:2.2cqw;text-decoration:none;color:var(--ivory);padding:1.7cqh 0;border-top:1px solid var(--hairline);transition:border-color var(--dur-base) var(--ease-celestial);}
.offer-link:last-child{border-bottom:1px solid var(--hairline);}
.offer-num{font-family:var(--font-display);font-style:italic;font-size:1.7cqw;line-height:1;color:var(--gold);flex:0 0 auto;}
.offer-text{display:flex;flex-direction:column;gap:.55cqh;flex:1 1 auto;}
.offer-name{font-family:var(--font-display);font-weight:500;font-size:3.1cqw;line-height:1.04;letter-spacing:-.01em;color:var(--ivory);transition:color var(--dur-base) var(--ease-celestial);}
.offer-tag{font-family:var(--font-body);font-weight:300;font-size:1.2cqw;line-height:1.4;color:var(--muted);text-wrap:pretty;}
.offer-go{font-family:var(--font-body);font-size:1.6cqw;line-height:1;color:var(--gold);flex:0 0 auto;align-self:center;opacity:0;transform:translateX(-.6cqw);transition:opacity var(--dur-base) var(--ease-celestial),transform var(--dur-base) var(--ease-celestial);}
.offer-link:hover,.offer-link:focus-visible{outline:none;border-top-color:var(--gold-hairline);}
.offer-link:hover .offer-name,.offer-link:focus-visible .offer-name{color:var(--gold-bright);}
.offer-link:hover .offer-go,.offer-link:focus-visible .offer-go{opacity:1;transform:none;}

/* sections offre (détail) — plus d'air entre les blocs */
.offer-body{gap:2.6cqh;}

/* scène contact — formulaire centré sur fond noir */
.echangeons-main{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:600px;margin:0 auto;}
.echangeons-main .h2-web{margin-top:.35em;}
.echangeons-main .cform{margin-top:clamp(22px,3.2vh,38px);}

/* transformations (Notre rôle) */
.shifts{display:grid;grid-template-columns:repeat(2,max-content);gap:1.4cqh 5cqw;}
.shift{display:flex;align-items:baseline;gap:.7em;font-family:var(--font-body);font-weight:400;font-size:1.25cqw;line-height:1.4;}
.shift .from{color:var(--muted);} .shift .arr{color:var(--gold);font-weight:300;} .shift .to{color:var(--ivory);}

/* steps (modes) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:3cqw;}
.step .rule{width:2.4cqw;height:1px;background:var(--gold-hairline);margin-bottom:1.4cqh;}
.step .n{font-family:var(--font-display);font-style:italic;color:var(--gold);font-size:2cqw;line-height:1;}
.step .h{font-family:var(--font-display);font-weight:500;font-size:2cqw;color:var(--ivory);margin:.5em 0 .35em;line-height:1.1;}
.step .d{font-family:var(--font-body);font-weight:400;font-size:1.05cqw;line-height:1.5;color:var(--muted);margin:0;text-wrap:pretty;}

/* preuve : logos + stats */
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3.4cqh 4cqw;align-items:center;}
.logo-grid .cell{display:flex;align-items:center;justify-content:center;min-height:3.75cqw;}
/* hauteurs par logo via --lh (cqw) = reprise EXACTE des hauteurs px du deck (canvas 1920) / 1920 × 100.
   Les classes .lg/.sm ne servent plus qu'au bucketing mobile (cf. @media). */
.logo-grid .cell img{width:auto;height:var(--lh,2.6cqw);object-fit:contain;opacity:.92;}
.logo-grid .cell img.png{filter:brightness(0) invert(1) sepia(12%) saturate(60%) brightness(96%);}
.logo-grid .more{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:2.6cqw;color:var(--faint);}
.stats{display:flex;flex-wrap:wrap;gap:5.5cqw;}
.stat .v{font-family:var(--font-display);font-weight:500;color:var(--gold);font-size:5cqw;line-height:.9;letter-spacing:-.02em;}
.stat .l{font-family:var(--font-body);font-weight:500;font-size:.95cqw;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:.7em;}

/* ============================================================
   SCÈNES PROSE (About, Contact) — pleine page, mise en page web
   ============================================================ */
.scene--prose{background:var(--ink-night);}
.scene--prose .scene__ambient{filter:brightness(.32) saturate(.85);}
.scene--prose::after{background:radial-gradient(120% 100% at 50% 35%,rgba(10,12,18,.35) 0%,rgba(10,12,18,.86) 70%,var(--ink-night) 100%);}
.prose-wrap{position:relative;z-index:3;width:100%;max-width:1180px;margin:0 auto;padding:calc(var(--nav-h) + 4vh) clamp(24px,6vw,90px) 6vh;}
.eyebrow-web{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-body);font-weight:500;font-size:clamp(.7rem,.66rem + .2vw,.8rem);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);}
.eyebrow-web .star{width:.85em;height:.85em;}
.h2-web{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,1.3rem + 3vw,3.4rem);line-height:1.08;letter-spacing:-.01em;color:var(--ivory);margin:.5em 0 0;text-wrap:balance;}
.h2-web em{font-style:italic;color:var(--gold);}

/* About */
.about__body{margin-top:clamp(24px,3.5vh,44px);max-width:min(1040px,92vw);column-count:2;column-gap:clamp(34px,4.5vw,72px);}
.about__body p{font-family:var(--font-body);font-weight:300;font-size:clamp(1.02rem,.95rem + .5vw,1.25rem);line-height:1.7;color:var(--muted);margin:0 0 1.05em;text-wrap:pretty;break-inside:avoid;}
.about__body p strong{font-weight:500;color:var(--ivory);}
.about__body em{font-style:italic;color:var(--gold);}

/* Contact form */
.contact__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,110px);align-items:center;margin-top:clamp(20px,3vh,40px);}
.contact__lead .quote-web{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(1.1rem,.9rem + 1vw,1.6rem);line-height:1.5;color:var(--muted);margin:0 0 .8em;}
.contact__lead .lede-web{font-family:var(--font-body);font-weight:300;font-size:clamp(1.05rem,.95rem + .6vw,1.35rem);line-height:1.55;color:var(--muted);margin:.4em 0 0;}
.contact__lead .sig{margin-top:1.6em;font-size:.95rem;color:var(--faint);}
.contact__lead .sig a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hairline);}
.contact__lead .sig a:hover{color:var(--ivory);}

form.cform{display:flex;flex-direction:column;gap:18px;}
.cform .field{display:flex;flex-direction:column;gap:8px;}
.cform label{font-family:var(--font-body);font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);}
.cform input,.cform textarea{
  font-family:var(--font-body);font-size:1rem;font-weight:300;color:var(--ivory);
  background:rgba(255,255,255,.02);border:1px solid var(--hairline);border-radius:3px;
  padding:13px 15px;outline:none;transition:border-color var(--dur-base) var(--ease-celestial),box-shadow var(--dur-base) var(--ease-celestial),background-color var(--dur-base);
}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(168,171,181,.55);}
.cform input:focus,.cform textarea:focus{border-color:var(--gold-hairline);box-shadow:0 0 0 3px rgba(201,168,106,.1);background:rgba(255,255,255,.035);}
.cform textarea{resize:vertical;min-height:110px;line-height:1.55;}
.cform .optin{display:flex;align-items:flex-start;gap:12px;cursor:pointer;}
.cform .optin input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--gold);}
.cform .optin span{font-family:var(--font-body);font-weight:300;font-size:.9rem;line-height:1.45;color:var(--muted);text-transform:none;letter-spacing:0;}
.cform .submit{align-self:flex-start;margin-top:4px;border:1px solid var(--gold-hairline);background:transparent;color:var(--gold);font-family:var(--font-body);font-weight:500;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;padding:14px 30px;border-radius:2px;cursor:pointer;transition:border-color var(--dur-base) var(--ease-celestial),box-shadow var(--dur-base) var(--ease-celestial),background-color var(--dur-base);}
.cform .submit:hover{border-color:var(--gold);background:var(--accent-soft);box-shadow:var(--glow-gold);}
.cform .submit[disabled]{opacity:.5;cursor:default;}
.cform .formnote{font-family:var(--font-body);font-weight:300;font-size:.85rem;line-height:1.5;min-height:1.2em;margin:0;}
.cform .formnote.ok{color:var(--gold-bright);} .cform .formnote.err{color:#E08A7A;}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;transition:background-color var(--dur-base) var(--ease-celestial),border-color var(--dur-base) var(--ease-celestial),backdrop-filter var(--dur-base);border-bottom:1px solid transparent;}
.nav__inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:0 clamp(22px,4vw,64px);}
.nav.is-scrolled{background:rgba(10,12,18,.7);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);border-bottom-color:var(--hairline);}
.nav__brand{display:inline-flex;align-items:center;gap:.7em;text-decoration:none;color:var(--ivory);font-family:var(--font-body);font-weight:500;font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;}
.nav__brand .star{width:.95em;height:.95em;}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2vw,36px);}
.nav__links a{position:relative;font-family:var(--font-body);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color var(--dur-base) var(--ease-celestial);}
.nav__links a:hover,.nav__links a.is-active{color:var(--ivory);}
.nav__links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--gold-hairline);}
.nav__right{display:flex;align-items:center;gap:24px;}
.langtoggle{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body);font-size:.72rem;letter-spacing:.12em;}
.langtoggle a{color:var(--muted);text-decoration:none;transition:color var(--dur-base);}
.langtoggle a.is-active{color:var(--gold);}
.langtoggle a:hover{color:var(--ivory);} .langtoggle span{color:var(--faint);}
.nav__cta{font-size:.7rem;letter-spacing:.16em;padding:8px 16px;}
.nav__burger{display:none;flex-direction:column;gap:5px;width:34px;height:34px;padding:7px 5px;background:none;border:0;cursor:pointer;}
.nav__burger span{display:block;height:1.5px;width:100%;background:var(--ivory);transition:transform var(--dur-base) var(--ease-celestial),opacity var(--dur-base);}
.nav__burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav__burger.is-open span:nth-child(2){opacity:0;}
.nav__burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* indicateur de scène (points latéraux) */
.dots{position:fixed;right:max(18px,2vw);top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:14px;}
.dots a{width:8px;height:8px;border-radius:50%;border:1px solid var(--gold-hairline);background:transparent;transition:background-color var(--dur-base),transform var(--dur-base);}
.dots a.is-active{background:var(--gold);transform:scale(1.25);}
.dots a:hover{background:var(--accent-soft);}

/* ============================================================
   FOOTER (bandeau bas, hors snap)
   ============================================================ */
.footer{position:relative;z-index:3;background:var(--ink-night);border-top:1px solid var(--hairline);padding:40px clamp(22px,5vw,64px);}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;max-width:1320px;margin:0 auto;}
.footer__brand{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-body);font-weight:500;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory);}
.footer__brand .star{width:.9em;height:.9em;}
.footer__links{display:flex;flex-wrap:wrap;align-items:center;gap:22px;font-size:.86rem;color:var(--muted);}
.footer__links a{color:var(--muted);text-decoration:none;transition:color var(--dur-base);}
.footer__links a:hover{color:var(--ivory);}
.footer__desc{width:100%;font-family:var(--font-body);font-weight:300;font-size:.86rem;color:var(--faint);margin-top:18px;}
/* le footer vit dans la dernière scène prose, pas en snap-target */

/* ============================================================
   ANIMATIONS — entrées + scrollytelling
   ============================================================ */
/* entrée : sous .js, masqué jusqu'à .is-in (révélé quand la scène devient active) */
/* Apparition du texte — reprise FIDÈLE du deck (deck-rise), jouée quand la scène devient
   active ([data-scene].is-active) et rejouée à chaque passage. Transform seul, aucun fondu,
   aucun zoom — exactement comme Claude Design. */
@keyframes deck-rise{from{transform:translateY(22px);}to{transform:none;}}
.js .reveal{transform:translateY(22px);}
.cap-mode .reveal{transform:none !important;animation:none !important;}
@media (prefers-reduced-motion:no-preference){
  .js [data-scene].is-active .reveal{animation:deck-rise 1s var(--ease-out-soft) both;}
  .js [data-scene].is-active .reveal.d1{animation-delay:.06s;}
  .js [data-scene].is-active .reveal.d2{animation-delay:.18s;}
  .js [data-scene].is-active .reveal.d3{animation-delay:.30s;}
  .js [data-scene].is-active .reveal.d4{animation-delay:.42s;}
  .js [data-scene].is-active .reveal.d5{animation-delay:.54s;}
  .js [data-scene].is-active .reveal.d6{animation-delay:.66s;}
}

@keyframes ss-twinkle{0%,100%{opacity:.55;}50%{opacity:1;}}
.twinkle{animation:ss-twinkle var(--dur-drift) var(--ease-celestial) infinite;}

/* (plus de recul cinématique / zoom : le deck n'en a pas — seul deck-rise anime le texte) */

/* ============================================================
   RESPONSIVE — mobile portrait : reflow lisible, plus de snap/16:9
   ============================================================ */
@media (max-width:860px){
  html{scroll-snap-type:none;scroll-padding-top:var(--nav-h);}
  .scene{min-height:100svh;height:auto;display:block;scroll-snap-align:none;}
  .scene__ambient{display:none;}
  .scene::after{display:none;}
  .scene__stage{width:100%;height:auto;min-height:100svh;max-height:none;aspect-ratio:auto;container-type:normal;box-shadow:none;display:flex;}
  .scene__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--mob-pos,center);transform:none;}
  .scene__pad{position:relative;padding:calc(var(--nav-h) + 7vh) 22px 9vh;min-height:100svh;}
  .js .scene__stage{transform:none;opacity:1;}
  /* typo mobile en rem */
  .display{font-size:clamp(2.4rem,11vw,3.4rem);}
  .title{font-size:clamp(2rem,8.5vw,2.9rem);}
  .title--sm,.title--xs{font-size:clamp(1.7rem,7vw,2.3rem);}
  .lede{font-size:clamp(1.05rem,4.4vw,1.3rem);}
  .body-txt{font-size:clamp(1rem,4vw,1.18rem);}
  .micro{font-size:clamp(.72rem,3vw,.85rem);}
  .quote{font-size:clamp(1.1rem,5vw,1.4rem);}
  .goldline{font-size:clamp(1.2rem,5.2vw,1.5rem);}
  .eyebrow{font-size:clamp(.7rem,3vw,.8rem);}
  .bullets li{font-size:clamp(1rem,4vw,1.15rem);}
  .opt{font-size:clamp(1rem,4vw,1.15rem);}
  .proof{font-size:clamp(.9rem,3.6vw,1.02rem);}
  .shift{font-size:clamp(1rem,4.2vw,1.18rem);}
  /* recap offres (mobile) */
  .offers-kicker{font-size:clamp(.95rem,3.8vw,1.1rem);}
  .offers-menu{max-width:none;margin-top:6px;}
  .offer-link{gap:16px;padding:16px 0;}
  .offer-num{font-size:1rem;}
  .offer-name{font-size:clamp(1.5rem,6.4vw,2rem);}
  .offer-tag{font-size:clamp(.92rem,3.6vw,1.05rem);}
  .offer-go{display:none;}
  .offer-body{gap:20px;}
  .divider{width:120px;}
  .cta{font-size:clamp(.7rem,3vw,.8rem);padding:13px 22px;}
  .cta-row{gap:18px;}
  .maxw,.maxw-l{max-width:none;}
  .g-s{gap:14px;}.g-m{gap:20px;}.g-l{gap:28px;}
  /* grilles → empilées */
  .shifts{grid-template-columns:1fr;gap:14px;}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 22px;}
  .step .rule{width:36px;margin-bottom:14px;}
  .step .n{font-size:clamp(1.3rem,6vw,1.7rem);}
  .step .h{font-size:clamp(1.25rem,5.5vw,1.6rem);}
  .step .d{font-size:clamp(.9rem,3.8vw,1.05rem);}
  .logo-grid{grid-template-columns:repeat(3,1fr);gap:26px 18px;}
  .logo-grid .cell img{height:30px;}.logo-grid .cell img.lg{height:40px;}.logo-grid .cell img.sm{height:22px;}
  .logo-grid .more{font-size:1.4rem;}
  .stats{gap:30px;}
  .stat .v{font-size:clamp(2.6rem,13vw,3.4rem);}
  .stat .l{font-size:.72rem;}
  .contact__grid{grid-template-columns:1fr;gap:28px;}
  .prose-wrap{padding:calc(var(--nav-h) + 6vh) 22px 8vh;}
  .about__body{column-count:1;max-width:none;}
  /* nav mobile */
  .nav__links,.nav__cta{display:none;}
  .nav__burger{display:flex;}
  .dots{display:none;}
  .nav.is-menu-open{background:var(--ink-night);}
  .nav.is-menu-open .nav__links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:22px;padding:28px clamp(22px,5vw,64px) 34px;background:rgba(10,12,18,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline);}
  .nav.is-menu-open .nav__links a{font-size:1rem;letter-spacing:.06em;}
}
@media (max-width:480px){
  .logo-grid{grid-template-columns:repeat(2,1fr);}
  .cta-row .cta{width:100%;justify-content:center;}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  .scene__stage{transform:none !important;opacity:1 !important;}
  .scene__ambient{transform:scale(1.04) !important;}
}