/* ============================================================================
   DA « Le formulaire officiel » — feuille maîtresse du parc document
   ----------------------------------------------------------------------------
   Se charge EN DERNIER, après responsive.css. Deux rôles :

   1. Elle redéfinit les jetons des DEUX vocabulaires du parc (--color-* sur
      3 sites, --primary/--text/--bg sur 6). Les composants existants tirent
      déjà leurs couleurs de ces jetons : la bascule est donc gratuite pour
      l'essentiel du site.
   2. Elle ajoute la grammaire documentaire (.doc-*) : cases réglées, champs
      étiquetés, référence réglementaire, tampon de verdict.

   L'accent est le SEUL jeton qui change d'un site à l'autre. Il est posé par
   automation/da/appliquer-da.py, qui écrit le bloc --accent juste au-dessus.
   Contrastes mesurés : pire cas 5,02:1 sur les trois fonds (AA).
   ========================================================================== */

/* ── Palette papier, commune aux douze ───────────────────────────────────── */
:root {
  --pap-papier:       #F2F1EC;   /* le fond de page */
  --pap-feuille:      #FFFFFF;   /* la feuille posée dessus */
  --pap-champ:        #E9E8E2;   /* le remplissage d'un champ, les sections alternées */
  --pap-encre:        #16191C;
  --pap-encre-2:      #454B50;
  --pap-encre-3:      #5E656B;
  --pap-trait:        #C9C6BE;   /* décoratif : 1,51:1, jamais du texte */
  --pap-trait-clair:  #DEDBD3;

  /* --accent / --accent-fonce / --accent-voile : posés par le script, par site.
     Valeur de repli = l'ardoise de reglement-interieur, pour que la feuille
     reste lisible si elle est chargée seule. */
  --accent:        #3A4A55;
  --accent-fonce:  #2A3740;
  --accent-voile:  #E7E9EB;

  --pap-titre: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --pap-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pap-prose: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* ── Bascule des jetons existants ────────────────────────────────────────────
   Vocabulaire A (--color-*) : reglement-interieur, registre-dasri, fiche-ronde */
:root {
  --color-primary:       var(--accent);
  --color-primary-dark:  var(--accent-fonce);
  --color-primary-light: var(--accent);
  --color-primary-bg:    var(--accent-voile);
  --color-secondary:     var(--accent-fonce);
  --color-accent:        var(--accent);
  --color-accent-dark:   var(--accent-fonce);

  --color-bg:           var(--pap-papier);
  --color-surface:      var(--pap-feuille);
  --color-text:         var(--pap-encre);
  --color-text-light:   var(--pap-encre-2);
  --color-text-muted:   var(--pap-encre-3);
  --color-border:       var(--pap-trait);
  --color-border-light: var(--pap-trait-clair);

  --color-success:    #17603C;  --color-success-bg: #E4EDE8;
  --color-error:      #96261D;  --color-error-bg:   #F2E3E1;
  --color-warning:    #7A5200;  --color-warning-bg: #EFE9D9;
  --color-info:       var(--accent); --color-info-bg: var(--accent-voile);

  --font-family: var(--pap-titre);
}

/* Vocabulaire B (--primary, --text, --bg) : duer, lettre-officielle,
   statuts-association, cgv-ecommerce, notes-de-frais, simulateur */
:root {
  --primary:       var(--accent);
  --primary-dark:  var(--accent-fonce);
  --primary-hover: var(--accent-fonce);
  --primary-light: var(--accent);
  --primary-50:    var(--accent-voile);
  --primary-100:   var(--accent-voile);
  --primary-200:   var(--pap-trait-clair);
  --primary-500:   var(--accent);
  --primary-600:   var(--accent);
  --primary-700:   var(--accent-fonce);
  --primary-800:   var(--accent-fonce);
  --primary-900:   var(--pap-encre);
  --primary-bg:    var(--accent-voile);
  --secondary:     var(--accent-fonce);
  --accent-dark:   var(--accent-fonce);
  --accent-hover:  var(--accent-fonce);
  --accent-50:     var(--accent-voile);
  --accent-light:  var(--accent);

  --dark:      var(--pap-encre);
  --dark-700:  var(--pap-encre-2);
  --dark-600:  var(--pap-encre-2);

  --text:         var(--pap-encre);
  --text-light:   var(--pap-encre-2);
  --text-lighter: var(--pap-encre-3);
  --text-muted:   var(--pap-encre-3);
  --text-white:   #FFFFFF;

  --bg:         var(--pap-papier);
  --bg-white:   var(--pap-feuille);
  --bg-card:    var(--pap-feuille);
  --bg-alt:     var(--pap-champ);
  --bg-muted:   var(--pap-champ);
  --bg-section: var(--pap-champ);
  --bg-input:   var(--pap-feuille);
  --bg-dark:    var(--pap-encre);

  --border:        var(--pap-trait);
  --border-light:  var(--pap-trait-clair);
  --border-focus:  var(--accent);

  --success: #17603C; --success-bg: #E4EDE8;
  --error:   #96261D; --error-bg:   #F2E3E1;
  --warning: #7A5200; --warning-bg: #EFE9D9;
  --info:    var(--accent); --info-bg: var(--accent-voile);

  --font-sans: var(--pap-titre);
  --font:      var(--pap-titre);
  --font-mono: var(--pap-mono);

  /* --muted n'est déclaré nulle part dans le parc, mais des vues l'appellent
     avec un repli en dur : « color: var(--muted, #64748b) ». En le déclarant,
     on récupère tous ces textes d'un coup. */
  --muted: var(--pap-encre-3);
}

/* Un formulaire officiel n'a pas d'angles ronds ni d'ombres portées.
   On aplatit les jetons plutôt que de chasser chaque composant. */
:root {
  --radius-sm: 2px; --radius: 3px;  --radius-md: 3px;
  --radius-lg: 3px; --radius-xl: 4px; --radius-full: 9999px;

  --shadow-sm: 0 1px 0 var(--pap-trait-clair);
  --shadow:    0 1px 2px rgba(22, 25, 28, .05);
  --shadow-md: 0 1px 2px rgba(22, 25, 28, .06), 0 6px 14px -10px rgba(22, 25, 28, .18);
  --shadow-lg: 0 1px 2px rgba(22, 25, 28, .06), 0 14px 28px -18px rgba(22, 25, 28, .22);
  --shadow-xl: 0 1px 2px rgba(22, 25, 28, .06), 0 22px 40px -24px rgba(22, 25, 28, .26);
}

/* ── Fond de page ────────────────────────────────────────────────────────── */
html { background: var(--pap-papier); }
body {
  background: var(--pap-papier);
  color: var(--pap-encre);
  font-family: var(--pap-titre);
  -webkit-font-smoothing: antialiased;
}

/* ── Titres ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pap-titre);
  color: var(--pap-encre);
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { font-weight: 700; line-height: 1.06; }
h2 { font-weight: 700; line-height: 1.12; }
h3, h4 { font-weight: 600; line-height: 1.2; }

/* Les dégradés de texte n'existent pas sur du papier.
   Deux règles et non une : la neutralisation du dégradé assume une forte
   spécificité, mais la COULEUR doit rester faible — sinon le sélecteur
   « .hero-title span[class*="gradient"] » (0,2,1) verrouille l'accent et un
   titre posé sur une bande sombre reste vert sur noir. */
.text-gradient, .gradient-text, .hero-title span[class*="gradient"] {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}
.text-gradient, .gradient-text { color: var(--accent); }

/* ── Prose longue : le corps d'un document se lit en romain ──────────────── */
.doc-prose,
.doc-prose p, .doc-prose li,
.seo-content p, .seo-content li,
.article-content p, .article-content li,
.legal-content p, .legal-content li {
  font-family: var(--pap-prose);
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--pap-encre-2);
}
.doc-prose h2, .doc-prose h3,
.seo-content h2, .seo-content h3,
.article-content h2, .article-content h3 { font-family: var(--pap-titre); }

