/*
   ÉCOLE DIGITAL — DESIGN TOKENS
   Palette: encre nuit + craie orange (tableau noir / craie de classe)
   Display: Fraunces (caractère, sérieux scolaire chaleureux)
   Body: Inter (lisibilité administrative)
   Mono: JetBrains Mono (codes, matricules, données)
*/
:root{
  color-scheme: light;
  --ink:#0d1326;
  --ink2:#141b35;
  --ink3:#1b2444;
  --border:#283156;
  --chalk:#f58e27;
  --chalk-dark:#d9740f;
  --chalk-light:#ffb066;
  --paper:#f4f1ea;
  --text:#eef0f6;
  --muted:#8b94b8;
  --muted2:#5d6690;
  --green:#2bb673;
  --green-light:rgba(43,182,115,.12);
  --red:#e5484d;
  --red-light:rgba(229,72,77,.12);
  --gold:#f5c542;
  --r-sm:8px;--r-md:13px;--r-lg:20px;
}
/* ===== THÈME CLAIR — activé via body.theme-clair, reprend les mêmes jetons de conception,
   donc tout le site (déjà entièrement construit sur ces variables) s'adapte automatiquement.
   Volontairement PAS blanc pur (#fff) : un blanc cassé légèrement teinté chaud fatigue
   beaucoup moins les yeux tout en gardant un excellent contraste avec le texte. ===== */
body.theme-clair{
  --ink:#f1ebdd;
  --ink2:#faf7ef;
  --ink3:#ece4d0;
  --border:#ddd0b0;
  --text:#2b2115;
  --muted:#756c58;
  --muted2:#544c3a;
  --green-light:rgba(43,182,115,.14);
  --red-light:rgba(229,72,77,.12);
  --chalk:#c1570e;
  --chalk-dark:#a1490c;
  /* Même souci de lisibilité que sur les thèmes clairs suivants : le jaune/or par défaut est trop
     pâle sur ce fond crème clair. */
  --gold:#9c6608;
}
body.theme-clair ::-webkit-scrollbar-thumb{background:var(--border);}
/* ===== THÈME DOUX — troisième option, un gris-bleu ardoise clair, volontairement différent
   du thème clair (chaud/beige) et du thème sombre (encre nuit) pour offrir une vraie
   alternative visuelle, tout en gardant le même excellent contraste texte/fond. ===== */
body.theme-doux{
  --ink:#cfe6fb;
  --ink2:#e0f0fc;
  --ink3:#bcdaf5;
  --border:#8ec0ea;
  --text:#122439;
  --muted:#3f6690;
  --muted2:#2b4c72;
  --green-light:rgba(43,182,115,.14);
  --red-light:rgba(229,72,77,.12);
  --chalk:#c1570e;
  --chalk-dark:#a1490c;
  /* Le jaune/or par défaut (--gold, pensé pour un fond bleu nuit très sombre) devient illisible sur
     ce fond clair — remplacé par un ambre foncé qui garde le même rôle (valeurs mises en avant :
     matricules, noms de classe générés automatiquement, etc.) avec un vrai contraste. */
  --gold:#9c6608;
}
body.theme-doux ::-webkit-scrollbar-thumb{background:var(--border);}
/* ===== THÈME BLEU CIEL — quatrième option, un bleu ciel vif et lumineux (comme un beau ciel
   dégagé), pensé pour être joli et attirant tout en gardant un excellent contraste texte/fond. */
body.theme-ciel{
  --ink:#c3e6fb;
  --ink2:#e0f3ff;
  --ink3:#a3d7f6;
  --border:#2ea6e6;
  --text:#052a44;
  --muted:#2c6f9c;
  --muted2:#194b6e;
  --green-light:rgba(43,182,115,.14);
  --red-light:rgba(229,72,77,.12);
  --chalk:#c1570e;
  --chalk-dark:#a1490c;
  /* Même correctif que le thème "Doux" ci-dessus : le jaune/or par défaut est illisible sur ce fond
     bleu ciel clair, remplacé par un ambre foncé bien contrasté. */
  --gold:#9c6608;
}
body.theme-ciel ::-webkit-scrollbar-thumb{background:var(--border);}
.nbtn-icon{width:36px;height:36px;padding:0;border-radius:9px;font-size:19px;font-weight:700;line-height:1;background:var(--ink3);color:var(--text);border:1px solid var(--border);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;}
.nbtn-icon:hover{background:var(--border);}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:var(--ink);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{font-family:'Fraunces',serif;}
.mono{font-family:'JetBrains Mono',monospace;}
button,input,select,textarea{font-family:inherit;}
a{cursor:pointer;color:var(--chalk);text-decoration:none;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}

/* ===== UTILITAIRES ===== */
.view{display:none;}
.view.active{display:block;animation:fadeIn .35s ease;}
#view-niveau-selection.active{display:flex !important;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.container{max-width:1180px;margin:0 auto;padding:0 20px;}

