/* =========================================================
   TWO DAYS IN PARIS — stylesheet
   Rebuilt from the original site's screenshots (dark palette)
   ========================================================= */

:root{
  --noir:#12100d;
  --noir-2:#191612;
  --noir-3:#211d18;
  --panel:#1b1814;
  --panel-2:#241f19;

  --ivoire:#f2ead9;
  --ivoire-soft:rgba(242,234,217,.88);
  --muted:rgba(242,234,217,.74);
  --faint:rgba(242,234,217,.62);

  --gold:#b9924f;
  --gold-soft:#d0b075;
  --or-clair:rgba(208,176,117,.8);
  --line:rgba(208,176,117,.22);
  --line-soft:rgba(242,234,217,.1);

  --display:'Cinzel',Georgia,serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Cormorant Garamond',Georgia,serif;

  --radius:2px;
  --gutter:clamp(20px,5vw,44px);
  --shadow-soft:0 26px 60px rgba(0,0,0,.45);

  /* --- Lumières --- */
  --glow-doux:0 0 30px rgba(208,176,117,.18);
  --glow-moyen:0 0 42px rgba(208,176,117,.3);
  --glow-fort:0 0 62px rgba(208,176,117,.45);
  --glow-texte:0 0 22px rgba(208,176,117,.32);
  --halo-or:radial-gradient(circle,rgba(208,176,117,.3) 0%,rgba(185,146,79,.12) 38%,transparent 70%);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--noir);
  color:var(--ivoire-soft);
  font-family:var(--serif);
  font-size:1.15rem;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0 0 .5em;color:var(--ivoire);font-weight:400;font-family:var(--display);}
h1{font-size:clamp(2.3rem,5.6vw,4.3rem);line-height:1.18;letter-spacing:.02em;}
h2{font-size:clamp(1.85rem,3.8vw,3rem);line-height:1.28;letter-spacing:.01em;}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:.02em;}
h2 em,h1 em{font-family:var(--serif);font-style:italic;color:var(--gold-soft);}
p{margin:0 0 1.1em;}
a{color:inherit;text-decoration:none;transition:color .25s,opacity .25s;}
img{display:block;max-width:100%;}
::selection{background:rgba(185,146,79,.35);color:#fff;}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter);}
.wrap.narrow{max-width:820px;}
.section{padding:clamp(64px,9vw,124px) 0;position:relative;}
.center-block{text-align:center;}
.center{text-align:center;}

/* ================= LUMIÈRES GLOBALES ================= */

/* Halo lumineux flottant, placé derrière le contenu d'une section.
   Purement décoratif : ne capte aucun clic, ne déborde jamais. */
.glow{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  background:var(--halo-or);
  filter:blur(38px);
  z-index:0;
  opacity:.9;
}
.glow--centre{top:-8%;left:50%;transform:translateX(-50%);width:min(760px,92vw);height:min(760px,92vw);}
.glow--gauche{top:18%;left:-16%;width:min(560px,72vw);height:min(560px,72vw);opacity:.65;}
.glow--droite{bottom:6%;right:-14%;width:min(520px,68vw);height:min(520px,68vw);opacity:.6;}

/* Le contenu des sections doit passer au-dessus des halos */
.section > .wrap{position:relative;z-index:1;}

/* Halo qui respire, très lentement */
@keyframes haloRespire{
  0%,100%{opacity:.72;transform:scale(1);}
  50%    {opacity:1;  transform:scale(1.07);}
}
.glow--respire{animation:haloRespire 11s ease-in-out infinite;}
.glow--centre.glow--respire{animation-name:haloRespireCentre;}
@keyframes haloRespireCentre{
  0%,100%{opacity:.72;transform:translateX(-50%) scale(1);}
  50%    {opacity:1;  transform:translateX(-50%) scale(1.07);}
}

/* Ligne de séparation lumineuse : un dégradé doré qui s'évanouit
   aux extrémités, au lieu d'un trait plat. */
.lueur-haut::before,
.lueur-bas::after{
  content:'';position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(208,176,117,.45) 22%,rgba(232,208,150,.75) 50%,rgba(208,176,117,.45) 78%,transparent);
  z-index:2;
}
.lueur-haut::before{top:0;}
.lueur-bas::after{bottom:0;}

.kicker{
  font-family:var(--display);
  font-size:.86rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin:0 0 22px;
}
.kicker-soft{color:var(--or-clair);}
.lede{font-size:1.2rem;color:var(--ivoire-soft);max-width:68ch;}
.center-block .lede{margin-left:auto;margin-right:auto;}
.note-quiet{
  margin:46px auto 0;max-width:72ch;text-align:center;
  font-style:italic;font-size:1.12rem;color:var(--muted);
}

