/* ==============================================================
   Zcorps — feuille de style

   Palette « crème et bleu nuit », choisie d'après les recommandations
   pour les lecteurs dyslexiques (texte foncé mais pas noir, sur fond crème
   plutôt que blanc) et pour les personnes autistes (tons doux, faible
   saturation, jamais de noir ni de blanc purs).
   Règle : le pastel sert de fond et de surface, jamais de texte ni de bouton.

   Thème par défaut : celui de l'appareil. Sur un appareil en thème sombre, le
   site propose une fois le fond crème, sans l'imposer (voir affichage.js).
   Le thème sombre est un gris neutre, pas une déclinaison du bleu primaire.

   Contrastes vérifiés (clair / sombre) : texte 14,4:1 / 15,3:1 ;
   titres 13:1 / 15,7:1 ; texte secondaire 7,5:1 / 10,9:1 ;
   liens 8:1 / 9,9:1 ; boutons 13,7:1 / 11,2:1 ; bordures de champs
   3,5:1 / 4,6:1 ; anneau de focus 5,4:1 / 6,8:1.
   ============================================================== */

:root {
  /* Palette */
  --bleu-nuit: #1B2B4B;
  --bleu-lien: #2A4A87;
  --bleu-vif: #3D63B0;
  --pastel: #DCE6F4;
  --pastel-voile: #EEF2F9;
  --creme: #FAF6EE;
  --papier-blanc: #FFFCF6;
  /* Couleur illustrative : pastilles, pictogrammes, coches, fonds de section.
     Jamais de bouton, jamais de lien, jamais de texte courant (règle DSFR). */
  --accent: #8A2F5C;
  --accent-pastel: #F3DDE7;
  --succes: #2f6b45;
  --erreur: #b3261e;

  /* Rôles */
  --encre: #1E2433;
  --encre-2: #475068;
  --papier: var(--creme);
  --surface: var(--papier-blanc);
  --surface-douce: var(--pastel-voile);
  --titre: var(--bleu-nuit);
  --lien: var(--bleu-lien);
  --action: var(--bleu-nuit);
  --sur-action: var(--papier-blanc);
  --halo: var(--bleu-vif);
  --filet: #D9DCE4;
  --filet-fort: #7F8497;
  --ombre: 0 2px 4px rgba(27, 43, 75, 0.04), 0 12px 28px rgba(27, 43, 75, 0.07);
  --ombre-douce: 0 1px 2px rgba(27, 43, 75, 0.05), 0 6px 16px rgba(27, 43, 75, 0.05);

  /* Formes */
  --rayon: 1rem;
  --rayon-petit: 0.6rem;
  --rayon-pilule: 999px;

  --police: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mesure: 34rem;
  --large: 64rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    --encre: #EDEEF0; --encre-2: #C2C6CC;
    --papier: #16181C; --surface: #1E2126; --surface-douce: #24272D;
    --titre: #EDEEF0; --lien: #A9C3F0; --action: var(--pastel); --sur-action: var(--bleu-nuit);
    --halo: #7FA1E0; --filet: #343840; --filet-fort: #868C96;
    --ombre: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45);
    --ombre-douce: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.3);
    --accent: #F0BCD4; --accent-pastel: #33202B;
    --succes: #86d0a0; --erreur: #f3a29a;
  }
}
:root[data-theme="dark"] {
  --encre: #EDEEF0; --encre-2: #C2C6CC;
  --papier: #16181C; --surface: #1E2126; --surface-douce: #24272D;
  --titre: #EDEEF0; --lien: #A9C3F0; --action: var(--pastel); --sur-action: var(--bleu-nuit);
  --halo: #7FA1E0; --filet: #343840; --filet-fort: #868C96;
  --ombre: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45);
  --ombre-douce: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.3);
  --accent: #F0BCD4; --accent-pastel: #33202B;
  --succes: #86d0a0; --erreur: #f3a29a;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img, svg { max-width: 100%; height: auto; }
p, ul, ol, dl, table { margin: 0 0 1.2em; }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: 0.5em; }
p { max-width: 40rem; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; color: var(--titre); overflow-wrap: break-word; }
h1 { font-size: clamp(1.85rem, 4.2vw, 2.6rem); line-height: 1.15; max-width: 22ch; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin-top: 2em; }
h3 { font-size: 1.1rem; margin-top: 1.5em; }
h2:first-child, h3:first-child { margin-top: 0; }

a { color: var(--lien); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.18em; }

:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--halo);
  border-radius: var(--rayon-petit);
}

