/* =========================================================================
   APEX ADVISORY GROUP — Système de design premium
   Refonte 2026 · dark-luxe · inspiration haut de gamme
   Auto-hébergé, mobile-first, sans dépendance externe.
   ========================================================================= */

/* ---------- Polices auto-hébergées ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Variables ---------- */
:root{
  --gold:#C9A84C;
  --gold-bright:#E4C878;
  --gold-deep:#A6842F;
  --gold-grad:linear-gradient(135deg,#E4C878 0%,#C9A84C 45%,#A6842F 100%);
  --bg:#070707;
  --bg-2:#0b0b0c;
  --surface:#111112;
  --surface-2:#161617;
  --surface-3:#1c1c1e;
  --line:rgba(201,168,76,.14);
  --line-soft:rgba(240,236,228,.08);
  --cream:#F1EDE4;
  --text:#EDE9E0;
  --muted:rgba(240,236,228,.62);
  --muted-2:rgba(240,236,228,.42);
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --shadow-card:0 22px 60px -24px rgba(0,0,0,.9);
  --shadow-gold:0 20px 60px -20px rgba(201,168,76,.35);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --container:1200px;
  --nav-h:52px;          /* barre fine, calée sur celle des sites de démo */
  --nav-pad:env(safe-area-inset-top,0px);   /* encoche : la barre descend d'autant */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--nav-pad) + 12px);
  /* NE PAS borner overflow-x ici : ni hidden ni clip — les deux cassent le
     position:sticky du plateau de la séquence (vérifié : le plateau défile
     au lieu de rester en haut). Le débordement latéral est déjà bloqué par
     body{overflow-x:hidden}, et le geste par touch-action sur la scène. */
  overscroll-behavior-x:none;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  min-height:100vh;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:rgba(201,168,76,.28);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* Fond ambiant : halos or diffus + grain léger */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -8%,rgba(201,168,76,.10),transparent 60%),
    radial-gradient(900px 600px at 12% 8%,rgba(201,168,76,.055),transparent 55%),
    radial-gradient(1000px 1000px at 50% 120%,rgba(201,168,76,.06),transparent 60%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
}

/* ---------- Fond dynamique (canvas doré animé) ---------- */
/* Hauteur ancrée sur la plus grande zone possible : la barre du navigateur
   qui apparaît/disparaît ne redimensionne donc jamais le canvas (aucun « pop »). */