.btn{
  display:inline-block;
  position:relative;
  font-family:var(--display);
  font-size:.88rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:18px 38px;
  border:1px solid var(--gold);
  color:var(--gold-soft);
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  transition:background .35s,color .35s,border-color .35s,box-shadow .45s,transform .35s;
}
/* Reflet lumineux qui traverse le bouton au survol */
.btn::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,244,222,.5),transparent);
  transform:skewX(-18deg);
  transition:left .65s ease;
  pointer-events:none;
}
.btn:hover::after,.btn:focus-visible::after{left:130%;}
.btn:hover,.btn:focus-visible{
  background:var(--gold);color:var(--noir);
  box-shadow:0 0 28px rgba(185,146,79,.55),0 0 70px rgba(208,176,117,.3),inset 0 0 22px rgba(255,240,210,.35);
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0);}
.btn.solid{background:var(--gold);color:var(--noir);box-shadow:0 0 24px rgba(185,146,79,.35);}
.btn.solid:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--noir);box-shadow:0 0 34px rgba(208,176,117,.6),0 0 80px rgba(208,176,117,.34);}
.btn.line{color:var(--gold-soft);border-color:var(--line);}
.btn.line:hover,.btn.line:focus-visible{background:rgba(185,146,79,.2);color:var(--ivoire);box-shadow:0 0 30px rgba(185,146,79,.4),inset 0 0 24px rgba(208,176,117,.18);}
.cta-row{margin-top:38px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ================= NAV ================= */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(18,16,13,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .45s ease,background .45s ease;
}
/* La barre s'éclaire discrètement dès qu'on quitte le haut de page */
.nav.is-scrolled{
  background:rgba(18,16,13,.93);
  box-shadow:0 1px 0 rgba(208,176,117,.16),0 14px 44px rgba(0,0,0,.6),0 0 40px rgba(185,146,79,.1);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px;}
.brand{
  font-family:var(--display);
  font-size:1.12rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ivoire);
  white-space:nowrap;
}
/* --- Embleme : deux pieces qui s'emboitent -----------------------------
   Les pieces sont des <use> vers des <g> definis dans le <defs> en haut de
   page. La geometrie n'existe donc qu'une fois, mais chaque emplacement
   (nav, section, pied de page) possede son propre <svg> avec son viewBox.

   Le code SVG ci-dessus est volontairement plat : aucun <symbol>, aucun
   <use> d'un SVG vers un AUTRE SVG. C'est ce qui rend l'animation fiable,
   car les pourcentages et les boites de reference (fill-box) y restent
   dans le repere reel du dessin.

   Trois facons de declencher l'emboitement :
     - survol (.brand:hover, .embleme:hover, .footer-brand:hover)
     - focus clavier (.brand:focus-visible, ...)
     - clic (classe .est-emboite, posee par le JS et conservee jusqu'au
       clic suivant : le clic de la souris ne declenche pas :focus-visible,
       il fallait donc un etat a part)
   Au repos les pieces sont ecartees et penchees ; declenchees, elles
   pivotent et glissent l'une vers l'autre jusqu'a s'emboiter. */
.puzzle-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* Chaque piece est un <g> qui contient son remplissage ET son contour : tout
   le groupe se deplace ensemble. Le pivot se prend au centre de la piece
   (50% 50% de sa propre boite), pour que les deux pieces pivotent
   symetriquement et viennent se poser bord a bord.

   Les deux pieces on la meme hauteur (90 unites) : le centre est donc a
   50% dans les deux cas. La piece de droite occupe x 72..144, elle n'a
   besoin d'aucun decalage : elle se pose naturellement a droite. */ 
.puzzle-piece{
  transform-box:fill-box;
  transform-origin:50% 50%;
  transition:transform .62s cubic-bezier(.34,1.32,.42,1),filter .5s ease;
  will-change:transform;
}
.puzzle-piece--left{transform:translate(-9px,2px) rotate(-13deg);}
.puzzle-piece--right{transform:translate(9px,-2px) rotate(13deg);}

/* Contour. On trace une copie de la piece, mais seule la partie EXTERIEURE
   est conservee : le bord de contact est decoupe par un clip-path SVG
   (attribut clip-path sur les <use>, voir index.html).
   - piece gauche : on garde x < 72, donc le bord droit (en x=72) disparait
   - piece droite : on garde x > 0, donc le bord gauche (en x=0) disparait
   Les deux pieces etant jointives, aucun trait ne subsiste a la jointure :
   ni liseré double, ni jour sombre entre les deux. */
