/* =========================================================
   ali/aboudou — module d'accessibilité maison (A-29), version du site (S10, étape 5).
   Reprise de maquette-v6/assets/a11y.css, avec trois écarts :
   - le thème contraste est dans charte/elementor/complement.css (CSS du site), pas ici ;
   - les boutons du panneau sont d'abord remis à zéro : le thème Hello Elementor donne à tout bouton
     une bordure et un survol #c36 ([type=button]:hover, spécificité 0,2,0) ; d'où « .a11y » devant
     chaque règle, pour l'emporter par l'ordre à spécificité égale ;
   - la police est --font-sans (nom de la variable d'Elementor), et non --sans.
   Les classes de la maquette (.mq__track, .pf__track, .sticker, .foot__grid, .nav) sont gardées
   pour les sections à venir (S11) : elles ne coûtent rien tant qu'elles ne sont pas sur la page.
   ========================================================= */

html[data-theme="contraste"] .foot__grid h2,
html[data-theme="contraste"] .foot__legal,
html[data-theme="contraste"] .foot__big .logo-sep{color:var(--sand)}
html[data-theme="contraste"] .nav{background:rgba(255,255,255,.96)}

/* ---------- Taille du texte : tout le contenu grandit, la mise en page suit ---------- */
html[data-a11y-texte="grande"]{--a11y-z:1.15}
html[data-a11y-texte="tres-grande"]{--a11y-z:1.3}
html[data-a11y-texte] body{zoom:var(--a11y-z)}

/* ---------- Espacement du texte (valeurs du critère WCAG 1.4.12), sur le texte courant ---------- */
html[data-a11y-espacement] :is(p,li,dd,dt,blockquote,figcaption,summary,label,td,th){
  line-height:1.7!important;letter-spacing:.12em!important;word-spacing:.16em!important}
html[data-a11y-espacement] :is(p,li,dd,dt,blockquote,figcaption,summary,label,td,th),
html[data-a11y-espacement] :is(p,li,dd,dt,blockquote,figcaption,summary,label,td,th) *{white-space:normal!important;overflow-wrap:anywhere;hyphens:auto}

/* ---------- Texte aligné à gauche ---------- */
html[data-a11y-gauche] body :is(p,h1,h2,h3,h4,li,dd,dt,blockquote,figcaption,summary,label,td,th,span,a){text-align:left!important}
html[data-a11y-gauche] :is(.center,.hero__base,.cta,.hero) :is(p,h1,h2,h3,blockquote){margin-left:0!important}
html[data-a11y-gauche] main :is(.hero__base,.faq){margin-left:0!important}
html[data-a11y-gauche] main :is(.hero__ctas,.cta__btns,.tag,.logos__row){justify-content:flex-start!important}

/* ---------- Liens soulignés ---------- */
html[data-a11y-liens] a:not(.btn):not(.btn-o):not(.logo){text-decoration:underline!important;text-underline-offset:.2em;text-decoration-thickness:1px}
html[data-a11y-liens] a.ul::after{display:none}

/* ---------- Focus renforcé : anneau blanc puis bleu, lisible sur tous les fonds ---------- */
html[data-a11y-focus] :focus-visible{outline:3px solid var(--blue)!important;outline-offset:3px!important;box-shadow:0 0 0 3px var(--white)!important}

/* ---------- Pause des animations : tout est à sa place, rien ne bouge ---------- */
html[data-a11y-pause] *,html[data-a11y-pause] *::before,html[data-a11y-pause] *::after{
  animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;
  transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
html[data-a11y-pause] .ln > span,html[data-a11y-pause] .fade{transform:none!important;opacity:1!important}
html[data-a11y-pause] .mq__track,html[data-a11y-pause] .pf__track{animation:none!important;transform:none!important}
html[data-a11y-pause] .pf__band{overflow-x:auto;scrollbar-width:thin}
html[data-a11y-pause] .pf__track > [aria-hidden="true"]{display:none}
html[data-a11y-pause] .sticker{display:none}

/* ---------- Remise à zéro des boutons du thème (Hello Elementor) ---------- */
.a11y [type=button],.a11y [type=button]:where(:hover,:focus){background-color:transparent;border:0;border-radius:0;color:inherit;
  padding:0;font:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;white-space:normal;text-decoration:none}

/* ---------- Le bouton ---------- */
.a11y{font-family:var(--font-sans),system-ui,sans-serif;font-size:16px;line-height:1.55;color:var(--ink)}
.a11y .a11y__btn{position:fixed;left:16px;bottom:16px;z-index:110;width:52px;height:52px;border-radius:999px;
  display:grid;place-items:center;background:var(--blue);color:#fff;
  box-shadow:0 0 0 2px #fff;   /* anneau blanc : sur le pied de page ink, le bleu seul ne fait que 2,4:1 */
  transition:background-color .2s ease,transform .16s var(--ease-out)}
.a11y .a11y__btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.a11y .a11y__btn:hover{background:var(--ink)}}
.a11y .a11y__btn[aria-expanded="true"]{background:var(--ink)}

