/* Guide to AI : panneau « Affichage / Display » et réglages d'accessibilité (assets/js/a11y-init.js + a11y.js).
   Chargée après style.css. Les réglages sont des attributs et des classes sur <html>, posés 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. Même outil que lapetitenation.ca et holistichybrid.com, aux couleurs du Guide. */

@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}
@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{color-scheme:light;--on-accent:#fff}

/* ------------------------------------------------------------------ taille du texte (la mise en page suit : tout est en rem/em) */
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] .site-header{position:relative}            /* en-tête non collant quand le texte est grand : il ne cache plus la page */
html[data-fs] .filters,html[data-fs] .content aside .box,html[data-fs] .domain-head,html[data-fs] .explorer.ready .ex-tabs{position:static}
html[data-fs="150"] .brand-name small,html[data-fs="175"] .brand-name small,html[data-fs="200"] .brand-name small{display:none}
html[data-fs] .hdr{flex-wrap:wrap;row-gap:6px}
html[data-fs] :is(h1,h2,h3,h4,.brand-name,.lead,b,strong,a,p,li,dd,td,span,em,label){overflow-wrap:break-word}
html[data-fs] .btn{white-space:normal}
html[data-fs="150"] h1,html[data-fs="175"] h1,html[data-fs="200"] h1{font-size:clamp(1.7rem,5vw,3.2rem)}
html[data-fs="175"] .hero h1,html[data-fs="200"] .hero h1{font-size:clamp(1.8rem,5vw,3.2rem)}
html[data-fs="175"] .facts,html[data-fs="200"] .facts{grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr))}
html[data-fs="200"] .ft-top{grid-template-columns:1fr}
html[data-fs] .chips{display:none}
html[data-fs] .pn-consent{flex-wrap:wrap}html[data-fs] .pn-consent-btns{flex-direction:row;flex-wrap:wrap}

/* ------------------------------------------------------------------ bouton d'en-tête */
.a11y-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;padding:6px 14px 6px 11px;border:1.5px solid var(--line-2);border-radius:999px;background:transparent;color:var(--forest-2);font:700 .9rem/1 var(--sans);cursor:pointer;flex:none;order:5;transition:border-color .2s,background .2s,color .2s}
.a11y-btn[hidden]{display:none}
.a11y-btn svg{width:20px;height:20px;flex:none}
.a11y-btn:hover,.a11y-btn[aria-expanded=true]{border-color:var(--forest-2);background:var(--forest-2);color:var(--paper)}
@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}}
@media (max-width:1240px){
  .a11y-btn{order:1;margin-left:auto;width:44px;height:44px}
  .js .menu-toggle{order:2;margin-left:0}
  .nav{order:3}
}

/* ------------------------------------------------------------------ panneau */
.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:4px solid var(--maple);border-radius:28px 0 0 22px;background:var(--paper);color:var(--ink);box-shadow:-20px 0 40px -10px rgba(14,38,30,.35);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(14,38,30,.45)}
.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.6rem;margin:0}
.a11y-x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--forest-2);background:transparent;color:var(--forest-2);font:400 1.6rem/1 var(--sans);cursor:pointer;flex:none}
.a11y-x:hover{background:var(--forest-2);color:var(--paper)}
.a11y-note{font-size:.9rem;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:700;font-size:.8rem;letter-spacing:.14em;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;margin:0;border:1.5px solid var(--forest-2);border-radius:999px;background:var(--white);color:var(--forest-2);font:700 1.05rem var(--sans);cursor:pointer}
.a11y-size button:hover,.a11y-seg label:hover{background:var(--birch)}
.a11y-size button:disabled{opacity:.45;cursor:not-allowed}
.a11y-size output{font-weight:700;margin-left:4px;min-width:4.5em;color:var(--ink)}
.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(--forest-2);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;margin:0;cursor:pointer;font-weight:600;font-size:1rem;color:var(--ink)}
.a11y-sw input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:48px;height:28px;margin:0;padding:0;border-radius:999px;border:2px solid var(--forest-2);background:var(--white);cursor:pointer;box-shadow:none}
.a11y-sw input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--forest-2);transition:left .15s}
.a11y-sw input:checked{background:var(--maple);border-color:var(--maple)}
.a11y-sw input:checked::after{left:23px;background:#fff}
.a11y-sw input:focus{box-shadow:none;border-color:var(--forest-2)}
.a11y-sw input:checked:focus{border-color:var(--maple)}
.a11y-sw input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.a11y-sw small{display:block;font-weight:400;font-size:.84rem;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;padding:10px 20px;box-shadow:none}
.a11y-foot .btn:hover{transform:none}
.a11y-foot a:not(.btn){font-weight:700}
.a11y-foot .fine{flex-basis:100%;margin:0;font-size:.9rem;color:var(--muted);min-height:0}
.a11y-foot .fine:empty{display:none}
.a11y-panel .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:480px){.a11y-panel{width:100vw;border-left:0;border-top:4px solid var(--maple);border-radius:0}.a11y-in{padding:14px 16px 24px}}

