/* ============================================================
   Plateforme ACCE — feuille de style unique
   Palette : vert profond (identité), sable (fond), accents ambre.
   ============================================================ */
:root {
  --vert: #0e5a52;
  --vert-fonce: #093f3a;
  --vert-clair: #e3f0ec;
  --titre: #093f3a;
  --etiquette: #36413e;
  --sable: #f5f2ea;
  --papier: #ffffff;
  --papier-2: #faf8f3;
  --survol: #fbfaf6;
  --champ: #ffffff;
  --bord-champ: #cfc9bb;
  --fond-fil: #efeae0;
  --bulle: #ffffff;
  --bulle-moi: #d9f2df;
  --encre: #1d2523;
  --gris: #5f6b68;
  --gris-clair: #e6e2d8;
  --ligne: #ddd8cc;
  --ok: #1f7a4d;
  --ok-fond: #e2f3ea;
  --danger: #b4372f;
  --danger-fond: #fbe7e5;
  --warn: #9a6200;
  --warn-fond: #fdf1d8;
  --info: #22577a;
  --info-fond: #e3eef6;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(20, 30, 28, .06), 0 4px 14px rgba(20, 30, 28, .05);
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden], .nav-toggle { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--police); font-size: 15px; line-height: 1.5; color: var(--encre); background: var(--sable); }
a { color: var(--vert); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }
code { font-family: ui-monospace, Consolas, monospace; background: var(--sable); padding: 1px 6px; border-radius: 4px; font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--ligne); margin: 1.2rem 0; }

/* ---------- Structure ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; flex-shrink: 0; background: var(--vert-fonce); color: #d7e6e2;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; color: #fff; text-decoration: none; }
.brand-text { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.brand-mark {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px; background: #e9b949; color: var(--vert-fonce); font-size: 24px; font-weight: 700;
  font-family: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;
}
.brand-mark.grand { width: 52px; height: 52px; font-size: 32px; border-radius: 14px; }
.sidebar nav { padding: 4px 10px 12px; flex: 1; }
.nav-groupe { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #8fb0a9; margin: 14px 10px 4px; }
.sidebar a, .sidebar .lien {
  display: block; padding: 7px 10px; border-radius: 7px; color: #d7e6e2; text-decoration: none; font-size: .93rem;
}
.sidebar a:hover, .sidebar .lien:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar a.actif { background: var(--vert); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #e9b949; }
.sidebar-pied { border-top: 1px solid rgba(255, 255, 255, .1); padding: 12px 10px 16px; }
.moi { padding: 0 10px 8px; display: flex; flex-direction: column; }
.moi strong { color: #fff; font-size: .92rem; }
.moi span { font-size: .78rem; color: #8fb0a9; }
.lien { background: none; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--papier);
  border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 5;
}
.topbar-titre { flex: 1; min-width: 0; }
.topbar h1 { font-size: 1.3rem; margin: 0; }
.fil { font-size: .82rem; color: var(--gris); }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.annee { font-size: .8rem; color: var(--gris); background: var(--sable); padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.burger { display: none; font-size: 22px; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.contenu { padding: 24px 28px 48px; max-width: 1280px; width: 100%; }
.voile { display: none; }

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 30px rgba(0,0,0,.3); }
  .nav-toggle:checked ~ .sidebar { transform: none; }
  .nav-toggle:checked ~ .voile { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
  .burger { display: block; }
  .topbar { padding: 12px 16px; }
  .topbar h1 { font-size: 1.1rem; }
  .annee { display: none; }
  .contenu { padding: 16px 16px 40px; }
}

/* ---------- Page simple (connexion, maintenance) ---------- */
.simple { display: grid; place-items: center; min-height: 100vh; padding: 16px;
  background: radial-gradient(circle at 20% 10%, #e8f1ed 0, transparent 50%), var(--sable); }
.carte-centree { width: 100%; max-width: 400px; background: var(--papier); border-radius: 16px; padding: 28px; box-shadow: var(--ombre); }
.logo-bloc { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.logo-bloc div { display: flex; flex-direction: column; }
.logo-bloc span { color: var(--gris); font-size: .85rem; }
.code-totp { font-size: 1.6rem; letter-spacing: .3em; text-align: center; }

/* ---------- Cartes et grilles ---------- */
.carte { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre); margin-bottom: 20px; min-width: 0; }
.carte > h2:first-child, .carte-tete h2 { margin-bottom: .7em; }
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.carte-tete h2 { margin: 0; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grille-2 > .carte, .grille-3 > .carte { margin-bottom: 0; }
.grille-2 + *, .grille-3 + * { margin-top: 20px; }
@media (max-width: 1000px) { .grille-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .grille-2, .grille-3 { grid-template-columns: 1fr; } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 14px 16px; box-shadow: var(--ombre); text-decoration: none; color: inherit; }
a.stat:hover { border-color: var(--vert); }
.stat-valeur { font-size: 1.8rem; font-weight: 700; color: var(--titre); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--gris); font-size: .85rem; }
.stat.alerte-stat .stat-valeur { color: var(--danger); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--gris-clair); vertical-align: middle; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); font-weight: 600; background: var(--papier-2); white-space: nowrap; }
tbody tr:hover { background: var(--survol); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { white-space: nowrap; text-align: right; }
td.actions form { display: inline; }
.ligne-attenuee td { color: var(--gris); }
tr[hidden] { display: none; }

/* ---------- Formulaires ---------- */
label { display: block; font-size: .88rem; font-weight: 600; color: var(--etiquette); }
input, select, textarea {
  display: block; width: 100%; margin-top: 4px; font: inherit; font-weight: 400; color: var(--encre);
  padding: 8px 10px; border: 1px solid var(--bord-champ); border-radius: 7px; background: var(--champ); color: var(--encre);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(14, 90, 82, .25); border-color: var(--vert); }
input[type=checkbox], input[type=radio] { display: inline-block; width: auto; margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--vert); }
.pile { display: flex; flex-direction: column; gap: 12px; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.champs .large { grid-column: 1 / -1; }
.filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.filtres label { min-width: 140px; flex: 0 1 180px; }
.filtres .recherche { flex: 1 1 220px; }
.case { display: flex; align-items: center; font-weight: 400; gap: 2px; }
.aide { font-size: .84rem; color: var(--gris); font-weight: 400; }
fieldset { border: 1px solid var(--ligne); border-radius: 8px; padding: 12px 14px; margin: 0 0 12px; }
legend { font-weight: 600; font-size: .88rem; padding: 0 6px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px;
  font: inherit; font-weight: 600; font-size: .9rem; color: #fff; background: var(--vert); border: 1px solid var(--vert);
  border-radius: 7px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--vert-fonce); }