.fx-bg{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:-2;pointer-events:none;overflow:hidden}
.fx-bg::before{content:"";position:absolute;inset:0;background:url(../assets/avantages-bg.jpg) center/cover no-repeat;filter:blur(3px);opacity:.12}
.fx-bg::after{content:"";position:absolute;inset:0;background:rgba(7,7,7,.80)}
.fx-bg canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-fx canvas{position:absolute;inset:0;width:100%;height:100%}
.hero > .container{position:relative;z-index:2}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.container-narrow{max-width:840px}
.container-wide{max-width:1320px}
.section{padding-block:clamp(64px,10vw,132px);position:relative}
.section-tight{padding-block:clamp(44px,7vw,80px)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.relative{position:relative}
.hidden{display:none!important}

/* ---------- Typographie ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);
}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow.no-line::before{display:none}

h1,h2,h3,h4{font-weight:400;line-height:1.08;letter-spacing:-.01em;color:var(--cream)}
.display{font-family:var(--serif);font-weight:300;letter-spacing:.004em;line-height:1.06}
.h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,7vw,88px);line-height:1.02;letter-spacing:-.005em}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.6vw,56px);line-height:1.08}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,30px);line-height:1.2}
.h4{font-family:var(--sans);font-weight:600;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em}
.italic{font-style:italic}
.gold{color:var(--gold)}
.gold-text{background:linear-gradient(120deg,#F3E2AE,#C9A84C 55%,#A6842F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.lead{font-size:clamp(16px,1.7vw,20px);font-weight:300;line-height:1.7;color:var(--muted);max-width:60ch}
.body-muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:11px}
.hairline{width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:20px auto 0;box-shadow:0 0 14px rgba(201,168,76,.5)}
.hairline.left{margin-inline:0}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:14px 26px;border-radius:999px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,opacity .3s,border-color .3s;
  white-space:nowrap;cursor:pointer;text-align:center;
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
/* Libellé long (« Obtenir ma maquette sur mesure gratuitement ») : .btn
   interdit le retour à la ligne, et sur un téléphone étroit le texte était
   rogné et élargissait toute la page. Ici il peut passer sur deux lignes,
   équilibrées ; là où il tient sur une seule, rien ne change. */
.btn-long{white-space:normal;text-wrap:balance;line-height:1.25}
.btn-gold{
  background:var(--gold-grad);color:#0a0a08;font-weight:700;
  box-shadow:0 14px 34px -14px rgba(201,168,76,.7),inset 0 1px 0 rgba(255,255,255,.35);
}
/* Ces effets de survol DÉPLACENT leur élément. Sans la condition
   ci-dessous, un écran tactile invente un survol au premier appui : la
   cible bouge sous le doigt et le navigateur annule le clic — d'où le
   « il faut cliquer deux fois ». Sur ordinateur, rien ne change. */
@media (hover:hover) and (pointer:fine){.btn-gold:hover{transform:translateY(-2px);box-shadow:0 22px 48px -14px rgba(201,168,76,.8),inset 0 1px 0 rgba(255,255,255,.4)}}
.btn-gold:active{transform:translateY(0)}
.btn-ghost{
  background:rgba(255,255,255,.02);color:var(--cream);
  border:1px solid rgba(240,236,228,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn-ghost:hover{border-color:rgba(201,168,76,.5);color:#fff;background:rgba(201,168,76,.06)}
.btn-lg{padding:17px 34px;font-size:16px}
.btn-block{width:100%}
.btn-whatsapp{background:#1f2a24;border:1px solid rgba(37,211,102,.35);color:#eafff2}
.btn-whatsapp:hover{border-color:rgba(37,211,102,.7);background:#233128}

/* ---------- Pills / chips ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.5em;
  padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:500;
  background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.22);color:rgba(240,236,228,.85);
  white-space:nowrap;
}
.pill-row{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.chip{
  display:inline-flex;align-items:center;gap:.5em;padding:6px 13px;border-radius:999px;
  font-size:12px;font-weight:600;color:var(--gold);
  background:rgba(201,168,76,.10);border:1px solid rgba(201,168,76,.28);
}

/* ---------- Surfaces / cartes ---------- */
.card{
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.card-pad{padding:clamp(24px,3vw,36px)}
.glass{
  background:rgba(20,20,22,.6);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(240,236,228,.09);
}
.divider-gold{height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.5),transparent)}

/* ---------- Header ---------- */
/* Barre calée sur celle des sites de démo (barber 1) : pas de fond plein
   ni de filet, mais un voile dégradé flouté que le masque dissout vers le
   bas — la barre n'a plus de bord visible, elle se fond dans la page. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:calc(var(--nav-h) + var(--nav-pad));padding-top:var(--nav-pad);
  display:flex;align-items:center;color:var(--text);
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(8,7,9,.82),rgba(8,7,9,0));
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent);
          mask-image:linear-gradient(to bottom,#000 58%,transparent);
}
/* Sans flou disponible, on compense par un dégradé plus dense. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .site-header::before{background:linear-gradient(to bottom,rgba(8,7,9,.96),rgba(8,7,9,.72))}
}
/* Repère de défilement : l'ancre s'arrête pile sous la barre */
:where([id]){scroll-margin-top:calc(var(--nav-h) + var(--nav-pad) + 16px)}
/* Barre PLEINE LARGEUR, comme celle du barber : les éléments viennent près
   du bord de l'écran au lieu d'être enfermés dans la colonne centrale du
   site, qui les repoussait vers l'intérieur. */
.site-header .container{
  max-width:none;padding-inline:clamp(11px,2.2vw,30px);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:26px;width:auto;filter:drop-shadow(0 2px 10px rgba(201,168,76,.35))}
@media (max-width:420px){.brand img{height:23px}}
@media (max-width:360px){.brand img{height:20px}}
/* Liens en pastilles — mêmes proportions que la barre des sites de démo */
.nav-links{display:flex;align-items:center;gap:11px;font-size:13px;white-space:nowrap}
.nav-links a{
  display:inline-flex;align-items:center;font-weight:500;color:var(--cream);
  padding:9px 18px;border-radius:100px;
  border:1px solid rgba(244,241,234,.24);background:transparent;
  transition:background .3s var(--ease),border-color .3s,transform .3s var(--ease),color .3s;
}
/* Hauteur commune imposée aux trois, quelle que soit leur taille de texte :
   le bouton doré a un corps plus petit, sans cette règle il retombait un
   pixel plus bas que ses voisins et la rangée n'était pas d'aplomb. */
.nav-links a,.nav-links button{min-height:42px}
@media (max-width:1023px){.nav-links a,.nav-links button{min-height:38px}}
@media (max-width:560px){.nav-links a,.nav-links button{min-height:32px}}
@media (max-width:400px){.nav-links a,.nav-links button{min-height:28px}}
.nav-links a:hover{background:rgba(201,168,76,.16);border-color:var(--gold)}
.nav-links a:active{transform:scale(.96);opacity:.7}
@media (min-width:1180px){.nav-links{font-size:13.5px;gap:12px}}
.nav-cta{display:none}
/* Bouton et sélecteur de langue calés sur les proportions des démos */
.site-header .nav-cta{font-size:12px;font-weight:600;padding:9px 18px;border-radius:100px}
.site-header .lang-btn{padding:5px 8px;border-radius:9px}
.site-header .lang-flag{font-size:15px}
.site-header .nav-toggle{width:34px;height:34px;gap:5px}
.site-header .nav-toggle span{width:17px}
@media (max-width:420px){
  .site-header .nav-cta{font-size:10px;padding:6px 11px}
  .site-header .lang-flag{font-size:14px}
}
@media (min-width:1024px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
}
/* Sous 1024 px, les trois liens tiennent quand même : on réduit les
   proportions plutôt que d'en retirer un. */
@media (max-width:1023px){
  .nav-links{gap:8px;font-size:12px}
  .nav-links a{padding:8px 14px}
}
@media (max-width:560px){
  .nav-links{gap:5px;font-size:10.5px}
  .nav-links a{padding:6px 11px}
  .nav-right{gap:6px}
  .site-header .lang-btn{padding:4px 6px;gap:3px}
}
@media (max-width:400px){
  .nav-links{gap:3px;font-size:9.5px}
  .nav-links a{padding:5px 8px}
  .site-header .nav-toggle{width:28px;height:28px}
}
/* Burger minimaliste (style Apple) : deux fines lignes → croix */
.nav-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:38px;height:38px;border-radius:9px;margin-right:-6px}
.nav-toggle span{width:19px;height:1.5px;background:var(--cream);border-radius:2px;transition:transform .4s var(--ease)}
.nav-toggle span:nth-child(2){display:none}
/* Le burger disparaît dès que les liens tiennent dans la barre. La règle
   générique .nav-toggle{display:inline-flex} est écrite plus bas que la
   requête de média d'origine et l'emportait : on la neutralise ici. */
/* Le burger fait partie de l'ordre demandé : il reste visible partout. */
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-3.75px) rotate(-45deg)}

/* Menu mobile — petite carte flottante (haut-droite) */
.mobile-menu{
  position:fixed;top:calc(var(--nav-h) + var(--nav-pad) + 8px);right:clamp(12px,4vw,22px);z-index:99;
  width:min(80vw,290px);
  background:#161616;border:1px solid rgba(201,168,76,.28);border-radius:20px;
  padding:8px;display:flex;flex-direction:column;gap:1px;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.92);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.mobile-menu.open{opacity:1;visibility:visible;transform:none}
.mobile-menu a{
  font-family:var(--sans);font-weight:400;font-size:16px;color:var(--cream);
  padding:13px 16px;border-radius:13px;transition:background .2s,color .2s;
}
.mobile-menu a:hover{background:rgba(201,168,76,.09)}
.mobile-menu .btn{
  justify-content:flex-start;padding:13px 16px;margin-top:4px;border-radius:13px;
  font-family:var(--sans);font-size:16px;font-weight:600;
  background:rgba(201,168,76,.12);color:var(--gold);box-shadow:none;
}
.mobile-menu .btn:hover{transform:none;background:rgba(201,168,76,.2)}
@media (min-width:1024px){.mobile-menu{display:none!important}}

/* Groupe de contrôles à droite du header */
.nav-right{display:flex;align-items:center;gap:10px}

/* Sélecteur de langue (drapeau) */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(201,168,76,.32);background:rgba(255,255,255,.02);color:var(--cream);transition:border-color .3s,background .3s}
.lang-btn:hover{border-color:rgba(201,168,76,.6);background:rgba(201,168,76,.06)}
.lang-flag{font-size:17px;line-height:1}
.lang-chev{width:10px;height:6px;transition:transform .3s var(--ease);color:var(--gold)}
.lang.open .lang-chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);left:0;right:auto;z-index:120;min-width:158px;margin:0;
  background:#161616;border:1px solid rgba(201,168,76,.28);border-radius:14px;padding:6px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9);list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:top left;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:14px;color:var(--cream);cursor:pointer;transition:background .2s}
.lang-menu li:hover{background:rgba(201,168,76,.09)}
.lang-menu li[aria-selected="true"]{color:var(--gold);font-weight:600}
.lang-menu li .lang-flag{font-size:18px}

/* Aperçu « photo salon » dans le téléphone */
.mini-photo{position:absolute;inset:0;overflow:hidden;background:#000}
.mini-photo>img{width:100%;height:100%;object-fit:cover}
.mini-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,7,.25),rgba(7,7,7,.15) 45%,rgba(7,7,7,.75))}
.mini-photo-txt{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);z-index:2;text-align:center}
.mini-photo-title{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:34px;letter-spacing:.08em;color:#fff}
.mini-photo-sub{font-size:8px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:4px}
.mini-photo-scroll{position:absolute;left:0;right:0;bottom:16px;z-index:2;text-align:center;font-size:7.5px;letter-spacing:.35em;color:rgba(255,255,255,.6)}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:calc(var(--nav-h) + var(--nav-pad) + clamp(48px,10vw,110px));padding-bottom:clamp(40px,8vw,90px);overflow:hidden}
.hero-aura{position:absolute;inset:-20% -10% auto;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 30%,rgba(201,168,76,.16),transparent 70%);
  filter:blur(20px);
}

/* ---------- Grilles ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr 1fr}
@media (min-width:720px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}
.stack{display:flex;flex-direction:column}
.gap-sm{gap:12px}.gap-md{gap:20px}.gap-lg{gap:32px}

/* ---------- Feature / process cards ---------- */
.feature{
  background:linear-gradient(180deg,var(--surface) 0%,#0e0e0f 100%);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:14px;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
}
@media (hover:hover) and (pointer:fine){.feature:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:var(--shadow-card)}}
/* Emoji seul, sans encadré. La boîte reste de taille fixe pour que les
   cartes restent alignées, et la police emoji est imposée : sans elle,
   certains signes tombaient sur une variante « texte » plus petite ou plus
   grande que les autres. */
