/* ==========================================================================
   Cyril Supor — feuille de style unique du site
   Charpente commune, trois signatures de couleur. Voir 05-direction-artistique.md
   ========================================================================== */

:root{
  /* Fond et matière, communs à tout le site */
  --fond:#10161F;
  --fond-2:#151D28;
  --surface:#1A2430;
  --surface-2:#212D3B;
  --ligne:#2C3948;
  --ligne-vive:#3B4A5A;

  --texte:#E9EFF5;
  --texte-2:#B6C4D1;
  --muted:#7D8E9E;

  /* Signature de la page. Redéfinie par [data-metier] */
  --sig:#5B8CFF;
  --sig-doux:rgba(91,140,255,.14);
  --sig-halo:rgba(91,140,255,.30);

  --r:14px;
  --max:1180px;
  --pad:clamp(20px,5vw,48px);

  /* Combinaison B du banc d'essai, posée le 31 août 2026. Motif : Space
     Grotesk, Inter et JetBrains Mono sont le trio par défaut des sites
     produits en série, et ce site plaide l'inverse d'un profil
     interchangeable. Le caractère est confiné au titrage, qui ne porte
     que huit à dix mots par page ; le corps et le mono viennent d'une
     même famille dessinée pour la documentation technique, donc pour
     être lue longtemps. Réversible en trois lignes. */
  --t-titre:'Bricolage Grotesque','Segoe UI',system-ui,-apple-system,sans-serif;
  --t-texte:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-mono:'IBM Plex Mono','SF Mono',ui-monospace,Menlo,monospace;

  --ease:cubic-bezier(.16,.84,.44,1);
}

[data-metier="coordination"]{ --sig:#45D3C0; --sig-doux:rgba(69,211,192,.13); --sig-halo:rgba(69,211,192,.30); }
[data-metier="operations"]  { --sig:#F5B23D; --sig-doux:rgba(245,178,61,.13); --sig-halo:rgba(245,178,61,.30); }
[data-metier="commercial"]  { --sig:#FF7A5C; --sig-doux:rgba(255,122,92,.13); --sig-halo:rgba(255,122,92,.30); }

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:hidden; }

/* NE PAS remplacer ce `overflow-x: hidden` par `clip` : essayé le 30 août,
   annulé le jour même. `clip` répare bien le `position: sticky`, mais il crée
   un contexte de rognage qui casse le positionnement de TOUS les éléments
   `position: fixed` du site : la barre de navigation s'est retrouvée en bas de
   page. Les rares blocs qui ont besoin de coller passent en `fixed` piloté en
   JavaScript, voir la séquence de production et l'intro. */
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  overflow-x:hidden;
  background:var(--fond);
  color:var(--texte);
  font-family:var(--t-texte);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{ font-family:var(--t-titre); line-height:1.1; letter-spacing:-.02em; margin:0; font-weight:600; }
h2{ font-size:clamp(30px,4.4vw,50px); }
h3{ font-size:clamp(21px,2.4vw,27px); }
p{ margin:0 0 1.1em; }
strong,b{ color:#fff; font-weight:600; }

.enveloppe{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad); }
.mono{ font-family:var(--t-mono); font-size:.78em; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- Toile de fond animée ---------------------------------------- */
#toile{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; opacity:.85;
}
.lueur{
  position:fixed; z-index:0; pointer-events:none;
  width:60vw; height:60vw; max-width:760px; max-height:760px;
  border-radius:50%;
  background:radial-gradient(circle, var(--sig-halo) 0%, transparent 62%);
  filter:blur(80px); opacity:.5;
  transition:background .8s var(--ease);
}
.lueur.a{ top:-22vw; right:-16vw; }
.lueur.b{ bottom:-26vw; left:-20vw; opacity:.32; }

/* ---------- Curseur ------------------------------------------------------ */
.curseur{
  position:fixed; top:0; left:0; z-index:9999;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid var(--sig); border-radius:50%;
  pointer-events:none; opacity:0;
  transition:width .28s var(--ease), height .28s var(--ease),
             margin .28s var(--ease), background .28s var(--ease),
             opacity .3s, border-color .5s;
  mix-blend-mode:difference;
}
.curseur.actif{ opacity:1; }
.curseur.grand{ width:62px; height:62px; margin:-31px 0 0 -31px; background:var(--sig-doux); }
.point{
  position:fixed; top:0; left:0; z-index:9999;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  background:var(--sig); border-radius:50%;
  pointer-events:none; opacity:0; transition:opacity .3s;
}
.point.actif{ opacity:1; }
@media (hover:none),(pointer:coarse){ .curseur,.point{ display:none; } }

/* ---------- Barre de lecture + navigation -------------------------------- */
.jauge{
  position:fixed; top:0; left:0; z-index:120;
  height:2px; width:0;
  background:var(--sig);
  box-shadow:0 0 12px var(--sig-halo);
  transition:background .6s var(--ease);
}

.barre{
  position:fixed; top:0; left:0; right:0; z-index:110;
  padding:22px 0;
  transition:padding .35s var(--ease), background .35s var(--ease),
             border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.barre.compacte{
  padding:11px 0;
  background:rgba(16,22,31,.84);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--ligne);
}
.barre .enveloppe{ display:flex; align-items:center; gap:26px; }

.sceau{
  font-family:var(--t-titre); font-weight:600; font-size:17px;
  letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
}
.sceau i{ color:var(--sig); font-style:normal; transition:color .6s var(--ease); }

.menu{ display:flex; gap:6px; margin-left:auto; align-items:center; }
.menu a{
  text-decoration:none; color:var(--texte-2);
  font-size:14.5px; padding:8px 13px; border-radius:9px;
  transition:color .25s, background .25s;
  white-space:nowrap;
}
.menu a:hover{ color:#fff; background:var(--surface-2); }
.menu a.ici{ color:var(--sig); }
.menu a.bouton{
  border:1px solid var(--ligne-vive); color:var(--texte);
}
.menu a.bouton:hover{ border-color:var(--sig); color:var(--sig); background:transparent; }
@media (max-width:820px){
  .menu a.optionnel{ display:none; }
  .barre{ padding:14px 0; }
}
@media (max-width:620px){
  .menu a.bouton{ display:none; }
  .menu a{ font-size:13px; padding:6px 9px; }
  .menu{ gap:2px; }
  .barre .enveloppe{ gap:10px; }
  .sceau{ font-size:15px; }
}

/* ---------- Contenu ------------------------------------------------------ */
main{ position:relative; z-index:2; }
section{ padding:clamp(72px,10vw,124px) 0; position:relative; }

.chapeau{ max-width:760px; margin-bottom:52px; }
.etiquette{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--sig); margin-bottom:16px;
  transition:color .6s var(--ease);
}
.etiquette::before{
  content:''; width:22px; height:1px; background:currentColor; display:block;
}
.chapeau p{ color:var(--texte-2); font-size:clamp(17px,1.9vw,19.5px); margin-top:18px; }

/* ---------- Ouverture ---------------------------------------------------- */
.ouverture{ padding-top:clamp(120px,17vh,190px); padding-bottom:clamp(52px,7vw,84px); }
/* L'ouverture de l'accueil occupe un écran plein, depuis le 31 août. Motif de
   terrain : au sortir de l'intro, l'inertie d'un trackpad emportait Cyril
   directement sur les trois cartes, sans qu'il ait vu son propre portrait. On
   ne peut pas retenir un défilement, on peut lui donner de quoi s'arrêter. */
.ouverture:not(.ouverture-metier){
  min-height:100vh; display:flex; align-items:center;
}
.ouverture:not(.ouverture-metier) > .grille{ width:100%; }
/* `?tout=1` rend à l'ouverture sa hauteur naturelle, le temps d'une capture. */
.controle .ouverture:not(.ouverture-metier){ min-height:0; display:block; }
.ouverture .grille{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px);
  align-items:center;
}
.ouverture h1{
  font-size:clamp(38px,6.6vw,74px); letter-spacing:-.035em; margin-bottom:22px;
}
.ouverture h1 em{
  font-style:normal; color:var(--sig);
  transition:color .6s var(--ease);
}
.accroche{
  font-size:clamp(18px,2.1vw,22px); color:var(--texte-2);
  max-width:56ch; line-height:1.56;
}
.accroche b{ color:#fff; }

.etat{
  display:flex; flex-wrap:wrap; gap:9px 18px; align-items:center;
  margin-top:30px; color:var(--muted); font-size:14.5px;
}
.pastille{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--texte-2);
}
.pastille::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:#46D17F; box-shadow:0 0 0 0 rgba(70,209,127,.55);
  animation:pouls 2.4s infinite;
}
@keyframes pouls{
  0%{ box-shadow:0 0 0 0 rgba(70,209,127,.5); }
  70%{ box-shadow:0 0 0 11px rgba(70,209,127,0); }
  100%{ box-shadow:0 0 0 0 rgba(70,209,127,0); }
}

