/**
 * SloWealth — Composants partagés (app.css)
 *
 * Règles strictement identiques sur au moins deux pages, extraites des blocs
 * <style> inline. Ne contient QUE des règles dont le corps était rigoureusement
 * le même partout, et dont aucune classe n'était utilisée sur une page qui ne la
 * définissait pas (sinon la globalisation aurait stylé des éléments jusque-là nus).
 *
 * Ordre de chargement : shared.css (tokens) → app.css (composants) → <style> de page.
 * Les surcharges propres à une page restent donc inline et l'emportent.
 *
 * Généré à partir de retraite.html pour préserver l'ordre relatif des règles.
 *
 * L'inverse aussi appartient ici : une classe EMPLOYÉE sur plusieurs pages et
 * DÉFINIE sur une seule. C'est le défaut que cette précaution ne voyait pas —
 * `.alert-band` n'était défini que sur deux outils, et « Mon épargne » affichait
 * son bandeau « périmé » en permanence ; `.src-*` idem, et son bloc « D'où vient ce
 * chiffre » sortait en liste à puces brute. `render_check.js` refuse désormais une
 * classe sans aucune règle de style.
 */

.hero-divider{background:var(--ink-3);align-self:stretch}
/* Décomposition en barres de la couche 2 : libellé, barre, montant. « Ma retraite »
   (AVS / LPP / 3a) et « Mon épargne » (versements / gains) — même dessin, donc même
   règle, ici et pas dans l’une des deux pages. */