.feature .ico{
  width:44px;height:44px;flex:0 0 auto;
  display:grid;place-items:center;
  background:none;border:0;border-radius:0;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
  font-size:27px;line-height:1;font-variant-emoji:emoji;
}
/* Correction optique. Mesuré : l'éclair occupe 82 px d'encre sur 82 de
   corps, contre ~78 pour les pictogrammes voisins, ET c'est une forme
   pleine là où les autres sont ajourés — il paraît donc plus gros à
   taille égale. On le ramène au même poids visuel. */
.feature .ico[data-optical="down"]{font-size:24px}
.feature h3{font-family:var(--sans);font-weight:600;font-size:19px;color:#fff;letter-spacing:-.01em}
.feature p{color:var(--muted);font-size:14.5px;line-height:1.65}
.step-num{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:500;font-size:20px;color:#0a0a08;background:var(--gold-grad);flex:0 0 auto;
  box-shadow:0 8px 20px -8px rgba(201,168,76,.6)
}

/* ---------- Offre / prix ---------- */
.offer{
  position:relative;background:linear-gradient(180deg,#161514 0%,#101010 100%);
  border:1px solid rgba(201,168,76,.32);border-radius:var(--radius-lg);
  padding:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(201,168,76,.05),0 0 60px -30px rgba(201,168,76,.4);
}
.offer::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(201,168,76,.6),transparent 40%,transparent 60%,rgba(201,168,76,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.price{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(40px,6.4vw,54px);line-height:1;color:var(--cream)}
.price-old{font-size:19px;color:var(--muted-2);text-decoration:line-through;font-weight:500}
/* Prix mis en valeur — or vif, sans cadre */
.price-hl{display:inline-flex;align-items:baseline;gap:12px}
.price-hl .price{background:linear-gradient(120deg,#F6E7B0,#E4C878 45%,#C9A84C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.feat-list{display:flex;flex-direction:column;gap:13px}
.feat-list li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--muted);line-height:1.5}
.feat-list .check{flex:0 0 auto;width:20px;height:20px;border-radius:50%;margin-top:1px;
  display:flex;align-items:center;justify-content:center;background:rgba(201,168,76,.14);color:var(--gold)}
.feat-list .check svg{width:12px;height:12px}
.badge-cert{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;
  background:#1877F2;color:#fff;font-size:11px;font-weight:700;vertical-align:middle;margin-left:7px}

/* ---------- Démos (grille compacte, extensible) ---------- */
.demo-grid{display:grid;gap:clamp(12px,1.8vw,18px);grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.demo-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.demo-grid{grid-template-columns:repeat(4,1fr)}}
.demo-card{
  display:block;position:relative;overflow:hidden;border-radius:14px;
  background:#0b0b0b;border:1px solid rgba(201,168,76,.28);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.9);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
}
@media (hover:hover) and (pointer:fine){.demo-card:hover{transform:translateY(-5px);border-color:rgba(201,168,76,.6);box-shadow:0 24px 50px -26px rgba(0,0,0,.95),0 0 30px -18px rgba(201,168,76,.5)}}
.demo-media{position:relative;aspect-ratio:3/4;overflow:hidden;background:#070707}
.demo-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
@media (hover:hover) and (pointer:fine){.demo-card:hover .demo-media img{transform:scale(1.06)}}
.demo-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(6,6,6,.9) 100%)}
/* Deux étiquettes côte à côte (modèle + mention) : le conteneur prend la
   position, les étiquettes gardent exactement leur apparence. Elles
   passent à la ligne d'elles-mêmes sur les cartes étroites. */
.demo-badges{position:absolute;top:9px;left:9px;right:9px;z-index:2;display:flex;flex-wrap:wrap;gap:5px}
.demo-badges .demo-badge{position:static;top:auto;left:auto}
.demo-badge{position:absolute;top:9px;left:9px;z-index:2;font-size:9.5px;font-weight:600;letter-spacing:.05em;
  padding:4px 9px;border-radius:999px;color:var(--gold);
  background:rgba(10,10,10,.55);border:1px solid rgba(201,168,76,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.demo-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 12px 13px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.demo-meta .t{font-family:var(--serif);font-weight:500;font-size:15px;color:#fff;line-height:1.2}
.demo-meta .s{font-size:10.5px;color:var(--gold);margin-top:2px;display:flex;align-items:center;gap:4px}
.demo-arrow{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(201,168,76,.14);border:1px solid rgba(201,168,76,.45);color:var(--gold);font-size:13px;
  transition:transform .4s var(--ease),background .3s}
@media (hover:hover) and (pointer:fine){.demo-card:hover .demo-arrow{transform:translateX(3px);background:rgba(201,168,76,.24)}}

/* ---------- Filtre par secteur d'activité ---------- */
.sectors{margin-top:clamp(26px,3.4vw,38px)}
.sectors-rail{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:2px 0}
@media (max-width:640px){
  /* Mobile : rail horizontal qui défile, avec accroche */
  .sectors-rail{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-inline:clamp(20px,5vw,40px);margin-inline:calc(-1 * clamp(20px,5vw,40px));
  }
  .sectors-rail::-webkit-scrollbar{display:none}
  .sector-btn{scroll-snap-align:center;flex:0 0 auto}
}
.sector-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  padding:11px 22px;border-radius:999px;cursor:pointer;white-space:nowrap;
  color:rgba(240,236,228,.72);
  background:rgba(255,255,255,.025);
  border:1px solid rgba(240,236,228,.14);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .25s var(--ease),box-shadow .3s var(--ease);
}
.sector-btn:hover{color:var(--cream);border-color:rgba(201,168,76,.45);background:rgba(201,168,76,.06)}
.sector-btn:active{transform:scale(.97)}
.sector-btn .n{
  font-size:11.5px;font-weight:600;line-height:1;padding:3px 7px;border-radius:999px;
  background:rgba(240,236,228,.09);color:rgba(240,236,228,.6);transition:background .3s,color .3s;
}
.sector-btn[aria-selected="true"]{
  color:#0a0a08;font-weight:700;
  background:var(--gold-grad);border-color:transparent;
  box-shadow:0 10px 26px -12px rgba(201,168,76,.75),inset 0 1px 0 rgba(255,255,255,.35);
}
.sector-btn[aria-selected="true"] .n{background:rgba(10,10,8,.22);color:rgba(10,10,8,.75)}

/* Indication de balayage */
.swipe-hint{
  display:flex;align-items:center;justify-content:center;gap:4px;
  margin-top:14px;font-size:11.5px;letter-spacing:.06em;color:rgba(240,236,228,.38);user-select:none;
}
.swipe-hint span{padding-inline:5px}
/* Flèches : cliquables (souris) et animées (indication de balayage) */
.swipe-nav{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;cursor:pointer;color:rgba(201,168,76,.7);
  background:transparent;border:1px solid transparent;
  transition:background .25s,border-color .25s,color .25s;
}
.swipe-nav:hover{color:var(--gold);background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.35)}
.swipe-nav svg{width:13px;height:13px}
/* Le texte s'adapte au support */
.swipe-hint .t-touch{display:none}
@media (hover:none),(pointer:coarse){
  .swipe-hint .t-touch{display:inline}
  .swipe-hint .t-mouse{display:none}
}
.swipe-nav .a1{animation:nudgeL 2.4s ease-in-out infinite}
.swipe-nav .a2{animation:nudgeR 2.4s ease-in-out infinite}
.swipe-nav:hover .a1,.swipe-nav:hover .a2{animation:none}
@keyframes nudgeL{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(-3px);opacity:1}}
@keyframes nudgeR{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(3px);opacity:1}}
@media (prefers-reduced-motion:reduce){.swipe-nav .a1,.swipe-nav .a2{animation:none}}

/* Vue par secteur : défilement horizontal natif (élan et accroche du système)
   → le contenu suit le doigt, sans saut d'une catégorie à l'autre. */
.sectors-view{
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin-top:clamp(22px,4vw,34px);
}
.sectors-view::-webkit-scrollbar{display:none}
.sectors-panel{flex:0 0 100%;scroll-snap-align:center;min-width:0;padding:2px 0 4px}
.sectors-panel .demo-grid{margin-top:0}
@media (prefers-reduced-motion:reduce){.sectors-view{scroll-behavior:auto}}

/* Étiquette secteur sur la carte */
.demo-sector{
  display:block;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(201,168,76,.92);margin-bottom:3px;
}

/* ---------- Marquee (domaines) ---------- */
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:24px;width:max-content;animation:scrollx 40s linear infinite}
/* Vitrine purement décorative : aucune interaction. Sans cela, un appui
   sur mobile « collait » l'état survolé et le défilement ne repartait plus. */
.marquee,.marquee *{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
/* La pause au survol n'a de sens qu'avec une souris. */
@media (hover:hover) and (pointer:fine){
  .marquee{pointer-events:auto}
  .marquee:hover .marquee-track{animation-play-state:paused}
}
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee-item{position:relative;flex:0 0 auto;width:min(86vw,720px);aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:#0a0a0a;box-shadow:var(--shadow-card)}
.marquee-item img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- Points forts numérotés ---------- */
.stat-row{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:720px){.stat-row{grid-template-columns:repeat(3,1fr)}}
.stat{padding:26px;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--line-soft);text-align:center}
.stat .n{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5vw,52px);line-height:1;color:var(--gold)}
.stat .l{margin-top:8px;font-size:13.5px;color:var(--muted)}

.numbered{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);padding:26px 24px 26px 26px;display:flex;gap:20px;align-items:flex-start}
.numbered .num{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5vw,52px);line-height:1;color:var(--gold);flex:0 0 auto;margin-top:-4px}
.numbered h3{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.6vw,26px);color:var(--cream);line-height:1.3;margin-bottom:8px}
.numbered p{font-size:15px;font-weight:300;color:rgba(240,236,228,.55);line-height:1.6}