/* ── Liens ───────────────────────────────────────────────────────────────── */
main a:not([class]),
.doc-prose a, .seo-content a, .article-content a, .legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
main a:not([class]):hover { text-decoration-thickness: 2px; }

/* ── Accessibilité : un anneau visible partout ───────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ══ La grammaire documentaire ═══════════════════════════════════════════════
   Ce que le visiteur doit voir avant qu'on lui demande quoi que ce soit :
   le document lui-même, à sa vraie échelle, déjà rempli.
   ========================================================================== */

/* La feuille */
.doc-feuille {
  background: var(--pap-feuille);
  border: 1px solid var(--pap-trait);
  border-top: 2px solid var(--pap-encre);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(22, 25, 28, .05), 0 18px 34px -24px rgba(22, 25, 28, .28);
  overflow: hidden;
}

/* L'en-tête : intitulé à gauche, référence réglementaire à droite */
.doc-entete {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  padding: 13px 20px;
  border-bottom: 1px solid var(--pap-trait);
  background: var(--pap-feuille);
  font-family: var(--pap-mono);
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--pap-encre-3);
}
.doc-entete strong { color: var(--pap-encre-2); font-weight: 500; }

.doc-corps { padding: 22px 20px 24px; }

.doc-titre {
  font-family: var(--pap-titre);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 700; line-height: 1.13; letter-spacing: -.02em;
  margin: 0 0 6px; color: var(--pap-encre);
}
.doc-ref {
  font-family: var(--pap-mono);
  font-size: 10.5px; letter-spacing: .05em; line-height: 1.5;
  color: var(--accent); margin: 0 0 20px;
}