.puzzle-edge{
  fill:none;
  stroke:#e6c98a;
  stroke-width:1.6;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

/* Etat emboite, partage par les trois declencheurs */
.brand:hover .puzzle-piece--left,
.brand:focus-visible .puzzle-piece--left,
.embleme:hover .puzzle-piece--left,
.embleme:focus-visible .puzzle-piece--left,
.footer-brand:hover .puzzle-piece--left,
.footer-brand:focus-visible .puzzle-piece--left,
.brand.est-emboite .puzzle-piece--left,
.embleme.est-emboite .puzzle-piece--left,
.footer-brand.est-emboite .puzzle-piece--left{transform:translate(0,0) rotate(0deg);}

.brand:hover .puzzle-piece--right,
.brand:focus-visible .puzzle-piece--right,
.embleme:hover .puzzle-piece--right,
.embleme:focus-visible .puzzle-piece--right,
.footer-brand:hover .puzzle-piece--right,
.footer-brand:focus-visible .puzzle-piece--right,
.brand.est-emboite .puzzle-piece--right,
.embleme.est-emboite .puzzle-piece--right,
.footer-brand.est-emboite .puzzle-piece--right{transform:translate(0,0) rotate(0deg);}

/* Halo dore, qui s'allume quand les pieces se rejoignent */
.brand:hover .puzzle-piece,
.brand:focus-visible .puzzle-piece,
.embleme:hover .puzzle-piece,
.embleme:focus-visible .puzzle-piece,
.footer-brand:hover .puzzle-piece,
.footer-brand:focus-visible .puzzle-piece,
.brand.est-emboite .puzzle-piece,
.embleme.est-emboite .puzzle-piece,
.footer-brand.est-emboite .puzzle-piece{filter:drop-shadow(0 0 7px rgba(208,176,117,.6));}

/* ================= RIEN NE SE FORME A LA JOINTURE =================
   Point non negociable, et regle a ne PAS perdre de vue :

   quand les deux pieces se rejoignent, il ne doit RIEN naitre entre elles.
   Ni lettre, ni initiale, ni monogramme, ni « T de trust », ni aucun signe
   pose a cheval sur le bord de contact (x=72). L'embleme, c'est deux
   pieces de puzzle — et quand elles s'emboitent, c'est exactement ce
   qu'on doit voir : deux pieces, jointives.

   Une ancienne version revelait une INITIALE faite de deux <rect> centres
   sur x=72 a l'instant de l'emboitement. Elle a ete retiree volontairement,
   et elle ne doit pas revenir (voir aussi la note dans les <defs> de
   index.html).

   Les seuls effets autorises a naitre de la rencontre sont donc des
   effets de LUMIERE, et rien d'autre :
     - l'ANNEAU (.puzzle-anneau) : un cercle qui s'elargit puis s'efface
     - les RAYONS (.puzzle-eclat) : une etoile qui jaillit puis s'efface
   Ni l'un ni l'autre n'ajoute de forme identifiable : ce sont des ondes
   dorees, pas des figures. */

/* ================= EFFET DE RENCONTRE =================
   Joue a l'instant ou les deux pieces se touchent. Trois temps :

     1. le REBOND D'IMPACT   (.puzzle-piece) : chaque piece arrive avec son
        élan, bute contre l'autre et recule d'un rien avant de se poser.
     2. l'ANNEAU            (.puzzle-anneau) : un cercle dore qui nait au
        point de contact et s'elargit en s'effacant, comme une onde.
     3. les RAYONS          (.puzzle-eclat) : une etoile a 8 branches qui
        jaillit du point de contact puis disparait.

   Tout est declare au repos (opacity:0, scale:0) : avant la rencontre, ces
   trois elements n'existent donc pas a l'ecran et ne captent aucun clic.
   Seul le declencheur (survol, focus clavier, clic) les fait apparaitre.

   Les durees sont calees sur la transition des pieces (.62s) : l'onde et
   l'eclat demarrent quand les pieces se rejoignent (~.30s), pas avant, et
   finissent avec elles. */

/* -- 1. Anneau : onde circulaire au point de contact -- */
.puzzle-anneau{
  /* Volontairement fin et peu opaque : c'est un souffle de lumiere qui
     s'echappe de la jointure, pas un cercle trace. Un contour net et
     pleinement opaque ferait figure de reticule de visee. */
  fill:none;
  stroke:#e6c98a;
  stroke-width:.9;
  stroke-opacity:.75;
  vector-effect:non-scaling-stroke;
  /* L'onde et l'eclat sont dessines CENTRES sur le point de contact, puis
     places dessus par un translate(72 36) pose en SVG (voir index.html).
     Leur propre boite est donc centree sur ce point : fill-box + 50% 50%
     agrandit l'effet pile depuis la jointure, sans avoir a convertir des
     coordonnees du viewBox. C'est la methode la plus fiable d'un
     navigateur a l'autre. */
  transform-box:fill-box;
  transform-origin:50% 50%;
  opacity:0;
  transform:scale(.25);
  pointer-events:none;
  transition:opacity .16s ease;
}

/* -- 2. Rayons : l'etoile jaillit du point de contact --
   L'eclat est dessine centre sur (0,0) et place sur la jointure par un
   <g transform="translate(72 36)">. C'est ce <g> enveloppe qui porte
   l'animation : sa boite est celle du dessin, donc le fill-box y est
   parfaitement deterministe. Sur un <use>, certains navigateurs calculent
   une boite differente de celle du contenu reference. */
.puzzle-eclat-foyer{
  transform-box:fill-box;
  transform-origin:50% 50%;
}
.puzzle-eclat{
  opacity:0;
  transform:scale(.2);
  pointer-events:none;
  transition:opacity .16s ease;
  filter:drop-shadow(0 0 6px rgba(208,176,117,.75));
}
#pz-eclat-long{stroke-width:1.5;}
#pz-eclat-court{stroke-width:1;}

/* Declencheurs : les neuf combinaisons (3 emplacements x 3 facons) */
.brand:hover .puzzle-anneau,
.brand:focus-visible .puzzle-anneau,
.embleme:hover .puzzle-anneau,
.embleme:focus-visible .puzzle-anneau,
.footer-brand:hover .puzzle-anneau,
.footer-brand:focus-visible .puzzle-anneau,
.brand.est-emboite .puzzle-anneau,
.embleme.est-emboite .puzzle-anneau,
.footer-brand.est-emboite .puzzle-anneau{
  animation:ondeRencontre 1.1s .22s cubic-bezier(.2,.7,.3,1) both;
}

.brand:hover .puzzle-eclat-foyer,
.brand:focus-visible .puzzle-eclat-foyer,
.embleme:hover .puzzle-eclat-foyer,
.embleme:focus-visible .puzzle-eclat-foyer,
.footer-brand:hover .puzzle-eclat-foyer,
.footer-brand:focus-visible .puzzle-eclat-foyer,
.brand.est-emboite .puzzle-eclat-foyer,
.embleme.est-emboite .puzzle-eclat-foyer,
.footer-brand.est-emboite .puzzle-eclat-foyer{
  animation:eclatRencontre .95s .1s cubic-bezier(.15,.8,.3,1) both;
}

/* Le halo doit aussi s'allumer sur l'eclat lui-meme pendant qu'il brille */
.brand:hover .puzzle-eclat,
.brand:focus-visible .puzzle-eclat,
.embleme:hover .puzzle-eclat,
.embleme:focus-visible .puzzle-eclat,
.footer-brand:hover .puzzle-eclat,
.footer-brand:focus-visible .puzzle-eclat,
.brand.est-emboite .puzzle-eclat,
.embleme.est-emboite .puzzle-eclat,
.footer-brand.est-emboite .puzzle-eclat{opacity:1;}

/* -- 3. Impact : l'onde et l'eclat portent deja le choc visuel ; on ajoute
      un REBOND propre en n'ecrasant jamais les transforms d'emboitement.
      Le rebond est donc joue sur l'anneau/eclat (deja ci-dessus) et sur un
      leger scale du groupe SVG lui-meme, jamais sur .puzzle-piece : animer
      .puzzle-piece remplacerait son transform d'etat emboite et les pieces
      ne reviendraient plus a leur place au repos. */
.brand:hover>svg,
.brand.est-emboite>svg,
.embleme:hover>svg,
.embleme.est-emboite>svg,
.footer-brand:hover>svg,
.footer-brand.est-emboite>svg{
  animation:chocRencontre .62s cubic-bezier(.34,1.32,.42,1) both;
}
@keyframes chocRencontre{
  0%  {transform:scale(1);}
  26% {transform:scale(.965);}
  58% {transform:scale(1.012);}
  100%{transform:scale(1);}
}

@keyframes ondeRencontre{
  0%  {opacity:0;   transform:scale(.3);}
  22% {opacity:.7;  transform:scale(.85);}
  100%{opacity:0;   transform:scale(2.4);}
}
@keyframes eclatRencontre{
  0%  {opacity:0;   transform:scale(.25) rotate(-10deg);}
  14% {opacity:1;   transform:scale(1.05) rotate(0deg);}
  40% {opacity:.85; transform:scale(.98)  rotate(0deg);}
  100%{opacity:0;   transform:scale(1.22) rotate(4deg);}
}

/* --- Marque dans la nav --- */
.brand{display:inline-flex;align-items:center;gap:12px;cursor:pointer;}
.brand-mark{width:44px;height:auto;flex:0 0 auto;overflow:visible;}
.brand-text{white-space:nowrap;}

/* --- Signature de la section « The difference » --- */
.embleme{margin:44px 0 0;display:flex;justify-content:center;}
.embleme:focus-visible{outline:1px solid var(--line);outline-offset:10px;}
.embleme>svg{width:168px;height:auto;overflow:visible;cursor:pointer;
  filter:drop-shadow(0 0 14px rgba(208,176,117,.22));transition:filter .45s ease;}
.embleme:hover>svg,.embleme:focus-visible>svg,
.embleme.est-emboite>svg{filter:drop-shadow(0 0 22px rgba(208,176,117,.45));}

/* --- Marque dans le pied de page --- */
.footer-brand{display:inline-flex;align-items:center;gap:11px;cursor:pointer;}
.footer-mark{width:36px;height:auto;flex:0 0 auto;overflow:visible;}

.brand:hover{color:var(--gold-soft);}
.nav-menu{display:flex;gap:32px;align-items:center;}
.nav-menu a{
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ivoire-soft);
}
.nav-menu a:hover{color:var(--gold-soft);}
.nav-menu .nav-cta{border:1px solid var(--line);padding:12px 24px;color:var(--gold-soft);}
.nav-menu .nav-cta:hover{background:var(--gold);color:var(--noir);border-color:var(--gold);}
.nav-burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px;}
.nav-burger span{width:26px;height:2px;background:var(--ivoire);display:block;transition:transform .25s;}

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:110px 0 96px;
  background:
    radial-gradient(circle at 50% 22%,rgba(185,146,79,.16),transparent 62%),
    linear-gradient(180deg,var(--noir-2) 0%,var(--noir) 58%,#0d0b09 100%);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
  isolation:isolate;
}
/* Deux nappes de lumière derrière le titre : une chaude au centre,
   une plus froide sur le côté, qui respirent à contre-temps. */