/* ---------- Carrousel à étapes (méthode, avis) ---------- */
.stepper{margin-top:clamp(28px,5vw,44px)}
.stepper__rail{--dot:38px;position:relative;display:flex;align-items:center;justify-content:space-between;max-width:520px;margin:0 auto}
.stepper__line{position:absolute;left:calc(var(--dot)/2);right:calc(var(--dot)/2);top:50%;height:1px;margin-top:-.5px;background:rgba(240,236,228,.14)}
/* Largeur pilotée image par image : la barre colle exactement au geste. */
.stepper__fill{display:block;height:100%;width:0;background:var(--gold-grad);will-change:width}
.stepper__dot{
  position:relative;z-index:1;flex:0 0 auto;width:var(--dot);height:var(--dot);border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:var(--bg-2);border:1px solid rgba(240,236,228,.18);
  color:rgba(240,236,228,.5);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:transform .35s var(--ease),background .35s,border-color .35s,color .35s,box-shadow .35s;
}
.stepper__dot.is-done{border-color:rgba(201,168,76,.45);color:var(--gold)}
.stepper__dot.is-on{
  background:var(--gold-grad);border-color:transparent;color:#0a0a08;transform:scale(1.16);
  box-shadow:0 0 0 4px rgba(201,168,76,.13),0 8px 20px -6px rgba(201,168,76,.6);
}
.stepper__track{
  position:relative;margin-top:clamp(22px,4vw,32px);display:flex;gap:16px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:8px clamp(20px,5vw,40px) 14px;margin-inline:calc(-1 * clamp(20px,5vw,40px));
}
.stepper__track::-webkit-scrollbar{display:none}
/* Opacité et échelle sont pilotées image par image par le script : la carte
   suit le doigt en temps réel, sans le retard qu'introduirait une transition. */