/* La grille de champs — le geste du Cerfa */
.doc-grille {
  border: 1px solid var(--pap-encre);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.doc-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc-champ {
  padding: 9px 12px;
  border-right: 1px solid var(--pap-trait);
  border-bottom: 1px solid var(--pap-trait);
  min-width: 0;
}
.doc-grille > .doc-champ:nth-child(2n) { border-right: 0; }
.doc-grille--3 > .doc-champ:nth-child(2n) { border-right: 1px solid var(--pap-trait); }
.doc-grille--3 > .doc-champ:nth-child(3n) { border-right: 0; }
.doc-champ--large { grid-column: 1 / -1; border-right: 0; }
.doc-grille > .doc-champ:last-child { border-bottom: 0; }

.doc-lab {
  display: block;
  font-family: var(--pap-mono);
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pap-encre-3);
}
.doc-val {
  display: block; margin-top: 3px;
  font-family: var(--pap-mono);
  font-size: 13.5px; font-weight: 500; color: var(--pap-encre);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Les lignes portées au registre */
.doc-lignes { margin-top: 18px; border-top: 1px solid var(--pap-encre); }
.doc-ligne {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--pap-trait-clair);
  font-family: var(--pap-mono); font-size: 12.5px;
}
.doc-ligne > span:first-child { font-family: var(--pap-titre); font-size: 13.5px; color: var(--pap-encre); }
.doc-ligne .doc-q { color: var(--pap-encre-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-ligne .doc-etat { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* Le pied : mention d'établissement + tampon */
.doc-pied {
  margin-top: 18px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--pap-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pap-encre-3);
}
.doc-tampon {
  border: 2px solid var(--accent); color: var(--accent);
  padding: 5px 11px; border-radius: 2px;
  font-family: var(--pap-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  transform: rotate(-2deg);
}

/* Surtitre de section : la petite capitale administrative */
.doc-eyebrow {
  font-family: var(--pap-mono);
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--pap-encre-3);
  display: block; margin-bottom: 12px;
}
.doc-eyebrow--accent { color: var(--accent); }

/* Une bande de chiffres, réglée haut et bas */
.doc-chiffres {
  border-top: 1px solid var(--pap-trait);
  border-bottom: 1px solid var(--pap-trait);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.doc-chiffres > div {
  padding: 16px 18px 16px 0;
  border-right: 1px solid var(--pap-trait);
}
.doc-chiffres > div:last-child { border-right: 0; }
.doc-chiffres b {
  display: block;
  font-family: var(--pap-mono);
  font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--pap-encre);
}
.doc-chiffres span {
  display: block; margin-top: 3px;
  font-size: .82rem; color: var(--pap-encre-3);
}

/* Le sceau de rappel, en marge d'un texte long */
.doc-marge {
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  font-family: var(--pap-mono);
  font-size: 11.5px; line-height: 1.68; color: var(--pap-encre-2);
}
.doc-marge b {
  display: block; margin-bottom: 5px;
  color: var(--accent); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
}

@media (max-width: 640px) {
  .doc-grille, .doc-grille--3 { grid-template-columns: 1fr; }
  .doc-champ { border-right: 0 !important; }
  .doc-ligne { grid-template-columns: 1fr auto; }
  .doc-ligne .doc-etat { grid-column: 2; }
  .doc-chiffres > div { border-right: 0; border-bottom: 1px solid var(--pap-trait); }
  .doc-chiffres > div:last-child { border-bottom: 0; }
}

/* Le pied de l'aperçu de document était déjà quasi invisible avant la DA
   (#e5e7eb sur blanc, 1,2:1) : puisqu'il fait partie du document montré, il
   doit se lire. Le filigrane, lui, reste volontairement pâle — c'est ce qui
   distingue l'aperçu gratuit du livrable payé. */
.pdf-footer, .document-footer, .preview-footer { color: var(--pap-encre-3); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ══ Le document du hero ═════════════════════════════════════════════════════
   Trois sites du socle (reglement-interieur, registre-dasri, fiche-ronde)
   partagent le composant .hero-doc-*. Son contenu était déjà le bon document ;
   c'est son cadre qui mentait — un faux chrome de navigateur avec les trois
   pastilles macOS. Le markup porte désormais un vrai en-tête (intitulé + base
   légale) ; ici on lui donne la grammaire de la feuille.
   ========================================================================== */
.hero-document {
  background: var(--pap-feuille);
  border: 1px solid var(--pap-trait);
  border-top: 2px solid var(--pap-encre);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(22, 25, 28, .05), 0 18px 34px -24px rgba(22, 25, 28, .28);
  overflow: hidden;
}
.hero-doc-dot { display: none; }          /* le faux chrome, s'il en reste */
.hero-doc-header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--pap-feuille);
  border-bottom: 1px solid var(--pap-trait);
}
.hero-doc-intitule, .hero-doc-reference {
  font-family: var(--pap-mono);
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
}
.hero-doc-intitule { color: var(--pap-encre-2); font-weight: 500; }
.hero-doc-reference { color: var(--accent); letter-spacing: .08em; }

.hero-doc-body { padding: 20px 18px 48px; }  /* place pour le tampon */
.hero-doc-title {
  font-family: var(--pap-titre);
  font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.15; text-transform: none; color: var(--pap-encre);
  margin-bottom: 4px;
}
.hero-doc-date {
  font-family: var(--pap-mono);
  font-size: 10.5px; letter-spacing: .05em; color: var(--pap-encre-3);
  margin-bottom: 18px;
}
.hero-doc-section { margin-top: 16px; }
.hero-doc-section-title {
  font-family: var(--pap-mono);
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pap-encre-3); font-weight: 500;
  padding-bottom: 6px; margin-bottom: 0;
  border-bottom: 1px solid var(--pap-encre);
}

