/* ═══════════════════════════════════════════════════════════════════════
   DECLARIA — Design system « Swiss International »
   Typographie Switzer + Fragment Mono (auto-hébergées, aucun appel externe).
   Papier chaud, encre, rouge fédéral en accent chirurgical. Angles droits,
   filets hairline, chiffres tabulaires. Précision d'imprimé.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Polices (servies localement — conformes CSP, zéro fuite réseau) ── */
@font-face {
  font-family: "Switzer";
  src: url("/assets/fonts/switzer-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/assets/fonts/switzer-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/assets/fonts/switzer-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/assets/fonts/switzer-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/assets/fonts/fragment-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Couleurs */
  --rouge: #DA291C;            /* rouge fédéral (PMS 485) */
  --rouge-sombre: #B01F13;
  --rouge-pale: #FBEBE9;
  --encre: #121212;
  --gris-900: #2A2A28;
  --gris-700: #4C4B48;
  --gris-500: #75736E;
  --gris-300: #C2C0BA;
  --gris-200: #DDDBD4;
  --gris-100: #EBEAE5;
  --gris-50: #F4F3EF;          /* papier chaud */
  --papier: #FAF9F6;
  --blanc: #FFFFFF;
  --ok: #1C7C4A;
  --ok-pale: #E9F3ED;
  --ambre: #96660F;
  --ambre-pale: #FAF2DF;
  --bleu-info: #1F567B;
  --bleu-pale: #E9F1F7;

  /* Typographie */
  --fonte: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fonte-mono: "Fragment Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Rythme */
  --u: 4px;
  --filet: 1px solid var(--gris-200);
  --filet-fort: 1px solid var(--encre);
  --sidebar-l: 268px;
  --transition: 150ms cubic-bezier(0.3, 0, 0.2, 1);
}

[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--encre);
  background: var(--gris-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 0;
}

::selection { background: var(--rouge); color: var(--blanc); }

/* ── Typographie ───────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0 0 calc(var(--u) * 3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
p { margin: 0 0 calc(var(--u) * 3); }
a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--gris-300); transition: color var(--transition), text-decoration-color var(--transition); }
a:hover { color: var(--rouge); text-decoration-color: var(--rouge); }
strong { font-weight: 600; }

.mono, .montant, .code-badge { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }

.texte-secondaire { color: var(--gris-500); }
.texte-petit { font-size: 0.8125rem; }

:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }

/* Étiquette de rubrique façon document officiel : « VD — Période 2025 » */
.etiquette {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gris-500);
}
.etiquette .num { font-family: var(--fonte-mono); color: var(--rouge); letter-spacing: 0.06em; }

/* ── Marque ────────────────────────────────────────────────────────── */
.marque {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 2.5);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--encre);
}
.marque:hover { color: var(--encre); }
.marque small {
  display: block; font-weight: 400; font-size: 0.6563rem;
  letter-spacing: 0.05em; text-transform: none; color: var(--gris-500);
}
.marque-logo { width: 30px; height: 30px; flex: none; object-fit: contain; display: block; }

/* ── Layout application ────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-l) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "entete entete" "lateral principal";
  min-height: 100vh;
}

.entete {
  grid-area: entete;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  padding: 0 calc(var(--u) * 6);
  height: 61px;
  background: var(--blanc);
  border-top: 3px solid var(--rouge);   /* filet fédéral */
  border-bottom: var(--filet);
  position: sticky; top: 0; z-index: 40;
}
.entete-actions { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.entete-utilisateur { font-size: 0.8125rem; color: var(--gris-700); }

.lateral {
  grid-area: lateral;
  background: var(--blanc);
  border-right: var(--filet);
  padding: calc(var(--u) * 5) 0;
  position: sticky;
  top: 61px;
  height: calc(100vh - 61px);
  overflow-y: auto;
}

.principal {
  grid-area: principal;
  padding: calc(var(--u) * 8) calc(var(--u) * 10);
  max-width: 1080px;
  width: 100%;
  min-width: 0;
}
.principal-pleine-largeur { max-width: none; }

/* ── Navigation latérale (sections numérotées) ─────────────────────── */
.nav-titre {
  padding: 0 calc(var(--u) * 5);
  margin-bottom: calc(var(--u) * 2);
  font-size: 0.6563rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gris-500);
}
.nav-sections { list-style: none; margin: 0 0 calc(var(--u) * 6); padding: 0; }
.nav-sections a {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.5);
  padding: calc(var(--u) * 2) calc(var(--u) * 5);
  text-decoration: none;
  font-size: 0.875rem;
  color: var(--gris-700);
  border-left: 2px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.nav-sections a:hover { background: var(--gris-50); color: var(--encre); }
.nav-sections a.actif {
  background: var(--gris-50);
  border-left-color: var(--rouge);
  color: var(--encre);
  font-weight: 600;
}
.nav-sections .num {
  font-family: var(--fonte-mono);
  font-size: 0.6875rem;
  color: var(--gris-300);
  width: 18px; flex: none;
  transition: color var(--transition);
}
.nav-sections a:hover .num { color: var(--gris-500); }
.nav-sections a.actif .num { color: var(--rouge); }
.nav-sections .etat {
  margin-left: auto;
  width: 7px; height: 7px;
  border: 1px solid var(--gris-300);
  flex: none;
}
.nav-sections .etat.rempli { background: var(--ok); border-color: var(--ok); }

/* ── Cartes et panneaux ────────────────────────────────────────────── */
.panneau {
  background: var(--blanc);
  border: var(--filet);
  margin-bottom: calc(var(--u) * 5);
}
.panneau-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3.5) calc(var(--u) * 5);
  border-bottom: var(--filet);
}
.panneau-entete h2, .panneau-entete h3 { margin: 0; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.panneau-corps { padding: calc(var(--u) * 5); }
.panneau-corps.dense { padding: 0; }

/* ── Boutons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.5) calc(var(--u) * 4.5);
  font-family: var(--fonte);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
}
.btn-primaire { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }
.btn-primaire:hover { background: var(--rouge-sombre); border-color: var(--rouge-sombre); color: var(--blanc); }
.btn-primaire:active { background: var(--encre); border-color: var(--encre); }
.btn-contour { border-color: var(--encre); color: var(--encre); background: transparent; }
.btn-contour:hover { background: var(--encre); color: var(--blanc); }
.btn-discret { color: var(--gris-700); border-color: var(--gris-200); background: var(--blanc); }
.btn-discret:hover { border-color: var(--encre); color: var(--encre); }
.btn-retour-declarations { color: var(--rouge); border-color: var(--rouge); background: var(--blanc); }
.btn-retour-declarations:hover { color: var(--blanc); border-color: var(--rouge); background: var(--rouge); }
.retour-libelle-mobile { display: none; }
.btn-danger-discret { color: var(--rouge); border-color: var(--gris-200); background: var(--blanc); }
.btn-danger-discret:hover { border-color: var(--rouge); background: var(--rouge-pale); }
.btn-petit { padding: calc(var(--u) * 1.5) calc(var(--u) * 2.75); font-size: 0.8125rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── Formulaires ───────────────────────────────────────────────────── */
.champ { margin-bottom: calc(var(--u) * 4.5); }
.champ label {
  display: block;
  font-size: 0.7188rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gris-700);
  margin-bottom: calc(var(--u) * 1.75);
}
.champ .aide-champ { font-size: 0.75rem; color: var(--gris-500); margin-top: var(--u); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="tel"], select, textarea {
  width: 100%;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  font-family: var(--fonte);
  font-size: 0.9375rem;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--gris-300);
  border-radius: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:hover, select:hover, textarea:hover { border-color: var(--gris-500); }
input:focus, select:focus, textarea:focus { border-color: var(--encre); outline: none; box-shadow: inset 0 0 0 1px var(--encre); }
input.invalide { border-color: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--rouge); width: 16px; height: 16px; }

.saisie-montant { position: relative; }
.saisie-montant input { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; text-align: right; padding-right: calc(var(--u) * 12); }
.saisie-montant::after {
  content: "CHF";
  position: absolute; right: calc(var(--u) * 3); top: 50%;
  transform: translateY(-50%);
  font-family: var(--fonte-mono);
  font-size: 0.6875rem; color: var(--gris-500);
  pointer-events: none;
}

.erreur-champ { color: var(--rouge); font-size: 0.78rem; margin-top: calc(var(--u) * 1.25); }

/* Champ mot de passe avec bascule afficher / masquer */
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 46px; }
.mdp-bascule {
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-left: var(--filet);
  background: var(--blanc);
  color: var(--gris-500);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.mdp-bascule:hover { color: var(--encre); background: var(--gris-50); }
.mdp-bascule svg { width: 18px; height: 18px; display: block; }
.mdp-bascule .ico-oeil-barre { display: none; }
.mdp-bascule[aria-pressed="true"] .ico-oeil { display: none; }
.mdp-bascule[aria-pressed="true"] .ico-oeil-barre { display: block; }
.mdp-bascule[aria-pressed="true"] { color: var(--rouge); }

/* ── Champs de déclaration (disposition empilée, lisible) ──────────── */
.panneau[data-autosave-url], .panneau-form { max-width: 768px; }
.bascule-ligne { display: flex; align-items: center; gap: calc(var(--u) * 2.5); font-size: 0.875rem; cursor: pointer; }
.bascule-ligne input { flex: none; }

.ligne-declaration {
  padding: calc(var(--u) * 3.5) calc(var(--u) * 5);
  border-bottom: var(--filet);
  text-align: left;
  transition: background var(--transition);
}
.ligne-declaration:last-child { border-bottom: none; }
.ligne-declaration:hover { background: var(--papier); }

.ld-tete { display: flex; align-items: center; gap: calc(var(--u) * 2.5); margin-bottom: calc(var(--u) * 2); }
.ligne-declaration .libelle { font-size: 0.9rem; font-weight: 500; color: var(--encre); line-height: 1.3; }
.ligne-declaration .libelle .deduction { color: var(--gris-500); font-size: 0.75rem; font-weight: 400; margin-left: 4px; }
.ld-aide { margin: 0 0 calc(var(--u) * 2.5); font-size: 0.78rem; color: var(--gris-500); line-height: 1.5; max-width: 62ch; }

.ld-valeurs { max-width: 380px; }
.ld-valeurs input[type="date"] { max-width: 220px; }
.ld-valeurs select { max-width: 320px; }
.ld-valeurs .saisie-montant { max-width: 220px; }
.ld-valeurs.deux { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); max-width: 560px; }
.ld-valeurs.deux .saisie-montant { max-width: none; }
.ld-col-cap {
  display: block; font-size: 0.6563rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gris-500); font-weight: 600; margin-bottom: calc(var(--u) * 1.25);
}

