/* ============================================================
   HOME 3D — « Les portes du Cercle »
   Le canvas occupe le fond, fixe ; le contenu défile au-dessus.

   Choix d'architecture assumé : le texte reste du HTML, jamais
   du WebGL. Il demeure net, sélectionnable, accessible et lisible
   pour une cible 45+. La 3D porte l'espace, pas les mots.

   Deux modes, pilotés par home-3d.js :
     .is-3d   → scène active, sections translucides
     .no-3d   → repli 2D complet, canvas retiré, fonds pleins
   ============================================================ */
[data-stage3d]{ --ink:var(--lbc-cream); }

/* ---------- Écran d'attente ---------- */
.boot{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:var(--lbc-forest-900); gap:0;
  transition:opacity .9s var(--ease-quiet,ease), visibility .9s;
}
.boot[hidden-soft]{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__ring{ grid-area:1/1; width:clamp(150px,20vw,230px); height:auto; }
.boot__arc{
  stroke-dasharray:339.3; stroke-dashoffset:339.3;   /* 2πr, r=54 */
  transition:stroke-dashoffset .5s linear;
}
.boot__seal{
  grid-area:1/1; width:clamp(58px,7.4vw,86px); height:auto; justify-self:center; align-self:center;
  opacity:0; transition:opacity 1.2s ease .2s;
}
.boot.is-lit .boot__seal{ opacity:1; }
.boot__txt{
  grid-area:1/1; align-self:end; margin:0 0 -84px; text-align:center;
  font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--lbc-gold);
  display:flex; flex-direction:column; gap:8px;
}
.boot__txt span{ opacity:.55; letter-spacing:.2em; font-feature-settings:"tnum" 1; }

/* ---------- La scène ---------- */
.stage{
  position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block;
  background:var(--lbc-forest-900);
}
/* Voile permanent : garantit le contraste du texte quoi qu'il arrive
   à l'image derrière. C'est la sécurité de lisibilité de toute la page. */
/* Deux couches, toutes deux gratuites : le voile de lisibilité, puis un
   vignettage serré aux quatre coins. Un vignettage en post-traitement
   WebGL aurait coûté une passe plein écran et fait perdre l'antialiasing
   matériel ; en CSS il est composité par le GPU, hors du budget d'image. */
.stage__scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 66% 62% at 50% 46%,
      rgba(0,0,0,0) 46%, rgba(3,14,11,.20) 78%, rgba(2,10,8,.52) 100%),
    radial-gradient(ellipse at 50% 45%, rgba(6,37,31,.06) 0%, rgba(4,24,20,.34) 82%);
}
html.no-3d .stage,
html.no-3d .stage__scrim{ display:none; }

/* Bouton d'ambiance sonore : discret, en bas à droite, éteint par
   défaut. Il ne doit jamais concurrencer l'appel à l'action. */
.stage__snd{
  /* 24/09/2026 : fixé au bord bas, il passait sous l'indicateur d'accueil (viewport-fit=cover). */
  position:fixed; right:clamp(14px,2vw,28px); bottom:calc(clamp(14px,2vw,28px) + env(safe-area-inset-bottom,0px)); z-index:41;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; line-height:1; cursor:pointer;
  background:rgba(6,28,23,.72); color:rgba(226,203,152,.92);
  border:1px solid rgba(184,150,63,.45);
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.stage__snd:hover{ color:rgba(232,203,140,.9); border-color:rgba(184,150,63,.5); }
.stage__snd.is-on{ color:#E8CB8C; border-color:rgba(184,150,63,.66);
  box-shadow:0 0 18px -4px rgba(201,162,83,.5); }
.stage__snd:focus-visible{ outline:2px solid var(--lbc-gold,#B8963F); outline-offset:3px; }
html.no-3d .stage__snd{ display:none; }

/* Le pied de page est un élément non positionné : sans calage explicite
   il se peint sous .stage (fixed, z-index:0) et disparaît entièrement
   derrière le couloir. L'en-tête, lui, est déjà sticky/z-index:50. */
[data-stage3d] footer{ position:relative; z-index:2; }

/* ---------- Les actes ---------- */
[data-stage3d] .act{
  position:relative; z-index:2; min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(96px,13vh,170px) clamp(20px,5vw,90px) clamp(64px,9vh,120px);
}
[data-stage3d] .act__in{ width:100%; max-width:1120px; text-align:center; }

/* En mode 3D le fond est transparent : on voit la scène.
   Chaque bloc porte alors son propre voile flouté. */
html.is-3d [data-stage3d] .act{ background:transparent; color:var(--lbc-cream); }
/* Pas de backdrop-filter ici. Flouter le canvas vivant à chaque image
   coûtait 40 % du budget : 39 ips avec, 56 sans, mesuré en A/B alterné.
   Sur un couloir sombre et lent, un verre teinté fixe est visuellement
   indiscernable du flou — et gratuit. Le dégradé et le liseré intérieur
   rendent l'épaisseur que le flou apportait. */
html.is-3d [data-stage3d] .act__in{
  background:
    linear-gradient(180deg, rgba(10,46,38,.80) 0%, rgba(5,28,23,.86) 100%);
  border:1px solid rgba(184,150,63,.26); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,64px);
  box-shadow:
    inset 0 1px 0 rgba(232,203,140,.10),
    inset 0 0 60px -30px rgba(232,203,140,.16),
    0 60px 140px -80px rgba(0,0,0,.9);
}
/* Hero, citation et film n'ont pas de panneau : un voile radial suffit,
   mais il est indispensable — sans lui le texte passe sur les zones
   claires de la scène et devient illisible. */
html.is-3d [data-stage3d] .act--hero .act__in,
html.is-3d [data-stage3d] .act--quote .act__in,
html.is-3d [data-stage3d] .act--film .act__in{
  /* Le voile radial derrière ces trois blocs se voyait : une tache
     ovale plus sombre posée sur le décor, que l'oeil lisait comme un
     défaut de rendu. La lisibilité qu'il assurait est reprise par une
     ombre portée sur le texte lui-même — invisible en tant que forme. */
  background:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:0; box-shadow:none;
  padding:clamp(40px,7vw,120px) clamp(24px,7vw,140px);
}
/* Repli 2D : fonds pleins, alternance crème / forêt */
html.no-3d [data-stage3d]{ background:var(--lbc-cream) !important; }
html.no-3d [data-stage3d] .act{ background:var(--lbc-cream); color:var(--text-body); min-height:auto; padding-block:clamp(80px,11vw,150px); }
html.no-3d [data-stage3d] .act:nth-child(even of .act){ background:var(--lbc-forest); color:var(--lbc-cream); }
html.no-3d [data-stage3d] .act--hero,
html.no-3d [data-stage3d] .act--quote,
html.no-3d [data-stage3d] .act--film,
html.no-3d [data-stage3d] .act--adm{ background:var(--lbc-forest) !important; color:var(--lbc-cream); }
html.no-3d [data-stage3d] .act--hero{ min-height:82svh; }

/* ---------- Typographie ---------- */
[data-stage3d] .eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.36em; text-transform:uppercase;
  /* or patiné : 4,49:1 sur forêt, sous le seuil pour 11px.
     L'or clair monte à 6,5:1. */
  color:var(--lbc-gold-soft, #D2B978); margin:0 0 18px;
}
[data-stage3d] .act h1{
  font-family:var(--font-display); font-weight:400; color:inherit;
  font-size:clamp(42px,7.6vw,132px); line-height:.96; letter-spacing:-.042em;
  margin:0 auto 26px; max-width:15ch;
}
[data-stage3d] .act h2{
  font-family:var(--font-display); font-weight:400; color:inherit;
  font-size:clamp(30px,5vw,78px); line-height:1.02; letter-spacing:-.035em;
  margin:0 auto 22px; max-width:18ch;
}
[data-stage3d] .lead,
[data-stage3d] .body{ font-size:clamp(16px,1.55vw,19px); line-height:1.72; max-width:54ch; margin:0 auto 28px; opacity:.9; }
[data-stage3d] .say{ font-family:var(--font-display); font-style:italic; color:var(--lbc-gold); font-size:clamp(19px,2.6vw,36px); line-height:1.28; margin:0 auto 26px; max-width:22ch; }
[data-stage3d] .sig{ font-family:var(--font-display); font-style:italic; font-size:clamp(16px,1.6vw,21px); max-width:38ch; margin:24px auto 0; }
[data-stage3d] .note{ font-size:13px; font-style:italic; opacity:.72; margin:20px 0 0; }
[data-stage3d] .hint{ display:block; margin-top:clamp(26px,5vh,54px); font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; opacity:.6; }
/* « Descendre pour entrer » ne veut rien dire sans les portes : en repli
   2D il n'y a pas de battants à franchir, seulement une page qui défile.
   Depuis que cette page est l'accueil, cette mention s'afficherait sur
   tous les mobiles. */
html.no-3d [data-stage3d] .hint{ display:none; }
[data-stage3d] blockquote{
  font-family:var(--font-display); font-size:clamp(26px,4.8vw,80px); line-height:1.1;
  letter-spacing:-.035em; margin:0 auto; max-width:19ch; color:inherit;
}
[data-stage3d] .spirit{ font-size:clamp(24px,3.6vw,56px); max-width:18ch; }
[data-stage3d] .film{ font-family:var(--font-display); font-style:italic; font-size:clamp(23px,3.8vw,62px); line-height:1.18; max-width:19ch; margin:0 auto; }

[data-stage3d] .cta{
  display:inline-flex; align-items:center; gap:.5em; min-height:48px;
  border:1px solid var(--lbc-gold); color:var(--lbc-gold);
  padding:14px 34px; border-radius:var(--radius-pill); text-decoration:none;
  font-weight:600; font-size:16px; transition:background-color .35s, color .35s, box-shadow .35s;
}
[data-stage3d] .cta:hover{ background:var(--lbc-gold); color:var(--lbc-forest-900); box-shadow:0 0 44px -10px rgba(184,150,63,.6); }
[data-stage3d] .link{ display:inline-block; margin-top:24px; color:var(--lbc-gold); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:4px; font-size:15px; }

/* ---------- Blocs ---------- */
[data-stage3d] .figs{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,3vw,48px); }
[data-stage3d] .figs b{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(42px,7.4vw,128px); line-height:.88; letter-spacing:-.05em;
  color:var(--lbc-gold); font-feature-settings:"tnum" 1;
}
[data-stage3d] .figs span{ display:block; font-size:13px; margin-top:12px; opacity:.8; }
[data-stage3d] .steps,
[data-stage3d] .cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,46px); text-align:left; margin-top:clamp(28px,4vh,52px); }
[data-stage3d] .steps em,
[data-stage3d] .cols3 em{ font-family:var(--font-display); font-style:normal; font-weight:400; font-size:clamp(22px,2.6vw,38px); color:var(--lbc-gold); }
[data-stage3d] .steps h3,
[data-stage3d] .cols3 h3,
[data-stage3d] .cards h3{ font-family:var(--font-display); font-size:clamp(17px,1.8vw,24px); margin:10px 0 8px; color:inherit; }
[data-stage3d] .steps p,
[data-stage3d] .cols3 p,
[data-stage3d] .cols6 p,
[data-stage3d] .cards p{ margin:0; font-size:15px; line-height:1.7; opacity:.82; }
[data-stage3d] .cols6{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,2vw,28px); margin-top:clamp(30px,4vh,56px); padding-top:clamp(22px,3vw,40px); border-top:1px solid rgba(184,150,63,.22); text-align:left; }
[data-stage3d] .cols6 h4{ font-family:var(--font-display); font-size:16px; margin:0 0 6px; }
[data-stage3d] .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); margin-top:clamp(28px,4vh,52px); text-align:left; }
[data-stage3d] .cards article{ border:1px solid rgba(184,150,63,.24); border-radius:var(--radius-md); padding:clamp(18px,2.2vw,28px); }
[data-stage3d] .eco{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:clamp(26px,4vh,46px); }
[data-stage3d] .eco span{ border:1px solid rgba(184,150,63,.26); border-radius:var(--radius-pill); padding:8px 17px; font-size:14px; }
[data-stage3d] .countries{ list-style:none; margin:clamp(22px,3vh,40px) auto 0; padding:0; max-width:560px; }
[data-stage3d] .countries li{ border-bottom:1px solid rgba(184,150,63,.2); }
/* La ligne entière est le lien : la cible tactile couvre toute la
   largeur, et le clavier atteint chaque territoire dans l'ordre. */