/* ------------------------------------------------------------------ cibles tactiles de 44 px (WCAG 2.5.8 demande 24; on vise 44) */
.btn{min-height:44px}
.lang{width:44px;height:44px}
.mega-btn{min-width:30px;min-height:30px}
.filters button,.cat-chip,.tag{min-height:40px;display:inline-flex;align-items:center}

/* ------------------------------------------------------------------ focus toujours visible */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:is(.site-footer,.page-hero,.block.dark,.cta-band,.pn-consent,.ticker) :focus-visible{outline-color:var(--gold)}

/* ================================================================== thème sombre (Guide to AI) : nuit de la couverture, texte clair, bleu ciel pour les liens (contraste ≥ 4,5:1) */
html[data-theme=dark]{
  color-scheme:dark;
  --paper:#0B1426;--white:#111D35;--stone:#13223F;--stone-2:#1A2C4E;--birch:#13223F;
  --line:#26395E;--line-2:#3A5079;--shade:#000;
  --ink:#EEF2FA;--ink-2:#D3DCEC;--muted:#AEBBD3;--forest-2:#EEF2FA;
  --blue:#8DB8F5;--blue-dk:#B5D1FA;--red-dk:#8DB8F5;--sky-soft:#162A4D;--gold-soft:#2A2414;--gold-dk:#E9C477;--focus:#E2B04A;--forest-bg:#070D1A;
}
html[data-theme=dark] body{background:var(--paper);color:var(--ink)}
html[data-theme=dark] .site-header{background:rgba(11,20,38,.94)}
html[data-theme=dark] .btn{background:#8DB8F5;border-color:#8DB8F5;color:#0B1426}
html[data-theme=dark] .btn:hover{background:#B5D1FA;border-color:#B5D1FA;color:#0B1426}
html[data-theme=dark] .btn.ghost{background:transparent;color:#B5D1FA;border-color:#8DB8F5}
html[data-theme=dark] .btn.ghost:hover{background:#8DB8F5;color:#0B1426}
html[data-theme=dark] .btn.light,html[data-theme=dark] .nl-band .btn{background:var(--gold);border-color:var(--gold);color:#0B1426}
html[data-theme=dark] .pill{color:#B5D1FA}
html[data-theme=dark] .p-book{color:#E9C477}
html[data-theme=dark] div.try{border-color:#4A3E1E}
html[data-theme=dark] .bars,html[data-theme=dark] .bars::before,html[data-theme=dark] .bars::after{background:var(--ink)}
html[data-theme=dark] .menu-toggle{background:var(--paper);border-color:var(--ink)}
html[data-theme=dark] .tl li::before{border-color:var(--paper)}
html[data-theme=dark] .block.dark,html[data-theme=dark] .site-footer,html[data-theme=dark] .page-hero,html[data-theme=dark] .hero{background-color:#070D1A}
html[data-theme=dark] .checks .ok{color:#7FD49B}html[data-theme=dark] .checks .no{color:#FFA58A}
html[data-theme=dark] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background-color:#08101F;color:var(--ink);border-color:#3A5079}
html[data-theme=dark] .a11y-panel{box-shadow:-20px 0 40px -10px rgba(0,0,0,.6)}
html[data-theme=dark] .a11y-panel::backdrop{background:rgba(0,0,0,.6)}

/* ================================================================== contraste élevé (clair ou sombre) */
html.a11y-hc{
  --ink:#000;--ink-2:#000;--muted:#1a1a1a;--paper:#fff;--white:#fff;--stone:#fff;--stone-2:#fff;--birch:#fff;--line:#000;--line-2:#000;--shade:#000;
  --forest-2:#000;--red-dk:#8A0010;--focus:#000;--forest-bg:#000;--hard:none;--hard-sm:none;
}
html.a11y-hc[data-theme=dark]{
  --ink:#fff;--ink-2:#fff;--muted:#f0f0f0;--paper:#000;--white:#000;--stone:#000;--stone-2:#000;--birch:#000;--line:#fff;--line-2:#fff;
  --forest-2:#fff;--red-dk:#ffe066;--focus:#ffe066;--forest-bg:#000;
}
html.a11y-hc body{background:var(--paper);color:var(--ink)}
html.a11y-hc .site-header{background:var(--paper);border-bottom:2px solid var(--line)}
html.a11y-hc :is(.box,.tiles li,.brand-card,.post-nav a,.cover,.faq details,.specs div,.note,.epigraph){border:2px solid var(--line)!important;box-shadow:none!important}
html.a11y-hc :is(.muted,.lead,.fine,.crumbs,.crumbs a,.book-meta small,.svc-list small,.brand-name small,.facts span,.timeline p,.specs dt,.by,.owner-note){color:var(--ink)!important}
:where(html.a11y-hc) a{color:var(--red-dk);text-decoration:underline;text-decoration-thickness:2px}
html.a11y-hc :is(.navlink,.brand,.book a,.svc-list a,.hold a,.shelf-head a,.post-nav a){color:var(--ink)}
html.a11y-hc :focus-visible{outline-width:4px;outline-color:var(--focus)!important;box-shadow:0 0 0 7px var(--paper)}
html.a11y-hc :is(.eyebrow,.facts b,.timeline .y,.svc-list .n,.tagline){color:var(--ink)!important}
html.a11y-hc :is(.block.dark,.cta-band,.site-footer,.skip){background:#000!important;color:#fff;border-color:#fff}
html.a11y-hc :is(.block.dark,.cta-band,.site-footer) :is(h1,h2,h3,p,span,li,small,address,.eyebrow,.kind,.ft-col h2){color:#fff!important}
html.a11y-hc :is(.block.dark,.cta-band,.site-footer) a:not(.btn){color:#ffe066!important;text-decoration:underline}
html.a11y-hc .brand-card{background:#000!important}
html.a11y-hc .btn{background:#000;border-color:#000;color:#fff;box-shadow:none}
html.a11y-hc .btn:hover{background:#fff;color:#000;border-color:#000}
html.a11y-hc .btn.ghost,html.a11y-hc .btn.light{background:#fff;color:#000;border-color:#000}
html.a11y-hc[data-theme=dark] .btn{background:#ffe066;border-color:#ffe066;color:#000}
html.a11y-hc :is(.cta-band,.site-footer,.block.dark) .btn{background:#ffe066;border-color:#ffe066;color:#000}
html.a11y-hc :is(.hero-stack,.cta-band::after,.portrait::before){display:none}
html.a11y-hc .hero{background:var(--paper)}
html.a11y-hc :is(.a11y-btn,.a11y-x,.a11y-size button,.a11y-seg label,.lang,.menu-toggle){border-width:2px;border-color:var(--ink)}
html.a11y-hc .a11y-sw input:checked{background:var(--ink);border-color:var(--ink)}
html.a11y-hc .a11y-sw input:checked::after{background:var(--paper)}
html.a11y-hc .a11y-panel{border-color:var(--ink)}

/* ------------------------------------------------------------------ police facile à lire */
html.a11y-font{--sans:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;--serif:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif}
html.a11y-font :is(h1,h2,h3,h4,.brand-name){letter-spacing:0;font-variation-settings:normal}
html.a11y-font :is(.ticker li,.quote,.post-body blockquote,.cloud li:nth-child(4n) a){font-style:normal}

/* ------------------------------------------------------------------ espacement (valeurs de WCAG 1.4.12) */
html.a11y-space body{line-height:1.8}
html.a11y-space :is(p,li,dd,dt,td,th,blockquote,figcaption,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 :is(p,.post-body li,article li){margin-bottom:1.6em}
html.a11y-space :is(h1,h2,h3,h4){line-height:1.3}
html.a11y-space .chips{display:none}
html.a11y-space .navlink{white-space:normal}

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

/* ------------------------------------------------------------------ arrêter les animations (aussi par défaut avec « réduire les animations » de l'appareil) */
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-still{scroll-behavior:auto}
html.a11y-still .season-fx{display:none}
html.a11y-still .js .rv,html.a11y-still .rv{opacity:1!important;transform:none!important}
html.a11y-still .ticker{flex-wrap:wrap}html.a11y-still .ticker ul+ul{display:none}html.a11y-still .ticker ul{flex-wrap:wrap;justify-content:center}
html.a11y-still .logo-river .logos[aria-hidden]{display:none}html.a11y-still .logos{flex-wrap:wrap;width:auto;justify-content:center}
html.a11y-still :is(.btn:hover,.card:hover,.pf:hover,.post-card:hover,.why-card:hover,.steps li:hover,.logos a:hover,.cat-chip:hover,.year-tile:hover,.post-nav a:hover,.ex-tab:hover,.ex-subs a:hover,.filters button:hover,.lang:hover,.cloud a:hover){transform:none!important}
html.a11y-still :is(.pf:hover .shot img,.brand:hover svg,.hero-blob,.mock,.mock-stack:hover .mock,.map-card.float){transform:none!important}
html.a11y-still .hero-blob img{transform:none!important}

/* ------------------------------------------------------------------ guide de lecture (barre qui suit le pointeur ou le doigt) */
.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(245,194,107,.10);box-shadow:0 0 0 100vmax rgba(14,38,30,.22);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 (le texte de remplacement reste visible) */
.a11y-alt{display:none}
html.a11y-noimg img{display:none!important}
html.a11y-noimg :is(.ph-art,.season-fx){display:none}
html.a11y-noimg .hero-blob{aspect-ratio:auto;transform:none;box-shadow:none;background:transparent;border-radius:0;overflow:visible}
html.a11y-noimg .pf .shot{aspect-ratio:auto;min-height:0;padding:10px 12px}
html.a11y-noimg .pf .shot .ph{position:static}
html.a11y-noimg .pf .shot :is(.year,.capt){position:static;display:inline-block;margin:4px 6px 0 0}
html.a11y-noimg .step-leaf{display:none}
html.a11y-noimg .a11y-alt{display:inline-block;max-width:100%;padding:4px 10px;margin:4px 0;border:1px dashed var(--muted);border-radius:8px;font:600 .85rem/1.4 var(--sans);color:var(--ink);background:var(--birch);overflow-wrap:anywhere}
html.a11y-noimg .logos a .a11y-alt{background:transparent;border:0;color:#1a231f}

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

/* contraste élevé : grands numéros décoratifs et repères estompés de la page À propos, lisibles */
html.a11y-hc .ex-intro .ex-num{display:none}
html.a11y-hc .domain-head .ex-num{color:var(--ink)}
html.a11y-hc .tl.js .timeline li{opacity:1}
html.a11y-hc .tl.js .tl-window{-webkit-mask-image:none;mask-image:none}

/* ------------------------------------------------------------------ reflow : le bouton Affichage tient dans l'en-tête à 320 px, et le texte à 200 % sans défilement de côté */
@media (max-width:480px){.hdr{gap:8px}.brand{flex:0 1 auto;min-width:0}.brand-name{min-width:0;overflow-wrap:anywhere}}
@media (max-width:400px){.brand-name{font-size:.95rem}}
html[data-fs] .brand{flex:0 1 auto;min-width:0}
html[data-fs] .brand-name{min-width:0}
html[data-fs] :is(.cta-mail,address a,.form-status a,.post-body a,.side-list a){overflow-wrap:anywhere}
html[data-fs] .blog-side .side-years{grid-template-columns:repeat(auto-fill,minmax(min(100%,5em),1fr))}
html[data-fs] :is(.domain-head,.cta-actions,.ft-brand,.ex-intro,.section-head>*,.two-col>*,.content>*){min-width:0;max-width:100%}
@media (max-width:600px){html[data-fs="175"] .brand-name,html[data-fs="200"] .brand-name{display:none}}
html[data-fs] :is(h1,h2,h3,li a,.cloud a){overflow-wrap:anywhere;hyphens:auto}
html[data-fs] .map-card.float{width:auto;max-width:100%;margin-left:0;transform:none}
html[data-fs] .pn-consent p{min-width:0;overflow-wrap:anywhere}
/* en-tête d'ordinateur : place pour le bouton Affichage sans couper « Parlons-en » */
.nav-cta{white-space:nowrap}
@media (min-width:1041px) and (max-width:1320px){.navlink{padding:9px 8px}.nav-tools{margin-left:2px}.hdr{gap:12px}}
html[data-theme=dark] .tips li.ok .mk{color:#7FD49B}
html[data-theme=dark] .nl-msg.bad{color:#FFA58A}