/* =========================================================================
   EcoMaZ — Feuille de style des composants.
   Toutes les valeurs (couleurs, tailles, espacements, rayons, ombres,
   durées) viennent de theme.css : ne rien coder en dur ici.
   ========================================================================= */

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--surface-0);
  color:var(--text);
  font-size:var(--fs-sm);
  line-height:var(--lh-text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-title); line-height:var(--lh-title); letter-spacing:-.01em; font-weight:900; }
/* Chiffres (montants, effectifs, heures) : largeur fixe, pas de tremblement pendant les compteurs */
.num, .amount, .recu-montant, .bulle-badge, .tt-time, .badge, .kpi-flow{ font-variant-numeric:tabular-nums; }
button,input,select,textarea{ font-family:inherit; }

/* Champs « nus » (listes de classes, dates…) : même apparence que les formulaires.
   :where() = spécificité nulle, donc toute règle plus précise ci-dessous l'emporte. */
:where(select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden])){
  font-family:inherit; font-size:var(--fs-sm); color:var(--text); background:var(--surface-1);
  border:1px solid var(--border-strong); border-radius:var(--r-control); padding:var(--sp-2) var(--sp-3); min-height:38px; min-width:0;
}
:where(select, textarea, input):focus{ outline:none; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); }

/* Icônes SVG (icones.js) — trait 2, bouts arrondis, couleur du texte */
.ico{ width:1.15em; height:1.15em; flex-shrink:0; vertical-align:-0.2em; margin-right:.4em; display:inline-block; }
.ico.ico-seul{ margin-right:0; }
.nav-item .ic .ico, .bn-ic .ico, .rg-ic .ico{ margin-right:0; width:20px; height:20px; vertical-align:middle; }
.bn-ic .ico{ width:22px; height:22px; }
.icon-badge .ico, .txn-ic .ico{ margin:0; width:20px; height:20px; }
.em-ic .ico, .login-logo .ico, .ric .ico{ margin:0; width:32px; height:32px; }
.bulle-btn .ico, .theme-toggle .ico, .icon-btn .ico, .modal-close .ico, .burger .ico{ margin:0; width:18px; height:18px; }
.btn .ico{ margin-right:0; }
/* une icône reste collée à son mot (pas de retour à la ligne entre les deux) */
button span:has(> .ico), .btn span:has(> .ico){ white-space:nowrap; }
.salut-main{ color:var(--accent); display:inline-block; }
.salut-main .ico{ margin:0; width:24px; height:24px; vertical-align:-0.15em; } /* le bouton a déjà un espacement (gap) */

/* Accessibilité : anneau de focus visible partout (clavier), jamais au clic souris */
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 2px var(--em-green-900); /* or + liseré vert foncé : visible sur fond clair comme sombre */ border-radius:var(--r-control); }
.skip-link{ position:absolute; left:-9999px; top:8px; background:var(--primary); color:var(--on-primary); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-control); z-index:1000; }
.skip-link:focus{ left:8px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.app{ display:flex; min-height:100vh; }

/* ---------------------------------------------------------------- SIDEBAR */
.sidebar{
  width:264px; flex-shrink:0; background:var(--surface-1); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:var(--sp-4) var(--sp-3); gap:var(--sp-3);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-2) var(--sp-3); border-bottom:1px solid var(--border); }
.brand-logo-wrap{ width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.brand-logo{ font-size:28px; }
.brand-logo-img{ width:40px; height:40px; object-fit:contain; border-radius:var(--r-control); background:var(--surface-2); }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.brand-text strong{ font-family:var(--font-title); font-size:var(--fs-md); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-text span{ font-size:var(--fs-xs); color:var(--text-dim); }

.nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-group{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin:var(--sp-3) var(--sp-3) var(--sp-1); }
.nav-item{
  position:relative; display:flex; align-items:center; gap:var(--sp-3);
  background:transparent; border:none; text-align:left; width:100%;
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-control); font-size:var(--fs-sm);
  color:var(--text); cursor:pointer; font-weight:500; min-height:40px;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item .ic{ font-size:var(--fs-md); width:20px; text-align:center; }
.nav-item:hover{ background:var(--surface-2); }
.nav-item.active{ background:var(--primary-soft); color:var(--primary-ink); font-weight:700; }
.nav-item.active::before{ content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:var(--r-pill); background:var(--primary); }

.sidebar-footer{ border-top:1px solid var(--border); padding-top:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); }
.year-badge{ font-size:var(--fs-xs); color:var(--text-dim); padding:0 var(--sp-1); }
.year-badge strong{ color:var(--text); }
.btn-reset{
  font-size:var(--fs-xs); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-control); border:1px dashed var(--border-strong);
  background:var(--surface-2); color:var(--text-dim); cursor:pointer; min-height:36px;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-reset:hover{ color:var(--danger); border-color:var(--danger); }
.btn-install{
  font-size:var(--fs-sm); padding:var(--sp-3); border-radius:var(--r-control); border:none; font-weight:700;
  background:var(--primary); color:var(--on-primary); cursor:pointer; min-height:40px;
  transition:background var(--dur-fast) var(--ease);
}
.btn-install:hover{ background:var(--primary-hover); }
.powered-by{ font-size:var(--fs-xs); color:var(--text-dim); text-align:center; opacity:.8; }
.powered-by strong{ color:var(--text-dim); }
.role-badge{ font-size:var(--fs-xs); font-weight:700; text-align:center; padding:var(--sp-2); border-radius:var(--r-control); background:var(--primary-soft); color:var(--primary-ink); }

/* ------------------------------------------------------------------- MAIN */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--gutter); border-bottom:1px solid var(--border);
  background:var(--surface-1);
  position:sticky; top:0; z-index:30;
}
.topbar h1{ font-size:var(--fs-lg); margin:0; flex:1; font-weight:700; }
.topbar-right{ display:flex; align-items:center; gap:var(--sp-2); }
.burger{ display:none; background:none; border:none; font-size:var(--fs-lg); cursor:pointer; min-width:var(--tap); min-height:var(--tap); color:var(--text); border-radius:var(--r-control); }
.pill{ background:var(--accent-soft); color:var(--accent-ink); font-size:var(--fs-xs); font-weight:700; padding:var(--sp-1) var(--sp-3); border-radius:var(--r-pill); }

.view-container{ padding:var(--sp-5) var(--gutter) var(--sp-8); flex:1; width:100%; max-width:var(--content-max); margin-inline:auto; }
.view{ display:none; }
.view.active{ display:block; animation:fadeIn var(--dur-slow) var(--ease); }
@keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ----------------------------------------------------------- CARDS / GRID */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-5); }
.card{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-4) var(--sp-4); box-shadow:var(--shadow-1); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card:hover{ box-shadow:var(--shadow-2); }
.card .card-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.card .icon-badge{ width:40px; height:40px; border-radius:var(--r-control); display:flex; align-items:center; justify-content:center; font-size:var(--fs-md); }
.card .num{ font-family:var(--font-title); font-size:var(--fs-xl); font-weight:800; margin-top:var(--sp-3); letter-spacing:-.02em; }
.card .label{ font-size:var(--fs-xs); color:var(--text-dim); margin-top:2px; }
.card .trend{ font-size:var(--fs-xs); margin-top:var(--sp-2); font-weight:700; }
.trend.up{ color:var(--success); }
.trend.down{ color:var(--danger); }

.panel{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-5); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); gap:var(--sp-3); flex-wrap:wrap; }
.panel-head h2{ font-size:var(--fs-md); margin:0; font-weight:700; }
.panel-head .sub{ font-size:var(--fs-xs); color:var(--text-dim); margin-top:2px; }

.grid-2{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--sp-4); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
@media (max-width:1000px){ .grid-2, .grid-3{ grid-template-columns:minmax(0,1fr); } }
.grid-2 > *, .grid-3 > *{ min-width:0; }

/* ---------------------------------------------------------------- BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  background:var(--primary); color:var(--on-primary); border:1px solid transparent;
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-control); font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  min-height:38px; text-decoration:none; position:relative;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover{ background:var(--primary-hover); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn.secondary{ background:var(--surface-1); color:var(--text); border-color:var(--border-strong); }
.btn.secondary:hover{ background:var(--surface-2); }
.btn.ghost{ background:transparent; color:var(--primary-ink); }
.btn.ghost:hover{ background:var(--primary-soft); }
.btn.accent{ background:var(--accent); color:var(--surface-1); }
.btn.accent:hover{ filter:brightness(1.08); background:var(--accent); }
.btn.danger{ background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.btn.danger:hover{ background:var(--danger); color:var(--surface-1); }
.btn.sm{ padding:var(--sp-1) var(--sp-3); font-size:var(--fs-xs); min-height:32px; }
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none; }
.btn.is-loading{ color:transparent !important; pointer-events:none; }
.btn.is-loading::after{
  content:''; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--on-primary); border-right-color:transparent; animation:spin .7s linear infinite;
}
.btn.secondary.is-loading::after, .btn.danger.is-loading::after, .btn.ghost.is-loading::after{ border-color:var(--text-dim); border-right-color:transparent; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.icon-btn{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-control); width:32px; height:32px; cursor:pointer; font-size:var(--fs-sm); color:var(--text); transition:background var(--dur-fast) var(--ease); }
.icon-btn:hover{ background:var(--surface-2); }
.icon-btn.danger:hover{ background:var(--danger); color:var(--surface-1); }

/* -------------------------------------------------------------- FILTER BAR */
.filters{ display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--sp-4); }
.filters input[type=text], .filters input[type=search], .filters input[type=date], .filters select{
  padding:var(--sp-2) var(--sp-3); border:1px solid var(--border-strong); border-radius:var(--r-control); font-size:var(--fs-sm); background:var(--surface-1); color:var(--text); min-height:38px;
}
.filters input[type=text]{ min-width:200px; }

/* ------------------------------------------------------------------ TABLE */
.table-wrap{ overflow-x:auto; border-radius:var(--r-card); border:1px solid var(--border); background:var(--surface-1); }
@media (min-width:901px){ .table-wrap{ max-height:72vh; overflow-y:auto; } }
table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:600px; }
/* listes simples à deux colonnes (texte + bouton), sans en-tête : pas de largeur minimale */
table.table{ min-width:0; }
table.table td{ overflow-wrap:anywhere; }
thead th{
  position:sticky; top:0; z-index:1; text-align:left; background:var(--surface-2); color:var(--text-dim);
  font-weight:700; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em;
  padding:var(--sp-3) var(--sp-3); border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{ padding:var(--sp-3) var(--sp-3); border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition:background var(--dur-fast) var(--ease); }
tbody tr:hover{ background:var(--surface-2); }
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--primary-soft); color:var(--primary-ink); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-xs); margin-right:var(--sp-2); vertical-align:middle; flex-shrink:0; }
.row-name{ display:flex; align-items:center; }
.empty-state{ text-align:center; padding:var(--sp-7) var(--sp-5); color:var(--text-dim); }
.empty-state .em-ic{ font-size:36px; margin-bottom:var(--sp-2); }

/* Champs de saisie à l'intérieur des tableaux (notes, présences…) : même style que les formulaires */
tbody td input:not([type=checkbox]):not([type=radio]):not([type=file]), tbody td select, tbody td textarea{
  padding:var(--sp-1) var(--sp-3); border:1px solid var(--border-strong); border-radius:var(--r-control); font-size:var(--fs-sm);
  background:var(--surface-1); color:var(--text); min-height:36px; font-family:inherit;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
tbody td input:focus, tbody td select:focus, tbody td textarea:focus{ outline:none; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); }
tbody td input[type=number]{ width:90px; }

/* Tableaux en cartes sur téléphone (classe posée par theme.js) */
@media (max-width:640px){
  table.is-cards{ min-width:0; }
  table.is-cards thead{ position:absolute; left:-9999px; }
  table.is-cards tbody, table.is-cards tr{ display:block; }
  table.is-cards tr{ padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); }
  table.is-cards tr:last-child{ border-bottom:none; }
  table.is-cards tr{ width:100%; }
  /* une cellule d'actions (boutons) ne doit jamais élargir la carte : elle passe à la ligne */
  table.is-cards td{ white-space:normal !important; min-width:0; flex-wrap:wrap; }
  table.is-cards td:has(> button, > .btn, > a.btn){ justify-content:flex-start; text-align:left; gap:var(--sp-2); }
  table.is-cards td{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); border:none; padding:var(--sp-1) 0; text-align:right; }
  table.is-cards td[data-label]:not([data-label=""])::before{ content:attr(data-label); color:var(--text-dim); font-weight:600; font-size:var(--fs-xs); text-align:left; flex-shrink:0; }
  /* cellule avec nom d'élève/personne : titre de la carte, sans libellé */
  table.is-cards td:has(.row-name){ justify-content:flex-start; text-align:left; font-weight:600; padding-bottom:var(--sp-2); }
  table.is-cards td:has(.row-name)::before{ display:none; }
  table.is-cards td:has(.row-name) .row-name{ flex:1; min-width:0; }
  /* cellule de saisie : libellé au-dessus, champ pleine largeur */
  table.is-cards td:has(input:not([type=checkbox]):not([type=radio]), select, textarea){ flex-direction:column; align-items:stretch; text-align:left; gap:var(--sp-1); }
  table.is-cards td input:not([type=checkbox]):not([type=radio]), table.is-cards td select, table.is-cards td textarea{ width:100% !important; max-width:none; }
}
/* Barres de filtres : champs sur toute la largeur du téléphone */
@media (max-width:640px){
  .filters > input, .filters > select, .filters > .btn{ flex:1 1 100%; width:100%; }
  .cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-3); }
  .card{ padding:var(--sp-3); }
  .card .num{ font-size:var(--fs-lg); margin-top:var(--sp-2); }
  .card .icon-badge{ width:32px; height:32px; }
}

/* ----------------------------------------------------------------- BADGES */
.badge{ display:inline-block; padding:2px var(--sp-3); border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:700; }
.badge.green{ background:var(--success-soft); color:var(--success); }
.badge.red{ background:var(--danger-soft); color:var(--danger); }
.badge.amber{ background:var(--warning-soft); color:var(--warning); }
.badge.blue{ background:var(--info-soft); color:var(--info); }
.badge.purple{ background:var(--accent-soft); color:var(--accent-ink); }
.badge.gray{ background:var(--surface-2); color:var(--text-dim); border:1px solid var(--border); }

/* ------------------------------------------------------------ COMPTABILITÉ */
.amount{ font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
/* lignes « libellé … montant » : le libellé peut passer à la ligne, le montant jamais */
:where(div, li):has(> .amount){ gap:var(--sp-3); }
:where(div, li):has(> .amount) > :first-child{ min-width:0; }
.amount.in{ color:var(--success); }
.amount.out{ color:var(--danger); }
.txn-list{ display:flex; flex-direction:column; }
.txn-item{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--border); }
.txn-item:last-child{ border-bottom:none; }
.txn-ic{ width:36px; height:36px; border-radius:var(--r-control); display:flex; align-items:center; justify-content:center; font-size:var(--fs-md); flex-shrink:0; }
.txn-ic.in{ background:var(--success-soft); }
.txn-ic.out{ background:var(--danger-soft); }
.txn-body{ flex:1; min-width:0; }
.txn-title{ font-size:var(--fs-sm); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.txn-sub{ font-size:var(--fs-xs); color:var(--text-dim); }
.kpi-flow{ display:flex; align-items:center; justify-content:center; gap:var(--sp-4); margin:var(--sp-2) 0 var(--sp-1); }
.kpi-flow .arrow{ font-size:var(--fs-lg); color:var(--text-dim); }

/* ------------------------------------------------------------------- FORM */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) var(--sp-4); }
.form-grid.single{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; }
.field select, .field input, .field textarea{ max-width:100%; }
.field.span2{ grid-column:1 / -1; }
.field label{ font-size:var(--fs-xs); font-weight:600; color:var(--text-dim); }
.field input, .field select, .field textarea{
  padding:var(--sp-2) var(--sp-3); border:1px solid var(--border-strong); border-radius:var(--r-control); font-size:var(--fs-sm);
  background:var(--surface-1); color:var(--text); min-height:40px;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-faint); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); }
.field input:disabled, .field select:disabled, .field textarea:disabled{ background:var(--surface-2); color:var(--text-faint); cursor:not-allowed; }
.field.has-error input, .field.has-error select, .field.has-error textarea, .field input[aria-invalid="true"]{ border-color:var(--danger); }
.field .error-text{ color:var(--danger); font-size:var(--fs-xs); }
.field textarea{ resize:vertical; min-height:80px; }
.form-actions{ display:flex; justify-content:flex-end; gap:var(--sp-3); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border); }

/* REMPLISSAGE INTELLIGENT */
.field input.champ-pre-rempli, .field select.champ-pre-rempli, .field textarea.champ-pre-rempli{
  background:var(--success-soft); border-color:var(--success);
}
.field input.champ-a-verifier, .field select.champ-a-verifier, .field textarea.champ-a-verifier{
  background:var(--warning-soft); border-color:var(--warning);
}
.btn-recording{ background:var(--danger-soft) !important; border-color:var(--danger) !important; color:var(--danger) !important; animation:pulse-rec 1.2s infinite; }
@keyframes pulse-rec{ 0%,100%{opacity:1;} 50%{opacity:.6;} }

