/* ============================================================
   Routéo — styles de l'application
   Couleurs, polices, rayon, focus : css/charte.css, copie à l'identique de
   framework/templates/design-system/tokens.css (charte V7.3 « Blue Trust » : aucun texte ni bouton
   en dégradé, décision du dirigeant du 2026-11-09, A219).
   Ce fichier ne définit aucune couleur de marque : il n'utilise que les jetons de
   la charte, leurs mélanges et trois couleurs d'état propres à Routéo (§ 1).
   Composants repris de synergetik.ai (products/site/assets/css/site.css) : en-tête,
   boutons, bascules langue et thème, repères de section, appel final.
   ============================================================ */

/* ---------- 1. Mesures et couleurs d'état propres à Routéo ---------- */
:root {
  --space-3: 12px;
  --space-16: 64px;
  --gutter: clamp(16px, 4vw, 48px);
  --largeur: 76rem;
  --largeur-texte: 46rem;
  --hauteur-entete: 72px;
  --duree: 0.2s;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* États : adéquation (vert), fin de vie (rouge). Contrastes vérifiés dans les deux thèmes. */
  --croissance: #24744d;
  --croissance-texte: #08633d;
  --danger: #bd4238;
  --danger-texte: #b03d34;
  --danger-fond: #ffded9;
}
[data-theme="dark"] {
  --croissance: #5db384;
  --croissance-texte: #7bcba1;
  --danger: #e15247;
  --danger-texte: #f3685b;
  --danger-fond: #4b1e19;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --croissance: #5db384;
    --croissance-texte: #7bcba1;
    --danger: #e15247;
    --danger-texte: #f3685b;
    --danger-fond: #4b1e19;
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hauteur-entete) + var(--space-4)); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent-text); text-underline-offset: 3px; }
code { font-family: var(--font-mono); font-size: 0.85em; }
:focus-visible { outline: var(--focus-width) solid var(--accent-text); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gutter); }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-card);
  background: var(--accent); color: var(--ink-on-accent); font-weight: 700; text-decoration: none;
}
.lien-evitement:focus { top: var(--space-4); }
.idx { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.02em; }
.idx-accent { color: var(--accent-text); }

/* Mot d'accent d'un titre et valeur d'un repère chiffré : --accent-text, #0441dc en clair, #5a86f6 en
   sombre ; plus de texte en dégradé depuis la V7.3 (décision du dirigeant du 2026-11-09, A219). */
.accent, .repere-valeur { color: var(--accent-text); }

/* ---------- 3. Logo : formes verrouillées, recolorisation seule ---------- */
.lg-ink { fill: var(--fg); }
.lg-sig { fill: var(--accent); }

/* ---------- 4. Boutons : un seul principal par écran ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-6);
  border: 1px solid var(--muted); border-radius: var(--radius-card);
  background: transparent; color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--duree) ease, border-color var(--duree) ease, color var(--duree) ease, transform var(--duree) var(--courbe);
}
.btn:hover { border-color: var(--accent-text); transform: translateY(-1px); }
/* Bouton principal : l'accent plein, survol #1d58ed, texte blanc (V7.3). */
.btn-primaire { background: var(--accent); border-color: transparent; color: var(--ink-on-accent); }
.btn-primaire:hover { background: var(--accent-hover); border-color: transparent; }
.btn-entete { border-color: var(--accent-text); color: var(--accent-text); white-space: nowrap; }
.btn-entete:hover { background: var(--accent); border-color: transparent; color: var(--ink-on-accent); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.lien-suite { font-weight: 700; text-decoration: none; }
.lien-suite::after { content: "→"; display: inline-block; margin-left: 0.3em; transition: transform var(--duree) var(--courbe); }
.lien-suite:hover { text-decoration: underline; }
.lien-suite:hover::after { transform: translateX(4px); }

/* ---------- 5. Bandeau Synergetik, en tête de page ---------- */
/* Toujours sombre (data-theme="dark" sur le bandeau) : le fond de marque, le dégradé sombre. */
.bandeau-synergetik { background: var(--bg) var(--degrade-sombre); color: var(--fg); }
.bandeau-synergetik .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-6);
  padding-block: 10px; font-size: var(--text-sm); text-align: center;
}
.bandeau-synergetik strong { font-weight: 700; }
.bandeau-synergetik a { color: var(--fg); font-weight: 700; }
.bandeau-liens { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); }
.bandeau-synergetik .bandeau-bouton {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-4);
  border-radius: var(--radius-card); background: var(--accent); color: var(--ink-on-accent);
  text-decoration: none; white-space: nowrap;
}
.bandeau-synergetik .bandeau-bouton:hover { background: var(--accent-hover); }

