/* Page d'accueil — hérite de nextbridge.css */

:root{
  --navy:#0B1F38;
  --navy-deep:#071627;
  --blue:#2C5F8D;
  --steel:#9DB8D2;
  --paper:#F2EFE8;
  --paper-2:#E9E4DA;
  --rule:#C9C0B0;
  --rule-dark:rgba(242,239,232,.20);
  --ink:#0B1F38;
  --ink-soft:rgba(11,31,56,.78);

  --serif:'Source Serif 4',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --gut:clamp(20px,4.5vw,64px);
  --maxw:1240px;
}
html[lang="ar"]{ --serif:'Noto Naskh Arabic',serif; --sans:'Noto Naskh Arabic',sans-serif; }

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);font-weight:400;background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.view{display:none}
.view:first-of-type{display:block}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}

/* ============ bandeau utilitaire ============ */
.utility{background:var(--navy-deep);color:var(--steel);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.utility .wrap{display:flex;align-items:center;gap:22px;height:34px}
.utility .sep{margin-inline-start:auto}
.langs{display:flex;gap:14px}
.langs button{letter-spacing:.12em}
.langs button[aria-pressed="true"]{color:#fff;text-decoration:underline;text-underline-offset:4px}
.langs button:hover{color:#fff}

/* ============ en-tête ============ */
/* La barre reste accessible : les rubriques font jusqu'à sept écrans de
   haut, et sans cela on ne peut plus changer de pôle sans tout remonter.
   Elle se resserre dès que le lecteur a quitté le haut de la page. */
.masthead-bar{background:var(--navy);color:var(--paper);
  border-bottom:1px solid var(--rule-dark);
  position:sticky; top:0; z-index:100;
  transition:box-shadow .3s ease}
.masthead-bar.posee{ box-shadow:0 10px 26px -20px rgba(0,0,0,.9) }
.wm-nb{transition:height .3s cubic-bezier(.22,.61,.36,1)}
.masthead-bar .wrap{transition:min-height .3s cubic-bezier(.22,.61,.36,1)}
.masthead-bar.posee .wm-nb{height:44px}
.masthead-bar.posee .wrap{min-height:64px}
@media(prefers-reduced-motion:reduce){
  .wm-nb,.masthead-bar,.masthead-bar .wrap{transition:none}
}
.masthead-bar .wrap{display:flex;align-items:center;gap:32px;min-height:74px;flex-wrap:wrap}
/* L'ecart de 13 px existe pour separer une image du mot a cote. Le pied
   de page n'avait plus d'image mais gardait la regle : l'ecart tombait
   entre « Next » et « Bridge ». Il porte maintenant le meme verrouillage
   que l'en-tete, et le texte disparait. */
.wordmark{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.01em;
  line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:13px}
.wm-pied{height:54px;width:auto;display:block;opacity:.94;margin-bottom:4px}
.wordmark span{font-weight:400;color:var(--steel)}
/* Cashback est la sixieme rubrique, plus une piece rapportee :
   on retire le filet qui l'isolait du reste du menu. */
.nav .nv-cb::before{display:none}
/* Verrouillage vertical : le monogramme au-dessus du nom, un seul objet
   dessine. Sa hauteur commande celle de la barre — a 66 px, NEXT BRIDGE
   tient 9,7 px de capitale, ce qui est le plancher de lisibilite. */
.wm-nb{height:66px;width:auto;display:block;opacity:.96}
.masthead-bar .wrap{min-height:94px}
@media(max-width:900px){.wm-nb{height:54px}.masthead-bar .wrap{min-height:80px}}
@media(max-width:600px){.wm-nb{height:46px}.masthead-bar .wrap{min-height:70px}}
.nav{margin-inline-start:auto;display:flex;gap:26px;flex-wrap:wrap}
.nav button{font-size:13.5px;font-weight:400;color:rgba(242,239,232,.80);
  padding-block:6px;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.nav button:hover{color:#fff;border-bottom-color:var(--steel)}
.nav button[aria-current="page"]{color:#fff;border-bottom-color:var(--paper)}

/* ============ masthead ============ */
.masthead{background:var(--navy);color:var(--paper);padding-block:clamp(52px,7vw,92px)}
.masthead .grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.85fr);
  gap:clamp(32px,6vw,88px);align-items:start}
/* sans encadre a droite, le bandeau reprend toute la largeur */
.masthead .grid > :only-child{grid-column:1 / -1}
.masthead .kicker{color:var(--steel);margin-bottom:26px;display:block}
.masthead h1{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.5vw,45px);
  line-height:1.22;letter-spacing:-.005em;max-width:22ch}
.masthead .sub{margin-top:24px;max-width:58ch;font-size:15.5px;font-weight:400;
  line-height:1.72;color:rgba(242,239,232,.72)}

.factsheet{border-top:1px solid var(--rule-dark)}
.factsheet dl{display:grid;grid-template-columns:1fr;margin:0}
.factsheet div{display:flex;justify-content:space-between;gap:18px;
  padding-block:13px;border-bottom:1px solid var(--rule-dark)}
.factsheet dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel)}
.factsheet dd{font-size:13.5px;color:rgba(242,239,232,.88);text-align:end}
.pending{color:#C9A24A}

/* ============ sections claires ============ */
.section{padding-block:clamp(48px,6vw,80px);border-bottom:1px solid var(--rule)}
.section-label{color:var(--blue);margin-bottom:34px;display:block}
.lead{font-family:var(--serif);font-size:clamp(19px,2.1vw,25px);font-weight:400;
  line-height:1.5;max-width:34ch}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);margin-top:32px}
.cols p{font-size:15px;font-weight:400;line-height:1.78;color:var(--ink-soft)}
.cols p + p{margin-top:16px}

/* ============ registre des pôles ============ */
.registry{border-top:1px solid var(--rule)}
.entry{display:grid;grid-template-columns:82px minmax(0,1fr) minmax(0,1.25fr) 96px;
  gap:clamp(16px,3vw,40px);align-items:start;
  padding-block:30px;border-bottom:1px solid var(--rule);width:100%;
  transition:background .15s}
.entry:hover{background:var(--paper-2)}
.entry .ref{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--blue);padding-top:5px}
.entry h2{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.28;letter-spacing:-.005em}
.entry .desc{font-size:14.5px;font-weight:400;line-height:1.68;color:var(--ink-soft)}
.entry .items{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(11,31,56,.5);line-height:1.9}
.entry .open{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);text-align:end;padding-top:6px}

/* ============ pages pôle ============ */
.crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);margin-bottom:22px}
.crumb a:hover{color:#fff}
.layout{display:grid;grid-template-columns:minmax(0,1fr);
  padding-block:clamp(40px,5vw,64px)}
.index{position:sticky;top:24px;align-self:start;border-top:2px solid var(--ink);padding-top:14px}
.index h3{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:12px;font-weight:500}
.index ol{list-style:none;counter-reset:x}
.index li{border-bottom:1px solid var(--rule)}
.index a{display:block;padding-block:10px;font-size:13.5px;font-weight:400;color:var(--ink-soft);
  transition:color .15s}
.index a:hover{color:var(--ink)}

.svc{border-top:1px solid var(--rule);padding-block:30px}
.svc:first-of-type{border-top:2px solid var(--ink)}
.svc .ref{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;color:var(--blue);
  text-transform:uppercase;margin-bottom:10px}
.svc h3{font-family:var(--serif);font-weight:600;font-size:20px;margin-bottom:12px;letter-spacing:-.005em}
.svc p{font-size:15px;font-weight:400;line-height:1.78;color:var(--ink-soft);max-width:62ch}
.svc .flag{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#8A6D1F;border-inline-start:2px solid #C9A24A;padding-inline-start:10px}

/* Un lien posé dans un encadré de signalement. La règle est ici et non dans
   nextbridge.css, où vit .flagbox : le cas ne se présente que sur l'accueil,
   et le système de design ne se modifie pas pour un usage unique. Le bleu
   est la couleur des références de la charte, le filet d'un pixel la marque
   des liens du site. */
/* ---- la mention qui précède les quatre canaux ----
   Deux lignes centrées plutôt qu'un encadré : à cet endroit de la page, un
   bloc de signalement à filet aurait pesé autant que les canaux qu'il
   annonce. Le court trait or suffit à dire qu'il s'agit d'une mise en garde.
   La règle vit ici et non dans nextbridge.css : le cas ne se présente que
   sur l'accueil, et le système de design ne se modifie pas pour un usage
   unique. */
.svc .cn-avis{
  max-width:54ch;margin:26px auto 4px;
  text-align:center;font-size:15px;line-height:1.75;color:var(--ink-soft)
}
.svc .cn-avis::before{
  content:"";display:block;width:34px;height:2px;
  background:var(--warn-line);margin:0 auto 18px
}
/* Le bleu est la couleur des références de la charte, le filet d'un pixel
   la marque des liens du site. Insécable, pour que l'intitulé ne se coupe
   pas en deux au milieu d'une ligne centrée. */
.svc .cn-avis a{color:var(--blue);border-bottom:1px solid var(--blue);
  padding-bottom:1px;text-decoration:none;white-space:nowrap;
  transition:color .15s ease,border-color .15s ease}
.svc .cn-avis a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.notice{background:var(--paper-2);padding-block:clamp(36px,4.5vw,56px);border-bottom:1px solid var(--rule)}
.notice h2{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:14px}
.notice p{font-size:14px;font-weight:400;line-height:1.75;color:var(--ink-soft);max-width:78ch}

/* ============ contact ============ */
.contact{background:var(--navy);color:var(--paper);padding-block:clamp(48px,6vw,76px)}
.contact .grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,31px);
  line-height:1.32;max-width:20ch}
.contact p{margin-top:18px;font-size:15px;font-weight:400;line-height:1.75;
  color:rgba(242,239,232,.72);max-width:52ch}
.contact-lines{border-top:1px solid var(--rule-dark)}
.contact-lines div{display:flex;justify-content:space-between;gap:16px;padding-block:13px;
  border-bottom:1px solid var(--rule-dark);font-size:13.5px}
.contact-lines span:first-child{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel)}