.hero::before,
.hero::after{
  content:'';position:absolute;border-radius:50%;
  pointer-events:none;z-index:0;
}
.hero::before{
  top:-14%;left:50%;width:min(880px,110vw);height:min(880px,110vw);
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(208,176,117,.26) 0%,rgba(185,146,79,.1) 42%,transparent 70%);
  filter:blur(46px);
  animation:heroHalo 13s ease-in-out infinite;
}
.hero::after{
  bottom:-30%;right:-12%;width:min(620px,80vw);height:min(620px,80vw);
  background:radial-gradient(circle,rgba(232,208,150,.14) 0%,transparent 68%);
  filter:blur(52px);
  animation:heroHaloBis 17s ease-in-out infinite;
}
@keyframes heroHalo{
  0%,100%{opacity:.7;transform:translateX(-50%) scale(1);}
  50%    {opacity:1;  transform:translateX(-50%) scale(1.09);}
}
@keyframes heroHaloBis{
  0%,100%{opacity:.5;transform:scale(1) translateY(0);}
  50%    {opacity:.95;transform:scale(1.12) translateY(-18px);}
}
.hero-inner{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:0 var(--gutter);}
.hero-eyebrow{
  font-family:var(--display);
  font-size:.86rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--or-clair);
  margin-bottom:32px;
  text-shadow:0 0 20px rgba(208,176,117,.4);
}
.hero h1{margin-bottom:28px;text-shadow:0 0 34px rgba(208,176,117,.22),0 0 90px rgba(185,146,79,.18);}
.hero-ledge{max-width:60ch;margin:0 auto;font-size:1.26rem;color:var(--ivoire-soft);}
.hero-note{
  margin-top:32px;
  font-family:var(--display);
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);
}

/* ================= PROFILE ================= */
.profile-sec{background:var(--noir);}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,68px);align-items:center;}
/* Deux images, empilees verticalement, jamais superposees :
   le portrait serre ouvre la section, la silhouette le prolonge
   en dessous dans un format plus court. Chacune occupe toute la
   largeur de la colonne, ce qui donne un rythme editorial net. */