.code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 2px 6px;
  font-size: 0.71rem;
  background: var(--gris-50);
  color: var(--gris-700);
  border: 1px solid var(--gris-200);
  cursor: help;
  transition: border-color var(--transition), color var(--transition);
}
.code-badge:hover { border-color: var(--rouge); color: var(--rouge); }

/* L'en-tête de colonnes tabulaire est remplacé par des sous-titres par champ. */
.entete-colonnes { display: none; }

/* Ligne de total calculé : libellé à gauche, montant à droite. */
.ligne-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  background: var(--gris-50);
  font-weight: 600;
}
.ligne-total .ld-tete { margin-bottom: 0; }
.ligne-total .ld-valeurs { max-width: none; }
.ligne-total .montant-calcule {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 1.0625rem;
}
.ligne-total.accent { border-top: var(--filet-fort); border-bottom: var(--filet-fort); background: var(--blanc); }
.ligne-total.accent .montant-calcule { color: var(--rouge); }
.calcul-a-completer .montant-calcule,
.texte-attention { color: var(--ambre); font-weight: 600; }
.lien-completer-frais {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lien-completer-frais:hover { color: var(--rouge-sombre); }
.lien-completer-frais:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.questionnaire-frais-intro { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 3); align-items: start; margin-bottom: calc(var(--u) * 4); padding: calc(var(--u) * 4); border: 1px solid var(--ambre); background: var(--ambre-pale); }
.questionnaire-frais-intro h4 { margin: 0 0 var(--u); }
.questionnaire-frais-intro p { margin: 0; color: var(--gris-700); font-size: 0.8125rem; }
.questionnaire-frais-cible { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr); gap: calc(var(--u) * 2) calc(var(--u) * 5); margin: calc(var(--u) * 2) 0 calc(var(--u) * 3); padding: calc(var(--u) * 2) 0; border-top: 1px solid rgba(151, 103, 13, 0.35); border-bottom: 1px solid rgba(151, 103, 13, 0.35); }
.questionnaire-frais-cible > div { min-width: 0; }
.questionnaire-frais-cible dt { margin-bottom: 2px; color: var(--gris-500); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.questionnaire-frais-cible dd { margin: 0; overflow-wrap: anywhere; color: var(--encre); font-size: 0.875rem; font-weight: 700; }
.questionnaire-frais-manquants { margin: 0 0 calc(var(--u) * 3); padding: calc(var(--u) * 2) 0 calc(var(--u) * 2) calc(var(--u) * 3); border-left: 3px solid var(--ambre); }
.questionnaire-frais-manquants > strong { display: block; margin-bottom: calc(var(--u) * 1.5); font-size: 0.8125rem; }
.questionnaire-frais-manquants ul { display: grid; gap: var(--u); margin: 0; padding: 0; list-style: none; }
.questionnaire-frais-manquants li { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: calc(var(--u) * 2); align-items: baseline; }
.questionnaire-frais-categorie { color: var(--gris-500); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.questionnaire-frais-lien { width: fit-content; margin: 0; padding: 0; border: 0; color: var(--encre); background: transparent; font: inherit; font-size: 0.8125rem; font-weight: 700; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.questionnaire-frais-lien:hover { color: var(--rouge-sombre); }
.questionnaire-frais-lien:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
.questionnaire-champ-manquant > label { color: var(--ambre); }
.questionnaire-champ-manquant > input,
.questionnaire-champ-manquant > select,
.questionnaire-champ-manquant > .saisie-montant input { border-color: var(--ambre); box-shadow: inset 0 0 0 1px var(--ambre); }
.questionnaire-frais-intro.est-confirme { border-color: var(--ok); background: var(--ok-pale); }
.groupe-tableau-conteneur { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.groupe-tableau-conteneur .tableau { min-width: 760px; }
.groupe-tableau-conteneur .contribuable-cell { font-weight: 700; white-space: nowrap; }
.groupe-ajout-action { border-top: var(--filet); }
.groupe-editeur { border-top: var(--filet); scroll-margin-top: calc(61px + var(--u) * 4); }
.groupe-editeur-entete { margin-bottom: calc(var(--u) * 4); }
.groupe-editeur-entete h4 { margin: 0 0 var(--u); }
.groupe-editeur-entete p { max-width: 760px; margin: 0; color: var(--gris-500); font-size: 0.8125rem; }
.champ-proposition { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1.5); color: #7a4a0d; font-size: 0.75rem; line-height: 1.4; }
.champ-proposition-confirmer { flex: none; min-height: 36px; }
.champ-proposition[aria-busy="true"] { opacity: 0.68; }
.groupe-editeur [data-suggested] { border-color: var(--ambre); background: var(--ambre-pale); }
.grille-ajout-separateur { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 2); padding-top: calc(var(--u) * 4); border-top: var(--filet); }
.grille-ajout-separateur span { color: var(--gris-500); font-size: 0.75rem; }
.trajet-separateur { margin-top: 0; }
.trajet-calcul-actions { grid-column: 1 / -1; display: flex; margin-top: calc(var(--u) * -2); }
.deductions-auto-explication { margin: 0 0 calc(var(--u) * 4); padding: calc(var(--u) * 3); border-left: 3px solid var(--ambre); background: var(--ambre-pale); color: var(--gris-700); font-size: 0.8125rem; }
.deductions-auto-explication a { margin-left: var(--u); font-weight: 600; }
.questions-repas { margin: calc(var(--u) * 4) calc(var(--u) * 5); border: 1px solid var(--ambre); background: var(--ambre-pale); }
.questions-repas-entete { padding: calc(var(--u) * 4); border-bottom: 1px solid var(--ambre); }
.questions-repas-entete h4 { margin: 0 0 var(--u); }
.questions-repas-entete p { max-width: 760px; margin: 0; color: var(--gris-700); font-size: 0.8125rem; line-height: 1.5; }
.questions-repas-liste { display: grid; }
.question-repas { padding: calc(var(--u) * 4); background: var(--blanc); }
.question-repas + .question-repas { border-top: var(--filet); }
.question-repas[aria-busy="true"] { opacity: 0.7; }
.question-repas-contexte { display: flex; align-items: baseline; gap: calc(var(--u) * 2); flex-wrap: wrap; margin-bottom: calc(var(--u) * 2); }
.question-repas-contexte strong { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.question-repas-contexte span { color: var(--gris-500); font-size: 0.75rem; }
.question-repas-texte { max-width: 820px; margin: 0; color: var(--encre); font-weight: 600; line-height: 1.5; }
.question-repas-indice { margin: calc(var(--u) * 2) 0 0; color: var(--gris-700); font-size: 0.8125rem; }
.question-repas-actions { display: flex; align-items: center; gap: calc(var(--u) * 2); flex-wrap: wrap; margin-top: calc(var(--u) * 3); }
#groupe-certificats_salaire { scroll-margin-top: calc(61px + var(--u) * 4); }
#groupe-certificats_salaire:focus { outline: 2px solid var(--rouge); outline-offset: 2px; }

/* ── Statuts de valeur (origine IA / manuelle) ─────────────────────── */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border: 1px solid;
}
.pastille-ia { color: var(--bleu-info); border-color: var(--bleu-info); background: var(--bleu-pale); }
.pastille-ok { color: var(--ok); border-color: var(--ok); background: var(--ok-pale); }
.pastille-attente { color: var(--ambre); border-color: var(--ambre); background: var(--ambre-pale); }
.pastille-neutre { color: var(--gris-500); border-color: var(--gris-300); background: var(--gris-50); }
.pastille-rouge { color: var(--rouge); border-color: var(--rouge); background: var(--rouge-pale); }

/* ── Composants conseil / alerte ───────────────────────────────────── */
.conseil, .alerte {
  display: grid;
  grid-template-columns: 3px 1fr;
  background: var(--blanc);
  border: var(--filet);
  margin-bottom: calc(var(--u) * 3);
}
.conseil > .barre { background: var(--bleu-info); }
.conseil.suggestion > .barre { background: var(--ok); }
.conseil.attention > .barre, .alerte.attention > .barre { background: var(--ambre); }
.alerte.erreur > .barre { background: var(--rouge); }
.alerte.info > .barre { background: var(--bleu-info); }
.conseil-corps, .alerte-corps { padding: calc(var(--u) * 3.5) calc(var(--u) * 4); }
.conseil-corps h4, .alerte-corps h4 { margin: 0 0 var(--u); font-size: 0.9rem; }
.conseil-corps p, .alerte-corps p { margin: 0; font-size: 0.875rem; color: var(--gris-700); }
.export-issues { margin: calc(var(--u) * 3) 0 0; padding: 0; list-style: none; border-top: var(--filet); }
.export-issues li { margin: 0; border-bottom: var(--filet); }
.export-issue-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  min-height: 44px;
  padding: calc(var(--u) * 2.5) 0;
  color: var(--encre);
  text-decoration: none;
}
.export-issue-static { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 4); padding: calc(var(--u) * 2.5) 0; }
.export-issue-link:hover { color: var(--rouge-sombre); }
.export-issue-link:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
.export-issue-texte { min-width: 0; overflow-wrap: anywhere; }
.export-issue-action { flex: none; color: var(--rouge-sombre); font-size: 0.75rem; font-weight: 600; }
.alerte-corps p.export-consequences { margin-top: calc(var(--u) * 3); font-weight: 600; }
.conseil-source {
  margin-top: calc(var(--u) * 2);
  font-size: 0.71rem;
  font-family: var(--fonte-mono);
  color: var(--gris-500);
}
.conseil-actions { margin-top: calc(var(--u) * 2); display: flex; gap: calc(var(--u) * 2); }

/* ── Carte de proposition IA ───────────────────────────────────────── */
.proposition {
  background: var(--blanc);
  border: var(--filet);
  margin-bottom: calc(var(--u) * 4);
}
.proposition.traitee { opacity: 0.62; }
.proposition-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border-bottom: var(--filet);
  flex-wrap: wrap;
}
.proposition-corps { padding: calc(var(--u) * 4); display: grid; gap: calc(var(--u) * 3); }
.proposition-valeur {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
  overflow-wrap: anywhere;
}
.proposition-extrait {
  border-left: 2px solid var(--gris-300);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: var(--gris-50);
  font-size: 0.8125rem;
  color: var(--gris-700);
  font-style: italic;
}
.proposition-justification { font-size: 0.8425rem; color: var(--gris-700); }
.proposition-actions {
  display: flex; gap: calc(var(--u) * 2); flex-wrap: wrap;
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border-top: var(--filet);
  background: var(--gris-50);
}
.proposition-liste-entete {
  margin-bottom: calc(var(--u) * 4);
  border: var(--filet);
  background: var(--blanc);
}
.proposition-liste-entete p { margin: var(--u) 0 0; max-width: 72ch; }
.proposition-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  flex-wrap: wrap;
  color: var(--gris-500);
  font-size: 0.75rem;
}
.proposition-extrait { margin: 0; }
.proposition-correction { order: 2; flex-basis: 100%; }
.proposition-correction > summary { list-style: none; width: max-content; }
.proposition-correction > summary::-webkit-details-marker { display: none; }
.proposition-correction[open] > summary { border-color: var(--encre); color: var(--encre); }
.proposition-correction form {
  margin-top: calc(var(--u) * 3);
  padding-top: calc(var(--u) * 3);
  border-top: var(--filet);
}
.proposition-correction form > .champ { max-width: 420px; margin-bottom: calc(var(--u) * 3); }
.proposition-correction .grille-ajout { margin-bottom: calc(var(--u) * 3); }

