/* =========================================================
   RÉGLAGES D'AFFICHAGE
   Un site public doit être utilisable par des gens qui voient
   mal, qui lisent difficilement, ou que le mouvement gêne.
   Le système d'exploitation propose déjà des réglages, et le
   site les respecte — mais tout le monde ne sait pas qu'ils
   existent, et beaucoup consultent un site municipal depuis
   un téléphone partagé ou un poste de médiathèque qu'ils ne
   peuvent pas régler. D'où ces réglages, posés sur le site
   lui-même, à portée de pouce, sur toutes les pages.

   Chaque réglage s'écrit en attribut sur <html>. C'est volontaire :
   un attribut est posé avant le premier affichage par un script
   en ligne, donc la page s'ouvre déjà réglée, sans clignoter.
   ========================================================= */

/* ---------- Le bouton d'appel ---------- */
.acc-bouton {
  position: fixed;
  left: clamp(.8rem, 2vw, 1.6rem);
  bottom: clamp(.8rem, 2vw, 1.6rem);
  z-index: 710;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-bleu); color: #fff; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 10px 26px rgba(12, 40, 32, .34);
  transition: transform .2s, background-color .2s;
}
.acc-bouton:hover { transform: translateY(-3px); }
.acc-bouton svg { width: 24px; height: 24px; display: block; }
/* Une pastille quand au moins un réglage est actif : sans elle,
   on ne sait plus si le texte est grand parce qu'on l'a demandé
   ou parce que le site est fait comme ça. */
.acc-bouton::after {
  content: ""; position: absolute; top: -2px; right: -2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--c-orange); border: 2px solid #fff;
  opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s;
}
.acc-bouton[data-actifs="oui"]::after { opacity: 1; transform: none; }

/* Le retour en haut occupait ce coin : il monte d'un cran.
   Il n'apparaît qu'au défilement, les deux ne se gênent pas. */
.bouton-haut { bottom: calc(clamp(.8rem, 2vw, 1.6rem) + 56px); }

