/* ==========================================================================
   Tracelle — feuille de style proposée (agent design, palier 1, 16/10/2026)
   Remplace src/main/resources/static/css/app.css. Une seule feuille, des jetons
   en :root, des composants nommés en français, aucune règle en ligne.
   Polices IBM Plex (SIL OFL 1.1) servies par l'application (webjars), jamais par un CDN ; la seconde source (../polices/)
   ne sert qu'à l'aperçu des maquettes hors application, à retirer à l'intégration.
   Icônes : sprite SVG local (icones/tracelle-icones.svg), inclus dans la page.
   Trois largeurs : 375 (téléphone), 768 (tablette), 1180 (bureau, largeur maximale).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Polices
   -------------------------------------------------------------------------- */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/webjars/ibm__plex-sans/fonts/complete/woff2/IBMPlexSans-Regular.woff2") format("woff2"), url("../polices/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/webjars/ibm__plex-sans/fonts/complete/woff2/IBMPlexSans-Medium.woff2") format("woff2"), url("../polices/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/webjars/ibm__plex-sans/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2") format("woff2"), url("../polices/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/webjars/ibm__plex-sans/fonts/complete/woff2/IBMPlexSans-Bold.woff2") format("woff2"), url("../polices/IBMPlexSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/webjars/ibm__plex-mono/fonts/complete/woff2/IBMPlexMono-Regular.woff2") format("woff2"), url("../polices/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/webjars/ibm__plex-mono/fonts/complete/woff2/IBMPlexMono-Medium.woff2") format("woff2"), url("../polices/IBMPlexMono-Medium.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   1. Jetons
   Chaque couple texte/fond ci-dessous a été mesuré (voir 02-systeme-de-design.md) :
   texte ≥ 4,5:1, contours et icônes ≥ 3:1.
   -------------------------------------------------------------------------- */
:root {
  /* Encre et papier */
  --papier: #F4F3EE;              /* fond de page, blanc cassé chaud */
  --surface: #FFFFFF;             /* cartes, tableaux, champs */
  --surface-2: #F9F8F5;           /* zébrure, en-tête de tableau, pied de carte */
  --encre: #16202A;               /* texte principal (16,5:1 sur blanc) */
  --encre-2: #4A5563;             /* texte secondaire (7,6:1) */
  --encre-3: #66707C;             /* libellés discrets, traces (5,0:1 sur blanc, 4,5:1 sur papier) */
  --filet: #DCDAD3;               /* filets décoratifs, séparations */
  --filet-fort: #858C96;          /* contours des champs et des pastilles vides (3,4:1 sur blanc) */

  /* Accent : pétrole — actions, liens, étape courante, sceau. Ni bleu de l'État, ni rouge. */
  --accent: #0F5E66;              /* 7,5:1 sur blanc */
  --accent-fonce: #0A454B;        /* survol, actif */
  --accent-clair: #E3EEEF;        /* fond teinté (étape faite, encart lié au document émis) */
  --accent-filet: #B9D3D6;

  /* Les quatre familles de réponse. Jamais la couleur seule : chaque pastille porte une icône et son mot. */
  --oui-fond: #F6E7D4;    --oui-texte: #7A3E07;       /* OUI, le bien est concerné : ocre, plein */
  --non-fond: #FFFFFF;    --non-texte: #4A5563;   --non-contour: #858C96;   /* NON : vide, contour */
  --respectee-fond: #E2F0E6;      --respectee-texte: #1C5A33;
  --non-respectee-fond: #F7E4E1;  --non-respectee-texte: #8B2A1E;
  --a-verifier-fond: #ECE8F7;     --a-verifier-texte: #4B3A8C;   --a-verifier-contour: #7A6BC2; /* action humaine attendue */
  --inconnu-fond: #E8EDF3;        --inconnu-texte: #3E4D62;      /* réponse honnête : ardoise, ni rouge ni gris du NON */

  /* Erreur technique (source en panne, saisie refusée) : la seule famille en rouge. */
  --erreur-fond: #F7E4E1;  --erreur-texte: #8B2A1E;  --erreur-filet: #8B2A1E;
  /* Information neutre */
  --info-fond: #ECEEF1;    --info-texte: #16202A;    --info-filet: #4A5563;
  /* Bandeau de démonstration */
  --demo-fond: #FFF4CE;    --demo-texte: #5C4400;    --demo-filet: #E8D48A;

  /* Gravité d'une exception du parc */
  --critique-fond: #8B2A1E;  --critique-texte: #FFFFFF;
  --haute-fond: #F6E7D4;     --haute-texte: #7A3E07;
  --moyenne-fond: #E8EDF3;   --moyenne-texte: #3E4D62;

  /* Origines des parcelles (existantes, à conserver distinguables ; MANUELLE en trait pointillé) */
  --origine-point-ban: #1D4F8C;
  --origine-point-rnb: #B45309;
  --origine-manuelle: #6B3FA0;

  /* Typographie */
  --police: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-12: 0.75rem;  --t-13: 0.8125rem;  --t-14: 0.875rem;  --t-16: 1rem;
  --t-18: 1.125rem; --t-22: 1.375rem;   --t-28: 1.75rem;   --t-34: 2.125rem;
  --interligne: 1.5;

  /* Espacements (base 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px;

  /* Rayons, ombres, cibles */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-rond: 999px;
  --ombre-1: 0 1px 2px rgba(22, 32, 42, 0.06);
  --ombre-2: 0 8px 24px rgba(22, 32, 42, 0.12);
  --cible-min: 44px;
  --largeur-max: 1180px;
  --largeur-etroite: 760px;
  --gouttiere: 24px;
  --focus: 3px solid var(--accent);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--papier); color: var(--encre);
  font: 400 var(--t-16)/var(--interligne) var(--police);
  overflow-wrap: break-word;
}
img, svg, video, input, select, textarea { max-width: 100%; }
code, kbd, .identifiant { font-family: var(--police-mono); font-size: 0.9375em; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-fonce); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: var(--t-28); }
h2 { font-size: var(--t-18); }
h3 { font-size: var(--t-16); }
p, ul, ol, dl { margin: 0; }
ul, ol { padding-left: 1.25em; }
time { white-space: nowrap; }
button { font: inherit; color: inherit; }
q { quotes: "« " " »"; }
hr { border: 0; border-top: 1px solid var(--filet); margin: var(--e-6) 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Focus visible au clavier sur tout ce qui s'atteint (RGAA 10.7) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, .choix__option:has(:focus-visible) {
  outline: var(--focus); outline-offset: 2px; border-radius: var(--r-1);
}
main:focus { outline: none; }

/* Utilitaires d'accessibilité */
.visuellement-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: -9999px; top: var(--e-2); z-index: 10; padding: var(--e-3) var(--e-4);
  background: var(--surface); color: var(--accent); border: 2px solid var(--accent); border-radius: var(--r-2); font-weight: 600; }
.evitement:focus { left: var(--e-4); }

/* Icônes : taille de la ligne, couleur du texte courant */
.icone { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icone--pleine { fill: currentColor; stroke: none; }
.icone--grande { width: 1.5em; height: 1.5em; }

/* --------------------------------------------------------------------------
   3. Gabarit : en-tête, contenu, pied
   -------------------------------------------------------------------------- */
.entete { background: var(--surface); border-bottom: 1px solid var(--filet); }
.entete__contenu {
  max-width: var(--largeur-max); margin: 0 auto; padding: 0 var(--gouttiere);
  min-height: 60px; display: flex; align-items: center; gap: var(--e-8);
}
/* Marque : glyphe de parcelle + mot. Le glyphe est un dessin propre à Tracelle (contour d'une parcelle et point de la trace). */
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); text-decoration: none;
  font-weight: 700; font-size: var(--t-18); letter-spacing: -0.015em; min-height: var(--cible-min); }
.marque:hover { color: var(--encre); }
.marque__glyphe { width: 26px; height: 26px; color: var(--accent); }
.marque__nom { line-height: 1; }
.marque__sous-nom { display: block; font-weight: 400; font-size: var(--t-12); color: var(--encre-3); letter-spacing: 0; margin-top: 3px; }