/* Jauge de confiance */
.confiance { display: inline-flex; align-items: center; gap: calc(var(--u) * 2); font-size: 0.75rem; font-family: var(--fonte-mono); color: var(--gris-500); }
.confiance-barre { width: 72px; height: 4px; background: var(--gris-100); position: relative; }
.confiance-barre > span { position: absolute; inset: 0 auto 0 0; }
.confiance-haute > span { background: var(--ok); }
.confiance-moyenne > span { background: var(--ambre); }
.confiance-basse > span { background: var(--rouge); }

/* ── Tableaux ──────────────────────────────────────────────────────── */
table.tableau { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tableau th {
  text-align: left;
  font-size: 0.6563rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gris-500);
  padding: calc(var(--u) * 2.25) calc(var(--u) * 3);
  border-bottom: var(--filet-fort);
  background: var(--papier);
}
.tableau td { padding: calc(var(--u) * 2.5) calc(var(--u) * 3); border-bottom: var(--filet); vertical-align: middle; }
.tableau tr:hover td { background: var(--papier); }
.tableau .num-cell { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ── Progression ───────────────────────────────────────────────────── */
.progression { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.progression-barre { flex: 1; min-width: 120px; height: 5px; background: var(--gris-100); }
.progression-barre > span { display: block; height: 100%; background: var(--rouge); transition: width 400ms ease; }
.progression-valeur { display: inline-flex; align-items: baseline; gap: calc(var(--u) * 1.5); color: var(--gris-500); font-size: 0.75rem; white-space: nowrap; }
.progression-valeur strong { color: var(--encre); font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-size: 0.8125rem; }

/* ── Plan de travail humain ───────────────────────────────────────── */
.entete-a-faire { display: none; min-height: 36px; }
.a-faire-compteur,
.nav-a-faire-etat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 calc(var(--u) * 1.5);
  background: var(--rouge-pale);
  color: var(--rouge-sombre);
  font-family: var(--fonte-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}
[data-a-faire-phase="analysis"] .a-faire-compteur,
[data-a-faire-phase="analysis"] .nav-a-faire-etat { background: var(--ambre-pale); color: var(--ambre); }
[data-a-faire-phase="complete"] .a-faire-compteur,
[data-a-faire-phase="complete"] .nav-a-faire-etat { background: var(--ok-pale); color: var(--ok); }
.nav-a-faire a { border-bottom: var(--filet); }
.nav-a-faire-etat { margin-left: auto; }
.nav-a-faire-etat .spin { width: 12px; height: 12px; margin-right: var(--u); border-width: 1px; }

.actions-restantes {
  scroll-margin-top: 78px;
  margin-bottom: calc(var(--u) * 7);
  background: var(--blanc);
  border: var(--filet);
  border-top: 2px solid var(--encre);
}
.actions-restantes:focus { outline: none; }
.actions-restantes:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
.actions-restantes-entete {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 5) calc(var(--u) * 6);
}
.actions-restantes-entete > div:first-child { max-width: 680px; }
.actions-restantes-entete h2 { margin: calc(var(--u) * 1.5) 0 calc(var(--u) * 2); font-size: 1.375rem; }
.actions-restantes-entete p { margin: 0; color: var(--gris-700); }
.actions-restantes-compteur {
  display: grid;
  align-content: center;
  justify-items: end;
  min-width: 132px;
  padding-left: calc(var(--u) * 5);
  border-left: var(--filet);
  color: var(--gris-500);
}
.actions-restantes-compteur strong {
  color: var(--rouge);
  font-family: var(--fonte-mono);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}
.actions-restantes-compteur span:last-child { margin-top: calc(var(--u) * 1.5); font-size: 0.75rem; }
.actions-restantes-compteur.est-attente { grid-template-columns: auto auto; align-items: center; gap: calc(var(--u) * 2); }
.actions-restantes-compteur.est-attente span:last-child { grid-column: 1 / -1; }
.actions-restantes-compteur.est-attente strong { color: var(--ambre); }
.actions-restantes-compteur.est-termine strong { color: var(--ok); }

.actions-restantes-resume {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 3) calc(var(--u) * 6);
  border-top: var(--filet);
  background: var(--gris-50);
  color: var(--gris-700);
  font-size: 0.8125rem;
}
.actions-restantes-resume strong { color: var(--encre); font-family: var(--fonte-mono); }
.actions-groupe { border-top: var(--filet); }
.actions-groupe-entete {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 4) calc(var(--u) * 6) calc(var(--u) * 3);
}
.actions-groupe-entete h3 { margin: 0 0 var(--u); font-size: 0.9375rem; }
.actions-groupe-entete p { margin: 0; color: var(--gris-500); font-size: 0.8125rem; }
.actions-groupe-entete > span {
  flex: none;
  color: var(--gris-500);
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
}
.actions-liste { margin: 0; padding: 0; list-style: none; border-top: var(--filet); }
.action-ligne { margin: 0; border-bottom: var(--filet); }
.action-ligne:last-child { border-bottom: 0; }
.action-ligne > a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(120px, auto);
  align-items: center;
  min-height: 68px;
  color: var(--encre);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.action-ligne > a:hover { background: var(--papier); color: var(--encre); }
.action-ligne > a:focus-visible { position: relative; z-index: 1; outline-offset: -2px; }
.action-numero {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: var(--filet);
  color: var(--rouge);
  font-family: var(--fonte-mono);
  font-size: 0.6875rem;
}
.action-ligne.est-verification .action-numero { color: var(--ambre); }
.action-contenu { display: grid; gap: var(--u); min-width: 0; padding: calc(var(--u) * 3) calc(var(--u) * 4); }
.action-contenu strong { overflow-wrap: anywhere; font-size: 0.875rem; line-height: 1.4; }
.action-code {
  width: fit-content;
  color: var(--gris-500);
  font-family: var(--fonte-mono);
  font-size: 0.6563rem;
}
.action-detail { color: var(--gris-700); font-size: 0.78rem; overflow-wrap: anywhere; }
.action-source { color: var(--gris-500); font-family: var(--fonte-mono); font-size: 0.6875rem; overflow-wrap: anywhere; }
.action-destination {
  justify-self: end;
  padding: calc(var(--u) * 3) calc(var(--u) * 5) calc(var(--u) * 3) calc(var(--u) * 2);
  color: var(--rouge-sombre);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: right;
}
.actions-restantes-attente,
.actions-restantes-termine {
  display: flex;
  align-items: start;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 5) calc(var(--u) * 6);
  border-top: var(--filet);
  background: var(--ambre-pale);
}
.actions-restantes-termine { background: var(--ok-pale); }
.actions-restantes-attente h3,
.actions-restantes-termine h3 { margin: 0 0 var(--u); }
.actions-restantes-attente p,
.actions-restantes-termine p { margin: 0; color: var(--gris-700); }
.actions-restantes-termine .btn { margin-top: calc(var(--u) * 3); background: var(--blanc); }
.actions-restantes-validation {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ok);
  color: var(--ok);
  font-family: var(--fonte-mono);
}
.actions-optionnelles { border-top: var(--filet); }
.actions-optionnelles summary {
  min-height: 48px;
  padding: calc(var(--u) * 3) calc(var(--u) * 6);
  cursor: pointer;
  color: var(--gris-700);
  font-size: 0.8125rem;
  font-weight: 600;
}
.actions-optionnelles > p { margin: 0; padding: 0 calc(var(--u) * 6); color: var(--gris-500); font-size: 0.8125rem; }
.actions-optionnelles ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--u) calc(var(--u) * 5);
  margin: calc(var(--u) * 3) 0 0;
  padding: 0 calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 10);
  font-size: 0.8125rem;
}

