/* Radar des compétences IA — FM6SS
   Mise en page : colonne de lecture étroite pour les fiches, colonne large pour la
   coordination ; en-tête institutionnel à double filet ; une seule couleur d'accent,
   déclinée en échelle de niveaux (cours → TP vérifié). */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #f1f3f4;
  --surface: #ffffff;
  --surface-2: #f7f8f9;
  --ink: #14202c;
  --ink-2: #3f4b57;
  --ink-3: #5f6b77;
  --rule: #d5dbe0;
  --rule-2: #b4bec7;
  --accent: #1c4a73;
  --accent-ink: #ffffff;
  --accent-hover: #163b5c;
  --accent-soft: #e3ebf2;
  --focus: #2f6ea8;
  --warn-ink: #7a4b00;
  --warn-bg: #f7edd8;
  --warn-rule: #e2c58f;
  --danger: #a12d2d;
  --danger-soft: #f6e3e3;
  --ok-ink: #24613a;
  --ok-bg: #e2f0e6;
  --overlay: rgba(20, 32, 44, 0.42);
  --shadow: 0 1px 2px rgba(20, 32, 44, 0.06), 0 8px 24px rgba(20, 32, 44, 0.08);
  /* Échelle des niveaux (une teinte, du clair au foncé) */
  --n0: #e6eaed;
  --n0-ink: #5f6b77;
  --n1: #9db9d3;
  --n2: #6f97bd;
  --n3: #3f6f9f;
  --n4: #1d4a78;
  --n1-ink: #14202c;
  --n2-ink: #14202c;
  --n3-ink: #ffffff;
  --n4-ink: #ffffff;

  --hero-bg: #0d2a45;
  --hero-bg-2: #15426a;
  --hero-ink: #f3f7fb;
  --hero-ink-2: #bdd0e2;
  --hero-ligne: rgba(255, 255, 255, 0.14);
  --hero-accent: #7fb6ea;
  --or: #a97a14;

  --font-titre: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-solennel: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-texte: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 6px;
  --r-carte: 10px;
  --largeur-texte: 48rem;
  --largeur-app: 78rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11161b;
    --surface: #181e25;
    --surface-2: #1d242c;
    --ink: #e6eaee;
    --ink-2: #b6c0ca;
    --ink-3: #8e99a5;
    --rule: #2a333d;
    --rule-2: #3b4652;
    --accent: #8db8de;
    --accent-ink: #0d1722;
    --accent-hover: #a9cbe9;
    --accent-soft: #1f2c3a;
    --focus: #8db8de;
    --warn-ink: #e7c27a;
    --warn-bg: #2b2416;
    --warn-rule: #5c4a26;
    --danger: #f08c8c;
    --danger-soft: #3a1e1e;
    --ok-ink: #8fd3a5;
    --ok-bg: #16281d;
    --overlay: rgba(0, 0, 0, 0.6);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --n0: #222a33;
    --n0-ink: #8e99a5;
    --n1: #365b80;
    --n2: #4b79a7;
    --n3: #79a3cc;
    --n4: #afcce8;
    --n1-ink: #ffffff;
    --n2-ink: #ffffff;
    --n3-ink: #0e1620;
    --n4-ink: #0e1620;
    --hero-bg: #132233;
    --hero-bg-2: #1a3550;
    --or: #d8ad55;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11161b;
  --surface: #181e25;
  --surface-2: #1d242c;
  --ink: #e6eaee;
  --ink-2: #b6c0ca;
  --ink-3: #8e99a5;
  --rule: #2a333d;
  --rule-2: #3b4652;
  --accent: #8db8de;
  --accent-ink: #0d1722;
  --accent-hover: #a9cbe9;
  --accent-soft: #1f2c3a;
  --focus: #8db8de;
  --warn-ink: #e7c27a;
  --warn-bg: #2b2416;
  --warn-rule: #5c4a26;
  --danger: #f08c8c;
  --danger-soft: #3a1e1e;
  --ok-ink: #8fd3a5;
  --ok-bg: #16281d;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --n0: #222a33;
  --n0-ink: #8e99a5;
  --n1: #365b80;
  --n2: #4b79a7;
  --n3: #79a3cc;
  --n4: #afcce8;
  --n1-ink: #ffffff;
  --n2-ink: #ffffff;
  --n3-ink: #0e1620;
  --n4-ink: #0e1620;
  --hero-bg: #132233;
  --hero-bg-2: #1a3550;
  --or: #d8ad55;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-texte);
  font-size: 1rem;
  line-height: 1.55;
  font-kerning: normal;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-titre); font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); line-height: 1.2; }