.visuellement-masque {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* Grilles : une colonne ne s'élargit jamais au-delà de l'écran, même avec un texte agrandi */
.atouts, .etapes, .articles, .offres, .engagements, .deux-colonnes, .panneau-groupes, .ouverture-grille { grid-template-columns: minmax(0, 1fr); }

/* ---------- Structure ---------- */
.conteneur { max-width: var(--large); margin-inline: auto; padding-inline: 1.5rem; }
.texte { max-width: var(--mesure); }

.lien-evitement {
  position: absolute; left: 1rem; top: -5rem; z-index: 10;
  background: var(--action); color: var(--sur-action); font-weight: 700;
  padding: 0.85rem 1.4rem; border-radius: var(--rayon-pilule); text-decoration: none;
}
.lien-evitement:focus { top: 1rem; }

.entete { padding-block: 0.5rem; }
.entete .conteneur {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 2rem; padding-block: 1rem;
}
.marque { font-size: 1.3rem; font-weight: 700; color: var(--titre); text-decoration: none; line-height: 1.2; }
.marque span { display: block; font-size: 0.85rem; font-weight: 400; color: var(--encre-2); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.nav li + li { margin-top: 0; }
.nav a {
  display: inline-block; color: var(--encre); text-decoration: none;
  padding: 0.5rem 0.9rem; border-radius: var(--rayon-pilule);
}
.nav a:hover { background: var(--surface-douce); text-decoration: underline; }
.nav a[aria-current] { background: var(--surface-douce); font-weight: 700; color: var(--titre); }

.ariane { font-size: 1rem; padding-top: 0.5rem; }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.ariane li + li { margin-top: 0; }
.ariane li + li::before { content: "›"; margin-inline: 0.5rem; color: var(--encre-2); }
.ariane [aria-current] { color: var(--encre-2); }

main { display: block; padding-block: 2rem 4rem; }
main:focus { outline: none; }

/* ---------- Ouverture de page ---------- */
.ouverture { position: relative; padding-block: 1.5rem 2rem; }
.ouverture-grille { display: grid; gap: 2.5rem 3.5rem; align-items: center; }
@media (min-width: 58rem) { .ouverture-grille { grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); } }
.ouverture h1 { max-width: 22ch; }
.carte-reperes { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.75rem; box-shadow: var(--ombre); }
.carte-reperes h2 { margin-top: 0; font-size: 1.3rem; }
.carte-reperes ul { margin-bottom: 1.25rem; }
.carte-reperes p:last-child { margin-bottom: 0; }
.ouverture::before {
  content: ""; position: absolute; z-index: -1; inset: 0 auto auto 0;
  width: min(34rem, 80%); height: 22rem; transform: translate(-18%, -28%);
  background: radial-gradient(closest-side, var(--pastel), transparent 72%);
  opacity: 0.55; border-radius: 50%;
}
.ouverture .chapeau { font-size: clamp(1.1rem, 1.8vw, 1.2rem); }
.chapeau { font-size: 1.1rem; color: var(--encre-2); max-width: 34rem; }

.salutation {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--accent-pastel); color: var(--titre);
  border-radius: var(--rayon-pilule); padding: 0.45rem 1.1rem 0.45rem 0.5rem;
  font-size: 1rem; margin-bottom: 1.5rem;
}
.pastille {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; background: var(--accent); color: var(--sur-action);
  font-weight: 700; font-size: 0.95rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; margin-top: 2rem; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--action); color: var(--sur-action);
  border: 2px solid var(--action); border-radius: var(--rayon-pilule);
  font: inherit; font-weight: 700; line-height: 1.3;
  padding: 0.7rem 1.35rem; min-height: 44px; text-decoration: none; cursor: pointer;
  box-shadow: var(--ombre-douce);
}
.bouton:hover { text-decoration: underline; }
.bouton-lien {
  background: none; border: 0; padding: 0; min-height: 24px; font: inherit; color: var(--lien);
  text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; text-align: left;
}
.lien-fort { font-weight: 700; }

/* ---------- Sections et cartes ---------- */
.section { padding-top: 2.75rem; }
.section-douce {
  background: var(--surface-douce);
  border-radius: var(--rayon);
  padding: 1.75rem 1.5rem;
  margin-top: 2.75rem;
}
.deux-colonnes { display: grid; gap: 2rem 3rem; align-items: start; }
@media (min-width: 56rem) { .deux-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.carte, .encadre {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--ombre-douce);
}
.carte > :last-child, .encadre > :last-child { margin-bottom: 0; }
.encadre { border-left: 0.5rem solid var(--accent); }