.profile-gallery{
  position:relative;
  display:flex;flex-direction:column;
  gap:clamp(18px,2.4vw,26px);
}
.profile-gallery figure{margin:0;}
.profile-visual{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line-soft);
  aspect-ratio:4/5;
  box-shadow:var(--shadow-soft),0 0 60px rgba(185,146,79,.18);
}
/* Halo lumineux qui déborde derrière le portrait */
.profile-visual::before{
  content:'';position:absolute;inset:-2px;z-index:2;
  background:radial-gradient(circle at 50% 0%,rgba(232,208,150,.22),transparent 62%);
  pointer-events:none;mix-blend-mode:screen;
}
.profile-visual::after{
  content:'';position:absolute;inset:0;
  border:1px solid rgba(208,176,117,.18);
  pointer-events:none;
  box-shadow:inset 0 0 70px rgba(0,0,0,.55);
}
/* moi.jpg : le sujet se tient dans la moitie droite du cadre (un
   miroir occupe la gauche et reprend son reflet). On cadre donc sur
   la droite pour placer la femme au centre optique de l'image, et
   assez haut pour garder le regard dans le tiers superieur. */
.profile-visual img{width:100%;height:100%;object-fit:cover;object-position:66% 30%;transition:transform 1.2s ease,filter 1.2s ease;filter:brightness(.97);}
.profile-visual:hover img{transform:scale(1.04);filter:brightness(1.06);}
/* La silhouette, sous le portrait et non plus par-dessus : elle garde
   la largeur de la colonne mais un ratio plus court (7/5), ce qui la
   lit comme un prolongement du portrait, pas comme une image jumelle. */
.profile-thumb{
  position:relative;
  width:100%;max-width:none;
  aspect-ratio:7/5;
  overflow:hidden;border-radius:var(--radius);
  border:1px solid rgba(208,176,117,.3);
  background:var(--noir);
  box-shadow:var(--shadow-soft),0 0 40px rgba(185,146,79,.16);
}
.profile-thumb::after{
  content:'';position:absolute;inset:0;
  border:1px solid rgba(208,176,117,.16);
  pointer-events:none;
}
.profile-thumb img{
  width:100%;height:100%;object-fit:cover;
  /* silhouette.jpg est un portrait en pied : dans une bande paysage
     on remonte le cadrage pour garder le buste et le visage dans le
     champ, plutot que de ne montrer qu'une taille. */
  object-position:50% 26%;
  filter:brightness(.96) contrast(1.04);
  transition:transform 1.2s ease,filter 1.2s ease;
}
.profile-thumb:hover img{transform:scale(1.05);filter:brightness(1.08) contrast(1.04);}
.profile-copy h2{margin-bottom:24px;}
.tick-list{list-style:none;margin:30px 0 34px;padding:0;}
.tick-list li{
  position:relative;padding-left:28px;margin-bottom:15px;
  font-size:1.14rem;color:var(--ivoire-soft);
}
.tick-list li::before{
  content:'';position:absolute;left:0;top:.72em;width:12px;height:1.5px;
  background:var(--gold);opacity:.9;
}

/* ================= MOMENTS / CARDS ================= */
.moments-sec{background:var(--panel);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.moments-sec h2{margin-bottom:22px;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;}
.card{
  position:relative;overflow:hidden;
  background:var(--panel-2);
  border:1px solid var(--line-soft);
  padding:38px 30px;
  transition:transform .35s ease,border-color .35s ease,box-shadow .45s ease;
}
/* Nappe de lumière qui descend et s'intensifie au survol */
.card::before{
  content:'';position:absolute;top:-60%;left:50%;transform:translateX(-50%);
  width:150%;height:120%;
  background:radial-gradient(circle at 50% 0%,rgba(208,176,117,.14),transparent 62%);
  opacity:.5;transition:opacity .45s ease;
  pointer-events:none;
}
.card:hover::before{opacity:1;}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--line);
  box-shadow:var(--shadow-soft),0 0 48px rgba(185,146,79,.22);
}
.card > *{position:relative;z-index:1;}
.card h3{color:var(--gold-soft);margin-bottom:18px;}
.card p{font-size:1.12rem;color:var(--muted);margin:0;}

/* ================= DIFFERENCE ================= */
.difference-sec{background:var(--noir);}
.difference-sec h2{margin-bottom:34px;}
.difference-sec .lede{margin-bottom:22px;}

/* ================= CREDENTIALS ================= */
.credentials-sec{background:var(--noir-2);border-top:1px solid var(--line-soft);}
.credentials-sec h2{margin-bottom:26px;}
.credential-card{
  margin-top:54px;
  padding:clamp(34px,5vw,60px) clamp(22px,4vw,52px);
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel) 0%,var(--noir-3) 100%);
  position:relative;overflow:hidden;
  box-shadow:0 0 70px rgba(185,146,79,.16),inset 0 1px 0 rgba(232,208,150,.12);
}
/* Halo central derrière la carte, qui respire */
.credential-card::after{
  content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:120%;height:110%;
  background:radial-gradient(circle at 50% 0%,rgba(208,176,117,.16),transparent 65%);
  pointer-events:none;
  animation:haloRespireCentre 9s ease-in-out infinite;
}
.credential-card::before{
  content:'';position:absolute;inset:8px;
  border:1px solid rgba(208,176,117,.14);
  pointer-events:none;z-index:1;
}
.credential-card > *{position:relative;z-index:1;}
.cred-title{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3;margin-bottom:26px;text-shadow:0 0 26px rgba(208,176,117,.26);}
.diamond{color:var(--gold);font-size:.8rem;letter-spacing:1em;margin:0 0 28px;padding-left:.5em;text-shadow:0 0 16px rgba(208,176,117,.75);}
.cred-btn{margin-bottom:0;}