.navigation { display: flex; align-items: stretch; gap: var(--e-1); flex-grow: 1; align-self: stretch; }
.navigation a { display: inline-flex; align-items: center; padding: 0 var(--e-3); min-height: 60px;
  color: var(--encre-2); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; }
.navigation a:hover { color: var(--encre); }
.navigation a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--accent); }

.compte { display: flex; align-items: center; gap: var(--e-4); font-size: var(--t-14); color: var(--encre-2); }
.compte__organisation { font-weight: 600; color: var(--encre); }
.compte__utilisateur { color: var(--encre-3); }
.compte form { margin: 0; display: inline-flex; }

/* Bandeau « démonstration » : sous la barre, pleine largeur, texte inchangé (E17-03, #561). */
.bandeau-demo { margin: 0; padding: var(--e-2) var(--gouttiere); background: var(--demo-fond); color: var(--demo-texte);
  border-top: 1px solid var(--demo-filet); font-size: var(--t-14); font-weight: 500; text-align: center; }
.bandeau-demo .icone { margin-right: 6px; }

.principal { flex-grow: 1; width: 100%; max-width: var(--largeur-max); margin: 0 auto; padding: var(--e-8) var(--gouttiere) var(--e-12); }
.principal--etroit { max-width: var(--largeur-etroite); }
.principal > * + * { margin-top: var(--e-6); }

/* Pied : mentions obligatoires (SPEC §11) et sources de l'écran, lisibles, pas enterrées. */
.pied { background: var(--surface); border-top: 1px solid var(--filet); margin-top: auto; }
.pied__contenu { max-width: var(--largeur-max); margin: 0 auto; padding: var(--e-6) var(--gouttiere) var(--e-8);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--e-4) var(--e-10);
  font-size: var(--t-13); color: var(--encre-2); }
.pied__titre { display: block; font-size: var(--t-12); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--encre-3); margin-bottom: var(--e-2); }
.pied p + p { margin-top: var(--e-2); }
.pied__sources { list-style: none; padding: 0; }
.pied__sources li { display: flex; gap: var(--e-2); align-items: baseline; }
.pied__sources li + li { margin-top: var(--e-1); }
.pied__sources .icone { color: var(--encre-3); position: relative; top: 2px; }
.pied__marque { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e-2);
  padding-top: var(--e-4); border-top: 1px solid var(--filet); color: var(--encre-3); font-size: var(--t-12); }

/* --------------------------------------------------------------------------
   4. Titres de page, retour, étapes
   -------------------------------------------------------------------------- */
.retour { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cible-min); font-size: var(--t-14);
  color: var(--encre-2); text-decoration: none; }
.retour:hover { color: var(--accent); text-decoration: underline; }

.titre-page { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e-4); }
.titre-page__texte { min-width: 0; flex: 1 1 420px; }
.titre-page__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.surtitre { display: block; font-size: var(--t-13); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--encre-3); margin-bottom: var(--e-1); }
.sous-titre { margin-top: var(--e-2); color: var(--encre-2); }

/* Étapes du dossier : liste numérotée reliée par un filet ; faite = coche, courante = pleine, à venir = contour. */
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) 0; counter-reset: etape; }
.etapes li { position: relative; display: flex; align-items: center; gap: var(--e-2); padding-right: var(--e-6); margin-right: var(--e-2);
  font-size: var(--t-14); color: var(--encre-3); }
.etapes li:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; width: var(--e-4); height: 1px; background: var(--filet-fort); }
.etapes__numero { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--filet-fort); font-size: var(--t-12); font-weight: 600; color: var(--encre-2); background: var(--surface); }
.etapes__numero .icone { width: 14px; height: 14px; stroke-width: 2.5; }
.etape--faite { color: var(--encre-2); }
.etape--faite .etapes__numero { border-color: var(--accent); background: var(--accent-clair); color: var(--accent); }
.etape--courante { color: var(--encre); font-weight: 600; }
.etape--courante .etapes__numero { border-color: var(--encre); background: var(--encre); color: var(--surface); }

/* --------------------------------------------------------------------------
   5. Cartes, encarts, alertes
   -------------------------------------------------------------------------- */
.carte { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-2); padding: var(--e-6); box-shadow: var(--ombre-1); }
.carte > * + * { margin-top: var(--e-4); }
.carte__entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.carte__entete h2 { display: flex; align-items: center; gap: var(--e-2); }
.carte__entete h2 .icone { color: var(--encre-3); }
.carte--discrete { background: var(--surface-2); box-shadow: none; }
.aide { font-size: var(--t-13); color: var(--encre-2); }
.aide + .aide { margin-top: var(--e-1); }

/* Alertes : une seule famille en rouge, l'erreur technique. Le blocage de l'émission est une consigne, en encre. */
.alerte { display: flex; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-1);
  border-left: 4px solid var(--erreur-filet); background: var(--erreur-fond); color: var(--erreur-texte); }
.alerte .icone { flex: none; margin-top: 3px; }
.alerte__corps > * + * { margin-top: var(--e-2); }
.alerte__titre { font-weight: 600; }
.alerte a { color: inherit; font-weight: 600; }
.alerte ul { padding-left: 1.1em; }
.alerte--info { border-left-color: var(--info-filet); background: var(--info-fond); color: var(--info-texte); }
.alerte--blocage { border-left-color: var(--encre); background: var(--surface); color: var(--encre); border: 1px solid var(--filet); border-left-width: 4px; }
.alerte--blocage .icone { color: var(--encre); }
.alerte--succes { border-left-color: var(--respectee-texte); background: var(--respectee-fond); color: var(--respectee-texte); }
.alerte--demarche { border-left-color: var(--a-verifier-contour); background: var(--a-verifier-fond); color: var(--a-verifier-texte); }
.alerte--a-verifier { border-left-color: var(--a-verifier-contour); background: var(--a-verifier-fond); color: var(--a-verifier-texte); }

/* Mention obligatoire (SPEC §11) sous les chiffres : visible, texte inchangé. */
.mention { padding: var(--e-3) var(--e-4); border: 1px solid var(--accent-filet); border-left: 4px solid var(--accent);
  background: var(--accent-clair); color: var(--encre); font-weight: 500; border-radius: var(--r-1); font-size: var(--t-14); }

/* --------------------------------------------------------------------------
   6. Pastilles : les quatre familles de réponse, les statuts, les gravités, les origines
   Anatomie : [icône] mot. Le mot est toujours là ; l'icône et la forme doublent la couleur.
   -------------------------------------------------------------------------- */
.pastille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--r-rond);
  border: 1px solid transparent; font-size: var(--t-13); font-weight: 600; line-height: 1.3; white-space: nowrap; vertical-align: middle; }
.pastille .icone { width: 14px; height: 14px; stroke-width: 2.5; }
.pastille--grande { font-size: var(--t-14); padding: 5px 14px 5px 10px; }
.pastille--grande .icone { width: 16px; height: 16px; }

/* Famille 1 : réponse factuelle à une rubrique de l'état des risques */
.pastille--OUI { background: var(--oui-fond); color: var(--oui-texte); border-color: var(--oui-fond); }
.pastille--NON { background: var(--non-fond); color: var(--non-texte); border-color: var(--non-contour); }
/* Famille 2 : une obligation */
.pastille--RESPECTEE { background: var(--respectee-fond); color: var(--respectee-texte); border-color: var(--respectee-fond); }
.pastille--NON_RESPECTEE { background: var(--non-respectee-fond); color: var(--non-respectee-texte); border-color: var(--non-respectee-fond); }
/* Famille 3 : une action humaine est attendue — contour en tirets : le dossier est ouvert, quelqu'un doit passer.
   « À trancher » pour une rubrique de l'état des risques, « À vérifier » pour une obligation, un loyer, la fiche énergie. */
.pastille--A_TRANCHER, .pastille--A_VERIFIER { background: var(--a-verifier-fond); color: var(--a-verifier-texte); border: 1px dashed var(--a-verifier-contour); }
/* Famille 4 : la source ne permet pas de répondre — ardoise, point d'interrogation. Ni rouge, ni l'aspect du NON. */
.pastille--INCONNU { background: var(--inconnu-fond); color: var(--inconnu-texte); border-color: var(--inconnu-fond); }
/* Constaté (obligations du lot) : même famille que RESPECTEE, c'est un fait établi. */
.pastille--CONSTATE { background: var(--respectee-fond); color: var(--respectee-texte); border-color: var(--respectee-fond); }

