/* =============================================================================
  COTE — feuille de styles
  ---------------------------------------------------------------------------
  Fichier      : assets/css/style.css
  Version      : 2.0.0
  Modifié le   : 2026-09-06
  Rôle         : mise en page et composants de l'interface
  Licence      : © 2026 Émile Snyers — voir LICENCE.txt
  Dépendances  : tokens.css
   ============================================================================= */

/* =============================================================================
   1.2 Base
   ============================================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--pap); color:var(--enc);
  font:400 var(--t-md)/1.55 var(--f-ui);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure{ margin:0; }
a{ color:var(--acc); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:3px; }
[hidden]{ display:none !important; }
.nb{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.conteneur{ width:min(1320px, 100% - 2*var(--e4)); margin-inline:auto; }
.saut{ position:absolute; left:-9999px; }
.saut:focus{ left:var(--e3); top:var(--e2); z-index:100; background:var(--acc); color:var(--acc-texte); padding:var(--e2) var(--e3); border-radius:var(--r-s); }

/* Étiquette de cartouche : petites capitales espacées, comme sur un plan */
.etq{
  font-size:var(--t-xs); font-weight:650; letter-spacing:.15em;
  text-transform:uppercase; color:var(--enc-3);
}

/* =============================================================================
   1.3 En-tête
   ============================================================================= */
.entete{
  position:sticky; top:0; z-index:40; height:var(--entete-h);
  background:color-mix(in srgb, var(--pap-2) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:var(--bordure);
}
.entete-in{ display:flex; align-items:center; gap:var(--e4); height:100%; }
.marque{ display:flex; align-items:center; gap:var(--e2); color:var(--enc); flex:0 0 auto; }
.marque:hover{ text-decoration:none; }
.marque-nom{ font-size:var(--t-lg); font-weight:700; letter-spacing:.16em; }
.marque svg{ display:block; color:var(--acc); }
.nav{ display:flex; gap:var(--e1); flex:0 0 auto; }
.nav a{
  padding:6px var(--e3); border-radius:var(--r-s); color:var(--enc-2);
  font-size:var(--t-sm); font-weight:500;
}
.nav a:hover{ background:var(--pap-3); text-decoration:none; color:var(--enc); }
.nav a[aria-current="page"]{ color:var(--acc); background:var(--acc-doux); }
.zone-rech{ flex:1 1 auto; position:relative; min-width:0; max-width:520px; }
.champ-rech{
  width:100%; height:36px; padding:0 var(--e3) 0 34px;
  background:var(--pap); border:var(--bordure); border-radius:var(--r-m);
  color:var(--enc); font-size:var(--t-sm);
}
.champ-rech::placeholder{ color:var(--enc-3); }
.champ-rech:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-doux); }
.icone-rech{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--enc-3); pointer-events:none; }
.suggestions{
  position:absolute; inset-inline:0; top:calc(100% + 6px); z-index:50;
  background:var(--pap-2); border:var(--bordure); border-radius:var(--r-m);
  box-shadow:var(--ombre-forte); overflow:hidden; padding:var(--e1);
}
.suggestions button{
  display:block; width:100%; text-align:left; background:none; border:0;
  padding:var(--e2) var(--e3); border-radius:var(--r-s); cursor:pointer;
}
.suggestions button:hover, .suggestions button:focus-visible{ background:var(--pap-3); }
.suggestions .s-t{ font-size:var(--t-sm); font-weight:600; }
.suggestions .s-d{ font-size:var(--t-xs); color:var(--enc-3); }
.outils-entete{ display:flex; gap:var(--e1); flex:0 0 auto; }
.bt-icone{
  display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r-s);
  background:none; border:0; color:var(--enc-2); cursor:pointer;
}
.bt-icone:hover{ background:var(--pap-3); color:var(--enc); }
.bt-burger{ display:none; }

/* =============================================================================
   1.4 Boutons et champs
   ============================================================================= */
.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  height:34px; padding:0 var(--e3); border-radius:var(--r-s); cursor:pointer;
  background:var(--pap-2); border:var(--bordure); color:var(--enc);
  font-size:var(--t-sm); font-weight:550; transition:background .12s, border-color .12s;
}
.bt:hover{ background:var(--pap-3); }
.bt--acc{ background:var(--acc); border-color:var(--acc); color:var(--acc-texte); }
.bt--acc:hover{ background:var(--acc-2); border-color:var(--acc-2); }
.bt--plat{ background:none; border-color:transparent; color:var(--enc-2); }
.bt--plat:hover{ background:var(--pap-3); color:var(--enc); }
.bt--large{ width:100%; }
.bt[aria-pressed="true"]{ color:var(--acc); border-color:var(--acc); background:var(--acc-doux); }

