/* Pilotage EARL : tokens, polices, structure et navigation. Les composants sont dans components.css. */

/* Polices auto-hébergées (SIL OFL 1.1, licences dans fonts/). Aucune requête vers un tiers. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --sol: #eef1ec;
  --panneau: #ffffff;
  --panneau-doux: #e3e8de;
  --encre: #1b241d;
  --encre-douce: #505c53;
  --ligne: #d3d9cc;
  --or: #8a6c2a;
  --or-texte: #7a5f20;
  --or-pale: #ece2c4;
  --encre-sur-or: #ffffff;
  --vert: #276a43;
  --vert-pale: #e2efe6;
  --orange: #9a4a00;
  --orange-pale: #f6e6d0;
  --rouge: #a33232;
  --rouge-pale: #f5dfdd;
  --sur-rouge: #ffffff;
  --gris: #5b665a;
  --gris-pale: #e6e9e2;
  --voile: rgba(16, 20, 15, 0.5);

  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;
  --t-legende: 0.875rem; --t-corps: 1rem; --t-kpi: 2rem;
  --rayon: 10px; --rayon-sm: 6px; --cible: 44px;
  --ombre: 0 1px 2px rgba(27, 36, 29, 0.06), 0 4px 16px rgba(27, 36, 29, 0.05);
}

/* Mode sombre automatique (pas de bascule manuelle : le réglage de l'appareil décide). */
@media (prefers-color-scheme: dark) {
  :root {
    --sol: #10140f;
    --panneau: #182018;
    --panneau-doux: #1e2a1d;
    --encre: #edf1e9;
    --encre-douce: #a9b5a1;
    --ligne: #34463a;
    --or: #cda658;
    --or-texte: #cda658;
    --or-pale: #4a3d1f;
    --encre-sur-or: #1b1405;
    --vert: #6fbf8c;
    --vert-pale: #1c2e21;
    --orange: #e8a557;
    --orange-pale: #33260f;
    --rouge: #e58885;
    --rouge-pale: #34201d;
    --sur-rouge: #2a0f0e;
    --gris: #a0aa9c;
    --gris-pale: #232c21;
    --voile: rgba(0, 0, 0, 0.65);
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 20px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--t-corps);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  background: var(--sol);
  color: var(--encre);
  overflow-x: hidden;
}
body.fige { overflow: hidden; }
h1, h2, h3 { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 600; text-wrap: balance; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.in { max-width: 1100px; margin: 0 auto; padding-inline: max(var(--esp-4), env(safe-area-inset-left)) max(var(--esp-4), env(safe-area-inset-right)); }

/* En-tête */
.haut { position: sticky; top: 0; z-index: 10; background: var(--panneau); border-bottom: 1px solid var(--ligne); box-shadow: var(--ombre); }
.haut .in { display: flex; align-items: center; gap: var(--esp-3); min-height: 64px; padding-block: var(--esp-2); }
.titre-app { font-size: 1.3rem; }
.titre-app:focus { outline: none; }
.maj { font-size: var(--t-legende); color: var(--encre-douce); }
.haut-gauche { display: flex; flex-direction: column; margin-right: auto; }
.nav-haut { display: none; gap: var(--esp-2); }
.nav-lien { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--cible); padding-inline: var(--esp-4); border-radius: var(--rayon-sm); color: var(--encre); text-decoration: none; font-weight: 600; border: 1px solid transparent; }
.nav-lien[aria-current="page"] { background: var(--or-pale); border-color: var(--or); }
.menu-zone { position: relative; }
.menu-liste { position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; background: var(--panneau); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); padding: var(--esp-2); z-index: 20; }
.menu-liste button { width: 100%; text-align: left; min-height: var(--cible); background: transparent; border: 0; padding-inline: var(--esp-3); border-radius: var(--rayon-sm); font-weight: 600; }
.menu-liste button:hover { background: var(--panneau-doux); }

/* Structure */
main { padding-block: var(--esp-4) calc(96px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--esp-4); outline: none; }
.grille { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); align-items: start; }
.colonne { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
@media (min-width: 900px) { .grille { grid-template-columns: 1fr 1fr; gap: var(--esp-5); } }
@media (min-width: 800px) {
  .nav-haut { display: flex; }
  .barre { display: none; }
  main { padding-bottom: var(--esp-6); }
}

/* Barre basse mobile : 2 boutons de 56 px */
.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; background: var(--panneau); border-top: 1px solid var(--ligne); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08); padding-bottom: env(safe-area-inset-bottom, 0px); }
.barre a { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--t-legende); font-weight: 600; text-decoration: none; color: var(--encre-douce); border-top: 3px solid transparent; }
.barre a[aria-current="page"] { color: var(--encre); border-top-color: var(--or); background: var(--or-pale); }
@media (min-width: 800px) { .barre { display: none; } }
svg.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Bandeau d'attention */
.bandeau { background: var(--panneau); border: 1px solid var(--ligne); border-top: 3px solid var(--or); border-radius: var(--rayon); box-shadow: var(--ombre); padding: var(--esp-4); }
.bandeau-phrase { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.2rem; margin-bottom: var(--esp-3); }
.pastilles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.pastille { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--cible); padding: var(--esp-1) var(--esp-3); border-radius: 999px; font-weight: 600; font-size: var(--t-legende); line-height: 1.2; border: 1px solid currentColor; text-align: left; }
.pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
@media (max-width: 599px) {
  .pastilles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pastille { width: 100%; border-radius: 22px; }
}
.pastille.sev-crit { background: var(--rouge-pale); color: var(--rouge); }
.pastille.sev-warn { background: var(--orange-pale); color: var(--orange); }
.bandeau.calme { display: flex; align-items: center; gap: var(--esp-3); background: var(--vert-pale); border-color: var(--vert); border-top-color: var(--or); }
.bandeau.calme .ico { width: 36px; height: 36px; color: var(--vert); stroke-width: 2.5; }
.bandeau.calme .bandeau-phrase { margin: 0; }
.bandeau.calme .sous { font-size: var(--t-legende); color: var(--encre-douce); }

/* Panels */
.panel { background: var(--panneau); border: 1px solid var(--ligne); border-left: 4px solid transparent; border-top: 3px solid var(--or); border-radius: var(--rayon); box-shadow: var(--ombre); min-width: 0; scroll-margin-top: 84px; }
.panel.sev-crit { border-left-color: var(--rouge); }
.panel.surligne { background: var(--or-pale); }
.panel-tete { margin: 0; font-size: 1.15rem; }
.panel-toggle { display: flex; align-items: center; gap: var(--esp-3); width: 100%; min-height: 56px; padding: var(--esp-3) var(--esp-4); background: transparent; border: 0; text-align: left; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.15rem; border-radius: var(--rayon); }
.panel-titre { flex: 1 1 auto; min-width: 0; }
.panel-cle { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: var(--t-corps); white-space: nowrap; }
.chevron { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--encre-douce); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.panel-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.panel-corps { padding: 0 var(--esp-4) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); }
.panel-fixe { padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); }
.panel-fixe > h2 { font-size: 1.15rem; }
.panel-fixe > .chip { align-self: flex-start; }

@media (prefers-reduced-motion: no-preference) {
  .panel { transition: background-color 400ms ease; }
  .feuille { animation: monte 220ms ease-out; }
  .toast { animation: apparait 200ms ease-out; }
  .progress-bar > span { transition: width 200ms ease; }
  @keyframes monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes apparait { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
}