.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:11px; text-decoration:none;
  font-size:15px; font-weight:500;
  border:1px solid var(--ligne-vive); color:var(--texte);
  transition:border-color .25s, color .25s, transform .25s var(--ease), background .25s;
}
.cta:hover{ transform:translateY(-2px); border-color:var(--sig); color:var(--sig); }
.cta.plein{
  background:var(--sig); border-color:var(--sig); color:#10161F; font-weight:600;
}
.cta.plein:hover{ color:#10161F; filter:brightness(1.1); }
.cta svg{ width:15px; height:15px; }

.portrait-ouverture{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--ligne);
  aspect-ratio:4/5;
}
.portrait-ouverture img{
  width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  filter:saturate(.92) contrast(1.04) brightness(.9);
}
.portrait-ouverture::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 62%, rgba(16,22,31,.55) 100%);
}
@media (max-width:900px){
  .ouverture .grille{ grid-template-columns:1fr; }
  .portrait-ouverture{ order:-1; aspect-ratio:4/3; }
  .portrait-ouverture img{ object-position:62% 12%; }
}

/* ---------- Les trois portes -------------------------------------------- */
.portes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
@media (max-width:940px){ .portes{ grid-template-columns:1fr; } }

.porte{
  position:relative; display:block; text-decoration:none;
  padding:30px 28px 26px; border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface) 0%,var(--fond-2) 100%);
  border:1px solid var(--ligne);
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
  transform-style:preserve-3d;
}
.porte::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--pc); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.porte::after{
  content:''; position:absolute; inset:0; opacity:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%), var(--pc-doux), transparent 62%);
  transition:opacity .45s;
}
.porte:hover{ transform:translateY(-5px); border-color:var(--pc-bord); }
.porte:hover::before{ transform:scaleX(1); }
.porte:hover::after{ opacity:1; }

.porte .num{
  font-family:var(--t-mono); font-size:12px; color:var(--pc);
  letter-spacing:.14em;
}
.porte h3{ margin:14px 0 12px; }
.porte p{ color:var(--texte-2); font-size:15.5px; margin-bottom:20px; }
.porte .fleche{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--pc); font-size:14.5px; font-weight:500;
  position:relative; z-index:2;
}
.porte .fleche svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.porte:hover .fleche svg{ transform:translateX(5px); }
.porte .marques{
  display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px;
  position:relative; z-index:2;
}
.porte .marques span{
  font-size:12px; padding:4px 10px; border-radius:20px;
  border:1px solid var(--ligne); color:var(--muted);
  font-family:var(--t-mono); letter-spacing:.04em;
}

/* ---------- Fil rouge ---------------------------------------------------- */
.fil{
  margin-top:22px; padding:28px 30px;
  border-radius:var(--r); border:1px solid var(--ligne);
  background:var(--fond-2);
  border-left:2px solid var(--sig);
}
.fil p{ margin:0; color:var(--texte-2); }
.fil p + p{ margin-top:12px; }

/* ---------- Chiffres ----------------------------------------------------- */
.chiffres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:1px;
  background:var(--ligne); border:1px solid var(--ligne); border-radius:var(--r);
  overflow:hidden;
}
.chiffre{ background:var(--fond-2); padding:26px 24px; }
.chiffre .v{
  font-family:var(--t-titre); font-weight:600; font-size:clamp(29px,3.6vw,40px);
  color:var(--sig); line-height:1; letter-spacing:-.03em;
  transition:color .6s var(--ease);
}
.chiffre .l{ color:var(--muted); font-size:14px; margin-top:11px; line-height:1.45; }

/* ---------- Cas ---------------------------------------------------------- */
.cas{
  border:1px solid var(--ligne); border-radius:18px;
  background:var(--fond-2); overflow:hidden;
  margin-bottom:22px;
}
.cas-tete{
  padding:30px clamp(24px,3.4vw,40px) 0;
  display:flex; flex-wrap:wrap; gap:14px; align-items:baseline;
  justify-content:space-between;
}
.cas-tete h3{ max-width:26ch; }
.ou{
  font-family:var(--t-mono); font-size:12px; color:var(--muted);
  letter-spacing:.06em; text-align:right;
}
.ou b{ color:var(--texte-2); font-weight:500; display:block; }

.cas-corps{ padding:22px clamp(24px,3.4vw,40px) 32px; }

.temps{ display:grid; gap:0; margin-top:8px; }
.temps > div{
  padding:18px 0 18px 30px; position:relative;
  border-left:1px solid var(--ligne);
}
.temps > div:last-child{ border-left-color:transparent; padding-bottom:0; }
.temps > div::before{
  content:''; position:absolute; left:-4.5px; top:24px;
  width:8px; height:8px; border-radius:50%;
  background:var(--fond-2); border:1.5px solid var(--sig);
}
.temps h4{
  font-family:var(--t-mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--sig); margin-bottom:9px;
  transition:color .6s var(--ease);
}
.temps p:last-child{ margin-bottom:0; }
.temps p{ color:var(--texte-2); }

