/* Autonomote — identité « Signalétique » (maquette A validée par le CEO le 26/10/2026).
   La route comme matière : Barlow (dessinée d'après la signalétique routière), condensée en capitales pour les titres ;
   IBM Plex Mono pour les dates de vérification ; bleu signal, jaune de marquage au sol, encre asphalte.
   Thème clair par défaut, sombre au bouton. Les tokens --m-* sont ceux du socle (assets/socle/css/socle.css). */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(/assets/fonts/barlow-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(/assets/fonts/barlow-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(/assets/fonts/barlow-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(/assets/fonts/barlow-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-condensed-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-condensed-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-condensed-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-condensed-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2"); }

:root {
  --m-fond: #f4f6f8;
  --m-fond-2: #ffffff;
  --m-encre: #0b1220;
  --m-encre-2: #4a5565;
  --m-filet: #d7dde4;
  --m-accent: #0f5fd7;
  --m-sur-accent: #ffffff;
  --m-accent-2: #0b4bb0;
  --m-attention: #9a3412;
  --m-attention-fond: #ffedd5;
  --m-police-titre: "Barlow Condensed", "Arial Narrow", sans-serif;
  --m-police-texte: "Barlow", system-ui, sans-serif;
  --m-police-mono: "IBM Plex Mono", ui-monospace, monospace;
  --m-rayon: 4px;
  --m-ombre: 0 1px 0 rgba(11, 18, 32, .04), 0 10px 30px -18px rgba(11, 18, 32, .35);
  --a-marquage: #f2b705;
  --a-marquage-encre: #3a2a00;
  --a-signal-doux: #e3ecfb;
  --a-bord: #0b1220;
  --a-bord-texte: #eef2f7;
  --a-bord-texte-2: #a9b4c4;
}
:root[data-theme="dark"] {
  --m-fond: #0b1220;
  --m-fond-2: #111a2b;
  --m-encre: #eef2f7;
  --m-encre-2: #a9b4c4;
  --m-filet: #263247;
  --m-accent: #79a6ff;
  --m-sur-accent: #061024;
  --m-accent-2: #a9c4ff;
  --m-attention: #fdba74;
  --m-attention-fond: #3b1d08;
  --a-signal-doux: #162442;
  --a-bord: #111a2b;
}

body { font-size: 17px; }
:focus-visible { outline-color: var(--a-marquage); }
h1, h2 { text-transform: uppercase; letter-spacing: .005em; line-height: 1.02; }
h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); font-weight: 700; }
.marque { text-transform: uppercase; letter-spacing: .02em; font-size: 1.4rem; }
.nav a, .nav-mobile a { text-transform: uppercase; letter-spacing: .04em; font-size: .92rem; font-weight: 600; }
.sur-titre { display: inline-flex; align-items: center; gap: 10px; letter-spacing: .14em; }
.sur-titre::before { content: ""; width: 28px; height: 2px; background: var(--a-marquage); }
.bouton { text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; }
.bouton--secondaire { border-color: var(--m-encre); }
.section__tete { border-bottom: 3px solid var(--m-encre); padding-bottom: 8px; }
.lien-plus { text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
.carte__sur, .fait dt, .tableau th { letter-spacing: .08em; }
.carte__titre { font-family: var(--m-police-titre); font-size: 1.35rem; }
.grille--une-grande > .carte:first-child .carte__titre { font-size: 2rem; }
.badge--attention { border-radius: 3px; }
.hero { background: radial-gradient(1200px 400px at 85% -10%, var(--a-signal-doux), transparent 60%), var(--m-fond); border-bottom: 0; }
.hero h1 em { font-style: normal; color: var(--m-accent); }
.hero__prose { color: var(--m-encre-2); }

/* Marquage au sol : filet pointillé entre le hero et la suite */
.route { height: 14px; margin: 0 0 8px; background:
  linear-gradient(90deg, var(--a-marquage) 0 36px, transparent 36px 60px) 0 6px/60px 2px repeat-x,
  linear-gradient(var(--m-filet), var(--m-filet)) 0 0/100% 1px no-repeat,
  linear-gradient(var(--m-filet), var(--m-filet)) 0 100%/100% 1px no-repeat; }

/* Tableau de bord du hero : les trackers, avec leur date de vérification */
.tableau-bord { background: var(--a-bord); color: var(--a-bord-texte); border-radius: 6px; padding: 18px 18px 14px; box-shadow: var(--m-ombre); position: relative; overflow: hidden; }
:root[data-theme="dark"] .tableau-bord { border: 1px solid var(--m-filet); }
.tableau-bord::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 220px; height: 220px; border-radius: 50%; border: 1px dashed rgba(242, 183, 5, .35); pointer-events: none; }
.tb__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.tb__tete h2 { font-size: 1.15rem; margin: 0; color: #fff; letter-spacing: .06em; }
.tb__tete .mono { color: var(--a-bord-texte-2); }
.mono { font-family: var(--m-police-mono); font-size: .76rem; font-variant-numeric: tabular-nums; }
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); }
.tuile { background: var(--a-bord); padding: 12px 12px 10px; display: grid; gap: 4px; text-decoration: none; color: inherit; }
.tuile:hover { background: #142036; color: inherit; }
.tuile__val { font: 700 2.1rem/1 var(--m-police-titre); color: #fff; font-variant-numeric: tabular-nums; }
.tuile__val small { font: 600 .85rem/1 var(--m-police-texte); color: var(--a-bord-texte-2); margin-left: 4px; text-transform: uppercase; }
.tuile__lib { font: 600 .78rem/1.2 var(--m-police-texte); color: #dfe6f0; text-transform: uppercase; letter-spacing: .06em; }
.tuile__date { font-family: var(--m-police-mono); font-size: .7rem; color: var(--a-marquage); }
.tb__lignes { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.tb__lignes li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px dashed rgba(255, 255, 255, .14); font-size: .92rem; }
.tb__lignes .mono { color: var(--a-bord-texte-2); }
.tb__lignes a { color: #fff; text-decoration: none; }
.tb__lignes a:hover { color: var(--a-marquage); }
.tb__vide { color: var(--a-bord-texte-2); font-size: .9rem; margin: 10px 0 0; }

/* Pastille « vérifié le » */
.verif { display: inline-flex; align-items: center; gap: 6px; font-family: var(--m-police-mono); font-size: .74rem; color: var(--m-encre); }
.verif::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1b7f4b; }
.fait__meta { font-family: var(--m-police-mono); font-size: .72rem; }

/* Chip de niveau SAE (fiches) */
.sae { display: inline-block; font: 700 .72rem/1 var(--m-police-titre); letter-spacing: .06em; padding: 4px 7px; border: 1.5px solid currentColor; border-radius: 3px; color: var(--m-accent); }

/* Repères « Comprendre » */
.repere { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--m-filet); border-radius: var(--m-rayon); background: var(--m-fond-2); text-decoration: none; color: var(--m-encre); transition: background var(--m-transition); }
.repere:hover { background: var(--a-signal-doux); color: var(--m-encre); }
.repere b { font: 700 1.2rem/1.1 var(--m-police-titre); text-transform: uppercase; }
.repere span { color: var(--m-encre-2); font-size: .92rem; }
.repere .num { font: 700 2rem/1 var(--m-police-titre); color: var(--a-marquage); }

/* Bande méthode sombre */
.methode { background: var(--a-bord); color: var(--a-bord-texte); border: 0; border-radius: 6px; }
.methode h2 { color: #fff; }
.methode__liste li { color: #c5cfdc; }
.methode__liste strong { color: #fff; }
.methode a { color: var(--a-marquage); }
.pied__nom { text-transform: uppercase; }