/* ============================================================================
   CapBudget — Composants réutilisables
   (boutons, champs, cartes, barres de comparaison, tableaux, encadrés,
    accordéon « 3 niveaux » — ce dernier est un socle pour la Partie 3 future)
   ========================================================================== */

/* ---------------------------------- Boutons -------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: var(--taille-sm);
  font-weight: 500;
  line-height: 1.2;
  padding: 10px 18px;
  border-radius: var(--rayon-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.bouton--primaire {
  background: var(--accent);
  color: var(--texte-sur-accent);
}
.bouton--primaire:hover { background: var(--accent-fonce); color: var(--texte-sur-accent); }
.bouton--secondaire {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--bordure-forte);
}
.bouton--secondaire:hover { border-color: var(--accent); }
.bouton--discret {
  background: transparent;
  color: var(--texte-secondaire);
  border-color: var(--bordure);
  padding: 8px 14px;
}
.bouton--discret:hover { color: var(--texte); border-color: var(--bordure-forte); }
.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.bouton--danger {
  background: transparent;
  color: var(--alerte);
  border-color: var(--alerte);
}
.bouton--danger:hover { background: var(--alerte-doux); }

/* --------------------------------- Cartes --------------------------------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: var(--esp-3);
  box-shadow: var(--ombre-carte);
}
.carte + .carte { margin-top: var(--esp-3); }
.carte__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  margin-bottom: var(--esp-2);
}

/* Catégorie de dépenses repliable */
details.carte--categorie { margin-top: var(--esp-2); }
details.carte--categorie > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
details.carte--categorie[open] > summary { margin-bottom: var(--esp-2); }
details.carte--categorie > summary::-webkit-details-marker { display: none; }
details.carte--categorie > summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--texte-secondaire);
  border-bottom: 2px solid var(--texte-secondaire);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex: none;
}
details.carte--categorie[open] > summary::before { transform: rotate(45deg); }

/* ------------------------- Grille de boutons d'accueil -------------------- */
.grille-entree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}
.bloc-entree {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: var(--esp-3);
  text-decoration: none;
  color: var(--texte);
  box-shadow: var(--ombre-carte);
}
.bloc-entree:hover { border-color: var(--accent); color: var(--texte); }
.bloc-entree__titre {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--taille-lg);
  color: var(--accent);
}
.bloc-entree__desc { font-size: var(--taille-sm); color: var(--texte-secondaire); }
.bloc-entree--bientot {
  opacity: 0.75;
  cursor: default;
  pointer-events: none;
}
.etiquette-bientot {
  align-self: flex-start;
  font-size: var(--taille-xs);
  font-weight: 600;
  color: var(--texte-secondaire);
  background: var(--surface-alt);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 2px 10px;
  margin-top: var(--esp-1);
}

/* -------------------------------- Formulaires ---------------------------- */
.resultat-projet-texte {
  margin-top: var(--esp-1);
  font-weight: 600;
  color: var(--texte-secondaire);
}
.resultat-projet-texte--positif { color: var(--positif); }

.champ { margin-bottom: var(--esp-2); }
.champ > label,
.champ__label {
  display: block;
  font-size: var(--taille-sm);
  font-weight: 500;
  margin-bottom: 4px;
}
.champ__aide {
  display: block;
  font-size: var(--taille-xs);
  color: var(--texte-discret);
  margin-top: 4px;
}
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--taille-md);
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-sm);
  padding: 9px 12px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--contour-focus);
  outline-offset: 1px;
  border-color: var(--accent);
}
.champ-ligne {
  display: grid;
  grid-template-columns: 1fr 130px 150px auto;
  gap: var(--esp-1);
  align-items: end;
}
/* Lignes de dépense : nom/libellé, montant, fréquence, type, estimation */
.champ-ligne--depense {
  grid-template-columns: minmax(120px, 1.4fr) 92px 132px 108px auto;
}
.champ-ligne--depense select { min-width: 0; }
@media (max-width: 820px) {
  .champ-ligne { grid-template-columns: 1fr 1fr; }
  .champ-ligne--depense { grid-template-columns: 1fr 1fr; }
  .champ-ligne--depense > .champ__label { grid-column: 1 / -1; }
}
.champ-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.champ-inline input[type="checkbox"] { width: auto; }