.champ{ margin-bottom:var(--e3); }
.champ > label{ display:block; font-size:var(--t-sm); font-weight:550; margin-bottom:5px; }
.champ .aide{ display:block; font-size:var(--t-xs); color:var(--enc-3); font-weight:400; margin-top:2px; }
.saisie{ position:relative; display:flex; }
.saisie input, .saisie select{
  width:100%; height:38px; padding:0 var(--e3); background:var(--pap-2);
  border:1px solid var(--trait-fort); border-radius:var(--r-s); color:var(--enc);
  font:500 var(--t-md)/1 var(--f-mono); font-variant-numeric:tabular-nums;
}
.saisie select{ font-family:var(--f-ui); font-weight:500; cursor:pointer; appearance:none; padding-right:32px; }
.saisie--select::after{
  content:""; position:absolute; right:12px; top:50%; width:7px; height:7px;
  border-right:2px solid var(--enc-3); border-bottom:2px solid var(--enc-3);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.saisie input:focus, .saisie select:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-doux); }
.saisie--unite input{ padding-right:44px; }
.unite-suf{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  font-size:var(--t-xs); color:var(--enc-3); pointer-events:none; font-family:var(--f-mono);
}
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e2); }

.segments{ display:grid; gap:3px; background:var(--pap-3); padding:3px; border-radius:var(--r-m); }
.segments button{
  border:0; background:none; padding:7px var(--e2); border-radius:6px; cursor:pointer;
  font-size:var(--t-sm); font-weight:550; color:var(--enc-2); text-align:center;
}
.segments button:hover{ color:var(--enc); }
.segments button[aria-pressed="true"]{ background:var(--pap-2); color:var(--acc); box-shadow:var(--ombre); }

/* =============================================================================
   1.5 Blocs (cartouches)
   ============================================================================= */
.bloc{ background:var(--pap-2); border:var(--bordure); border-radius:var(--r-m); box-shadow:var(--ombre); }
.bloc-tete{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e3);
  padding:var(--e3) var(--e4); border-bottom:var(--bordure); min-height:44px;
}
.bloc-corps{ padding:var(--e4); }
.bloc-pied{ padding:var(--e3) var(--e4); border-top:var(--bordure); display:flex; gap:var(--e2); flex-wrap:wrap; }

/* =============================================================================
   1.6 Page calculateur — trois zones
   ============================================================================= */
.calc-tete{ padding:var(--e6) 0 var(--e5); }
.calc-fil{ display:flex; align-items:center; gap:var(--e2); font-size:var(--t-xs); color:var(--enc-3); margin-bottom:var(--e2); }
.calc-titre{ font-size:var(--t-2xl); font-weight:700; letter-spacing:-.01em; }
.calc-resume{ color:var(--enc-2); max-width:62ch; margin-top:var(--e2); }
.calc-actions{ display:flex; gap:var(--e2); flex-wrap:wrap; margin-top:var(--e4); }
.grille-calc{ display:grid; grid-template-columns:20rem minmax(0,1fr) 19rem; gap:var(--e4); align-items:start; padding-bottom:var(--e8); }
.col-fixe{ position:sticky; top:calc(var(--entete-h) + var(--e4)); }

/* Schéma */
.schema-boite{ background:var(--sch-fond); border-radius:0 0 var(--r-m) var(--r-m); padding:var(--e4); overflow:hidden; }
.schema-boite svg{ width:100%; height:auto; display:block; max-height:min(68vh, 620px); }
.calques{ display:flex; flex-wrap:wrap; gap:var(--e1); }
.calque{
  border:var(--bordure); background:var(--pap-2); border-radius:100px; padding:3px 10px;
  font-size:var(--t-xs); color:var(--enc-2); cursor:pointer; font-weight:550;
}
.calque[aria-pressed="true"]{ background:var(--acc-doux); border-color:var(--acc); color:var(--acc); }
.calque-titre{ font-size:var(--t-xs); font-weight:650; letter-spacing:.1em; text-transform:uppercase;
  color:var(--enc-3); align-self:center; margin-right:2px; }
.calque-sep{ width:1px; align-self:stretch; background:var(--trait); margin-inline:var(--e2); }