h2 { font-size: 1.375rem; line-height: 1.3; }
h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.section > *, .modules-fiche > *, .mf > *, .panneau > *, .formulaire > *, .dialogue > *, .titre-page > * { min-width: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chiffres { font-variant-numeric: tabular-nums; }

/* ---------- Cadre ---------- */
.cadre { min-height: 100vh; display: flex; flex-direction: column; }
.conteneur { width: 100%; max-width: var(--largeur-app); margin-inline: auto; padding-inline: 16px; }
.conteneur--etroit { max-width: var(--largeur-texte); }
@media (min-width: 48rem) { .conteneur { padding-inline: 32px; } }
.principal { flex: 1; padding-block: 2rem 4rem; }
.principal--hero { padding-top: 0; }

.bandeau-demo {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-2);
}
.bandeau-demo .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-block: 0.5rem; }
.bandeau-demo strong { color: var(--ink); font-weight: 600; }
.bandeau-demo nav { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-left: auto; }
.bandeau-demo button {
  font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--accent);
  background: transparent; border: 1px solid transparent; border-radius: var(--r);
  padding: 0.125rem 0.5rem; cursor: pointer;
}
.bandeau-demo button[aria-current="page"] { border-color: var(--rule-2); background: var(--surface); color: var(--ink); }

.entete { background: var(--surface); border-bottom: 1px solid var(--rule); }
.entete .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; padding-block: 0.875rem; }
.marque { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: inherit; }
.marque__logo { width: 2rem; height: 2rem; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; }
.marque__front { stroke-width: 2; stroke-linecap: round; }
.marque__point { fill: var(--accent); stroke: none; }
.marque__textes { display: grid; gap: 0.0625rem; }
.marque:hover { color: inherit; }
.marque__institution { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.marque__nom { font-family: var(--font-titre); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.01em; }
.entete__actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--ink-3); }

.pied { border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-3); }
.pied .conteneur { padding-block: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; }
.pied p { max-width: 46rem; }

/* ---------- Titres de page ---------- */
.titre-page { display: grid; gap: 0.625rem; margin-bottom: 2rem; }
.surtitre { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.chapeau { font-size: 1.0625rem; color: var(--ink-2); max-width: 44rem; }
.meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; font-size: 0.875rem; color: var(--ink-2); margin: 0; }
.meta div { display: flex; gap: 0.375rem; }
.meta dt { color: var(--ink-3); }
.meta dd { margin: 0; font-weight: 600; }
.texte { max-width: 44rem; display: grid; gap: 0.75rem; color: var(--ink-2); }
.texte p { white-space: pre-line; }

