/* ═══════════════════════════════════════════════════════════════════
   EduSanté – charte commune (portail, connexion, tableau de bord, admin)
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --navy:#16233f; --navy-2:#1d2d4f; --navy-3:#263a63; --navy-text:#c9d3e6;
  --bg:#f3f5fa; --card:#ffffff; --text:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --grad:linear-gradient(90deg,#6157e6 0%,#a35bd8 28%,#e0558f 55%,#fb6f6f 75%,#fdaa4b 100%);
  --teal:#14b8a6; --green:#16a34a; --green-bg:#dcfce7; --purple:#7c5ce6; --orange:#f59e3b; --red:#ef4444;
  --amber-bg:#fef3c7; --amber:#b45309; --red-bg:#fee2e2;
  --radius:12px; --shadow:0 2px 12px rgba(17,24,39,.07);
  --font:"Roboto Condensed",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--purple)}
h1,h2,h3{font-weight:600;margin:0}

/* ── Boutons / champs ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem 1.2rem;border-radius:10px;border:none;cursor:pointer;font:inherit;font-size:.95rem;font-weight:600;text-decoration:none;transition:filter .15s,background .15s}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(224,85,143,.25)}
.btn-grad:hover{filter:brightness(1.06)}
.btn-ghost{background:#eef0f5;color:var(--text)}
.btn-ghost:hover{background:#e3e6ee}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{padding:.35rem .7rem;font-size:.8rem;border-radius:8px}
.btn-block{width:100%}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.field label{font-size:.8rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.field input,.field select,.field textarea{padding:.7rem .9rem;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:1rem;outline:none;background:#fff;transition:border .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple)}
.alert{padding:.75rem 1rem;border-radius:10px;font-size:.92rem;margin-bottom:1rem}
.alert-error{background:var(--red-bg);color:#991b1b}
.alert-ok{background:var(--green-bg);color:#166534}
.alert-info{background:#e0e7ff;color:#3730a3}

/* ── Pastilles de statut ──────────────────────────────────────────── */
.pill{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.85rem;font-weight:600}
.pill-ok{background:var(--green-bg);color:var(--green)}
.pill-attention{background:var(--amber-bg);color:var(--amber)}
.pill-manquant{background:var(--red-bg);color:#b91c1c}
.pill-info{background:#e0e7ff;color:#4338ca}

/* ── Pages d'authentification ─────────────────────────────────────── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:radial-gradient(1200px 600px at 10% -10%,rgba(97,87,230,.18),transparent),radial-gradient(900px 500px at 110% 110%,rgba(253,170,75,.2),transparent),var(--bg)}
.auth-card{width:100%;max-width:440px;background:var(--card);border-radius:18px;box-shadow:0 20px 50px rgba(22,35,63,.15);overflow:hidden}
.auth-head{background:var(--navy);color:#fff;padding:1.6rem 1.8rem 1.3rem;display:flex;align-items:center;gap:.8rem}
.auth-head img{width:42px;height:42px;object-fit:contain}
.auth-head .brand{font-size:1.6rem;font-weight:700;letter-spacing:.2px}
.auth-head .sub{font-size:.85rem;color:var(--navy-text)}
.auth-bar{height:5px;background:var(--grad)}
.auth-body{padding:1.6rem 1.8rem 1.8rem}
.auth-body h1{font-size:1.25rem;margin-bottom:1rem}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:#eef0f5;border-radius:12px;padding:4px;margin-bottom:1.3rem}
.tab{border:none;background:none;padding:.65rem;border-radius:9px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.tab.active{background:#fff;color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.tab .ico{margin-right:.3rem}
.auth-links{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;font-size:.9rem;flex-wrap:wrap}
.hint{font-size:.85rem;color:var(--muted);margin:-.3rem 0 1rem}

/* ── Coque portail ────────────────────────────────────────────────── */
.shell{display:flex;height:100vh;overflow:hidden}
.side{width:250px;flex-shrink:0;background:var(--navy);color:#fff;display:flex;flex-direction:column;overflow-y:auto;transition:transform .25s ease;z-index:20}
.side-brand{display:flex;align-items:center;gap:.6rem;padding:1.3rem 1.3rem 1.6rem;text-decoration:none;color:#fff}
.side-brand img{width:38px;height:38px;object-fit:contain}
.side-brand span{font-size:1.55rem;font-weight:700}
.nav{list-style:none;margin:0;padding:0 .6rem}
.nav ul{list-style:none;margin:0;padding:0}
.nav-item{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;margin:.15rem 0;border-radius:9px;color:#e6ebf5;cursor:pointer;font-size:1.02rem;user-select:none;text-decoration:none}
.nav-item:hover{background:var(--navy-2)}
.nav-item.active{background:var(--navy-3);color:#fff}
.nav-item .ico{width:1.3rem;text-align:center;flex-shrink:0}
.nav-item .chev{margin-left:auto;font-size:.75rem;transition:transform .2s}
.nav-group.open>.nav-item{background:var(--navy-3)}
.nav-group.open>.nav-item .chev{transform:rotate(180deg)}
.nav-sub{max-height:0;overflow:hidden;transition:max-height .3s ease;margin-left:1.35rem!important;border-left:1px solid rgba(255,255,255,.18)}
.nav-group.open>.nav-sub{max-height:900px}
.nav-sub .nav-item{font-size:.95rem;padding:.5rem .8rem;color:var(--navy-text)}
.nav-sub .nav-item.active,.nav-sub .nav-item:hover{color:#fff}
.side-foot{margin-top:auto;padding:1rem 1.3rem;font-size:.8rem;color:var(--navy-text);border-top:1px solid rgba(255,255,255,.08)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:62px;flex-shrink:0;background:var(--grad);color:#fff;display:flex;align-items:center;padding:0 1.2rem;gap:1rem}
.burger{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:.2rem .4rem;line-height:1}
.topbar .spacer{flex:1}
.topbar .school{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sep{width:1px;height:26px;background:rgba(255,255,255,.45)}
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:.6rem;background:none;border:none;color:#fff;font:inherit;font-size:1.05rem;cursor:pointer}
.avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--purple);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.dropdown{position:absolute;right:0;top:calc(100% + 10px);background:#fff;color:var(--text);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);min-width:240px;padding:.4rem;display:none;z-index:50}
.dropdown.open{display:block}
.dropdown .who{padding:.6rem .8rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}
.dropdown .who small{display:block;color:var(--muted)}
.dropdown a{display:block;padding:.55rem .8rem;border-radius:8px;color:var(--text);text-decoration:none}
.dropdown a:hover{background:var(--bg)}
.role-chip{display:inline-block;font-size:.72rem;background:#ede9fe;color:#5b21b6;padding:.05rem .45rem;border-radius:999px;margin:.2rem .2rem 0 0}
.frame-wrap{flex:1;position:relative;background:var(--bg)}
.frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;background:#fff}
.overlay{display:none}
.shell.collapsed .side{margin-left:-250px}
@media(max-width:900px){
  .side{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%)}
  .shell.mobile-open .side{transform:translateX(0)}
  .shell.mobile-open .overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:15}
  .shell.collapsed .side{margin-left:0}
  .topbar .school,.topbar .sep{display:none}
  .user-btn .name{display:none}
}

/* ── Contenu (tableau de bord, admin) ─────────────────────────────── */
.page{max-width:1180px;margin:0 auto;padding:1.6rem 1.6rem 3rem}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.page-title h1{font-size:1.75rem}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem 1.4rem;margin-bottom:1.3rem}
.card h2{font-size:1.3rem;margin-bottom:1rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.3rem}
.kpi{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.1rem;border:1.5px solid var(--line);border-left:4px solid var(--c,var(--teal))}
.kpi .lbl{font-size:1rem;color:var(--text)}
.kpi .val{font-size:1.15rem;font-weight:600;color:var(--c,var(--teal));margin-top:.25rem}
.kpi small{display:block;color:var(--muted);font-size:.8rem;margin-top:.2rem}
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem}
.doc{border:1.5px solid var(--line);border-radius:10px;padding:.9rem 1rem}
.doc .t{font-size:1.05rem;margin-bottom:.45rem}
.doc .d{font-size:.82rem;color:var(--muted);margin-top:.35rem}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.empty{color:var(--muted);font-size:.95rem}
table.grid{width:100%;border-collapse:collapse;font-size:.92rem}
table.grid th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);padding:.55rem .6rem;border-bottom:1.5px solid var(--line)}
table.grid td{padding:.6rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table-scroll{overflow-x:auto}
/* ── Messagerie : pastille non lus, popups par-dessus les applications ── */
.badge-msg{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:999px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;margin-left:auto}
.badge-msg[hidden]{display:none}
/* bulle « Messagerie » en bas à gauche (style de la fiche sanitaire, en plus grand) */
.bulle-msg{position:fixed;left:20px;bottom:20px;z-index:900;display:inline-flex;align-items:center;gap:12px;padding:14px 26px 14px 20px;border:none;border-radius:999px;background:#1e3a8a;color:#fff;font:700 18px/24px var(--font);letter-spacing:.2px;cursor:pointer;box-shadow:0 12px 30px rgba(15,23,42,.35)}
.bulle-msg:hover{background:#172554}
.bulle-msg svg{flex:none}
/* compteur de nouveaux messages : grosse pastille jaune en haut à droite de la bulle */
.badge-bulle{position:absolute;top:-16px;right:-14px;min-width:38px;height:38px;padding:0 9px;border-radius:999px;background:#facc15;color:#7f1d1d;font:800 21px/1 var(--font);display:inline-flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.badge-bulle[hidden]{display:none}
/* messages non lus : la bulle clignote (bleu ↔ rouge, onde) et le compteur clignote (jaune ↔ blanc, grossit) */
.bulle-msg.a-lire{animation:bulle-clignote 1.2s ease-in-out infinite}
.bulle-msg.a-lire .badge-bulle{animation:badge-clignote .8s ease-in-out infinite}
@keyframes bulle-clignote{
  0%,100%{background:#1e3a8a;box-shadow:0 12px 30px rgba(15,23,42,.35),0 0 0 0 rgba(239,68,68,.55)}
  50%{background:#dc2626;box-shadow:0 12px 30px rgba(15,23,42,.35),0 0 0 16px rgba(239,68,68,0)}
}
@keyframes badge-clignote{
  0%,100%{transform:scale(1);background:#facc15;color:#7f1d1d;box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 0 0 rgba(250,204,21,.8)}
  50%{transform:scale(1.3);background:#fff;color:#dc2626;box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 0 10px rgba(250,204,21,0)}
}
@media(prefers-reduced-motion:reduce){.bulle-msg.a-lire{animation:none;background:#dc2626}.bulle-msg.a-lire .badge-bulle{animation:none}}
/* le pied de la barre latérale reste au-dessus de la bulle */
.side-foot{margin-bottom:104px}
@media(max-width:639px){.bulle-msg{padding:14px}.bulle-msg .lib{display:none}}
@media print{.bulle-msg{display:none}}
.panneau-msg{position:fixed;inset:0;z-index:950;background:rgba(15,23,42,.5);display:flex;justify-content:flex-end}
.panneau-msg[hidden]{display:none}
.panneau-boite{background:#f1f5f9;width:100%;max-width:56rem;height:100%;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.panneau-tete{background:#1e3a8a;color:#fff;padding:12px 16px;display:flex;align-items:center;gap:12px}
.panneau-tete h2{font-size:14px;font-weight:700;flex:1;margin:0}
.panneau-tete button{border:none;background:rgba(255,255,255,.12);color:#fff;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:16px}
.panneau-boite iframe{flex:1;width:100%;border:0;background:var(--bg)}
/* page de connexion : choix Parent / Personnel en grandes cartes illustrées */
.espace-question{font-size:1.15rem;font-weight:700;margin-bottom:.6rem}
.espaces{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:1.3rem}
.espace{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1rem .6rem .9rem;border:3px solid var(--line);border-radius:16px;background:#fff;font:inherit;color:var(--text);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.espace:hover{border-color:#c7cbe0;transform:translateY(-1px)}
.espace img{width:96px;height:96px;object-fit:contain;mix-blend-mode:multiply}
.espace .nom{font-size:1.45rem;font-weight:700;line-height:1.2}
.espace .detail{font-size:.9rem;color:var(--muted);text-align:center;line-height:1.3}
.espace .coche{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--purple);color:#fff;font-weight:700;display:none;align-items:center;justify-content:center;font-size:.95rem}
.espace.active{border-color:var(--purple);background:#f5f3ff;box-shadow:0 6px 18px rgba(124,92,230,.22)}
.espace.active .nom{color:var(--purple)}
.espace.active .coche{display:flex}
.espace:focus-visible{outline:3px solid #a78bfa;outline-offset:2px}
@media(max-width:420px){.espace img{width:72px;height:72px}.espace .nom{font-size:1.25rem}.espace .detail{font-size:.8rem}}
/* menu protégé par mot de passe */
.nav-item .cadenas{font-size:.8rem;margin-left:.35rem;opacity:.8}
.dlg-mdp{border:none;border-radius:16px;padding:1.3rem 1.4rem;width:min(24rem,calc(100vw - 32px));box-shadow:0 20px 50px rgba(0,0,0,.3)}
.dlg-mdp::backdrop{background:rgba(15,23,42,.55)}
.dlg-mdp-tete{font-size:1.15rem;font-weight:700;margin-bottom:.2rem}
/* logo de l'établissement */
.topbar .school-logo{height:40px;max-width:150px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}
.auth-head .auth-logo-etab{width:auto;height:52px;max-width:140px;object-fit:contain;margin-left:auto;background:#fff;border-radius:8px;padding:4px}
.popup-voile{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.popup-voile[hidden]{display:none}
.popup-boite{background:#fff;width:100%;max-width:32rem;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.35);border:4px solid var(--pc,#93c5fd);overflow:hidden}
.popup-tete{background:var(--ph,#1e3a8a);color:var(--pt,#fff);padding:.75rem 1.25rem;display:flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.popup-tete .rang{margin-left:auto;text-transform:none;font-weight:600;opacity:.9}
.popup-corps{padding:1.25rem}
.popup-corps h2{font-size:1.15rem;margin-bottom:.7rem}
.popup-corps p{white-space:pre-wrap;line-height:1.55;max-height:50vh;overflow-y:auto;color:#334155}
.popup-pied{padding:0 1.25rem 1.25rem;display:flex;justify-content:flex-end}
.niv-info{--pc:#93c5fd;--ph:#1e3a8a;--pt:#fff}
.niv-important{--pc:#fbbf24;--ph:#f59e0b;--pt:#111827}
.niv-urgent{--pc:#ef4444;--ph:#dc2626;--pt:#fff}
@media(max-width:600px){.page{padding:1rem 16px 2rem}.page-title h1{font-size:1.4rem}.kpis{grid-template-columns:1fr 1fr;gap:.7rem}.kpi{padding:.8rem}.kpi small{display:none}}