/* Grille de cartes avec pictogramme */
.atouts { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.atouts > li {
  margin: 0; background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 1.25rem 1.35rem; box-shadow: var(--ombre-douce);
}
.atouts h2, .atouts h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.atouts p { margin: 0; }
.picto {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: 0.7rem;
  border-radius: 50%; background: var(--accent-pastel); color: var(--accent);
}
.picto svg { width: 1.3rem; height: 1.3rem; display: block; }

/* Étapes numérotées */
.etapes { list-style: none; counter-reset: etape; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.75rem; }
@media (min-width: 52rem) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etapes > li { counter-increment: etape; margin: 0; }
.etapes > li::before {
  content: counter(etape);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 0.6rem;
  border-radius: 50%; background: var(--accent-pastel); color: var(--accent);
  font-weight: 700; font-size: 1.2rem;
}
.etapes h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.etapes p { margin: 0; }

/* Listes avec coche */
.coches { list-style: none; padding: 0; }
.coches li { position: relative; padding-left: 2rem; }
.coches li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.5em;
  width: 1.1rem; height: 0.55rem; border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent);
  transform: rotate(-45deg); border-radius: 2px;
}

/* ---------- Offres ---------- */
.offres { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1.25rem; }
.offres > li {
  margin: 0; background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 1.35rem; box-shadow: var(--ombre-douce);
}
.offre { display: grid; gap: 0.75rem 2rem; }
@media (min-width: 48rem) { .offre { grid-template-columns: minmax(0, 1fr) 13rem; } }
.offre h3 { margin: 0; font-size: 1.1rem; }
.offre .prix {
  margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--titre);
  background: var(--surface-douce); border-radius: var(--rayon-pilule);
  padding: 0.35rem 1rem; justify-self: start;
}
@media (min-width: 48rem) { .offre .prix { grid-column: 2; grid-row: 1; justify-self: end; } }
.offre .prix-bloque { font-weight: 400; font-size: 0.95rem; color: var(--encre-2); }
.offre ul { margin: 0.5rem 0 0; }
.offre .details { margin: 0.5rem 0 0; color: var(--encre-2); }
.ref { font-weight: 400; color: var(--encre-2); font-size: 0.95rem; }

/* ---------- Tableaux ---------- */
.defilement {
  overflow-x: auto; margin-bottom: 2rem;
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon); box-shadow: var(--ombre-douce); padding: 0.5rem;
}
table { border-collapse: collapse; width: 100%; min-width: 30rem; }
caption { text-align: left; font-weight: 700; font-size: 1.05rem; color: var(--titre); padding: 0.75rem 0.75rem 0.5rem; }
th, td { text-align: left; vertical-align: top; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--filet); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { border-bottom: 2px solid var(--filet-fort); }
td.montant, th.montant { text-align: right; white-space: nowrap; }

/* ---------- Formulaires ---------- */
.formulaire {
  max-width: 34rem; background: var(--surface);
  border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 1.5rem; box-shadow: var(--ombre);
}
.champ { margin-bottom: 1.25rem; }
.champ label, .champ legend { display: block; font-weight: 700; margin-bottom: 0.35rem; color: var(--titre); }
.aide { display: block; color: var(--encre-2); font-size: 1rem; margin-bottom: 0.45rem; }
.obligatoire-note { color: var(--encre-2); }
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], select, textarea {
  display: block; width: 100%; font: inherit; color: var(--encre); background: var(--papier);
  border: 2px solid var(--filet-fort); border-radius: var(--rayon-petit);
  padding: 0.6rem 0.8rem; min-height: 44px;
}
textarea { min-height: 9rem; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.choix { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 0.5rem; }
.choix input { width: 1.4rem; height: 1.4rem; margin-top: 0.25rem; flex: none; accent-color: var(--lien); }
.choix label { font-weight: 400; margin: 0; color: var(--encre); }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Bandeau de consentement ---------- */
.consentement { padding-block: 1.25rem 0.25rem; }
.consentement > .conteneur {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 1.5rem; box-shadow: var(--ombre-douce);
}
.consentement p { margin-bottom: 1.1rem; }
.consentement-titre { font-size: 1.1rem; font-weight: 700; color: var(--titre); margin: 0 0 0.4rem; }
.consentement-actions { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; }

/* ---------- Charte ---------- */
.engagements { list-style: none; counter-reset: eng; padding: 0; margin: 2rem 0 3rem; display: grid; gap: 1.25rem; }
.engagements > li {
  counter-increment: eng; margin: 0;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 1.25rem 1.35rem; box-shadow: var(--ombre-douce);
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 1.25rem; align-items: start;
}
.engagements > li::before {
  content: counter(eng);
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--accent-pastel); color: var(--accent);
  font-size: 1.15rem; font-weight: 700;
}
.engagements > li > * { grid-column: 2; }
.engagements h2, .engagements h3 { font-size: 1.1rem; margin: 0.2rem 0 0.4rem; }
.engagements p { margin: 0; }
@media (max-width: 30rem) {
  .engagements > li { grid-template-columns: 1fr; }
  .engagements > li > * { grid-column: 1; }
  .engagements > li::before { margin-bottom: 0.75rem; }
}