.stepper__card{
  flex:0 0 min(86%,420px);scroll-snap-align:center;text-align:left;
  background:linear-gradient(180deg,var(--surface) 0%,#0e0e0f 100%);
  border:1px solid var(--line-soft);border-radius:20px;padding:clamp(22px,4vw,30px);
  display:flex;flex-direction:column;box-shadow:0 14px 34px -20px rgba(0,0,0,.9);
  opacity:.62;transform:scale(.955);transform-origin:50% 45%;will-change:opacity,transform;
  transition:box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.stepper__card.is-on{border-color:var(--line);box-shadow:var(--shadow-card)}
.stepper__n{
  align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:24px;padding:0 10px;border-radius:100px;
  background:rgba(201,168,76,.12);color:var(--gold);
  font-size:11px;font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums;
}
.stepper__card h3{margin-top:15px;font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-.01em;color:#fff}
.stepper__card p{margin-top:9px;font-size:14.6px;line-height:1.6;color:var(--muted)}
.stepper__foot{margin-top:clamp(14px,3vw,22px);display:flex;align-items:center;justify-content:center;gap:18px}
.stepper__arrow{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(240,236,228,.16);color:var(--cream);
  transition:background .3s,border-color .3s,opacity .3s,transform .3s var(--ease),color .3s;
}
.stepper__arrow[disabled]{opacity:.28;cursor:default}
.stepper__arrow:not([disabled]):hover{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.45);color:var(--gold)}
.stepper__arrow:not([disabled]):active{transform:scale(.93)}
.stepper__arrow svg{width:16px;height:16px}
.stepper__now{min-width:78px;text-align:center;font-size:13px;letter-spacing:.08em;color:var(--muted-2);font-variant-numeric:tabular-nums}
.stepper__now b{font-size:16px;font-weight:600;color:#fff}
/* Beaucoup de cartes (avis) : pastilles un peu plus compactes */
.stepper--reviews .stepper__rail{--dot:32px;max-width:440px}
.stepper--reviews .stepper__dot{font-size:10px}
.stepper--reviews .stepper__card{flex-basis:min(84%,380px)}

/* ---------- Avis ---------- */
.review{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:22px;transition:border-color .4s,transform .4s}
@media (hover:hover) and (pointer:fine){.review:hover{border-color:var(--line);transform:translateY(-3px)}}
.review .name{font-weight:600;color:#fff;font-size:14.5px;margin-bottom:3px}
.stars{display:flex;gap:2px;margin-bottom:10px;color:var(--gold)}
.stars svg{width:14px;height:14px;fill:var(--gold)}
.review p{font-size:13.5px;line-height:1.65;color:rgba(240,236,228,.8)}

/* ---------- Accordéon FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;
  padding:20px 22px;font-size:15px;font-weight:500;color:#fff}
.faq-q .chev{flex:0 0 auto;color:var(--gold);transition:transform .35s var(--ease)}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 22px 20px;font-size:14px;line-height:1.7;color:rgba(240,236,228,.72)}

/* ---------- Bandeau confiance ---------- */
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;font-size:12.5px;color:rgba(201,168,76,.9)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust .sep{color:rgba(201,168,76,.3)}
.trust svg{width:14px;height:14px}

/* ---------- CTA mobile fixe ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:8px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,8,8,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  /* Masqué : en plus du glissement, on le rend réellement invisible et
     inerte. Le décalage seul ne dégageait l'écran que de quelques pixels —
     le moindre changement de hauteur (police, zone sûre, texte sur deux
     lignes) laissait apparaître une bande du bouton. L'animation d'entrée
     et l'apparence restent identiques. */
  transform:translateY(120%);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .45s var(--ease),opacity .3s var(--ease),visibility 0s linear .45s;
}
.sticky-cta.show{
  transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .45s var(--ease),opacity .3s var(--ease),visibility 0s;
}
/* Premier état appliqué sans animation : aucun glissement au chargement */
.sticky-cta.no-anim{transition:none}
.sticky-cta p{font-size:10.5px;line-height:1.3;color:var(--muted);text-align:center;margin-bottom:5px}
@media (min-width:768px){.sticky-cta{display:none}}
.has-sticky{padding-bottom:96px}
@media (min-width:768px){.has-sticky{padding-bottom:0}}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line-soft);background:linear-gradient(180deg,transparent,rgba(0,0,0,.5));padding-block:clamp(48px,7vw,72px) 34px;margin-top:clamp(40px,8vw,90px)}
.footer-grid{display:grid;gap:38px;grid-template-columns:1fr}
@media (min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer h4{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.04em;color:#fff;margin-bottom:16px;text-transform:uppercase}
.site-footer nav{display:flex;flex-direction:column;gap:10px}
.site-footer a{font-size:14px;color:var(--muted);transition:color .3s}
.site-footer a:hover{color:var(--gold)}
.footer-brand p{font-size:14px;color:var(--muted);line-height:1.65;max-width:34ch;margin-top:14px}
.footer-bottom{border-top:1px solid var(--line-soft);margin-top:38px;padding-top:24px;text-align:center;font-size:12px;color:var(--muted-2)}

/* ---------- Reveal au défilement ----------
   Le contenu n'est masqué QUE si JS est actif (.js) : sans JS, tout reste visible. */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal-delay="1"]{transition-delay:.08s}
.js [data-reveal-delay="2"]{transition-delay:.16s}
.js [data-reveal-delay="3"]{transition-delay:.24s}
.js [data-reveal-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .marquee-track{animation:none}
}

/* ---------- Pages légales ---------- */
.legal{display:flex;flex-direction:column;gap:26px}
.legal-art h2{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--gold);margin-bottom:8px;text-transform:uppercase}
.legal-art p{font-size:13.5px;line-height:1.85;color:rgba(240,236,228,.82);white-space:pre-line}

/* ---------- Accueil : hero showcase ---------- */
.hero-split{display:grid;gap:clamp(32px,5vw,60px);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.hero-split{grid-template-columns:1.05fr .95fr}}
/* Le téléphone est désormais une seule image (coque + contenu). On garde
   l'encombrement de l'ancien gabarit — même hauteur — et la largeur suit
   les proportions réelles de la maquette, pour ne pas déplacer la mise en
   page du hero. */
.showcase{position:relative;justify-self:center;
  height:min(calc(78vw * 17 / 9), 604px);
  aspect-ratio:515 / 1075;width:auto}
.showcase-device{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 46px 90px rgba(0,0,0,.85)) drop-shadow(0 0 64px rgba(201,168,76,.20));
  animation:float 7s ease-in-out infinite;
  /* décorative : ni clic ni aperçu au appui long */
  pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.showcase-frame{position:absolute;inset:0;border-radius:38px;padding:10px;
  background:linear-gradient(160deg,#2a2a2c,#0d0d0e);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 0 1px rgba(201,168,76,.18),0 0 70px -30px rgba(201,168,76,.4);
  animation:float 7s ease-in-out infinite}
.showcase-frame::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:60px;height:5px;border-radius:99px;background:rgba(255,255,255,.14);z-index:3}
.showcase-screen{position:absolute;inset:10px;border-radius:30px;overflow:hidden;background:#000}
.showcase-screen img{width:100%;height:100%;object-fit:cover}
/* Mini-site affiché dans le téléphone — aperçu cohérent d'un vrai site */
.mini{position:absolute;inset:0;display:flex;flex-direction:column;background:#0b0b0c;font-family:var(--sans)}
.mini-bar{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;flex:0 0 auto}
.mini-logo{font-family:var(--serif);font-weight:500;font-size:14px;letter-spacing:.14em;color:var(--gold)}
.mini-burger{width:15px;height:9px;border-top:1.5px solid rgba(255,255,255,.85);border-bottom:1.5px solid rgba(255,255,255,.85)}
.mini-hero{position:relative;flex:1;overflow:hidden}
.mini-hero img{width:100%;height:100%;object-fit:cover}
.mini-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,7,.05) 30%,rgba(7,7,7,.9))}
.mini-hero-txt{position:absolute;left:14px;right:14px;bottom:14px;z-index:2}
.mini-eyebrow{font-size:7.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.mini-title{font-family:var(--serif);font-weight:300;font-size:23px;line-height:1.02;color:#fff;margin:5px 0 10px}
.mini-btn{display:inline-block;font-size:8.5px;font-weight:700;color:#0a0a08;background:var(--gold-grad);padding:6px 14px;border-radius:99px}
.mini-thumbs{display:flex;gap:6px;padding:11px 13px;flex:0 0 auto;background:#0b0b0c}
.mini-thumbs span{flex:1;aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,#1b1b1d,#111);border:1px solid rgba(201,168,76,.22)}
.showcase-glow{position:absolute;inset:-14%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,.22),transparent 65%);filter:blur(10px)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.showcase-frame,.showcase-device{animation:none}}

/* ---------- Piliers ---------- */
.pillar{background:linear-gradient(180deg,var(--surface) 0%,#0e0e0f 100%);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:clamp(24px,3vw,32px);transition:transform .5s var(--ease),border-color .5s}
@media (hover:hover) and (pointer:fine){.pillar:hover{transform:translateY(-6px);border-color:var(--line)}}
.pillar .big{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4vw,42px);color:var(--gold);line-height:1}
.pillar h3{font-family:var(--sans);font-weight:600;font-size:18px;color:#fff;margin:14px 0 8px}
.pillar p{color:var(--muted);font-size:14.5px;line-height:1.65}

/* ---------- Liste services ---------- */
.svc{display:flex;gap:18px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--line-soft)}
.svc:last-child{border-bottom:1px solid var(--line-soft)}
.svc .svc-ico{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:22px;background:rgba(201,168,76,.10);border:1px solid rgba(201,168,76,.24)}
.svc h3{font-family:var(--sans);font-weight:600;font-size:18px;color:#fff}
.svc p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:4px}

/* ---------- Bloc CTA final ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(40px,6vw,72px) clamp(24px,4vw,48px);text-align:center;
  background:linear-gradient(160deg,#17150f,#0b0b0b);border:1px solid rgba(201,168,76,.28)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 80% at 50% 0%,rgba(201,168,76,.16),transparent 70%)}
.cta-band>*{position:relative;z-index:1}

/* ---------- Questionnaire de diagnostic ---------- */
.dg-overlay{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,32px);background:rgba(4,4,4,.72);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.dg-overlay.open{opacity:1;visibility:visible}
.dg{
  position:relative;width:100%;max-width:560px;max-height:min(88vh,760px);
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#141415 0%,#0d0d0e 100%);
  border:1px solid rgba(201,168,76,.3);border-radius:26px;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95),0 0 70px -40px rgba(201,168,76,.5);
  transform:translateY(14px) scale(.98);transition:transform .4s var(--ease);
}
.dg-overlay.open .dg{transform:none}
.dg__top{padding:20px 22px 0;flex:0 0 auto}
.dg__bar{height:3px;border-radius:99px;background:rgba(240,236,228,.1);overflow:hidden}
.dg__bar span{display:block;height:100%;width:0;background:var(--gold-grad);transition:width .45s var(--ease)}
.dg__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.dg__step{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
.dg__close{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid rgba(240,236,228,.12);transition:color .25s,background .25s;
}
.dg__close:hover{color:#fff;background:rgba(255,255,255,.08)}
.dg__body{flex:1 1 auto;overflow-y:auto;padding:18px 22px 6px;-webkit-overflow-scrolling:touch}
.dg__q{font-family:var(--serif);font-weight:300;font-size:clamp(23px,4.4vw,30px);line-height:1.18;color:var(--cream)}
.dg__hint{font-size:13px;color:var(--muted-2);margin-top:8px;line-height:1.55}
.dg__opts{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.dg__opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:14px 16px;border-radius:14px;font-size:15px;color:var(--cream);
  background:rgba(255,255,255,.025);border:1px solid rgba(240,236,228,.12);
  transition:border-color .25s,background .25s,transform .2s var(--ease);
}
.dg__opt:hover{border-color:rgba(201,168,76,.45);background:rgba(201,168,76,.06)}
.dg__opt:active{transform:scale(.99)}
.dg__opt[aria-pressed="true"]{border-color:var(--gold);background:rgba(201,168,76,.12);font-weight:600}
.dg__tick{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(240,236,228,.28);color:transparent;transition:background .25s,border-color .25s,color .25s;
}
.dg__opt[aria-pressed="true"] .dg__tick{background:var(--gold-grad);border-color:transparent;color:#0a0a08}
.dg__tick svg{width:11px;height:11px}
/* Questions à réponses multiples : la case devient carrée — le signe
   universel de la case à cocher, là où le rond dit « un seul choix ». */
.dg__opts--multi .dg__tick{border-radius:6px}
.dg__multi{margin-top:10px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:600}
.dg__free{margin-top:12px}
.dg__free input,.dg__free textarea{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--cream);
  background:rgba(255,255,255,.025);border:1px solid rgba(240,236,228,.12);
  border-radius:14px;padding:14px 16px;transition:border-color .25s,background .25s;
}
.dg__free textarea{resize:vertical;min-height:104px;line-height:1.55}
.dg__free input:focus,.dg__free textarea:focus{outline:none;border-color:rgba(201,168,76,.55);background:rgba(201,168,76,.05)}
.dg__free input::placeholder,.dg__free textarea::placeholder{color:rgba(240,236,228,.32)}
/* Question à plusieurs champs (coordonnées) */
.dg__fields{margin-top:20px}
.dg__fields .dg__free:first-child{margin-top:0}
.dg__foot{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 22px 20px;
  border-top:1px solid rgba(240,236,228,.07);background:rgba(0,0,0,.22);
}
.dg__back{
  padding:12px 18px;border-radius:999px;font-size:14px;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid rgba(240,236,228,.14);transition:color .25s,border-color .25s;
}
.dg__back:hover{color:var(--cream);border-color:rgba(240,236,228,.3)}
.dg__next{flex:1;justify-content:center}
.dg__done{text-align:center;padding:30px 6px 16px}
.dg__done .ico{
  width:70px;height:70px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-grad);color:#0a0a08;font-size:32px;font-weight:700;
  box-shadow:0 16px 40px -14px rgba(201,168,76,.75);
}
.dg__done h3{font-family:var(--serif);font-weight:300;font-size:clamp(26px,5vw,34px);color:var(--cream);margin-top:20px;line-height:1.15}
.dg__done p{font-size:15px;line-height:1.7;color:var(--muted);margin-top:16px;max-width:42ch;margin-inline:auto}
@media (prefers-reduced-motion:reduce){.dg-overlay,.dg{transition:none}}

/* ---------- Utilitaires ---------- */
.mt-xs{margin-top:8px}.mt-sm{margin-top:16px}.mt-md{margin-top:28px}.mt-lg{margin-top:44px}.mt-xl{margin-top:clamp(48px,8vw,90px)}
.mb-sm{margin-bottom:16px}.mb-md{margin-bottom:28px}.mb-lg{margin-bottom:44px}
.maxw-sm{max-width:520px}.maxw-md{max-width:680px}.maxw-lg{max-width:900px}
.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}.flex-col{flex-direction:column}
.w-full{width:100%}
.order-first{order:-1}

/* ================================================================
   Barre de navigation : logo · langue | Offre · Démos · Diagnostic
   · recherche
   ================================================================ */
.nav-left{display:flex;align-items:center;gap:clamp(7px,2.4vw,12px);min-width:0;flex:0 1 auto}

/* Le bouton Diagnostic reprend l'allure des liens en pastilles, avec
   une teinte dorée qui le distingue sans en faire un bouton plein. */
.nav-links button{
  display:inline-flex;align-items:center;font-family:var(--sans);
  /* Un cran sous les liens voisins : le bouton est plein et doré, il pèse
     donc plus lourd à taille égale. Le remplissage vertical compense pour
     que la hauteur reste rigoureusement la même. */
  font-size:11px;
  font-weight:600;color:#17120a;white-space:nowrap;cursor:pointer;
  padding:10px 13px;border-radius:100px;
  /* Filet transparent : les liens voisins en ont un, sans lui le bouton
     mesurait 2 px de moins et la rangée n'était pas d'aplomb. */
  border:1px solid transparent;
  background:var(--gold-grad);
  box-shadow:0 4px 16px rgba(201,168,76,.26);
  transition:opacity .3s,transform .3s var(--ease),box-shadow .3s var(--ease);
}
.nav-links button:hover{box-shadow:0 8px 24px rgba(201,168,76,.36)}
.nav-links button:active{transform:scale(.97);opacity:.75}
/* Paliers du bouton doré — placés APRÈS sa règle de base, sinon ils sont
   écrasés (même spécificité, c'est la dernière déclaration qui gagne). */
@media (max-width:1023px){.nav-links button{font-size:10px;padding:9px 11px}}
@media (max-width:560px){.nav-links button{font-size:9px;padding:7px 9px}}
@media (max-width:400px){.nav-links button{font-size:8.5px;padding:6px 8px}}

/* ---------- Recherche ---------- */
.nav-search{position:relative;display:flex;align-items:center;flex:0 0 auto}
.nav-search__btn{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:100px;color:var(--cream);
  border:1px solid rgba(244,241,234,.24);
  transition:background .3s var(--ease),border-color .3s;
}
.nav-search__btn:hover{background:rgba(201,168,76,.14);border-color:var(--gold)}
.nav-search__btn svg{width:16px;height:16px}

.nav-search__panel{
  position:absolute;top:calc(100% + 12px);right:0;width:min(78vw,320px);
  display:none;align-items:center;gap:9px;
  padding:9px 13px;border-radius:100px;
  background:rgba(14,14,15,.94);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95);
}
.nav-search.is-open .nav-search__panel{display:flex}
.nav-search__icon{width:15px;height:15px;color:rgba(244,241,234,.5);flex:0 0 auto}
.nav-search__input{
  flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);
  font-family:var(--sans);font-size:13px;
}
.nav-search__input::placeholder{color:rgba(244,241,234,.42)}
/* la croix native de Safari/Chrome doublerait notre propre bouton */
.nav-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.nav-search__clear{
  flex:0 0 auto;color:rgba(244,241,234,.5);font-size:19px;line-height:1;padding:0 2px;
  transition:color .3s;
}
.nav-search__clear:hover{color:var(--cream)}

.nav-search__list{
  position:absolute;top:calc(100% + 9px);left:auto;right:0;width:min(84vw,340px);
  max-height:min(58vh,370px);overflow-y:auto;overscroll-behavior:contain;
  padding:6px;border-radius:18px;z-index:2;
  background:rgba(14,14,15,.97);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
}
.nav-search__list li{
  display:flex;flex-direction:column;gap:2px;
  padding:9px 12px;border-radius:12px;cursor:pointer;
  transition:background .2s var(--ease);
}
.nav-search__list li:hover,
.nav-search__list li.is-on{background:rgba(201,168,76,.15)}
.nav-search__list b{font-size:13px;font-weight:600;color:var(--cream)}
.nav-search__list small{font-size:11.5px;color:var(--muted);font-weight:400}
.nav-search__list .nav-search__none{
  padding:13px;font-size:12.5px;color:var(--muted);text-align:center;cursor:default;
}
.nav-search__list .nav-search__none:hover{background:none}

@media (min-width:1024px){
  /* Sur grand écran le champ est toujours là : pas de clic supplémentaire. */
  .nav-search__btn{display:none}
  .nav-search__panel{position:static;display:flex;width:196px;padding:7px 13px}
  .nav-search__list{top:calc(100% + 11px)}
}
@media (min-width:1180px){.nav-search__panel{width:224px}}

/* ================================================================
   Séquence d'ouverture pilotée au défilement (page « site web »)
   ----------------------------------------------------------------
   Structure calquée sur le site de démonstration barber 1.
   Les deux hauteurs sont posées en PIXELS par js/hero-seq.js et ne
   bougent plus ensuite : le plateau vaut le plus grand écran utile,
   si bien que le repli de la barre d'URL ne redimensionne rien. Les
   valeurs de repli ci-dessous ne servent qu'avant l'exécution du
   script.
   ================================================================ */
.hseq{display:none}                       /* sans JS : rien, plutôt qu'un vide noir */
.seq-ok .hseq{
  display:block;position:relative;z-index:1;
  height:var(--hseq-h,300vh);
  background:#050505;
}
/* Seul le défilement vertical agit sur la scène : un geste latéral ne doit
   rien produire, il laissait apparaître le fond du site sur les côtés. */
.hseq,.hseq__stage{touch-action:pan-y pinch-zoom}
.hseq__stage{
  position:sticky;top:0;
  height:var(--hseq-stage-h,100vh);
  height:var(--hseq-stage-h,100lvh);
  overflow:hidden;background:#050505;
  display:flex;align-items:center;justify-content:center;
  contain:layout paint;
}
/* Arrière-plan flouté : reprend l'image du moment pour habiller les
   écrans larges, la source étant filmée à la verticale. Dessiné dans un
   canvas minuscule — le flou CSS fait tout le travail, le coût est nul. */
.hseq__blur{
  display:none;position:absolute;inset:-8%;width:116%;height:116%;
  filter:blur(52px) saturate(1.3) brightness(.5);
  transform:scale(1.06);
}
.hseq__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

@media (min-width:768px){
  /* Sur grand écran, l'image reste à sa taille naturelle plutôt que
     d'être agrandie de force : c'est ce qui préserve la netteté. */
  .hseq__blur{display:block}
  .hseq__canvas{
    position:relative;inset:auto;
    height:min(88%, calc((100vw - 64px) * 1.7778));
    width:auto;aspect-ratio:1080 / 1920;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 50px 120px -40px rgba(0,0,0,.95),0 0 90px -30px rgba(201,168,76,.30);
  }
}

/* Voile : léger en haut pour que la barre de navigation reste lisible,
   un peu plus dense en bas pour raccorder la scène au fond de la page. */
.hseq__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(5,5,5,.52) 0%,rgba(5,5,5,.06) 20%,
    rgba(5,5,5,0) 55%,rgba(7,7,7,.42) 88%,rgba(7,7,7,.86) 100%);
}