/* ---------- Avis ---------- */
.avis {
  border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r);
  padding: 0.75rem 1rem; font-size: 0.9375rem; color: var(--ink-2); display: grid; gap: 0.25rem;
}
.avis strong { color: var(--ink); font-weight: 600; }
.avis--attention { background: var(--warn-bg); border-color: var(--warn-rule); color: var(--warn-ink); }
.avis--attention strong { color: var(--warn-ink); }
.avis--succes { background: var(--ok-bg); border-color: transparent; color: var(--ok-ink); }
.avis--succes strong { color: var(--ok-ink); }
.avis--erreur { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.avis--erreur strong { color: var(--danger); }
.avis__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.375rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: 2.5rem; padding: 0.375rem 1rem; border-radius: var(--r);
  border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--primaire { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primaire:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn--danger { color: var(--danger); border-color: var(--rule-2); }
.btn--danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn--plein-danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.btn--plein-danger:hover { background: var(--danger); color: var(--surface); filter: brightness(0.92); }
.btn--petit { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
.btn--lien {
  min-height: 0; padding: 0; border: 0; background: none; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px; font-weight: 600;
}
.btn--lien:hover { background: none; color: var(--accent-hover); }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; gap: 1.25rem; }
.grille-champs { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.champ { display: grid; gap: 0.375rem; min-width: 0; align-content: start; }
.champ--large { grid-column: 1 / -1; }
.champ > label, .champ > .champ__libelle { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.champ__aide { font-size: 0.8125rem; color: var(--ink-3); }
.champ__erreur { font-size: 0.8125rem; color: var(--danger); font-weight: 600; }
.obligatoire { color: var(--danger); font-weight: 600; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 2.5rem; padding: 0.4375rem 0.625rem;
  font: inherit; font-size: 0.9375rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-2); border-radius: var(--r);
}
textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
input[aria-invalid="true"], textarea[aria-invalid="true"], .etiquettes[data-invalide="true"] { border-color: var(--danger); }
input[readonly], textarea[readonly] { background: var(--surface-2); }
.case { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9375rem; }
.case input { margin-top: 0.25rem; width: 1rem; height: 1rem; accent-color: var(--accent); flex: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

/* Choix segmenté (format d'intervention) */
.segment { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.segment label { position: relative; display: block; cursor: pointer; }
.segment label + label { border-left: 1px solid var(--rule-2); }
.segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment span { display: block; padding: 0.4375rem 0.875rem; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.segment label:hover span { background: var(--surface-2); color: var(--ink); }
.segment input:checked + span { background: var(--accent); color: var(--accent-ink); }
.segment input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -3px; }
.segment input:disabled + span { cursor: not-allowed; opacity: 0.7; }

/* Étiquettes (outils, bibliothèques) */
.etiquettes {
  display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; min-height: 2.5rem;
  padding: 0.3125rem 0.375rem; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--surface);
}
.etiquettes:focus-within { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.etiquettes input { flex: 1 1 8rem; min-width: 6rem; border: 0; min-height: 1.75rem; padding: 0.125rem 0.25rem; background: transparent; }
.etiquettes input:focus-visible { outline: none; }
.etiquette {
  display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%;
  padding: 0.0625rem 0.25rem 0.0625rem 0.5rem; border-radius: 3px;
  background: var(--accent-soft); color: var(--ink); font-size: 0.8125rem; font-weight: 600;
}
.etiquette span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiquette button {
  border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 1rem; line-height: 1;
  width: 1.375rem; height: 1.375rem; border-radius: 2px; cursor: pointer;
}
.etiquette button:hover { color: var(--danger); background: var(--surface); }
.etiquettes--lecture { border: 0; padding: 0; min-height: 0; background: none; }
.suggestions-rapides { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; font-size: 0.8125rem; color: var(--ink-3); }
.suggestions-rapides button {
  font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--accent); background: none;
  border: 1px dashed var(--rule-2); border-radius: 3px; padding: 0 0.4375rem; cursor: pointer;
}
.suggestions-rapides button:hover { border-style: solid; border-color: var(--accent); }

/* ---------- Échelle et jauges ---------- */
.echelle { display: grid; gap: 0.75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); margin: 0; }
.echelle div { display: grid; gap: 0.25rem; align-content: start; padding-top: 0.625rem; border-top: 1px solid var(--rule); }
.echelle dt { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.echelle dd { margin: 0; font-size: 0.875rem; color: var(--ink-2); }

.jauge { display: inline-flex; gap: 2px; flex: none; vertical-align: middle; }
.jauge__seg { width: 0.875rem; height: 0.5rem; border-radius: 1px; background: var(--n0); }
.jauge--grande .jauge__seg { width: 1.375rem; height: 0.625rem; }
.jauge[data-niveau="1"] .jauge__seg--plein { background: var(--n1); }
.jauge[data-niveau="2"] .jauge__seg--plein { background: var(--n2); }
.jauge[data-niveau="3"] .jauge__seg--plein { background: var(--n3); }
.jauge[data-niveau="4"] .jauge__seg--plein { background: var(--n4); }

.pastille {
  display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.0625rem 0.5rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.pastille--ok { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }
.pastille--attention { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-rule); }
.pastille--neutre { background: var(--surface-2); color: var(--ink-3); }
.pastille--accent { background: var(--accent-soft); color: var(--ink); border-color: transparent; }
.pastille svg { width: 0.75rem; height: 0.75rem; flex: none; }

/* ---------- Sections ---------- */
.section { display: grid; gap: 1rem; margin-top: 2.5rem; }
.section:first-child { margin-top: 0; }
.section__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); }
.section__tete p { font-size: 0.875rem; color: var(--ink-3); }
.panneau { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1.25rem; display: grid; gap: 1rem; }
.panneau--accent { background: var(--accent-soft); border-color: transparent; }
.colonnes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.colonnes > * { min-width: 0; }

/* ---------- Accueil ---------- */
.acces { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.acces section { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1.25rem; display: grid; gap: 0.75rem; align-content: start; }
.acces p { color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- Fiche enseignant ---------- */
.lien-perso { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--ink-2); }
.modules-fiche { display: grid; gap: 0.75rem; }
.mf { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1rem 1.125rem; display: grid; gap: 0.875rem; }
.mf[data-actif="true"] { border-color: var(--rule-2); box-shadow: inset 0 0 0 1px var(--rule-2); }
.mf[data-erreur="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.mf__tete { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.875rem; align-items: baseline; }
.mf__code { font-weight: 700; font-size: 0.875rem; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 2.25rem; }
.mf__titres { display: grid; gap: 0.25rem; min-width: 0; }
.mf__desc { font-size: 0.875rem; color: var(--ink-3); }
.mf__meta { grid-column: 2; font-size: 0.8125rem; color: var(--ink-3); }
.mf__choix { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.mf__choix legend { font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); margin-bottom: 0.375rem; }
.mf__details { display: grid; gap: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--rule); }
.mf__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--ink-2); }
.mf__pied strong { color: var(--ink); font-weight: 600; }
.mf__pied .pastille { white-space: normal; border-radius: var(--r); max-width: 100%; }

.barre-enregistrement {
  position: sticky; bottom: 0; z-index: 5; margin-top: 2rem;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r) var(--r) 0 0;
  box-shadow: var(--shadow);
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
}
.barre-enregistrement__etat { flex: 1 1 16rem; font-size: 0.875rem; color: var(--ink-2); min-width: 0; }
.barre-enregistrement__etat strong { color: var(--ink); }
.barre-enregistrement__etat[data-ton="erreur"] { color: var(--danger); font-weight: 600; }
.barre-enregistrement__etat[data-ton="succes"] { color: var(--ok-ink); font-weight: 600; }