.action-plan-raccourci {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 5);
  margin-bottom: calc(var(--u) * 5);
  padding: calc(var(--u) * 3.5) calc(var(--u) * 5);
  border: var(--filet);
  border-left: 3px solid var(--rouge);
  background: var(--blanc);
}
.action-plan-raccourci.est-analysis { border-left-color: var(--ambre); }
.action-plan-raccourci.est-complete { border-left-color: var(--ok); }
.action-plan-raccourci-etat { display: flex; align-items: center; gap: calc(var(--u) * 3); min-width: 0; }
.action-plan-raccourci-etat > div { display: grid; gap: var(--u); min-width: 0; }
.action-plan-raccourci-etat strong { font-size: 0.875rem; }
.action-plan-raccourci-etat span:last-child { color: var(--gris-500); font-size: 0.8125rem; }
.action-plan-raccourci-marque {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  color: var(--rouge);
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
}
.action-plan-raccourci.est-complete .action-plan-raccourci-marque { color: var(--ok); }

@media (max-width: 700px) {
  .actions-restantes-entete { align-items: start; flex-direction: column; gap: calc(var(--u) * 4); padding: calc(var(--u) * 5); }
  .actions-restantes-compteur { justify-items: start; min-width: 0; padding: 0; border-left: 0; }
  .actions-restantes-resume, .actions-groupe-entete { padding-left: calc(var(--u) * 5); padding-right: calc(var(--u) * 5); }
  .action-ligne > a { grid-template-columns: 38px minmax(0, 1fr); }
  .action-destination { grid-column: 2; justify-self: start; padding: 0 calc(var(--u) * 4) calc(var(--u) * 3); text-align: left; }
  .actions-restantes-attente, .actions-restantes-termine { padding: calc(var(--u) * 5); }
  .actions-optionnelles summary { padding-left: calc(var(--u) * 5); padding-right: calc(var(--u) * 5); }
  .actions-optionnelles > p { padding: 0 calc(var(--u) * 5); }
  .actions-optionnelles ul { grid-template-columns: 1fr; padding-left: calc(var(--u) * 9); padding-right: calc(var(--u) * 5); }
  .action-plan-raccourci { align-items: stretch; flex-direction: column; }
  .action-plan-raccourci .btn { width: 100%; min-height: 44px; }
}

/* ── Zone de dépôt de fichiers ─────────────────────────────────────── */
.depot {
  position: relative;
  border: 1px dashed var(--gris-300);
  background: var(--blanc);
  padding: calc(var(--u) * 10) calc(var(--u) * 5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.depot:hover, .depot.survol { border-color: var(--rouge); background: var(--rouge-pale); }
.depot:focus-within { border-color: var(--rouge); outline: 2px solid var(--rouge); outline-offset: 2px; }
.depot p { margin: 0; }
.depot .gros { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.depot-fichier {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ── États vides ───────────────────────────────────────────────────── */
.etat-vide {
  text-align: center;
  padding: calc(var(--u) * 12) calc(var(--u) * 5);
  color: var(--gris-500);
}
.etat-vide .croix {
  width: 40px; height: 40px; margin: 0 auto calc(var(--u) * 4);
  background: var(--gris-100);
  position: relative;
}
.etat-vide .croix::before { content: ""; position: absolute; left: 17px; top: 8px; width: 6px; height: 24px; background: var(--gris-300); }
.etat-vide .croix::after { content: ""; position: absolute; top: 17px; left: 8px; height: 6px; width: 24px; background: var(--gris-300); }

/* ── Messages flash et toasts ──────────────────────────────────────── */
.flash {
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 4);
  border: 1px solid;
  font-size: 0.875rem;
  font-weight: 500;
}
.flash-succes { color: var(--ok); border-color: var(--ok); background: var(--ok-pale); }
.flash-erreur { color: var(--rouge); border-color: var(--rouge); background: var(--rouge-pale); }

#toasts { position: fixed; bottom: calc(var(--u) * 5); right: calc(var(--u) * 5); z-index: 90; display: grid; gap: calc(var(--u) * 2); }
.toast {
  background: var(--encre);
  color: var(--blanc);
  padding: calc(var(--u) * 2.5) calc(var(--u) * 4);
  font-size: 0.8425rem;
  font-weight: 500;
  border-left: 3px solid var(--rouge);
  animation: toast-in 200ms cubic-bezier(0.2, 0.8, 0.3, 1);
  max-width: 360px;
}
.toast.ok { border-left-color: var(--ok); }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Indicateur d'enregistrement */
.indicateur-sauvegarde {
  font-size: 0.75rem;
  color: var(--gris-500);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
}
.indicateur-sauvegarde::before {
  content: ""; width: 7px; height: 7px; background: var(--gris-300);
  transition: background var(--transition);
}
.indicateur-sauvegarde.enregistre::before { background: var(--ok); }
.indicateur-sauvegarde.en-cours::before { background: var(--ambre); animation: pulse 0.9s infinite alternate; }
@keyframes pulse { to { opacity: 0.35; } }

/* ── Bulle d'aide (popover code officiel) ──────────────────────────── */
.bulle-aide {
  position: absolute;
  z-index: 80;
  max-width: 380px;
  background: var(--blanc);
  border: var(--filet-fort);
  box-shadow: 5px 5px 0 rgba(18, 18, 18, 0.07);
  padding: calc(var(--u) * 4);
  font-size: 0.8425rem;
}
.bulle-aide h5 { margin: 0 0 calc(var(--u) * 2); font-size: 0.8125rem; }
.bulle-aide h5 .code-badge { margin-right: calc(var(--u) * 2); cursor: default; }
.bulle-aide ul { margin: calc(var(--u) * 2) 0 0; padding-left: 18px; }
.bulle-aide .ifd { margin-top: calc(var(--u) * 2); padding-top: calc(var(--u) * 2); border-top: var(--filet); color: var(--gris-700); font-size: 0.78rem; }

/* ── Cartes du tableau de bord ─────────────────────────────────────── */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: calc(var(--u) * 4);
}
.carte-declaration {
  background: var(--blanc);
  border: var(--filet);
  padding: calc(var(--u) * 5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
  transition: border-color var(--transition);
  position: relative;
}
.carte-declaration::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 28px; height: 3px; background: var(--rouge);
}
.carte-declaration:hover { border-color: var(--encre); }
.carte-declaration .annee { font-family: var(--fonte-mono); font-size: 2rem; line-height: 1; margin-top: calc(var(--u) * 2); }
.carte-declaration .meta { font-size: 0.8125rem; color: var(--gris-500); display: flex; align-items: center; gap: calc(var(--u) * 3); flex-wrap: wrap; }
.carte-declaration-actions { display: flex; align-items: center; gap: calc(var(--u) * 2); flex-wrap: wrap; }

/* Grille de sections (aperçu déclaration) */
.grille-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: calc(var(--u) * 3); }
.carte-section {
  display: flex;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 4);
  background: var(--blanc);
  border: var(--filet);
  text-decoration: none;
  transition: border-color var(--transition);
}
.carte-section:hover { border-color: var(--rouge); color: var(--encre); }
.carte-section .num {
  font-family: var(--fonte-mono);
  font-size: 1.125rem;
  color: var(--gris-300);
  flex: none;
  width: 30px;
  transition: color var(--transition);
}
.carte-section:hover .num { color: var(--rouge); }
.carte-section h4 { margin: 0 0 2px; font-size: 0.9rem; font-weight: 600; }
.carte-section p { margin: 0; font-size: 0.78rem; color: var(--gris-500); }

/* ═══════════════════════════════════════════════════════════════════════
   Pages invité (accueil, connexion, inscription) — composition affiche
   ═══════════════════════════════════════════════════════════════════════ */
.page-invite {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(400px, 560px) 1fr;
  background: var(--blanc);
  border-top: 3px solid var(--rouge);
}

/* Colonne formulaire : marque en tête, contenu centré, mention légale en pied */
.invite-panneau {
  padding: calc(var(--u) * 8) calc(var(--u) * 14);
  display: flex;
  flex-direction: column;
  border-right: var(--filet);
  background: var(--blanc);
}
.invite-entete { margin-bottom: calc(var(--u) * 6); }
.invite-forme { margin: auto 0; padding: calc(var(--u) * 8) 0; max-width: 420px; width: 100%; }
.invite-pied { margin-top: calc(var(--u) * 6); }
.invite-panneau h1 { font-size: 1.9375rem; margin-bottom: calc(var(--u) * 3); }
.invite-boutons { display: flex; gap: calc(var(--u) * 3); margin: calc(var(--u) * 7) 0; }

/* Apparition en escalier au chargement */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(10px); animation: reveal 480ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .rv-1 { animation-delay: 40ms; }
  .rv-2 { animation-delay: 120ms; }
  .rv-3 { animation-delay: 200ms; }
  .rv-4 { animation-delay: 280ms; }
  .rv-5 { animation-delay: 360ms; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}

/* Points clés numérotés (façon sommaire de formulaire officiel) */
.points-cles { list-style: none; margin: calc(var(--u) * 7) 0 0; padding: 0; }
.points-cles li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: calc(var(--u) * 3);
  align-items: baseline;
  font-size: 0.9rem;
  color: var(--gris-700);
  padding: calc(var(--u) * 2.75) 0;
  border-top: var(--filet);
}
.points-cles li:last-child { border-bottom: var(--filet); }
.points-cles .tiret { display: none; }
.points-cles .pc-num { font-family: var(--fonte-mono); font-size: 0.75rem; color: var(--rouge); }

/* Panneau visuel : affiche typographique suisse sur papier millimétré */
.invite-visuel {
  position: relative;
  background:
    linear-gradient(var(--gris-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--gris-100) 1px, transparent 1px);
  background-size: 28px 28px;
  background-color: var(--gris-50);
  overflow: hidden;
}

