/* ============================================================
   GEODESIS — extensions de la feuille maison.
   house.css fournit la grille, la typographie et les composants
   partages ; ce fichier n'ajoute que ce qui est propre au produit.
   ============================================================ */

:root{
  /* Rampe ordinale de l'accent, thème sombre.
     Validee : monotonie de clarte, ecarts >= 0.06, bout clair a 4.01:1
     sur le fond #0c0c0e, etalement de teinte 14 deg. */
  --ramp-1:#f6c177; --ramp-2:#e8901f; --ramp-3:#a85f0c;
  /* Encre des donnees : la valeur de reference porte un neutre, jamais
     une seconde teinte --- l'histoire est un avant/apres, pas deux categories. */
  --anchor:rgba(255,255,255,.34);
  --anchor-ink:rgba(255,255,255,.62);
  --grid:rgba(255,255,255,.07);
}
/* Le clair a ses propres pas, pas un renversement automatique : le bout clair
   de la rampe sombre tombe a 1.57:1 sur le fond creme, ce qui echoue. */
html[data-theme="light"]{
  --ramp-1:#e8901f; --ramp-2:#b8690f; --ramp-3:#7a4408;
  --anchor:rgba(45,32,10,.30);
  --anchor-ink:rgba(26,20,10,.58);
  --grid:rgba(45,32,10,.10);
}

/* ---------- bandeau des paliers d'acces ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}
.tier{border:1px solid var(--line);border-radius:2px;padding:clamp(1.8rem,3vw,2.4rem);display:flex;flex-direction:column;position:relative;transition:border-color .4s,background .4s}
.tier:hover{border-color:var(--line-2);background:var(--panel)}
.tier[data-current]{border-color:var(--accent-text)}
.tier[data-current]::before{content:"Vous êtes ici";position:absolute;top:-.62rem;left:clamp(1.8rem,3vw,2.4rem);background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;padding:.18em .7em;border-radius:1px}
.tier .price{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1;margin:.5rem 0 .2rem}
.tier .per{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.tier ul{list-style:none;margin:1.5rem 0 0;padding:0}
.tier li{position:relative;padding-left:1.5rem;margin-bottom:.75rem;color:var(--muted);font-weight:300;font-size:.95rem;line-height:1.65}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--accent)}
.tier li.no{color:var(--dim)}
.tier li.no::before{background:var(--line-2)}
.tier .more{margin-top:auto;padding-top:1.7rem}

/* ---------- graphique : la carte du risque de borne ---------- */
.viz{border:1px solid var(--line);border-radius:2px;background:var(--bg-2);overflow:hidden}
.viz-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding:clamp(1.5rem,3vw,2.2rem) clamp(1.5rem,3vw,2.2rem) 0}
.viz-head h3{font-size:clamp(1.25rem,2.4vw,1.6rem);max-width:22ch}
.viz-head .sub{color:var(--muted);font-weight:300;font-size:.95rem;line-height:1.7;max-width:46ch;margin-top:.6rem}

/* commande : une seule rangee, au-dessus du graphique */
.viz-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;padding:1.5rem clamp(1.5rem,3vw,2.2rem);border-bottom:1px solid var(--line);margin-top:1.5rem}
.viz-ctl label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:.9rem}
.viz-ctl input[type=range]{-webkit-appearance:none;appearance:none;width:clamp(130px,22vw,210px);height:2px;background:var(--line-2);border-radius:2px;outline:none;cursor:pointer}
.viz-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-2)}
.viz-ctl input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-2)}
.viz-ctl output{font-family:var(--mono);font-size:12px;color:var(--accent-text);min-width:7.5ch}
.viz-key{display:flex;gap:1.4rem;margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.viz-key i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.55em;vertical-align:-1px}
.viz-key .k24 i{background:var(--anchor)}
.viz-key .k75 i{background:var(--ramp-2)}

.viz-body{padding:clamp(1.2rem,2.5vw,1.8rem) clamp(1rem,3vw,2.2rem) clamp(1.5rem,3vw,2rem)}
.viz-body svg{width:100%;height:auto;display:block;overflow:visible}
.viz-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:0 clamp(1.5rem,3vw,2.2rem) clamp(1.5rem,3vw,2.2rem);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* marques */
.dum-row .track{stroke:var(--grid);stroke-width:1}
.dum-row .span{stroke:var(--ramp-3);stroke-width:2;opacity:.55}
.dum-row .a24{fill:var(--anchor);stroke:var(--bg-2);stroke-width:2}
.dum-row .a75{fill:var(--ramp-2);stroke:var(--bg-2);stroke-width:2}
.dum-row .name{fill:var(--text);font-family:var(--ui);font-size:13px;font-weight:400}
.dum-row .val{fill:var(--text);font-family:var(--mono);font-size:12px}
.dum-row .val.dim{fill:var(--anchor-ink)}
.dum-row .hit{fill:transparent;cursor:crosshair}
.dum-row.on .track{stroke:var(--line-2)}
.dum-row.on .name{font-weight:500}
.ax line{stroke:var(--grid);stroke-width:1}
.ax text{fill:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em}

