/* Réglages de lecture Go Bac Pro, panneau latéral (30/10/2026). Version précédente : tests/modes-2026-10-30-avant-panneau.css.
   Rien ne change pour un visiteur qui n'a rien activé : toutes les règles dépendent d'une classe rg-* ou mode-clair* posée sur <html> par modes.js.
   Règle de David : quel que soit le réglage, le site reste beau et aucun mot n'est coupé ; d'où des règles douces (pas de largeur forcée, overflow-wrap, titres conservés). */

/* Pastille « Je suis dys, et alors ? » : même place et même aspect qu'avant ; c'est un bouton qui ouvre le panneau */
.gbp-dys{position:absolute;top:12px;left:12px;z-index:60;font-family:var(--font-text);display:flex;align-items:flex-start;gap:8px}
.gbp-dys-b{font:inherit;font-weight:800;font-size:13px;border:0;border-radius:999px;padding:7px 13px;background:#3dff9e;color:#0b1410;cursor:pointer;box-shadow:0 0 0 2px rgba(61,255,158,.25),0 6px 18px rgba(61,255,158,.3);letter-spacing:0!important;word-spacing:0!important}
.gbp-dys-b:hover{transform:translateY(-1px)}
.gbp-dys-b[aria-expanded="true"]{background:#eef3ef}
body{padding-top:0}

/* Panneau latéral gauche, par-dessus la page : on voit l'effet des réglages en direct. Replié d'un clic, Échap ou « Replier ». */
.rg-panneau{position:fixed;top:0;left:0;bottom:0;z-index:95;width:min(300px,92vw);overflow-y:auto;overscroll-behavior:contain;background:#141b17;color:#eef3ef;border-right:1px solid #2c3832;box-shadow:0 0 60px rgba(0,0,0,.5);padding:16px 18px 28px;box-sizing:border-box;font:16px/1.4 var(--font-text,system-ui,sans-serif);letter-spacing:0!important;word-spacing:0!important}
.rg-panneau *{box-sizing:border-box;letter-spacing:0!important;word-spacing:0!important}
.rg-panneau[hidden]{display:none}
.rg-p-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.rg-p-tete h2{margin:0;font:800 22px/1.2 var(--font-title,inherit);color:#eef3ef}
.rg-p-fermer{font:700 14px/1 inherit;border:1px solid #3a4841;background:transparent;color:#eef3ef;border-radius:999px;padding:9px 14px;min-height:36px;cursor:pointer}
.rg-p-fermer:hover{border-color:#6fe3b0}
.rg-p-aide{margin:0 0 14px;color:#a7b5ae;font-size:14px;line-height:1.4}
.rg-panneau fieldset{border:0;padding:0;margin:0 0 16px}
.rg-panneau legend{font:800 13px/1.2 inherit;text-transform:uppercase;letter-spacing:.06em!important;color:#6fe3b0;margin-bottom:8px;padding:0}
.rg-rac{display:grid;gap:6px}
.rg-rac button{display:block;width:100%;text-align:left;font:inherit;background:#1d2621;color:#eef3ef;border:1px solid #2c3832;border-radius:14px;padding:10px 12px;cursor:pointer;min-height:44px}
.rg-rac button b{display:block;font-size:15px;font-weight:800}
.rg-rac button span{display:block;font-size:13px;color:#a7b5ae;margin-top:2px}
.rg-rac button[aria-pressed="true"]{border-color:#3dff9e;background:rgba(61,255,158,.12)}
.rg-seg{display:flex;gap:6px}
.rg-seg button{flex:1;font:700 15px/1 inherit;min-height:44px;border-radius:12px;border:1px solid #2c3832;background:#1d2621;color:#eef3ef;cursor:pointer;padding:8px 6px}
.rg-seg button[aria-pressed="true"]{background:#6fe3b0;color:#0f1512;border-color:#6fe3b0}
.rg-panneau label{display:flex;align-items:center;gap:10px;min-height:40px;font-size:15px;cursor:pointer;padding:2px 0}
.rg-panneau input[type=checkbox]{width:22px;height:22px;accent-color:#6fe3b0;flex:none;margin:0}
.rg-p-raz{display:block;width:100%;font:700 14px/1 inherit;min-height:44px;border-radius:999px;border:1px solid #3a4841;background:transparent;color:#a7b5ae;cursor:pointer;margin-top:4px}
.rg-p-raz:hover{color:#eef3ef;border-color:#6fe3b0}
/* Panneau ouvert sur un grand écran : la page se décale à droite et reste entière, on voit l'effet des réglages en direct ; la pastille s'efface (le bouton Replier la remplace) */
@media (min-width:1100px){html.rg-p-ouvert body{margin-left:min(300px,92vw);width:calc(100% - min(300px,92vw));box-sizing:border-box}html.rg-p-ouvert .gbp-dys{display:none}}
@media (min-width:901px) and (max-width:1099px){html.rg-p-ouvert .gbp-dys{display:none}}
/* Le fond crème ne doit pas inverser le panneau ni la pastille */
html.mode-clair-inv .rg-panneau,html.mode-clair-inv .gbp-dys,html.mode-clair-inv .rg-nav{filter:invert(1) hue-rotate(180deg)}
@media (max-width:900px){.rg-panneau{top:auto;bottom:0;left:0;right:0;width:100%;max-height:78vh;border-right:0;border-top:1px solid #2c3832;border-radius:22px 22px 0 0;padding-bottom:calc(28px + env(safe-area-inset-bottom))}}

/* Fond clair crème sur une page claire : palette crème, texte foncé */
html.mode-clair{--bg:#f7f1e3;--card:#fffaf0;--ink:#1f2a25;--mute:#46534c;--line:#d6cbb2;--filet:#d6cbb2;--creme:#f7f1e3;--blanc:#fffaf0;--encre:#1f2a25;--gris:#46534c;color-scheme:light}
html.mode-clair body{background:#f7f1e3!important;color:#1f2a25!important}
html.mode-clair .rub,html.mode-clair .donnee,html.mode-clair .gbp-cp,html.mode-clair .lyc,html.mode-clair .grand,html.mode-clair .venir li,html.mode-clair .ia-ue{background:#fffaf0!important;border-color:#d6cbb2;color:#1f2a25}
html.mode-clair .puce,html.mode-clair .rub h3,html.mode-clair .lyc-nom,html.mode-clair .venir li b,html.mode-clair .tete,html.mode-clair .ia-ue{color:#1f2a25}
html.mode-clair .expl,html.mode-clair .d-det,html.mode-clair .mots dd,html.mode-clair p{color:#1f2a25!important}
html.mode-clair .tete{background:#f1e9d6}
/* Fond clair crème sur une page sombre : couleurs inversées puis réchauffées (fond #f6f0e3, texte 17:1, menthe 8,7:1). Les photos sont inversées une seconde fois pour rester naturelles. */
html.mode-clair-inv{filter:invert(1) hue-rotate(180deg) sepia(.2) hue-rotate(-15deg) brightness(.98);background:#0f1512;--corail:#ffa58e}
html.mode-clair-inv img:not([src*="/logo/"]),html.mode-clair-inv video,html.mode-clair-inv picture,html.mode-clair-inv .photo,html.mode-clair-inv [style*="background-image"]{filter:invert(1) hue-rotate(180deg)}
html.mode-clair-inv picture img,html.mode-clair-inv .photo img,html.mode-clair-inv [style*="background-image"] img{filter:none}

/* Taille du texte : les paragraphes et listes suivent le réglage ; les grands titres gardent leur dessin (ils sont déjà grands) */
html.rg-on{--rg-fs:21px}html.rg-t18{--rg-fs:18px}html.rg-t24{--rg-fs:24px}
html.rg-on body :is(p,li,dd,dt,td,th,blockquote,figcaption,label,summary,legend):not(.rg-ui *):not(.gbp-dys *):not(.onglets *):not(.barre-bas2 *):not(.top2 *):not(.pied *){font-size:var(--rg-fs)!important;overflow-wrap:anywhere}
/* Les petits textes des cartes, bandeaux, puces et boutons suivent aussi le réglage (30/10, retour de David : « on voit une différence, mais pas partout ») */
html.rg-on body :is(.rub-sal a,.rub-sal a b,.sugg button,.chips a,.chip,.bulle2,.tag,.qui,.note,.msg,.pill,.cta2 a,.cta2 button,.bulle2 small,.b p,.b h4,.libre p,.carte h3,.rail a,.d-det,.expl,.mots dd,.venir li,.lyc,.donnee,.c-ecrire,.c-parler,.c-parler small,input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,button:not(.gbp-dys-b)):not(.rg-ui *):not(.onglets *):not(.barre-bas2 *):not(.top2 *):not(.pied *):not(.rg-nav *){font-size:var(--rg-fs)!important}
html.rg-on .rub-sal .piste{animation-duration:220s}
html.rg-on body :is(h3,h4,h5,h6):not(.rg-ui *){font-size:calc(var(--rg-fs) * 1.15)!important;line-height:1.3;overflow-wrap:anywhere}
html.rg-on :focus-visible{outline:3px solid #6fe3b0!important;outline-offset:3px}

/* Espacement des lettres et des mots, sans toucher aux titres de la page ni aux menus pour qu'ils ne débordent pas */
html.rg-esp1 body :is(p,li,dd,dt,td,th,blockquote,figcaption,label,.rub-sal a,.sugg button,.chips a,.bulle2,.tag,.qui,.b p,.libre p,button:not(.gbp-dys-b)):not(.rg-ui *):not(svg *):not(.onglets *):not(.top2 *):not(.barre-bas2 *){letter-spacing:.05em;word-spacing:.2em}
html.rg-esp2 body :is(p,li,dd,dt,td,th,blockquote,figcaption,label,.rub-sal a,.sugg button,.chips a,.bulle2,.tag,.qui,.b p,.libre p,button:not(.gbp-dys-b)):not(.rg-ui *):not(svg *):not(.onglets *):not(.top2 *):not(.barre-bas2 *){letter-spacing:.07em;word-spacing:.3em}

/* Interligne 1,5 et lignes de 80 caractères au plus, texte aligné à gauche */
html.rg-conf body :is(p,li,dd,dt,td,th,blockquote,figcaption,label):not(.rg-ui *){line-height:1.5!important;max-width:80ch}
html.rg-conf body :is(p,li):not(.rg-ui *){text-align:left!important;hyphens:manual}

/* Sans photos ni images : les photos disparaissent, les cartes gardent leur place et leur couleur */
html.rg-noimg body :is(img,picture,video):not([src*="/logo/"]):not(.rg-ui *):not(.top2 *){display:none!important}
html.rg-noimg body [style*="background-image"]:not(.rg-ui *){background-image:none!important}
/* Les blocs qui portaient une photo avec du texte par-dessus gardent un fond de carte, pour que le texte reste lisible */
html.rg-noimg body [style*="background-image"]:not(.rg-ui *):not(.top2 *){background-color:#18201c!important}
html.mode-clair-inv.rg-noimg body [style*="background-image"]:not(.rg-ui *):not(.top2 *){background-color:#18201c!important}
html.rg-noimg .hero2 .photo,html.rg-noimg .trio .photo,html.rg-noimg .b.photo,html.rg-noimg .libre .im,html.rg-noimg .carte .img,html.rg-noimg .fiche-photo,html.rg-noimg figure.photo{min-height:0!important;height:auto!important}
html.rg-noimg .b.photo .lab{position:static;background:transparent;backdrop-filter:none;padding:22px}

/* Grandes cibles : 44 px au moins, commandes espacées */
html.rg-cibles body :is(button,select,summary,[role=button],input:not([type=checkbox]):not([type=radio]):not([type=range]),.btn,.btn-fiches,.pill,.cta2 a,.chips a,.sugg button,.rail a):not(.rg-ui *):not(.gbp-dys-b):not(.top2 *){min-height:58px;font-size:max(1.12em,19px)!important;padding-inline:max(1.2em,22px)!important;padding-block:max(.6em,12px)!important}
html.rg-cibles body :is(input[type=checkbox],input[type=radio]):not(.rg-ui *){width:28px;height:28px}
html.rg-cibles body :is(.onglets a,.barre-bas2 a){min-height:52px;font-size:1.1em}
html.rg-cibles body :is(p a,li a,dd a):not(.rg-ui *){text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
html.rg-cibles body a:not(.rg-c-txt):not(.rg-c-in):not(.rg-ui *){min-height:44px}
html.rg-cibles .rg-c-in{display:inline-flex!important;align-items:center;min-height:44px;margin-block:2px}
html.rg-cibles .rg-c-txt{padding-block:.45em}
html.rg-cibles body :is(nav,.onglets,.chips,.sugg,.cta2,.am-fi,.po-fi,.am-a,.po-a,.gbp-chaps,.familles ul):not(.rg-ui *){gap:12px!important}
html.rg-cibles .pied{gap:14px 24px!important}
html.rg-cibles .familles li{margin:4px 0}

/* Une chose à la fois : un seul bloc visible, Précédent et Suivant fixes en bas de l'écran */
html.rg-un .rg-cache{display:none!important}
html.rg-un .rub-sal,html.rg-un .leg-sal,html.rg-un aside.rail{display:none!important}
html.rg-un body *{animation:none!important}
html.rg-un .gbp-maieutica{bottom:calc(86px + var(--rg-nav-bas,0px))!important}
html.rg-un body{padding-bottom:calc(100px + var(--rg-nav-bas,0px))!important}
.rg-nav{position:fixed;left:50%;bottom:calc(12px + var(--rg-nav-bas,0px));transform:translateX(-50%);z-index:85;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 16px);background:#18201c;border:1px solid #2c3832;border-radius:999px;padding:8px;box-shadow:0 12px 34px rgba(0,0,0,.45);font:600 16px/1.2 var(--font-text);color:#eef3ef;letter-spacing:0!important;word-spacing:0!important}
.rg-nav button{font:inherit;font-weight:800;min-height:48px;padding:10px 20px;border-radius:999px;border:2px solid #6fe3b0;background:transparent;color:#eef3ef;cursor:pointer}
.rg-nav button.plein{background:#6fe3b0;color:#0f1512}
.rg-nav button:disabled{opacity:.45;cursor:default}
.rg-nav .rg-pos{white-space:nowrap;padding:0 4px}
.rg-bloc:focus{outline:none}.rg-bloc:focus-visible{outline:3px solid #6fe3b0;outline-offset:6px}

/* Lecture à voix haute : un petit bouton Écouter par bloc de texte (voix de Maïeutica, par le serveur) */
.rg-ecoute{display:flex;width:max-content;max-width:100%;align-items:center;gap:8px;margin:0 0 12px;font:800 16px/1.2 var(--font-text);letter-spacing:0;padding:10px 18px;min-height:46px;border-radius:999px;border:1px solid #2c3832;background:#212b26;color:#eef3ef;cursor:pointer}
.rg-ecoute:hover{border-color:#6fe3b0}
.rg-ecoute[aria-pressed="true"]{background:#6fe3b0;color:#0f1512;border-color:#6fe3b0}
.rg-ecoute svg{width:16px;height:16px;flex:none}
.rg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){.rg-nav{gap:6px;padding:6px}.rg-nav button{padding:10px 14px}.rg-nav .rg-pos{font-size:14px}}
@media (prefers-reduced-motion:reduce){.rg-nav,.rg-ecoute{transition:none}}

/* Mode attention (concentration.js) et chiffres, conservés de la version précédente */
html.mode-dyscalculie .chiffre{font-variant-numeric:tabular-nums;font-size:1.15em;font-weight:700;background:#e3eee8;border-radius:6px;padding:0 6px}
html.mode-dyscalculie .chiffre[data-lettres]::after{content:" (" attr(data-lettres) ")";font-weight:400;font-size:.85em}
html.mode-attention *{animation:none!important}
html.mode-attention .secondaire{display:none!important}

/* Label « Événement labellisé » de la Semaine de l'industrie, dans le pied de page (30/10/2026) */
.gbp-label{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;padding:0 0 16px;margin:0 0 14px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center}
.gbp-label img{width:46px;height:46px;flex:none}
.gbp-label span{font:600 14px/1.4 var(--font-text,system-ui,sans-serif);color:var(--mute,#a7b5ae)}
.gbp-label a{color:var(--menthe,#6fe3b0);font-weight:800;text-decoration:none}
.gbp-label a:hover{text-decoration:underline}
html.mode-clair-inv .gbp-label img{filter:invert(1) hue-rotate(180deg)}