/* ============ pied ============ */
footer{background:var(--navy-deep);color:rgba(242,239,232,.62);padding-block:52px 34px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;
  padding-bottom:36px;border-bottom:1px solid var(--rule-dark)}
footer h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin-bottom:14px;font-weight:500}
footer li{list-style:none;font-size:13.5px;font-weight:400;margin-bottom:8px}
footer .about{font-size:13.5px;font-weight:400;line-height:1.7;max-width:38ch}
.disclosure{padding-top:26px;font-size:11.5px;font-weight:400;line-height:1.75;
  color:rgba(242,239,232,.44);max-width:96ch}
.disclosure b{color:rgba(242,239,232,.66);font-weight:500}

/* ============ responsive ============ */
@media(max-width:1000px){
  .masthead .grid,.contact .grid{grid-template-columns:1fr}
  .layout{grid-template-columns:minmax(0,1fr)}
  .index{position:static}
  .entry{grid-template-columns:64px minmax(0,1fr);row-gap:12px}
  .entry .desc{grid-column:2}
  .entry .open{grid-column:2;text-align:start;padding-top:0}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .masthead-bar .wrap{min-height:auto;padding-block:14px;row-gap:10px}
  .nav{margin-inline-start:0;width:100%;gap:18px;overflow-x:auto;
    border-top:1px solid var(--rule-dark);padding-top:10px}
  .nav button{white-space:nowrap;font-size:13px}
  .cols{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .utility .wrap{gap:14px}
  .utility .hide-sm{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* ---- lisibilite sur fond sombre : taille et graisse relevees ----
   Les contrastes etaient conformes (7,3:1) ; c'est la graisse 300 et les
   corps de 9,5 a 10,5 px qui rendaient la lecture penible sur le navy. ---- */
.crumb{font-size:11px;font-weight:500;letter-spacing:.11em}
.masthead .sub{font-weight:400;font-size:15.5px;color:rgba(242,239,232,.80)}
.masthead .tagline{color:rgba(242,239,232,.94)}
.ident dt,.factsheet dt{font-size:10.5px;font-weight:500;letter-spacing:.10em}
.ident dd,.factsheet dd{font-size:13.5px;font-weight:400;color:rgba(242,239,232,.96)}
.kpis .head span{font-size:10.5px;font-weight:500;letter-spacing:.11em}
.kpi .k{font-size:10.5px;font-weight:500;letter-spacing:.11em}
.kpi .n{font-size:11.5px;font-weight:400;color:rgba(242,239,232,.66)}
.bar nav a,.nav button{font-weight:400;color:rgba(242,239,232,.88)}
.utility{font-size:11px;font-weight:500}
.contact p{font-weight:400;color:rgba(242,239,232,.80)}
.contact-lines span:first-child{font-size:10.5px;font-weight:500}
.contact-lines div{font-size:14px}
footer li{font-weight:400;color:rgba(242,239,232,.72)}
footer h4{font-size:10.5px;letter-spacing:.12em}
.disclosure{font-weight:400;color:rgba(242,239,232,.62);font-size:12px}
.risk-panel.inst p.d{color:rgba(242,239,232,.82);font-weight:400}
.risk-panel.inst .readout dt{font-size:10.5px;font-weight:500}
.risk-panel.inst .readout dd{font-size:14.5px}
.risk-panel.inst .cap{font-weight:500;font-size:10.5px}

/* Les paragraphes enfants directs de la grille sont des colonnes voisines,
   pas des paragraphes empiles : ils ne prennent pas la marge de separation. */
.cols > p + p,.two > p + p{margin-top:0}
.dl{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue);border-bottom:1px solid var(--blue);padding-bottom:2px;
  white-space:nowrap;transition:color .15s,border-color .15s}
.dl:hover{color:var(--navy);border-bottom-color:var(--navy)}
.sublist{list-style:none;margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 0}
.sublist li{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);padding-inline-end:14px;margin-inline-end:14px;
  border-inline-end:1px solid var(--rule);line-height:1.2}
.sublist li:last-child{border-inline-end:none;margin-inline-end:0;padding-inline-end:0}

/* ---- selecteur de langue ---- */
.langbar{display:flex;gap:14px;margin-inline-start:22px;padding-inline-start:22px;
  border-inline-start:1px solid var(--rule-dark);align-items:center}
.langbar a,.langbar span{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:500;white-space:nowrap}
.langbar a{color:var(--steel);border-bottom:1px solid transparent;padding-block:3px}
.langbar a:hover{color:var(--paper);border-bottom-color:var(--steel)}
.langbar [aria-current]{color:var(--paper);border-bottom:1px solid var(--paper);padding-block:3px}
.langbar .off{color:rgba(126,155,184,.38);cursor:default}
@media(max-width:900px){.langbar{margin-inline-start:0;padding-inline-start:0;border:none;
  width:100%;padding-top:8px;border-top:1px solid var(--rule-dark)}}

/* ---- selecteur de langue, dans le bandeau utilitaire ---- */
.utility .langbar{margin-inline-start:0;padding-inline-start:0;border:none;gap:16px}
.utility .langbar a,.utility .langbar span{font-size:10.5px;letter-spacing:.11em;line-height:1}
.utility .langbar a{color:var(--steel)}
.utility .langbar a:hover{color:var(--paper);border-bottom-color:var(--steel)}
.utility .langbar [aria-current]{color:var(--paper);border-bottom:1px solid var(--paper)}
.utility .langbar .off{color:rgba(126,155,184,.40)}
.bar nav a,.masthead-bar .nav button{white-space:nowrap}

/* ---- illustration et adresse d'un service ---- */
.svc-adr{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-soft);
  margin-top:12px;padding-inline-start:14px;border-inline-start:2px solid var(--rule)}
.svc-fig{margin:20px 0 0;max-width:340px}
.svc-fig img{display:block;width:100%;height:auto;border:1px solid var(--rule);
  filter:saturate(.9) contrast(1.03)}
.svc-fig figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);padding-top:9px}

/* ---- groupes dans le sommaire et la liste des services ---- */
.index .idx-groupe{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);font-weight:500;
  padding:18px 0 6px;border-bottom:none}
.index li:first-child.idx-groupe{padding-top:0}
.svc-groupe{display:flex;align-items:center;gap:16px;margin:0 0 26px;padding-top:8px}
.svc-groupe:not(:first-child){margin-top:44px}
.svc-groupe span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);font-weight:500;white-space:nowrap}
.svc-groupe::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ---- guides téléchargeables sous les services ---- */
.docs{margin-top:44px}
.docs ul{list-style:none;border-top:2px solid var(--ink)}
.docs li{border-bottom:1px solid var(--rule)}
.doc-r{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-block:15px;flex-wrap:wrap}
.doc-t{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:-.005em;line-height:1.3}
.doc-f{display:flex;align-items:baseline;gap:12px;flex:0 0 auto;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap}
.doc-f a{color:var(--blue);border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .18s}
.doc-f a:hover{border-bottom-color:var(--blue)}
.doc-f i{font-style:normal;color:var(--ink-soft)}
.doc-f .sep{color:var(--rule)}

/* ---- bande de chiffres cles ---- */
.chiffres{background:var(--navy);color:var(--paper);border-bottom:none}
.chiffres .section-label{color:var(--steel)}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(157,184,210,.22);border:1px solid rgba(157,184,210,.22);margin-top:18px}
/* Les quatre chiffres se lisent centres : alignes a gauche dans des
   colonnes de largeur egale, ils donnaient quatre debuts de ligne
   sans rapport entre eux. */
.ctile{background:var(--navy);padding:34px 22px 36px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:12px}
.cv{font-family:var(--serif);font-size:clamp(40px,4.6vw,58px);font-weight:600;
  line-height:.95;letter-spacing:-.02em;color:var(--paper)}
.cu{font-size:.62em;font-weight:400;margin-inline-start:1px}
.cp{font-size:.44em;font-weight:400;color:var(--steel);vertical-align:super;margin-inline-start:3px}
.ck{font-family:var(--sans);font-size:13.5px;line-height:1.45;color:rgba(242,239,232,.72);
  max-width:20ch;text-align:center}
.csrc{margin-top:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  line-height:1.7;color:rgba(157,184,210,.72);max-width:78ch}
@media(max-width:1000px){.cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cgrid{grid-template-columns:1fr}}

/* ---- alternance des aplats : le beige n'occupe plus toute la page ---- */
.section.sombre{background:var(--navy);color:var(--paper);border-bottom:none}
.section.sombre .section-label{color:var(--steel)}
.section.sombre .lead{color:var(--paper)}
.section.sombre .cols p{color:rgba(242,239,232,.78)}
.section.sombre .cols p strong{color:var(--paper)}
.section.sombre a{color:var(--steel)}
.section.sombre .dep-quote,.section.sombre p{color:rgba(242,239,232,.78)}
.section.sombre h2,.section.sombre h3{color:var(--paper)}
.section.sombre .dl{color:var(--steel);border-bottom-color:var(--steel)}

/* ---- pôles en mosaïque plutôt qu'en liste ---- */
#registry{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:22px}
.tuile{position:relative;background:var(--paper);
  padding:34px 30px 30px;text-align:start;width:100%;overflow:hidden;
  display:flex;flex-direction:column;min-height:270px;
  transition:background .3s cubic-bezier(.22,.61,.36,1)}
.tuile{min-height:300px}
.t-chiffre{position:absolute;inset:auto -6px -30px auto;
  font-family:var(--serif);font-size:170px;font-weight:600;line-height:.8;
  color:rgba(11,31,56,.05);pointer-events:none;
  transition:color .3s, transform .45s cubic-bezier(.22,.61,.36,1)}
.t-ref{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--blue);
  transition:color .3s}
.tuile h2{font-family:var(--serif);font-size:clamp(21px,2vw,27px);font-weight:600;
  line-height:1.2;letter-spacing:-.012em;margin:14px 0 12px;position:relative;transition:color .3s}
.t-desc{font-size:14.5px;line-height:1.68;color:var(--ink-soft);position:relative;
  max-width:46ch;transition:color .3s}
.t-items{margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(11,31,56,.45);
  line-height:1.9;position:relative;transition:color .3s}
.t-open{margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);position:relative;
  display:inline-flex;align-items:center;gap:8px;transition:color .3s,gap .3s}