/* Légendes de la scène d'ouverture : trois phrases qui se succèdent au fil
   du défilement. Elles sont EMPILÉES sur la même cellule de grille — jamais
   côte à côte — et ne bougent qu'en opacité et en translation : un effet
   d'échelle donnerait un « grossissement » désagréable au changement de
   sens de défilement. */
.hseq__caps{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  display:grid;grid-template-rows:1fr;justify-items:center;align-items:center;
  padding:0 clamp(22px,7vw,44px);
}
.hseq__cap{
  position:relative;grid-area:1/1;align-self:center;
  width:100%;max-width:720px;text-align:center;
  opacity:0;will-change:opacity,transform;
}
/* Voile local, porté par la phrase elle-même : il s'estompe donc avec elle,
   sans jamais assombrir l'image quand aucun texte n'est affiché. Sans lui,
   le titre se perdait sur les parties claires du plan (ciel, façade). */
.hseq__cap::before{
  content:"";position:absolute;left:50%;top:50%;z-index:-1;
  transform:translate(-50%,-50%);
  width:190%;height:230%;pointer-events:none;
  background:radial-gradient(56% 46% at 50% 50%,
    rgba(4,5,7,.72) 0%,rgba(4,5,7,.44) 46%,rgba(4,5,7,0) 74%);
}
/* Le sur-titre se place SOUS le titre — il vient donc après lui dans le
   balisage, et c'est une marge haute qui l'en sépare. */