/* Statuts d'un dossier */
.pastille--CREE { background: var(--accent-clair); color: var(--accent); border-color: var(--accent-clair); }
.pastille--ADRESSE_A_CONFIRMER, .pastille--PARCELLE_INCONNUE { background: var(--a-verifier-fond); color: var(--a-verifier-texte); border: 1px dashed var(--a-verifier-contour); }
.pastille--EMIS { background: var(--respectee-fond); color: var(--respectee-texte); border-color: var(--respectee-fond); }
.pastille--INDICATIF { background: var(--oui-fond); color: var(--oui-texte); border-color: var(--oui-fond); }

/* Gravité d'une exception */
.pastille--CRITIQUE { background: var(--critique-fond); color: var(--critique-texte); border-color: var(--critique-fond); }
.pastille--HAUTE { background: var(--haute-fond); color: var(--haute-texte); border-color: var(--haute-fond); }
.pastille--MOYENNE { background: var(--moyenne-fond); color: var(--moyenne-texte); border-color: var(--moyenne-fond); }

/* Origine d'une parcelle : la couleur de la carte, un trait devant le mot ; MANUELLE en pointillé. */
.pastille--POINT_BAN, .pastille--POINT_RNB, .pastille--MANUELLE { background: var(--surface); color: var(--encre-2); border-color: var(--filet-fort); font-weight: 500; }
.pastille--POINT_BAN::before, .pastille--POINT_RNB::before, .pastille--MANUELLE::before { content: ""; width: 14px; height: 0; border-top: 3px solid; }
.pastille--POINT_BAN::before { border-color: var(--origine-point-ban); }
.pastille--POINT_RNB::before { border-color: var(--origine-point-rnb); }
.pastille--MANUELLE::before { border-top-style: dashed; border-color: var(--origine-manuelle); }

/* Genre d'une suggestion d'adresse */
.genre { display: inline-block; padding: 1px 8px; border-radius: var(--r-rond); font-size: var(--t-12); font-weight: 600; }
.genre--numero { background: var(--accent-clair); color: var(--accent); }
.genre--voie { background: var(--oui-fond); color: var(--oui-texte); }

/* --------------------------------------------------------------------------
   7. La trace : source, date, article, empreinte — le composant de la confiance
   Toujours à portée de la donnée qu'il qualifie ; en chasse fixe pour les identifiants.
   -------------------------------------------------------------------------- */
.trace { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4);
  font-size: var(--t-13); color: var(--encre-2); }
.trace li { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.trace .icone { color: var(--encre-3); position: relative; top: 2px; flex: none; }
.trace__cle { color: var(--encre-3); }
.trace .identifiant { font-size: var(--t-12); color: var(--encre-2); }
.trace--bloc { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e-1) var(--e-3); }
.trace--bloc li { display: contents; }
.trace--bloc .trace__cle { display: inline-flex; align-items: baseline; gap: 6px; }
.trace--pied { padding-top: var(--e-3); border-top: 1px solid var(--filet); }

/* Ligne d'identité d'un dossier sous le titre : parcelle, confirmation, type, référence réglementaire */
.identite { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); margin-top: var(--e-2); font-size: var(--t-14); color: var(--encre-2); }
.identite li { display: inline-flex; align-items: baseline; gap: 6px; }
.identite li + li::before { content: "·"; color: var(--filet-fort); margin-right: var(--e-1); }
.identite { list-style: none; padding: 0; }

/* --------------------------------------------------------------------------
   8. Boutons
   -------------------------------------------------------------------------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--cible-min);
  padding: 0 var(--e-5); border-radius: var(--r-2); border: 1px solid var(--accent); background: var(--accent); color: #FFFFFF;
  font: 600 var(--t-14)/1 var(--police); text-decoration: none; cursor: pointer; white-space: nowrap; }
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #FFFFFF; }
.bouton--secondaire { background: var(--surface); color: var(--accent); }
.bouton--secondaire:hover { background: var(--accent-clair); color: var(--accent-fonce); }
.bouton--discret { background: transparent; border-color: transparent; color: var(--accent); padding: 0 var(--e-3); }
.bouton--discret:hover { background: var(--accent-clair); }
.bouton--petit { min-height: 36px; padding: 0 var(--e-3); font-size: var(--t-13); }
.bouton--large { width: 100%; }
.bouton[disabled], .bouton[aria-disabled="true"] { background: var(--surface-2); border-color: var(--filet); color: var(--encre-3); cursor: not-allowed; }
.bouton[aria-busy="true"] { cursor: progress; }
.bouton-lien { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.actions--droite { justify-content: flex-end; }

/* Chargement d'un fragment (HTMX) : la classe htmx-request est posée par HTMX, sans style injecté (includeIndicatorStyles:false). */
.indicateur { display: none; align-items: center; gap: var(--e-2); color: var(--encre-2); font-size: var(--t-14); }
.htmx-request .indicateur, .htmx-request.indicateur, .indicateur--visible { display: inline-flex; }
.indicateur .icone { animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .indicateur .icone { animation: none; } }

/* --------------------------------------------------------------------------
   9. Formulaires
   -------------------------------------------------------------------------- */
.formulaire { display: flex; flex-direction: column; gap: var(--e-5); }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .champ legend { font-weight: 600; font-size: var(--t-14); }
.champ input:not([type="checkbox"]):not([type="radio"]), .champ select, .champ textarea {
  min-height: 48px; padding: 0 var(--e-4); border: 1px solid var(--filet-fort); border-radius: var(--r-2);
  font: var(--t-16) var(--police); color: var(--encre); background: var(--surface); }
.champ textarea { padding: var(--e-3) var(--e-4); min-height: 88px; resize: vertical; line-height: var(--interligne); }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--encre-2); }
.champ [aria-invalid="true"] { border-color: var(--erreur-filet); border-width: 2px; }
.champ__erreur { display: flex; gap: 6px; align-items: baseline; color: var(--erreur-texte); font-size: var(--t-14); font-weight: 500; }
.champ__ligne { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.champ__ligne input { flex: 1 1 200px; min-width: 0; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }

.choix { border: 0; margin: 0; padding: 0; }
.choix legend { font-weight: 600; font-size: var(--t-14); margin-bottom: var(--e-2); }
.choix__options { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.choix__option { display: flex; align-items: center; gap: var(--e-2); min-height: var(--cible-min); padding: 0 var(--e-4);
  border-radius: var(--r-2); border: 1px solid var(--filet-fort); background: var(--surface); cursor: pointer; font-size: var(--t-14); }
.choix__option:hover { border-color: var(--encre-2); }
.choix__option:has(input:checked) { border: 2px solid var(--accent); background: var(--accent-clair); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. Tableaux
   Un grand tableau défile dans son conteneur, en-tête figé, première colonne figée. Jamais la page.
   -------------------------------------------------------------------------- */
.tableau { overflow: auto; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-2); }
.tableau table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-14); }
.tableau th, .tableau td { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--filet); vertical-align: top; text-align: left; }
.tableau thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--encre-2); font-size: var(--t-12);
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.tableau tbody tr:last-child td, .tableau tbody tr:last-child th { border-bottom: 0; }
.tableau tbody tr:hover td, .tableau tbody tr:hover th { background: var(--surface-2); }
.tableau th:first-child, .tableau td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.tableau thead th:first-child { z-index: 3; background: var(--surface-2); }
.tableau__principal { font-weight: 600; display: block; }
.tableau__secondaire { display: block; font-size: var(--t-12); color: var(--encre-3); margin-top: 2px; }
.tableau__vide { padding: var(--e-8) var(--e-4); text-align: center; color: var(--encre-2); }
.tableau__nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau .pastille { white-space: nowrap; }
.tableau caption { caption-side: bottom; padding: var(--e-2) var(--e-4); text-align: left; font-size: var(--t-13); color: var(--encre-2); }
.ligne--exclue th, .ligne--exclue td { color: var(--encre-3); }