/* ----------------------------------------------------------------- BULLES */
.bulles{ display:flex; gap:var(--sp-2); }
.bulle-wrap{ position:relative; }
.bulle-btn{
  position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface-1); font-size:var(--fs-md); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease);
}
.bulle-btn:hover{ background:var(--primary-soft); }
.bulle-badge{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:var(--r-pill);
  background:var(--danger); color:var(--surface-1); font-size:var(--fs-xs); font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1;
}
.bulle-dropdown{
  position:absolute; top:46px; right:0; width:320px; max-width:90vw; max-height:420px; overflow-y:auto;
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-3);
  z-index:90; padding:var(--sp-3); animation:fadeIn var(--dur) var(--ease);
}
.bulle-dropdown h4{ margin:0 0 var(--sp-3); font-size:var(--fs-sm); }
/* ===== Refonte (DESIGN.md §6, §8, §11) : composants communs du tableau de bord ===== */
.db-bonjour{ margin:0 0 12px; }
/* ----- Emploi du temps (DESIGN.md §11) ----- */
.puce-select{ min-height:40px; padding:0 34px 0 14px; border-radius:999px; border:1px solid var(--border); background-color:var(--primary-soft); color:var(--primary-ink); font:inherit; font-weight:700; }
.edt-jours{ width:100%; margin-bottom:12px; }
.edt-jours .seg{ flex:1 1 0; position:relative; }
.edt-auj{ position:absolute; top:5px; right:7px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.edt-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.edt-ligne{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; align-items:stretch; }
.edt-heure{ display:flex; flex-direction:column; padding-top:8px; font-variant-numeric:tabular-nums; }
.edt-heure strong{ font-size:14px; } .edt-heure small{ font-size:12px; color:var(--text-dim); }
.edt-cours{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; padding:10px 10px 10px 12px; border-radius:12px; background:color-mix(in srgb, var(--mat) 10%, var(--surface-1)); border:1px solid color-mix(in srgb, var(--mat) 25%, var(--border)); border-left:4px solid var(--mat); }
.edt-cours.en-cours{ box-shadow:0 0 0 2px var(--em-gold-400, #E8B04B); }
.edt-txt{ flex:1 1 9em; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.edt-txt strong{ overflow-wrap:break-word; hyphens:auto; } .edt-txt small{ color:var(--text-dim); font-size:13px; overflow-wrap:anywhere; }
.edt-act{ display:flex; gap:6px; align-items:center; flex:0 0 auto; margin-left:auto; }
.timetable .tt-slot[style*="--mat"]{ background:color-mix(in srgb, var(--mat) 10%, var(--surface-1)); border-left:4px solid var(--mat); }
.timetable .tt-slot[style*="--mat"] b{ color:var(--text); }
.edt-vide{ min-height:44px; border:1px dashed var(--border-strong); border-radius:12px; background:transparent; color:var(--text-dim); font:inherit; font-size:14px; text-align:left; padding:0 12px; cursor:pointer; }
.edt-vide:hover{ color:var(--primary-ink); border-color:var(--primary); }
.edt-pause{ display:flex; justify-content:space-between; gap:10px; padding:6px 12px; border-radius:8px; background:var(--surface-2); color:var(--text-dim); font-size:13px; }
.edt-pause strong{ color:var(--text); font-weight:700; }
/* ----- Cahier d'appel (DESIGN.md §8 et §11) ----- */
.ca-barre{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.ca-mois{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px; }
.ca-mois strong{ min-width:140px; text-align:center; text-transform:capitalize; font-size:16px; }
.ca-fleche{ width:44px; height:44px; border:1px solid var(--border); border-radius:12px; background:var(--surface-1); color:var(--text); font-size:22px; line-height:1; cursor:pointer; }
.ca-fleche:hover{ background:var(--surface-2); }
.ca-defile{ position:relative; }
@media (max-width:900px){
  .ca-defile{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .ca-table .ca-nom{ min-width:0; }
  .ca-nom-txt{ display:block; max-width:104px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
.ca-table .ca-a, .ca-pastille.ca-a{ background:var(--accent-soft); color:var(--accent-ink); }
.ca-table .ca-r, .ca-pastille.ca-r{ background:var(--em-gold-100, #fbf0d9); color:color-mix(in srgb, var(--em-gold-400, #E8B04B) 40%, var(--text)); }
.ca-table .ca-p, .ca-pastille.ca-p{ color:var(--success); }
.ca-table th.ca-auj, .ca-table td.ca-auj{ background:var(--primary-soft); color:var(--primary-ink); }
.ca-legende{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-top:10px; font-size:13px; }
.ca-legende span{ display:inline-flex; align-items:center; gap:6px; }
.ca-pastille{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; font-style:normal; font-weight:800; border:1px solid var(--border); }
.cj-haut{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.cj-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cj-liste .appel-ligne{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:12px 0; border-top:1px solid var(--border); }
.cj-eleve{ display:flex; align-items:center; gap:10px; min-width:0; }
.cj-nom{ display:flex; flex-direction:column; min-width:0; } .cj-nom strong{ overflow-wrap:anywhere; }
.cj-signale{ color:var(--accent-ink); font-size:12px; }
.cj-etats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.cj-btn{ min-height:44px; border:1px solid var(--border); border-radius:10px; background:var(--surface-1); color:var(--text-dim); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.appel-present .cj-btn[data-s="Présent"]{ background:var(--success-soft); border-color:var(--success); color:var(--success); }
.appel-absent .cj-btn[data-s="Absent"]{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); }
.appel-retard .cj-btn[data-s="Retard"]{ background:var(--em-gold-100, #fbf0d9); border-color:var(--em-gold-400, #E8B04B); color:color-mix(in srgb, var(--em-gold-400, #E8B04B) 40%, var(--text)); }
.cj-liste .appel-ligne.appel-absent, .cj-liste .appel-ligne.appel-retard{ background:transparent; }
.cj-motif{ min-height:40px; padding:0 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-1); color:var(--text); font:inherit; }
.appel-present .cj-motif{ display:none; }
.cj-valider{ position:sticky; bottom:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px -16px -16px; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background:color-mix(in srgb, var(--surface-1) 94%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--border); }
.cj-valider .appel-compteur{ margin:0; font-size:13px; }
@media (max-width:900px){ body.has-bottom-nav .cj-valider{ bottom:calc(60px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width:900px){ .cj-liste .appel-ligne{ grid-template-columns:minmax(0,1fr) 320px minmax(0,220px); align-items:center; } .appel-present .cj-motif{ display:block; visibility:hidden; } }
/* ----- Menu « ⋯ » générique ----- */
.menu-plus{ position:relative; flex:0 0 auto; }
.menu-plus > summary{ list-style:none; cursor:pointer; }
.menu-plus > summary::-webkit-details-marker{ display:none; }
.menu-plus-liste{ position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:220px; padding:6px; border:1px solid var(--border); border-radius:12px; background:var(--surface-1); box-shadow:0 8px 24px rgba(0,0,0,.18); }
.menu-plus-liste .btn-reset{ display:block; width:100%; min-height:44px; padding:0 12px; text-align:left; border-radius:8px; color:var(--text); }
.menu-plus-liste .btn-reset:hover{ background:var(--surface-2); }
.menu-plus-liste .btn-reset.danger{ color:var(--accent-ink); }
/* ----- Tableau d'affichage (DESIGN.md §11) ----- */
.ta-lien{ padding:10px 12px; border-radius:10px; background:var(--surface-2); font-size:13px; color:var(--text-dim); overflow-wrap:anywhere; user-select:all; }
.honneur-grille{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:12px; }
.honneur-carte{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:18px 14px 14px; border-radius:18px; min-width:0;
  background:linear-gradient(160deg, color-mix(in srgb, var(--em-gold-400, #E8B04B) 22%, var(--surface-1)), var(--surface-1) 70%); border:1px solid color-mix(in srgb, var(--em-gold-400, #E8B04B) 45%, var(--border)); }
.honneur-trimestre{ background:linear-gradient(160deg, color-mix(in srgb, var(--primary) 18%, var(--surface-1)), var(--surface-1) 70%); border-color:color-mix(in srgb, var(--primary) 35%, var(--border)); }
.honneur-annee{ background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--surface-1)), var(--surface-1) 70%); border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); }
.honneur-vide{ background:var(--surface-1); border:1px dashed var(--border-strong); }
.honneur-medaille{ position:absolute; top:12px; right:12px; color:var(--em-gold-400, #E8B04B); }
.honneur-medaille svg{ width:22px; height:22px; }
.honneur-medaille.vide{ position:static; color:var(--text-faint, var(--text-dim)); }
.honneur-periode{ font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); }
.honneur-avatar{ width:56px; height:56px; font-size:18px; margin-top:4px; }
.honneur-nom{ font-size:17px; overflow-wrap:anywhere; }
.honneur-libelle{ font-size:13px; color:var(--text-dim); }
.ta-bandeau{ overflow:hidden; border-radius:10px; background:var(--em-green-900, #14392D); color:#fff; padding:10px 0; margin-bottom:12px; }
.ta-bandeau-txt{ display:inline-block; white-space:nowrap; padding-left:100%; animation:taDefile 22s linear infinite; font-weight:700; }
.ta-sep{ margin:0 14px; color:var(--em-gold-400, #E8B04B); }
@keyframes taDefile{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion: reduce){ .ta-bandeau-txt{ animation:none; padding:0 12px; white-space:normal; } }
.ta-ajout{ display:flex; gap:8px; margin-bottom:12px; }
.ta-ajout input{ flex:1; min-width:0; min-height:44px; }
.ta-actus .lc-txt{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.ta-actus .lc-txt strong{ font-weight:600; white-space:normal; overflow-wrap:anywhere; }
.ta-actus .lc-txt small{ color:var(--text-dim); font-size:12px; }
.suggestions-puces{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.puce-suggestion{ min-height:32px; padding:0 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); color:var(--text); font:inherit; font-size:13px; cursor:pointer; }
.puce-suggestion:hover{ border-color:var(--primary); color:var(--primary-ink); }
/* ----- Vie de l'école : formulaire en sections ----- */
.form-section{ border:0; margin:0 0 20px; padding:0; min-width:0; }
.form-section legend{ display:flex; align-items:center; gap:8px; padding:0; margin-bottom:10px; font-weight:800; font-size:15px; }
.fs-num{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--primary-soft); color:var(--primary-ink); font-size:13px; }
.zone-envoi{ position:relative; display:flex; align-items:center; gap:12px; padding:16px; border:2px dashed var(--border-strong); border-radius:14px; background:var(--surface-2); cursor:pointer; flex-wrap:wrap; }
.zone-envoi:hover, .zone-envoi:focus-within{ border-color:var(--primary); }
.zone-envoi.rempli{ border-style:solid; border-color:var(--primary); background:var(--primary-soft); }
.zone-envoi input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.ze-ic{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:12px; background:var(--surface-1); color:var(--primary); flex:0 0 auto; }
.ze-txt{ display:flex; flex-direction:column; flex:1; min-width:150px; } .ze-txt small{ color:var(--text-dim); }
.ze-etat{ font-size:13px; font-weight:700; color:var(--text-dim); }
.seg-radio .seg{ display:inline-flex; align-items:center; position:relative; }
.seg-radio .seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg-radio .seg:has(input:checked){ background:var(--surface-1); color:var(--text); box-shadow:var(--shadow-1); }
.seg-radio .seg:focus-within{ outline:2px solid var(--primary); outline-offset:1px; }
.choix-classes{ flex-wrap:wrap; gap:8px; margin-top:10px; }
.puce-case{ position:relative; cursor:pointer; }
.puce-case input{ position:absolute; opacity:0; }
.puce-case span{ display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border:1px solid var(--border); border-radius:999px; font-size:14px; }
.puce-case input:checked + span{ background:var(--primary-soft); border-color:var(--primary); color:var(--primary-ink); font-weight:700; }
.puce-case input:focus-visible + span{ outline:2px solid var(--primary); outline-offset:1px; }
.fil-tete .menu-plus{ margin-left:auto; }
/* ----- Programmes pédagogiques ----- */
.prog-filtres{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.puce-select.petit{ min-height:36px; font-size:14px; background-color:var(--surface-2); color:var(--text); font-weight:600; max-width:100%; }
.puce-select.petit.actif{ background-color:var(--primary-soft); color:var(--primary-ink); border-color:var(--primary); }
.prog-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:12px; }
.prog-carte{ display:flex; flex-direction:column; gap:6px; min-width:0; padding:14px; border:1px solid var(--border); border-radius:16px; background:var(--surface-1); }
.prog-tete{ display:flex; align-items:center; gap:8px; }
.prog-tri{ font-size:12px; color:var(--text-dim); font-weight:700; }
.prog-tete .menu-plus{ margin-left:auto; }
.prog-matiere{ font-size:16px; overflow-wrap:anywhere; }
.prog-ens{ color:var(--text-dim); font-size:14px; overflow-wrap:anywhere; }
.prog-avancee{ display:flex; align-items:center; gap:10px; margin-top:4px; font-variant-numeric:tabular-nums; }
.prog-avancee .sc-piste{ height:8px; }
.prog-ok{ background:var(--success) !important; } .prog-moyen{ background:var(--em-gold-400, #E8B04B) !important; } .prog-bas{ background:var(--accent) !important; }
.prog-pied{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; padding-top:10px; border-top:1px solid var(--border); }
.prog-pied small{ color:var(--text-dim); }
/* ----- Pointage des enseignants (DESIGN.md §11) ----- */
.pens-onglets{ margin-bottom:14px; }
.pens-ok{ color:var(--success); } .pens-ko{ color:var(--accent-ink); }
.pens-outils{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 14px; margin-bottom:12px; }
.pens-date{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-dim); }
.pens-date input{ min-height:44px; padding:0 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-1); color:var(--text); font:inherit; }
.pens-liste{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:10px; }
.pens-carte{ min-width:0; display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid var(--border); border-radius:16px; background:var(--surface-1); }
.pens-tete{ display:flex; align-items:center; gap:10px; min-width:0; }
.pens-tete > .badge, .pens-tete > .badge-etat{ flex:0 0 auto; }
.pens-id{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pens-id strong{ overflow-wrap:anywhere; } .pens-id small{ color:var(--text-dim); font-size:13px; overflow-wrap:anywhere; }
.pens-heures{ display:flex; gap:20px; font-variant-numeric:tabular-nums; }
.pens-heures span{ display:flex; flex-direction:column; } .pens-heures small{ font-size:12px; color:var(--text-dim); } .pens-heures strong{ font-size:16px; }
.pens-pied{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px; }
.pens-meta{ display:flex; flex-wrap:wrap; gap:6px; }
.pens-motif{ padding:8px 10px; border-radius:10px; background:var(--surface-2); font-size:13px; overflow-wrap:anywhere; }
.pens-carte[data-statut="Présent"] .cj-btn[data-s="Présent"]{ background:var(--success-soft); border-color:var(--success); color:var(--success); }
.pens-carte[data-statut="Absent"] .cj-btn[data-s="Absent"]{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); }
.pens-carte[data-statut="Retard"] .cj-btn[data-s="Retard"]{ background:var(--em-gold-100, #fbf0d9); border-color:var(--em-gold-400, #E8B04B); color:color-mix(in srgb, var(--em-gold-400, #E8B04B) 40%, var(--text)); }
.pens-carte[data-statut="Présent"] .cj-motif{ display:none; }
.pens-explication{ margin-bottom:12px; padding:10px 12px; border-radius:12px; background:var(--surface-2); font-size:14px; }
.pens-explication summary{ cursor:pointer; font-weight:700; min-height:28px; }
.pens-explication ol{ margin:8px 0 0; padding-left:20px; } .pens-explication li{ margin:4px 0; }
.pens-gps .lc-ligne{ flex-wrap:wrap; }
.pens-gps-btn{ display:flex; gap:6px; margin-left:auto; }
/* ----- Parents ↔ Élèves (DESIGN.md §11) ----- */
.pe-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:12px; align-items:start; }
.pe-carte{ min-width:0; border:1px solid var(--border); border-radius:16px; padding:14px; background:var(--surface-1); display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.pe-carte[hidden], .pe-aucun[hidden]{ display:none !important; }
.pe-tete{ display:flex; align-items:center; gap:10px; min-width:0; }
.pe-tete .badge-etat{ flex:0 0 auto; }
.pe-id{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.pe-id strong{ overflow-wrap:anywhere; line-height:1.25; }
.pe-id small{ color:var(--text-dim); font-size:13px; }
.puce-classe{ display:inline-block; padding:1px 8px; border-radius:999px; background:var(--primary-soft); color:var(--primary-ink); font-size:12px; font-weight:700; }
.pe-parent, .pe-comptes{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; }
.pe-lib{ flex-basis:100%; font-size:12px; color:var(--text-dim); }
.pe-nom{ font-weight:700; overflow-wrap:anywhere; }
.pe-tels{ display:flex; flex-wrap:wrap; gap:6px; }
.puce-tel{ padding:2px 10px; border-radius:999px; background:var(--surface-2); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.puce-tel.invalide{ white-space:normal; overflow-wrap:anywhere; color:var(--accent-ink); background:var(--accent-soft); }
.puce-compte{ display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:2px 4px 2px 10px; border-radius:999px; background:var(--success-soft); color:var(--success); font-size:13px; font-weight:700; }
.puce-retirer{ width:28px; height:28px; border:0; border-radius:999px; background:transparent; color:inherit; font-weight:900; cursor:pointer; flex:0 0 auto; }
.puce-retirer:hover{ background:rgba(0,0,0,.08); }
.pe-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; padding-top:10px; border-top:1px solid var(--border); }
.pe-actions details > summary{ list-style:none; cursor:pointer; }
.pe-actions details > summary::-webkit-details-marker{ display:none; }
.pe-relier[open]{ flex-basis:100%; order:3; }
.pe-feuille{ display:flex; flex-direction:column; gap:8px; margin-top:8px; padding:10px; border-radius:12px; background:var(--surface-2); }
.pe-feuille input, .pe-feuille select{ width:100%; min-height:44px; padding:6px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-1); color:var(--text); font:inherit; }
.pe-feuille .btn{ align-self:flex-end; }
.pe-plus{ position:relative; margin-left:auto; }
.pe-menu{ position:absolute; right:0; top:calc(100% + 4px); z-index:5; min-width:220px; padding:6px; border:1px solid var(--border); border-radius:12px; background:var(--surface-1); box-shadow:var(--shadow-2, 0 6px 20px rgba(0,0,0,.15)); }
.pe-menu .btn-reset{ width:100%; min-height:44px; padding:0 12px; text-align:left; border-radius:8px; }
.pe-menu .btn-reset:hover{ background:var(--surface-2); }
.pe-ajout{ display:flex; gap:8px; align-items:center; }
.pe-ajout select{ flex:1; min-width:0; min-height:40px; }
.pe-invit, .pe-invit-liste{ display:flex; flex-wrap:wrap; gap:8px; }
.pe-invit-liste{ flex-direction:column; }
.pe-a-faire{ color:var(--accent-ink); }
/* ----- Carte de paiement (Compta) ----- */
.seulement-ordi{ display:none; }
@media (min-width:900px){ .seulement-mobile{ display:none !important; } .seulement-ordi{ display:block; } }
.scol-outils{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.scol-recherche{ flex:1 1 180px; min-height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-1); color:var(--text); font:inherit; }
.segmente{ display:flex; gap:2px; padding:3px; border-radius:12px; background:var(--surface-2); overflow-x:auto; max-width:100%; }
.seg{ flex:0 0 auto; min-height:36px; padding:0 12px; border:0; border-radius:9px; background:transparent; color:var(--text-dim); font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.seg.actif{ background:var(--surface-1); color:var(--text); box-shadow:var(--shadow-1); }
.scol-cartes{ display:flex; flex-direction:column; gap:12px; }
.scol-carte{ border:1px solid var(--border); border-radius:16px; padding:14px; background:var(--surface-1); }
.scol-carte[hidden], .scol-table tr[hidden], .scol-aucun[hidden]{ display:none !important; }
.scol-table .badge{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.scol-table .badge svg{ width:14px; height:14px; }
.sc-tete{ display:flex; align-items:center; gap:10px; }
.sc-id{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sc-id strong{ overflow-wrap:anywhere; line-height:1.25; }
.sc-id small{ color:var(--text-dim); font-size:13px; }
.sc-reste{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.sc-reste small{ font-size:12px; color:var(--text-dim); }
.sc-reste strong{ font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sc-reste.du strong, .sc-totaux strong.du{ color:var(--accent); }
.sc-reste.ok strong, .sc-totaux strong.ok{ color:var(--success); }
.sc-reste.ok svg{ width:24px; height:24px; }
.sc-progression{ display:flex; align-items:center; gap:10px; margin:12px 0 4px; font-size:13px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.sc-piste{ flex:1; height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.sc-piste div{ height:100%; border-radius:999px; background:var(--primary); }
.sc-echeances{ list-style:none; margin:8px 0 0; padding:0; }
.sc-ligne{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"lib mt" "etat etat"; gap:6px 12px; padding:10px 0; border-top:1px solid var(--border); }
.sc-lib{ grid-area:lib; display:flex; flex-direction:column; min-width:0; }
.sc-lib small{ color:var(--text-dim); font-size:12px; }
.sc-mt{ grid-area:mt; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.sc-etat{ grid-area:etat; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sc-pied{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--border); }
.sc-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.sc-totaux{ display:flex; gap:14px; font-size:13px; color:var(--text-dim); font-variant-numeric:tabular-nums; margin-left:auto; }
.sc-totaux strong{ color:var(--text); font-size:14px; }

.kpi-unite{ display:block; font-size:12px; font-weight:700; color:var(--text-dim); letter-spacing:0; margin-top:2px; }
.cards-2x2 .kpi-carte .num{ white-space:normal; overflow:visible; }
.mer-score{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:var(--primary-soft); color:var(--primary-ink); font-size:13px; font-weight:800; vertical-align:middle; }
.lien-discret{ margin-top:8px; border:0; background:none; color:var(--primary); font:inherit; font-size:14px; font-weight:700; cursor:pointer; padding:6px 0; }
.lien-discret:hover{ text-decoration:underline; }
.liste-compacte{ list-style:none; margin:0; padding:0; }
.lc-ligne{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.lc-ligne:first-child{ border-top:0; }
.lc-avatar{ width:36px; height:36px; border-radius:999px; background:var(--primary-soft); color:var(--primary-ink); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lc-corps{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lc-corps > span:not(.badge-etat){ color:var(--text-dim); font-size:13px; }
.lc-corps .badge-etat{ align-self:flex-start; }
.db-bonjour h2{ margin:0; font-size:22px; font-weight:800; }
.db-date{ color:var(--text-dim); font-size:14px; text-transform:none; }
.db-date::first-letter{ text-transform:uppercase; }
.afaire{ padding:14px 16px; }
.afaire-tete{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.afaire-tete h2{ margin:0; font-size:18px; font-weight:700; }
.afaire-compte{ min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.afaire-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.afaire-ligne{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.afaire-ligne:first-child{ border-top:0; }
.afaire-ic{ width:36px; height:36px; border-radius:10px; background:var(--warning-soft); color:var(--warning); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.afaire-ic svg{ width:20px; height:20px; }
.afaire-txt{ flex:1; min-width:0; display:flex; flex-direction:column; font-size:15px; }
.afaire-txt span{ color:var(--text-dim); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.etat-vide{ display:flex; align-items:center; gap:12px; padding:6px 0; color:var(--text-dim); font-size:15px; }
.etat-vide-ic{ width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--success-soft); color:var(--success); flex-shrink:0; }
.etat-vide-ic svg{ width:20px; height:20px; }
.cards-2x2{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width:1100px){ .cards-2x2{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.cards-2x2 .kpi-carte{ padding:14px; min-width:0; }
.cards-2x2 .kpi-carte .num{ font-size:clamp(20px, 5.4vw, 30px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cards-2x2 .kpi-carte .label{ font-size:13px; }
.badge-etat{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.badge-etat svg{ width:14px; height:14px; }
.badge-etat.ok{ background:var(--success-soft); color:var(--success); }
.badge-etat.attente{ background:var(--warning-soft); color:var(--warning); }
.badge-etat.erreur{ background:var(--danger-soft); color:var(--danger); }
.lignes-classes{ display:flex; flex-direction:column; }
.ligne-classe{ display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:8px 4px; border:0; border-top:1px solid var(--border); background:none; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.ligne-classe:first-child{ border-top:0; }
.ligne-classe:hover{ background:var(--surface-2); }
.lc-nom{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lc-nom small{ color:var(--text-dim); font-size:12px; }
.lc-eff{ color:var(--text-dim); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.detail-lignes{ display:flex; flex-direction:column; }
.detail-lignes div{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.detail-lignes span{ color:var(--text-dim); }
.repart-piste{ height:6px; }
.repart-ligne{ margin-bottom:10px; }
.banniere-discrete{ display:flex; align-items:center; gap:10px; padding:10px 12px; margin:0 0 16px; border:1px solid var(--border); border-radius:16px; background:var(--surface-1); }
.bd-ic{ color:var(--primary); display:flex; } .bd-ic svg{ width:20px; height:20px; }
.bd-txt{ flex:1; font-size:14px; color:var(--text-dim); }
.bd-fermer{ width:36px; height:36px; border:0; border-radius:10px; background:transparent; color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; }
/* ===== Refonte (DESIGN.md §7) : centre de notifications à onglets ===== */
.centre-notif{ width:380px; max-height:min(560px, 80vh); padding:0; display:flex; flex-direction:column; }
.centre-notif[style*="display:none"], .centre-notif[style*="display: none"]{ display:none !important; }
.cn-poignee{ display:none; }
.cn-tete{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px 4px; }
.cn-fermer{ width:36px; height:36px; border:0; border-radius:10px; background:transparent; color:var(--text-dim); font-size:16px; cursor:pointer; }
.cn-fermer:hover{ background:var(--surface-2); }
.cn-onglets{ display:flex; gap:4px; padding:4px 10px 8px; border-bottom:1px solid var(--border); }
.cn-onglet{ flex:1; min-height:36px; border:0; border-radius:10px; background:transparent; color:var(--text-dim); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.cn-onglet.actif{ background:var(--primary-soft); color:var(--primary-ink); }
.cn-compte{ display:inline-block; min-width:18px; padding:0 5px; border-radius:999px; background:var(--accent); color:#fff; font-size:11px; line-height:18px; margin-left:2px; }
.cn-panneau{ overflow-y:auto; padding:10px 12px 14px; }
.cn-panneau > h4:first-child{ display:none; }   /* le titre est déjà dans l'onglet */
body.centre-ouvert .topbar{ z-index:310; }       /* la feuille passe au-dessus du voile et de la barre du bas */
@media (max-width:640px){
  .centre-notif{ position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-width:none; max-height:82vh; min-height:45vh; border-radius:20px 20px 0 0; z-index:300;
    padding-bottom:env(safe-area-inset-bottom, 0px); animation:cnMonte 250ms var(--ease); }
  .cn-poignee{ display:block; width:40px; height:4px; border-radius:2px; background:var(--border-strong); margin:8px auto 0; }
  body.centre-ouvert::after{ content:''; position:fixed; inset:0; background:var(--scrim, rgba(0,0,0,.4)); z-index:290; }
}
@keyframes cnMonte{ from{ transform:translateY(100%); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .centre-notif{ animation:none; } }
/* ===== Refonte (DESIGN.md §7) : en-tête du personnel, 56 px maximum ===== */
body:not(.theme-parent):not(.theme-portier) .topbar .theme-toggle:not(#btnRechercheGlobale){ display:none; }
.theme-toggle-menu{ width:100%; justify-content:flex-start; border-radius:10px; }
@media (max-width:900px){
  body.has-bottom-nav:not(.theme-parent):not(.theme-portier) .burger{ display:none; }   /* « Menu » est déjà en bas */
  body:not(.theme-parent):not(.theme-portier) .topbar{
    display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-rows:auto auto; column-gap:6px; row-gap:0;
    padding:6px 16px; min-height:56px; max-height:56px; align-content:center; }
  body:not(.theme-parent):not(.theme-portier) .topbar h1{ grid-column:1; grid-row:1; font-size:18px; line-height:24px; font-weight:800;
    display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset; }
  body:not(.theme-parent):not(.theme-portier) .topbar-right{ display:contents; }
  body:not(.theme-parent):not(.theme-portier) #topbarPill{ grid-column:1; grid-row:2; justify-self:start; margin:0; padding:1px 8px; font-size:11px; line-height:16px; }
  body:not(.theme-parent):not(.theme-portier) #btnRechercheGlobale{ grid-column:2; grid-row:1 / span 2; align-self:center; }
  body:not(.theme-parent):not(.theme-portier) .topbar .bulles{ grid-column:3; grid-row:1 / span 2; align-self:center; flex-wrap:nowrap; }
}
.bulle-item{ padding:var(--sp-3); border-radius:var(--r-control); background:var(--surface-2); margin-bottom:var(--sp-2); font-size:var(--fs-sm); line-height:1.4; }
.bulle-item.non-lu{ background:var(--primary-soft); border-left:3px solid var(--primary); }
.bulle-item .bulle-meta{ color:var(--text-dim); font-size:var(--fs-xs); margin-top:var(--sp-1); }

/* ------------------------------------------------------------------ MODAL */
.modal-backdrop{ display:none; position:fixed; inset:0; background:var(--scrim); z-index:100; align-items:flex-start; justify-content:center; padding:var(--sp-7) var(--sp-4); overflow-y:auto; }
.modal-backdrop.open{ display:flex; animation:backdropIn var(--dur) var(--ease); }
@keyframes backdropIn{ from{opacity:0;} to{opacity:1;} }
.modal{ background:var(--surface-1); border-radius:var(--r-lg); width:100%; max-width:640px; box-shadow:var(--shadow-3); animation:modalIn var(--dur-slow) var(--ease); }
@keyframes modalIn{ from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:none;} }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); }
.modal-header h3{ margin:0; font-size:var(--fs-md); }
.modal-close{ background:var(--surface-2); border:none; width:36px; height:36px; border-radius:var(--r-control); cursor:pointer; font-size:var(--fs-sm); color:var(--text); transition:background var(--dur-fast) var(--ease); }
.modal-close:hover{ background:var(--border); }
.modal-body{ padding:var(--sp-5); }

/* ------------------------------------------------------------ TABS (inner) */
.subtabs{ display:flex; gap:var(--sp-2); margin-bottom:var(--sp-4); flex-wrap:wrap; }
.subtab{ padding:var(--sp-2) var(--sp-4); border-radius:var(--r-pill); border:1px solid var(--border-strong); background:var(--surface-1); font-size:var(--fs-sm); font-weight:600; cursor:pointer; color:var(--text-dim); min-height:36px; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.subtab:hover{ background:var(--surface-2); color:var(--text); }
.subtab.active{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }

/* -------------------------------------------------------------- TIMETABLE */
.timetable{ width:100%; border-collapse:collapse; font-size:var(--fs-xs); }
.timetable th, .timetable td{ border:1px solid var(--border); padding:var(--sp-2); text-align:center; vertical-align:top; position:static; }
.timetable th{ background:var(--surface-2); font-size:var(--fs-xs); }
.tt-slot{ background:var(--primary-soft); border-radius:var(--r-control); padding:var(--sp-2); font-size:var(--fs-xs); text-align:left; min-height:44px; }
.tt-slot b{ display:block; font-size:var(--fs-xs); color:var(--primary-ink); }
.tt-slot span{ display:block; color:var(--text-dim); }
.tt-empty{ color:var(--border-strong); font-size:var(--fs-md); }
.tt-time{ font-size:var(--fs-xs); color:var(--text-dim); font-weight:700; white-space:nowrap; }

/* ------------------------------------------------------------ PROGRESS BAR */
.progress{ background:var(--surface-2); border-radius:var(--r-pill); height:8px; overflow:hidden; border:1px solid var(--border); }
.progress > div{ height:100%; background:var(--primary); border-radius:var(--r-pill); transition:width var(--dur-slow) var(--ease); }

/* ---------------------------------------------------------------- PROFILE */
.profile-head{ display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-4); }
.profile-head .avatar{ width:56px; height:56px; font-size:var(--fs-lg); margin:0; }
.profile-head h2{ margin:0 0 var(--sp-1); font-size:var(--fs-lg); }
.profile-head .meta{ color:var(--text-dim); font-size:var(--fs-sm); }

.bulletin-grade{ font-weight:800; }
.bulletin-grade.good{ color:var(--success); }
.bulletin-grade.mid{ color:var(--warning); }
.bulletin-grade.low{ color:var(--danger); }

/* ------------------------------------------------------------------ TOAST */
.toast{
  position:fixed; bottom:var(--sp-5); right:var(--sp-5); max-width:min(420px, calc(100vw - 2*var(--sp-4)));
  background:var(--text); color:var(--surface-0); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-card);
  font-size:var(--fs-sm); box-shadow:var(--shadow-3); opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); z-index:200;
}
.toast.show{ opacity:1; transform:none; }

.hint{ font-size:var(--fs-xs); color:var(--text-dim); margin-top:var(--sp-1); }
/* un lien ou un e-mail très long ne doit jamais élargir la page */
.section-note, .hint, .sub, .actu-item, .bulle-item, .panel-head .sub{ overflow-wrap:anywhere; }
.section-note{ background:var(--info-soft); color:var(--info); border-radius:var(--r-card); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); margin-bottom:var(--sp-4); }

/* Squelettes de chargement */
.skeleton{ display:block; border-radius:var(--r-control); background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%); background-size:200% 100%; animation:shimmer 1.3s linear infinite; min-height:14px; }
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* -------------------------------------------------- IDENTITÉ / LOGO UPLOAD */
.logo-uploader{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.logo-preview{ width:84px; height:84px; border-radius:var(--r-card); border:1px dashed var(--border-strong); background:var(--surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.logo-preview img{ width:100%; height:100%; object-fit:contain; }
.logo-preview .ph{ font-size:30px; color:var(--border-strong); }
.logo-actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* ------------------------------------------- BULLETIN LETTERHEAD & SIGNATURES */
.letterhead{ display:flex; align-items:center; gap:var(--sp-3); padding-bottom:var(--sp-4); margin-bottom:var(--sp-4); border-bottom:2px solid var(--border); }
.letterhead img, .letterhead .lh-ph{ width:48px; height:48px; object-fit:contain; border-radius:var(--r-control); background:var(--surface-2); flex-shrink:0; }
.letterhead .lh-ph{ display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--border-strong); }
.letterhead .lh-text strong{ display:block; font-size:var(--fs-md); }
.letterhead .lh-text span{ display:block; font-size:var(--fs-xs); color:var(--text-dim); }
.letterhead .lh-doc{ margin-left:auto; text-align:right; font-size:var(--fs-xs); color:var(--text-dim); }
.letterhead .lh-doc strong{ display:block; font-size:var(--fs-sm); color:var(--text); }

.signatures{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-top:var(--sp-5); }
.sign-box{ text-align:center; font-size:var(--fs-xs); color:var(--text-dim); }
.sign-box .sign-role{ font-weight:700; color:var(--text); margin-bottom:var(--sp-6); }
.sign-box .sign-line{ border-top:1px solid var(--border-strong); padding-top:var(--sp-2); }

/* ------------------------------------------------------ LOGIN GATE */
.login-gate{ display:none; position:fixed; inset:0; background:radial-gradient(1200px 600px at 50% -10%, var(--primary-soft), transparent 70%), var(--surface-0); z-index:300; align-items:center; justify-content:center; padding:var(--sp-5) var(--sp-4); overflow-y:auto; }
.login-gate.open{ display:flex; }
.login-card{ position:relative; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-3); padding:var(--sp-6) var(--sp-6); max-width:560px; width:100%; text-align:center; animation:modalIn var(--dur-slow) var(--ease); }
.lang-switch{ position:absolute; top:var(--sp-4); right:var(--sp-4); display:flex; gap:var(--sp-1); background:var(--surface-2); border-radius:var(--r-control); padding:3px; }
.lang-switch button{ border:none; background:transparent; color:var(--text-dim); font-size:var(--fs-xs); font-weight:700; padding:var(--sp-1) var(--sp-2); border-radius:6px; cursor:pointer; min-height:28px; }
.lang-switch button.active{ background:var(--primary); color:var(--on-primary); }

.offline-banner{ font-size:var(--fs-sm); font-weight:700; text-align:center; padding:var(--sp-2) var(--sp-4); }
.offline-banner.mode-hors-ligne{ background:var(--warning-soft); color:var(--warning); }
.offline-banner.mode-synchro{ background:var(--primary-soft); color:var(--primary-ink); }
.login-logo{ width:64px; height:64px; margin:0 auto var(--sp-4); border-radius:var(--r-lg); background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:30px; overflow:hidden; }
.login-logo img{ width:100%; height:100%; object-fit:contain; }
.login-card h1{ font-size:var(--fs-lg); margin:0 0 var(--sp-1); }
.login-card .sub{ color:var(--text-dim); font-size:var(--fs-sm); margin-bottom:var(--sp-5); }
.role-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-3); }
.role-card .rlabel, .role-card .rdesc{ overflow-wrap:anywhere; hyphens:auto; }
@media (max-width:380px){ .login-card{ padding:var(--sp-5) var(--sp-4); } .role-card{ padding:var(--sp-4) var(--sp-2); } }
.role-card{ border:1px solid var(--border); background:var(--surface-2); border-radius:var(--r-card); padding:var(--sp-5) var(--sp-4); cursor:pointer; text-align:center; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.role-card:hover{ border-color:var(--primary); background:var(--primary-soft); transform:translateY(-2px); box-shadow:var(--shadow-2); }
.role-card .ric{ font-size:28px; margin-bottom:var(--sp-2); }
.role-card .rlabel{ font-family:var(--font-title); font-weight:700; font-size:var(--fs-sm); }
.role-card .rdesc{ font-size:var(--fs-xs); color:var(--text-dim); margin-top:var(--sp-1); }
.pin-pad{ margin-top:var(--sp-5); }
.pin-pad input{ width:100%; text-align:left; font-size:var(--fs-md); letter-spacing:normal; padding:var(--sp-3); min-height:var(--tap); border:1px solid var(--border-strong); border-radius:var(--r-control); background:var(--surface-1); color:var(--text); }
.pin-pad input:focus{ outline:none; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); }
.pin-error{ color:var(--danger); font-size:var(--fs-xs); margin-top:var(--sp-2); min-height:16px; }
.pin-back{ background:none; border:none; color:var(--text-dim); font-size:var(--fs-xs); cursor:pointer; margin-top:var(--sp-4); min-height:var(--tap); padding:0 var(--sp-3); border-radius:var(--r-control); }
.pin-back:hover{ color:var(--text); text-decoration:underline; }

/* ---------------------------------------------------------- REÇU DE CAISSE */
.recu{ font-size:var(--fs-sm); }
.recu-head{ display:flex; align-items:center; gap:var(--sp-3); padding-bottom:var(--sp-4); border-bottom:2px solid var(--border); margin-bottom:var(--sp-4); }
.recu-head img, .recu-logo-ph{ width:44px; height:44px; object-fit:contain; border-radius:var(--r-control); background:var(--surface-2); flex-shrink:0; }
.recu-logo-ph{ display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); }
.recu-title{ text-align:center; font-weight:800; font-size:var(--fs-md); border:2px solid; border-radius:var(--r-card); padding:var(--sp-2); margin-bottom:var(--sp-4); letter-spacing:.03em; }
.recu-row{ display:flex; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px dashed var(--border-strong); font-size:var(--fs-sm); }
.recu-row span{ color:var(--text-dim); }
.recu-montant{ text-align:center; font-size:var(--fs-xl); font-weight:800; margin:var(--sp-4) 0 var(--sp-2); }
.recu-lettres{ text-align:center; font-size:var(--fs-xs); color:var(--text-dim); font-style:italic; padding-bottom:var(--sp-3); border-bottom:1px solid var(--border); }

/* ------------------------------------------------ MASQUAGE (rôle Secrétariat) */
.masked{ position:relative; filter:blur(7px); user-select:none; }
.masked-num{ color:var(--text-dim) !important; font-size:var(--fs-lg) !important; letter-spacing:2px; }
.mask-badge{ display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-xs); color:var(--text-dim); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill); padding:2px var(--sp-3); margin-top:var(--sp-1); }

.badge-qr-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:var(--sp-4); }
.badge-qr-card{ border:1px dashed var(--border-strong); border-radius:var(--r-card); padding:var(--sp-4); text-align:center; break-inside:avoid; }
.badge-qr-card img{ width:100%; max-width:150px; height:auto; margin:var(--sp-2) auto; display:block; }
.badge-qr-school{ font-size:var(--fs-xs); font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em; }
.badge-qr-name{ font-weight:800; font-size:var(--fs-sm); margin-top:var(--sp-1); }
.badge-qr-hint{ font-size:var(--fs-xs); color:var(--text-dim); margin-top:var(--sp-1); line-height:1.4; }

/* ------------------------------------------------- BASCULE CLAIR / SOMBRE */
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface-1);
  color:var(--text); cursor:pointer; font-size:var(--fs-md); display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease);
}
.theme-toggle:hover{ background:var(--primary-soft); }
.theme-toggle-gate{ position:fixed; top:var(--sp-4); left:var(--sp-4); z-index:310; display:none; }
body:has(.login-gate.open) .theme-toggle-gate{ display:flex; }

/* ------------------------------------------------ BARRE DE NAVIGATION EN BAS (téléphone) */
.bottom-nav{ display:none; }
@media (max-width:900px){
  body.has-bottom-nav .bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:color-mix(in srgb, var(--surface-1) 92%, transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
    border-top:1px solid var(--border); box-shadow:0 -4px 16px rgba(23,50,36,.06);
    padding:var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
  }
  body.has-bottom-nav .view-container{ padding-bottom:calc(var(--sp-8) + var(--sp-5) + env(safe-area-inset-bottom, 0px)); }
  body.has-bottom-nav #toastStack{ bottom:calc(var(--sp-8) + var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
  body.has-bottom-nav .toast{ bottom:calc(var(--sp-8) + var(--sp-4)); }
}
.bn-item{
  flex:1 1 0; min-width:0; min-height:var(--tap); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:none; border:none; border-radius:var(--r-card); padding:var(--sp-1) 0; cursor:pointer; color:var(--text-dim);
  font-size:var(--fs-xs); font-weight:600; position:relative;
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.bn-item:hover{ background:var(--surface-2); }
.bn-item:active{ background:var(--primary-soft); }
.bn-ic{ font-size:20px; line-height:1; }
.bn-label{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px; line-height:1.2; }
.bn-item.active{ color:var(--primary-ink); font-weight:700; }
.bn-item.active::before{ content:''; position:absolute; top:-5px; left:28%; right:28%; height:3px; border-radius:var(--r-pill); background:var(--primary); }
.bn-item.active .bn-ic{ transform:translateY(-1px) scale(1.08); }
.bn-item .bn-ic{ transition:transform var(--dur-fast) var(--ease); }

/* ------------------------------------------------ RECHERCHE GLOBALE (Ctrl+K) */
.rg-backdrop{ display:none; position:fixed; inset:0; z-index:250; background:var(--scrim); align-items:flex-start; justify-content:center; padding:min(14vh, 96px) var(--sp-4) var(--sp-4); }
.rg-backdrop.open{ display:flex; animation:backdropIn var(--dur) var(--ease); }
.rg-box{ width:100%; max-width:640px; max-height:min(70vh, 560px); display:flex; flex-direction:column; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-3); overflow:hidden; animation:modalIn var(--dur-slow) var(--ease); }
.rg-champ{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); font-size:var(--fs-md); }
.rg-champ input{ flex:1; min-width:0; border:none !important; background:transparent !important; box-shadow:none !important; font-size:var(--fs-md) !important; padding:var(--sp-2) 0 !important; min-height:var(--tap); color:var(--text); }
.rg-champ input:focus{ outline:none; }
.rg-loupe{ display:flex; color:var(--text-dim); }
.rg-loupe .ico{ margin:0; width:20px; height:20px; }
.rg-fermer{ border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-dim); border-radius:var(--r-control); font-size:var(--fs-xs); padding:2px var(--sp-2); cursor:pointer; min-height:28px; }
.rg-liste{ overflow-y:auto; padding:var(--sp-2); flex:1; }
.rg-groupe{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); padding:var(--sp-3) var(--sp-3) var(--sp-1); }
.rg-item{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-control); cursor:pointer; min-height:var(--tap); }
.rg-item.actif{ background:var(--primary-soft); color:var(--primary-ink); }
.rg-ic{ font-size:var(--fs-lg); width:28px; text-align:center; flex-shrink:0; }
.rg-txt{ display:flex; flex-direction:column; min-width:0; }
.rg-titre{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rg-sous{ font-size:var(--fs-xs); color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rg-item.actif .rg-sous{ color:var(--primary-ink); opacity:.85; }
.rg-vide{ text-align:center; padding:var(--sp-6) var(--sp-4); color:var(--text-dim); }
.rg-vide span{ font-size:var(--fs-xs); }
.rg-aide{ display:flex; gap:var(--sp-4); padding:var(--sp-2) var(--sp-4); border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--text-faint); background:var(--surface-2); }
@media (pointer:coarse), (max-width:640px){ .rg-aide{ display:none; } .rg-backdrop{ padding-top:var(--sp-4); } .rg-box{ max-height:calc(100dvh - 2*var(--sp-4)); } }

@media print{
  .sidebar, .topbar, .filters, .panel-head .btn, .no-print, .login-gate, .theme-toggle, .bottom-nav, .rg-backdrop{ display:none !important; }
  .view-container{ padding:0; max-width:none; }
  body{ background:#fff; color:#000; }
  body:has(.modal-backdrop.open) .view-container{ display:none !important; }
  body:has(.modal-backdrop.open) .app{ display:none !important; }   /* évitait une page blanche avant chaque document imprimé */
  .modal-backdrop.open{ position:static; background:none; padding:0; display:block !important; }
  .modal-backdrop.open .modal{ box-shadow:none; max-width:100%; border-radius:0; animation:none; }
  .modal-backdrop.open .modal-header{ display:none; }
}

@media (max-width:900px){
  .sidebar{ position:fixed; z-index:50; transform:translateX(-100%); transition:transform var(--dur) var(--ease); box-shadow:var(--shadow-3); }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-backdrop{ display:none; position:fixed; inset:0; background:var(--scrim); z-index:45; }
  .sidebar-backdrop.open{ display:block; }
  .burger{ display:block; }
  .form-grid{ grid-template-columns:minmax(0,1fr); }
  .panel{ padding:var(--sp-4); }
  /* Sous 16px, iOS Safari zoome automatiquement la page au focus d'un champ —
     très gênant sur mobile. !important nécessaire pour l'emporter sur les
     règles plus spécifiques (ex : .filters input[type=text]). */
  input, select, textarea{ font-size:16px !important; }
}
/* Téléphone : la barre du haut passe sur deux lignes (titre / actions) */
@media (max-width:640px){
  .topbar{ flex-wrap:wrap; row-gap:var(--sp-2); }
  .topbar h1{ font-size:var(--fs-md); min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .topbar-right{ flex:1 0 100%; flex-wrap:wrap; }
  .topbar-right .bulles{ flex-wrap:wrap; }
  .topbar-right .pill{ margin-left:auto; text-align:right; }
}
/* Zones tactiles d'au moins 44 px sur écrans tactiles */
@media (pointer:coarse){
  .btn, .nav-item, .subtab, .btn-reset, .btn-install{ min-height:var(--tap); }
  .icon-btn, .bulle-btn, .theme-toggle, .modal-close{ min-width:var(--tap); min-height:var(--tap); width:var(--tap); height:var(--tap); }
  .field input, .field select, .field textarea, .filters input, .filters select{ min-height:var(--tap); }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* =========================================================================
   TABLEAU D'HONNEUR — cartes retournables, utilisées par
   renderTableauHonneurParent() dans les consoles parent et enseignant.
   ========================================================================= */
/* Cartes compactes, sans verso (voir renderTableauHonneurParent) */
.hn-sous-titre{ font-size:var(--fs-xs); font-weight:700; color:var(--text-dim); margin:var(--sp-3) 0 var(--sp-2); }
.hn-rangee{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:var(--sp-3); }
@media (max-width:640px){
  .hn-rangee{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--sp-3); padding-bottom:var(--sp-1); scrollbar-width:none; }
  .hn-rangee::-webkit-scrollbar{ display:none; }
  .hn-carte{ flex:0 0 150px; scroll-snap-align:start; }
}
.hn-carte{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  background:var(--surface-1); border:1px solid var(--border); border-radius:20px; padding:16px 12px 12px; }
.hn-carte--une{ border-color:var(--em-gold-400, #e8b04b); }
.hn-avatar{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--primary); color:var(--on-primary); font-weight:900; font-size:20px; border:3px solid var(--surface-1); box-shadow:var(--shadow-1); }
.hn-carte--une .hn-avatar{ border-color:var(--em-gold-400, #e8b04b); }
.hn-nom{ font-size:var(--fs-sm); font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.hn-detail{ font-size:var(--fs-xs); color:var(--text-dim); }
.hn-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.hn-badge{ font-size:11px; font-weight:800; color:var(--accent-ink); background:var(--accent-soft); border-radius:var(--r-pill); padding:2px 8px; }
.hn-mot{ font-size:var(--fs-xs); font-style:italic; color:var(--text-dim); }

.actu-item{ display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3); border-radius:var(--r-card); background:var(--surface-2); margin-bottom:var(--sp-2); font-size:var(--fs-sm); }
.actu-item .ic{ flex-shrink:0; }
.actu-item .meta{ color:var(--text-dim); font-size:var(--fs-xs); margin-top:2px; }

/* =========================================================================
   THÈME "ESPACE PARENT" — variante chaleureuse réservée à ce rôle
   (classe posée sur <body> par chooseEspace()/enterAppParent()).
   ========================================================================= */
body.theme-parent{
  font-family:var(--em-font);
}
body.theme-parent h1, body.theme-parent h2, body.theme-parent .panel-head h2,
body.theme-parent .profile-head h2, body.theme-parent .login-card h1{
  font-family:var(--em-font); font-weight:900;
}
body.theme-parent .panel{
  border-radius:var(--em-radius-lg); border-color:var(--em-border);
  box-shadow:var(--em-shadow-sm);
}

body.theme-parent .avatar{
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:var(--on-primary);
}
body.theme-parent .btn{
  border-radius:var(--r-pill); font-family:var(--em-font); font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  box-shadow:var(--shadow-2); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.theme-parent .btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-3); }
body.theme-parent .btn.secondary{ background:var(--surface-1); box-shadow:none; }
body.theme-parent .badge{ border-radius:var(--r-pill); font-weight:800; }

body.theme-parent .bulle-btn, body.theme-parent .topbar .theme-toggle{ width:44px; height:44px; border-radius:14px; background:var(--em-surface); border:1px solid var(--em-border); box-shadow:none; }
body.theme-parent .bulle-dropdown{ border-radius:18px; }
body.theme-parent .bulle-item{ border-radius:var(--r-card); }


body.theme-parent .topbar{ background:var(--em-bg); border-bottom:none; padding:18px 20px 12px; }
body.theme-parent .parent-greeting{
  font-family:var(--em-font); font-size:var(--em-fs-26); font-weight:900; letter-spacing:-.01em; margin:0 0 var(--sp-1);
}
body.theme-parent .parent-greeting-sub{ color:var(--text-dim); margin:0 0 var(--sp-4); font-size:var(--fs-sm); }

/* Pile de notifications (voir toast() dans app.js) */
#toastStack{ position:fixed; bottom:var(--sp-5); right:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); z-index:200; align-items:flex-end; pointer-events:none; max-width:min(420px, calc(100vw - 2*var(--sp-4))); }
.toast-item{ background:var(--text); color:var(--surface-0); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-card); font-size:var(--fs-sm); box-shadow:var(--shadow-3); opacity:0; transform:translateY(10px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events:auto; }
.toast-item.show{ opacity:1; transform:none; }
.toast-item.error{ background:var(--danger); color:var(--surface-1); }
@media (max-width:640px){ #toastStack{ left:var(--sp-4); right:var(--sp-4); bottom:var(--sp-4); align-items:stretch; } }

/* =========================================================================
   CONSOLE PARENT — Lot 4 (spécification § 5.1), registre « vivant »
   ========================================================================= */
body.theme-parent .view-container{ max-width:960px; }
body.theme-parent.has-parent-nav .view-container{ padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px)); }
body.theme-parent.has-parent-nav #toastStack{ bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (max-width:900px){ body.theme-parent #topbarPill{ display:none; } }  /* nom + déconnexion : onglet Profil */

/* En-tête de marque (§ 5.1.1) */
.pt-marque{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.pt-logo{ width:38px; height:38px; border-radius:12px; background:var(--em-green-700); color:#fff; font-weight:900; font-size:18px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pt-textes{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.pt-sur{ font-size:var(--em-fs-12); font-weight:700; color:var(--em-text-muted); letter-spacing:.04em; text-transform:uppercase; }
.pt-ecole{ font-size:var(--em-fs-15); font-weight:800; color:var(--em-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.theme-parent .topbar h1{ display:block; -webkit-line-clamp:unset; }
body.theme-parent .bulle-badge{ min-width:20px; height:20px; border-radius:10px; background:var(--em-terracotta-600); color:#fff;
  font-size:11px; font-weight:900; border:2px solid var(--em-bg); top:-4px; right:-4px; }

/* Salutation (§ 5.1.2) */
body.theme-parent .salut-main{ color:var(--em-terracotta-600); }

/* Alerte d'absence (§ 5.1.4) — sans délai d'animation */
.alerte-absence{ display:flex; align-items:center; gap:12px; background:var(--em-terracotta-100); color:var(--em-terracotta-800);
  border-radius:var(--em-radius-md); padding:14px 16px; margin-bottom:var(--em-space-4); animation:em-apparait 200ms linear both; }
.alerte-absence > div{ flex:1; min-width:0; }
.alerte-ic .ico{ width:22px; height:22px; margin:0; }
.alerte-sous{ font-size:var(--em-fs-13); }
@keyframes em-apparait{ from{ opacity:0; } to{ opacity:1; } }

/* Fiche enfant — carte forte (§ 5.1.3) */
.enfants{ margin-bottom:var(--em-space-6); }
.enfants--carrousel{ display:flex; gap:var(--em-space-3); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.enfants--carrousel::-webkit-scrollbar{ display:none; }
.enfants--carrousel .enfant-carte{ flex:0 0 min(100%, 420px); scroll-snap-align:start; }
.enfant-carte{ position:relative; overflow:hidden; background:var(--em-green-900); color:#fff; border-radius:var(--em-radius-xl);
  padding:18px; display:flex; flex-direction:column; gap:16px; box-shadow:var(--em-shadow-md); }
.enfant-carte::after{ content:''; position:absolute; width:160px; height:160px; top:-40px; right:-40px; border-radius:50%;
  border:22px solid rgba(255,255,255,.06); pointer-events:none; }
.enfant-tete{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.enfant-avatar{ width:56px; height:56px; border-radius:18px; background:var(--em-gold-400); color:var(--em-green-900);
  font-weight:900; font-size:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.enfant-nom{ margin:0; font-size:var(--em-fs-17); font-weight:800; color:#fff; line-height:1.25; }
.enfant-classe{ font-size:var(--em-fs-13); color:var(--em-text-on-dark); margin-top:2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.enfant-statut{ background:rgba(255,255,255,.14); color:#fff; font-size:var(--em-fs-12); font-weight:800; border-radius:var(--em-radius-pill); padding:2px 10px; }
.enfant-details{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0; position:relative; z-index:1; }
.enfant-details dt{ font-size:var(--em-fs-12); color:var(--em-text-on-dark); }
.enfant-details dd{ margin:2px 0 0; font-size:clamp(12px, 3.6vw, var(--em-fs-14)); font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Présence de la semaine */
.sem-bloc{ position:relative; z-index:1; }
.sem-titre{ font-size:var(--em-fs-13); font-weight:700; color:var(--em-text-on-dark); margin-bottom:8px; }
.sem-grille{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.sem-jour{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.sem-case{ position:relative; width:100%; height:44px; border-radius:12px; background:rgba(255,255,255,.1); overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.sem-case.sem-auj{ box-shadow:inset 0 0 0 2px rgba(232,176,75,.7); }
.sem-remplir{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--em-green-500); }
.sem-retard .sem-remplir{ background:var(--em-gold-400); }
.sem-retard .sem-remplir path{ stroke:var(--em-green-900); }
.sem-remplir svg{ width:22px; height:22px; }
.sem-point{ width:8px; height:8px; border-radius:50%; background:var(--em-terracotta-600); }
.sem-futur{ background:rgba(255,255,255,.05); }
.sem-lib{ font-size:var(--em-fs-11); font-weight:800; color:var(--em-text-on-dark); }
.sem-note{ font-size:var(--em-fs-12); color:var(--em-text-on-dark); margin-top:8px; }

/* Actualités (§ 5.1.5) — aussi dans la console enseignant, sans animation */
.actus-panel .panel-head{ margin-bottom:var(--em-space-3); }
.actu-liste{ display:flex; flex-direction:column; gap:10px; }
.actu-liste + .actu-liste{ margin-top:10px; }
.actu-carte{ display:flex; align-items:center; gap:12px; background:var(--em-surface); border:1px solid var(--em-border);
  border-radius:18px; padding:14px; }
.actu-date{ width:48px; height:52px; border-radius:14px; background:var(--em-terracotta-100); color:var(--em-terracotta-800);
  display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; }
.actu-jour{ font-size:18px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.actu-mois{ font-size:10px; font-weight:800; letter-spacing:.06em; margin-top:2px; }
.actu-corps{ min-width:0; }
.actu-titre{ font-size:var(--em-fs-14); font-weight:800; overflow-wrap:anywhere; }
.actu-meta{ font-size:var(--em-fs-12); color:var(--em-text-muted); margin-top:2px; }
.actu-tout{ margin-top:10px; }

/* Tableau d'honneur — compléments vivants (§ 5.1.6) */
.hn-applause{ width:100%; min-height:44px; border-radius:14px; border:none; background:var(--em-green-100); color:var(--em-green-900);
  font:900 var(--em-fs-13)/1 var(--em-font); display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; margin-top:4px; }
.hn-applause[aria-pressed="true"]{ opacity:.8; cursor:default; }
.hn-applause .ico{ margin:0; width:18px; height:18px; }
.hn-applause-n{ font-variant-numeric:tabular-nums; display:inline-block; }

/* Barre de navigation basse (§ 5.1.7) */
.parent-nav{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--em-surface); border-top:1px solid var(--em-border);
  padding:10px 12px calc(18px + env(safe-area-inset-bottom, 0px)); display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); }
.pn-pastille{ position:absolute; top:10px; left:12px; width:calc((100% - 24px) / 5); height:52px; border-radius:16px;
  background:var(--em-green-100); transition:transform 420ms var(--em-ease-tab); pointer-events:none; }
.pn-item{ position:relative; z-index:1; height:52px; border:none; background:none; border-radius:16px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--em-text-muted);
  font:800 var(--em-fs-11)/1.2 var(--em-font); transition:color var(--em-dur-hover) var(--em-ease-out); }
.pn-item.actif{ color:var(--em-green-900); }
.pn-ic{ position:relative; display:flex; }
.pn-ic .ico{ width:22px; height:22px; margin:0; }
.pn-badge{ position:absolute; top:-6px; right:-10px; min-width:18px; height:18px; border-radius:9px; background:var(--em-terracotta-600);
  color:#fff; font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--em-surface); }
:root[data-theme="dark"] .pn-item.actif{ color:var(--primary-ink); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pn-item.actif{ color:var(--primary-ink); } }

/* Profil parent */
.profil-nom{ font-size:var(--em-fs-17); font-weight:900; }
.profil-sous{ font-size:var(--em-fs-12); font-weight:800; color:var(--em-text-muted); margin-top:var(--em-space-4); text-transform:uppercase; letter-spacing:.04em; }
.profil-enfants{ margin:6px 0 0; padding-left:18px; }

/* Notifications passagères (§ 5.1.9) */
.toast-item.show{ animation:em-toast 460ms var(--em-ease-back) both; }

@media print{ .parent-nav{ display:none !important; } }

/* =========================================================================
   CONSOLE PORTIER — Lot 5 (spécification § 5.2), thème sombre dédié,
   registre « opérationnel » : aucune animation décorative.
   ========================================================================= */
body.theme-portier{
  color-scheme:dark;
  --surface-0:var(--em-gate-bg); --surface-1:var(--em-gate-surface); --surface-2:#1d2823;
  --border:var(--em-gate-border); --border-strong:#36463e;
  --text:var(--em-gate-text); --text-dim:var(--em-gate-muted); --text-faint:#7f9187;
  --primary:var(--em-gold-400); --primary-hover:#f0c06a; --on-primary:var(--em-green-900);
  --primary-soft:#2a2615; --primary-ink:var(--em-gold-400);
  background:var(--em-gate-bg); color:var(--em-gate-text);
}
body.theme-portier .theme-toggle{ display:none !important; }   /* le portier reste toujours en sombre */
body.theme-portier .topbar{ background:var(--em-gate-bg); border-bottom:1px solid var(--em-gate-border); }
body.theme-portier .topbar h1{ display:flex; flex-direction:column; gap:2px; -webkit-line-clamp:unset; }
.gate-sur{ font-size:var(--em-fs-12); font-weight:700; color:var(--em-gate-muted); letter-spacing:.06em; text-transform:uppercase; }
.gate-titre{ font-size:var(--em-fs-20); font-weight:900; color:var(--em-gate-text); }
.gate-etat{ display:inline-flex; align-items:center; gap:6px; background:#1d3a2f; color:#9fe0c3; font-size:var(--em-fs-12); font-weight:800;
  border-radius:var(--em-radius-pill); padding:4px 10px; margin-right:8px; }
.gate-point{ width:8px; height:8px; border-radius:50%; background:var(--em-success); }
body.theme-portier #topbarPill{ background:none; padding:0; display:flex; align-items:center; }
body.theme-portier .panel{ background:var(--em-gate-surface); border-color:var(--em-gate-border); box-shadow:none; border-radius:var(--em-radius-lg); }
body.theme-portier #portierRecherche{ background:var(--em-gate-bg) !important; color:var(--em-gate-text) !important; border-color:var(--em-gate-border) !important; min-height:52px; }

/* Listes : classes et élèves (grandes cibles, lecture rapide) */
.gate-classe, .gate-eleve{ width:100%; min-height:56px; border-radius:var(--em-radius-md); border:1px solid var(--em-gate-border);
  background:var(--em-gate-bg); color:var(--em-gate-text); font:inherit; cursor:pointer; text-align:left; padding:14px 16px; }
.gate-classe{ display:flex; flex-direction:column; gap:2px; }
.gate-eleve{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gate-eleve-id{ display:flex; flex-direction:column; min-width:0; }
.gate-eleve-id strong{ font-size:var(--em-fs-15); font-weight:800; overflow-wrap:anywhere; }
.gate-eleve-classe{ font-size:var(--em-fs-13); color:var(--em-gate-muted); }
.gate-eleve-action{ flex-shrink:0; background:var(--em-gold-400); color:var(--em-green-900); font-weight:900; font-size:var(--em-fs-14);
  border-radius:var(--em-radius-sm); padding:10px 14px; white-space:nowrap; }
.gate-eleve-action .ico{ margin-right:6px; }
@media (hover:hover){ .gate-classe:hover, .gate-eleve:hover{ border-color:var(--em-gold-400); } }

/* États : envoi, confirmation, échec */
.gate-etat-carte{ background:var(--em-gate-surface); border:1px solid var(--em-gate-border); border-radius:var(--em-radius-2xl);
  padding:32px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; max-width:520px; margin:0 auto; }
.gate-spinner{ width:72px; height:72px; }
.gate-etat-titre{ font-size:22px; font-weight:900; }
.gate-rond{ position:relative; width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.gate-rond svg{ width:48px; height:48px; position:relative; z-index:1; }
.gate-rond-ok{ background:var(--em-green-500); }
.gate-rond-erreur{ background:var(--em-danger); animation:em-apparait 200ms linear both; }
.gate-coche{ stroke-dasharray:40; stroke-dashoffset:40; animation:em-draw 420ms var(--em-ease-out) 240ms forwards; }
.gate-onde{ position:absolute; inset:0; border-radius:50%; border:3px solid var(--em-green-500); animation:em-ring 1.1s var(--em-ease-out) both; }
.gate-fiche{ display:flex; flex-direction:column; gap:2px; background:var(--em-gate-bg); border:1px solid var(--em-gate-border);
  border-radius:var(--em-radius-md); padding:12px 16px; width:100%; }
.gate-fiche strong{ font-size:var(--em-fs-17); font-weight:800; }
.gate-fiche span{ color:var(--em-gate-muted); font-size:var(--em-fs-14); }
.gate-heure{ font-variant-numeric:tabular-nums; color:var(--em-gate-text) !important; font-weight:800; }
.gate-erreur-detail{ color:var(--em-gate-muted); font-size:var(--em-fs-14); }
.gate-btn-principal, .gate-btn-contour{ width:100%; min-height:56px; border-radius:18px; font:900 16px/1 var(--em-font); cursor:pointer; }
.gate-btn-principal{ background:var(--em-gold-400); color:var(--em-green-900); border:none; }
.gate-btn-contour{ background:transparent; color:var(--em-gate-text); border:1px solid var(--em-gate-border); }
@media (prefers-reduced-motion: reduce){ .gate-coche{ stroke-dashoffset:0; } }

/* =========================================================================
   ADMINISTRATION — Lot 6 (spécification § 5.3), registre « sobre »
   ========================================================================= */
/* Barre latérale (§ 5.3.1) */
.nav-group{ font-size:11px; font-weight:800; letter-spacing:.06em; }
.nav-item{ font-weight:700; border-radius:12px; min-height:40px; }
.nav-item:hover{ background:rgba(31,92,70,.06); }
.nav-item.active{ background:var(--em-green-100); color:var(--em-green-900); }
:root[data-theme="dark"] .nav-item.active{ color:var(--primary-ink); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav-item.active{ color:var(--primary-ink); } }

/* Chiffres clés (§ 5.3.2) */
.kpi-carte{ border-radius:16px; padding:20px; }
.kpi-carte .icon-badge{ width:40px; height:40px; border-radius:12px; }
.kpi-carte .num{ font-size:clamp(22px, 6vw, 30px); font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kpi-vide{ font-size:var(--em-fs-14); font-weight:700; color:var(--em-text-muted); margin-top:var(--sp-3); }
.kpi-lien{ display:inline-block; font-size:var(--em-fs-13); font-weight:800; color:var(--primary); margin-top:2px; min-height:24px; }

/* Répartition par classe (§ 5.3.3) */
.repart-ligne{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.repart-nom{ width:110px; font-size:var(--fs-xs); color:var(--text-dim); flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.repart-piste{ flex:1; height:10px; border-radius:999px; background:var(--em-border); overflow:hidden; }
.repart-barre{ height:100%; border-radius:999px; background:var(--em-green-700); }
.repart-n{ width:28px; text-align:right; font-size:var(--fs-xs); font-weight:800; font-variant-numeric:tabular-nums; }
.repart-vide .repart-n{ color:var(--em-text-muted); }
:root[data-theme="dark"] .repart-barre{ background:var(--primary); }

/* Alertes du jour (§ 5.3.4) */
.alerte-pastilles{ display:flex; gap:10px; flex-wrap:wrap; }
.pastille-absent, .pastille-retard{ font-size:var(--em-fs-13); font-weight:800; border-radius:var(--em-radius-pill); padding:6px 12px; font-variant-numeric:tabular-nums; }
.pastille-absent{ background:var(--em-terracotta-100); color:var(--em-terracotta-800); }
.pastille-retard{ background:var(--em-gold-100); color:var(--em-gold-800); }
.alerte-ok{ display:flex; align-items:center; gap:8px; font-size:var(--em-fs-14); font-weight:700; color:var(--success); }
.alerte-ok .ico{ color:var(--em-green-500); width:20px; height:20px; margin:0; }

/* Tableaux (§ 5.3.5) : lignes 48 px, survol discret, montants alignés à droite */
tbody td{ height:48px; }
tbody tr:hover{ background:rgba(31,92,70,.04); }
:root[data-theme="dark"] tbody tr:hover{ background:rgba(255,255,255,.03); }
td:has(> .amount), th.montant{ text-align:right; }

/* Formulaires (§ 5.3.6) */
.field input, .field select, .field textarea, .filters input[type=text], .filters input[type=search], .filters input[type=date], .filters select{ min-height:44px; border-radius:12px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--em-green-700); box-shadow:0 0 0 3px rgba(31,92,70,.15); }
.field.has-error input, .field.has-error select, .field.has-error textarea, .field [aria-invalid="true"]{ border-color:var(--em-danger); }
.field .error-text{ color:var(--danger); font-size:var(--em-fs-13); font-weight:700; }

/* Notification de réussite : coche dessinée */
.toast-coche{ display:inline-flex; width:18px; height:18px; margin-right:8px; vertical-align:-3px; color:var(--em-green-500); }
.toast-coche svg{ width:18px; height:18px; }
.toast-coche path{ stroke-dasharray:40; stroke-dashoffset:40; animation:em-draw 420ms var(--em-ease-out) 120ms forwards; }
@media (prefers-reduced-motion: reduce){ .toast-coche path{ stroke-dashoffset:0; } }

/* Espace enseignant — Lot 7 (§ 5.4) : créneau en cours dans l'emploi du temps */
.tt-encours .tt-slot{ box-shadow:inset 0 0 0 2px var(--em-gold-400); background:var(--em-gold-100); }
.tt-badge-encours{ display:inline-block; font-size:10px; font-weight:900; letter-spacing:.04em; text-transform:uppercase;
  color:var(--em-gold-800); background:var(--em-surface); border-radius:var(--em-radius-pill); padding:1px 6px; margin-bottom:3px; }

/* Notification de mise à jour */
.maj-intro{ font-size:var(--em-fs-15); line-height:1.5; margin-bottom:var(--sp-3); }
.maj-liste{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:var(--em-fs-14); }
.bandeau-maj{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom, 0px)); z-index:260;
  display:flex; align-items:center; gap:12px; background:var(--em-green-900); color:#fff; border-radius:var(--em-radius-md);
  padding:10px 12px 10px 16px; box-shadow:var(--em-shadow-lg); font-size:var(--em-fs-14); font-weight:700; width:max-content; max-width:calc(100vw - 32px);
  animation:em-toast 460ms var(--em-ease-back) both; }
.bandeau-maj button{ background:var(--em-gold-400); color:var(--em-green-900); border:none; border-radius:12px; min-height:40px; padding:0 14px; font:900 var(--em-fs-14) var(--em-font); cursor:pointer; flex-shrink:0; }
@media print{ .bandeau-maj{ display:none !important; } }

/* Console parent : bande d'actualités défilante (jaune or, droite → gauche) */
.bande-info{ display:flex; align-items:stretch; background:#e8b04b; color:#14392d; border-radius:var(--em-radius-md, 14px);
  overflow:hidden; margin-bottom:var(--sp-4); box-shadow:0 2px 10px rgba(20,57,45,.15); cursor:pointer; min-height:46px; }
.bande-info-etiquette{ display:flex; align-items:center; gap:6px; flex-shrink:0; background:#14392d; color:#e8b04b;
  font-weight:900; font-size:var(--em-fs-14, 14px); padding:0 14px; text-transform:uppercase; letter-spacing:.05em; }
.bande-info-etiquette .ico{ width:18px; height:18px; }
.bande-info-fenetre{ flex:1; min-width:0; overflow:hidden; display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.bande-info-piste{ display:flex; width:max-content; animation:bande-info-defile linear infinite; will-change:transform; }
.bande-info-texte{ display:flex; align-items:center; white-space:nowrap; min-width:100vw; justify-content:flex-start; font-weight:800; font-size:var(--em-fs-16, 16px); }
.bande-info-sep{ margin:0 22px; opacity:.7; }
.bande-info:hover .bande-info-piste, .bande-info.en-pause .bande-info-piste{ animation-play-state:paused; }
@keyframes bande-info-defile{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .bande-info-piste{ animation:none; width:auto; }
  .bande-info-texte{ white-space:normal; flex-wrap:wrap; padding:8px 0; min-width:0; }
  .bande-info-texte[aria-hidden="true"]{ display:none; }
}
@media print{ .bande-info{ display:none !important; } }
.pn-lib{ text-align:center; line-height:1.1; }

/* Console parent : annonce horaire du moment (15 min avant) */
.annonce-moment{ display:flex; align-items:center; gap:12px; justify-content:space-between; background:#14392d; color:#fff;
  border-left:6px solid #e8b04b; border-radius:var(--em-radius-md, 14px); padding:14px 16px; margin-bottom:var(--sp-3);
  box-shadow:0 4px 16px rgba(20,57,45,.25); animation:em-toast 460ms var(--em-ease-back, ease) both; }
.annonce-moment-texte{ font-weight:800; font-size:var(--em-fs-16, 16px); line-height:1.4; }
.annonce-moment-quand{ flex-shrink:0; font-size:var(--em-fs-12, 12px); color:#e8b04b; font-weight:800; }
.annonce-autoriser{ width:100%; margin-bottom:var(--sp-3); }

/* Coupons d'invitation des parents (impression) */
.coupons{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:10px; }
.coupon{ display:flex; gap:12px; border:1.5px dashed var(--border); border-radius:12px; padding:10px; break-inside:avoid; page-break-inside:avoid; background:#fff; color:#14392d; }
.coupon-qr{ width:110px; flex-shrink:0; }
.coupon-titre{ font-size:13px; }
.coupon-app{ font-weight:900; font-size:12px; margin:2px 0 4px; }
.coupon ol{ margin:0; padding-left:16px; font-size:11px; line-height:1.35; }
.coupon-lien{ font-size:9px; word-break:break-all; color:#5c6b64; margin-top:4px; }
@media print{ .coupons{ grid-template-columns:1fr 1fr; } .coupon{ border-color:#999; break-inside:avoid; page-break-inside:avoid; } .badge-qr-card, .bulletin-page{ break-inside:avoid; page-break-inside:avoid; } }

/* Vie de l'école : fil de publications façon réseau social */
.fil-colonne{ max-width:640px; margin:0 auto; }
.fil-carte{ background:var(--em-surface, #fff); border:1px solid var(--em-border, #e3e8e5); border-radius:18px; margin-bottom:var(--sp-4); overflow:hidden; box-shadow:0 2px 10px rgba(20,57,45,.06); }
.fil-tete{ display:flex; align-items:center; gap:10px; padding:12px 14px 6px; }
.fil-avatar{ width:40px; height:40px; border-radius:50%; background:#14392d; color:#e8b04b; display:flex; align-items:center; justify-content:center; font-weight:900; overflow:hidden; flex-shrink:0; }
.fil-avatar img{ width:100%; height:100%; object-fit:cover; }
.fil-qui{ display:flex; flex-direction:column; min-width:0; flex:1; }
.fil-qui span{ font-size:12px; color:var(--em-text-muted, #5c6b64); }
.fil-titre{ margin:4px 14px 2px; font-size:var(--em-fs-17, 17px); }
.fil-texte{ margin:2px 14px 10px; white-space:pre-wrap; line-height:1.5; }
.fil-medias{ display:grid; gap:2px; background:#000; }
.fil-medias-1{ grid-template-columns:1fr; }
.fil-medias-2{ grid-template-columns:1fr 1fr; }
.fil-medias-3{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
.fil-medias-3 .fil-media:first-child{ grid-row:span 2; }
.fil-medias-4{ grid-template-columns:1fr 1fr; }
.fil-media{ position:relative; border:none; padding:0; margin:0; cursor:pointer; background:#111; aspect-ratio:1/1; overflow:hidden; display:block; width:100%; }
.fil-medias-1 .fil-media{ aspect-ratio:4/3; }
.fil-media img, .fil-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.fil-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:42px; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.fil-plus{ position:absolute; inset:0; background:rgba(0,0,0,.55); color:#fff; font-size:30px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.fil-actions{ display:flex; border-top:1px solid var(--em-border, #e3e8e5); }
.fil-btn{ flex:1; border:none; background:none; padding:11px 6px; font:700 14px var(--em-font, inherit); color:var(--em-text-muted, #5c6b64); cursor:pointer; }
.fil-btn.actif{ color:#a4532f; }
.fil-btn:hover{ background:var(--em-green-100, #e6efe9); }
.fil-commentaires{ border-top:1px solid var(--em-border, #e3e8e5); padding:10px 14px; background:var(--surface-2, #f7f8f6); }
.fil-com{ font-size:14px; margin-bottom:6px; line-height:1.4; }
.fil-com-date{ font-size:11px; color:var(--em-text-muted, #5c6b64); margin-left:6px; }
.fil-com-suppr{ border:none; background:none; cursor:pointer; color:var(--em-text-muted, #5c6b64); }
.fil-com-form{ display:flex; gap:6px; margin-top:6px; }
.fil-com-form input{ flex:1; min-width:0; }
.visionneuse{ position:fixed; inset:0; background:rgba(0,0,0,.94); z-index:300; display:none; align-items:center; justify-content:center; }
.visionneuse.ouverte{ display:flex; }
.vis-scene{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.vis-scene img, .vis-scene video{ max-width:100%; max-height:100%; object-fit:contain; }
.vis-scene iframe{ width:min(100vw, 960px); aspect-ratio:16/9; border:0; }
.vis-fermer, .vis-nav{ position:absolute; border:none; background:rgba(255,255,255,.14); color:#fff; border-radius:50%; width:46px; height:46px; font-size:24px; cursor:pointer; }
.vis-fermer{ top:14px; right:14px; }
.vis-prec{ left:10px; top:50%; transform:translateY(-50%); }
.vis-suiv{ right:10px; top:50%; transform:translateY(-50%); }
.vis-compteur{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-weight:800; }

/* Tableau de bord : mise en route de l'école */
.mer-barre{ height:10px; border-radius:6px; background:var(--em-green-100, #e6efe9); overflow:hidden; margin-bottom:var(--sp-3); }
.mer-barre > div{ height:100%; background:linear-gradient(90deg, #1f5442, #e8b04b); border-radius:6px; }
.mer-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.mer-liste li{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-card); }
.mer-liste li.fait{ opacity:.65; }
.mer-ic{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:900; background:var(--em-gold-100, #fbf0d9); color:#8a5a00; }
.mer-liste li.fait .mer-ic{ background:#14392d; color:#e8b04b; }
.mer-txt{ display:flex; flex-direction:column; min-width:0; flex:1 1 180px; }
.mer-liste li{ flex-wrap:wrap; }
.mer-liste li .btn{ flex-shrink:0; }
@media (max-width:560px){ .mer-liste li .btn{ width:100%; margin-left:40px; width:calc(100% - 40px); } }
.mer-txt span{ font-size:var(--fs-xs, 12px); color:var(--text-dim); }

/* Console parent : scolarité de l'enfant */
.enfant-scolarite{ margin-top:12px; padding-top:12px; border-top:1px solid var(--em-border, #e3e8e5); }
.es-tete{ display:flex; justify-content:space-between; gap:8px; font-size:14px; margin-bottom:6px; }
.es-reste{ font-size:13px; margin:-4px 0 6px; }
.es-detail summary{ cursor:pointer; font-weight:700; font-size:13px; color:var(--em-green-900, #14392d); }
.es-detail ul{ list-style:none; margin:6px 0 0; padding:0; }
.es-detail li{ display:flex; justify-content:space-between; gap:8px; font-size:13px; padding:4px 0; border-bottom:1px dashed var(--em-border, #e3e8e5); }

/* Appel rapide */
.appel-outils{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:10px; }
.appel-compteur{ margin-left:auto; font-weight:800; font-size:var(--fs-xs, 12px); }
.appel-nom{ cursor:pointer; user-select:none; }
.appel-ligne.appel-absent td{ background:var(--danger-soft, #fbe3e0); }
.appel-ligne.appel-retard td{ background:var(--warning-soft, #fbf0d9); }

/* Enrôlement parent / enseignant */
.enrol-liste{ display:flex; flex-direction:column; gap:6px; margin-top:6px; max-height:240px; overflow:auto; }
.enrol-choix{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-card); text-align:left; font-weight:600; }
.enrol-choisis{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.enrol-choix{ justify-content:flex-start; }
.enrol-choix input[type=checkbox], .login-card .enrol-choix input[type=checkbox]{ width:20px !important; height:20px !important; min-height:0 !important; flex:0 0 20px; margin:0; padding:0; }
.enrol-choix .hint{ margin:0 0 0 auto; }

/* Console parent : bulletin de l'enfant */
.enfant-bulletin{ margin-top:12px; padding-top:12px; border-top:1px solid var(--em-border, #e3e8e5); }
.enfant-bulletin summary{ cursor:pointer; font-weight:800; font-size:14px; }
.eb-table{ width:100%; min-width:0; border-collapse:collapse; margin-top:8px; font-size:13px; }
.eb-table th, .eb-table td{ text-align:left; padding:5px 6px; border-bottom:1px dashed var(--em-border, #e3e8e5); }
.eb-moyenne{ margin-top:8px; font-size:14px; }
.eb-appreciation{ margin-top:6px; font-size:13px; font-style:italic; }
.bulle-item.msg-envoye{ background:var(--em-green-100, #e6efe9); margin-left:18px; }

/* Tableau de bord enseignant : ma journée */
.affiche-a4{ text-align:center; padding:16px 12px; color:#14392d; background:#fff; border-radius:16px; }
.affiche-tete{ display:flex; align-items:center; justify-content:center; gap:12px; }
.affiche-tete img{ width:64px; height:64px; object-fit:contain; border-radius:12px; }
.affiche-ecole{ font-size:1.5em; font-weight:900; }
.affiche-sous{ color:#5f6b65; }
.affiche-titre{ font-size:2.1em; margin:18px 0 10px; color:#1f5c46; }
.affiche-qr{ width:min(320px, 80%); margin:0 auto; background:#fff; padding:8px; border:4px solid #e8b04b; border-radius:18px; }
.affiche-etapes{ text-align:left; max-width:440px; margin:18px auto; font-size:1.1em; line-height:1.6; }
.affiche-lien{ font-size:.8em; color:#5f6b65; word-break:break-all; }
.affiche-pied{ margin-top:12px; font-size:.85em; color:#5f6b65; }
@media print{ .affiche-a4{ padding-top:20mm; } .affiche-titre{ font-size:30pt; } .affiche-qr{ width:110mm; } .affiche-etapes{ font-size:15pt; } }
.contact-ecole-boutons{ display:flex; flex-wrap:wrap; gap:8px; }
.contact-ecole-boutons .btn{ flex:1 1 140px; justify-content:center; text-align:center; }
.nc-moyennes{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.bulletin-page{ background:#fff; color:#111; padding:14px; border:1px solid #ddd; border-radius:8px; margin-bottom:16px; }
.bo-identite{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:10px 0; }
.bo-identite div, .bo-synthese div{ display:flex; flex-direction:column; border:1px solid #ddd; border-radius:6px; padding:6px 8px; }
.bo-identite span, .bo-synthese span{ font-size:.75em; color:#555; }
.bo-table{ width:100%; min-width:0; border-collapse:collapse; font-size:.85em; }
.bo-table th, .bo-table td{ border:1px solid #ccc; padding:4px 6px; text-align:center; }
.bo-table th{ background:#f2f5f3; }
.bo-synthese{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin:10px 0; }
.coef-grille{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:6px 14px; }
.coef-ligne{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.coef-ligne input{ width:80px; }
@media print{ .bulletin-page{ border:0; border-radius:0; margin:0; page-break-after:always; break-after:page; } .bulletin-page:last-child{ page-break-after:auto; } }
@media (max-width:600px){ .bo-identite{ grid-template-columns:repeat(2, 1fr); } .bo-synthese{ grid-template-columns:repeat(2, 1fr); } }
.ca-table{ border-collapse:collapse; font-size:.85em; }
.ca-table th, .ca-table td{ border:1px solid var(--border); padding:4px 3px; text-align:center; min-width:26px; }
.ca-table .ca-nom{ text-align:left; white-space:nowrap; position:sticky; left:0; background:var(--surface-1, #fff); z-index:1; min-width:150px; padding:4px 8px; }
.ca-cell{ cursor:pointer; font-weight:800; user-select:none; }
.ca-cell:hover{ outline:2px solid var(--primary); outline-offset:-2px; }
.ca-p{ color:#2e7d62; } .ca-a{ background:#fde2e2; color:#b42318; } .ca-r{ background:#fdf0d5; color:#8a5a0c; }
.ca-futur{ background:repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,.04) 4px 8px); cursor:not-allowed; }
.ca-auj{ background:var(--primary-dim, #e3f1eb); }
.ca-tot{ font-weight:700; }
.camps-table td, .camps-table th{ text-align:center; } .camps-table td:first-child, .camps-table th:first-child{ text-align:left; }
.lien-btn{ background:none; border:0; color:var(--primary); font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; padding:0; }
.print-only{ display:none; }
@media print{ .print-only{ display:block; } .cahier-appel .ca-table{ font-size:8pt; } }
.sf-sources{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin-bottom:12px; }
.sf-source{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:14px; border:1px solid var(--border); border-radius:var(--r-card, 12px); background:var(--surface-2); }
.sf-source textarea{ width:100%; }
.sf-texte{ grid-column:1 / -1; }
.sf-ic{ font-size:1.8rem; }
.bandeau-demo{ background:#fbf0d9; color:#8a5a0c; border:1px dashed #e8b04b; border-radius:12px; padding:8px 12px; margin-bottom:12px; font-weight:700; text-align:center; }
.maj-autres{ margin-top:8px; }
.maj-autres summary{ cursor:pointer; font-weight:700; color:var(--primary); }
.a-traiter-liste{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:8px; }
.a-traiter-item{ display:flex; align-items:center; gap:8px; text-align:left; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-card, 12px); background:var(--surface-1, #fff); color:var(--text); font:inherit; cursor:pointer; }
.a-traiter-item:hover{ border-color:var(--primary); }
.a-traiter-item strong{ font-size:1.15em; }
.a-traiter-ic{ font-size:1.2em; }
.a-traiter-fleche{ margin-left:auto; color:var(--text-dim); font-size:1.3em; }
.certif p{ line-height:1.7; margin:8px 0; }
.menu-jour{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--border); }
.menu-jour:last-child{ border-bottom:0; }
.menu-lib{ min-width:92px; font-weight:700; text-transform:capitalize; }
.agenda-reponses{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.agenda-rep-ligne{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.enfant-secu{ margin:10px 0; padding:10px 12px; border:1px dashed var(--border); border-radius:var(--r-card, 12px); display:flex; flex-direction:column; gap:6px; font-size:.95em; }
.enfant-secu .btn{ align-self:flex-start; }
.gate-autorises{ margin:12px 0; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid var(--em-gate-border, rgba(255,255,255,.2)); text-align:left; }
.gate-autorises ul{ margin:6px 0; padding-left:20px; }
.gate-autorises span{ font-size:.85em; opacity:.85; }
.enfant-anniv{ margin:10px 0; padding:10px 12px; border-radius:var(--r-card, 12px); background:linear-gradient(90deg, #f7d774, #f3b93f); color:#3a2a00; font-weight:700; }
.enfant-anniv span{ display:block; font-weight:500; font-size:.92em; margin-top:2px; }
.mj-grille{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
.mj-classe{ border:1px solid var(--border); border-radius:var(--r-card); padding:10px 12px; }
.mj-tete{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.mj-ligne{ font-size:var(--fs-sm, 14px); margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* ===== Refonte étape 7 (DESIGN.md §8) : règles transversales ===== */
/* Tableaux en cartes sur téléphone : libellé AU-DESSUS de la valeur (plus aucun chevauchement) */
@media (max-width:640px){
  table.is-cards td{ display:block; height:auto !important; min-height:0; text-align:left; padding:6px 0; overflow-wrap:anywhere; }
  table.is-cards td[data-label]:not([data-label=""])::before{ display:block; margin-bottom:2px; font-size:12px; text-transform:none; }
  table.is-cards td:has(.row-name){ display:flex; padding-bottom:8px; }
  table.is-cards td[data-label]:has(.row-name)::before{ display:none; }
  table.is-cards td:has(> button, > .btn, > a.btn, > .icon-btn, > .menu-plus){ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  table.is-cards td:has(> button, > .btn, > a.btn, > .icon-btn, > .menu-plus)::before{ flex-basis:100%; margin:0; }
  table.is-cards td:has(input:not([type=checkbox]):not([type=radio]), select, textarea){ display:flex; }
  table.is-cards td .hint{ display:block; margin:2px 0 0; }
  table.is-cards td > br{ display:block; content:''; }
  table.is-cards tr{ border:1px solid var(--border); border-radius:14px; margin-bottom:10px; background:var(--surface-1); }
  table.is-cards tr:last-child{ border-bottom:1px solid var(--border); }
  /* Boutons-icônes dans une carte : le libellé devient visible (DESIGN.md §8 « Actions ») */
  table.is-cards .icon-btn[aria-label]{ width:auto; min-width:44px; height:40px; padding:0 12px; display:inline-flex; align-items:center; gap:6px; font-size:14px; }
  table.is-cards .icon-btn[aria-label]::after{ content:attr(aria-label); font-weight:600; font-size:13px; }
  table.is-cards .icon-btn.danger[aria-label]{ color:var(--accent-ink); }
}
/* Fenêtres : feuille coulissante depuis le bas sur téléphone */
@media screen and (max-width:640px){
  .modal-backdrop{ align-items:flex-end; padding:0; overflow:hidden; }
  .modal{ max-width:none; max-height:92dvh; overflow-y:auto; border-radius:20px 20px 0 0; animation:feuilleMonte 250ms cubic-bezier(.2,.8,.2,1); padding-bottom:env(safe-area-inset-bottom, 0px); }
  .modal-header{ position:sticky; top:0; z-index:2; background:var(--surface-1); padding-top:18px; }
  .modal-header::before{ content:''; position:absolute; top:7px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--border-strong); }
}
@keyframes feuilleMonte{ from{ transform:translateY(100%); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .modal{ animation:none !important; } }
/* Formulaires : libellé à 6 px du champ, 20 px entre deux groupes */
.field{ gap:6px; }
.form-grid{ row-gap:20px; }
:not(.form-grid) > .field + .field{ margin-top:20px; }
/* Liens dans le texte : couleur primaire, jamais le bleu par défaut */
.view-container a:not(.btn):not(.nav-item):not(.lien-discret), .modal-body a:not(.btn){ color:var(--primary-ink); text-decoration:none; font-weight:600; }
.view-container a:not(.btn):not(.nav-item):not(.lien-discret):hover, .modal-body a:not(.btn):hover{ text-decoration:underline; }
/* Boutons « Supprimer » rangés dans le menu « ⋯ » (theme.js) : libellé toujours visible */
.menu-plus-liste .icon-btn{ display:flex; width:100%; height:auto; min-height:44px; align-items:center; gap:8px; padding:0 12px; border:0; background:transparent; text-align:left; font-size:14px; }
.menu-plus-liste .icon-btn:hover{ background:var(--surface-2); }
.menu-plus-liste .icon-btn[aria-label]::after{ content:attr(aria-label); font-weight:600; }
.menu-plus-liste .icon-btn.danger{ color:var(--accent-ink); }
.menu-plus{ display:inline-block; vertical-align:middle; }
/* Actions des tableaux : libellé visible aussi sur ordinateur (DESIGN.md §8) */
.table-wrap td .icon-btn[aria-label]:not(.menu-plus-liste .icon-btn){ width:auto; min-width:36px; padding:0 10px; display:inline-flex; align-items:center; gap:6px; font-size:14px; white-space:nowrap; }
.table-wrap td .icon-btn[aria-label]:not(.menu-plus-liste .icon-btn)::after{ content:attr(aria-label); font-weight:600; font-size:13px; }
.table-wrap td .badge{ white-space:nowrap; }
/* ===== Refonte étape 8 : console Parent (DESIGN.md §11) ===== */
/* En-tête compact sur une ligne : marque à gauche, boutons à droite */
@media (max-width:900px){
  body.theme-parent .topbar{ display:flex; flex-wrap:nowrap; align-items:center; gap:8px; padding:10px 16px; min-height:60px; }
  body.theme-parent .topbar h1{ flex:1 1 auto; min-width:0; margin:0; }
  body.theme-parent .topbar-right{ flex:0 0 auto; display:flex; align-items:center; gap:6px; margin:0; }
  body.theme-parent .bulle-btn, body.theme-parent .topbar .theme-toggle, body.theme-parent #btnRechercheGlobale{ width:40px; height:40px; border-radius:12px; }
  body.theme-parent .pt-logo{ width:34px; height:34px; font-size:16px; }
}
.annonce-autoriser.banniere-discrete{ margin-bottom:12px; }
.annonce-autoriser .bd-txt{ flex:1; min-width:0; font-size:14px; }
/* Carte « Aujourd'hui » */
.aj-parent{ margin:0 0 16px; }
.aj-enfants{ display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; }
.aj-enfant{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:4px 14px 4px 4px; border:1px solid var(--border); border-radius:999px; background:var(--surface-1); color:var(--text); font:inherit; font-weight:700; cursor:pointer; flex:0 0 auto; }
.aj-enfant.actif{ border-color:var(--primary); background:var(--primary-soft); color:var(--primary-ink); }
.aj-av{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--em-gold-400, #E8B04B); color:var(--em-green-900, #14392D); font-size:13px; font-weight:900; }
.aj-carte{ border:1px solid var(--border); border-radius:20px; background:var(--surface-1); padding:16px; box-shadow:var(--shadow-1); }
.aj-tete{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.aj-tete strong{ font-size:18px; } .aj-tete span{ color:var(--text-dim); font-size:13px; text-transform:capitalize; }
.aj-liste{ list-style:none; margin:0; padding:0; }
.aj-ligne{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.aj-ligne:first-child{ border-top:0; }
.aj-ic{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--surface-2); color:var(--text-dim); flex:0 0 auto; }
.aj-ic svg{ width:20px; height:20px; }
.aj-ic.ok{ background:var(--success-soft); color:var(--success); }
.aj-ic.attente{ background:var(--em-gold-100, #fbf0d9); color:color-mix(in srgb, var(--em-gold-400, #E8B04B) 45%, var(--text)); }
.aj-ic.erreur{ background:var(--accent-soft); color:var(--accent-ink); }
.aj-txt{ display:flex; flex-direction:column; min-width:0; }
.aj-txt small{ color:var(--text-dim); font-size:12px; } .aj-txt strong{ font-size:15px; overflow-wrap:anywhere; }
.aj-delai{ color:var(--text-dim); font-weight:600; font-size:13px; }
/* ===== Refonte étape 8 : console Enseignant — frise du jour ===== */
.frise{ list-style:none; margin:0 0 14px; padding:0 0 6px; display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; }
.frise-cours{ scroll-snap-align:start; flex:0 0 auto; min-width:150px; display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:14px; border:1px solid color-mix(in srgb, var(--mat) 30%, var(--border)); border-top:4px solid var(--mat); background:color-mix(in srgb, var(--mat) 8%, var(--surface-1)); position:relative; }
.frise-cours.passe{ opacity:.6; }
.frise-cours.encours{ box-shadow:0 0 0 2px var(--em-gold-400, #E8B04B); }
.frise-heure{ display:flex; gap:6px; align-items:baseline; font-weight:800; font-variant-numeric:tabular-nums; }
.frise-heure small{ color:var(--text-dim); font-weight:600; }
.frise-txt{ display:flex; flex-direction:column; } .frise-txt small{ color:var(--text-dim); font-size:13px; }
.frise-fait{ position:absolute; top:8px; right:10px; color:var(--success); font-weight:900; }
.frise-cours .tt-badge-encours{ align-self:flex-start; }
/* ===== Refonte étape 8 : console Portier ===== */
.gate-av{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; margin:0 auto 6px; border-radius:50%; background:var(--em-gold-400, #E8B04B); color:var(--em-green-900, #14392D); font-size:22px; font-weight:900; }
.gate-fiche{ display:flex; flex-direction:column; align-items:center; }
.gate-eleve-action svg{ width:18px; height:18px; vertical-align:-3px; }
body.theme-portier .etat-vide{ color:var(--em-gate-text, #EEF3F0); }
.gate-fiche .gate-av{ color:var(--em-green-900, #14392D) !important; font-size:22px !important; font-weight:900 !important; }
/* ===== Refonte étape 9 : écran de connexion (DESIGN.md §11) ===== */
/* Motif en filigrane (chapeaux, livres, étoiles) aux couleurs de la marque */
.login-gate::before{ content:''; position:fixed; inset:0; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%231F5C46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 30l16-8 16 8-16 8z'/%3E%3Cpath d='M20 33v7c6 4 14 4 20 0v-7'/%3E%3Cpath d='M72 78h18a4 4 0 0 1 4 4v14H76a4 4 0 0 0-4 4z'/%3E%3Cpath d='M72 78v22'/%3E%3Cpath d='M92 22l2 5 5 1-4 3 1 5-4-3-4 3 1-5-4-3 5-1z'/%3E%3Ccircle cx='28' cy='92' r='3'/%3E%3C/svg%3E");
  background-size:120px 120px; }
:root[data-theme="dark"] .login-gate::before{ opacity:.06; filter:invert(1); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .login-gate::before{ opacity:.06; filter:invert(1); } }
.login-card{ z-index:1; }
.login-marque{ background:var(--em-green-700, #1F5C46); color:#fff; font-size:30px; font-weight:900; border-radius:18px; }
.login-initiales{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:var(--em-gold-400, #E8B04B); color:var(--em-green-900, #14392D); font-size:24px; font-weight:900; }
.login-card h1{ font-size:24px; }
/* Choix du profil : de vrais boutons, une ligne large par profil sur téléphone */
button.role-card{ font:inherit; color:inherit; width:100%; display:flex; flex-direction:column; align-items:center; gap:4px; }
.role-card .rtxt{ display:flex; flex-direction:column; }
.role-card .rchev{ display:none; }
.role-card:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
@media (max-width:640px){
  .login-card{ padding:28px 18px; }
  .role-grid{ grid-template-columns:1fr; gap:10px; }
  button.role-card{ flex-direction:row; align-items:center; text-align:left; gap:14px; padding:14px 14px; min-height:72px; }
  .role-card .ric{ margin:0; flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:var(--surface-1); }
  .role-card .rtxt{ flex:1; min-width:0; }
  .role-card .rlabel{ font-size:16px; }
  .role-card .rchev{ display:block; font-size:26px; color:var(--text-dim); line-height:1; }
}
/* Champs larges */
.login-card .field input{ min-height:48px; font-size:16px; }
.login-card .btn[type=submit]{ min-height:48px; font-size:16px; }
/* ===== Invitations : groupe WhatsApp de classe, enseignants ===== */
.groupe-wa{ margin-top:14px; padding:14px; border-radius:16px; background:var(--primary-soft); border:1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); }
.groupe-wa-tete{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.groupe-wa-tete div{ display:flex; flex-direction:column; }
.groupe-wa-tete div span{ color:var(--text-dim); font-size:13px; }
.groupe-wa-choix{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.groupe-wa-choix select{ flex:1 1 200px; min-height:44px; background-color:var(--surface-1); }
.invit-ens{ display:flex; gap:16px; align-items:center; padding:14px; margin-bottom:14px; border-radius:16px; background:var(--primary-soft); border:1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); }
.invit-ens-qr{ flex:0 0 112px; width:112px; height:112px; padding:6px; border-radius:12px; background:#fff; }
.invit-ens-qr svg{ width:100%; height:100%; display:block; }
.invit-ens-txt{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.invit-ens-txt span{ color:var(--text-dim); font-size:14px; }
.invit-ens-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.invit-ens.replie{ background:var(--surface-2); border-color:var(--border); }
.invit-ens.replie .invit-ens-qr{ flex-basis:72px; width:72px; height:72px; }
@media (max-width:520px){ .invit-ens{ flex-direction:column; align-items:stretch; } .invit-ens-qr{ align-self:center; } }
/* ===== Démarrage : chargement et erreur réseau ===== */
.login-card.demarrage{ max-width:420px; }
.demarrage-logo{ animation:demarragePouls 1.6s ease-in-out infinite; }
@keyframes demarragePouls{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.demarrage-barre{ height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:6px; }
.demarrage-barre div{ width:40%; height:100%; border-radius:999px; background:var(--primary); animation:demarrageGlisse 1.2s ease-in-out infinite; }
@keyframes demarrageGlisse{ from{ transform:translateX(-100%); } to{ transform:translateX(250%); } }
@media (prefers-reduced-motion: reduce){ .demarrage-logo, .demarrage-barre div{ animation:none; } .demarrage-barre div{ width:100%; opacity:.4; } }
/* ===== Demandes d'accès ===== */
.dem-resume{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; margin-bottom:12px; border-radius:14px; background:var(--primary-soft); }
.dem-carte{ border:1px solid var(--border); border-radius:16px; padding:14px; margin-bottom:10px; background:var(--surface-1); }
.dem-carte[data-sure]{ border-color:color-mix(in srgb, var(--success) 45%, var(--border)); }
.dem-carte > .btn{ margin-top:8px; }
.dem-carte label{ min-height:36px; }
/* ===== Sauvegarde complète ===== */
.sauvegarde-ligne{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.sauvegarde-ligne > span:nth-child(2){ flex:1 1 220px; color:var(--text-dim); font-size:14px; }
/* ===== Rapport du mois ===== */
.db-bonjour{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.rapport-mois{ background:var(--surface-1); }
.rm-grille{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:12px; }
.rm-bloc{ border:1px solid var(--border); border-radius:12px; padding:10px 12px; break-inside:avoid; }
.rm-bloc h4{ margin:0 0 6px; font-size:14px; }
.rm-bloc table{ width:100%; min-width:0; border-collapse:collapse; font-size:14px; }
.rm-bloc td{ padding:4px 0; border-bottom:1px solid var(--border); height:auto !important; }
.rm-bloc tr:last-child td{ border-bottom:0; }
.rm-val{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rm-val.ok{ color:var(--success); } .rm-val.ko{ color:var(--accent-ink); }
@media print{ .rapport-mois{ color:#000; } .rm-grille{ grid-template-columns:1fr 1fr; } }
/* ===== Liste de classe imprimable ===== */
.liste-classe{ background:var(--surface-1); overflow-x:auto; }
@media print{ .liste-classe{ overflow:visible; } }
.lc-resume{ margin:0 0 10px; font-size:14px; }
.lc-table{ width:100%; min-width:0; border-collapse:collapse; font-size:14px; }
.lc-table th, .lc-table td{ border:1px solid var(--border); padding:6px 8px; text-align:left; height:auto !important; }
.lc-table th{ background:var(--surface-2); font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.lc-table td:first-child, .lc-table th:first-child{ width:36px; text-align:center; }
.lc-table.emargement td{ height:30px !important; }
.lc-table .lc-case{ width:11%; }
@media print{ .lc-table th, .lc-table td{ border-color:#999; color:#000; } .lc-table th{ background:#eee; } }
/* ===== Cartes scolaires (85,6 × 54 mm) ===== */
.cartes-scolaires{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap:12px; }
.carte-scolaire{ aspect-ratio:85.6 / 54; display:flex; flex-direction:column; border-radius:12px; overflow:hidden; background:#fff; color:#14392D; border:1px solid #cfd8d3; font-size:11px; break-inside:avoid; page-break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.cs-tete{ display:flex; align-items:center; gap:8px; padding:6px 10px; background:#1F5C46; color:#fff; }
.cs-tete img, .cs-logo{ width:26px; height:26px; border-radius:6px; object-fit:contain; background:#fff; flex:0 0 auto; }
.cs-logo{ display:inline-flex; align-items:center; justify-content:center; color:#1F5C46; font-weight:900; }
.cs-ecole{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.cs-ecole strong{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-ecole small{ font-size:9px; letter-spacing:.06em; color:#E8B04B; font-weight:800; }
.cs-corps{ flex:1; display:flex; gap:10px; align-items:center; padding:6px 10px; }
.cs-av{ flex:0 0 auto; width:62px; height:72px; border-radius:8px; background:#E3F1EB; border:1px dashed #9cbcae; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; color:#1F5C46; }
.cs-infos{ margin:0; display:grid; gap:1px; min-width:0; }
.cs-infos div{ display:flex; gap:6px; } .cs-infos dt{ width:58px; flex:0 0 auto; color:#5F6B65; } .cs-infos dd{ margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-pied{ display:flex; justify-content:space-between; gap:8px; padding:4px 10px; border-top:1px solid #e4e9e6; font-size:9px; color:#5F6B65; }
.cs-signe{ font-style:italic; }
@media print{
  .cartes-scolaires{ grid-template-columns:repeat(2, 85.6mm); gap:4mm 6mm; justify-content:center; }
  .carte-scolaire{ width:85.6mm; height:54mm; aspect-ratio:auto; border-radius:3mm; }
}
/* Documents imprimés : aucun tableau plus large que la page (la règle générale « 600 px minimum » coupait la dernière colonne des bulletins) */
@media print{
  .modal-body table{ min-width:0 !important; width:100% !important; }
  .bo-table th{ white-space:normal; font-size:10px; }
  .bo-table td{ font-size:11px; }
}
/* ===== Salutations et rôles ===== */
.choix-civilite{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; font-size:14px; color:var(--text-dim); }
.role-etiquette{ display:inline-block; margin-bottom:6px; padding:2px 10px; border-radius:999px; background:var(--primary-soft); color:var(--primary-ink); font-size:12px; font-weight:800; letter-spacing:.02em; }
.portier-bonjour{ margin:0 0 12px; } .portier-bonjour h2{ margin:0; font-size:20px; }
.acces-ens{ margin:0 0 10px; display:grid; gap:6px; } .acces-ens div{ display:flex; gap:10px; } .acces-ens dt{ min-width:120px; color:var(--text-dim); } .acces-ens dd{ margin:0; font-weight:700; }
/* ===== Fiche élève : onglets, bulletin compact, présences en lignes ===== */
.profil-onglets{ margin:0 0 14px; }
.bulletin-mini{ min-width:0 !important; width:100%; font-size:14px; }
.bulletin-mini th, .bulletin-mini td{ padding:8px 6px; height:auto !important; text-align:center; }
.bulletin-mini th:first-child, .bulletin-mini td:first-child{ text-align:left; }
@media (max-width:640px){
  .bulletin-mini th:nth-child(5), .bulletin-mini td:nth-child(5){ display:none; }
  .bulletin-mini{ font-size:13px; } .bulletin-mini th{ font-size:10px; }
}
.pr-liste{ list-style:none; margin:0; padding:0; }
.pr-ligne{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:10px 0; border-top:1px solid var(--border); }
.pr-ligne:first-child{ border-top:0; }
.pr-date{ display:flex; flex-direction:column; min-width:110px; } .pr-date small{ color:var(--text-dim); font-size:12px; text-transform:capitalize; }
.pr-motif{ flex-basis:100%; color:var(--text-dim); font-size:13px; padding-left:2px; }
@media (min-width:641px){ .pr-motif{ flex-basis:auto; } }
@media (max-width:640px){ .profil-infos{ grid-template-columns:1fr 1fr !important; gap:12px 14px; } .profil-infos strong{ overflow-wrap:anywhere; } }
/* ===== « Comment voudriez-vous que je vous appelle ? » ===== */
.question-appel{ display:flex; flex-direction:column; gap:10px; margin:10px 0 4px; padding:14px; border-radius:16px; background:var(--primary-soft); border:1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); max-width:520px; }
.question-appel > strong{ font-size:16px; }
.question-appel .field{ margin:0; } .question-appel input#nomAppel{ min-height:44px; }
.appel-apercu{ font-weight:800; color:var(--primary-ink); }
.appel-actions{ display:flex; align-items:center; gap:12px; }
.appel-changer{ margin-top:4px; font-size:13px; }
body.theme-portier .question-appel{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); }
body.theme-portier .appel-apercu{ color:var(--em-gold-400, #E8B04B); }
/* Compteur du jour au portail */
.gate-compteur{ display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; background:rgba(232,176,75,.15); color:var(--em-gold-400, #E8B04B); font-size:12px; font-weight:700; white-space:nowrap; }
.gate-compteur strong{ font-size:14px; }
/* ===== Emploi du temps imprimable ===== */
.edt-impression{ background:var(--surface-1); overflow-x:auto; }
.edt-imp-table{ width:100%; min-width:0 !important; border-collapse:collapse; font-size:13px; table-layout:fixed; }
.edt-imp-table th, .edt-imp-table td{ border:1px solid var(--border); padding:6px; vertical-align:top; height:auto !important; }
.edt-imp-table th{ background:var(--surface-2); font-size:12px; text-transform:uppercase; }
.edt-imp-table th:first-child, .edt-imp-heure{ width:76px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.edt-imp-table td strong{ display:block; } .edt-imp-table td small{ display:block; color:var(--text-dim); font-size:11px; }
.edt-imp-pause td{ background:var(--surface-2); text-align:center; font-weight:700; color:var(--text-dim); }
@media print{ .edt-imp-table th, .edt-imp-table td{ border-color:#999; color:#000; } .edt-imp-pause td, .edt-imp-table th{ background:#eee; } .edt-imp-table td{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } }
/* ===== Applications dédiées : accueil « inscription avec Google » ===== */
.accueil-inscription .btn-google{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; font-size:17px; }
.accueil-inscription .g-logo{ width:26px; height:26px; border-radius:50%; background:#fff; color:#1F5C46; font-weight:900; display:inline-flex; align-items:center; justify-content:center; }
.etapes-inscription{ text-align:left; margin:14px 0 10px; padding-left:22px; display:flex; flex-direction:column; gap:6px; font-size:14px; }
.alerte-inscription{ text-align:left; margin:10px 0 0; padding:12px; border-radius:12px; background:var(--amber-bg, #FFF4DC); color:var(--text, #14392D); border:1px solid color-mix(in srgb, var(--amber, #C98A12) 40%, transparent); font-size:14px; line-height:1.4; }
body.theme-portier .alerte-inscription{ background:rgba(232,176,75,.12); color:inherit; }
/* ===== Écran Enseignants : inscriptions en attente bien visibles ===== */
.panneau-inscriptions.inscr-attente{ border:2px solid var(--amber, #C98A12); box-shadow:0 0 0 4px color-mix(in srgb, var(--amber, #C98A12) 15%, transparent); }
.panneau-inscriptions.inscr-attente #compteurInscriptions{ color:var(--amber-ink, #8A5A00); font-weight:800; }
/* ===== Console Enseignant : « Je m'enrôle » et liste des enseignants ===== */
.enrole-ouvert{ border:2px solid color-mix(in srgb, var(--primary) 40%, var(--border)); }
.enrole-form{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.enrole-form .field{ margin:0; }
.enrole-ligne{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap:12px; }
.enrole-choix{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; }
.enrole-choix .enrol-choix{ min-height:40px; display:inline-flex; align-items:center; gap:6px; }
.enrole-classes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.collegues{ list-style:none; margin:0; padding:0; }
.collegue{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.collegue:first-child{ border-top:0; }
.collegue.moi{ background:var(--primary-soft); border-radius:12px; padding:10px; }
.collegue-txt{ display:flex; flex-direction:column; min-width:0; }
.collegue-txt small{ color:var(--text-dim); font-size:13px; }
.enrole-a-valider{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }

/* Choix Monsieur / Madame : pas de barre de défilement parasite (écran d’inscription) */
.seg-radio{ overflow-y:hidden; }
.login-card .seg-radio input{ margin:0; height:100%; }
/* ===== Console Enseignant : premiers pas ===== */
.premiers-pas{ border:2px solid color-mix(in srgb, var(--primary) 35%, var(--border)); }
.pp-grille{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:10px; margin:6px 0 10px; }
.pp-geste{ display:flex; gap:12px; align-items:flex-start; text-align:left; padding:14px; border-radius:14px; border:1px solid var(--border); background:var(--surface, #fff); color:inherit; font:inherit; cursor:pointer; min-height:44px; }
.pp-geste:hover, .pp-geste:focus-visible{ border-color:var(--primary); }
.pp-num{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; font-weight:900; display:inline-flex; align-items:center; justify-content:center; }
.pp-txt{ display:flex; flex-direction:column; gap:4px; } .pp-txt strong{ display:inline-flex; align-items:center; gap:6px; } .pp-txt small{ color:var(--text-dim); font-size:13px; line-height:1.35; }
/* ===== Relance des enseignants non inscrits ===== */
.relance-liste{ list-style:none; margin:0; padding:0; }
.relance-ligne{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:12px 0; border-top:1px solid var(--border); }
.relance-ligne:first-child{ border-top:0; }
.relance-ligne.envoye .relance-txt strong{ color:var(--text-dim); }
.relance-txt{ display:flex; flex-direction:column; min-width:0; } .relance-txt small{ color:var(--text-dim); font-size:13px; }
.relance-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }

/* Liste des enseignants imprimée : matières plus compactes */
.lc-ens td:nth-child(5){ font-size:11px; line-height:1.25; }
.lc-ens td:nth-child(3){ min-width:120px; }
/* ===== Emploi du temps : remplissage rapide ===== */
.edt-rapide{ display:flex; flex-direction:column; gap:10px; }
.edt-rapide-choix{ display:flex; flex-direction:column; gap:4px; text-align:left; padding:14px; border-radius:14px; border:1px solid var(--border); background:var(--surface, #fff); color:inherit; font:inherit; cursor:pointer; min-height:44px; }
.edt-rapide-choix:hover, .edt-rapide-choix:focus-visible{ border-color:var(--primary); }
.edt-rapide-choix small{ color:var(--text-dim); font-size:13px; }
.danger-texte{ color:var(--danger, #B5492F); }
/* ===== Saisie groupée des versements déjà reçus ===== */
.rv-liste{ display:flex; flex-direction:column; margin-top:8px; }
.rv-eleve{ padding:12px 0; border-top:1px solid var(--border); }
.rv-eleve:first-child{ border-top:0; }
.rv-solde{ display:flex; justify-content:space-between; align-items:center; color:var(--text-dim); }
.rv-echs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:8px; margin-top:8px; }
.rv-ech{ display:grid; grid-template-columns:1fr 118px auto; gap:6px; align-items:center; padding:8px; border-radius:12px; background:var(--surface-2); }
.rv-lib{ display:flex; flex-direction:column; font-size:14px; font-weight:700; min-width:0; } .rv-lib small{ font-weight:400; color:var(--text-dim); font-size:12px; }
.rv-montant{ min-height:40px; text-align:right; padding-left:6px; padding-right:8px; font-variant-numeric:tabular-nums; }
.rv-montant.rv-trop{ border-color:var(--danger, #B5492F); background:color-mix(in srgb, var(--danger, #B5492F) 8%, transparent); }
.rv-pied{ position:sticky; bottom:0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:12px 0 2px; margin-top:8px; border-top:1px solid var(--border); background:var(--surface, #fff); }
/* ===== Invitation des familles une par une ===== */
.relance-par-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:14px; margin-bottom:12px; border-radius:14px; background:var(--primary-soft); border:1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); }
.relance-par-cta > div{ display:flex; flex-direction:column; gap:4px; max-width:560px; }
.relance-par-cta span{ color:var(--text-dim); font-size:14px; }
/* ===== Emploi du temps aux horaires réels ===== */
.edtl-versions{ margin:0 0 10px; flex-wrap:wrap; }
.edtl-legende{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 12px; font-size:12px; color:var(--text-dim); }
.edtl-legende span{ display:inline-flex; align-items:center; gap:6px; } .edtl-legende i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.edtl-grille{ display:grid; gap:10px; align-items:start; }
.edtl-jour h3{ margin:0 0 8px; font-size:15px; text-align:center; padding:6px; border-radius:10px; background:var(--surface-2); }
.edtl-jour.aujourdhui h3{ background:var(--primary); color:#fff; }
.edtl-liste{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:4px; }
.edtl-seance{ display:flex; gap:8px; align-items:flex-start; padding:6px 8px; border-radius:10px; border-left:5px solid var(--mat); background:color-mix(in srgb, var(--mat) 9%, var(--surface, #fff)); }
.edtl-seance.en-cours{ box-shadow:0 0 0 2px var(--mat); }
.edtl-heure{ display:flex; flex-direction:column; font-weight:800; font-size:12px; min-width:40px; font-variant-numeric:tabular-nums; } .edtl-heure small{ font-weight:600; color:var(--text-dim); }
.edtl-txt{ flex:1; display:flex; flex-direction:column; font-size:13px; line-height:1.25; min-width:0; } .edtl-txt small{ color:var(--text-dim); font-size:11px; }
.edtl-act .icon-btn{ width:26px; height:26px; font-size:12px; }
.edtl-pause{ display:flex; justify-content:space-between; gap:8px; padding:4px 8px; border-radius:8px; background:var(--surface-2); color:var(--text-dim); font-size:12px; }
.edtl-imp-table{ width:100%; border-collapse:collapse; table-layout:fixed; font-size:10px; }
.edtl-imp-table th{ background:#1F5C46; color:#fff; padding:5px; border:1px solid #cfd8d3; }
.edtl-imp-table td{ vertical-align:top; padding:3px; border:1px solid #cfd8d3; }
.edtl-imp-seance{ border-left:4px solid #999; padding:1px 4px; margin:0 0 2px; line-height:1.2; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.edtl-imp-seance span{ font-weight:800; font-variant-numeric:tabular-nums; }
.edtl-imp-pause{ text-align:center; background:#eef1ef; color:#555; padding:1px; margin:0 0 2px; font-style:italic; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
@media print{ .edtl-impression .edtl-legende{ font-size:9px; margin-top:6px; } }

/* ===== Tableau de bord : dates des 3 prochaines semaines ===== */
.pd-liste{ list-style:none; margin:0; padding:0; }
.pd-ligne{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.pd-ligne:first-child{ border-top:0; }
.pd-ic{ font-size:20px; width:28px; text-align:center; }
.pd-txt{ flex:1; display:flex; flex-direction:column; min-width:0; } .pd-txt small{ color:var(--text-dim); font-size:13px; }
.pd-delai{ font-weight:800; font-size:13px; color:var(--primary-ink, var(--primary)); white-space:nowrap; }
.pd-vacances .pd-delai{ color:var(--amber-ink, #8A5A00); }
/* ===== Activation de l'accès d'un enseignant ===== */
.acces-autre{ margin-top:14px; border-top:1px solid var(--border); padding-top:10px; }
.acces-autre summary{ cursor:pointer; font-weight:700; color:var(--text-dim); font-size:14px; }
/* ===== Application des parents : actions jamais coupées, semaine sur les jours de classe ===== */
.actions-parent{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:10px; }
.actions-parent .btn{ height:auto; min-height:48px; white-space:normal; line-height:1.25; text-align:center; padding-top:10px; padding-bottom:10px; }

/* Agenda des parents : la date reste en haut de la carte, même quand la carte est longue */
.actu-carte{ align-items:flex-start; }
.actu-date{ flex:0 0 auto; }
.actu-corps{ min-width:0; flex:1; }

/* ===== Onglets (Comptabilité, Pointage…) : une seule ligne qui glisse sur téléphone ===== */
@media (max-width:760px){
  .subtabs{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-left:calc(-1 * var(--sp-4, 16px)); margin-right:calc(-1 * var(--sp-4, 16px)); padding:2px var(--sp-4, 16px) 6px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
  .subtabs::-webkit-scrollbar{ display:none; }
  .subtab{ flex:0 0 auto; white-space:nowrap; scroll-snap-align:start; }
}
/* ===== Notes : choix de la composition du trimestre ===== */
.compos-choix{ flex-wrap:wrap; margin-top:10px; }
.compos-choix .seg{ white-space:nowrap; }