.t-open::after{content:"→";transition:transform .3s}
.tuile:hover{background:var(--navy)}
.tuile:hover .t-chiffre{color:rgba(157,184,210,.14);transform:translate(-6px,-8px)}
.tuile:hover h2{color:var(--paper)}
.tuile:hover .t-ref,.tuile:hover .t-open{color:var(--steel)}
.tuile:hover .t-desc{color:rgba(242,239,232,.74)}
.tuile:hover .t-items{color:rgba(157,184,210,.55)}
.tuile:hover .t-open::after{transform:translateX(4px)}

@media(max-width:760px){
  #registry{grid-template-columns:1fr}
  .tuile{min-height:0}
  .t-chiffre{font-size:120px}
}
@media(prefers-reduced-motion:reduce){
  .tuile,.t-chiffre,.tuile h2,.t-desc,.t-items,.t-open{transition:none}
  .tuile:hover .t-chiffre{transform:none}
}

/* ---- éléments de preuve en liste ---- */
.preuves .pv-t{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);padding-bottom:14px;
  border-bottom:1px solid var(--rule)}
.preuves ul{list-style:none;margin-top:4px}
.preuves li{position:relative;padding:13px 0 13px 22px;font-size:14.5px;line-height:1.6;
  color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.preuves li::before{content:"";position:absolute;inset-inline-start:0;top:21px;
  width:9px;height:1px;background:var(--blue)}
.preuves li b{font-weight:600;color:var(--ink)}
.preuves .pv-n{margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-soft);line-height:1.7}
.section.sombre .preuves li{color:rgba(242,239,232,.72);border-bottom-color:rgba(157,184,210,.2)}
.section.sombre .preuves li b{color:var(--paper)}
.section.sombre .preuves .pv-t{color:var(--steel);border-bottom-color:rgba(157,184,210,.2)}
.section.sombre .preuves .pv-n{color:rgba(157,184,210,.72)}

/* ---- références : ils nous ont déjà fait confiance ---- */
.refs{background:var(--paper-2)}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:26px}
.refc{background:var(--paper);display:flex;flex-direction:column}
.refc figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.refc figure img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.88) contrast(1.04);transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.refc:hover figure img{transform:scale(1.045)}
.refc-txt{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}

.refc-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--blue)}
.refc h3{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.012em;
  margin:12px 0 4px;line-height:1.22}
.refc-l{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:14px}
.refc p{font-size:14.5px;line-height:1.66;color:var(--ink-soft)}
.refc-a{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;line-height:1.8;color:var(--ink-soft)}
@media(max-width:1000px){.rgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.rgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.refc figure img{transition:none}.refc:hover figure img{transform:none}}

/* ---- logo du dépositaire ---- */
.dep-tete{display:flex;align-items:flex-start;gap:clamp(20px,2.6vw,38px)}
.dep-tete .lead{margin:0}
.logo-v{flex:0 0 auto;width:clamp(46px,4.4vw,64px);height:auto;display:block;
  margin-top:4px}
@media(max-width:700px){
  .dep-tete{flex-direction:column;gap:18px}
  .logo-v{width:52px}
}

/* ---- logo et illustration dans les fiches de service ---- */
h3.avec-logo{display:flex;align-items:center;gap:14px}
.svc-logo{flex:0 0 auto;width:34px;height:auto;display:block}
.svc-fig{margin:20px 0 0;max-width:none}
.svc-fig img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.svc-fig figcaption{max-width:none}
.svc-fig figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);padding-top:10px;line-height:1.5}
@media(max-width:620px){.svc-logo{width:28px}}

/* ---- blocs de chiffres dans les fiches de service ---- */
.svc-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin:22px 0 4px}
.st{background:var(--paper);padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px}
.st-v{font-family:var(--serif);font-size:clamp(28px,3vw,38px);font-weight:600;
  line-height:.95;letter-spacing:-.02em;color:var(--ink)}
.st-k{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.st-s{margin-top:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(11,31,56,.42)}
@media(max-width:620px){.svc-stats{grid-template-columns:1fr}}

/* ---- AdHabilidade : accent rose repris de la marque Pioniera ---- */
/* ---- AdHabilidade : un univers propre ---- */
#view-adhabilidade{
  /* toute la palette est déclinée du rose du « Ad », teinte 328° */
  --accent:#A85480;
  --accent-clair:#C879A2;
  --navy:#26141D;        /* bandeau */
  --navy-deep:#1C0E15;
  --blue:#A85480;
  --steel:#D3A6BD;
  --paper:#F9F4F6;       /* fond de page */
  --paper-2:#F3EAEF;
  --rule:#E3D0DA;
  --rule-dark:rgba(250,244,247,.22);
  --ink:#291A22;
  --ink-soft:rgba(41,26,34,.76);
  background:var(--paper);
}
#view-adhabilidade{color:var(--ink)}
#view-adhabilidade .masthead{background:var(--navy);color:var(--paper)}
#view-adhabilidade .masthead h1,#view-adhabilidade .masthead .sub{color:var(--paper)}
#view-adhabilidade .layout,#view-adhabilidade .wrap{background:transparent}
#view-adhabilidade .svc h3{color:var(--ink)}
#view-adhabilidade .svc p{color:var(--ink-soft)}
#view-adhabilidade .index a{color:var(--ink)}
#view-adhabilidade .idx-groupe{color:var(--accent)}
#view-adhabilidade .st-v{color:var(--accent)}
#view-adhabilidade .st-k{color:var(--ink-soft)}
#view-adhabilidade .st-s{color:rgba(41,26,34,.42)}
#view-adhabilidade .sublist li{color:rgba(41,26,34,.5)}
#view-adhabilidade .svc-fig figcaption,#view-adhabilidade .svc-svg figcaption{color:var(--ink-soft)}
#view-adhabilidade .svc:hover{background:rgba(126,53,96,.035)}
#view-adhabilidade .m-tile,#view-adhabilidade .st{background:var(--paper)}
#view-adhabilidade .pt-off{fill:rgba(41,26,34,.13)}
#view-adhabilidade .op-h,#view-adhabilidade .tr-h,#view-adhabilidade .fi-h{fill:rgba(41,26,34,.45)}
#view-adhabilidade .op-g,#view-adhabilidade .tr-t{fill:rgba(41,26,34,.5)}
#view-adhabilidade .fi-bx{stroke:rgba(41,26,34,.28)}
#view-adhabilidade .fi-t,#view-adhabilidade .fi-v{fill:rgba(41,26,34,.62)}
#view-adhabilidade .t-chiffre{color:rgba(41,26,34,.05)}
#view-adhabilidade .section-label,
#view-adhabilidade .svc .ref,
#view-adhabilidade .svc-groupe span,
#view-adhabilidade .index h3{color:var(--accent)}
#view-adhabilidade .st-v{color:var(--accent)}
#view-adhabilidade .svc h3 a{border-bottom-color:rgba(156,58,95,.4)}
#view-adhabilidade .svc a.mono{color:var(--accent) !important;border-bottom-color:var(--accent) !important}
#view-adhabilidade .index a:hover{color:var(--accent)}
#view-adhabilidade .sublist li::before{background:var(--accent)}
#view-adhabilidade .lead strong{color:var(--accent)}

/* ---- visuels des fiches de service ---- */
.svc-svg{margin:24px 0 6px}
.svc-svg svg{display:block;width:100%;height:auto}
.svc-svg figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);padding-top:12px;line-height:1.6}

