/* accroitre.info — feuille de style unique du site public.
   Inspirée de la fiche « Crise2024 » : titres rouge foncé, tableaux à en-têtes gris,
   cellules colorées, barres d'échelle. Vert = sain, rouge = risque.
   Échelle de note A-L : interpolation OKLCH des couleurs d'état bon → attention →
   sérieux → critique ; texte toujours en encre foncée sur la couleur (contraste ≥ 4,1:1),
   la lettre ou la valeur est toujours écrite (la couleur n'est jamais seule). */

:root {
  --fond: #fcfcfb;
  --surface: #ffffff;
  --texte: #0b0b0b;
  --texte-2: #52514e;
  --titre: #b00000;
  --lien: #1c5cab;
  --bordure: #d6d5d0;
  --entete-tableau: #d9d8d3;
  --cellule: #efeeea;
  --encre-echelle: #0b0b0b;
  --focus: #2a78d6;
  --largeur: 1120px;
  --rayon: 4px;
  --police: Inter, Lato, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Note A (sain) → L (risque) */
  --n1: #0ca30c; --n2: #7ba900; --n3: #b3ac00; --n4: #e1af00; --n5: #faad21; --n6: #f99f35;
  --n7: #f59247; --n8: #ef8655; --n9: #e87752; --n10: #e06448; --n11: #d95141; --n12: #d03b3b;
  /* Échelles à 6 classes (vulnérabilité, stress, CDS, notations) */
  --e1: var(--n1); --e2: var(--n3); --e3: var(--n5); --e4: var(--n7); --e5: var(--n9); --e6: var(--n12);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #1a1a19;
    --surface: #232321;
    --texte: #f0efec;
    --texte-2: #c3c2b7;
    --titre: #ff8a7a;
    --lien: #86b6ef;
    --bordure: #3d3d3a;
    --entete-tableau: #3a3a37;
    --cellule: #2b2b29;
    --focus: #86b6ef;
  }
}
:root[data-theme="dark"] {
  --fond: #1a1a19; --surface: #232321; --texte: #f0efec; --texte-2: #c3c2b7; --titre: #ff8a7a;
  --lien: #86b6ef; --bordure: #3d3d3a; --entete-tableau: #3a3a37; --cellule: #2b2b29; --focus: #86b6ef;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.5 var(--police); font-variant-numeric: tabular-nums;
}
a { color: var(--lien); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 .5rem; }
h2 { color: var(--titre); font-size: clamp(1.3rem, 3vw, 1.6rem); margin: 2rem 0 .75rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--surface); padding: .5rem 1rem; }
main { display: block; max-width: var(--largeur); margin: 0 auto; padding: 1.5rem 16px 3rem; }
main:focus { outline: none; }

/* En-tête et barre de navigation */
.entete { background: var(--surface); border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 5; }
.entete-interieur { max-width: var(--largeur); margin: 0 auto; padding: .5rem 16px; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.15rem; color: var(--titre); text-decoration: none; margin-right: auto; }
.menu-principal ul { list-style: none; margin: 0; padding: 0; }
.menu-principal > ul { display: flex; gap: .25rem; align-items: center; }
.menu-principal a, .menu-pays > summary { display: block; padding: .5rem .75rem; color: var(--texte); text-decoration: none; border-radius: var(--rayon); cursor: pointer; }
.menu-principal a:hover, .menu-pays > summary:hover { background: var(--cellule); }
.menu-principal a[aria-current="page"], .menu-pays > summary[aria-current] { font-weight: 700; color: var(--titre); }
.menu-pays { position: relative; }
.menu-pays > summary { list-style: none; }
.menu-pays > summary::-webkit-details-marker { display: none; }
.menu-pays > summary::after { content: " ▾"; font-size: .8em; }
.menu-pays-liste { position: absolute; right: 0; top: 100%; z-index: 6; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: 0 6px 24px rgb(0 0 0 / .15); padding: .75rem; display: grid; grid-template-columns: repeat(2, minmax(11rem, 1fr)); gap: 1rem; width: max-content; max-width: calc(100vw - 32px); }
.menu-groupe-titre { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2); padding: 0 .75rem .25rem; }
.menu-groupe a { padding: .25rem .75rem; }
.langues ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.bouton-menu { display: none; background: none; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .5rem; color: var(--texte); cursor: pointer; }
.bouton-menu-barres, .bouton-menu-barres::before, .bouton-menu-barres::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.bouton-menu-barres::before, .bouton-menu-barres::after { content: ""; position: absolute; left: 0; }
.bouton-menu-barres::before { top: -6px; }
.bouton-menu-barres::after { top: 6px; }

@media (max-width: 759px) {
  .js .bouton-menu { display: block; }
  .js .menu-principal { display: none; width: 100%; }
  .js .menu-principal.ouvert { display: block; }
  .menu-principal > ul { flex-direction: column; align-items: stretch; }
  .menu-pays-liste { position: static; box-shadow: none; grid-template-columns: 1fr; width: auto; }
}