/* Repères d'imprimeur (hirondelles) aux angles */
.invite-visuel .repere {
  position: absolute;
  width: 17px; height: 17px;
  color: var(--gris-300);
}
.invite-visuel .repere::before,
.invite-visuel .repere::after { content: ""; position: absolute; background: currentColor; }
.invite-visuel .repere::before { left: 8px; top: 0; width: 1px; height: 17px; }
.invite-visuel .repere::after { top: 8px; left: 0; height: 1px; width: 17px; }
.invite-visuel .repere.hg { top: 22px; left: 22px; }
.invite-visuel .repere.hd { top: 22px; right: 22px; }
.invite-visuel .repere.bg { bottom: 22px; left: 22px; }

/* Composition typographique */
.affiche {
  position: absolute;
  left: clamp(32px, 7vw, 96px);
  top: 50%;
  transform: translateY(-52%);
  max-width: 560px;
  padding-right: calc(var(--u) * 8);
}
.affiche-sur {
  font-family: var(--fonte-mono);
  font-size: 0.71rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-500);
  margin-bottom: calc(var(--u) * 5);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
}
.affiche-sur::before { content: ""; width: 34px; height: 1px; background: var(--rouge); }
.affiche h2 {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 calc(var(--u) * 6);
}
.affiche h2 .point { color: var(--rouge); }
.affiche-texte { max-width: 44ch; color: var(--gris-700); font-size: 0.95rem; line-height: 1.6; }

/* Fiche technique en pied d'affiche */
.affiche-fiche {
  margin-top: calc(var(--u) * 8);
  border-top: var(--filet-fort);
  font-family: var(--fonte-mono);
  font-size: 0.71rem;
  letter-spacing: 0.04em;
  color: var(--gris-700);
}
.affiche-fiche div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 2) 0;
  border-bottom: var(--filet);
}
.affiche-fiche dt, .affiche-fiche .ff-cle { text-transform: uppercase; color: var(--gris-500); }
.affiche-fiche .ff-val { color: var(--encre); }

/* Drapeau : carré rouge, croix blanche, ancré à l'angle */
.invite-visuel .croix-geante {
  position: absolute; right: 0; bottom: 0;
  width: clamp(120px, 16vw, 208px);
  aspect-ratio: 1;
  background: var(--rouge);
  z-index: 2;
}
.invite-visuel .croix-geante::before, .invite-visuel .croix-geante::after {
  content: ""; position: absolute; background: var(--blanc);
}
/* Croix aux proportions officielles (bras 7:6) */
.invite-visuel .croix-geante::before { left: 43.5%; top: 20%; width: 13%; height: 60%; }
.invite-visuel .croix-geante::after { top: 43.5%; left: 20%; height: 13%; width: 60%; }

/* Anciennes accroches (compat) */
.invite-visuel .accroche, .invite-accroche { position: relative; z-index: 2; }
.invite-logo { width: 72px; height: 72px; object-fit: contain; display: block; margin-bottom: calc(var(--u) * 5); }
.invite-logo-grand { width: 96px; height: 96px; margin-bottom: calc(var(--u) * 6); }
.invite-soustitre { font-size: 0.95rem; color: var(--gris-700); line-height: 1.55; margin-bottom: 0; }
.invite-meta { margin-top: calc(var(--u) * 6); font-size: 0.8125rem; color: var(--gris-500); font-family: var(--fonte-mono); }
.souligne { box-shadow: inset 0 -0.3em 0 var(--rouge-pale); }

/* Liens secondaires sous les formulaires */
.invite-alt { margin-top: calc(var(--u) * 5); padding-top: calc(var(--u) * 4); border-top: var(--filet); font-size: 0.8425rem; color: var(--gris-500); }

/* ── Pied ──────────────────────────────────────────────────────────── */
.pied {
  margin-top: calc(var(--u) * 10);
  padding-top: calc(var(--u) * 4);
  border-top: var(--filet);
  font-size: 0.75rem;
  color: var(--gris-500);
}
.avertissement-legal {
  background: var(--papier);
  border: var(--filet);
  border-left: 2px solid var(--gris-300);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--gris-500);
}

/* ── Modale légère ─────────────────────────────────────────────────── */
.voile {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(18, 18, 18, 0.45);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh calc(var(--u) * 4);
}
.voile.ouvert { display: flex; }
.modale {
  background: var(--blanc);
  border: var(--filet-fort);
  width: 100%;
  max-width: 620px;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 6px 6px 0 rgba(18, 18, 18, 0.1);
}
.modale-entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  border-bottom: var(--filet);
}
.modale-corps { padding: calc(var(--u) * 5); }

/* ── Compléments ───────────────────────────────────────────────────── */
.grille-ajout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: calc(var(--u) * 4) calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 4);
}
/* Repli simple pour les navigateurs sans subgrid. */
.grille-ajout > .champ {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.grille-ajout > .champ > input:not([type="checkbox"]):not([type="radio"]),
.grille-ajout > .champ > select,
.grille-ajout > .champ > .saisie-montant > input { height: 42px; }
/* Dans le questionnaire salarial, les trois niveaux d'un champ partagent les
   mêmes lignes : libellé, saisie, puis proposition. Un message plus long ne
   peut donc plus remonter sa saisie par rapport aux champs voisins. */
@supports (grid-template-rows: subgrid) {
  #groupe-certificats_salaire .grille-ajout { row-gap: 0; }
  #groupe-certificats_salaire .grille-ajout .champ {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    justify-content: stretch;
    padding-bottom: calc(var(--u) * 4);
  }
  #groupe-certificats_salaire .grille-ajout .champ > label { align-self: end; }
  #groupe-certificats_salaire .grille-ajout .champ-proposition { align-self: start; }
  #groupe-certificats_salaire .grille-ajout [data-champ-col="cert_distance_simple_km"] { grid-row: span 4; }
}
#groupe-certificats_salaire [data-champ-col="cert_distance_simple_km"] > .texte-petit { display: block; margin-top: var(--u); line-height: 1.4; }
/* Case à cocher seule (ex. « Oui ») : centrée sur la hauteur d'une saisie
   pour s'aligner avec les inputs voisins. */
.grille-ajout .champ > label.texte-petit {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  margin-bottom: 0;
}
/* État vide d'un groupe répétable : plus compact que l'état vide pleine page. */
.panneau-corps.dense .etat-vide { padding: calc(var(--u) * 6) calc(var(--u) * 5); }
.inline-form { display: inline-block; }
.formulaire-creation { display: grid; grid-template-columns: 160px 1fr auto; gap: calc(var(--u) * 4); align-items: end; }
.formulaire-creation .champ { margin-bottom: 0; }
.barre-outils { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 4); flex-wrap: wrap; }
.stat-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 5); }
.stat-carte { background: var(--blanc); border: var(--filet); padding: calc(var(--u) * 4); }
.stat-carte .valeur { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; letter-spacing: -0.01em; }
.stat-carte .valeur.rouge { color: var(--rouge); }
.stat-carte .legende { margin-top: calc(var(--u) * 1.5); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris-500); }

@media (max-width: 700px) {
  .formulaire-creation { grid-template-columns: 1fr; align-items: stretch; }
  .questionnaire-frais-intro { grid-template-columns: 1fr; }
  .questionnaire-frais-cible { grid-template-columns: 1fr; }
  .questionnaire-frais-manquants li { grid-template-columns: 1fr; gap: 0; }
  .groupe-editeur .grille-ajout { grid-template-columns: 1fr; }
  .groupe-editeur .btn { min-height: 44px; }
  .champ-proposition { align-items: stretch; flex-direction: column; }
  .champ-proposition .btn { width: 100%; }
  .trajet-calcul-actions .btn { width: 100%; justify-content: center; }
  .questions-repas { margin-right: calc(var(--u) * 3); margin-left: calc(var(--u) * 3); }
  .question-repas-actions { align-items: stretch; flex-direction: column; }
  .question-repas-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
  .deductions-auto .est-ligne, .estimation .est-ligne { align-items: flex-start; flex-direction: column; gap: var(--u); }
  .deductions-auto .est-ligne .mono, .estimation .est-ligne .mono { max-width: 100%; white-space: normal; }
  .grille-ajout-separateur { display: block; }
  .grille-ajout-separateur span { display: block; margin-top: var(--u); }
  .entete { padding: 0 calc(var(--u) * 2.5); gap: calc(var(--u) * 2); }
  .entete-actions { gap: calc(var(--u) * 2); min-width: 0; }
  .entete > .entete-actions:last-child > .texte-petit,
  .entete-utilisateur,
  .entete .marque small { display: none; }
  .basculeur-nav, .btn-retour-declarations, .entete form .btn { min-height: 44px; }
  .retour-libelle-complet { display: none; }
  .retour-libelle-mobile { display: inline; }
}

@media (max-width: 520px) {
  .entete .marque > span { display: none; }
  .entete-a-faire { width: 44px; padding-left: 0; padding-right: 0; }
  .entete-a-faire-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .entete-a-faire[data-a-faire-phase="analysis"] .a-faire-compteur { display: none; }
  .progression { width: 100%; }
  .progression-barre { min-width: 64px; }
  .progression-valeur { white-space: normal; }
  .export-issue-link, .export-issue-static { align-items: flex-start; flex-direction: column; gap: var(--u); }
}

@media (max-width: 430px) {
  .retour-libelle-mobile { display: none; }
  .btn-retour-declarations { width: 44px; padding-left: 0; padding-right: 0; flex: none; }
}

@media (max-width: 360px) {
  .retour-libelle-mobile { display: none; }
  .btn-retour-declarations { width: 44px; padding: 0; flex: none; }
}

