/* écrit par site.mjs — ne pas éditer à la main */
html[data-versant="light"] .hf{
  --void:#E8E8E8; --bg:#F4F4F4; --surf:#FAFAFA; --raised:#FFFFFF;
  --hair:rgba(17,17,17,.12); --hair2:rgba(17,17,17,.22);
  --tx:#141414; --br:#0A0A0A; --dim:#4B4B4B; --faint:#7B7B7B; --ghost:#A6A6A6;
  --entity:#D9760B; --note:#178F86; --project:#8839EF; --fact:#3D9A2A; --relation:#1E66F5; --decay:#E64553;
  --contre:#141414;
  --onacc:#FFFFFF; --lead:#2E2E2E;
}

/* Le choix d'accent. Chaque règle ne fait que repointer --accent vers une
   couleur de rôle déjà définie, donc elle vaut pour les DEUX versants sans
   être écrite deux fois : ce sont les rôles qui changent avec le versant, pas
   ces lignes. « note » est la valeur par défaut et n'a pas de règle.
   Le contre-jour est le seul qui ne soit pas une teinte : c'est l'encre du
   thème opposé, et --onacc marche déjà pour lui dans les deux sens. */
html[data-accent="project"] .hf{--accent:var(--project)}
html[data-accent="entity"] .hf{--accent:var(--entity)}
html[data-accent="fact"] .hf{--accent:var(--fact)}
html[data-accent="contre"] .hf{--accent:var(--contre)}

html,body{margin:0;padding:0;background:#0F0F10}
html[data-versant="light"],html[data-versant="light"] body{background:#F4F4F4}
.hf .nav a{text-decoration:none}
.hf .ftr li a{color:inherit;text-decoration:none}
.hf .ftr li a:hover{color:var(--tx)}
.hf a.btn{text-decoration:none}
.hf .vsw b{transition:background .15s ease,color .15s ease}

/* Le sélecteur d'accent : cinq disques en fin de colonne du héros, dans le
   flux. Il n'existe QUE sur la page d'accueil, et il est donc écrit dans son
   fragment plutôt que greffé sur les dix. Dans le flux, il n'a besoin ni de
   mesure ni de recalage : c'est la mise en page qui le porte. */
.hf .acsw{display:flex;gap:12px;align-items:center;margin-top:30px}
.hf .acsw button{width:13px;height:13px;padding:0;border:0;border-radius:50%;
  background:var(--p);cursor:pointer;opacity:.55;
  transition:opacity .15s ease,transform .15s ease}
.hf .acsw button:hover{opacity:1;transform:scale(1.18)}
.hf .acsw button.on{opacity:1;outline:1.5px solid var(--p);outline-offset:3px}
.hf .acsw button:focus-visible{outline:2px solid var(--tx);outline-offset:4px}
.hf .live{pointer-events:none}

/* Les captures d'écran. Deux fichiers par plan, un par versant : une image ne
   bascule pas toute seule, et une capture sombre sur fond crème se remarque
   tout de suite. C'est le CSS qui échange, pas le script : l'image juste
   s'affiche, y compris avant que quoi que ce soit s'exécute.
   Les classes ne s'appellent PAS sb et cl : cl est déjà le curseur de
   terminal, qui clignote une fois par seconde, et toutes les captures du
   versant clair en héritaient. Ce bloc vit dans un gabarit : pas d'accent
   grave dans ses commentaires, il fermerait la chaîne. */
/* Le lien vers l'encadré du coût. Il doit se voir à l'intérieur d'une phrase :
   la clé est la leur, et elle leur coûtera quelque chose chez un tiers. C'est
   la seule dépense qu'on ne facture pas, donc la seule qu'on est seul à pouvoir
   annoncer. Un lien couleur note s'y serait fondu, le soulignement le sort. */
.hf a.cout{color:var(--entity);text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,var(--entity) 45%,transparent);padding-bottom:1px}
.hf a.cout:hover{color:var(--entity);border-bottom-color:var(--entity)}
/* L'en-tête est collant : sans cette marge l'ancre s'arrête dessous. */
.hf [id]{scroll-margin-top:78px}

.hf .shot{display:block;overflow:hidden;border-radius:2px}
.hf .shot img{display:block;width:100%;height:100%;object-fit:cover}
.hf .shot .vclair{display:none}
html[data-versant="light"] .hf .shot .vsombre{display:none}
html[data-versant="light"] .hf .shot .vclair{display:block}

.hf details.avert{margin-top:16px;border-top:1px solid var(--hair);padding-top:14px}
.hf details.avert summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;
  font-size:13.5px;color:var(--dim)}
.hf details.avert summary::-webkit-details-marker{display:none}
.hf details.avert summary::after{content:"+";color:var(--faint)}
.hf details.avert[open] summary::after{content:"−"}
.hf details.avert summary:hover{color:var(--tx)}
.hf details.avert li{font-size:13.5px}
.hf .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:34px;
  padding:0 11px;border:1px solid var(--hair2);border-radius:9px;background:transparent;cursor:pointer}
.hf .burger i{display:block;height:1.5px;background:var(--tx);transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.hf .hdr.ouvert .burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
.hf .hdr.ouvert .burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:1040px){
  .hf{font-size:15px}
  .hf .wrap{padding:0 20px}
  .hf .hdr .in{padding:12px 20px;gap:14px}
  .hf .hdr .in{flex-wrap:wrap}
  .hf .vsw{margin-left:auto}
  .hf .burger{display:inline-flex;order:5}
  .hf .nav{display:none;order:10;flex-basis:100%;flex-direction:column;gap:0;padding:6px 0 4px}
  .hf .hdr.ouvert .nav{display:flex}
  .hf .nav > a,.hf .nav > span{display:block;padding:14px 0;border-top:1px solid var(--hair);text-decoration:none}
  .hf .nav span{font-size:13px;white-space:nowrap}
  .hf .sec{padding:64px 0}
  .hf h1{font-size:38px;letter-spacing:-.03em}
  .hf h2{font-size:26px}
  .hf .lead{font-size:16.5px;max-width:none}
  .hf p{max-width:none}
  .hf .mas{column-count:1}
  .hf .step{grid-template-columns:66px 1fr;gap:14px;padding:16px 0}
  .hf .ftr{padding:44px 0 36px}
  .hf [style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:20px !important}
  .hf .st{grid-template-columns:42px 1fr;gap:14px}
  .hf .live{height:340px !important}
  .hf .plats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
  .hf .tbl > div{border-bottom:0;padding:6px 20px}
  .hf .tbl > div:nth-child(3n){padding-bottom:18px;border-bottom:1px solid var(--hair)}
}
@media (max-width:400px){
  .hf .hdr .in{gap:8px;padding:12px 16px}
  .hf .vsw b{padding:8px 8px;letter-spacing:.06em}
}
@media (max-width:720px){
  .hf .hdr .btn.sm{display:none}
  /* une rangée qui porte des boutons passe à la ligne au lieu de sortir de l'écran */
  .hf [style*="display:flex"]:has(.btn){flex-wrap:wrap}
  .hf [style*="flex-shrink:0"]:has(> .btn){flex-shrink:1}
  .hf .btn{width:100%}
  .hf h1{font-size:31px}
}