/* liste de détails concrets */
.details{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:9px; }
.details li{
  padding-left:22px; position:relative; color:var(--texte-2); font-size:15.5px;
}
.details li::before{
  content:''; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:1px; background:var(--sig);
  transform:rotate(45deg);
}
.details li b{ color:#fff; }

/* ---------- Séquence en quatre temps ------------------------------------- */
.sequence{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:24px;
}
@media (max-width:820px){ .sequence{ grid-template-columns:repeat(2,1fr); } }
.sequence figure{
  margin:0; border:1px solid var(--ligne); border-radius:12px; overflow:hidden;
  background:var(--surface);
  transition:transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.sequence figure:hover{
  transform:translateY(-6px) scale(1.015);
  border-color:var(--sig);
  box-shadow:0 18px 40px -22px var(--sig-halo);
}
.sequence img{ aspect-ratio:4/3; object-fit:cover; object-position:50% 45%; width:100%; background:var(--surface); }
.sequence figcaption{ padding:13px 15px 15px; font-size:13.5px; color:var(--texte-2); }
.sequence .etape{
  display:block; font-family:var(--t-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--sig); margin-bottom:6px;
}

/* ---------- Schéma des flux (SVG) ---------------------------------------- */
.schema{
  border:1px solid var(--ligne); border-radius:var(--r);
  background:var(--fond-2); padding:clamp(20px,3vw,32px); margin-top:24px;
}
.schema svg{ width:100%; height:auto; overflow:visible; }
.schema .trait{
  fill:none; stroke:var(--sig); stroke-width:1.4; opacity:.55;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s var(--ease);
}
.schema.vu .trait{ stroke-dashoffset:0; }
.schema .noeud{ fill:var(--surface-2); stroke:var(--ligne-vive); stroke-width:1; }
.schema .noeud-t{
  fill:var(--texte-2); font-family:var(--t-texte); font-size:12.5px;
}
.schema .coeur{ fill:var(--sig-doux); stroke:var(--sig); stroke-width:1.4; }
.schema .coeur-t{ fill:#fff; font-family:var(--t-titre); font-size:14px; font-weight:600; }
.schema .legende{ color:var(--muted); font-size:13.5px; margin-top:16px; }
@media (max-width:700px){
  .schema{ overflow-x:auto; }
  .schema svg{ width:600px; min-width:600px; max-width:none; }
}

/* ---------- Tableau reconstitué ------------------------------------------ */
.tableau{
  border:1px solid var(--ligne); border-radius:var(--r);
  overflow:hidden; margin-top:22px; background:var(--fond-2);
}
.tableau-tete{
  padding:14px 18px; border-bottom:1px solid var(--ligne);
  display:flex; gap:12px; align-items:center;
  font-family:var(--t-mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.tableau-tete .puces{ display:flex; gap:6px; }
.tableau-tete .puces i{
  width:9px; height:9px; border-radius:50%; background:var(--ligne-vive); display:block;
}
.grille-scroll{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
th,td{ padding:11px 16px; text-align:left; border-bottom:1px solid var(--ligne); }
th{
  font-family:var(--t-mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); font-weight:400;
  background:var(--surface);
}
td{ color:var(--texte-2); }
td.n{ font-family:var(--t-mono); color:var(--texte); }
tr:last-child td{ border-bottom:none; }
.alerte{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px;
  font-family:var(--t-mono); letter-spacing:.04em;
}
.alerte.rouge{ background:rgba(255,99,80,.14); color:#FF8A72; }
.alerte.orange{ background:rgba(245,178,61,.14); color:#F5B23D; }
.alerte.vert{ background:rgba(70,209,127,.13); color:#5FD494; }

/* ---------- Bloc tempérament --------------------------------------------- */
.temperament{
  display:block;
}
.temperament .photo{
  border-radius:18px; overflow:hidden; border:1px solid var(--ligne);
}
.temperament .photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.temperament .photo{ display:flex; }

.traits{ display:grid; gap:1px; background:var(--ligne); border:1px solid var(--ligne);
  border-radius:var(--r); overflow:hidden; }
.trait-item{ background:var(--fond-2); padding:22px 24px; }
.trait-item h4{
  font-family:var(--t-titre); font-size:17px; margin-bottom:8px;
  display:flex; align-items:center; gap:11px;
}
.trait-item h4 span{
  font-family:var(--t-mono); font-size:11px; color:var(--sig);
  letter-spacing:.1em; border:1px solid var(--ligne-vive);
  padding:2px 8px; border-radius:5px;
}
.trait-item p{ margin:0; color:var(--texte-2); font-size:15px; }
.trait-item p + p{ margin-top:11px; }

/* ---------- Parcours ----------------------------------------------------- */
.frise{ position:relative; padding-left:26px; }
.frise::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:var(--ligne);
}
.frise .avance{
  content:''; position:absolute; left:0; top:6px; width:1px;
  background:var(--sig); height:0; transition:height .1s linear;
  box-shadow:0 0 10px var(--sig-halo);
}
.etape-frise{ position:relative; padding:0 0 30px 26px; }
.etape-frise::before{
  content:''; position:absolute; left:-4.5px; top:9px;
  width:9px; height:9px; border-radius:50%;
  background:var(--fond); border:1.5px solid var(--ligne-vive);
  transition:border-color .4s, background .4s;
}
.etape-frise.vu::before{ border-color:var(--sig); background:var(--sig-doux); }
.etape-frise .quand{
  font-family:var(--t-mono); font-size:12px; color:var(--muted); letter-spacing:.05em;
}
.etape-frise h4{ font-family:var(--t-titre); font-size:18px; margin:5px 0 4px; }
.etape-frise .lieu{ color:var(--sig); font-size:14.5px; }
.etape-frise p{ color:var(--texte-2); font-size:15px; margin:8px 0 0; max-width:62ch; }

/* ---------- Outils ------------------------------------------------------- */
.outils{ display:grid; gap:1px; background:var(--ligne);
  border:1px solid var(--ligne); border-radius:var(--r); overflow:hidden; }
.outil-groupe{ background:var(--fond-2); padding:22px 24px;
  display:grid; grid-template-columns:190px 1fr; gap:20px; align-items:start; }
@media (max-width:700px){ .outil-groupe{ grid-template-columns:1fr; gap:12px; } }
.outil-groupe h4{
  font-family:var(--t-mono); font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--sig); padding-top:5px;
}
.jetons{ display:flex; flex-wrap:wrap; gap:8px; }
.jetons span{
  font-size:14px; padding:6px 13px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--ligne);
  color:var(--texte-2);
  transition:border-color .25s, color .25s, transform .25s var(--ease);
}
.jetons span:hover{ border-color:var(--sig); color:#fff; transform:translateY(-2px); }

/* ---------- Contact et pied ---------------------------------------------- */
.contact{
  border:1px solid var(--ligne); border-radius:20px;
  background:linear-gradient(150deg,var(--surface) 0%,var(--fond-2) 62%);
  padding:clamp(30px,5vw,54px);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,44px);
  align-items:center;
}
@media (max-width:760px){ .contact{ grid-template-columns:1fr; } }
.contact .vignette{
  width:132px; height:132px; border-radius:50%; overflow:hidden;
  border:1px solid var(--ligne-vive);
}
.contact .vignette img{ width:100%; height:100%; object-fit:cover; }
.contact h2{ margin-bottom:14px; }
.contact p{ color:var(--texte-2); max-width:60ch; }
.coord{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

footer{
  border-top:1px solid var(--ligne); margin-top:60px;
  padding:30px 0 42px; color:var(--muted); font-size:13.5px;
  position:relative; z-index:2;
}
footer .enveloppe{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }

/* ---------- Apparition au défilement ------------------------------------- */
.monte{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.monte.vu{ opacity:1; transform:none; }
.monte.d1{ transition-delay:.08s; }
.monte.d2{ transition-delay:.16s; }
.monte.d3{ transition-delay:.24s; }
.monte.d4{ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  .monte{ opacity:1; transform:none; transition:none; }
  .schema .trait{ stroke-dashoffset:0; }
  .pastille::before{ animation:none; }
  .curseur,.point{ display:none; }
}

/* ---------- Galerie de vidéos ------------------------------------------
   Décision du 26 août : une preuve consultable vaut mieux qu'une capture
   de mauvaise qualité. Les vignettes sont les miniatures officielles.     */
.videos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px; margin-top:20px;
}
.video{
  display:block; text-decoration:none; border-radius:12px; overflow:hidden;
  border:1px solid var(--ligne); background:var(--surface);
  position:relative;
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.video:hover{
  transform:translateY(-5px);
  border-color:var(--sig);
  box-shadow:0 18px 38px -22px var(--sig-halo);
}
.video .vue{ position:relative; }
.video img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.video .jouer{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(16,22,31,.35); opacity:0; transition:opacity .35s;
}
.video:hover .jouer{ opacity:1; }
.video .jouer span{
  width:46px; height:46px; border-radius:50%;
  background:var(--sig); color:#10161F;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; padding-left:3px;
}
.video .nom{
  padding:11px 13px 13px; font-size:13.5px; color:var(--texte-2);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.video .nom b{ font-weight:500; color:var(--texte); font-size:13.5px; }
.video .nom i{
  font-style:normal; color:var(--muted); font-family:var(--t-mono); font-size:11px;
}

/* ---------- Liens de preuve --------------------------------------------- */
.preuves{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.preuve{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px; border-radius:10px; text-decoration:none;
  font-size:14px; color:var(--texte-2);
  border:1px solid var(--ligne); background:var(--surface);
  transition:border-color .25s, color .25s, transform .25s var(--ease);
}
.preuve:hover{ border-color:var(--sig); color:#fff; transform:translateY(-2px); }
.preuve svg{ width:15px; height:15px; flex-shrink:0; color:var(--sig); }

/* ---------- Héros d'ouverture des pages métier, 31 août 2026 -------------
   Remplace le bandeau 24:7 qui vivait SOUS le titre. L'image est désormais le
   fond du titre, exactement comme sur la carte d'où l'on vient : le morphing
   cesse d'être « un titre qui grandit pendant qu'une illustration descend »
   pour devenir un seul bloc qui change de taille.
   Effet de bord bienvenu : en 24:7 on ne voyait que 52 % de la hauteur d'une
   image 16:9, le héros en montre plus de 80 %. */
.heros{
  position:relative; width:100%;
  height:min(76vh,640px); min-height:400px;
  overflow:hidden; display:flex; align-items:flex-end;
}
.heros img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* Trois couches, chacune avec son travail : lisibilité de la barre en haut,
   lisibilité du titre en bas à gauche, et raccord avec le fond de la page,
   sans lequel le héros se termine par une arête franche. */
/* Le dégradé vertical atteint l'opacité pleine à 94 %, pas à 100 %. Corrigé le
   31 août sur une observation de Cyril : en finissant au dernier pixel, il
   restait une frange de deux pour cent où l'image transparaissait encore, et
   comme ces trois images ont un fond plus noir que celui du site, la frange se
   lisait comme un trait. Les six derniers pour cent sont désormais du fond pur,
   ce qui rend la démarcation impossible par construction. */
.heros .voile{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(16,22,31,.78) 0%, rgba(16,22,31,.10) 26%,
                    rgba(16,22,31,.45) 62%, rgba(16,22,31,.93) 84%,
                    var(--fond) 94%),
    linear-gradient(90deg, rgba(16,22,31,.72) 0%, rgba(16,22,31,.08) 58%, transparent 100%);
}
.heros-texte{
  position:relative; z-index:2; width:100%;
  padding-bottom:clamp(26px,5vh,54px);
}
.heros-texte .etiquette{ margin-bottom:14px; }
/* Plus petit que le h1 de l'accueil, et c'est voulu : posé sur une image, un
   titre de 66 px prenait trois lignes et mangeait le héros entier. Deux
   lignes laissent voir ce sur quoi il est posé. */
.heros h1{
  font-size:clamp(32px,4.6vw,56px); letter-spacing:-.03em;
  max-width:19ch; margin:0;
  text-shadow:0 2px 30px rgba(16,22,31,.55);
}
/* Le héros touche le haut de la fenêtre : c'est la barre qui flotte dessus,
   d'où le voile sombre en haut. */
.ouverture-metier{ padding-top:0; padding-bottom:clamp(24px,3.5vw,40px); }
.ouverture-metier .accroche{ margin-top:clamp(24px,3.5vw,40px); }
/* On arrive sur le premier cas juste après : sans ce rapprochement, deux
   paddings pleins s'additionnent et ouvrent un écran presque vide. */
.ouverture-metier + section{ padding-top:clamp(40px,5.5vw,70px); }
/* En largeur mobile, le titre passe SOUS l'image au lieu d'être posé dessus.
   Motif mesuré à 500 px le 31 août : pour dégager la hauteur qu'un titre
   superposé réclame, il fallait un cadre en 4/3, et une image 16/9 y perd un
   quart de sa largeur. Sur le bandeau de coordination, les fils étaient
   coupés avant de converger, c'est-à-dire avant de vouloir dire quelque
   chose. Le morphing n'y perd rien : sur un écran étroit les trois cartes
   sont déjà empilées en pleine largeur. */
@media (max-width:760px){
  .heros{ display:block; height:auto; min-height:0; }
  .heros img{ position:relative; height:auto; aspect-ratio:16/10; }
  .heros .voile{
    inset:0 0 auto 0; width:100%; aspect-ratio:16/10;
    background:linear-gradient(180deg, rgba(16,22,31,.50) 0%, transparent 30%,
                               rgba(16,22,31,.80) 86%, var(--fond) 100%);
  }
  .heros-texte{ padding-top:20px; padding-bottom:0; }
  .heros h1{ max-width:none; text-shadow:none; }
}

/* ---------- Mosaïque des centres d'intérêt -------------------------------
   Remplace le panneau des trois écritures, qui n'illustrait qu'un des cinq
   sujets. Chaque vignette répond à son item de droite, dans les deux sens.  */
.mosaique{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
  margin-bottom:clamp(28px,4vw,46px);
}
.mosaique .vign{
  margin:0; position:relative; overflow:hidden;
  aspect-ratio:4 / 5;
  border-radius:14px; border:1px solid var(--ligne);
  background:linear-gradient(150deg,var(--surface) 0%,var(--fond-2) 100%);
  transition:border-color .45s var(--ease), transform .45s var(--ease),
             box-shadow .45s var(--ease);
}
/* Le zoom du survol passe par `scale` et non par `transform` : la parallaxe
   pose `translate` sur la même image, et les deux propriétés se composent
   sans se marcher dessus. Avec un seul `transform`, il fallait choisir entre
   un zoom sec et une parallaxe molle. */
.mosaique .vign img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.95) brightness(.94);
  transition:filter .5s var(--ease), scale .8s var(--ease);
}
.mosaique .vign.sans-image img{ display:none; }
.mosaique .repli{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  font-size:34px; color:var(--sig); opacity:.5;
}
.mosaique .vign.sans-image .repli{ display:flex; }

/* la legende identifie la vignette sans qu'il faille survoler */
.mosaique figcaption{
  position:absolute; right:0; bottom:0; left:0;
  padding:26px 12px 10px;
  background:linear-gradient(to top,rgba(8,12,18,.88) 30%,transparent);
  font-family:var(--t-mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:#fff;
  transition:color .35s var(--ease);
}

.mosaique .vign.actif,
.mosaique .vign:hover{
  border-color:var(--sig);
  transform:translateY(-4px);
  box-shadow:0 16px 34px -22px var(--sig-halo);
}
.mosaique .vign.actif img,
.mosaique .vign:hover img{
  filter:saturate(1.04) brightness(1);
  scale:1.05;
}
/* cadrages : le HUD du jeu vit a gauche, le sentier de la montagne en bas */
.mosaique .vign[data-int="jeux"] img{ object-position:22% 50%; filter:saturate(1) brightness(1.06); }
.mosaique .vign[data-int="plein-air"] img{ object-position:50% 62%; }
.mosaique .vign[data-int="voyages"] img{ object-position:50% 46%; }

.mosaique .vign.actif figcaption,
.mosaique .vign:hover figcaption{ color:var(--sig); }
.mosaique .vign.actif .repli{ opacity:1; }

/* l'item de droite se signale quand sa vignette est survolée */
.trait-item{ transition:background .4s var(--ease); }
.trait-item.actif{ background:var(--sig-doux); }

@media (max-width:900px){
  .mosaique{ grid-template-columns:repeat(3,1fr); gap:10px; }
}
@media (max-width:560px){
  .mosaique{ grid-template-columns:repeat(2,1fr); }
  .mosaique figcaption{ font-size:10px; padding:20px 9px 8px; }
}

/* ---------- Schéma des deux phases -------------------------------------- */
.schema .phase-t{
  fill:var(--sig); font-family:var(--t-mono); font-size:11.5px; letter-spacing:.14em;
}
.schema .pastilles circle{ fill:var(--sig); opacity:.55; }
.schema .pastilles.dense circle{ opacity:.42; }
.schema .separation{ stroke:var(--ligne); stroke-width:1; stroke-dasharray:4 5; }
.schema .bascule-t{
  fill:var(--muted); font-family:var(--t-texte); font-size:12px; font-style:italic;
}

/* ---------- Lien de source discret, en fin de bloc ----------------------- */
.lien-source{ margin-top:14px; font-family:var(--t-mono); font-size:12px; letter-spacing:.06em; }
.lien-source a{
  color:var(--muted); text-decoration:none;
  border-bottom:1px solid var(--ligne); padding-bottom:2px;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.lien-source a:hover{ color:var(--sig); border-color:var(--sig); }

/* ---------- La vignette mène à son texte -------------------------------- */
.vign-lien{ position:absolute; inset:0; z-index:3; display:block; }
.vign-lien:focus-visible{ outline:2px solid var(--sig); outline-offset:3px; }
.trait-item{ scroll-margin-top:96px; }

/* ---------- Organigramme du cas commercial ------------------------------ */
.orga .hors .noeud{ fill:var(--fond-2); stroke:var(--ligne); opacity:.5; }
.orga .hors .noeud-t{ opacity:.45; }
.orga .cible rect{ fill:var(--sig-doux); stroke:var(--sig); stroke-width:1.4; }
.orga .cible.t2 rect{ fill:transparent; stroke-dasharray:5 4; }
.orga .cible.t3 rect{ fill:transparent; stroke:var(--ligne-vive); }
.orga .rang{
  fill:var(--sig); font-family:var(--t-mono); font-size:10.5px; letter-spacing:.11em;
}
.orga .cible.t3 .rang{ fill:var(--muted); }
.orga .poste{ fill:#fff; font-family:var(--t-texte); font-size:13px; }
.orga .chemin-t{ fill:var(--muted); font-family:var(--t-texte); font-size:12px; font-style:italic; }
.orga .note-orga{ fill:var(--muted); font-family:var(--t-texte); font-size:12.5px; }
.orga .chevron path{ fill:none; stroke:var(--sig); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }

/* ---------- Chaîne de production BP Corp -------------------------------- */
.chaine .bande{ fill:var(--surface-2); stroke:var(--ligne); stroke-width:1; }
.chaine .bande.main{ fill:var(--sig-doux); stroke:var(--sig); }
.chaine .bande-t{
  fill:var(--muted); font-family:var(--t-mono); font-size:10.5px; letter-spacing:.12em;
}
.chaine .bande-t.sig{ fill:var(--sig); }
.chaine .etape rect{ fill:var(--surface-2); stroke:var(--ligne-vive); stroke-width:1; }
.chaine .etape.vive rect{ stroke:var(--sig); }
.chaine .num{ fill:var(--sig); font-family:var(--t-mono); font-size:10.5px; letter-spacing:.1em; }
.chaine .titre{ fill:#fff; font-family:var(--t-titre); font-size:13.5px; font-weight:600; }
.chaine .det{ fill:var(--muted); font-family:var(--t-texte); font-size:11.5px; }
.chaine .chevron path{
  fill:none; stroke:var(--sig); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; opacity:.7;
}
.chaine .entonnoir{ fill:var(--sig-doux); stroke:var(--sig); stroke-width:1; opacity:.85; }
.chaine .vol{ fill:var(--texte-2); font-family:var(--t-texte); font-size:12.5px; }
.chaine .note-chaine{ fill:var(--muted); font-family:var(--t-texte); font-size:12px; }

/* ---------- Étoile Aptimea ---------------------------------------------- */
.etoile .pole rect{ fill:var(--surface-2); stroke:var(--ligne-vive); stroke-width:1; }
.etoile .pole-t{ fill:#fff; font-family:var(--t-titre); font-size:13.5px; font-weight:600; }
.etoile .pole-d{ fill:var(--muted); font-family:var(--t-texte); font-size:11.5px; }
.etoile .flux{
  fill:var(--sig); font-family:var(--t-mono); font-size:10.5px; letter-spacing:.06em; opacity:.9;
}
.etoile .note-etoile{ fill:var(--muted); font-family:var(--t-texte); font-size:12.5px; }
/* le halo evite que les traits passent au travers des libelles de flux */
.etoile .flux{ stroke:var(--fond-2); stroke-width:4px; paint-order:stroke fill; }

/* ---------- Parcours : la frise et sa clé de lecture --------------------- */
.parcours-duo{
  display:grid; grid-template-columns:1fr 320px; gap:clamp(24px,4vw,48px);
  align-items:start;
}
@media (max-width:960px){ .parcours-duo{ grid-template-columns:1fr; } }
.lecture-parcours{
  position:sticky; top:96px;
  border:1px solid var(--ligne); border-radius:var(--r);
  background:var(--fond-2); padding:22px;
}
.lecture-parcours h3{ font-size:19px; margin-bottom:10px; }
.lecture-parcours p{ color:var(--texte-2); font-size:14.5px; margin-bottom:18px; }
.lecture-parcours svg{ width:100%; height:auto; overflow:visible; }
.lecture-parcours .col{ font-family:var(--t-mono); font-size:10px; letter-spacing:.1em; }
.lecture-parcours .qui{ fill:var(--texte-2); font-family:var(--t-texte); font-size:13px; }
.lecture-parcours .regle{ stroke:var(--ligne); stroke-width:1; }
.lecture-parcours .cle{ fill:var(--muted); font-family:var(--t-texte); font-size:11px; }
.lecture-parcours .c1{ fill:#45D3C0; }
.lecture-parcours .c2{ fill:#F5B23D; }
.lecture-parcours .c3{ fill:#FF7A5C; }
.lecture-parcours .p{ fill:none; stroke-width:1.6; }
.lecture-parcours .p.c1{ stroke:#45D3C0; }
.lecture-parcours .p.c2{ stroke:#F5B23D; }
.lecture-parcours .p.c3{ stroke:#FF7A5C; }
.lecture-parcours .p.plein.c1{ fill:#45D3C0; }
.lecture-parcours .p.plein.c2{ fill:#F5B23D; }
.lecture-parcours .p.plein.c3{ fill:#FF7A5C; }

/* ---------- Parcours : la frise et sa clé de lecture --------------------- */
.parcours-duo{
  display:grid; grid-template-columns:1fr 320px; gap:clamp(24px,4vw,48px);
  align-items:start;
}
@media (max-width:960px){ .parcours-duo{ grid-template-columns:1fr; } }
.lecture-parcours{
  position:sticky; top:96px;
  border:1px solid var(--ligne); border-radius:var(--r);
  background:var(--fond-2); padding:22px;
}
.lecture-parcours h3{ font-size:19px; margin-bottom:10px; }
.lecture-parcours p{ color:var(--texte-2); font-size:14.5px; margin-bottom:18px; }
.lecture-parcours svg{ width:100%; height:auto; overflow:visible; }
.lecture-parcours .col{ font-family:var(--t-mono); font-size:10px; letter-spacing:.1em; }
.lecture-parcours .qui{ fill:var(--texte-2); font-family:var(--t-texte); font-size:13px; }
.lecture-parcours .regle{ stroke:var(--ligne); stroke-width:1; }
.lecture-parcours .cle{ fill:var(--muted); font-family:var(--t-texte); font-size:11px; }
.lecture-parcours .c1{ fill:#45D3C0; }
.lecture-parcours .c2{ fill:#F5B23D; }
.lecture-parcours .c3{ fill:#FF7A5C; }
.lecture-parcours .p{ fill:none; stroke-width:1.6; }
.lecture-parcours .p.c1{ stroke:#45D3C0; }
.lecture-parcours .p.c2{ stroke:#F5B23D; }
.lecture-parcours .p.c3{ stroke:#FF7A5C; }
.lecture-parcours .p.plein.c1{ fill:#45D3C0; }
.lecture-parcours .p.plein.c2{ fill:#F5B23D; }
.lecture-parcours .p.plein.c3{ fill:#FF7A5C; }

/* ---------- Le point de passage, en abstrait ---------------------------- */
.flux-abstrait .fil{
  fill:none; stroke-width:1.2; opacity:.5;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 2.2s var(--ease);
}
.flux-abstrait.vu .fil{ stroke-dashoffset:0; }
.flux-abstrait .f1{ stroke:var(--sig); }
.flux-abstrait .f2{ stroke:var(--sig); opacity:.32; }
.flux-abstrait .f3{ stroke:var(--texte-2); opacity:.26; }
.flux-abstrait .f4{ stroke:var(--sig); opacity:.42; }
.flux-abstrait .passage{ stroke:var(--ligne-vive); stroke-width:1; stroke-dasharray:3 5; }
.flux-abstrait .noyau{ fill:var(--sig); }
.flux-abstrait .bord{
  fill:var(--muted); font-family:var(--t-mono); font-size:10.5px; letter-spacing:.12em;
}

/* ---------- Visuel illustratif dans un cas ------------------------------ */
.visuel-cas img{
  width:100%; height:auto; display:block;
  border:1px solid var(--ligne); border-radius:var(--r);
}
.visuel-cas .legende{ color:var(--muted); font-size:13.5px; margin-top:14px; }

/* ---------- Intro de l'accueil, ajoutée le 30 août 2026 ------------------
   La scène n'existe dans le DOM que si intro.js a pu la monter : navigateur
   sans WebGL, mouvement réduit, mobile ou seconde visite, elle n'est jamais
   insérée et rien ici ne s'applique. */
/* La scène ne sert qu'à réserver la course de défilement. Elle annule le
   padding que le site donne à tous ses <section>, sans quoi elle ouvre une
   bande vide au-dessus de l'intro. */
/* La marge négative cale l'accueil exactement en haut de la fenêtre à la fin
   de la course. Elle est la condition du chevauchement décrit plus bas : pour
   que le portrait apparaisse PENDANT que les fils s'éteignent, il faut qu'il
   soit déjà en place derrière eux. */
.intro-scene{ position:relative; height:300vh; margin-bottom:-100vh; padding:0; }

/* Fixe, et non collante. `position:sticky` ne tient pas ici : html et body
   portent overflow-x:hidden, qui crée un conteneur de défilement sur lequel
   le sticky se cale au lieu de se caler sur la fenêtre. Le site a besoin de
   cet overflow, donc c'est l'intro qui change de technique. */
.intro-colle{
  position:fixed; inset:0; z-index:40; overflow:hidden;
  background:var(--fond); display:grid; place-items:center;
  /* Pas de transition sur l'opacité : elle est pilotée image par image au
     défilement depuis le 31 août, et une transition la ferait traîner d'une
     demi-seconde derrière le geste. */
  transition:visibility .45s;
}
.intro-colle.finie{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-toile{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.intro-passer{
  position:absolute; right:clamp(16px,3vw,32px); top:clamp(16px,3vw,30px); z-index:3;
  font-family:var(--t-mono); font-size:12px; letter-spacing:.06em; cursor:pointer;
  color:var(--muted); background:rgba(16,22,31,.5); border:1px solid var(--ligne);
  border-radius:99px; padding:8px 16px; backdrop-filter:blur(8px);
  transition:.2s var(--ease);
}
.intro-passer:hover{ color:var(--texte); border-color:var(--sig); }
.intro-invite{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:3;
  font-family:var(--t-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:opacity .4s var(--ease); pointer-events:none;
}
.intro-invite i{ display:block; width:1px; height:26px;
  background:linear-gradient(var(--muted),transparent); }

/* Tant que l'intro est là, la barre de navigation ne doit pas flotter par
   dessus : elle appartient au site, pas à l'intro. */
.intro-active .barre{ opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.intro-active .barre.compacte{ opacity:1; pointer-events:auto; }

/* ---------- Sortie de l'intro : le portrait arrive pendant que les fils
   s'éteignent, 31 août 2026 -----------------------------------------------
   Trois essais ont été nécessaires, et le troisième vient de Cyril. Il y a eu
   la sortie séquentielle, où l'accueil montait après l'intro : deux gestes qui
   se suivent. Puis la sortie sur place, cassée par un fait tout bête :
   un défilement ne s'arrête pas où sa course s'arrête, et l'élan d'un
   trackpad emportait le portrait hors champ avant qu'on l'ait vu.

   La réponse ne se joue donc pas APRÈS l'intro, mais PENDANT. Sur le dernier
   tiers de la course, la couche d'intro s'efface pendant que l'accueil se
   rapproche depuis le fond, et les deux se croisent. L'élan ne peut plus rien
   faire rater, puisque le portrait est déjà apparu quand la course se termine.
   Les fils deviennent le voile qu'on écarte, ce qui était l'image de départ.

   Tout est piloté par `--intro-reveal`, que le défilement fait passer de 0
   à 1 : c'est un fondu au scroll, pas une animation lancée sur un seuil, donc
   il suit le geste exactement et se rejoue à l'envers si l'on remonte. */
.intro-active .ouverture .grille{
  opacity:var(--intro-reveal,0);
  transform:scale(calc(.93 + .07 * var(--intro-reveal,0)));
  filter:blur(calc((1 - var(--intro-reveal,0)) * 7px));
}
/* Le bloc entier est géré par son parent : porter le flou sur un seul élément
   plutôt que sur cinq garde le défilement fluide sur une machine modeste. */
.intro-active .ouverture .monte{ opacity:1; transform:none; transition:none; }

@media (prefers-reduced-motion:reduce){
  .intro-active .ouverture .grille{ opacity:1; transform:none; filter:none; }
}

/* ---------- Effets validés au banc d'essai, 30 août 2026 ----------------- */

/* Ken Burns sur le portrait d'ouverture. 8 % sur 26 s : assez lent pour qu'on
   ne le voie pas bouger, assez présent pour que l'image ne semble pas morte.
   Le portrait de contact n'en a pas : deux images qui respirent sur la même
   page, ça se remarque, et ce qui se remarque devient un effet. */
/* La courbe compte plus que l'amplitude : l'easing du site concentre le
   mouvement dans les premières secondes puis stagne, ce qui rend l'effet
   invisible. Une courbe sinusoïdale le répartit sur toute la durée. */
.portrait-ouverture img{
  animation:kenburns 20s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  from{ transform:scale(1.01) translate(0,0); }
  to  { transform:scale(1.13) translate(-2.6%,-1.8%); }
}

/* Parallaxe, élargie le 31 août 2026 au héros, aux visuels de cas et aux
   vignettes. Le décalage arrive par la propriété `translate`, posée en
   JavaScript ; `scale` reste libre pour le survol. Un `margin-top` en
   pourcentage est exclu : il se calcule sur la LARGEUR du conteneur et non
   sur sa hauteur, ce qui décalait l'image de plusieurs centaines de pixels.

   Chaque famille tire sa marge de glissement d'un endroit différent :
   le héros et le visuel de cas la tiennent d'un cadre plus large que l'image,
   donc rien n'est rogné sur les côtés ; les vignettes n'ont aucun débord
   naturel et la tirent d'un agrandissement. */
/* Le JavaScript ne pose qu'un nombre, `--p`, entre -1 et 1 : la position de
   l'élément dans sa traversée de l'écran. Chaque famille décide ensuite
   comment le dépenser. Refait ainsi le 31 août, et ce n'est pas de l'élégance
   gratuite : les trois familles n'ont pas la même marge, et deux d'entre elles
   ne peuvent même pas se déplacer de la même manière.

   DÉPLACER LA BOÎTE, ou DÉPLACER LE CONTENU DANS LA BOÎTE : ce sont deux
   gestes différents, et les confondre a produit le défaut signalé par Cyril
   sur le visuel Aptimea. `object-fit: cover` rogne déjà le contenu aux
   dimensions de la boîte ; donner à un cadre un rapport plus long que l'image
   crée bien un débord, mais ce débord est INVISIBLE au `translate`, qui bouge
   la boîte entière et la fait sortir du cadre en découvrant le fond du site.
   Un débord de contenu se parcourt avec `object-position`, jamais autrement.
   Le `scale`, lui, agrandit vraiment la boîte : là, `translate` a de quoi
   travailler. */
.parallaxe img{ will-change:translate, object-position; }

.heros.parallaxe img{ scale:1.10; translate:0 calc(var(--p,0) * 3%); }

/* Cadre plus long que l'image, 2,72 contre 2,4 : le sujet n'est jamais rogné
   sur les côtés, et les treize pour cent de débord vertical se parcourent à
   l'`object-position`. La plage 24 % - 76 % en couvre la moitié, ce qui laisse
   une marge qu'aucun arrondi ne peut manger. */
.visuel-cas.parallaxe{ aspect-ratio:2.72; overflow:hidden;
  border:1px solid var(--ligne); border-radius:var(--r); }
.visuel-cas.parallaxe img{
  width:100%; height:100%; object-fit:cover; border:0; border-radius:0;
  object-position:50% calc(50% + var(--p,0) * 26%);
}

/* Aucun débord naturel : tout vient de l'agrandissement, donc l'amplitude ne
   peut jamais dépasser la moitié de ce que le `scale` ajoute. */
.mosaique .vign.parallaxe img{ scale:1.14; translate:0 calc(var(--p,0) * 5.5%); }
.mosaique .vign.parallaxe:hover img,
.mosaique .vign.parallaxe.actif img{ scale:1.20; }

@media (max-width:760px){
  .parallaxe img{ translate:none !important; scale:1 !important;
    object-position:50% 50% !important; }
  .visuel-cas.parallaxe{ aspect-ratio:auto; }
  .visuel-cas.parallaxe img{ height:auto; }
}

/* Accroche révélée mot à mot */
.mot-a-mot .mot{
  display:inline-block; opacity:.20; transform:translateY(4px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.mot-a-mot .mot.vu{ opacity:1; transform:none; }

/* Séquence de production pilotée au scroll. Les quatre figures sont empilées
   dans un cadre unique, et la molette avance la chaîne. */
/* Fixe et non collante, pour la même raison que l'intro : `overflow-x:hidden`
   sur html et body empêche tout `sticky` de se caler sur la fenêtre. */
.sequence-scene{ position:relative; height:330vh; }
.sequence-pilotee{
  position:fixed; inset:0; z-index:30;
  display:block !important;          /* la grille d'origine n'a plus de sens ici */
  margin:0 !important; padding:0 !important;
  width:100vw !important; height:100vh !important;
  opacity:0; visibility:hidden; pointer-events:none;
  /* le `transform` est piloté en JavaScript et imite un collage : il ne doit
     surtout pas passer par une transition, sinon il traîne derrière le doigt */
  will-change:transform;
  transition:opacity .3s var(--ease), visibility .3s;
}
.sequence-pilotee.en-vue{ opacity:1; visibility:visible; }
/* Centrage explicite : un élément absolu dans une grille se place à sa
   « position statique », une règle subtile qui ne donnait rien de visible. */
.sequence-pilotee figure{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px,78vw); margin:0;
  border-radius:var(--r); overflow:hidden; border:1px solid var(--ligne);
  background:var(--fond-2); will-change:opacity;
}
.sequence-pilotee figure img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  will-change:transform; transform-origin:center; }
/* Légendes agrandies le 31 août : héritées de la grille, elles gardaient une
   taille de vignette alors qu'elles se lisent désormais en plein écran, à
   deux mètres de la molette. Une ligne de plus n'est pas une ligne de trop,
   mais elles restent sur une seule ligne de texte : les images parlent, la
   légende nomme l'étape. */
.sequence-pilotee figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:52px 26px 22px;
  background:linear-gradient(transparent, rgba(16,22,31,.62) 38%, rgba(16,22,31,.97));
  font-size:16px; color:var(--texte);
  transition:opacity .3s var(--ease);
}
.sequence-pilotee .etape{ font-size:12px; letter-spacing:.15em; margin-bottom:7px; }
@media (max-width:760px){
  .sequence-scene{ height:auto; }
  .sequence-pilotee{ position:static; height:auto; display:grid; }
  .sequence-pilotee figure{ position:static; width:auto; opacity:1 !important; }
}
@media (prefers-reduced-motion:reduce){
  .portrait-ouverture img{ animation:none; }
  .mot-a-mot .mot{ opacity:1; transform:none; }
}

/* ---------- Vignette des portes ------------------------------------------
   L'image est le fond de la carte et le titre est posé dessus, exactement
   comme sur le bandeau de la page d'arrivée. C'est ce qui rend le morphing
   lisible : ce n'est pas une image qui grandit à côté d'un titre, c'est le
   même bloc qui change de taille. La vignette sort du padding de la carte
   pour toucher ses bords. */
.porte{ padding-top:0 !important; }
/* Le numéro et le titre sont empilés en flux, calés en bas. Positionnés en
   absolu chacun de son côté, ils se chevauchaient dès que le titre passait
   sur deux lignes. */
.porte .vue{
  position:relative; margin:0 -28px 22px; aspect-ratio:16/10; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 28px 18px;
}
.porte .vue img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s var(--ease);
}
.porte:hover .vue img{ transform:scale(1.04); }
.porte .vue .voile{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,22,31,.30) 0%,rgba(16,22,31,.55) 45%,var(--surface) 100%);
}
.porte .vue .num{ position:relative; z-index:1; margin:0 0 7px; }
.porte .vue h3{ position:relative; z-index:1; margin:0; }
/* Sous 620 px la carte se resserre à 22 px. Le padding de la carte et la marge
   négative de la vignette doivent bouger ENSEMBLE : jusqu'au 2 septembre 2026
   seule la seconde était réduite, et il restait 6 px de fond de chaque côté de
   l'image. Invisible en desktop, vu par Cyril sur son téléphone. */
@media (max-width:620px){
  .porte{ padding-inline:22px; }
  .porte .vue{ margin-inline:-22px; padding-inline:22px; }
}

/* ---------- Transitions entre pages -------------------------------------
   La carte cliquée devient le bandeau de la page suivante : les quatre pages
   cessent d'être quatre documents pour devenir un seul lieu.
   Chrome 126+ et Safari 18.2+. Firefox ne le fait pas : la page change
   normalement, sans transition, et rien ne casse.
   Le nom n'est posé qu'au clic, sur le seul élément cliqué : deux éléments
   portant le même nom au moment du cliché feraient échouer la transition. */
@view-transition { navigation: auto; }

::view-transition-old(root), ::view-transition-new(root){
  animation-duration:.4s; animation-timing-function:cubic-bezier(.16,.84,.44,1);
}
::view-transition-group(heros),
::view-transition-group(voile),
::view-transition-group(titre){ animation-duration:.5s; }
::view-transition-old(heros), ::view-transition-new(heros),
::view-transition-old(voile), ::view-transition-new(voile){
  height:100%; width:100%; object-fit:cover;
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

/* ---------- Lecture sur téléphone, 31 août 2026 --------------------------
   Retour de Cyril depuis son propre appareil : « il faut se scroller sur le
   côté pour voir les tableaux et les schémas en entier, ce n'est pas très
   pratique ». Il a raison, et les deux cas n'appellent pas la même réponse.

   UN TABLEAU N'A PAS BESOIN D'ÊTRE UN TABLEAU. Ses lignes sont indépendantes,
   donc elles se replient en fiches : chaque cellule affiche le libellé de sa
   colonne, repris automatiquement du `<th>` correspondant. Plus rien ne
   défile, et on lit un produit à la fois, ce qui est de toute façon la bonne
   unité de lecture sur un écran étroit. */
@media (max-width:760px){
  .grille-scroll{ overflow-x:visible; }
  table{ min-width:0; display:block; font-size:15px; }
  thead{ display:none; }
  tbody, tr, td{ display:block; }
  tr{ border-bottom:1px solid var(--ligne); padding:10px 0 12px; }
  tr:last-child{ border-bottom:0; }
  td{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    border:0; padding:5px 16px;
  }
  td::before{
    content:attr(data-l);
    font-family:var(--t-mono); font-size:10.5px; letter-spacing:.09em;
    text-transform:uppercase; color:var(--muted); flex-shrink:0;
  }
  /* la première cellule est le nom de la ligne : elle sert de titre de fiche */
  td:first-child{
    display:block; color:#fff; font-weight:600; font-size:16px;
    padding-bottom:6px;
  }
  td:first-child::before{ display:none; }
  td.n{ font-family:var(--t-mono); }
}

/* UN SCHÉMA, LUI, DOIT RESTER UN SCHÉMA. Ses éléments ne veulent rien dire
   séparés les uns des autres : c'est leur disposition qui porte le sens. Il
   continue donc de défiler, mais il le dit, ce qui était le vrai défaut. */
.a-glisser{
  display:none;
  margin-top:10px; text-align:right;
  font-family:var(--t-mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
}
@media (max-width:760px){
  .a-glisser{ display:block; }
}