/* ---------- Le panneau ---------- */
.acc-panneau {
  position: fixed;
  left: clamp(.8rem, 2vw, 1.6rem);
  bottom: calc(clamp(.8rem, 2vw, 1.6rem) + 56px);
  z-index: 711;
  /* En dvw et non en vw : vw compte la barre de défilement, et le
     panneau dépasserait alors de quelques pixels — assez pour faire
     apparaître un défilement horizontal sur toute la page. */
  width: min(330px, calc(100dvw - 1.6rem));
  max-height: min(78vh, 620px); overflow-y: auto;
  background: #fff; color: #1b2422;
  border-radius: 16px; border: 1px solid #d6ded9;
  box-shadow: 0 24px 60px -18px rgba(12, 40, 32, .5);
  padding: 1.1rem 1.1rem 1.2rem;
  font-family: var(--f-texte);
  transform-origin: bottom left;
  animation: accOuvre .22s cubic-bezier(.2, .9, .3, 1);
}
.acc-panneau[hidden] { display: none; }
@keyframes accOuvre {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
}
.acc-panneau h2 {
  font-family: var(--f-texte);
  margin: 0 0 .15rem; font-size: 1.02rem; font-weight: 700; letter-spacing: 0;
}
.acc-panneau > p.acc-chapo {
  margin: 0 0 1rem; font-size: .8rem; line-height: 1.5; color: #4a5754;
}
.acc-fermer {
  position: absolute; top: .6rem; right: .6rem;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid #d6ded9; background: #fff; color: #4a5754;
  cursor: pointer; display: grid; place-items: center; font-size: 1.05rem; line-height: 1;
}
.acc-fermer:hover { background: #f2f7f5; }

.acc-groupe { margin-bottom: 1rem; }
.acc-groupe > .acc-titre {
  display: block; margin: 0 0 .4rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #4a5754;
}

/* Les choix en segments : taille du texte, contraste. */
.acc-segments { display: flex; gap: .3rem; }
.acc-segments button {
  flex: 1; padding: .5rem .2rem;
  border: 1px solid #d6ded9; border-radius: 9px; background: #fff;
  font: inherit; font-size: .8rem; font-weight: 600; color: #1b2422;
  cursor: pointer; transition: background-color .15s, border-color .15s;
}
.acc-segments button:hover { background: #f2f7f5; }
.acc-segments button[aria-pressed="true"] {
  background: var(--c-bleu); border-color: var(--c-bleu); color: #fff;
}
/* Quatre libellés plutôt que trois « A+ » identiques : « Grand »,
   « Très grand », « Maximum » se lisent, se disent à la voix de
   synthèse, et se comprennent sans deviner. La taille du libellé
   lui-même montre ce qu'on obtient. */
.acc-segments[data-cle="texte"] button { padding: .5rem .1rem; line-height: 1.15; }
.acc-taille-a1 { font-size: .72rem; }
.acc-taille-a2 { font-size: .8rem; }
.acc-taille-a3 { font-size: .9rem; }

/* Les interrupteurs. */
.acc-bascule {
  display: flex; align-items: flex-start; gap: .65rem;
  width: 100%; text-align: left;
  padding: .55rem .6rem; margin-bottom: .3rem;
  border: 1px solid transparent; border-radius: 10px;
  background: none; font: inherit; color: inherit; cursor: pointer;
}
.acc-bascule:hover { background: #f2f7f5; }
.acc-bascule__piste {
  flex: none; width: 38px; height: 22px; margin-top: .1rem;
  border-radius: 999px; background: #c9d3ce; position: relative;
  transition: background-color .18s;
}
.acc-bascule__piste::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .18s;
}
.acc-bascule[aria-pressed="true"] .acc-bascule__piste { background: var(--c-vert); }
.acc-bascule[aria-pressed="true"] .acc-bascule__piste::after { transform: translateX(16px); }
.acc-bascule__t { font-size: .86rem; font-weight: 600; line-height: 1.3; }
.acc-bascule__d { display: block; font-size: .74rem; font-weight: 400; color: #4a5754; margin-top: .1rem; }

.acc-pied {
  margin-top: .4rem; padding-top: .8rem; border-top: 1px solid #e6ebe8;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap;
}
.acc-raz {
  border: 1px solid #d6ded9; border-radius: 9px; background: #fff;
  padding: .45rem .8rem; font: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer; color: #1b2422;
}
.acc-raz:hover { background: #f2f7f5; }
.acc-pied a { font-size: .76rem; color: var(--c-bleu); }

/* Un mot sous le panneau : le réglage ne suit pas la personne
   d'un appareil à l'autre, et il faut le dire plutôt que de
   laisser croire à un compte. */
.acc-note {
  margin: .7rem 0 0; font-size: .7rem; line-height: 1.5; color: #6b7672;
}

@media (max-width: 560px) {
  .acc-panneau {
    left: .5rem; right: .5rem; width: auto;
    bottom: calc(.8rem + 56px); max-height: 72vh;
  }
}

/* =========================================================
   CE QUE CHAQUE RÉGLAGE FAIT
   ========================================================= */

/* ---------- Taille du texte ----------
   Tout le site est dimensionné en rem : changer la taille de
   référence du document agrandit le texte, les boutons et les
   espacements ensemble, sans casser une seule mise en page.
   C'est exactement ce que fait le zoom texte d'un navigateur,
   mais accessible depuis la page. */
html[data-acc-texte="110"] { font-size: 110%; }
html[data-acc-texte="125"] { font-size: 125%; }
html[data-acc-texte="145"] { font-size: 145%; }

/* ---------- Lisibilité renforcée ----------
   Il n'existe pas de police « pour les dyslexiques » qui fasse
   consensus : les études sérieuses montrent que ce qui aide
   vraiment, c'est une police sans empattement très ouverte, des
   lettres bien séparées, des lignes aérées et des lignes courtes.
   C'est ce qu'on applique, avec des polices présentes partout
   plutôt qu'un fichier de plus à télécharger. */
html[data-acc-lecture="facile"] body,
html[data-acc-lecture="facile"] .acc-panneau {
  font-family: Verdana, Tahoma, "DejaVu Sans", system-ui, sans-serif;
}
html[data-acc-lecture="facile"] body {
  letter-spacing: .055em; word-spacing: .18em; line-height: 1.75;
}
html[data-acc-lecture="facile"] h1,
html[data-acc-lecture="facile"] h2,
html[data-acc-lecture="facile"] h3,
html[data-acc-lecture="facile"] .sur-titre,
html[data-acc-lecture="facile"] .btn {
  font-family: Verdana, Tahoma, "DejaVu Sans", system-ui, sans-serif;
  letter-spacing: .02em; text-transform: none;
}
html[data-acc-lecture="facile"] p { max-width: 62ch; }

/* ---------- Espacement du texte ----------
   Le critère 10.12 du RGAA demande que le site reste lisible quand
   l'usager force ces valeurs. Plutôt que d'attendre qu'il installe
   une extension pour le faire, on le lui propose. */
html[data-acc-espace="large"] body {
  line-height: 1.85 !important;
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}
html[data-acc-espace="large"] p { margin-bottom: 2em !important; }

/* ---------- Liens soulignés ----------
   Le critère 10.6 demande qu'un lien dans du texte se distingue
   autrement que par la couleur. Sur ce site les liens de contenu
   sont déjà soulignés ; ce réglage étend le soulignement partout,
   y compris aux liens de navigation et aux cartes cliquables. */
html[data-acc-liens="souligne"] a:not(.btn):not(.acc-bouton) {
  text-decoration: underline !important;
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
}

/* ---------- Animations arrêtées ----------
   Même effet que le réglage « réduire les animations » du système,
   pour qui ne l'a pas activé ou ne peut pas l'activer. Les parties
   animées par script lisent de leur côté window.mouvementDoux(). */
html[data-acc-anim="non"] *,
html[data-acc-anim="non"] *::before,
html[data-acc-anim="non"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
html[data-acc-anim="non"] video[autoplay] { display: none; }

/* ---------- Contraste renforcé ----------
   Les couleurs du site viennent toutes de variables : les
   redéfinir suffit à repeindre l'ensemble. On pousse le texte vers
   le noir, les fonds vers le blanc, et on durcit les traits, qui
   sinon disparaissent. Quelques réglages visent ce que les
   variables ne couvrent pas : les voiles posés sur les photos, et
   les textes blancs sur image. */
html[data-acc-contraste="fort"] {
  --bg: #ffffff;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --texte: #000000;
  --texte-doux: #1c1c1c;
  --c-encre: #000000;
  --c-encre-70: #1c1c1c;
  --c-ivoire: #ffffff;
  --c-blanc: #ffffff;
  --trait: #000000;
  --c-vert: #14402f;
  --c-vert-700: #14402f;
  --c-vert-800: #0e2d21;
  --c-vert-900: #0a2017;
  --c-vert-950: #06140e;
  --c-bleu: #0d3d52;
  --c-bleu-700: #0d3d52;
  --c-bleu-900: #06222e;
  --accent: #14402f;
  --accent-vif: #8a4b00;
  --c-orange: #8a4b00;
  --c-gris: #1c1c1c;
}
html[data-acc-contraste="fort"] body { background: #fff; color: #000; }
html[data-acc-contraste="fort"] a { color: #0a3d91; }
html[data-acc-contraste="fort"] .btn { border: 2px solid currentColor; }
/* Les traits fins disparaissent dès qu'on augmente le contraste :
   on les rend franchement visibles plutôt que presque absents. */
html[data-acc-contraste="fort"] .carte,
html[data-acc-contraste="fort"] .encart,
html[data-acc-contraste="fort"] .acc-panneau,
html[data-acc-contraste="fort"] .fx-champ input,
html[data-acc-contraste="fort"] .fx-champ select,
html[data-acc-contraste="fort"] .fx-champ textarea {
  border: 2px solid #000 !important;
}
html[data-acc-contraste="fort"] :focus-visible {
  outline: 4px solid #8a4b00 !important; outline-offset: 3px;
}
/* Une photo derrière du texte est le point faible de tout site
   municipal. En contraste renforcé, le voile devient opaque :
   on perd l'image, on gagne le texte. C'est le bon échange. */
html[data-acc-contraste="fort"] .p-voile,
html[data-acc-contraste="fort"] .hero::after,
html[data-acc-contraste="fort"] .ccas-entete::after {
  background: rgba(0, 0, 0, .86) !important;
}
html[data-acc-contraste="fort"] .pied__labels-n { color: #e8e8e8 !important; }

/* Le panneau lui-même reste lisible dans tous les modes. */
html[data-acc-contraste="fort"] .acc-panneau { background: #fff; color: #000; }
html[data-acc-contraste="fort"] .acc-bascule__d,
html[data-acc-contraste="fort"] .acc-panneau > p.acc-chapo,
html[data-acc-contraste="fort"] .acc-note { color: #1c1c1c; }

/* À l'impression, les réglages d'écran n'ont rien à faire. */
@media print {
  .acc-bouton, .acc-panneau { display: none !important; }
}