.hseq__eyebrow{
  display:block;
  font-size:clamp(9px,2.5vw,11.5px);font-weight:600;
  /* text-indent compense l'interlettrage de la dernière lettre :
     la ligne reste optiquement centrée. */
  letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;
  color:var(--gold);margin-top:clamp(14px,3.6vw,22px);
  text-shadow:0 2px 18px rgba(0,0,0,.85);
  line-height:1.5;
}
/* Seule la première phrase occupe le centre de l'écran. Les deux suivantes
   se posent dans le tiers bas : l'image reste dégagée au milieu. */
/* La première phrase descend très légèrement sous le centre optique : le
   haut du plan reste dégagé. */
.hseq__cap:not(.hseq__cap--bas){
  /* 5 % sous le centre optique de la ZONE VISIBLE, pas du plateau :
     - (plateau − écart) = hauteur réellement vue ;
     - − écart/2 ramène le centre du conteneur sur celui de l'écran.
     Sur ordinateur l'écart vaut 0 : la valeur est inchangée. */
  /* --hseq-gap0 est FIGÉ (posé une fois dans l'en-tête), au contraire de
     --hseq-gap qui suit les barres en direct. La phrase est donc placée
     une bonne fois pour toutes : elle ne peut plus se déplacer pendant le
     défilement, dans aucun navigateur. */
  /* Pile au centre optique de la zone visible : le décalage de 5 % vers le
     bas qui existait avant la posait trop basse. Il ne reste que le
     recentrage sur l'écart figé (le plateau déborde sous la barre du
     navigateur, son milieu n'est donc pas celui de l'écran). */
  /* Réglage établi sur deux retours qui se répondent : centrée sur le
     plateau elle paraissait trop basse dans Instagram, centrée sur la zone
     visible trop haute. On prend le milieu des deux — le quart de l'écart
     au lieu de la moitié. Sur Safari l'écart est petit (une trentaine de
     pixels), la différence y est imperceptible ; sur ordinateur l'écart
     vaut zéro et rien ne change. Une seule valeur à ajuster ici si besoin :
     -2 recentre sur l'écran, 0 recentre sur l'image. */
  top:calc(var(--hseq-gap0,0px) / -4);
}
.hseq__cap--bas{
  align-self:end;
  padding-bottom:calc((var(--hseq-stage-h,100vh) - var(--hseq-gap,0px)) * 0.16 + env(safe-area-inset-bottom) + var(--hseq-gap,0px));
  transition:padding-bottom .28s var(--ease);
}
.hseq__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(31px,8.8vw,62px);line-height:1.08;letter-spacing:-.005em;
  background:linear-gradient(180deg,#fffdf8 24%,#ded6c6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* le texte étant peint par un dégradé, l'ombre passe par un filtre */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8)) drop-shadow(0 3px 10px rgba(0,0,0,.7)) drop-shadow(0 16px 40px rgba(0,0,0,.55));
}
@media (prefers-reduced-motion:reduce){
  .hseq__cap{transition:none}
}

