/* Wilfrid David : panneau « Affichage » et réglages d'accessibilité (js/a11y-init.js + js/a11y.js).
   Réglages posés sur <html> avant le premier affichage : data-theme (light|dark), data-fs (taille du texte),
   a11y-hc, a11y-font, a11y-space, a11y-links, a11y-still, a11y-guide, a11y-cursor, a11y-noimg. */

@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");font-weight:500 900;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ taille du texte (tout est en rem/em : la mise en page suit) */
html[data-fs="112"]{font-size:112.5%}html[data-fs="125"]{font-size:125%}html[data-fs="150"]{font-size:150%}
html[data-fs="175"]{font-size:175%}html[data-fs="200"]{font-size:200%}
html[data-fs] .masthead{position:relative}
html[data-fs="150"] .brand img,html[data-fs="175"] .brand img,html[data-fs="200"] .brand img{width:150px}
html[data-fs="175"] .topbar .tb-addr,html[data-fs="200"] .topbar .tb-addr{display:none}
html[data-fs] :is(h1,h2,h3,p,li,a,span,td,th,b){overflow-wrap:break-word}
html[data-fs="150"] h1,html[data-fs="175"] h1,html[data-fs="200"] h1{font-size:clamp(2rem,6vw,3.6rem)}
html[data-fs] .btn{white-space:normal}
html[data-fs] .callbar{position:static}
html[data-fs] body{padding-bottom:0}

/* ------------------------------------------------------------------ bouton d'en-tête et panneau */
.a11y-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:6px 12px;border:2px solid #efe8db;border-radius:999px;background:transparent;color:#efe8db;font:700 .9rem var(--sans);cursor:pointer;flex:none}
.a11y-btn[hidden]{display:none}
.a11y-btn svg{width:20px;height:20px;flex:none}
.a11y-btn:hover,.a11y-btn[aria-expanded=true]{background:var(--gold);border-color:var(--gold);color:var(--char)}
@media (max-width:1400px){.a11y-btn{padding:6px}.a11y-btn .a11y-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

.a11y-panel{position:fixed;inset:0 0 0 auto;margin:0;width:min(25rem,100vw);max-width:100vw;height:100%;max-height:100%;padding:0;border:0;border-left:5px solid var(--gold);background:var(--paper);color:var(--ink);box-shadow:-20px 0 40px -10px rgba(0,0,0,.4);overflow-y:auto;overscroll-behavior:contain;font:400 1rem/1.5 var(--sans);z-index:1000}
.a11y-panel:not([open]){display:none}
.a11y-panel::backdrop{background:rgba(18,17,15,.55)}
.a11y-in{padding:18px 20px 28px}
.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.a11y-head h2{font-size:1.8rem;margin:0}
.a11y-x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:transparent;color:var(--ink);font:400 1.6rem/1 var(--sans);cursor:pointer;flex:none}
.a11y-x:hover{background:var(--ink);color:var(--paper)}
.a11y-note{font-size:.88rem;color:var(--muted);margin:0 0 10px}
.a11y-g{border:0;border-top:1px solid var(--line);margin:0;padding:12px 0 14px;min-width:0}
.a11y-g legend{float:left;width:100%;padding:0;margin:0 0 8px;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.a11y-g legend+*{clear:both}
.a11y-size{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.a11y-size button,.a11y-seg label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:52px;padding:6px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--white);color:var(--ink);font:800 1.05rem var(--sans);cursor:pointer}
.a11y-size button:hover,.a11y-seg label:hover{background:var(--line)}
.a11y-size button:disabled{opacity:.45;cursor:not-allowed}
.a11y-size output{font-weight:800;margin-left:4px;min-width:4.5em}
.a11y-seg{display:flex;flex-wrap:wrap;gap:8px}
.a11y-seg label{position:relative;font-size:.95rem;gap:6px}
.a11y-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.a11y-seg label:has(input:checked){background:var(--ink);color:var(--paper)}
.a11y-seg label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.a11y-sw{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 0;cursor:pointer;font-weight:600}
.a11y-sw input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:48px;height:28px;margin:0;border-radius:999px;border:2px solid var(--ink);background:var(--white);cursor:pointer}
.a11y-sw input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:left .15s}
.a11y-sw input:checked{background:var(--gold-ink);border-color:var(--gold-ink)}
.a11y-sw input:checked::after{left:23px;background:#fff}
.a11y-sw input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.a11y-sw small{display:block;font-weight:400;font-size:.82rem;color:var(--muted)}
.a11y-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;border-top:1px solid var(--line);padding-top:16px}
.a11y-foot .btn{min-height:44px}
.a11y-foot .btn.ghost{color:var(--ink)}
.a11y-foot a{font-weight:700}
.a11y-foot .fine{flex-basis:100%;margin:0;font-size:.9rem}
@media (max-width:480px){.a11y-panel{width:100vw;border-left:0;border-top:5px solid var(--gold)}.a11y-in{padding:14px 16px 24px}}

