.a11y{margin:clamp(24px,4vw,32px) 0 clamp(32px,5vw,40px);
background:color-mix(in srgb,var(--pc) 7%,#fff);
border:1px solid color-mix(in srgb,var(--pc) 30%,transparent);
border-radius:16px;padding:clamp(24px,3vw,32px)}
.a11y-tete{max-width:60ch}
.a11y-eyebrow{display:inline-flex;align-items:center;gap:8px;
font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
color:var(--pci,var(--pc-ink))}
.a11y-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pc)}
.a11y-eyebrow.jouable::before{content:none}
.a11y-eyebrow.jouable{font-size:13px;letter-spacing:.16em;text-transform:uppercase;gap:8px}
.a11y-q{font-family:var(--title-font),Georgia,serif;font-weight:400;
font-size:clamp(22px,2.6vw,30px);line-height:1.14;letter-spacing:-.02em;
margin:12px 0 0;color:var(--on-night)}
.a11y-aide{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--on-night-faint)}
.a11y-boutons{display:grid;gap:12px;margin-top:24px;
grid-template-columns:repeat(auto-fit,minmax(172px,1fr))}
.a11y-b{display:flex;flex-direction:column;gap:8px;align-items:stretch;
padding:12px;background:#fff;border:1px solid var(--night-line);
border-radius:12px;cursor:pointer;text-align:left;font:inherit;color:var(--on-night);
transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.a11y-b:hover{transform:translateY(-4px);
border-color:color-mix(in srgb,var(--pc) 60%,transparent);
box-shadow:0 16px 32px -20px rgba(28,28,38,.55)}
.a11y-b:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.a11y-b[aria-pressed="true"]{border-color:var(--pc);box-shadow:0 0 0 1px var(--pc)}
.a11y-b b{font-size:15px;font-weight:600;line-height:1.25}
.a11y-b em{font-style:normal;font-size:13px;line-height:1.5;color:var(--on-night-faint)}
.a11y-vue{position:relative;display:block;height:56px;border-radius:8px;overflow:hidden;
border:1px solid var(--night-line)}
.a11y-vue i{position:absolute;inset:0;display:grid;place-items:center;
font-style:normal;transition:opacity .28s ease}
.a11y-vue .brut{opacity:1}
.a11y-vue i:not(.brut){opacity:0}
.a11y-b:hover .a11y-vue .brut,
.a11y-b:focus-visible .a11y-vue .brut,
.a11y-b.montre .a11y-vue .brut,
.a11y-b[aria-pressed="true"] .a11y-vue .brut{opacity:0}
.a11y-b:hover .a11y-vue i:not(.brut),
.a11y-b:focus-visible .a11y-vue i:not(.brut),
.a11y-b.montre .a11y-vue i:not(.brut),
.a11y-b[aria-pressed="true"] .a11y-vue i:not(.brut){opacity:1}
.a11y-vue:not(.mot) i{background:linear-gradient(90deg,
rgb(18,184,134) 0 12.5%, rgb(4,186,210) 12.5% 25%, rgb(76,110,245) 25% 37.5%,
rgb(124,102,210) 37.5% 50%, #C247A9 50% 62.5%, #E64980 62.5% 75%,
#FC6A5F 75% 87.5%, #E16537 87.5% 100%)}
.a11y-vue .deut{filter:url(#a11y-deut)}
.a11y-vue .gris{filter:grayscale(1)}
.a11y-vue .flou{filter:blur(3px)}
@keyframes a11y-souffle-brut{0%,70%,100%{opacity:1}82%{opacity:0}}
@keyframes a11y-souffle{0%,70%,100%{opacity:0}82%{opacity:1}}
.a11y:not(.joue) .a11y-b:first-child:not(:hover):not(:focus-within):not(.montre) .a11y-vue .brut{
animation:a11y-souffle-brut 9s ease-in-out infinite}
.a11y:not(.joue) .a11y-b:first-child:not(:hover):not(:focus-within):not(.montre) .a11y-vue i:not(.brut){
animation:a11y-souffle 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
.a11y .a11y-vue i{animation:none!important}
}
.a11y-vue.mot i{background:#F2F1F5;color:var(--on-night);
font-family:var(--body-font),system-ui,sans-serif;font-weight:600}
.a11y-vue.mot .brut{font-size:15px}
.a11y-vue.mot .gros{font-size:32px;letter-spacing:.02em}
.a11y-vue.mot .ct,.a11y-vue.mot .brut{font-variant-numeric:tabular-nums}
.a11y-b[data-m="contraste"] .a11y-vue .brut{color:var(--on-night-faint);font-size:14px}
.a11y-b[data-m="contraste"] .a11y-vue .ct{color:#fff;font-size:14px;background:#007445}
html:has(.a11y){scroll-snap-type:y proximity}
.pj-section:has(.a11y){scroll-snap-align:start}
html.saut:has(.a11y){scroll-snap-type:none}
@media (prefers-reduced-motion:reduce){
html:has(.a11y){scroll-snap-type:none}
}
@media (hover:none),(max-width:820px){
html:has(.a11y){scroll-snap-type:none}
}
html.a11y-deut :is(.topbar,main > *,.foot){filter:url(#a11y-deut)}
html.a11y-gris :is(.topbar,main,.foot){filter:grayscale(1)}
html.a11y-flou :is(.topbar,main,.foot){filter:blur(2.6px)}
.a11y-ruban{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
z-index:9500;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
justify-content:center;max-width:calc(100vw - 32px);
padding:8px 12px 8px 16px;border-radius:12px;
background:#14141B;color:#F1F0EC;
box-shadow:0 12px 34px -14px rgba(0,0,0,.6);
font:400 14px/1.4 var(--body-font),system-ui,sans-serif}
.a11y-ruban b{font-weight:600}
.a11y-ruban button{font:500 13.5px/1 var(--body-font),system-ui,sans-serif;
color:#14141B;background:#F1F0EC;border:0;border-radius:12px;
padding:8px 12px;cursor:pointer}
.a11y-ruban button:hover{background:#fff}
.a11y-ruban button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.a11y-ct{position:absolute;z-index:9400;pointer-events:none;
font:600 11px/1.5 var(--body-font),system-ui,sans-serif;
font-variant-numeric:tabular-nums;
padding:2px 8px;border-radius:12px;white-space:nowrap;
box-shadow:0 1px 4px rgba(28,28,38,.24)}
.a11y-ct.ok{background:#007445;color:#fff}
.a11y-ct.non{background:#BB2E2C;color:#fff}
@media (max-width:640px){
.a11y-boutons{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.a11y-ruban{left:8px;right:8px;transform:none;max-width:none}
}
@media (prefers-reduced-motion:reduce){.a11y-b{transition:none}}
@media print{.a11y-ruban,.a11y-ct{display:none!important}}