:root{
  --marine:#152F52; --turquoise:#2BA7A0; --vert:#7BC96F; --safran:#F5B335;
  --corail:#FF7C6B; --violet:#8E7CC3; --blanc:#FFFFFF; --gris:#F5F8FA;
  --sep:#DDE7EA; --texte:#223047; --doux:#5B6B7C;
  --titres:'Nunito', 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  --corps:'Poppins', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html, body{ height:100%; }
body{ display:flex; flex-direction:column; margin:0; background:var(--gris); color:var(--texte); font-family:var(--corps); font-size:14px; line-height:1.45; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:3px solid var(--turquoise); outline-offset:2px; }

/* Barre supérieure */
.ui-barre{ flex:0 0 auto; position:relative; z-index:20; background:var(--blanc); border-bottom:1px solid var(--sep); border-top:4px solid var(--vert);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:10px 16px; }
.ui-titre{ font-family:var(--titres); font-weight:800; font-size:17px; color:var(--marine); margin-right:6px; }
.ui-groupe{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ui-groupe + .ui-groupe{ padding-left:12px; border-left:1px solid var(--sep); }
.ui-etat{ margin-left:auto; font-size:12px; color:var(--doux); }
.ui-etat.alerte{ color:#9B2C1F; font-weight:600; }
select.ui-choix{ border:1.5px solid var(--sep); border-radius:10px; padding:6px 10px; background:#fff; max-width:220px; }
.btn{ border-radius:10px; padding:7px 13px; font-weight:600; font-size:13px; border:1.5px solid var(--marine); background:transparent; color:var(--marine); white-space:nowrap; }
.btn:hover{ background:var(--gris); }
.btn-principal{ background:var(--marine); color:#fff; }
.btn-principal:hover{ background:#1E3E69; }
.btn-discret{ border-color:var(--sep); color:var(--texte); }
.btn-petit{ padding:3px 9px; font-size:12px; border-radius:8px; }
.btn-icone{ width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1.5px solid var(--sep); background:#fff; color:var(--marine); font-weight:700; }
.btn-icone:hover{ border-color:var(--marine); }
.btn-icone.supprimer:hover{ border-color:#C0392B; color:#C0392B; }
.btn:disabled, .btn-icone:disabled{ opacity:.35; cursor:default; }

.ui-onglets{ display:flex; gap:4px; background:var(--gris); border-radius:12px; padding:3px; }
.ui-onglets button{ border:0; background:transparent; border-radius:9px; padding:7px 14px; font-family:var(--titres); font-weight:800; font-size:14.5px; color:var(--doux); }
.ui-onglets button[aria-selected="true"]{ background:#fff; color:var(--marine); box-shadow:0 1px 3px rgba(21,47,82,.15); }
body.onglet-parametrage .groupe-fiche{ display:none; }
.ui-parametrage{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px 18px 60px; }
.ui-param-corps{ max-width:1100px; margin:0 auto; }
.ui-param-onglets{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.ui-param-onglets button{ border:1.5px solid var(--sep); background:#fff; border-radius:10px; padding:7px 14px; font-weight:600; color:var(--marine); }
.ui-param-onglets button[aria-selected="true"]{ background:var(--marine); border-color:var(--marine); color:#fff; }
.ui-base-param{ font-size:13px; color:var(--doux); margin:0 0 10px; }
.ui-base-param b{ color:var(--marine); }
.ui-param-import .ui-cases{ margin-bottom:8px; }
.ui-param-matiere{ display:grid; grid-template-columns:minmax(220px, 360px) 1fr; gap:12px; align-items:end; margin-bottom:12px; }
.ui-param-matiere .ui-champ{ margin-bottom:0; }
.ui-param-matiere .ui-ajouts{ margin-top:0; }
.ui-arbre{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.ui-noeud{ border:1.5px solid var(--sep); border-radius:12px; background:#fff; }
.ui-noeud.domaine{ border-left:5px solid var(--vert); }
.ui-noeud.sous-domaine{ border-left:4px solid var(--turquoise); margin:8px 0; }
.ui-noeud > summary{ cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:9px 12px; }
.ui-noeud-type{ font-size:11px; font-weight:700; color:var(--doux); text-transform:none; }
.ui-noeud-nom{ font-weight:600; color:var(--marine); }
.ui-noeud-compte{ font-size:12px; color:var(--doux); margin-left:auto; }
.ui-noeud-corps{ padding:0 12px 12px; }
.ui-noeud-edition{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin-bottom:6px; }
.ui-obj-param{ border-top:1px dashed var(--sep); padding:8px 0; }
.ui-obj-tete{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:start; }
.ui-obj-details summary{ cursor:pointer; font-size:12px; color:var(--doux); margin-top:4px; }
.ui-obj-details[open] summary{ margin-bottom:6px; }

/* Deux panneaux */
.ui-corps{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(440px, 1fr) minmax(380px, 1fr); gap:0; }
.ui-form{ overflow-y:auto; padding:14px 18px 60px; }
.ui-apercu{ overflow-y:auto; border-left:1px solid var(--sep); background:#E9EEF2; padding:14px; }
@media (max-width: 980px){
  body{ display:block; height:auto; }
  .ui-corps{ grid-template-columns:1fr; }
  .ui-form{ overflow:visible; }
  .ui-apercu{ border-left:0; border-top:1px solid var(--sep); }
}

/* Cartes du formulaire */
.ui-carte{ background:var(--blanc); border:1px solid var(--sep); border-radius:16px; padding:14px 16px 16px; margin-bottom:14px; }
.ui-carte > h2{ font-family:var(--titres); font-weight:800; font-size:16px; color:var(--marine); margin:0 0 10px; }
.ui-carte > h2 small{ font-family:var(--corps); font-weight:400; font-size:12px; color:var(--doux); margin-left:6px; }
.ui-champ{ display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.ui-champ > label, .ui-libelle{ font-size:12px; font-weight:600; color:var(--marine); }
.ui-aide{ font-size:12px; color:var(--doux); }
.ui-ligne{ display:grid; gap:10px; }
.ui-ligne.l2{ grid-template-columns:1fr 1fr; } .ui-ligne.l3{ grid-template-columns:2fr 1fr 1fr; }
.ui-ligne.l4{ grid-template-columns:1.2fr .6fr .6fr .8fr; }
input[type=text], input[type=number], textarea, select{ width:100%; border:1.5px solid var(--sep); border-radius:10px; padding:7px 10px; background:#fff; }
input:focus, textarea:focus, select:focus{ border-color:var(--turquoise); outline:none; box-shadow:0 0 0 3px rgba(43,167,160,.18); }
textarea{ resize:vertical; min-height:44px; overflow:hidden; line-height:1.4; }
.ui-cases{ display:flex; flex-wrap:wrap; gap:6px 14px; padding-top:4px; }
.ui-cases label{ display:inline-flex; align-items:center; gap:5px; font-size:13px; }
details.ui-option{ border:1px dashed var(--sep); border-radius:10px; padding:6px 10px; margin-bottom:10px; }
details.ui-option summary{ cursor:pointer; font-size:12.5px; font-weight:600; color:var(--marine); }
details.ui-option[open] summary{ margin-bottom:6px; }

/* Listes éditables (matériel, besoins) */
.ui-liste{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.ui-item{ display:grid; gap:6px; align-items:center; }
.ui-item.mat{ grid-template-columns:1.6fr 1.2fr 74px 28px; }
.ui-item.bes{ grid-template-columns:1fr 1fr .8fr 28px; }
.ui-entete-liste{ display:grid; gap:6px; font-size:11px; font-weight:600; color:var(--doux); }
.ui-entete-liste.mat{ grid-template-columns:1.6fr 1.2fr 74px 28px; }
.ui-entete-liste.bes{ grid-template-columns:1fr 1fr .8fr 28px; }

/* Programme : base et listes à cocher en cascade */
.ui-base{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; font-size:12px; color:var(--doux); background:var(--gris); border-radius:10px; padding:7px 10px; margin-bottom:10px; }
.ui-base b{ color:var(--marine); font-weight:600; }
.ui-base .ui-ajouts{ margin-top:0; }
.ui-deroulant{ position:relative; }
.ui-deroulant-bouton{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; text-align:left;
  border:1.5px solid var(--sep); border-radius:10px; padding:7px 10px; background:#fff; font-weight:600; color:var(--marine); }
.ui-deroulant-bouton:disabled{ color:var(--doux); font-weight:400; background:var(--gris); cursor:default; }
.ui-deroulant.ouvert .ui-deroulant-bouton{ border-color:var(--turquoise); box-shadow:0 0 0 3px rgba(43,167,160,.18); }
.ui-deroulant.ouvert .ui-chevron{ transform:rotate(180deg); }
.ui-chevron{ transition:transform .15s; }
/* Le panneau se déroule dans le flux (il ne recouvre pas la liste suivante : pas de clic involontaire) */
.ui-deroulant-panneau{ margin-top:4px; background:#fff; border:1.5px solid var(--turquoise);
  border-radius:12px; box-shadow:0 6px 18px rgba(21,47,82,.12); padding:8px 10px; max-height:320px; overflow-y:auto; }
.ui-puces-choix{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ui-puce{ display:inline-flex; align-items:flex-start; gap:6px; max-width:100%; border:1.5px solid var(--marine); border-radius:10px; padding:3px 4px 3px 9px; font-size:12.5px; line-height:1.35; color:var(--marine); background:#fff; }
.ui-puce.hors{ border-color:#C0392B; }
.ui-puce em{ font-style:normal; color:#9B2C1F; font-size:11.5px; }
.ui-puce button{ border:0; background:transparent; color:var(--marine); font-weight:700; padding:0 4px; border-radius:6px; line-height:1.35; }
.ui-puce button:hover{ background:var(--gris); }
.ui-case-prog{ display:grid; grid-template-columns:18px 1fr; gap:6px; align-items:start; font-size:13px; line-height:1.35; padding:2px 0; cursor:pointer; }
.ui-case-prog input{ margin-top:2px; }
.ui-groupe-prog + .ui-groupe-prog{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--sep); }
.ui-groupe-titre{ display:block; font-size:11.5px; font-weight:700; color:var(--marine); margin-bottom:3px; }
.ui-hors-base{ font-style:normal; font-size:11.5px; color:#9B2C1F; }
select[data-prog]{ font-weight:600; color:var(--marine); }
/* Suggestions tirées de la base */
.ui-sugg{ border:1.5px dashed #B8C4CE; border-radius:12px; padding:8px 10px; margin-bottom:10px; background:#FBFCFD; }
.ui-sugg summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--marine); }
.ui-sugg[open] summary{ margin-bottom:4px; }
.ui-sugg-item{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; padding:7px 0; border-top:1px solid var(--sep); }
.ui-sugg-item p{ margin:2px 0 0; font-size:13px; }
.ui-sugg-objectif{ font-size:11.5px; color:var(--doux); }

/* Sélecteur de type */
.ui-types{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.ui-types button{ border:1.5px solid var(--sep); background:#fff; border-radius:10px; padding:6px 12px; font-weight:600; font-size:13px; color:var(--marine); }
.ui-types button[aria-pressed="true"]{ background:var(--marine); border-color:var(--marine); color:#fff; }

/* Phases */
.ui-phase{ border:1.5px solid var(--sep); border-left:5px solid var(--vert); border-radius:14px; padding:12px 12px 12px; margin-bottom:12px; background:#fff; }
.ui-phase-tete{ display:grid; grid-template-columns:30px 1fr auto; gap:8px; align-items:start; }
.ui-num{ width:28px; height:28px; border-radius:50%; border:1.5px solid var(--marine); display:flex; align-items:center; justify-content:center; font-family:var(--titres); font-weight:800; color:var(--marine); background:#EDF7EB; margin-top:4px; }
.ui-actions{ display:flex; gap:4px; }
.ui-sous-titre{ font-size:12px; font-weight:700; color:var(--marine); margin:10px 0 6px; }
.ui-etape{ display:grid; grid-template-columns:96px 1fr auto; gap:8px; align-items:start; padding:8px; border-radius:10px; margin-bottom:6px; }
.ui-etape.prof{ background:#F2F5F9; }
.ui-etape.eleves{ background:#fff; border:1.5px dashed #B8C4CE; }
.ui-etape.oral{ background:#EEF2F7; border-left:5px solid var(--marine); }
.ui-badge{ font-size:11px; font-weight:700; border-radius:7px; padding:3px 6px; text-align:center; margin-top:5px; }
.ui-badge.prof{ background:var(--marine); color:#fff; }
.ui-badge.eleves{ border:1.5px dashed var(--marine); color:var(--marine); background:#fff; }
.ui-badge.oral{ background:#fff; color:var(--marine); border:1.5px solid var(--marine); }
.ui-etape textarea{ min-height:40px; }
.ui-etape .ui-reponses{ margin-top:6px; }
.ui-ajouts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.ui-somme{ font-size:12.5px; margin:4px 0 10px; }
.ui-somme.ecart{ color:#9B2C1F; font-weight:600; }
.ui-fichier{ font-size:12px; color:var(--doux); word-break:break-all; }
.ui-fichier code{ font-family:var(--corps); font-weight:600; color:var(--marine); }

/* Aperçu direct : une feuille A4 mise à l'échelle du panneau */
.ui-apercu-titre{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--doux); margin-bottom:8px; }
.ui-feuille-cadre{ position:relative; }
.ui-feuille{ width:210mm; padding:20mm; background:#fff; box-shadow:0 1px 2px rgba(21,47,82,.16), 0 6px 18px rgba(21,47,82,.10); transform-origin:top left; }

/* Fenêtre de mise en pages PDF */
.ui-pdf{ position:fixed; inset:0; z-index:50; background:rgba(21,47,82,.55); display:none; flex-direction:column; }
.ui-pdf.ouvert{ display:flex; }
.ui-pdf-barre{ background:#fff; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 16px; border-bottom:1px solid var(--sep); }
.ui-pdf-barre strong{ font-family:var(--titres); color:var(--marine); font-size:16px; margin-right:auto; }
.ui-pdf iframe{ flex:1; width:100%; border:0; background:#E9EEF2; }
.ui-attente{ font-size:13px; color:var(--doux); }

/* ====== Connexion et inscription ====== */
.auth{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; background:linear-gradient(180deg,#EEF3F7,#E3EAF1); }
.auth-carte{ width:100%; max-width:460px; background:#fff; border:1px solid var(--sep); border-radius:18px; padding:26px 26px 22px; box-shadow:0 10px 30px rgba(21,47,82,.10); }
.auth-carte h1{ font-family:var(--titres); font-size:24px; color:var(--marine); margin:0 0 2px; }
.auth-sous-titre{ margin:0 0 18px; color:var(--doux); font-size:13px; }
.btn-large{ width:100%; padding:11px 14px; font-size:14px; margin-top:6px; }
.auth-liens{ display:flex; justify-content:space-between; gap:10px; margin-top:12px; }
.lien{ background:none; border:0; color:var(--marine); font-weight:600; font-size:13px; text-decoration:underline; padding:0; }
.ui-erreur{ background:#FDECEA; border:1px solid #F0B7B0; color:#9B2C1F; border-radius:10px; padding:8px 10px; font-size:13px; margin:0 0 12px; }
.ui-info{ background:#EAF6F5; border:1px solid #A9D9D5; color:#14625C; border-radius:10px; padding:8px 10px; font-size:13px; margin:0 0 12px; }

/* ====== Onglets et barre ====== */
.ui-compte-courant{ font-size:12px; color:var(--doux); }
body.onglet-seance .groupe-sequence, body.onglet-sequence .groupe-seance{ display:none; }
body:not(.onglet-seance) .groupe-seance, body:not(.onglet-sequence) .groupe-sequence{ display:none; }
.page-accueil{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(460px,1fr) minmax(360px,1fr); }
.accueil-gauche{ overflow-y:auto; padding:14px 18px 60px; }
@media (max-width: 980px){ .page-accueil{ grid-template-columns:1fr; } }

/* ====== Emploi du temps ====== */
.ui-edt{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.ui-edt-jour h3{ font-family:var(--titres); font-size:13px; color:var(--marine); margin:0 0 6px; }
.ui-creneau{ display:grid; grid-template-columns:1fr 28px; gap:4px; align-items:center; border:1px solid var(--sep); border-radius:10px; padding:6px; margin-bottom:6px; background:#fff; }
.ui-creneau-h{ display:flex; gap:4px; grid-column:1 / -1; }
.ui-creneau input[type=time]{ padding:3px 4px; font-size:12px; }
.ui-creneau input[type=text]{ font-size:12.5px; padding:4px 6px; }
@media (max-width: 1280px){ .ui-edt{ grid-template-columns:repeat(2, 1fr); } }

/* ====== Cahier journal ====== */
.ui-creneau-journal{ border:1.5px solid var(--sep); border-left:5px solid var(--sep); border-radius:12px; padding:10px 12px; margin-bottom:10px; }
.ui-creneau-journal.liee{ border-left-color:var(--vert); }
.ui-creneau-tete{ display:grid; grid-template-columns:auto 1fr 28px; gap:8px; align-items:center; margin-bottom:6px; }
.ui-horaire{ font-weight:700; font-size:12.5px; color:#fff; background:var(--marine); border-radius:8px; padding:3px 7px; }
.ui-espace{ flex:1; }

/* ====== Comptes ====== */
.ui-compte{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border:1px solid var(--sep); border-radius:12px; padding:10px 12px; margin-bottom:8px; }
.ui-compte.attente{ border-color:#E3C27A; background:#FDF6E6; }
.ui-compte p{ margin:2px 0 0; }

/* ====== Divers ====== */
.ui-rgpd{ background:#FDF6E6; border:1px solid #E3C27A; color:#6B4E0E; border-radius:10px; padding:8px 10px; font-size:12.5px; margin:0 0 10px; }
.ui-lien-etat{ font-size:13px; font-weight:600; color:var(--marine); display:flex; align-items:center; gap:6px; margin:0 0 4px; }
.ui-lien-etat svg{ width:14px; height:14px; }
.ui-phase.liee{ border-left-color:var(--marine); }
.ui-actions-ligne{ align-self:start; }
.ui-param-matiere{ display:grid; grid-template-columns:minmax(220px, 360px) 1fr; gap:12px; align-items:end; margin-bottom:12px; }
.ui-param-matiere .ui-champ{ margin-bottom:0; }

/* ==========================================================================
   IDENTITÉ ZAMBROKLAS — logo, bascules, mode sombre, finitions
   Palette et typographies de la charte : marine #152F52, turquoise #2BA7A0,
   vert #7BC96F, safran #F5B335, corail #FF7C6B, violet #8E7CC3.
   ========================================================================== */
:root{ --surface:#FFFFFF; --fond:#F5F8FA; --ombre:0 1px 2px rgba(21,47,82,.06), 0 8px 24px rgba(21,47,82,.06); }

/* ---- Logo ---- */
.ui-logo{ height:30px; width:auto; flex:0 0 auto; }
.auth-logo{ display:block; width:min(280px, 70%); height:auto; margin:0 auto 6px; }
.auth-carte{ text-align:center; }
.auth-carte .ui-champ, .auth-carte .ui-ligne, .auth-carte .ui-aide, .auth-carte .ui-erreur, .auth-carte .ui-info{ text-align:left; }
.auth-sous-titre{ margin:0 0 20px; }

/* ---- Barre : couleur fonctionnelle par onglet ---- */
.ui-barre{ background:var(--surface); box-shadow:var(--ombre); }
.ui-onglets button{ position:relative; }
.ui-onglets button[aria-selected="true"]::after{ content:''; position:absolute; left:14px; right:14px; bottom:3px; height:3px; border-radius:2px; background:var(--turquoise); }
.ui-onglets button[data-onglet="seance"][aria-selected="true"]::after{ background:var(--marine); }
.ui-onglets button[data-onglet="sequence"][aria-selected="true"]::after{ background:var(--vert); }
.ui-onglets button[data-onglet="parametrage"][aria-selected="true"]::after{ background:var(--violet); }

/* ---- Boutons bascule ---- */
.ui-bascules{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ui-switch{ display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--sep); background:var(--surface);
  border-radius:999px; padding:5px 12px 5px 7px; font-size:12.5px; font-weight:600; color:var(--doux); }
.ui-switch .ui-piste{ width:30px; height:17px; border-radius:999px; background:#C9D6E0; position:relative; transition:background .18s; flex:0 0 auto; }
.ui-switch .ui-piste::after{ content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; transition:transform .18s; box-shadow:0 1px 2px rgba(21,47,82,.3); }
.ui-switch[aria-checked="true"]{ color:var(--marine); border-color:var(--turquoise); }
.ui-switch[aria-checked="true"] .ui-piste{ background:var(--turquoise); }
.ui-switch[aria-checked="true"] .ui-piste::after{ transform:translateX(13px); }
.ui-switch:disabled{ opacity:.45; cursor:default; }

/* ---- Aperçu : masqué, ou mis en pages ---- */
body.sans-apercu .ui-apercu{ display:none; }
body.sans-apercu .ui-corps{ grid-template-columns:1fr; }
body.sans-apercu .page-accueil{ grid-template-columns:1fr; }
.ui-cadre-pages{ display:none; width:100%; height:100%; border:0; background:#E9EEF2; border-radius:12px; }
body.apercu-pages .ui-feuille{ display:none; }
body.apercu-pages .ui-cadre-pages{ display:block; }
body.apercu-pages .ui-feuille-cadre{ padding:0; overflow:hidden; }

/* ---- Finitions ---- */
.ui-carte{ border-radius:16px; box-shadow:var(--ombre); }
.btn{ border-radius:11px; }
.ui-creneau-journal, .ui-noeud, .ui-compte{ border-radius:14px; }

/* ==========================================================================
   MODE SOMBRE — n'affecte jamais la feuille d'aperçu, qui reste blanche
   ========================================================================== */
body.sombre{
  --surface:#16263A; --fond:#0E1B29; --gris:#1C3049; 
  --texte:#E9EFF5; --doux:#9FB3C6; --blanc:#16263A;
  --ombre:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.30);
  background:var(--fond); color:var(--texte);
}
body.sombre{ --sep:#2B4058; --marine:#8FB9F2; }
body.sombre .ui-barre, body.sombre .ui-carte, body.sombre .ui-switch,
body.sombre .ui-noeud, body.sombre .ui-creneau, body.sombre .ui-creneau-journal,
body.sombre .ui-compte, body.sombre .ui-deroulant-panneau, body.sombre .ui-deroulant-bouton{
  background:var(--surface); color:var(--texte); border-color:var(--sep);
}
body.sombre input, body.sombre select, body.sombre textarea{ background:#0F1F31; color:var(--texte); border-color:var(--sep); }
body.sombre input::placeholder, body.sombre textarea::placeholder{ color:#7C90A4; }
body.sombre .ui-form{ background:var(--fond); }
body.sombre .ui-apercu{ background:#0B1521; }
body.sombre .ui-feuille-cadre{ background:#0B1521; }
body.sombre .ui-parametrage, body.sombre .accueil-gauche{ background:var(--fond); }
body.sombre .btn{ background:var(--surface); color:var(--texte); border-color:var(--sep); }
body.sombre .btn-principal{ background:var(--turquoise); border-color:var(--turquoise); color:#08202C; }
body.sombre .ui-onglets{ background:#0F1F31; }
body.sombre .ui-onglets button[aria-selected="true"]{ background:var(--surface); color:#FFFFFF; }
body.sombre .ui-aide, body.sombre .ui-etat, body.sombre .ui-compte-courant{ color:var(--doux); }
body.sombre .ui-rgpd{ background:#3A3115; border-color:#8A6C1F; color:#F4DFA6; }
body.sombre .ui-info{ background:#123833; border-color:#2BA7A0; color:#BEE9E4; }
body.sombre .ui-erreur{ background:#3B1A17; border-color:#B4584D; color:#F6C9C2; }
body.sombre .auth{ background:linear-gradient(180deg,#0E1B29,#0B1521); }
body.sombre .auth-carte{ background:var(--surface); border-color:var(--sep); }
body.sombre .lien{ color:#8FB9F2; }
/* La feuille d'aperçu et les documents restent toujours sur fond blanc */
body.sombre .ui-feuille, body.sombre .ui-feuille .fiche{ background:#FFFFFF; color:#223047; }

/* ==========================================================================
   REFONTE VISUELLE — couleur, relief et animations
   Une couleur d'accent par onglet, conformément à la charte :
   accueil = turquoise (planifier), séance = marine, séquence = vert (organiser),
   paramétrage = violet (progresser).
   ========================================================================== */
:root{ --accent:#2BA7A0; --accent-voile:#E7F5F4; --transition:.18s cubic-bezier(.4,0,.2,1); }
body.onglet-seance{ --accent:#2F5B96; --accent-voile:#EAF1FA; }
body.onglet-sequence{ --accent:#5FB152; --accent-voile:#EDF7EB; }
body.onglet-parametrage{ --accent:#8E7CC3; --accent-voile:#F1EEF9; }

body{ background:
  radial-gradient(1100px 420px at 12% -10%, rgba(43,167,160,.10), transparent 60%),
  radial-gradient(900px 380px at 100% 0%, rgba(245,179,53,.10), transparent 55%),
  var(--gris); }

/* ---- Barre ---- */
.ui-barre{ border-top:0; background:linear-gradient(180deg, #FFFFFF, #FAFCFD); }
.ui-barre::before{ content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--marine), var(--turquoise) 28%, var(--vert) 50%, var(--safran) 72%, var(--corail)); }
.ui-logo{ height:38px; }
.ui-onglets{ background:var(--gris); padding:4px; }
.ui-onglets button{ transition:background var(--transition), color var(--transition), transform var(--transition); }
.ui-onglets button:hover{ color:var(--marine); transform:translateY(-1px); }
.ui-onglets button[aria-selected="true"]{ background:#fff; color:var(--marine); box-shadow:0 2px 8px rgba(21,47,82,.12); }
.ui-onglets button[aria-selected="true"]::after{ background:var(--accent); }

/* ---- Barre de panneau (conception) ---- */
.ui-barre-panneau{ position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 2px 10px; margin-bottom:6px; background:linear-gradient(180deg, var(--gris) 72%, rgba(245,248,250,0)); }
.ui-panneau-titre{ font-family:var(--titres); font-weight:800; font-size:14px; color:var(--marine); display:flex; align-items:center; gap:8px; }
.ui-panneau-titre::before{ content:''; width:10px; height:10px; border-radius:3px; background:var(--accent); }

/* ---- Cartes ---- */
.ui-carte{ border:1px solid var(--sep); position:relative; overflow:hidden;
  transition:box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  animation:zk-apparait .28s cubic-bezier(.2,.7,.3,1) both; }
.ui-carte::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); opacity:.85; }
.ui-carte:hover{ box-shadow:0 2px 6px rgba(21,47,82,.08), 0 14px 32px rgba(21,47,82,.10); border-color:#CBDBE4; }
.ui-carte h2{ display:flex; align-items:center; gap:8px; }
@keyframes zk-apparait{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---- Boutons ---- */
.btn{ transition:background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.btn:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(21,47,82,.14); border-color:var(--accent); color:var(--marine); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn-principal{ background:linear-gradient(180deg, var(--marine), #10253F); border-color:var(--marine); color:#fff; }
.btn-principal:hover{ background:linear-gradient(180deg, #1B3E6C, var(--marine)); color:#fff; box-shadow:0 6px 18px rgba(21,47,82,.28); }
.btn-petit{ transition:inherit; }

/* ---- Champs ---- */
input, select, textarea{ transition:border-color var(--transition), box-shadow var(--transition), background var(--transition); }
input:focus, select:focus, textarea:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.ui-champ label, .ui-libelle{ transition:color var(--transition); }

/* ---- Phases, créneaux, listes ---- */
.ui-phase, .ui-creneau-journal, .ui-noeud, .ui-compte{ transition:box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
.ui-phase:hover, .ui-creneau-journal:hover, .ui-noeud:hover{ box-shadow:0 8px 22px rgba(21,47,82,.10); }
.ui-num{ background:var(--accent-voile); color:var(--marine); transition:transform var(--transition); }
.ui-phase:hover .ui-num{ transform:scale(1.06); }
.ui-types button, .ui-param-onglets button{ transition:all var(--transition); }
.ui-types button:hover, .ui-param-onglets button:hover{ transform:translateY(-1px); border-color:var(--accent); }
.ui-types button[aria-pressed="true"]{ background:var(--marine); border-color:var(--marine); color:#fff; }
.ui-param-onglets button[aria-selected="true"]{ background:var(--accent); border-color:var(--accent); }

/* ---- Aperçu : entête, bascule et mode pages ---- */
.ui-apercu{ background:linear-gradient(180deg,#EDF1F5,#E4EBF1); }
.ui-apercu-titre{ gap:10px; flex-wrap:wrap; }
.ui-apercu-titre .ui-switch{ padding:3px 10px 3px 5px; font-size:12px; }
.ui-feuille{ border-radius:2px; transition:box-shadow var(--transition); }
.ui-feuille:hover{ box-shadow:0 2px 4px rgba(21,47,82,.18), 0 14px 34px rgba(21,47,82,.14); }
body.apercu-pages .ui-apercu{ display:flex; flex-direction:column; overflow:hidden; }
body.apercu-pages .ui-feuille-cadre{ flex:1 1 auto; min-height:420px; height:100%; }
.ui-cadre-pages{ min-height:420px; }

/* ---- Mode sombre : accents et surfaces ---- */
body.sombre{ background:
  radial-gradient(1100px 420px at 12% -10%, rgba(43,167,160,.14), transparent 60%),
  radial-gradient(900px 380px at 100% 0%, rgba(142,124,195,.14), transparent 55%), #0E1B29; }
body.sombre .ui-barre{ background:linear-gradient(180deg,#16263A,#132134); }
body.sombre .ui-onglets{ background:#0F1F31; }
body.sombre .ui-carte{ border-color:var(--sep); }
body.sombre .ui-carte:hover{ border-color:var(--turquoise); }
body.sombre .btn-principal{ background:linear-gradient(180deg,#2BA7A0,#1E8A84); color:#052A28; }
body.sombre .ui-apercu{ background:linear-gradient(180deg,#0B1521,#0E1B29); }
body.sombre .ui-barre-panneau{ background:linear-gradient(180deg,#0E1B29 72%, rgba(14,27,41,0)); }
body.sombre .ui-num{ background:#123041; color:#CFE6F5; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---- Mon compte ---- */
.ui-identite{ display:flex; align-items:center; gap:14px; padding:10px 12px; margin-bottom:14px;
  background:var(--accent-voile); border-radius:14px; }
.ui-pastille{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-family:var(--titres); font-weight:800; font-size:18px; color:#fff; background:linear-gradient(135deg, var(--marine), var(--turquoise)); }
.ui-identite-nom{ font-family:var(--titres); font-weight:800; font-size:16px; color:var(--marine); margin:0; }
.ui-identite p{ margin:0; }
a.btn{ text-decoration:none; display:inline-flex; align-items:center; }
body.sombre .ui-identite{ background:#132840; }

/* ==========================================================================
   RETOUCHES : lisibilité en mode sombre, pictogrammes, fonds, animations
   ========================================================================== */
/* ---- Filet supérieur uni, sans dégradé multicolore ---- */
.ui-barre::before{ background:var(--marine); }
body.sombre .ui-barre::before{ background:var(--turquoise); }

/* ---- Onglets avec pictogramme ---- */
.ui-onglets button{ display:inline-flex; align-items:center; gap:7px; }
.ui-onglets button svg{ width:17px; height:17px; flex:0 0 auto; color:var(--doux); transition:color var(--transition), transform var(--transition); }
.ui-onglets button:hover svg{ transform:translateY(-1px) scale(1.06); }
.ui-onglets button[aria-selected="true"] svg{ color:var(--accent); }
.ui-onglets button[data-onglet="accueil"][aria-selected="true"] svg{ color:var(--turquoise); }
.ui-onglets button[data-onglet="seance"][aria-selected="true"] svg{ color:var(--marine); }
.ui-onglets button[data-onglet="sequence"][aria-selected="true"] svg{ color:var(--vert); }
.ui-onglets button[data-onglet="parametrage"][aria-selected="true"] svg{ color:var(--violet); }

/* ---- Mode sombre : le bouton est toujours au même endroit, en haut à droite ---- */
.ui-barre{ padding-right:210px; }
.ui-bascules{ position:absolute; top:10px; right:16px; margin:0; z-index:2; }
@media (max-width: 720px){ .ui-barre{ padding-right:16px; } .ui-bascules{ position:static; margin-left:auto; } }

/* ---- Fond habillé : motif discret de la charte ---- */
body{ background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23152F52' stroke-opacity='.07' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M24 30l5 5 9-11'/%3E%3Cpath d='M140 24v10M135 29h10'/%3E%3Cpath d='M30 120q9-9 18 0t18 0'/%3E%3Cpath d='M120 132l4 4 8-9'/%3E%3C/g%3E%3Cg fill='%232BA7A0' fill-opacity='.08'%3E%3Ccircle cx='90' cy='60' r='3'/%3E%3Ccircle cx='156' cy='96' r='3'/%3E%3Ccircle cx='58' cy='158' r='3'/%3E%3C/g%3E%3Cg fill='%23F5B335' fill-opacity='.10'%3E%3Crect x='96' y='150' width='7' height='7' rx='2'/%3E%3Crect x='12' y='72' width='7' height='7' rx='2'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(1100px 440px at 10% -12%, rgba(43,167,160,.16), transparent 62%),
  radial-gradient(900px 380px at 100% 0%, rgba(245,179,53,.14), transparent 58%),
  linear-gradient(180deg, #FBFDFE, var(--gris));
  background-attachment:fixed; }
.auth{ background:
  radial-gradient(760px 320px at 50% 0%, rgba(43,167,160,.20), transparent 60%),
  linear-gradient(180deg,#EEF4F8,#E1EAF1); }
.auth-carte{ animation:zk-monte .4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes zk-monte{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }

/* ---- Animations supplémentaires ---- */
.ui-carte:nth-child(2){ animation-delay:.04s; } .ui-carte:nth-child(3){ animation-delay:.08s; }
.ui-carte:nth-child(4){ animation-delay:.12s; } .ui-carte:nth-child(5){ animation-delay:.16s; }
.ui-phase{ animation:zk-apparait .26s cubic-bezier(.2,.7,.3,1) both; }
.ui-form, .ui-parametrage, .accueil-gauche{ animation:zk-fondu .3s ease both; }
@keyframes zk-fondu{ from{ opacity:0; } to{ opacity:1; } }
.ui-feuille{ animation:zk-apparait .3s ease both; }
.ui-switch:active .ui-piste{ transform:scale(.96); }
.ui-deroulant-panneau{ animation:zk-apparait .18s ease both; }
.ui-puce{ transition:border-color var(--transition), transform var(--transition); }
.ui-puce:hover{ transform:translateY(-1px); border-color:var(--accent); }
details.ui-noeud > summary:hover{ background:var(--accent-voile); border-radius:12px; }
.ui-num, .phase-num{ transition:transform var(--transition), background var(--transition); }

/* ==========================================================================
   MODE SOMBRE : contraste renforcé
   ========================================================================== */
body.sombre{ --marine:#D7E6F7; --texte:#EDF3F8; --doux:#A9BDD0; --accent:#57D2CB; --accent-voile:#123943; }
body.onglet-seance.sombre, body.sombre.onglet-seance{ --accent:#7FB3F2; --accent-voile:#14283F; }
body.sombre.onglet-sequence{ --accent:#8FD583; --accent-voile:#13301A; }
body.sombre.onglet-parametrage{ --accent:#B6A6E6; --accent-voile:#221E3A; }
body.sombre{ background-image:
  radial-gradient(1100px 440px at 10% -12%, rgba(43,167,160,.18), transparent 62%),
  radial-gradient(900px 380px at 100% 0%, rgba(142,124,195,.16), transparent 58%),
  linear-gradient(180deg,#132133,#0C1724); }
/* Logo posé sur une pastille claire pour rester lisible */
body.sombre .ui-logo{ background:#FFFFFF; border-radius:12px; padding:5px 10px; box-shadow:0 2px 10px rgba(0,0,0,.35); }
body.sombre .auth-carte{ background:#16263A; }
/* Sous-onglets du paramétrage : plus de bleu clair sur blanc */
body.sombre .ui-param-onglets button{ background:#12263B; color:#DCE9F7; border-color:#2B4058; }
body.sombre .ui-param-onglets button:hover{ border-color:var(--accent); }
body.sombre .ui-param-onglets button[aria-selected="true"]{ background:var(--accent); border-color:var(--accent); color:#0B1B29; }
body.sombre .ui-types button{ background:#12263B; color:#DCE9F7; border-color:#2B4058; }
body.sombre .ui-types button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#0B1B29; }
body.sombre .btn{ color:#DCE9F7; }
body.sombre .btn:hover{ color:#FFFFFF; border-color:var(--accent); }
body.sombre .btn-discret{ color:#A9BDD0; }
body.sombre .ui-deroulant-bouton, body.sombre select, body.sombre .ui-choix{ color:#EDF3F8; }
/* Les titres de l'interface seulement : jamais ceux du document, qui reste blanc */
body.sombre .ui-form h2, body.sombre .ui-form h3, body.sombre .ui-parametrage h2, body.sombre .ui-parametrage h3,
body.sombre .accueil-gauche h2, body.sombre .accueil-gauche h3, body.sombre .auth-carte h1{ color:#EDF3F8; }
body.sombre .ui-champ label, body.sombre .ui-libelle{ color:#C4D6E7; }
body.sombre .ui-noeud-nom, body.sombre .ui-identite-nom, body.sombre .ui-panneau-titre{ color:#EDF3F8; }
body.sombre .ui-horaire{ background:var(--turquoise); color:#06262A; }
body.sombre .ui-switch{ color:#A9BDD0; }
body.sombre .ui-switch[aria-checked="true"]{ color:#EDF3F8; }

/* La feuille d'aperçu conserve les couleurs du document, même en mode sombre */
body.sombre .ui-feuille .fiche, body.sombre .ui-feuille .fiche *{ border-color:inherit; }
body.sombre .ui-feuille .fiche h1{ color:#152F52; }
body.sombre .ui-feuille .fiche h2, body.sombre .ui-feuille .fiche h3{ color:#152F52; }
body.sombre .ui-feuille .fiche .nature, body.sombre .ui-feuille .fiche dt, body.sombre .ui-feuille .fiche .precision{ color:#5B6B7C; }

/* ---- Bloc groupes dans le formulaire ---- */
.ui-groupes{ border:1.5px dashed #C3B8E4; background:#F7F5FC; border-radius:14px; padding:10px 12px; margin:8px 0 12px; }
.ui-groupe{ border:1px solid var(--sep); border-radius:12px; padding:8px 10px; margin-bottom:8px; background:#fff; }
.ui-case{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--marine); margin-top:6px; }
.ui-temps{ max-width:260px; margin-bottom:6px; }
.ui-temps label{ font-size:11.5px; }
body.sombre .ui-groupes{ background:#1A1D33; border-color:#4B4270; }
body.sombre .ui-groupe{ background:#16263A; }
body.sombre .ui-case{ color:#DCE9F7; }

/* ---- Mode sombre : phases, étapes et listes du paramétrage ---- */
body.sombre .ui-phase, body.sombre .ui-etape, body.sombre .ui-item, body.sombre .ui-liste,
body.sombre .ui-obj-param, body.sombre .ui-sugg, body.sombre .ui-base, body.sombre .ui-liste-prog,
body.sombre .ui-puce, body.sombre .ui-creneau{ background:#16263A; border-color:#2B4058; color:var(--texte); }
body.sombre .ui-phase{ border-left-color:var(--accent); }
body.sombre .ui-sugg{ background:#132133; border-color:#3A5069; }
body.sombre .ui-base{ background:#12263B; }
body.sombre .ui-badge, body.sombre .ui-etiq{ filter:saturate(.9); }
body.sombre .ui-sous-titre{ color:#C4D6E7; }
body.sombre .ui-aide{ color:#9FB3C6; }
body.sombre .ui-puce{ color:#DCE9F7; border-color:#3A5069; }
body.sombre .ui-puce em{ color:#F3B0A6; }
body.sombre .ui-noeud-compte, body.sombre .ui-noeud-type{ color:#9FB3C6; }

/* ---- Fenêtres modales (assistant, tutoriel) ---- */
.ui-fenetre{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  background:rgba(12,23,36,.55); backdrop-filter:blur(2px); padding:20px; }
.ui-fenetre.ouvert{ display:flex; animation:zk-fondu .2s ease both; }
.ui-modale{ width:min(720px, 100%); max-height:90vh; display:flex; flex-direction:column; background:var(--surface);
  border-radius:20px; box-shadow:0 24px 60px rgba(10,20,35,.35); overflow:hidden; animation:zk-monte .26s cubic-bezier(.2,.7,.3,1) both; }
.ui-modale-tete{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--sep); }
.ui-modale-tete h2{ font-family:var(--titres); font-size:17px; color:var(--marine); margin:0; }
.ui-modale-corps{ padding:14px 18px; overflow-y:auto; }
.ui-modale-pied{ display:flex; gap:8px; justify-content:flex-end; padding:12px 18px; border-top:1px solid var(--sep); background:var(--gris); }
.ui-cases{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-bottom:6px; }
.ui-cases .ui-case{ margin-top:0; }
body.sombre .ui-modale{ background:#16263A; }
body.sombre .ui-modale-pied{ background:#12263B; }
body.sombre .ui-modale-tete h2{ color:#EDF3F8; }

/* ---- Tutoriel de bienvenue ---- */
.ui-tuto{ text-align:center; }
.ui-tuto .ui-tuto-image{ width:120px; height:auto; margin:0 auto 10px; display:block; }
.ui-tuto h3{ font-family:var(--titres); font-size:19px; color:var(--marine); margin:0 0 6px; }
.ui-tuto p{ margin:0 auto 10px; max-width:52ch; }
.ui-tuto-points{ display:flex; gap:6px; justify-content:center; margin-top:10px; }
.ui-tuto-point{ width:8px; height:8px; border-radius:50%; background:var(--sep); transition:background var(--transition), transform var(--transition); }
.ui-tuto-point.actif{ background:var(--turquoise); transform:scale(1.25); }
.ui-tuto-liste{ text-align:left; max-width:52ch; margin:0 auto; }
body.sombre .ui-tuto h3{ color:#EDF3F8; }

/* ---- Défilement : chaque panneau défile seul (conception et aperçu indépendants) ---- */
#application:not([hidden]){ display:flex; flex-direction:column; height:100vh; overflow:hidden; }
#application > section:not([hidden]){ flex:1 1 auto; min-height:0; }
#page-parametrage:not([hidden]){ display:flex; flex-direction:column; }
#page-parametrage .ui-parametrage{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.ui-corps > .ui-form, .ui-corps > .ui-apercu, .page-accueil > .accueil-gauche, .page-accueil > .ui-apercu{ min-height:0; overflow-y:auto; }

/* ---- Classeur ---- */
body.onglet-classeur{ --accent:#F5B335; --accent-voile:#FDF6E6; }
body.onglet-admin{ --accent:#FF7C6B; --accent-voile:#FFF0EE; }
.ui-onglets button[data-onglet="classeur"][aria-selected="true"] svg{ color:var(--safran); }
.ui-onglets button[data-onglet="admin"][aria-selected="true"] svg{ color:var(--corail); }
.ui-pic{ width:20px; height:20px; flex:0 0 auto; }
.ui-cl-dossier{ margin-left:calc(var(--profondeur, 0) * 18px); border-left:2px solid var(--sep); padding-left:8px; margin-bottom:4px; }
.ui-cl-tete{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; padding:4px 0; }
.ui-cl-plier{ display:inline-flex; align-items:center; gap:7px; border:0; background:none; font-weight:700; color:var(--marine); padding:4px 6px; border-radius:10px; transition:background var(--transition); }
.ui-cl-plier:hover{ background:var(--accent-voile); }
.ui-cl-fleche{ width:12px; color:var(--doux); }
.ui-cl-compte{ font-size:11px; font-weight:700; background:var(--gris); color:var(--doux); border-radius:999px; padding:0 7px; }
.ui-cl-actions{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; opacity:.55; transition:opacity var(--transition); }
.ui-cl-tete:hover .ui-cl-actions{ opacity:1; }
.ui-cl-contenu{ padding-left:10px; animation:zk-apparait .2s ease both; }
.ui-cl-element{ display:grid; grid-template-columns:24px 1fr auto 220px; gap:8px; align-items:center; padding:6px 8px; border-radius:10px; transition:background var(--transition); }
.ui-cl-element:hover{ background:var(--accent-voile); }
.ui-cl-titre{ border:0; background:none; text-align:left; font-weight:600; color:var(--marine); padding:0; }
.ui-cl-titre:hover{ text-decoration:underline; }
.ui-cl-meta{ font-size:12px; color:var(--doux); }
.ui-cl-ranger{ font-size:12px; padding:4px 6px; border-radius:8px; border:1px solid var(--sep); }
@media (max-width: 900px){ .ui-cl-element{ grid-template-columns:24px 1fr; } .ui-cl-meta, .ui-cl-ranger{ grid-column:2; } }

/* ---- Administration ---- */
.ui-tuiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; }
.ui-tuile{ border-radius:14px; padding:12px 14px; background:var(--gris); border-top:4px solid var(--couleur); display:flex; flex-direction:column; gap:2px;
  transition:transform var(--transition), box-shadow var(--transition); }
.ui-tuile:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(21,47,82,.10); }
.ui-tuile-valeur{ font-family:var(--titres); font-weight:800; font-size:26px; color:var(--marine); }
.ui-tuile-libelle{ font-size:12px; color:var(--doux); }

/* ---- Pièces jointes ---- */
.ui-pieces{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.ui-piece{ display:grid; grid-template-columns:1fr auto 28px; gap:8px; align-items:center; border:1px solid var(--sep); border-radius:10px; padding:6px 8px; }
.ui-piece-nom{ font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-depot{ cursor:pointer; display:inline-flex; }

body.sombre .ui-cl-plier, body.sombre .ui-cl-titre, body.sombre .ui-tuile-valeur{ color:#EDF3F8; }
body.sombre .ui-tuile, body.sombre .ui-cl-compte{ background:#12263B; }
body.sombre .ui-cl-ranger, body.sombre .ui-piece{ background:#0F1F31; border-color:#2B4058; color:#EDF3F8; }

/* ==========================================================================
   V7.1 — REFONTE : plus aéré, plus doux, plus vivant
   ========================================================================== */
:root{ --rayon:18px; --rayon-petit:12px; --ombre-douce:0 1px 2px rgba(21,47,82,.05), 0 10px 30px rgba(21,47,82,.07);
  --ombre-survol:0 2px 6px rgba(21,47,82,.08), 0 18px 40px rgba(21,47,82,.12); --ressort:cubic-bezier(.34,1.56,.64,1); }

/* ---- Fond : maillage de couleurs très doux ---- */
body{ background-image:
  radial-gradient(900px 520px at 0% 0%, rgba(43,167,160,.13), transparent 60%),
  radial-gradient(800px 480px at 100% 10%, rgba(245,179,53,.12), transparent 60%),
  radial-gradient(900px 600px at 60% 110%, rgba(142,124,195,.10), transparent 60%),
  linear-gradient(180deg, #FAFCFD, #F2F6F9); }

/* ---- Barre supérieure en verre dépoli ---- */
.ui-barre{ background:rgba(255,255,255,.82); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgba(21,47,82,.07); box-shadow:0 6px 24px rgba(21,47,82,.06); padding-top:10px; padding-bottom:10px; }
.ui-barre::before{ height:3px; background:var(--marine); opacity:.9; }
.ui-logo{ height:40px; transition:transform .3s var(--ressort); }
.ui-logo:hover{ transform:rotate(-3deg) scale(1.05); }
.ui-onglets{ background:rgba(21,47,82,.05); border-radius:16px; padding:5px; gap:2px; }
.ui-onglets button{ border-radius:12px; padding:8px 14px; font-weight:700; }
.ui-onglets button:hover{ background:rgba(255,255,255,.7); }
.ui-onglets button[aria-selected="true"]{ background:#fff; box-shadow:0 4px 14px rgba(21,47,82,.12); transform:none; }
.ui-onglets button[aria-selected="true"]::after{ left:50%; right:auto; width:22px; margin-left:-11px; bottom:2px; border-radius:3px;
  animation:zk-indicateur .35s var(--ressort) both; }
@keyframes zk-indicateur{ from{ width:0; margin-left:0; opacity:0; } to{ width:22px; margin-left:-11px; opacity:1; } }

/* ---- Déconnexion rapide ---- */
.ui-bascules{ display:flex; gap:8px; align-items:center; }
.ui-deconnexion{ display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--sep); background:#fff; color:var(--marine);
  border-radius:999px; padding:5px 12px 5px 9px; font-size:12.5px; font-weight:700;
  transition:background .18s, color .18s, border-color .18s, transform .18s var(--ressort); }
.ui-deconnexion svg{ width:16px; height:16px; }
.ui-deconnexion:hover{ background:#FFF0EE; border-color:var(--corail); color:#C0473A; transform:translateY(-1px); }
.ui-deconnexion:active{ transform:scale(.96); }
.ui-barre{ padding-right:330px; }

/* ---- Indicateur d'enregistrement ---- */
.ui-etat{ border-radius:999px; padding:3px 10px; background:rgba(123,201,111,.14); color:#2E6B26; font-weight:600; font-size:12px; }
.ui-etat.alerte{ background:#FDECEA; color:#9B2C1F; }
.ui-etat.pulse{ animation:zk-pouls .6s ease; }
@keyframes zk-pouls{ 0%{ transform:scale(1); } 40%{ transform:scale(1.06); } 100%{ transform:scale(1); } }

/* ---- Cartes : plus rondes, plus aérées, liseré discret ---- */
.ui-carte{ border-radius:var(--rayon); border:1px solid rgba(21,47,82,.07); box-shadow:var(--ombre-douce); padding:18px 20px 20px; background:rgba(255,255,255,.94); }
.ui-carte::before{ left:20px; right:auto; top:0; bottom:auto; width:36px; height:4px; border-radius:0 0 4px 4px; }
.ui-carte:hover{ box-shadow:var(--ombre-survol); transform:translateY(-1px); }
.ui-carte h2{ font-size:16.5px; letter-spacing:-.01em; margin-bottom:12px; }
.ui-carte h2 small{ font-weight:500; }
.ui-carte-info{ background:linear-gradient(135deg, rgba(43,167,160,.10), rgba(255,255,255,.95)); }

/* ---- Champs ---- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="time"], input[type="date"], select, textarea{
  border-radius:var(--rayon-petit); background:#F8FAFC; border:1.5px solid #E1E9EE; }
input:hover, select:hover, textarea:hover{ border-color:#C9D7E0; }
input:focus, select:focus, textarea:focus{ background:#fff; }
.ui-champ label, .ui-libelle{ letter-spacing:.005em; }

/* ---- Boutons : relief, éclat, appui ---- */
.btn{ border-radius:var(--rayon-petit); position:relative; overflow:hidden; }
.btn:active{ transform:scale(.97); }
.btn-principal{ background:linear-gradient(135deg, #1B3D69, var(--marine)); box-shadow:0 6px 16px rgba(21,47,82,.22); }
.btn-principal::after{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-20deg); transition:left .6s ease; }
.btn-principal:hover::after{ left:120%; }

/* ---- Barre de panneau ---- */
.ui-panneau-titre{ font-size:15px; }
.ui-panneau-titre::before{ width:12px; height:12px; border-radius:4px; box-shadow:0 0 0 4px var(--accent-voile); }

/* ---- Transitions entre onglets ---- */
.entree{ animation:zk-entree .38s cubic-bezier(.2,.7,.3,1) both; }
@keyframes zk-entree{ from{ opacity:0; transform:translateY(10px) scale(.995); } to{ opacity:1; transform:none; } }

/* ---- Bandeaux ---- */
.ui-bandeau{ animation:zk-descend .35s cubic-bezier(.2,.7,.3,1) both; }
.ui-bandeau svg{ width:18px; height:18px; flex:0 0 auto; }
.ui-bandeau.sort{ animation:zk-remonte .26s ease both; }
.ui-bandeau-info{ background:linear-gradient(90deg, #E8F6F5, #F1FAF9); color:#14625C; border-bottom:1px solid #A9D9D5; }
.ui-bandeau-info b{ color:#0E4C47; }
.ui-bandeau-info .btn{ border-color:#7CC6C0; color:#14625C; background:#fff; }
@keyframes zk-descend{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@keyframes zk-remonte{ to{ opacity:0; transform:translateY(-8px); } }

/* ---- Notifications ---- */
.ui-toasts{ position:fixed; right:18px; bottom:18px; z-index:70; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.ui-toast{ pointer-events:auto; background:#152F52; color:#fff; border-radius:14px; padding:10px 14px; font-size:13px; font-weight:600;
  box-shadow:0 12px 30px rgba(10,20,35,.28); max-width:360px; animation:zk-toast .35s var(--ressort) both; }
.ui-toast.erreur{ background:#B4453A; }
.ui-toast.sort{ animation:zk-toast-sort .35s ease both; }
@keyframes zk-toast{ from{ opacity:0; transform:translateY(12px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes zk-toast-sort{ to{ opacity:0; transform:translateX(20px); } }

/* ---- Écran de connexion : fond animé ---- */
.auth{ position:relative; overflow:hidden; background:linear-gradient(160deg, #EEF6F8 0%, #F6F2FB 55%, #FDF6EA 100%); }
.auth::before, .auth::after{ content:''; position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(60px); opacity:.45; z-index:0; }
.auth::before{ background:#2BA7A0; top:-160px; left:-120px; animation:zk-flotte 14s ease-in-out infinite alternate; }
.auth::after{ background:#F5B335; bottom:-180px; right:-120px; animation:zk-flotte 16s ease-in-out infinite alternate-reverse; }
@keyframes zk-flotte{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(60px,40px) scale(1.08); } }
.auth-carte{ position:relative; z-index:1; background:rgba(255,255,255,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.7); border-radius:26px; box-shadow:0 30px 70px rgba(21,47,82,.16); padding:30px 30px 26px; }
.auth-logo{ animation:zk-monte .6s .1s var(--ressort) both; }

/* ---- Barres de défilement fines ---- */
*{ scrollbar-width:thin; scrollbar-color:#C4D2DC transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:#C4D2DC; border-radius:999px; border:2px solid transparent; background-clip:padding-box; }

/* ---- Mode sombre ---- */
body.sombre{ background-image:
  radial-gradient(900px 520px at 0% 0%, rgba(43,167,160,.16), transparent 60%),
  radial-gradient(800px 480px at 100% 10%, rgba(142,124,195,.14), transparent 60%),
  linear-gradient(180deg, #111E2E, #0B1622); }
body.sombre .ui-barre{ background:rgba(20,34,52,.82); border-bottom-color:rgba(255,255,255,.06); }
body.sombre .ui-onglets{ background:rgba(255,255,255,.05); }
body.sombre .ui-onglets button:hover{ background:rgba(255,255,255,.06); }
body.sombre .ui-onglets button[aria-selected="true"]{ background:#1D3350; }
body.sombre .ui-carte{ background:rgba(22,38,58,.94); border-color:rgba(255,255,255,.06); }
body.sombre .ui-carte-info{ background:linear-gradient(135deg, rgba(43,167,160,.16), rgba(22,38,58,.95)); }
body.sombre input[type="text"], body.sombre input[type="email"], body.sombre input[type="password"], body.sombre input[type="number"],
body.sombre input[type="search"], body.sombre input[type="time"], body.sombre input[type="date"], body.sombre select, body.sombre textarea{ background:#0F1F31; border-color:#2B4058; }
body.sombre input:focus, body.sombre select:focus, body.sombre textarea:focus{ background:#12263B; }
body.sombre .ui-deconnexion{ background:#16263A; border-color:#2B4058; color:#DCE9F7; }
body.sombre .ui-deconnexion:hover{ background:#3B1A17; border-color:#E0786B; color:#F6C9C2; }
body.sombre .ui-etat{ background:rgba(123,201,111,.16); color:#BFE8B7; }
body.sombre .ui-bandeau-info{ background:linear-gradient(90deg,#123833,#10302C); color:#BEE9E4; border-color:#2BA7A0; }
body.sombre .ui-bandeau-info b{ color:#E2F6F3; }
body.sombre .ui-bandeau-info .btn{ background:#16263A; color:#BEE9E4; border-color:#2BA7A0; }
body.sombre .auth{ background:linear-gradient(160deg,#0E1B29,#161B33 55%,#1B1A12); }
body.sombre .auth-carte{ background:rgba(22,38,58,.86); border-color:rgba(255,255,255,.06); }
body.sombre *{ scrollbar-color:#35506B transparent; }
@media (max-width: 720px){ .ui-barre{ padding-right:16px; } }

/* ---- Bandeaux d'information (base) ---- */
.ui-bandeau{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:10px 20px; font-size:13px; line-height:1.45;
  background:linear-gradient(90deg,#FDF6E6,#FCEFD2); color:#6B4E0E; border-bottom:1px solid #E3C27A; }
.ui-bandeau > span{ flex:1 1 420px; }
.ui-bandeau b{ color:#5A4109; }
.ui-bandeau .btn{ background:#fff; border-color:#D9B15E; color:#6B4E0E; }
body.sombre .ui-bandeau:not(.ui-bandeau-info){ background:linear-gradient(90deg,#3A3115,#2C2610); color:#F4DFA6; border-color:#8A6C1F; }
body.sombre .ui-bandeau:not(.ui-bandeau-info) b{ color:#FFE9B0; }
body.sombre .ui-bandeau:not(.ui-bandeau-info) .btn{ background:#1D2A3C; border-color:#8A6C1F; color:#F4DFA6; }

/* ---- Barre : actions du document sur une seconde ligne, nette ---- */
.ui-barre{ flex-wrap:wrap; row-gap:10px; }
.groupe-seance, .groupe-sequence{ order:50; flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  border:0 !important; background:none !important; padding:0 !important; box-shadow:none !important; }
.groupe-seance .ui-choix, .groupe-sequence .ui-choix{ min-width:240px; max-width:340px; }
.ui-etat, .ui-compte-courant{ order:60; }
.ui-etat{ margin-left:auto; }

/* ==========================================================================
   V7.2 — COULEURS DES MATIÈRES, EMPLOI DU TEMPS, FINITIONS
   ========================================================================== */
/* ---- Créneaux colorés par matière ---- */
.ui-edt{ gap:12px; }
.ui-edt-jour h3{ font-size:13.5px; text-align:center; padding:6px 0; border-radius:10px; background:rgba(21,47,82,.05); margin-bottom:8px; }
.ui-creneau{ grid-template-columns:1fr 28px; gap:5px; border:1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-left:5px solid var(--c); background:var(--c-voile); border-radius:12px; padding:7px;
  transition:transform .2s var(--ressort), box-shadow .2s; animation:zk-apparait .25s ease both; }
.ui-creneau:hover{ transform:translateY(-2px) scale(1.01); box-shadow:0 10px 22px color-mix(in srgb, var(--c) 25%, transparent); }
.ui-creneau select{ grid-column:1 / 2; font-weight:700; color:var(--c); background:#fff; border-color:color-mix(in srgb, var(--c) 35%, #E1E9EE); }
.ui-creneau input[type=text]{ grid-column:1 / 2; background:rgba(255,255,255,.75); }
.ui-creneau .ui-icone{ grid-row:1; grid-column:2; }
.ui-ajout-creneau{ width:100%; justify-content:center; border-style:dashed; }
.ui-carte-edt .ui-ajouts .btn:not(.btn-principal){ background:#fff; }

/* ---- Matières et couleurs ---- */
.ui-couleurs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin:10px 0; }
.ui-couleur{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--c-voile);
  border:1px solid color-mix(in srgb, var(--c) 35%, transparent); cursor:pointer; transition:transform .2s var(--ressort), box-shadow .2s; }
.ui-couleur:hover{ transform:translateY(-2px); box-shadow:0 10px 22px color-mix(in srgb, var(--c) 25%, transparent); }
.ui-couleur input[type=color]{ width:36px; height:36px; border:0; border-radius:10px; padding:0; background:none; cursor:pointer; }
.ui-couleur-nom{ font-weight:700; color:#152F52; }

/* ---- Bouton de suppression ---- */
.btn-danger{ border-color:#E8A79F; color:#B4453A; background:#fff; }
.btn-danger:hover{ background:#FDECEA; border-color:#E0786B; color:#9B2C1F; }

/* ---- Capture de l'emploi du temps (hors écran) ---- */
.ui-capture{ position:fixed; left:-12000px; top:0; width:210mm; background:#fff; }
.ui-capture .ui-feuille{ transform:none !important; box-shadow:none; }

/* ---- Effet d'onde au clic ---- */
.btn, .ui-onglets button, .ui-switch, .ui-deconnexion{ position:relative; overflow:hidden; }
.zk-onde{ position:absolute; border-radius:50%; transform:scale(0); background:currentColor; opacity:.22; pointer-events:none;
  animation:zk-onde .55s ease-out forwards; }
@keyframes zk-onde{ to{ transform:scale(2.6); opacity:0; } }

/* ---- Survol des cartes : léger reflet ---- */
.ui-carte::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(400px 160px at var(--mx, 50%) -20%, rgba(43,167,160,.10), transparent 70%); transition:opacity .3s; }
.ui-carte:hover::after{ opacity:1; }

/* ---- Mode sombre ---- */
body.sombre .ui-edt-jour h3{ background:rgba(255,255,255,.06); }
body.sombre .ui-creneau{ background:color-mix(in srgb, var(--c) 16%, #16263A); }
body.sombre .ui-creneau select{ background:#0F1F31; color:#EDF3F8; }
body.sombre .ui-creneau input[type=text]{ background:#0F1F31; }
body.sombre .ui-couleur{ background:color-mix(in srgb, var(--c) 16%, #16263A); }
body.sombre .ui-couleur-nom{ color:#EDF3F8; }
body.sombre .btn-danger{ background:#16263A; color:#F6C9C2; border-color:#8A4A42; }

/* ==========================================================================
   V7.3 — ADMINISTRATION ET ÉTIQUETTES
   ========================================================================== */
.ui-tuile-sous{ font-size:11px; color:var(--doux); margin-top:2px; }
.ui-barre-admin{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.ui-barre-admin input[type=search]{ flex:1 1 200px; max-width:320px; }
.ui-barre-admin select{ max-width:200px; }
.ui-filtres{ display:flex; flex-wrap:wrap; gap:6px; }
.ui-filtres button{ border:1.5px solid var(--sep); background:#fff; border-radius:999px; padding:5px 12px; font-weight:600; font-size:12.5px; color:var(--marine);
  transition:all .18s; }
.ui-filtres button span{ display:inline-block; min-width:18px; padding:0 6px; margin-left:4px; border-radius:999px; background:var(--gris); font-size:11px; }
.ui-filtres button:hover{ border-color:var(--accent); transform:translateY(-1px); }
.ui-filtres button[aria-pressed="true"]{ background:var(--marine); color:#fff; border-color:var(--marine); }
.ui-filtres button[aria-pressed="true"] span{ background:rgba(255,255,255,.2); }
.ui-table-comptes{ display:flex; flex-direction:column; gap:6px; }
.ui-ligne-compte{ border:1px solid var(--sep); border-radius:14px; background:#fff; overflow:hidden; transition:box-shadow .2s, border-color .2s; }
.ui-ligne-compte:hover{ border-color:#C9D7E0; box-shadow:0 6px 18px rgba(21,47,82,.08); }
.ui-ligne-compte.ouvert{ border-color:var(--accent); box-shadow:0 10px 26px rgba(21,47,82,.10); }
.ui-ligne-compte-tete{ width:100%; display:grid; grid-template-columns:36px minmax(160px, 2fr) 1fr 1fr auto 20px; gap:10px; align-items:center;
  border:0; background:none; text-align:left; padding:9px 12px; }
.ui-pastille.petite{ width:34px; height:34px; border-radius:10px; font-size:13px; }
.ui-lc-nom{ display:flex; flex-direction:column; min-width:0; }
.ui-lc-nom small{ color:var(--doux); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-lc-info{ font-size:12.5px; color:var(--doux); }
.ui-lc-fleche{ color:var(--doux); }
.ui-lc-detail{ padding:4px 14px 14px 58px; animation:zk-apparait .22s ease both; }
.ui-badge-etat{ font-size:11px; font-weight:700; border-radius:999px; padding:3px 9px; white-space:nowrap; }
.ui-badge-etat.attente{ background:#FDF1D8; color:#8A5E08; }
.ui-badge-etat.valide{ background:#E7F5E4; color:#2E6B26; }
.ui-badge-etat.admin{ background:#EEEAF8; color:#5A4A9A; }
.ui-annonce-apercu{ border-radius:12px; padding:9px 12px; margin-bottom:10px; background:#E8F6F5; color:#14625C; }
.ui-annonce-apercu.important{ background:#FDECEA; color:#9B2C1F; }
.ui-bandeau-annonce{ background:linear-gradient(90deg,#EEF4FB,#F4F8FC) !important; color:#1D3F6A !important; border-bottom:1px solid #BCD0E6 !important; }
.ui-bandeau-annonce.important{ background:linear-gradient(90deg,#FDECEA,#FDF3F1) !important; color:#8A2A1E !important; border-color:#E8A79F !important; }
.ui-etiquette-perso{ display:grid; grid-template-columns:40px 1fr 28px; gap:8px; align-items:center; border-left:5px solid var(--c); border-radius:12px; padding:6px 8px; }
.ui-etiquette-perso input[type=color]{ width:34px; height:34px; border:0; padding:0; background:none; border-radius:10px; cursor:pointer; }
@media (max-width: 860px){ .ui-ligne-compte-tete{ grid-template-columns:36px 1fr auto; } .ui-lc-info, .ui-lc-fleche{ display:none; } .ui-lc-detail{ padding-left:14px; } }
body.sombre .ui-filtres button, body.sombre .ui-ligne-compte{ background:#16263A; color:#EDF3F8; border-color:#2B4058; }
body.sombre .ui-filtres button[aria-pressed="true"]{ background:var(--accent); color:#0B1B29; }
body.sombre .ui-filtres button span{ background:#0F1F31; }
body.sombre .ui-bandeau-annonce{ background:linear-gradient(90deg,#132840,#10223A) !important; color:#CFE2F7 !important; border-color:#2B4058 !important; }

/* ==========================================================================
   V7.4 — PALETTE DE LA CHARTE, ÉTIQUETTES, NOIR ET BLANC, MODE SOMBRE
   ========================================================================== */
/* ---- Palette ---- */
.ui-palette{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; margin:6px 0 12px; }
.ui-palette-famille{ display:flex; flex-direction:column; gap:5px; padding:8px; border-radius:12px; background:var(--gris); }
.ui-palette-famille > span{ font-size:11px; font-weight:700; color:var(--doux); }
.ui-palette-famille{ flex-direction:row; flex-wrap:wrap; align-items:center; }
.ui-palette-famille > span{ flex:1 1 100%; }
.ui-pastille-couleur{ width:26px; height:26px; border-radius:50%; background:var(--c); border:2px solid #fff; box-shadow:0 0 0 1px rgba(21,47,82,.18);
  transition:transform .2s var(--ressort), box-shadow .2s; cursor:pointer; padding:0; }
.ui-pastille-couleur:hover{ transform:scale(1.15); }
.ui-pastille-couleur.choisie{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--c); transform:scale(1.1); }
/* ---- Étiquette ---- */
.ui-etiquette{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-weight:700; font-size:13px;
  background:color-mix(in srgb, var(--c) 16%, #fff); color:#152F52; border:1.5px solid var(--c); }
.ui-etiquette::before{ content:''; width:9px; height:9px; border-radius:50%; background:var(--c); }
.ui-apercu-etiquette{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border-radius:12px; background:var(--gris); }
.ui-retrait{ margin-left:22px; }
.ui-creer-etiquette{ grid-column:1 / 2; justify-content:center; font-size:12px; border-style:dashed; }
/* ---- Tuiles de couleur (Paramétrage) ---- */
button.ui-couleur{ text-align:left; font:inherit; width:100%; }
.ui-couleur-rond{ width:28px; height:28px; border-radius:50%; background:var(--c); flex:0 0 auto; box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
.ui-couleur-texte{ display:flex; flex-direction:column; min-width:0; }
.ui-couleur-sous{ font-size:11.5px; color:var(--doux); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ---- Aperçu en noir et blanc ---- */
body.apercu-nb .ui-feuille, body.apercu-nb .ui-cadre-pages{ filter:grayscale(1); transition:filter .3s; }
.ui-feuille, .ui-cadre-pages{ transition:filter .3s; }

/* ---- Mode sombre : emploi du temps et boutons lisibles ---- */
body.sombre .btn-principal{ background:linear-gradient(135deg, #2BA7A0, #1E8A84) !important; color:#062A28 !important; border-color:#2BA7A0 !important; }
body.sombre .btn-principal:hover{ background:linear-gradient(135deg, #3CC2BA, #2BA7A0) !important; }
body.sombre .ui-carte-edt .ui-ajouts .btn:not(.btn-principal), body.sombre .btn:not(.btn-principal):not(.btn-danger){
  background:#16263A !important; color:#DCE9F7 !important; border-color:#2B4058 !important; }
body.sombre .btn:not(.btn-principal):not(.btn-danger):hover{ border-color:var(--accent) !important; color:#FFFFFF !important; }
body.sombre .ui-creneau select option{ background:#0F1F31; color:#EDF3F8; }
body.sombre .ui-creer-etiquette{ background:transparent !important; }
body.sombre .ui-edt-jour h3{ color:#EDF3F8; }
body.sombre .ui-palette-famille, body.sombre .ui-apercu-etiquette{ background:#12263B; }
body.sombre .ui-pastille-couleur{ border-color:#16263A; }
body.sombre .ui-etiquette{ background:color-mix(in srgb, var(--c) 22%, #16263A); color:#EDF3F8; }
/* Créneaux étroits : le bouton de création reste lisible */
.ui-creer-etiquette{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:6px; padding-right:6px; }
.ui-edt{ overflow-x:auto; }
.ui-edt-jour{ min-width:150px; }

/* ---- V7.5 : précision facultative d'un créneau ---- */
.ui-creneau .ui-precision{ grid-column:1 / 2; font-size:12.5px; padding:5px 8px; background:rgba(255,255,255,.8); font-style:italic; }
body.sombre .ui-creneau .ui-precision{ background:#0F1F31; color:#EDF3F8; }
/* ---- V7.5 : créneau réorganisé, rien n'est tronqué ---- */
.ui-creneau{ grid-template-columns:1fr auto; align-items:center; }
.ui-creneau .ui-creneau-h{ grid-column:1 / 2; grid-row:1; display:flex; gap:4px; min-width:0; }
.ui-creneau .ui-creneau-h input[type=time]{ flex:1 1 0; min-width:0; font-size:11.5px; padding:4px 5px; }
.ui-creneau > .ui-icone, .ui-creneau > button[data-action="suppr-creneau"]{ grid-column:2; grid-row:1; }
.ui-creneau > select, .ui-creneau > .ui-precision, .ui-creneau > .ui-creer-etiquette{ grid-column:1 / -1; width:100%; min-width:0; }
.ui-creneau > select{ font-size:13px; padding:6px 8px; }
/* horaires sur toute la largeur ; bouton de suppression à côté de « Créer une étiquette » */
.ui-creneau .ui-creneau-h{ grid-column:1 / -1; grid-row:1; }
.ui-creneau > select{ grid-row:2; }
.ui-creneau > .ui-precision{ grid-row:3; }
.ui-creneau > .ui-creer-etiquette{ grid-column:1 / 2; grid-row:4; }
.ui-creneau > .ui-icone, .ui-creneau > button[data-action="suppr-creneau"]{ grid-column:2; grid-row:4; }
.ui-creneau .ui-precision::placeholder{ font-size:11.5px; }
.ui-creneau input[type=time]::-webkit-calendar-picker-indicator{ display:none; }
.ui-creneau input[type=time]{ text-align:center; }
.ui-creneau > .ui-precision{ width:100% !important; max-width:none !important; box-sizing:border-box; }
.ui-creneau > input.ui-precision[type=text]{ grid-column:1 / -1; }
body.sombre .ui-creneau button[data-action="suppr-creneau"]{ background:#0F1F31; color:#DCE9F7; border-color:#2B4058; }
body.sombre .ui-creneau button[data-action="suppr-creneau"]:hover{ background:#3B1A17; color:#F6C9C2; }

/* ---- V7.6 : copier-coller des créneaux ---- */
.ui-edt-jour-actions{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin:-2px 0 8px; min-height:4px; }
.ui-edt-jour-actions .btn{ font-size:11.5px; padding:3px 9px; }
.ui-coller{ border-color:var(--turquoise); color:#14625C; background:#E8F6F5; animation:zk-pouls 1.2s ease 2; }
.ui-creneau-actions{ grid-column:2; grid-row:4; display:flex; gap:4px; }
.ui-creneau-actions .btn-icone svg{ width:15px; height:15px; }
.ui-presse-papier{ margin:0 0 10px; padding:9px 12px; border-radius:12px; background:#E8F6F5; color:#14625C; font-size:13px; border:1px solid #A9D9D5; animation:zk-apparait .25s ease both; }
body.sombre .ui-presse-papier{ background:#123833; color:#BEE9E4; border-color:#2BA7A0; }
body.sombre .ui-coller{ background:#123833 !important; color:#BEE9E4 !important; border-color:#2BA7A0 !important; }
body.sombre .ui-creneau button[data-action="copier-creneau"]{ background:#0F1F31; color:#DCE9F7; border-color:#2B4058; }
body.sombre .ui-edt-jour-actions .btn.ui-coller{ background:#123833 !important; color:#BEE9E4 !important; border-color:#2BA7A0 !important; }

/* ---- V7.7 : durée d'un créneau ---- */
.ui-creneau .ui-creneau-h{ display:grid; grid-template-columns:1fr auto 1fr; gap:4px; align-items:center; }
.ui-duree{ display:inline-flex; align-items:center; gap:2px; border:1.5px solid #E1E9EE; background:#fff; border-radius:10px; padding:0 6px 0 2px; }
.ui-duree input[type=number]{ width:36px; border:0 !important; background:transparent !important; padding:4px 0 4px 3px; font-size:12px; font-weight:700;
  text-align:right; -moz-appearance:textfield; box-shadow:none !important; }
.ui-duree input[type=number]::-webkit-inner-spin-button, .ui-duree input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.ui-duree span{ font-size:11px; color:var(--doux); }
.ui-duree:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.ui-creneau .ui-creneau-h input[type=time]{ padding:4px 3px; font-size:11.5px; }
.ui-creneau .ui-creneau-h input[data-edt="fin"]{ color:var(--doux); }
body.sombre .ui-duree{ background:#0F1F31; border-color:#2B4058; }
body.sombre .ui-duree input[type=number]{ color:#EDF3F8; }

/* ---- V7.8 : emploi du temps en consultation / en modification ---- */
.ui-edt-titre{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ui-edt-titre h2{ margin-bottom:0; }
.ui-mode-edt{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;
  background:#EEF3F7; color:#152F52; border:1px solid #D5E0E8; }
.ui-mode-edt svg, .ui-btn-modifier svg{ width:15px; height:15px; }
.ui-mode-edt-modif{ background:#FEF3DC; color:#7A5200; border-color:#F5B335; }
.ui-btn-modifier{ display:inline-flex; align-items:center; gap:6px; }
.ui-carte-edt > .ui-ajouts{ margin-top:12px; }
.ui-edt-edition{ box-shadow:0 0 0 2px #F5B335 inset, var(--ombre, 0 2px 10px rgba(21,47,82,.08)); }
.ui-creneau-lu{ border-left:5px solid var(--c); background:var(--c-voile); border-radius:10px; padding:7px 10px; margin-bottom:6px;
  display:flex; flex-direction:column; gap:1px; animation:zk-apparait .2s ease both; }
.ui-creneau-lu-h{ font-size:11.5px; font-weight:700; color:#4A5D70; font-variant-numeric:tabular-nums; }
.ui-creneau-lu b{ font-size:13.5px; color:#152F52; line-height:1.25; }
.ui-creneau-lu em{ font-size:12px; color:#152F52; opacity:.85; }
.ui-edt-vide{ font-size:12px; color:var(--doux); font-style:italic; text-align:center; margin:6px 0; }
body.sombre .ui-mode-edt{ background:#0F1F31; color:#DCE9F7; border-color:#2B4058; }
body.sombre .ui-mode-edt-modif{ background:#3A2C0C; color:#FFD98A; border-color:#F5B335; }
body.sombre .ui-creneau-lu{ background:#0F1F31; }
body.sombre .ui-creneau-lu b, body.sombre .ui-creneau-lu em{ color:#EDF3F8; }
body.sombre .ui-creneau-lu-h{ color:#A9BCD0; }

/* ---- V7.9 : onglet Emploi du temps, grille proportionnelle, volumes horaires ---- */
#page-edt:not([hidden]){ display:flex; flex-direction:column; }
.ui-page-edt{ max-width:1280px; width:100%; margin:0 auto; }
.ui-carte-edt .ui-edt-titre .btn svg{ width:14px; height:14px; vertical-align:-2px; margin-right:4px; }

.zk-grille{ --gout:44px; font-family:var(--texte, 'Poppins', sans-serif); overflow-x:auto; }
.zk-grille.compacte{ --gout:32px; }
.zk-grille-tete, .zk-grille-corps{ display:grid; grid-template-columns:var(--gout) repeat(var(--jours), minmax(92px, 1fr)); gap:0 6px; min-width:calc(var(--gout) + var(--jours) * 98px); }
.zk-grille.compacte .zk-grille-tete, .zk-grille.compacte .zk-grille-corps{ grid-template-columns:var(--gout) repeat(var(--jours), minmax(64px, 1fr)); gap:0 4px; min-width:0; }
.zk-grille-tete{ position:sticky; top:0; z-index:3; margin-bottom:6px; }
.zk-grille-tete span:not(:empty){ text-align:center; font-family:var(--titres); font-weight:700; font-size:13px; color:#152F52; background:rgba(21,47,82,.05); border-radius:10px; padding:6px 0; }
.zk-grille.compacte .zk-grille-tete span:not(:empty){ font-size:12px; padding:4px 0; }
.zk-grille-tete span.aujourdhui{ background:#2BA7A0 !important; color:#fff !important; }
.zk-heures{ position:relative; }
.zk-heures span{ position:absolute; right:6px; transform:translateY(-50%); font-size:11px; font-weight:600; color:#4A5D70; font-variant-numeric:tabular-nums; }
.zk-heures span:first-child{ transform:none; }
.zk-col{ position:relative; border-radius:10px; background-color:rgba(21,47,82,.025);
  background-image:repeating-linear-gradient(to bottom, rgba(21,47,82,.13) 0 1px, transparent 1px var(--heure)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--heure) / 2), rgba(21,47,82,.06) calc(var(--heure) / 2) calc(var(--heure) / 2 + 1px), transparent calc(var(--heure) / 2 + 1px) var(--heure)); }
.zk-col.aujourdhui{ background-color:rgba(43,167,160,.07); box-shadow:inset 0 0 0 1.5px rgba(43,167,160,.45); }
.zk-bloc{ position:absolute; left:3px; right:3px; height:var(--h); overflow:hidden; box-sizing:border-box; border-radius:7px;
  background:var(--c-voile); border-left:4px solid var(--c); padding:3px 6px; display:flex; flex-direction:column; gap:0; line-height:1.2;
  color:#152F52; transition:box-shadow .15s ease, transform .15s ease; cursor:default; }
.zk-bloc b{ font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zk-bloc em{ font-size:11px; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9; }
.zk-bloc .zk-bloc-h{ font-size:10.5px; font-weight:600; color:#4A5D70; font-variant-numeric:tabular-nums; white-space:nowrap; }
.zk-bloc.moyen{ flex-direction:row; align-items:center; gap:6px; padding-top:1px; padding-bottom:1px; }
.zk-bloc.moyen em{ display:none; }
.zk-bloc.moyen .zk-bloc-h{ order:2; margin-left:auto; }
.zk-bloc.petit{ padding:0 5px; justify-content:center; }
.zk-bloc.petit b{ font-size:10px; }
.zk-bloc.petit .zk-bloc-h, .zk-bloc.petit em, .zk-bloc.mini > *{ display:none; }
.zk-bloc.mini{ padding:0; border-left-width:4px; }
.zk-grille.compacte .zk-bloc{ left:2px; right:2px; padding-left:4px; padding-right:4px; }
.zk-grille.compacte .zk-bloc b{ font-size:11px; }
.zk-grille.compacte .zk-bloc.moyen .zk-bloc-h{ display:none; }
/* Survol : le bloc s'agrandit pour montrer tout son contenu */
.zk-bloc:hover{ height:auto; min-height:var(--h); z-index:4; overflow:visible; box-shadow:0 6px 18px rgba(21,47,82,.22); flex-direction:column; align-items:stretch;
  padding:4px 7px; background:#fff; }
.zk-bloc:hover > *{ display:block !important; white-space:normal; }
.zk-bloc:hover .zk-bloc-h{ order:0; margin:0; }
.zk-bloc:hover b{ font-size:12px; }
.zk-maintenant{ position:absolute; left:-3px; right:0; height:0; border-top:2px solid #FF7C6B; z-index:5; pointer-events:none; }
.zk-maintenant::before{ content:''; position:absolute; left:-3px; top:-5px; width:8px; height:8px; border-radius:50%; background:#FF7C6B; }
.zk-zoom{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; font-size:12px; color:var(--doux); }
.zk-zoom .btn{ min-width:30px; padding:3px 8px; font-size:14px; line-height:1; }
.zk-note{ margin-top:10px; font-size:12px; }

/* Volumes horaires */
.zk-volumes-corps{ display:grid; grid-template-columns:minmax(0, 1fr) 260px; gap:22px; align-items:start; margin-top:12px; }
@media (max-width: 1100px){ .zk-volumes-corps{ grid-template-columns:1fr; } }
.zk-tableau-cadre{ overflow-x:auto; border-radius:12px; border:1px solid rgba(21,47,82,.1); }
.zk-tableau{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.zk-tableau th, .zk-tableau td{ padding:7px 10px; text-align:center; border-bottom:1px solid rgba(21,47,82,.07); white-space:nowrap; }
.zk-tableau thead th{ background:#152F52; color:#fff; font-family:var(--titres); font-size:12px; font-weight:700; }
.zk-tableau thead th:first-child, .zk-tableau tbody th, .zk-tableau tfoot th{ text-align:left; }
.zk-tableau tbody th{ font-weight:600; color:#152F52; }
.zk-tableau tbody tr:not(.zk-section):hover{ background:rgba(43,167,160,.06); }
.zk-tableau .zk-section td{ text-align:left; background:rgba(21,47,82,.04); font-family:var(--titres); font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:#1E7F79; padding:6px 10px; }
.zk-tableau .zk-detail th{ font-weight:500; font-size:12px; padding-left:34px; color:#4A5D70; }
.zk-tableau .zk-detail td{ font-size:12px; color:#4A5D70; }
.zk-tableau .zk-sous-total th, .zk-tableau .zk-sous-total td{ font-weight:700; background:rgba(43,167,160,.08); color:#152F52; }
.zk-tableau tfoot th, .zk-tableau tfoot td{ font-weight:700; background:rgba(21,47,82,.07); color:#152F52; border-bottom:0; }
.zk-total{ min-width:96px; }
.zk-total b{ display:block; }
.zk-barre{ display:block; height:5px; border-radius:3px; background:rgba(21,47,82,.07); margin-top:3px; overflow:hidden; }
.zk-barre i{ display:block; height:100%; background:var(--c); border-radius:3px; }
.zk-part{ color:#4A5D70; font-weight:600; }
.zk-rien{ color:#B3C0CC; }
.zk-pastille{ display:inline-block; width:11px; height:11px; border-radius:4px; background:var(--c); margin-right:8px; vertical-align:-1px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.zk-camembert-cadre{ margin:0; text-align:center; }
.zk-camembert{ width:100%; max-width:230px; height:auto; }
.zk-camembert path, .zk-camembert circle{ stroke:#fff; stroke-width:1.5; transition:opacity .15s ease; }
.zk-camembert .zk-parts:hover > :not(:hover){ opacity:.55; }
.zk-camembert text{ font-family:var(--titres); font-size:10.5px; font-weight:800; text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.zk-camembert-cadre figcaption{ font-size:12.5px; color:#4A5D70; margin:6px 0 8px; }
.zk-legende{ list-style:none; margin:0; padding:0; text-align:left; font-size:12.5px; display:grid; gap:3px; }
.zk-legende b{ float:right; color:#152F52; }

/* Mode sombre */
body.sombre .zk-grille-tete span:not(:empty){ background:rgba(255,255,255,.06); color:#EDF3F8; }
body.sombre .zk-heures span{ color:#A9BCD0; }
body.sombre .zk-col{ background-color:rgba(255,255,255,.03);
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.12) 0 1px, transparent 1px var(--heure)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--heure) / 2), rgba(255,255,255,.05) calc(var(--heure) / 2) calc(var(--heure) / 2 + 1px), transparent calc(var(--heure) / 2 + 1px) var(--heure)); }
body.sombre .zk-col.aujourdhui{ background-color:rgba(43,167,160,.1); }
body.sombre .zk-bloc{ background:color-mix(in srgb, var(--c) 30%, #0F1F31); color:#EDF3F8; }
body.sombre .zk-bloc .zk-bloc-h{ color:#C9D7E6; }
body.sombre .zk-bloc:hover{ background:#16263A; }
body.sombre .zk-tableau-cadre{ border-color:rgba(255,255,255,.08); }
body.sombre .zk-tableau thead th{ background:#0B1726; }
body.sombre .zk-tableau th, body.sombre .zk-tableau td{ border-bottom-color:rgba(255,255,255,.06); color:#DCE9F7; }
body.sombre .zk-tableau tbody th{ color:#EDF3F8; }
body.sombre .zk-tableau .zk-section td{ background:rgba(255,255,255,.04); color:#8FD6D1; }
body.sombre .zk-tableau .zk-detail th, body.sombre .zk-tableau .zk-detail td, body.sombre .zk-part{ color:#A9BCD0; }
body.sombre .zk-tableau .zk-sous-total th, body.sombre .zk-tableau .zk-sous-total td{ background:rgba(43,167,160,.14); color:#EDF3F8; }
body.sombre .zk-tableau tfoot th, body.sombre .zk-tableau tfoot td{ background:rgba(255,255,255,.07); color:#EDF3F8; }
body.sombre .zk-barre{ background:rgba(255,255,255,.08); }
body.sombre .zk-camembert path, body.sombre .zk-camembert circle{ stroke:#16263A; }
body.sombre .zk-camembert-cadre figcaption{ color:#A9BCD0; }
body.sombre .zk-legende b{ color:#EDF3F8; }
body.sombre .zk-legende li{ color:#DCE9F7; }

.ui-capture.paysage{ width:297mm; }
.ui-capture.paysage .ui-feuille{ width:297mm; padding:11mm 12mm 12mm; box-sizing:border-box; }

.zk-vues{ display:inline-flex; gap:0; margin-left:auto; border-radius:999px; overflow:hidden; }
.zk-vues .btn{ border-radius:0 !important; margin:0 !important; }
.zk-vues .btn:first-child{ border-radius:999px 0 0 999px !important; }
.zk-vues .btn:last-child{ border-radius:0 999px 999px 0 !important; border-left:0 !important; }
.zk-vues .btn.actif{ background:#152F52 !important; color:#fff !important; border-color:#152F52 !important; }
.zk-vues + .zk-zoom{ margin-left:10px; }
body.sombre .zk-vues .btn.actif{ background:#2BA7A0 !important; border-color:#2BA7A0 !important; color:#0B1726 !important; }
/* Le tableau garde des couleurs claires en mode sombre : c'est le même que le document imprimé */
body.sombre .fiche.edt.ecran .edt-tableau tbody th.edt-h{ color:#DCE9F7; border-top-color:rgba(255,255,255,.12); }
body.sombre .fiche.edt.ecran .edt-tableau tbody th.edt-h span{ color:#A9BCD0; }
body.sombre .fiche.edt.ecran .edt-vide{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2mm, transparent 2mm 4mm); }
body.sombre .fiche.edt.ecran .edt-tableau thead th{ background:#0B1726; }
body.sombre .fiche.edt.ecran .edt-tableau thead th.aujourdhui{ background:#2BA7A0; color:#0B1726; }
body.sombre .zk-vues .btn.actif:not(.btn-principal):not(.btn-danger){ background:#2BA7A0 !important; border-color:#2BA7A0 !important; color:#0B1726 !important; }
/* Capture PNG : aucune animation (sinon l'image est prise pendant le fondu et sort presque transparente) */
.ui-capture, .ui-capture *{ animation:none !important; transition:none !important; opacity:1; }
/* ---- V7.11 : menu « Exporter avec répartition » ---- */
.zk-menu{ position:relative; display:inline-block; }
.zk-menu > summary{ list-style:none; cursor:pointer; }
.zk-menu > summary::-webkit-details-marker{ display:none; }
.zk-menu > summary::after{ content:''; display:inline-block; width:0; height:0; margin-left:7px; vertical-align:2px;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; }
.zk-menu-liste{ position:absolute; z-index:30; top:calc(100% + 6px); left:0; min-width:340px; background:#fff; border:1px solid rgba(21,47,82,.12);
  border-radius:12px; box-shadow:0 10px 30px rgba(21,47,82,.18); padding:6px; display:grid; gap:4px; animation:zk-apparait .15s ease both; }
.zk-menu-liste button{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; border:0; background:none; border-radius:9px;
  padding:8px 10px; cursor:pointer; font:inherit; color:#152F52; }
.zk-menu-liste button:hover, .zk-menu-liste button:focus-visible{ background:#E8F6F5; outline:none; }
.zk-menu-liste b{ font-family:var(--titres); font-size:13.5px; }
.zk-menu-liste span{ font-size:12px; color:#4A5D70; }
body.sombre .zk-menu-liste{ background:#16263A; border-color:#2B4058; }
body.sombre .zk-menu-liste button{ color:#EDF3F8; }
body.sombre .zk-menu-liste span{ color:#A9BCD0; }
body.sombre .zk-menu-liste button:hover{ background:#123833; }
.ui-carte.ui-carte-edt{ overflow:visible; }

/* ---- V7.12 : boutons Télécharger / Imprimer, type en toutes lettres ---- */
.ui-btn-ico{ display:inline-flex; align-items:center; gap:6px; }
.ui-btn-ico svg{ width:16px; height:16px; flex:0 0 auto; }
.ui-type-libre{ margin-top:10px; }
.ui-type-libre input{ width:100%; }

/* ---- V7.12 : horaires modifiables dans le cahier journal ---- */
.ui-creneau-journal .ui-creneau-tete{ grid-template-columns:auto 1fr 28px; }
.ui-horaires-journal{ display:grid; grid-template-columns:92px auto 92px; gap:4px; align-items:center; }
.ui-horaires-journal input[type=time]{ padding:4px 4px; font-size:12px; font-weight:700; }
.ui-horaires-journal input[data-journal="fin"]{ color:var(--doux); }
.ui-decaler{ display:flex; align-items:center; gap:6px; font-size:12.5px; margin:0 0 10px; color:var(--doux); }
@media (max-width: 1200px){ .ui-creneau-journal .ui-creneau-tete{ grid-template-columns:1fr 28px; } .ui-horaires-journal{ grid-column:1 / -1; } }

/* ---- V7.15 : éditeur de texte enrichi (cahier journal) ---- */
.ui-riche{ border:1.5px solid #E1E9EE; border-radius:12px; background:#fff; overflow:hidden; }
.ui-riche:focus-within{ border-color:var(--accent, #2BA7A0); box-shadow:0 0 0 3px rgba(43,167,160,.18); }
.ui-riche-barre{ display:flex; gap:4px; padding:4px 6px; border-bottom:1px solid #EEF3F6; background:#F7FAFB; }
.ui-riche-barre button{ width:30px; height:26px; border:1px solid transparent; border-radius:7px; background:none; cursor:pointer; font-size:14px; color:#152F52; font-family:Georgia, serif; }
.ui-riche-barre button:hover{ background:#E8F6F5; }
.ui-riche-barre button.actif{ background:#152F52; color:#fff; }
.ui-riche-zone{ min-height:52px; max-height:520px; overflow-y:auto; padding:8px 10px; font-size:14px; line-height:1.5; outline:none; white-space:pre-wrap; word-wrap:break-word; }
.ui-riche-zone:empty::before{ content:attr(data-placeholder); color:#9AAAB8; pointer-events:none; }
.ui-riche-zone div{ min-height:1.5em; }
body.sombre .ui-riche{ background:#0F1F31; border-color:#2B4058; }
body.sombre .ui-riche-barre{ background:#16263A; border-color:#2B4058; }
body.sombre .ui-riche-barre button{ color:#EDF3F8; }
body.sombre .ui-riche-barre button.actif{ background:#2BA7A0; color:#0B1726; }
body.sombre .ui-riche-zone{ color:#EDF3F8; }

/* ---- V7.16 : nouveaux blocs dans l'éditeur ---- */
.ui-etape.dit, .ui-etape.eleves{ margin-left:22px; }
.ui-badge.dit{ background:#EDF7EB; color:#2F6E28; border:1px solid #4E9A43; }
.ui-badge.diff{ background:#FDF6E6; color:#8A5A00; border:1px dashed #C98A12; }
.ui-etape.diff{ background:#FFFBF1; border-left:3px dotted #C98A12; }
.ui-btn-diff{ border-color:#C98A12 !important; color:#8A5A00 !important; }
body.sombre .ui-etape.diff{ background:#2A2210; }
body.sombre .ui-badge.dit{ background:#1B3319; color:#B8E3B0; }
body.sombre .ui-badge.diff{ background:#3A2C0C; color:#FFD98A; }
body.sombre .ui-btn-diff{ color:#FFD98A !important; }

/* ---- V7.18 : intervention orale et consigne dans l'éditeur ---- */
.ui-oral{ display:grid; gap:4px; }
.ui-oral-lib{ font-size:12px; font-weight:700; color:var(--marine); }
.ui-oral-lib.eleves{ color:#2F6E28; margin-top:4px; }
.ui-badge.consigne{ background:#152F52; color:#fff; }
.ui-etape.consigne{ background:#FFF6DC; border-left:4px solid #152F52; }
.ui-btn-consigne{ border-color:#152F52 !important; font-weight:800; }
body.sombre .ui-etape.consigne{ background:#2A2210; }
body.sombre .ui-badge.consigne{ background:#2BA7A0; color:#0B1726; }
body.sombre .ui-oral-lib{ color:#DCE9F7; }
body.sombre .ui-oral-lib.eleves{ color:#B8E3B0; }
.ui-oral{ border:1.5px solid #D5E0E8; border-radius:10px; padding:8px 10px; background:#fff; }
.ui-oral-aide{ margin:0 0 4px; font-size:12px; }
body.sombre .ui-oral{ background:#0F1F31; border-color:#2B4058; }