.cred-viewer{margin-top:40px;padding-top:34px;border-top:1px solid var(--line-soft);}
.cred-viewer[hidden]{display:none;}
.cred-stage{
  position:relative;
  display:flex;justify-content:center;align-items:center;
  min-height:220px;
  background:#0e0c0a;
  border:1px solid var(--line-soft);
  padding:22px;
  box-shadow:inset 0 0 80px rgba(0,0,0,.7),0 0 40px rgba(185,146,79,.1);
}
/* Projecteur doux au-dessus de l'image présentée */
.cred-stage::before{
  content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:90%;height:90%;
  background:radial-gradient(circle at 50% 0%,rgba(208,176,117,.18),transparent 68%);
  pointer-events:none;
}
.cred-img{display:none;max-height:62vh;width:auto;object-fit:contain;position:relative;z-index:1;box-shadow:0 18px 60px rgba(0,0,0,.6),0 0 44px rgba(185,146,79,.2);}
.cred-img.is-current{display:block;animation:credIn .45s ease both;}
@keyframes credIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.cred-nav{
  display:flex;align-items:center;justify-content:center;gap:22px;
  margin-top:26px;
}
.cred-arrow{
  background:none;border:1px solid var(--line);
  color:var(--gold-soft);cursor:pointer;
  width:52px;height:52px;border-radius:50%;
  font-size:1.2rem;line-height:1;
  transition:background .3s,color .3s,box-shadow .4s,transform .3s;
}
.cred-arrow:hover,.cred-arrow:focus-visible{
  background:var(--gold);color:var(--noir);
  box-shadow:0 0 26px rgba(185,146,79,.6),0 0 60px rgba(208,176,117,.3);
  transform:scale(1.06);
}
.cred-dots{display:flex;gap:12px;align-items:center;}
.cred-dot{
  width:12px;height:12px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:transparent;cursor:pointer;
  transition:background .3s,transform .3s,box-shadow .35s;
}
.cred-dot.is-active{background:var(--gold);border-color:var(--gold);transform:scale(1.25);box-shadow:0 0 16px rgba(208,176,117,.8);}
.cred-count{
  margin-top:20px;
  font-family:var(--display);font-size:.84rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-soft);
}
.cred-quiet{margin-top:16px;font-style:italic;font-size:1.12rem;color:var(--muted);}

/* ================= CONTACT ================= */
.contact-sec{background:var(--noir);border-top:1px solid var(--line-soft);}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,64px);align-items:start;}
.contact-panel h2{margin-bottom:22px;}
.contact-form{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.field{display:flex;flex-direction:column;}
.field-full{grid-column:1 / -1;}
.field label,
.check span{
  font-family:var(--display);
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:11px;
}
.field input,.field select,.field textarea{
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--ivoire);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(242,234,217,.26);
  border-radius:0;
  padding:16px 17px;
  width:100%;
  transition:border-color .3s,background .3s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(185,146,79,.14),0 0 26px rgba(185,146,79,.28);
}
.field select{appearance:none;cursor:pointer;}
.field select option{background:var(--noir-3);color:var(--ivoire);}
.field textarea{resize:vertical;min-height:120px;}
.check{
  grid-column:1 / -1;
  display:flex;align-items:flex-start;gap:12px;
  cursor:pointer;
}
.check input{
  margin-top:8px;width:22px;height:22px;flex:0 0 auto;
  accent-color:var(--gold);cursor:pointer;
}
.check span{margin-bottom:0;text-transform:none;letter-spacing:.005em;font-family:var(--serif);font-size:1.12rem;color:var(--muted);line-height:1.6;}
.btn-submit{grid-column:1 / -1;justify-self:start;}
.form-note{grid-column:1 / -1;font-size:1.06rem;color:var(--muted);margin:6px 0 0;}
.form-note.ok{color:var(--gold-soft);}

.contact-visual{
  position:relative;overflow:hidden;
  border:1px solid var(--line-soft);
  aspect-ratio:4/5;
  box-shadow:var(--shadow-soft),0 0 60px rgba(185,146,79,.16);
}
.contact-visual::before{
  content:'';position:absolute;inset:0;z-index:2;
  background:radial-gradient(circle at 50% 100%,rgba(232,208,150,.22),transparent 62%);
  pointer-events:none;mix-blend-mode:screen;
}
.contact-visual::after{
  content:'';position:absolute;inset:0;
  border:1px solid rgba(208,176,117,.16);pointer-events:none;
  box-shadow:inset 0 0 70px rgba(0,0,0,.5);
}
.contact-visual img{width:100%;height:100%;object-fit:cover;transition:filter 1.2s ease,transform 1.2s ease;filter:brightness(.97);}
.contact-visual:hover img{filter:brightness(1.06);transform:scale(1.03);}

/* ================= FOOTER ================= */
.footer{
  position:relative;
  background:#0d0b09;
  border-top:1px solid var(--line);
  padding:64px 0 54px;
  text-align:center;
  overflow:hidden;
}
/* Nappe de lumière remontant du bas de page */
.footer::before{
  content:'';position:absolute;bottom:-42%;left:50%;transform:translateX(-50%);
  width:min(900px,120vw);height:min(640px,90vw);
  background:radial-gradient(circle,rgba(208,176,117,.17) 0%,rgba(185,146,79,.06) 45%,transparent 72%);
  filter:blur(40px);
  pointer-events:none;
  animation:haloRespireCentre 15s ease-in-out infinite;
}
.footer-inner{position:relative;z-index:1;}
.footer-brand{
  display:inline-block;
  font-family:var(--display);
  font-size:1.12rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ivoire);
  margin-bottom:18px;
  text-shadow:0 0 24px rgba(208,176,117,.35);
  transition:color .3s,text-shadow .4s;
}
.footer-brand:hover{color:var(--gold-soft);text-shadow:0 0 30px rgba(208,176,117,.75);}
.footer-eyebrow{font-style:italic;font-size:1.16rem;color:var(--ivoire-soft);max-width:58ch;margin:0 auto 18px;}
.footer-line{
  font-family:var(--display);
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--or-clair);
  margin-bottom:28px;
}
.fine{
  max-width:66ch;margin:0 auto;
  font-size:1.02rem;color:var(--faint);line-height:1.7;
}