.btn-large { padding: 11px 18px; font-size: 1rem; }
.btn-secondaire { background: var(--papier); color: var(--vert); border-color: #c5d9d3; }
.btn-secondaire:hover { background: var(--vert-clair); }
.btn-danger { background: var(--papier); color: var(--danger); border-color: #e9c3bf; }
.btn-danger:hover { background: var(--danger-fond); }
.btn-petit { padding: 4px 10px; font-size: .82rem; }
.btn-lien { background: none; border: 0; color: var(--vert); padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.btn-lien.danger { color: var(--danger); }
.barre-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Badges, alertes ---------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.badge-ok { background: var(--ok-fond); color: var(--ok); }
.badge-danger { background: var(--danger-fond); color: var(--danger); }
.badge-warn { background: var(--warn-fond); color: var(--warn); }
.badge-info { background: var(--info-fond); color: var(--info); }
.badge-neutre { background: var(--gris-clair); color: var(--gris); }
.alerte { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; font-size: .93rem; }
.alerte-ok { background: var(--ok-fond); border-color: #b9dfc9; color: #155a39; }
.alerte-erreur { background: var(--danger-fond); border-color: #efc4bf; color: #8c2620; }
.alerte-info { background: var(--info-fond); border-color: #bfd6e8; color: #1c4864; }
.alerte-warn { background: var(--warn-fond); border-color: #ecd49f; color: #714800; }
.secret { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; letter-spacing: .12em; background: var(--sable); padding: 10px 12px; border-radius: 8px; word-break: break-all; }

/* ---------- Listes ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 10px 0; border-bottom: 1px solid var(--gris-clair); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.liste li:last-child { border-bottom: 0; }
.liste .meta { font-size: .82rem; color: var(--gris); }
.infos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.infos dt { color: var(--gris); font-size: .88rem; }
.infos dd { margin: 0; }
.vide { text-align: center; padding: 40px 20px; color: var(--gris); }
.vide-code { font-size: 3rem; font-weight: 800; color: var(--gris-clair); }
.muet { color: var(--gris); }
.petit { font-size: .84rem; }

/* ---------- Onglets ---------- */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--ligne); margin-bottom: 20px; overflow-x: auto; }
.onglets a { padding: 9px 16px; text-decoration: none; color: var(--gris); border-bottom: 3px solid transparent; white-space: nowrap; font-weight: 600; font-size: .93rem; }
.onglets a.actif { color: var(--vert-fonce); border-color: #e9b949; }
.onglets a:hover { color: var(--vert); }

/* ---------- Emploi du temps (vue agenda par jour) ---------- */
.edt { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.edt-jour { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; }
.edt-jour h3 { margin: 0; padding: 9px 14px; background: var(--vert-clair); color: var(--titre); font-size: .9rem; }
.edt-jour.aujourdhui h3 { background: var(--vert); color: #fff; }
.creneau { padding: 10px 14px; border-top: 1px solid var(--gris-clair); position: relative; }
.creneau:first-of-type { border-top: 0; }
.creneau-heure { font-weight: 700; font-size: .85rem; color: var(--titre); font-variant-numeric: tabular-nums; }
.creneau-titre { font-weight: 600; }
.creneau-meta { font-size: .82rem; color: var(--gris); }
.creneau .actions-creneau { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Appel ---------- */
.appel-ligne { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(140px, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gris-clair); }
.choix-statut { display: inline-flex; border: 1px solid var(--bord-champ); border-radius: 8px; overflow: hidden; }
.choix-statut label { margin: 0; font-weight: 600; font-size: .82rem; }
.choix-statut input { position: absolute; opacity: 0; pointer-events: none; }
.choix-statut span { display: block; padding: 6px 12px; cursor: pointer; border-left: 1px solid var(--bord-champ); }
.choix-statut label:first-child span { border-left: 0; }
.choix-statut input:checked + span.s-present { background: var(--ok-fond); color: var(--ok); }
.choix-statut input:checked + span.s-absent { background: var(--danger-fond); color: var(--danger); }
.choix-statut input:checked + span.s-retard { background: var(--warn-fond); color: var(--warn); }
.choix-statut input:focus-visible + span { outline: 2px solid var(--vert); }
.appel-ligne input[type=text] { margin: 0; }
@media (max-width: 640px) { .appel-ligne { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Progression ---------- */
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.etapes li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gris-clair); }
.etapes li::before { counter-increment: etape; content: counter(etape); display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--gris-clair); color: var(--gris); font-size: .8rem; font-weight: 700; }
.etapes li.faite::before { content: "✓"; background: var(--ok); color: #fff; }
.etapes .etape-texte { flex: 1; }
.barre { height: 8px; background: var(--gris-clair); border-radius: 99px; overflow: hidden; margin: 6px 0 12px; }
.barre > span { display: block; height: 100%; background: var(--vert); border-radius: 99px; }

/* ---------- Cartes enfant (espace famille) ---------- */
.enfants { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.enfant { display: block; text-decoration: none; color: inherit; background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre); }
.enfant:hover { border-color: var(--vert); }
.enfant-nom { font-size: 1.1rem; font-weight: 700; }
.enfant .meta { color: var(--gris); font-size: .85rem; }
.pastilles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Impression ---------- */
@media print {
  .sidebar, .topbar .burger, .filtres, .btn, .barre-actions, form { display: none !important; }
  .app { display: block; }
  .carte { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}

/* ---------- Emploi du temps graphique ---------- */
.edt-barre { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.edt-choix label { min-width: 260px; }
.edt-legende { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.puce { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; border-left: 4px solid; }
.m-arabe { --c: #2f6db3; --f: #e6effa; }
.m-education { --c: #a8650a; --f: #fdf0dc; }
.m-coran { --c: #1f7a4d; --f: #e2f3ea; }
.m-autre { --c: #6a5f8a; --f: #eeebf5; }
.puce.m-arabe, .puce.m-education, .puce.m-coran { background: var(--f); border-color: var(--c); color: var(--c); }

.edt-zone { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.edt-zone > .carte { margin-bottom: 0; }
@media (max-width: 1100px) { .edt-zone { grid-template-columns: 1fr; } .edt-palette { order: -1; } }
.edt-grille-wrap { padding: 0; overflow: hidden; }
.edt-grille { overflow: auto; max-height: calc(100vh - 210px); }
.edt-table { border-collapse: separate; border-spacing: 0; font-size: .82rem; min-width: 100%; }
.edt-table th, .edt-table td { border-bottom: 1px solid var(--gris-clair); border-right: 1px solid var(--gris-clair); padding: 0; }
.edt-table thead th { position: sticky; background: var(--papier-2); z-index: 2; text-align: center; padding: 6px 8px; }
.edt-table thead tr:first-child th { top: 0; }
.edt-table thead tr:nth-child(2) th { top: 31px; font-weight: 600; color: var(--gris); font-size: .72rem; letter-spacing: 0; text-transform: none; }
.edt-table th.jour { color: var(--titre); font-size: .8rem; background: var(--vert-clair); }
.edt-table th.coin { left: 0; z-index: 3; text-align: left; vertical-align: bottom; }
.edt-table .debut-jour { border-left: 2px solid #c9d9d4; }
.edt-table th.nom-ligne { position: sticky; left: 0; z-index: 1; background: var(--papier); padding: 6px 10px; text-align: left; white-space: nowrap; font-size: .85rem; text-transform: none; letter-spacing: 0; color: var(--encre); min-width: 90px; }
.edt-table th.nom-ligne a { text-decoration: none; font-weight: 700; }
.edt-table tr.separateur td { background: var(--sable); font-weight: 700; color: var(--titre); padding: 6px 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; position: sticky; left: 0; }
.edt-table td.cellule { min-width: 118px; height: 54px; vertical-align: top; padding: 3px; transition: background .12s; cursor: default; }
.edt-table td.cellule.cible { background: var(--vert-clair); box-shadow: inset 0 0 0 1px #b9dfc9; cursor: copy; }
.edt-table td.cellule.survol { background: #d9efe2; box-shadow: inset 0 0 0 2px var(--ok); }

.edt-cours, .edt-carte {
  display: block; border-radius: 6px; padding: 4px 7px; margin: 0 0 3px; background: var(--f); border-left: 4px solid var(--c);
  color: #1d2523; cursor: grab; line-height: 1.25; user-select: none;
}
.edt-cours strong, .edt-carte strong { display: block; font-size: .8rem; color: var(--c); }
.edt-cours span, .edt-carte span { display: block; font-size: .74rem; color: #3c4744; }
.edt-cours:hover, .edt-carte:hover { filter: brightness(.97); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.edt-cours:focus-visible, .edt-carte:focus-visible { outline: 2px solid var(--vert); }
.edt-cours.sans-prof { border-left-style: dashed; }
.edt-cours.sans-prof span { color: var(--danger); }

.edt-palette { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
.edt-palette h2 { margin-bottom: 4px; }
.edt-cartes { display: flex; flex-direction: column; gap: 4px; }
.edt-carte { padding: 6px 9px; }
.edt-carte .haut { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.edt-carte .nb { font-size: .7rem; font-weight: 700; color: var(--c); background: #fff; border-radius: 99px; padding: 0 7px; }
.edt-carte .nb.zero { color: var(--warn); }
.edt-carte.choisie { box-shadow: 0 0 0 2px var(--c); }
.edt-carte[hidden] { display: none; }
.edt-libre { margin-top: 12px; border-top: 1px solid var(--ligne); padding-top: 10px; }
.edt-libre summary { cursor: pointer; font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.edt-libre label { margin-bottom: 8px; }
.edt-corbeille { margin-top: 14px; border: 2px dashed #e0c3bf; color: var(--danger); border-radius: 8px; padding: 14px 10px; text-align: center; font-size: .82rem; }
.edt-corbeille.active { background: var(--danger-fond); }
.edt-corbeille.survol { background: #f6cfca; border-style: solid; }
.edt-hors { padding: 0 14px; }
.edt-hors h3 { margin-top: 14px; }
.edt-cartes-ligne { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; }
.edt-cartes-ligne .edt-cours { margin: 0; }
.edt-editeur { position: fixed; right: 20px; bottom: 20px; width: min(520px, calc(100vw - 32px)); z-index: 40; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.edt-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: var(--vert-fonce); color: #fff;
  padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.25); max-width: min(560px, calc(100vw - 32px)); font-size: .9rem; }
.edt-toast.erreur { background: #8c2620; }
.edt-toast ul { margin: 4px 0 0; padding-left: 18px; }
.edt-occupe .edt-grille { opacity: .6; pointer-events: none; }
@media print {
  .edt-palette, .edt-barre form, .edt-editeur, .edt-toast { display: none !important; }
  .edt-zone { display: block; }
  .edt-grille { max-height: none; overflow: visible; }
  .edt-table { font-size: 9px; }
}
.contenu:has(.edt-zone) { max-width: none; }

/* ---------- Pages publiques (pré-inscription) ---------- */
.public { background: var(--sable); }
.public-tete { background: var(--vert-fonce); color: #fff; }
.public-tete-in { max-width: 920px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.public-tete-in div { display: flex; flex-direction: column; flex: 1; }
.public-tete-in span { font-size: .85rem; color: #b9d3cd; }
.public-connexion { color: #fff; font-size: .88rem; border: 1px solid rgba(255,255,255,.35); border-radius: 7px; padding: 6px 12px; text-decoration: none; }
.public-contenu { max-width: 920px; margin: 0 auto; padding: 20px 16px 60px; }
.public-infos h1 { font-size: 1.5rem; }
.public-infos ul { padding-left: 18px; margin: 0 0 10px; }
.rentree { font-size: 1.05rem; background: var(--vert-clair); border-radius: 8px; padding: 10px 14px; }
table.tarifs { max-width: 320px; }
table.tarifs td { padding: 6px 8px; font-size: 1rem; }
.question { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 8px 0; grid-column: 1 / -1; }
.question > span { flex-basis: 100%; font-size: .9rem; }
.question .case { font-weight: 400; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.public-message { text-align: center; padding: 34px 24px; }
.public-message h1 { font-size: 1.35rem; }
.grand-icone { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: var(--vert-clair); color: var(--titre); }
.grand-icone.ko { background: var(--danger-fond); color: var(--danger); }
.bloc-enfant { background: var(--papier-2); }
table.cheques td { padding: 4px; }
table.cheques input { margin: 0; }
.m-tout { --c: #6b3fa0; --f: #f1eafa; }
.puce.m-tout { background: var(--f); border-color: var(--c); color: var(--c); }
.total-inscription { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; background: var(--vert-clair); border: 2px solid #b9d6cf; border-radius: 10px; padding: 12px 16px; margin: 4px 0 14px; }
.total-inscription span { font-weight: 600; color: var(--titre); }
.total-inscription strong { font-size: 1.7rem; color: var(--titre); grid-row: span 2; }
.total-inscription small { color: var(--gris); }
.total-inscription.rempli { background: #fff7e0; border-color: #e9b949; }
.en-majuscules { text-transform: uppercase; }

/* Règlements modifiables en ligne */
table.reglements td { padding-left: 4px; padding-right: 4px; }
table.reglements input[type=date] { width: 138px; }
table.reglements select { min-width: 120px; }
table.reglements td.actions { white-space: normal; min-width: 150px; }
table.reglements td.actions form { display: block; margin: 0 0 4px; }
table.reglements td.actions .btn { width: 100%; }

/* ============================================================
   Messagerie (style messagerie instantanée)
   ============================================================ */
.nav-badge { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 99px; background: #25a55f; color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; vertical-align: 1px; }
.nav-badge:empty, .nav-badge[data-n="0"] { display: none; }
.topbar-msg { position: relative; font-size: 1.35rem; text-decoration: none; padding: 4px 6px; line-height: 1; }
.topbar-msg .nav-badge { position: absolute; top: -6px; right: -10px; margin: 0; }
.avatar { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; font-weight: 700; font-size: .9rem; letter-spacing: .02em; background: var(--vert-clair); color: var(--titre); }
.avatar-direction { background: #fdf0dc; color: #8a5a07; }
.avatar-enseignant { background: #e6effa; color: #2f6db3; }
.avatar-famille { background: #e2f3ea; color: #1f7a4d; }
.avatar-groupe { background: var(--vert); color: #fff; font-size: 1.1rem; }

.msg-barre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.msg-recherche { flex: 1 1 220px; }
.msg-recherche input { margin: 0; }
.msg-liste-carte { padding: 4px 0; }
.msg-liste { list-style: none; margin: 0; padding: 0; }
.msg-liste li + li { border-top: 1px solid var(--gris-clair); }
.msg-liste a { display: flex; gap: 12px; align-items: center; padding: 11px 18px; color: inherit; text-decoration: none; }
.msg-liste a:hover { background: var(--survol); }
.msg-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-ligne1, .msg-ligne2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.msg-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.msg-heure { font-size: .78rem; color: var(--gris); white-space: nowrap; }
.msg-sujet { font-size: .84rem; color: var(--titre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-apercu { flex: 1; min-width: 0; font-size: .86rem; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-apercu b { font-weight: 600; }
.msg-compte { min-width: 22px; padding: 0 7px; border-radius: 99px; background: #25a55f; color: #fff; font-size: .75rem; font-weight: 700; line-height: 22px; text-align: center; }
.msg-liste li.non-lu .msg-titre, .msg-liste li.non-lu .msg-apercu { color: var(--encre); font-weight: 700; }
.msg-liste li.non-lu .msg-heure { color: #1d8a4f; font-weight: 600; }
.msg-vide { text-align: center; padding: 30px 20px; }

.dest-groupe legend { font-weight: 600; font-size: .9rem; padding: 0 4px; }
.dest-options { max-height: 260px; overflow-y: auto; }
.dest-option { align-items: flex-start; gap: 8px; padding: 4px 0; }
.dest-option input { margin-top: 4px; }
.dest-option small { display: block; }
.msg-piece { margin-top: 10px; }

.msg-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.msg-fil-carte { padding: 0; display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 420px; overflow: hidden; margin: 0; }
.msg-entete { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ligne); background: var(--papier); }
.msg-entete-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-entete-texte strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-infos-lien { display: none; }
.msg-fil { flex: 1; overflow-y: auto; padding: 14px 16px 18px; background: var(--fond-fil); background-image: radial-gradient(rgba(14, 90, 82, .05) 1px, transparent 1px); background-size: 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.msg { display: flex; }
.msg-moi { justify-content: flex-end; }
.bulle { max-width: min(78%, 560px); padding: 7px 10px 5px; border-radius: 12px; background: var(--bulle); box-shadow: 0 1px 1px rgba(0, 0, 0, .08); position: relative; overflow-wrap: anywhere; }
.msg-moi .bulle { background: var(--bulle-moi); border-top-right-radius: 4px; }
.msg-autre .bulle { border-top-left-radius: 4px; }
.bulle-supprimee { color: var(--gris); }
.msg-auteur { font-size: .78rem; font-weight: 700; color: var(--vert); margin-bottom: 1px; }
.msg-texte { white-space: normal; }
.msg-texte a { word-break: break-all; }
.msg-pied { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: .7rem; color: var(--gris); margin-top: 2px; }
.msg-pied form { display: inline; }
.msg-suppr { background: none; border: 0; color: var(--gris); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; opacity: 0; }
.bulle:hover .msg-suppr, .msg-suppr:focus { opacity: 1; }
@media (pointer: coarse) { .msg-suppr { opacity: .6; } }
.msg-image img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; margin: 2px 0 4px; }
.msg-fichier { display: flex; align-items: center; gap: 6px; padding: 8px 10px; margin: 2px 0 4px; border-radius: 8px; background: rgba(14, 90, 82, .07); text-decoration: none; color: var(--encre); }
.msg-fichier span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.msg-fichier small { color: var(--gris); white-space: nowrap; }
.msg-systeme, .msg-jour, .msg-nonlus { text-align: center; margin: 8px 0; }
.msg-systeme span, .msg-jour span { display: inline-block; padding: 3px 12px; border-radius: 8px; background: rgba(255, 255, 255, .85); font-size: .78rem; color: var(--gris); }
.msg-jour span { font-weight: 600; color: var(--titre); }
.msg-nonlus span { display: inline-block; padding: 3px 14px; border-radius: 99px; background: #fff7df; color: #8a5a07; font-size: .78rem; font-weight: 700; }
.msg-saisie { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--ligne); background: var(--papier-2); }
.msg-saisie-zone { flex: 1; min-width: 0; }
.msg-saisie textarea { margin: 0; resize: none; border-radius: 20px; padding: 9px 14px; min-height: 42px; max-height: 220px; }
.msg-piece-nom { display: block; font-size: .8rem; color: var(--titre); margin: 0 0 4px 10px; }
.msg-trombone { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 1.25rem; cursor: pointer; flex-shrink: 0; margin: 0; }
.msg-trombone:hover { background: rgba(14, 90, 82, .08); }
.msg-trombone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.msg-envoyer { width: 46px; height: 42px; padding: 0; border-radius: 50%; font-size: 1.1rem; flex-shrink: 0; }
.msg-ferme { margin: 0; padding: 14px; text-align: center; border-top: 1px solid var(--ligne); color: var(--gris); background: var(--papier-2); }
.msg-membres { width: 100%; }
.msg-membres td { padding: 6px 4px; border: 0; vertical-align: middle; }
.msg-membres .avatar { width: 34px; height: 34px; font-size: .78rem; }
.msg-membres td.actions form { display: block; }
.pile-boutons { display: flex; flex-direction: column; gap: 8px; }
.pile-boutons form, .pile-boutons .btn { width: 100%; }
@media (max-width: 980px) {
  .msg-page { grid-template-columns: 1fr; }
  .msg-infos-lien { display: inline-flex; }
  .msg-fil-carte { height: calc(100vh - 120px); height: calc(100dvh - 120px); }
}
@media (max-width: 760px) {
  .msg-liste a { padding: 10px 12px; }
  .bulle { max-width: 88%; }
  .msg-fil { padding: 10px 8px 14px; }
}

/* Page « Installer l'application » */
.app-intro { display: flex; gap: 18px; align-items: flex-start; }
.app-intro .brand-mark { flex-shrink: 0; }
.app-installee { font-weight: 600; color: var(--ok); }
.app-systemes ol { padding-left: 20px; margin: 0 0 8px; }
.app-systemes li { margin-bottom: 6px; }
.app-systeme-actuel { border: 2px solid #e9b949; box-shadow: 0 0 0 4px #fdf1d8; }
.icone-partage { display: inline-block; padding: 0 5px; border: 1px solid var(--ligne); border-radius: 4px; font-size: .8rem; }
.lien-site { font-size: 1rem; user-select: all; }
@media (max-width: 760px) { .app-intro { flex-direction: column; } }

.bandeau-messages { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; border-radius: var(--rayon); background: var(--papier); border: 1px solid var(--ligne); box-shadow: var(--ombre); }
.bandeau-messages > div { flex: 1; min-width: 180px; }
.bandeau-messages .meta { font-size: .84rem; color: var(--gris); }
.bandeau-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vert-clair); color: var(--titre); font-size: 1.2rem; }
.bandeau-messages-nouveau { border-color: #8fd3aa; background: var(--ok-fond); }
.bandeau-messages-nouveau .bandeau-icone { background: #25a55f; color: #fff; }

/* Logo dyni */
img.brand-mark { display: block; padding: 0; background: none; border-radius: 0; object-fit: contain; }
.logo-dyni { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.logo-dyni div { align-items: center; }
.logo-dyni img { width: 150px; height: auto; }
.sidebar a.brand { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   v1.9 — Menu repliable, recherche, barre du haut, mode sombre
   ============================================================ */
.ico { flex-shrink: 0; }
.menu-recherche { position: relative; margin: 0 14px 6px; color: #8fb0a9; }
.menu-recherche .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.menu-recherche input { margin: 0; padding: 8px 10px 8px 32px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: #fff; font-size: .88rem; }
.menu-recherche input::placeholder { color: #8fb0a9; }
.menu-recherche input:focus { outline: none; border-color: #e9b949; background: rgba(255,255,255,.12); }
.sidebar nav { padding: 2px 10px 18px; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.sidebar nav a span:first-of-type { flex: 1; min-width: 0; }
.sidebar nav a .ico { opacity: .85; }
.nav-sec { margin: 2px 0; }
.nav-sec-fixe { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-sec summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; cursor: pointer; color: #b9d3cd; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; user-select: none; }
.nav-sec summary::-webkit-details-marker { display: none; }
.nav-sec summary span:first-of-type { flex: 1; }
.nav-sec summary:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-chevron { font-size: 1.1rem; transition: transform .15s; line-height: 1; }
.nav-sec[open] .nav-chevron { transform: rotate(90deg); }
.nav-liens { padding: 0 0 6px 12px; border-left: 1px solid rgba(255,255,255,.08); margin-left: 18px; }
.nav-liens a { font-size: .9rem; }
.menu-vide { color: #8fb0a9; font-size: .85rem; padding: 8px 10px; margin: 0; }
.sidebar a.cache-recherche, .nav-sec.cache-recherche { display: none; }
.sidebar mark { background: #e9b949; color: var(--vert-fonce); border-radius: 3px; padding: 0 1px; }

.topbar-droite { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-msg { display: inline-flex; color: var(--titre); }
.bascule-theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--sable); border: 1px solid var(--ligne); }
.bascule-theme button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--gris); display: grid; place-items: center; cursor: pointer; }
.bascule-theme button:hover { color: var(--encre); }
.bascule-theme button[aria-pressed="true"] { background: var(--vert); color: #fff; }
.moi-puce { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 99px; border: 1px solid var(--ligne); text-decoration: none; color: var(--encre); background: var(--papier); }
.moi-puce:hover { border-color: var(--vert); }
.moi-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--vert); color: #fff; font-weight: 700; font-size: .9rem; }
.moi-texte { display: flex; flex-direction: column; line-height: 1.15; }
.moi-texte strong { font-size: .86rem; }
.moi-texte small { font-size: .72rem; color: var(--gris); }
.form-sortie { margin: 0; }
.btn-sortie { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid #e9c3bf; background: var(--papier); color: var(--danger); font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; }
.btn-sortie:hover { background: var(--danger-fond); }
.theme-flottant { position: fixed; top: 12px; right: 12px; z-index: 40; }
.si-sombre { display: none; }
@media (max-width: 1100px) { .moi-texte small, .annee { display: none; } }
@media (max-width: 760px) {
  .moi-texte, .btn-sortie span { display: none; }
  .moi-puce { padding: 4px; }
  .btn-sortie { width: 40px; padding: 0; justify-content: center; }
  .topbar-droite { gap: 6px; }
  .bascule-theme button { width: 28px; height: 28px; }
  .topbar h1 { font-size: 1rem; }
}

/* ---------- Mode sombre ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --vert: #1f9b88;
  --vert-fonce: #0b1d1b;
  --vert-clair: #143430;
  --titre: #8fe0d2;
  --etiquette: #c9d6d2;
  --sable: #0f1517;
  --papier: #172024;
  --papier-2: #1c272b;
  --survol: #1f2b2f;
  --champ: #10181b;
  --bord-champ: #33423f;
  --fond-fil: #0f1719;
  --bulle: #1f2b2f;
  --bulle-moi: #1d4a3c;
  --encre: #e3ebe8;
  --gris: #9fb3ae;
  --gris-clair: #26322f;
  --ligne: #2b3936;
  --ok: #63d69e;
  --ok-fond: #12301f;
  --danger: #ff8f84;
  --danger-fond: #3a1916;
  --warn: #f3c46b;
  --warn-fond: #33280f;
  --info: #8ccaf2;
  --info-fond: #11283a;
  --ombre: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.25);
}
html[data-theme="dark"] body { background: var(--sable); }
html[data-theme="dark"] .si-clair { display: none; }
html[data-theme="dark"] .si-sombre { display: inline; }
html[data-theme="dark"] .topbar-msg { color: var(--encre); }
html[data-theme="dark"] .btn-secondaire { border-color: #2f5a52; color: #7fd6c6; }
html[data-theme="dark"] .btn-danger, html[data-theme="dark"] .btn-sortie { border-color: #5a2b27; }
html[data-theme="dark"] a { color: #7fd6c6; }
html[data-theme="dark"] .sidebar a, html[data-theme="dark"] .btn, html[data-theme="dark"] .public-connexion { color: #d7e6e2; }
html[data-theme="dark"] .btn { color: #fff; }
html[data-theme="dark"] .btn-secondaire { color: #7fd6c6; }
html[data-theme="dark"] .btn-danger { color: var(--danger); }
html[data-theme="dark"] .simple { background: var(--sable); }
html[data-theme="dark"] .alerte { border-color: var(--ligne); }
html[data-theme="dark"] .total-inscription.rempli { background: var(--warn-fond); }
html[data-theme="dark"] .msg-nonlus span { background: var(--warn-fond); color: var(--warn); }
html[data-theme="dark"] .avatar-direction { background: #3a2c10; color: #f3c46b; }
html[data-theme="dark"] .avatar-enseignant { background: #14283f; color: #8ccaf2; }
html[data-theme="dark"] .avatar-famille { background: #12301f; color: #63d69e; }
html[data-theme="dark"] .edt-carte, html[data-theme="dark"] .edt-cours { filter: brightness(.88); }
html[data-theme="dark"] .msg-fil { background-image: radial-gradient(rgba(127, 214, 198, .05) 1px, transparent 1px); }
html[data-theme="dark"] img.brand-mark { filter: none; }
@media print { html[data-theme="dark"] { color-scheme: light; } .bascule-theme, .theme-flottant, .dynibot-hote, .topbar-droite { display: none !important; } }

/* ---------- dyniBot ---------- */
.dynibot-hote { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 10px; }
.dynibot-bouton { position: relative; width: 66px; height: 66px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 10px 26px rgba(10, 40, 36, .35); animation: dynibot-flotte 4s ease-in-out infinite; }
.dynibot-bouton img { display: block; width: 66px; height: 66px; }
.dynibot-bouton:focus-visible { outline: 3px solid #e9b949; outline-offset: 3px; }
.dynibot-nom { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); background: var(--vert-fonce); color: #fff; font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
body.dynibot-ouvert .dynibot-bouton { animation: none; }
@keyframes dynibot-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .dynibot-bouton { animation: none; } }
.dynibot-bonjour { order: -1; max-width: 220px; background: var(--vert-fonce); color: #fff; font-size: .86rem; padding: 9px 12px; border-radius: 14px 14px 4px 14px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.dynibot-panneau { position: fixed; right: 18px; bottom: 100px; z-index: 46; width: min(390px, calc(100vw - 24px)); height: min(580px, calc(100vh - 130px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--papier); color: var(--encre); border: 1px solid var(--ligne); box-shadow: 0 18px 50px rgba(10, 25, 22, .35); }
.dynibot-tete { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--vert-fonce); color: #fff; }
.dynibot-tete div { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.dynibot-tete small { color: #b9d3cd; font-size: .78rem; }
.dynibot-ico { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 1rem; }
.dynibot-ico:hover { background: rgba(255,255,255,.25); }
.dynibot-fil { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--sable); }
.dynibot-msg { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: .92rem; overflow-wrap: anywhere; }
.dynibot-msg p { margin: 0 0 6px; } .dynibot-msg p:last-child { margin: 0; }
.dynibot-msg ol { margin: 6px 0; padding-left: 20px; } .dynibot-msg li { margin: 3px 0; }
.dynibot-msg.bot { align-self: flex-start; background: var(--papier); border: 1px solid var(--ligne); border-top-left-radius: 4px; }
.dynibot-msg.moi { align-self: flex-end; background: var(--vert); color: #fff; border-top-right-radius: 4px; }
.dynibot-titre { font-weight: 700; color: var(--titre); }
.dynibot-sous { font-size: .82rem; color: var(--gris); margin-top: 8px !important; }
.dynibot-puces { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.dynibot-puces button, .dynibot-themes button { border: 1px solid var(--ligne); background: var(--papier-2); color: var(--encre); border-radius: 12px; padding: 8px 10px; text-align: left; font: inherit; font-size: .88rem; cursor: pointer; }
.dynibot-themes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dynibot-themes button { border-radius: 99px; padding: 5px 11px; font-size: .82rem; }
.dynibot-themes small { color: var(--gris); }
.dynibot-puces button:hover, .dynibot-themes button:hover { border-color: var(--vert); background: var(--vert-clair); }
.dynibot-lien { display: inline-flex; align-items: center; gap: 4px; background: var(--vert-fonce); color: #fff !important; text-decoration: none; border: 0; border-radius: 10px; padding: 7px 11px; font: inherit; font-weight: 600; font-size: .84rem; cursor: pointer; margin: 2px 4px 0 0; }
.dynibot-lien:hover { background: var(--vert); }
.dynibot-saisie { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--ligne); background: var(--papier); }
.dynibot-saisie input { margin: 0; border-radius: 20px; }
.dynibot-saisie button { width: 42px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--vert); color: #fff; cursor: pointer; font-size: 1rem; }
.dynibot-note { margin: 0; padding: 0 12px 8px; font-size: .7rem; color: var(--gris); background: var(--papier); }
@media (max-width: 760px) {
  .dynibot-hote { right: 12px; bottom: 12px; }
  .dynibot-bouton, .dynibot-bouton img { width: 54px; height: 54px; }
  .dynibot-panneau { right: 8px; left: 8px; width: auto; bottom: 80px; height: calc(100vh - 110px); height: calc(100dvh - 110px); }
}
/* La zone de saisie de la messagerie ne doit pas être cachée par le bouton */
.msg-page ~ .dynibot-hote, body:has(.msg-saisie) .dynibot-hote { bottom: 96px; }
.faq-ligne { padding: 8px 0; border-bottom: 1px solid var(--gris-clair); }
.faq-ligne summary { cursor: pointer; }
.faq-form { margin-top: 10px; }
.faq-publics { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin: 6px 0 10px; }
.faq-suppr { margin-top: 6px; }

/* Discussions de classe */
.classes-discussions { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.classe-disc { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.classe-disc-tete { display: flex; align-items: center; gap: 10px; }
.classe-disc-tete > div { flex: 1; min-width: 0; }
.classe-disc-tete .avatar { font-size: .8rem; }
.classe-disc p { margin: 0; }
.classe-disc-dernier { flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Bulletins */
.tuiles-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tuile-classe { display: flex; flex-direction: column; gap: 6px; margin: 0; text-decoration: none; color: var(--encre); }
.tuile-classe:hover { border-color: var(--vert); }
.tuile-classe strong { font-size: 1.05rem; }
.jauge { display: block; height: 8px; border-radius: 99px; background: var(--gris-clair); overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--vert); border-radius: 99px; }
.jauge.petite { display: inline-block; width: 80px; vertical-align: middle; height: 6px; }
.etapes-ligne { margin: 0 0 14px; padding-left: 20px; color: var(--gris); }
.saisie-liste { display: flex; flex-direction: column; gap: 10px; }
.saisie-eleve { display: grid; grid-template-columns: 200px 1fr 110px; grid-template-areas: "nom niv note" "nom app app"; gap: 6px 14px; padding: 12px; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--papier-2); }
.saisie-eleve.lecture { grid-template-areas: "nom niv niv" "nom app app"; opacity: .85; }
.saisie-nom { grid-area: nom; display: flex; flex-direction: column; }
.saisie-niveaux { grid-area: niv; display: flex; flex-wrap: wrap; gap: 6px; }
.saisie-note { grid-area: note; font-size: .8rem; color: var(--gris); }
.saisie-note input { margin: 2px 0 0; }
.saisie-eleve textarea, .saisie-eleve > p { grid-area: app; margin: 0; }
.puce-niveau { position: relative; margin: 0; }
.puce-niveau input { position: absolute; opacity: 0; }
.puce-niveau span { display: inline-block; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--bord-champ); background: var(--papier); font-size: .84rem; cursor: pointer; }
.puce-niveau input:checked + span { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }
.puce-niveau input:focus-visible + span { outline: 2px solid #e9b949; outline-offset: 2px; }
.bulletin-entete { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.bulletin-entete > div:first-child { flex: 1 1 280px; }
@media (max-width: 760px) {
  .saisie-eleve, .saisie-eleve.lecture { grid-template-columns: 1fr; grid-template-areas: "nom" "niv" "note" "app"; }
}

/* Accès rapides (accueil) */
.acces-rapides { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.acces-tuile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--rayon); background: var(--papier); border: 1px solid var(--ligne); box-shadow: var(--ombre); color: var(--encre); text-decoration: none; min-height: 68px; }
.acces-tuile:hover { border-color: var(--vert); transform: translateY(-1px); }
.acces-tuile > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.acces-tuile small { color: var(--gris); font-size: .8rem; }
.acces-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--vert-clair); color: var(--titre); flex-shrink: 0; }
@media (max-width: 760px) { .acces-rapides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .acces-tuile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; } }

html[data-theme="dark"] .msg-systeme span, html[data-theme="dark"] .msg-jour span { background: rgba(23, 32, 36, .9); }
html[data-theme="dark"] .puce-niveau span { color: var(--encre); }

/* ============================================================
   Coran (v1.10) : Mushaf sur deux pages, traduction, mémorisation
   ============================================================ */
.coran { --coran-zoom: 1; --mushaf-papier: #fffdf6; --mushaf-cadre: #c9b78a; --mushaf-encre: #1b1b18; --mushaf-or: #8a6d2b; position: relative; }
html[data-theme="dark"] .coran { --mushaf-papier: #1d2321; --mushaf-cadre: #5b5236; --mushaf-encre: #ece6d6; --mushaf-or: #d2b56d; }
.coran-barre { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; justify-content: space-between; background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 10px 12px; box-shadow: var(--ombre); }
.coran-modes { display: flex; border: 1px solid var(--ligne); border-radius: 999px; overflow: hidden; }
.coran-modes a { padding: 7px 14px; text-decoration: none; color: var(--encre); font-weight: 600; font-size: 14px; }
.coran-modes a.actif { background: var(--vert); color: #fff; }
.coran-nav, .coran-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.coran-champ { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--gris); }
.coran-champ select, .coran-champ input { min-height: 36px; padding: 4px 8px; border: 1px solid var(--bord-champ); border-radius: 8px; background: var(--champ); color: var(--encre); font: inherit; font-size: 14px; max-width: 230px; }
.coran-champ-court input, .coran-champ-court select { width: 78px; }
.c-btn { min-height: 36px; padding: 4px 12px; border: 1px solid var(--bord-champ); border-radius: 8px; background: var(--champ); color: var(--encre); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.c-btn::-webkit-details-marker { display: none; }
.c-btn:hover { background: var(--survol); }
.c-btn-fort { background: var(--vert); border-color: var(--vert); color: #fff; }
.c-btn-fort:hover { background: var(--vert-fonce); }
.c-rond { width: 40px; justify-content: center; padding: 0; border-radius: 50%; }
.c-case { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.coran-menu { position: relative; }
.coran-menu-corps { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 290px; background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 12px; display: grid; gap: 8px; }
.coran-menu-corps hr { border: 0; border-top: 1px solid var(--ligne); margin: 4px 0; width: 100%; }
.coran-marques { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; display: grid; gap: 4px; }
.coran-marques li { display: flex; align-items: center; gap: 4px; }
.coran-marques .lien { background: none; border: 0; padding: 0; color: var(--vert); text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
.c-suppr { margin-left: auto; background: none; border: 0; color: var(--gris); cursor: pointer; }
.coran-memo-barre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 12px; background: var(--warn-fond); border-radius: var(--rayon); }

.coran-scene { display: flex; align-items: stretch; gap: 8px; margin: 14px 0; }
.coran-fleche { flex: 0 0 42px; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--papier); color: var(--vert); font-size: 30px; cursor: pointer; }
.coran-fleche:hover { background: var(--vert-clair); }
.mushaf { flex: 1; display: flex; gap: 0; justify-content: center; min-width: 0; }
.mushaf-page { flex: 1 1 0; max-width: calc(560px * var(--coran-zoom)); min-width: 0; background: var(--mushaf-papier); color: var(--mushaf-encre); border: 2px solid var(--mushaf-cadre); outline: 5px double var(--mushaf-cadre); outline-offset: -11px; padding: 22px 26px 14px; display: flex; flex-direction: column; box-shadow: var(--ombre); }
.mushaf-double .page-droite { border-radius: 4px 14px 14px 4px; }
.mushaf-double .page-gauche { border-radius: 14px 4px 4px 14px; border-right-width: 0; }
.mushaf-tete { display: flex; justify-content: space-between; font-family: "Amiri", serif; color: var(--mushaf-or); font-size: 15px; border-bottom: 1px solid var(--mushaf-cadre); padding-bottom: 4px; margin-bottom: 8px; }
.mushaf-texte { flex: 1; font-family: "Amiri Quran", "Amiri", "Scheherazade New", "Traditional Arabic", serif; font-size: calc(25px * var(--coran-zoom)); line-height: 2.25; text-align: justify; text-align-last: center; word-spacing: .04em; }
.mushaf-ouverture .mushaf-texte { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.mushaf-pied { text-align: center; font-family: "Amiri", serif; color: var(--mushaf-or); margin-top: 6px; }
.mushaf-sourate { display: flex; flex-direction: column; align-items: center; margin: 10px 0 4px; padding: 4px 10px; border: 1px solid var(--mushaf-cadre); border-radius: 8px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mushaf-or) 14%, transparent), transparent); line-height: 1.5; text-align: center; }
.mushaf-sourate-ar { font-family: "Amiri", serif; font-size: calc(22px * var(--coran-zoom)); font-weight: 700; color: var(--mushaf-or); }
.mushaf-sourate-fr { font-family: var(--police); font-size: 12px; color: var(--gris); direction: ltr; }
.mushaf-basmala { text-align: center; text-align-last: center; }
.verset { cursor: pointer; border-radius: 6px; transition: background .15s; padding: .5em 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.verset:hover { background: color-mix(in srgb, var(--mushaf-or) 10%, transparent); }
.verset:focus-visible { outline: 2px solid var(--vert); }
.verset-choisi { background: color-mix(in srgb, var(--vert) 13%, transparent); }
.verset-lu { background: color-mix(in srgb, #e3b341 32%, transparent); }
.verset-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.55em; height: 1.55em; padding: 0 .15em; margin: 0 .12em; border: .09em solid var(--mushaf-or); border-radius: 50%; box-shadow: 0 0 0 .1em var(--mushaf-papier), 0 0 0 .16em color-mix(in srgb, var(--mushaf-or) 55%, transparent); color: var(--mushaf-or); font-family: "Amiri", serif; font-size: .58em; line-height: 1; vertical-align: .25em; }
.verset-sajda .verset-num::after { content: " ۩"; }
.verset-phon, .verset-fr { display: block; font-family: var(--police); direction: ltr; text-align: left; text-align-last: auto; line-height: 1.5; }
.verset-phon { font-size: calc(14px * var(--coran-zoom)); font-style: italic; color: var(--info); margin: 0 0 6px; }
.verset-fr { font-size: calc(15px * var(--coran-zoom)); color: var(--encre); margin: 2px 0 6px; }
.avec-phon .verset { display: block; margin-bottom: 4px; }
.avec-phon .mushaf-texte { text-align: right; text-align-last: right; }

/* Avec traduction : un verset par bloc */
.mushaf-versets .mushaf-page { max-width: calc(860px * var(--coran-zoom)); outline: none; border-width: 1px; }
.mushaf-versets .mushaf-texte { text-align: right; text-align-last: right; line-height: 2; }
.mushaf-versets .verset { display: block; padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--mushaf-cadre) 50%, transparent); border-radius: 0; }
.mushaf-versets .mushaf-sourate { margin-top: 16px; }

/* Mémorisation */
.mot { transition: color .2s; }
.mushaf-memo .mot-cache { color: transparent; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--mushaf-encre) 22%, transparent) 0 70%, transparent 70% 100%) bottom / 100% 3px no-repeat; }
.mushaf-memo .mot-cache::selection { color: transparent; }

.coran-audio { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 8px 84px 8px 12px; box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.coran-audio-reglages { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.coran-audio-plus { display: none; }
.coran-audio-info { flex: 1 1 180px; align-self: center; font-size: 14px; font-weight: 600; color: var(--vert); min-width: 0; }
html[data-theme="dark"] .coran-audio-info { color: var(--etiquette); }

.coran-voile { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 60; }
.coran-panneau { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); z-index: 61; background: var(--papier); box-shadow: -10px 0 30px rgba(0,0,0,.2); overflow: auto; padding: 14px 18px 30px; }
.coran-panneau-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: sticky; top: -14px; background: var(--papier); padding: 6px 0; }
.coran-panneau-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.coran-p-ar { font-family: "Amiri Quran", "Amiri", serif; font-size: calc(26px * var(--coran-zoom)); line-height: 2.1; margin: 6px 0; }
.coran-p-tr { font-style: italic; color: var(--info); }
.coran-p-fr { font-size: 16px; }
.coran-p-h { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); margin: 16px 0 6px; }
.coran-onglets { display: flex; flex-wrap: wrap; gap: 6px; }
.coran-onglet { border: 1px solid var(--bord-champ); background: var(--champ); color: var(--encre); border-radius: 999px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.coran-onglet[aria-selected="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.coran-tafsir { margin-top: 10px; font-size: 17px; line-height: 1.9; }
.coran-tafsir[dir="rtl"] { font-family: "Amiri", "Traditional Arabic", serif; font-size: 19px; }
.coran-erreur { margin: 30px auto; max-width: 460px; text-align: center; direction: ltr; background: var(--papier); padding: 20px; border-radius: var(--rayon); border: 1px solid var(--ligne); display: grid; gap: 8px; justify-items: center; }
.coran-attente { margin: 40px; color: var(--gris); direction: ltr; }
.coran-credit { margin: 10px 0 0; }

/* Plein écran */
.coran:fullscreen, .coran.coran-plein { background: var(--sable); overflow: auto; padding: 10px; }
.coran.coran-plein { position: fixed; inset: 0; z-index: 50; }
.coran:fullscreen .mushaf-page, .coran-plein .mushaf-page { max-width: calc(46vw * var(--coran-zoom)); }

@media (max-width: 999px) {
  .mushaf-page { max-width: 100%; padding: 16px 14px 10px; outline-offset: -8px; }
  .coran-fleche { flex-basis: 30px; font-size: 22px; }
  .coran-champ select { max-width: 170px; }
}
@media (max-width: 600px) {
  .coran-scene { gap: 4px; }
  .coran-fleche { display: none; }
  .coran-barre { padding: 8px; }
  .coran-modes { width: 100%; }
  .coran-modes a { flex: 1; text-align: center; padding: 7px 6px; font-size: 13px; }
  .mushaf-texte { font-size: calc(21px * var(--coran-zoom)); }
  .coran-audio { gap: 6px; padding: 6px 70px 6px 8px; }
  .coran-audio-info { font-size: 13px; flex-basis: 0; }
  .coran-audio-plus { display: inline-flex; }
  .coran-audio-reglages { display: none; width: 100%; }
  .coran-audio.reglages-ouverts .coran-audio-reglages { display: grid; grid-template-columns: 1fr 1fr; }
  .coran-audio-reglages .coran-champ select { max-width: none; width: 100%; }
  .coran-nav { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .coran-nav .coran-champ:first-child { grid-column: 1 / -1; }
  .coran-nav .coran-champ select, .coran-nav .coran-champ input { width: 100%; max-width: none; }
  .coran-outils { width: 100%; }
  .coran-outils .coran-menu { margin-left: auto; }
}
@media print { .coran-barre, .coran-audio, .coran-fleche, .coran-memo-barre { display: none !important; } }