.filtres { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.filtre { min-height: var(--cible-min); padding: 0 var(--e-4); border-radius: var(--r-rond); border: 1px solid var(--filet-fort);
  background: var(--surface); color: var(--encre); font: 500 var(--t-14) var(--police); cursor: pointer; }
.filtre:hover { border-color: var(--encre-2); }
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--surface); }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); font-size: var(--t-14); color: var(--encre-2); }

/* --------------------------------------------------------------------------
   11. Écran « Revue de l'état des risques »
   -------------------------------------------------------------------------- */
.revue { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-6); align-items: start; }
.revue__principal { min-width: 0; display: flex; flex-direction: column; gap: var(--e-4); }
.revue__lateral { position: sticky; top: var(--e-4); display: flex; flex-direction: column; gap: var(--e-4); }

/* Synthèse : combien de rubriques, et combien dans chaque famille. Lecture en trois secondes. */
.synthese { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); padding: var(--e-3) var(--e-4);
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-2); font-size: var(--t-14); color: var(--encre-2); }
.synthese__total { font-weight: 600; color: var(--encre); }
.synthese__familles { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
.synthese__familles a { text-decoration: none; }
.synthese__nombre { font-variant-numeric: tabular-nums; }

/* Carte de rubrique : titre et référence, réponse en évidence, détail, puis la trace en pied. */
.rubrique { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-2); box-shadow: var(--ombre-1); overflow: hidden; }
.rubrique__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4); padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--filet); }
.rubrique__titre { font-size: var(--t-16); font-weight: 600; }
.rubrique__reference { font-size: var(--t-12); color: var(--encre-3); margin-top: 2px; }
.rubrique__reponse { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-1); flex: none; }
.rubrique__retenue { font-size: var(--t-12); color: var(--encre-2); display: inline-flex; align-items: center; gap: 6px; }
.rubrique__corps { padding: var(--e-4) var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); }
.rubrique__motif { font-weight: 600; }
.rubrique__precisions { padding-left: 1.1em; color: var(--encre-2); font-size: var(--t-14); }
.rubrique__precisions li + li { margin-top: 2px; }
.rubrique__pied { padding: var(--e-3) var(--e-5); background: var(--surface-2); border-top: 1px solid var(--filet); }
.rubrique--A_TRANCHER, .rubrique--A_VERIFIER { border-color: var(--a-verifier-contour); }
.rubrique--A_TRANCHER .rubrique__entete, .rubrique--A_VERIFIER .rubrique__entete { background: var(--a-verifier-fond); border-bottom-color: var(--a-verifier-contour); }
.rubrique--INCONNU .rubrique__entete { background: var(--inconnu-fond); }
.rubrique--compacte .rubrique__entete { border-bottom: 0; }