/* ---------- Coordination ---------- */
.onglets { display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; scrollbar-width: thin; }
.onglets button {
  flex: none; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--ink-3);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 0.625rem 0.875rem; cursor: pointer; white-space: nowrap;
}
.onglets button:hover { color: var(--ink); }
.onglets button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.onglets .compteur { font-weight: 400; color: var(--ink-3); margin-left: 0.25rem; }

.tuiles { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.tuile { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1rem 1.125rem; display: grid; gap: 0.25rem; align-content: start; }
.tuile__libelle { font-size: 0.8125rem; color: var(--ink-3); font-weight: 600; }
.tuile__valeur { font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--ink); }
.tuile__valeur small { font-size: 1rem; font-weight: 400; color: var(--ink-3); }
.tuile__note { font-size: 0.8125rem; color: var(--ink-2); }

.couverture { display: grid; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.couverture__ligne { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(11rem, 14rem); gap: 0.25rem 1rem; padding: 0.875rem 1.125rem; align-items: start; }
.couverture__ligne + .couverture__ligne { border-top: 1px solid var(--rule); }
.couverture__code { font-weight: 700; font-size: 0.875rem; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 0.125rem; }
.couverture__module { display: grid; gap: 0.375rem; min-width: 0; }
.couverture__intitule { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.couverture__intervenants { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.couverture__vide { font-size: 0.875rem; color: var(--ink-3); font-style: italic; }
.couverture__etat { display: grid; gap: 0.375rem; justify-items: start; }
.couverture__etat span.libelle { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.couverture__ligne[data-etat="aucune"] .couverture__etat span.libelle { color: var(--warn-ink); }
@media (max-width: 40rem) {
  .couverture__ligne { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .couverture__etat { grid-column: 2; }
}
.intervenant {
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 3px; padding: 0.0625rem 0.375rem 0.0625rem 0.25rem; background: var(--surface-2);
}
.intervenant b { font-weight: 600; color: var(--ink); }
.intervenant .carre { width: 0.625rem; height: 0.625rem; border-radius: 1px; flex: none; }
.intervenant svg { width: 0.75rem; height: 0.75rem; flex: none; color: var(--ok-ink); }

.legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.8125rem; color: var(--ink-2); align-items: center; }
.legende span { display: inline-flex; align-items: center; gap: 0.375rem; }
.legende svg { width: 0.875rem; height: 0.875rem; flex: none; color: var(--ok-ink); }
.intervenant:hover { border-color: var(--ink-3); background: var(--surface); }
.carre { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 2px; flex: none; }
.niv-0 { background: var(--n0); color: var(--n0-ink); }
.niv-1 { background: var(--n1); color: var(--n1-ink); }
.niv-2 { background: var(--n2); color: var(--n2-ink); }
.niv-3 { background: var(--n3); color: var(--n3-ink); }
.niv-4 { background: var(--n4); color: var(--n4-ink); }

/* Tableaux */
.defilement--ajuste { width: fit-content; max-width: 100%; }
.defilement { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tableau th, .tableau td { padding: 0.625rem 0.875rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.tableau tr:last-child td { border-bottom: 0; }
.tableau thead th { background: var(--surface-2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.tableau td.nombre, .tableau th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau .secondaire { display: block; color: var(--ink-3); font-size: 0.8125rem; }
.tableau .actions { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end; }
.tableau tr[data-retire="true"] td { color: var(--ink-3); }

.matrice { border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; }
.matrice th, .matrice td { border-bottom: 1px solid var(--rule); padding: 0.375rem; }
.matrice thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; vertical-align: bottom; }
.matrice th.matrice__module { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; font-weight: 400; min-width: 15rem; max-width: 22rem; border-right: 1px solid var(--rule); padding: 0.5rem 0.875rem; }
.matrice thead th.matrice__module { z-index: 3; background: var(--surface-2); }
.matrice__module b { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 0.375rem; }
.matrice__prof { min-width: 6.25rem; max-width: 7.5rem; text-align: center; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.matrice__prof span { display: block; font-weight: 400; color: var(--ink-3); font-size: 0.75rem; }
.matrice td { text-align: center; }
.matrice tbody tr:last-child th, .matrice tbody tr:last-child td { border-bottom: 0; }
.cellule {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
  min-width: 3.5rem; height: 2rem; padding: 0 0.5rem; border-radius: 3px; border: 0;
  font: inherit; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.cellule:hover { filter: brightness(1.06); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink-3); }
.cellule svg { width: 0.75rem; height: 0.75rem; flex: none; }
.cellule--vide { background: transparent; color: var(--rule-2); cursor: default; font-weight: 400; }
.cellule--vide:hover { filter: none; box-shadow: none; }
.cellule--non-retenu { background: var(--n0); color: var(--n0-ink); text-decoration: line-through; }
.cellule__marque-demo { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 2px solid currentColor; flex: none; }

.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.filtres label { font-size: 0.875rem; color: var(--ink-2); }
.filtres select { width: auto; min-height: 2.125rem; padding-block: 0.25rem; }

/* Profil : extrait du CV et preuves d'expertise */
.sous-titre { font-size: 1rem; font-weight: 600; color: var(--ink); }
.diplomes { display: grid; gap: 1rem; }
.diplome { display: grid; gap: 0.5rem 0.75rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 6.5rem; align-items: start; }
.diplome__rang { grid-column: 1 / -1; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
@media (max-width: 40rem) {
  .diplome { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .diplome > .champ:first-of-type { grid-column: 1 / -1; }
}
.preuves { display: grid; gap: 0.75rem; }
.preuve {
  display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr) 7rem auto; align-items: end;
  padding: 0.875rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface-2);
}
.preuve__large { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 30rem) { .preuve { grid-template-columns: minmax(0, 1fr) 6rem; } .preuve > .btn { grid-column: 1 / -1; justify-self: start; } }
.liste-preuves { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.liste-preuves li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.625rem; align-items: center; font-size: 0.9375rem; }
.liste-diplomes { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.25rem; }
.bloc-profil { display: grid; gap: 0.5rem; }

/* Parcours de reconnaissance */
.parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.parcours__palier { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 0.875rem 1rem; }
.parcours__palier[data-atteint="true"] { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.parcours__marque { width: 2.25rem; height: 2.25rem; display: block; }
.parcours__marque .insigne { width: 100%; height: 100%; }
.parcours__corps { display: grid; gap: 0.375rem; min-width: 0; }
.parcours__nom { font-weight: 600; color: var(--ink); line-height: 1.3; }
.parcours__critere { font-size: 0.8125rem; color: var(--ink-2); }
.parcours__recompense { font-size: 0.8125rem; color: var(--ink); padding-top: 0.375rem; border-top: 1px solid var(--rule); }
.parcours__etat { font-size: 0.8125rem; color: var(--warn-ink); font-weight: 600; }
.distinction { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--ink); }

/* Attestation */
.page-attestation { display: grid; gap: 1.5rem; }
.attestation {
  width: 100%; max-width: 46rem; margin-inline: auto; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-2); box-shadow: var(--shadow); padding: clamp(1.5rem, 5vw, 3.5rem);
  display: grid; gap: 1rem;
}
.attestation__tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; padding-bottom: 0.875rem; border-bottom: 3px double var(--rule-2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.attestation__titre { font-family: var(--font-solennel); font-weight: 600; text-align: center; font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); letter-spacing: 0.04em; margin-top: 1rem; }
.attestation__sous-titre { text-align: center; color: var(--ink-2); font-size: 0.9375rem; margin-top: -0.5rem; }
.attestation__texte { text-align: center; color: var(--ink-2); max-width: 36rem; margin-inline: auto; }
.attestation__nom { text-align: center; font-family: var(--font-solennel); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); color: var(--ink); }
.attestation__qualite { text-align: center; font-size: 0.875rem; color: var(--ink-3); margin-top: -0.5rem; }
.attestation__distinction { text-align: center; padding-block: 0.75rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.attestation__bloc { display: grid; gap: 0.5rem; }
.attestation__bloc h2 { font-size: 1rem; }
.attestation__bloc ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.375rem; font-size: 0.9375rem; }
.attestation__pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-top: 2rem; font-size: 0.9375rem; }
.attestation__signature { text-align: right; display: grid; gap: 0.25rem; min-width: 14rem; }
.attestation__signataire { white-space: pre-line; font-weight: 600; padding-top: 2.5rem; }

/* Compétences pratiques */
.groupes-competences { display: grid; gap: 1.75rem; }
.groupe-competences { display: grid; gap: 0.75rem; }
.groupe-competences__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.groupe-competences__tete span { font-size: 0.8125rem; color: var(--ink-3); }
.competences { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.competence { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1rem 1.125rem; display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.competence__savoir { font-weight: 600; color: var(--ink); line-height: 1.45; white-space: pre-line; }
.competence__activite { font-size: 0.875rem; color: var(--ink-2); white-space: pre-line; }
.competence__etiquette { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.125rem; }
.competence__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.875rem; font-size: 0.8125rem; color: var(--ink-2); padding-top: 0.625rem; border-top: 1px solid var(--rule); }
.competence__niveau { display: inline-flex; align-items: center; gap: 0.375rem; }
.competence__sans-preuve { color: var(--ink-3); }
.filtres .case { align-items: center; }
.filtres .case input { margin-top: 0; }

/* Réponse */
.reponse { font-family: var(--font-texte); font-size: 0.9375rem; line-height: 1.6; white-space: pre-wrap; }
.champ--court input { max-width: 22rem; }

/* ---------- Dialogues ---------- */
.voile { position: fixed; inset: 0; z-index: 50; background: var(--overlay); display: grid; place-items: center; padding: 1rem; overflow-y: auto; }
.dialogue {
  width: 100%; max-width: 42rem; max-height: calc(100vh - 2rem); overflow-y: auto;
  background: var(--surface); color: var(--ink); border-radius: var(--r); box-shadow: var(--shadow);
  border: 1px solid var(--rule); display: grid; gap: 1.125rem; padding: 1.5rem;
}
.dialogue--etroit { max-width: 30rem; }
.dialogue__tete { display: grid; gap: 0.25rem; }
.dialogue__pied { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; padding-top: 0.25rem; }
.detail { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0.5rem 1.25rem; margin: 0; font-size: 0.9375rem; }
.detail dt { color: var(--ink-3); font-size: 0.875rem; }
.detail dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .detail { grid-template-columns: 1fr; gap: 0.125rem; } .detail dd { margin-bottom: 0.5rem; } }
.choix-decision { display: grid; gap: 0.5rem; }
.choix-decision legend { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.5rem; }
.choix-decision label { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.5rem 0.75rem; border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; }
.choix-decision label:hover { background: var(--surface-2); }
.choix-decision label:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choix-decision input { margin-top: 0.25rem; accent-color: var(--accent); }
.choix-decision small { display: block; color: var(--ink-3); font-size: 0.8125rem; }

.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 60; background: var(--ink); color: var(--bg); padding: 0.5rem 1rem; border-radius: var(--r);
  font-size: 0.875rem; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100% - 2rem);
}

.chargement { color: var(--ink-3); font-size: 0.9375rem; padding-block: 3rem; }
.apercu-import { max-height: 16rem; overflow: auto; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  @page { size: A4; margin: 16mm; }
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #f6f6f6; --ink: #111111; --ink-2: #333333; --ink-3: #555555;
    --rule: #cccccc; --rule-2: #999999; color-scheme: light;
  }
  .bandeau-demo, .entete, .entete__actions, .onglets, .btn, .barre-enregistrement, .groupe-boutons, .filtres, .pied, .actions-attestation { display: none !important; }
  body { background: #fff; color: #000; }
  .principal { padding-block: 0; }
  .defilement { overflow: visible; border: 0; }
  .reponse { border: 0; min-height: 0; }
  .attestation { box-shadow: none; border: 0; padding: 0; max-width: none; }
}

/* =====================================================================
   Présentation : bandeau, radar, insignes, volets repliables
   ===================================================================== */
.panneau, .mf, .tuile, .parcours__palier, .couverture, .competence, .dialogue, .acces section { border-radius: var(--r-carte); }

.hero {
  background: radial-gradient(120% 140% at 85% 15%, var(--hero-bg-2) 0%, var(--hero-bg) 62%);
  color: var(--hero-ink); margin-bottom: 2rem;
}
.hero__grille { display: grid; gap: 2rem; padding-block: 2.25rem 2.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .hero__grille { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); padding-block: 3.25rem; gap: 3rem; } }
.hero__texte { display: grid; gap: 1rem; align-content: start; max-width: 40rem; min-width: 0; }
.hero__surtitre { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hero-accent); }
.hero h1 { font-size: clamp(1.875rem, 1.25rem + 2.3vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; color: var(--hero-ink); }
.hero__chapeau { font-size: 1.125rem; color: var(--hero-ink-2); max-width: 36rem; }
.hero__acces { border-left: 3px solid var(--hero-accent); padding: 0.125rem 0 0.125rem 1rem; display: grid; gap: 0.25rem; color: var(--hero-ink-2); font-size: 0.9375rem; max-width: 34rem; }
.hero__acces-titre { color: var(--hero-ink); font-weight: 700; }
.hero__faits { list-style: none; margin: 0.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--hero-ligne); display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; }
.hero__faits li { display: grid; gap: 0.125rem; }
.hero__faits strong { font-size: 1.375rem; font-weight: 700; color: var(--hero-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.hero__faits span { font-size: 0.8125rem; color: var(--hero-ink-2); }
.hero__droite { min-width: 0; display: grid; }
.hero__visuel { width: 100%; max-width: 25rem; justify-self: center; }
@media (max-width: 55.99rem) { .hero__visuel { max-width: 17rem; } .fiche-radar { max-width: 21rem; } .fiche-radar__graphe { max-width: 16rem; } }
.hero__distinction {
  display: flex; gap: 0.875rem; align-items: center; max-width: 36rem;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--hero-ligne); border-radius: var(--r-carte); padding: 0.75rem 1rem;
}
.hero__distinction > div { display: grid; gap: 0.125rem; min-width: 0; }
.hero__distinction .insigne { width: 2.75rem; height: 2.75rem; flex: none; }
.hero__distinction-nom { font-weight: 700; color: var(--hero-ink); }
.hero__distinction-suite { font-size: 0.875rem; color: var(--hero-ink-2); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; font-size: 0.875rem; color: var(--hero-ink-2); }
.hero__meta div { display: flex; gap: 0.375rem; }
.hero__meta dd { margin: 0; color: var(--hero-ink); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--hero-ink-2); }

.btn--clair { background: #ffffff; border-color: #ffffff; color: #0d2a45; }
.btn--clair:hover { background: #e4edf6; border-color: #e4edf6; color: #0d2a45; }
.btn--contour { background: transparent; border-color: rgba(255, 255, 255, 0.42); color: var(--hero-ink); }
.btn--contour:hover { background: rgba(255, 255, 255, 0.08); border-color: #ffffff; color: var(--hero-ink); }
.btn--large { min-height: 2.875rem; font-size: 1rem; width: 100%; }

/* Radar */
.radar { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font-texte); }
.radar__anneau { fill: none; stroke: var(--rule); stroke-width: 1; }
.radar__anneau--ext { stroke: var(--rule-2); }
.radar__rayon { stroke: var(--rule); stroke-width: 1; }
.radar__aire { fill: var(--accent); fill-opacity: 0.16; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.radar__point { stroke: var(--surface); stroke-width: 1.5; }
.radar__point[data-n="1"] { fill: var(--n1); }
.radar__point[data-n="2"] { fill: var(--n2); }
.radar__point[data-n="3"] { fill: var(--n3); }
.radar__point[data-n="4"] { fill: var(--n4); }
.radar__code { font-size: 12px; font-weight: 600; fill: var(--ink-3); }
.radar__code--actif { fill: var(--accent); font-weight: 700; }
.radar__niveau { font-size: 10px; fill: var(--ink-3); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.radar--hero .radar__anneau, .radar--hero .radar__rayon { stroke: var(--hero-ligne); }
.radar--hero .radar__anneau--ext { stroke: rgba(255, 255, 255, 0.3); }
.radar--hero .radar__aire { fill: var(--hero-accent); fill-opacity: 0.2; stroke: var(--hero-accent); }
.radar--hero .radar__point { fill: var(--hero-accent); stroke: var(--hero-bg); }
.radar--hero .radar__niveau { fill: var(--hero-ink); font-size: 10.5px; stroke: var(--hero-bg); }
.radar__secteur { fill: var(--hero-accent); fill-opacity: 0.13; }
.radar__front { stroke: var(--hero-accent); stroke-opacity: 0.75; stroke-width: 1.5; }

.fiche-radar, .carte-inscription {
  background: var(--surface); color: var(--ink); border-radius: var(--r-carte);
  box-shadow: 0 16px 40px rgba(4, 16, 28, 0.32); width: 100%; justify-self: center; min-width: 0;
}
.fiche-radar { padding: 1.25rem 1.25rem 1rem; display: grid; gap: 0.5rem; max-width: 25rem; }
.fiche-radar__titre { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.fiche-radar__graphe { width: 100%; max-width: 20rem; justify-self: center; }
.fiche-radar__resume { font-weight: 600; text-align: center; font-size: 0.9375rem; color: var(--ink); }
.fiche-radar__aide { font-size: 0.8125rem; color: var(--ink-3); text-align: center; }
.carte-inscription { padding: 1.5rem; display: grid; gap: 1rem; max-width: 28rem; }
.carte-inscription h2 { font-size: 1.375rem; }
.carte-inscription__tete { display: grid; gap: 0.25rem; }
.carte-inscription__tete p { color: var(--ink-3); font-size: 0.9375rem; }
.grille-nom { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; }

/* Synthèse de la coordination */
.synthese-haut { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .synthese-haut { grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr); align-items: start; }
  .synthese-haut .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.radar-equipe { justify-items: center; gap: 0.5rem; }
.radar-equipe .radar { max-width: 18rem; }
.radar-equipe .fiche-radar__titre { justify-self: start; }

/* Insignes de distinction */
.insigne { width: 2.25rem; height: 2.25rem; display: block; }
.insigne__seg { fill: none; stroke: var(--rule-2); stroke-width: 3.5; stroke-linecap: round; }
.insigne__seg--plein { stroke: var(--or); }
.insigne__chiffre { font-size: 14px; font-weight: 700; fill: var(--ink-3); font-family: var(--font-texte); }
.insigne--atteint .insigne__chiffre { fill: var(--ink); }
.insigne__coche { fill: none; stroke: var(--or); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero .insigne__seg { stroke: rgba(255, 255, 255, 0.26); }
.hero .insigne__seg--plein { stroke: var(--or); }
.hero .insigne__chiffre { fill: var(--hero-ink); }

/* Volets repliables */
.volets { display: grid; gap: 0.75rem; margin-bottom: 2rem; }
.volet { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-carte); }
.volet__tete { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 0.9375rem 1.25rem; border-radius: var(--r-carte); }
.volet__tete::-webkit-details-marker { display: none; }
.volet__tete::marker { content: ""; }
.volet__textes { display: grid; gap: 0.125rem; flex: 1; min-width: 0; }
.volet__titre { font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.volet__sous { font-size: 0.875rem; color: var(--ink-3); }
.volet__chevron { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.volet[open] .volet__chevron { transform: rotate(180deg); }
.volet__tete:hover .volet__titre { color: var(--accent); }
.volet__tete:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.volet[open] > .volet__tete { border-bottom: 1px solid var(--rule); border-radius: var(--r-carte) var(--r-carte) 0 0; }
.volet__corps { padding: 1.25rem; display: grid; gap: 1rem; }

.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.etapes li { display: grid; gap: 0.375rem; align-content: start; }
.etapes__num { font-size: 1.5rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.etapes__titre { font-weight: 700; color: var(--ink); }
.etapes p { font-size: 0.9375rem; color: var(--ink-2); }
.texte-libre { white-space: pre-line; }

@media print {
  .hero { background: none; color: #000; }
  .volet__chevron { display: none; }
}