/* Commun élève / parent : feuille « rapport prêt » et bandeau du mode démo */
.pdf-sheet{position:fixed;inset:0;z-index:300;background:rgba(20,24,20,.45);display:flex;align-items:flex-end;justify-content:center}
.pdf-in{background:#fff;color:#22261F;width:min(520px,100%);border-radius:22px 22px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;text-align:center}
.pdf-in p{margin:0;color:#5d6559;font-size:.9rem;word-break:break-all}.pdf-in .btn{margin:0;text-decoration:none;display:block;text-align:center}
.pdf-x{border:0;background:none;color:#5d6559;font-weight:700;padding:8px;cursor:pointer}
/* bandeau démo : fin, rouge, une seule ligne */
.demo-bar{position:fixed;top:0;left:0;right:0;height:34px;box-sizing:border-box;padding-top:env(safe-area-inset-top);z-index:60;display:flex;align-items:center;gap:8px;background:#C8413B;color:#fff;padding:5px 10px 5px 14px;font-size:.8rem;line-height:1.2;white-space:nowrap;box-shadow:0 1px 6px rgba(120,20,20,.25)}
.demo-bar>span:first-child{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.demo-bar>span:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:7px;vertical-align:1px;animation:demoPoint 1.6s ease-in-out infinite}
.demo-bar button{border:0;border-radius:999px;font:inherit;font-weight:800;padding:5px 11px;cursor:pointer;flex:none}
#dVis{background:#fff;color:#B3332D;animation:demoPulse 1.8s ease-out infinite}
#dQuit{background:rgba(255,255,255,.16);color:#fff}
@keyframes demoPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes demoPoint{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){#dVis,.demo-bar>span:first-child::before{animation:none}}
.rap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

.demo-act{display:flex;gap:6px;flex:none}
/* visite guidée */
.vg{position:fixed;inset:0;z-index:400}
.vg-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(18,22,18,.6);outline:3px solid #8FD16A;outline-offset:0;transition:all .3s ease;pointer-events:none}
.vg-bulle{position:fixed;background:#fff;color:#22261F;border-radius:18px;padding:12px 12px 10px 14px;box-shadow:0 10px 28px rgba(0,0,0,.28);max-width:460px;margin:0 auto;transition:top .3s ease,bottom .3s ease}
.vg-fl{position:absolute;width:14px;height:14px;background:#fff;transform:rotate(45deg);margin-left:-7px}.vg-fl.haut{top:-6px}.vg-fl.bas{bottom:-6px}
.vg-haut{display:flex;gap:10px;align-items:flex-start;padding-right:26px}
.vg-tete{flex:none;width:36px;height:36px}.vg-tete svg{width:36px;height:36px}
.vg-txt{margin:0;line-height:1.4;font-size:.95rem}
.vg-passer{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;border-radius:50%;background:none;color:#5D6559;display:grid;place-items:center;cursor:pointer;font-size:1rem}
.vg-bas{display:flex;align-items:center;gap:8px;margin-top:10px}
.vg-pts{display:flex;gap:4px;margin-right:auto}.vg-pts i{width:6px;height:6px;border-radius:50%;background:#D9D3C4}.vg-pts i.on{width:16px;border-radius:4px;background:#3E7F31}
.vg-jamais,.vg-encore{border:0;background:none;color:#5D6559;font:inherit;font-size:.8rem;font-weight:700;padding:6px 2px;cursor:pointer;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.vg-suiv{border:0;background:#3E7F31;color:#fff;font:inherit;font-weight:800;font-size:.92rem;border-radius:999px;padding:8px 16px;cursor:pointer;white-space:nowrap}
@media (prefers-reduced-motion: reduce){.vg-spot,.vg-bulle{transition:none}}
/* petits écrans (iPhone SE, grande police) : « Ne plus afficher » / « Revoir » passent sous la ligne principale, rien ne déborde */
@media (max-width:370px){.vg-bas{flex-wrap:wrap;row-gap:2px}.vg-jamais,.vg-encore{order:3;flex-basis:100%;text-align:left;padding:4px 0 0}.vg-txt{font-size:.92rem}}
.vg-suiv{flex:none}
@media (max-width:430px){.dm-x{display:none}}
body:has(.demo-bar){padding-top:34px}
/* tout ce qu'on fait défiler vers le haut s'arrête sous le bandeau démo, jamais dessous */
html:has(.demo-bar){scroll-padding-top:46px}
/* pas de barre de défilement visible (la page et les zones internes défilent toujours au doigt, à la molette et au clavier) */
html,body,.g-body,.cm,.exo-full,.h-week,.h-chips{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,.g-body::-webkit-scrollbar,.cm::-webkit-scrollbar,.exo-full::-webkit-scrollbar,.h-week::-webkit-scrollbar,.h-chips::-webkit-scrollbar{display:none;width:0;height:0}

/* toast du mode démo (photo) */
.t-demo{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:500;display:flex;align-items:center;gap:12px;width:min(92vw,420px);padding:12px 12px 12px 14px;border-radius:22px;
  background:linear-gradient(135deg,#3E7F31,#5BA84A);color:#fff;box-shadow:0 14px 30px rgba(30,60,20,.35),0 4px 0 #2E6124;transform:translate(-50%,30px) scale(.96);opacity:0;transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .25s}
.t-demo.on{transform:translate(-50%,0) scale(1);opacity:1}
.t-demo .f svg{width:46px;height:46px;flex:none}.t-demo .tx{flex:1;min-width:0}.t-demo b{display:block;font-family:var(--display);font-size:1.05rem}.t-demo small{display:block;opacity:.95;line-height:1.35;margin-top:2px}
.t-demo button{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;cursor:pointer}
@media (prefers-reduced-motion: reduce){.t-demo{transition:none}}
/* .vg-jamais : voir la visite guidée plus haut */
/* vitrine du mode démo */
.dm-vit{position:fixed;inset:0;z-index:520;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,26,40,0);transition:background .3s}
.dm-vit.on{background:rgba(20,26,40,.5)}
.dm-in{position:relative;width:min(100%,480px);background:var(--paper);border-radius:26px 26px 0 0;padding:20px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .4s cubic-bezier(.2,1.2,.4,1);max-height:92vh;overflow:auto}
.dm-vit.on .dm-in{transform:none}
.dmv-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.dm-h{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#3E7F31,#5BA84A);color:#fff;border-radius:18px;padding:12px 14px;margin-right:44px}
.dm-h .f svg{width:52px;height:52px;flex:none}.dm-h b{font-family:var(--display);font-size:1.1rem}.dm-h p{margin:2px 0 0;font-size:.9rem;line-height:1.35;opacity:.95}
.dm-k{font-weight:800;margin:16px 2px 10px;color:var(--ink)}
.dm-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dm-t{display:flex;flex-direction:column;gap:8px;background:color-mix(in srgb,var(--c) 10%,var(--card));border:2px solid color-mix(in srgb,var(--c) 45%,var(--line));border-radius:16px;padding:12px;font-weight:700;font-size:.88rem;line-height:1.3;color:var(--ink);box-shadow:0 3px 0 color-mix(in srgb,var(--c) 30%,var(--line))}
.dm-t .i{width:36px;height:36px;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center;font-size:1.1rem}
.dm-go{width:100%;margin-top:16px}.dm-non{display:block;margin:12px auto 0}
@media (prefers-reduced-motion: reduce){.dm-in,.dm-vit{transition:none}}
/* vitrine démo, version épurée */
.dm-in{text-align:center;padding-top:24px}
.dm-f svg{width:84px;height:84px}
.dm-in h3{font-family:var(--display);font-size:1.35rem;margin:6px 0 4px;color:var(--ink)}
.dm-p{margin:0 auto 16px;max-width:300px;color:var(--soft);font-weight:700;line-height:1.4}
.dm-l{list-style:none;margin:0 auto 4px;padding:0;max-width:300px;text-align:left;display:grid;gap:10px}
.dm-l li{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink)}
.dm-l i{flex:none;width:30px;height:30px;border-radius:10px;background:color-mix(in srgb,var(--ogre) 16%,var(--card));color:var(--ogre-d);display:grid;place-items:center;font-size:.95rem}
.dm-h,.dm-k,.dm-g{display:none}
/* toaster démo : petit bouton « Me connecter » */
.t-demo .t-co{display:inline-block;margin-top:8px;border:0;border-radius:999px;background:#fff;color:#2E6124;font:inherit;font-weight:800;font-size:.85rem;padding:5px 12px;cursor:pointer}
.t-demo .t-x{align-self:flex-start}
.t-demo .t-co{width:auto!important;height:auto!important;display:inline-flex!important;white-space:nowrap;border-radius:999px!important;background:#fff!important;color:#2E6124!important;padding:6px 14px!important}
/* toaster démo en bottom sheet centré, au-dessus de la barre d'onglets */
.t-demo{left:50%!important;bottom:0!important;width:min(100%,480px)!important;border-radius:24px 24px 0 0!important;padding:16px 14px calc(16px + env(safe-area-inset-bottom)) 16px!important;z-index:520!important;transform:translate(-50%,100%)!important;box-shadow:0 -10px 30px rgba(30,60,20,.3)!important}
.t-demo.on{transform:translate(-50%,0)!important}

/* Réviser : les deux onglets « Mes cours » / « Programme » doivent sauter aux yeux (beaucoup d'élèves passeraient à côté) */
.rv-onglets{gap:6px;padding:5px;border-radius:18px;border:2px solid color-mix(in srgb,#FF8A1F 50%,var(--line));background:color-mix(in srgb,#FF8A1F 10%,var(--card))}
.rv-onglets button{padding:12px 8px;font-size:1rem;border-radius:14px;color:var(--ink)}
.rv-onglets button[aria-selected="true"]{background:#FF8A1F;color:#2A1400;box-shadow:0 3px 0 #C25E00}   /* couleur vive, même en sombre : texte très foncé (contraste ≈ 9:1) */
.rv-onglets button[aria-selected="false"]{background:var(--card);box-shadow:0 2px 0 var(--line)}
/* onglets sur petit écran : le texte reste toujours dans son bouton (taille réduite, puis sans icône) */
.rv-onglets button{min-width:0;font-size:clamp(.8rem,3.9vw,1rem);padding-inline:6px}
@media (max-width:360px){.rv-onglets button i{display:none}}
/* Fiches : tableaux nets (fines lignes horizontales, en-tête discret, cadre léger) et marges intérieures un peu plus larges */
.blk .tbl{border:1px solid var(--line);border-radius:12px;margin-top:6px}
.blk .tbl table{font-size:.94rem}
.blk .tbl th,.blk .tbl td{border:0;border-bottom:1px solid var(--line);padding:9px 12px;line-height:1.4}
.blk .tbl tr:last-child td{border-bottom:0}
.blk .tbl th{background:color-mix(in srgb,var(--ink) 5%,var(--card));color:var(--soft);font-family:var(--body);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line)}
.blk .tbl td:first-child{font-weight:700}
.blk.blk{padding:20px 20px}
.blk.blk h3{margin-bottom:10px}
.blk.blk li{margin:.4em 0}
/* onglets de Réviser : plus serrés et texte plus petit sur mobile, jamais de débordement */
@media (max-width:480px){.rv-onglets{gap:4px;padding:3px}.rv-onglets button{font-size:clamp(.74rem,3.5vw,.9rem);padding:10px 4px;gap:4px}}
@media (max-width:400px){.rv-onglets button i{display:none}}
@media (max-width:480px){.blk .tbl{margin-inline:-10px}.blk .tbl th,.blk .tbl td{padding:8px 7px;font-size:.86rem;hyphens:auto;overflow-wrap:anywhere}.blk .tbl th{font-size:.72rem}}
.blk .tbl td:first-child,.blk .tbl th:first-child{hyphens:manual;overflow-wrap:normal;word-break:normal}   /* 1re colonne : mots entiers, jamais coupés */
/* bouton retour : une simple flèche ronde (le texte « Retour » reste lu par les lecteurs d'écran), le titre prend la place */
.back{width:42px;height:42px;flex:none;padding:0!important;display:grid;place-items:center;font-size:0!important;color:var(--ink)}
.back::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--gi-gauche) center/contain no-repeat;mask:var(--gi-gauche) center/contain no-repeat}
/* quiz : minuteur lisible (le chiffre est à côté de la barre, jamais blanc sur fond clair) et points lisibles en sombre */
.q-chrono{overflow:visible;margin-right:40px}
.q-chrono i{border-radius:999px}
.q-chrono b{inset:0 -40px 0 auto;width:34px;color:var(--ink);text-shadow:none;font-size:1rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .q-pts{color:#B794F6}}
:root[data-theme="dark"] .q-pts{color:#B794F6}
.blk .tbl td+td,.blk .tbl th+th{border-left:1px solid color-mix(in srgb,var(--line) 70%,transparent)}   /* séparateur vertical léger entre colonnes */
/* Fiche : titre à droite de l'icône (plus d'icône seule sur sa ligne), intro en dessous sur toute la largeur */
.fhero{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.fhero .em{font-size:2.2rem}
.fhero h2{margin:0;line-height:1.15;min-width:0}
.fhero p{grid-column:1/-1;margin-top:12px}
/* Bouton retour : flèche centrée (en grille, le texte masqué créait une 2e ligne et remontait la flèche) */
.back{display:flex!important;align-items:center;justify-content:center;line-height:0}
.back::before{margin-left:-2px}
/* Défi : 4 réponses toujours dans l'écran, même avec un mot long (« dénominateur ») à 320-375 px */
.df-choix{grid-template-columns:repeat(2,minmax(0,1fr))}
.df-choix>*{min-width:0;overflow-wrap:anywhere;hyphens:auto}
/* Tableaux de fiche sur mobile : on ne coupe plus les mots au milieu (« RÉSULT/AT ») et une formule reste sur une ligne */
@media (max-width:480px){.blk .tbl th,.blk .tbl td{overflow-wrap:break-word;word-break:normal}.blk .tbl th{hyphens:manual;letter-spacing:0}}
.blk .tbl .katex{white-space:nowrap}
/* Accueil : le « Bonne soirée, Léo ! » passe sur deux lignes au lieu d'être coupé par « … » */
.h-hello{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:calc(100% - 24px)!important;overflow-wrap:normal;line-height:1.2!important}
/* Connexion : la phrase de réassurance en petit, discrète */
.pr-rassure{color:var(--soft);font-size:.78rem;line-height:1.45;max-width:34ch;margin:10px auto 0;text-align:center}

/* mention du programme officiel (fiches Mon année, banques S'entraîner) */
.prog-off{display:flex;gap:8px;align-items:flex-start;margin:18px 4px 6px;font-size:.8rem;line-height:1.45;color:var(--soft)}
.prog-off i{flex:none;width:18px;height:18px;margin-top:1px}
.prog-off.ok i{color:var(--ogre)}
.prog-off a{color:inherit;text-decoration:underline;text-underline-offset:2px}


/* ===== sélecteur de la démo, version « rejoindre une partie » : plein écran coloré, gros titre, tuiles franches ===== */
html.dp-ouvert{overflow:hidden}
.dp-fond{position:fixed;inset:0;z-index:1200;overflow:auto;background:radial-gradient(120% 80% at 50% 0%,#3d8b3d 0%,#1f5a2a 55%,#143d1d 100%);display:block;color:#fff}
.dp-deco{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.dp-deco i{position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.dp-deco i:nth-child(1){width:220px;height:220px;top:-60px;left:-70px}
.dp-deco i:nth-child(2){width:140px;height:140px;top:18%;right:-40px;border-radius:32px;transform:rotate(18deg)}
.dp-deco i:nth-child(3){width:90px;height:90px;bottom:12%;left:6%;border-radius:24px;transform:rotate(-14deg)}
.dp-deco i:nth-child(4){width:260px;height:260px;bottom:-110px;right:-80px}
.dp-deco i:nth-child(5){width:46px;height:46px;top:42%;left:44%;background:rgba(255,255,255,.05)}
.dp-in{position:relative;max-width:560px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))}
.dp-x{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;z-index:2;width:44px;height:44px;border-radius:14px;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer}
.dp-x i{width:22px;height:22px}
.dp-tete{text-align:center;padding:18px 36px 4px}
.dp-ogre{display:block;width:84px;height:84px;margin:0 auto 4px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.18));animation:dpSaute 2.4s ease-in-out infinite}
.dp-ogre svg{width:100%;height:100%}
@keyframes dpSaute{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.dp-tete h2{margin:0;font-family:var(--display,inherit);font-size:1.75rem;line-height:1.15;color:#fff;letter-spacing:.2px;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.dp-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:18px auto 18px;max-width:360px;background:rgba(0,0,0,.25);border-radius:999px;padding:5px}
.dp-switch button{position:relative;z-index:1;border:0;background:none;color:rgba(255,255,255,.8);font:inherit;font-weight:800;font-size:1rem;padding:11px 8px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.dp-switch button i{width:19px;height:19px}
.dp-switch button.on{color:#1f5a2a}
.dp-pastille{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:#fff;box-shadow:0 3px 0 rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.dp-switch.droite .dp-pastille{transform:translateX(100%)}
.dp-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dp-carte{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px 16px;border:0;border-radius:24px;background:var(--n);color:#fff;font:inherit;cursor:pointer;box-shadow:0 7px 0 color-mix(in srgb,var(--n) 60%,#000);transform:translateY(0);animation:dpPop .4s calc(var(--i) * 70ms) both cubic-bezier(.3,1.5,.5,1);transition:transform .1s,box-shadow .1s}
.dp-carte:active{transform:translateY(5px);box-shadow:0 2px 0 color-mix(in srgb,var(--n) 60%,#000)}
@keyframes dpPop{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:none}}
.dp-carte .dp-av{width:86px;height:86px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 -5px 0 rgba(0,0,0,.08)}
.dp-av svg{width:88%;height:88%}
.dp-carte .dp-nom{font-size:1.3rem;font-weight:900;line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.dp-carte .dp-niv{font-weight:900;font-size:.95rem;color:var(--n);background:#fff;padding:4px 14px;border-radius:999px}
.dp-liste{display:grid;gap:14px}
.dp-prof{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 14px 14px 12px;border:0;border-radius:24px;background:var(--n);color:#fff;font:inherit;cursor:pointer;box-shadow:0 7px 0 color-mix(in srgb,var(--n) 60%,#000);animation:dpPop .4s calc(var(--i) * 80ms) both cubic-bezier(.3,1.5,.5,1);transition:transform .1s,box-shadow .1s}
.dp-prof:active{transform:translateY(5px);box-shadow:0 2px 0 color-mix(in srgb,var(--n) 60%,#000)}
.dp-prof .dp-av{flex:none;width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}
.dp-prof .dp-nom{font-size:1.2rem;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.dp-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.dp-tx small{color:rgba(255,255,255,.9);font-weight:700;font-size:.85rem}
.dp-mats{display:flex;flex-wrap:wrap;gap:6px}
.dp-mat{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:800;color:#fff;background:rgba(255,255,255,.2);padding:4px 10px 4px 7px;border-radius:999px}
.dp-mat i{width:15px;height:15px}
.dp-fl{flex:none;width:22px;height:22px;color:#fff}
.dp-pied{text-align:center;margin:22px 10px 0;color:rgba(255,255,255,.8);font-size:.88rem;line-height:1.45}
.dp-carte:focus-visible,.dp-prof:focus-visible,.dp-x:focus-visible,.dp-switch button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.dp-carte.charge,.dp-prof.charge{opacity:.7}
.dp-charge,.dp-err{text-align:center;color:rgba(255,255,255,.85);padding:36px 0}
@media (min-width:480px){.dp-grille{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.dp-carte,.dp-prof,.dp-ogre{animation:none}.dp-pastille{transition:none}}

.demo-bar .demo-prof{border:0;background:color-mix(in srgb,#fff 18%,transparent);color:inherit;font:inherit;font-weight:800;border-radius:999px;padding:5px 10px;display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.demo-bar .demo-prof i{width:14px;height:14px}