/* Détail à deux colonnes : texte et carte de la rubrique côte à côte quand la place le permet. */
.rubrique__detail { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--e-4); align-items: start; }
.rubrique__carte { margin: 0; }
.rubrique__carte img { display: block; width: 100%; height: auto; border: 1px solid var(--filet); border-radius: var(--r-1); }
.rubrique__carte figcaption { margin-top: var(--e-1); font-size: var(--t-12); color: var(--encre-3); }
.carte-substitut { aspect-ratio: 4 / 3; border: 1px solid var(--filet); border-radius: var(--r-1); background:
  repeating-linear-gradient(45deg, #EEF2EC 0 6px, #E6ECE4 6px 12px); position: relative; overflow: hidden; }
.carte-substitut__parcelle { position: absolute; inset: 28% 30% 30% 32%; border: 3px solid var(--origine-point-ban); background: rgba(29, 79, 140, 0.15); transform: skewX(-6deg) rotate(3deg); }
.carte-substitut__zone { position: absolute; inset: 55% -10% -10% 50%; border: 2px solid #8B2A1E; background: rgba(139, 42, 30, 0.18); transform: rotate(-12deg); }
.carte-substitut__legende { position: absolute; left: 8px; bottom: 6px; font-size: 11px; color: var(--encre-2); background: rgba(255,255,255,0.85); padding: 1px 6px; border-radius: 3px; }

.pieces { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-14); }
.pieces li { display: flex; gap: var(--e-2); align-items: baseline; }
.pieces .icone { color: var(--encre-3); position: relative; top: 2px; }
.piece--a-fournir { color: var(--encre-2); }

/* Validation humaine : qui, quand, quoi, pourquoi. Un cadre à gauche, en encre. */
.validation { padding: var(--e-3) var(--e-4); border-left: 3px solid var(--encre); background: var(--surface-2); border-radius: 0 var(--r-1) var(--r-1) 0; font-size: var(--t-14); }
.validation > * + * { margin-top: var(--e-1); }
.validation__justification { color: var(--encre-2); }

/* Formulaire « Trancher cette rubrique » : dans la carte, sous le détail, bien délimité. */
.trancher { padding: var(--e-4); border: 1px dashed var(--a-verifier-contour); border-radius: var(--r-2); background: var(--surface); display: flex; flex-direction: column; gap: var(--e-3); }
.trancher legend, .trancher__titre { display: flex; align-items: center; gap: var(--e-2); font-weight: 600; font-size: var(--t-14); color: var(--a-verifier-texte); }
.trancher .choix__option:has(input:checked) { border-color: var(--a-verifier-texte); background: var(--a-verifier-fond); }
.trancher .bouton--secondaire { align-self: flex-start; border-color: var(--a-verifier-texte); color: var(--a-verifier-texte); }
.trancher .bouton--secondaire:hover { background: var(--a-verifier-fond); color: var(--a-verifier-texte); }

/* Squelette de chargement d'un fragment : la place du contenu, sans texte faux. */
.squelette { display: flex; flex-direction: column; gap: var(--e-2); }
.squelette__ligne { height: 12px; border-radius: var(--r-1); background: linear-gradient(90deg, #ECEAE4 0%, #F4F3EE 50%, #ECEAE4 100%); background-size: 200% 100%; animation: glisse 1.4s ease-in-out infinite; }
.squelette__ligne--courte { width: 40%; }
.squelette__ligne--moyenne { width: 70%; }
@keyframes glisse { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .squelette__ligne { animation: none; } }

/* Liste à puces de clés et valeurs (informations complémentaires, document émis) */
.proprietes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e-2) var(--e-4); font-size: var(--t-14); }
.proprietes dt { color: var(--encre-3); }
.proprietes dd { margin: 0; }

/* Liste de contrôle avant émission : chaque condition dit où elle en est. */
.controle { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-14); }
.controle li { display: flex; gap: var(--e-2); align-items: flex-start; }
.controle .icone { flex: none; margin-top: 3px; }
.controle__ok .icone { color: var(--respectee-texte); }
.controle__attente .icone { color: var(--a-verifier-texte); }
.controle__non .icone { color: var(--encre-3); }
.controle a { font-weight: 500; }


/* --------------------------------------------------------------------------
   11 b. Écrans du parcours (palier 2) : accueil, nouveau dossier, adresse à confirmer, parcelle, émission, vérification
   -------------------------------------------------------------------------- */

/* Accueil : recherche et filtres */
.recherche { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.recherche label { font-weight: 600; font-size: var(--t-14); }
.recherche__champ { position: relative; display: flex; align-items: center; }
.recherche__champ .icone { position: absolute; left: var(--e-4); color: var(--encre-3); pointer-events: none; }
.recherche input { width: 100%; min-height: 48px; padding: 0 var(--e-4) 0 44px; border: 1px solid var(--filet-fort); border-radius: var(--r-2);
  font: var(--t-16) var(--police); color: var(--encre); background: var(--surface); }
.recherche input:hover { border-color: var(--encre-2); }
.liste { display: flex; flex-direction: column; gap: var(--e-4); }
.liste__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.filtre__nombre { margin-left: 6px; color: var(--encre-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.filtre[aria-pressed="true"] .filtre__nombre { color: rgba(255, 255, 255, 0.75); }
.tableau__action { white-space: nowrap; }
.tableau__action a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-weight: 500; text-decoration: none; }
.tableau__action a:hover { text-decoration: underline; }
.tableau__vide { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); padding: var(--e-10) var(--e-4); }
.tableau__vide .icone { width: 32px; height: 32px; color: var(--encre-3); stroke-width: 1.5; }
.tableau__vide p { max-width: 42ch; }
.tableau tbody.squelette-tableau td { padding-top: var(--e-4); padding-bottom: var(--e-4); }

/* Nouveau dossier : suggestions d'adresse (fragment HTMX) */
.suggestions { list-style: none; margin: 0; padding: var(--e-2); border: 1px solid var(--filet-fort); border-radius: var(--r-3);
  background: var(--surface); box-shadow: var(--ombre-2); display: flex; flex-direction: column; gap: 2px; }
.suggestion { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 52px; padding: var(--e-2) var(--e-3);
  border: 0; border-radius: var(--r-2); background: transparent; color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.suggestion:hover, .suggestion:focus-visible { background: var(--accent-clair); }
.suggestion__adresse { display: flex; flex-direction: column; min-width: 0; }
.suggestion__voie { font-weight: 600; }
.suggestion__commune { font-size: var(--t-13); color: var(--encre-2); }
.suggestion__meta { display: flex; gap: var(--e-2); align-items: center; font-size: var(--t-12); color: var(--encre-3); white-space: nowrap; }
.suggestions__vide { padding: var(--e-3); color: var(--encre-2); }
.suggestions__source { padding: var(--e-2) var(--e-3) var(--e-1); font-size: var(--t-12); color: var(--encre-3); border-top: 1px solid var(--filet); margin-top: var(--e-1); }

/* Adresse à confirmer : candidats en cartes radio */
.candidats { display: flex; flex-direction: column; gap: var(--e-2); }
.candidat { display: flex; align-items: center; gap: var(--e-3); min-height: 60px; padding: var(--e-3) var(--e-4); border-radius: var(--r-2);
  border: 1px solid var(--filet-fort); background: var(--surface); cursor: pointer; }
.candidat:hover { border-color: var(--encre-2); }
.candidat:has(input:checked) { border: 2px solid var(--accent); background: var(--accent-clair); }
.candidat input { flex: none; }
.candidat__texte { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.candidat__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-weight: 600; }
.candidat__detail { font-size: var(--t-13); color: var(--encre-2); }
.candidat__score { font-size: var(--t-12); color: var(--encre-3); white-space: nowrap; }
.candidat--voie { border-style: dashed; }

/* Parcelle : carte à gauche, panneau à droite */
.ecran-parcelles { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: var(--e-6); align-items: start; }
.carte-parcelles { position: relative; height: 460px; border: 1px solid var(--filet); border-radius: var(--r-2); overflow: hidden;
  background: repeating-linear-gradient(45deg, #EEF2EC 0 8px, #E6ECE4 8px 16px); }
.carte-parcelles__voisine { position: absolute; border: 2px solid #9AA3AE; background: rgba(255, 255, 255, 0.55); }
.carte-parcelles__bien { position: absolute; border: 3px solid var(--origine-point-ban); background: rgba(29, 79, 140, 0.18); }
.carte-parcelles__bien--POINT_RNB { border-color: var(--origine-point-rnb); background: rgba(180, 83, 9, 0.18); }
.carte-parcelles__bien--MANUELLE { border: 3px dashed var(--origine-manuelle); background: rgba(107, 63, 160, 0.18); }
.carte-parcelles__ban { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--origine-point-ban); border: 3px solid #FFFFFF; box-shadow: 0 0 0 2px var(--origine-point-ban); }
.carte-parcelles__rnb { position: absolute; width: 12px; height: 12px; background: var(--origine-point-rnb); border: 2px solid #FFFFFF; transform: rotate(45deg); }
.carte-parcelles__rue { position: absolute; left: -5%; right: -5%; height: 26px; background: #F7F6F2; border-top: 1px solid #D5D9D2; border-bottom: 1px solid #D5D9D2; }
.carte-parcelles__nom-rue { position: absolute; font-size: 11px; color: var(--encre-3); font-style: italic; }
.carte-parcelles__zoom { position: absolute; top: var(--e-3); left: var(--e-3); display: flex; flex-direction: column; border: 1px solid var(--filet-fort); border-radius: var(--r-1); overflow: hidden; background: var(--surface); }
.carte-parcelles__zoom button { width: var(--cible-min); height: var(--cible-min); border: 0; background: var(--surface); font: 600 var(--t-18) var(--police); cursor: pointer; color: var(--encre); }
.carte-parcelles__zoom button + button { border-top: 1px solid var(--filet); }
.carte-parcelles__fond { position: absolute; right: var(--e-2); bottom: var(--e-1); font-size: 11px; color: var(--encre-3); background: rgba(255, 255, 255, 0.85); padding: 1px 6px; border-radius: 3px; }
.legende { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: var(--t-13); color: var(--encre-2); }
.legende__element { display: flex; align-items: center; gap: 6px; }
.legende__element::before { content: ""; display: inline-block; width: 18px; height: 12px; border: 2px solid; }
.legende__element--POINT_BAN::before { border-color: var(--origine-point-ban); background: rgba(29, 79, 140, 0.15); }
.legende__element--POINT_RNB::before { border-color: var(--origine-point-rnb); background: rgba(180, 83, 9, 0.15); }
.legende__element--MANUELLE::before { border: 2px dashed var(--origine-manuelle); background: rgba(107, 63, 160, 0.15); }
.legende__element--voisine::before { border-color: #9AA3AE; background: rgba(255, 255, 255, 0.6); }
.legende__element--marqueur-ban::before { width: 12px; height: 12px; border-radius: 50%; border-color: #FFFFFF; background: var(--origine-point-ban); box-shadow: 0 0 0 2px var(--origine-point-ban); }
.legende__element--marqueur-rnb::before { width: 10px; height: 10px; border: 0; background: var(--origine-point-rnb); transform: rotate(45deg); }
.parcelles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.parcelle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); padding: var(--e-2) var(--e-3); border: 1px solid var(--filet); border-radius: var(--r-2); border-left-width: 4px; }
.parcelle--POINT_BAN { border-left-color: var(--origine-point-ban); }
.parcelle--POINT_RNB { border-left-color: var(--origine-point-rnb); }
.parcelle--MANUELLE { border-left: 4px dashed var(--origine-manuelle); }
.parcelle .identifiant { font-weight: 500; }
.parcelle__retrait { margin-left: auto; }
.confirmation { padding-top: var(--e-4); border-top: 1px solid var(--filet); display: flex; flex-direction: column; gap: var(--e-2); }
.succes { display: flex; gap: var(--e-2); align-items: center; color: var(--respectee-texte); font-weight: 600; }

/* Émission et signature */
.recapitulatif { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-4); }
.recapitulatif__bloc { padding: var(--e-3) var(--e-4); border: 1px solid var(--filet); border-radius: var(--r-2); background: var(--surface-2); }
.recapitulatif__cle { display: block; font-size: var(--t-12); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-3); margin-bottom: var(--e-1); }
.recapitulatif__valeur { font-weight: 600; }
.recapitulatif__detail { display: block; font-size: var(--t-13); color: var(--encre-2); margin-top: 2px; }
.document-emis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); align-items: start; padding: var(--e-4); border: 1px solid var(--accent-filet); border-radius: var(--r-2); background: var(--accent-clair); }
.document-emis__sceau { width: 48px; height: 48px; color: var(--accent); stroke-width: 1.5; }
.document-emis__titre { font-weight: 600; font-size: var(--t-18); }
.document-emis .trace--bloc { margin-top: var(--e-3); }
.document-emis .actions { margin-top: var(--e-4); }
.empreinte { display: block; padding: var(--e-3) var(--e-4); border: 1px solid var(--filet); border-radius: var(--r-2); background: var(--surface-2);
  font-family: var(--police-mono); font-size: var(--t-14); line-height: 1.6; letter-spacing: 0.02em; overflow-wrap: anywhere; word-break: break-all; }
.etapes-signature { list-style: none; padding: 0; counter-reset: etape; display: flex; flex-direction: column; gap: var(--e-4); }
.etapes-signature > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.etapes-signature > li::before { counter-increment: etape; content: counter(etape); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--encre); font-weight: 600; font-size: var(--t-14); }
.etapes-signature > li > div > * + * { margin-top: var(--e-2); }
.consentement { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border: 1px solid var(--filet-fort); border-radius: var(--r-2); font-size: var(--t-14); cursor: pointer; }
.consentement input { margin-top: 3px; }
.code-otp { width: 10ch; text-align: center; letter-spacing: 0.3em; font-family: var(--police-mono); font-size: var(--t-22); }

/* Page publique (vérification, signature) : en-tête sans navigation, contenu étroit */
.entete--publique .entete__contenu { justify-content: space-between; }
.entete__mention-publique { font-size: var(--t-13); color: var(--encre-2); }
.verif { display: flex; flex-direction: column; gap: var(--e-4); }
.verif__statut { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); align-items: center; padding: var(--e-5); border-radius: var(--r-2); border: 1px solid var(--filet); background: var(--surface); }
.verif__statut .icone { width: 44px; height: 44px; stroke-width: 1.5; color: var(--accent); }
.verif__statut--remplace .icone { color: var(--oui-texte); }
.verif__statut--introuvable .icone, .verif__statut--expire .icone { color: var(--encre-3); }
.verif__statut h2 { font-size: var(--t-22); }
.verif__statut p { margin-top: var(--e-1); color: var(--encre-2); }
.verif__etape { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.verif__etape > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--encre); font-weight: 600; font-size: var(--t-14); }
.verif__etape > div > * + * { margin-top: var(--e-2); }
.commandes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-14); }
.commandes code { display: inline-block; padding: 2px 8px; background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r-1); }
.comparateur { display: flex; flex-direction: column; gap: var(--e-3); }
.comparateur input[type="file"] { min-height: var(--cible-min); padding: var(--e-2); border: 1px dashed var(--filet-fort); border-radius: var(--r-2); background: var(--surface); width: 100%; }
.comparateur__resultat { display: flex; gap: var(--e-2); align-items: center; padding: var(--e-3) var(--e-4); border-radius: var(--r-1); font-weight: 600; }
.comparateur__resultat--identique { background: var(--respectee-fond); color: var(--respectee-texte); }
.comparateur__resultat--different { background: var(--erreur-fond); color: var(--erreur-texte); }

