/* =========================================================================
   Outil subventions : la même feuille sert la page publique et la vue de
   l'appli. Tout est rangé sous .sv, et chaque couleur passe par un jeton
   --sv-* qui lit d'abord l'habillage des outils publics (docs.css, --dc-*),
   sinon les jetons de l'appli (--surface, --ink…), sinon une valeur claire.
   L'appli redéfinit ses jetons en sombre : l'outil suit sans rien de plus.

   Rouge réservé aux erreurs et au geste d'effacer. Une aide écartée ou une
   rubrique à compléter n'est pas un incident : gris et ocre.
   ========================================================================= */

.sv {
  --sv-bg: var(--dc-bg, var(--bg, #F5F7FA));
  --sv-surface: var(--dc-surface, var(--surface, #FFFFFF));
  --sv-surface-2: var(--dc-bg, var(--surface-2, #F8FAFC));
  --sv-ink: var(--dc-ink, var(--ink, #0F172A));
  --sv-ink-2: var(--dc-ink-2, var(--ink, #334155));
  --sv-muted: var(--dc-muted, var(--muted, #64748B));
  --sv-faint: var(--dc-faint, var(--faint, #94A3B8));
  --sv-line: var(--dc-line, var(--line, #E2E8F0));
  --sv-line-2: var(--dc-line-2, var(--line-dash, #CBD5E1));
  --sv-primary: var(--dc-primary, var(--btn, #2F4A8A));
  --sv-primary-hover: var(--dc-primary-hover, var(--color-primary-dark, #243B71));
  --sv-primary-soft: var(--dc-primary-soft, var(--primary-soft, #EEF2FA));
  --sv-primary-ink: var(--dc-primary, var(--primary-ink, #2F4A8A));
  --sv-link: var(--dc-primary, var(--link, #2F4A8A));
  --sv-ring: var(--dc-primary-ring, var(--primary-15, rgba(47, 74, 138, .28)));
  --sv-ok: var(--dc-ok, var(--green, #15803D));
  --sv-ok-soft: var(--dc-ok-soft, var(--green-soft, #ECFDF3));
  --sv-warn: var(--dc-warn, var(--accent, #A16207));
  --sv-warn-soft: var(--dc-warn-soft, var(--accent-soft, #FEF6E4));
  --sv-err: var(--dc-err, var(--danger, #B91C1C));
  --sv-err-soft: var(--dc-err-soft, var(--danger-soft, #FEF2F2));
  --sv-err-fill: var(--dc-err, var(--danger-fill, #B91C1C));
  --sv-on-fill: #FFFFFF;
  /* Le cadre de signature reste du papier blanc, même en sombre : c'est ce que
     le Cerfa recevra, et l'encre bleu nuit doit s'y lire. */
  --sv-papier: #FFFFFF;
  --sv-papier-ink: #64748B;
  --sv-papier-line: #CBD5E1;
  --sv-radius: var(--dc-radius, var(--radius-lg, 16px));
  --sv-radius-sm: var(--dc-radius-sm, 10px);
  --sv-shadow: var(--dc-shadow, var(--shadow, 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05)));
  --sv-ease: var(--dc-ease, cubic-bezier(.16, 1, .3, 1));

  color: var(--sv-ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.sv *, .sv *::before, .sv *::after { box-sizing: border-box; }
.sv p { margin: 0; }
.sv h2, .sv h3 { margin: 0; text-wrap: balance; color: var(--sv-ink); }
.sv h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.sv h2:focus { outline: none; }
.sv h3 { font-size: 17px; font-weight: 700; line-height: 1.35; }
.sv ul, .sv ol { margin: 0; }
.sv [hidden] { display: none !important; }

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.sv .sv-lecteur {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ─── Charpente ─── */

.sv-zone, .sv-outil { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sv-corps { min-width: 0; }
.sv-pile { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.sv-carte {
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
  background: var(--sv-surface);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow);
  padding: 24px;
}
.sv-carte > h2 + .sv-champ-aide { margin-top: -8px; }
.sv-chargement { align-items: center; color: var(--sv-muted); padding-block: 40px; }

.sv-entete { gap: 10px; }
.sv-entete h2 { font-size: 22px; }

.sv-financeur {
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sv-muted);
}

.sv-sous-titre {
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sv-muted);
}

.sv-champ-aide { font-size: 13.5px; color: var(--sv-muted); line-height: 1.45; }
.sv-texte-err { color: var(--sv-err); }

/* ─── Fil des étapes ─── */

.sv-etapes { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sv-etapes::-webkit-scrollbar { display: none; }
.sv-etapes ol {
  list-style: none; padding: 0; display: flex; gap: 6px;
}
.sv-etapes li { flex: 1 1 0; min-width: 0; }
.sv-etape {
  width: 100%; display: flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 600; text-align: left;
  color: var(--sv-muted); background: transparent;
  border: 0; border-bottom: 3px solid var(--sv-line);
  padding: 8px 4px 10px; cursor: pointer;
  transition: color .15s var(--sv-ease), border-color .15s var(--sv-ease);
}
.sv-etape:disabled { cursor: default; color: var(--sv-faint); }
.sv-etape:not(:disabled):hover { color: var(--sv-ink); }
.sv-etape-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
  background: var(--sv-surface-2); border: 1px solid var(--sv-line); color: inherit;
}
.sv-etape-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-etape--faite { color: var(--sv-ink-2); border-bottom-color: var(--sv-primary-soft); }
.sv-etape--faite .sv-etape-n { background: var(--sv-primary-soft); border-color: transparent; color: var(--sv-primary-ink); }
.sv-etape[aria-current="step"] { color: var(--sv-ink); border-bottom-color: var(--sv-primary); }
.sv-etape[aria-current="step"] .sv-etape-n { background: var(--sv-primary); border-color: var(--sv-primary); color: var(--sv-on-fill); }

/* ─── Pied : retour, sauvegarde, suite ─── */

.sv-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 4px;
}
.sv-pied-suite { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-left: auto; min-width: 0; }
.sv-pied-suite .sv-champ-aide { max-width: 32ch; text-align: right; }
.sv-statut { font-size: 13px; color: var(--sv-faint); min-height: 1em; }
.sv-statut--err { color: var(--sv-err); }

/* ─── Boutons et liens ─── */

.sv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center;
  min-height: 44px; padding: 10px 18px;
  border-radius: 12px; border: 1px solid var(--sv-line-2);
  background: var(--sv-surface); color: var(--sv-ink);
  cursor: pointer; text-decoration: none;
  transition: background .15s var(--sv-ease), border-color .15s var(--sv-ease), color .15s var(--sv-ease), transform .1s var(--sv-ease);
}
.sv-btn:hover:not(:disabled) { border-color: var(--sv-faint); }
.sv-btn:active:not(:disabled) { transform: translateY(1px); }
.sv-btn:focus-visible, .sv-lien:focus-visible, .sv-puce:focus-visible, .sv-etape:focus-visible,
.sv-details > summary:focus-visible {
  outline: none; box-shadow: 0 0 0 4px var(--sv-ring);
}
.sv-btn:disabled { opacity: .5; cursor: not-allowed; }

.sv-btn--primaire { background: var(--sv-primary); border-color: var(--sv-primary); color: var(--sv-on-fill); }
.sv-btn--primaire:hover:not(:disabled) { background: var(--sv-primary-hover); border-color: var(--sv-primary-hover); }

.sv-btn--danger { background: var(--sv-err-fill); border-color: var(--sv-err-fill); color: var(--sv-on-fill); }
.sv-btn--danger:hover:not(:disabled) { filter: brightness(.92); }

.sv-btn--discret { background: transparent; border-color: transparent; color: var(--sv-link); }
.sv-btn--discret:hover:not(:disabled) { background: var(--sv-primary-soft); border-color: transparent; }
.sv-btn--discret[aria-pressed="true"] { background: var(--sv-primary-soft); color: var(--sv-primary-ink); }
.sv-btn--discret[aria-pressed="true"]::before { content: '✓'; font-weight: 700; }

.sv-lien {
  font: inherit; color: var(--sv-link); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  border-radius: 4px;
}
.sv-lien:hover { text-decoration-thickness: 2px; }
.sv-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }

/* ─── Champs ─── */

.sv-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; min-width: 0; }
.sv-grille--serree { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sv-rangee { align-items: end; padding-bottom: 14px; border-bottom: 1px solid var(--sv-line); }
.sv-rangee:last-child { border-bottom: 0; padding-bottom: 0; }

.sv-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sv-champ--large { grid-column: 1 / -1; }
.sv-champ--bouton { align-items: flex-start; }
.sv-champ-aide--attention { color: var(--sv-warn); }
.sv-champ-lib { font-size: 14px; font-weight: 600; color: var(--sv-ink-2); }
.sv-champ-pied { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.sv-input {
  width: 100%; min-width: 0;
  font: inherit; font-size: 16px; color: var(--sv-ink);
  background: var(--sv-surface); border: 1px solid var(--sv-line-2);
  border-radius: var(--sv-radius-sm); padding: 10px 12px; min-height: 46px;
  transition: border-color .15s var(--sv-ease), box-shadow .15s var(--sv-ease);
}
.sv-input::placeholder { color: var(--sv-faint); }
.sv-input:hover { border-color: var(--sv-faint); }
.sv-input:focus { outline: none; border-color: var(--sv-primary); box-shadow: 0 0 0 4px var(--sv-ring); }
.sv-input[aria-invalid="true"] { border-color: var(--sv-err); }
textarea.sv-input { min-height: 96px; resize: vertical; line-height: 1.5; }
select.sv-input { cursor: pointer; }
.sv-input--code {
  width: 9.5em; flex: none !important; text-align: center;
  font-variant-numeric: tabular-nums; letter-spacing: .3em; font-weight: 700;
}

/* Les fédérations proposées sous le champ, pendant la frappe. */
.sv-combo { position: relative; min-width: 0; }
.sv-combo-liste {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 4px;
  max-height: min(340px, 60vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--sv-surface); border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-sm); box-shadow: var(--sv-shadow);
}
.sv-combo-option {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.sv-combo-option:hover, .sv-combo-option[aria-selected="true"] { background: var(--sv-primary-soft); }
.sv-combo-nom { font-size: 15px; line-height: 1.35; color: var(--sv-ink); }
.sv-combo-aide { font-size: 13px; color: var(--sv-muted); }

.sv-compteur { font-size: 12.5px; color: var(--sv-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-compteur--trop { color: var(--sv-err); font-weight: 700; }

/* Une saisie et son bouton, côte à côte tant que la place le permet. */
.sv-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.sv-ligne > .sv-input { flex: 1 1 220px; }

.sv-case {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start;
  cursor: pointer; font-size: 15px;
}
.sv-case input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sv-primary); cursor: pointer; }
.sv-case .sv-champ-aide { display: block; }

.sv-question { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sv-question legend { padding: 0; font-size: 15px; font-weight: 600; color: var(--sv-ink); margin-bottom: 8px; }
.sv-question legend + .sv-champ-aide { margin-top: -8px; }
.sv-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-puce {
  font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.25;
  min-height: 40px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--sv-line-2);
  background: var(--sv-surface); color: var(--sv-ink-2); cursor: pointer;
  transition: background .15s var(--sv-ease), border-color .15s var(--sv-ease), color .15s var(--sv-ease);
}
.sv-puce:hover { border-color: var(--sv-faint); }
.sv-puce[aria-pressed="true"] {
  background: var(--sv-primary-soft); border-color: var(--sv-primary); color: var(--sv-primary-ink); font-weight: 600;
}
.sv-puce[aria-pressed="true"]::before { content: '✓\00a0'; }

.sv-questions { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-primary-soft); }

/* ─── Volets dépliables ─── */

.sv-details { border-top: 1px solid var(--sv-line); padding-top: 12px; min-width: 0; }
/* Le trait sépare d'un contenu au-dessus : seul dans sa carte, il n'a rien à séparer. */
.sv-details:first-child { border-top: 0; padding-top: 0; }
.sv-details > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--sv-link); border-radius: 6px;
}
.sv-details > summary::-webkit-details-marker { display: none; }
.sv-details > summary::before {
  content: ''; flex: none; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s var(--sv-ease); margin-right: 2px;
}
.sv-details[open] > summary::before { transform: rotate(45deg); }
.sv-details-corps { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; min-width: 0; }

/* ─── Alertes, toast ─── */

.sv-alerte {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-radius: var(--sv-radius-sm); padding: 12px 14px; font-size: 14.5px;
  border: 1px solid transparent;
}
.sv-alerte--info { background: var(--sv-primary-soft); color: var(--sv-ink); }
.sv-alerte--ok { background: var(--sv-ok-soft); color: var(--sv-ink); border-color: var(--sv-ok-soft); }
.sv-alerte--ok::before { content: '✓'; color: var(--sv-ok); font-weight: 700; }
.sv-alerte--err { background: var(--sv-err-soft); color: var(--sv-ink); border-color: var(--sv-err); }
/* Ce qui demande d'agir sans être une faute : pas de rouge. */
.sv-alerte--warn { background: var(--sv-warn-soft); color: var(--sv-ink); border-color: var(--sv-warn-soft); }
.sv-alerte > span { flex: 1 1 240px; min-width: 0; }

.sv-toast {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: min(440px, calc(100vw - 32px));
  background: var(--sv-ink); color: var(--sv-surface);
  font-size: 14.5px; font-weight: 500; padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .25);
}

/* ─── Étape 1 et 2 : l'association, la commune ─── */

.sv-retrouver { font-size: 14.5px; color: var(--sv-muted); }

.sv-trouvee {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--sv-ok-soft); border: 1px solid var(--sv-ok-soft);
  border-radius: var(--sv-radius-sm); padding: 14px 16px;
}
.sv-trouvee-nom { font-weight: 700; color: var(--sv-ink); }

.sv-territoire {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--sv-surface-2); border-radius: var(--sv-radius-sm); padding: 14px 16px;
}

/* ─── Étape 3 : les aides ─── */

.sv-fiches { display: grid; gap: 14px; }
.sv-fiche {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--sv-surface); border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius); padding: 20px 22px;
  box-shadow: var(--sv-shadow);
}
.sv-fiche--choisie { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-primary-soft); }
.sv-fiche-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sv-fiche-resume { color: var(--sv-ink-2); font-size: 15px; }
.sv-fiche-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 4px; }

.sv-verdict {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px;
}
.sv-verdict::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sv-verdict--eligible { background: var(--sv-ok-soft); color: var(--sv-ok); }
.sv-verdict--a_verifier { background: var(--sv-warn-soft); color: var(--sv-warn); }
.sv-verdict--ecartee { background: var(--sv-surface-2); color: var(--sv-muted); }

.sv-faits {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px;
  padding: 12px 14px; background: var(--sv-surface-2); border-radius: var(--sv-radius-sm);
}
.sv-faits > div { min-width: 0; }
.sv-faits dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sv-muted); }
.sv-faits dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 500; color: var(--sv-ink); }

.sv-repere { font-size: 14px; color: var(--sv-ink-2); }
.sv-repere strong { color: var(--sv-ink); }

.sv-criteres { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sv-declarations { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.sv-etat { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; }
.sv-marque {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1;
}
.sv-etat--ok .sv-marque { background: var(--sv-ok-soft); color: var(--sv-ok); }
.sv-etat--non .sv-marque { background: var(--sv-surface-2); color: var(--sv-muted); border: 1px solid var(--sv-line); }
.sv-etat--non { color: var(--sv-muted); }
.sv-etat--inconnu .sv-marque { background: var(--sv-warn-soft); color: var(--sv-warn); }
.sv-etat--condition .sv-marque { background: var(--sv-primary-soft); color: var(--sv-primary-ink); }

.sv-details-corps ul:not([class]) { padding-left: 20px; font-size: 14.5px; display: flex; flex-direction: column; gap: 4px; }
.sv-details-corps > div > .sv-sous-titre { margin-bottom: 6px; }

.sv-conseil {
  font-size: 14.5px; color: var(--sv-ink-2);
  background: var(--sv-warn-soft); border-radius: var(--sv-radius-sm); padding: 12px 14px;
}
.sv-conseil strong { color: var(--sv-ink); }

.sv-sources { padding-left: 20px; font-size: 14px; overflow-wrap: anywhere; }
.sv-sources a { color: var(--sv-link); }

.sv-ouvertures, .sv-ecartees { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.sv-ecartees { color: var(--sv-muted); }

/* ─── Étape 4 : le dossier ─── */

.sv-sommaire { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14.5px; padding-top: 4px; }

.sv-budget { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; min-width: 0; }
.sv-budget-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sv-budget-col > h3 { font-size: 15px; }

.sv-bg { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm); overflow: hidden; min-width: 0; }
.sv-bg-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--sv-surface-2); padding: 10px 12px;
  font-size: 13.5px; font-weight: 700; color: var(--sv-ink-2);
}
.sv-bg-tete > span:first-child { min-width: 0; }

.sv-bl {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 12px; border-top: 1px solid var(--sv-line);
}
.sv-bg-tete + .sv-bl { border-top: 0; }
.sv-bl-lib { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-bl-lib > .sv-input { min-height: 40px; padding-block: 8px; font-size: 15px; }
.sv-bl-fixe { font-size: 14.5px; color: var(--sv-ink); }
.sv-bl-montant { display: inline-flex; align-items: center; gap: 6px; color: var(--sv-muted); font-variant-numeric: tabular-nums; }
.sv-bl-montant > .sv-input { width: 7.5em; min-height: 40px; padding-block: 8px; text-align: right; font-variant-numeric: tabular-nums; }
.sv-bl--seule { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm); }
.sv-bl--demande { background: var(--sv-primary-soft); }
.sv-bl--demande .sv-bl-montant { color: var(--sv-primary-ink); font-weight: 700; padding-right: 2px; }
.sv-bl--sub { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto auto; }
.sv-bl--sub > .sv-input { min-height: 40px; padding-block: 8px; font-size: 15px; }
.sv-bg > .sv-btn--discret { margin: 2px 4px 6px; }
.sv-bg > .sv-champ-aide { display: block; padding: 0 12px 12px; }
.sv-bl--total {
  border: 0; border-top: 2px solid var(--sv-ink-2); border-radius: 0;
  padding: 10px 12px 0; font-weight: 700;
}
.sv-bl--total .sv-bl-lib { font-size: 14.5px; }
.sv-total { font-weight: 700; color: var(--sv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sv-equilibre { font-size: 14.5px; font-weight: 600; border-radius: var(--sv-radius-sm); }
.sv-equilibre:empty { display: none; }
.sv-equilibre--ok { color: var(--sv-ok); }
.sv-equilibre--ok::before { content: '✓\00a0'; }
.sv-equilibre--ecart { color: var(--sv-ink); background: var(--sv-warn-soft); padding: 10px 12px; }

.sv-sig-cadre { display: flex; flex-direction: column; gap: 8px; }
.sv-sig {
  position: relative; max-width: 520px;
  background: var(--sv-papier); border: 1px dashed var(--sv-papier-line); border-radius: var(--sv-radius-sm);
}
.sv-sig-pad {
  display: block; width: 100%; height: 170px;
  touch-action: none; cursor: crosshair; border-radius: var(--sv-radius-sm);
}
.sv-sig-aide {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; font-size: 14.5px; color: var(--sv-papier-ink); pointer-events: none;
}
.sv-sig::after {
  content: ''; position: absolute; left: 24px; right: 24px; bottom: 34px;
  border-bottom: 1px solid var(--sv-papier-line); pointer-events: none;
}
.sv-sig-effacer {
  position: absolute; top: 8px; right: 8px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: #2F4A8A;
  background: var(--sv-papier); border: 1px solid var(--sv-papier-line); border-radius: 8px;
  padding: 6px 10px; cursor: pointer;
}

.sv-pieces-liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.sv-pieces-liste li { display: block; padding-left: 26px; position: relative; }
.sv-pieces-liste li::before {
  content: ''; position: absolute; left: 4px; top: .45em; width: 12px; height: 12px;
  border: 1.5px solid var(--sv-faint); border-radius: 50%;
}
.sv-pieces-liste li.sv-piece--ok::before {
  content: '✓'; border: 0; top: .05em; width: auto; height: auto; color: var(--sv-ok); font-weight: 800;
}

.sv-fichier { position: relative; align-self: flex-start; }
.sv-fichier:focus-within .sv-btn { box-shadow: 0 0 0 4px var(--sv-ring); }
.sv-fichier .sv-btn { pointer-events: none; }
.sv-fichier { cursor: pointer; }

.sv-pieces-jointes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sv-pieces-jointes li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto auto; gap: 8px 12px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm);
}
.sv-piece-nom { font-size: 14.5px; overflow-wrap: anywhere; }
.sv-pieces-jointes .sv-input { min-height: 40px; padding-block: 8px; font-size: 14.5px; }

/* ─── Étape 5 : vérifier, télécharger, envoyer ─── */

.sv-manques {
  list-style: none; padding: 0; display: flex; flex-direction: column;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm);
}
/* Une liste à cocher : un rond vide en tête, ocre pour ce qui bloque le dépôt. */
.sv-manque {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  min-height: 48px; padding: 8px 8px 8px 14px; border-top: 1px solid var(--sv-line); font-size: 14.5px;
}
.sv-manque:first-child { border-top: 0; }
.sv-manque::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--sv-faint);
}
.sv-manque--bloque::before { border: 2px solid var(--sv-warn); }
.sv-manque--bloque > span { color: var(--sv-ink); font-weight: 500; }
.sv-manque > .sv-btn { min-height: 36px; padding: 6px 10px; }

.sv-etapes-depot { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.sv-etapes-depot li::marker { font-weight: 700; color: var(--sv-muted); }

.sv-copies { list-style: none; padding: 0; display: flex; flex-direction: column; }
.sv-copie {
  display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--sv-line);
}
.sv-copie:first-child { border-top: 0; }
.sv-copie-texte { font-size: 13.5px; color: var(--sv-muted); }
.sv-copie-valeur { font-size: 15px; color: var(--sv-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sv-copie--fort .sv-copie-texte, .sv-copie--fort .sv-copie-valeur { font-weight: 700; color: var(--sv-ink); }
.sv-copie--long { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.sv-copie--long .sv-copie-texte { grid-column: 1; }
.sv-copie--long .sv-btn { grid-column: 2; grid-row: 1; }
.sv-copie--long .sv-copie-valeur {
  grid-column: 1 / -1; white-space: pre-wrap; font-size: 14.5px; line-height: 1.55;
  max-height: 11.5em; overflow-y: auto;
  background: var(--sv-surface-2); border-radius: var(--sv-radius-sm); padding: 10px 12px;
}
.sv-copie .sv-btn { min-height: 36px; padding: 6px 12px; font-size: 14px; }

.sv-mairie {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--sv-surface-2); border-radius: var(--sv-radius-sm); padding: 14px 16px;
}
.sv-mairie-nom { font-weight: 700; }
.sv-mairie .sv-liens { padding-top: 6px; font-size: 14.5px; }

.sv-apercu {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14.5px; color: var(--sv-ink-2); line-height: 1.55;
  background: var(--sv-surface-2); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm);
  padding: 14px 16px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.sv-confirmer {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--sv-warn-soft); border-radius: var(--sv-radius-sm); padding: 14px 16px;
  font-size: 15px;
}

.sv-envoye {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--sv-ok-soft); border-radius: var(--sv-radius-sm); padding: 14px 16px;
}
.sv-envoye-titre { font-weight: 700; color: var(--sv-ink); }
.sv-envoye-titre::before { content: '✓\00a0'; color: var(--sv-ok); }
.sv-envoye-etat { color: var(--sv-ink); }
.sv-envoye-etat::before { content: '✓✓\00a0'; color: var(--sv-ok); font-weight: 700; letter-spacing: -.12em; }
/* Revenue : la demande est à refaire partir, la marche à suivre passe avant tout. */
.sv-envoye--revenu { background: var(--sv-warn-soft); gap: 8px; }
.sv-envoye--revenu .sv-envoye-titre::before { content: '!\00a0'; color: var(--sv-warn); font-weight: 800; }
.sv-envoye--revenu .sv-sous-titre { margin-top: 4px; }
.sv-revenu-pistes { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.sv-revenu-pistes li { padding-left: 2px; }

.sv-montant { background: var(--sv-surface); }

/* ─── Largeurs ─── */

@media (max-width: 720px) {
  .sv-etape { flex-direction: column; align-items: center; gap: 4px; padding-inline: 2px; text-align: center; }
  .sv-etape-nom { font-size: 12px; white-space: normal; line-height: 1.2; }
  .sv-pieces-jointes li { grid-template-columns: minmax(0, 1fr) auto; }
  .sv-pieces-jointes li .sv-input { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 560px) {
  .sv-carte { padding: 18px 16px; border-radius: 14px; gap: 14px; }
  .sv-fiche { padding: 16px; }
  .sv-entete h2 { font-size: 20px; }
  .sv-etape-nom { display: none; }
  .sv-etape[aria-current="step"] .sv-etape-nom { display: block; }
  .sv-etapes li:has(.sv-etape[aria-current="step"]) { flex-grow: 2.4; }
  .sv-pied { flex-direction: column-reverse; align-items: stretch; }
  .sv-pied > .sv-statut { text-align: center; }
  .sv-pied-suite { flex-direction: column; align-items: stretch; margin-left: 0; }
  .sv-pied-suite .sv-champ-aide { max-width: none; text-align: center; }
  .sv-pied .sv-btn { width: 100%; }
  .sv-pied > span:empty { display: none; }
  .sv-copie { grid-template-columns: minmax(0, 1fr) auto; }
  .sv-copie-texte { grid-column: 1 / -1; }
  .sv-copie--long .sv-copie-texte { grid-column: 1; }
  .sv-bl { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sv-bl-montant { justify-self: end; }
  .sv-bl--total { grid-template-columns: minmax(0, 1fr) auto; }
  .sv-bl--sub { grid-template-columns: minmax(0, 1fr) auto; }
  .sv-bl--sub > .sv-input { grid-column: 1 / -1; }
  .sv-sig-pad { height: 150px; }
  .sv-ligne > .sv-btn { flex: 1 1 auto; }
}

/* L'appli a sa barre d'onglets flottante en bas sur téléphone. */
@media (max-width: 900px) {
  .sv--app .sv-toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .sv *, .sv *::before, .sv *::after { transition: none !important; }
}