[data-stage3d] .countries a{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:11px 0; text-decoration:none; color:inherit; }
[data-stage3d] .countries em{ font-family:var(--font-display); font-style:normal; font-size:12px; color:var(--lbc-gold); }
[data-stage3d] .countries span{ font-family:var(--font-display); font-size:clamp(18px,2.2vw,30px); }
[data-stage3d] .oracle{ margin:clamp(18px,3vh,34px) auto 0; max-width:600px; }
[data-stage3d] .oracle > div{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-bottom:1px solid rgba(184,150,63,.2); }
[data-stage3d] .oracle dt{ font-size:clamp(16px,1.6vw,21px); }
[data-stage3d] .oracle dd{ margin:0; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--lbc-gold); opacity:.8; }
[data-stage3d] .mosaic{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,1vw,14px); margin-top:clamp(24px,3.5vh,44px); }
[data-stage3d] .mosaic a{ display:block; aspect-ratio:3/4; overflow:hidden; border-radius:3px; }
[data-stage3d] .mosaic img{ width:100%; height:100%; object-fit:cover; display:block; }
[data-stage3d] .close{ margin-top:clamp(46px,6vh,90px); padding-top:clamp(34px,4.6vh,62px); border-top:1px solid rgba(184,150,63,.26); }
[data-stage3d] .close__h{ font-size:clamp(32px,5.4vw,86px) !important; }

/* ---------- Cartes de verre : elles pivotent au pointeur ---------- */
[data-stage3d] .glasses{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,28px); margin-top:clamp(24px,4vh,48px); perspective:1200px; }
/* Six panneaux floutés au-dessus d'un canvas animé, c'est six fois le
   coût qu'on vient de retirer aux blocs de texte. Le verre est rendu
   ici par le seul dégradé et un liseré clair en haut — ce que l'œil
   lit comme du verre, c'est le reflet de bord, pas le flou. */
[data-stage3d] .glass{
  margin:0; text-align:left; padding:clamp(20px,2.4vw,32px);
  background:
    linear-gradient(150deg, rgba(232,225,205,.13), rgba(210,225,215,.035) 46%, rgba(6,32,26,.30));
  border:1px solid rgba(184,150,63,.3); border-radius:var(--radius-lg);
  transform-style:preserve-3d; will-change:transform;
  transition:transform .5s var(--ease-quiet,ease), border-color .4s, box-shadow .4s;
  box-shadow:
    inset 0 1px 0 rgba(255,248,230,.22),
    inset 0 -30px 40px -40px rgba(0,0,0,.7),
    0 40px 90px -60px rgba(0,0,0,.85);
}
[data-stage3d] .glass:hover{ border-color:var(--lbc-gold); box-shadow:0 40px 100px -50px rgba(184,150,63,.5); }
[data-stage3d] .glass p{ font-family:var(--font-display); font-style:italic; font-size:clamp(15px,1.5vw,19px); line-height:1.5; margin:0 0 16px; }
[data-stage3d] .glass cite{ font-style:normal; font-family:var(--font-display); font-weight:400; font-size:16px; display:block; }
[data-stage3d] .glass small{ display:block; font-size:12.5px; opacity:.7; margin-top:3px; }
html.no-3d [data-stage3d] .glass{ background:var(--surface-card); border-color:var(--hairline); backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--text-body); }
html.no-3d [data-stage3d] .glass p{ color:var(--text-heading); }

/* ---------- Repli 2D : le contenu doit rester impeccable ---------- */
html.no-3d [data-stage3d] .act--hero .eyebrow,
html.no-3d [data-stage3d] .act--quote .eyebrow{ color:var(--lbc-gold); }
html.no-3d [data-stage3d] .act:not(.act--hero):not(.act--quote):not(.act--film):not(.act--adm) .eyebrow{ color:var(--lbc-gold); }
/* Les chiffres ne vivent que dans l'acte « seuil », qui est sur fond
   forêt : les mettre en vert les rendait invisibles. Or sur crème ne
   tient que 2,26:1 — donc or ici, et rien d'autre. */