/* infobulle */
.tip{position:fixed;z-index:80;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s;background:var(--bg-3);border:1px solid var(--line-2);border-radius:2px;padding:.75rem .95rem;min-width:190px;box-shadow:0 10px 34px rgba(0,0,0,.34)}
.tip.on{opacity:1;transform:none}
.tip b{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:600;margin-bottom:.5rem}
.tip dl{display:grid;grid-template-columns:1fr auto;gap:.24rem .9rem;margin:0}
.tip dt{font-family:var(--ui);font-size:.8rem;font-weight:300;color:var(--muted)}
.tip dd{font-family:var(--mono);font-size:.78rem;margin:0;text-align:right;color:var(--text)}
.tip .hr{height:1px;background:var(--line);margin:.55rem 0}
.tip .note{font-family:var(--ui);font-size:.74rem;font-weight:300;color:var(--dim);line-height:1.5}

/* table de repli, toujours disponible */
.viz-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:.5rem}
.viz-table caption{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding-bottom:.9rem}
.viz-table th,.viz-table td{padding:.5rem .7rem;border-bottom:1px solid var(--line);text-align:right;font-weight:400}
.viz-table th:first-child,.viz-table td:first-child{text-align:left}
.viz-table thead th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400}
.viz-table td{font-family:var(--mono);color:var(--muted)}
.viz-table td:first-child{font-family:var(--ui);color:var(--text)}
details.table-toggle summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:.5rem 0;list-style:none}
details.table-toggle summary::-webkit-details-marker{display:none}
details.table-toggle summary::before{content:"+ ";color:var(--accent-text)}
details.table-toggle[open] summary::before{content:"– "}
details.table-toggle summary:hover{color:var(--text)}

/* ---------- avertissement legal, non dissimulable ---------- */
.legal{border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(1.6rem,3vw,2.2rem) 0}
.legal p{font-size:.86rem;font-weight:300;line-height:1.75;color:var(--muted);max-width:none}
.legal p strong{color:var(--text);font-weight:500}
.legal .stamp{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:1rem;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem}

/* ---------- theme switch ---------- */
.theme-btn{background:none;border:1px solid var(--line-2);color:var(--muted);width:34px;height:34px;border-radius:2px;cursor:pointer;font-size:.9rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:border-color .3s,color .3s}
.theme-btn:hover{border-color:var(--accent-text);color:var(--accent-text)}

/* bouton « voir toutes les economies » */
.viz-more{display:inline-flex;align-items:center;gap:.5em;margin-top:.9rem;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);padding:.4rem 0;transition:gap .3s var(--ease)}
.viz-more::before{content:"+";font-size:12px}
.viz-more[aria-expanded="true"]::before{content:"\2013"}
.viz-more:hover{gap:.85em}

/* libelle de palier */
.tier-kind{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);display:inline-flex;align-items:center;gap:.55em}
.tier-kind::before{content:"";width:16px;height:1px;background:var(--accent);opacity:.75}

/* La barre de navigation ne doit jamais casser un libelle en deux lignes :
   la feuille maison laisse les liens se replier, ce qui desaligne le soulignement. */
.nav-links > a{white-space:nowrap}
@media(max-width:1020px) and (min-width:821px){.nav-links{gap:1.25rem;font-size:.79rem}}

/* --- published vintages, read from the public tier ------------------- */
/* Encre du texte et non l'accent : l'accent tombe a 2,39:1 sur le fond clair,
   sous le plancher AA de 4,5:1 pour du petit texte. Ces lignes portent des
   chiffres --- une plausibilite, un horizon --- pas de la decoration. */
/* `.tile p` porte deja une couleur : sans la tuile dans le selecteur, la regle
   perd en specificite et la ligne de chiffres retombe en gris de second plan. */
.tile .rel-facts{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text);margin:.2rem 0 .9rem}
.rel-src{font-size:.86rem;color:var(--muted);line-height:1.6;margin:0 0 .5rem}
.rel-src strong{color:var(--text);font-weight:500}
/* Une empreinte se recopie : elle doit se lire. `--dim` vaut 2,71:1 en clair. */
.rel-fp{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:1rem 0 0}
.rel-notice{border-left:2px solid var(--accent);padding:.7rem 1rem;margin-top:1.6rem;font-size:.9rem;color:var(--muted);line-height:1.7}
.rel-count{margin-top:1.2rem;font-size:.86rem}
/* La mise en garde du modele est la derniere chose a rendre illisible. */
.viz-reading{margin:.9rem 0 0;font-size:.84rem;line-height:1.7;color:var(--muted)}