:root {
  --fond: #f5f6f4;
  --surface: #ffffff;
  --surface-2: #f0f2ef;
  --texte: #1d2522;
  --texte-2: #55615c;
  --bordure: #d9dedb;
  --accent: #1f5f6b;
  --accent-fort: #164751;
  --accent-pale: #e3eff1;
  --rouge: #b42318; --rouge-pale: #fdecea;
  --ambre: #9a5b00; --ambre-pale: #fff4e0;
  --vert: #1d7a46; --vert-pale: #e6f4ec;
  --bleu: #3b5bb5; --bleu-pale: #e9eefb;
  --gris: #6b7280; --gris-pale: #eef0f2;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(20, 30, 25, .06), 0 2px 8px rgba(20, 30, 25, .05);
  --sur-accent: #ffffff;
  --sur-semantique: #ffffff;
  --haut-securite: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
/* Thème sombre : suit le système, sauf choix explicite (data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #121715; --surface: #1a211e; --surface-2: #222b27; --texte: #e6ebe8; --texte-2: #a3b0aa;
    --bordure: #33403a; --accent: #6fb7c4; --accent-fort: #8fcad5; --accent-pale: #1d3337;
    --rouge: #ff8a80; --rouge-pale: #3a1f1d; --ambre: #f3b95f; --ambre-pale: #3a2e1a;
    --vert: #7fd3a0; --vert-pale: #183225; --bleu: #9db2f5; --bleu-pale: #1f2740;
    --gris: #a0a7b1; --gris-pale: #262b30;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3);
    --sur-accent: #0f1a1c; --sur-semantique: #111;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #121715; --surface: #1a211e; --surface-2: #222b27; --texte: #e6ebe8; --texte-2: #a3b0aa;
  --bordure: #33403a; --accent: #6fb7c4; --accent-fort: #8fcad5; --accent-pale: #1d3337;
  --rouge: #ff8a80; --rouge-pale: #3a1f1d; --ambre: #f3b95f; --ambre-pale: #3a2e1a;
  --vert: #7fd3a0; --vert-pale: #183225; --bleu: #9db2f5; --bleu-pale: #1f2740;
  --gris: #a0a7b1; --gris-pale: #262b30;
  --ombre: 0 1px 2px rgba(0, 0, 0, .3);
  --sur-accent: #0f1a1c; --sur-semantique: #111;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent); }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .4em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
h4 { font-size: .95rem; margin-top: 1.2em; }
p { margin: 0 0 .7em; }
code { background: var(--surface-2); padding: .05em .35em; border-radius: 4px; font-size: .9em; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Barre du haut */
.barre-haut {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem max(16px, calc((100vw - 1320px) / 2)); background: var(--surface); border-bottom: 1px solid var(--bordure);
  position: sticky; top: var(--haut-securite); z-index: 10;
}
.marque { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--texte); }
.marque-logo {
  width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: var(--sur-accent);
  display: grid; place-items: center; font-weight: 700; font-size: 1.1rem;
}
.marque strong { display: block; font-size: 1.05rem; }
.marque-sous { display: block; font-size: .78rem; color: var(--texte-2); }

main { max-width: 1320px; margin: 0 auto; padding: 1.4rem 16px 4rem; outline: none; }
.chargement-page { text-align: center; color: var(--texte-2); padding: 3rem; }

