/* Ogrelo · écran d'accueil / connexion (pronote-ui.js connectFlow('login') + sans-ent.js).
   Deux en-têtes au choix (ENTETE_DEFAUT dans pronote-ui.js, ou ?entete=a|b pour comparer) :
   - .l-v-b (par défaut) : la classe d'Ogrelo en image, comme l'Accueil, puis une feuille blanche arrondie qui remonte dessus ;
   - .l-v-a : bandeau vert (logo, nom, slogan, FR | EN, pastilles), tout dans le flux (rien en position absolue sur du texte).
   Accueil : Ogrelo en grand + bulle, deux grosses tuiles en relief (élève / prof), puis un écran par choix ; tuiles des applis sans logo de marque. Clair + sombre, 320 à 430 px d'abord.
   Android : Chrome agrandit le texte selon la taille de police du téléphone (iPhone non) ; tout doit pouvoir passer à la ligne sans se chevaucher. */

/* ---------- en-tête B : la classe d'Ogrelo (même image que l'Accueil) ---------- */
.l-v-b.l-head{position:relative;margin:-12px -16px 0;height:clamp(148px,42vw,200px);overflow:hidden;background:color-mix(in srgb,var(--sky) 22%,var(--paper))}
.l-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 42%;display:block}
.l-sombre{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .l-clair{display:none}:root:not([data-theme="light"]) .l-sombre{display:block}}
:root[data-theme="dark"] .l-clair{display:none}:root[data-theme="dark"] .l-sombre{display:block}
@media (max-width:640px){.l-head{width:100vw;margin-left:calc(50% - 50vw)!important;margin-right:0!important}}
@media (min-width:641px){.l-head{border-radius:0 0 28px 28px}}
/* onglets blancs suspendus au haut de l'écran, comme « Bonsoir, Mike ! » */
.l-v-b .l-brand,.l-v-b .l-lg{position:absolute;top:env(safe-area-inset-top,0px);z-index:2;margin:0;background:var(--sheet);color:var(--ink);border-radius:0 0 14px 14px;box-shadow:0 4px 10px rgba(0,0,0,.14)}
.l-v-b .l-brand{left:12px;max-width:calc(100% - 130px);display:flex;align-items:center;gap:7px;padding:6px 14px 7px 8px}
.l-logo{width:30px;height:30px;flex:none;display:grid;place-items:center}
.l-logo svg{width:100%;height:100%}
.l-v-b .l-brand b{font-family:var(--display);font-weight:800;font-size:1.12rem;line-height:1}
.l-v-b .l-lg{right:12px;padding:5px}
.l-lg{display:flex;gap:2px;flex:none}
.l-lg button{border:0;background:none;color:var(--soft);font:inherit;font-weight:800;font-size:.8rem;line-height:1;border-radius:9px;padding:7px 10px;min-width:36px;cursor:pointer}
.l-lg button.on{background:var(--ogre-d);color:#fff}
.l-lg button:focus-visible{outline:3px solid var(--sky);outline-offset:1px}

/* ---------- en-tête A : bandeau vert, affiné ---------- */
.l-v-a.l-head{margin:-12px -16px 0;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px;background:linear-gradient(160deg,var(--ogre),var(--ogre-d));color:#fff;border-radius:0 0 24px 24px;box-shadow:0 4px 0 color-mix(in srgb,var(--ogre-d) 35%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .l-v-a.l-head{background:linear-gradient(160deg,#3E7F31,#2B5C22);box-shadow:none}}
:root[data-theme="dark"] .l-v-a.l-head{background:linear-gradient(160deg,#3E7F31,#2B5C22);box-shadow:none}
.l-a-top{display:flex;align-items:center;gap:10px}
.l-v-a .l-logo{width:42px;height:42px;background:#fff;border-radius:14px;padding:3px;box-sizing:border-box;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.l-a-top>b{flex:1;min-width:0;font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.05}
.l-v-a .l-slogan{font-family:var(--body);font-weight:700;font-size:.95rem;line-height:1.35;margin:10px 0 0;color:#fff;opacity:.92}
.l-v-a .l-lg{padding:3px;border-radius:12px;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.3)}
.l-v-a .l-lg button{color:#fff;opacity:.85;border-radius:9px}
.l-v-a .l-lg button.on{background:#fff;color:var(--ogre-d);opacity:1}
.l-v-a .l-lg button:focus-visible{outline-color:#fff}
.l-v-a .l-pts{margin:12px 0 0}
.l-v-a .l-pts li,.l-v-a .l-pts li.fort{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.14);color:#fff}
.l-v-a .l-pts li.fort{background:rgba(255,255,255,.24)}
.l-v-a .l-pts li i{color:#fff!important}

/* ---------- la feuille ---------- */
body:has(>#app>.l-sheet.l-v-b){background:var(--sheet)}
.l-sheet{position:relative;margin:-26px -16px -40px;background:var(--sheet);border-radius:28px 28px 0 0;padding:22px 16px calc(32px + env(safe-area-inset-bottom,0px));min-height:calc(100vh - 120px);box-shadow:0 -6px 20px rgba(0,0,0,.06)}
@media (min-width:641px){.l-sheet{border-radius:28px;min-height:0;margin-bottom:0}}
.l-sheet.l-v-a{margin:0 -16px;background:none;box-shadow:none;border-radius:0;min-height:0;padding-top:18px}
.l-v-b .l-slogan{font-family:var(--display);font-size:1.28rem;line-height:1.2;font-weight:800;margin:0 0 10px;color:var(--ink)}

/* ce qu'Ogrelo fait : petites étiquettes calmes, 2 lignes (texte à taille normale) */
.l-pts{list-style:none;display:flex;flex-wrap:wrap;gap:5px 4px;margin:0 0 16px;padding:0}
.l-pts li{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;border:1px solid var(--line);background:var(--sheet);color:var(--soft);border-radius:999px;font-weight:700;font-size:clamp(.64rem,2.8vw,.84rem);line-height:1.5;padding:2px clamp(6px,1.7vw,10px)}
@media (max-width:340px){.l-pts{gap:4px 3px}.l-pts li{gap:3px;padding:2px 5px}}
.l-pts li i{width:1.15em;height:1.15em;flex:none;color:var(--ogre-d)}
.l-pts li.fort{color:var(--ink);border-color:color-mix(in srgb,var(--ogre) 35%,var(--line));background:color-mix(in srgb,var(--ogre) 9%,var(--sheet))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .l-pts li i{color:var(--ogre)}}
:root[data-theme="dark"] .l-pts li i{color:var(--ogre)}

/* ---------- cartes des connexions (fenêtre plein écran) : même dessin que les cartes de l'Accueil ---------- */
.l-sheet #pQrHelp,.l-sheet #pEd>.blk,.l-sheet #pSko>.blk,.l-sheet #pSansEnt>.blk{background:var(--card);border:2px solid var(--line);border-radius:22px;box-shadow:0 4px 0 var(--line);padding:18px 16px;margin:0 0 16px}
.r-pas-eleve #pEd,.r-pas-eleve #pChg,.r-pas-eleve #pQrZone,.r-pas-eleve .pr-rassure{display:none!important}

/* ---------- l'accueil : Ogrelo en grand, puis deux grosses tuiles en relief (style Duolingo, jetons de tuiles.css) ---------- */
.l-v-b .l-slogan{text-align:center;font-size:clamp(1.12rem,5.2vw,1.3rem);margin:2px auto 14px;max-width:24ch;text-wrap:balance}
/* Ogrelo accueille : grosse tête qui se balance doucement, LA bulle commune (bulles.css) */
.l-sheet .l-hero{display:flex;align-items:flex-end;gap:12px;margin:0 0 26px}
.l-sheet .l-hero .ogre{width:84px;height:84px;flex:none;transform-origin:50% 90%;animation:lxPop .5s cubic-bezier(.2,1.5,.4,1) both,lxBob 3.6s ease-in-out .6s infinite}
.l-sheet .l-hero .bubble{flex:1;min-width:0;max-width:none}
.l-sheet .l-hero .bubble p{font-size:1.12rem;line-height:1.35}
.l-sheet .l-hero .bubble .big{font-size:1.18rem}
@keyframes lxPop{from{opacity:0;transform:scale(.6) rotate(-8deg)}}
@keyframes lxBob{0%,100%{transform:none}50%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes lxIn{from{opacity:0;transform:translateY(14px)}}
@keyframes lxSlide{from{opacity:0;transform:translateX(18px)}}

/* les deux choix : élève (vert plein, l'action principale) et prof (bleu-violet calme) */
.lx{margin:0 0 8px}
.lx-step{display:flex;flex-direction:column;gap:16px}
.lx-step[hidden]{display:none}
.r-pan{animation:lxSlide .3s cubic-bezier(.2,1,.4,1) both}
.lx-role{--rc:#58A93F;--rd:#3D7F2B;position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:96px;margin:0;padding:16px 16px 16px 14px;
  border:2px solid var(--rd);border-radius:22px;font:inherit;text-align:left;cursor:pointer;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 88%,#fff),var(--rc));box-shadow:0 6px 0 var(--rd);
  transition:transform .08s ease,box-shadow .08s ease;animation:lxIn .45s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(.12s + var(--d,0)*.08s);-webkit-tap-highlight-color:transparent}
.lx-role:active{transform:translateY(5px);box-shadow:0 1px 0 var(--rd)}
.lx-role:focus-visible,.plat-c:focus-visible,.lx-back:focus-visible,.lx-demo:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.lx-ic{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.22);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.lx-ic svg{width:34px;height:34px}
.lx-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lx-tx b{font-family:var(--display);font-weight:800;font-size:1.32rem;line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.14)}
.lx-tx small{font-weight:700;font-size:.9rem;line-height:1.3;opacity:.95}
.lx-fl{width:22px;height:22px;flex:none;opacity:.9}
.lx-prof{--rc:#6A6FE0;--rd:#4C50B8;color:var(--lxp-ink,#2E2F7A);background:var(--lxp-bg,#EEEFFF);border-color:var(--lxp-bd,#C9CBF6);box-shadow:0 6px 0 var(--lxp-bd,#C9CBF6)}
.lx-prof:active{box-shadow:0 1px 0 var(--lxp-bd,#C9CBF6)}
.lx-prof .lx-ic{background:var(--rc);color:#fff;box-shadow:inset 0 -3px 0 var(--rd)}
.lx-prof .lx-tx b{text-shadow:none}
.lx-prof .lx-tx small{color:var(--lxp-soft,#5A5C9C);opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lx-prof{--lxp-bg:#2B2C52;--lxp-bd:#45478A;--lxp-ink:#E9EAFF;--lxp-soft:#B9BBEE}
  :root:not([data-theme="light"]) .lx-eleve{--rc:#4E9A37;--rd:#2F6A22}}
:root[data-theme="dark"] .lx-prof{--lxp-bg:#2B2C52;--lxp-bd:#45478A;--lxp-ink:#E9EAFF;--lxp-soft:#B9BBEE}
:root[data-theme="dark"] .lx-eleve{--rc:#4E9A37;--rd:#2F6A22}

/* mode démo : un lien franc mais discret sous les deux choix */
.demo-z{text-align:center;margin:0;animation:lxIn .45s ease both;animation-delay:.36s}
.lx-demo{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border:0;border-radius:999px;background:none;font:inherit;font-weight:800;font-size:.98rem;color:var(--ogre-d);cursor:pointer}
.lx-demo i{width:18px;height:18px}
.lx-demo:active{background:color-mix(in srgb,var(--ogre) 12%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lx-demo{color:var(--ogre)}}
:root[data-theme="dark"] .lx-demo{color:var(--ogre)}

/* un écran par choix : flèche de retour + titre */
.lx-tete{display:flex;align-items:center;gap:12px;margin:0}
.lx-tete b{font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.2;min-width:0}
.lx-back{flex:none;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--duo-ombre,var(--line));transition:transform .08s ease,box-shadow .08s ease}
.lx-back:active{transform:translateY(3px);box-shadow:0 1px 0 var(--duo-ombre,var(--line))}
.lx-back i{width:22px;height:22px}
.lx-aide{margin:-4px 0 0;color:var(--soft);font-weight:700;font-size:.95rem;line-height:1.45}

/* les applis du collège : une tuile par ligne, pastille de couleur (pas de logo de marque), flèche */
.plat-b{display:flex;flex-direction:column;gap:14px}
#pChoix .plat-c{--pc:var(--ogre);position:relative;display:flex;flex-direction:row;align-items:center;gap:14px;width:100%;min-height:76px;margin:0;padding:12px 16px 12px 12px;
  border:2px solid var(--line)!important;border-radius:20px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  box-shadow:0 5px 0 var(--duo-ombre,var(--line))!important;transition:transform .08s ease,box-shadow .08s ease,border-color .15s;
  animation:lxIn .4s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(.08s + var(--d,0)*.07s);-webkit-tap-highlight-color:transparent}
#pChoix .plat-c:not(.plat-off)::after{content:"";flex:none;width:22px;height:22px;margin-left:auto;background:var(--soft);-webkit-mask:var(--gi-droite) center/contain no-repeat;mask:var(--gi-droite) center/contain no-repeat}
#pChoix .plat-c:not(.plat-off):active{transform:translateY(4px);box-shadow:0 1px 0 var(--duo-ombre,var(--line))!important}
#pChoix .plat-c:not(.plat-off):hover{border-color:color-mix(in srgb,var(--pc) 55%,var(--line))!important}
#pChoix .plat-c.deja{border-color:color-mix(in srgb,var(--pc) 70%,var(--line))!important}
#pChoix .plat-ic{width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;background:var(--pc);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
#pChoix .plat-ic svg{width:30px;height:30px}
#pChoix .plat-se{--pc:#FFF1C9}
#pChoix .plat-ic.plat-ogre{background:#FFF1C9;overflow:hidden;padding:0}
.plat-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.plat-tx b{font-family:var(--display);font-weight:800;font-size:1.12rem;line-height:1.2;color:var(--ink)}
.plat-tx small{font-size:.86rem;line-height:1.3;font-weight:700;color:var(--soft);text-align:left;margin:0}
.plat-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--ogre) 12%,var(--card));color:var(--ogre-d);font-size:1.2rem}
.plat-ic i{width:20px;height:20px}
.plat-ic.petit{width:34px;height:34px;border-radius:10px;font-size:1.05rem}.plat-ic.petit i{width:18px;height:18px}
#pChoix .plat-c.plat-off{border-style:dashed!important;background:color-mix(in srgb,var(--ink) 4%,var(--card));cursor:not-allowed;box-shadow:none!important;transform:none}
#pChoix .plat-c.plat-off .plat-ic{background:color-mix(in srgb,var(--ink) 10%,var(--card));color:var(--soft);box-shadow:none}
.plat-c.plat-off .plat-tx b{color:var(--soft)}
.plat-c.plat-off .r-ent-etat{margin-left:auto;align-self:center}
/* « Reprendre mon compte » : lien discret mais trouvable */
.l-sheet .se-reprendre{text-align:center;margin:0}
.l-sheet .se-reprendre .linkbtn2,.l-sheet .plat-chg .linkbtn2{display:inline-flex;align-items:center;gap:6px;min-height:48px;font-weight:800;font-size:.95rem;color:var(--ogre-d);text-decoration:none}
.l-sheet .se-reprendre i{width:16px;height:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .l-sheet .se-reprendre .linkbtn2,:root:not([data-theme="light"]) .l-sheet .plat-chg .linkbtn2{color:var(--ogre)}}
:root[data-theme="dark"] .l-sheet .se-reprendre .linkbtn2,:root[data-theme="dark"] .l-sheet .plat-chg .linkbtn2{color:var(--ogre)}

/* « Changer d'appli » : petite flèche de retour, en haut à gauche, comme les écrans Ogrelo */
.plat-chg{text-align:left;margin:0 0 12px}
.l-sheet .plat-chg .linkbtn2{padding:7px 14px 7px 9px;border-radius:999px;background:color-mix(in srgb,var(--ink) 5%,var(--sheet));color:var(--ink)}
.plat-chg i{width:16px;height:16px}

/* ---------- espace prof ---------- */
.r-ent{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:3px;align-items:center;width:100%;min-height:52px;padding:9px 12px;border:2px dashed var(--line);border-radius:16px;background:color-mix(in srgb,var(--ink) 4%,var(--card));color:var(--soft);font:inherit;font-weight:800;text-align:left;cursor:not-allowed}
.r-ent-ic{grid-row:span 2;flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 8%,var(--card))}.r-ent-ic i{width:18px;height:18px}
.r-ent-t{min-width:0;line-height:1.25;align-self:end}
.r-ent-etat{justify-self:start;align-self:start;flex:none;font-size:.7rem;font-weight:800;padding:3px 8px;border-radius:999px;color:var(--t-warn,#8A5A00);background:var(--t-warn-bg,#FFF1D6);white-space:nowrap}
.r-ou{display:flex;align-items:center;gap:10px;margin:0;color:var(--soft);font-size:.8rem;font-weight:700}.r-ou::before,.r-ou::after{content:"";flex:1;height:1px;background:var(--line)}
.r-mail{display:block;width:100%;min-height:52px;box-sizing:border-box;font:inherit;font-size:1.05rem;padding:12px 16px;border:2px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);margin:0}
.r-mail:focus{outline:none;border-color:#6A6FE0;box-shadow:0 0 0 3px color-mix(in srgb,#6A6FE0 25%,transparent)}
.r-err{min-height:1.1em;margin:-8px 0 0;color:var(--ko,#C2362C);font-weight:700;font-size:.85rem}.r-err:empty{display:none}
.r-go{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;margin:0;width:100%}
.r-go i{width:18px;height:18px}
#rPan-prof .r-go{background:#5B60D6;border-color:#5B60D6;color:#fff;box-shadow:0 5px 0 #3E42A8}
#rPan-prof .r-go:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 #3E42A8}
.r-mail:disabled,.r-go:disabled{opacity:.45;cursor:default;transform:none}

/* bas de page : la phrase qui rassure, puis les liens légaux, discrets */
.r-etape .l-hero{margin-bottom:20px}
@media (prefers-reduced-motion:reduce){.l-sheet .l-hero .ogre,.lx-role,.r-pan,.demo-z,#pChoix .plat-c{animation:none!important}.lx-role,.lx-back,#pChoix .plat-c{transition:none}}


/* ---------- Pronote choisi ---------- */
.l-sheet #pQrHelp .steps li::before,.l-modal .steps li::before{background:var(--ogre-d)}
.pr-pin{text-align:center;margin:10px 0}
.pr-pin span{display:inline-block;font-family:var(--display);font-weight:800;font-size:2.3rem;line-height:1.2;letter-spacing:.32em;padding:4px 6px 4px calc(6px + .32em);background:var(--paper);border:3px dashed var(--line);border-radius:16px;color:var(--ink)}
.l-sheet .qr-btns{margin:0 0 12px}
.l-sheet .qr-btns .btn i{width:20px;height:20px}
.l-sheet #pGo{margin:0 0 6px}
.l-sheet #pMsg:empty{display:none}

/* ---------- Ogrelo sans ENT ---------- */
.l-sheet .se-c{border:2px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 3px 0 var(--line);padding:12px}
.l-sheet .se-c:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.l-sheet .se-tete{margin:0 0 14px}
.l-sheet .se-choix{margin:0}
.l-sheet .se-tete b{font-family:var(--display);font-size:1.12rem}

/* ---------- bas de page ---------- */
.l-sheet .pr-rassure{margin:28px auto 0;max-width:34ch;font-size:.84rem;line-height:1.45;color:var(--soft);text-align:center}
.l-sheet .l-legal{margin:12px 0 0;font-size:.78rem;text-align:center;color:var(--soft)}
.l-sheet .l-legal a{color:var(--soft);text-decoration:none;display:inline-block;padding:6px 2px}
.l-sheet .l-legal a:hover{text-decoration:underline}

/* ---------- connexions en plein écran (Pronote, École Directe, Ogrelo, Reprendre mon compte) : même fenêtre que .cm ---------- */
body:has(#lModal:not([hidden])){overflow:hidden}
.l-modal{z-index:80;text-align:left}
.l-modal .cm-in{max-width:520px}
.l-modal .cm-top{position:sticky;top:0;z-index:2;margin:calc(-12px - env(safe-area-inset-top,0px)) -16px 14px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--paper)}
.l-modal .cm-top b{flex:1;min-width:0;line-height:1.2}
.l-modal .cm-x i{width:20px;height:20px}
.l-modal .cm-x:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.l-sheet .l-modal .pr-et .blk{background:var(--card);border:2px solid var(--line);border-radius:22px;box-shadow:0 4px 0 var(--line);padding:18px 16px;margin:0 0 6px}
.l-modal #pEd .ed-t{display:none}   /* le titre est déjà dans la barre du haut */
.l-modal #pEd>.blk,.l-modal #pSko>.blk,.l-modal #pSansEnt>.blk{margin-bottom:6px}
.l-modal .se-tete b{font-size:1.05rem}
/* Pronote : barre d'avancement, une étape par écran */
.pr-prog{margin:0 0 14px}.pr-prog .cm-n{margin:6px 0 0;text-align:left}
.pr-et .steps{margin:0}
.pr-et .tuto{margin:16px 0 0}
.pr-et .pr-pin{margin:16px 0 4px}
.pr-et .pr-pin span{font-size:clamp(2.2rem,12vw,2.8rem)}
.l-modal .qr-btns{margin:16px 0 0}
.l-modal .qr-btns .btn{display:flex;margin:0;width:100%;min-width:0}
.pr-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:18px 0 8px}
.pr-nav.seul{grid-template-columns:1fr}
.l-modal .pr-nav .btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px;padding-right:8px}
.l-modal .pr-nav .btn[hidden]{display:none}
.pr-nav .btn i{width:18px;height:18px;flex:none}
.l-modal #pMsg{text-align:center;line-height:1.45}
.l-m-pied{text-align:center;color:var(--soft);max-width:36ch;margin:16px auto 0;line-height:1.45}
/* élève qui revient : l'écran des applis s'ouvre directement, son appli est repérée (voir #pChoix .plat-c.deja) */
/* « Comment trouver mon QR code ? » : lien sous le tuto, puis les images en grand */
.pr-tuto-l{text-align:center;margin:12px 0 0}
.pr-tuto-l .linkbtn2{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--ogre-d);text-decoration:none}
.pr-tuto-l i{width:16px;height:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pr-tuto-l .linkbtn2{color:var(--ogre)}}
:root[data-theme="dark"] .pr-tuto-l .linkbtn2{color:var(--ogre)}
body:has(.l-tuto-grand){overflow:hidden}
.l-tuto-grand{z-index:90}
.l-tuto-grand .cm-in{max-width:900px;display:flex;flex-direction:column;min-height:100%}
.l-tuto-grand .cm-top b{flex:1;min-width:0;line-height:1.2;font-size:1.08rem;text-wrap:balance}
.tuto-vue.grand{aspect-ratio:auto;flex:1;min-height:0;display:grid;place-items:center;background:none;border:0;border-radius:0;touch-action:pan-y pinch-zoom}
.tuto-vue.grand>img,.tuto-vue.grand>.tuto-svg{background:#fff;border-radius:16px;border:1px solid var(--line);overflow:hidden}
.tuto-vue.grand>img,.tuto-vue.grand>.tuto-svg{width:100%;height:auto;max-height:calc(100dvh - 190px);object-fit:contain}
.tuto-vue.grand .tuto-svg svg{width:100%;height:auto;max-height:calc(100dvh - 190px)}
.l-tuto-grand .tuto-nav{margin-top:14px}
.l-tuto-grand .tg-n{display:flex;align-items:center;gap:6px}.l-tuto-grand .tg-n i{width:8px;height:8px;border-radius:50%;background:var(--line)}.l-tuto-grand .tg-n i.on{background:var(--ogre-d);width:20px;border-radius:6px}.l-tuto-grand .tg-n b{margin-left:6px;font-size:.85rem;color:var(--soft)}

/* Pronote : un seul écran, pas de barre d'étapes ni de Suivant / Retour, pas de carrousel dans la page (seulement en grand, via le lien) */
#pQrZone .pr-prog,#pQrZone #pEtPrev,#pQrZone #pEtNext,#pQrZone #pTuto{display:none!important}
#pQrZone .pr-et+.pr-et{margin-top:10px}
#pQrZone .pr-tuto-l{margin:6px 0 0}
#pQrZone .pr-nav{display:block}#pQrZone .pr-nav #pGo{width:100%}

/* surligneur : « sur le site Pronote » dans l'aide du QR code ; fond clair + texte foncé, lisible en clair comme en sombre */
/* (html:root… : passe devant le surligneur commun de cartes.css et sa version sombre) */
html:root mark.hl{font-weight:800;border-radius:6px;padding:1px 5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html:root mark.hl.hl-site{background:#FFE14D;color:#2A2100}

/* le logo et le nom ramènent à la page de présentation (parents, curieux) */
.l-home{display:inline-flex;align-items:center;gap:inherit;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;border-radius:12px}
.l-home:focus-visible{outline:2px solid #3E7F31;outline-offset:3px}