fieldset {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: var(--esp-3);
  margin-bottom: var(--esp-3);
}
/* Sur petit écran, on réduit l'empilement de marges intérieures
   (enveloppe + fieldset + carte) pour laisser de la place aux champs. */
@media (max-width: 620px) {
  fieldset { padding: var(--esp-2) 10px; }
  .carte { padding: var(--esp-2); }
  #categories .carte--categorie { padding: 10px; }
}
legend {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--taille-lg);
  padding-inline: 8px;
}

.groupe-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}
.groupe-radio label {
  border: 1px solid var(--bordure-forte);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--taille-sm);
  cursor: pointer;
}
.groupe-radio input { position: absolute; opacity: 0; }
.groupe-radio input:checked + span,
.groupe-radio label:has(input:checked) {
  background: var(--accent);
  color: var(--texte-sur-accent);
  border-color: var(--accent);
}

/* ---------------------- Sélecteur de mois (fréquences) ------------------ */
.zone-mois {
  margin-top: var(--esp-1);
  padding: var(--esp-1) 0 0;
}
.mois-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}
.mois-picker button {
  width: 30px;
  height: 30px;
  font-family: inherit;
  font-size: var(--taille-xs);
  border: 1px solid var(--bordure-forte);
  background: var(--surface);
  color: var(--texte-secondaire);
  border-radius: var(--rayon-sm);
  cursor: pointer;
  padding: 0;
}
.mois-picker button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--texte-sur-accent);
  border-color: var(--accent);
}

/* --------------------- Graphe « budget mois par mois » ----------------- */
.graphe-mensuel,
.graphe-dette {
  width: 100%;
  height: auto;
  background: var(--surface-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  margin-block: var(--esp-2);
}
.graphe-mensuel .axe,
.graphe-dette .axe { stroke: var(--bordure-forte); stroke-width: 1; }
.graphe-mensuel text,
.graphe-dette text { fill: var(--texte-discret); font-size: 11px; font-family: var(--police-texte); }

#dettes .carte + .carte { margin-top: var(--esp-3); }
#dettes [data-dette-graphe]:empty { display: none; }

/* ------------- Ligne compacte « revenus par mois » (résultats) --------- */
.ligne-mois-revenus {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  margin-top: var(--esp-1);
}
.ligne-mois-revenus__mois {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: var(--rayon-sm);
  background: var(--surface-alt);
  font-size: var(--taille-xs);
  text-align: center;
}
.ligne-mois-revenus__mois span { color: var(--texte-discret); }
.ligne-mois-revenus__mois strong { font-weight: 600; overflow-wrap: anywhere; }
/* Mois où un revenu supplémentaire tombe : ressort par rapport aux mois "normaux". */
.ligne-mois-revenus__mois--supplement {
  background: var(--positif);
}
.ligne-mois-revenus__mois--supplement span { color: var(--texte-sur-accent); opacity: 0.75; }
.ligne-mois-revenus__mois--supplement strong { color: var(--texte-sur-accent); }
@media (max-width: 620px) {
  .ligne-mois-revenus { grid-template-columns: repeat(6, 1fr); }
}
.graphe-revenus-mensuel {
  width: 100%;
  height: auto;
  background: var(--surface-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  margin-block: var(--esp-1) var(--esp-2);
}
.graphe-revenus-mensuel text { fill: var(--texte-discret); font-size: 11px; font-family: var(--police-texte); }
#dettes [data-dette-resultats]:empty { display: none; }

tr.ligne-negative td { color: var(--alerte); }
tr.ligne-negative td:last-child { font-weight: 600; }

/* --------------------------- Lignes de dépenses -------------------------- */
.liste-lignes { list-style: none; margin: 0; padding: 0; }
.ligne-depense {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  padding: var(--esp-2);
  margin-bottom: var(--esp-1);
  background: var(--surface-alt);
}
.ligne-depense__actions {
  display: flex;
  gap: var(--esp-1);
  margin-top: var(--esp-1);
}
.ligne-depense__actions button {
  font-size: var(--taille-xs);
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  padding: 4px 10px;
  cursor: pointer;
  color: var(--texte-secondaire);
  font-family: inherit;
}
.ligne-depense__actions button:hover { color: var(--texte); border-color: var(--bordure-forte); }

/* ------------------------------- Résultats ------------------------------- */
.etiquette-groupe-resultats {
  font-size: var(--taille-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-discret);
  margin: var(--esp-4) 0 var(--esp-1);
}
.etiquette-groupe-resultats:first-child { margin-top: 0; }
.grille-resultats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--esp-2);
}
/* Les 5 cartes « Paiements » restent groupées côte à côte (jamais une seule
   isolée sur sa propre ligne) dès qu'il y a la place ; en dessous, la grille
   normale reprend la main et les cartes s'empilent proprement. */