/* ---------- Portrait ---------- */
.portrait-bloc { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: center; }
.portrait {
  width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover;
  border: 0.4rem solid var(--surface); box-shadow: var(--ombre); background: var(--accent-pastel);
}
.initiales {
  display: grid; place-items: center; width: 7rem; height: 7rem; flex: none; border-radius: 50%;
  background: var(--accent-pastel); color: var(--accent);
  font-size: 2rem; font-weight: 700; box-shadow: var(--ombre);
}

/* ---------- Pied de page ---------- */
.pied { margin-top: 4rem; padding-block: 2.5rem 3rem; background: var(--surface-douce); }
.pied .conteneur > p { color: var(--encre-2); }
.pied ul { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.pied li { margin: 0; }

/* ---------- Divers ---------- */
.note { color: var(--encre-2); font-size: 1rem; }
.maj { color: var(--encre-2); font-size: 1rem; margin-top: 3rem; }
.a-completer { background: var(--pastel); color: var(--bleu-nuit); padding: 0 0.25em; border-radius: 0.25em; }
dl.faits { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.75rem; }
dl.faits dt { font-weight: 700; color: var(--titre); }
dl.faits dd { margin: 0; }
@media (max-width: 34rem) {
  dl.faits { grid-template-columns: 1fr; }
  dl.faits dd { margin-bottom: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .carte, .encadre, .atouts > li, .offres > li, .engagements > li, .formulaire, .defilement { border: 1px solid CanvasText; }
  .picto, .pastille, .initiales, .etapes > li::before, .engagements > li::before { border: 1px solid CanvasText; }
}
@media print {
  .entete .nav, .lien-evitement, .consentement { display: none; }
  .carte, .encadre, .offres > li, .atouts > li { box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; }
}

/* En-tête : appel à l'action toujours visible */
.bouton-entete { padding: 0.6rem 1.2rem; min-height: 44px; font-size: 1rem; }
@media (max-width: 58rem) { .entete .conteneur { row-gap: 0.75rem; } }

/* Journal */
.articles { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.articles > li { margin: 0; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.5rem 1.6rem; box-shadow: var(--ombre-douce); }
.articles h2, .articles h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.articles .date { color: var(--encre-2); font-size: 1rem; margin: 0 0 0.5rem; }
.articles p:last-child { margin-bottom: 0; }

/* Inscription à la lettre d'information */
.lettre { margin-top: 3.5rem; }
.lettre .formulaire { max-width: 38rem; }
.champ-en-ligne { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .champ-en-ligne { grid-template-columns: 1fr auto; align-items: end; } }

/* Mode sombre : le halo décoratif de l'ouverture reste discret */
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ouverture::before, :root[data-theme="auto"] .ouverture::before { opacity: 0.1; } }
:root[data-theme="dark"] .ouverture::before { opacity: 0.1; }

/* ==============================================================
   Préférences d'affichage (réglage de confort, voir /accessibilite/personnaliser-affichage/)
   ============================================================== */
.entete-actions { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: center; }
.bouton-affichage {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--surface); color: var(--titre);
  border: 2px solid var(--filet-fort); border-radius: var(--rayon-pilule);
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.3;
  padding: 0.55rem 1.1rem; min-height: 44px; cursor: pointer;
}
.bouton-affichage svg { width: 1.2rem; height: 1.2rem; flex: none; }
.bouton-affichage:hover { text-decoration: underline; }
.bouton-affichage[aria-expanded="true"] { background: var(--surface-douce); border-color: var(--titre); }

.panneau-affichage { padding-bottom: 1rem; }
.panneau-contenu {
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 1.5rem 1.6rem; box-shadow: var(--ombre);
}
.panneau-titre { font-size: 1.15rem; margin: 0 0 0.4rem; }
.panneau-aide { color: var(--encre-2); font-size: 1rem; margin-bottom: 1.25rem; }
.panneau-groupes { display: grid; gap: 1.25rem 2.5rem; }
@media (min-width: 52rem) { .panneau-groupes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.panneau-groupes fieldset { margin: 0; }
.panneau-groupes legend { font-weight: 700; color: var(--titre); margin-bottom: 0.5rem; }
.panneau-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 1.25rem; }

/* Taille du texte : tout le site est en rem, il suit la taille racine */
:root[data-texte="grand"] { font-size: 115%; }
:root[data-texte="tres-grand"] { font-size: 132%; }

/* Espacement aéré : au-delà des valeurs du critère WCAG 1.4.12 */
:root[data-espacement="aere"] body { line-height: 1.95; letter-spacing: 0.06em; word-spacing: 0.16em; }
:root[data-espacement="aere"] p, :root[data-espacement="aere"] li { margin-bottom: 1.6em; }
:root[data-espacement="aere"] h1, :root[data-espacement="aere"] h2, :root[data-espacement="aere"] h3 { line-height: 1.35; }

/* Fond blanc : même palette, surfaces blanches */
:root[data-theme="blanc"] {
  --papier: #FFFFFF; --surface: #FFFFFF; --surface-douce: #F1F4FA;
  --encre: #1E2433; --encre-2: #475068; --titre: #1B2B4B; --lien: #2A4A87;
  --action: #1B2B4B; --sur-action: #FFFFFF; --filet: #D9DCE4; --filet-fort: #7F8497;
  color-scheme: light;
}
/* Contraste renforcé : noir sur blanc, bordures franches, sans ombres */
:root[data-theme="contraste"] {
  --papier: #FFFFFF; --surface: #FFFFFF; --surface-douce: #FFFFFF; --pastel: #FFFFFF;
  --encre: #000000; --encre-2: #1A1A1A; --titre: #000000; --lien: #0B3C9E;
  --action: #000000; --sur-action: #FFFFFF; --halo: #0B3C9E;
  --filet: #000000; --filet-fort: #000000; --ombre: none; --ombre-douce: none;
  color-scheme: light;
}
:root[data-theme="contraste"] .ouverture::before { display: none; }
:root[data-theme="contraste"] a { text-decoration-thickness: 0.12em; }
:root[data-theme="contraste"] .pastille, :root[data-theme="contraste"] .initiales,
:root[data-theme="contraste"] .etapes > li::before, :root[data-theme="contraste"] .engagements > li::before,
:root[data-theme="contraste"] .picto { border: 2px solid #000000; color: #000000; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media print { .bouton-affichage, .panneau-affichage { display: none !important; } }

/* Texte agrandi ou aéré : les mots longs se coupent plutôt que de déborder (critère 10.11, redimensionnement) */
body { overflow-wrap: break-word; }
:root[data-texte] body, :root[data-espacement] body { hyphens: auto; }
.portrait-bloc > div { flex: 1 1 14rem; min-width: 0; }


/* Proposition de thème, affichée une seule fois */
.proposition-theme { padding-block: 1rem 0; }
.proposition-theme > .conteneur {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 1rem 1.25rem; box-shadow: var(--ombre-douce);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: space-between;
}
.proposition-theme p { margin: 0; max-width: 42rem; }
.proposition-theme .actions { margin: 0; gap: 0.75rem 1rem; }
.proposition-theme .bouton { padding: 0.55rem 1.1rem; min-height: 44px; font-size: 1rem; }

/* Avis de thème : proposé une seule fois aux appareils réglés en sombre */
.avis-theme { padding-block: 1rem 0.25rem; }
.avis-theme .conteneur > .avis-contenu {
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 1rem 1.25rem; margin: 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between;
  box-shadow: var(--ombre-douce); font-size: 1rem;
}
.avis-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.bouton-petit { padding: 0.5rem 1.1rem; min-height: 44px; font-size: 1rem; }
@media print { .avis-theme { display: none; } }

/* ==============================================================
   Validation en ligne des formulaires (amélioration progressive)
   ============================================================== */
.champ-erreur {
  display: flex; gap: 0.4rem; align-items: flex-start;
  color: var(--erreur); font-weight: 700; font-size: 0.95rem;
  margin: 0.4rem 0 0;
}
.champ-erreur::before { content: "!"; flex: none; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--erreur);
}
.resume-erreurs {
  color: var(--erreur); font-weight: 700;
  background: var(--surface-douce); border-radius: var(--rayon-petit);
  padding: 0.75rem 1rem; margin: 0 0 1.25rem;
}
.formulaire button[type="submit"]:disabled { opacity: 0.7; cursor: progress; }