/* ---------- Footer : liens légaux ---------- */
.footer-nav{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px;margin:0 auto 22px;
}
.footer-nav a{
  font-family:var(--display);
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .3s,border-color .3s,text-shadow .4s;
}
.footer-nav a:hover,
.footer-nav a:focus-visible{
  color:var(--gold-soft);
  border-bottom-color:var(--gold);
  text-shadow:0 0 22px rgba(208,176,117,.55);
}
.footer-sep{color:var(--line);font-size:.8rem;}
.footer-edit{
  max-width:70ch;margin:0 auto 16px;
  font-family:var(--display);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(242,234,217,.42);line-height:2;
}
.footer-edit strong{color:var(--or-clair);font-weight:400;}

/* ================= PAGES LÉGALES ================= */
.legal-sec .wrap{position:relative;z-index:1;}
.legal-wrap{text-align:left;}
.legal-wrap > .center,
.legal-wrap > .lede.center,
.legal-wrap > .kicker{text-align:center;}
.legal-wrap .kicker{display:block;text-align:center;}
.legal-wrap h1{text-align:center;margin-bottom:8px;}

.legal-updated{
  text-align:center;
  font-family:var(--display);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin:0 0 30px;
}

.legal-rule{
  width:64px;height:1px;margin:0 auto 44px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
}

.legal-h2{
  font-size:clamp(1.3rem,2.4vw,1.75rem);
  margin:52px 0 18px;
  padding-top:26px;
  border-top:1px solid var(--line-soft);
}
.legal-h2:first-of-type{border-top:0;padding-top:0;}

.legal-h3{
  font-family:var(--serif);
  font-size:1.22rem;font-style:italic;
  color:var(--gold-soft);
  margin:32px 0 12px;
}

.legal-wrap p{color:var(--muted);font-size:1.06rem;}
.legal-wrap strong{color:var(--ivoire);font-weight:400;}

.legal-card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(22px,3.4vw,32px);
  margin:0 0 26px;
  box-shadow:var(--shadow-soft);
}
.legal-card::before{
  content:'';position:absolute;inset:0;
  border-radius:var(--radius);
  background:radial-gradient(circle at 50% 0%,rgba(208,176,117,.08),transparent 68%);
  pointer-events:none;
}

.legal-dl{margin:0;}
.legal-dl dt{
  font-family:var(--display);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or-clair);
  margin:0 0 4px;
}
.legal-dl dd{
  margin:0 0 20px;
  color:var(--ivoire-soft);
  font-size:1.06rem;
  line-height:1.7;
}
.legal-dl dd:last-child{margin-bottom:0;}

.legal-note{
  display:block;
  margin-top:4px;
  font-size:.94rem;font-style:italic;
  color:var(--faint);
}

.legal-link{
  color:var(--gold-soft);
  border-bottom:1px solid var(--line);
  transition:color .3s,border-color .3s;
}
.legal-link:hover,.legal-link:focus-visible{
  color:var(--ivoire);
  border-bottom-color:var(--gold);
}

.legal-plain{color:var(--ivoire-soft);}

.legal-list{
  margin:0 0 22px;
  padding:0;
  list-style:none;
}
.legal-list li{
  position:relative;
  padding-left:26px;
  margin-bottom:10px;
  color:var(--muted);
  font-size:1.06rem;
}
.legal-list li::before{
  content:'\25C6';
  position:absolute;left:0;top:0;
  font-size:.62rem;line-height:2.9;
  color:var(--gold);
}

.legal-warning{
  position:relative;
  border:1px solid var(--line);
  border-left:2px solid var(--gold);
  border-radius:var(--radius);
  background:rgba(185,146,79,.06);
  padding:clamp(20px,3vw,28px);
  margin:0 0 26px;
}
.legal-warning p:last-child{margin-bottom:0;}
.legal-warning strong{color:var(--ivoire);font-weight:400;}

.legal-back{text-align:center;margin-top:8px;}

/* ================= AGE GATE (+18) ================= */
/* Voile plein écran affiché avant toute consultation du site. */
.age-gate{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,5vw,48px);
  background:rgba(9,8,6,.94);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  text-align:center;
  overflow-y:auto;
}
.age-gate[hidden]{display:none;}
.age-gate::before{
  content:'';position:absolute;top:-14%;left:50%;transform:translateX(-50%);
  width:min(780px,94vw);height:min(780px,94vw);
  background:var(--halo-or);
  filter:blur(42px);
  pointer-events:none;
  animation:haloRespireCentre 14s ease-in-out infinite;
}
.age-gate-inner{
  position:relative;z-index:1;
  max-width:620px;width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(30px,5vw,52px) clamp(24px,4vw,46px);
  box-shadow:var(--shadow-soft),0 0 60px rgba(208,176,117,.12);
}
.age-gate-mark{
  width:76px;height:auto;margin:0 auto 22px;display:block;
  filter:drop-shadow(0 0 14px rgba(208,176,117,.45));
}
.age-gate-title{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,2.15rem);
  line-height:1.3;letter-spacing:.04em;
  color:var(--ivoire);
  margin:0 0 18px;
}
.age-gate-title em{font-family:var(--serif);font-style:italic;color:var(--gold-soft);}
.age-gate-rule{
  width:64px;height:1px;margin:0 auto 22px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
}
.age-gate-text{
  color:var(--muted);
  font-size:1.06rem;line-height:1.8;
  margin:0 0 14px;
}
.age-gate-text strong{color:var(--ivoire);font-weight:400;}
.age-gate-warn{
  color:var(--faint);
  font-size:.96rem;font-style:italic;line-height:1.7;
  margin:0 0 30px;
}
.age-gate-actions{
  display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:center;
}
.age-gate-actions .btn{min-width:190px;text-align:center;}
.age-gate-refuse{
  display:block;margin:24px auto 0;
  font-family:var(--display);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
  background:none;border:0;cursor:pointer;
  border-bottom:1px solid transparent;
  padding:0 0 3px;
  transition:color .3s,border-color .3s;
}
.age-gate-refuse:hover,.age-gate-refuse:focus-visible{
  color:var(--gold-soft);
  border-bottom-color:var(--line);
  outline:none;
}
.age-gate-legal{
  margin:26px 0 0;
  font-size:.88rem;color:rgba(242,234,217,.4);line-height:1.7;
}
.age-gate-legal a{
  color:var(--or-clair);
  border-bottom:1px solid var(--line);
}
.age-gate-legal a:hover{color:var(--gold-soft);}