/* ---------- Le panneau ---------- */
.a11y .a11y__panel{position:fixed;left:16px;bottom:80px;z-index:110;width:min(360px,calc(100vw - 32px));
  max-height:calc(100dvh / var(--a11y-z,1) - 104px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--white);border:1px solid var(--line);border-radius:18px;padding:18px 20px 16px;
  box-shadow:0 8px 14px rgba(13,14,19,.16);
  opacity:0;transform:translateY(6px) scale(.97);transform-origin:left bottom;
  transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
.a11y .a11y__panel.is-open{opacity:1;transform:none}
.a11y .a11y__panel[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.a11y .a11y__panel{transform:none;transition:opacity .15s ease}}
.a11y .a11y__panel p{margin:0}

.a11y .a11y__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.a11y .a11y__title{font-weight:500;font-size:18px;letter-spacing:-.01em}
.a11y .a11y__close{font-size:14px;color:var(--ink-2);text-decoration:underline;text-underline-offset:.2em;padding:4px 0}
@media (hover:hover) and (pointer:fine){.a11y .a11y__close:hover{color:var(--ink)}}
.a11y .a11y__intro{margin:6px 0 4px;font-size:13px;line-height:1.4;color:var(--ink-2)}

.a11y .a11y__row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.a11y .a11y__row--size{flex-direction:column;align-items:stretch;gap:8px}
.a11y .a11y__label{display:block;font-weight:500;font-size:15px}
.a11y .a11y__desc{display:block;margin-top:1px;font-size:13px;line-height:1.35;color:var(--ink-2)}

/* taille : trois boutons collés, celui choisi en blue (comme le composant Choice) */
.a11y .a11y__seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:999px;padding:3px}
.a11y .a11y__seg button{padding:8px 6px;border-radius:999px;font-size:14px;color:var(--ink);text-align:center;transition:background-color .2s ease,color .2s ease}
.a11y .a11y__seg button[aria-pressed="true"]{background:var(--blue);color:#fff}
@media (hover:hover) and (pointer:fine){.a11y .a11y__seg button[aria-pressed="false"]:hover{color:var(--blue)}}

/* interrupteur : rail line, pastille ink ; activé : rail blue, pastille white */
.a11y .a11y__sw{flex:none;position:relative;width:44px;height:26px;border-radius:999px;border:1px solid var(--ink-2);background:var(--white);
  transition:background-color .2s ease,border-color .2s ease}
.a11y .a11y__sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:999px;background:var(--ink-2);
  transition:transform .2s var(--ease-out),background-color .2s ease}
.a11y .a11y__sw[aria-checked="true"]{background:var(--blue);border-color:var(--blue)}
.a11y .a11y__sw[aria-checked="true"]::after{transform:translateX(18px);background:#fff}
.a11y .a11y__sw[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.a11y .a11y__sw:active::after{transform:scale(.92)}
.a11y .a11y__sw[aria-checked="true"]:active::after{transform:translateX(18px) scale(.92)}

.a11y .a11y__foot{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:14px;font-size:14px}
.a11y .a11y__reset{color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:8px 16px;transition:border-color .2s ease}
@media (hover:hover) and (pointer:fine){.a11y .a11y__reset:hover{border-color:var(--ink)}}
.a11y .a11y__reset:active{transform:scale(.97)}
.a11y .a11y__decl{color:var(--ink-2);text-decoration:underline;text-underline-offset:.2em}

/* mode contraste élevé (Windows) : les fonds disparaissent, l'état des réglages passe par les couleurs du système */
@media (forced-colors:active){
  .a11y .a11y__btn{border:2px solid ButtonText}
  .a11y .a11y__seg button[aria-pressed="true"],.a11y .a11y__sw[aria-checked="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .a11y .a11y__sw{forced-color-adjust:none;background:Canvas;border-color:CanvasText}
  .a11y .a11y__sw::after{background:CanvasText}
  .a11y .a11y__sw[aria-checked="true"]::after{background:HighlightText}
}

/* sur téléphone, le panneau prend la largeur de l'écran au-dessus du bouton (point de rupture d'Elementor : 767 px) */
@media (max-width:767px){
  .a11y .a11y__btn{left:12px;bottom:12px}
  .a11y .a11y__panel{left:12px;right:12px;bottom:72px;width:auto;max-height:calc(100dvh / var(--a11y-z,1) - 92px)}
}