/* ===== NAV ===== */
nav{position:sticky;top:0;z-index:100;background:rgba(13,19,38,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
/* ===== BARRE DE NAVIGATION COMPACTE =====
   Utilisée sur les espaces où le nom/l'info affichée peut être longue (enseignant, école...) :
   au lieu de laisser la ligne unique se replier en 3-4 lignes empilées sur mobile (logo, année,
   nom, bouton déconnexion chacun sur sa propre ligne — beaucoup de place perdue), on force deux
   lignes fixes : la première contient uniquement le logo et le bouton Déconnexion (toujours l'un
   en face de l'autre, jamais séparés), la seconde — plus petite — regroupe les informations
   secondaires (nom, année, bouton thème). Résultat : hauteur de bandeau nettement réduite. */
nav.nav-compact{flex-direction:column;align-items:stretch;gap:5px;padding:10px 16px;}
nav.nav-compact .nav-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
nav.nav-compact .nav-row-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
nav.nav-compact .nav-row-sub>span{font-size:12px;color:var(--muted);}
nav.nav-compact .brand-mark{width:30px;height:30px;}
nav.nav-compact .brand-name{font-size:15px;}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0;}
.brand-mark{width:38px;height:38px;border-radius:11px;background:#ffffff;border:1.5px solid #d8d8d8;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.15);padding:4px;overflow:hidden;}
.brand-mark img{width:100%;height:100%;object-fit:contain;}
.brand-name{font-family:'Fraunces',serif;font-size:18px;font-weight:700;letter-spacing:.2px;color:#eef0f6!important;}
.brand-name span{color:#c1570e!important;}
.nav-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.nbtn{padding:8px 16px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .15s;}
.action-menu-wrap{position:relative;display:inline-block;}
.action-menu-dropdown{display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--ink2);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:50;min-width:150px;overflow:hidden;}
.action-menu-dropdown.open{display:block;}
.action-menu-dropdown button{display:block;width:100%;text-align:left;padding:9px 14px;background:none;border:none;color:var(--text);font-size:12.5px;cursor:pointer;white-space:nowrap;}
.action-menu-dropdown button:hover{background:var(--ink3);}
.action-menu-dropdown button.danger{color:var(--red);}
.nbtn.out{background:transparent;border-color:var(--border);color:var(--text);}
.nbtn.out:hover{border-color:var(--chalk);}
.nbtn.pri{background:var(--chalk);color:#1a1208;font-weight:700;}
.nbtn.pri:hover{background:var(--chalk-dark);}
.nbtn.red{background:var(--red-light);color:var(--red);border-color:rgba(229,72,77,.25);}
.nbtn.red:hover{background:rgba(229,72,77,.2);}

/* ===== ÉCRAN D'ACCUEIL (CHOIX) ===== */
.welcome-wrap{min-height:88vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;}
.welcome-box{max-width:480px;width:100%;text-align:center;}
.welcome-emblem{width:84px;height:84px;border-radius:22px;background:#ffffff;border:2px solid #d8d8d8;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:10px;overflow:hidden;}
.welcome-emblem img{width:100%;height:100%;object-fit:contain;}
.welcome-box h1{font-size:30px;font-weight:700;margin-bottom:10px;line-height:1.2;}
.welcome-box .tagline{color:var(--muted);font-size:14px;margin-bottom:34px;line-height:1.6;}
.welcome-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.welcome-actions .welcome-btn{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 13px;border-radius:15px;}
.welcome-actions .welcome-btn .ico{width:38px;height:38px;border-radius:11px;font-size:18px;}
.welcome-actions .welcome-btn .label{font-size:12.5px;}
.welcome-actions .welcome-btn .sub{font-size:10px;}
/* Carte "vedette" pleine largeur, affichée en premier (façon "Inviter des amis" chez Facebook) */
.welcome-actions .welcome-btn.featured{grid-column:1/-1;flex-direction:row;align-items:center;order:-1;padding:13px 16px;}
.welcome-btn{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;border:1px solid var(--border);background:var(--ink2);cursor:pointer;transition:all .15s;text-align:left;}
.welcome-btn:hover{border-color:var(--chalk);}
.welcome-btn .ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.welcome-btn.primary .ico{background:var(--chalk);color:#1a1208;}
.welcome-btn.secondary .ico{background:var(--ink3);color:var(--chalk);}
.welcome-btn .label{font-size:13px;font-weight:600;color:var(--text);line-height:1.25;}
.welcome-btn .sub{font-size:10.5px;color:var(--muted);margin-top:1px;line-height:1.25;}
.welcome-owner-link{margin-top:26px;font-size:12px;color:var(--muted2);}

/* ===== AUTH ===== */
.auth-wrap{min-height:88vh;display:flex;align-items:center;justify-content:center;padding:30px 20px;}
.auth-box{background:var(--ink2);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px 28px;max-width:440px;width:100%;}
.auth-box h2{font-size:22px;font-weight:700;margin-bottom:6px;}
.auth-box .sub{color:var(--muted);font-size:13px;margin-bottom:24px;}
.fg{margin-bottom:15px;}
.fg label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.fg input,.fg select,.fg textarea{width:100%;background:var(--ink3);border:1px solid var(--border);color:var(--text);padding:11px 13px;border-radius:9px;font-size:14px;transition:border-color .15s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--chalk);}
.fg input::placeholder{color:var(--muted2);}
/* ===== SÉLECTION PAR CASES À COCHER (remplace les anciennes listes déroulantes à sélection
   multiple — matières des enseignants, classes des enseignants/éducateurs, classes des matières,
   partout sur la plateforme, y compris au primaire) ===== */
.cb-dropdown{position:relative;width:100%;}
.cb-dropdown-btn{width:100%;text-align:left;background:var(--ink3);border:1px solid var(--border);color:var(--text);padding:11px 13px;border-radius:9px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:border-color .15s;}
.cb-dropdown-btn:hover{border-color:var(--chalk);}
.cb-dropdown-btn::after{content:'▾';color:var(--muted);font-size:12px;flex:none;}
.cb-dropdown-btn.cb-empty{color:var(--muted2);}
.cb-dropdown-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--ink2);border:1px solid var(--border);border-radius:9px;max-height:230px;overflow-y:auto;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:6px;}
.cb-dropdown-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;cursor:pointer;font-size:14px;color:var(--text);}
.cb-dropdown-item:hover{background:var(--ink3);}
.cb-dropdown-item input[type="checkbox"]{width:16px;height:16px;flex:none;accent-color:var(--chalk);cursor:pointer;}
.cb-dropdown-empty{padding:10px;color:var(--muted);font-size:13px;text-align:center;}
.cb-dropdown-header{padding:9px 10px 5px;margin-top:4px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);border-top:1px solid var(--border);}
.cb-dropdown-header:first-child{margin-top:0;border-top:none;}
/* ===== SÉLECTEURS RECHERCHABLES (listes d'écoles, etc.) — un champ de saisie filtre
   instantanément les options existantes pendant que l'utilisateur tape, sans aucun appel
   réseau : la liste est déjà en mémoire (chargée une seule fois via le cache local). ===== */
.sel-rech-wrap{position:relative;width:100%;}
.sel-rech-wrap select.sel-rech-natif{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;}
.sel-rech-input{width:100%;background:var(--ink3);border:1px solid var(--border);color:var(--text);padding:11px 13px;border-radius:9px;font-size:14px;transition:border-color .15s;}
.sel-rech-input:focus{outline:none;border-color:var(--chalk);}
.sel-rech-input::placeholder{color:var(--muted2);}
.sel-rech-liste{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;background:var(--ink2);border:1px solid var(--border);border-radius:9px;max-height:230px;overflow-y:auto;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:6px;}
.sel-rech-liste.ouverte{display:block;}
.sel-rech-item{padding:9px 10px;border-radius:7px;cursor:pointer;font-size:14px;color:var(--text);}
.sel-rech-item:hover{background:var(--ink3);}
.sel-rech-item.sel-rech-item-actif{background:rgba(245,142,39,.15);color:var(--chalk);font-weight:600;}
.sel-rech-vide{padding:10px;color:var(--muted);font-size:13px;text-align:center;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.btn{display:table;width:auto;max-width:100%;margin:6px auto 0;padding:9px 20px;background:var(--chalk);color:#1a1208;border:none;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;align-self:flex-start;}
.btn.btn-flash-ok{background:var(--green) !important;color:#fff !important;}
.btn:hover{background:var(--chalk-dark);}
.btn.ghost{background:var(--ink3);color:var(--text);border:1px solid var(--border);}
.btn.ghost:hover{border-color:var(--chalk);}
.auth-link{text-align:center;margin-top:18px;font-size:13px;color:var(--muted);}
.auth-link a{font-weight:600;}
.err{background:var(--red-light);border:1px solid rgba(229,72,77,.25);color:#ff8a8d;padding:10px 13px;border-radius:9px;font-size:12.5px;margin-bottom:14px;display:none;}
.suc{background:var(--green-light);border:1px solid rgba(43,182,115,.25);color:#5fe0a3;padding:10px 13px;border-radius:9px;font-size:12.5px;margin-bottom:14px;display:none;}
.logo-upload{border:2px dashed var(--border);border-radius:11px;padding:18px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:15px;}
.logo-upload:hover{border-color:var(--chalk);}
.logo-upload img{width:64px;height:64px;border-radius:11px;object-fit:cover;margin:0 auto 8px;display:block;}
.logo-upload .ph{font-size:28px;margin-bottom:6px;}
.logo-upload p{font-size:11.5px;color:var(--muted);}
.logo-upload input{display:none;}

/* ===== PAIEMENT INSCRIPTION ÉCOLE ===== */
.pay-summary{background:var(--ink3);border:1px solid var(--border);border-radius:13px;padding:16px 18px;margin-bottom:20px;}
.pay-summary .row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;color:var(--muted);}
.pay-summary .row strong{color:var(--text);}
.pay-summary .total{border-top:1px solid var(--border);margin-top:6px;padding-top:12px;display:flex;justify-content:space-between;align-items:center;}
.pay-summary .total .amt{font-family:'Fraunces',serif;font-size:24px;font-weight:700;color:var(--chalk);}
.pay-opt{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:11px;border:1.5px solid var(--border);margin-bottom:10px;cursor:pointer;transition:all .15s;}
.pay-opt:hover{border-color:var(--muted2);}
.pay-opt.sel{border-color:var(--chalk);background:rgba(245,142,39,.06);}
.pay-ico{font-size:24px;flex-shrink:0;width:30px;text-align:center;}
.pay-info{flex:1;}
.pay-info strong{display:block;font-size:14px;}
.pay-info small{color:var(--muted);font-size:11.5px;}
.pay-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;}
.pay-opt.sel .pay-radio{border-color:var(--chalk);background:radial-gradient(circle,var(--chalk) 0 40%,transparent 42%);}
.wave-logo{width:26px;height:26px;border-radius:50%;background:#1DC8E8;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wave-logo svg{width:17px;height:17px;}
.pay-detail-box{background:var(--ink3);border:1px solid var(--border);border-radius:13px;padding:18px;text-align:center;margin-bottom:16px;}
.pay-detail-box .num{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600;color:var(--chalk);letter-spacing:1px;margin:8px 0;}
.pay-steps{font-size:12px;color:var(--muted);line-height:1.8;text-align:left;background:var(--ink);border-radius:9px;padding:12px 14px;margin-top:10px;}

/* ===== TOAST ===== */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--ink3);border:1px solid var(--border);color:var(--text);padding:13px 22px;border-radius:11px;font-size:13.5px;font-weight:600;z-index:900;transition:transform .3s ease;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:90vw;}
#toast.show{transform:translateX(-50%) translateY(0);}

/* ===== BADGES / STATUTS ===== */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;}
.badge.wait{background:rgba(245,197,66,.12);color:var(--gold);}
.badge.ok{background:var(--green-light);color:var(--green);}
.badge.no{background:var(--red-light);color:var(--red);}
/* ===== ONGLETS EN GRILLE DE CARTES — DESIGN UNIFIÉ POUR TOUS LES ESPACES (propriétaire, employé,
   école, enseignant) : icône dans un carré coloré au-dessus, libellé en dessous, carte arrondie
   avec ombre légère — même principe que le menu "☰" d'une appli professionnelle grand public.
   .owner-tab et .sb-item partagent désormais exactement les mêmes règles, afin qu'un changement
   ici s'applique uniformément partout, sans jamais pouvoir diverger d'un espace à l'autre. ===== */
#owner-sidebar-items,#school-sidebar-items{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;}
.owner-menu-full{grid-column:1/-1;}
.owner-tab,.sb-item{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;background:var(--ink3);border:1px solid var(--border);color:var(--text);padding:16px 14px;border-radius:16px;font-size:12.5px;font-weight:700;text-align:left;cursor:pointer;transition:all .15s;white-space:normal;line-height:1.3;box-shadow:0 1px 3px rgba(0,0,0,.10);}
.owner-tab .ico,.sb-item .ico{width:40px;height:40px;border-radius:12px;background:var(--ink);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.owner-tab .label,.sb-item .label{position:relative;}
.owner-tab:hover,.sb-item:hover{border-color:var(--chalk);box-shadow:0 3px 10px rgba(0,0,0,.14);transform:translateY(-1px);}
.owner-tab.active,.sb-item.active{background:var(--chalk-light);border-color:var(--chalk);color:#1a1208;}
.owner-tab.active .ico,.sb-item.active .ico{background:var(--chalk);color:#1a1208;}
/* ===== VERSION APLATIE : uniquement pour l'espace École et l'espace Propriétaire — icône et
   libellé côte à côte au lieu d'empilés, pour réduire la hauteur de chaque bouton. Cette version
   ne concerne PAS l'accueil public, ni l'espace Enseignants, ni l'espace Éducateurs, qui réutilisent
   la même classe .owner-tab mais en dehors de #owner-sidebar / #school-sidebar : ils gardent donc
   l'ancienne présentation empilée, inchangée. ===== */
#owner-sidebar .owner-tab,#school-sidebar .sb-item{flex-direction:row;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;}
#owner-sidebar .owner-tab .ico,#school-sidebar .sb-item .ico{width:30px;height:30px;border-radius:9px;font-size:15px;}
#owner-sidebar .owner-tab .label,#school-sidebar .sb-item .label{white-space:normal;line-height:1.25;}
.sb-section-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:16px 14px 6px;opacity:.7;}
.sb-section-label:first-child{padding-top:4px;}

/* ===== CARTE SCOLAIRE ===== */
/* ===== ÉTIQUETTES D'OBJET DE MESSAGE (remplacent les cases à cocher natives, rendu incohérent
   selon les appareils) — utilisées dans les formulaires de réclamation/message. ===== */
/* ===== CONVERSATION STYLE MESSAGERIE (façon Messenger) — utilisée partout où deux personnes
   échangent des messages sur le site. ===== */
.msg-conteneur{background:#fff;border-radius:14px;padding:14px 12px;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;}
.msg-conteneur-libre{background:transparent;padding:2px 0;overflow:visible;}
.msg-conteneur-libre .msg-ligne.msg-autre .msg-bulle{background:#ffffff;color:#0f1115;}
.msg-conteneur-libre .msg-heure{margin:2px 34px 10px;}
.msg-conteneur-libre .msg-ligne.msg-moi + .msg-heure{margin:2px 8px 10px 34px;}
.tmsg-ticket{padding:14px 2px 20px;}
.msg-ligne{display:flex;align-items:flex-end;gap:7px;margin-bottom:3px;}
.msg-ligne.msg-moi{flex-direction:row-reverse;}
.msg-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#f58e27,#e5484d);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;}
.msg-avatar.msg-avatar-vide{visibility:hidden;}
.msg-bulle{max-width:74%;padding:9px 14px;font-size:13.5px;line-height:1.4;word-break:break-word;}
.msg-ligne.msg-moi .msg-bulle{background:#0084ff;color:#fff;border-radius:18px 18px 4px 18px;}
.msg-ligne.msg-autre .msg-bulle{background:#eef0f3;color:#050505;border-radius:18px 18px 18px 4px;}
.msg-heure{font-size:10px;color:var(--muted);margin:2px 34px 8px;}
.msg-ligne.msg-moi + .msg-heure{text-align:right;margin:2px 8px 8px 34px;}
.msg-vu{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin:-4px 6px 10px 0;animation:msgVuApparait .25s ease;}
.msg-ligne.msg-moi{position:relative;}
.ed-envoi-cercle{position:absolute;right:2px;bottom:-7px;width:15px;height:15px;border-radius:50%;background:#0084ff;color:#fff;font-size:9px;font-weight:800;display:none;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--ink2,#fff);animation:msgVuApparait .25s ease;}
.ed-envoi-cercle.visible{display:flex;}
.ed-envoi-cercle[data-etat="cours"]{background:#9db3c9;}
.ed-envoi-cercle[data-etat="echec"]{background:#e5484d;cursor:help;}
.msg-vu-avatar{width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,#f58e27,#e5484d);color:#fff;font-size:8.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
@keyframes msgVuApparait{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.msg-barre-saisie{display:flex;align-items:center;gap:6px;background:var(--ink3);border-radius:24px;padding:6px 8px 6px 14px;border:1px solid var(--border);}
.msg-barre-saisie textarea{flex:1;resize:none;border:none;background:transparent;padding:6px 2px;font-size:13.5px;max-height:80px;color:var(--text,#e8eaf6);}
.msg-barre-saisie textarea:focus{outline:none;box-shadow:none;}
.msg-icone-ronde{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;font-size:17px;flex-shrink:0;transition:background .15s;}
.msg-icone-ronde:hover{background:rgba(0,0,0,.06);}
.msg-icone-envoyer{background:#0084ff;color:#fff;}
.msg-icone-envoyer:hover{background:#0073e0;}

.etiquette-objet-msg{display:flex;align-items:center;gap:12px;padding:13px 15px;background:linear-gradient(135deg,rgba(245,142,39,.04),rgba(245,142,39,.01));border:1.5px solid rgba(245,142,39,.25);border-radius:13px;cursor:pointer;font-size:13px;transition:all .15s;}
.etiquette-objet-msg:active{transform:scale(.97);}
.etiquette-objet-msg-coche{width:22px;height:22px;border-radius:50%;border:2px solid rgba(245,142,39,.5);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:transparent;transition:all .15s;background:var(--ink2);}
.etiquette-objet-msg.selectionnee{background:linear-gradient(135deg,rgba(245,142,39,.18),rgba(245,142,39,.08));border-color:var(--chalk);box-shadow:0 2px 10px rgba(245,142,39,.15);}
.etiquette-objet-msg.selectionnee .etiquette-objet-msg-coche{background:var(--chalk);border-color:var(--chalk);color:#1a0a00;}

.carte-scolaire{width:100%;aspect-ratio:1.586;background:linear-gradient(135deg,var(--ink2),var(--ink3));border:1px solid var(--border);border-radius:13px;padding:16px;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.carte-scolaire::before{content:'';position:absolute;top:-30%;right:-20%;width:60%;height:160%;background:linear-gradient(135deg,rgba(245,142,39,.12),transparent 60%);}
.carte-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;position:relative;z-index:1;}
.carte-head .logo{width:26px;height:26px;border-radius:7px;background:var(--chalk);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;object-fit:cover;}
.carte-head .ecole-nom{font-size:10px;font-weight:700;color:var(--text);line-height:1.2;}
.carte-head .ecole-sub{font-size:7.5px;color:var(--muted);}
.carte-body{display:flex;gap:12px;flex:1;position:relative;z-index:1;}
.carte-photo{width:62px;height:74px;border-radius:6px;background:var(--ink);border:1px solid var(--border);flex-shrink:0;object-fit:cover;}
.carte-infos{flex:1;min-width:0;}
.carte-infos .nom-eleve{font-family:'Fraunces',serif;font-size:13px;font-weight:700;line-height:1.2;}
.carte-infos .ligne{font-size:9.5px;color:var(--muted);margin-top:4px;}
.carte-infos .ligne strong{color:var(--text);}
.carte-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:8px;position:relative;z-index:1;}
.carte-code{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--chalk);}
.carte-actions{margin-top:10px;display:flex;gap:8px;}
.carte-actions button{flex:1;padding:8px;border-radius:8px;font-size:11.5px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--ink3);color:var(--text);}
.carte-actions button:hover{border-color:var(--chalk);}
@media print{
  body *{visibility:hidden;}
  .print-zone,.print-zone *{visibility:visible;}
  .print-zone{position:absolute;top:0;left:0;width:100%;}
}

/* ===== ESPACE ÉCOLE — LAYOUT ===== */
.school-layout{display:flex;height:calc(100vh - 64px);overflow:hidden;}
.school-sidebar{width:320px;flex-shrink:0;background:var(--ink2);border-right:1px solid var(--border);padding:10px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;height:100%;}
#owner-sidebar,#school-sidebar{width:320px;}
.school-main{flex:1;padding:24px 24px 60px;overflow-y:auto;height:100%;min-width:0;}
.school-module h2{font-size:21px;font-weight:700;}

/* ===== ÉCRAN D'ORDINATEUR (desktop) — au-delà de 880px, la sidebar reste fixe et permanente
   (jamais en tiroir comme sur mobile, voir @media max-width:880px). Deux problèmes signalés sur
   ordinateur : (1) avec une bonne vingtaine d'onglets dans la sidebar, plusieurs se retrouvaient
   sous la ligne de flottaison sans aucun indice visuel qu'il fallait défiler pour les voir — on
   ajoute donc un dégradé d'ombre en haut/bas (technique CSS pure basée sur deux paires de
   dégradés, l'une qui défile avec le contenu et l'autre qui reste fixe — visible seulement
   quand il reste du contenu à faire défiler dans cette direction) + une barre de défilement plus
   visible ; (2) sur un grand écran, le contenu principal s'étirait bord à bord sans aucune limite,
   ce qui n'a pas un rendu professionnel (lignes de texte trop longues, tableaux qui flottent) —
   on plafonne donc sa largeur effective au-delà d'une certaine taille d'écran, en la recentrant. */
@media (min-width:881px){
  #owner-sidebar,#school-sidebar{
    background-color:var(--ink2);
    background-image:
      linear-gradient(var(--ink2) 30%, rgba(0,0,0,0)),
      linear-gradient(rgba(0,0,0,0), var(--ink2) 70%),
      linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,0)),
      linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.32));
    background-repeat:no-repeat;
    background-size:100% 42px,100% 42px,100% 14px,100% 14px;
    background-position:0 0,0 100%,0 0,0 100%;
    background-attachment:local,local,scroll,scroll;
  }
  #owner-sidebar::-webkit-scrollbar,#school-sidebar::-webkit-scrollbar{width:7px;}
  #owner-sidebar::-webkit-scrollbar-thumb,#school-sidebar::-webkit-scrollbar-thumb{background:var(--chalk);opacity:.55;border-radius:10px;}
  /* Contenu principal recentré et plafonné sur grand écran, plutôt que de s'étirer bord à bord */
  .school-main{padding-left:max(24px,calc((100% - 1180px)/2));padding-right:max(24px,calc((100% - 1180px)/2));}
}
/* Écran très large : sidebar un peu plus spacieuse et passage à 3 colonnes pour réduire d'autant
   le besoin de défiler (25+ onglets tiennent alors en beaucoup moins de lignes). */
@media (min-width:1500px){
  #owner-sidebar,#school-sidebar{width:360px;}
  #owner-sidebar-items,#school-sidebar-items{grid-template-columns:1fr 1fr 1fr;}
  .school-main{padding-left:max(24px,calc((100% - 1320px)/2));padding-right:max(24px,calc((100% - 1320px)/2));}
}
.mod-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.btn-sm{background:var(--chalk);color:#1a1208;border:none;padding:8px 15px;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;align-self:flex-start;}
.btn-sm:hover{background:var(--chalk-dark);}
.btn-sm.ghost{background:var(--ink3);color:var(--text);border:1px solid var(--border);}
.btn-sm.ghost:hover{border-color:var(--chalk);}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;}
.stat-card{background:var(--ink2);border:1px solid var(--border);border-radius:13px;padding:16px;}
.stat-label{font-size:12px;color:var(--muted);margin-bottom:6px;}
.stat-value{font-family:'Fraunces',serif;font-size:26px;font-weight:700;}

.table-card{background:var(--ink2);border:1px solid var(--border);border-radius:13px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin-top:16px;}
.dtable{width:100%;border-collapse:collapse;font-size:13px;}
.dtable thead tr{background:var(--ink3);text-align:left;}
.dtable th{padding:11px 14px;color:var(--muted);font-weight:600;}
.dtable td{padding:11px 14px;border-top:1px solid var(--border);}
.dtable input[type=number],.dtable input[type=text]{width:80px;background:var(--ink3);border:1px solid var(--border);color:var(--text);padding:7px 9px;border-radius:7px;font-size:13px;}
/* Note saisie au-dessus du barème (ou négative) — signalée en rouge, tant que ce n'est pas corrigé
   l'enregistrement est bloqué (voir validerNotesGrilleBareme). */
.note-input-erreur{border:2px solid var(--red) !important;background:rgba(229,72,77,.1) !important;box-shadow:0 0 0 1px rgba(229,72,77,.3);}
.empty-state{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px;}
.act-btn{background:var(--ink3);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:7px;font-size:11.5px;cursor:pointer;margin-right:4px;}

/* ===== MODE FENÊTRE ISOLÉE =====
   Quand une rubrique publique (reçu d'inscription, résultats, etc.) est ouverte via un lien
   dédié (?fenetre=...), elle occupe tout l'onglet — comme une page à part — au lieu de
   s'afficher comme un tiroir par-dessus le reste du site. */
/* BUG CORRIGÉ : en fenêtre isolée, le tiroir (#menu-public-overlay / -sec-overlay) est en
   position:fixed;inset:0 (voir son style de base dans le HTML) — un élément fixe ne grandit
   jamais avec son contenu et ne fait pas défiler la page derrière lui. Dès qu'un contenu dépasse
   la hauteur de l'écran (ex: résultat complet d'un élève au primaire), il devenait invisible et
   impossible à atteindre : aucun défilement possible nulle part. Fix : le conteneur fixe devient
   lui-même la zone de défilement. */
body.mode-fenetre-isolee #menu-public-overlay,
body.mode-fenetre-isolee #menu-public-sec-overlay{background:var(--ink);min-height:100vh;min-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
body.mode-fenetre-isolee #menu-public-overlay>div,
body.mode-fenetre-isolee #menu-public-sec-overlay>div{width:100% !important;max-width:none !important;margin:0 !important;box-shadow:none !important;height:auto !important;min-height:100vh;min-height:100dvh;}
@media (min-width:900px){
  body.mode-fenetre-isolee #menu-public-overlay>div,
  body.mode-fenetre-isolee #menu-public-sec-overlay>div{padding-left:8%;padding-right:8%;}
}
body.mode-fenetre-isolee #menu-public-header-row,
body.mode-fenetre-isolee #menu-public-sec-header-row,
body.mode-fenetre-isolee #menu-public-niveau-label,
body.mode-fenetre-isolee #menu-public-sec-niveau-label,
body.mode-fenetre-isolee #menu-public-admin-block,
body.mode-fenetre-isolee #menu-public-sec-admin-block{display:none !important;}
/* Un seul bouton "Retour" en fenêtre isolée : celui de la barre injectée en haut (qui ferme
   toute la fenêtre). On masque donc le bouton retour propre à chaque rubrique, qui n'a plus
   d'utilité ici (il servait à revenir au menu de choix dans le tiroir normal). */
body.mode-fenetre-isolee button[onclick="fermerSectionMenuPublic()"],
body.mode-fenetre-isolee button[onclick="fermerSectionMenuPublicSec()"],
body.mode-fenetre-isolee button[onclick="fermerAuthentificationEtNettoyer()"]{display:none !important;}
.fenetre-isolee-barre{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.fenetre-isolee-barre .act-btn{font-size:12.5px;padding:7px 13px;}
.act-btn:hover{border-color:var(--chalk);}
.act-btn.del{color:var(--red);}
.form-card{background:var(--ink2);border:1px solid var(--border);border-radius:13px;padding:20px;}
.appel-toggle{display:flex;gap:6px;}
.appel-toggle button{padding:6px 13px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--ink3);color:var(--muted);}
.appel-toggle button.sel-present{background:var(--green-light);color:var(--green);border-color:rgba(43,182,115,.3);}
.appel-toggle button.sel-absent{background:var(--red-light);color:var(--red);border-color:rgba(229,72,77,.3);}

/* IMPORTANT : ce bloc "mobile" (tiroir replié, onglets en 2 colonnes compactes) ne doit se
   déclencher QUE sur un véritable écran tactile étroit (téléphone/tablette) — jamais sur un
   ordinateur, même quand l'utilisateur zoome au clavier/souris (Ctrl +), ce qui réduit la
   largeur "CSS" disponible et pouvait auparavant faire basculer un PC dans cette mise en page
   mobile. (hover:none) and (pointer:coarse) identifie un appareil piloté au doigt (pas de
   survol possible, pointeur imprécis) — un PC avec souris/trackpad, quel que soit son zoom,
   ne correspond jamais à cette condition et garde donc sa mise en page "ordinateur" fixe. */
@media (max-width:880px) and (hover:none) and (pointer:coarse){
  /* Sur mobile, on abandonne le système fragile "hauteur fixe 100vh + overflow:hidden imbriqués"
     qui pouvait pousser le contenu réel de l'onglet tout en bas de la page, obligeant à défiler
     jusqu'au pied pour le voir. À la place : la page défile normalement de haut en bas, et les
     menus latéraux (propriétaire et employé) sont de vrais tiroirs repliés par défaut (display:none
     sur leurs éléments, donc hauteur zéro garantie quand fermés — pas une astuce de hauteur max qui
     peut se comporter différemment selon les navigateurs mobiles). */
  .school-layout{flex-direction:column;height:auto;min-height:calc(100vh - 64px);overflow:visible;}
  .school-main{overflow-y:visible;height:auto;}

  #owner-sidebar,#school-sidebar{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    flex-direction:column !important;
    overflow-y:visible !important;
    border-right:none;
    border-bottom:1px solid var(--border);
    height:auto;
  }
  #owner-sidebar-items,#school-sidebar-items{display:none;}
  #owner-sidebar.open #owner-sidebar-items,
  #school-sidebar.open #school-sidebar-items{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:70vh;overflow-y:auto;
    /* Même repère visuel de défilement que sur ordinateur (voir @media min-width:881px) — un
       tiroir avec beaucoup d'onglets ne doit jamais donner l'impression d'être coupé/incomplet. */
    background-color:var(--ink2);
    background-image:
      linear-gradient(var(--ink2) 30%, rgba(0,0,0,0)),
      linear-gradient(rgba(0,0,0,0), var(--ink2) 70%),
      linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,0)),
      linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.32));
    background-repeat:no-repeat;
    background-size:100% 30px,100% 30px,100% 12px,100% 12px;
    background-position:0 0,0 100%,0 0,0 100%;
    background-attachment:local,local,scroll,scroll;
  }
  #owner-sidebar-toggle,#school-sidebar-toggle{display:flex !important;}
  #employe-tabs-menu,#teacher-tabs-menu,#ptn-tabs-menu{grid-template-columns:1fr 1fr !important;}
  /* Correctif : tant que le tiroir de menu (propriétaire, employé ou école) est ouvert pour choisir
     un onglet, on masque entièrement le contenu de l'onglet encore actif juste en dessous. Sans
     cela, en défilant à l'intérieur du tiroir ouvert, on retombait sur l'aperçu de l'onglet quitté
     (ex: "Statistiques globales") qui restait affiché derrière le menu — donnant l'impression
     trompeuse qu'on était encore dedans. Le contenu réapparaît normalement dès qu'un nouvel onglet
     est choisi (le tiroir se referme alors automatiquement via switchOwnerTab/switchEmployeTab/
     switchSchoolModule).*/
  #owner-sidebar.open ~ #owner-main{display:none !important;}
  #school-sidebar.open ~ #school-main-container{display:none !important;}

  .school-main{padding:16px 12px 50px;}
  /* Cartes un peu plus compactes sur mobile pour laisser la place à 2 colonnes sans déborder */
  #owner-sidebar .owner-tab,#school-sidebar .sb-item{font-size:12px;padding:9px 10px;}

  /* Tableaux (ex: Classes, Élèves...) : sur mobile ils sont souvent plus larges que l'écran.
     On force une largeur minimale au tableau plutôt que de laisser les colonnes s'écraser les
     unes sur les autres — .table-card (overflow-x:auto ci-dessus) devient alors scrollable
     horizontalement, et un dégradé au bord droit indique qu'il y a plus de contenu à glisser. */
  .dtable{min-width:640px;}
  .table-card{position:relative;}
  /* Petit indice textuel au-dessus du tableau : sans lui, rien ne signale visuellement qu'on
     peut glisser le tableau vers la gauche pour atteindre les colonnes masquées (ex: Action). */
  .table-card::before{
    content:'👉 Glissez le tableau vers la gauche pour voir toutes les colonnes';
    display:block;font-size:11px;color:var(--muted);padding:8px 12px 0;
  }
  /* Tableaux "compacts" (Élève + une seule colonne de saisie : notes, conduite) : ils tiennent
     naturellement dans la largeur du téléphone, donc on annule ici la largeur minimale forcée
     et l'indice de défilement ci-dessus — sinon le nom de l'élève et le champ de saisie se
     retrouvaient artificiellement éloignés l'un de l'autre, obligeant à glisser pour rien. */
  .dtable-compact{min-width:0 !important;width:100%;}
  .table-card-compact::before{content:none;}
}

/* ===== BOUTON PÉRIODE ABSENCES SÉLECTIONNÉ ===== */
@keyframes annee-glow-blue{
  0%,100%{text-shadow:0 0 8px rgba(100,180,255,.9),0 0 20px rgba(100,180,255,.5);}
  50%{text-shadow:0 0 16px rgba(100,180,255,1),0 0 35px rgba(100,180,255,.8);}
}
.abs-periode-actif{
  background:var(--gold) !important;
  color:#111 !important;
  border-color:var(--gold) !important;
  font-weight:700 !important;
  box-shadow:0 2px 10px rgba(245,197,66,.5) !important;
}
/* ===== FIN BOUTON PÉRIODE ===== */

/* ===== SPINNER BOUTON ENREGISTREMENT ===== */
@keyframes spinner-turn{to{transform:rotate(360deg);}}
.btn-spinner{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  pointer-events:none;opacity:0.85;
}
.btn-spinner::before{
  content:'';
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spinner-turn .7s linear infinite;
  flex-shrink:0;
}
/* ===== FIN SPINNER ===== */
@keyframes spin{to{transform:rotate(360deg);}}
.btn-loading{opacity:.7;pointer-events:none;position:relative;}
.btn-loading::after{
  content:'';
  display:inline-block;
  width:14px;height:14px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin-left:8px;
  vertical-align:middle;
}
/* ===== FIN BOUTON EN COURS ===== */
@keyframes cloture-btn-glow{
  0%,100%{box-shadow:0 0 8px 2px rgba(229,72,77,.8),0 0 20px 6px rgba(229,72,77,.3);}
  50%    {box-shadow:0 0 18px 6px rgba(229,72,77,1),0 0 40px 14px rgba(229,72,77,.5);}
}
@keyframes cloture-border-pulse{
  0%,100%{border-color:rgba(229,72,77,.5);}
  50%    {border-color:rgba(229,72,77,1);}
}
.btn-cloture-actif{
  background:rgba(229,72,77,.12) !important;
  animation:cloture-btn-glow 1.4s ease-in-out infinite, cloture-border-pulse 1.4s ease-in-out infinite !important;
}
/* ===== FIN CLÔTURE TRIMESTRE ===== */
@keyframes trim-btn-glow{
  0%,100%{box-shadow:0 0 8px 2px rgba(43,182,115,.8),0 0 20px 6px rgba(43,182,115,.3);}
  50%    {box-shadow:0 0 18px 6px rgba(43,182,115,1),0 0 40px 14px rgba(43,182,115,.5);}
}
@keyframes trim-border-pulse{
  0%,100%{border-color:rgba(43,182,115,.5);}
  50%    {border-color:rgba(43,182,115,1);}
}
.btn-alerte-actif{
  background:rgba(43,182,115,.12) !important;
  animation:trim-btn-glow 1.4s ease-in-out infinite, trim-border-pulse 1.4s ease-in-out infinite !important;
}

/* ===== NOTIFICATION ENSEIGNANT ===== */
@keyframes notif-border-glow{
  0%  {box-shadow:0 0 15px 5px rgba(245,197,66,.9),inset 0 0 30px rgba(245,197,66,.05);}
  25% {box-shadow:0 0 25px 10px rgba(245,142,39,.8),inset 0 0 40px rgba(245,142,39,.08);}
  50% {box-shadow:0 0 35px 15px rgba(255,80,80,.7),inset 0 0 50px rgba(255,80,80,.06);}
  75% {box-shadow:0 0 25px 10px rgba(100,180,255,.8),inset 0 0 40px rgba(100,180,255,.06);}
  100%{box-shadow:0 0 15px 5px rgba(245,197,66,.9),inset 0 0 30px rgba(245,197,66,.05);}
}
@keyframes notif-border-color{
  0%  {border-color:#f5c542;}
  25% {border-color:#f58e27;}
  50% {border-color:#ff5050;}
  75% {border-color:#64b4ff;}
  100%{border-color:#f5c542;}
}
#notif-trimestre-box{
  background:var(--ink2);
  border:3px solid #f5c542;
  animation:notif-border-glow 2s ease-in-out infinite, notif-border-color 2s linear infinite;
}
/* ===== FIN NOTIFICATION ENSEIGNANT ===== */

/* Date du jour sur l'onglet Appel — colorée, clignotante : impossible à manquer, et
   impossible à modifier (l'appel se fait toujours à la date du jour, jamais une date passée). */
@keyframes appel-date-glow{
  0%  {box-shadow:0 0 8px 3px rgba(229,72,77,.85);border-color:#e5484d;}
  50% {box-shadow:0 0 16px 7px rgba(245,142,39,.9);border-color:#f58e27;}
  100%{box-shadow:0 0 8px 3px rgba(229,72,77,.85);border-color:#e5484d;}
}
@keyframes appel-date-couleur{
  0%  {color:#e5484d;}
  50% {color:#f58e27;}
  100%{color:#e5484d;}
}
.appel-date-badge{
  display:block;width:100%;text-align:center;box-sizing:border-box;
  font-weight:800;font-size:14px;letter-spacing:.2px;line-height:1.3;
  padding:9px 10px;border-radius:11px;border:2px solid #e5484d;
  background:rgba(229,72,77,.08);text-transform:capitalize;
  animation:appel-date-glow 1.8s ease-in-out infinite, appel-date-couleur 1.8s ease-in-out infinite;
}
.appel-date-souscription{
  display:block;text-align:center;font-size:11px;font-weight:600;color:var(--muted);margin-top:4px;
}

/* Même badge de date, mais aux couleurs bleu/teal — utilisé dans les onglets de SAISIE (notes
   enseignant, conduite éducateur), pour rester visuellement distinct du rouge/orange de l'Appel
   tout en gardant le même repère "date automatique du jour" sous les yeux de l'enseignant/
   éducateur à chaque saisie. */
@keyframes notes-date-glow{
  0%  {box-shadow:0 0 8px 3px rgba(43,130,182,.85);border-color:#2b82b6;}
  50% {box-shadow:0 0 16px 7px rgba(43,182,150,.9);border-color:#2bb696;}
  100%{box-shadow:0 0 8px 3px rgba(43,130,182,.85);border-color:#2b82b6;}
}
@keyframes notes-date-couleur{
  0%  {color:#2b82b6;}
  50% {color:#2bb696;}
  100%{color:#2b82b6;}
}
.notes-date-badge{
  display:block;width:100%;text-align:center;box-sizing:border-box;
  font-weight:800;font-size:14px;letter-spacing:.2px;line-height:1.3;
  padding:9px 10px;border-radius:11px;border:2px solid #2b82b6;
  background:rgba(43,130,182,.08);text-transform:capitalize;margin-bottom:14px;
  animation:notes-date-glow 1.8s ease-in-out infinite, notes-date-couleur 1.8s ease-in-out infinite;
}

/* Halo pulsant autour du bouton Annonces */
@keyframes annonce-pulse{
  0%  {box-shadow:0 0 0 0 rgba(245,197,66,.9), 0 0 0 0 rgba(245,142,39,.6);}
  40% {box-shadow:0 0 18px 8px rgba(245,197,66,.5), 0 0 32px 16px rgba(245,142,39,.25);}
  70% {box-shadow:0 0 24px 14px rgba(245,197,66,.2), 0 0 48px 24px rgba(245,142,39,.08);}
  100%{box-shadow:0 0 0 0 rgba(245,197,66,0), 0 0 0 0 rgba(245,142,39,0);}
}
@keyframes annonce-border{
  0%,100%{border-color:rgba(245,197,66,.3);}
  50%    {border-color:rgba(245,197,66,1);}
}
@keyframes annonce-shine{
  0%  {background-position:-200% center;}
  100%{background-position:200% center;}
}

.btn-annonce-active{
  position:relative;
  animation:annonce-pulse 1.6s ease-out infinite, annonce-border 1.6s ease-in-out infinite !important;
  border:2px solid rgba(245,197,66,.8) !important;
  overflow:hidden;
}
.btn-annonce-active::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,220,80,.35) 50%,transparent 70%);
  background-size:200% 100%;
  animation:annonce-shine 1.8s linear infinite;
  pointer-events:none;
  border-radius:inherit;
}
.btn-annonce-active::after{
  content:'🔔';
  position:absolute;
  top:-6px;right:-6px;
  font-size:16px;
  animation:annonce-pulse 1s ease infinite;
}

/* Badge NOUVEAU clignotant */
@keyframes badge-blink{
  0%,100%{opacity:1;transform:scale(1);}
  50%    {opacity:.6;transform:scale(1.15);}
}
.badge-new{
  display:inline-block;
  background:linear-gradient(135deg,#f5c542,#f58e27);
  color:#1a0a00;
  font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:20px;
  margin-left:6px;vertical-align:middle;
  animation:badge-blink 1s ease-in-out infinite;
  box-shadow:0 0 8px rgba(245,197,66,.8);
  letter-spacing:.3px;
}

/* Cadre publicitaire — effet flash multicolore */
@keyframes pub-glow{
  0%  {box-shadow:0 0 10px 3px rgba(245,197,66,.8), inset 0 0 20px rgba(245,197,66,.05);}
  25% {box-shadow:0 0 22px 8px rgba(43,182,115,.7), inset 0 0 30px rgba(43,182,115,.05);}
  50% {box-shadow:0 0 28px 12px rgba(245,142,39,.9), inset 0 0 40px rgba(245,142,39,.08);}
  75% {box-shadow:0 0 22px 8px rgba(100,160,255,.7), inset 0 0 30px rgba(100,160,255,.05);}
  100%{box-shadow:0 0 10px 3px rgba(245,197,66,.8), inset 0 0 20px rgba(245,197,66,.05);}
}
@keyframes pub-border-rotate{
  0%  {border-color:#f5c542;}
  25% {border-color:#2bb673;}
  50% {border-color:#f58e27;}
  75% {border-color:#64a0ff;}
  100%{border-color:#f5c542;}
}
@keyframes pub-shine{
  0%  {background-position:-300% center;}
  100%{background-position:300% center;}
}

.pub-glow-frame{
  border:3px solid #f5c542 !important;
  border-radius:14px;
  box-shadow:0 0 18px 4px rgba(245,197,66,.5);
}

/* Étoiles scintillantes autour de la pub */
@keyframes star-twinkle{
  0%,100%{opacity:0;transform:scale(.5);}
  50%    {opacity:1;transform:scale(1.3);}
}
.pub-star{
  position:absolute;font-size:14px;
  animation:star-twinkle 1.2s ease-in-out infinite;
  pointer-events:none;z-index:2;
}

/* ===== FIN EFFETS LUMINEUX ===== */

/* ===== EFFET LUMINEUX MESSAGES NON LUS ===== */
@keyframes msg-glow{
  0%,100%{box-shadow:0 0 6px 2px rgba(245,197,66,.9),0 0 16px 5px rgba(245,142,39,.4);}
  50%    {box-shadow:0 0 14px 5px rgba(245,197,66,1),0 0 30px 10px rgba(245,142,39,.7);}
}
@keyframes msg-border-pulse{
  0%,100%{border-color:rgba(245,197,66,.6);}
  50%    {border-color:rgba(245,197,66,1);}
}
.msg-non-lu-glow{
  animation:msg-glow 1.2s ease-in-out infinite,msg-border-pulse 1.2s ease-in-out infinite !important;
  border:2px solid rgba(245,197,66,.8) !important;
  border-radius:11px;
}

/* ===== EFFET LUMINEUX RÉSULTATS PUBLIÉS (menu public) ===== */
@keyframes result-glow{
  0%  {box-shadow:0 0 10px 3px rgba(100,180,255,.9),0 0 25px 8px rgba(43,182,115,.4);}
  33% {box-shadow:0 0 18px 6px rgba(245,197,66,.9),0 0 35px 12px rgba(245,142,39,.5);}
  66% {box-shadow:0 0 18px 6px rgba(100,180,255,.9),0 0 35px 12px rgba(43,182,115,.5);}
  100%{box-shadow:0 0 10px 3px rgba(100,180,255,.9),0 0 25px 8px rgba(43,182,115,.4);}
}
@keyframes result-border{
  0%  {border-color:#64b4ff;}
  33% {border-color:#f5c542;}
  66% {border-color:#2bb673;}
  100%{border-color:#64b4ff;}
}
@keyframes result-shine{
  0%  {background-position:-300% center;}
  100%{background-position:300% center;}
}
.btn-result-publie{
  border:2px solid #64b4ff !important;
  position:relative;overflow:hidden;
  animation:result-glow 2s ease-in-out infinite,result-border 2s linear infinite !important;
}
.btn-result-publie::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 25%,rgba(100,200,255,.2) 45%,rgba(255,255,255,.15) 50%,rgba(100,200,255,.2) 55%,transparent 75%);
  background-size:300% 100%;
  animation:result-shine 2s linear infinite;
  pointer-events:none;border-radius:inherit;
}
/* La vidéo publicitaire de l'accueil (primaire et secondaire) garde le contour lumineux animé
   (result-glow/result-border, autour du cadre, sans gêner la lecture), mais PAS le voile lumineux
   qui balayait par-dessus l'image elle-même — il rendait la vidéo difficile à suivre. */
#zone-pub-accueil.btn-result-publie::before,
#zone-pub-accueil-secondaire.btn-result-publie::before{
  content:none;
}
/* ===== FIN EFFETS MESSAGERIE & RÉSULTATS ===== */
details summary::-webkit-details-marker{display:none;}
details summary::before{content:'▶ ';font-size:11px;color:var(--chalk);transition:transform .2s;}
details[open] summary::before{content:'▼ ';}
details summary:hover{background:rgba(245,142,39,.05);}

/* ===== RESPONSIVE ===== */
@media (max-width:640px){
  .frow{grid-template-columns:1fr;}
  .auth-box{padding:24px 20px;}
  .welcome-box h1{font-size:25px;}
  #menu-public-liste{grid-template-columns:1fr !important;}
  /* CORRECTIF (30/08/2026) : sur la config de l'emploi du temps, les paires de champs (Début/Fin
     des cours, Récréation début/durée, Pause déjeuner début/reprise) doivent rester CÔTE À CÔTE
     même sur mobile — la règle générale ci-dessus (.frow en 1 colonne) les empilait, rendant la
     page trop longue. Priorité à l'ID (plus spécifique que .frow seul) pour ne changer QUE cette
     page précise, sans toucher aux formulaires du reste du site. */
  #edt-sous-horaires .frow{grid-template-columns:1fr 1fr;gap:8px;}
  #edt-sous-horaires .frow .fg label{font-size:11px;}
}
/* Titre grand et gras en haut de chaque onglet */
.owner-tab-content>h2,.owner-tab-content>.tab-titre{
  font-size:22px !important;font-weight:800 !important;
  margin:0 0 16px 0 !important;padding-bottom:12px;
  border-bottom:2px solid var(--border);letter-spacing:.3px;
}
/* Bouton partage lien */
.btn-share-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--ink2);color:var(--muted);font-size:12px;cursor:pointer;
}
.btn-share-link:hover{border-color:var(--gold);color:var(--gold);}

/* ===== DIAPORAMA PUBLICITAIRE ACCUEIL — transitions professionnelles variées (17/08/2026) =====
   Chaque nouvelle image entre avec l'une de ces 4 animations, choisie au hasard à chaque
   changement pour un rendu vivant, jamais répétitif à l'identique deux fois de suite. */
@keyframes pubDiapoFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes pubDiapoSlideLeft{from{opacity:0;transform:translateX(5%);}to{opacity:1;transform:translateX(0);}}
@keyframes pubDiapoSlideRight{from{opacity:0;transform:translateX(-5%);}to{opacity:1;transform:translateX(0);}}
@keyframes pubDiapoZoomIn{from{opacity:0;transform:scale(1.08);}to{opacity:1;transform:scale(1);}}
.pub-diapo-fade{animation:pubDiapoFadeIn .9s cubic-bezier(.4,0,.2,1) both;}
.pub-diapo-slide-left{animation:pubDiapoSlideLeft .9s cubic-bezier(.4,0,.2,1) both;}
.pub-diapo-slide-right{animation:pubDiapoSlideRight .9s cubic-bezier(.4,0,.2,1) both;}
.pub-diapo-zoom{animation:pubDiapoZoomIn 1s cubic-bezier(.4,0,.2,1) both;}
/* ===== FIN DIAPORAMA PUBLICITAIRE ACCUEIL ===== */

/* ===== EFFECTIF PLATEFORME — PIED DE PAGE ACCUEIL (19/08/2026, revu 20/08/2026) =====
   Bloc affiché juste sous "Mentions légales · Confidentialité", au pied de l'accueil primaire et
   de l'accueil secondaire : élèves + écoles + visiteurs de la plateforme. Les 3 cartes doivent
   TOUJOURS rester côte à côte, même sur petit écran — jamais l'une sous l'autre (demande du
   propriétaire, 20/08/2026) : on utilise donc 3 colonnes de largeur égale (pas de flex-wrap) plutôt
   qu'un flex à largeur minimale, qui provoquait un retour à la ligne sur mobile. */
.stats-plateforme-titre{
  text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.3px;
  color:var(--muted2);margin:18px 0 8px;text-transform:uppercase;
}
.stats-badge-anciennete{
  display:block;text-align:center;margin:20px auto 0;max-width:460px;
  font-size:12px;font-weight:700;color:var(--gold);
  padding:7px 14px;border-radius:999px;border:1.5px solid rgba(245,197,66,.4);
  background:linear-gradient(135deg,rgba(245,197,66,.1),rgba(245,142,39,.03));
}
.stats-plateforme{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr; /* toujours en une seule rangée, quel que soit le nombre de cartes — jamais l'une sous l'autre */
  gap:6px;margin:0 auto 4px;max-width:460px;
}
.stats-plateforme-carte{
  min-width:0; /* empêche le contenu d'imposer une largeur > à la colonne et de forcer le retour à la ligne */
  padding:9px 4px;border-radius:var(--r-md);
  border:1.5px solid var(--border);
  background:linear-gradient(160deg,rgba(245,197,66,.07),rgba(245,142,39,.02));
  text-align:center;
}
.stats-plateforme-nombre{
  font-size:19px;font-weight:800;line-height:1.15;letter-spacing:.2px;
  background:linear-gradient(90deg,var(--chalk-dark) 0%,var(--gold) 25%,#fff6d8 50%,var(--gold) 75%,var(--chalk-dark) 100%);
  background-size:300% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);
  animation:statsNombreBrille 3.2s linear infinite;
}
.stats-plateforme-label{
  margin-top:2px;font-size:9.5px;font-weight:600;color:var(--muted);letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (min-width:420px){
  .stats-plateforme-nombre{font-size:24px;}
  .stats-plateforme-label{font-size:11px;}
  .stats-plateforme-carte{padding:13px 8px;}
}
/* ===== BANDE ÉCOLES PARTENAIRES (20/08/2026) =====
   Défilement horizontal (comme les logos "opérateurs partenaires" qu'on voit sur les sites de
   paiement) — chaque école partenaire = son logo (ou son initiale si pas de logo/logo trop lourd)
   + son nom en dessous. Rendu en JS, voir activerBloc() dans index.js. */
.stats-partenaires-wrap{max-width:520px;margin:4px auto 0;}
.stats-partenaires-souslegende{
  text-align:center;font-size:10.5px;color:var(--muted);margin:-4px auto 8px;
  max-width:340px;line-height:1.4;
}
.stats-partenaires-liste{
  display:flex;gap:12px;overflow-x:auto;padding:4px 4px 10px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.stats-partenaire-carte{
  flex:0 0 auto;width:66px;text-align:center;
}
.stats-partenaire-logo{
  width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:1.5px solid var(--border);background:var(--ink2);
  display:flex;align-items:center;justify-content:center;margin:0 auto 4px;
  font-weight:800;font-size:17px;color:var(--gold);overflow:hidden;
}
.stats-partenaire-logo img{width:100%;height:100%;object-fit:cover;}
.stats-partenaire-nom{
  font-size:9.5px;color:var(--muted);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
@keyframes statsNombreBrille{
  0%  {background-position:0% center;}
  100%{background-position:300% center;}
}
/* Apparition du bloc — un modèle choisi au hasard à chaque chargement (même principe que le
   diaporama publicitaire ci-dessus), pour ne jamais donner deux fois la même impression. */
@keyframes statsRevealFade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes statsRevealZoom{from{opacity:0;transform:scale(.85);}to{opacity:1;transform:scale(1);}}
@keyframes statsRevealLeft{from{opacity:0;transform:translateX(-24px);}to{opacity:1;transform:translateX(0);}}
@keyframes statsRevealRight{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:translateX(0);}}
@keyframes statsRevealFlip{from{opacity:0;transform:rotateX(45deg);}to{opacity:1;transform:rotateX(0);}}
.stats-reveal-fade{animation:statsRevealFade .7s cubic-bezier(.4,0,.2,1) both;}
.stats-reveal-zoom{animation:statsRevealZoom .7s cubic-bezier(.4,0,.2,1) both;}
.stats-reveal-left{animation:statsRevealLeft .7s cubic-bezier(.4,0,.2,1) both;}
.stats-reveal-right{animation:statsRevealRight .7s cubic-bezier(.4,0,.2,1) both;}
.stats-reveal-flip{animation:statsRevealFlip .7s cubic-bezier(.4,0,.2,1) both;transform-origin:center top;}
/* ===== FIN EFFECTIF PLATEFORME ===== */