/* ── Responsive ────────────────────────────────────────────────────── */
.basculeur-nav { display: none; }

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "entete" "principal"; }
  .entete, .principal { min-width: 0; }
  .entete-a-faire { display: inline-flex; }
  .lateral {
    position: fixed;
    left: 0; top: 61px;
    width: min(300px, 84vw);
    height: calc(100vh - 61px);
    transform: translateX(-102%);
    transition: transform 220ms cubic-bezier(0.3, 0, 0.2, 1);
    z-index: 60;
    box-shadow: 6px 0 18px rgba(0,0,0,0.1);
  }
  .lateral.ouvert { transform: none; }
  .basculeur-nav {
    display: inline-flex;
    border: var(--filet);
    background: var(--blanc);
    padding: calc(var(--u) * 2);
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
  }
  .basculeur-nav span { width: 18px; height: 2px; background: var(--encre); }
  .principal { padding: calc(var(--u) * 4); }
  .page-invite { grid-template-columns: 1fr; }
  .invite-visuel { display: none; }
  .invite-panneau { padding: calc(var(--u) * 6) calc(var(--u) * 6); border-right: none; }
  .panneau[data-autosave-url], .panneau-form { max-width: none; }
  .ld-valeurs, .ld-valeurs.deux { max-width: none; grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Colonne d'aide contextuelle + codes couleurs d'état des champs
   ═══════════════════════════════════════════════════════════════════════ */
:root { --aide-l: 340px; }

.app.avec-aide {
  grid-template-columns: var(--sidebar-l) minmax(0, 1fr) var(--aide-l);
  grid-template-areas: "entete entete entete" "lateral principal aide";
}
.app.avec-aide .principal { max-width: none; }

.aide-laterale {
  grid-area: aide;
  background: var(--blanc);
  border-left: var(--filet);
  padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 8);
  position: sticky;
  top: 61px;
  height: calc(100vh - 61px);
  overflow-y: auto;
}
.aide-entete {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  font-size: 0.6563rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gris-500);
  margin-bottom: calc(var(--u) * 4);
  padding-bottom: calc(var(--u) * 2.5);
  border-bottom: var(--filet);
}
.aide-puce { width: 8px; height: 8px; background: var(--rouge); flex: none; }

.aide-contenu { font-size: 0.85rem; }
.aide-contenu.charge { opacity: 0.5; }
.aide-contenu p { margin: 0 0 calc(var(--u) * 2.5); color: var(--gris-700); line-height: 1.55; }

.aide-champ-titre { display: flex; align-items: flex-start; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 2); }
.aide-champ-titre strong { font-size: 0.95rem; line-height: 1.25; font-weight: 600; }
.code-badge-actif { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); cursor: default; flex: none; }
.aide-sous-titre {
  font-size: 0.6563rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gris-500); margin-bottom: calc(var(--u) * 2);
}
.aide-tag {
  display: inline-block; font-size: 0.66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 1px 7px; border: 1px solid; margin-bottom: calc(var(--u) * 2);
}
.aide-tag-deduction { color: var(--ambre); background: var(--ambre-pale); border-color: var(--ambre); }

.aide-bloc { margin-top: calc(var(--u) * 3.5); padding-top: calc(var(--u) * 3); border-top: var(--filet); }
.aide-bloc h5 {
  margin: 0 0 calc(var(--u) * 1.5); font-size: 0.6563rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--gris-500);
}
.aide-bloc ul { margin: 0; padding-left: 16px; color: var(--gris-700); }
.aide-bloc li { margin-bottom: calc(var(--u) * 0.75); }
.aide-renvois ul { font-size: 0.78rem; color: var(--gris-500); }
.aide-ifd {
  margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: var(--bleu-pale); border-left: 2px solid var(--bleu-info);
  font-size: 0.78rem; color: var(--gris-700);
}

.aide-invite { font-size: 0.8rem; color: var(--gris-500); line-height: 1.55; }
.aide-controles { margin-top: calc(var(--u) * 5); padding-top: calc(var(--u) * 3); border-top: var(--filet); }
.aide-controles h5 {
  margin: 0 0 calc(var(--u) * 2); font-size: 0.6563rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--gris-500);
}
.aide-controle { margin-bottom: calc(var(--u) * 3); padding-left: calc(var(--u) * 2.5); border-left: 2px solid var(--gris-300); }
.aide-controle.niveau-attention { border-color: var(--ambre); }
.aide-controle.niveau-suggestion { border-color: var(--ok); }
.aide-controle.niveau-info { border-color: var(--bleu-info); }
.aide-controle strong { display: block; font-size: 0.8rem; }
.aide-controle p { margin: 2px 0 0; font-size: 0.76rem; color: var(--gris-500); }

