/* ============================================================================
   CONFORT DE LECTURE — psychomotricite-maurienne.fr
   ----------------------------------------------------------------------------
   Panneau d'accessibilité : police (dont police pour dyslexie), taille,
   interlignage, espacement, fond crème, alignement, repère de lecture,
   lecture facilitée et lecture audio.

   100 % local : aucune police chargée depuis un CDN, aucun service tiers,
   aucun cookie. Les préférences sont mémorisées dans le navigateur du
   visiteur (localStorage), ce qui ne relève pas du suivi.

   Les préférences s'appliquent via des attributs/variables posés sur <html>
   par js/confort-lecture.js.
   ========================================================================== */

/* ------------------------------------------------------------------ POLICES
   Fichiers à déposer dans  httpdocs/fonts/  (voir les instructions).
   Si un fichier manque, le navigateur retombe sur la police de secours
   indiquée : le site reste lisible, l'option est simplement sans effet. */
@font-face {
    font-family: "OpenDyslexic";
    src: url("../fonts/opendyslexic-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "OpenDyslexic";
    src: url("../fonts/opendyslexic-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("../fonts/atkinson-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("../fonts/atkinson-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------- APPLICATION DES RÉGLAGES
   On agit sur <body> pour profiter de l'héritage. Les variables ont une
   valeur par défaut : sans réglage, l'apparence du site ne change pas. */
body {
    font-size: calc(1rem * var(--cl-fs, 1));
    line-height: var(--cl-lh, 1.6);
    letter-spacing: var(--cl-ls, normal);
    word-spacing: var(--cl-ws, normal);
}

/* Police choisie — on cible le corps de texte, pas les icônes (Icofont). */
html[data-cl-police="dys"] body,
html[data-cl-police="dys"] .form-control {
    font-family: "OpenDyslexic", "Comic Sans MS", cursive, sans-serif !important;
}
html[data-cl-police="atkinson"] body,
html[data-cl-police="atkinson"] .form-control {
    font-family: "Atkinson Hyperlegible", "Verdana", sans-serif !important;
}
/* Les icônes ne doivent jamais changer de police, sinon elles disparaissent. */
html[data-cl-police] .icofont,
html[data-cl-police] [class^="icofont-"],
html[data-cl-police] [class*=" icofont-"] {
    font-family: "IcoFont" !important;
}

/* Fond crème : réduit le contraste éblouissant du blanc pur. */
html.cl-creme body { background-color: #fbf7ef !important; }
html.cl-creme .bg-white,
html.cl-creme .gray-bg,
html.cl-creme section { background-color: transparent !important; }

/* Texte aligné à gauche plutôt que justifié (recommandation dyslexie). */
html.cl-gauche body,
html.cl-gauche p,
html.cl-gauche li,
html.cl-gauche .department-content { text-align: left !important; }

/* Lecture facilitée : début de mot renforcé (voir le JS). */
.cl-bio { font-weight: 700; }

/* ------------------------------------------------------- RÈGLE DE LECTURE */
#cl-regle {
    position: fixed;
    left: 0;
    right: 0;
    height: 42px;
    background: rgba(34, 58, 102, 0.12);
    border-top: 2px solid rgba(34, 58, 102, 0.5);
    border-bottom: 2px solid rgba(34, 58, 102, 0.5);
    pointer-events: none;
    z-index: 9998;
    display: none;
}
html.cl-regle #cl-regle { display: block; }

/* ============================================================ LE BOUTON */
#cl-bouton {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9990;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #223a66;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
}
#cl-bouton:hover,
#cl-bouton:focus-visible { background: #318620; transform: scale(1.06); }
#cl-bouton:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }

@media print { #cl-bouton, #cl-regle, #cl-panneau { display: none !important; } }

/* ============================================================ LE PANNEAU */
#cl-panneau {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    max-width: 92vw;
    height: 100%;
    background: #fff;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.22);
    z-index: 9999;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    padding: 22px 24px 40px;
    color: #223a66;
    font-family: "Roboto", sans-serif;
    letter-spacing: normal;
    line-height: 1.5;
}
#cl-panneau.ouvert { transform: translateX(0); }

#cl-panneau h2 {
    font-size: 1.2rem;
    margin: 0;
    color: #223a66;
}
#cl-panneau .cl-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-bottom: 14px;
    margin-bottom: 6px;
}
#cl-fermer {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #5b6472;
    padding: 4px 8px;
}
#cl-fermer:focus-visible { outline: 2px solid #223a66; }