/* Positions des formes de la carte de substitution (maquette seulement ; Leaflet dessine la vraie carte) */
.c-rue { top: 62%; transform: rotate(-4deg); }
.c-nom-rue { left: 14%; top: 61.5%; transform: rotate(-4deg); }
.c-v1 { left: 4%; top: 12%; width: 20%; height: 42%; transform: rotate(-4deg); }
.c-v2 { left: 26%; top: 10%; width: 16%; height: 44%; transform: rotate(-4deg); }
.c-v3 { left: 66%; top: 6%; width: 24%; height: 46%; transform: rotate(-4deg); }
.c-v4 { left: 8%; top: 72%; width: 30%; height: 40%; transform: rotate(-4deg); }
.c-v5 { left: 44%; top: 74%; width: 40%; height: 40%; transform: rotate(-4deg); }
.c-bien { left: 43%; top: 8%; width: 22%; height: 46%; transform: rotate(-4deg); }
.c-bien-2 { left: 66%; top: 6%; width: 24%; height: 46%; transform: rotate(-4deg); }
.c-ban { left: 52%; top: 64%; }
.c-rnb { left: 53%; top: 30%; }

@media (max-width: 1024px) {
  .ecran-parcelles { grid-template-columns: minmax(0, 1fr); }
  .carte-parcelles { height: 380px; }
}
@media (max-width: 480px) {
  .carte-parcelles { height: 300px; }
  .liste__barre { flex-direction: column; align-items: stretch; }
  .suggestion { flex-direction: column; align-items: flex-start; gap: var(--e-1); }
  .document-emis { grid-template-columns: minmax(0, 1fr); }
  .verif__statut { grid-template-columns: minmax(0, 1fr); }
  .recapitulatif { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   11 c. Gestion de parc (priorité 2) : parc, lot, obligations, fiche valeur, fiche énergie
   -------------------------------------------------------------------------- */
.colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-6); align-items: start; }
.colonnes__principal { min-width: 0; display: flex; flex-direction: column; gap: var(--e-4); }
.colonnes__lateral { display: flex; flex-direction: column; gap: var(--e-4); }

/* Compteurs du parc : des constats datés, pas un tableau de bord */
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-3); list-style: none; padding: 0; margin: 0; }
.compteur { padding: var(--e-3) var(--e-4); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-2); display: flex; flex-direction: column; gap: 2px; }
.compteur__nombre { font-size: var(--t-28); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.compteur__libelle { font-size: var(--t-13); color: var(--encre-2); display: inline-flex; align-items: center; gap: 6px; }
.compteur--CRITIQUE { border-left: 4px solid var(--critique-fond); }
.compteur--HAUTE { border-left: 4px solid var(--oui-texte); }
.compteur--MOYENNE { border-left: 4px solid var(--inconnu-texte); }
.compteur--total { border-left: 4px solid var(--encre); }

/* Barre de filtres du parc : formulaire GET, libellés visibles */
.filtres-parc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3) var(--e-4); }
.filtres-parc .champ { min-width: 200px; }
.filtres-parc .champ select { min-height: var(--cible-min); }
.filtres-parc__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-left: auto; }