/* ── Codes couleurs d'état des lignes de déclaration ───────────────── */
.ligne-declaration.lc-rempli { box-shadow: inset 2px 0 0 var(--ok); }
.ligne-declaration.lc-ia     { box-shadow: inset 2px 0 0 var(--bleu-info); }
.ligne-declaration.ligne-active { background: var(--rouge-pale); box-shadow: inset 2px 0 0 var(--rouge); }
.ligne-declaration.ligne-active:hover { background: var(--rouge-pale); }
.tableau tr.ligne-ia td:first-child { box-shadow: inset 2px 0 0 var(--bleu-info); }
.pastille-ia { cursor: pointer; }
button.pastille-ia { font: inherit; line-height: 1; }
.pastille-ia:hover { background: var(--bleu-info); color: var(--blanc); }
.lien-source-calcul {
  margin-left: calc(var(--u) * 2);
  padding: 0 7px;
  font-size: 0.68rem;
  font-family: var(--fonte);
  color: var(--bleu-info);
  background: var(--bleu-pale);
  border: 1px solid var(--bleu-info);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.lien-source-calcul:hover { background: var(--bleu-info); color: var(--blanc); }

.erreur-analyse { margin-top: 3px; max-width: 360px; line-height: 1.3; color: var(--rouge-sombre); }
.alertes-document {
  display: grid;
  gap: calc(var(--u) * 2);
  max-width: 380px;
  margin-top: calc(var(--u) * 2);
}
.alerte-document {
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: left;
}
.alerte-document strong { display: block; margin-bottom: var(--u); }
.alerte-document ul { display: grid; gap: var(--u); margin: 0; padding: 0; list-style: none; }
.alerte-document-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--u);
  align-items: start;
}
.alerte-document-lien {
  display: grid;
  gap: 3px;
  padding: var(--u);
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
}
.alerte-document-lien:hover { border-color: currentColor; }
.alerte-document-lien:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.alerte-document-item-correction { grid-template-columns: minmax(0, 1fr); }
.alerte-document-contenu { min-width: 0; padding: var(--u); }
.alerte-document-choix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 1.5) calc(var(--u) * 2);
  margin-top: calc(var(--u) * 2);
}
.alerte-document-resolution,
.alerte-document-modifier {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--u) calc(var(--u) * 2);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid currentColor;
  border-radius: 0;
}
.alerte-document-resolution { cursor: pointer; }
.alerte-document-resolution-appliquer {
  color: var(--blanc);
  background: var(--rouge-sombre);
  border-color: var(--rouge-sombre);
}
.alerte-document-resolution-appliquer:hover { background: var(--rouge); border-color: var(--rouge); }
.alerte-document-resolution-conserver { color: inherit; background: transparent; }
.alerte-document-resolution-conserver:hover { background: var(--blanc); }
.alerte-document-modifier { padding-inline: 0; color: inherit; border-color: transparent; text-decoration: underline; text-underline-offset: 2px; }
.alerte-document-resolution:focus-visible,
.alerte-document-modifier:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.alerte-document-resolution:disabled { cursor: wait; opacity: 0.45; }
.alerte-document-fermer {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  opacity: 0.7;
}
.alerte-document-fermer:hover { border-color: currentColor; opacity: 1; }
.alerte-document-fermer:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.alerte-document-fermer:disabled { cursor: wait; opacity: 0.4; }
.alerte-document-message { display: block; }
.alerte-document-action { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.alerte-document-information { color: var(--ambre); background: var(--ambre-pale); border-left: 3px solid var(--ambre); }
.alerte-document-verification { color: var(--rouge-sombre); background: var(--rouge-pale); border-left: 3px solid var(--rouge); }
.ligne-declaration.cible-navigation,
.champ.cible-navigation,
.panneau.cible-navigation {
  outline: 2px solid var(--rouge);
  outline-offset: 3px;
}

/* ── Indicateur d'analyse automatique (page Documents) ─────────────── */
.indicateur-analyse { display: inline-flex; align-items: center; gap: calc(var(--u) * 2); font-size: 0.8rem; color: var(--gris-700); }
.indicateur-analyse > span:first-child {
  width: 9px; height: 9px; background: var(--ambre); flex: none;
  animation: pulse 0.9s infinite alternate;
}

/* ── Journal de saisie automatique ─────────────────────────────────── */
.tableau-journal td { vertical-align: top; }
.tableau-journal tr.traitee { opacity: 0.45; }
.tableau-journal .confiance { gap: calc(var(--u) * 1.5); }
.bloc-ecartees { margin-top: calc(var(--u) * 4); }
.bloc-ecartees summary {
  cursor: pointer; font-weight: 600; font-size: 0.85rem;
  padding: calc(var(--u) * 2) 0; color: var(--gris-700);
}
.bloc-ecartees summary:hover { color: var(--encre); }
.bloc-ecartees[open] summary { margin-bottom: calc(var(--u) * 2); }

/* ── Aide latérale : repli responsive ──────────────────────────────── */
@media (max-width: 1200px) {
  .app.avec-aide {
    grid-template-columns: var(--sidebar-l) minmax(0, 1fr);
    grid-template-areas: "entete entete" "lateral principal" "lateral aide";
  }
  .aide-laterale {
    position: static; height: auto; border-left: none;
    border-top: var(--filet); padding-bottom: calc(var(--u) * 6);
  }
}
@media (max-width: 980px) {
  .app.avec-aide {
    grid-template-columns: 1fr;
    grid-template-areas: "entete" "principal" "aide";
  }
}

@media print {
  .entete, .lateral, .btn, #toasts, .basculeur-nav, .aide-laterale { display: none !important; }
  body { background: var(--blanc); }
  .app.avec-aide { grid-template-columns: 1fr; grid-template-areas: "entete" "principal"; }
  .principal { padding: 0; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Validation de complétude par section (champs obligatoires)
   ═══════════════════════════════════════════════════════════════════════ */

.nav-titre-section { flex: 1 1 auto; min-width: 0; }
.nav-badges { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; }
.etat-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--fonte-mono);
  font-size: 0.6875rem;
  border: 1px solid;
}
.etat-badge.etat-probleme { color: var(--ambre); border-color: var(--ambre); background: var(--ambre-pale); }
.etat-badge.etat-ia { color: var(--bleu-info); border-color: var(--bleu-info); background: var(--bleu-pale); }

.requis-etoile { color: var(--rouge); font-weight: 600; margin-left: 1px; cursor: help; }

.ligne-declaration.requis-manquant { box-shadow: inset 2px 0 0 var(--ambre); }
.ligne-declaration.requis-manquant input,
.ligne-declaration.requis-manquant select { border-color: var(--ambre); }
.ligne-declaration.requis-manquant input:hover,
.ligne-declaration.requis-manquant select:hover { border-color: var(--ambre); }
.ligne-declaration.requis-manquant.ligne-active { box-shadow: inset 2px 0 0 var(--rouge); }

.bandeau-requis { margin-bottom: calc(var(--u) * 4); }
.bandeau-requis .alerte-corps ul.liste-requis {
  margin: calc(var(--u) * 2) 0 0;
  padding-left: 18px;
  font-size: 0.8125rem;
  color: var(--gris-700);
}
.bandeau-requis .liste-requis li { margin-bottom: 2px; }
.bandeau-complet { margin-bottom: calc(var(--u) * 4); }

.tableau tr.ligne-incomplete td { background: var(--ambre-pale); }
.tableau tr.ligne-incomplete:hover td { background: var(--ambre-pale); }

/* ═══════════════════════════════════════════════════════════════════════
   Analyse de documents : spinner, indicateur global, sélection groupée
   ═══════════════════════════════════════════════════════════════════════ */

.spin {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  margin-right: 3px;
  animation: tourne 0.7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

#analyse-globale {
  position: fixed;
  left: calc(var(--u) * 5);
  bottom: calc(var(--u) * 5);
  z-index: 85;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  background: var(--encre);
  color: var(--blanc);
  padding: calc(var(--u) * 2.5) calc(var(--u) * 4);
  font-size: 0.8125rem;
  font-weight: 500;
  border-left: 3px solid var(--ambre);
  box-shadow: 3px 3px 0 rgba(18, 18, 18, 0.12);
}
#analyse-globale[hidden] { display: none; }
#analyse-globale .spin { color: var(--ambre); }

.doc-actions { display: flex; align-items: center; gap: calc(var(--u) * 3); flex-wrap: wrap; }
.doc-selection { font-size: 0.8125rem; color: var(--gris-700); }
.documents-tableau-conteneur { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.documents-tableau-conteneur:focus-visible { outline: 2px solid var(--rouge); outline-offset: -2px; }
.documents-tableau-conteneur .tableau-documents { min-width: 980px; }
.tableau-documents .col-check { width: 40px; text-align: center; padding-left: calc(var(--u) * 4); padding-right: 0; }
.tableau-documents td.col-check { vertical-align: middle; }
.tableau-documents tr:has(.doc-check:checked) td { background: var(--rouge-pale); }
.tableau-documents tr:has(.doc-check:checked):hover td { background: var(--rouge-pale); }

@media print { #analyse-globale { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   Estimation d'impôt + bilan de complétude (section Récapitulation)
   ═══════════════════════════════════════════════════════════════════════ */

.estimation, .completude { width: 100%; max-width: none; }

.est-lignes { padding: calc(var(--u) * 2) 0; }
.est-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 2.25) calc(var(--u) * 5);
  border-bottom: var(--filet);
  font-size: 0.875rem;
}
.est-ligne:last-child { border-bottom: none; }
.est-ligne-intitule { display: grid; gap: 2px; min-width: 0; }
.est-ligne-intitule small { color: var(--gris-500); font-size: 0.75rem; font-weight: 400; overflow-wrap: anywhere; }
.est-ligne .mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.est-ligne.est-detail { color: var(--gris-500); font-size: 0.8125rem; }
.est-ligne.est-detail .mono { color: var(--gris-500); }
.est-ligne.est-total {
  border-top: var(--filet-fort);
  border-bottom: var(--filet-fort);
  background: var(--papier);
  font-weight: 600;
  font-size: 1rem;
}
.est-ligne.est-total .mono { color: var(--rouge); font-size: 1.125rem; }
.est-ligne.est-total .mono.texte-attention { color: var(--ambre); }

.est-notes { border-top: var(--filet); }
.est-notes p { margin: 0 0 calc(var(--u) * 1.5); font-size: 0.75rem; color: var(--gris-500); line-height: 1.55; }
.est-notes p:last-child { margin-bottom: 0; }

.cp-ok { color: var(--ok); font-weight: 500; font-size: 0.875rem; margin: 0; }
.cp-liste { list-style: none; margin: 0 0 calc(var(--u) * 2); padding: 0; }
.cp-liste:last-child { margin-bottom: 0; }
.cp-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: calc(var(--u) * 2.5);
  align-items: baseline;
  padding: calc(var(--u) * 1.75) 0;
  font-size: 0.875rem;
}
.cp-marque { width: 8px; height: 8px; position: relative; top: -1px; }
.cp-manque .cp-marque { background: var(--ambre); }
.cp-erreur .cp-marque { background: var(--rouge); }
.cp-info .cp-marque { background: var(--bleu-info); }
.cp-texte { line-height: 1.5; }
.cp-non-entamees { margin-top: calc(var(--u) * 3); padding-top: calc(var(--u) * 3); border-top: var(--filet); }
.cp-non-entamees summary { cursor: pointer; font-size: 0.8425rem; font-weight: 500; color: var(--gris-700); }
.cp-non-entamees summary:hover { color: var(--encre); }
.cp-non-entamees p { margin: calc(var(--u) * 2) 0 0; }

/* Barre de progression de la navigation AJAX (haut de page) */
#barre-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--encre);
  z-index: 100;
  opacity: 1;
  pointer-events: none;
}
#barre-nav.actif { width: 90%; transition: width 8s cubic-bezier(0.1, 0.7, 0.1, 1); }
#barre-nav.fini { width: 100%; opacity: 0; transition: width 0.2s ease, opacity 0.3s ease 0.15s; }

/* ═══════════════════════════════════════════════════════════════════════
   Partage temporaire d'une déclaration
   ═══════════════════════════════════════════════════════════════════════ */

.panneau-partage { margin-top: calc(var(--u) * 6); }
.partage-modes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 6); align-items: start; }
.partage-mode { margin: 0; }
.partage-mode-diagnostic { border-top: 3px solid var(--ambre); }
.partage-mode .panneau-corps > p:first-child { margin-top: 0; }
.liste-partage { margin: calc(var(--u) * 3) 0; padding-left: calc(var(--u) * 5); color: var(--gris-700); }
.liste-partage li + li { margin-top: var(--u); }
.partage-avertissement-sensible { margin: calc(var(--u) * 4) 0; }
.partage-formulaire-mode { display: grid; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 5); padding-top: calc(var(--u) * 4); border-top: var(--filet); }
.partage-formulaire-mode .btn { justify-self: start; }
.partage-consentement { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 2); align-items: start; max-width: 720px; font-size: 0.8125rem; line-height: 1.45; text-transform: none; letter-spacing: normal; }
.partage-consentement input { margin-top: 0.2em; }
.partage-etat-panneau { margin-top: calc(var(--u) * 5); }
.partage-etat-complet { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 5); }
.partage-etat-complet p { margin-bottom: 0; }
.partage-lien-nouveau h2 { margin: 0 0 calc(var(--u) * 2); }
.partage-explication { display: flex; justify-content: space-between; gap: calc(var(--u) * 8); }
.partage-explication > div:first-child { max-width: 760px; }
.partage-avertissement { margin-top: calc(var(--u) * 3); padding-left: calc(var(--u) * 3); border-left: 3px solid var(--ambre); color: var(--gris-700); }
.partage-etat { display: grid; justify-items: end; align-content: start; gap: calc(var(--u) * 1.5); min-width: 250px; font-size: 0.75rem; color: var(--gris-500); }
.partage-lien-nouveau { margin-top: calc(var(--u) * 5); padding: calc(var(--u) * 4); border: 1px solid var(--ok); background: var(--ok-pale); }
.partage-lien-nouveau > label { display: block; margin-bottom: calc(var(--u) * 2); font-weight: 600; }
.partage-copie { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: calc(var(--u) * 2); }
.partage-copie input { width: 100%; min-width: 0; }
.partage-actions { display: flex; align-items: end; justify-content: space-between; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 5); padding-top: calc(var(--u) * 4); border-top: var(--filet); }
.partage-actions form { display: flex; align-items: end; gap: calc(var(--u) * 2); margin: 0; }
.partage-actions label { font-size: 0.75rem; font-weight: 600; color: var(--gris-700); }
.partage-actions select { min-width: 130px; }
.partage-rotation-note { margin: calc(var(--u) * 2) 0 0; }