/* ---------- 6. En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .entete {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  }
}
.entete-barre { display: flex; align-items: center; gap: var(--space-4); min-height: var(--hauteur-entete); }
.marque { display: inline-flex; align-items: center; gap: var(--space-4); flex: none; color: var(--fg); text-decoration: none; }
.marque svg { display: block; height: 26px; width: auto; }
.marque-produit {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  padding-left: var(--space-4); border-left: 1px solid var(--border);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1;
}
.nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-4); }
.nav-liste { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); }
.nav-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); color: var(--fg); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.nav-lien:hover { color: var(--accent-text); }
.reglages { display: flex; align-items: center; gap: var(--space-2); }
/* Bascules langue et thème : le dessin des pastilles de synergetik.ai (A17). */
.bascule {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-card);
  background: var(--surface); background: color-mix(in srgb, var(--border) 55%, var(--surface));
}
.bascule-choix {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 28px; padding: 0 6px;
  border: 0; border-radius: calc(var(--radius-card) - 3px); background: transparent; color: var(--muted);
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1;
  text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.bascule-choix:not([aria-current="true"]):not([aria-pressed="true"]):hover { color: var(--fg); }
.bascule-choix[aria-current="true"], .bascule-choix[aria-pressed="true"] { background: var(--fg); color: var(--bg); cursor: default; }
.bascule-choix svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 68rem) { .nav-liste { display: none; } }
@media (max-width: 44rem) {
  :root { --hauteur-entete: 60px; }
  .entete-barre, .nav { gap: var(--space-2); }
  .marque { gap: var(--space-2); }
  .marque svg { height: 20px; }
  .marque-produit { padding-left: var(--space-2); font-size: var(--text-md); }
  .btn-entete { display: none; }
}
@media (max-width: 22rem) { .bascule-theme { display: none; } }

/* ---------- 7. En-tête de page ---------- */
.entete-page { background: var(--bg); }
.entete-page > .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-12); align-items: end; padding-block: var(--space-12) var(--space-16); }
.entete-page-texte { display: grid; gap: var(--space-6); }
.entete-page h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); max-width: 18ch; }
.chapo { font-size: var(--text-lg); line-height: 1.5; max-width: 40rem; }
.reperes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.reperes li { display: grid; gap: 2px; padding: var(--space-4) var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.repere-valeur { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.1; letter-spacing: var(--tracking-tight); }
.repere-texte { color: var(--muted); font-size: var(--text-sm); }
@media (max-width: 52rem) {
  .entete-page > .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-8) var(--space-12); }
  .reperes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reperes li { padding: var(--space-4); }
  .repere-valeur { font-size: var(--text-xl); }
}
@media (max-width: 34rem) { .reperes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 8. Sections : fonds alternés, repère à gauche, titre à droite ---------- */
.section { --fond: var(--bg); background: var(--fond); }
main > .section:nth-of-type(odd) { --fond: var(--bg-alt); }
.section > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-16); }
.section-tete { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-4) var(--space-12); align-items: start; }
.section-repere { position: relative; display: grid; gap: var(--space-2); margin-top: calc(var(--text-2xl) * 0.197); padding-top: var(--space-4); }
.section-repere::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--degrade); }
.section-nom { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.section-numero { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.4; letter-spacing: 0.12em; color: var(--violet-text); }
.section-titre { display: grid; gap: var(--space-2); max-width: var(--largeur-texte); }
.section-titre h2 { font-size: var(--text-2xl); }
.section-titre p { color: var(--muted); }
@media (max-width: 48rem) {
  .section-tete { grid-template-columns: minmax(0, 1fr); }
  .section-repere { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); max-width: 16rem; margin-top: 0; }
}
@media (max-width: 40rem) {
  .section > .wrap { padding-block: var(--space-12); }
  .section-titre h2 { font-size: var(--text-xl); }
}

