/* ============================================================
   Confort de lecture — la couche d'accessibilité

   Elle est chargée EN DERNIER sur chaque page de chaque design.
   Trois principes tiennent tout le fichier :

   1. Les réglages ne repeignent rien : ils redéfinissent les
      JETONS de couleur que les cinq designs et les onze thèmes
      de projet emploient déjà (--papier, --encre, --fond,
      --texte, --accent…). Le design applique ensuite ses propres
      règles, avec les nouvelles valeurs. Un seul bloc suffit
      donc pour tout le site.

   2. Le réglage du système est le défaut, le panneau est la
      dérogation. D'où trois états par réglage : absent (on suit
      le système), valeur explicite « oui », valeur explicite
      « non ». Sans le troisième, on ne pourrait pas remettre le
      mouvement à quelqu'un dont le système le coupe.

   3. Le panneau ne s'habille jamais aux couleurs du design.
      C'est un outil, pas une pièce de décor : il doit rester
      lisible même quand la page est un manuscrit brun sous une
      lampe. C'est le seul endroit du site où des couleurs sont
      écrites en dur, et c'est délibéré.
   ============================================================ */


/* ============================================================
   1. Utilitaires
   ============================================================ */

/* Visible des lecteurs d'écran, invisible à l'œil. Jamais
   display:none, qui les ferait taire eux aussi. */