/* Bannière « site en construction » affichée sous la barre de navigation */
.banniere-construction { background: #ffff00; }
.banniere-construction p { max-width: var(--largeur); margin: 0 auto; padding: .6rem 16px; font-size: 1.1rem; font-style: italic; color: var(--titre); }

/* Contenu */
.chapeau { font-size: 1.1rem; color: var(--texte-2); max-width: 70ch; }
.sous-titre, .remarque, .qualite { color: var(--texte-2); }
.remarque { font-size: .9rem; }
.qualite { font-size: .85em; }
.bloc { margin-bottom: 2rem; }
.titre-pays { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.titre-pays h1 { margin: 0; }
.nd { color: var(--texte-2); font-style: italic; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2px; margin: 0; }
.fiche > div { background: var(--cellule); padding: .5rem .75rem; }
.fiche dt { font-size: .85rem; color: var(--texte-2); }
.fiche dd { margin: 0; font-weight: 600; }

/* Tableaux (maquette : en-têtes gris, cellules séparées) */
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .5rem 0; }
.tableau { border-collapse: separate; border-spacing: 2px; min-width: 100%; }
.tableau caption { text-align: left; color: var(--texte-2); padding-bottom: .25rem; }
.tableau th, .tableau td { padding: .45rem .7rem; text-align: left; white-space: nowrap; background: var(--cellule); }
.tableau thead th { background: var(--entete-tableau); font-weight: 700; vertical-align: bottom; }
.tableau tbody th { font-weight: 600; }
.tableau td { font-variant-numeric: tabular-nums; }
.tableau .e1, .tableau .e2, .tableau .e3, .tableau .e4, .tableau .e5, .tableau .e6 { color: var(--encre-echelle); font-weight: 600; }
.tableau .e1 .nd, .tableau .e6 .nd { color: var(--encre-echelle); }
.bouton-tri { all: unset; cursor: pointer; display: inline-flex; gap: .25rem; align-items: center; }
.bouton-tri::after { content: "↕"; font-size: .8em; color: var(--texte-2); }
th[aria-sort="ascending"] .bouton-tri::after { content: "↑"; color: var(--texte); }
th[aria-sort="descending"] .bouton-tri::after { content: "↓"; color: var(--texte); }

.e1 { background: var(--e1) !important; } .e2 { background: var(--e2) !important; } .e3 { background: var(--e3) !important; }
.e4 { background: var(--e4) !important; } .e5 { background: var(--e5) !important; } .e6 { background: var(--e6) !important; }

/* Note A-L */
.note { display: inline-flex; align-items: center; justify-content: center; min-width: 2em; height: 2em; padding: 0 .35em; border-radius: var(--rayon);
  font-weight: 800; color: var(--encre-echelle); background: var(--cellule); }
.note-grand { min-width: 3.2rem; height: 3.2rem; font-size: 1.6rem; }
.note-vide { color: var(--texte-2); }
.note-etoile { font-size: .7em; vertical-align: super; }
.note-A { background: var(--n1); } .note-B { background: var(--n2); } .note-C { background: var(--n3); } .note-D { background: var(--n4); }
.note-E { background: var(--n5); } .note-F { background: var(--n6); } .note-G { background: var(--n7); } .note-H { background: var(--n8); }
.note-I { background: var(--n9); } .note-J { background: var(--n10); } .note-K { background: var(--n11); } .note-L { background: var(--n12); }
.note-ligne { display: flex; align-items: center; gap: 1rem; }

/* Barres d'échelle sous les tableaux */
.echelle { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: .25rem 0 1rem; padding: 0; font-size: .75rem; }
.echelle li { flex: 1 1 4.5rem; max-width: 7rem; text-align: center; padding: .15rem .25rem; color: var(--encre-echelle); font-weight: 600; border-radius: 2px; }
.echelle-notes li { flex: 1 1 2rem; max-width: 3.5rem; }

/* Graphiques SVG (générés côté serveur) */
.graphique { position: relative; max-width: 760px; margin: 0 0 1.5rem; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphique .axe, .graphique .grille { stroke: var(--bordure); stroke-width: 1; }
.graphique .libelle-axe { fill: var(--texte-2); font-size: 12px; }
.graphique .ligne-serie { fill: none; stroke: var(--lien); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graphique .bande { opacity: .22; }
.b1 { fill: var(--n1); }
.b2 { fill: var(--n2); }
.b3 { fill: var(--n3); }
.b4 { fill: var(--n4); }
.b5 { fill: var(--n5); }
.b6 { fill: var(--n6); }
.b7 { fill: var(--n7); }
.b8 { fill: var(--n8); }
.b9 { fill: var(--n9); }
.b10 { fill: var(--n10); }
.b11 { fill: var(--n11); }
.b12 { fill: var(--n12); }
.graphique .curseur { stroke: var(--texte-2); stroke-width: 1; stroke-dasharray: 3 3; }
.graphique .point-survol { fill: var(--lien); stroke: var(--surface); stroke-width: 2; }
.infobulle { position: absolute; pointer-events: none; background: var(--surface); color: var(--texte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: .35rem .6rem; font-size: .85rem; box-shadow: 0 4px 16px rgb(0 0 0 / .15); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.infobulle[hidden] { display: none; }
.tableau-donnees summary { cursor: pointer; color: var(--lien); margin: .5rem 0; }

/* Pied de page */
.pied { background: var(--surface); border-top: 1px solid var(--bordure); color: var(--texte-2); font-size: .9rem; }
.pied-interieur { max-width: var(--largeur); margin: 0 auto; padding: 1.5rem 16px; }
.pied .avertissement { font-weight: 600; color: var(--texte); }
.pied ul { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }

@media print {
  .entete, .pied nav, .bouton-menu { display: none; }
  .tableau th, .tableau td { border: 1px solid #999; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (forced-colors: active) {
  .note, .echelle li, .e1, .e2, .e3, .e4, .e5, .e6 { border: 1px solid CanvasText; }
}