/* Le contenu du site reste inerte tant que la majorité n'est pas confirmée. */
body.age-locked{overflow:hidden;}
body.age-refused .age-gate-refuse{display:none;}

@keyframes haloRespireCentre{
  0%,100%{opacity:.8;transform:translateX(-50%) scale(1);}
  50%    {opacity:1; transform:translateX(-50%) scale(1.06);}
}

/* ================= REVEAL ================= */
.reveal{opacity:0;transform:translateY(18px);}
.reveal.is-visible{opacity:1;transform:none;transition:opacity .9s ease,transform .9s ease;}
/* L'apparition s'accompagne d'un très léger éclat lumineux */
.reveal.is-visible.card,
.reveal.is-visible.credential-card,
.reveal.is-visible.profile-visual{
  animation:eclatApparition 1.2s ease-out .1s both;
}
@keyframes eclatApparition{
  0%  {box-shadow:0 0 0 rgba(208,176,117,0);}
  45% {box-shadow:0 0 52px rgba(208,176,117,.42);}
  100%{box-shadow:0 0 22px rgba(208,176,117,.12);}
}

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .profile-grid,
  .contact-grid{grid-template-columns:1fr;}
  /* On garde le ratio 4/5 de la source : un portrait ne doit jamais
     etre ecrase en bandeau paysage, sinon le visage est rogne. On borne
     donc sa largeur, sinon il devient un mur vertical sur telephone. */
  .contact-visual{order:-1;max-width:440px;margin-inline:auto;}
  .cards{grid-template-columns:1fr;}
  .nav-menu{
    position:absolute;top:74px;left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(18,16,13,.98);
    border-bottom:1px solid var(--line-soft);
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .nav-menu.is-open{max-height:460px;}
  .nav-menu a{
    width:100%;padding:22px var(--gutter);
    border-top:1px solid var(--line-soft);
    font-size:.88rem;
    opacity:1;
  }
  .nav-menu .nav-cta{
    border:0;border-top:1px solid var(--line-soft);
    padding:22px var(--gutter);
  }
  .nav-burger{
    display:flex;padding:13px;margin-right:-6px;
    min-width:48px;min-height:48px;
    align-items:center;justify-content:center;
  }
  .nav-burger span{width:27px;}
  .hero{min-height:auto;padding:76px 0 68px;}
  .hero-ledge{font-size:1.16rem;}
  /* Les deux images etaient deja empilees, il n'y a plus rien a
     remettre dans le flux : on garde simplement la pile verticale. */
  .cred-arrow{width:54px;height:54px;font-size:1.25rem;}
  .cred-nav{gap:16px;}
  .card{padding:34px 28px;}
}
@media (max-width:620px){
  body{font-size:1.12rem;}
  .wrap{padding:0 20px;}
  .section{padding:60px 0;}
  .contact-form{grid-template-columns:1fr;gap:22px;}
  .cred-dots{display:none;}
  .btn{width:100%;text-align:center;padding:19px 24px;}
  .btn-submit{justify-self:stretch;}
  .cred-arrow{width:56px;height:56px;}
  /* Le portrait garde le ratio 4/5 de la source ; la bande en dessous
     conserve son 7/5, plus court, qui la distingue du portrait. */
  .profile-visual{aspect-ratio:4/5;}
  .cred-title{font-size:1.45rem;}
  .diamond{letter-spacing:.6em;padding-left:.3em;}
  .hero h1{font-size:clamp(2rem,8.8vw,2.7rem);}
  .hero-eyebrow,.kicker,.hero-note,.footer-line{letter-spacing:.18em;}
  .cred-stage{padding:14px;min-height:180px;}
  .check span{font-size:1.1rem;}
}
@media (max-width:400px){
  .brand{font-size:.98rem;letter-spacing:.18em;gap:9px;}
  .brand-mark{width:30px;height:15.3px;}
  .nav-inner{height:68px;}
  .nav-menu{top:68px;}
  .hero h1{font-size:clamp(1.7rem,9.5vw,2.1rem);}
  .nav-menu a{font-size:.84rem;}
  .kicker,.hero-eyebrow,.hero-note{font-size:.78rem;}
  .field label,.check span{font-size:.78rem;}
}
/* Le mouvement réduit doit désactiver les halos animés */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .reveal{opacity:1;transform:none;}
  .btn:hover,.btn:focus-visible{transform:none;}
  .glow,.hero::before,.hero::after,.footer::before{animation:none!important;}
  /* Pas d'animation : les deux pieces restent emboitees, en permanence. */
  .puzzle-piece--left,.puzzle-piece--right{transform:translate(0,0) rotate(0deg);}
}
/* Sur petits écrans, les halos sont réduits : ils coûtent cher au rendu
   et deviennent vite envahissants sur une largeur étroite. */
@media (max-width:620px){
  .glow{filter:blur(30px);opacity:.6;}
  .glow--centre{top:-4%;width:min(420px,110vw);height:min(420px,110vw);}
  .glow--gauche,.glow--droite{display:none;}
  .hero::before{filter:blur(34px);}
  .hero::after{display:none;}
  .footer::before{filter:blur(30px);}
  .card::before{opacity:.35;}
  .credential-card::after{opacity:.7;}
  .embleme>svg{width:124px;height:63.3px;}
}