/* Tableau du parc : une ligne par lot, les exceptions empilées dans la cellule */
.tableau--parc table { min-width: 960px; }
.tableau--parc td { vertical-align: top; }
.lot__reference { font-weight: 600; font-family: var(--police-mono); font-size: var(--t-14); }
.lot__adresse { display: block; font-size: var(--t-13); color: var(--encre-2); margin-top: 2px; }
.exceptions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.exception { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2) var(--e-3); align-items: start; padding: var(--e-2) 0; }
.exception + .exception { border-top: 1px solid var(--filet); }
.exception__type { font-weight: 600; }
.exception__libelle { color: var(--encre); }
.exception__trace { margin-top: var(--e-1); }
.exception__action { margin-top: var(--e-1); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.exception--sans { color: var(--encre-2); font-size: var(--t-14); }
.echeance { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Fiche du lot : formulaires compacts en colonne latérale */
.formulaire--compact { gap: var(--e-3); }
.formulaire--compact .champ select { min-height: var(--cible-min); }
.formulaire--compact .bouton { align-self: flex-start; }
.dossiers-successifs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.dossiers-successifs > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--e-3); align-items: start; padding: var(--e-2) 0; border-top: 1px solid var(--filet); }
.dossiers-successifs > li:first-child { border-top: 0; }
.dossiers-successifs__numero { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--filet-fort); font-size: var(--t-12); font-weight: 600; color: var(--encre-2); }
.veille { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-14); }
.veille > li { display: flex; gap: var(--e-2); align-items: flex-start; }
.veille .icone { flex: none; margin-top: 3px; color: var(--encre-3); }
.veille ul { padding-left: 1.1em; margin-top: var(--e-1); color: var(--encre-2); }
.pieces-permis { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.piece-permis { padding: var(--e-3) var(--e-4); border: 1px solid var(--filet); border-radius: var(--r-2); font-size: var(--t-14); }
.piece-permis > * + * { margin-top: var(--e-1); }

/* Obligations du lot : tableau, l'obligation en en-tête de ligne, la réponse avec sa pastille */
.tableau--obligations table { min-width: 1040px; }
.tableau--obligations th[scope="row"] { font-weight: 600; min-width: 200px; }
.tableau--obligations .pastille { margin-bottom: var(--e-1); }
.obligation__reponse { display: block; font-size: var(--t-13); color: var(--encre-2); }
.obligation__article { font-size: var(--t-13); color: var(--encre-2); }

/* Fiche valeur : l'indicateur, puis la mention sous les chiffres, puis les ventes */
.indicateur { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-4); }
.indicateur__bloc { padding: var(--e-4); border: 1px solid var(--filet); border-radius: var(--r-2); background: var(--surface-2); }
.indicateur__cle { display: block; font-size: var(--t-12); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-3); margin-bottom: var(--e-1); }
.indicateur__valeur { font-size: var(--t-28); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.indicateur__valeur--moyenne { font-size: var(--t-22); }
.indicateur__detail { display: block; font-size: var(--t-13); color: var(--encre-2); margin-top: var(--e-1); }
.indicateur__bloc--principal { background: var(--surface); border-color: var(--encre); }
.carte-comparables { position: relative; height: 360px; border: 1px solid var(--filet); border-radius: var(--r-2); overflow: hidden;
  background: repeating-linear-gradient(45deg, #EEF2EC 0 8px, #E6ECE4 8px 16px); }
.carte-comparables__rayon { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed var(--origine-point-ban); }
.carte-comparables__bien { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--origine-point-ban); border: 3px solid #FFFFFF; box-shadow: 0 0 0 2px var(--origine-point-ban); }
.carte-comparables__vente { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--respectee-texte); border: 2px solid #FFFFFF; }
.carte-comparables__vente--exclue { background: #FFFFFF; border: 2px solid var(--erreur-filet); }
.legende__element--comparable::before { width: 12px; height: 12px; border-radius: 50%; border: 0; background: var(--respectee-texte); }
.legende__element--comparable-exclu::before { width: 10px; height: 10px; border-radius: 50%; border-color: var(--erreur-filet); background: #FFFFFF; }
.legende__element--rayon::before { width: 18px; height: 12px; border-radius: 50%; border: 2px dashed var(--origine-point-ban); }
.tableau--comparables table { min-width: 820px; }
.essais summary { cursor: pointer; font-weight: 600; font-size: var(--t-14); min-height: var(--cible-min); display: flex; align-items: center; gap: 6px; list-style: none; }
.essais summary::before { content: "\25B8"; color: var(--encre-3); }
.essais[open] summary::before { content: "\25BE"; }

/* Fiche énergie : le DPE tel que publié ; l'étiquette est une lettre, la couleur double seulement */
.dpe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.etiquettes { display: flex; gap: var(--e-3); }
.etiquette { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); }
.etiquette__lettre { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-2); font-size: var(--t-34); font-weight: 700; color: #FFFFFF; border: 2px solid rgba(22, 32, 42, 0.2); }
.etiquette__cle { font-size: var(--t-12); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-3); }
/* Lettres : couleurs usuelles des étiquettes, assombries pour un texte blanc à 4,5:1 au moins. */
.etiquette--A .etiquette__lettre { background: #1F6B3F; } .etiquette--B .etiquette__lettre { background: #2E7D32; }
.etiquette--C .etiquette__lettre { background: #4F7A1B; } .etiquette--D .etiquette__lettre { background: #8A6D00; }
.etiquette--E .etiquette__lettre { background: #9A5A00; } .etiquette--F .etiquette__lettre { background: #A33A00; }
.etiquette--G .etiquette__lettre { background: #8B2A1E; }
.calendrier { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-14); }
.calendrier li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--e-3); align-items: baseline; padding: var(--e-2) 0; border-top: 1px solid var(--filet); }
.calendrier li:first-child { border-top: 0; }
.calendrier__date { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Positions des ventes sur la carte de substitution (maquette seulement) */
.cv-1 { left: 38%; top: 36%; }
.cv-2 { left: 60%; top: 30%; }
.cv-3 { left: 30%; top: 55%; }
.cv-4 { left: 66%; top: 62%; }
.cv-5 { left: 45%; top: 22%; }
.cv-6 { left: 72%; top: 45%; }
.cv-7 { left: 26%; top: 40%; }
.cv-8 { left: 58%; top: 72%; }
.cv-9 { left: 40%; top: 70%; }
.cv-10 { left: 74%; top: 30%; }
.cv-11 { left: 33%; top: 26%; }
.cv-12 { left: 62%; top: 20%; }
.cv-13 { left: 48%; top: 80%; }
.cv-14 { left: 20%; top: 66%; }

@media (max-width: 1024px) {
  .colonnes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .filtres-parc__actions { margin-left: 0; width: 100%; }
  .exception { grid-template-columns: minmax(0, 1fr); }
  .dpe { grid-template-columns: minmax(0, 1fr); }
  .indicateur { grid-template-columns: minmax(0, 1fr); }
  .carte-comparables { height: 280px; }
  .etiquette__lettre { width: 52px; height: 52px; font-size: var(--t-28); }
}


/* --------------------------------------------------------------------------
   11 d. Priorité 3 : loyers, état fait ailleurs, organisation, partage
   -------------------------------------------------------------------------- */
/* Sous-navigation d'une famille de pages (organisation) */
.sous-navigation { display: flex; flex-wrap: wrap; gap: var(--e-1); border-bottom: 1px solid var(--filet); }
.sous-navigation a { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: 0 var(--e-4); color: var(--encre-2); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.sous-navigation a:hover { color: var(--encre); }
.sous-navigation a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--accent); }
.compte__organisation a { color: inherit; text-decoration: none; }
.compte__organisation a:hover { text-decoration: underline; }

/* Résultat d'une évaluation (loyers, évolution) : pastille, libellé, trace */
.evaluation { display: flex; flex-direction: column; gap: var(--e-2); }
.evaluation__entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.evaluation__libelle { font-weight: 500; }
.evaluation__libelle--long { font-weight: 400; }
.avertissements { padding-left: 1.1em; font-size: var(--t-14); color: var(--encre-2); display: flex; flex-direction: column; gap: var(--e-1); }
.tableau--references table { min-width: 980px; }
.tableau--references td, .tableau--references th { white-space: nowrap; }
.chiffre { font-variant-numeric: tabular-nums; }
.ecart { display: inline-flex; align-items: baseline; gap: 6px; padding: var(--e-2) var(--e-3); border-radius: var(--r-1); background: var(--non-respectee-fond); color: var(--non-respectee-texte); font-weight: 600; font-variant-numeric: tabular-nums; }
.ecart--dans-la-limite { background: var(--respectee-fond); color: var(--respectee-texte); }

/* État fait ailleurs : saisie par rubrique, provenance d'un champ pré-rempli */
.saisie-rubriques { display: flex; flex-direction: column; gap: var(--e-3); }
.saisie-rubrique { padding: var(--e-3) var(--e-4); border: 1px solid var(--filet); border-radius: var(--r-2); }
.saisie-rubrique legend { font-weight: 600; font-size: var(--t-14); padding: 0 var(--e-1); }
.saisie-rubrique .aide { margin-bottom: var(--e-2); }
.saisie-rubrique .choix__options { gap: var(--e-2); }
.provenance { margin-top: var(--e-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); padding: var(--e-2) var(--e-3); border: 1px solid var(--accent-filet); border-left: 4px solid var(--accent); background: var(--accent-clair); border-radius: var(--r-1); font-size: var(--t-14); }
.provenance q { font-style: italic; }
.provenance label { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 600; min-height: var(--cible-min); }
.tableau--comparaison table { min-width: 960px; }
.comparaison__reponse { font-weight: 600; text-transform: lowercase; }
.pastille--ECART { background: var(--oui-fond); color: var(--oui-texte); border-color: var(--oui-fond); }
.pastille--SANS_ECART { background: var(--inconnu-fond); color: var(--inconnu-texte); border-color: var(--inconnu-fond); } /* résultat d'un contrôle entier : ardoise, jamais vert */
.pastille--ACCORD, .pastille--NON_COMPARABLE { background: var(--inconnu-fond); color: var(--inconnu-texte); border-color: var(--inconnu-fond); }
.pastille--NON_CITE { background: var(--non-fond); color: var(--non-texte); border-color: var(--non-contour); }
.pastille--INDETERMINE { background: var(--inconnu-fond); color: var(--inconnu-texte); border-color: var(--inconnu-fond); }
/* Résumé d'un contrôle : une phrase, qui peut passer à la ligne */
.pastille--ECART, .pastille--SANS_ECART, .pastille--INDETERMINE, .pastille--ACCORD, .pastille--NON_COMPARABLE { white-space: normal; text-align: left; align-items: flex-start; }
.pastille--ECART .icone, .pastille--SANS_ECART .icone, .pastille--INDETERMINE .icone, .pastille--ACCORD .icone, .pastille--NON_COMPARABLE .icone { margin-top: 3px; }
.etats-saisis { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.etats-saisis li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3); padding: var(--e-2) 0; border-top: 1px solid var(--filet); }
.etats-saisis li:first-child { border-top: 0; }

/* Clé, secret, lien : une valeur à copier maintenant, jamais réaffichée */
.secret { padding: var(--e-4); border: 1px solid var(--oui-texte); border-left: 4px solid var(--oui-texte); border-radius: var(--r-2); background: var(--oui-fond); display: flex; flex-direction: column; gap: var(--e-3); }
.secret__titre { font-weight: 600; display: flex; align-items: center; gap: var(--e-2); }
.secret input, .secret code { display: block; width: 100%; padding: var(--e-3) var(--e-4); border: 1px solid var(--filet-fort); border-radius: var(--r-2); background: var(--surface); font-family: var(--police-mono); font-size: var(--t-14); color: var(--encre); overflow-wrap: anywhere; word-break: break-all; }
.secret input { min-height: var(--cible-min); }
.offre { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); }
.offre__jauge { flex: 1 1 200px; height: 8px; border-radius: var(--r-rond); background: var(--surface-2); border: 1px solid var(--filet); overflow: hidden; }
.offre__jauge span { display: block; height: 100%; background: var(--accent); width: 72%; }
.offre__jauge--pleine span { width: 100%; background: var(--oui-texte); }
.role { font-family: var(--police-mono); font-size: var(--t-13); padding: 1px 8px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--filet); }
.apercu-logo { max-height: 80px; width: auto; border: 1px solid var(--filet); padding: var(--e-2); background: var(--surface); border-radius: var(--r-1); }
.logo-substitut { display: inline-flex; align-items: center; gap: var(--e-2); height: 64px; padding: 0 var(--e-4); border: 1px solid var(--filet); border-radius: var(--r-1); background: var(--surface-2); color: var(--encre-2); font-weight: 600; font-size: var(--t-18); }
.logo-substitut::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--encre-3); }
.evenements { display: flex; flex-direction: column; gap: var(--e-2); }
.evenements label { display: flex; align-items: center; gap: var(--e-2); min-height: var(--cible-min); font-size: var(--t-14); }