#cl-panneau .cl-section { margin-top: 22px; }
#cl-panneau .cl-titre {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8a93a2;
    margin-bottom: 10px;
}

/* Groupes de boutons-choix */
#cl-panneau .cl-choix { display: flex; flex-wrap: wrap; gap: 8px; }
#cl-panneau .cl-choix button {
    flex: 1 1 auto;
    min-width: 64px;
    padding: 9px 10px;
    border: 1.5px solid #cfd6e0;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #223a66;
    transition: all 0.12s ease;
}
#cl-panneau .cl-choix button:hover { border-color: #223a66; }
#cl-panneau .cl-choix button[aria-pressed="true"] {
    background: #223a66;
    border-color: #223a66;
    color: #fff;
    font-weight: 600;
}
#cl-panneau .cl-choix button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 1px; }

/* Aperçu de police dans son propre style */
#cl-panneau button[data-police="dys"] { font-family: "OpenDyslexic", cursive; }
#cl-panneau button[data-police="atkinson"] { font-family: "Atkinson Hyperlegible", Verdana, sans-serif; }

/* Interrupteurs (cases à cocher stylées) */
#cl-panneau .cl-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f2f4f7;
    cursor: pointer;
}
#cl-panneau .cl-switch span { font-size: 0.95rem; }
#cl-panneau .cl-switch input { width: 20px; height: 20px; cursor: pointer; flex: 0 0 auto; }

/* Boutons de lecture audio */
#cl-tts-cmd { display: flex; gap: 8px; margin-top: 4px; }
#cl-tts-cmd button {
    flex: 1;
    padding: 10px;
    border: 1.5px solid #cfd6e0;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    color: #223a66;
    font-size: 0.9rem;
}
#cl-tts-cmd button:hover { border-color: #223a66; }
#cl-tts-cmd button:focus-visible { outline: 3px solid #ffd54a; }

#cl-reset {
    display: block;
    width: 100%;
    margin-top: 26px;
    padding: 11px;
    background: none;
    border: none;
    color: #5b6472;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
}
#cl-reset:hover { color: #a02c1e; }

/* Voile derrière le panneau */
#cl-voile {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9995;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}
#cl-voile.visible { opacity: 1; visibility: visible; }

/* Respecte le réglage système « animations réduites ». */
@media (prefers-reduced-motion: reduce) {
    #cl-panneau, #cl-voile, #cl-bouton { transition: none; }
}

/* ============================================================================
   PROFILS — ajout 09/2026.
   Un profil pose d'un coup un ensemble de réglages cohérents, à la manière des
   surcouches commerciales, mais sans script tiers ni cookie : tout reste dans
   le localStorage du visiteur.
   ========================================================================== */