.grille-resultats--cinq { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Colonnes étroites (5 cartes) : le mensuel/annuel passe en libellé au-dessus de
   la valeur plutôt que côte à côte, à toute largeur, pour ne jamais couper un
   montant ni faire déborder la carte. */
.grille-resultats--cinq .stat__sous { flex-direction: column; align-items: flex-start; gap: 0; }
.grille-resultats--cinq .stat__sous-label { width: auto; }
@media (min-width: 860px) {
  .grille-resultats--cinq { grid-template-columns: repeat(5, 1fr); }
}
.stat {
  background: var(--surface-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  padding: var(--esp-2);
}
.stat__label { font-size: var(--taille-xs); color: var(--texte-secondaire); }
.stat__valeur {
  font-family: var(--police-mono);
  font-size: var(--taille-xl);
  font-weight: 500;
  margin-top: 4px;
}
.stat__aide {
  font-size: var(--taille-xs);
  color: var(--texte-discret);
  line-height: 1.4;
  margin-top: 6px;
}
.stat--positif .stat__valeur { color: var(--positif); }
.stat--alerte { border-color: var(--alerte); background: var(--alerte-doux); }
.stat--alerte .stat__valeur { color: var(--alerte); }

/* Carte à deux valeurs (mensuel / annuel) dans les résultats du budget.
   Sur deux lignes empilées (pas côte à côte) : un montant + son unité ne se
   sépare jamais, même dans une carte étroite. */
.stat__deux-valeurs { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.stat__sous { display: flex; align-items: baseline; gap: 6px; }
.stat__sous-label {
  flex-shrink: 0;
  width: 4.5em;
  font-size: var(--taille-xs);
  color: var(--texte-discret);
}
.stat__sous-valeur {
  font-family: var(--police-mono);
  font-size: var(--taille-lg);
  font-weight: 500;
  white-space: nowrap;
}
.stat--positif .stat__sous-valeur { color: var(--positif); }
.stat--alerte .stat__sous-valeur { color: var(--alerte); }
/* Troisième valeur (« sans revenus supplémentaires ») : même poids visuel que
   le mensuel / l'annuel, séparée par un filet. */
.stat__sous--extra { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--bordure); }

/* Ratio d'endettement : bandeau pleine largeur, chiffre à côté du texte. */
.ligne-ratio-endettement {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  background: var(--surface-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  padding: var(--esp-2) var(--esp-3);
  margin-top: var(--esp-2);
}
.ligne-ratio-endettement__valeur {
  font-family: var(--police-mono);
  font-size: var(--taille-xl);
  font-weight: 500;
  flex-shrink: 0;
}
.ligne-ratio-endettement__texte { font-size: var(--taille-sm); color: var(--texte-secondaire); }
.ligne-ratio-endettement--alerte { border-color: var(--alerte); background: var(--alerte-doux); }
.ligne-ratio-endettement--alerte .ligne-ratio-endettement__valeur { color: var(--alerte); }
@media (max-width: 620px) {
  .ligne-ratio-endettement { flex-direction: column; align-items: flex-start; gap: var(--esp-1); }
}

/* -------------------- Barres de comparaison 50/30/20 -------------------- */
.comparaison { margin-top: var(--esp-3); }
.barre-groupe { margin-bottom: var(--esp-3); }
.barre-groupe__entete {
  display: flex;
  justify-content: space-between;
  font-size: var(--taille-sm);
  margin-bottom: 4px;
}
.barre {
  position: relative;
  height: 26px;
  background: var(--surface-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  overflow: hidden;
}
.barre__remplissage {
  height: 100%;
  transition: width 0.4s ease;
}
.barre__remplissage--besoins { background: var(--part-besoins); }
.barre__remplissage--envies { background: var(--part-envies); }
.barre__remplissage--epargne { background: var(--part-epargne); }
.barre__remplissage--nonclasse { background: var(--part-nonclasse); }
.barre__repere {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--repere-trait);
}
.barre__repere::after {
  content: attr(data-libelle);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--texte-secondaire);
  white-space: nowrap;
}
.legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  font-size: var(--taille-xs);
  color: var(--texte-secondaire);
  margin-top: var(--esp-1);
}
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
}