.partage-public { min-height: 100vh; background: var(--gris-50); }
.partage-public-entete { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 4); min-height: 68px; padding: calc(var(--u) * 3) max(calc(var(--u) * 6), calc((100vw - 1180px) / 2)); border-top: 3px solid var(--rouge); border-bottom: var(--filet); background: var(--blanc); }
.partage-public-entete .marque { pointer-events: none; }
.partage-public-contenu { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: calc(var(--u) * 10) 0 calc(var(--u) * 12); }
.partage-intro { display: flex; justify-content: space-between; align-items: start; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 6); }
.partage-intro p { max-width: 680px; color: var(--gris-500); }
.partage-meta { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 1px; margin: 0; background: var(--gris-200); border: var(--filet); }
.partage-meta div { padding: calc(var(--u) * 3); background: var(--blanc); }
.partage-meta dt { margin-bottom: var(--u); font-size: 0.6563rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris-500); }
.partage-meta dd { margin: 0; font-family: var(--fonte-mono); font-size: 0.75rem; }
.partage-confidentialite { margin-bottom: calc(var(--u) * 6); }
.partage-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 6); }
.partage-stats .stat-carte { min-width: 0; }
.partage-stats .valeur { font-size: clamp(1.15rem, 2vw, 1.5rem); overflow-wrap: anywhere; }
.partage-completude-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.partage-completude-liste > div { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3) calc(var(--u) * 5); border-bottom: var(--filet); }
.partage-completude-liste > div:nth-last-child(-n + 2) { border-bottom: none; }
.partage-section { margin-top: calc(var(--u) * 5); }
.partage-section .panneau-entete h2 { display: flex; align-items: baseline; gap: calc(var(--u) * 3); margin: 0; }
.partage-numero { color: var(--rouge); font-size: 0.75rem; }
.partage-tableau { min-width: 720px; }
.partage-tableau th, .partage-tableau td { vertical-align: top; }
.partage-tableau td:not(:nth-child(2)) { font-family: var(--fonte-mono); font-size: 0.75rem; }
.partage-section .tableau-conteneur { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.partage-groupe { padding: calc(var(--u) * 5); border-top: var(--filet); }
.partage-groupe h3 span { margin-left: calc(var(--u) * 2); font-size: 0.75rem; font-weight: 400; color: var(--gris-500); }
.partage-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 3); }
.partage-carte-ligne { margin: 0; border: var(--filet); background: var(--papier); }
.partage-carte-ligne > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, auto); gap: calc(var(--u) * 3); padding: calc(var(--u) * 2.5) calc(var(--u) * 3); border-bottom: var(--filet); }
.partage-carte-ligne > div:last-child { border-bottom: none; }
.partage-carte-ligne dt { color: var(--gris-500); }
.partage-carte-ligne dd { margin: 0; text-align: right; font-family: var(--fonte-mono); }
.partage-carte-ligne .partage-carte-titre { background: var(--gris-50); font-weight: 600; }
.partage-public-pied { margin-top: calc(var(--u) * 8); }
.partage-indisponible { display: grid; place-items: center; padding: calc(var(--u) * 6); }
.partage-indisponible > main { width: min(560px, 100%); }

/* Diagnostic complet partage */
.partage-diagnostic-public .partage-public-contenu { width: min(1380px, calc(100% - 32px)); }
.diagnostic-sommaire { position: sticky; top: 0; z-index: 5; display: flex; gap: 1px; overflow-x: auto; margin-bottom: calc(var(--u) * 6); padding: 1px; border: var(--filet); background: var(--gris-200); }
.diagnostic-sommaire a { flex: 0 0 auto; padding: calc(var(--u) * 2.5) calc(var(--u) * 3); background: var(--blanc); color: var(--gris-700); font-size: 0.75rem; font-weight: 600; text-decoration: none; }
.diagnostic-sommaire a:hover { color: var(--rouge); }
.diagnostic-deductions, .diagnostic-controles, .diagnostic-documents, .diagnostic-calculs, .diagnostic-conseils { margin-top: calc(var(--u) * 6); }
.diagnostic-totaux-pro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 4); }
.diagnostic-totaux-pro > div { display: flex; justify-content: space-between; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3); border: var(--filet); background: var(--gris-50); }
.diagnostic-periode { padding: calc(var(--u) * 3) 0; border-top: var(--filet); }
.diagnostic-periode h3, .diagnostic-periode p { margin: 0; }
.diagnostic-periode p + p { margin-top: var(--u); }
.diagnostic-warning { color: #8a5410; }
.diagnostic-controle { padding: calc(var(--u) * 3) 0; border-bottom: var(--filet); }
.diagnostic-controle:last-child { border-bottom: 0; }
.diagnostic-controle p { margin: var(--u) 0 0; color: var(--gris-700); }
.diagnostic-liste-documents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.diagnostic-document { display: flex; align-items: start; justify-content: space-between; gap: calc(var(--u) * 4); padding: calc(var(--u) * 4); border-bottom: var(--filet); }
.diagnostic-document:nth-child(odd) { border-right: var(--filet); }
.diagnostic-document h3 { margin: 0 0 var(--u); overflow-wrap: anywhere; }
.diagnostic-document p { margin: var(--u) 0 0; color: var(--gris-500); font-size: 0.75rem; }
.diagnostic-titre-section { margin: calc(var(--u) * 8) 0 calc(var(--u) * 4); }
.diagnostic-titre-section h2 { margin-bottom: var(--u); }
.diagnostic-titre-section p { margin: 0; color: var(--gris-500); }
.diagnostic-section-details { margin-top: calc(var(--u) * 3); }
.diagnostic-section-details > summary, .diagnostic-summary-panneau { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); min-height: 54px; padding: calc(var(--u) * 3) calc(var(--u) * 5); cursor: pointer; font-weight: 600; list-style-position: inside; }
.diagnostic-section-details[open] > summary, details[open] > .diagnostic-summary-panneau { border-bottom: var(--filet); }
.diagnostic-tableau { min-width: 1080px; }
.diagnostic-tableau th, .diagnostic-tableau td { vertical-align: top; }
.diagnostic-tableau .diagnostic-vide { background: #fffaf0; }
.diagnostic-groupe { padding: calc(var(--u) * 4) calc(var(--u) * 5); border-top: var(--filet); }
.diagnostic-groupe h3 span { color: var(--gris-500); font-size: 0.75rem; font-weight: 400; }
.diagnostic-ligne-groupe { margin-top: calc(var(--u) * 2); border: var(--filet); }
.diagnostic-ligne-groupe > summary { padding: calc(var(--u) * 2.5) calc(var(--u) * 3); cursor: pointer; background: var(--gris-50); font-weight: 600; }
.diagnostic-ligne-groupe dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.diagnostic-ligne-groupe dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, auto); gap: calc(var(--u) * 3); padding: calc(var(--u) * 2.5) calc(var(--u) * 3); border-bottom: var(--filet); }
.diagnostic-ligne-groupe dt { color: var(--gris-500); }
.diagnostic-ligne-groupe dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.diagnostic-liste-calculs > details, .diagnostic-extractions > details { border-bottom: var(--filet); }
.diagnostic-liste-calculs summary, .diagnostic-extractions summary { display: flex; justify-content: space-between; gap: calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 5); cursor: pointer; }
.diagnostic-liste-calculs details > div, .diagnostic-extractions details > div { padding: 0 calc(var(--u) * 5) calc(var(--u) * 4); }
.diagnostic-propositions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.diagnostic-propositions article { padding: calc(var(--u) * 4); border-bottom: var(--filet); }
.diagnostic-propositions article:nth-child(odd) { border-right: var(--filet); }
.diagnostic-propositions header { display: flex; justify-content: space-between; gap: calc(var(--u) * 3); }
.diagnostic-propositions p, .diagnostic-propositions blockquote { font-size: 0.8125rem; }
.diagnostic-propositions blockquote { margin: calc(var(--u) * 2) 0 0; padding-left: calc(var(--u) * 3); border-left: 3px solid var(--gris-300); color: var(--gris-700); }
.diagnostic-propositions pre, .diagnostic-extractions pre { max-height: 420px; overflow: auto; padding: calc(var(--u) * 3); border: var(--filet); background: #111; color: #f5f5f5; font-size: 0.7rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.diagnostic-gemini > .panneau { margin-top: calc(var(--u) * 3); }
.diagnostic-conseils article + article { padding-top: calc(var(--u) * 3); border-top: var(--filet); }

@media (max-width: 820px) {
  .partage-modes { grid-template-columns: 1fr; }
  .partage-etat-complet { align-items: stretch; flex-direction: column; }
  .partage-etat-complet .btn { width: 100%; }
  .partage-explication, .partage-intro { display: grid; }
  .partage-etat { justify-items: start; min-width: 0; }
  .partage-meta { grid-template-columns: 1fr; }
  .partage-stats { grid-template-columns: repeat(2, 1fr); }
  .partage-cartes, .partage-completude-liste { grid-template-columns: 1fr; }
  .partage-completude-liste > div { border-bottom: var(--filet) !important; }
  .partage-completude-liste > div:last-child { border-bottom: none !important; }
  .partage-copie { grid-template-columns: 1fr; }
  .partage-actions, .partage-actions form { align-items: stretch; }
  .partage-actions { flex-direction: column; }
  .partage-actions form { width: 100%; flex-direction: column; }
  .partage-actions select, .partage-actions .btn { width: 100%; }
  .diagnostic-liste-documents, .diagnostic-propositions { grid-template-columns: 1fr; }
  .diagnostic-document:nth-child(odd), .diagnostic-propositions article:nth-child(odd) { border-right: 0; }
  .diagnostic-ligne-groupe dl { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .carte-declaration-actions { align-items: stretch; flex-direction: column; }
  .carte-declaration-actions .btn, .carte-declaration-actions form, .carte-declaration-actions button { width: 100%; }
  .partage-public-contenu { width: min(100% - 20px, 1180px); padding-top: calc(var(--u) * 6); }
  .partage-stats { grid-template-columns: 1fr; }
  .partage-public-entete .marque small { display: none; }
  .partage-carte-ligne > div { grid-template-columns: 1fr; }
  .partage-carte-ligne dd { text-align: left; }
  .diagnostic-totaux-pro { grid-template-columns: 1fr; }
  .diagnostic-document { align-items: stretch; flex-direction: column; }
  .diagnostic-document .btn { width: 100%; }
  .diagnostic-ligne-groupe dl > div { grid-template-columns: 1fr; }
  .diagnostic-ligne-groupe dd { text-align: left; }
}