@media (max-width: 480px) {
  .provenance { flex-direction: column; align-items: flex-start; }
  .evaluation__entete { align-items: flex-start; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   12. Page du système de design (document de travail, pas un écran du produit)
   -------------------------------------------------------------------------- */
.nuancier { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-3); list-style: none; padding: 0; }
.nuancier li { border: 1px solid var(--filet); border-radius: var(--r-2); overflow: hidden; background: var(--surface); font-size: var(--t-12); }
.nuancier__echantillon { height: 56px; }
.nuancier__texte { padding: var(--e-2) var(--e-3); }
.nuancier__texte strong { display: block; font-size: var(--t-13); }
.nuancier__texte code { font-size: 11px; }
.echelle { display: flex; flex-direction: column; gap: var(--e-3); }
.echelle__ligne { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--e-4); align-items: baseline; }
.echelle__cle { font-size: var(--t-12); color: var(--encre-3); font-family: var(--police-mono); }
.vitrine { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.vitrine--colonne { flex-direction: column; align-items: stretch; }
.espaces { display: flex; align-items: flex-end; gap: var(--e-3); }
.espaces span { display: block; background: var(--accent-clair); border: 1px solid var(--accent-filet); }
.grille-composants { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--e-6); }
.cadre-etat { border: 1px dashed var(--filet-fort); border-radius: var(--r-2); padding: var(--e-4); }
.cadre-etat > .surtitre { margin-bottom: var(--e-3); }
.cadre-etat .revue__lateral { position: static; }


/* Nuancier et échelles de la page du système de design (jamais dans un écran du produit) */
.n--papier { background: var(--papier); } .n--surface { background: var(--surface); border-bottom: 1px solid var(--filet); }
.n--surface-2 { background: var(--surface-2); } .n--encre { background: var(--encre); } .n--encre-2 { background: var(--encre-2); }
.n--encre-3 { background: var(--encre-3); } .n--filet { background: var(--filet); } .n--filet-fort { background: var(--filet-fort); }
.n--accent { background: var(--accent); } .n--accent-fonce { background: var(--accent-fonce); } .n--accent-clair { background: var(--accent-clair); }
.n--oui { background: var(--oui-fond); } .n--non { background: var(--non-fond); border-bottom: 1px solid var(--non-contour); }
.n--respectee { background: var(--respectee-fond); } .n--non-respectee { background: var(--non-respectee-fond); }
.n--a-verifier { background: var(--a-verifier-fond); border-bottom: 1px dashed var(--a-verifier-contour); } .n--inconnu { background: var(--inconnu-fond); }
.n--erreur { background: var(--erreur-fond); border-left: 4px solid var(--erreur-filet); } .n--info { background: var(--info-fond); border-left: 4px solid var(--info-filet); }
.n--demo { background: var(--demo-fond); } .n--critique { background: var(--critique-fond); }
.ech--28 { font-size: var(--t-28); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.ech--22 { font-size: var(--t-22); font-weight: 600; line-height: 1.25; } .ech--18 { font-size: var(--t-18); font-weight: 600; }
.ech--16-600 { font-weight: 600; } .ech--14 { font-size: var(--t-14); } .ech--13 { font-size: var(--t-13); color: var(--encre-2); }
.esp--4 { width: 4px; height: 4px; } .esp--8 { width: 8px; height: 8px; } .esp--12 { width: 12px; height: 12px; } .esp--16 { width: 16px; height: 16px; }
.esp--20 { width: 20px; height: 20px; } .esp--24 { width: 24px; height: 24px; } .esp--32 { width: 32px; height: 32px; } .esp--40 { width: 40px; height: 40px; } .esp--48 { width: 48px; height: 48px; }
.largeur-420 { max-width: 420px; } .largeur-560 { max-width: 560px; }
.exemple-pied { border: 1px solid var(--filet); border-radius: var(--r-2); }

/* --------------------------------------------------------------------------
   13. Largeurs
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .revue { grid-template-columns: minmax(0, 1fr); }
  .revue__lateral { position: static; }
  .rubrique__detail { grid-template-columns: minmax(0, 1fr); }
  .rubrique__carte { max-width: 360px; }
}

@media (max-width: 768px) {
  :root { --gouttiere: 16px; }
  h1 { font-size: var(--t-22); }
  .entete__contenu { flex-wrap: wrap; gap: 0 var(--e-4); min-height: 0; padding-top: var(--e-2); padding-bottom: 0; }
  .marque { min-height: var(--cible-min); }
  .compte { margin-left: auto; }
  .navigation { order: 3; flex-basis: 100%; overflow-x: auto; gap: 0; }
  .navigation a { min-height: var(--cible-min); padding: 0 var(--e-3); flex: none; }
  .principal { padding-top: var(--e-5); }
  .carte { padding: var(--e-4); }
  .pied__contenu { grid-template-columns: minmax(0, 1fr); }
  .tableau { max-height: none; }
  /* Cibles d'au moins 44 px pour tout ce qui se touche */
  .bouton, .bouton-lien, .filtre, .navigation a, .retour,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: var(--cible-min); }
  .bouton-lien { display: inline-flex; align-items: center; }
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
}

@media (max-width: 480px) {
  .etapes li { padding-right: var(--e-4); margin-right: var(--e-1); }
  .etapes__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .etape--courante .etapes__libelle { position: static; width: auto; height: auto; clip-path: none; }
  .titre-page__actions { width: 100%; }
  .titre-page__actions .bouton { flex: 1 1 auto; }
  .rubrique__entete { flex-direction: column; align-items: stretch; padding: var(--e-3) var(--e-4); }
  .rubrique__reponse { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .rubrique__corps, .rubrique__pied { padding-left: var(--e-4); padding-right: var(--e-4); }
  .rubrique__carte { max-width: none; }
  .trace--bloc { grid-template-columns: minmax(0, 1fr); }
  .trace--bloc .trace__cle { margin-top: var(--e-1); }
  .synthese { align-items: flex-start; flex-direction: column; }
  .identite { flex-direction: column; gap: 2px; }
  .identite li + li::before { content: none; }
  .compte__utilisateur { display: none; }
  .entete__mention-publique { display: none; }
  .bouton--mobile-large { width: 100%; }
}

/* Impression : encre sur blanc, les traces restent. */
@media print {
  body { background: #FFFFFF; }
  .entete, .pied { border-color: #000; }
  .navigation, .compte, .bouton, .evitement, .bandeau-demo { display: none; }
  .carte, .rubrique { box-shadow: none; break-inside: avoid; }
}