:root{
  --bordeaux:#9b1206; --bordeaux-fonce:#7a0e04; --creme:#fde8bb; --creme-clair:#fff6e4;
  --texte:#2b2b2b; --gris:#6b6b6b; --vert:#2e7d32; --rouge:#c62828; --orange:#ef6c00; --bleu:#1565c0;
  --ombre:0 2px 10px rgba(0,0,0,.12); --radius:12px;
  /* ---- v2.7 : hauteur du bandeau démo + barre du haut, calculée par pce-commun.js
     (sert à empiler bandeau-demo/topbar en position fixe sans chevauchement) ---- */
  --pce-banner-h:0px; --pce-header-h:62px;
}
/* ---- v2.7 : échelle typographique fluide ----
   En dessous de 1400px la formule est toujours < 16px et le clamp() la
   plafonne donc à 16px (= comportement actuel, mobile/tablette inchangés).
   Au-delà, la taille grandit progressivement jusqu'à 20px vers 2560px et au-delà. */
html{font-size:clamp(16px, 11.2px + 0.345vw, 20px);}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--texte);background:var(--creme-clair);}
body.pce-app{padding-top:var(--pce-header-h,62px);}
button{font-family:inherit;cursor:pointer;}
a{color:var(--bordeaux);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---- LOGIN ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(rgba(123,14,4,.78),rgba(123,14,4,.88)),url("media/background-music.png") center/cover no-repeat;}
.login-card{background:var(--creme);border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.35);width:100%;max-width:400px;padding:34px 30px;text-align:center;}
.login-logo{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 14px;display:block;box-shadow:var(--ombre);background:#fff;}
.login-card h1{font-size:1.15rem;color:var(--bordeaux);margin-bottom:4px;}
.login-card p.sub{font-size:.85rem;color:var(--gris);margin-bottom:22px;}

.field{text-align:left;margin-bottom:.875rem;}
.field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:5px;color:var(--bordeaux-fonce);}
.field input,.field select,.field textarea{width:100%;padding:.6875rem .75rem;border:1px solid #d9c79b;border-radius:8px;font-size:.95rem;background:#fff;font-family:inherit;}
.field input:focus,.field select:focus{outline:2px solid var(--bordeaux);border-color:var(--bordeaux);}

.btn{background:var(--bordeaux);color:#fff;border:none;padding:.75rem 1rem;border-radius:8px;font-size:.95rem;font-weight:600;transition:.15s;display:inline-block;text-align:center;}
.btn:hover{background:var(--bordeaux-fonce);text-decoration:none;color:#fff;}
.btn.full{width:100%;}
.btn-ghost{background:transparent;color:var(--bordeaux);border:1px solid var(--bordeaux);}
.btn-ghost:hover{background:rgba(155,18,6,.08);color:var(--bordeaux);}
.btn-sm{padding:.5625rem .875rem;font-size:.85rem;}

/* ---- TOPBAR ----
   v2.7 : la barre du haut est réellement fixe (position:fixed) pour rester
   visible pendant le défilement, sur téléphone comme sur ordinateur.
   « top » est décalé de la hauteur du bandeau démo (--pce-banner-h, calculée
   par pce-commun.js) pour ne jamais chevaucher ce dernier. */
.topbar{background:var(--bordeaux);color:#fff;display:flex;align-items:center;gap:.875rem;padding:.625rem 1.125rem;
  position:fixed;top:var(--pce-banner-h,0px);left:0;right:0;width:100%;z-index:1000;box-shadow:var(--ombre);}
.topbar img.logo{width:42px;height:42px;border-radius:50%;background:#fff;object-fit:cover;}
.topbar .title{font-weight:700;font-size:1rem;line-height:1.1;}
.topbar .title small{display:block;font-weight:400;font-size:.72rem;opacity:.85;}
.topbar .spacer{flex:1;}
.topbar .user{font-size:.85rem;text-align:right;}
.topbar .user small{display:block;opacity:.85;font-size:.72rem;}
.topbar .logout{background:rgba(255,255,255,.15);border:none;color:#fff;padding:8px 12px;border-radius:8px;font-size:.82rem;}
.topbar .logout:hover{background:rgba(255,255,255,.3);text-decoration:none;color:#fff;}
.burger{display:none;background:none;border:none;color:#fff;font-size:1.5rem;}

.layout{display:flex;min-height:calc(100vh - var(--pce-header-h,62px));}
.sidebar{width:14.375rem;background:#fff;border-right:1px solid #ecdcb6;padding:.875rem .625rem;flex-shrink:0;}
.nav-group-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);margin:14px 10px 6px;}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;padding:.6875rem .75rem;border-radius:8px;font-size:.9rem;color:var(--texte);margin-bottom:2px;text-decoration:none;}
.nav-item:hover{background:var(--creme);text-decoration:none;color:var(--texte);}
.nav-item.active{background:var(--bordeaux);color:#fff;font-weight:600;}
.nav-item .ic{width:20px;text-align:center;}

.content{flex:1;padding:1.375rem 1.625rem;background:var(--creme-clair);overflow:auto;}
/* v2.7 : remplace l'ancien plafond fixe de 1100px (base_crm.html) qui coupait
   le contenu de Contacts une fois les données chargées. Plafond généreux et
   centré au-delà, pour éviter des lignes de texte illisibles sur très grand
   écran, sans jamais restreindre l'espace disponible en usage courant. */
.content-large{max-width:112.5rem;margin:0 auto;width:100%;}
.page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.125rem;}
.page-head h2{color:var(--bordeaux);font-size:1.4rem;}
.page-head p{color:var(--gris);font-size:.85rem;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.875rem;margin-bottom:1.375rem;}
.stat{background:#fff;border-radius:var(--radius);box-shadow:var(--ombre);padding:1rem 1.125rem;border-left:5px solid var(--bordeaux);}
.stat .num{font-size:1.8rem;font-weight:700;color:var(--bordeaux);}
.stat .lbl{font-size:.82rem;color:var(--gris);}

/* v2.7 : overflow-x:auto à toutes les tailles (pas seulement mobile) pour que
   les tableaux larges défilent proprement dans leur panneau plutôt que de
   déborder de la page ou de couper des colonnes. */
.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--ombre);padding:1.125rem 1.25rem;margin-bottom:1.25rem;overflow-x:auto;}
.panel h3{color:var(--bordeaux-fonce);font-size:1.05rem;margin-bottom:12px;}

table{width:100%;border-collapse:collapse;font-size:.88rem;}
th{background:var(--creme);text-align:left;padding:.625rem .75rem;color:var(--bordeaux-fonce);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;}
td{padding:.625rem .75rem;border-bottom:1px solid #f0e6cf;}
tr:hover td{background:#fffaf0;}

/* ---- v2.2 : tableau présenté comme un relevé bancaire (table.releve) ----
   Zébrage discret + colonnes de montants alignées à droite + ligne de totaux. */
table.releve{table-layout:auto;width:100%;}
table.releve tbody tr:nth-child(even) td{background:#fffdf3;}   /* crème très clair */
table.releve tbody tr:hover td,
table.releve tbody tr:nth-child(even):hover td{background:#fdf3e0;}
table.releve th.mt,table.releve td.mt{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;}
table.releve td.debit{color:var(--rouge);}
table.releve td.credit{color:var(--vert);}
table.releve tfoot tr.total td{font-weight:700;background:var(--creme);
  color:var(--bordeaux-fonce);border-top:2px solid var(--bordeaux);border-bottom:none;}

.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:600;}
.badge.admin{background:#fde0dd;color:var(--bordeaux);}
.badge.ens{background:#e3f0ff;color:var(--bleu);}
.badge.actif{background:#e3f6e4;color:var(--vert);}
.badge.inactif{background:#eee;color:var(--gris);}
.badge.present{background:#e3f6e4;color:var(--vert);}
.badge.absent{background:#fde0dd;color:var(--rouge);}
.badge.retard{background:#ffe9d1;color:var(--orange);}
.badge.excuse{background:#e3f0ff;color:var(--bleu);}
.badge.faite{background:#e3f6e4;color:var(--vert);}
.badge.prevue{background:#eee;color:var(--gris);}

/* v2.7 : barre d'outils collante, juste sous la barre du haut désormais fixe.
   « top » reprend --pce-header-h (topbar + bandeau démo éventuel) : jamais de
   chevauchement, dans les 3 environnements (base réelle, démos fictive/vierge).
   background:inherit reprend le fond du conteneur (panneau blanc ou page crème). */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center;
  position:sticky;top:var(--pce-header-h,62px);z-index:500;background:inherit;}
.toolbar input.search{flex:1;min-width:180px;padding:.5625rem .75rem;border:1px solid #d9c79b;border-radius:8px;}
select,input[type=date],input[type=time]{padding:.5625rem .75rem;border:1px solid #d9c79b;border-radius:8px;font-family:inherit;background:#fff;}

.building{width:100%;max-height:240px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--ombre);margin-bottom:20px;display:block;}
.note{background:#fff6e4;border-left:4px solid var(--orange);padding:10px 14px;border-radius:6px;font-size:.83rem;margin-top:12px;color:#5a4a1f;}
.flash{padding:11px 16px;border-radius:8px;margin-bottom:14px;font-size:.9rem;}
.flash.ok{background:#e3f6e4;color:#1b5e20;border-left:4px solid var(--vert);}
.flash.error{background:#fde0dd;color:#7a0e04;border-left:4px solid var(--rouge);}

/* ---- EDT ---- */
.edt-wrap{overflow-x:auto;}
.edt{width:100%;min-width:680px;border-collapse:collapse;}
.edt th,.edt td{border:1px solid #ecdcb6;padding:0;}
.edt th{background:var(--bordeaux);color:#fff;padding:8px;font-size:.8rem;text-transform:none;letter-spacing:0;}
.edt td.hour{background:var(--creme);font-size:.75rem;color:var(--gris);text-align:center;width:64px;padding:6px;vertical-align:top;font-weight:600;}
.edt td.slot{height:50px;vertical-align:top;}
.cours{border-left:4px solid var(--bordeaux);border-radius:6px;margin:3px;padding:5px 7px;font-size:.74rem;line-height:1.25;background:var(--creme);}
.cours a{color:var(--bordeaux-fonce);}
.cours .disc{font-weight:700;color:var(--bordeaux-fonce);}
.cours .meta{color:var(--gris);}

/* ---- APPEL ---- */
.appel-eleve{display:flex;align-items:center;gap:12px;padding:11px 8px;border-bottom:1px solid #f0e6cf;flex-wrap:wrap;}
.appel-eleve .nom{flex:1;min-width:140px;font-weight:600;}
.statuts{display:flex;gap:6px;flex-wrap:wrap;}
.st-btn{border:1px solid #d9c79b;background:#fff;border-radius:20px;padding:6px 12px;font-size:.78rem;color:var(--gris);}
.st-btn.present.on{background:var(--vert);border-color:var(--vert);color:#fff;}
.st-btn.absent.on{background:var(--rouge);border-color:var(--rouge);color:#fff;}
.st-btn.retard.on{background:var(--orange);border-color:var(--orange);color:#fff;}
.st-btn.excuse.on{background:var(--bleu);border-color:var(--bleu);color:#fff;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.grid2 .field{margin-bottom:0;}
.dropzone{border:2px dashed var(--bordeaux);border-radius:12px;background:var(--creme);padding:24px;text-align:center;color:var(--bordeaux-fonce);}
.banner-demo{background:#fff3cd;color:#7a5b00;text-align:center;font-size:.78rem;padding:6px;}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px;}
.checks label{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:400;color:var(--texte);}

/* ---- Calendrier hebdomadaire (EDT type Pronote) ---- */
.edt-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.edt-nav{display:flex;align-items:center;gap:8px;}
.edt-sem{font-weight:600;color:var(--bordeaux-fonce);min-width:230px;text-align:center;font-size:.9rem;}
.cal{display:flex;min-width:780px;}
.cal-gutter{width:52px;flex:0 0 52px;}
.cal-day{flex:1 1 0;border-left:1px solid #ecdcb6;min-width:118px;}
.cal-dayhead{height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bordeaux);color:#fff;font-size:.82rem;font-weight:600;border-bottom:2px solid #fff;text-transform:none;letter-spacing:0;}
.cal-dayhead small{font-weight:400;font-size:.72rem;opacity:.9;}
.cal-dayhead.today{background:var(--bordeaux-fonce);box-shadow:inset 0 -3px 0 var(--creme);}
/* la grille s'adapte à la hauteur de l'écran (évite le défilement vertical) */
.cal-body{position:relative;height:calc(100vh - 265px);min-height:340px;background:#fffdf8;}
.cal-gutter .cal-body{background:transparent;}
.cal-hour{position:absolute;right:6px;font-size:.8rem;color:#aaa;transform:translateY(-7px);}
.cal-line{position:absolute;left:0;right:0;border-top:1px solid #efe6cf;}
.cal-cours{position:absolute;border-left:4px solid var(--bordeaux);background:var(--creme);border-radius:5px;
  padding:3px 5px;font-size:.7rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.14);cursor:default;
  min-height:22px;outline:2px solid #fffdf8;}
.cal-cours .cal-disc{font-weight:700;color:var(--bordeaux-fonce);line-height:1.12;}
.cal-cours .cal-meta{color:#555;font-size:.66rem;line-height:1.2;}
.cal-cours .cal-eleves{color:#3a2f1f;font-size:.64rem;line-height:1.25;margin-top:1px;
  border-top:1px dotted rgba(155,18,6,.25);padding-top:1px;}
.cal-cours .cal-eleves div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-cours.etat-annule{background:#fff;border-left-color:var(--rouge);}
.cal-cours.etat-annule .cal-disc,.cal-cours.etat-annule .cal-meta{color:#c4c4c4;text-decoration:line-through;}
.cal-cours.etat-salle_modifiee{border-left-color:var(--bleu);}
.cal-cours.etat-prof_absent{border-left-color:#ad1457;}
.cal-cours.etat-deplace{border-left-color:#6a1b9a;}
.cal-annule{background:var(--rouge);color:#fff;font-size:.64rem;text-align:center;font-weight:700;margin:-3px -5px 2px;padding:1px;border-radius:4px 4px 0 0;}
.cal-etat{background:var(--orange);color:#fff;font-size:.62rem;text-align:center;font-weight:600;margin:-3px -5px 2px;padding:1px;border-radius:4px 4px 0 0;}
.cal-cours.etat-prof_absent .cal-etat{background:#ad1457;}
.cal-cours.etat-salle_modifiee .cal-etat{background:var(--bleu);}
.cal-cours.etat-deplace .cal-etat{background:#6a1b9a;}
.cal-cours.etat-rattrapage{border-left-color:#6a1b9a;}
.cal-cours.etat-rattrapage .cal-etat{background:#6a1b9a;}
/* blocs cliquables de la vue Cahier de texte */
.cal-cours-link{text-decoration:none;color:inherit;display:block;transition:.12s;}
.cal-cours-link:hover{text-decoration:none;color:inherit;box-shadow:0 2px 8px rgba(0,0,0,.25);filter:brightness(1.02);}
.cal-cours.cahier-vide{background:repeating-linear-gradient(45deg,#fffdf8,#fffdf8 7px,#f3ead2 7px,#f3ead2 8px);}
.cal-cours.cahier-rempli{outline:2px solid var(--vert);background:#eef8ee;}
.cahier-flag{font-size:.6rem;font-weight:700;text-align:center;margin:-3px -5px 2px;padding:1px;border-radius:4px 4px 0 0;background:#cfae4e;color:#5a4a1f;}
.cal-cours.cahier-rempli .cahier-flag{background:var(--vert);color:#fff;}
.cal-actions{position:absolute;top:1px;right:2px;display:none;gap:2px;}
.cal-cours:hover .cal-actions{display:flex;}
.cal-actions a{font-size:.74rem;text-decoration:none;background:#fff;border:1px solid #e0d3aa;border-radius:3px;padding:0 3px;line-height:1.3;}

/* ---- LOT 3 : barre d'actions compacte des tableaux ----
   Mêmes icônes partout : 👁 voir · ✏️ modifier · 💶 payer · 📄 document.
   Zone cliquable de 36 px minimum (usage tactile), sans débordement mobile. */
.actions{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:flex-end;}
.actions form{display:inline;margin:0;}
.act{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;
  padding:0 .5rem;border:1px solid #e0d3aa;border-radius:8px;background:#fffdf8;
  color:var(--bordeaux);font-size:1rem;line-height:1;text-decoration:none;cursor:pointer;
  font-family:inherit;transition:.12s;}
.act:hover{background:var(--creme);border-color:var(--or);text-decoration:none;color:var(--bordeaux-fonce);}
.act.act-danger{color:var(--rouge);}
.act.act-danger:hover{background:#fdecea;border-color:var(--rouge);}
.act.act-plein{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff;}
.act.act-plein:hover{background:var(--bordeaux-fonce);color:#fff;}
.act .txt{font-size:.8rem;font-weight:600;margin-left:5px;white-space:nowrap;}
/* raccourci « Faire l'appel » posé sur un cours de l'emploi du temps */
.cal-appel{position:absolute;bottom:1px;right:2px;background:var(--vert,#2e7d32);color:#fff;
  font-size:.62rem;font-weight:700;border-radius:4px;padding:1px 4px;text-decoration:none;
  line-height:1.3;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.cal-appel:hover{background:#1b5e20;color:#fff;text-decoration:none;}
/* bandeau « mes cours du jour » (EDT) */
.jour-actions{display:flex;flex-wrap:wrap;gap:8px;}
.jour-cours{display:flex;align-items:center;gap:8px;border:1px solid #e0d3aa;border-radius:10px;
  background:#fffdf8;padding:6px 10px;min-height:36px;}
.jour-cours .h{font-weight:700;color:var(--bordeaux);font-size:.85rem;white-space:nowrap;}
.jour-cours .d{font-size:.85rem;color:#4a4136;}

/* ---- barre de recherche dans une liste de cases à cocher ---- */
.search-box{width:100%;padding:9px 12px;border:1px solid #d9c79b;border-radius:8px;margin-bottom:10px;font-family:inherit;}

/* ---- suppression / lien danger ---- */
.link-danger{background:none;border:none;color:var(--rouge);cursor:pointer;font-size:.88rem;margin-left:8px;font-family:inherit;text-decoration:underline;}
.link-danger:hover{color:#8e1c1c;}

/* ---- lignes d'absence ---- */
.abs-row{display:flex;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid #f0e6cf;flex-wrap:wrap;}
.abs-info{flex:1;min-width:180px;display:flex;flex-direction:column;}
.abs-info small{color:#6b6b6b;font-size:.78rem;}
.abs-statut{min-width:70px;}
.abs-motif{flex:2;min-width:160px;padding:8px 10px;border:1px solid #d9c79b;border-radius:6px;font-family:inherit;}
.abs-just{display:flex;align-items:center;gap:5px;font-size:.85rem;color:#6b6b6b;white-space:nowrap;}

/* ---- bouton Messages (visible dans toutes les applications) + pastille ---- */
.pce-msg{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;border-radius:50%;background:var(--creme,#fde8bb);
  font-size:21px;text-decoration:none !important;border:none;padding:0 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .12s;}
.pce-msg:hover{transform:scale(1.1);background:#fff;text-decoration:none;}
.pce-pastille,.pce-pastille-taches{position:absolute;top:-5px;right:-6px;background:#e53935;color:#fff;
  border-radius:100px;font-size:.7rem;min-width:19px;height:19px;display:flex;
  align-items:center;justify-content:center;padding:0 4px;font-weight:700;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);line-height:1;}
.pce-pastille-taches{background:#c79a3e;}
.pce-pastille-taches.urgent{background:#e53935;}

/* ---- fil d'Ariane : Portail > Application > Page en cours ---- */
.fil{background:#fff;border-bottom:1px solid #ecdcb6;padding:7px 18px;font-size:.78rem;color:var(--gris);}
.fil a{color:var(--bordeaux);}
.fil .sep{color:#c79a3e;margin:0 6px;}
.fil .actuel{color:var(--texte);font-weight:600;}

/* ---- « À faire aujourd'hui » : pastilles d'actions en attente ---- */
.taches-bloc{background:#fff;border-radius:var(--radius);box-shadow:var(--ombre);
  border-left:5px solid #c79a3e;padding:14px 16px;margin-bottom:18px;}
.taches-titre{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gris);font-weight:700;margin-bottom:10px;}
.taches-liste{display:flex;flex-wrap:wrap;gap:8px;}
a.tache{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;
  border-radius:100px;background:var(--creme);color:var(--texte);border:1px solid #e2cf9f;
  font-size:.86rem;line-height:1.2;text-decoration:none;transition:.15s;}
a.tache:hover{background:#fff;box-shadow:var(--ombre);text-decoration:none;color:var(--texte);}
a.tache .tache-nb{min-width:22px;height:22px;border-radius:100px;background:#c79a3e;color:#fff;
  font-weight:700;font-size:.78rem;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;}
a.tache.haute{background:#fdeceb;border-color:#e9b3b0;}
a.tache.haute .tache-nb{background:var(--rouge);}
.taches-vide{color:var(--vert);font-size:.86rem;}
.taches-bloc.compact{padding:10px 14px;margin-bottom:14px;}
.taches-bloc.compact a.tache{font-size:.8rem;padding:6px 12px 6px 6px;}

/* ---- recherche globale (barre du haut de toutes les applications) ---- */
.pce-recherche{flex:0 1 240px;min-width:0;margin:0;}
.pce-recherche input{width:100%;padding:8px 13px;border-radius:100px;font-size:.82rem;
  font-family:inherit;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.15);color:#fff;}
.pce-recherche input::placeholder{color:rgba(255,255,255,.75);}
.pce-recherche input:focus{outline:2px solid var(--creme);background:#fff;color:var(--texte);}
.pce-recherche input:focus::placeholder{color:var(--gris);}

/* ---- groupes de menu repliables (barre latérale) ---- */
details.nav-groupe{margin:0;}
details.nav-groupe>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;}
details.nav-groupe>summary::-webkit-details-marker{display:none;}
details.nav-groupe>summary::after{content:"▾";margin-left:auto;font-size:.8rem;transition:transform .15s;}
details.nav-groupe:not([open])>summary::after{transform:rotate(-90deg);}
details.nav-groupe>summary:hover{color:var(--bordeaux);}

/* ---- page de résultats de recherche ---- */
.ligne-recherche{display:flex;gap:8px;flex-wrap:wrap;}
.ligne-recherche input{flex:1;min-width:200px;padding:11px 12px;border:1px solid #d9c79b;
  border-radius:8px;font-size:.95rem;font-family:inherit;}
.aide-recherche{color:var(--gris);font-size:.78rem;margin-top:8px;}
.liste-resultats{list-style:none;margin:10px 0 0;padding:0;}
.liste-resultats li{padding:9px 0;border-bottom:1px solid #f0e4c8;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.9rem;}
.liste-resultats li:last-child{border-bottom:none;}
.liste-resultats li a{font-weight:600;}
.liste-resultats .detail{color:var(--gris);font-size:.82rem;}

/* v2.7 : bandeau démo fixé tout en haut (au-dessus de la topbar, elle-même
   décalée de --pce-banner-h par pce-commun.js) : reste visible pendant le
   défilement, sans jamais chevaucher la barre du haut. */
.bandeau-demo{background:repeating-linear-gradient(45deg,#ffb300,#ffb300 14px,#ffca4d 14px,#ffca4d 28px);
  color:#5a3c00;text-align:center;font-weight:700;font-size:.8rem;padding:5px 8px;
  position:fixed;top:0;left:0;right:0;width:100%;z-index:1001;}
.bandeau-demo a{color:#5a3c00;text-decoration:underline;}

/* ---- v2.6 (lot B) : DEUX démonstrations — le bandeau dit laquelle est ouverte.
       Teintes de la charte : bordeaux #9b1206, crème #fde8bb, or #c79a3e. ---- */
.bandeau-demo-vierge{background:var(--creme);color:var(--bordeaux-fonce);
  border-bottom:3px solid #c79a3e;letter-spacing:.02em;}
.bandeau-demo-vierge a{color:var(--bordeaux);}

.login-env{border-radius:10px;padding:9px 12px;margin:0 0 18px;font-size:.82rem;
  font-weight:700;line-height:1.35;}
.login-env small{display:block;font-weight:400;font-size:.76rem;opacity:.85;margin-top:2px;}
.login-env.env-fictive{background:#ffca4d;color:#5a3c00;border:1px solid #c79a3e;}
.login-env.env-vierge{background:#fff;color:var(--bordeaux-fonce);border:2px solid #c79a3e;}
.login-env.env-reelle{background:#fff;color:var(--bordeaux);border:1px solid #d9c79b;}

.demo-choix{max-width:520px;text-align:left;}
.demo-choix h1,.demo-choix p.sub{text-align:center;}
.env-carte{border:1px solid #d9c79b;border-left:6px solid var(--bordeaux);border-radius:10px;
  background:#fff;padding:12px 14px;margin-bottom:12px;}
.env-carte b{color:var(--bordeaux-fonce);font-size:.95rem;}
.env-carte p{font-size:.82rem;color:var(--gris);margin:6px 0 10px;line-height:1.4;}
.env-carte .env-meta{font-size:.76rem;color:var(--gris);margin-bottom:10px;}
.env-carte.env-fictive{border-left-color:#ffb300;}
.env-carte.env-vierge{border-left-color:#c79a3e;background:var(--creme-clair);}
.env-carte.env-reelle{border-left-color:var(--bordeaux);}
.env-carte.env-actif{box-shadow:0 0 0 2px rgba(155,18,6,.25);}
.env-badge{display:inline-block;background:var(--bordeaux);color:#fff;border-radius:20px;
  padding:2px 9px;font-size:.68rem;font-weight:700;margin-left:6px;vertical-align:2px;}
.env-ligne.env-vierge{background:var(--creme-clair);}

/* ---- encadré liens familiaux (fiche élève) ---- */
.famille-box{border-left:5px solid var(--orange);background:#fffaf0;}
.famille-box h3{color:#b35a00;}

/* ---- bulletins descriptifs & progression (v2.4) ---- */
.texte-libre{white-space:pre-wrap;line-height:1.45;}
.pastille{display:inline-block;width:12px;height:12px;border-radius:50%;
  border:1px solid #8a8a8a;vertical-align:-1px;margin-right:5px;}
.pastille.grande{width:20px;height:20px;}
.pastille.tp-insuffisant{background:#c62828;}
.pastille.tp-assez_regulier{background:#ef6c00;}
.pastille.tp-regulier{background:#1565c0;}
.pastille.tp-tres_regulier{background:#2e7d32;}
.pastille.tp-vide{background:#fff;}
.choix-radio{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.radio-pill{display:inline-flex;align-items:center;gap:5px;border:1px solid #d5cfc9;
  border-radius:20px;padding:6px 13px;cursor:pointer;background:#fff;font-size:.9rem;}
.radio-pill.coche{border:2px solid var(--bordeaux);background:#fbeeec;font-weight:600;}
.choix-cases{display:flex;gap:10px;flex-wrap:wrap;}
.case-oui{display:inline-flex;align-items:center;gap:6px;border:1px solid #d5cfc9;
  border-radius:8px;padding:8px 12px;cursor:pointer;background:#fff;font-size:.9rem;}
.frise{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;}
.frise-etape{flex:0 0 auto;min-width:130px;max-width:190px;text-align:center;
  border:1px solid #eee;border-radius:10px;padding:10px 8px;}
.frise-etape .frise-date{display:block;font-size:.78rem;color:#6b6b6b;margin-top:6px;}
.frise-etape .frise-lbl{display:block;font-size:.86rem;font-weight:600;margin-top:2px;
  word-wrap:break-word;}
.frise-etape .frise-niv{display:block;font-size:.78rem;color:#444;margin-top:3px;}
.tendance{margin-top:10px;color:#444;font-size:.9rem;}
.legende{margin-top:12px;font-size:.8rem;color:#5a5a5a;display:flex;gap:14px;flex-wrap:wrap;
  align-items:center;}
.legende .legende-titre{font-weight:600;}
.mention-box{border-left:5px solid var(--or, #c79a3e);background:#fffdf6;}

/* ---- impression des pages internes (rapports) ---- */
@media print{
  .topbar,.sidebar,.no-print,.fil,.taches-bloc,.bandeau-demo{display:none !important;}
  .layout{display:block;}
  .content{padding:0;}
  /* v2.7 : la barre du haut et le bandeau démo sont fixes/sticky à l'écran ;
     à l'impression on annule le décalage réservé et la position collante. */
  body{padding-top:0 !important;}
  .toolbar{position:static !important;}
  .panel{box-shadow:none;border:1px solid #ddd;overflow:visible;}
  .frise-etape{border:1px solid #bbb;}
  .pastille{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  a[href]{color:#000;text-decoration:none;}
  /* relevé : pas de zébrage à l'impression, largeur contenue dans la page A4 */
  table.releve{table-layout:fixed;width:100%;font-size:.72rem;}
  table.releve th,table.releve td{padding:4px 5px;overflow:hidden;
    text-overflow:ellipsis;word-wrap:break-word;}
  table.releve tbody tr:nth-child(even) td,
  table.releve tbody tr:hover td{background:#fff !important;}
  table.releve td.debit,table.releve td.credit{color:#000 !important;}
  table.releve tfoot tr.total td{background:#fff !important;color:#000 !important;
    border-top:2px solid #000;}
}

/* ---- petits écrans : version minimaliste ----
   Mêmes couleurs, mais sans images de fond ni bannières ;
   seules les icônes importantes sont conservées. */
@media(max-width:760px){
  .sidebar{position:fixed;left:0;top:var(--pce-header-h,62px);bottom:0;z-index:40;transform:translateX(-100%);transition:.25s;box-shadow:var(--ombre);overflow:auto;}
  .sidebar.open{transform:translateX(0);}
  .burger{display:block;}
  .grid2{grid-template-columns:1fr;}
  .topbar .user{display:none;}

  /* pas d'images décoratives sur mobile */
  .login-wrap{background:var(--bordeaux);}            /* plus d'image de fond */
  .building{display:none;}                             /* pas de bannière bâtiment */
  .login-logo{width:84px;height:84px;}

  /* lisibilité : moins de marges, tableaux défilants */
  .content{padding:12px 10px;}
  .panel{padding:12px 12px;overflow-x:auto;}
  .page-head h2{font-size:1.15rem;}
  table{font-size:.82rem;}
  th,td{padding:8px 8px;}
  .cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
  .stat{padding:12px 14px;}
  .stat .num{font-size:1.4rem;}
  .topbar{padding:8px 10px;gap:8px;}
  .topbar .title small{display:none;}
  .pce-recherche{flex:1 1 90px;}
  .pce-recherche input{padding:7px 10px;font-size:.78rem;}
  .fil{padding:6px 10px;font-size:.72rem;}
}

@media(max-width:600px){
  .actions{justify-content:flex-start;}
  .act .txt{display:none;}          /* icônes seules : aucun débordement horizontal */
  .jour-cours{width:100%;}
  .taches-liste{flex-direction:column;}
  a.tache{width:100%;}
  .taches-bloc{padding:12px 12px;}
  .liste-resultats li{flex-direction:column;gap:2px;}
}

/* ---------------------------------------------------------------------------
   v2.5 (lot B) — contrats créés AUTOMATIQUEMENT à la saisie d'un paiement.
   Marque visuelle sobre : le contrat est un brouillon tant qu'il n'a pas été relu.
   --------------------------------------------------------------------------- */
.alerte-verif{
  margin:8px 0 0;padding:8px 10px;border-left:4px solid #b8860b;
  background:#fffaf0;color:#6b4e00;border-radius:0 6px 6px 0;font-size:.92rem;line-height:1.45;}
.alerte-verif a{color:#8a5a00;font-weight:600;}
.badge-verif{background:#fff3d6 !important;color:#8a5a00 !important;border:1px solid #e0b862;}
tr.ligne-a-verifier > td{background:#fffaf0;}
.stat.stat-verif{border-left:4px solid #b8860b !important;}
@media print{
  .alerte-verif{border-left:1px solid #999;background:#fff;color:#000;}
  tr.ligne-a-verifier > td{background:#fff;}
}

/* ---------------------------------------------------------------------------
   Terminal de paiement SumUp — écran de configuration (Paramètres) et blocs
   d'information des fiches contact. Styles volontairement discrets : ils
   réutilisent les composants existants (panel, field, table).
   --------------------------------------------------------------------------- */
#blocSumup table{width:100%;font-size:.88rem;}
#blocSumup th{text-align:left;}
.sumup-etat{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.78rem;
  font-weight:700;border:1px solid currentColor;}
.sumup-etat.ok{color:#2e7d32;}
.sumup-etat.ko{color:#c62828;}
.sumup-etat.attente{color:#b26a00;}