/* ------------------------------- Tableaux ------------------------------- */
.tableau-enveloppe { overflow-x: auto; }
table.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--taille-sm);
}
.tableau th,
.tableau td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bordure);
}
.tableau th { font-weight: 600; color: var(--texte-secondaire); }
.tableau tbody tr:last-child td { border-bottom: 0; }

/* ------------- Tableau détaillé mois par mois (double entrée) ----------
   14 colonnes de vrais montants : en dessous d'une certaine largeur, aucune mise
   en page ne les rend à la fois lisibles ET sans défilement — sur petit écran on
   garde donc un tableau à largeur naturelle, lisible, qui défile horizontalement
   dans son propre cadre (le reste de la page ne bouge pas). À partir d'une
   largeur suffisante (~ la largeur « app » du site), le tableau prend exactement
   la largeur du graphe au-dessus, sans défilement du tout. */
table.tableau--ledger { font-size: var(--taille-xs); white-space: nowrap; }
.tableau--ledger th,
.tableau--ledger td { padding: 5px 8px; text-align: right; }
.tableau--ledger th:first-child,
.tableau--ledger td:first-child { text-align: left; white-space: normal; min-width: 140px; }
@media (min-width: 960px) {
  table.tableau--ledger { table-layout: fixed; width: 100%; white-space: normal; }
  .tableau--ledger th,
  .tableau--ledger td { padding: 5px 4px; overflow-wrap: break-word; }
  .tableau--ledger th:first-child,
  .tableau--ledger td:first-child { min-width: 0; }
  .tableau--ledger col.colonne-poste { width: 16%; }
  .tableau--ledger col.colonne-mois { width: 6.17%; }
  .tableau--ledger col.colonne-total { width: 10%; }
}
.tableau--ledger tr.ligne-groupe td {
  text-align: left;
  color: var(--texte-secondaire);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--bordure-forte);
  padding: 0;
}
.bouton-categorie {
  display: block;
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 10px 8px;
}
.bouton-categorie:hover { color: var(--texte); }
.bouton-categorie__fleche { display: inline-block; width: 1em; color: var(--texte-discret); }
.tableau--ledger tr.ligne-depense-detail td:first-child { padding-left: 26px; color: var(--texte-secondaire); }
.tableau--ledger tr.ligne-sous-total td { font-weight: 600; font-style: italic; border-top: 1px dashed var(--bordure-forte); }
.tableau--ledger tr.ligne-revenu td:first-child { border-left: 3px solid var(--positif); padding-left: 6px; }
.tableau--ledger tr.ligne-total td { font-weight: 600; border-top: 2px solid var(--bordure-forte); }
.tableau--ledger tr.ligne-total--reste td { background: var(--accent-doux); }
.tableau--ledger td.cellule-negative { color: var(--alerte); font-weight: 600; }