.cl-section-profils { border-bottom: 2px solid #e6e9ef; }
.cl-profils {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cl-profils .cl-profil {
    flex: 1 1 auto;
    padding: 9px 14px;
    border: 1px solid #cfe0c8;
    border-radius: 20px;
    background: #fff;
    color: #223a66;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cl-profils .cl-profil:hover,
.cl-profils .cl-profil:focus-visible {
    border-color: #318620;
    background: #eef7ea;
}
.cl-profils .cl-profil.est-actif {
    background: #318620;
    border-color: #318620;
    color: #fff;
}
.cl-profil-desc {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #4a4f57;
}
.cl-profil-desc:empty { margin: 0; }

/* ------------------------------------------------------ CONTRASTE RENFORCÉ
   On ne renverse pas les couleurs : on durcit ce qui est trop pâle. Les gris
   clairs du gabarit descendent sous le ratio 4,5:1 exigé par le RGAA. */
html[data-cl-contraste="renforce"] body,
html[data-cl-contraste="renforce"] p,
html[data-cl-contraste="renforce"] li,
html[data-cl-contraste="renforce"] span,
html[data-cl-contraste="renforce"] .ref-source,
html[data-cl-contraste="renforce"] .carte-actu-date {
    color: #14181f !important;
}
html[data-cl-contraste="renforce"] h1,
html[data-cl-contraste="renforce"] h2,
html[data-cl-contraste="renforce"] h3,
html[data-cl-contraste="renforce"] h4,
html[data-cl-contraste="renforce"] h5 {
    color: #101a2e !important;
}
html[data-cl-contraste="renforce"] a:not(.btn) {
    color: #14532d !important;
    text-decoration: underline !important;
}
html[data-cl-contraste="renforce"] .btn-main,
html[data-cl-contraste="renforce"] .btn-main-2 {
    border: 2px solid #101a2e !important;
}
/* Les textes blancs sur fond sombre restent blancs : les durcir les effacerait. */
html[data-cl-contraste="renforce"] .text-white,
html[data-cl-contraste="renforce"] .text-white *,
html[data-cl-contraste="renforce"] .header-top-bar,
html[data-cl-contraste="renforce"] .header-top-bar *,
html[data-cl-contraste="renforce"] .bandeau-annonces,
html[data-cl-contraste="renforce"] .bandeau-annonces *,
html[data-cl-contraste="renforce"] .page-title .block *,
html[data-cl-contraste="renforce"] footer .btn,
html[data-cl-contraste="renforce"] .btn-main,
html[data-cl-contraste="renforce"] .btn-main-2,
html[data-cl-contraste="renforce"] .encart-badge,
html[data-cl-contraste="renforce"] .encart-badge-peps,
html[data-cl-contraste="renforce"] .encart-badge-complet,
html[data-cl-contraste="renforce"] .bandeau-etat {
    color: #fff !important;
}
html[data-cl-contraste="renforce"] .bandeau-etat { color: #101a2e !important; }

/* ------------------------------------------------------ SURLIGNER LES LIENS
   Un lien ne doit pas se distinguer par la seule couleur (RGAA 3.1) : on ajoute
   un soulignement et un fond. Les boutons sont exclus, ils sont déjà visibles. */
/* .backtop est un lien sans texte (une flèche « haut de page ») : le fond
   jaune n'y produirait qu'un rectangle vide. */
html.cl-liens main a:not(.btn):not(.backtop),
html.cl-liens footer a:not(.btn):not(.backtop) {
    text-decoration: underline !important;
    text-underline-offset: 2px;
    background-color: #fff3bf !important;
    color: #14532d !important;
    padding: 0 3px;
    border-radius: 3px;
}
html.cl-liens main a:not(.btn):not(.backtop):hover,
html.cl-liens footer a:not(.btn):not(.backtop):hover {
    background-color: #ffe066 !important;
}

/* --------------------------------------------- AGRANDIR LES ZONES CLIQUABLES
   Cible visée : 44 × 44 px minimum (WCAG 2.5.8), et un encadrement pour que la
   zone réellement cliquable soit visible avant le clic. */
html.cl-cibles .btn,
html.cl-cibles button:not(#cl-fermer):not(.cl-profil):not(.carrousel-puce),
html.cl-cibles input[type="submit"] {
    min-height: 48px !important;
    padding-top: .7em !important;
    padding-bottom: .7em !important;
}
html.cl-cibles .navbar-nav .nav-link,
html.cl-cibles .dropdown-item,
html.cl-cibles .footer-menu a,
html.cl-cibles .footer-liens a,
html.cl-cibles .top-bar-info a {
    padding-top: .65em !important;
    padding-bottom: .65em !important;
    display: inline-block;
}
html.cl-cibles a:not(.btn):not(.navbar-brand),
html.cl-cibles button:not(#cl-fermer),
html.cl-cibles input,
html.cl-cibles select,
html.cl-cibles textarea {
    outline: 2px solid rgba(49, 134, 32, .55);
    outline-offset: 3px;
}

/* ------------------------------------------------------- SANS ANIMATIONS
   Même effet que « prefers-reduced-motion », mais déclenché par le visiteur :
   tout le monde n'a pas réglé son système, et beaucoup ne savent pas que ce
   réglage existe. */
html.cl-sans-anim *,
html.cl-sans-anim *::before,
html.cl-sans-anim *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}
/* Le bandeau défilant s'arrête net : la seconde copie du texte, qui ne sert
   qu'à rendre la boucle invisible, devient inutile et doit disparaître. */
html.cl-sans-anim .bandeau-piste { animation: none !important; }
html.cl-sans-anim .bandeau-groupe + .bandeau-groupe { display: none !important; }
html.cl-sans-anim .bandeau-annonces { overflow-x: auto; }
html.cl-sans-anim .bandeau-annonces.est-initialise::after { display: none; }