.hero-decomp{display:flex;flex-direction:column;gap:.6rem}
.decomp-row{display:flex;align-items:center;gap:.65rem}
.decomp-label{font-size:.65rem;color:var(--on-ink-dim);width:32px;flex-shrink:0;text-align:right}
.decomp-bar-wrap{flex:1;background:var(--ink-3);border-radius:4px;height:8px;overflow:hidden}
.decomp-bar{height:100%;border-radius:4px;transition:width .5s ease}
.decomp-val{font-family:'DM Mono',monospace;font-size:.72rem;color:#e8e4db;width:72px;text-align:right;flex-shrink:0}
.decomp-note{font-size:.62rem;color:var(--on-ink-dim);line-height:1.4;margin-top:.15rem;padding-left:calc(32px + .65rem)}
.detail-inner{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;border-top:1px solid var(--paper-3)}
/* ── Bandes d'alerte des trois outils — cachées tant que le code ne les montre pas ── */
.alert-band{display:none;padding:.75rem 1rem;border-radius:10px;font-size:.78rem;font-weight:500;align-items:flex-start;gap:.6rem;line-height:1.5}
.alert-band.show{display:flex}
.alert-band.warn{background:var(--amber-light);color:#7d4b0a;border:1px solid rgba(230,126,34,.25)}
.alert-band.info{background:var(--blue-light);color:#1a5276;border:1px solid rgba(41,128,185,.2)}
.alert-band.danger{background:var(--red-light);color:var(--red);border:1px solid rgba(192,57,43,.2)}
/* ── Message d'état : « Mon budget », et « Ma retraite » quand l'âge est atteint ── */
.status-banner{padding:.7rem 1rem;border-radius:10px;font-size:.78rem;font-weight:500;display:flex;align-items:center;gap:.6rem;transition:all .3s}
.status-banner.ok{background:var(--green-light);color:var(--green-mid);border:1px solid rgba(45,158,107,.2)}
.status-banner.warn{background:var(--amber-light);color:#a05c14;border:1px solid rgba(230,126,34,.2)}
.status-banner.danger{background:var(--red-light);color:var(--red);border:1px solid rgba(192,57,43,.2)}
/* ── Bloc « D'où vient ce chiffre » des trois outils ── */
.src-title{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:.5rem}
.src-list{list-style:none;display:flex;flex-direction:column;gap:.4rem;font-size:.78rem;line-height:1.55;color:var(--ink)}
.src-list li{padding-left:.9rem;position:relative}
.src-list li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.src-links{display:flex;flex-wrap:wrap;gap:.5rem}
.src-links a{font-size:.75rem;color:var(--gold-text);text-decoration:none;border:1px solid var(--paper-3);border-radius:20px;padding:.35rem .8rem;transition:border-color .2s}
.src-links a:hover{border-color:var(--gold-text);text-decoration:underline}
/* ── Questions fréquentes en pied d'outil ── */
.faq-section{max-width:760px;margin:2rem auto;padding:0 2rem 2rem}
.alert-icon{font-size:1rem;flex-shrink:0;margin-top:.1rem}
.ctrl-card{background:#fff;border:1px solid var(--paper-3);border-radius:14px;padding:1.5rem 1.75rem}
.ctrl-title{font-family:'Syne',sans-serif;font-size:.82rem;font-weight:600;color:var(--ink-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.1rem;display:flex;align-items:center;justify-content:space-between}
/* ── Alignement des champs de la couche 1 ──────────────────────────────────────
   Chaque champ empile quatre éléments : le libellé, la ligne « pourquoi on
   demande ça », la saisie, puis l'indice. Cette deuxième ligne tient sur une ou
   deux lignes selon la longueur du texte — et comme chaque champ se disposait
   indépendamment, les cases de saisie d'une même rangée se retrouvaient décalées
   d'environ 14 px. C'était le cas sur les **trois** outils, dans chaque rangée.

   `subgrid` règle cela à la racine : le champ n'invente plus sa propre hauteur,
   il emprunte les quatre lignes de la grille parente, que tous les champs de la
   rangée partagent. Libellés, saisies et indices tombent donc au même niveau,
   quelle que soit la longueur des textes — y compris après traduction, où
   l'allemand allonge à peu près tout.

   `row-gap:0` sur le champ annule l'écart entre SES quatre lignes ; la grille
   garde le sien entre les rangées. Sans `@supports`, un navigateur sans subgrid
   perdrait l'alignement : la hauteur minimale de deux lignes sur `.ctrl-why` lui
   donne le cas courant, qui couvre tout ce que le site affiche aujourd'hui. */
.ctrl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ctrl-why{font-size:.66rem;font-weight:400;line-height:1.4;color:var(--ink-muted);text-transform:none;letter-spacing:0;margin:-.1rem 0 .45rem;min-height:2.8em}
.ctrl-field{display:block}

@supports (grid-template-rows: subgrid) {
  /* On vise les enfants DIRECTS de la grille, pas `.ctrl-field` : `hypotheque.html`
     enveloppe ses champs dans des <div> nus, et la mise en page appartient de toute
     façon à la grille, pas à une classe qu'une page peut oublier de poser. */
  .ctrl-grid > *{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
  .ctrl-why{min-height:0}
}
.ctrl-label{font-size:.67rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:.35rem;display:flex;align-items:center;gap:4px}
.ctrl-input-wrap{position:relative}
.ctrl-input-wrap input::-webkit-inner-spin-button,.ctrl-input-wrap input::-webkit-outer-spin-button{-webkit-appearance:none}
.ctrl-unit{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);font-size:.63rem;color:var(--ink-muted);font-family:'DM Mono',monospace;pointer-events:none}
.ctrl-toggle-group{display:flex;background:var(--paper-2);border-radius:8px;padding:3px;gap:2px;margin-top:.4rem}
.opt-accordion{background:#fff;border:1px solid var(--paper-3);border-radius:14px;overflow:hidden}
.opt-acc-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;cursor:pointer;user-select:none;transition:background .15s}
.opt-acc-header:hover{background:var(--paper)}
.opt-acc-title{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:600}
.opt-acc-sub{font-size:.7rem;color:var(--ink-muted);margin-top:.1rem}
.opt-acc-chevron{width:18px;height:18px;color:var(--ink-muted);transition:transform .25s;flex-shrink:0}
.opt-open .opt-acc-chevron{transform:rotate(180deg)}
.opt-field{display:block}
.opt-label{font-size:.66rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:.3rem;display:flex;align-items:center;gap:4px}
.opt-input-wrap{position:relative}
.opt-input-wrap input::-webkit-inner-spin-button,.opt-input-wrap input::-webkit-outer-spin-button{-webkit-appearance:none}
.opt-unit{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);font-size:.62rem;color:var(--ink-muted);font-family:'DM Mono',monospace;pointer-events:none}
/* ── Les champs de saisie ────────────────────────────────────────────────────
   Ces règles vivaient en TROIS exemplaires, recopiées dans les trois outils, et
   elles avaient déjà divergé : `hypotheque.html` avait perdu `appearance:textfield`,
   `investissement.html` les deux règles de <select>.

   Elles décrivaient un champ qu'on ne voyait pas. Mesuré sur le rendu, la limite
   visuelle valait 1,00:1 dans les paramètres avancés — le champ et le sous-groupe
   portaient la MÊME couleur — et 1,32:1 en couche 1, contre 3:1 exigés par WCAG
   1.4.11. Le détail des mesures est dans `shared.css`, au-dessus de `--field-line`.

   La règle retenue : **le champ prend le ton inverse de son support.** Le
   conteneur annonce ce ton dans `--field-bg` ; le champ s'y conforme sans avoir
   à savoir où il est posé. Sur la carte blanche de la couche 1 il reste sur
   `--paper` ; dans le sous-groupe teinté des paramètres avancés il passe au blanc. */
.opt-group{--field-bg:#fff}

.ctrl-input-wrap input[type=number],.ctrl-input-wrap input[type=text],.ctrl-input-wrap select,
.opt-input-wrap input[type=number],.opt-input-wrap input[type=text],.opt-input-wrap select{
  width:100%;background:var(--field-bg);border-style:solid;border-color:var(--field-line);
  color:var(--ink);outline:none;transition:border-color .18s,box-shadow .18s}
.ctrl-input-wrap input[type=number],.ctrl-input-wrap input[type=text],
.opt-input-wrap input[type=number],.opt-input-wrap input[type=text]{
  font-family:'DM Mono',monospace;-moz-appearance:textfield;appearance:textfield}
.ctrl-input-wrap select,.opt-input-wrap select{font-family:'DM Sans',sans-serif;cursor:pointer;appearance:none}

/* Couche 1 : la question posée à l'utilisateur — plus grande que le réglage. */
.ctrl-input-wrap input[type=number],.ctrl-input-wrap input[type=text]{border-width:1.5px;font-size:1rem;padding:.6rem 2.6rem .6rem .85rem;border-radius:8px}
.ctrl-input-wrap select{border-width:1.5px;font-size:.9rem;padding:.58rem .85rem;border-radius:8px}
/* Paramètres avancés : plus compact, jusqu'à 19 champs dans un même panneau. */
.opt-input-wrap input[type=number],.opt-input-wrap input[type=text]{border-width:1px;font-size:.9rem;padding:.48rem 2.4rem .48rem .75rem;border-radius:7px}
.opt-input-wrap select{border-width:1px;font-size:.85rem;padding:.46rem .75rem;border-radius:7px}

/* Focus : `--gold-text` vaut 5,43:1 sur `--paper` et 6,02:1 sur blanc, là où
   `--gold` plafonnait à 2,07:1. Le halo redonne au clavier ce que `outline:none`
   lui avait retiré. */
.ctrl-input-wrap input:focus,.ctrl-input-wrap select:focus,
.opt-input-wrap input:focus,.opt-input-wrap select:focus{
  border-color:var(--gold-text);box-shadow:0 0 0 3px rgba(116,97,44,.18)}
.opt-hint-btn{color:var(--gold-text);background:none;border:none;cursor:pointer;font-size:.6rem;text-decoration:underline;font-family:'DM Sans',sans-serif;padding:0}
.opt-toggle-lbl{font-size:.74rem;color:var(--ink);font-weight:500}
.opt-toggle-sub{font-size:.62rem;color:var(--ink-muted)}
.toggle-slider{position:absolute;inset:0;background:var(--ink-3);border-radius:20px;cursor:pointer;transition:background .2s}
.toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s}
.computed-label{font-size:.65rem;color:var(--ink-muted)}
.computed-value{font-family:'DM Mono',monospace;font-size:.82rem;color:var(--gold-text)}
.stats-4{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.chart-subtitle{font-size:.7rem;color:var(--ink-muted);margin-top:.15rem}
.chart-legend-item{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--ink-muted)}
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.pill-green{background:var(--green-light);color:var(--green-mid)}
.pill-red{background:var(--red-light);color:var(--red-text)}
.pill-amber{background:var(--amber-light);color:var(--amber-text)}
.accordeon{background:#fff;border:1px solid var(--paper-3);border-radius:12px;overflow:hidden}
.acc-item{border-bottom:1px solid var(--paper-2)}
.acc-item:last-child{border-bottom:none}
.acc-left{display:flex;align-items:center;gap:.65rem}
.acc-emoji{font-size:1rem}
.acc-content{padding:.75rem 1.25rem 1.1rem 3rem;font-size:.77rem;color:var(--ink-muted);line-height:1.7}
.acc-content strong{color:var(--ink)}
.acc-content p+p{margin-top:.6rem}
/* ── « Comprendre le calcul → » ──────────────────────────────────────────────
   Le lien qui remplace la pédagogie dans un outil. Chaque outil portait des
   accordéons qui répétaient son guide mot pour mot : cinq sur « Ma retraite »,
   quatre sur « Mon logement ». L'outil calcule, le guide explique — et un
   lecteur qui veut comprendre a une destination, pas cinq chevrons alignés.
   Contraste : texte sur --paper-2, au-dessus de 4.5:1 dans les deux états. */
.understand-link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.25rem;margin:.75rem 0;
  background:var(--paper-2);border:1px solid var(--paper-3);
  border-radius:var(--radius-lg);text-decoration:none;
  transition:border-color .18s,background .18s;
}
.understand-link:hover{background:var(--paper);border-color:var(--gold)}
.understand-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.understand-title{font-size:.86rem;font-weight:600;color:var(--ink)}
.understand-sub{font-size:.76rem;color:var(--ink-muted);line-height:1.55}
.understand-link svg{width:18px;height:18px;color:var(--gold-dim);flex-shrink:0}

.link-row{display:flex;gap:.65rem;flex-wrap:wrap}
.profile-sync-bar span{color:var(--gold-text)}
.profile-sync-bar button{padding:.35rem .85rem;background:var(--gold);color:#fff;border:none;border-radius:6px;font-size:.72rem;font-family:'DM Sans',sans-serif;cursor:pointer;font-weight:500}
.type-cards-row{display:flex;flex-direction:column;gap:4px;margin-top:.2rem}
.type-card-small{display:flex;align-items:center;gap:8px;padding:.5rem .7rem;background:var(--paper);border:1.5px solid var(--paper-3);border-radius:7px;cursor:pointer;transition:all .18s}
.type-card-small .type-radio{width:12px;height:12px;border-radius:50%;border:2px solid var(--paper-3);flex-shrink:0;transition:all .18s;display:flex;align-items:center;justify-content:center}
.type-card-small .type-name{font-size:.74rem;font-weight:500;color:var(--ink);flex:1}
.type-card-small .type-rate{font-family:'DM Mono',monospace;font-size:.67rem}
.intro-hint-icon{color:var(--blue);flex-shrink:0;margin-top:1px}
.intro-hint-body{flex:1}
.intro-hint-link{display:inline-block;margin-top:.35rem;font-size:.72rem;color:var(--gold-text);text-decoration:none;font-weight:500}
.intro-hint-link:hover{color:var(--gold)}
/* `min-width`/`min-height` : la croix sortait à 17×16 px, sous le minimum de 24
   de WCAG 2.5.8. Le glyphe garde sa taille, c'est la cible du doigt qui grandit. */
.intro-hint-close{background:none;border:none;cursor:pointer;color:var(--ink-muted);font-size:1rem;line-height:1;padding:0 0 0 .5rem;align-self:flex-start;flex-shrink:0;min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
.stats-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.compare-band{background:#fff;border:1px solid var(--paper-3);border-radius:12px;padding:1.25rem 1.5rem}
.compare-row{display:flex;align-items:center;gap:.75rem;font-size:.8rem}
.compare-badge{font-family:'DM Mono',monospace;font-size:.68rem;padding:3px 9px;border-radius:20px;font-weight:500;white-space:nowrap}
.badge-green{background:var(--green-light);color:var(--green-text)}
.badge-neutral{background:var(--paper-2);color:var(--ink-muted)}
.compare-diff{font-family:'DM Mono',monospace;font-weight:500;margin-left:auto;font-size:.85rem;white-space:nowrap}
.compare-diff.neg{color:var(--red-text)}
.compare-diff.pos{color:var(--green-text)}
.pillar-num{ font-family:'DM Mono',monospace;font-size:.6rem;font-weight:500; letter-spacing:.08em;margin-bottom:.5rem}
.pillar-name{font-family:'Syne',sans-serif;font-size:.92rem;font-weight:700;margin-bottom:.3rem;color:#e8e4db}
.pillar-tag{ display:inline-block;font-size:.62rem;font-family:'DM Mono',monospace; padding:3px 8px;border-radius:4px;margin-top:.1rem; background:rgba(255,255,255,.04);color:var(--ink-muted)}
.pillar-note{ font-size:.75rem;color:var(--on-ink-dim);line-height:1.6; background:rgba(255,255,255,.03);border-left:2px solid var(--ink-3); padding:.6rem .85rem;border-radius:0 6px 6px 0;margin-top:1rem}
.ladder{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}
.ladder-item{ display:flex;align-items:center;gap:.85rem; background:var(--ink-2);border:1px solid var(--ink-3);border-radius:10px; padding:.85rem 1rem}
.ladder-num{ width:28px;height:28px;border-radius:8px;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-family:'DM Mono',monospace;font-size:.72rem;font-weight:500}
.ladder-item:nth-child(1) .ladder-num{background:rgba(192,57,43,.15);color:#e06b5a}
.ladder-item:nth-child(2) .ladder-num{background:rgba(230,126,34,.12);color:#e6943a}
.ladder-item:nth-child(3) .ladder-num{background:rgba(200,168,75,.12);color:var(--gold)}
.ladder-item:nth-child(4) .ladder-num{background:rgba(41,128,185,.1);color:#7ab8dc}
.ladder-body{}
.ladder-title{font-size:.85rem;font-weight:600;color:#e8e4db;margin-bottom:.15rem}
.ladder-desc{font-size:.75rem;color:var(--on-ink-dim);line-height:1.5}
.glossary{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.75rem}
.gloss-item{ background:var(--ink-2);border:1px solid var(--ink-3);border-radius:10px; padding:.9rem 1rem}
.cta-title{ font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:700; margin-bottom:.5rem;color:#e8e4db}
.cta-sub{font-size:.82rem;color:var(--on-ink-dim);margin-bottom:1.5rem;line-height:1.6}
.cta-reassurance{font-size:.72rem;color:var(--on-ink-faint);margin-top:1rem;line-height:1.5}
.prose strong{color:#e8e4db;font-weight:600}
.prose a:hover{border-bottom-color:var(--gold)}
.badge-blue{background:var(--blue-light);color:var(--blue-text)}
.badge-gray{background:var(--paper-2);color:var(--ink-muted)}

/* ── Nom de l'outil dans l'en-tête ──
   La porte d'entrée annonce « Ma retraite », « Mon épargne », « Mon logement » :
   la page d'arrivée le confirme.

   C'est aussi le <h1> de la page : les trois outils n'en avaient aucun — ni pour
   un moteur de recherche, ni pour un lecteur d'écran qui cherche le titre. Le nom
   de l'outil était déjà écrit là, il ne manquait que la balise. */
.page-brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.page-tool{
  font-family:'Syne',sans-serif;font-size:.95rem;font-weight:600;color:var(--on-ink);
  white-space:nowrap;
  margin:0;
}
/* Sous 520 px la place manque pour l'afficher — mais le masquer en `display:none`
   retirerait le seul <h1> de la page à un lecteur d'écran. On le sort de l'écran
   au lieu de le supprimer : invisible à l'œil, toujours annoncé à la voix. */
@media(max-width:520px){
  /* Le nom sorti de l'écran, `space-between` laisse la moitié gauche vide et
     pousse les commandes dans un coin. On les centre : la barre redevient
     délibérée au lieu de paraître amputée. */
  .page-header{justify-content:center}
  .page-tool{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
}

/* ── Réserve sous un résultat chiffré ──
   Identique au caractère près sur cinq pages ; elle vit ici désormais.
   parcours.html et veille.html gardent la leur, réellement différente (fond sombre). */
.disclaimer{font-size:.68rem;color:var(--ink-muted);line-height:1.65;padding:.85rem 1rem;background:var(--paper-2);border-radius:8px;border-left:3px solid var(--paper-3)}