/* ------------------- Encadrés (info / alerte / pédago) ----------------- */
.encadre {
  border-left: 3px solid var(--accent);
  background: var(--accent-doux);
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  padding: var(--esp-2) var(--esp-3);
  margin-block: var(--esp-2);
  font-size: var(--taille-sm);
}
.encadre--alerte {
  border-left-color: var(--alerte);
  background: var(--alerte-doux);
}
.encadre--neutre {
  border-left-color: var(--bordure-forte);
  background: var(--surface-alt);
}
.encadre--positif {
  border-left-color: var(--positif);
  background: var(--positif-doux);
}

/* Encadré pédagogique + accordéon « 3 niveaux » :
   socle réutilisable pour les articles de la Partie 3 (non développée en V1). */
.encadre-peda {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: var(--esp-3);
  background: var(--surface);
}
.accordeon-niveaux { display: flex; flex-direction: column; gap: var(--esp-1); }
.accordeon-niveaux details {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  padding: var(--esp-2);
  background: var(--surface-alt);
}
.accordeon-niveaux summary {
  font-weight: 600;
  cursor: pointer;
}

/* ------------------------------ Barre d'outils ------------------------- */
.barre-outils {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  padding: var(--esp-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface-alt);
  margin-block: var(--esp-3);
}

/* ------------------------- Graphique d'épargne (SVG) ------------------- */
.graphe-epargne {
  width: 100%;
  height: auto;
  background: var(--surface-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.graphe-epargne .aire-versee { fill: var(--part-nonclasse); opacity: 0.5; }
.graphe-epargne .aire-totale { fill: var(--positif); opacity: 0.25; }
.graphe-epargne .courbe-totale { fill: none; stroke: var(--positif); stroke-width: 2.5; }
.graphe-epargne .courbe-versee { fill: none; stroke: var(--texte-secondaire); stroke-width: 1.5; stroke-dasharray: 4 3; }
.graphe-epargne .axe { stroke: var(--bordure-forte); stroke-width: 1; }
.graphe-epargne text { fill: var(--texte-discret); font-size: 11px; font-family: var(--police-texte); }

/* ------------------------------ Messages ------------------------------ */
.message-erreur {
  color: var(--alerte);
  font-size: var(--taille-xs);
  margin-top: 4px;
}
input[aria-invalid="true"],
select[aria-invalid="true"] { border-color: var(--alerte); }

.pastille-info {
  font-size: var(--taille-xs);
  color: var(--texte-discret);
  font-style: italic;
}

/* ------------------------------ Glossaire --------------------------- */
.glossaire-outils {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
  margin-bottom: var(--esp-3);
}
.glossaire-lettres {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.glossaire-lettres button {
  font-family: inherit;
  font-size: var(--taille-xs);
  min-width: 28px;
  padding: 4px 6px;
  border: 1px solid var(--bordure);
  background: var(--surface);
  color: var(--texte-secondaire);
  border-radius: var(--rayon-sm);
  cursor: pointer;
}
.glossaire-lettres button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--texte-sur-accent);
  border-color: var(--accent);
}
.glossaire-lettres button:disabled { opacity: 0.35; cursor: default; }

.glossaire-liste { list-style: none; margin: 0; padding: 0; }
.glossaire-terme {
  border-bottom: 1px solid var(--bordure);
  padding: var(--esp-2) 0;
}
.glossaire-terme dt {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--taille-lg);
  margin-bottom: 4px;
}
.glossaire-terme dd { margin: 0; color: var(--texte-secondaire); }
.glossaire-terme .liens-croises {
  margin-top: 6px;
  font-size: var(--taille-xs);
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

/* ------------------------------ Articles --------------------------- */
.fil-ariane {
  font-size: var(--taille-xs);
  color: var(--texte-discret);
  margin-bottom: var(--esp-3);
}
.fil-ariane a { color: var(--texte-discret); }

.article-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--esp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-liste a {
  display: block;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: var(--esp-2);
  text-decoration: none;
  color: var(--texte);
  background: var(--surface);
}
.article-liste a:hover { border-color: var(--accent); }
.article-liste .num { font-size: var(--taille-xs); color: var(--texte-discret); }
.article-liste .titre { font-family: var(--police-titre); font-weight: 600; display: block; margin-top: 2px; }

.article-niveau { margin-bottom: var(--esp-3); }
.article-niveau > h2 {
  font-size: var(--taille-xl);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--bordure);
}
.article-niveau dl { margin: var(--esp-2) 0; }
.article-niveau dt { font-weight: 600; margin-top: var(--esp-2); }
.article-niveau dd { margin: 0 0 var(--esp-1); color: var(--texte-secondaire); }