/* ---------- Boutons */
button, .bouton {
  font: inherit; font-size: .92rem; cursor: pointer; border-radius: 8px; padding: .5rem .9rem;
  border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
  line-height: 1.2; white-space: nowrap;
}
button:disabled { opacity: .5; cursor: not-allowed; }
.primaire { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.primaire:hover:not(:disabled) { background: var(--accent-fort); }
.secondaire { background: var(--surface); color: var(--texte); border-color: var(--bordure); }
.secondaire:hover:not(:disabled) { background: var(--surface-2); }
.danger { background: var(--rouge); color: var(--sur-semantique); border-color: var(--rouge); }
.lien { background: none; border: none; color: var(--accent); padding: .3rem .4rem; text-decoration: underline; text-underline-offset: 2px; }
.lien.petit, .petit-bouton { font-size: .82rem; padding: .25rem .5rem; }
.icone { background: none; border: 1px solid transparent; color: var(--texte-2); padding: .25rem .45rem; border-radius: 6px; }
.icone:hover:not(:disabled) { background: var(--surface-2); color: var(--texte); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.barre { margin-bottom: 1rem; }

/* ---------- Champs */
input[type=text], input[type=search], input[type=password], textarea, select {
  font: inherit; font-size: .92rem; color: var(--texte); background: var(--surface);
  border: 1px solid var(--bordure); border-radius: 7px; padding: .45rem .6rem; width: 100%;
}
textarea { resize: vertical; line-height: 1.45; }
select { width: auto; max-width: 100%; }
label { display: block; font-size: .85rem; font-weight: 600; color: var(--texte-2); }
label > input, label > textarea, label > select { margin-top: .25rem; font-weight: 400; }
label.case { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; color: var(--texte); }
.formulaire { display: grid; gap: .8rem; }
.aide { font-size: .85rem; color: var(--texte-2); }

/* ---------- Mise en page */
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1.1rem 1.2rem; box-shadow: var(--ombre); }
.entete-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.sous-titre { color: var(--texte-2); margin: 0; }
.ariane { font-size: .85rem; color: var(--texte-2); margin-bottom: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.ariane a { color: var(--texte-2); }
.carte-code { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: .2rem; }
section + section { margin-top: 1.2rem; }

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.carte-programme { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.carte-programme:hover { border-color: var(--accent); transform: translateY(-1px); }
.carte-programme h2 { font-size: 1.05rem; margin-bottom: .8rem; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 0; }
.stats dt { overflow-wrap: anywhere; }
.stats div { background: var(--surface-2); border-radius: 7px; padding: .4rem .5rem; }
.stats dt { font-size: .7rem; color: var(--texte-2); }
.stats dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.stats dd.rouge { color: var(--rouge); }
.demarrage .etapes { padding-left: 1.2rem; margin: 0; display: grid; gap: .6rem; }
.sauvegarde { margin-top: 2rem; }
.vide-texte { color: var(--texte-2); text-align: center; padding: 1.5rem; }

/* ---------- Onglets */
.onglets { display: flex; gap: .2rem; border-bottom: 1px solid var(--bordure); margin-bottom: 1.2rem; overflow-x: auto; }
.onglets a {
  padding: .6rem .9rem; text-decoration: none; color: var(--texte-2); border-bottom: 3px solid transparent;
  margin-bottom: -1px; white-space: nowrap; font-weight: 500;
}
.onglets a:hover { color: var(--texte); }
.onglets a.actif { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Zone de dépôt */
.zone-depot {
  border: 2px dashed var(--bordure); border-radius: var(--rayon); padding: 1.6rem 1rem; text-align: center;
  background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s;
}
.zone-depot:hover, .zone-depot.survol { border-color: var(--accent); background: var(--accent-pale); }
.zone-depot-icone { font-size: 1.8rem; color: var(--accent); line-height: 1; }
.zone-depot-texte { font-weight: 600; margin-top: .3rem; }
.zone-depot-sous { font-size: .85rem; color: var(--texte-2); }
.journal { list-style: none; padding: 0; margin: .6rem 0 1rem; font-size: .88rem; display: grid; gap: .25rem; }
.journal .ok { color: var(--vert); font-weight: 700; }
.journal .ko, .journal .erreur { color: var(--rouge); }
.journal .avertissement { margin-top: .25rem; }
.chargement {
  display: inline-block; width: .8em; height: .8em; border: 2px solid var(--bordure); border-top-color: var(--accent);
  border-radius: 50%; animation: tourne .8s linear infinite; vertical-align: -1px;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Tableaux */
.defilement { overflow-x: auto; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); }
.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-2); background: var(--surface-2); padding: .55rem .6rem; white-space: nowrap; }
.tableau td { padding: .55rem .6rem; border-top: 1px solid var(--bordure); vertical-align: top; }
.tableau .nombre { text-align: right; }
.tableau .petit, .petit { font-size: .8rem; color: var(--texte-2); }
.lien-fort { font-weight: 600; text-decoration: none; }
.lien-fort:hover { text-decoration: underline; }
.actions-ligne { white-space: nowrap; text-align: right; }
.competences input.mini { width: 4.2rem; }
.competences input.court { width: 6.5rem; }
.competences input.large { min-width: 22rem; }
.competences textarea { min-width: 14rem; font-size: .85rem; }
.competences td { padding: .4rem .45rem; }
.competences input, .competences textarea, .competences select { padding: .3rem .45rem; }
select.valide-oui { background: var(--vert-pale); color: var(--vert); font-weight: 600; }
select.valide-non { background: var(--rouge-pale); color: var(--rouge); font-weight: 600; }
select.valide-en-revision { background: var(--ambre-pale); color: var(--ambre); font-weight: 600; }

/* ---------- Puces de statut */
.puces { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.puce { display: inline-block; font-size: .75rem; font-weight: 600; padding: .12rem .5rem; border-radius: 99px; white-space: nowrap; }
.puce.non_conforme { background: var(--rouge-pale); color: var(--rouge); }
.puce.partiel { background: var(--ambre-pale); color: var(--ambre); }
.puce.a_verifier { background: var(--bleu-pale); color: var(--bleu); }
.puce.conforme { background: var(--vert-pale); color: var(--vert); }
.puce.sans_objet { background: var(--gris-pale); color: var(--gris); }

/* ---------- Critères (édition) */
.aide-bloc { margin-bottom: 1rem; font-size: .9rem; }
.aide-bloc summary { cursor: pointer; font-weight: 600; }
.aide-bloc ul { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.liste-criteres { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.critere-edition { padding: .8rem 1rem; }
.critere-edition-tete { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.critere-edition-tete .numero { font-weight: 700; color: var(--accent); min-width: 1.4rem; }
.critere-edition-tete .libelle { flex: 1 1 20rem; font-weight: 600; }
.boutons-ordre { display: flex; }
.critere-edition-corps { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .6rem; }
.critere-edition-corps textarea[spellcheck=false] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }

/* ---------- Analyse */
.entete-analyse h1 { word-break: break-word; }
.meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.meta .competence { display: flex; align-items: center; gap: .4rem; color: var(--texte); font-weight: 600; }
.meta .competence select { margin: 0; max-width: 28rem; }
.synthese { margin-bottom: 1rem; background: var(--accent-pale); border-color: transparent; }
.avertissement { background: var(--ambre-pale); color: var(--ambre); border-radius: 8px; padding: .6rem .8rem; font-size: .88rem; margin-bottom: 1rem; }
.resume { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filtre { background: var(--surface); border: 1px solid var(--bordure); color: var(--texte); border-radius: 99px; padding: .4rem .85rem; }
.filtre[aria-pressed=true] { border-color: var(--accent); background: var(--accent-pale); color: var(--accent-fort); font-weight: 600; }
.filtre-nombre { font-weight: 700; }
.filtre-corriger .filtre-nombre { color: var(--rouge); }
.filtre-verifier .filtre-nombre { color: var(--bleu); }
.filtre-rencontres .filtre-nombre { color: var(--vert); }

.analyse-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.liste-resultats { display: grid; gap: .7rem; }
.resultat {
  background: var(--surface); border: 1px solid var(--bordure); border-left: 5px solid var(--gris);
  border-radius: var(--rayon); padding: .8rem 1rem; box-shadow: var(--ombre);
}
.resultat[data-statut=non_conforme] { border-left-color: var(--rouge); }
.resultat[data-statut=partiel] { border-left-color: var(--ambre); }
.resultat[data-statut=a_verifier] { border-left-color: var(--bleu); }
.resultat[data-statut=conforme] { border-left-color: var(--vert); }
.resultat-tete { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.resultat-titre h3 { margin: 0 0 .2rem; font-size: .98rem; }
.etiquettes { display: flex; gap: .3rem; flex-wrap: wrap; }
.etiquette { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-2); background: var(--surface-2); padding: .05rem .4rem; border-radius: 4px; }
.etiquette.manuel { color: var(--accent); background: var(--accent-pale); }
select.statut { font-weight: 600; flex-shrink: 0; }
.resultat[data-statut=non_conforme] select.statut { color: var(--rouge); background: var(--rouge-pale); }
.resultat[data-statut=partiel] select.statut { color: var(--ambre); background: var(--ambre-pale); }
.resultat[data-statut=a_verifier] select.statut { color: var(--bleu); background: var(--bleu-pale); }
.resultat[data-statut=conforme] select.statut { color: var(--vert); background: var(--vert-pale); }
.explication { font-size: .88rem; color: var(--texte-2); margin: .4rem 0; }
.preuve {
  margin: .4rem 0; padding: .45rem .7rem; border-left: 3px solid var(--bordure); background: var(--surface-2);
  font-size: .85rem; white-space: pre-line; border-radius: 0 6px 6px 0;
}
.preuve .voir { display: block; margin-top: .2rem; padding-left: 0; }
.correction { margin-top: .5rem; }
.correction-tete { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--texte-2); margin-bottom: .25rem; }
.correction-actions { display: flex; flex-wrap: wrap; }

.panneau-texte { position: sticky; top: 76px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); display: flex; flex-direction: column; max-height: calc(100vh - 96px); }
.panneau-texte-tete { padding: .7rem .8rem; border-bottom: 1px solid var(--bordure); display: grid; gap: .4rem; }
.panneau-texte-tete h2 { font-size: .95rem; margin: 0; }
.texte-document { overflow: auto; padding: .8rem 1rem; white-space: pre-wrap; font-size: .82rem; line-height: 1.55; flex: 1; word-break: break-word; }
.texte-document mark { background: #ffe58a; color: #1d2522; border-radius: 3px; padding: 0 1px; }

/* ---------- Rapport */
.rapport { margin-top: 1.6rem; }
.rapport-tete { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: .8rem; }
.rapport-apercu { border: 1px solid var(--bordure); border-radius: 8px; padding: 1rem 1.2rem; background: var(--fond); }
.rapport-entete dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: 0; font-size: .88rem; }
.rapport-entete dt { font-weight: 600; color: var(--texte-2); }
.rapport-entete dd { margin: 0; }
.rapport-liste { padding-left: 1.3rem; display: grid; gap: .6rem; }
.rapport-liste p { margin: .2rem 0 0; }
.rapport-liste.compacte { gap: .1rem; }
.rapport-liste .manquant { color: var(--rouge); font-style: italic; }
.commentaire { white-space: pre-line; }
.rapport-options { display: grid; gap: .6rem; margin-top: 1rem; }
.suivi { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--bordure); }
.suivi-champs { display: grid; grid-template-columns: 12rem 1fr; gap: .8rem; margin-bottom: .5rem; }
.zone-danger { border-color: color-mix(in srgb, var(--rouge) 40%, var(--bordure)); }

/* ---------- Dialogues et notifications */
.dialogue { border: none; border-radius: 12px; padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--texte); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.dialogue.large { width: min(820px, calc(100vw - 32px)); }
.dialogue::backdrop { background: rgba(15, 20, 18, .45); }
.dialogue form { padding: 1.2rem 1.3rem; }
.dialogue-contenu { max-height: 65vh; overflow: auto; margin: .6rem 0 1rem; }
.dialogue-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.dialogue .tableau input.court { width: 7rem; }
.apercu-criteres { padding-left: 1.3rem; font-size: .9rem; }
textarea.copie { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }
#notifications { position: fixed; bottom: 16px; right: 16px; left: 16px; display: grid; justify-items: end; gap: .5rem; z-index: 100; pointer-events: none; }
.notification { background: var(--texte); color: var(--surface); padding: .65rem 1rem; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); max-width: 460px; font-size: .9rem; transition: opacity .3s, transform .3s; pointer-events: auto; }
.notification.succes { background: var(--vert); color: var(--sur-semantique); }
.notification.erreur { background: var(--rouge); color: var(--sur-semantique); }
.notification.sortie { opacity: 0; transform: translateY(8px); }

/* ---------- Petits écrans */
@media (max-width: 960px) {
  .analyse-grille { grid-template-columns: 1fr; }
  .panneau-texte { position: static; max-height: 60vh; }
  .critere-edition-corps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  h1 { font-size: 1.3rem; }
  .marque-sous { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .resultat-tete { flex-direction: column; }
  .suivi-champs { grid-template-columns: 1fr; }
  .tableau.plans th:nth-child(4), .tableau.plans td:nth-child(4) { display: none; }
}

/* ---------- Impression du rapport */
@media print {
  body.impression-rapport { background: #fff; color: #000; }
  body.impression-rapport .barre-haut,
  body.impression-rapport main > *:not(.rapport),
  body.impression-rapport .rapport > *:not(.rapport-apercu),
  body.impression-rapport #notifications { display: none !important; }
  body.impression-rapport main { padding: 0; max-width: none; }
  body.impression-rapport .rapport { border: none; box-shadow: none; padding: 0; margin: 0; }
  body.impression-rapport .rapport-apercu { border: none; padding: 0; background: #fff; }
  body.impression-rapport .puce { border: 1px solid currentColor; }
}

/* ---------- Contenu long (noms de fichiers, listes déroulantes) */
.entete-page > div { min-width: 0; max-width: 100%; }
.entete-analyse h1, .rapport-entete dd, .tableau td { overflow-wrap: anywhere; }
.meta .competence { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.meta .competence select { min-width: 0; width: 100%; }
@media (min-width: 601px) { .meta .competence select { width: auto; } }

/* ---------- Caviardage */
.option-depot { margin-bottom: .6rem; font-size: .88rem; }
.texte-document mark.marqueur, mark.marqueur { background: var(--accent-pale); color: var(--accent-fort); font-weight: 600; border-radius: 3px; padding: 0 2px; }
.apercu-caviarde { max-height: 16rem; border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond); }
.bilan-caviardage { margin: 0; }