/* Indicateur de défilement : le mot seul, surmonté d'un trait doré
   pulsé — aucun cadre, aucune pastille. */
.hseq__hint{
  position:absolute;left:0;right:0;z-index:3;
  bottom:calc(env(safe-area-inset-bottom) + 30px + var(--hseq-gap,0px));
  display:grid;justify-items:center;gap:11px;
  color:rgba(244,241,234,.62);
  font-size:9.5px;font-weight:600;
  /* text-indent compense l'interlettrage de la dernière lettre :
     le mot reste optiquement centré. */
  letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
  transition:opacity .6s var(--ease);pointer-events:none;
}
.hseq__hint.is-off{opacity:0}
/* Flèche vers le haut : le geste à faire est montré littéralement. Elle
   monte et s'estompe, comme le geste lui-même. */
.hseq__up{
  display:block;width:20px;height:20px;color:var(--gold);
  animation:hseqUp 2.2s var(--ease) infinite;
}
@keyframes hseqUp{
  0%  {transform:translateY(7px);opacity:0}
  35% {transform:translateY(0);opacity:1}
  70% {transform:translateY(-5px);opacity:.55}
  100%{transform:translateY(-9px);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hseq__up{animation:none;opacity:.9}
}

/* Barre d'avancement du défilement */
.hseq__prog{
  position:absolute;left:0;right:0;z-index:4;
  bottom:var(--hseq-gap,0px);
  height:2px;background:rgba(255,255,255,.09);
}
.hseq__prog span{
  display:block;height:100%;width:100%;
  transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-2,#D4A94E),var(--gold,#C9A84C));
}


/* ---------- Page « À propos » : blocs éditoriaux ---------- */
/* Étiquette à gauche, texte à droite sur grand écran ; empilé sur mobile.
   Les filets tiennent lieu de séparation : aucune carte, aucun encadré —
   la mise en page reste calme et laisse le texte respirer. */
.about-block{
  display:grid;gap:12px;
  padding-block:clamp(26px,4.4vw,40px);
  border-top:1px solid var(--line-soft);
}
.about-block:first-child{border-top:0;padding-top:0}
.about-block .eyebrow{margin:0}
.about-block h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(23px,3.6vw,31px);line-height:1.18;color:var(--cream);
  letter-spacing:-.005em;
}
.about-block p{color:var(--muted);font-size:15.5px;line-height:1.78;margin-top:11px}
@media (min-width:800px){
  .about-block{grid-template-columns:170px 1fr;gap:clamp(28px,5vw,56px);align-items:start}
}

/* =========================================================================
   PRÉSENCE EN EUROPE — le globe
   Place carrée réservée d'avance (rembourrage à 100 %, compris même par
   les webvues qui ignorent aspect-ratio) : aucun déplacement de la page
   quand les images arrivent. L'image fixe tient la place, le rendu en
   temps réel la remplace en fondu.
   ========================================================================= */
.globe{position:relative;width:min(560px,100%);margin:clamp(18px,3.5vw,34px) auto 0}
.globe::before{content:"";display:block;padding-top:100%}
.globe__poster,.globe__c{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.globe__poster{transition:opacity .9s var(--ease)}
.globe__c{opacity:0;transition:opacity .9s var(--ease)}
.globe.is-live .globe__c{opacity:1}
.globe.is-live .globe__poster{opacity:0}
@media (prefers-reduced-motion:reduce){.globe__poster,.globe__c{transition:none}}

/* Habillage de la section Europe : un halo discret derrière la Terre, les
   secteurs en défilé continu, puis la phrase et les trois chiffres qui
   rassurent. Le défilé reprend la mécanique du bandeau des domaines
   (deux fois la même liste, translation de -50 %). */
.globe-sec{background:radial-gradient(ellipse 55% 38% at 50% 58%,rgba(64,112,255,.075),transparent 72%)}
.eu-defile{max-width:760px;margin:clamp(20px,3vw,28px) auto 0;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.eu-defile__piste{display:flex;width:max-content;animation:scrollx 34s linear infinite}
.eu-defile .pill{margin-right:10px}
@media (hover:hover) and (pointer:fine){.eu-defile:hover .eu-defile__piste{animation-play-state:paused}}
.eu-phrase{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,2.3vw,27px);line-height:1.4;color:var(--text);max-width:34ch;margin:clamp(14px,2.4vw,24px) auto 0;text-wrap:balance}
.eu-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:640px;margin:clamp(22px,3vw,32px) auto 0;padding-top:clamp(18px,2.6vw,26px);border-top:1px solid var(--line)}
.eu-chiffre{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 8px;min-width:0}
.eu-chiffre + .eu-chiffre{border-left:1px solid var(--line-soft)}
.eu-chiffre strong{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.6vw,40px);line-height:1;color:var(--gold)}
.eu-chiffre span{font-size:12.5px;line-height:1.45;color:var(--muted);text-wrap:balance}
@media (prefers-reduced-motion:reduce){
  .eu-defile{-webkit-mask:none;mask:none}
  .eu-defile__piste{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:10px}
  .eu-defile .pill[aria-hidden="true"]{display:none}
}

/* Scène d'ouverture sur ordinateur : une image plein cadre et la phrase
   d'accroche, sans séquence. La classe .hero-fixe est posée dans l'en-tête
   de la page (souris + au moins 768 px). La hauteur suit la fenêtre en
   direct : sur ordinateur, aucune barre de navigateur ne vient la faire
   varier, les précautions du mode séquence n'ont plus lieu d'être. */
html.hero-fixe .hseq{display:block;height:100vh;min-height:560px}
html.hero-fixe .hseq__stage{
  position:relative;height:100%;
  background:#050505 url("../assets/hero-bureau.webp") center / cover no-repeat;
}
html.hero-fixe .hseq__blur,
html.hero-fixe .hseq__canvas,
html.hero-fixe .hseq__hint,
html.hero-fixe .hseq__prog,
html.hero-fixe .hseq__cap--bas{display:none}
html.hero-fixe .hseq__cap:not(.hseq__cap--bas){opacity:1;top:0}

/* Bouton « Diagnostic » de la barre de navigation : sur ordinateur, il
   annonce « Obtenir ma maquette gratuitement » ; téléphones et tablettes
   gardent le libellé court, faute de place. */
.nav-diag--long{display:none}
@media (min-width:768px) and (hover:hover) and (pointer:fine){
  .nav-links .nav-diag--court{display:none}
  .nav-links .nav-diag--long{display:inline}
}