/* 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).
   Cartes à bord fin + ombre basse, mêmes boutons que l'appli. 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)}

/* Ogrelo accueille : petite tête, bulle compacte */
.l-sheet .hello{display:flex;align-items:flex-end;gap:10px;margin:0 0 18px}
.l-sheet .hello .ogre{width:58px;height:58px;flex:none}
.l-sheet .hello .bubble{flex:1;min-width:0;max-width:none;padding:10px 14px}
.l-sheet .hello .bubble p{font-size:1.06rem;line-height:1.3}
.l-sheet .hello .bubble .big{font-size:1.16rem}

/* ---------- cartes : même dessin que les cartes de l'Accueil ---------- */
.l-sheet .r-carte,.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}
.l-sheet .r-carte{padding:0 16px 18px;overflow:hidden}

/* onglets Élève / Prof / Parent : bord à bord, l'onglet choisi tout vert */
.r-tabs{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),1fr);margin:0 -16px 18px;padding:0;gap:0;background:color-mix(in srgb,var(--ink) 4%,var(--card));border-bottom:1.5px solid var(--line)}
.r-tabs button{position:relative;z-index:1;min-width:0;border:0;border-radius:0;background:none;font:inherit;font-weight:800;font-size:.82rem;color:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 4px 9px;cursor:pointer;transition:color .2s}
.r-tabs button i{width:21px;height:21px}
.r-tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.r-tabs button.on{color:#fff}
.r-tabs button:focus-visible{outline:3px solid var(--sky);outline-offset:-3px}
.r-ind{position:absolute;z-index:0;top:0;bottom:0;left:0;width:calc(100% / var(--n,3));background:var(--ogre-d);transform:translateX(calc(var(--i,0)*100%));transition:transform .28s cubic-bezier(.3,1.3,.5,1)}
.r-pan{animation:rPan .25s ease-out}
@keyframes rPan{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.r-pas-eleve #pEd,.r-pas-eleve #pChg,.r-pas-eleve #pQrZone,.r-pas-eleve .pr-rassure{display:none!important}
@media (prefers-reduced-motion:reduce){.r-ind,.r-pan{transition:none;animation:none}}

/* choix de l'appli du collège : l'action principale */
.plat-t{font-family:var(--display);font-weight:800;font-size:1.06rem;line-height:1.2;margin:0 0 12px}
.plat-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.plat-c{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;min-height:92px;border:2px solid var(--line);background:var(--card);border-radius:18px;padding:14px 8px 10px;cursor:pointer;color:var(--ink);font:inherit;box-shadow:0 3px 0 var(--line);transition:border-color .15s}
.plat-c:hover{border-color:color-mix(in srgb,var(--ogre) 55%,var(--line))}
.plat-c:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.plat-c:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.plat-logo{display:block;height:34px;width:auto;max-width:88%;object-fit:contain;margin-top:auto}
.plat-logo.large{padding:5px 0;box-sizing:border-box}
.plat-c small{font-size:.8rem;font-weight:800;color:var(--soft);margin-bottom:auto;max-width:100%;overflow-wrap:anywhere;text-align:center}
/* logos faits pour un fond blanc : petite plaque blanche en sombre */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .plat-c:not(.plat-large) .plat-logo{background:#fff;border-radius:10px;padding:4px 10px;height:38px}}
:root[data-theme="dark"] .plat-c:not(.plat-large) .plat-logo{background:#fff;border-radius:10px;padding:4px 10px;height:38px}
/* carte sur toute la largeur (Ogrelo sans ENT, Skolengo) */
.plat-c.plat-large{grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:12px;min-height:0;padding:10px 12px;text-align:left}
.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}
.plat-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.plat-tx b{font-family:var(--display);font-size:1rem;line-height:1.2;color:var(--ink)}
.plat-tx small{font-size:.78rem;line-height:1.3;font-weight:700;color:var(--soft);text-align:left;margin:0}
.plat-c.plat-off{border-style:dashed;background:color-mix(in srgb,var(--ink) 4%,var(--card));cursor:not-allowed;box-shadow:none;transform:none}
.plat-c.plat-off .plat-ic{background:color-mix(in srgb,var(--ink) 8%,var(--card));color:var(--soft)}
.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:14px 0 0}
.l-sheet .se-reprendre .linkbtn2,.l-sheet .plat-chg .linkbtn2{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.92rem;color:var(--ogre-d);text-decoration:none}
.l-sheet .se-reprendre i{width:15px;height:15px}
@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}

/* ---------- onglets Prof / Parent ---------- */
.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:16px 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%;box-sizing:border-box;font:inherit;font-size:1rem;padding:12px 14px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);margin:0 0 4px}
.r-mail:focus{outline:none;border-color:var(--ogre)}
.r-err{min-height:1.1em;margin:2px 0 8px;color:var(--ko,#C2362C);font-weight:700;font-size:.85rem}.r-err:empty{min-height:0;margin:0 0 8px}
.r-go{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;margin:0 0 6px}
.r-go i{width:18px;height:18px}
.r-mail:disabled,.r-go:disabled{opacity:.45;cursor:default;transform:none}
.r-bientot{display:flex;align-items:center;gap:6px;width:max-content;margin:0 auto 14px;padding:4px 12px;border-radius:999px;font-size:.8rem;font-weight:800;color:var(--t-warn,#8A5A00);background:var(--t-warn-bg,#FFF1D6)}.r-bientot i{width:14px;height:14px}

/* ---------- mode démo : une ligne, sous le formulaire ---------- */
.demo-z{text-align:center;margin:18px 0 0;padding-top:16px;border-top:1.5px solid var(--line)}
.demo-z .btn{margin:0;white-space:nowrap;font-size:clamp(.86rem,4.3vw,1.05rem);padding:13px 10px}


/* ---------- 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 .moi-legal{margin:20px 0 0}
.l-sheet .pr-rassure{margin:10px auto 0;max-width:36ch}

/* ---------- 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 : son appli est repérée (la fenêtre ne s'ouvre pas toute seule) */
.plat-c.deja{border-color:color-mix(in srgb,var(--ogre) 65%,var(--line))}
/* « 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%}

/* Pronote : QR code ou identifiant + mot de passe PRONOTE (pronote-ui.js, mdpFlow) — collège + identifiant + mot de passe sur un seul écran */
.pr-mode{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 16px;border-radius:999px;background:color-mix(in srgb,var(--ink) 6%,var(--card))}
.pr-mode button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:0;border-radius:999px;background:none;color:var(--soft);font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;padding:0 10px;min-width:0}
.pr-mode button i{width:18px;height:18px}
.pr-mode button.on{background:var(--card);color:var(--ink);box-shadow:0 2px 0 var(--line)}
.pr-mode button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.l-modal .pr-mdp-b{display:block;width:100%;margin:0;white-space:normal;text-align:center}
.l-modal .pr-mdp-b i{width:18px;height:18px;margin-right:6px;vertical-align:-3px}
#pMdp>.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}
.pm-bulle{display:flex;align-items:flex-start;gap:12px;margin:0 0 16px}
.pm-bulle svg{width:52px;height:52px;flex:none}
.pm-bulle p{margin:0;flex:1;min-width:0;background:color-mix(in srgb,var(--ogre) 10%,var(--card));border-radius:4px 16px 16px 16px;padding:11px 14px;font-weight:700;line-height:1.4}
.pm-txt{line-height:1.5;margin:0 0 16px}
.l-modal .pm-plein{display:block;width:100%;margin:4px 0 0;min-width:0;white-space:normal;text-align:center}
.pm-plein i{width:18px;height:18px;margin-right:6px;vertical-align:-3px}
#pMdp .pr-tuto-l .linkbtn2{display:inline;text-align:center;line-height:1.5}
#pMdp .pr-tuto-l .linkbtn2 i{margin-right:4px;vertical-align:-3px}
#pMdp p.pm-txt{margin:0 0 18px}
#mL button span,#mL button small{display:block}#mL button small{font-weight:600;margin-top:2px}
.pm-ligne>span{display:flex;gap:8px;align-items:stretch}
.pm-ligne .exo-in{flex:1;min-width:0;margin:0}
.l-modal .pm-ligne .btn{margin:0;flex:0 0 auto;width:auto;min-width:0;padding-left:18px;padding-right:18px}
#mL{margin-top:8px}
.pm-ecole{display:flex;align-items:center;gap:10px;margin:0 0 16px;line-height:1.3}
.pm-ecole b{flex:1;min-width:0;overflow-wrap:anywhere}
.pm-ecole .linkbtn2{flex:none;font-weight:800;color:var(--ogre-d)}
.pm-mdp{position:relative}
.pm-mdp .exo-in{padding-right:52px}
.pm-oeil{position:absolute;right:4px;top:4px;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--soft);border-radius:12px;cursor:pointer}
.pm-oeil i{width:22px;height:22px}
.pm-oeil:focus-visible{outline:3px solid var(--sky);outline-offset:0}
.pm-oeil[aria-pressed="true"]{color:var(--ink)}
#mMsg{color:var(--ko);line-height:1.45;margin:10px 0 0}#mMsg:empty{display:none}
#mMsg.pm-attente,#mL+#mMsg,.pm-ligne+#mMsg{color:var(--soft)}
.pm-prive{display:flex;gap:8px;align-items:flex-start;color:var(--soft);line-height:1.45;margin:14px 0 0}
.pm-prive i{width:16px;height:16px;flex:none;margin-top:2px}
.pm-pin{font-size:1.5rem;letter-spacing:.4em;text-align:center}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pm-ecole .linkbtn2{color:var(--ogre)}}
:root[data-theme="dark"] .pm-ecole .linkbtn2{color:var(--ogre)}

/* Pronote identifiant : un seul écran, aéré ; avertissement « PRONOTE, pas l'ENT » juste au-dessus des champs */
#mF .ed-l{margin-top:18px}#mF #mEc>.ed-l:first-child{margin-top:0}
#mF .pm-ecole{margin:0}
.l-modal .pm-ligne .pm-loupe{flex:0 0 52px;padding:0;display:grid;place-items:center}
.pm-loupe i{width:22px;height:22px}
.pm-petit{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:12px 0 0;padding:0 14px;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;box-shadow:0 3px 0 var(--duo-ombre,var(--line))}
.pm-petit:active{transform:translateY(2px);box-shadow:0 1px 0 var(--duo-ombre,var(--line))}
.pm-petit i{width:16px;height:16px}
.pm-petit:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
#mEcMsg{color:var(--soft);line-height:1.45;margin:10px 0 0}#mEcMsg:empty{display:none}
.pm-alerte{--al:#E8810C;display:flex;gap:10px;align-items:flex-start;margin:22px 0 2px;padding:12px 14px;border-radius:var(--duo-r-s,14px);background:color-mix(in srgb,var(--al) 12%,var(--card));border:2px solid color-mix(in srgb,var(--al) 45%,var(--card));color:var(--ink);font-weight:700;line-height:1.5}
.pm-alerte>i{width:22px;height:22px;flex:none;margin-top:1px;color:color-mix(in srgb,var(--al) 80%,#000)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pm-alerte>i{color:var(--al)}}
:root[data-theme="dark"] .pm-alerte>i{color:var(--al)}
/* surligneur : les deux mots-clés (QR code « sur le site Pronote », mot de passe « PRONOTE ») ; 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}
html:root mark.hl.hl-pronote{background:#9EE0FF;color:#06283A;letter-spacing:.02em}
.l-modal #mF .pm-plein{margin-top:12px}
@media (max-width:400px){.pr-mode button{font-size:.88rem;gap:5px;padding:0 6px;line-height:1.15;text-align:center}.pr-mode button i{width:16px;height:16px;flex:none}}
#mF .pm-alerte{margin:20px 0 4px}