/* Les champs : une grille réglée, pas des cartes flottantes */
.hero-doc-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--pap-trait); border-top: 0;
  gap: 0;
}
.hero-doc-card {
  background: var(--pap-feuille);
  border: 0; border-right: 1px solid var(--pap-trait);
  border-radius: 0; box-shadow: none;
  padding: 9px 11px; min-width: 0;
}
.hero-doc-grid > .hero-doc-card:last-child { border-right: 0; }
.hero-doc-label {
  font-family: var(--pap-mono);
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pap-encre-3);
}
.hero-doc-value {
  font-family: var(--pap-mono);
  font-size: 12.5px; font-weight: 500; color: var(--pap-encre);
  font-variant-numeric: tabular-nums; margin-top: 2px;
  overflow-wrap: anywhere;
}

/* Les lignes portées : libellé à gauche, état à droite, filet entre les deux */
.hero-doc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--pap-trait-clair);
  background: none; border-radius: 0;
  font-size: 13px; color: var(--pap-encre);
}
.hero-doc-state {
  font-family: var(--pap-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  background: none !important; border: 0; padding: 0; border-radius: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hero-doc-state.good    { color: var(--accent); }
.hero-doc-state.warning { color: #7A5200; }
.hero-doc-state.bad     { color: #96261D; }

/* Le tampon, à la place de la pastille « PDF » */
.hero-document { position: relative; }
.hero-doc-badge {
  position: absolute; top: auto; bottom: 16px; right: 16px;
  background: none; color: var(--accent);
  border: 2px solid var(--accent); border-radius: 2px;
  padding: 4px 9px;
  font-family: var(--pap-mono);
  font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: none;
}

/* ── Le reste du hero ──────────────────────────────────────────────────────
   Plusieurs sites avaient un hero SOMBRE (dégradé de la couleur de marque)
   avec le texte écrit en blanc en dur. Repeindre le fond en papier sans
   toucher au texte le faisait disparaître — blanc sur blanc cassé, 1,13:1.
   On repose donc l'encre sur tout le hero, sauf ce qui est un bouton : un
   bouton plein garde son texte blanc sur son propre fond. */
.hero { background: var(--pap-papier); color: var(--pap-encre); }
.hero::before, .hero::after { display: none; }   /* les halos décoratifs */

.hero :where(h1, h2, h3, h4, p, li, span, small, strong, em, dt, dd, div):not(.btn):not(.btn *) {
  color: var(--pap-encre);
}
.hero :where(.hero-subtitle, .hero-description, .hero-reassurance, .hero-note,
             .hero-stat-label, small):not(.btn *) {
  color: var(--pap-encre-2);
}

/* La mention de conformité : une mention de document, pas une pastille verte */
.hero-tag, .hero-badge {
  background: none; border: 0; border-left: 2px solid var(--accent);
  border-radius: 0; padding: 2px 0 2px 11px;
  font-family: var(--pap-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}

.hero-stat-number {
  font-family: var(--pap-mono); font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--pap-encre);
}
.hero-stat-label { color: var(--pap-encre-3); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-secondary, .btn-lg {
  border-radius: 2px;
  font-family: var(--pap-titre); font-weight: 600;
  letter-spacing: -.005em;
  box-shadow: none;
}
/* Deux classes plutôt qu'une : plusieurs sites écrivent « .hero .btn-primary »
   (0,2,0), qui bat un « .btn-primary » simple même placé plus tard. */
.btn.btn-primary, a.btn-primary, button.btn-primary {
  background: var(--accent); color: #FFFFFF; border: 1px solid var(--accent);
}
.btn.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover {
  background: var(--accent-fonce); border-color: var(--accent-fonce); color: #FFFFFF;
}
.btn.btn-secondary, a.btn-secondary, button.btn-secondary {
  background: var(--pap-feuille); color: var(--pap-encre);
  border: 1px solid var(--pap-encre);
}
.btn.btn-secondary:hover { background: var(--pap-champ); }

/* Le bouton fantôme était blanc sur fond sombre : sur papier il devient un
   bouton encadré à l'encre. */
.btn.btn-outline, a.btn-outline, .btn.btn-ghost, a.btn-ghost {
  background: var(--pap-feuille); color: var(--pap-encre);
  border: 1px solid var(--pap-encre);
}
.btn.btn-outline:hover, .btn.btn-ghost:hover { background: var(--pap-champ); color: var(--pap-encre); }

/* ══ Les champs ══════════════════════════════════════════════════════════════
   C'est ici que la DA doit tenir : neuf des douze sites sont des générateurs,
   et le formulaire est l'endroit où le visiteur passe son temps. On lui donne
   la voix administrative — étiquette en petite capitale, valeur en chasse fixe,
   cadre carré. .form-group est commun aux neuf ; .form-label n'existe que sur
   quatre, d'où les deux sélecteurs.
   ========================================================================== */
.form-group > label,
.form-group > .form-label,
.form-label {
  font-family: var(--pap-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pap-encre-2);
  display: block; margin-bottom: 6px;
}
.form-hint, .field-hint, .form-optional, .step-help {
  font-family: var(--pap-mono);
  font-size: 10.5px; letter-spacing: .03em; color: var(--pap-encre-3);
}

.form-group input[type="text"], .form-group input[type="email"],
.form-group input[type="tel"], .form-group input[type="url"],
.form-group input[type="number"], .form-group input[type="date"],
.form-group input[type="password"], .form-group input[type="search"],
.form-group select, .form-group textarea,
.form-input, .form-select, .form-textarea {
  background: var(--pap-feuille);
  border: 1px solid var(--pap-trait);
  border-bottom-color: var(--pap-encre-3);   /* la ligne à remplir */
  border-radius: 2px;
  color: var(--pap-encre);
  font-family: var(--pap-titre);
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-voile);
  outline: 2px solid transparent;   /* l'anneau est dessiné par le box-shadow */
  outline-offset: 2px;
}
.form-group input::placeholder, .form-group textarea::placeholder,
.form-input::placeholder, .form-textarea::placeholder { color: var(--pap-encre-3); opacity: 1; }

.form-section-title, .form-group-title, .form-section-header {
  font-family: var(--pap-titre); font-weight: 600;
  color: var(--pap-encre);
  border-bottom: 1px solid var(--pap-trait); padding-bottom: 8px;
}

/* Le rail d'étapes : un numéro d'étape est un numéro. */
.step-number, .step-num {
  font-family: var(--pap-mono); font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;   /* la pastille reste ronde : elle numérote, elle n'encadre pas */
}
.step-label, .step-description {
  font-family: var(--pap-titre);
  color: var(--pap-encre-2);
}

/* ── Accent de reglement-interieur-entreprise.fr ── posé par appliquer-da.py, EN DERNIER :
   la feuille maîtresse porte un accent de repli dans son propre :root,
   qui gagnerait par ordre de cascade s'il était écrit après. */
:root {
  --accent: #3A4A55;
  --accent-fonce: #27323A;
  --accent-voile: #E5E5E1;
}


/* ── Texte sur les surfaces sombres du site ──────────────────────────
   Relevé automatiquement : ces sélecteurs ont l'encre pour fond, donc
   les gris de texte du parc y deviennent illisibles. */
.progress-step.active .step-num :is(p, li, span, small, div, dd, figcaption), .progress-step.completed .step-num :is(p, li, span, small, div, dd, figcaption), .progress-fill :is(p, li, span, small, div, dd, figcaption), .pdf-thumb-tag :is(p, li, span, small, div, dd, figcaption), .nav-toggle span :is(p, li, span, small, div, dd, figcaption), .btn-primary :is(p, li, span, small, div, dd, figcaption), .site-footer :is(p, li, span, small, div, dd, figcaption), .step-number :is(p, li, span, small, div, dd, figcaption), .pricing-badge :is(p, li, span, small, div, dd, figcaption), .cta-section :is(p, li, span, small, div, dd, figcaption), .modele-timeline-when :is(p, li, span, small, div, dd, figcaption), .ri-annot-tag :is(p, li, span, small, div, dd, figcaption) { color: var(--pap-papier); }
.progress-step.active .step-num :is(h1, h2, h3, h4, h5, strong, b, dt), .progress-step.completed .step-num :is(h1, h2, h3, h4, h5, strong, b, dt), .progress-fill :is(h1, h2, h3, h4, h5, strong, b, dt), .pdf-thumb-tag :is(h1, h2, h3, h4, h5, strong, b, dt), .nav-toggle span :is(h1, h2, h3, h4, h5, strong, b, dt), .btn-primary :is(h1, h2, h3, h4, h5, strong, b, dt), .site-footer :is(h1, h2, h3, h4, h5, strong, b, dt), .step-number :is(h1, h2, h3, h4, h5, strong, b, dt), .pricing-badge :is(h1, h2, h3, h4, h5, strong, b, dt), .cta-section :is(h1, h2, h3, h4, h5, strong, b, dt), .modele-timeline-when :is(h1, h2, h3, h4, h5, strong, b, dt), .ri-annot-tag :is(h1, h2, h3, h4, h5, strong, b, dt) { color: #FFFFFF; }
.progress-step.active .step-num a:not(.btn), .progress-step.completed .step-num a:not(.btn), .progress-fill a:not(.btn), .pdf-thumb-tag a:not(.btn), .nav-toggle span a:not(.btn), .btn-primary a:not(.btn), .site-footer a:not(.btn), .step-number a:not(.btn), .pricing-badge a:not(.btn), .cta-section a:not(.btn), .modele-timeline-when a:not(.btn), .ri-annot-tag a:not(.btn) { color: #FFFFFF; text-decoration-color: var(--pap-papier); }