html.no-3d [data-stage3d] .figs b{ color:var(--lbc-gold); }
html.no-3d [data-stage3d] .cards article,
html.no-3d [data-stage3d] .eco span{ background:var(--surface-card); border-color:var(--hairline); }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  [data-stage3d] .figs{ grid-template-columns:1fr 1fr; }
  [data-stage3d] .steps,
  [data-stage3d] .cols3,
  [data-stage3d] .cards,
  [data-stage3d] .glasses{ grid-template-columns:1fr; }
  [data-stage3d] .cols6{ grid-template-columns:repeat(3,1fr); }
  [data-stage3d] .mosaic{ grid-template-columns:repeat(3,1fr); }
  [data-stage3d] .act{ min-height:auto; padding-block:clamp(72px,10vh,120px); }
}
@media (max-width:620px){
  [data-stage3d] .figs,
  [data-stage3d] .cols6{ grid-template-columns:1fr 1fr; }
  [data-stage3d] .mosaic{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){
  [data-stage3d] .glass{ transition:none; }
  .boot{ transition:none; }
}

/* Le CTA de la barre de navigation reste au jaune de marque : sur une
   scène sombre il crie. On l'aligne sur le filet d'or de la page. */
html.is-3d [data-lbcnav] a[style*="var(--accent)"]{
  background:transparent !important; color:var(--lbc-gold) !important;
  border:1px solid var(--lbc-gold) !important;
}
html.is-3d [data-lbcnav]{ background:rgba(4,24,20,.55) !important; backdrop-filter:blur(10px); }

/* L'acte « territoires » libère la droite : c'est là que passe le globe.
   Un panneau pleine largeur le masquerait entièrement. */
html.is-3d [data-stage3d] .act--terr{ place-items:center start; }
html.is-3d [data-stage3d] .act--terr .act__in{ max-width:min(560px, 46vw); text-align:left; }
html.is-3d [data-stage3d] .act--terr .countries{ margin-inline:0; }
html.is-3d [data-stage3d] .act--terr h2,
html.is-3d [data-stage3d] .act--terr .body{ margin-inline:0; }

/* Tant que les battants sont fermés, le titre n'existe pas encore :
   on le découvre en même temps que l'entrebâillement s'élargit. */
html.is-3d [data-stage3d] .act--hero .act__in{
  transition:opacity 1.1s var(--ease-quiet,ease), transform 1.1s var(--ease-quiet,ease);
}
html.is-sealed [data-stage3d] .act--hero .act__in{
  opacity:0; transform:scale(.985);
}
/* Le reste de la page attend aussi : rien ne doit dépasser d'une porte close. */
/* Le verrou de défilement ne vaut QUE pendant l'ouverture initiale.
   Il était accroché à .is-sealed, qui revient dès que la porte se
   referme en remontant : on se retrouvait alors enfermé en haut de
   page, sans pouvoir redescendre pour la rouvrir. Deux états séparés :
   .is-intro bloque le temps de la mise en scène, .is-sealed ne décrit
   plus que l'aspect. */
html.is-intro{ overflow:hidden; }

/* ---------- Correctif : puces illisibles ----------
   concept-c.css habille .lux-chip pour une page CLAIRE (fond ivoire).
   Sur cette page sombre, le texte crème tombait à 1,03:1 dessus.
   On reprend la main dans les deux modes. */
/* :not(.cta) — lux.js range dans les « puces » tout ce qui porte un filet
   et un rayon de pilule : les vraies puces, mais aussi les appels à
   l'action. Ce correctif de lisibilité, écrit en !important, éteignait
   donc le bouton principal du hero et celui de la barre avec les puces
   qu'il visait. Un appel à l'action n'est pas une étiquette. */
html.is-3d [data-stage3d] .lux-chip:not(.cta):not([href*="Integrer"]),
html.is-3d [data-stage3d] .eco span{
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(184,150,63,.34) !important;
  color:var(--lbc-cream) !important;
}
html.no-3d [data-stage3d] .lux-chip:not(.cta):not([href*="Integrer"]),
html.no-3d [data-stage3d] .eco span{
  background:var(--surface-card) !important;
  border-color:var(--hairline) !important;
  color:var(--text-heading) !important;
}
/* Même piège possible sur les cartes : on fixe la couleur du texte
   avec le fond, jamais l'un sans l'autre. */
html.is-3d [data-stage3d] .cards article{ color:var(--lbc-cream); }
html.no-3d [data-stage3d] .cards article{ background:var(--surface-card); color:var(--text-body); }

/* Les h4 héritaient de --text-heading (vert foncé) imposé par le
   design system : foncé sur foncé, 1,29:1. On les rattache à la
   couleur de leur contexte, comme les h3 voisins. */
[data-stage3d] .cols6 h4{ color:inherit; }

/* Pied de page partagé : ses eyebrows dorées tombent à 4,49:1, sous
   le seuil pour du petit texte. Correction locale à cette page —
   le composant sert 52 autres pages, on n'y touche pas. */
[data-stage3d] ~ * .lux-eyebrow,
[data-stage3d] .lux-eyebrow{ color:var(--lbc-gold-soft, #D2B978) !important; }

/* Lien newsletter du pied de page : or patiné sur forêt, 4,49:1. */
[data-stage3d] a[href^="mailto:"]{ color:var(--lbc-gold-soft, #D2B978) !important; }

/* ---------- Globe interactif : habillage DOM ---------- */
/* L'étiquette du globe prend l'habit de celle des portes : ce sont deux
   objets qui mènent au même endroit, ils doivent se présenter pareil.
   Elle annonce désormais la destination, pas seulement le nom du pays. */
.globe-label{
  position:fixed; z-index:40; pointer-events:none;
  transform:translate(-50%,-150%);
  padding:11px 16px; border-radius:2px; text-align:center;
  background:rgba(6,28,23,.9); border:1px solid rgba(184,150,63,.42);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s ease;
}
.globe-label.is-on{ opacity:1; }
.globe-label b{
  display:block; font-family:var(--font-display,Georgia,serif);
  font-size:16px; font-weight:400; color:var(--lbc-cream); letter-spacing:.01em;
}
.globe-label i{
  display:block; font-style:normal; margin-top:3px;
  font-family:var(--font-body,Inter,sans-serif); font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--lbc-gold);
}
/* Le curseur dit que le pays mène quelque part. */
html.is-3d .stage.is-grab{ cursor:pointer; }
/* 24/09/2026 : padding-left animait la mise en page. Le lien est un flex
   space-between : le numéro (em) est ce que le retrait déplaçait, le nom
   (span) reste calé à droite. C'est donc l'em qui glisse, en transform. */
html.is-3d [data-stage3d] .countries a{
  cursor:pointer; transition:color .3s ease, border-color .3s ease;
  padding-left:0; border-left:2px solid transparent;
}
html.is-3d [data-stage3d] .countries a.is-on{
  color:var(--lbc-gold-soft, #D2B978);
  border-left-color:var(--lbc-gold);
}
html.is-3d [data-stage3d] .countries em{ transition:transform .3s var(--ease-quiet,ease); }
html.is-3d [data-stage3d] .countries a.is-on em{ transform:translateX(6px); }
html.is-3d [data-stage3d] .countries a.is-on span{ color:var(--lbc-gold-soft, #D2B978); }
@media (prefers-reduced-motion: reduce){
  html.is-3d [data-stage3d] .countries a.is-on em{ transform:none; }
}
html.is-3d .stage.is-grab{ cursor:grab; }
html.is-3d .stage.is-grabbing{ cursor:grabbing; }

/* Les cartes de témoignage sont des <blockquote> : elles héritaient du
   letter-spacing des citations géantes. Or letter-spacing s'hérite en
   LONGUEUR CALCULÉE — -.035em sur 69px fait -2,42px, transmis tels quels
   à un texte de 19px, soit -0,13em. Les mots se touchaient. */
[data-stage3d] .glass,
[data-stage3d] .glass p,
[data-stage3d] .glass cite,
[data-stage3d] .glass small{ letter-spacing:normal; }
[data-stage3d] .glass p{ letter-spacing:-.005em; }

/* ============================================================
   REPLI 2D — LE HERO RETROUVE SA PHOTO
   Sous 900 px et sans WebGL, la scène est retirée : le premier écran
   n'était plus qu'un aplat vert. C'est là que passe l'essentiel du
   trafic mobile, et c'est le seul écran que beaucoup verront. On lui
   rend l'hémicycle du Sénat, dans un tirage taillé pour ce cadre :
   900x1600, là où l'accueil 2D servait une image en paysage de 933x624
   qu'il fallait agrandir avant même de compter la densité de l'écran.
   ============================================================ */
html.no-3d [data-stage3d] .act--hero{
  position:relative;
  background:
    linear-gradient(180deg,
      rgba(4,31,28,.62) 0%,
      rgba(4,31,28,.72) 45%,
      rgba(6,51,46,.94) 100%),
    image-set(url('assets/photos/hero-mobile.webp') type('image/webp'),
              url('assets/photos/hero-mobile.jpg')  type('image/jpeg'))
      center 38% / cover no-repeat
    !important;
  color:var(--lbc-cream);
}
/* L'ombre portée décolle le texte des zones claires de la voûte. */
html.no-3d [data-stage3d] .act--hero h1,
html.no-3d [data-stage3d] .act--hero .lead{
  text-shadow:0 2px 24px rgba(4,31,28,.55);
}

/* ============================================================
   NAVIGATION — ELLE DOIT RESTER À L'ÉCRAN
   Le composant SiteNav est en position:sticky, mais son conteneur
   (le hôte du composant) ne fait que la hauteur de la barre : elle
   n'a donc aucune course où adhérer et disparaît au premier
   défilement, pour ne plus revenir sur une page de 15 000 px.
   L'accueil 2D réglait cela en la passant en fixed ; cette page ne
   chargeait pas cette feuille. On reprend le même geste — la scène
   étant elle-même un canvas fixe, rien ne se décale derrière.
   ============================================================ */
html [data-lbcnav]{
  position:fixed !important; top:0; left:0; right:0; z-index:50;
}
/* La barre reprend sa matière dès qu'on quitte le premier écran ;
   au repos, elle laisse voir les portes. */
html.is-3d [data-lbcnav]{
  background:rgba(6,51,46,.62) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background-color .5s var(--ease-quiet,cubic-bezier(.22,.61,.36,1));
}

/* ============================================================
   PASSE DE COMPOSITION — 21/08/2026
   Le décor changeait à chaque acte, le premier plan jamais : onze
   panneaux de verre identiques, centrés, de même largeur. Quatre
   gestes pour rendre un rythme à la page.
   ============================================================ */

/* --- 1. ROMPRE L'AXE CENTRAL -------------------------------------
   .act__in impose text-align:center à toute la page ; seul l'acte
   « territoires » y échappait — et c'est justement la section qui
   respire le mieux, parce que le globe occupe la moitié libre.
   On étend ce principe à trois autres actes, en alternance, avec un
   panneau pleine largeur entre chaque paire : une alternance
   mécanique gauche/droite/gauche fatiguerait autant que le tout-centré.
   Cadence obtenue : large · moment · droite · gauche · large ·
   droite · gauche · large.                                        */
/* « Esprit du Cercle » a été écarté de cette liste après essai : la
   section porte un manifeste, trois valeurs ET une grille de six —
   dans 620 px, les six colonnes tombaient à 85 px et « Impact »
   sortait du panneau. Un contenu dense a besoin de sa largeur ; la
   variation se prend sur les actes légers. */
html.is-3d [data-stage3d] .act--oracle{ place-items:center end; }
html.is-3d [data-stage3d] .act--proof{ place-items:center start; }

html.is-3d [data-stage3d] .act--oracle .act__in,
html.is-3d [data-stage3d] .act--proof .act__in{
  max-width:min(620px, 50vw);
  text-align:left;
}
/* Les titres et chapôs sont centrés par une marge auto : on la retire,
   sinon le bloc reste optiquement au milieu de sa propre colonne. */
html.is-3d [data-stage3d] .act--oracle :is(h2,.body,.note),
html.is-3d [data-stage3d] .act--proof  :is(h2,.body){ margin-inline:0; }

/* Dans une colonne de 620 px, trois colonnes de texte font 190 px :
   illisible. Elles s'empilent — et se lisent alors comme une liste
   éditoriale, ce que ces contenus sont réellement. */
html.is-3d [data-stage3d] .act--proof .cols3{
  grid-template-columns:1fr;
  gap:clamp(18px,2.2vh,30px);
}

/* --- 2. LE VERRE SE DENSIFIE -------------------------------------
   À .80/.86, les cadres accrochés aux murs du couloir traversaient le
   texte : la citation « Connaître quelqu'un, qui connaît quelqu'un »
   se superposait au corps de l'acte « mise en relation ». On monte
   l'opacité juste assez pour que la scène reste devinée sans jamais
   entrer en concurrence avec la lecture.                           */
html.is-3d [data-stage3d] .act__in{
  background:
    linear-gradient(180deg, rgba(10,46,38,.90) 0%, rgba(5,28,23,.95) 100%);
}

/* --- 3. LES ATTRIBUTIONS S'ALIGNENT ------------------------------
   Les citations n'ont pas la même longueur : « Clothilde » flottait
   57 px au-dessus de « Tom Batista ». Le nom est poussé en pied de
   carte, la grille égalisant déjà les hauteurs — la ligne des
   signatures redevient droite.                                     */
[data-stage3d] .glass{ display:flex; flex-direction:column; }
[data-stage3d] .glass p{ flex:1 1 auto; }
[data-stage3d] .glass cite{ margin-top:auto; }

/* --- 4. LES COULISSES REPRENNENT DE LA PLACE ---------------------
   C'est la preuve sociale la plus forte du site — de vraies photos,
   de vrais visages — et elle tenait en six vignettes de 150 px avec
   240 px de couloir vide dessous. Le panneau s'élargit et la bande
   redevient une mosaïque : une image maîtresse, puis des formats
   contrastés. La variation de taille est ce qui distingue une
   mosaïque d'une planche-contact.                                  */
html.is-3d [data-stage3d] .act--ig .act__in{ max-width:min(1400px, 92vw); }
[data-stage3d] .mosaic{
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(120px,13vw,200px);
  gap:clamp(10px,1.1vw,16px);
}
[data-stage3d] .mosaic a{ aspect-ratio:auto; }
[data-stage3d] .mosaic a:nth-child(1){ grid-column:span 2; grid-row:span 2; }
[data-stage3d] .mosaic a:nth-child(2){ grid-column:span 2; }
[data-stage3d] .mosaic a:nth-child(5),
[data-stage3d] .mosaic a:nth-child(6){ grid-column:span 2; }

@media (max-width:820px){
  /* Sous cette largeur la scène est retirée : on revient à une
     grille simple, la mosaïque n'a plus de place pour respirer. */
  [data-stage3d] .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  [data-stage3d] .mosaic a{ aspect-ratio:3/4; }
  [data-stage3d] .mosaic a:nth-child(n){ grid-column:auto; grid-row:auto; }
}


/* ============================================================
   DÉTAILS — 21/08/2026
   ============================================================ */

/* --- Le son existe, encore faut-il le savoir ---------------------
   L'ambiance n'est pas un fichier : c'est un souffle de grande pièce
   synthétisé sur place. Enfermé dans une pastille de 38 px à 50 %
   d'opacité, personne ne l'aurait jamais trouvé. Le bouton est
   remonté en contraste, et une invitation se déplie une seule fois,
   à l'ouverture des portes — puis s'efface au premier défilement. */
.stage__snd::after{
  content:attr(data-invite);
  position:absolute; right:calc(100% + 12px); top:50%; translate:0 -50%;
  white-space:nowrap; font-family:var(--font-body); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--lbc-gold); background:rgba(6,28,23,.86);
  border:1px solid rgba(184,150,63,.3); border-radius:999px;
  padding:7px 14px; pointer-events:none;
  opacity:0; translate:8px -50%;
  transition:opacity .6s var(--ease-quiet,ease), translate .6s var(--ease-quiet,ease);
}
.stage__snd.is-inviting::after{ opacity:1; translate:0 -50%; }
.stage__snd:hover{ color:var(--lbc-gold); border-color:var(--lbc-gold); }
/* Un halo lent tant que l'invitation tient : le regard y revient. */
@keyframes lbcSndPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(184,150,63,.30); }
  50%    { box-shadow:0 0 0 9px rgba(184,150,63,0); }
}
.stage__snd.is-inviting{ animation:lbcSndPulse 3.4s ease-in-out infinite; }
.stage__snd.is-on{ color:var(--lbc-gold); border-color:var(--lbc-gold); }

/* --- « Descendre pour entrer » ------------------------------------
   Toute la page repose sur ce geste : le couloir, les actes, le globe
   ne se découvrent qu'en défilant. L'indice était posé là, immobile,
   à 60 % d'opacité. Une respiration très lente — trois secondes et
   demie — suffit à le faire exister sans l'agiter. */
@keyframes lbcHintBreathe{
  0%,100%{ opacity:.38; }
  50%    { opacity:.78; }
}
html.is-3d [data-stage3d] .hint{ animation:lbcHintBreathe 3.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .stage__snd.is-inviting{ animation:none; }
  html.is-3d [data-stage3d] .hint{ animation:none; opacity:.7; }
}

/* ============================================================
   PREMIER ÉCRAN — 21/08/2026
   ============================================================ */

/* --- L'écran d'attente n'affichait rien -------------------------
   .boot__txt cumulait align-self:end et margin-bottom:-84px : dans une
   fenêtre de 900 px, son bord haut tombait à 941 px — sous le pli.
   Le nom du club et la progression n'ont donc jamais été lus, et le
   sceau restait à opacity:0 jusqu'à la fin. Il ne restait qu'un anneau
   muet. On repositionne le texte sous l'anneau par un décalage visuel,
   sans le sortir de la cellule de grille, et le sceau se devine dès le
   départ avant de s'allumer à l'arrivée.                            */
.boot__txt{
  align-self:center; justify-self:center; margin:0;
  translate:0 calc(clamp(150px,20vw,230px) / 2 + 44px);
}
.boot__seal{ opacity:.3; }
.boot.is-lit .boot__seal{ opacity:1; }

/* --- Le CTA du hero cesse d'être un fantôme ---------------------
   Un contour d'or à 34 % sur un fond de couloir : l'action la plus
   importante du site était le seul élément qu'on ne voyait pas. Elle
   prend l'or plein. Le contour reste pour tous les autres CTA de la
   page — un seul appel plein par écran, c'est ce qui le rend lisible. */
html.is-3d [data-stage3d] .act--hero .cta,
html.no-3d [data-stage3d] .act--hero .cta{
  background:var(--lbc-gold); color:var(--lbc-forest-900);
  border-color:var(--lbc-gold);
  box-shadow:0 18px 50px -22px rgba(184,150,63,.55);
}
/* 24/09/2026 : ce survol soulève le bouton ; au doigt il resterait collé
   après la pression. Il ne vit que sous un vrai pointeur. */
@media (hover: hover) and (pointer: fine){
html.is-3d [data-stage3d] .act--hero .cta:hover,
html.no-3d [data-stage3d] .act--hero .cta:hover{
  background:var(--lbc-gold-soft, #D2B978); border-color:var(--lbc-gold-soft, #D2B978);
  box-shadow:0 22px 60px -18px rgba(184,150,63,.8);
  transform:translateY(-1px);
}
}

/* --- Deux ordres ne se donnent pas côte à côte ------------------
   « Intégrer le Cercle » et « Descendre pour entrer » se suivaient à
   80 px d'écart, de poids comparable : le visiteur recevait deux
   consignes contradictoires dans le même souffle. Le bouton garde
   l'action ; l'indice de défilement descend au bas de l'écran, perd
   son verbe impératif et devient ce qu'il aurait toujours dû être —
   une affordance, pas une instruction.                              */
html.is-3d [data-stage3d] .act--hero{ position:relative; }
html.is-3d [data-stage3d] .act--hero .hint{
  position:absolute; left:50%; bottom:clamp(16px,3vh,34px); top:auto; translate:-50% 0;
  margin:0; font-size:9.5px; letter-spacing:.4em; opacity:.42;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
/* Le filet qui descend dit « plus bas » sans avoir à l'écrire. */
html.is-3d [data-stage3d] .act--hero .hint::after{
  content:""; width:1px; height:34px;
  background:linear-gradient(180deg, var(--lbc-gold), transparent);
  transform-origin:top; animation:lbcHintDraw 2.8s ease-in-out infinite;
}
@keyframes lbcHintDraw{
  0%,100%{ scale:1 .35; opacity:.35; }
  50%    { scale:1 1;   opacity:.9; }
}

/* --- Un seul « Intégrer le Cercle » à l'écran -------------------
   Le libellé apparaissait deux fois, à 620 px d'écart : en or dans la
   nav, en fantôme dans le hero. Répéter le même mot au même moment ne
   renforce pas, cela dilue. Le CTA de la nav s'efface tant que celui
   du hero est visible, et prend le relais dès qu'il sort du champ. */
/* On le désigne par sa destination. lux.js le range tantôt en .lux-cta,
   tantôt en .lux-chip selon l'ordre où les feuilles s'appliquent — et
   quand c'est « puce », le correctif de lisibilité écrit en !important
   l'habillait en étiquette passive, gris pâle sur la barre. L'attribut
   href ne dépend, lui, d'aucune classification. */
html [data-lbcnav] a[href*="Integrer"]{
  background:transparent !important;
  border:1px solid var(--lbc-gold) !important;
  color:var(--lbc-gold) !important;
  transition:opacity .45s var(--ease-quiet,ease), background-color .3s ease, color .3s ease;
}
html [data-lbcnav] a[href*="Integrer"]:hover{
  background:var(--lbc-gold) !important;
  color:var(--lbc-forest-900) !important;
}
html.hero-cta-visible [data-lbcnav] a[href*="Integrer"]{
  opacity:0; pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  html.is-3d [data-stage3d] .act--hero .hint::after{ animation:none; scale:1 1; opacity:.7; }
}


/* --- Le hero doit tenir dans un écran ---------------------------
   Il mesurait 949 px pour une fenêtre de 900 : le rembourrage vertical
   du hero (7vw, soit 101 px de chaque côté sur un écran large) poussait
   la composition sous le pli, et l'indice de défilement avec elle. On
   ramène le rembourrage à ce que la hauteur permet ; min-height:100svh
   garde la section pleine page, et le bas de section redevient le bas
   de l'écran — là où l'indice doit se trouver. */
html.is-3d [data-stage3d] .act--hero{
  padding-block:clamp(24px,5vh,64px);
}

/* ============================================================
   LES HUIT PORTES
   Le couloir portait déjà huit battants à plaque gravée — Paris,
   Bruxelles, Genève, Milan, Luxembourg, Tunis, Bangkok, Andorre — et
   pas un ne réagissait. Ils mènent désormais à leur territoire.
   ============================================================ */
.door-label{
  position:fixed; z-index:42; pointer-events:none;
  transform:translate(18px, -50%);
  padding:11px 16px; border-radius:2px;
  background:rgba(6,28,23,.9); border:1px solid rgba(184,150,63,.42);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s ease;
}
.door-label.is-on{ opacity:1; }
.door-label b{
  display:block; font-family:var(--font-display,Georgia,serif);
  font-size:16px; font-weight:400; color:var(--lbc-cream); letter-spacing:.01em;
}
.door-label i{
  display:block; font-style:normal; margin-top:3px;
  font-family:var(--font-body,Inter,sans-serif); font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--lbc-gold);
}
/* Le curseur dit que le battant s'ouvre sur quelque chose. */
html.is-3d .stage.is-door{ cursor:pointer; }
html.no-3d .door-label{ display:none; }


/* Ce que le voile radial assurait, l'ombre du texte le reprend : le
   titre tient sur les zones claires de la scène sans qu'aucune forme
   ne vienne se poser sur le décor. */
html.is-3d [data-stage3d] :is(.act--hero,.act--quote,.act--film) :is(h1,h2,blockquote,.lead,.body,.eyebrow,.sig){
  text-shadow:0 1px 2px rgba(4,20,17,.55), 0 4px 26px rgba(4,20,17,.75);
}

/* ============================================================
   PASSE DE PROGRESSION — 21/08/2026
   ============================================================ */

/* --- 1. La barre cesse de décapiter le texte --------------------
   À 62 % d'opacité avec un flou, elle était dans le pire des deux
   mondes : assez couvrante pour abîmer ce qui passe dessous, assez
   transparente pour qu'on voie le dégât. « qui connaît quelqu'un »
   coupé net, « haut niveau » amputé. Sur le premier écran elle reste
   discrète — les portes doivent respirer. Dès qu'on entre dans le
   couloir, elle devient franche.                                  */
html.is-3d:not(.hero-cta-visible) [data-lbcnav]{
  background:rgba(4,24,20,.96) !important;
  border-bottom-color:rgba(184,150,63,.22) !important;
}

/* --- 2. Les respirations deviennent un choix -------------------
   Le rembourrage vertical valait 290 px sur toutes les sections, ce
   qui creusait 375 px de fond nu sous chaque panneau — mesuré :
   5 209 px de vide cumulé sur 14 545, soit 36 % de la page. Les actes
   qui portent du contenu se resserrent ; ceux qui SONT un silence —
   la citation, le film — gardent leur pleine hauteur, parce que là le
   vide est le propos.                                              */
html.is-3d [data-stage3d] .act:not(.act--hero):not(.act--quote):not(.act--film){
  padding-block:clamp(64px,8vh,112px) clamp(52px,6.5vh,92px);
  min-height:auto;
}

/* --- 3. Les chiffres cessent d'être une barre de statistiques ---
   244 px de haut sur 1 120 de large, quatre colonnes égales : la mise
   en page d'un rapport annuel. « 100+ membres passés par le Cercle »
   vaut mieux qu'une ligne de tableau. On leur donne de l'air, un filet
   qui les sépare comme les colonnes d'un frontispice, et une chasse
   qui les fait exister.                                            */
html.is-3d [data-stage3d] .act--figs .act__in{
  padding-block:clamp(48px,7vh,96px);
}
html.is-3d [data-stage3d] .figs{ gap:0; }
html.is-3d [data-stage3d] .figs > div{
  padding:clamp(8px,1.6vw,28px) clamp(12px,2vw,34px);
  border-left:1px solid rgba(184,150,63,.20);
}
html.is-3d [data-stage3d] .figs > div:first-child{ border-left:0; }
html.is-3d [data-stage3d] .figs b{
  font-size:clamp(44px,5.6vw,92px);
  line-height:.92;
  display:block;
}
html.is-3d [data-stage3d] .figs span{
  font-size:12px; letter-spacing:.06em; margin-top:18px; opacity:.72;
  max-width:16ch; margin-inline:auto;
}

/* --- 4. Plus d'étiquette orpheline ------------------------------
   Six étiquettes se répartissaient 5 + 1 : la dernière seule et
   centrée sous les cinq autres. Un 3 + 3 se compose, un 5 + 1 se
   subit. On contraint la laisse, la ligne se casse d'elle-même.    */
[data-stage3d] .eco{ max-width:min(760px, 100%); margin-inline:auto; }

/* ============================================================
   ESPRIT — LA GALERIE DORÉE RETROUVE SA PLACE
   L'accueil 2D montrait ici la galerie du Sénat, à gauche de la
   maxime. Le passage à la 3D avait laissé la section entièrement
   typographique : trois valeurs, six valeurs, et pas une image sur
   la seule page qui parle de ce que le Cercle EST. La photo revient
   à sa place — et son tapis rouge répond à celui du couloir derrière.
   ============================================================ */
[data-stage3d] .spirit__top{
  display:grid;
  grid-template-columns:minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap:clamp(26px,3.6vw,58px);
  align-items:center;
  text-align:left;
}
[data-stage3d] .spirit__img{ margin:0; }
[data-stage3d] .spirit__img picture{ display:block; }
[data-stage3d] .spirit__img img{
  width:100%; height:auto; display:block;
  border:1px solid rgba(184,150,63,.34);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.85);
}
/* Les marges auto qui centraient ces blocs les remettraient au milieu
   de leur propre colonne : on les retire dans ce contexte. */
[data-stage3d] .spirit__say :is(.eyebrow,.spirit,.sig){ margin-inline:0; }

@media (max-width:820px){
  [data-stage3d] .spirit__top{ grid-template-columns:1fr; gap:clamp(20px,4vh,34px); }
  [data-stage3d] .spirit__img img{ max-height:46vh; object-fit:cover; }
}

/* ============================================================
   CHAÎNAGE — chaque acte mène à sa page
   Quatre sections de l'accueil avaient une page dédiée sans qu'aucun
   chemin n'y conduise : « ce que le Cercle apporte », les histoires,
   les témoignages, les voies d'accès. Elles n'existaient que dans le
   pied de page. On reprend le motif déjà présent dans deux autres
   actes — un lien souligné en fin de bloc.
   ============================================================ */
html.is-3d [data-stage3d] .act--offer .link,
html.is-3d [data-stage3d] .act--proof .link,
html.is-3d [data-stage3d] .act--says .link{
  margin-top:clamp(30px,4vh,52px);
}
/* Sous l'appel principal, deux issues secondaires : elles ne doivent
   jamais lui disputer le regard. */
[data-stage3d] .adm__links{
  display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px);
  justify-content:center; margin-top:clamp(26px,3.5vh,44px);
}
[data-stage3d] .adm__links .link{
  margin-top:0; font-size:13.5px; opacity:.72;
  transition:opacity .3s ease, border-color .3s ease;
}
[data-stage3d] .adm__links .link:hover{ opacity:1; }

/* Le surtitre se cassait en « CLUB D'AFFAIRES PRIVÉ · SUR /
   COOPTATION & CANDIDATURE » sur un téléphone : un « SUR » suspendu
   en fin de ligne, juste au-dessus du titre. On équilibre les deux
   lignes plutôt que de remplir la première. */
@media (max-width:620px){
  /* Deux lignes propres plutôt qu'un « SUR » suspendu : sur un
     téléphone le point médian saute et la seconde moitié passe à la
     ligne d'elle-même. */
  [data-stage3d] .eyebrow{ text-wrap:balance; }
  [data-stage3d] .eyebrow .eyebrow__sep{ display:none; }
  [data-stage3d] .eyebrow .eyebrow__suite{ display:block; }
}

/* --- LE DÉTAIL DES SIX CARTES --------------------------------------
   Même geste que les domaines de MiseEnRelation : la carte annonce, le
   survol précise. La troisième ligne est en position absolue et la
   carte réserve sa hauteur — une carte qui grandit sous le curseur
   pousse ses voisines et fait sauter la grille entière.

   Sur ordinateur seulement : au doigt, aucun survol n'existe, le
   détail est là d'emblée. Il reste dans le document dans les deux cas,
   un lecteur d'écran l'énonce quoi qu'il arrive. */
[data-stage3d] .cards article{ position:relative; overflow:hidden; }
[data-stage3d] .cards .plus{
  display:block; font-style:normal;
  font-size:clamp(13px,1.25vw,14.5px); line-height:1.6;
  color:var(--lbc-gold-soft,#D2B978);
  margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(184,150,63,.24);
}
/* En repli 2D les cartes passent sur fond crème : l'or clair y tombe à
   1,9:1. On reprend le jeton prévu pour ça, qui tient 5,2:1. */
html.no-3d [data-stage3d] .cards .plus{
  color:var(--text-gold-on-light,#745D28);
  border-top-color:rgba(116,93,40,.26);
}
html.no-3d [data-stage3d] .cards .fleche{ color:var(--text-gold-on-light,#745D28); }
[data-stage3d] .cards article.is-lien a{
  display:block; text-decoration:none; color:inherit;
}
[data-stage3d] .cards .fleche{
  position:absolute; right:clamp(16px,2vw,24px); top:clamp(16px,2vw,24px);
  color:var(--lbc-gold); font-size:15px;
  opacity:.45; transition:opacity .3s ease, transform .3s var(--ease-quiet,ease);
}
/* 24/09/2026 : la flèche se déplace au survol ; sous un vrai pointeur seulement. */
@media (hover: hover) and (pointer: fine){
[data-stage3d] .cards article.is-lien:hover .fleche{ opacity:1; transform:translate(3px,-3px); }
}
[data-stage3d] .cards article.is-lien a:focus-visible{ outline:2px solid var(--lbc-gold); outline-offset:6px; border-radius:4px; }
/* 24/09/2026 : retour au toucher, la carte large répond à la pression ;
   la courbe vive lit le jeton --ease-vif de finish.css, une seule source. */
[data-stage3d] .cards article.is-lien{ touch-action:manipulation; }
[data-stage3d] .cards article.is-lien:active{ transform:scale(.98); transition:transform 160ms var(--ease-vif, cubic-bezier(0.23, 1, 0.32, 1)); }

@media (hover: hover) and (pointer: fine){
  /* Le détail reste DANS LE FLUX, et seule son opacité change. Posé en
     absolu au bas de la carte, il fallait lui réserver une hauteur en
     dur — et trois lignes de texte débordaient de la réserve prévue
     pour deux : quatre cartes sur six se chevauchaient. Une réserve
     fixe ne peut pas connaître la longueur du texte ; le flux, si. La
     carte est donc un peu plus haute au repos, et rien ne se superpose
     jamais, quelle que soit la longueur de la phrase. */
  [data-stage3d] .cards .plus{
    opacity:0; transform:translateY(6px);
    transition:opacity .34s var(--ease-quiet,ease), transform .34s var(--ease-quiet,ease);
  }
  [data-stage3d] .cards article:hover .plus,
  [data-stage3d] .cards article.is-lien:focus-within .plus{ opacity:1; transform:none; }
  [data-stage3d] .cards article:hover{ border-color:rgba(184,150,63,.5); }
}
@media (prefers-reduced-motion: reduce){
  [data-stage3d] .cards .plus, [data-stage3d] .cards .fleche{ transition:opacity .01s; transform:none !important; }
}

/* --- LES TÉMOIGNAGES MÈNENT QUELQUE PART --------------------------
   Six citations posées là, sans suite : le bloc était une impasse. Un
   lien étiré couvre maintenant chaque carte — la citation reste
   sélectionnable, le clavier n'a qu'une cible par témoignage, et la
   flèche dit où l'on va.

   Ce qu'on révèle au survol, c'est ce que la carte porte déjà : le nom
   et le métier passent de la pénombre à l'or. Rien n'est caché au
   repos — l'attribution d'une citation ne se dissimule pas, elle fait
   sa crédibilité. */
[data-stage3d] .glass{ position:relative; }
[data-stage3d] .glass__vers{
  position:absolute; inset:0; z-index:2;
  text-decoration:none; border-radius:var(--radius-lg);
}
[data-stage3d] .glass .fleche{
  position:absolute; right:clamp(16px,1.8vw,22px); top:clamp(16px,1.8vw,22px);
  color:var(--lbc-gold); font-size:15px; opacity:.3;
  transition:opacity .3s ease, transform .3s var(--ease-quiet,ease);
}
/* 24/09/2026 : même geste que les cartes, la flèche ne bouge que sous un vrai pointeur. */
@media (hover: hover) and (pointer: fine){
[data-stage3d] .glass:hover .fleche{ opacity:1; transform:translate(3px,-3px); }
}
@media (prefers-reduced-motion: reduce){
  [data-stage3d] .glass .fleche{ transition:opacity .3s ease; transform:none !important; }
}
[data-stage3d] .glass cite,
[data-stage3d] .glass small{ transition:color .35s ease, opacity .35s ease; }
[data-stage3d] .glass:hover cite{ color:var(--lbc-gold); }
[data-stage3d] .glass:hover small{ opacity:1; }
[data-stage3d] .glass__vers:focus-visible{ outline:2px solid var(--lbc-gold); outline-offset:4px; }

/* En repli 2D les cartes sont sur fond crème : l'or clair y tombe à
   1,9:1. On reprend le jeton prévu pour ça. */
html.no-3d [data-stage3d] .glass .fleche{ color:var(--text-gold-on-light,#745D28); }
html.no-3d [data-stage3d] .glass:hover cite{ color:var(--text-gold-on-light,#745D28); }

/* --- LE MOT DE BIENVENUE, EN TEXTE --------------------------------
   Il était gravé dans une toile plaquée sur les deux vantaux. Illisible
   à trois reprises, et pour une raison qui ne tenait ni à la lumière ni
   au contraste : sa définition dépendait de l'écran, du champ de la
   caméra et de la distance, et il se fendait en deux dès que les
   battants bougeaient. La règle inscrite en tête de home-3d.js le
   disait depuis le début — la 3D porte le lieu, pas les mots.

   Ici, c'est du texte : net à toute densité d'écran, dans la fonte de
   la maison, et il ne se coupe jamais en deux. Il vit tant que la
   porte est close, et cède la place au titre dès qu'elle s'ouvre. */
[data-stage3d] .accueil-porte{
  position:fixed; inset:0; z-index:3;
  /* Un fond à soi. Le laiton poli renvoie la lampe du couloir en un
     reflet vif, pile sur la ligne de jonction — c'est-à-dire pile
     derrière le mot. Dépolir la porte pour sauver le texte serait
     abîmer le décor pour un problème de texte ; on donne plutôt au
     texte le fond que tout cartouche lui donnait, en plus souple :
     une ombre douce, centrée, qui ne se voit pas comme un objet. */
  background:radial-gradient(58% 46% at 50% 50%,
             rgba(6,20,16,.82) 0%, rgba(6,20,16,.62) 45%,
             rgba(6,20,16,.18) 74%, rgba(6,20,16,0) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(10px,1.4vh,18px); margin:0; text-align:center;
  pointer-events:none;
  opacity:0; transition:opacity .26s var(--ease-quiet,ease);
}
html.is-sealed [data-stage3d] .accueil-porte{ opacity:1; }
/* Le mot s'en va vite, la promesse arrive après : sans ce décalage les
   deux typographies se superposent une demi-seconde, et l'on ne lit ni
   l'une ni l'autre. Le passage de relais était déjà réglé du temps du
   cartouche gravé ; il se refait ici, entre deux blocs de texte. */
[data-stage3d] .act--hero .act__in{
  transition:opacity .5s var(--ease-quiet,ease) .3s,
             transform .5s var(--ease-quiet,ease) .3s;
}
html.is-sealed [data-stage3d] .act--hero .act__in{ transition-delay:0s; }
[data-stage3d] .accueil-porte__haut{
  font-family:var(--font-body); font-size:clamp(10px,1.05vw,13px);
  font-weight:600; letter-spacing:.42em; text-transform:uppercase;
  color:color-mix(in srgb, var(--lbc-gold-soft,#D2B978) 92%, transparent);
  text-shadow:0 2px 14px rgba(0,0,0,.75);
  padding-left:.42em;                       /* la chasse ajoute un blanc final */
}
[data-stage3d] .accueil-porte__bas{
  font-family:var(--font-display); font-weight:400;
  line-height:1.04; letter-spacing:-.015em;
  color:#FBECC4;
  text-shadow:0 3px 26px rgba(0,0,0,.8), 0 0 60px rgba(0,0,0,.5);
  /* Le nom du club tient sur une seule ligne, à toute largeur. Il se
     cassait en « Lutopie Business / Club » à cause d'une largeur
     plafonnée à 14 caractères — un nom propre qui se coupe en deux
     n'est plus un nom, c'est une adresse tronquée. La taille suit
     donc la fenêtre : vingt et un signes de Fraunces occupent environ
     onze cadratins, d'où 7,6 vw pour garder une marge de chaque côté,
     borné à 68 px pour ne pas devenir une enseigne sur grand écran. */
  white-space:nowrap;
  font-size:clamp(21px,7.6vw,68px);
}
/* Le filet sous le nom, repris du cartouche gravé. */
[data-stage3d] .accueil-porte__bas::after{
  content:""; display:block; width:clamp(90px,10vw,150px); height:1px;
  background:color-mix(in srgb, var(--lbc-gold) 70%, transparent);
  margin:clamp(14px,2vh,26px) auto 0;
}
@media (prefers-reduced-motion: reduce){
  [data-stage3d] .accueil-porte{ transition:none; }
}
/* En repli 2D il n'y a pas de porte : le mot n'a pas lieu d'être. */
html.no-3d [data-stage3d] .accueil-porte{ display:none; }
[data-stage3d] .accueil-porte__sceau{
  width:clamp(70px,7.6vw,116px); height:auto; display:block;
  filter:drop-shadow(0 4px 22px rgba(0,0,0,.7));
  margin-bottom:clamp(4px,1vh,14px);
}

/* Le globe occupait la moitié de l'écran sans dire ce qu'il était ni ce
   qu'on pouvait en faire. Une ligne suffit — et elle ne s'affiche qu'en
   3D, puisqu'en repli 2D il n'y a pas de globe à faire tourner. */
[data-stage3d] .globe-mode{
  margin:clamp(18px,2.4vh,30px) 0 0; font-size:13.5px; line-height:1.6;
  color:color-mix(in srgb, var(--lbc-cream) 62%, transparent);
}
html.no-3d [data-stage3d] .globe-mode{ display:none; }


/* Le voile de traversée : la lumière de la pièce qu'on est en train
   de franchir. Blanc chaud, pas blanc d'hôpital — c'est la couleur
   du rai sous les portes du couloir. */
.seuil-voile{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%, #FFF3DC 0%, #F6E3BC 55%, #E9D0A0 100%);
  /* 24/09/2026 : la durée et le délai sont écrits en ligne par home-3d.js
     (traverser) ; la courbe à départ lent est un paramètre de ce minutage,
     le voile doit être plein quand la caméra franchit le plan de la porte.
     Un retuning se fait avec les facteurs 0.62 / 0.12 du script, puis se
     teste sur un vol réel. */
  opacity:0; transition:opacity 1.05s cubic-bezier(.5,0,.8,1);
}
.seuil-voile.est-la{ opacity:1; }


/* Pendant la traversée : le décor a la parole, le texte se retire.
   Le pointeur est coupé — on ne clique pas deux portes à la fois. */
html.is-traversee [data-stage3d],
html.is-traversee [data-lbcnav],
html.is-traversee .stage__snd,
html.is-traversee .accueil-porte,
html.is-traversee .door-label{
  opacity:0 !important; transition:opacity .3s ease;
  pointer-events:none;
}


/* Le conseil de porte : une ligne, une seule fois par visite, posée
   au bas de l'écran quand on s'engage dans le couloir. Elle dit le
   geste et s'efface — un maître d'hôtel, pas un tutoriel. */
.porte-conseil{
  position:fixed; left:50%; bottom:calc(42px + env(safe-area-inset-bottom,0px)); translate:-50% 12px; z-index:60;
  margin:0; padding:10px 22px; border-radius:999px;
  background:rgba(4,26,22,.78); border:1px solid rgba(201,168,76,.4);
  backdrop-filter:blur(8px);
  color:#EFE7D6; font-size:13.5px; letter-spacing:.04em; white-space:nowrap;
  opacity:0; transition:opacity .8s ease, translate .8s ease;
  pointer-events:none;
}
.porte-conseil.est-la{ opacity:1; translate:-50% 0; }
@media (max-width:700px){ .porte-conseil{ white-space:normal; text-align:center; max-width:82vw; } }

/* ============================================================
   REPLI 2D — le couloir habillé en toile de fond du hero.
   Sur téléphone et petits écrans, pas de film : la photo du couloir
   aux maximes prend le premier écran, voilée pour la lisibilité.
   ============================================================ */
html.no-3d [data-stage3d] .act--hero{
  background:
    linear-gradient(180deg, rgba(4,18,15,.62) 0%, rgba(4,18,15,.42) 45%, rgba(4,18,15,.86) 100%),
    url("assets/photos/couloir-fond.jpg") center 38% / cover no-repeat !important;
}

/* ============================================================
   LES SEPT NIVEAUX — médaillons de laiton gravés (assets/embleme).
   Sur la scène film, les pastilles flottent comme des trophées de
   couloir ; en repli 2D, mêmes pastilles sur fond plein.
   ============================================================ */
[data-stage3d] .niveaux{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(18px,2.4vw,38px); list-style:none; padding:0;
  margin:clamp(36px,4vw,56px) 0 0;
}
[data-stage3d] .niveaux li{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:clamp(104px,11.5vw,150px);
}
[data-stage3d] .niveaux img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5));
  transition:transform .45s var(--ease-quiet,ease);
}
/* 24/09/2026 : le survol déplace le médaillon ; il exige un vrai pointeur, pas seulement hover. */
@media (hover: hover) and (pointer: fine){
  [data-stage3d] .niveaux li:hover img{ transform:translateY(-6px) scale(1.04); }
}
[data-stage3d] .niveaux em{
  font-style:normal; color:var(--lbc-gold);
  font-size:11px; letter-spacing:.22em;
}
[data-stage3d] .niveaux span{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(15px,1.3vw,19px); color:var(--lbc-cream);
}
html.no-3d [data-stage3d] .act--niveaux{ background:var(--lbc-forest) !important; color:var(--lbc-cream); }

/* ============================================================
   LE BOUTON D'ORFÈVRE. L'or en aplat passait pour de la moutarde :
   un métal n'est pas une couleur, c'est un dégradé, un biseau et un
   reflet. Dégradé de laiton, lèvre claire en haut, ombre portée dans
   la masse, double bague d'or autour, et un éclat qui traverse au
   survol. Réservé à l'appel principal — les autres gardent le contour.
   ============================================================ */
html.is-3d [data-stage3d] .act--hero .cta,
html.no-3d [data-stage3d] .act--hero .cta{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#F4E2A4 0%,#DDBB58 36%,#B8963F 68%,#E6C97F 100%);
  color:#0B2721;
  border:1px solid rgba(122,94,34,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,248,222,.9),
    inset 0 -2px 7px rgba(88,60,12,.42),
    0 0 0 1px rgba(201,168,76,.30),
    0 0 0 6px rgba(201,168,76,.10),
    0 16px 34px -14px rgba(0,0,0,.65);
  text-shadow:0 1px 0 rgba(255,246,214,.55);
}
/* 24/09/2026 : le reflet traversant (.cta::before) est retire d'ici : pierre.css,
   charge apres cette feuille et proprietaire du .cta, l'eteint par content:none ;
   une regle que rien ne rend n'a rien a animer. */
/* 24/09/2026 : survol qui souleve, sous un vrai pointeur seulement. */
@media (hover: hover) and (pointer: fine){
html.is-3d [data-stage3d] .act--hero .cta:hover,
html.no-3d [data-stage3d] .act--hero .cta:hover{
  background:linear-gradient(180deg,#F7E7B0 0%,#E2C264 36%,#BD9C45 68%,#EBD08A 100%);
  border-color:rgba(122,94,34,.95);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,248,222,.95),
    inset 0 -2px 7px rgba(88,60,12,.4),
    0 0 0 1px rgba(201,168,76,.4),
    0 0 0 6px rgba(201,168,76,.18),
    0 20px 44px -14px rgba(0,0,0,.7),
    0 0 46px -10px rgba(217,180,74,.55);
}
}

/* 24/09/2026 : retour au toucher. Le survol vit derrière le pointeur fin,
   la pression répond partout. Celle des .cta appartient à pierre.css,
   chargé après cette feuille et propriétaire du composant ; ici seulement
   le médaillon sonore et les propriétés tactiles des contrôles. La courbe
   vive lit le jeton --ease-vif de finish.css, une seule source. */
[data-stage3d] .cta,
.stage__snd{ touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.stage__snd:active{
  transform:scale(.97);
  transition:transform 160ms var(--ease-vif, cubic-bezier(0.23, 1, 0.32, 1)), color .3s ease, border-color .3s ease, background .3s ease;
}
@media (prefers-reduced-motion: reduce){
  /* 24/09/2026 : sans mouvement, ni soulevement, ni pression ; les fondus restent. */
  html.is-3d [data-stage3d] .act--hero .cta:hover,
  html.no-3d [data-stage3d] .act--hero .cta:hover,
  .stage__snd:active,
  [data-stage3d] .cards article.is-lien:active,
  [data-stage3d] .niveaux li:hover img{ transform:none; }
}