/* Résultats */
.res{ display:flex; align-items:baseline; gap:var(--e2); padding:6px 0; }
.res-lab{ font-size:var(--t-sm); color:var(--enc-2); white-space:nowrap; }
.res-fil{ flex:1 1 auto; border-bottom:1px dotted var(--trait-fort); transform:translateY(-4px); min-width:12px; }
.res-val{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.res-val .u{ font-size:var(--t-xs); color:var(--enc-3); margin-left:3px; font-weight:400; }
.res--cle{
  background:var(--acc-doux); margin:0 calc(-1 * var(--e4)) var(--e3);
  padding:var(--e3) var(--e4); border-block:1px solid color-mix(in srgb, var(--acc) 25%, transparent);
  display:block;
}
.res--cle .res-lab{ display:block; color:var(--acc); font-weight:600; margin-bottom:2px; }
.res--cle .res-val{ font-size:var(--t-2xl); color:var(--acc); line-height:1.1; }
.res--cle .u{ font-size:var(--t-md); }

/* Messages */
.msg{ border-radius:var(--r-s); padding:var(--e3); font-size:var(--t-sm); margin-bottom:var(--e3); border:1px solid transparent; }
.msg-t{ font-weight:650; margin-bottom:3px; display:block; }
.msg--err{ background:var(--err-doux); border-color:color-mix(in srgb, var(--err) 35%, transparent); color:var(--err); }
.msg--warn{ background:var(--warn-doux); border-color:color-mix(in srgb, var(--warn) 32%, transparent); color:var(--warn); }
.msg--info{ background:var(--acc-doux); border-color:color-mix(in srgb, var(--acc) 25%, transparent); color:var(--enc-2); }
.msg ul{ margin:var(--e2) 0 0; padding-left:18px; }
.msg button{ background:none; border:0; padding:0; color:inherit; font:inherit; font-weight:650; text-decoration:underline; cursor:pointer; }

/* Explication / formule */
.formule{
  font-family:var(--f-mono); font-size:var(--t-sm); background:var(--pap);
  border:var(--bordure); border-radius:var(--r-s); padding:var(--e3); overflow-x:auto;
  white-space:pre; line-height:1.7;
}
.fusion-liste{ display:grid; gap:var(--e1); }
.fusion-ligne{ display:flex; align-items:center; gap:var(--e2); font-family:var(--f-mono); font-size:var(--t-sm); }
.fusion-ligne .fn{ color:var(--enc-2); flex:0 0 auto; }
.fusion-ligne .fv{ margin-left:auto; font-weight:600; }

/* Tableau */
.tab{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.tab th, .tab td{ padding:6px var(--e2); text-align:right; border-bottom:1px solid var(--trait); }
.tab th{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--enc-3); font-weight:650; }
.tab td{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.tab th:first-child, .tab td:first-child{ text-align:left; }
.tab-boite{ max-height:280px; overflow:auto; }

/* Comparatif */
.comp-boite{ overflow-x:auto; }
.comp-tab{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.comp-tab th, .comp-tab td{ padding:7px var(--e3); border-bottom:1px solid var(--trait); text-align:right; white-space:nowrap; }
.comp-tab th:first-child, .comp-tab td:first-child{ text-align:left; font-family:var(--f-ui); color:var(--enc-2); font-weight:500; }
.comp-tab thead th{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--enc-3); font-weight:650; }
.comp-tab td{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.comp-tab tr.sec td{ background:var(--pap); font-family:var(--f-ui); font-weight:650; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:.1em; color:var(--enc-3); text-align:left; }
.comp-tab td.diff{ color:var(--acc); background:var(--acc-doux); }
.comp-tab td.cle{ font-weight:700; }
.comp-schema{ border-top:var(--bordure); padding:var(--e4) 0 0; margin-top:var(--e4); }
.comp-schema-ligne{ padding-block:var(--e3); }
.comp-schema-ligne .etq{ display:block; margin-bottom:var(--e2); }
.comp-schema-in{ background:var(--sch-fond); border-radius:var(--r-s); }
.pastille-nb{
  position:absolute; top:1px; right:1px; min-width:15px; height:15px; padding:0 3px;
  border-radius:100px; background:var(--acc); color:var(--acc-texte);
  font-size:9px; font-weight:700; line-height:15px; text-align:center; pointer-events:none;
}
.bt-icone{ position:relative; }

/* Tests de non-régression */
.test-ok{ color:var(--ok); font-weight:650; }
.test-ko{ color:var(--err); font-weight:650; }
.test-l{ display:grid; grid-template-columns:1fr auto; gap:var(--e3); padding:7px 0; border-bottom:1px solid var(--trait); font-size:var(--t-sm); }
.test-d{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--enc-3); grid-column:1 / -1; }

/* =============================================================================
   1.7 Accueil
   ============================================================================= */
.hero{ padding:var(--e7) 0 var(--e6); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--e7); align-items:center; }
.hero h1{ font-size:var(--t-3xl); font-weight:700; letter-spacing:-.02em; line-height:1.12; }
.hero p.sous{ color:var(--enc-2); margin-top:var(--e3); font-size:var(--t-lg); max-width:46ch; }
.hero-rech{ margin-top:var(--e5); position:relative; }
.hero-rech input{
  width:100%; height:52px; padding:0 var(--e4) 0 46px; font-size:var(--t-lg);
  background:var(--pap-2); border:1px solid var(--trait-fort); border-radius:var(--r-m); color:var(--enc);
}
.hero-rech input:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 4px var(--acc-doux); }
.hero-rech .icone-rech{ left:16px; }
.hero-demo{ background:var(--sch-fond); border:var(--bordure); border-radius:var(--r-l); padding:var(--e5); box-shadow:var(--ombre); }
.hero-demo figcaption{ display:flex; justify-content:space-between; gap:var(--e3); margin-top:var(--e4); font-size:var(--t-xs); color:var(--enc-3); border-top:var(--bordure); padding-top:var(--e3); }
.hero-demo figcaption b{ color:var(--enc); font-family:var(--f-mono); font-weight:600; }