/* -------------------------------- Quiz ---------------------------- */
.quiz-question { margin-bottom: var(--esp-4); }
.quiz-question__intitule { font-weight: 600; margin-bottom: var(--esp-2); }
.quiz-options { display: flex; flex-direction: column; gap: var(--esp-1); }
.quiz-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-sm);
  padding: 10px 14px;
  cursor: pointer;
  background: var(--surface);
}
.quiz-option input { margin-top: 3px; }
.quiz-option:hover { border-color: var(--accent); }
.quiz-option--correcte {
  border-color: var(--positif);
  background: var(--positif-doux);
}
.quiz-option--incorrecte {
  border-color: var(--alerte);
  background: var(--alerte-doux);
}
.quiz-explication {
  margin-top: var(--esp-1);
  font-size: var(--taille-sm);
  color: var(--texte-secondaire);
  border-left: 3px solid var(--bordure-forte);
  padding-left: var(--esp-2);
}
.quiz-score {
  font-family: var(--police-titre);
  font-size: var(--taille-2xl);
  margin-bottom: var(--esp-1);
}
.quiz-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--esp-2); list-style: none; margin: 0; padding: 0; }
.quiz-liste a {
  display: block; border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: var(--esp-3); text-decoration: none; color: var(--texte); background: var(--surface);
}
.quiz-liste a:hover { border-color: var(--accent); }
.quiz-liste .fait { font-size: var(--taille-xs); color: var(--positif); display: block; margin-top: 4px; }

/* --------------------------- Page arnaques ----------------------- */
.signal {
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--alerte);
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  padding: var(--esp-2) var(--esp-3);
  margin-bottom: var(--esp-1);
}
.signal strong { display: block; }
.signal span { color: var(--texte-secondaire); font-size: var(--taille-sm); }

/* --------------------- Navigation « autres simulateurs » -------------- */
.nav-simulateurs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  margin-bottom: var(--esp-3);
}
.nav-simulateurs a,
.nav-simulateurs span {
  font-size: var(--taille-sm);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  text-decoration: none;
  color: var(--texte-secondaire);
}
.nav-simulateurs a[aria-current="page"] {
  background: var(--accent);
  color: var(--texte-sur-accent);
  border-color: var(--accent);
}
.nav-simulateurs span { opacity: 0.55; }

/* --------------------------- Emplacement publicité ------------------------
   Composant prêt à l'emploi, non encore utilisé (aucun emplacement d'annonce
   n'est placé dans les pages). Structure prévue :
     <aside class="zone-annonce" aria-label="Publicité">
       <span class="zone-annonce__etiquette">Publicité</span>
       <div class="zone-annonce__slot"><!-- <ins class="adsbygoogle" …> --></div>
     </aside>
   À placer uniquement entre deux blocs de contenu, jamais à l'intérieur d'une
   zone de saisie ni collé à un résultat de simulateur. La hauteur minimale
   réserve la place pour limiter les décalages de mise en page (CLS). */
.zone-annonce {
  display: block;
  margin: var(--esp-4) 0;
  padding: var(--esp-1);
  border: 1px dashed var(--bordure-forte);
  border-radius: var(--rayon-sm);
  background: var(--fond-alt);
  text-align: center;
  overflow: hidden;
}
.zone-annonce__etiquette {
  display: block;
  font-family: var(--police-texte);
  font-size: var(--taille-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-discret);
  margin-bottom: 6px;
}
.zone-annonce__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;              /* réserve d'espace — évite le saut de page */
  max-width: 100%;
}
.zone-annonce__slot > * { max-width: 100%; }
@media (min-width: 768px) {
  .zone-annonce__slot { min-height: 250px; }
}