/* grille de points */
.pt-on{fill:var(--accent,#9C3A5F)}
.pt-off{fill:rgba(11,31,56,.13)}
.dg-n{font-family:var(--serif);font-size:38px;font-weight:600;fill:var(--accent,#9C3A5F)}
.dg-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--ink-soft)}

/* barres comparées */
.cb-k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;fill:var(--ink-soft)}
.cb-f{fill:rgba(11,31,56,.07)}
.cb-on{fill:var(--accent,#9C3A5F)}
.cb-alt{fill:rgba(11,31,56,.42)}
.cb-v{font-family:var(--serif);font-size:19px;font-weight:600;fill:var(--ink)}

/* schéma de répartition des rôles */
.sc-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--accent,#9C3A5F)}
.sc-h2{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--blue)}
.sc-i{font-family:var(--serif);font-size:16px;font-weight:600;fill:var(--ink)}
.sc-fl{fill:none;stroke:var(--accent,#9C3A5F);stroke-width:1;opacity:.5}
.sc-fl2{fill:none;stroke:var(--blue);stroke-width:1;opacity:.45;stroke-dasharray:4 4}
.sc-bx{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.sc-p{font-family:var(--serif);font-size:19px;font-weight:600;fill:var(--ink)}
.sc-n2{font-family:var(--sans);font-size:12.5px;fill:var(--ink-soft)}


/* les treize points respirent, en décalé, comme un jeu de lumière */
.pt-on{animation:nb-lueur 3.4s ease-in-out infinite}
@keyframes nb-lueur{
  0%,100%{opacity:.42}
  45%    {opacity:1}
}
.pt-on:nth-of-type(1){animation-delay:0ms}
.pt-on:nth-of-type(2){animation-delay:210ms}
.pt-on:nth-of-type(3){animation-delay:420ms}
.pt-on:nth-of-type(4){animation-delay:630ms}
.pt-on:nth-of-type(5){animation-delay:840ms}
.pt-on:nth-of-type(6){animation-delay:1050ms}
.pt-on:nth-of-type(7){animation-delay:1260ms}
.pt-on:nth-of-type(8){animation-delay:1470ms}
.pt-on:nth-of-type(9){animation-delay:1680ms}
.pt-on:nth-of-type(10){animation-delay:1890ms}
.pt-on:nth-of-type(11){animation-delay:2100ms}
.pt-on:nth-of-type(12){animation-delay:2310ms}
.pt-on:nth-of-type(13){animation-delay:2520ms}
@media(prefers-reduced-motion:reduce){.pt-on{animation:none;opacity:1}}
.svc-liens .sep{color:var(--rule-dark);padding-inline:6px}

/* schéma d'opposition */
.op-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;fill:rgba(11,31,56,.45)}
.op-h2{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--accent,#9C3A5F)}
.op-g{font-family:var(--serif);font-size:16px;font-style:italic;fill:rgba(11,31,56,.5)}
.op-d{font-family:var(--serif);font-size:16px;font-weight:600;fill:var(--ink)}
.op-fl{stroke:var(--accent,#9C3A5F);stroke-width:1;opacity:.55}
.op-r{stroke:var(--rule);stroke-width:1}

/* frise des étapes */
.fz-a{stroke:var(--rule);stroke-width:1}
.fz-c{fill:var(--paper);stroke:var(--accent,#9C3A5F);stroke-width:1.4}
.fz-n{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.05em;
  fill:var(--accent,#9C3A5F)}
.fz-l{font-family:var(--serif);font-size:14px;font-weight:600;fill:var(--ink)}
.fz-s{font-family:var(--sans);font-size:12.5px;fill:var(--ink-soft)}


/* schéma avant / après */
.tr-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;fill:rgba(11,31,56,.45)}
.tr-h2{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--accent,#9C3A5F)}
.tr-r{stroke:var(--rule);stroke-width:1}
.tr-t{font-family:var(--serif);font-size:15px;fill:rgba(11,31,56,.5)}
.tr-t2{font-family:var(--serif);font-size:15px;font-weight:600;fill:var(--ink)}
.tr-fl{stroke:var(--accent,#9C3A5F);stroke-width:1.3;fill:none}
.tr-m{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;fill:var(--accent,#9C3A5F)}


/* marque affichée à la place du titre dans une fiche de service */
.svc-marque{display:flex;align-items:flex-end;gap:12px;margin:2px 0 14px}
.svc-marque img{display:block;width:clamp(150px,17vw,210px);height:auto}
.svc-marque i{font-family:var(--serif);font-style:normal;font-size:clamp(17px,1.8vw,23px);
  color:var(--blue);letter-spacing:.02em;line-height:1;padding-bottom:2px}
h3.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* marque en tête de pôle */
.mast-marque{margin:0 0 20px}
.mast-marque img{display:block;width:clamp(210px,26vw,360px);height:auto}
@media(max-width:620px){.mast-marque img{width:min(250px,66vw)}}

/* les glyphes Vénus respirent comme les points */
.pt-v{animation:nb-lueur 3.4s ease-in-out infinite}
.pt-v:nth-of-type(1){animation-delay:0ms}
.pt-v:nth-of-type(2){animation-delay:210ms}
.pt-v:nth-of-type(3){animation-delay:420ms}
.pt-v:nth-of-type(4){animation-delay:630ms}
.pt-v:nth-of-type(5){animation-delay:840ms}
.pt-v:nth-of-type(6){animation-delay:1050ms}
.pt-v:nth-of-type(7){animation-delay:1260ms}
.pt-v:nth-of-type(8){animation-delay:1470ms}
.pt-v:nth-of-type(9){animation-delay:1680ms}
.pt-v:nth-of-type(10){animation-delay:1890ms}
.pt-v:nth-of-type(11){animation-delay:2100ms}
.pt-v:nth-of-type(12){animation-delay:2310ms}
.pt-v:nth-of-type(13){animation-delay:2520ms}
@media(prefers-reduced-motion:reduce){.pt-v{animation:none;opacity:1}}

/* schéma de filiation */
.fi-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;fill:rgba(11,31,56,.45)}
.fi-h2{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--accent,#7E3560)}
.fi-r{stroke:var(--rule);stroke-width:1}
.fi-bx{fill:none;stroke:rgba(11,31,56,.28);stroke-width:1}
.fi-bx2{fill:rgba(126,53,96,.05);stroke:var(--accent,#7E3560);stroke-width:1.3}
.fi-t{font-family:var(--serif);font-size:22px;font-weight:600;fill:rgba(11,31,56,.62)}
.fi-t2{font-family:var(--serif);font-size:22px;font-weight:600;fill:var(--ink)}
.fi-k,.fi-k2{font-family:var(--sans);font-size:12.5px;fill:var(--ink-soft)}
.fi-v{font-family:var(--mono);font-size:13px;fill:rgba(11,31,56,.62)}
.fi-v2{font-family:var(--mono);font-size:13px;font-weight:500;fill:var(--accent,#7E3560)}
.fi-fl{stroke:var(--accent,#7E3560);stroke-width:1.3;fill:none}
.fi-m{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;fill:var(--accent,#7E3560)}
.fi-m2{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;fill:var(--ink-soft)}
.fi-n{font-family:var(--sans);font-size:13px;fill:var(--ink-soft)}


/* le mot en filigrane dans le bandeau du pôle */
#view-adhabilidade .masthead{position:relative;overflow:hidden}
#view-adhabilidade .masthead::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:auto -8% -30% auto;width:min(78%,900px);aspect-ratio:1400/180;
  background:url("../img/adhabilidade-logo.png") right bottom/contain no-repeat;
  opacity:.055}
#view-adhabilidade .masthead .wrap{position:relative;z-index:2}

/* ---- constellation des outils ---- */
.cn-l{stroke:var(--rule);stroke-width:1}
.cn-c{fill:var(--navy);stroke:none}
.cn-ct{font-family:var(--serif);font-size:23px;font-weight:600;fill:var(--paper)}
.cn-o{fill:var(--paper);stroke:var(--blue);stroke-width:1.2}
.cn-t{font-family:var(--serif);font-size:14px;font-weight:600;fill:var(--ink)}
.cn-t2{font-family:var(--sans);font-size:11.5px;fill:var(--ink-soft)}

/* ---- chaîne des effets ---- */
.ch-o{fill:var(--paper);stroke:var(--blue);stroke-width:1.2}
.ch-n{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.06em;fill:var(--blue)}
.ch-t{font-family:var(--serif);font-size:14.5px;font-weight:600;fill:var(--ink)}
.ch-fl{stroke:var(--blue);stroke-width:1.2;fill:none;opacity:.55}


/* maquette de message de signal */
.sg-bx{fill:var(--paper);stroke:var(--rule-dark2,#C9C0B0);stroke-width:1.4}
.sg-bx2{fill:none;stroke:var(--rule);stroke-width:1.4;stroke-dasharray:5 5}
.sg-hd{fill:var(--navy)}
.sg-h{font-family:var(--serif);font-size:19px;font-weight:600;fill:var(--paper)}
.sg-t{font-family:var(--mono);font-size:12px;fill:rgba(242,239,232,.6)}
.sg-k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink-soft)}
.sg-v{font-family:var(--serif);font-size:19px;font-weight:600;fill:var(--ink)}
.sg-v.sg-pos{fill:var(--pos)}.sg-v.sg-neg{fill:var(--neg)}
.sg-r{stroke:var(--rule);stroke-width:1}
.sg-n{font-family:var(--sans);font-size:12px;fill:var(--ink-soft)}
.sg-c{font-family:var(--serif);font-size:19px;font-weight:600;fill:var(--ink)}
.sg-cd{font-family:var(--serif);font-size:16px;fill:var(--ink-soft)}
.sg-r2{stroke:var(--rule);stroke-width:1}
.sg-n2{font-family:var(--sans);font-size:13px;fill:var(--blue)}

/* ---- exemples rattachés à un service ---- */
.svc-ex{margin:22px 0 4px;border:1px solid var(--rule);background:var(--paper-2)}
.svc-ex-t{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);padding:16px 22px 12px}
.svc-ex a{display:flex;align-items:baseline;gap:20px;padding:14px 22px;
  border-top:1px solid var(--rule);text-decoration:none;color:inherit;transition:background .2s}
.svc-ex a:hover{background:var(--paper)}
.svc-ex .ex-d{flex:0 0 auto;min-width:112px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.svc-ex .ex-t{flex:1;font-family:var(--serif);font-size:16.5px;font-weight:600;
  line-height:1.3;letter-spacing:-.008em}
.svc-ex .ex-o{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue)}
@media(max-width:620px){
  .svc-ex a{flex-direction:column;gap:6px}
  .svc-ex .ex-d{min-width:0}
}

/* ============ fiche technique : liste de courtiers ============ */
.fs-liste{line-height:1.85}

/* ============ hexagone des six poles ============
   Six cotes, six poles, une maison. Un seul pole eclaire a la fois :
   la forme dit le nombre, l'animation dit lequel. */
.hexa{margin-top:clamp(40px,5vw,66px)}
.hx{display:block;width:100%;max-width:700px;margin:0 auto;height:auto}
.hx-cote{stroke:var(--rule);stroke-width:1.4;transition:stroke .55s ease,stroke-width .55s ease}
.hx-cote.on{stroke:var(--blue);stroke-width:3}
.hx-d{fill:var(--paper);stroke:var(--rule);stroke-width:1.4;
  transition:fill .5s ease,stroke .5s ease}
.hx-num{font-family:var(--mono);font-size:15px;letter-spacing:.06em;
  fill:var(--blue);transition:fill .5s ease}
.hx-lab{font-family:var(--serif);font-size:19px;fill:var(--ink-soft);
  transition:fill .5s ease,font-weight .5s ease}
.hx-c{font-family:var(--serif);font-size:25px;fill:rgba(11,31,56,.34)}
.hx-n{cursor:pointer;outline:none}
/* Zone sensible invisible : le disque ne fait que 64 px et l'etiquette
   est 20 px plus loin. Entre les deux, la souris ne declenchait rien,
   ce qui donne l'impression qu'il faut cliquer. */
.hx-cible{fill:transparent;stroke:none}
.hx-n.on .hx-d{fill:var(--navy);stroke:var(--navy)}
.hx-n.on .hx-num{fill:var(--paper)}
.hx-n.on .hx-lab{fill:var(--ink);font-weight:600}
.hx-n:focus-visible .hx-d{stroke:var(--blue);stroke-width:3}
.hx-dit{max-width:62ch;margin:34px auto 0;text-align:center;font-size:15.5px;
  line-height:1.7;color:var(--ink-soft);min-height:3.4em}
.hx-dit b{font-weight:600;color:var(--ink)}
/* le repli : la liste complete, pour qui n'a ni script ni animation */
.hx-repli{display:none;list-style:none;max-width:60ch;margin:28px auto 0}
.hx-repli li{padding:11px 0;border-bottom:1px solid var(--rule);
  font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.hx-repli b{font-weight:600;color:var(--ink)}
.hexa.calme .hx-dit{display:none}
.hexa.calme .hx-repli{display:block}
.hexa.calme .hx-n.on .hx-d,.hexa.chantier .hx-n.on .hx-d{fill:var(--paper);stroke:var(--rule)}
.hexa.calme .hx-n.on .hx-num,.hexa.chantier .hx-n.on .hx-num{fill:var(--blue)}
.hexa.calme .hx-n.on .hx-lab,.hexa.chantier .hx-n.on .hx-lab{fill:var(--ink-soft);font-weight:400}
.hexa.calme .hx-cote.on,.hexa.chantier .hx-cote.on{stroke:var(--rule);stroke-width:1.4}
/* Sous 620 px, six etiquettes autour d'un hexagone tombent a 9 px : on les
   retire et on agrandit la forme. La legende sous le dessin nomme le pole. */
@media(max-width:620px){
  .hx-lab{display:none}
  .hx-grp{transform:scale(1.2);transform-origin:380px 272px}
  .hx-num{font-size:22px}
  .hx-c{font-size:30px}
  .hx-d{stroke-width:2}
  .hx-cote{stroke-width:2}
  .hx-cote.on{stroke-width:4.4}
  .hx-dit{font-size:14.5px;margin-top:22px;min-height:4.2em}
}
@media(prefers-reduced-motion:reduce){
  .hx-cote,.hx-d,.hx-num,.hx-lab{transition:none}
}

/* ============ bilan video ============
   Le format vertical tient dans un cadre contraint, les chiffres qui
   permettent de le juger sont poses a cote, pas en dessous. */
.svc-video{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(22px,3vw,40px);align-items:start;margin-top:4px}
.svc-video .vd{width:100%;height:auto;display:block;background:var(--navy);
  border:1px solid var(--rule)}
.vd-note{border-top:1px solid var(--rule)}
.vd-t{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);padding:12px 0 4px}
.vd-note dl{margin:0}
.vd-note div{display:flex;justify-content:space-between;gap:16px;padding-block:9px;
  border-bottom:1px solid var(--rule)}
.vd-note dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(11,31,56,.55)}
.vd-note dd{font-size:13.5px;color:var(--ink);text-align:end;margin:0}
.vd-av{margin-top:14px;font-size:12.5px;line-height:1.65;color:rgba(11,31,56,.62)}
@media(max-width:720px){
  .svc-video{grid-template-columns:1fr;gap:20px}
  .svc-video .vd{max-width:260px;margin-inline:auto}
}

/* ============ fond anime des bandes sombres ============
   La toile de fond.js se place en absolu : il lui faut un contexte de
   positionnement, et le contenu doit rester au-dessus d'elle. */
.chiffres,.section.sombre{position:relative;isolation:isolate}
.chiffres > .wrap,.section.sombre > .wrap{position:relative;z-index:2}

/* ============ ruban des courtiers partenaires ============
   Deux jeux identiques se suivent et la piste se decale de la moitie
   de sa largeur : au moment du saut, l'image est la meme, la boucle
   ne se voit pas. Le masque evite que les logos apparaissent d'un coup
   sur les bords. */
.bande-brk{background:var(--navy-deep);color:var(--paper);
  padding-block:clamp(26px,3.4vw,42px);overflow:hidden}
.bande-brk .section-label{color:var(--steel);margin-bottom:22px}
.ruban{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ruban-piste{display:flex;width:max-content;animation:nb-defile 38s linear infinite}
.ruban:hover .ruban-piste,.ruban:focus-within .ruban-piste{animation-play-state:paused}
@keyframes nb-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ruban-jeu{display:flex;align-items:center;gap:clamp(52px,8.4vw,152px);
  padding-inline:clamp(26px,4.2vw,76px)}
.brk{display:flex;align-items:center;gap:15px;flex:0 0 auto;white-space:nowrap}
.brk img{height:42px;width:auto;display:block}
.brk img.brk-large{height:32px}
.brk b{font-family:var(--sans);font-size:21px;font-weight:500;letter-spacing:.005em;
  color:rgba(242,239,232,.92)}
/* Pu Prime se livre en tuile pleine : son bleu est sa marque, on la
   garde telle quelle avec un coin adouci. Les autres sont detoures. */
.brk img.brk-tuile{height:40px;border-radius:7px}
/* en attente du vrai logo : le nom est compose, pas dessine */
.brk-att b{color:rgba(242,239,232,.66)}
@media(max-width:620px){
  .brk img{height:32px}.brk img.brk-large{height:24px}.brk img.brk-tuile{height:30px}.brk b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .ruban-piste{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .ruban{-webkit-mask-image:none;mask-image:none}
  .ruban-jeu[aria-hidden="true"]{display:none}
  .ruban-jeu{flex-wrap:wrap;justify-content:center;row-gap:20px}
}

/* ============ duo : la phrase et le texte cote a cote ============
   Trois sections d'affilee avaient la meme forme — etiquette, phrase,
   deux colonnes — et la moitie droite de la ligne de titre restait vide.
   Ici la phrase tient la colonne de gauche et le texte lui repond. */
.duo{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,5.5vw,92px);align-items:start}
.duo > .lead{margin:0;max-width:21ch}
.duo-txt p{font-size:15px;font-weight:400;line-height:1.78;color:var(--ink-soft)}
.duo-txt p + p{margin-top:15px}
.section.sombre .duo-txt p{color:rgba(242,239,232,.80)}
@media(max-width:860px){
  .duo{grid-template-columns:1fr;gap:24px}
  .duo > .lead{max-width:30ch}
}

/* ============ fiche d'un pole ============
   Le fond se trouble, la fiche passe devant. Le flou est un supplement :
   si le navigateur ne le connait pas, l'assombrissement suffit. */
.voile{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;padding:clamp(20px,5vw,60px);
  background:rgba(7,22,39,.62);opacity:0;transition:opacity .26s ease}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .voile{background:rgba(7,22,39,.46);
    -webkit-backdrop-filter:blur(9px) saturate(.9);backdrop-filter:blur(9px) saturate(.9)}
}
.voile.vu{opacity:1}
body.fige{overflow:hidden}
.fiche{position:relative;background:var(--paper);color:var(--ink);
  max-width:620px;width:100%;padding:clamp(34px,4.4vw,58px);
  border:1px solid var(--rule);outline:none;
  transform:translateY(12px) scale(.985);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.voile.vu .fiche{transform:none}
.fiche-x{position:absolute;top:14px;inset-inline-end:16px;width:36px;height:36px;
  font-size:24px;line-height:1;color:rgba(11,31,56,.5);background:none;border:0;
  cursor:pointer;transition:color .2s}
.fiche-x:hover{color:var(--ink)}
.fiche-ref{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:20px}
.fiche-t{font-family:var(--serif);font-size:clamp(21px,2.5vw,28px);font-weight:400;
  line-height:1.34;letter-spacing:-.008em;margin:0 0 18px}
.fiche-d{font-size:15px;line-height:1.75;color:var(--ink-soft);margin:0 0 26px}
.fiche-go{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);border-bottom:1px solid var(--blue);
  padding-bottom:3px;transition:color .2s,border-color .2s}
.fiche-go:hover{color:var(--ink);border-bottom-color:var(--ink)}
/* le sommet survole annonce qu'il s'ouvre */
.hx-n{cursor:pointer}
.hx-n:hover .hx-d{stroke:var(--blue)}
@media(prefers-reduced-motion:reduce){
  .voile,.fiche{transition:none}
}

/* ============ fiche d'un pole, au survol ============
   Le flou porte sur l'hexagone seul. Une page entiere qui se trouble
   parce qu'une souris passe serait une prise d'otage. */
.hx-scene{position:relative}
.hx-scene .hx{transition:filter .3s ease,opacity .3s ease}
.hx-scene.ouvert .hx{filter:blur(5px);opacity:.26}
/* Le cadre reste transparent a la souris en toute circonstance : s'il
   la captait, le sommet survole perdrait le survol, la fiche se
   refermerait, le sommet le regagnerait — une boucle sans fin.
   Seule la carte elle-meme capte, pour qu'on puisse lire et cliquer. */
.hx-fiche{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding:0 clamp(12px,3vw,40px);
  opacity:0;pointer-events:none;transition:opacity .26s ease}
.hx-scene.ouvert .hx-fiche{opacity:1}
.hx-scene.ouvert .hx-carte{pointer-events:auto}
.hx-carte{position:relative;max-width:430px;width:100%;text-align:center;
  background:rgba(242,239,232,.93);border:1px solid var(--rule);
  padding:clamp(24px,3vw,36px);
  transform:translateY(8px);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.hx-scene.ouvert .hx-carte{transform:none}
.hx-ref{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px}
.hx-titre{font-family:var(--serif);font-size:clamp(17px,1.8vw,21px);line-height:1.38;
  color:var(--ink);margin:0 0 12px}
.hx-desc{font-size:14px;line-height:1.68;color:var(--ink-soft);margin:0 0 18px}
.hx-go{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);border-bottom:1px solid var(--blue);
  padding-bottom:3px;transition:color .2s,border-color .2s}
.hx-go:hover{color:var(--ink);border-bottom-color:var(--ink)}
/* la legende au repos dirait la meme chose que la fiche : on l'efface
   tant que la fiche est ouverte, sans retirer sa place dans la page */
.hx-scene.ouvert + .hx-dit{opacity:0;transition:opacity .2s ease}
/* l'indication s'efface des qu'elle a servi */
.hx-indice{text-align:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(11,31,56,.42);margin-top:12px;transition:opacity .4s ease}
.hx-indice.parti{opacity:0;pointer-events:none}
/* La carte recouvre le sommet : sans croix, plus moyen de refermer au doigt. */
.hx-x{position:absolute;top:6px;inset-inline-end:8px;width:32px;height:32px;
  font-size:21px;line-height:1;color:rgba(11,31,56,.42);background:none;border:0;
  cursor:pointer;transition:color .2s}
.hx-x:hover,.hx-x:focus-visible{color:var(--ink)}
@media(max-width:620px){
  .hx-carte{padding:22px 20px}
  .hx-titre{font-size:16px}.hx-desc{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  .hx-scene .hx,.hx-fiche,.hx-carte,.hx-indice{transition:none}
  .hx-scene.ouvert .hx{filter:none;opacity:.14}
}

/* ============ filigrane NB sur les fonds sombres ============
   Le monogramme est desormais peint par fond.js, dans la meme toile que
   les courbes : il derive, il respire, ses bords sont fondus. Il ne reste
   ici que le cadre qui l'accueille, et un repli fixe pour qui a desactive
   les animations — la toile ne tourne pas dans ce cas. */
.masthead,.chiffres,.contact,footer{position:relative;isolation:isolate;overflow:clip}
.masthead > .wrap,.contact > .wrap,footer > .wrap{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){
  .masthead::before,.chiffres::before,.contact::before,footer::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset-block:7%;inset-inline-end:-8%;aspect-ratio:1.459;
    background:url(../img/logo/nb-monogramme-clair.png) no-repeat center/contain;
    opacity:.026;
    -webkit-mask-image:radial-gradient(closest-side,#000 42%,transparent 92%);
    mask-image:radial-gradient(closest-side,#000 42%,transparent 92%)}
}

/* ============ parcours : une rubrique qui se traverse ============
   Support est une sequence dans le temps. Un rail relie les etapes,
   chacune s'allume quand on l'atteint, et son segment se remplit
   derriere elle. Le progres suit le defilement du lecteur : rien ne
   part tout seul, rien ne se rejoue. */
.parcours{position:relative}
.etape{position:relative;padding-inline-start:clamp(56px,6vw,84px)}
.et-rail{position:absolute;inset-inline-start:0;top:0;bottom:0;width:38px}
/* le trait mort, puis le trait vif qui le recouvre en descendant */
.et-rail::before,.et-rail::after{content:"";position:absolute;
  inset-inline-start:18px;width:1px;top:42px;bottom:-64px}
.et-rail::before{background:var(--rule)}
.et-rail::after{background:var(--blue);transform:scaleY(0);transform-origin:top;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .12s}
.etape:last-child .et-rail::before,.etape:last-child .et-rail::after{display:none}
.et-pastille{position:absolute;inset-inline-start:0;top:8px;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  background:var(--paper);border:1px solid var(--rule);color:var(--blue);
  transition:background .5s ease,border-color .5s ease,color .5s ease}
.et-moment{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(11,31,56,.42);margin-bottom:6px;transition:color .5s ease}
/* etape atteinte */
.etape.atteint .et-pastille{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.etape.atteint .et-moment{color:var(--blue)}
.etape.atteint .et-rail::after{transform:scaleY(1)}

/* ---- le seuil : la porte s'ouvre avant la premiere etape ---- */
.seuil{display:flex;align-items:center;gap:22px;margin-bottom:clamp(30px,4vw,48px)}
.porte{width:112px;height:70px;flex:0 0 auto;overflow:visible}
.po-cadre,.po-sol{fill:none;stroke:var(--rule);stroke-width:2}
.po-b{fill:var(--paper-2);stroke:var(--rule);stroke-width:2}
.po-g,.po-d{transform-origin:center;transition:transform 1.25s cubic-bezier(.33,.9,.3,1)}
.parcours.ouvert .po-g{transform:translateX(-26px) scaleX(.42)}
.parcours.ouvert .po-d{transform:translateX(26px) scaleX(.42)}
.seuil-t{font-family:var(--serif);font-size:clamp(17px,1.9vw,21px);line-height:1.4;
  color:var(--ink-soft)}
@media(max-width:620px){
  .etape{padding-inline-start:46px}
  .et-rail{width:30px}
  .et-pastille{width:30px;height:30px;font-size:10.5px}
  .et-rail::before,.et-rail::after{inset-inline-start:14px;top:34px}
  .porte{width:86px;height:54px}
}
@media(prefers-reduced-motion:reduce){
  /* tout est deja atteint : la sequence se lit, elle ne se joue pas */
  .et-rail::after{transform:scaleY(1);transition:none}
  .et-pastille,.et-moment{transition:none}
  .po-g,.po-d{transition:none;transform:none}
}

/* ============ les canaux Telegram ============
   Chaque carte est bâtie autour de son disque : il est grand, il est au
   centre, et c'est lui qui distingue un canal d'un autre d'un coup d'oeil.
   Toute la surface est un lien. */
.canaux{
  --or:#D0A33C;
  display:grid; gap:16px; margin:28px 0 0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.cn{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:40px 30px 26px; background:var(--navy); color:var(--paper);
  border:1px solid rgba(242,239,232,.14); position:relative; overflow:clip;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* un halo qui prend la teinte du disque, posé derrière lui */
.cn-halo{
  position:absolute; top:-58px; left:50%; width:300px; height:300px;
  transform:translateX(-50%); pointer-events:none; opacity:.5;
  background:radial-gradient(circle at center, rgba(208,163,60,.20), transparent 62%);
  transition:opacity .45s ease;
}
.cn:nth-child(2) .cn-halo{ background:radial-gradient(circle at center,rgba(154,46,60,.26),transparent 62%) }
.cn:nth-child(3) .cn-halo{ background:radial-gradient(circle at center,rgba(44,95,141,.30),transparent 62%) }
.cn:nth-child(4) .cn-halo{ background:radial-gradient(circle at center,rgba(125,145,170,.22),transparent 62%) }
.cn:hover, .cn:focus-visible{
  border-color:rgba(208,163,60,.42); transform:translateY(-3px);
  box-shadow:0 18px 36px -26px rgba(11,31,56,.85);
}
.cn:hover .cn-halo, .cn:focus-visible .cn-halo{ opacity:1 }

.cn-av{
  width:clamp(84px,9vw,108px); height:clamp(84px,9vw,108px); border-radius:50%;
  display:block; position:relative;
  box-shadow:0 0 0 1px rgba(242,239,232,.18), 0 10px 26px -14px rgba(0,0,0,.6);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.cn:hover .cn-av{ transform:scale(1.045) }

.cn-classe{ margin-top:22px; color:var(--steel) }
.cn-nom{ margin-top:10px; font-family:var(--serif); font-size:clamp(22px,2.3vw,26px);
  line-height:1.18; letter-spacing:-.012em }
.cn-d{ margin-top:14px; font-size:14.5px; line-height:1.6;
  color:rgba(242,239,232,.78); max-width:34ch }

.cn-puces{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:18px }
.cn-puces i{
  font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  padding:6px 11px; border:1px solid rgba(242,239,232,.20);
  color:rgba(242,239,232,.88); border-radius:2px;
}
.cn-rythme{ margin-top:16px; margin-bottom:6px; color:rgba(157,184,210,.72) }

.cn-id{
  margin-top:26px; padding-top:20px; width:100%; margin-bottom:0;
  border-top:1px solid rgba(242,239,232,.14);
  display:flex; align-items:center; justify-content:center; gap:11px;
  color:var(--or); text-transform:none; letter-spacing:.04em;
  transition:gap .28s ease;
}
.cn-id i{ width:15px; height:1.4px; background:currentColor; position:relative;
  display:block; flex:0 0 auto }
.cn-id i::after{ content:""; position:absolute; right:0; top:50%; width:6px; height:6px;
  border-top:1.4px solid currentColor; border-right:1.4px solid currentColor;
  transform:translateY(-50%) rotate(45deg) }
.cn:hover .cn-id{ gap:17px }
.cn-note{ margin-top:16px; color:var(--ink-soft); letter-spacing:.11em }

/* marge automatique : les liens s'alignent quel que soit le texte au-dessus */
.cn-id{ margin-top:auto }
.cn-rythme + .cn-id{ margin-top:auto }

@media (max-width:620px){ .canaux{ grid-template-columns:1fr } }
@media (prefers-reduced-motion:reduce){
  .cn, .cn-av, .cn-halo{ transition:none }
  .cn:hover, .cn:focus-visible{ transform:none }
  .cn:hover .cn-av{ transform:none }
  .cn:hover .cn-id{ gap:11px }
}

/* ============ les captures d'alertes ============
   Trois messages réels, cotés à la même largeur pour qu'on les compare. */
.alertes{ display:grid; gap:20px; margin:24px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) }
.al{ margin:0; display:flex; flex-direction:column }
.al-etat{ color:var(--blue); margin-bottom:10px }
.al img{ display:block; width:100%; height:auto; border:1px solid var(--rule) }
@media (max-width:620px){ .alertes{ grid-template-columns:1fr } }

/* ============ la séquence d'entrée ============
   Plein écran, par-dessus tout. Le visiteur peut en sortir à tout moment :
   la touche Échap, le bouton, et elle ne se rejoue jamais d'elle-même. */
body.fige{ overflow:hidden }
#scene{ position:fixed; inset:0; z-index:200; background:var(--navy-deep); overflow:hidden }
#scene[hidden]{ display:none }
#scene.sortie{ opacity:0; transition:opacity .75s ease; pointer-events:none }
#monde{ position:absolute; inset:0; width:100%; height:100%; display:block }

#rideau{ position:absolute; inset:0; z-index:5; display:flex; align-items:center;
  justify-content:center; background:var(--navy-deep); transition:opacity .6s ease }
#rideau.parti{ opacity:0; pointer-events:none }
.bloc-start{ text-align:center }
.nb-start{ width:104px; height:auto; margin:0 auto 46px; display:block; opacity:.92 }
.start{ display:inline-block; font-family:var(--mono); font-size:13px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--paper); background:none; cursor:pointer;
  border:1px solid rgba(242,239,232,.34); padding:19px 46px 19px 52px;
  transition:border-color .3s, background .3s, letter-spacing .3s }
.start:hover, .start:focus-visible{ border-color:var(--paper);
  background:rgba(242,239,232,.06); letter-spacing:.48em; outline:none }
.start-sous{ display:block; margin-top:26px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(157,184,210,.5);
  animation:respire 3.4s ease-in-out infinite }
@keyframes respire{ 0%,100%{opacity:.5} 50%{opacity:1} }

.battant{ position:absolute; top:0; bottom:0; width:50.5%; z-index:4; background:var(--navy);
  border-inline:1px solid rgba(242,239,232,.12);
  transition:transform 1.9s cubic-bezier(.62,.02,.26,1) }
#bat-g{ left:0 } #bat-d{ right:0 }
#scene.ouvert #bat-g{ transform:translateX(-101%) }
#scene.ouvert #bat-d{ transform:translateX(101%) }
.battant::after{ content:""; position:absolute; top:50%; width:300px; height:206px;
  margin-top:-103px; opacity:.07;
  background:url("../img/logo/nb-monogramme-clair.png") no-repeat center/contain }
#bat-g::after{ right:-150px } #bat-d::after{ left:-150px }

#carte{ position:absolute; left:50%; top:13%; z-index:2; width:min(540px,84vw);
  text-align:center; opacity:0; pointer-events:none;
  transform:translate(-50%,0) translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1) }
#carte.vu{ opacity:1; transform:translate(-50%,0) }
#carte::before{ content:""; position:absolute; z-index:-1;
  left:-16%; right:-16%; top:-42%; bottom:-38%;
  background:radial-gradient(ellipse at center, rgba(7,22,39,.92) 0%,
    rgba(7,22,39,.80) 42%, rgba(7,22,39,.42) 68%, rgba(7,22,39,0) 100%) }
.c-num{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--steel); margin-bottom:16px }
.c-nom{ font-family:var(--serif); font-size:clamp(28px,4.2vw,44px); line-height:1.08;
  letter-spacing:-.015em; color:var(--paper); margin-bottom:20px }
.c-txt{ font-size:15px; line-height:1.75; color:rgba(242,239,232,.80);
  max-width:46ch; margin:0 auto }
.c-mots{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; margin-top:22px }
.c-mots span{ font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(157,184,210,.68) }

#passer{ position:absolute; right:22px; bottom:20px; z-index:6; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(157,184,210,.62); background:none; border:0; cursor:pointer;
  padding:10px 4px; opacity:0; transition:opacity .4s, color .25s }
#passer.vu{ opacity:1 }
#passer:hover, #passer:focus-visible{ color:var(--paper); outline:none }
#jauge{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--blue);
  z-index:6; transition:width .4s linear }

.rejouer{ display:inline-block; margin-bottom:26px; color:var(--blue); background:none;
  border:0; border-bottom:1px solid var(--blue); padding:0 0 3px; cursor:pointer }
.rejouer:hover{ color:var(--ink); border-bottom-color:var(--ink) }

@media (prefers-reduced-motion:reduce){
  .battant, #carte, #rideau, #scene{ transition:none }
  .start-sous{ animation:none }
}

/* ============ la grille des neuf cases ============
   Les tuiles montent une à une quand le lecteur les atteint. Au survol,
   celle qu'on vise reste nette et les huit autres s'effacent : c'est
   exactement ce que fait un visiteur qui tombe sur un profil. */
.grille{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:26px 0 0; max-width:760px;
}
.gr-case{
  margin:0; position:relative; overflow:hidden; background:var(--navy);
  border:1px solid var(--rule); aspect-ratio:4/5;
  opacity:0; transform:translateY(16px);
  transition:opacity .55s ease var(--retard), transform .55s cubic-bezier(.22,.61,.36,1) var(--retard),
             filter .3s ease, box-shadow .3s ease;
}
.grille.vue .gr-case{ opacity:1; transform:none }
.gr-case img{ display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1) }
.gr-leg{
  position:absolute; inset:auto 0 0 0; padding:40px 12px 11px;
  font-size:11.5px; line-height:1.35; color:var(--paper);
  background:linear-gradient(to top, rgba(7,22,39,.92), rgba(7,22,39,0));
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.gr-epingle::after{
  content:""; position:absolute; top:9px; right:9px; width:7px; height:7px;
  border-radius:50%; background:#D0A33C; box-shadow:0 0 0 3px rgba(11,31,56,.5);
}
/* le survol d'une case efface les autres */
.grille:hover .gr-case{ filter:saturate(.25) brightness(.62) }
.grille .gr-case:hover, .grille .gr-case:focus-within{
  filter:none; z-index:2; box-shadow:0 14px 30px -18px rgba(11,31,56,.8);
}
.grille .gr-case:hover img{ transform:scale(1.05) }
.grille .gr-case:hover .gr-leg{ opacity:1; transform:none }
.gr-note{ margin-top:13px; color:var(--ink-soft); letter-spacing:.1em }

@media (max-width:620px){ .grille{ max-width:none } }
@media (prefers-reduced-motion:reduce){
  .gr-case{ opacity:1; transform:none; transition:none }
  .gr-case img, .gr-leg{ transition:none }
  .grille:hover .gr-case{ filter:none }
}

/* ============ la série posée à plat ============
   Les sept cartes sont là d'emblée, rien à ouvrir. Un clic les agrandit. */
.bande{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px;
  margin:26px 0 0;
}
.bd-carte{
  padding:0; border:1px solid var(--rule); background:var(--navy-deep);
  aspect-ratio:9/16; overflow:hidden; cursor:zoom-in; position:relative;
  opacity:0; transform:translateY(16px);
  transition:opacity .55s ease var(--retard), transform .55s cubic-bezier(.22,.61,.36,1) var(--retard),
             box-shadow .3s ease, border-color .3s ease;
}
.bande.vue .bd-carte{ opacity:1; transform:none }
.bd-carte img{ display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .45s cubic-bezier(.22,.61,.36,1) }
.bd-carte:hover, .bd-carte:focus-visible{
  border-color:var(--blue); box-shadow:0 14px 28px -18px rgba(11,31,56,.8); z-index:2;
}
.bd-carte:hover img{ transform:scale(1.06) }
.bd-note{ margin-top:13px; color:var(--ink-soft); letter-spacing:.1em }
.gr-case{ cursor:zoom-in; padding:0; border:1px solid var(--rule); text-align:inherit }

/* ============ la loupe ============ */
.loupe{
  position:fixed; inset:0; z-index:180; display:flex; align-items:center;
  justify-content:center; gap:clamp(8px,2vw,28px);
  background:rgba(7,22,39,.975); padding:clamp(16px,4vw,48px);
  opacity:0; transition:opacity .28s ease;
}
.loupe[hidden]{ display:none }
.loupe.vue{ opacity:1 }
.lp-corps{ margin:0; display:flex; flex-direction:column; align-items:center;
  max-height:100%; min-width:0 }
.lp-corps img{ display:block; max-width:min(76vw,620px); max-height:82vh;
  width:auto; height:auto; border:1px solid rgba(242,239,232,.18) }
.lp-corps figcaption{ margin-top:14px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel); text-align:center }
.lp-cote{ flex:0 0 auto; width:46px; height:46px; border:1px solid rgba(242,239,232,.26);
  background:none; cursor:pointer; position:relative; border-radius:50%;
  transition:border-color .2s, background .2s }
.lp-cote:hover, .lp-cote:focus-visible{ border-color:var(--paper); background:rgba(242,239,232,.08) }
.lp-cote::before{ content:""; position:absolute; top:50%; left:50%; width:10px; height:10px;
  border-top:1.6px solid var(--paper); border-right:1.6px solid var(--paper) }
.lp-prec::before{ transform:translate(-30%,-50%) rotate(-135deg) }
.lp-suiv::before{ transform:translate(-70%,-50%) rotate(45deg) }
.lp-fermer{ position:absolute; top:18px; right:20px; width:40px; height:40px;
  background:none; border:0; cursor:pointer }
.lp-fermer::before, .lp-fermer::after{ content:""; position:absolute; top:50%; left:9px;
  width:22px; height:1.6px; background:var(--paper) }
.lp-fermer::before{ transform:rotate(45deg) } .lp-fermer::after{ transform:rotate(-45deg) }
.lp-compte{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  color:rgba(157,184,210,.7) }

@media (max-width:860px){
  .bande{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media (max-width:620px){
  .bande{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
  .lp-cote{ width:38px; height:38px }
  .lp-corps img{ max-width:84vw }
}
@media (prefers-reduced-motion:reduce){
  .bd-carte{ opacity:1; transform:none; transition:none }
  .bd-carte img, .loupe{ transition:none }
  .bd-carte:hover img{ transform:none }
}

/* ============ les campagnes, slide par slide ============ */
.lot{ margin-top:26px }
.lot-t{ display:block; color:var(--ink-soft); margin-bottom:11px }
.lot-t i{ font-style:normal; color:var(--rule) }
.planches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:8px }
.pl-case{
  padding:0; border:1px solid var(--rule); background:var(--navy-deep);
  aspect-ratio:518/648; overflow:hidden; cursor:zoom-in;
  opacity:0; transform:translateY(12px);
  transition:opacity .45s ease var(--retard), transform .45s ease var(--retard),
             border-color .25s ease, box-shadow .25s ease;
}
.planches.vue .pl-case{ opacity:1; transform:none }
.pl-case img{ display:block; width:100%; height:100%; object-fit:cover }
.pl-case:hover, .pl-case:focus-visible{ border-color:var(--blue);
  box-shadow:0 10px 22px -14px rgba(11,31,56,.75); z-index:2 }

/* ============ les parutions, lisibles sur place ============ */
.parutions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:26px }
.pa-case{
  padding:0; border:1px solid var(--rule); background:var(--paper-2);
  cursor:zoom-in; text-align:start; display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease var(--retard), transform .5s ease var(--retard),
             border-color .25s ease, box-shadow .25s ease;
}
.parutions.vue .pa-case{ opacity:1; transform:none }
.pa-case img{ display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  object-position:top }
.pa-txt{ display:block; padding:14px 16px 16px; font-size:14px; line-height:1.45; color:var(--ink) }
.pa-txt i{ display:block; font-style:normal; color:var(--ink-soft); margin-bottom:5px }
.pa-case:hover, .pa-case:focus-visible{ border-color:var(--blue);
  box-shadow:0 14px 28px -18px rgba(11,31,56,.7) }

/* une parution fait plusieurs milliers de pixels : la loupe la fait défiler */
.loupe.longue .lp-corps{ overflow:auto; align-items:flex-start }
.loupe.longue .lp-corps img{ max-height:none; max-width:min(82vw,760px) }
.loupe.longue .lp-corps figcaption{ position:sticky; bottom:0 }

@media (max-width:620px){
  .planches{ grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:6px }
  .parutions{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){
  .pl-case,.pa-case{ opacity:1; transform:none; transition:none }
}

/* ============ les démonstrations en tête de rubrique ============ */
.demo{ margin:0 0 54px; padding-bottom:40px; border-bottom:1px solid var(--rule) }
.demo-t{ font-family:var(--serif); font-size:clamp(21px,2.2vw,27px); font-weight:400;
  line-height:1.22; letter-spacing:-.012em; margin-bottom:14px }
.demo-d{ font-size:15.5px; line-height:1.72; color:var(--ink-soft); max-width:66ch }
.demo-n{ margin-top:16px; color:var(--ink-soft); letter-spacing:.1em }

/* ---- la courbe ---- */
.cb{ margin-top:26px; border:1px solid var(--rule); background:var(--paper-2);
  padding:clamp(14px,2vw,24px) }
#courbe{ width:100%; position:relative }
.cb-toile{ display:block; width:100%; cursor:crosshair }
.cb-lecture{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 22px;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--rule) }
.cb-date{ color:var(--ink); letter-spacing:.1em }
.cb-val{ font-family:var(--serif); font-size:21px; letter-spacing:-.01em; text-transform:none }
.cb-rep{ color:#9B3B2E; letter-spacing:.1em }
.cb-etat{ margin-inline-start:auto; padding:4px 10px; border:1px solid var(--rule);
  letter-spacing:.14em; color:var(--ink-soft) }
.cb-live{ border-color:var(--ink); color:var(--ink) }

/* ---- la couverture ---- */
.couv{ margin-top:26px; display:grid;
  grid-template-columns:minmax(180px,236px) minmax(0,470px);
  gap:clamp(22px,3vw,44px); align-items:start; justify-content:start }
.couv-reglages{ display:flex; flex-direction:column; gap:10px }
.couv-lab{ color:var(--ink-soft); letter-spacing:.12em }
.couv-saisie{ font:inherit; font-size:15px; padding:11px 13px; border:1px solid var(--rule);
  background:var(--paper); color:var(--ink); width:100%;
  transition:border-color .2s }
.couv-saisie:focus{ outline:none; border-color:var(--blue) }
.couv-teintes{ display:flex; gap:9px; margin-top:2px }
.couv-teintes button{ width:34px; height:34px; border-radius:50%; background:var(--t);
  border:1px solid rgba(11,31,56,.2); cursor:pointer; padding:0;
  transition:transform .22s ease, box-shadow .22s ease }
.couv-teintes button:hover{ transform:scale(1.1) }
.couv-teintes button[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink) }

.couv-page{
  --fond:#0B1F38;
  background:var(--fond); color:var(--paper); padding:34px 32px 30px;
  aspect-ratio:596/843; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 20px 44px -30px rgba(11,31,56,.8);
  transition:background .5s ease, opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  opacity:0; transform:translateY(18px);
}
.couv-page.vue{ opacity:1; transform:none }
.couv-marque{ font-family:var(--serif); font-size:17px; font-weight:600;
  letter-spacing:-.005em; margin-bottom:34px }
.couv-fil{ display:block; color:var(--steel); font-size:9.5px; letter-spacing:.13em; margin-bottom:10px }
.couv-titre{ font-family:var(--serif); font-size:27px; font-weight:400;
  line-height:1.12; letter-spacing:-.015em; margin-bottom:12px }
.couv-chapo{ font-size:11.5px; line-height:1.55; color:rgba(242,239,232,.74) }
.couv-bas{ margin-top:auto }
.couv-som{ display:block; padding-top:12px; color:var(--steel);
  font-size:9px; letter-spacing:.14em; border-top:1px solid rgba(242,239,232,.2) }
.couv-liste{ list-style:none; margin-top:8px }
.couv-liste li{ display:flex; align-items:baseline; gap:9px; padding:2.5px 0;
  border-bottom:1px solid rgba(242,239,232,.1);
  font-size:8.5px; white-space:nowrap }
.couv-liste i{ font-style:normal; font-family:var(--mono); color:var(--steel); flex:0 0 auto }
.couv-liste span{ font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:rgba(242,239,232,.88) }
.couv-liste b{ margin-inline-start:auto; font-weight:400; font-family:var(--mono);
  color:rgba(157,184,210,.72); flex:0 0 auto }

@media (max-width:720px){
  .couv{ grid-template-columns:1fr }
  /* la couverture retrecit : la typographie suit, sinon le sommaire deborde */
  .couv-page{ padding:26px 24px 22px }
  .couv-marque{ font-size:14px; margin-bottom:24px }
  .couv-titre{ font-size:21px; margin-bottom:10px }
  .couv-chapo{ font-size:10px }
  .couv-liste li{ font-size:7.5px; padding:2px 0 }
}
@media (prefers-reduced-motion:reduce){
  .couv-page{ opacity:1; transform:none; transition:background .2s }
  .couv-teintes button{ transition:none }
}

/* ============ les bureaux ============
   Trois cadrages de la même pièce : un large, un sur la profondeur, un de
   nuit. Ils montent décalés et s'agrandissent au clic, comme les autres
   galeries du site. */
.bureaux{ padding-block:clamp(44px,6vw,78px) }
.bx-t{ font-family:var(--serif); font-size:clamp(26px,3.2vw,40px); font-weight:400;
  line-height:1.14; letter-spacing:-.016em; margin:14px 0 14px }
.bx-d{ font-size:15.5px; line-height:1.7; color:var(--ink-soft); max-width:62ch }
.bx-grille{
  display:grid; gap:12px; margin-top:30px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-areas:"a a b" "a a c";
}
.bx-1{grid-area:a} .bx-2{grid-area:b} .bx-3{grid-area:c}
.bx-ph{
  padding:0; border:1px solid var(--rule); background:var(--navy-deep);
  overflow:hidden; cursor:zoom-in; position:relative;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease var(--r,0ms), transform .6s cubic-bezier(.22,.61,.36,1) var(--r,0ms),
             border-color .3s ease, box-shadow .3s ease;
}
.bx-2{--r:110ms} .bx-3{--r:220ms}
.bx-grille.vue .bx-ph{ opacity:1; transform:none }
.bx-ph img{ display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1) }
.bx-ph:hover, .bx-ph:focus-visible{ border-color:var(--blue);
  box-shadow:0 16px 34px -22px rgba(11,31,56,.75); z-index:2 }
.bx-ph:hover img{ transform:scale(1.04) }
.bx-1{ aspect-ratio:4/3 } .bx-2, .bx-3{ aspect-ratio:16/11 }
@media (max-width:720px){
  .bx-grille{ grid-template-columns:1fr 1fr; grid-template-areas:"a a" "b c" }
  .bx-1{ aspect-ratio:16/10 }
}
@media (prefers-reduced-motion:reduce){
  .bx-ph{ opacity:1; transform:none; transition:none }
  .bx-ph:hover img{ transform:none }
}

/* ============ ils nous ont fait confiance ============
   Les chiffres d'abord, en clair et en texte ; le relevé du courtier
   dessous, en preuve. Un clic l'ouvre en entier. */
/* Disposition souple : le nombre de relevés change au fil des mois, et une
   grille fixe laisse une carte orpheline dès que le compte ne tombe pas
   juste. En flex centré, la dernière ligne se centre d'elle-même. */
.temoins{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:26px 0 0 }
.temoins > .tm{ flex:1 1 300px; max-width:calc(33.333% - 11px); min-width:290px }
@media(max-width:1000px){ .temoins > .tm{ max-width:calc(50% - 8px) } }
@media(max-width:860px){ .temoins > .tm{ max-width:100%; flex-basis:100% } }
.tm{
  padding:26px 24px 0; border:1px solid var(--rule); background:var(--navy);
  color:var(--paper); text-align:start; cursor:zoom-in; overflow:hidden; position:relative;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease var(--retard), transform .55s cubic-bezier(.22,.61,.36,1) var(--retard),
             border-color .3s ease, box-shadow .3s ease;
}
.temoins.vue .tm{ opacity:1; transform:none }
.tm:hover, .tm:focus-visible{ border-color:var(--blue);
  box-shadow:0 18px 36px -24px rgba(11,31,56,.8); z-index:2 }
.tm-p{ color:var(--steel) }
.tm-g{ display:flex; align-items:baseline; gap:8px; margin-top:12px;
  font-family:var(--serif); font-size:clamp(26px,2.9vw,36px); font-weight:600;
  letter-spacing:-.018em; line-height:1 }
.tm-g i{ font-style:normal; font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  color:var(--steel) }
.tm-k{ display:block; margin-top:9px; color:rgba(157,184,210,.7) }
.tm-l{ display:grid; grid-template-columns:auto 1fr; gap:3px 11px; align-items:baseline;
  margin-top:18px; padding-top:15px; border-top:1px solid rgba(242,239,232,.14) }
.tm-l b{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--paper);
  text-align:end; font-variant-numeric:tabular-nums }
.tm-l em{ font-style:normal; font-size:13px; color:rgba(242,239,232,.66) }
.tm img{ display:block; width:100%; height:auto; margin-top:20px;
  border-top:1px solid rgba(242,239,232,.14); object-fit:cover;
  aspect-ratio:760/505; object-position:top }
.tm::after{ content:""; position:absolute; inset:auto 0 0 0; height:58px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(11,31,56,0), rgba(11,31,56,.92) 72%, var(--navy)) }
/* ancienne regle de grille, sans effet depuis le passage en flex */
@media (prefers-reduced-motion:reduce){ .tm{ opacity:1; transform:none; transition:none } }

/* Sortie visible dès l'écran d'accueil de la séquence. La touche Échap la
   ferme déjà, mais rien ne l'indiquait : un visiteur qui ne veut pas de
   l'animation se retrouvait devant un écran sombre sans issue apparente. */
.start-passer{
  display:block; margin:34px auto 0; padding:10px 18px;
  background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(157,184,210,.62);
  border-bottom:1px solid transparent; transition:color .25s ease, border-color .25s ease;
}
.start-passer:hover,.start-passer:focus-visible{ color:var(--paper); border-bottom-color:var(--steel) }
@media(max-width:620px){ .start-passer{ font-size:11px; padding:14px 18px } }