.grille-outils{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:var(--e3); }
.carte{
  display:block; background:var(--pap-2); border:var(--bordure); border-radius:var(--r-m);
  padding:var(--e4); color:var(--enc); position:relative; transition:border-color .12s, transform .12s;
}
.carte:hover{ text-decoration:none; border-color:var(--acc); transform:translateY(-2px); }
.carte h3{ font-size:var(--t-md); font-weight:650; margin-bottom:var(--e1); }
.carte p{ font-size:var(--t-sm); color:var(--enc-3); }
.carte .badge{ position:absolute; top:var(--e3); right:var(--e3); }
.badge{
  font-size:var(--t-xs); font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:100px; background:var(--pap-3); color:var(--enc-3);
}
.badge--a-venir{ background:var(--warn-doux); color:var(--warn); }
.badge--dispo{ background:var(--ok-doux); color:var(--ok); }
.section{ padding-block:var(--e6); }
.section-tete{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e3); margin-bottom:var(--e4); }
.section h2{ font-size:var(--t-xl); font-weight:650; letter-spacing:-.01em; }

/* =============================================================================
   1.8 Panneau latéral (paramètres), fenêtre modale, notification
   ============================================================================= */
.voile{ position:fixed; inset:0; background:var(--voile); z-index:60; animation:fondu .15s ease; }
@keyframes fondu{ from{ opacity:0 } to{ opacity:1 } }
.panneau{
  position:fixed; top:0; right:0; bottom:0; width:min(380px, 92vw); z-index:61;
  background:var(--pap-2); border-left:var(--bordure); box-shadow:var(--ombre-forte);
  display:flex; flex-direction:column; animation:glisse .18s ease;
}
@keyframes glisse{ from{ transform:translateX(24px); opacity:.4 } to{ transform:none; opacity:1 } }
.panneau-corps{ overflow-y:auto; padding:var(--e4); }
.reglage{ padding-block:var(--e3); border-bottom:var(--bordure); }
.reglage:last-child{ border-bottom:0; }
.reglage-lab{ font-size:var(--t-sm); font-weight:600; margin-bottom:var(--e2); display:block; }
.pastilles{ display:flex; gap:var(--e2); }
.pastille{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.pastille[aria-pressed="true"]{ border-color:var(--enc); box-shadow:0 0 0 2px var(--pap-2) inset; }
.bascule{ display:flex; align-items:center; justify-content:space-between; gap:var(--e3); padding-block:6px; font-size:var(--t-sm); }
.interrupteur{ width:40px; height:23px; border-radius:100px; background:var(--trait-fort); border:0; position:relative; cursor:pointer; flex:0 0 auto; transition:background .15s; }
.interrupteur::after{ content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; transition:transform .15s; }
.interrupteur[aria-pressed="true"]{ background:var(--acc); }
.interrupteur[aria-pressed="true"]::after{ transform:translateX(17px); }
.notif{
  position:fixed; left:50%; bottom:var(--e5); transform:translateX(-50%); z-index:80;
  background:var(--enc); color:var(--pap-2); padding:var(--e2) var(--e4); border-radius:100px;
  font-size:var(--t-sm); font-weight:550; box-shadow:var(--ombre-forte); animation:monte .2s ease;
}
@keyframes monte{ from{ opacity:0; transform:translate(-50%, 8px) } to{ opacity:1; transform:translate(-50%,0) } }

/* =============================================================================
   1.9 Pied de page
   ============================================================================= */
.pied{ border-top:var(--bordure); background:var(--pap-2); margin-top:var(--e6); }
.pied-in{ display:flex; flex-wrap:wrap; gap:var(--e6); padding-block:var(--e6); }
.pied-col{ min-width:170px; }
.pied-col h4{ font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--enc-3); margin-bottom:var(--e3); }
.pied-col a{ display:block; font-size:var(--t-sm); color:var(--enc-2); padding-block:3px; }
.pied-col a:hover{ color:var(--acc); }
.cartouche{
  margin-left:auto; border:var(--bordure); border-radius:var(--r-s); padding:var(--e3) var(--e4);
  font-family:var(--f-mono); font-size:var(--t-xs); color:var(--enc-2); align-self:flex-start; min-width:190px;
}
.cartouche div{ display:flex; justify-content:space-between; gap:var(--e4); padding-block:2px; }
.cartouche div + div{ border-top:1px dotted var(--trait); }
.pied-bas{ border-top:var(--bordure); padding-block:var(--e3); font-size:var(--t-xs); color:var(--enc-3); display:flex; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; }