.a-lire-seulement{
  position:absolute !important;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Le lien de saut : premier élément atteignable au clavier, il
   se montre quand il reçoit le focus. Sans lui, il faut passer
   les six liens de navigation à chaque page. */
.saut-contenu{
  position:fixed;top:8px;left:8px;z-index:2147483000;
  transform:translateY(-200%);
  background:#111;color:#fff;
  font:600 1rem/1.2 system-ui,sans-serif;
  padding:12px 18px;border-radius:6px;border:2px solid #fff;
  text-decoration:none;box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.saut-contenu:focus{transform:translateY(0)}

@media print{.saut-contenu,.acces-bouton,.acces{display:none !important}}


/* ============================================================
   2. Le bouton d'ouverture
   ============================================================ */

.acces-bouton{
  position:fixed;left:14px;bottom:14px;z-index:2147482000;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:9px 14px;               /* 44 px : la cible reste attrapable */
  font:600 .875rem/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#fff;background:#16181D;
  border:2px solid #fff;border-radius:999px;cursor:pointer;
  box-shadow:0 3px 14px rgba(0,0,0,.35);
}
.acces-bouton:hover{background:#2B2F38}
.acces-bouton:focus-visible{outline:3px solid #FFD23F;outline-offset:3px}
.acces-bouton svg{width:22px;height:22px;flex:none;fill:currentColor}
@media (max-width:560px){.acces-bouton span{display:none}.acces-bouton{padding:10px}}


/* ============================================================
   3. Le panneau
   ============================================================ */

.acces{
  width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 40px);
  padding:0;border:2px solid #111;border-radius:14px;
  background:#fff;color:#16181D;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1rem;line-height:1.5;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.acces::backdrop{background:rgba(8,8,10,.62)}
.acces__in{padding:22px 24px 24px;overflow:auto;max-height:calc(100vh - 46px)}
.acces__titre{margin:0 0 4px;padding-right:40px;font-size:1.375rem;line-height:1.25;font-weight:800;letter-spacing:-.01em}

/* Sœur de .acces__in et non fille : .acces__in défile, la boîte non, donc la
   croix reste en vue quand la liste des réglages est longue. */
.acces__croix{
  position:absolute;top:10px;right:11px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:0;border-radius:50%;
  background:none;color:#4A4E57;cursor:pointer;
}
.acces__croix:hover{background:#F0F1F3;color:#16181D}
.acces__croix:focus-visible{outline:3px solid #1F5FD0;outline-offset:2px}
.acces__sous{margin:0 0 18px;font-size:.9375rem;color:#4A4E57}

.acces__groupe{border:0;margin:0 0 16px;padding:0}
.acces__legende{
  padding:0;margin:0 0 7px;font-size:.8125rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:#3A3E46;
}
.acces__choix{display:flex;flex-wrap:wrap;gap:7px}

/* Des boutons radio, pas des boutons : le lecteur d'écran
   annonce alors « groupe, option 2 sur 3, sélectionnée », et
   les flèches du clavier circulent dans le groupe. */
.acces__opt{position:relative;display:inline-flex}
.acces__opt input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.acces__opt span{
  display:inline-flex;align-items:center;min-height:40px;
  padding:8px 14px;border:2px solid #C3C7CF;border-radius:8px;
  font-size:.9375rem;font-weight:600;background:#fff;color:#16181D;
}
.acces__opt input:hover + span{border-color:#6B7280;background:#F4F5F7}
.acces__opt input:focus-visible + span{outline:3px solid #1F5FD0;outline-offset:2px}
.acces__opt input:checked + span{background:#16181D;color:#fff;border-color:#16181D}
/* Jamais la couleur seule : l'option retenue porte aussi une coche. */
.acces__opt input:checked + span::before{content:"\2713\a0";font-weight:800}

/* Le pied change de REGISTRE, pas seulement de couleur. Au-dessus, tout est
   pastille rectangulaire : ce sont des choix. Ici ce sont des actions, et
   « Fermer » portait jusqu'ici la règle exacte d'une option cochée (fond
   #16181D, texte blanc, coins à 8px) — il se lisait comme une pastille de
   plus. Trois différences le sortent du lot : un trait qui sépare le pied
   des réglages, une silhouette ronde qu'aucune option n'a, et deux actions
   écartées l'une de l'autre au lieu d'être collées en paire.

   « Tout remettre » défait le travail de la personne : il descend au rang
   de lien, pour qu'on ne le clique pas en visant « Fermer ». Aucune teinte
   nouvelle n'entre ici — la palette daltonisme et le mode contraste sont
   mesurés sur celles qui existent déjà. */
.acces__pied{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:22px;padding-top:18px;border-top:2px solid #E4E6EA;
}
.acces__remise{
  margin-right:auto;                    /* les deux actions ne sont pas une paire */
  min-height:44px;padding:10px 2px;border:0;background:none;cursor:pointer;
  font:600 .9375rem/1.2 system-ui,sans-serif;color:#4A4E57;
  text-decoration:underline;text-underline-offset:3px;
}
.acces__remise:hover{color:#16181D}
.acces__fermer{
  min-height:44px;padding:11px 30px;border:2px solid #16181D;border-radius:999px;
  background:#16181D;color:#fff;cursor:pointer;
  font:700 .9375rem/1.2 system-ui,sans-serif;
}
.acces__fermer:hover{background:#2B2F38;border-color:#2B2F38}
.acces__remise:focus-visible,.acces__fermer:focus-visible{outline:3px solid #1F5FD0;outline-offset:2px}
.acces__note{margin:16px 0 0;font-size:.8125rem;line-height:1.5;color:#4A4E57}
.acces__etat{margin:12px 0 0;font-size:.875rem;font-weight:600;color:#155E33}


/* ============================================================
   4. Taille du texte

   Elle agit sur la racine, donc sur tous les rem — c'est-à-dire
   sur toutes les tailles du site depuis leur conversion. 100 %
   n'est pas 16 px : c'est le réglage du navigateur du visiteur,
   qui était jusqu'ici ignoré. Les marges, elles, ne bougent
   pas : c'est le texte qui doit grandir, pas la page.
   ============================================================ */

html[data-ac-taille="115"]{font-size:115%}
html[data-ac-taille="130"]{font-size:130%}
html[data-ac-taille="150"]{font-size:150%}

/* Le panneau garde sa taille propre : c'est l'outil de réglage,
   il doit rester manipulable pendant qu'on règle. */
html[data-ac-taille] .acces,html[data-ac-taille] .acces-bouton{font-size:16px}


/* ============================================================
   5. Espacement du texte  (WCAG 1.4.12)

   Interligne 1,5 ; mots 0,16 em ; lettres 0,12 em ; 2 em entre
   paragraphes. Aucune perte de contenu attendue : rien n'est à
   hauteur fixe dans les blocs de texte.
   ============================================================ */

html[data-ac-espace="aere"] body,
html[data-ac-espace="aere"] p,
html[data-ac-espace="aere"] li,
html[data-ac-espace="aere"] dd,
html[data-ac-espace="aere"] dt,
html[data-ac-espace="aere"] td,
html[data-ac-espace="aere"] figcaption,
html[data-ac-espace="aere"] blockquote{
  line-height:1.75 !important;
  letter-spacing:.075em !important;
  word-spacing:.16em !important;
}
html[data-ac-espace="aere"] p{margin-block:1.6em !important}
html[data-ac-espace="aere"] li + li{margin-top:.7em}
/* Les titres serrés à la main redeviennent lisibles. */
html[data-ac-espace="aere"] h1,
html[data-ac-espace="aere"] h2,
html[data-ac-espace="aere"] h3,
html[data-ac-espace="aere"] .titre{letter-spacing:.01em !important;line-height:1.28 !important}
/* Le texte cesse d'être bridé en largeur, sinon il déborde. */
html[data-ac-espace="aere"] .acces{letter-spacing:normal !important;word-spacing:normal !important}


/* ============================================================
   6. Police lisible

   Atkinson Hyperlegible, dessinée par le Braille Institute pour
   séparer les formes que la basse vision confond : le 1 et le l,
   le 0 et le O, le b et le d. La feuille n'est chargée que si le
   réglage est demandé (acces.js), jamais pour tout le monde.
   ============================================================ */

html[data-ac-police="lisible"] body{
  --display:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
  --corps:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
  --titres:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
  --mono:"Atkinson Hyperlegible",Verdana,monospace;
  --machine-font:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
  --lettres:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
  --main:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
}
/* Certaines règles nomment la police en dur (machine à écrire,
   pixel art) : on les rattrape par la sélection, pas une à une. */
html[data-ac-police="lisible"] body :where(h1,h2,h3,h4,h5,h6,p,li,a,span,b,strong,em,small,td,th,label,button,input,select,textarea,figcaption,blockquote,dt,dd,summary){
  font-family:inherit !important;
}
html[data-ac-police="lisible"] .acces,
html[data-ac-police="lisible"] .acces *{font-family:"Atkinson Hyperlegible",system-ui,sans-serif !important}


/* ============================================================
   7. Liens toujours soulignés

   Un lien reconnu à sa seule couleur est invisible pour une
   partie des daltoniens — c'est le cas le plus courant du
   « codage par la couleur seule ». Le soulignement rend la
   distinction indépendante de la perception des teintes.
   ============================================================ */

html[data-ac-liens="souligne"] main a:not(.btn):not([class*="bd-"]):not(.acces-bouton),
html[data-ac-liens="souligne"] footer a:not(.btn),
html[data-ac-liens="souligne"] .contact-liste a{
  text-decoration:underline !important;
  text-underline-offset:.18em;
  text-decoration-thickness:.08em;
}
/* Les boutons gardent leur forme : ils sont déjà identifiables
   sans la couleur, un cadre les entoure. */


/* ============================================================
   8. Mouvement

   Un seul interrupteur pour tout le site, y compris ce qui sera
   ajouté demain : la règle balaie tous les éléments plutôt que
   d'énumérer les animations connues. La version JavaScript des
   mouvements (le voile de dimension, la spirale de fusion, la
   lampe qui suit la souris) est coupée dans acces.js, qui
   interroge le même réglage.
   ============================================================ */

html[data-ac-mouvement="arret"],
html[data-ac-mouvement="arret"] *,
html[data-ac-mouvement="arret"] *::before,
html[data-ac-mouvement="arret"] *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  animation-delay:0s !important;
  transition-duration:.001ms !important;
  transition-delay:0s !important;
  scroll-behavior:auto !important;
}
/* Le système demande l'arrêt : on le suit, sauf si la personne
   a explicitement redemandé le mouvement sur ce site. */
@media (prefers-reduced-motion:reduce){
  html:not([data-ac-mouvement="libre"]),
  html:not([data-ac-mouvement="libre"]) *,
  html:not([data-ac-mouvement="libre"]) *::before,
  html:not([data-ac-mouvement="libre"]) *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}
/* Ce qui n'a de sens qu'en mouvement disparaît plutôt que de
   rester figé au hasard de la frame où on l'a arrêté. */
html[data-ac-mouvement="arret"] .ticker,
html[data-ac-mouvement="arret"] .lueur,
html[data-ac-mouvement="arret"] .lampe{display:none !important}


/* ============================================================
   9. Décors sobres

   Tout ce qui porte aria-hidden dans le HTML : l'auteur y a
   déclaré lui-même que rien ne s'y lit. Les retirer enlève le
   bruit visuel sans rien retirer au propos. Le tracé du parcours
   législatif, lui, n'est pas un décor : il explique, il reste.
   ============================================================ */

html[data-ac-decor="sobre"] .decor,
html[data-ac-decor="sobre"] .grain,
html[data-ac-decor="sobre"] .rature,
html[data-ac-decor="sobre"] .sceau,
html[data-ac-decor="sobre"] .lampe,
html[data-ac-decor="sobre"] .horloge,
html[data-ac-decor="sobre"] .scene,
html[data-ac-decor="sobre"] .ticker,
html[data-ac-decor="sobre"] .trace,
html[data-ac-decor="sobre"] .lueur,
html[data-ac-decor="sobre"] .progres,
html[data-ac-decor="sobre"] .ciel,
html[data-ac-decor="sobre"] .hermine-fond,
html[data-ac-decor="sobre"] .tache,
html[data-ac-decor="sobre"] [class^="decor--"],
html[data-ac-decor="sobre"] [class*=" decor--"]{display:none !important}

/* Le fond du corps de page n'est PAS un décor : sur le manuscrit,
   le dégradé de nuit est la couleur de la page, et l'enlever
   laissait un texte clair sur du blanc. On retire les éléments
   décoratifs, jamais le sol sur lequel le texte est posé. Le
   grain et la trame sont des éléments à part (.grain), déjà
   masqués plus haut. */
html[data-ac-decor="sobre"] .section::before,
html[data-ac-decor="sobre"] .section::after,
html[data-ac-decor="sobre"] .section--hero::before,
html[data-ac-decor="sobre"] .section--hero::after{display:none !important}
/* L'ombre portée du texte porte parfois le contraste à elle
   seule (les boutons façon Minecraft de Leon) : on ne la retire
   que là où elle est purement ornementale. */
html[data-ac-decor="sobre"] :is(h1,h2,h3,.titre,.eyebrow,.chapo){text-shadow:none !important}


/* ============================================================
   10. Contraste renforcé

   Le point important : on ne repeint aucune règle. On redéfinit
   les jetons que les designs emploient déjà, sur un sélecteur
   plus spécifique que body[data-theme="…"] — donc les onze
   thèmes de projet passent dessous sans qu'aucun soit nommé.

   Deux polarités, parce qu'il n'y en a pas une bonne : le fond
   clair sert la basse vision courante, le fond sombre sert la
   photophobie et une partie des migraineux.
   ============================================================ */

/* ---------- clair renforcé : noir sur blanc ---------- */
html[data-ac-contraste="clair"] body{
  /* 01 · le procès-verbal */
  --papier:#FFFFFF;--papier-2:#FFFFFF;--encre:#000000;--encre-douce:#26262A;
  --regle:#6E6E72;--trait:#000000;--tampon:#9A0007;--officiel:#00307A;
  --surligneur:#FFF07A;--valide:#0B5227;
  /* 02 · le manuscrit */
  --nuit:#FFFFFF;--bois:#FFFFFF;--lampe:#FFFFFF;--feuille:#FFFFFF;--feuille-2:#FFFFFF;
  --texte:#000000;--machine:#000000;--gris:#26262A;--vin:#7A0012;
  --crayon:#9A0007;--stylo:#00307A;
  /* 03 et 06 · le riso */
  --rose:#A3005C;--bleu:#00307A;--jaune:#6B4E00;
  --rose-p:#FFFFFF;--bleu-p:#FFFFFF;--jaune-p:#FFFFFF;
  /* 04 et les thèmes de projet */
  --fond:#FFFFFF;--fond-2:#FFFFFF;--fond-3:#F2F2F4;
  --texte-2:#26262A;--accent:#00307A;--accent-2:#7A0012;--lueur:transparent;
  color-scheme:light;
}

/* ---------- sombre renforcé : blanc sur noir ---------- */
html[data-ac-contraste="sombre"] body{
  --papier:#000000;--papier-2:#000000;--encre:#FFFFFF;--encre-douce:#E6E6EA;
  --regle:#9A9AA2;--trait:#FFFFFF;--tampon:#FF8A80;--officiel:#9EC5FF;
  --surligneur:#5A4A00;--valide:#7BE0A5;
  --nuit:#000000;--bois:#000000;--lampe:#000000;--feuille:#000000;--feuille-2:#000000;
  --texte:#FFFFFF;--machine:#FFFFFF;--gris:#E6E6EA;--vin:#FF9AA8;
  --crayon:#FF8A80;--stylo:#9EC5FF;
  --rose:#FF9CC9;--bleu:#9EC5FF;--jaune:#FFE066;
  --rose-p:#000000;--bleu-p:#000000;--jaune-p:#000000;
  --fond:#000000;--fond-2:#000000;--fond-3:#141418;
  --texte-2:#E6E6EA;--accent:#9EC5FF;--accent-2:#7BE0A5;--lueur:transparent;
  color-scheme:dark;
}

/* ------------------------------------------------------------
   Ce que les jetons ne peuvent PAS atteindre.

   Redéfinir les jetons suffit pour les quatre feuilles de design,
   qui sont propres. Il reste 122 couleurs écrites à même les
   règles dans themes.css et projet.css — et surtout un piège que
   la mesure a révélé : plusieurs jetons sont nommés d'après une
   MATIÈRE et non d'après un RÔLE. --feuille, c'est « le papier du
   manuscrit » : fond de la page ici, couleur du texte sur la
   barre sombre là. Le mettre à blanc rend l'un juste et l'autre
   invisible, et aucune relecture des noms ne l'aurait dit.

   D'où la règle qui suit : on ne fait plus confiance au nom. On
   pose le sol et l'encre pour TOUT le corps de la page, puis on
   redonne une frontière aux blocs qui n'existaient que par leur
   fond. C'est ce que fait le mode contraste de Windows, et pour
   la même raison : c'est la seule version qui ne peut pas être
   prise en défaut par une couleur qu'on n'a pas vue.
   ------------------------------------------------------------ */

html[data-ac-contraste] body{
  background-color:var(--fond) !important;
  background-image:none !important;
  color:var(--texte) !important;
}
html[data-ac-contraste] body *:not(.acces):not(.acces *):not(.acces-bouton):not(.acces-bouton *):not(svg):not(svg *){
  background-color:transparent !important;
  background-image:none !important;
  color:var(--texte) !important;
  border-color:var(--trait) !important;
  text-shadow:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}

/* Les blocs qui ne se distinguaient que par leur fond retrouvent
   un contour : sans lui, ils fondent dans la page. */
html[data-ac-contraste] :is(.enbref,.decision,.note,.faits,.offre,.options,.presta,
  .projet,.cas,.compteurs li,.entonnoir,.parcours__cadre,.decor--diff,.formulaire,
  .champ input,.champ select,.champ textarea,.btn,.epoque button,.sondage__choix){
  border:2px solid var(--trait) !important;
}

/* Un lien se voit à sa couleur ET à son trait — jamais à la
   couleur seule, sinon il disparaît pour une partie des
   daltoniens et pour tout le monde en contraste renforcé. */
html[data-ac-contraste] a:not(.btn):not(.bd-choix):not(.bd-fusion){
  color:var(--accent) !important;
  text-decoration:underline !important;
  text-underline-offset:.18em;
}
html[data-ac-contraste] .btn{color:var(--texte) !important;text-decoration:none !important}
html[data-ac-contraste] .btn--plein{background-color:var(--texte) !important;color:var(--fond) !important}

/* Un surlignage jaune ne survit pas à un fond blanc ni à un fond
   noir : il devient un soulignement épais, qui marque autant. */
html[data-ac-contraste] :is(mark,.surligne,.chapo em,h1 em,.titre em){
  background-color:transparent !important;
  border-bottom:3px solid var(--accent) !important;   /* épaisseur fixe : .18em sur un titre de 72 px donnait une barre */
}

/* Les pastilles de couleur des designs ne disent rien que le nom
   à côté ne dise déjà — c'est ce qui les rend retirables ici sans
   rien perdre. Vidées de leur dégradé, ce ne sont plus que des
   carrés blancs : autant les enlever. */
html[data-ac-contraste] :is(.bd-choix i,.sondage__choix i){display:none !important}
html[data-ac-contraste] .bd-fusion{border:2px solid var(--trait) !important;border-radius:999px !important}
/* Les deux barres collantes gardent un fond : sans lui, le texte de la page
   défile à travers elles (constaté le 9 septembre 2026 en « basse vision »). */
/* Même chaîne de :not() que la règle générale au-dessus, pour la même
   spécificité : c'est l'ordre qui tranche, et celle-ci vient après. */
html[data-ac-contraste] body :is(.topbar,.barre-designs):not(.acces):not(.acces *):not(.acces-bouton):not(.acces-bouton *):not(svg):not(svg *){background-color:var(--fond,var(--papier,#fff)) !important;backdrop-filter:none !important}

/* Une boîte de dialogue posée sur la page a besoin de son propre
   sol, sinon son texte se lit par-dessus celui du dessous. */
html[data-ac-contraste] .sondage{
  background-color:var(--fond) !important;
  border:3px solid var(--trait) !important;
}

/* La décoration posée en ::before sur un conteneur de structure
   (la tache de vin du manuscrit, par exemple) : un pseudo-élément
   sur <main> ou .wrap ne peut être qu'un ornement. */
html[data-ac-contraste] :is(main,body,.wrap,.doc)::before,
html[data-ac-contraste] :is(main,body,.wrap,.doc)::after{display:none !important}

/* Le tracé du parcours législatif n'est pas un décor : il
   explique. On le garde, en le ramenant à l'encre et au fond. */
html[data-ac-contraste] .parcours__cadre text{fill:var(--texte) !important}
html[data-ac-contraste] .parcours__croisements circle,
html[data-ac-contraste] .parcours__fin{fill:var(--fond) !important;stroke:var(--texte) !important}
html[data-ac-contraste] .parcours__trace{stroke:var(--texte) !important}
html[data-ac-contraste] .parcours__chambre{border:2px solid var(--trait) !important}

/* Le contraste emporte les décors : un grain, une tache de vin
   ou un halo ne peuvent pas être « renforcés », seulement
   retirés. */
html[data-ac-contraste] :is(.grain,.lueur,.lampe,.tache,.rature,.hermine-fond,.ciel,
  .sceau,.scene,.horloge,.trace,.progres,.decor,[class^="decor--"],[class*=" decor--"]){
  display:none !important;
}
html[data-ac-contraste] :is(.section,.section--hero)::before,
html[data-ac-contraste] :is(.section,.section--hero)::after{display:none !important}

/* Le panneau garde sa palette : c'est l'outil de réglage, il ne
   se règle pas lui-même. */
html[data-ac-contraste] .acces,html[data-ac-contraste] .acces-bouton{color:#16181D !important}
html[data-ac-contraste] .acces-bouton{color:#fff !important;background:#16181D !important}

html[data-ac-contraste="clair"] :focus-visible{outline:3px solid #00307A !important;outline-offset:3px !important}
html[data-ac-contraste="sombre"] :focus-visible{outline:3px solid #FFE066 !important;outline-offset:3px !important}


/* ============================================================
   11. Ce que le système demande de lui-même

   forced-colors : le mode contraste de Windows remplace toutes
   les couleurs par la palette de la personne. Le travail n'est
   pas de résister mais de laisser passer, et de rendre visibles
   les traits qui ne tenaient que par une couleur de fond.
   ============================================================ */

@media (forced-colors:active){
  .acces,.acces-bouton,.saut-contenu{border:2px solid ButtonText}
  .acces__opt span{border:2px solid ButtonText}
  .acces__opt input:checked + span{border-width:3px}
  .btn,.presta,.offre,.projet,.enbref,.decision,.note,.faits{border:1px solid ButtonText}
  .grain,.lueur,.lampe,.tache,.sceau,.hermine-fond{display:none}
  :focus-visible{outline:3px solid Highlight !important;outline-offset:2px !important}
  img,svg{forced-color-adjust:auto}
}

/* Le système demande plus de contraste et la personne n'a rien
   réglé ici : on renforce les traits, sans changer la polarité
   qu'elle n'a pas demandée. */
@media (prefers-contrast:more){
  html:not([data-ac-contraste]) body{--trait:currentColor}
  html:not([data-ac-contraste]) a:not(.btn){text-decoration:underline}
  html:not([data-ac-contraste]) :focus-visible{outline-width:3px}
}

/* Moins de transparence : les barres translucides deviennent
   opaques, le texte cesse de se battre avec ce qu'il recouvre. */
@media (prefers-reduced-transparency:reduce){
  .topbar,.barre-designs{backdrop-filter:none !important}
  .topbar{background:var(--fond,var(--papier,#fff)) !important}
}


/* ============================================================
   12. Le texte d'aide de chaque réglage

   Ajouté après coup : un intitulé seul (« Décors : sobres »)
   ne dit pas ce qu'on perd en cochant. La phrase le dit.
   ============================================================ */

.acces__aide{margin:0 0 8px;font-size:.8125rem;line-height:1.45;color:#4A4E57;max-width:52ch}
.acces__systeme{
  margin:0 0 18px;padding:10px 13px;border-radius:8px;
  background:#F0F4FF;border:2px solid #C3D3F5;
  font-size:.875rem;line-height:1.45;color:#16233D;
}


/* ============================================================
   13. Les réglages tout prêts

   Trois boutons qui posent plusieurs réglages d'un coup. Ce sont
   des raccourcis, pas un huitième réglage : ils n'ont pas d'état
   propre, et tout reste modifiable en dessous.
   ============================================================ */

.acces__choix--prets{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.acces__pret{
  display:block;text-align:left;cursor:pointer;
  padding:10px 13px;border:2px solid #16181D;border-radius:10px;
  background:#fff;color:#16181D;font-family:inherit;
}
.acces__pret b{display:block;font-size:.9375rem;font-weight:700;margin-bottom:2px}
.acces__pret small{display:block;font-size:.75rem;line-height:1.35;color:#4A4E57}
.acces__pret:hover{background:#F0F1F3}
.acces__pret:focus-visible{outline:3px solid #1F5FD0;outline-offset:2px}
.acces__groupe--prets{padding-bottom:16px;border-bottom:2px solid #E2E4E8;margin-bottom:18px}


/* ============================================================
   14. Corrections de base — ce ne sont pas des réglages

   Elles s'appliquent à tout le monde, tout le temps. Elles sont
   ici parce que cette feuille est la seule chargée par les cinq
   designs : les écrire ailleurs voudrait dire les écrire cinq
   fois, et en oublier une.
   ============================================================ */

/* Qu'un seul élément dépasse du bord droit — une navigation qui ne passe
   pas à la ligne en texte « Énorme », une grille en rem — et le navigateur
   mobile dézoome toute la page pour le faire rentrer : l'écran paraît
   « cassé ». Mesuré : 499 px de large sur un écran de 360.

   Sur html ET body, et clip plutôt que hidden — les trois mots comptent :
   · html seul ne suffit pas quand body laisse déborder (le procès-verbal,
     le manuscrit) : le dézoom revient ;
   · html non-visible fait que le overflow-x:hidden du body (riso, ultime)
     cesse de remonter à la fenêtre et s'applique au body lui-même, qui
     devient une boîte de défilement : la barre sticky ne colle plus ;
   · clip ne crée pas de boîte de défilement, hidden si — même piège.
   Sans @supports, un vieux navigateur prendrait hidden et perdrait sticky ;
   il garde donc l'ancien comportement. Ce n'est qu'un filet : chaque design
   doit encore faire tenir ses éléments dans la largeur. */
@supports (overflow-x:clip){html,body{overflow-x:clip}}

/* Un lien au milieu d'un paragraphe ne se distinguait que par sa
   couleur. Le trait le rend repérable quelle que soit la vision —
   et seuls les liens DANS le texte le prennent : les boutons et
   la navigation ont déjà leur forme. */
main :is(p,li,dd,span,td,blockquote,figcaption) > a:not(.btn):not([class*="bd-"]):not(.projet__lien){
  text-decoration:underline;
  text-underline-offset:.16em;
  text-decoration-thickness:.06em;
}

/* Le préréglage en cours se voit. Jamais par la couleur seule : il porte
   aussi une coche, comme les autres options du panneau. */
.acces__pret[aria-pressed="true"]{background:#16181D;color:#fff;border-color:#16181D}
.acces__pret[aria-pressed="true"] b::before{content:"\2713\a0"}
.acces__pret[aria-pressed="true"] small{color:#C9CCD2}
.acces__pret[aria-pressed="true"]:hover{background:#2B2F38}