/* ---------- 9. Cartes et blocs ---------- */
.carte { padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.legende { font-size: var(--text-sm); color: var(--muted); max-width: var(--largeur-texte); }

/* ---------- 10. Tâches : des pastilles, la choisie porte le dégradé ---------- */
.puces { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.puce {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4);
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer;
  transition: border-color var(--duree) ease, color var(--duree) ease, transform var(--duree) var(--courbe);
}
.puce:hover { border-color: var(--accent-text); color: var(--accent-text); }
.puce[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--ink-on-accent); font-weight: 700; }
.cas-detail {
  padding: var(--space-4) var(--space-6); background: var(--accent-wash);
  border-left: 3px solid var(--violet); border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-size: var(--text-sm); max-width: 54rem;
}

/* ---------- 11. Réglages ---------- */
.reglages-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-6);
  padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.reglage-large { grid-column: 1 / -1; }
.reglage label:not(.case), .champ label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.val { color: var(--accent-text); font-family: var(--font-mono); font-weight: 400; }
select, input[type="number"], input[type="search"] {
  width: 100%; min-height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-md);
}
select:focus-visible, input:focus-visible { border-color: var(--accent-text); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
input:disabled, select:disabled { cursor: not-allowed; }
.inactif { opacity: 0.45; }
.cases { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.case { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; font-size: var(--text-sm); cursor: pointer; }
.note-mode { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }

/* ---------- 12. Verdict ---------- */
.verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4); }
.carte-verdict { display: grid; gap: var(--space-1); align-content: start; }
.carte-verdict .role { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.carte-verdict .nom { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-tight); }
.carte-verdict .chiffre { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); line-height: 1.5; }
.carte-verdict.mis-en-avant { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--degrade) border-box; }
.carte-verdict.mis-en-avant .role { color: var(--violet-text); }
.vide { grid-column: 1 / -1; padding: var(--space-6); text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius-card); }

/* ---------- 13. Tableaux ---------- */
.cadre-table { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.table th { position: sticky; top: 0; z-index: 1; background: var(--surface); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--accent-wash) 60%, var(--surface)); }
.table tbody tr.est-top td { background: var(--accent-wash); }
.table .num { text-align: right; font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rang { width: 2.5rem; font-family: var(--font-mono); color: var(--muted); }
.est-top .rang { color: var(--violet-text); font-weight: 700; }
.nom-modele { display: block; font-weight: 700; }
.slug { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); }
.note { min-width: 16rem; max-width: 26rem; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.ligne-vide { padding: var(--space-8) !important; text-align: center !important; color: var(--muted); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* Jauge d'adéquation : une barre fine, la note à sa droite. */
.jauge { position: relative; display: block; width: 72px; height: 8px; margin: 7px 2.4rem 0 0; border-radius: 999px; background: color-mix(in srgb, var(--border) 70%, var(--surface)); }
.jauge i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--croissance); }
.jauge b { position: absolute; left: calc(100% + 8px); top: -6px; line-height: 20px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--fg); }
#tableau td:nth-child(2), #catalogue-table td:nth-child(1) { min-width: 14rem; }
#tableau td:nth-child(9), #catalogue-table td:nth-child(11) { white-space: nowrap; }
.etiq {
  display: inline-block; padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.6563rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.etiq.ue { border-color: color-mix(in srgb, var(--croissance) 50%, transparent); color: var(--croissance-texte); }
.etiq.promo { border-color: color-mix(in srgb, var(--violet) 50%, transparent); color: var(--violet-text); }
.etiq.dep { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger-texte); }
.non { color: var(--muted); }
.tri-colonne {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.tri-colonne:hover { color: var(--fg); }
.fleche { color: var(--accent-text); }

/* ---------- 14. Réglette de prix ---------- */
.reglette-boite { padding: var(--space-6) var(--space-6) var(--space-4); }
.reglette { position: relative; height: 120px; }
.plot {
  position: absolute; bottom: 0; width: 9px; margin-left: -4.5px; border-radius: 2px 2px 0 0;
  background: var(--accent) var(--degrade); cursor: pointer;
  transition: transform var(--duree) var(--courbe), opacity var(--duree) ease;
}
.plot:hover, .plot:focus-visible { transform: scaleX(1.9); opacity: 1 !important; }
.axe { position: relative; height: 28px; border-top: 1px solid var(--border); }
.graduation { position: absolute; top: 0; transform: translateX(-50%); padding-top: 6px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); white-space: nowrap; }
.graduation::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 4px; background: var(--muted); }
.info-plot { min-height: 44px; padding-top: var(--space-3); border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.info-plot b { color: var(--fg); }

/* ---------- 15. Catalogue ---------- */
.barre-cat { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4) var(--space-6); }
.champ { flex: 1 1 15rem; }
.compte { padding-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }

/* ---------- 16. Textes longs ---------- */
.prose { display: grid; gap: var(--space-4); max-width: var(--largeur-texte); }
.prose h3 { margin-top: var(--space-6); font-size: var(--text-lg); }
.prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.prose li::marker { color: var(--violet-text); }
.prose code { padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
.sources { columns: 2; column-gap: var(--space-8); font-size: var(--text-sm); color: var(--muted); }
.sources li { break-inside: avoid; }
@media (max-width: 40rem) { .sources { columns: 1; } }

/* ---------- 17. Panneau de maintenance (?maintenance) ---------- */
.panneau-maj { display: grid; gap: var(--space-4); border-style: dashed; }
.panneau-maj ol { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-4); }
.panneau-maj code#texte-prompt { display: block; padding: var(--space-4); white-space: pre-wrap; font-size: var(--text-xs); }

/* ---------- 18. Appel final : moment de marque, bloc sombre ---------- */
.appel-final > .wrap { padding-block: var(--space-16); }
.appel-final-bloc {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); align-items: center;
  padding: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg) var(--degrade-sombre); color: var(--fg);
}
.appel-final-texte { display: grid; gap: var(--space-4); }
.appel-final h2 { font-size: clamp(var(--text-xl), 3.4vw, 2.625rem); }
.appel-final-texte p { color: var(--muted); }
.appel-final-actions { display: grid; gap: var(--space-4); justify-items: start; }
@media (max-width: 48rem) { .appel-final-bloc { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) var(--space-6); } }

/* ---------- 19. Pied de page ---------- */
.pied { border-top: 1px solid var(--border); }
.pied > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-12); padding-block: var(--space-12); font-size: var(--text-sm); color: var(--muted); }
.pied-marque { display: grid; gap: var(--space-4); max-width: 36rem; }
.pied-marque svg { display: block; height: 24px; width: auto; }
.pied-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); align-content: start; }
.pied-liens a { color: var(--fg); text-decoration: none; }
.pied-liens a:hover { color: var(--accent-text); text-decoration: underline; }
@media (max-width: 40rem) { .pied > .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 20. Erreurs ---------- */
.erreur-boite {
  margin-block: var(--space-8); padding: var(--space-6); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: var(--radius-card); background: var(--danger-fond); font-size: var(--text-sm);
}
.erreur-boite b { color: var(--danger-texte); }
.erreur-technique { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }

/* ---------- 21. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* La répartition entrée / sortie est longue : sa valeur passe sous le libellé. */
#melange-val { display: block; margin-top: 2px; }

/* ---------- Mesure d'audience : bandeau de consentement et bouton du pied de page (ticket #484) ---------- */
.bandeau-mesure {
  position: fixed; inset: auto var(--space-4) var(--space-4) auto; z-index: 60;
  max-width: 26rem;
  padding: var(--space-4) var(--space-6);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
  font-size: var(--text-sm); line-height: 1.5;
}
.bandeau-mesure p { margin: 0 0 var(--space-4); }
.bandeau-mesure-boutons { display: flex; gap: var(--space-2); }
.bandeau-mesure-boutons .btn { flex: 1 1 0; min-height: 40px; padding: 0 var(--space-4); }
@media (max-width: 30rem) { .bandeau-mesure { inset-inline: var(--space-2); inset-block-end: var(--space-2); max-width: none; } }
.lien-bouton { padding: 0; border: 0; background: none; color: var(--fg); font: inherit; text-decoration: none; cursor: pointer; text-align: left; }
.lien-bouton:hover { color: var(--accent-text); text-decoration: underline; }
@media print { .bandeau-mesure { display: none; } }