/* Prose (pages de contenu) */
.prose{ max-width:72ch; padding-block:var(--e6); }
.prose h1{ font-size:var(--t-2xl); font-weight:700; margin-bottom:var(--e4); letter-spacing:-.01em; }
.prose h2{ font-size:var(--t-lg); font-weight:650; margin:var(--e5) 0 var(--e2); }
.prose p, .prose li{ color:var(--enc-2); margin-bottom:var(--e3); }
.prose ul, .prose ol{ padding-left:20px; margin:0 0 var(--e3); }
.prose code{ font-family:var(--f-mono); font-size:.9em; background:var(--pap-3); padding:1px 5px; border-radius:4px; }

/* Historique des versions */
.version{ display:grid; grid-template-columns:130px 1fr; gap:var(--e4); padding-block:var(--e4); border-top:var(--bordure); }
.version:first-child{ border-top:0; }
.version-num{ font-family:var(--f-mono); font-weight:650; }
.version-date{ font-size:var(--t-xs); color:var(--enc-3); }
.version ul{ margin:0; padding-left:18px; }
.version li{ color:var(--enc-2); font-size:var(--t-sm); padding-block:2px; }

/* =============================================================================
   1.10 Adaptations mobile
   ============================================================================= */
@media (max-width:1180px){
  .grille-calc{ grid-template-columns:19rem minmax(0,1fr); }
  .grille-calc .zone-res{ grid-column:1 / -1; }
  .col-fixe{ position:static; }
  .hero{ grid-template-columns:1fr; gap:var(--e5); }
}
@media (max-width:900px){
  .nav{ display:none; }
  .bt-burger{ display:grid; }
  .nav--ouvert{
    display:flex; flex-direction:column; position:absolute; top:var(--entete-h); left:0; right:0;
    background:var(--pap-2); border-bottom:var(--bordure); padding:var(--e3); gap:2px; box-shadow:var(--ombre);
  }
}
@media (max-width:820px){
  .grille-calc{ grid-template-columns:1fr; }
  .hero{ padding-top:var(--e5); }
  .hero h1{ font-size:var(--t-2xl); }
  .zone-rech{ display:none; }
  .pied-in{ gap:var(--e5); }
  .cartouche{ margin-left:0; }
  .version{ grid-template-columns:1fr; gap:var(--e2); }
}
@media print{
  .entete, .pied, .calc-actions, .bloc-pied, .calques{ display:none !important; }
  body{ background:#fff; }
  .grille-calc{ grid-template-columns:1fr 1fr; }
}


/* =============================================================================
   1.11 Confort d'affichage — taille, densité, curseur, daltonisme
   ============================================================================= */
html[data-taille="compacte"]{ font-size:14px; }
html[data-taille="normale"] { font-size:16px; }
html[data-taille="grande"]  { font-size:18.5px; }

html[data-densite="compacte"]{ --e1:3px; --e2:6px; --e3:9px; --e4:12px; --e5:17px; --e6:22px; --e7:32px; --e8:44px; }
html[data-densite="aeree"]   { --e1:6px; --e2:11px; --e3:16px; --e4:22px; --e5:32px; --e6:44px; --e7:64px; --e8:88px; }

html[data-curseur="reticule"] body{ cursor:crosshair; }
html[data-curseur="reticule"] a, html[data-curseur="reticule"] button,
html[data-curseur="reticule"] .carte, html[data-curseur="reticule"] .calque{ cursor:pointer; }
html[data-curseur="fin"] body{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M3 3l7 14 2-6 6-2z' fill='%230e7490' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E") 3 3, auto;
}

/* Palettes distinguables sans discrimination rouge-vert ou bleu-jaune.
   L'accent est déplacé vers une teinte que le type de daltonisme visé
   sépare nettement du gris de l'interface. */
html[data-daltonien="protanopie"], html[data-daltonien="deuteranopie"]{
  --acc:#0057d1; --acc-2:#0046a8; --acc-doux:rgba(0,87,209,.12); --acc-texte:#fff;
  --ok:#0057d1; --warn:#8a6b00; --err:#00429e;
  --ok-doux:rgba(0,87,209,.10); --warn-doux:rgba(138,107,0,.12); --err-doux:rgba(0,66,158,.10);
}
html[data-daltonien="tritanopie"]{
  --acc:#c2185b; --acc-2:#9c1349; --acc-doux:rgba(194,24,91,.12); --acc-texte:#fff;
  --ok:#1b7a3d; --warn:#c2185b; --err:#8e0038;
  --ok-doux:rgba(27,122,61,.10); --warn-doux:rgba(194,24,91,.12); --err-doux:rgba(142,0,56,.10);
}
html[data-daltonien]:not([data-daltonien="aucun"]) .msg--err{ border-left:4px solid currentColor; }
html[data-daltonien]:not([data-daltonien="aucun"]) .msg--warn{ border-left:4px dashed currentColor; }

/* =============================================================================
   1.12 Mode présentation
   ============================================================================= */
html[data-presentation="oui"] .entete,
html[data-presentation="oui"] .pied,
html[data-presentation="oui"] .calc-fil,
html[data-presentation="oui"] .zone-res .bloc-pied{ display:none !important; }
html[data-presentation="oui"] .conteneur{ width:min(1600px, 100% - 2*var(--e4)); }
html[data-presentation="oui"] .calc-titre{ font-size:var(--t-3xl); }
html[data-presentation="oui"] .grille-calc{ grid-template-columns:18rem minmax(0,1.6fr) 18rem; }
html[data-presentation="oui"] .res-val{ font-size:1.15em; }
html[data-presentation="oui"] .schema-boite svg{ max-height:min(78vh, 900px); }
.bt-presentation{
  position:fixed; right:var(--e4); bottom:var(--e4); z-index:70; display:none;
  box-shadow:var(--ombre-forte);
}
html[data-presentation="oui"] .bt-presentation{ display:inline-flex; }

/* =============================================================================
   1.13 Catalogue et feuille de route
   ============================================================================= */
.rayon{ margin-bottom:var(--e6); }
.rayon-tete{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e3);
  border-bottom:var(--bordure); padding-bottom:var(--e2); margin-bottom:var(--e4); }
.rayon-tete h3{ font-size:var(--t-lg); font-weight:650; }
.rayon-tete p{ font-size:var(--t-sm); color:var(--enc-3); margin-top:2px; }
.famille-bandeau{
  display:flex; align-items:baseline; gap:var(--e3); flex-wrap:wrap;
  padding:var(--e4) 0 var(--e2); border-top:2px solid var(--acc); margin-top:var(--e6);
}
.famille-bandeau h2{ font-size:var(--t-xl); font-weight:700; }
.famille-bandeau span{ font-size:var(--t-sm); color:var(--enc-3); }
.carte--avenir{
  opacity:.55; border-style:dashed; cursor:default; background:transparent;
}
.carte--avenir:hover{ transform:none; border-color:var(--trait); opacity:.75; }
.carte--avenir h3{ color:var(--enc-2); }