/* ------------------------------------------------------------------ focus toujours visible */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:is(.on-dark,.masthead,.topbar,.foot,.mnav,.callbar,.post,.duo-card,.svc.wide) :focus-visible{outline-color:var(--gold-2)}
.urgence :focus-visible,.hire :focus-visible{outline-color:#fff;outline-offset:4px}
.hire :focus-visible{outline-color:var(--char)}
.svc:has(h3 a:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.svc h3 a:focus-visible{outline:none}

/* ------------------------------------------------------------------ thème sombre */
html[data-theme=dark]{
 color-scheme:dark;
 --paper:#121110;--white:#1d1b18;--ink:#f1ebdf;--muted:#c2b9a9;--line:#38332c;--line-2:#4a443b;
 --link:#e8bf6a;--link-hover:#fff;--focus:#e8bf6a;--gold-ink:#e8bf6a;--field:#1d1b18;
 --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -14px rgba(0,0,0,.7)
}
html[data-theme=dark] .svc .si{background:#2f2a23}
html[data-theme=dark] .svc.wide{background:#2b2721;border-color:var(--gold)}
html[data-theme=dark] .towns .home a{color:#1c1a17}
html[data-theme=dark] .towns a:hover{background:var(--gold);border-color:var(--gold);color:#1c1a17}
html[data-theme=dark] .btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:#1c1a17}
html[data-theme=dark] .a11y-sw input:checked::after{background:#1c1a17}
html[data-theme=dark] .faq summary::after{background-color:#2b2721}
html[data-theme=dark] .trust img{filter:brightness(0) invert(.92)}
html[data-theme=dark] .on-dark{background:#0d0c0b}
html[data-theme=dark] :is(.sec.alt,.toc){background:#171512}
html[data-theme=dark] .card-when{background:#2b2721;border-color:#3a342c}
html[data-theme=dark] .chips button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#1c1a17}
html[data-theme=dark] .feat{background:#1d1b18;border:1px solid #38332c}
html[data-theme=dark] :is(.cat-list a:hover,.cat-list a[aria-current]){background:var(--gold);color:#1c1a17}
html[data-theme=dark] .chips a:hover{background:var(--gold);border-color:var(--gold);color:#1c1a17}

/* ------------------------------------------------------------------ contraste élevé */
html.a11y-hc{--ink:#000;--muted:#1a1a1a;--paper:#fff;--white:#fff;--line:#000;--line-2:#000;--link:#5a3c00;--link-hover:#000;--focus:#000;--gold-ink:#5a3c00;--shadow:none}
html.a11y-hc[data-theme=dark]{--ink:#fff;--muted:#f2f2f2;--paper:#000;--white:#000;--line:#fff;--line-2:#fff;--link:#ffd76a;--link-hover:#fff;--focus:#ffd76a;--gold-ink:#ffd76a}
html.a11y-hc :is(.svc,.faq details,.ccard,.brief .box,.towns a,.pcard,.tcard,.card-side,.keypoints,.toc,.chips a){border:2px solid var(--line)!important;box-shadow:none!important}
html.a11y-hc :is(.on-dark,.masthead,.topbar,.foot,.post,.mnav){background:#000!important;color:#fff}
html.a11y-hc :is(.on-dark,.foot,.post) :is(p,li,span,.lead){color:#fff!important}
html.a11y-hc .duo-card::before{background:rgba(0,0,0,.86)}
html.a11y-hc :is(.gal,.mosaic) figcaption{background:#000}
:where(html.a11y-hc) a:not(.btn){text-decoration:underline;text-decoration-thickness:2px}
html.a11y-hc :focus-visible{outline-width:4px}

/* ------------------------------------------------------------------ police facile à lire */
html.a11y-font{--sans:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif}
html.a11y-font :is(h1,h2,h3){font-stretch:100%;letter-spacing:0;text-transform:none}

/* ------------------------------------------------------------------ espacement (WCAG 1.4.12) */
html.a11y-space :is(p,li,dd,dt,td,th,label,.lead){line-height:1.8!important}
html.a11y-space body :not(svg):not(svg *){letter-spacing:.12em!important;word-spacing:.16em!important}
html.a11y-space p{margin-bottom:1.6em}
html.a11y-space :is(h1,h2,h3){line-height:1.3}

/* ------------------------------------------------------------------ souligner les liens */
html.a11y-links a{text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:3px}

/* ------------------------------------------------------------------ arrêter les animations */
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-still :is(.svc:hover,.btn:hover,.duo-card:hover img,.gal figure:hover img){transform:none!important}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
 .svc:hover,.btn:hover,.duo-card:hover img,.gal figure:hover img{transform:none}
}

/* ------------------------------------------------------------------ guide de lecture */
.a11y-guide-bar{position:fixed;left:0;right:0;top:0;height:2.4em;pointer-events:none;z-index:2147483000;border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);background:rgba(214,165,67,.10);box-shadow:0 0 0 100vmax rgba(18,17,15,.25);transform:translateY(-200%)}
html:not(.a11y-guide) .a11y-guide-bar{display:none}

/* ------------------------------------------------------------------ grand curseur */
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3v38l10-10 7 15 8-3.5-7-15h14z' fill='%23000' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3,auto!important}

/* ------------------------------------------------------------------ masquer les images */
.a11y-alt{display:none}
html.a11y-noimg img:not(.brand img):not(.fbrand img){display:none!important}
html.a11y-noimg .a11y-alt{display:inline-block;max-width:100%;padding:4px 10px;margin:4px;border:1px dashed var(--muted);border-radius:8px;font:600 .85rem/1.4 var(--sans);color:var(--ink);background:var(--white);overflow-wrap:anywhere}
html.a11y-noimg :is(.mosaic .m1,.mosaic .m2,.mosaic .m3,.gal figure,.shop-ph figure){aspect-ratio:auto;min-height:0}
html.a11y-noimg .duo-card{min-height:0;background:var(--char)}

@media print{.a11y-btn,.a11y-panel,.a11y-guide-bar{display:none!important}}