/*
  UI kit — vocabulaire visuel unique partagé par toutes les pages.
  Généralise les patterns de showcase-interface.css (la maquette /pilotage).
  Chargé après showcase-interface.css : les surcharges génériques l'emportent.
  Les classes propres au dashboard (showcase-stats, showcase-grid) ne sont pas touchées.
*/

/* Police manuscrite lisible (auto-hébergée), pour le nom de l'auto-école sous le logo. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/caveat-700.woff2") format("woff2");
}

/* Compteur de vitesse REMC (composant Gauge) : rendu fluide, jamais de débordement. */
.gauge { display: block; height: auto; max-width: 100%; }

/* Teintes d'icône de section manquantes (base + green + red déjà définies). */
.showcase-panel-title > i.orange { background: #fff1e3; color: var(--showcase-orange); }
.showcase-panel-title > i.cyan { background: #e2f7fb; color: var(--showcase-cyan); }
.showcase-panel-title > i.purple { background: #efe7fe; color: var(--showcase-purple); }
.showcase-panel-title > i.neutral { background: #eef1f6; color: var(--showcase-muted); }

/* Pousse un élément (pastille, contrôle) à droite de l'en-tête de section. */
.showcase-panel-title .head-aside { margin-left: auto; }

/* ---- Cadrage desktop : barre + contenu alignés sur une colonne centrée (max 1760px), zéro débordement ---- */
.app-shell .showcase-topbar-inner {
  min-width: 0;
  column-gap: clamp(14px, 1.4vw, 26px);
  padding-left: max(24px, calc((100% - 1760px) / 2));
  padding-right: max(24px, calc((100% - 1760px) / 2));
}
.app-shell > .stage {
  padding-left: max(24px, calc((100% - 1760px) / 2));
  padding-right: max(24px, calc((100% - 1760px) / 2));
}
.showcase-dashboard { max-width: none; }

/* Onglets familles + actions : largeurs qui tiennent de 1280px à 1920px+ sans couper "Réglages" */
.app-shell .vehicle-tabs { min-width: 0; }
.app-shell .vehicle-tab-group,
.app-shell .vehicle-tab-summary { width: clamp(104px, 7.1vw, 150px); }
.app-shell .showcase-actions { min-width: 0; column-gap: clamp(6px, 0.5vw, 10px); }
.app-shell .showcase-action {
  width: clamp(68px, 4.7vw, 100px);
  height: clamp(72px, 4.9vw, 98px);
  gap: 6px;
  padding: 8px 5px;
}
.app-shell .showcase-action:not(.is-premium) svg { width: clamp(20px, 1.45vw, 25px); height: clamp(20px, 1.45vw, 25px); }
.app-shell .showcase-action span {
  font-size: clamp(10.5px, 0.62vw, 12.5px);
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---- Section : panneau + en-tête + corps, padding standard ---- */
.showcase-section {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 32px);
}
.showcase-section + .showcase-section { margin-top: clamp(20px, 2.2vw, 34px); }
.showcase-section > .showcase-panel-title { margin-bottom: clamp(16px, 1.6vw, 26px); }

/* ---- Rangée de métriques (générique, sans la marge du dashboard) ---- */
.showcase-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(16px, 1.6vw, 28px);
  margin-bottom: clamp(22px, 2.6vw, 40px);
}
.showcase-metric-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.showcase-metric-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.showcase-metric-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Correctif rond d'icône des cartes-stat : tint léger via ::before, icône pleine et visible
   (avant : opacity:0.12 sur le <i> rendait aussi l'icône invisible). */
.showcase-stat-card i {
  position: relative;
  background: transparent;
  opacity: 1;
}
.showcase-stat-card i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.14;
}
.showcase-stat-card i svg {
  position: relative;
  color: currentColor;
  opacity: 1;
}

/* Carte métrique en contexte générique : plus compacte que sur le dashboard. */
.showcase-metric-row .showcase-stat-card { min-height: 152px; padding: 24px 26px 22px; }
.showcase-metric-row .showcase-stat-card strong { margin-top: 12px; font-size: 42px; }
.showcase-metric-row .showcase-stat-card small { margin-top: 6px; font-size: 16px; }
.showcase-metric-row .showcase-stat-card i { width: 58px; height: 58px; }
.showcase-metric-row .showcase-stat-card em { margin-top: 18px; padding-top: 14px; font-size: 15px; }

/* ---- Pastille de statut (générique, inline, sans margin-left) ---- */
.showcase-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 1000;
  white-space: nowrap;
}
.showcase-pill.tone-danger { background: #ffe7ea; color: var(--showcase-red); }
.showcase-pill.tone-success { background: #e7f8ed; color: var(--showcase-green); }
.showcase-pill.tone-warning { background: #fff1e0; color: var(--showcase-orange); }
.showcase-pill.tone-info { background: #e6f1ff; color: var(--showcase-blue); }
.showcase-pill.tone-neutral { background: #eef1f6; color: var(--showcase-muted); }

/* ---- Chip / tag inline ---- */
.showcase-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: #e6f1ff;
  color: var(--showcase-blue);
  font-size: 14px;
  font-weight: 1000;
}
.showcase-chip.tone-success { background: #e7f8ed; color: var(--showcase-green); }
.showcase-chip.tone-warning { background: #fff1e0; color: var(--showcase-orange); }
.showcase-chip.tone-danger { background: #ffe7ea; color: var(--showcase-red); }
.showcase-chip.tone-neutral { background: #eef1f6; color: var(--showcase-muted); }

/* ---- Boutons ---- */
.showcase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 1000;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.showcase-btn:hover { transform: translateY(-1px); }
.showcase-btn.is-block { width: 100%; }
.showcase-btn.is-lg { min-height: 60px; font-size: 17px; }
.showcase-btn.is-primary {
  background: linear-gradient(135deg, #075bd0, #2687ff);
  color: #fff;
  box-shadow: 0 16px 30px rgba(18, 104, 223, 0.22);
}
.showcase-btn.is-secondary { border-color: #dce4ef; background: #fff; color: var(--showcase-blue); }
.showcase-btn.is-danger { border-color: #ffd2d7; background: #fff; color: var(--showcase-red); }
.showcase-btn.is-ghost { background: transparent; color: var(--showcase-muted); }
.showcase-btn[disabled], .showcase-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---- Liste + lignes ---- */
.showcase-list { display: grid; gap: 12px; }
.showcase-listrow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px 18px;
  padding: 18px 20px;
  border: 1px solid var(--showcase-line);
  border-left-width: 4px;
  border-radius: 14px;
  background: #fff;
}
.showcase-listrow.tone-danger { border-left-color: var(--showcase-red); }
.showcase-listrow.tone-success { border-left-color: var(--showcase-green); }
.showcase-listrow.tone-warning { border-left-color: var(--showcase-orange); }
.showcase-listrow.tone-info { border-left-color: var(--showcase-blue); }
.showcase-listrow.tone-neutral { border-left-color: var(--showcase-line); }
.showcase-listrow-main { display: grid; gap: 4px; min-width: 0; }
.showcase-listrow-main strong { color: var(--showcase-ink); font-size: 17px; font-weight: 1000; }
.showcase-listrow-main span { color: #525d6d; font-size: 15px; font-weight: 700; }
.showcase-listrow-main small { color: var(--showcase-muted); font-size: 13px; font-weight: 700; }
.showcase-listrow-aside { display: inline-flex; align-items: center; gap: 12px; justify-self: end; }

/* ---- Réglage des alertes (par type + override véhicule) ---- */
.alert-rules-hint { color: var(--showcase-muted); font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.alert-rules-list { display: grid; gap: 10px; }
.alert-rule-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 14px 16px;
  border: 1px solid var(--showcase-line);
  border-radius: 12px;
  background: #fff;
}
.alert-rule-row.is-off { opacity: 0.6; }
.alert-rule-toggle { display: inline-flex; align-items: center; gap: 10px; min-width: 210px; cursor: pointer; }
/* Surcharge plus spécifique que `.app-shell input:not([type=file])` (globals.css) qui force width:100% + min-height. */
.app-shell .alert-rule-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 6px;
  accent-color: var(--showcase-blue, #2563eb);
}
.alert-rule-toggle strong { color: var(--showcase-ink); font-size: 16px; font-weight: 900; }
.alert-rule-badge { margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: #e6f1ff; color: var(--showcase-blue); font-size: 12px; font-weight: 1000; }
.alert-rule-window { display: inline-flex; align-items: center; gap: 8px; color: var(--showcase-muted); font-size: 14px; font-weight: 800; }
.app-shell .alert-rule-window input {
  width: 92px;
  min-height: 0;
  padding: 9px 12px;
  border: 1px solid var(--showcase-line);
  border-radius: 9px;
  font-size: 16px;
  font-weight: 800;
  text-align: right;
}
.alert-rule-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.alert-rule-actions .showcase-btn { min-height: 40px; padding: 0 16px; }

/* Case à cocher "Bloquer le véhicule" (GarageEntryForm) : même protection contre .app-shell input{width:100%}. */
.app-shell .garage-block-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 850; cursor: pointer; }
.app-shell .garage-block-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--showcase-blue, #2563eb);
}

/* ---- Onglets de période (sélecteur sur la carte coûts) ---- */
.period-tabs { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.period-tab {
  padding: 7px 12px;
  border: 1px solid var(--showcase-line);
  border-radius: 999px;
  background: #fff;
  color: var(--showcase-muted);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.period-tab:hover { border-color: #b7d8ff; }
.period-tab.active { background: var(--showcase-blue); border-color: var(--showcase-blue); color: #fff; }

/* ---- Pilotage : rangée haute (santé du parc à gauche du vide + stats) ---- */
.dashboard-top {
  display: grid;
  grid-template-columns: clamp(300px, 30vw, 600px) 1fr;
  gap: clamp(20px, 1.8vw, 36px);
  align-items: stretch;
  margin-bottom: clamp(24px, 2.8vw, 44px);
}
.dashboard-top .showcase-stats { margin: 0; }
.dashboard-health { justify-content: flex-start; }
@media (max-width: 1080px) {
  .dashboard-top { grid-template-columns: 1fr; }
}

/* ---- Grille 2 colonnes générique ---- */
.showcase-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.6vw, 28px);
}

/* ---- Section repliable générique (<details>) ---- */
.showcase-disclosure { margin-bottom: clamp(18px, 2.2vw, 32px); }
.showcase-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border: 1px solid var(--showcase-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--showcase-shadow);
  color: var(--showcase-ink);
  font-size: 19px;
  font-weight: 1000;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.showcase-disclosure > summary::-webkit-details-marker { display: none; }
.showcase-disclosure > summary::marker { content: ""; }
.showcase-disclosure > summary > svg:first-child { color: var(--showcase-blue); flex: 0 0 auto; }
.showcase-disclosure > summary .disclosure-count {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef1f6;
  color: var(--showcase-muted);
  font-size: 15px;
  font-weight: 1000;
}
.showcase-disclosure > summary:hover { border-color: #b7d8ff; }
.showcase-disclosure[open] > summary { border-radius: 14px 14px 0 0; }
.showcase-disclosure-body { display: grid; gap: clamp(16px, 1.8vw, 26px); padding-top: 16px; }

/* ---- Bloc de saisie repliable (ex: garage) ---- */
.garage-saisie { margin-bottom: clamp(22px, 2.6vw, 40px); }
.garage-saisie > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border: 1px solid var(--showcase-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--showcase-shadow);
  color: var(--showcase-blue);
  font-size: 18px;
  font-weight: 1000;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.garage-saisie > summary::-webkit-details-marker { display: none; }
.garage-saisie > summary::marker { content: ""; }
.garage-saisie > summary:hover { border-color: #b7d8ff; }
.garage-saisie[open] > summary { margin-bottom: 16px; }

/* ---- Lien de reset du filtre famille (discret) ---- */
.family-clear-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  padding: 7px 13px;
  border: 1px solid var(--showcase-line);
  border-radius: 999px;
  background: #fff;
  color: var(--showcase-muted);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}
.family-clear-link:hover { border-color: #b7d8ff; color: var(--showcase-blue); }

/* ---- Mini-formulaire "entretien fait" sur une alerte ---- */
.alert-done-form { display: grid; gap: 10px; margin-top: 10px; }
.alert-done-form label { display: grid; gap: 6px; color: var(--showcase-muted); font-size: 14px; font-weight: 800; }
.alert-done-form input {
  padding: 11px 13px;
  border: 1px solid var(--showcase-line);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
}
.alert-done-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.alert-done-form-actions .showcase-btn { min-height: 42px; }

/* ---- Barre d'outils de page (recherche, action) ---- */
.showcase-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 2vw, 30px);
}
.showcase-toolbar .showcase-toolbar-spacer { flex: 1 1 auto; }

@media (max-width: 1080px) {
  .showcase-metric-row.cols-3,
  .showcase-metric-row.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .showcase-metric-row,
  .showcase-metric-row.cols-2,
  .showcase-metric-row.cols-3,
  .showcase-metric-row.cols-4 { grid-template-columns: 1fr; }
  .showcase-listrow { grid-template-columns: 1fr; }
  .showcase-listrow-aside { justify-self: start; }
}

/* Canaux d'alerte simulés (SMS / Push) : marqueur "à venir" pour ne pas laisser croire à un envoi réel. */
.channel-toggle { position: relative; }
.channel-toggle.is-soon { opacity: 0.72; }
.channel-toggle .channel-soon-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef1f6;
  color: var(--showcase-muted, #6b7280);
  font-size: 0.62em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.channel-toggle.active .channel-soon-tag { background: rgba(255, 255, 255, 0.32); color: inherit; }

/* ============================================================
   MOBILE (≤ 720px) — navigation terrain : en-tête compact +
   barre d'actions fixe en bas + menu famille pleine largeur.
   ============================================================ */
@media (max-width: 720px) {
  /* En-tête empilé qui défile avec la page (non collant) : logo / onglets / actions, chaque rangée pleine largeur.
     Pas de position:fixed -> indépendant du backdrop-filter de la barre (qui créerait un bloc englobant). */
  .app-shell .showcase-topbar { position: relative; z-index: 100; height: auto; min-height: 0; }
  .app-shell .showcase-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    overflow: visible;
    padding: 10px 12px 14px;
  }
  .app-shell .showcase-topbar .showcase-brand { flex: 0 0 auto; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; gap: 6px; height: auto; }
  .app-shell .showcase-topbar .brand-logo { height: 54px; width: auto; }
  .app-shell .showcase-topbar .brand-name { font-size: 17px; margin-top: 0; }

  /* Onglets familles : grille 4 colonnes égales, icône au-dessus du label. */
  .app-shell .vehicle-tab-group { position: static; min-width: 0; width: auto; height: auto; }
  .app-shell .vehicle-tab-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    height: 54px;
    min-width: 0;
    padding: 5px 4px;
    border-radius: 12px;
    font-size: 11px;
  }
  .app-shell .vehicle-tab-summary svg:first-child { width: 19px; height: 19px; }
  .app-shell .vehicle-tab-summary > svg:last-child { display: none; }
  .app-shell .vehicle-tab-summary span { font-size: 11px; line-height: 1; font-weight: 1000; }

  /* Menu famille : panneau pleine largeur ancré sous la rangée d'onglets (groupe en static -> contexte = .vehicle-tabs). */
  .app-shell .vehicle-menu { top: calc(100% + 8px); left: 0; right: 0; width: auto; }

  /* Contenu. */
  .app-shell > .stage { padding: 18px 14px 40px; }
  .app-shell .showcase-panel-title { flex-wrap: wrap; row-gap: 10px; }
  .app-shell .showcase-panel-title .head-aside { margin-left: 0; }
  .app-shell .form-grid { grid-template-columns: 1fr; }
  .app-shell img { max-width: 100%; height: auto; }
}

/* ============================================================
   Module Formation (premium) — REMC
   ============================================================ */
/* Action premium : LE BOUTON est un losange doré (option à part des cartes carrées) */
.app-shell .showcase-action.is-premium {
  position: relative;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
/* Losange = même emprise que les cartes carrées (bbox ~99px dans un bouton de 102),
   icône et label « Formation » À L'INTÉRIEUR, centrés sur l'axe du losange. */
.app-shell .showcase-action.is-premium .diamond-bg {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 14px;
  background: linear-gradient(140deg, #fbe390 0%, #ecb83e 48%, #c0820a 100%);
  border: 1px solid rgba(166, 110, 6, 0.55);
  box-shadow: 0 8px 20px rgba(196, 133, 10, 0.42), inset 0 2px 3px rgba(255, 255, 255, 0.55);
}
.app-shell .showcase-action.is-premium svg,
.app-shell .showcase-action.is-premium img.premium-puzzle {
  position: absolute;
  top: 27px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: 0;
  transform: translateX(-50%);
  z-index: 1;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(122, 80, 4, 0.5));
}
/* La pièce de puzzle est légèrement penchée. */
.app-shell .showcase-action.is-premium img.premium-puzzle { transform: translateX(-50%) rotate(-12deg); }
.app-shell .showcase-action.is-premium > span:last-of-type {
  position: absolute;
  top: 55px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  z-index: 1;
  color: #fff;
  font-weight: 1000;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(122, 80, 4, 0.45);
}
.app-shell .showcase-action.is-premium:hover { border-color: transparent; background: transparent; box-shadow: none; }
.app-shell .showcase-action.is-premium:hover .diamond-bg { box-shadow: 0 10px 26px rgba(196, 133, 10, 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.55); }
.app-shell .showcase-action.is-premium.active { border-color: transparent; background: transparent; box-shadow: none; }
.app-shell .showcase-action.is-premium.active .diamond-bg {
  box-shadow: 0 0 0 3px rgba(236, 184, 62, 0.4), 0 10px 24px rgba(196, 133, 10, 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.55);
}

/* Catégories de formation (Auto-école active / CACES à venir) */
.formation-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 18px; }
.formation-cat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 2px solid #e3e8f0;
  border-radius: 16px;
  background: #fff;
}
.formation-cat i { display: flex; flex: 0 0 auto; color: #2563eb; }
.formation-cat h2 { margin: 0; font-size: 16.5px; letter-spacing: 0.02em; text-transform: uppercase; }
.formation-cat p { margin: 3px 0 0; color: var(--showcase-muted); font-size: 13px; font-weight: 650; line-height: 1.35; }
.formation-cat em {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 1000;
}
.formation-cat.is-active { border-color: #2563eb; background: #f4f8ff; }
.formation-cat.is-active em { background: #e0ebff; color: #2563eb; }
.formation-cat.is-soon { opacity: 0.66; }
.formation-cat.is-soon i { color: var(--showcase-muted); }
.formation-cat.is-soon em { background: #eef1f6; color: var(--showcase-muted); }
.premium-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, #f7c14b, #d98a00); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.03em; }
.premium-inline svg { width: 12px; height: 12px; }

/* Vitrine verrouillée */
.premium-locked { text-align: center; max-width: 640px; margin: 0 auto; padding: clamp(28px, 4vw, 52px); }
.premium-locked-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, #f7c14b, #d98a00); color: #fff; font-weight: 900; margin-bottom: 14px; }
.premium-locked h1 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 10px; }
.premium-locked p { color: var(--showcase-muted); font-size: 16px; line-height: 1.5; }
.premium-feature-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; text-align: left; }
.premium-feature-list li { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--showcase-line); border-radius: 12px; font-weight: 700; }
.premium-feature-list svg { color: var(--showcase-blue); flex: 0 0 auto; }
.premium-cta { font-weight: 900; color: var(--showcase-ink); }

/* En-tête + stats Formation */
.formation-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(18px, 2vw, 28px); }
.formation-stats { display: flex; gap: 12px; }
.formation-stats article { display: grid; place-items: center; min-width: 90px; padding: 12px 16px; border: 1px solid var(--showcase-line); border-radius: 14px; background: #fff; }
.formation-stats strong { font-size: 26px; font-weight: 1000; }
.formation-stats span { color: var(--showcase-muted); font-size: 13px; font-weight: 700; }

/* Cartes modules */
/* Tuiles formation : pleine largeur (non centrées), autant de colonnes que la largeur le permet. */
.formation-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 1.8vw, 26px); }
@media (max-width: 600px) {
  .formation-modules { grid-template-columns: 1fr; }
}
.formation-module-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 124px; padding: 20px 22px; border: 1px solid var(--showcase-line); border-radius: 16px; background: #fff; text-decoration: none; color: inherit; transition: transform 150ms ease, box-shadow 150ms ease; }
a.formation-module-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1); }
/* La tuile survolée/focus passe au premier plan : sinon sa bulle (dans son contexte d'empilement créé par le transform)
   reste DERRIÈRE la tuile suivante du DOM. */
.formation-module-card:hover, .formation-module-card:focus-visible, .formation-module-card:focus-within { z-index: 40; }
.formation-module-card.tone-green { border-left-color: #16813d; }
.formation-module-card.tone-orange { border-left-color: #f16500; }
.formation-module-card i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #eef4ff; color: #2787ff; }
.formation-module-card.tone-green i { background: #e9f6ee; color: #16813d; }
.formation-module-card.tone-orange i { background: #fff1e3; color: #f16500; }
.formation-module-card h2 { font-size: 18px; margin: 4px 0 0; }
.formation-module-soon { font-style: normal; font-weight: 900; font-size: 13px; color: var(--showcase-muted); }
.formation-module-card.is-soon { opacity: 0.6; }

/* Description en infobulle stylisée au survol (la tuile ne montre plus que l'icône + le titre). */
.formation-module-tip {
  position: absolute; left: 14px; right: 14px; top: calc(100% - 4px); z-index: 30;
  background: #11203a; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.45;
  padding: 10px 13px; border-radius: 10px; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28);
  opacity: 0; transform: translateY(-5px); pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}
.formation-module-card:hover .formation-module-tip,
.formation-module-card:focus-visible .formation-module-tip { opacity: 1; transform: translateY(0); }
.formation-module-card.is-soon em { color: var(--showcase-muted); }

/* Sélecteur d'élève */
.student-picker { margin-bottom: clamp(16px, 1.8vw, 24px); }
.student-picker-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.student-picker-select { flex: 1 1 320px; }
.student-create-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--showcase-line); }
.student-create-actions { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Fiche REMC */
.remc-sheet { display: flex; flex-direction: column; gap: 14px; }
.remc-sheet-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.remc-sheet-head strong { font-size: 18px; }
.remc-global b { color: var(--showcase-blue); }

.remc-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.remc-tab { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border: 0; border-radius: 12px 12px 0 0; cursor: pointer; text-align: left; transition: opacity 140ms ease; }
.remc-tab strong { font-size: 14px; font-weight: 1000; }
.remc-tab em { font-style: normal; font-weight: 800; opacity: 0.9; }
.remc-tab { align-items: center; }
.remc-tab strong { text-align: center; }
.remc-tab .gauge { width: 62px; margin-top: 4px; background: #fff; border-radius: 12px; padding: 6px 8px 3px; box-shadow: 0 3px 10px rgba(8,28,60,0.18); }
.remc-tab.remc-blue { background: #0e9fd8; color: #fff; }
.remc-tab.remc-red { background: #f4564e; color: #fff; }
.remc-tab.remc-green { background: #1cb45c; color: #fff; }
.remc-tab.remc-yellow { background: #ffbe1f; color: #4a3a08; }
.remc-tab:not(.active) { opacity: 0.55; }
.remc-tab.active { opacity: 1; }

.remc-panel { border: 2px solid #ddd; border-radius: 0 16px 16px 16px; padding: clamp(16px, 2vw, 26px); background: #fff; }
.remc-panel.remc-blue { border-color: #0e9fd8; }
.remc-panel.remc-red { border-color: #f4564e; }
.remc-panel.remc-green { border-color: #1cb45c; }
.remc-panel.remc-yellow { border-color: #ffbe1f; }
.remc-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.remc-panel-head h2 { font-size: 17px; margin: 0; }
.remc-mark-all { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid #a8dab9; border-radius: 999px; background: #f1faf4; color: #16813d; font-size: 13px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.remc-mark-all:hover { background: #e3f4ea; }

.remc-skill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.remc-skill-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 12px; border-radius: 12px; }
.remc-skill-row:nth-child(odd) { background: #f7f9fc; }
.remc-skill-label { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.35; color: #11203a; }
.remc-skill-label span { color: var(--showcase-muted); font-weight: 900; margin-right: 4px; }

/* Boutons de niveau : segmented, gros, lisibles. Actif = couleur pleine. */
.remc-levels { display: inline-flex; flex: 0 0 auto; gap: 0; border: 1px solid var(--showcase-line); border-radius: 12px; overflow: hidden; }
.remc-level { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-width: 104px; min-height: 46px; padding: 0 16px; border: 0; border-left: 2px solid #fff; font-size: 14px; font-weight: 900; cursor: pointer; white-space: nowrap; transition: filter 120ms ease; }
.remc-level:first-child { border-left: 0; }
.remc-level:hover { filter: brightness(0.96); }
.remc-level.lvl-aborde { background: #e4efff; color: #1c6fe8; }
.remc-level.lvl-traite { background: #fff3da; color: #dc8a04; }
.remc-level.lvl-assimile { background: #e3f8eb; color: #119447; }
.remc-level.active.lvl-aborde { background: #1879ff; color: #fff; }
.remc-level.active.lvl-traite { background: #ff9500; color: #fff; }
.remc-level.active.lvl-assimile { background: #0bbb4c; color: #fff; }

.remc-footer { display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 2vw, 22px); border: 1px solid var(--showcase-line); border-radius: 16px; background: #fff; }
.remc-schemas { display: flex; align-items: center; gap: 10px; font-weight: 800; cursor: pointer; }
.app-shell .remc-schemas input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: var(--showcase-blue, #2563eb); }
.remc-progress-bar { position: relative; height: 16px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.remc-progress-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2787ff, #16813d); border-radius: 999px; transition: width 200ms ease; }
.remc-progress-bar span { position: absolute; right: 10px; top: 0; line-height: 16px; font-size: 11px; font-weight: 900; color: #11203a; }
.remc-validated-note { color: #16813d; font-weight: 800; margin: 0; }
.remc-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.remc-big-btn { min-height: 50px; padding: 0 24px; font-size: 15px; border-radius: 14px; }
.remc-hint { color: var(--showcase-muted); font-size: 13px; margin: 0; }
.remc-schemas span small { color: var(--showcase-muted); font-weight: 700; }

/* ─── Questions de vérification (permis B) ─── */
.verif-panel { display: flex; flex-direction: column; gap: 12px; }
.verif-progress { display: flex; flex-direction: column; gap: 5px; }
.verif-progress small { color: var(--showcase-muted); font-weight: 700; font-size: 12px; }
.verif-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.verif-filters { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.verif-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--showcase-line); border-radius: 999px; background: #fff; color: #324; font-size: 12.5px; font-weight: 800; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.verif-chip b { font-weight: 900; color: var(--showcase-muted); }
.verif-chip:hover { border-color: var(--showcase-blue, #2563eb); }
.verif-chip.is-on { background: var(--showcase-blue, #2563eb); border-color: var(--showcase-blue, #2563eb); color: #fff; }
.verif-chip.is-on b { color: rgba(255, 255, 255, 0.85); }
.app-shell .verif-search { flex: 1 1 200px; min-width: 160px; min-height: 0; height: 38px; padding: 0 12px; border: 1px solid var(--showcase-line); border-radius: 10px; font-size: 13px; }
.verif-err { margin: 0; color: #c0392b; font-weight: 800; font-size: 13px; }

.verif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 540px; overflow-y: auto; }
.verif-empty { color: var(--showcase-muted); font-weight: 700; padding: 14px; text-align: center; }
.verif-item { border: 1px solid var(--showcase-line); border-radius: 12px; background: #fff; overflow: hidden; border-left-width: 4px; }
.verif-item.st-non_vue { border-left-color: #d6dbe4; }
.verif-item.st-a_revoir { border-left-color: #ff9500; }
.verif-item.st-acquise { border-left-color: #0bbb4c; }
.verif-row { display: flex; align-items: stretch; gap: 8px; }
.verif-row-main { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; background: none; cursor: pointer; text-align: left; min-width: 0; }
.verif-num { flex: 0 0 auto; min-width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border-radius: 8px; background: #eef2f8; color: #11203a; font-weight: 900; font-size: 13px; }
.verif-type { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.verif-type.t-vi { background: #e4efff; color: #1c6fe8; }
.verif-type.t-ve { background: #e3f8eb; color: #119447; }
.verif-q { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: #1b2a44; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verif-chev { flex: 0 0 auto; color: var(--showcase-muted); transition: transform 160ms ease; }
.verif-item.is-open .verif-chev { transform: rotate(180deg); }
.verif-states { display: inline-flex; align-items: center; gap: 0; border-left: 1px solid var(--showcase-line); }
.verif-st { width: 46px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: #fff; cursor: pointer; color: #98a3b5; transition: background 120ms ease, color 120ms ease; }
.verif-st:hover:not(:disabled) { background: #f3f6fb; }
.verif-st:disabled { opacity: 0.5; cursor: default; }
.verif-st.sst-a_revoir.active { background: #ff9500; color: #fff; }
.verif-st.sst-acquise.active { background: #0bbb4c; color: #fff; }
.verif-badge { align-self: center; margin-right: 12px; flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 900; }
.verif-badge.sst-non_vue { background: #eef1f6; color: #6b7686; }
.verif-badge.sst-a_revoir { background: #fff3da; color: #dc8a04; }
.verif-badge.sst-acquise { background: #e3f8eb; color: #119447; }

.verif-detail { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 14px; border-top: 1px dashed var(--showcase-line); background: #fafbfd; }
.verif-block { display: flex; flex-direction: column; gap: 3px; }
.verif-block-title { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; color: var(--showcase-blue, #2563eb); }
.verif-block-q { margin: 0; font-weight: 800; font-size: 14px; color: #11203a; line-height: 1.4; }
.verif-block-a { margin: 0; font-size: 13.5px; color: #33415c; line-height: 1.45; }
.verif-block-a.is-action { color: var(--showcase-muted); font-style: italic; }

/* Section repliable hôte (Mes cours) */
.verif-section { border: 1px solid var(--showcase-line); border-radius: 14px; background: #fff; margin-top: 14px; overflow: hidden; }
.verif-section-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 0; background: #f7f9fc; cursor: pointer; text-align: left; font-weight: 900; color: #11203a; font-size: 14.5px; }
.verif-section-head .verif-section-count { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--showcase-muted); }
.verif-section-head .verif-chev { transition: transform 160ms ease; }
.verif-section.is-open .verif-section-head .verif-chev { transform: rotate(180deg); }
.verif-section-body { padding: 14px 16px 16px; }
.verif-intro { margin: 0 0 10px; font-size: 12.5px; color: var(--showcase-muted); font-weight: 600; line-height: 1.4; }

@media (max-width: 560px) {
  .verif-toolbar { flex-direction: column; align-items: stretch; }
  .verif-q { white-space: normal; }
  .verif-st { width: 40px; }
}

@media (max-width: 720px) {
  .remc-skill-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .remc-levels { width: 100%; }
  .remc-level { flex: 1 1 0; min-width: 0; padding: 0 6px; }
  .remc-tab strong { font-size: 12px; }
  .remc-big-btn { width: 100%; justify-content: center; }
  .formation-stats { width: 100%; }
  .formation-stats article { flex: 1 1 0; min-width: 0; }
}

/* ---- Module 2 : Validation des compétences ---- */
.picker-title { display: block; margin-bottom: 12px; font-size: 15px; font-weight: 1000; }
.student-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.student-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--showcase-line); border-radius: 999px;
  background: #fff; color: #11203a; font-weight: 800; font-size: 14px; text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.student-chip:hover { transform: translateY(-1px); border-color: #b7d8ff; }
.student-chip.active { background: var(--showcase-blue); border-color: var(--showcase-blue); color: #fff; }
.student-chip.is-unfavorable { border-color: #f3b6b6; }
.student-chip em { font-style: normal; font-size: 11px; font-weight: 900; color: #e1323d; }
.student-chip.active em { color: #ffe1e4; }

.validation-form { margin-top: clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 14px; }
.validation-form-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.validation-form-head strong { font-size: 18px; }
.validation-pass-hint { color: var(--showcase-muted); font-size: 13px; font-weight: 700; }
.validation-grid { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.validation-note { flex: 0 0 auto; }
.note-input { display: flex; align-items: center; gap: 8px; }
.note-input input { width: 90px; text-align: center; font-size: 22px; font-weight: 1000; }
.note-input span { font-weight: 900; color: var(--showcase-muted); }
.validation-faute { display: flex; align-items: center; gap: 10px; font-weight: 800; cursor: pointer; }
.app-shell .validation-faute input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: #e1323d; }
.validation-comment { display: grid; gap: 6px; font-weight: 800; }
.validation-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.showcase-btn.is-favorable { background: #16813d; border-color: #16813d; color: #fff; }
.showcase-btn.is-favorable:disabled { opacity: 0.45; }
.showcase-btn.is-unfavorable { background: #e1323d; border-color: #e1323d; color: #fff; }
.showcase-btn.is-unfavorable:disabled { opacity: 0.45; }

/* Banettes examen (sortie administratif) */
.exam-banettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 1.8vw, 24px); margin-top: clamp(20px, 2.4vw, 34px); }
.banette { display: flex; flex-direction: column; gap: 10px; }
.banette-head { display: flex; align-items: center; gap: 10px; }
.banette-head h2 { font-size: 16px; margin: 0; flex: 1; }
.banette-head span { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; font-weight: 1000; font-size: 14px; }
.banette-present .banette-head svg, .banette-present .banette-head span { color: #16813d; }
.banette-present .banette-head span { background: #e9f6ee; }
.banette-unfavorable .banette-head svg, .banette-unfavorable .banette-head span { color: #e1323d; }
.banette-unfavorable .banette-head span { background: #fdecec; }
.banette-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.banette-list li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #eef1f6; font-weight: 700; }
.banette-list li:first-child { border-top: 0; }
.banette-list li small { color: var(--showcase-muted); font-weight: 700; }
.banette-list li .small-link { margin-left: auto; }

/* Boutons résultat d'examen (Reçu / Échoué) */
.exam-result-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.exam-btn { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--showcase-line); background: #fff; font-size: 12px; font-weight: 900; cursor: pointer; }
.exam-btn.is-pass { color: #16813d; border-color: #a8dab9; }
.exam-btn.is-pass:hover { background: #e9f6ee; }
.exam-btn.is-fail { color: #e1323d; border-color: #f3b6b6; }
.exam-btn.is-fail:hover { background: #fdecec; }
.exam-btn:disabled { opacity: 0.5; }
.exam-result-actions { flex-wrap: wrap; align-items: center; }
.app-shell .exam-result-actions .exam-date { width: auto; min-height: 30px; height: 30px; padding: 3px 8px; border: 1px solid var(--showcase-line); border-radius: 8px; font-size: 12px; font-weight: 700; background: #fff; color: #33415c; }

/* ---- Module 3 : Évaluation dynamique ---- */
.dynamic-form { margin-top: clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 14px; }
.dynamic-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.dynamic-theme { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--showcase-line); border-radius: 12px; font-weight: 800; cursor: pointer; }
.dynamic-theme.is-done { border-color: #a8dab9; background: #f1faf4; }
.app-shell .dynamic-theme input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: #16813d; }
.dynamic-grid { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.dynamic-grid > label { display: grid; gap: 6px; font-weight: 800; }
.dynamic-grid input { min-width: 120px; }

/* ---- Fiche de vérification REMC (OUI/NON) — module Validation ---- */
.verif-fiche { margin-top: clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 14px; }
.verif-fiche-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.verif-fiche-head h2 { font-size: 18px; margin: 0; }
.verif-count { font-weight: 900; color: var(--showcase-blue); background: #eef4ff; padding: 4px 12px; border-radius: 999px; font-size: 13px; }

.verif-meta { display: grid; grid-template-columns: auto repeat(4, minmax(120px, 1fr)); gap: 12px; align-items: end; padding: 14px; border: 1px solid var(--showcase-line); border-radius: 12px; background: #f8fafc; }
.verif-meta label { display: grid; gap: 5px; font-weight: 800; font-size: 13px; color: var(--showcase-muted); }
.verif-transmission { display: inline-flex; border: 1px solid var(--showcase-line); border-radius: 10px; overflow: hidden; align-self: end; }
.verif-bv { padding: 11px 16px; border: 0; border-left: 1px solid var(--showcase-line); background: #fff; font-weight: 900; cursor: pointer; color: var(--showcase-muted); }
.verif-bv:first-child { border-left: 0; }
.verif-bv.active { background: var(--showcase-blue); color: #fff; }

.verif-section > summary { display: flex; align-items: center; gap: 10px; }
.verif-section-title { font-weight: 1000; flex: 1; }
.verif-section-count { font-weight: 900; color: var(--showcase-muted); }
.verif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.verif-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px; border-radius: 10px; }
.verif-row:nth-child(odd) { background: #f7f9fc; }
.verif-label { margin: 0; font-weight: 600; font-size: 14px; line-height: 1.35; color: #11203a; }
.verif-label span { color: var(--showcase-muted); font-weight: 900; margin-right: 4px; }
.verif-controls { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.verif-yesno { display: inline-flex; border: 1px solid var(--showcase-line); border-radius: 10px; overflow: hidden; }
.verif-yn { min-width: 54px; min-height: 42px; border: 0; border-left: 1px solid var(--showcase-line); background: #fff; font-weight: 1000; font-size: 13px; cursor: pointer; color: var(--showcase-muted); }
.verif-yn:first-child { border-left: 0; }
.verif-yn.yn-oui.active { background: #16813d; color: #fff; }
.verif-yn.yn-non.active { background: #e1323d; color: #fff; }
.verif-note { color: var(--showcase-muted); font-size: 13px; font-style: italic; margin: 0; }
.verif-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

@media (max-width: 720px) {
  .verif-meta { grid-template-columns: 1fr 1fr; }
  .verif-transmission { grid-column: 1 / -1; justify-self: start; }
  .verif-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .verif-controls { justify-content: space-between; }
}

/* La VerificationPanel (.verif-panel, liste des 100 fiches) partage les noms .verif-list/.verif-row/.verif-item
   avec l'ancienne fiche VerificationFiche : on re-scope ses styles (spécificité + non-rétrécissable). Sans ça,
   .verif-item (flex item à overflow:hidden) se laisse écraser à ~3px par le bloc legacy → fiches invisibles. */
.verif-panel .verif-list { gap: 6px; max-height: 560px; overflow-y: auto; }
.verif-panel .verif-item { flex: 0 0 auto; }
.verif-panel .verif-row { padding: 0; background: none; justify-content: flex-start; border-radius: 0; }
.verif-panel .verif-row:nth-child(odd) { background: none; }

/* ---- Page Réglages : retouches (identité, module premium, hints, unités) ---- */
.settings-card > strong { display: flex; align-items: center; gap: 8px; }
.settings-hint { margin: 6px 0 14px; color: var(--showcase-muted); font-size: 13px; font-weight: 600; line-height: 1.4; }
.simple-form-grid .span-2 { grid-column: 1 / -1; }

.settings-premium-card { border: 1px solid #f0c462; background: linear-gradient(180deg, #fffaef 0%, #ffffff 60%); }
.settings-premium-card > strong svg { color: #c8870b; }
.module-badge { margin-left: auto; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 1000; letter-spacing: 0.02em; }
.module-badge.on { background: #e9f6ee; color: #16813d; }
.module-badge.off { background: #eef1f6; color: var(--showcase-muted); }
.module-toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; cursor: pointer; }
.app-shell .module-toggle input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: var(--showcase-blue, #2563eb); }

/* ---- Menu compte (bouton rond + panneau) ---- */
.app-shell .showcase-topbar-inner { grid-template-columns: auto auto 1fr auto; }
/* Logo barre + nom de l'auto-école dessous. */
.app-shell .showcase-topbar .showcase-brand { height: auto; min-width: 0; margin-top: -8px; }
.app-shell .showcase-topbar .brand-logo { height: 104px; width: auto; }
.account-menu { position: relative; align-self: start; margin-top: 24px; z-index: 1000; }
.account-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 2px solid var(--role-border, rgba(23, 23, 23, 0.18));
  background: var(--role-soft, #eef1f6);
  color: var(--role-color, #171717);
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.account-trigger:hover { filter: brightness(0.97); }
.account-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 240px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #e4e8f0;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}
.account-panel-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid #eef1f6;
  margin-bottom: 6px;
}
.account-panel-name { font-weight: 1000; font-size: 14.5px; }
.account-panel-role { font-size: 12px; font-weight: 800; color: var(--role-color, var(--showcase-muted)); }
.account-panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.account-panel-item:hover { background: #f3f6fb; }
.account-panel-item.is-danger { color: #c2402f; }
.account-panel-item.is-danger:hover { background: #fdeeec; }

/* ════════ Bandeau staff v2 : nav en pilules (fini les tuiles véhicules + la rangée d'icônes) ════════ */
.nav2 { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; align-self: center; }
.nav2-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: #5a6678; padding: 8px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; border: 0; background: none; cursor: pointer; list-style: none; transition: background 120ms ease, color 120ms ease; }
.nav2-pill:hover { background: #f1f4f9; color: #1d3a6b; }
.nav2-pill.is-on { background: #e6f1fb; color: #0c447c; }
.nav2-pill::-webkit-details-marker { display: none; }
/* « Extension » (module premium) : surbrillance dorée permanente, plus marquée quand active. */
.nav2-pill.nav2-gold { color: #7a5e0f; background: #fbf2d6; box-shadow: 0 0 0 1px #ecd591 inset; }
.nav2-pill.nav2-gold svg { color: #9a7714; }
.nav2-pill.nav2-gold:hover { background: #f7e8c8; color: #6f560e; }
.nav2-pill.nav2-gold.is-on { background: linear-gradient(180deg, #fdeec0, #f6df97); color: #6f560e; box-shadow: 0 0 0 1px #e3bd55 inset, 0 3px 12px rgba(201, 154, 35, 0.32); }
.nav2-badge { font-size: 11px; font-weight: 800; color: #a32d2d; background: #fceceb; border-radius: 999px; padding: 1px 7px; }
.nav2-drop { position: relative; }
.nav2-drop > summary { list-style: none; }
.nav2-drop > summary::-webkit-details-marker { display: none; }
.nav2-drop[open] > summary { background: #e6f1fb; color: #0c447c; }
.nav2-panel { position: absolute; top: calc(100% + 9px); left: 0; z-index: 1000; background: #fff; border: 1px solid #e4e8f0; border-radius: 16px; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16); padding: 12px; }
.nav2-menu { display: flex; flex-direction: column; gap: 2px; min-width: 210px; }
.nav2-link { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; color: #1d3a6b; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.nav2-link:hover { background: #f3f6fb; }
.nav2-link svg { flex: 0 0 auto; width: 18px; height: 18px; color: #5a6678; }

/* Menu Véhicules : catégorie en sélecteur (1×) + les 7 pages en tuiles colorées (1×), fini la grille répétée 4 fois. */
.veh-menu { min-width: 364px; padding: 13px; }
.veh-cats { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.veh-cat { font-size: 12.5px; font-weight: 700; color: #6b7686; background: #fff; border: 1px solid #e0e6f0; border-radius: 999px; padding: 5px 13px; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, color 120ms ease; }
.veh-cat:hover { border-color: #b5d4f4; color: #1d3a6b; }
.veh-cat.is-on { background: #e6f1fb; border-color: #b5d4f4; color: #0c447c; }
.veh-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 420px) {
  .veh-tiles { grid-template-columns: 1fr; }
}
.veh-tile { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 12px; border: 1px solid #eef1f6; font-size: 13.5px; font-weight: 600; color: #1f2937; text-decoration: none; transition: border-color 120ms ease, background 120ms ease; }
.veh-tile:hover { background: #f7f9fc; border-color: #d8e2f3; }
.veh-tile.is-wide { grid-column: 1 / -1; }
.veh-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.veh-ic svg { width: 18px; height: 18px; }
.veh-ic.v-blue { background: #e6f1fb; color: #185fa5; }
.veh-ic.v-green { background: #eaf3de; color: #3b6d11; }
.veh-ic.v-teal { background: #e1f5ee; color: #0f6e56; }
.veh-ic.v-gray { background: #f1efe8; color: #5f5e5a; }
.veh-ic.v-amber { background: #faeeda; color: #854f0b; }
.veh-ic.v-coral { background: #faece7; color: #993c1d; }
.veh-ic.v-purple { background: #eeedfe; color: #534ab7; }
/* Bandeau plus court désormais : on recentre l'avatar (l'ancien margin-top servait à aligner sur les tuiles hautes). */
.app-shell .account-menu { margin-top: 0; align-self: center; }

/* Bandeau v2 FIN : hauteur auto (fini les 184px), marque horizontale compacte, pilules plus grandes, auto-masquage. */
.app-shell .showcase-topbar { height: auto; min-height: 0; transition: transform 0.28s ease; will-change: transform; }
.app-shell .showcase-topbar.is-hidden { transform: translateY(-100%); }
@media (max-width: 1264px) { .app-shell .showcase-topbar.is-hidden { transform: none; } }
.app-shell .showcase-topbar-inner { display: flex; align-items: center; gap: 16px; height: auto; padding: 11px 26px; }
.app-shell .showcase-topbar .showcase-brand { flex-direction: row; align-items: center; gap: 10px; min-width: 0; margin: 0; flex: 0 0 auto; }
.app-shell .showcase-topbar .brand-logo { height: 46px; width: auto; }
.app-shell .showcase-topbar .brand-name { font-size: 19px; margin: 0; line-height: 1; }
.nav2-pill { font-size: 15px; }
@media (max-width: 760px) {
  .nav2 { gap: 4px; position: relative; }
  .nav2-pill { font-size: 13px; padding: 7px 11px; }
  .veh-menu { min-width: 0; }
  .nav2-drop { position: static; }
  .nav2-panel { left: 0; right: 0; width: auto; max-width: none; max-height: 70vh; overflow: auto; }
}

/* Palier tablette : la nouvelle nav2 est juste un peu à l'étroit à ces largeurs. */
@media (min-width: 761px) and (max-width: 1100px) {
  .nav2 { gap: 4px; }
  .nav2-pill { font-size: 13.5px; padding: 7px 11px; }
}

/* Focus clavier visible sur les éléments interactifs sans focus natif (boutons custom, tuiles, lignes). */
.nav2-pill:focus-visible,
.nav2-drop > summary:focus-visible,
.nav2-link:focus-visible,
.veh-cat:focus-visible,
.veh-tile:focus-visible,
.sk-row:focus-visible,
.verif-section-head:focus-visible,
.sd-debrief button:focus-visible,
.dr-item:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Cibles tactiles : taille minimale confortable au doigt. */
@media (pointer: coarse) {
  .veh-cat, .nav2-link { min-height: 40px; }
  .veh-cat { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- Page Mon compte ---- */
.account-page { display: flex; flex-direction: column; gap: 18px; max-width: 620px; margin: 0 auto; }
.account-forced-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #f0c462;
  background: linear-gradient(180deg, #fff7e8 0%, #ffffff 70%);
}
.account-forced-banner i { display: flex; color: #c8870b; }
.account-forced-banner p { margin: 2px 0 0; color: var(--showcase-muted); font-weight: 600; font-size: 13.5px; }
.account-identity { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.account-identity .account-role-badge { margin-left: auto; align-self: center; }
.account-sep { border: 0; border-top: 1px solid #edf0f5; margin: 18px 0 16px; }
.account-form-title { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; color: var(--showcase-blue, #2563eb); }
.account-form-title h2 { margin: 0; font-size: 17px; }
.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid var(--role-border, rgba(23, 23, 23, 0.18));
  background: var(--role-soft, #eef1f6);
  color: var(--role-color, #171717);
  font-size: 19px;
  font-weight: 1000;
}
.account-identity-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.account-identity-info > strong { font-size: 17px; }
.account-role-badge {
  align-self: flex-start;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--role-soft, #eef1f6);
  color: var(--role-color, #171717);
  font-size: 12px;
  font-weight: 1000;
}
.account-identity-line { font-size: 13.5px; font-weight: 700; color: var(--showcase-muted); overflow-wrap: anywhere; }
.account-password-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.account-password-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 800; }
.account-password-form .settings-hint { margin: 0; }

/* ---- Connexion : se souvenir de moi ---- */
.login-form label.login-remember { display: flex; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 700; }
.login-form label.login-remember input { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; border-radius: 6px; box-shadow: none; background: #fff; transform: none; accent-color: var(--showcase-blue, #2563eb); }
.login-brand { display: flex; justify-content: center; width: 100%; }

@media (max-width: 720px) {
  /* Première rangée : logo à gauche, bouton compte à droite ; onglets et actions passent dessous. */
  .app-shell .showcase-brand { order: 0; }
  .account-menu { order: 1; margin-left: auto; margin-top: 0; align-self: center; }
  .app-shell .vehicle-tabs { order: 2; }
  .app-shell .showcase-actions { order: 3; }
  .account-trigger { width: 42px; height: 42px; font-size: 14px; }
  .app-shell .showcase-action.is-premium .diamond-bg { top: 6px; width: 32px; height: 32px; border-radius: 8px; }
  .app-shell .showcase-action.is-premium svg,
.app-shell .showcase-action.is-premium img.premium-puzzle { top: 14px; width: 16px; height: 16px; }
  .app-shell .showcase-action.is-premium > span:last-of-type { top: auto; bottom: 5px; font-size: 10px; color: #a8740b; text-shadow: none; }
  .formation-categories { grid-template-columns: 1fr; }
  /* Les regles desktop du logo (fin de fichier) ont la meme specificite : re-override ici, ce bloc vient en dernier. */
  .app-shell .showcase-topbar .showcase-brand { margin-top: 0; }
  .app-shell .showcase-topbar .brand-logo { height: 54px; }
  .app-shell .showcase-topbar .brand-name { font-size: 17px; margin-top: 0; }
}

/* ---- Schémas pédagogiques : bouton ligne REMC, popup, canvas, bibliothèque ---- */
.remc-schema-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 46px;
  min-width: 52px;
  padding: 0 12px;
  border: 1.5px dashed #c9d2e0;
  border-radius: 12px;
  background: #fff;
  color: #5b6575;
  font-weight: 900;
  cursor: pointer;
}
.remc-schema-btn:hover { border-color: #2563eb; color: #2563eb; }
.remc-schema-btn.has-schemas { border-style: solid; border-color: #bfd3f7; background: #eef4ff; color: #2563eb; }
.remc-schema-btn b { font-size: 13px; }

.formation-module-card.tone-violet { border-left-color: #7c3aed; }
.formation-module-card.tone-violet i { color: #7c3aed; }
.formation-module-card.tone-slate { border-left-color: #475569; }
.formation-module-card.tone-slate i { background: #eef2f6; color: #475569; }

/* Gestion des élèves (archivage / suppression) */
.page-intro { color: var(--showcase-muted); font-size: 14px; line-height: 1.5; margin: -4px 0 18px; max-width: 760px; }
.student-mgr { display: flex; flex-direction: column; gap: 16px; }
.student-mgr-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--showcase-line); border-radius: 12px; background: #fff; color: var(--showcase-muted); }
.student-mgr-search input { border: 0; outline: 0; flex: 1; font-size: 14px; background: transparent; color: inherit; }
.student-mgr-error { color: #c11e35; font-size: 13px; font-weight: 700; margin: 0; }
.student-mgr-card { padding: 18px 20px; }
.student-mgr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.student-mgr-head h2 { font-size: 16px; margin: 0; }
.student-mgr-head span { font-size: 13px; font-weight: 800; color: var(--showcase-muted); background: #eef2f6; border-radius: 999px; padding: 2px 10px; }
.student-mgr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.student-mgr-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--showcase-line); }
.student-mgr-row:first-child { border-top: 0; }
.student-mgr-row.is-archived { opacity: 0.82; }
.student-mgr-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.student-mgr-main strong { font-size: 14.5px; }
.student-mgr-main span { font-size: 12.5px; color: var(--showcase-muted); }
.student-mgr-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.smgr-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--showcase-line); background: #fff; color: #111; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 120ms ease, border-color 120ms ease; }
.smgr-btn:hover { background: #f4f6fa; }
.smgr-btn.is-danger { color: #c11e35; border-color: rgba(193, 30, 53, 0.25); }
.smgr-btn.is-danger:hover { background: #c11e35; border-color: #c11e35; color: #fff; }
.smgr-btn:disabled { opacity: 0.5; cursor: default; }
.smgr-btn.is-primary { background: #2787ff; border-color: #2787ff; color: #fff; }
.smgr-btn.is-primary:hover { background: #1f6fe0; border-color: #1f6fe0; }
.smgr-btn.is-access { color: #2787ff; border-color: rgba(39, 135, 255, 0.3); background: #eef5ff; }
.smgr-btn.is-access:hover { background: #e0edff; border-color: rgba(39, 135, 255, 0.5); }
.smgr-acct-badge { display: inline-block; vertical-align: middle; margin-left: 7px; font-size: 11px; font-weight: 700; color: #0f7a45; background: #e7f6ee; border: 1px solid #bce6cd; border-radius: 999px; padding: 1px 9px; }
.smgr-phone { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 3px; font-size: 12.5px; font-weight: 800; color: #2563eb; text-decoration: none; }
.smgr-phone:hover { text-decoration: underline; }

/* Popup d'accès élève (sous la ligne) */
.smgr-access-pop { flex: 1 1 100%; width: 100%; margin-top: 4px; padding: 13px 15px; border: 1px solid rgba(39, 135, 255, 0.28); background: #f5f9ff; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.smgr-access-warn { margin: 0; font-size: 12px; color: #5d6473; }
.smgr-access-creds { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: #41485a; }
.smgr-access-creds code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13.5px; font-weight: 700; background: #fff; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--showcase-line); color: #14171f; margin-left: 6px; }
.smgr-access-send { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-shell .smgr-access-send input { flex: 1 1 200px; min-width: 160px; min-height: 38px; height: 38px; width: auto; padding: 6px 11px; border: 1px solid var(--showcase-line); border-radius: 10px; font-size: 13px; background: #fff; }
.smgr-access-close { width: 38px; padding: 0; justify-content: center; }

@media (max-width: 640px) {
  .smgr-access-send input { flex-basis: 100%; }
}

/* Barre d'outils (recherche + Nouvel élève) */
.student-mgr-toolbar { display: flex; gap: 12px; align-items: center; }
.student-mgr-toolbar .student-mgr-search { flex: 1; }
.student-mgr-toolbar .smgr-btn.is-primary { flex-shrink: 0; min-height: 42px; padding: 0 16px; }

/* Modale créer / modifier un élève */
.smgr-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: grid; place-items: center; padding: 20px; z-index: 1000; }
.smgr-modal { width: min(520px, 100%); background: #fff; border-radius: 18px; padding: 20px 22px 22px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25); }
.smgr-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.smgr-modal-head h3 { margin: 0; font-size: 18px; }
.smgr-modal-x { border: 0; background: #f1f3f7; border-radius: 10px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; color: #475569; }
.smgr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.smgr-form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: #475569; }
.smgr-form-grid input, .smgr-form-grid select { padding: 9px 11px; border: 1px solid var(--showcase-line); border-radius: 10px; font-size: 14px; font-weight: 500; color: #111; background: #fff; }
.smgr-form-wide { grid-column: 1 / -1; }
.smgr-form-toggle { flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 10px; cursor: pointer; padding: 4px 0; }
.smgr-form-toggle input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; padding: 0; margin: 0; border-radius: 5px; accent-color: #2563eb; flex: 0 0 auto; }
.smgr-form-toggle span { font-weight: 700; color: #334155; font-size: 13px; line-height: 1.35; }
.smgr-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.smgr-modal-actions .smgr-btn { min-height: 42px; padding: 0 18px; }

/* Encart anti-doublon dans le formulaire élève */
.smgr-dup { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid; }
.smgr-dup.is-warn { background: #fff7ea; border-color: #f3c87a; }
.smgr-dup.is-block { background: #fdecec; border-color: #f0a9a4; }
.smgr-dup-title { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-weight: 900; font-size: 13.5px; }
.smgr-dup.is-warn .smgr-dup-title { color: #b9710a; }
.smgr-dup.is-block .smgr-dup-title { color: #c0392b; }
.smgr-dup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.smgr-dup-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255, 255, 255, 0.6); border-radius: 9px; padding: 7px 10px; }
.smgr-dup-who { display: flex; flex-direction: column; min-width: 0; }
.smgr-dup-who strong { font-size: 13.5px; color: #1b2a44; }
.smgr-dup-who em { font-style: normal; font-size: 11.5px; color: var(--showcase-muted); }
.smgr-btn.is-mini { min-height: 30px; padding: 0 10px; font-size: 12px; gap: 5px; flex: 0 0 auto; }
.smgr-dup-hint { margin: 9px 0 0; font-size: 12px; color: #5a6678; line-height: 1.4; }

@media (max-width: 620px) {
  .student-mgr-row { flex-direction: column; align-items: stretch; }
  .student-mgr-actions { justify-content: flex-start; }
  .student-mgr-toolbar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 520px) { .smgr-form-grid { grid-template-columns: 1fr; } }

/* ════════ Mode révision élève (quiz / flashcards / examen) ════════ */
.rev-app { max-width: 760px; margin: 0 auto; padding: 18px 16px 64px; min-height: 100dvh; display: flex; flex-direction: column; gap: 18px; }
.rev-top { display: flex; align-items: center; justify-content: space-between; }
.rev-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font-weight: 800; font-size: 14px; color: #1d3a6b; text-decoration: none; padding: 6px 4px; }
.rev-top-stats { display: inline-flex; gap: 8px; }
.rev-streak, .rev-points { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; font-size: 13px; padding: 6px 11px; border-radius: 999px; }
.rev-streak { background: linear-gradient(135deg, #ffb020, #ff6a3d); color: #fff; }
.rev-points { background: #eef2fb; color: #2a3b5e; }

.rev-hero { text-align: center; }
.rev-hero h1 { margin: 0; font-size: clamp(24px, 6vw, 32px); font-weight: 1000; color: #11203a; }
.rev-hero > p { margin: 4px 0 16px; color: #5a6678; font-weight: 600; }
.rev-stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rev-stat { background: #fff; border: 1px solid var(--showcase-line, #e6ebf3); border-radius: 14px; padding: 14px 8px; display: flex; flex-direction: column; gap: 2px; }
.rev-stat strong { font-size: 24px; font-weight: 1000; color: #1879ff; }
.rev-stat span { font-size: 11.5px; color: #6b7686; font-weight: 700; }

.rev-modes { display: grid; gap: 12px; }
.rev-mode-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; padding: 18px 18px; border: 0; border-radius: 18px; cursor: pointer; color: #fff; box-shadow: 0 10px 26px rgba(20, 40, 80, 0.16); transition: transform 140ms ease; }
.rev-mode-card:hover { transform: translateY(-2px); }
.rev-mode-card svg { grid-row: 1 / 3; }
.rev-mode-card strong { font-size: 18px; font-weight: 900; }
.rev-mode-card span { font-size: 12.5px; opacity: 0.92; font-weight: 600; }
.rev-mode-card.c-flash { background: linear-gradient(135deg, #2b7bff, #1452d6); }
.rev-mode-card.c-quiz { background: linear-gradient(135deg, #18b56a, #0f8b54); }
.rev-mode-card.c-exam { background: linear-gradient(135deg, #8a5cff, #6a34e0); }
.rev-ai-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #7a6510; background: #fff7e6; border: 1px solid #f3d894; border-radius: 12px; padding: 10px 12px; font-weight: 600; }

.rev-mode { display: flex; flex-direction: column; gap: 16px; perspective: 1400px; }
.rev-mode-top { display: flex; align-items: center; gap: 12px; }
.rev-progress-line { flex: 1; height: 8px; border-radius: 999px; background: #e6ecf5; overflow: hidden; }
.rev-progress-line i { display: block; height: 100%; background: linear-gradient(90deg, #2787ff, #16813d); transition: width 220ms ease; }
.rev-count { font-weight: 900; font-size: 13px; color: #44506a; min-width: 44px; text-align: right; }

/* Config / decks */
.rev-config-title { margin: 4px 0 2px; font-size: 22px; font-weight: 1000; color: #11203a; }
.rev-config-sub { margin: 0 0 6px; color: #6b7686; font-weight: 600; font-size: 13px; }
.rev-field { display: flex; flex-direction: column; gap: 8px; }
.rev-field > span { font-weight: 800; font-size: 13px; color: #36456a; }
.rev-seg { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.rev-seg button { padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--showcase-line, #e0e6f0); background: #fff; font-weight: 800; font-size: 13.5px; color: #36456a; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.rev-seg button.is-on { background: #1879ff; border-color: #1879ff; color: #fff; }
.rev-seg button:disabled { opacity: 0.55; cursor: not-allowed; }
.rev-check { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; color: #36456a; cursor: pointer; }
.app-shell .rev-check input, .rev-check input { width: 20px; height: 20px; min-height: 0; accent-color: #1879ff; }
.rev-launch { margin-top: 6px; }
.rev-deck-list { display: grid; gap: 10px; }
.rev-deck-btn { padding: 16px; border-radius: 14px; border: 1.5px solid var(--showcase-line, #e0e6f0); background: #fff; font-weight: 800; font-size: 15px; color: #1d3a6b; cursor: pointer; text-align: left; }
.rev-deck-btn:hover { border-color: #1879ff; background: #f4f8ff; }

/* Flashcard 3D */
.rev-flashcard { position: relative; width: 100%; min-height: 340px; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.rev-flashcard.is-flipped { transform: rotateY(180deg); }
.rev-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px; padding: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; box-shadow: 0 16px 44px rgba(20, 40, 80, 0.16); }
.rev-card-front { background: linear-gradient(160deg, #ffffff, #eaf1ff); }
.rev-card-back { background: linear-gradient(160deg, #163a78, #0e244c); color: #fff; transform: rotateY(180deg); }
.rev-chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #e7eefc; color: #2b59b8; font-weight: 800; font-size: 12px; }
.rev-chip-answer { background: rgba(255, 255, 255, 0.16); color: #cfe0ff; }
.rev-q { margin: 0; font-size: clamp(17px, 4.5vw, 21px); font-weight: 800; line-height: 1.4; color: inherit; }
.rev-card-back .rev-q { color: #fff; }
.rev-a { margin: 0; font-size: clamp(15px, 4vw, 18px); line-height: 1.5; font-weight: 600; }
.rev-tap, .rev-tap-hint { font-size: 12px; opacity: 0.7; font-weight: 600; }
.rev-tap-hint { text-align: center; color: #6b7686; margin: 0; }
.rev-ai-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 800; font-size: 12.5px; cursor: pointer; }
.rev-ai-box { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 13px; line-height: 1.45; background: rgba(255, 255, 255, 0.1); padding: 11px 13px; border-radius: 12px; text-align: left; }
.rev-ai-mnemo { font-weight: 800; }
.rev-ai-err { font-size: 12.5px; color: #ffd3d0; margin-top: 6px; }

.rev-judge { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rev-judge-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; border-radius: 14px; border: 0; font-weight: 900; font-size: 15px; cursor: pointer; color: #fff; }
.rev-judge-btn.is-good { background: #0bbb4c; }
.rev-judge-btn.is-bad { background: #ff7a59; }

/* Quiz */
.rev-qcard { background: #fff; border: 1px solid var(--showcase-line, #e6ebf3); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 26px rgba(20, 40, 80, 0.07); }
.rev-options { display: grid; gap: 10px; }
.rev-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; padding: 14px 16px; border-radius: 13px; border: 1.5px solid var(--showcase-line, #e0e6f0); background: #fff; font-weight: 700; font-size: 14.5px; color: #1b2a44; cursor: pointer; transition: border-color 120ms ease; }
.rev-option:hover:not(:disabled) { border-color: #1879ff; }
.rev-option.is-correct { background: #e3f8eb; border-color: #0bbb4c; color: #0a7a36; }
.rev-option.is-wrong { background: #fdecec; border-color: #e24b4a; color: #b62b29; }
.rev-option.is-dim { opacity: 0.5; }
.rev-libre textarea { width: 100%; border: 1.5px solid var(--showcase-line, #e0e6f0); border-radius: 12px; padding: 12px; font: inherit; font-size: 14px; resize: vertical; }
.rev-grade { border-radius: 12px; padding: 13px 15px; margin-top: 10px; }
.rev-grade strong { font-size: 15px; }
.rev-grade p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; }
.rev-grade.verdict-correct { background: #e3f8eb; }
.rev-grade.verdict-partial { background: #fff6e0; }
.rev-grade.verdict-wrong { background: #fdecec; }
.rev-model { margin: 4px 0 0; font-size: 13.5px; color: #33415c; line-height: 1.45; }
.rev-model span { font-weight: 800; color: #1879ff; }
.rev-next { align-self: stretch; }

/* Score ring + end screens */
.rev-end { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 28px 12px; }
.rev-end h2 { margin: 0; font-size: 22px; font-weight: 1000; color: #11203a; }
.rev-end-msg { margin: 0; color: #5a6678; font-weight: 600; }
.rev-end-stats { display: flex; gap: 16px; font-weight: 900; }
.rev-end-good { color: #0bbb4c; display: inline-flex; align-items: center; gap: 6px; }
.rev-end-bad { color: #ff7a59; display: inline-flex; align-items: center; gap: 6px; }
.rev-end-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rev-score-ring { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(#1879ff calc(var(--pct) * 1%), #e6ecf5 0); }
.rev-score-ring::before { content: ""; position: absolute; inset: 11px; background: #fff; border-radius: 50%; }
.rev-score-ring strong { position: relative; font-size: 30px; font-weight: 1000; color: #11203a; }

.rev-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 13px; border: 1.5px solid var(--showcase-line, #e0e6f0); background: #fff; font-weight: 900; font-size: 14.5px; color: #1d3a6b; cursor: pointer; }
.rev-btn.is-primary { background: #1879ff; border-color: #1879ff; color: #fff; }
.rev-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.rev-err { color: #c0392b; font-weight: 800; font-size: 13px; margin: 0; }

.rev-loading { align-items: center; padding: 40px; }
.rev-spinner { width: 38px; height: 38px; border-radius: 50%; border: 4px solid #e0e6f0; border-top-color: #1879ff; animation: rev-spin 0.8s linear infinite; }
@keyframes rev-spin { to { transform: rotate(360deg); } }

/* Examen blanc + chat */
.rev-exam-fiche { font-weight: 900; font-size: 13px; color: #36456a; flex: 1; text-align: center; }
.rev-timer { font-weight: 1000; font-size: 15px; color: #1879ff; font-variant-numeric: tabular-nums; }
.rev-exam-intro { background: #fff; border: 1px solid var(--showcase-line, #e6ebf3); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.rev-exam-sub { margin: 0; color: #6b7686; font-size: 13px; font-weight: 600; }
.rev-chat { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding: 6px 2px; }
.rev-bubble { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.rev-bubble.examiner { align-self: flex-start; background: #eef2fb; color: #1b2a44; border-bottom-left-radius: 5px; }
.rev-bubble.user { align-self: flex-end; background: #1879ff; color: #fff; border-bottom-right-radius: 5px; }
.rev-bubble.is-typing { opacity: 0.6; letter-spacing: 3px; }
.rev-chat-bar { display: flex; gap: 8px; }
.rev-chat-bar input { flex: 1; border: 1.5px solid var(--showcase-line, #e0e6f0); border-radius: 12px; padding: 12px; font: inherit; font-size: 14px; }
.rev-send { width: 48px; border: 0; border-radius: 12px; background: #1879ff; color: #fff; display: grid; place-items: center; cursor: pointer; }
.rev-send:disabled { opacity: 0.5; }
.rev-finish { align-self: center; }
.rev-exam-self { display: flex; flex-direction: column; gap: 12px; }
.rev-exam-q { background: #fff; border: 1px solid var(--showcase-line, #e6ebf3); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.rev-q-sm { margin: 0; font-weight: 800; font-size: 14.5px; color: #1b2a44; line-height: 1.4; }

@media (max-width: 480px) {
  .rev-stat strong { font-size: 20px; }
  .rev-judge-btn { font-size: 14px; padding: 14px 8px; }
}

/* Carte d'accès au mode révision sur le tableau de bord élève */
.eleve-revise-card { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 18px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #6a34e0, #2b7bff); box-shadow: 0 12px 28px rgba(60, 70, 200, 0.24); transition: transform 140ms ease; }
.eleve-revise-card:hover { transform: translateY(-2px); }
.eleve-revise-icon { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; background: rgba(255, 255, 255, 0.18); display: grid; place-items: center; }
.eleve-revise-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.eleve-revise-main strong { font-size: 17px; font-weight: 1000; }
.eleve-revise-main span { font-size: 12px; opacity: 0.92; line-height: 1.35; }
.eleve-revise-cta { flex: 0 0 auto; font-weight: 900; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); white-space: nowrap; }
.verif-self-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 10px; padding: 10px 13px; border-radius: 11px; background: #f1f6ff; border: 1px solid #d8e6ff; font-size: 12.5px; color: #36456a; font-weight: 600; }
.verif-self-stats strong { color: #1879ff; font-weight: 900; }
.settings-ai-status { margin: 4px 0 10px; font-weight: 800; font-size: 13px; }
.settings-ai-on { color: #16813d; }
.settings-ai-off { color: #b9710a; }
.seance-hist-report { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: #2a3a55; white-space: pre-wrap; }
.seance-hist-report span { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; color: var(--showcase-muted, #6b7686); margin-bottom: 3px; }
.seance-hist-empty { margin: 0 0 6px; font-size: 13px; color: var(--showcase-muted, #6b7686); font-style: italic; }

/* Historique des commentaires du moniteur par point (élève + fiche REMC) */
.eleve-point-comments { display: flex; flex-direction: column; gap: 6px; }
.remc-skill-row { flex-wrap: wrap; }
/* Historique des commentaires moniteur : timeline compacte (rail à gauche + pastille de niveau colorée). */
.remc-skill-comments { flex-basis: 100%; width: 100%; list-style: none; margin: 10px 0 2px; padding: 4px 0 2px 16px; border-left: 2px solid #e6ebf3; display: flex; flex-direction: column; gap: 11px; }
.remc-cmt { display: flex; align-items: flex-start; gap: 11px; }
.remc-cmt-lvl { flex: none; min-width: 76px; text-align: center; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.remc-cmt-lvl.lvl-aborde { background: #e4efff; color: #1c6fe8; }
.remc-cmt-lvl.lvl-traite { background: #fff3da; color: #c9820a; }
.remc-cmt-lvl.lvl-assimile { background: #e3f8eb; color: #119447; }
.remc-cmt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.remc-cmt-meta { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: #99a2b0; }
.remc-cmt-text { font-size: 13.5px; line-height: 1.45; color: #2b3850; white-space: pre-wrap; }

/* ════════ Notice d'utilisation (page Aide) ════════ */
.help-guide { display: flex; flex-direction: column; gap: 14px; max-width: 1000px; }
.help-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: var(--showcase-bg, #f4f6fb); padding: 4px 0; }
.help-roles { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.help-roles button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--showcase-line, #e0e6f0); background: #fff; font-weight: 800; font-size: 13px; color: #36456a; cursor: pointer; }
.help-roles button.is-on { background: var(--showcase-blue, #2563eb); border-color: var(--showcase-blue, #2563eb); color: #fff; }
.help-search { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 180px; border: 1px solid var(--showcase-line, #e0e6f0); border-radius: 11px; padding: 0 12px; background: #fff; color: var(--showcase-muted, #6b7686); }
.app-shell .help-search input { flex: 1; border: 0; min-height: 0; height: 40px; padding: 0; font-size: 14px; background: transparent; }
.help-print { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 11px; border: 1px solid var(--showcase-line, #e0e6f0); background: #fff; font-weight: 800; font-size: 13px; color: #1d3a6b; cursor: pointer; }
.help-empty { color: var(--showcase-muted, #6b7686); font-weight: 700; padding: 20px; text-align: center; }

.help-section { background: #fff; border: 1px solid var(--showcase-line, #e6ebf3); border-radius: 16px; overflow: hidden; }
.help-section > summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 900; color: #11203a; }
.help-section > summary::-webkit-details-marker { display: none; }
.help-section-title { font-size: 16px; }
.help-section-count { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--showcase-muted, #6b7686); }
.help-section .help-chev { transition: transform 160ms ease; color: var(--showcase-muted, #6b7686); }
.help-section[open] > summary .help-chev { transform: rotate(180deg); }
.help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 0 16px 16px; }

.help-card { border: 1px solid #eef1f6; border-radius: 13px; padding: 14px 15px; background: #fbfcfe; display: flex; flex-direction: column; gap: 8px; break-inside: avoid; }
.help-card h3 { margin: 0; font-size: 15px; font-weight: 900; color: #15264a; }
.help-where { margin: 0; font-size: 11.5px; font-weight: 800; color: var(--showcase-blue, #2563eb); display: flex; align-items: center; gap: 5px; }
.help-where::before { content: "📍"; }
.help-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.help-steps li { font-size: 13.5px; line-height: 1.45; color: #2a3a55; }
.help-note { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: #7a6510; background: #fff7e6; border: 1px solid #f3d894; border-radius: 9px; padding: 8px 10px; }
.help-note::before { content: "💡 "; }

@media print {
  .topbar, .help-toolbar, .no-print, .account-menu { display: none !important; }
  .app-shell { background: #fff !important; }
  .stage { padding: 0 !important; }
  .help-section { border: 0; break-inside: auto; }
  .help-section > .help-cards { display: grid !important; grid-template-columns: 1fr 1fr; }
  .help-section > summary { font-size: 17px; border-bottom: 2px solid #111; }
  .help-section-count, .help-chev { display: none; }
  .help-card { background: #fff; border-color: #ccc; }
}

/* ════════ Visite guidée en direct (product tour) ════════ */
.tour-root { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.tour-spotlight { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.6); outline: 3px solid #5b8cff; outline-offset: 2px; transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease; animation: tour-pulse 1.6s ease-in-out infinite; }
.tour-spotlight-none { inset: 0; border-radius: 0; box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.45); outline: 0; animation: none; }
@keyframes tour-pulse { 0%, 100% { outline-color: #5b8cff; } 50% { outline-color: #aecaff; } }
.tour-bubble { position: fixed; z-index: 9001; pointer-events: auto; background: #fff; border-radius: 16px; padding: 14px 15px; box-shadow: 0 18px 50px rgba(10, 20, 50, 0.35); display: flex; flex-direction: column; gap: 9px; }
.tour-bubble-head { display: flex; align-items: center; gap: 8px; }
.tour-emoji { font-size: 18px; }
.tour-bubble-head strong { flex: 1; font-size: 14px; font-weight: 900; color: #15264a; }
.tour-close { border: 0; background: #eef1f6; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; color: #5a6678; font-weight: 900; line-height: 1; }
.tour-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: #2a3a55; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tour-dots { display: inline-flex; gap: 5px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d6dbe4; transition: all 0.2s ease; }
.tour-dots i.is-done { background: #9db4e8; }
.tour-dots i.is-on { background: #2563eb; width: 16px; border-radius: 4px; }
.tour-actions { display: inline-flex; align-items: center; gap: 7px; }
.tour-btn { border: 1px solid #e0e6f0; background: #fff; border-radius: 9px; padding: 7px 13px; font-weight: 800; font-size: 13px; color: #1d3a6b; cursor: pointer; }
.tour-btn.is-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.tour-hint { font-size: 12.5px; font-weight: 800; color: #2563eb; }

/* Galerie de visites (page Aide) */
.tour-gallery { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.tour-cards { display: grid; gap: 10px; }
.tour-card { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--showcase-line, #e6ebf3); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
.tour-card:hover { transform: translateY(-2px); border-color: #2563eb; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.12); }
.tour-card-emoji { font-size: 26px; flex: 0 0 auto; }
.tour-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tour-card-main strong { font-size: 15.5px; font-weight: 900; color: #15264a; }
.tour-card-main span { font-size: 12px; color: var(--showcase-muted, #6b7686); font-weight: 600; }
.tour-card-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 13px; color: #fff; background: #2563eb; padding: 8px 14px; border-radius: 999px; }

/* ════════ Installer l'application (PWA) ════════ */
.install-card { border: 1px solid #d8e2f3; border-radius: 16px; background: linear-gradient(135deg, #eef4ff, #ffffff); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: 18px; }
.install-head { display: flex; align-items: flex-start; gap: 12px; }
.install-emoji { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.install-head strong { font-size: 16px; font-weight: 900; color: #15264a; display: block; }
.install-head p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: #46566e; }
.install-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: #2563eb; color: #fff; border: 0; border-radius: 999px; padding: 11px 20px; font-weight: 900; font-size: 14px; cursor: pointer; }
.install-btn:hover { background: #1d4fd0; }
.install-done { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13.5px; color: #1a7f4b; margin: 0; }
.install-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.install-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.4; color: #2a3a55; }
.install-step-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid #d8e2f3; display: inline-flex; align-items: center; justify-content: center; color: #2563eb; font-weight: 900; font-size: 15px; }

.schema-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.45);
}
.schema-popup {
  width: min(820px, 100%);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  padding: 20px 22px 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.3);
}
.schema-popup-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.schema-popup-head strong { font-size: 17px; }
.schema-popup-head p { margin: 3px 0 0; color: var(--showcase-muted); font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.schema-popup-head .schema-icon-btn { margin-left: auto; }
.schema-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid #e3e8f0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.schema-icon-btn:hover { background: #f3f6fb; }
.schema-prompt-hint {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #e9f6ee;
  color: #16813d;
  font-size: 13.5px;
  font-weight: 800;
}
.schema-empty { margin: 4px 0 14px; color: var(--showcase-muted); font-weight: 650; font-size: 14px; }

.schema-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  margin: 4px 0 16px;
}
.schema-thumb {
  margin: 0;
  padding: 8px;
  border: 1px solid #e6eaf2;
  border-radius: 14px;
  background: #fff;
}
.schema-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border-radius: 9px;
  border: 1px solid #eef1f6;
}
.schema-thumb strong { display: block; margin-top: 7px; font-size: 13.5px; }
.schema-thumb small { display: block; color: var(--showcase-muted); font-weight: 700; font-size: 11.5px; }
.schema-thumb figcaption { display: flex; gap: 6px; margin-top: 8px; }
.schema-thumb.is-off { opacity: 0.55; }
.schema-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid #dbe1ec;
  border-radius: 10px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 850;
  cursor: pointer;
}
.schema-mini-btn:hover { background: #f3f6fb; }
.schema-mini-btn.is-danger { color: #c2402f; border-color: #f0cdc7; }
.schema-mini-btn.is-danger:hover { background: #fdeeec; }

.schema-new-title { display: flex; align-items: center; gap: 7px; margin: 4px 0 10px; font-size: 15px; }
.schema-new-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.schema-new-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding: 10px;
  border: 1.5px solid #dbe1ec;
  border-radius: 14px;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  text-align: center;
}
.schema-new-card:hover { border-color: #2563eb; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.12); }
.schema-new-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 8px; }
.schema-new-card.is-blank i, .schema-new-card.is-import i { display: flex; color: #2563eb; }
.schema-new-card.is-blank { border-style: dashed; }
.schema-new-card.is-import { border-style: dashed; }

/* Canvas plein écran */
.schema-canvas-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #f3f5f9;
}
.schema-canvas-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #e6eaf2;
}
.schema-canvas-head strong { font-size: 15px; line-height: 1.3; }
.schema-canvas-head .schema-icon-btn { margin-left: auto; }
.schema-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e6eaf2;
}
.schema-tool-group { display: flex; align-items: center; gap: 8px; }
.schema-color {
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px #d7dde8;
  cursor: pointer;
}
.schema-color.active { box-shadow: 0 0 0 3px #2563eb; }
.schema-size {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid #dbe1ec;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.schema-size i { display: block; border-radius: 999px; background: #1f2937; }
.schema-size.active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18); }
.schema-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border: 1.5px solid #dbe1ec;
  border-radius: 11px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 850;
  cursor: pointer;
}
.schema-tool-btn:disabled { opacity: 0.4; cursor: default; }
.schema-tool-btn.active { border-color: #e23b2e; color: #e23b2e; background: #fdf1ef; }
.schema-canvas-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 14px;
}
.schema-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: min(100%, calc((100vh - 250px) * 4 / 3));
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.16);
  background: #fff;
}
.schema-canvas-wrap canvas { position: absolute; inset: 0; }
.schema-canvas-wrap .schema-ink { touch-action: none; cursor: crosshair; }
.schema-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--showcase-muted);
}
.schema-canvas-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #e6eaf2;
}

/* Bibliothèque (admin) */
.schema-library { display: flex; flex-direction: column; gap: 18px; }
.schema-library-form h2, .schema-library .card h2 { margin: 0 0 12px; font-size: 17px; }
.schema-library-grid { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: start; }
.schema-library-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 800; }
.schema-upload-zone .schema-new-card { width: 100%; }
.schema-skills-picker { margin: 14px 0; border: 1px solid #e6eaf2; border-radius: 14px; padding: 0 14px; }
.schema-skills-picker summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}
.schema-skills-picker summary b { color: #2563eb; }
.schema-skills-picker summary svg { margin-left: auto; transition: transform 0.15s; }
.schema-skills-picker[open] summary svg { transform: rotate(180deg); }
.schema-skills-picker fieldset { border: 0; padding: 0 0 12px; margin: 0; }
.schema-skills-picker legend { font-weight: 950; font-size: 13.5px; padding: 8px 0; }
.schema-skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.schema-skill-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; font-weight: 650; line-height: 1.3; cursor: pointer; }
.app-shell .schema-skill-check input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; margin: 1px 0 0; flex: 0 0 auto; accent-color: #2563eb; }

@media (max-width: 720px) {
  .remc-schema-btn { width: 100%; min-height: 44px; }
  .schema-overlay { padding: 8px; align-items: flex-end; }
  .schema-popup { max-height: 92vh; border-radius: 18px 18px 0 0; padding: 16px; }
  .schema-thumb-grid, .schema-new-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schema-toolbar { gap: 8px; padding: 8px 10px; }
  .schema-tool-btn { padding: 0 9px; font-size: 12px; gap: 5px; }
  .schema-canvas-stage { padding: 8px; }
  .schema-canvas-foot { padding: 10px; }
  .schema-canvas-foot .showcase-btn { flex: 1; }
  .schema-library-grid { grid-template-columns: 1fr; }
  .schema-skills-grid { grid-template-columns: 1fr; }
}

/* Agrandissement d'un schema (lightbox) */
.schema-thumb-view { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.schema-lightbox {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: rgba(10, 15, 28, 0.82);
}
.schema-lightbox img {
  max-width: min(96vw, 1100px);
  max-height: 78vh;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.schema-lightbox-bar { display: flex; gap: 10px; }
@media (max-width: 720px) {
  .schema-lightbox { padding: 10px; }
  .schema-lightbox img { max-height: 72vh; }
  .schema-lightbox-bar { width: 100%; }
  .schema-lightbox-bar .showcase-btn { flex: 1; }
}

/* ---- Réglages v2 : sections repliables + barre d'enregistrement ---- */
.settings-page { display: flex; flex-direction: column; gap: 12px; max-width: 980px; margin: 0 auto; padding-bottom: 90px; }
.settings-acc {
  border: 1px solid #e4e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.settings-acc > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 18px;
  cursor: pointer;
  list-style: none;
}
.settings-acc > summary::-webkit-details-marker { display: none; }
.settings-acc > summary::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid #98a3b5;
  border-bottom: 2.5px solid #98a3b5;
  transform: rotate(45deg);
  transition: transform 0.15s;
  flex: 0 0 auto;
}
.settings-acc[open] > summary::after { transform: rotate(225deg); }
.settings-acc > summary i { display: flex; color: #2563eb; flex: 0 0 auto; }
.settings-acc > summary strong { display: block; font-size: 15.5px; }
.settings-acc > summary span { display: block; margin-top: 2px; color: var(--showcase-muted); font-size: 12.5px; font-weight: 700; }
.settings-acc-premium { border-color: #f0c462; background: linear-gradient(180deg, #fef9ec 0%, #ffffff 55%); }
.settings-acc-premium > summary i { color: #c8870b; }
.settings-acc-body { padding: 4px 18px 18px; border-top: 1px solid #eef1f6; }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.settings-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 800; }
.settings-grid .span-2 { grid-column: 1 / -1; }

.settings-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 750; cursor: pointer; }
.settings-check small { color: var(--showcase-muted); font-weight: 650; }
.app-shell .settings-check input[type="checkbox"] { width: 19px; height: 19px; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; accent-color: #2563eb; }

.settings-rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.settings-rule-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 6px 2px;
  border-bottom: 1px solid #f1f4f8;
  flex-wrap: wrap;
}
.settings-rule-list li:last-child { border-bottom: 0; }
.settings-rule-list .settings-check { flex: 1 1 240px; }
.settings-rule-window { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #46505e; white-space: nowrap; }
.app-shell .settings-rule-window input { width: 86px; min-height: 42px; padding: 4px 10px; text-align: center; }
.settings-rule-window.is-hidden { visibility: hidden; }

.settings-emails-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.settings-emails-grid > div { display: flex; flex-direction: column; gap: 9px; }
.settings-emails-grid > label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 800; }
.settings-emails-grid textarea {
  border: 1px solid #d9dfe9;
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  resize: vertical;
}
.settings-subtitle { font-size: 13px; }
.settings-toggles { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; }
.settings-inline-number { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 750; }
.app-shell .settings-inline-number input { width: 76px; min-height: 42px; padding: 4px 10px; text-align: center; }

.settings-doc-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; }
.settings-doc-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 2px;
  border-bottom: 1px solid #f1f4f8;
  flex-wrap: wrap;
}
.settings-doc-list li.is-off { opacity: 0.55; }
.app-shell .settings-doc-name { flex: 1 1 220px; min-height: 44px; padding: 6px 12px; font-weight: 750; }
.settings-doc-add { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding-top: 4px; }
.app-shell .settings-doc-add > input { flex: 1 1 240px; min-height: 46px; padding: 6px 12px; }

.settings-devzone { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #e0c89a; }
.settings-devzone > strong { display: block; margin-bottom: 10px; }

.settings-savebar {
  position: sticky;
  bottom: 14px;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid #e4e8f0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.18);
}
.settings-savebar.is-visible { display: flex; }
.settings-savebar-hint { color: var(--showcase-muted); font-size: 13px; font-weight: 750; }

@media (max-width: 720px) {
  .settings-page { padding-bottom: 76px; }
  .settings-grid, .settings-emails-grid { grid-template-columns: 1fr; }
  .settings-acc > summary { min-height: 58px; gap: 11px; }
  .settings-acc > summary span { font-size: 11.5px; }
  .settings-rule-list .settings-check { flex: 1 1 100%; }
  .settings-rule-list li, .settings-doc-list li { row-gap: 8px; }
  .settings-savebar { bottom: 8px; }
  .settings-savebar .showcase-btn { flex: 1; }
}


/* ---- Fenêtre redimensionnée (721px à 1264px) : en-tête en rangées, zéro scroll horizontal ---- */
@media (min-width: 721px) and (max-width: 1264px) {
  .app-shell .showcase-topbar { position: relative; z-index: 100; height: auto; min-height: 0; }
  .app-shell .showcase-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    height: auto;
    overflow: visible;
    padding: 14px 24px 16px;
  }
  .app-shell .showcase-brand { order: 0; flex: 0 0 auto; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 0; }
  .app-shell .showcase-topbar .brand-logo { height: 70px; width: auto; }
  .app-shell .showcase-topbar .brand-name { font-size: 20px; margin-top: 0; }
  .account-menu { order: 1; margin-left: auto; margin-top: 0; align-self: center; }

  .app-shell .vehicle-tab-group { position: static; width: auto; height: auto; min-width: 0; }
  .app-shell .vehicle-tab-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 66px;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 14px;
    font-size: 13px;
  }
  .app-shell .vehicle-tab-summary svg:first-child { width: 23px; height: 23px; }
  .app-shell .vehicle-tab-summary > svg:last-child { display: none; }
  .app-shell .vehicle-menu { top: calc(100% + 8px); left: 0; right: 0; width: auto; }
}

/* ---- Page Employés v2 : accordéons façon Réglages ---- */
.emp-page { display: flex; flex-direction: column; gap: 12px; max-width: 980px; margin: 0 auto; }
.settings-acc > summary > div { flex: 1; min-width: 0; }

.emp-row-avatar { width: 40px; height: 40px; font-size: 14px; flex: 0 0 auto; }
.emp-page .settings-acc > summary > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

.settings-acc-body .employee-row { display: flex; align-items: center; gap: 13px; }
.settings-acc-body .employee-row > div:first-of-type { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.emp-doc-tag { color: #b45309; font-weight: 900; }
.emp-off-tag { color: #c2402f; font-weight: 900; }

/* Signalement fort des documents obligatoires manquants ou expirés (fiche + liste). */
.emp-doc-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 1px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdeeec;
  border: 1px solid #f3c0c0;
  color: #c2402f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  width: fit-content;
}
.emp-doc-alert::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  flex: 0 0 auto;
}

/* Le formulaire « Créer un accès » vit dans l'accordéon : sa carte et son titre internes disparaissent. */
.settings-acc-body .employee-form-card { border: 0; box-shadow: none; padding: 0; background: transparent; }
.settings-acc-body .employee-form-card .showcase-panel-title { display: none; }

.emp-alert-list, .emp-bonus-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.emp-alert-list li, .emp-bonus-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 2px;
  border-bottom: 1px solid #f1f4f8;
  flex-wrap: wrap;
}
.emp-alert-list li:last-child, .emp-bonus-list li:last-child { border-bottom: 0; }
.emp-alert-name { flex: 0 0 190px; font-weight: 900; color: inherit; text-decoration: none; }
.emp-alert-name:hover { color: #2563eb; }
.emp-alert-issues { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.emp-alert-issues em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef1f6;
  color: #46505e;
}
.emp-alert-issues em.is-missing { background: #eef1f6; color: #46505e; }
.emp-alert-issues em.is-soon { background: #fff3e0; color: #b45309; }
.emp-alert-issues em.is-expired { background: #fdeeec; color: #c2402f; }
.emp-bonus-list li span { color: var(--showcase-muted); font-weight: 700; font-size: 13px; }
.emp-bonus-list li b { margin-left: auto; font-size: 15px; }

.emp-identity-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.emp-access-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef1f6; }
.emp-access-block > strong { display: block; margin-bottom: 8px; }
.emp-mail-status { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--showcase-muted); }
.emp-mail-status.is-failed { color: #c2402f; }
.emp-doc-add { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef1f6; }
.emp-doc-add > strong { display: block; margin-bottom: 10px; }
.emp-doc-add small { color: var(--showcase-muted); font-weight: 650; }

@media (max-width: 720px) {
  .emp-alert-name { flex: 1 1 100%; }
  .emp-bonus-list li b { margin-left: 0; }
  .settings-acc > summary .emp-row-avatar { width: 34px; height: 34px; font-size: 12px; }
}

/* ---- /configurer : carte centree, 4 familles sur une rangee ---- */
.app-shell .config-simple { margin: 0 auto; }
.app-shell .config-simple .simple-family { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .app-shell .config-simple .simple-family { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Corrections vehicules : type de lavage + km au retour ---- */
.wash-scope-picker { display: flex; gap: 8px; margin: 2px 0 4px; }
.wash-scope-btn {
  flex: 1 1 0;
  min-height: 44px;
  border: 1.5px solid #dbe1ec;
  border-radius: 12px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 850;
  cursor: pointer;
}
.wash-scope-btn.active { border-color: #2563eb; background: #eef4ff; color: #2563eb; }
.app-shell .mini-actions .mini-mileage-input { width: 130px; min-height: 40px; padding: 4px 10px; font-size: 13px; }

/* ---- Statut de vie vehicule + carnet de vie + cout reel ---- */
.life-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.life-available { background: #e9f6ee; color: #16813d; }
.life-in_garage { background: #fff3e0; color: #b45309; }
.life-blocked { background: #fdeeec; color: #c2402f; }
.fleet-life-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.asset-side .life-badge { font-size: 11px; padding: 2px 9px; }
.vehicle-command-kicker .life-badge { margin-left: 6px; }

.cost-kpi-card { padding: 16px 18px; }
.cost-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cost-kpis article { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid #e6eaf2; border-radius: 14px; background: #fbfcfe; }
.cost-kpis article span { font-size: 12px; font-weight: 800; color: var(--showcase-muted); }
.cost-kpis article strong { font-size: 19px; }
.cost-kpis article small { font-size: 11.5px; font-weight: 700; color: var(--showcase-muted); }
.cost-kpis article.is-over { border-color: #f0c0b8; background: #fdf3f1; }
.cost-kpis article.is-over strong { color: #c2402f; }

.life-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.life-event {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid #f1f4f8;
}
.life-event:last-child { border-bottom: 0; }
.life-event time { flex: 0 0 86px; font-size: 12.5px; font-weight: 800; color: var(--showcase-muted); padding-top: 2px; }
.life-event i { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 5px; border-radius: 999px; background: #c4cdd9; }
.life-event-fuel i { background: #2563eb; }
.life-event-wash i { background: #00a7c8; }
.life-event-problem i { background: #e23b2e; }
.life-event-down i { background: #b45309; }
.life-event-return i { background: #16a34a; }
.life-event-garage i { background: #7c3aed; }
.life-event strong { font-size: 13.5px; }
.life-event small { display: block; margin-top: 1px; font-size: 12px; font-weight: 700; color: var(--showcase-muted); }

@media (max-width: 720px) {
  .cost-kpis { grid-template-columns: 1fr; }
  .life-event time { flex-basis: 72px; }
}

/* ---- /moniteur (Deposer) : 3 cartes centrees, plus de 4e colonne fantome ---- */
.app-shell .monitor-home.deposit-hub {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .app-shell .monitor-home.deposit-hub { grid-template-columns: 1fr; }
}

/* ---- Avatars : pastille degradee couleur du role, initiales blanches centrees ---- */
.app-shell .account-avatar,
.app-shell .employee-row .account-avatar,
.settings-acc > summary .account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: center;
  border: 0;
  border-radius: 999px;
  background: var(--role-color, #2563eb);
  background: linear-gradient(140deg, color-mix(in srgb, var(--role-color, #2563eb) 70%, #ffffff) 0%, var(--role-color, #2563eb) 88%);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.18);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.account-trigger {
  border: 0;
  background: var(--role-color, #2563eb);
  background: linear-gradient(140deg, color-mix(in srgb, var(--role-color, #2563eb) 70%, #ffffff) 0%, var(--role-color, #2563eb) 88%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.18);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.account-trigger:hover { filter: brightness(1.05); }

/* Titre Fiche REMC un peu plus grand */
.remc-page-title h1 { font-size: clamp(28px, 3.2vw, 40px); }

/* ---- Bouton Retour : pastille à bouts arrondis ---- */
.back-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 18px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  border: 1px solid #dbe2ec;
  background: #fff;
  color: #1f2937;
  font-size: 13.5px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.back-pill svg { color: #f1591c; }
.back-pill:hover {
  border-color: #f6b89a;
  background: #fff5f0;
  transform: translateX(-2px);
  box-shadow: 0 6px 16px rgba(241, 89, 28, 0.18);
}
.back-pill:hover svg { color: #e0490f; }

/* ---- Fiche REMC : indicateur de sauvegarde auto (remplace checkbox + bouton Enregistrer) ---- */
.remc-autosave { margin: 8px 0 2px; font-size: 13px; font-weight: 750; }
.remc-autosave-idle { color: var(--showcase-muted); }
.remc-autosave-saving { color: #b45309; }
.remc-autosave-done { display: inline-flex; align-items: center; gap: 5px; color: #16813d; }
.remc-autosave-err { color: #c2402f; }

/* ---- Catégories de formation : chips compactes sur une ligne, description au clic ---- */
.formation-cats { margin: 0 0 18px; }
.formation-cat-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.formation-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 58px;
  padding: 10px 22px;
  border: 1.5px solid #e3e8f0;
  border-radius: 15px;
  background: #fff;
  color: #1f2937;
  font-size: 16px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}
.formation-cat-chip i { display: flex; flex: 0 0 auto; color: #2563eb; }
.formation-cat-chip i svg { width: 24px; height: 24px; }
.formation-cat-chip em {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef1f6;
  color: var(--showcase-muted);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 1000;
}
.formation-cat-chip.is-active { border-color: #2563eb; }
.formation-cat-chip.is-active.is-open { background: #f4f8ff; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.14); }
.formation-cat-chip.is-soon { opacity: 0.6; cursor: default; }
.formation-cat-chip.is-soon i { color: var(--showcase-muted); }
.formation-cat-desc {
  margin: 10px auto 0;
  max-width: 720px;
  text-align: center;
  color: var(--showcase-muted);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
}
.formation-cat-desc strong { color: #1f2937; }

@media (max-width: 720px) {
  .formation-cat-chip { font-size: 14px; padding: 9px 14px; min-height: 50px; }
}

/* Landing Extensions : catalogue 2x2 centre */
.ext-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 880px; margin: 9vh auto 40px; }
.ext-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 200px; padding: 26px 22px; border-radius: 18px; text-decoration: none; }
.ext-tile i { display: inline-flex; margin-bottom: 10px; }
.ext-tile h2 { margin: 0; font-size: 21px; font-weight: 1000; }
.ext-sub { font-size: 13px; font-weight: 800; margin-top: 2px; }
.ext-tile p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; max-width: 300px; }
.ext-badge { position: absolute; top: 14px; right: 14px; font-style: normal; font-size: 11.5px; font-weight: 900; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.02em; }

.ext-tile.is-active {
  border: 2px solid transparent;
  background:
    linear-gradient(160deg, #fffaf0 0%, #fdf3d8 100%) padding-box,
    linear-gradient(140deg, #fbe390 0%, #ecb83e 48%, #c0820a 100%) border-box;
  box-shadow: 0 6px 18px rgba(196, 133, 10, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ext-tile.is-active:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(196, 133, 10, 0.35); }
.ext-tile.is-active i { color: #b07a08; }
.ext-tile.is-active h2 { color: #1f2937; }
.ext-tile.is-active .ext-sub { color: #b07a08; }
.ext-tile.is-active p { color: #6b6048; }
.ext-tile.is-active .ext-badge { background: linear-gradient(140deg, #fbe390, #c0820a); color: #fff; box-shadow: 0 2px 6px rgba(196, 133, 10, 0.4); text-shadow: 0 1px 1px rgba(122, 80, 4, 0.4); }

.ext-tile.is-soon { background: #f4f5f7; border: 2px dashed #d6d9df; cursor: default; }
.ext-tile.is-soon i, .ext-tile.is-soon h2 { color: #aab0ba; }
.ext-tile.is-soon .ext-sub { color: #b4bac3; }
.ext-tile.is-soon p { color: #a8aeb8; }
.ext-tile.is-soon .ext-badge { background: #e5e7eb; color: #7d8590; }

@media (max-width: 720px) {
  .ext-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
  .ext-tile { min-height: 170px; }
}

/* Fiche de validation des compétences (barème /31) */
.vsheet { display: flex; flex-direction: column; gap: 14px; }
.vsheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.vsheet-head > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.vsheet-head strong { font-size: 17px; color: #1f2937; }
.vsheet-evaluator { font-size: 12.5px; color: #6b7280; }
/* Champs d'en-tête : label au-dessus, contrôles tous à 42px de haut, alignés sur une ligne. */
.vsheet-head-fields { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.vsheet-field { display: flex; flex-direction: column; gap: 5px; }
.vsheet-field > span { font-size: 12px; font-weight: 800; color: #6b7280; letter-spacing: 0.01em; }
.vsheet-field input { height: 42px; border: 1.5px solid #d6d9df; border-radius: 10px; padding: 0 12px; font-size: 14px; background: #fff; }
.vsheet-field input:focus { outline: none; border-color: #1879ff; }
.vsheet-field-hours input { width: 84px; text-align: center; }
.vsheet-field-monitor input { width: 200px; }
.vsheet-gearbox { display: inline-flex; height: 42px; border: 1.5px solid #d6d9df; border-radius: 10px; overflow: hidden; background: #fff; }
.vsheet-gearbox button { border: none; background: #fff; padding: 0 15px; font-size: 13.5px; font-weight: 800; color: #6b7280; cursor: pointer; }
.vsheet-gearbox button + button { border-left: 1.5px solid #d6d9df; }
.vsheet-gearbox button.active { background: #1f2937; color: #fff; }

.vsheet-legend { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: #6b7280; background: #fff5f5; border: 1px solid #fbd5d5; border-radius: 10px; padding: 9px 13px; }
.vsheet-legend-red { flex: none; width: 12px; height: 12px; border-radius: 4px; background: #dc2626; }

.vsheet-section { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
.vsheet-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(180deg, #d4f3de 0%, #c4eed2 100%); border-bottom: 1px solid #9fe0b4; }
.vsheet-section-head h2 { margin: 0; font-size: 16.5px; font-weight: 900; color: #14532d; }
.vsheet-section-meta { display: flex; align-items: center; gap: 10px; }
.vsheet-mark-all { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid #1cb45c; background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; color: #128a43; cursor: pointer; }
.vsheet-mark-all:hover { background: #e3f8eb; }
.vsheet-subtotal { font-size: 14px; font-weight: 900; color: #5f8a6c; min-width: 58px; text-align: right; }
.vsheet-subtotal.is-done { color: #14532d; }

.vsheet-items { list-style: none; margin: 0; padding: 0; }
.vsheet-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid #f0f1f3; }
.vsheet-item:last-child { border-bottom: none; }
.vsheet-item-label p { margin: 0; font-size: 15.5px; font-weight: 650; color: #1f2937; line-height: 1.35; }
.vsheet-essais { font-size: 13px; font-weight: 700; font-style: normal; color: #9aa1ab; white-space: nowrap; }
.vsheet-item.is-red .vsheet-item-label p { color: #b91c1c; font-weight: 700; }
.vsheet-item.has-elim { background: #fff5f5; }

/* flex: 0 1 auto + min-width: 0 : le bloc peut rétrécir, donc le wrap interne fonctionne
   (avec flex:none il restait à sa largeur max et .vsheet-section { overflow:hidden } clippait le toggle). */
.vsheet-item-controls { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Contrôle segmenté unique : libellé du critère + valeur dans le bouton, barème en gras à droite.
   Boutons teintés en permanence (rouge/ambre/vert) ; la sélection passe en couleur pleine vive. */
.vsheet-seg { display: inline-flex; align-items: stretch; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06); }
.vsheet-seg button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 104px; min-height: 50px; padding: 6px 14px; border: none; cursor: pointer; transition: filter 120ms ease; }
.vsheet-seg button + button { border-left: 2px solid #fff; }
.vsheet-seg button strong { font-size: 14px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.vsheet-seg button span { font-size: 12.5px; font-weight: 900; }
.vsheet-seg button:hover { filter: brightness(0.96); }
.vsheet-seg button.is-neg, .vsheet-seg button:first-child { background: #fdecec; }
.vsheet-seg button:first-child strong, .vsheet-seg button:first-child span { color: #d92d20; }
.vsheet-seg button:last-child:not(:first-child) { background: #e3f8eb; }
.vsheet-seg button:last-child:not(:first-child) strong, .vsheet-seg button:last-child:not(:first-child) span { color: #119447; }
.vsheet-seg button.active strong, .vsheet-seg button.active span { color: #fff; }
.vsheet-seg button.active.is-neg { background: #e7180b; }
.vsheet-seg button.active.is-pos { background: #0bbb4c; }
.vsheet-bareme { font-size: 17px; font-weight: 900; color: #1f2937; min-width: 46px; }

/* ── Outil « Questions de vérification » (dans la validation) ── */
.vverif-hint { font-size: 12px; font-weight: 800; color: #5f8a6c; }
.vverif-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.vverif-pick { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.vverif-filter { display: inline-flex; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); }
.vverif-filter button { border: none; background: #fff; cursor: pointer; font-size: 13px; font-weight: 700; color: #475569; padding: 9px 14px; transition: background 120ms ease, color 120ms ease; }
.vverif-filter button + button { border-left: 1px solid #eef0f3; }
.vverif-filter button.active { background: #14532d; color: #fff; }
.vverif-num { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #64748b; }
.app-shell .vverif-num input { width: 92px; min-height: 40px; height: 40px; text-align: center; font-size: 15px; font-weight: 800; border: 1px solid #d6d9df; border-radius: 9px; padding: 6px 8px; }
.vverif-draw { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #c7d2e6; background: #fff; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 800; color: #1e4fb0; cursor: pointer; transition: background 130ms ease, border-color 130ms ease; }
.vverif-draw:hover { background: #f1f5ff; border-color: #9bb6e6; }
.vverif-empty { margin: 0; font-size: 13px; color: #6b7280; font-style: italic; }
.vverif-fiche { display: flex; flex-direction: column; gap: 10px; }
.vverif-fiche-head { display: flex; align-items: center; gap: 10px; }
.vverif-fiche-head strong { font-size: 15px; color: #1f2937; }
.vverif-badge { font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px; }
.vverif-badge.is-vi { background: #e7eefb; color: #2451a8; }
.vverif-badge.is-ve { background: #fef0e3; color: #b3590e; }
.vverif-q { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color 130ms ease, background 130ms ease; }
.vverif-q.is-ok { border-color: #bce6cd; background: #f3fbf6; }
.vverif-q.is-ko { border-color: #f3c0c0; background: #fdf5f5; }
.vverif-q-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vverif-q-title { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; }
.vverif-q-seg { display: inline-flex; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); }
.vverif-q-seg button { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer; font-size: 12.5px; font-weight: 800; padding: 8px 13px; min-height: 40px; transition: background 120ms ease, color 120ms ease; }
.vverif-q-seg button + button { border-left: 1px solid #fff; }
.vverif-q-seg button:first-child { background: #e3f8eb; color: #119447; }
.vverif-q-seg button:last-child { background: #fdecec; color: #d92d20; }
.vverif-q-seg button.active.is-pos { background: #0bbb4c; color: #fff; }
.vverif-q-seg button.active.is-neg { background: #e7180b; color: #fff; }
.vverif-q-text { margin: 0; font-size: 14px; color: #1f2937; font-weight: 600; }
.vverif-reveal { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 1px dashed #c7d2e6; background: #fff; border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; color: #475569; cursor: pointer; }
.vverif-reveal:hover { background: #f7f9fc; }
.vverif-q-answer { margin: 0; font-size: 13px; color: #334155; background: #f7f9fc; border-left: 3px solid #94a3b8; border-radius: 0 8px 8px 0; padding: 8px 12px; }
.vverif-q-answer strong { color: #1f2937; }
.vverif-pilot { margin: 2px 0 0; font-size: 12px; color: #5f8a6c; font-style: italic; }
@media (max-width: 720px) {
  .vverif-q-seg { width: 100%; }
  .vverif-q-seg button { flex: 1; justify-content: center; }
}

.vsheet-elim-toggle { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid #fbd5d5; background: #fff; border-radius: 999px; padding: 8px 13px; font-size: 13px; font-weight: 900; color: #9aa1ab; cursor: pointer; white-space: nowrap; }
.vsheet-elim-toggle.active { background: #dc2626; border-color: #dc2626; color: #fff; }

.vsheet-footer { display: flex; flex-direction: column; gap: 12px; border-top: 2px solid #e5e7eb; padding-top: 14px; }
.vsheet-score-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vsheet-total { display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 16px; border-radius: 12px; background: #f4f5f7; border: 2px solid #d6d9df; }
.vsheet-total strong { font-size: 26px; font-weight: 1000; color: #1f2937; }
.vsheet-total span { font-size: 14px; font-weight: 800; color: #6b7280; }
.vsheet-total.is-pass { background: #f0fdf4; border-color: #16a34a; }
.vsheet-total.is-pass strong { color: #15803d; }
.vsheet-total.is-fail { background: #fff5f5; border-color: #dc2626; }
.vsheet-total.is-fail strong { color: #b91c1c; }
.vsheet-remaining { font-size: 13px; font-weight: 700; color: #9aa1ab; }
.vsheet-elim-banner { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: #b91c1c; background: #fff5f5; border: 1px solid #fbd5d5; border-radius: 10px; padding: 7px 12px; }
.vsheet-pass-banner { font-size: 13px; font-weight: 800; color: #15803d; }
.vsheet-fail-banner { font-size: 13px; font-weight: 800; color: #b45309; }

.vsheet-comment-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vsheet-mic { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #d6d9df; background: #fff; border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 800; color: #1f2937; cursor: pointer; }
.vsheet-mic:hover { border-color: #9aa1ab; }
.vsheet-mic.is-listening { background: #dc2626; border-color: #dc2626; color: #fff; animation: vsheet-pulse 1.4s ease-in-out infinite; }
@keyframes vsheet-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
}
.vsheet-interim { display: block; margin-top: 5px; font-size: 13px; color: #9aa1ab; font-style: italic; }

/* Tablette portrait et mobile : libellé au-dessus, contrôle segmenté pleine largeur en dessous. */
@media (max-width: 880px) {
  .vsheet-item { flex-direction: column; align-items: stretch; gap: 10px; }
  .vsheet-item-controls { justify-content: flex-start; }
  .vsheet-seg { width: 100%; }
  .vsheet-seg button { flex: 1; min-width: 0; }
}
@media (max-width: 720px) {
  .vsheet-seg button { min-height: 54px; }
  .vsheet-seg button strong { white-space: normal; }
  .vsheet-head-fields { width: 100%; }
  .vsheet-field-monitor { flex: 1; }
  .vsheet-field-monitor input { width: 100%; }
  .vsheet-section-head { flex-wrap: wrap; }
}

/* Date de passage des paliers REMC */
.remc-skill-label .remc-level-date { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: #8a929d; cursor: help; }

/* Niveau de l'eleve (badge fiche REMC) + notice schema obligatoire */
.remc-student-level { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #eef2f7; color: #4b5563; font-size: 12px; font-weight: 800; font-style: normal; vertical-align: middle; }
.remc-schema-notice { margin: 0; padding: 9px 13px; border-radius: 10px; background: #fff3da; border: 1px solid #fadfa6; color: #9a6a00; font-size: 13.5px; font-weight: 700; }

/* ============ Espace élève (mobile-first) ============ */
.eleve-login .login-card { max-width: 380px; }
.eleve-login-help { margin: 10px 0 0; font-size: 12.5px; color: #9aa1ab; text-align: center; }

.eleve-app { max-width: 1080px; margin: 0 auto; padding: 0 20px 60px; }
.eleve-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; background: linear-gradient(180deg, #f7f9fc 70%, rgba(247,249,252,0)); }
.eleve-top-brand { display: flex; flex-direction: column; line-height: 1.2; }
.eleve-top-brand strong { font-size: 15px; font-weight: 1000; color: #1f2937; }
.eleve-top-brand span { font-size: 12px; font-weight: 700; color: #8a929d; }
.eleve-logout { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1.5px solid #e3e6eb; border-radius: 12px; background: #fff; color: #6b7280; cursor: pointer; }
.eleve-logout:hover { border-color: #f1591c; color: #f1591c; }

.eleve-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(150deg, #1879ff 0%, #0b56c4 100%); color: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: 0 12px 30px rgba(11,86,196,0.28); }
.eleve-summary-id h1 { margin: 0; font-size: 21px; font-weight: 1000; line-height: 1.15; }
.eleve-code { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,0.2); padding: 2px 9px; border-radius: 999px; }
.eleve-stage { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; opacity: 0.95; }
.eleve-global { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; background: #fff; border-radius: 18px; padding: 12px 18px 10px; box-shadow: 0 8px 22px rgba(8,40,90,0.22); }
.eleve-global .gauge { width: 150px; }
.eleve-global > span { font-size: 11.5px; font-weight: 800; color: #5b6677; }
@media (max-width: 480px) {
  .eleve-summary { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Onglets de l'espace élève (façon Klaxo) : texte souligné, beaucoup d'air. */
.eleve-tabs { display: flex; gap: 24px; padding: 0 4px; margin: 22px 0 8px; border-bottom: 1.5px solid #e8ecf2; }
.eleve-tab { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0 2px 11px; font-size: 15px; font-weight: 800; color: #8a929d; cursor: pointer; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1.5px; transition: color 120ms ease; }
.eleve-tab:hover { color: #1565db; }
.eleve-tab.is-on { color: #1565db; border-bottom-color: #1879ff; }
.eleve-tab-badge { font-size: 11px; font-weight: 900; color: #6b7686; background: #eef1f6; border-radius: 999px; padding: 2px 8px; }
.eleve-tab-badge.is-flame { color: #b4540a; background: #fff0e0; }

/* Heures = chiffres-clés. */
.eleve-hours-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.eleve-hour-chip { background: #f4f7fb; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.eleve-hour-chip span { font-size: 12.5px; font-weight: 700; color: #8a929d; }
.eleve-hour-chip strong { font-size: 23px; font-weight: 1000; color: #1f2937; }
.eleve-verif-tab { margin-top: 18px; }

/* Fiche REMC élève : même rendu que le moniteur (onglets + panneau coloré), en lecture seule. */
.eleve-sheet { margin-top: 18px; }
.eleve-skill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.eleve-skill { padding: 15px 18px; border: 1px solid #eef0f4; border-radius: 14px; background: #fcfdfe; }
.eleve-skill-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.eleve-skill-top .eleve-skill-label { margin: 0; flex: 1; min-width: 200px; }
.eleve-skill-top .eleve-skill-level { margin-bottom: 0; }
.eleve-skill-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.eleve-skill-label { margin: 0; font-size: 14.5px; font-weight: 650; color: #1f2937; line-height: 1.35; }
.eleve-skill-label span { color: #9aa1ab; font-weight: 800; margin-right: 2px; }

.eleve-level { flex: none; font-size: 12px; font-weight: 900; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.eleve-level.lvl-none { background: #f1f3f6; color: #98a0ab; }
.eleve-level.lvl-aborde { background: #e4efff; color: #1c6fe8; }
.eleve-level.lvl-traite { background: #fff3da; color: #c9820a; }
.eleve-level.lvl-assimile { background: #e3f8eb; color: #119447; }
.eleve-level-date { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: #9aa1ab; }

.eleve-selfeval { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.eleve-selfeval-label { font-size: 12px; font-weight: 800; color: #8a929d; }
.eleve-selfeval-btns { display: flex; gap: 8px; max-width: 340px; }
.eleve-se { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 6px 4px; border: 1.5px solid #e3e6eb; background: #fff; border-radius: 13px; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.eleve-se-emoji { font-size: 30px; line-height: 1; filter: grayscale(0.6); opacity: 0.65; transition: filter 120ms ease, opacity 120ms ease, transform 120ms ease; }
.eleve-se:hover .eleve-se-emoji { opacity: 0.85; }
.eleve-se.active .eleve-se-emoji { filter: none; opacity: 1; transform: scale(1.12); }
.eleve-se.active.eleve-se-bad { background: #fdecec; border-color: #f4564e; }
.eleve-se.active.eleve-se-neutral { background: #fff3da; border-color: #f0b429; }
.eleve-se.active.eleve-se-good { background: #e3f8eb; border-color: #1cb45c; }

.eleve-schemas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 150px)); gap: 8px; margin-top: 11px; justify-content: start; }
.eleve-schema-thumb { padding: 0; border: 1.5px solid #e9ebef; border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; aspect-ratio: 4 / 3; }
.eleve-schema-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eleve-no-schema { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: #aab0ba; }

.eleve-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,0.92); display: grid; place-items: center; padding: 20px; }
.eleve-lightbox img { max-width: 100%; max-height: 88vh; border-radius: 12px; background: #fff; }
.eleve-lightbox-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,0.15); color: #fff; cursor: pointer; display: grid; place-items: center; }


/* ===== Panneau accès élève (côté moniteur) ===== */
.student-access { margin-bottom: 16px; }
.student-access-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.student-access-head > i { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 11px; background: #eef4ff; color: #1879ff; flex: none; }
.student-access-head > div { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.student-access-head strong { font-size: 14.5px; color: #1f2937; }
.student-access-head span { font-size: 12.5px; color: #8a929d; }
.student-access-head code { font-weight: 800; color: #1879ff; background: #eef4ff; padding: 1px 6px; border-radius: 6px; }
.student-access-creds { margin-top: 14px; border-top: 1px solid #eceef2; padding-top: 14px; }
.student-access-warn { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: #b45309; }
.student-access-creds dl { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.student-access-creds dl > div { display: flex; justify-content: space-between; gap: 12px; background: #f7f9fc; border: 1px solid #eceef2; border-radius: 10px; padding: 9px 12px; }
.student-access-creds dt { font-size: 12px; font-weight: 800; color: #8a929d; }
.student-access-creds dd { margin: 0; font-size: 14px; font-weight: 800; color: #1f2937; font-family: ui-monospace, monospace; }

/* ===== Indicateur auto-éval sur la fiche moniteur ===== */
.remc-selfeval { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 800; }
.remc-selfeval.se-bad { color: #d92d20; }
.remc-selfeval.se-neutral { color: #c9820a; }
.remc-selfeval.se-good { color: #119447; }

/* Validation en séance — règle « schéma obligatoire pour un élève débutant » : niveaux désactivés + alerte sur le bouton schéma. */
.remc-schema-required { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 800; color: #d92d20; }
.remc-level:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.remc-schema-btn.is-required { border-style: solid; border-color: #f0b4ab; background: #fdecea; color: #d92d20; }
.remc-schema-btn.is-required:hover { border-color: #d92d20; color: #d92d20; }

/* Champ mot de passe avec bouton afficher/masquer (œil) */
.password-field { position: relative; display: block; width: 100%; }
.password-field input { width: 100%; padding-right: 48px; }
.password-toggle { position: absolute; top: 0; bottom: 0; right: 4px; width: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #9aa1ab; cursor: pointer; border-radius: 10px; }
.password-toggle:hover { color: #1f3c8b; }
.password-toggle:active { transform: scale(0.94); }

/* Confirmation de validation (PDF envoyé / téléchargement) */
.vsheet-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 34px 24px; }
.vsheet-done-badge { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 1000; padding: 12px 22px; border-radius: 14px; }
.vsheet-done-badge.is-fav { background: #e3f8eb; color: #119447; }
.vsheet-done-badge.is-def { background: #fdecec; color: #d92d20; }
.vsheet-done-sub { margin: 0; font-size: 15px; font-weight: 800; color: #1f2937; }
.vsheet-done-mail { margin: 0; font-size: 13.5px; font-weight: 700; }
.vsheet-done-mail.mail-sent { color: #119447; }
.vsheet-done-mail.mail-failed { color: #b45309; }
.vsheet-done-mail.mail-pending { color: #6b7280; }
.vsheet-done-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.vsheet-done-actions .showcase-btn { text-decoration: none; }

/* ── Matrice de permissions (Réglages, patron) ── */
.perm-section { margin-top: 24px; }
.perm-section-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.perm-section-head i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #eef2ff; color: #4f46e5; flex-shrink: 0; }
.perm-section-head strong { display: block; font-size: 16px; }
.perm-section-head span { display: block; font-size: 13px; color: var(--showcase-muted); margin-top: 2px; }
.perm-matrix { display: flex; flex-direction: column; gap: 4px; }
.perm-grid { min-width: 600px; }
.perm-row { display: grid; grid-template-columns: minmax(200px, 1fr) repeat(4, 84px); align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--showcase-line); }
.perm-head { font-weight: 800; font-size: 12px; color: var(--showcase-muted); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid var(--showcase-line); }
.perm-head span:not(:first-child) { text-align: center; justify-self: center; }
.perm-group-title { font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #4f46e5; padding: 16px 4px 4px; }
.perm-label { font-size: 13.5px; font-weight: 600; color: #1f2937; line-height: 1.3; }
.perm-cell { display: flex; justify-content: center; }
.perm-switch { position: relative; width: 42px; height: 24px; border-radius: 999px; border: 0; background: #d1d5db; cursor: pointer; padding: 0; transition: background 140ms ease; flex: 0 0 auto; }
.perm-switch.is-on { background: #16a34a; }
.perm-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 140ms ease; }
.perm-switch.is-on .perm-knob { transform: translateX(18px); }
.perm-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.perm-note { font-size: 12px; color: var(--showcase-muted); margin-top: 10px; line-height: 1.4; }

/* ── Refonte compacte : sélecteur de rôle + édition d'un seul rôle ── */
.perm-role-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 6px; }
.perm-role-tab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--showcase-line, #e6ebf3); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 13px; color: #2a3a55; cursor: pointer; transition: all 130ms ease; }
.perm-role-tab:hover { border-color: #2563eb; }
.perm-role-tab.is-on { background: #2563eb; border-color: #2563eb; color: #fff; }
.perm-role-badge { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(0, 0, 0, 0.1); border-radius: 5px; padding: 1px 5px; }
.perm-role-tab.is-on .perm-role-badge { background: rgba(255, 255, 255, 0.25); }
.perm-role-add { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed #aebfdc; background: #f6f9ff; border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 13px; color: #1d4fd0; cursor: pointer; }
.perm-role-add:hover { background: #eaf1ff; }

.perm-single { border: 1px solid var(--showcase-line, #e6ebf3); border-radius: 14px; padding: 6px 14px 12px; }
.perm-single-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--showcase-line, #eef1f6); }
.perm-single-head strong { font-size: 16px; font-weight: 900; color: #15264a; }
.perm-sys-tag { font-size: 11.5px; font-weight: 800; color: var(--showcase-muted, #6b7686); text-transform: uppercase; letter-spacing: 0.03em; }
.perm-del-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #f0c4bd; background: #fdeeec; color: #c2402f; border-radius: 9px; padding: 7px 12px; font-weight: 800; font-size: 12.5px; cursor: pointer; }
.perm-del-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.perm-grp { padding-top: 4px; }
.perm-grp-title { font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #4f46e5; padding: 14px 2px 2px; }
.perm-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--showcase-line, #f1f4f9); }
.perm-line:last-child { border-bottom: 0; }
.perm-line-label { font-size: 13.5px; font-weight: 600; color: #1f2937; line-height: 1.3; }

.perm-modal-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; padding: 18px; }
.perm-modal { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 24px 60px rgba(10, 20, 50, 0.4); display: flex; flex-direction: column; gap: 13px; }
.perm-modal-head { display: flex; align-items: center; justify-content: space-between; }
.perm-modal-head strong { font-size: 17px; font-weight: 900; color: #15264a; }
.perm-modal-x { border: 0; background: #eef1f6; width: 28px; height: 28px; border-radius: 8px; color: #5a6678; cursor: pointer; }
.perm-modal-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 800; color: #46566e; }
.perm-modal-field input, .perm-modal-field select { font-size: 14px; padding: 10px 12px; border: 1px solid #d8e2f3; border-radius: 10px; font-weight: 600; color: #15264a; }
.perm-modal-err { margin: 0; font-size: 12.5px; font-weight: 700; color: #c2402f; }
.perm-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }
.perm-modal-cancel { border: 1px solid #e0e6f0; background: #fff; border-radius: 9px; padding: 9px 15px; font-weight: 800; font-size: 13px; color: #46566e; cursor: pointer; }

/* ───────────────────────────────────────────────────────────────────────────
   Liste Élèves « façon Klaxo » : recherche + lignes plates dépliables (sk-*)
   et fiche-dossier en lecture seule (sd-*). Identité colorée Logi Z conservée.
   ─────────────────────────────────────────────────────────────────────────── */
.sk-list { display: flex; flex-direction: column; gap: 4px; }
.sk-search { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--showcase-line); border-radius: 12px; padding: 11px 14px; color: var(--showcase-muted); }
.sk-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14.5px; font-weight: 600; color: var(--showcase-ink); }
.sk-search:focus-within { border-color: #f1591c; box-shadow: 0 0 0 3px rgba(241, 89, 28, 0.12); }
.sk-count { margin: 4px 2px 8px; font-size: 12.5px; font-weight: 800; color: var(--showcase-muted); }
.sk-empty { margin: 18px 2px; font-size: 14px; font-weight: 700; color: var(--showcase-muted); }

.sk-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-item { background: #fff; border: 1px solid var(--showcase-line); border-radius: 14px; overflow: hidden; transition: box-shadow 140ms ease, border-color 140ms ease; }
.sk-item:hover { box-shadow: 0 4px 16px rgba(20, 38, 74, 0.07); }
.sk-item.is-open { border-color: #f1591c; box-shadow: 0 8px 26px rgba(241, 89, 28, 0.1); }

.sk-row { width: 100%; display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.sk-row:hover { background: #fbfcfe; }
.sk-name { flex: 1 1 200px; min-width: 0; }
.sk-name strong { font-size: 15.5px; font-weight: 900; color: var(--showcase-ink); }
.sk-contact { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; min-width: 0; }
.sk-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: #1d6ad6; text-decoration: none; }
.sk-link:hover { text-decoration: underline; }
.sk-metrics { display: flex; gap: 14px; flex: 0 0 auto; flex-wrap: wrap; }
.sk-metrics em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--showcase-muted); }
.sk-chev { flex: 0 0 auto; color: var(--showcase-muted); transition: transform 160ms ease; }
.sk-item.is-open .sk-chev { transform: rotate(180deg); color: #f1591c; }

.sk-more { display: flex; justify-content: center; padding: 18px 0 6px; }
.sk-more-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--showcase-line); background: #fff; border-radius: 12px; padding: 11px 22px; font-weight: 700; font-size: 13.5px; color: #33415c; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease; box-shadow: 0 1px 2px rgba(20, 30, 55, 0.05); }
.sk-more-btn svg { color: #8a96ab; transition: transform 160ms ease, color 140ms ease; }
.sk-more-btn:hover { background: #f1f5ff; border-color: #c5d3ef; color: #1e4fb0; transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(30, 79, 176, 0.5); }
.sk-more-btn:hover svg { color: #1e4fb0; transform: translateY(2px); }
.sk-more-btn:active { transform: translateY(0); }

/* ── Bloc « Gestion administrative » : section repliable soignée (plus de triangle natif brut) ── */
.student-admin-panel { margin-top: 20px; border: 1px solid var(--showcase-line); border-radius: 16px; background: #fff; overflow: hidden; transition: box-shadow 150ms ease, border-color 150ms ease; }
.student-admin-panel[open] { border-color: #dbe2ee; box-shadow: 0 14px 36px -22px rgba(20, 30, 55, 0.3); }
.student-admin-panel > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 13px; padding: 15px 18px; transition: background 130ms ease; }
.student-admin-panel > summary::-webkit-details-marker { display: none; }
.student-admin-panel > summary:hover { background: #f7f9fc; }
.sa-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #eef2fb; color: #3b5b8c; flex: none; }
.sa-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sa-text strong { font-size: 14.5px; font-weight: 750; color: #1c2436; letter-spacing: -0.01em; }
.sa-text small { font-size: 12px; color: #7a8699; }
.sa-chev { margin-left: auto; color: #9aa5b8; flex: none; transition: transform 200ms ease; }
.student-admin-panel[open] .sa-chev { transform: rotate(180deg); }
.sa-body { padding: 6px 16px 16px; border-top: 1px solid var(--showcase-line); }

/* ── Fiche-dossier dépliée ── */
.sd-body { border-top: 1px solid var(--showcase-line); background: #f9fafc; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.sd-loading, .sd-error { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--showcase-muted); }
.sd-error { color: #c2402f; }

.sd-identity { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; background: #fff; border: 1px solid var(--showcase-line); border-radius: 12px; padding: 14px 16px; }
.sd-id-col { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.sd-id-col > div { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; gap: 10px; }
.sd-id-col dt { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; color: var(--showcase-muted); }
.sd-id-col dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--showcase-ink); word-break: break-word; }
.sd-link { display: inline-flex; align-items: center; gap: 5px; color: #1d6ad6; text-decoration: none; font-weight: 800; }
.sd-link:hover { text-decoration: underline; }
.sd-id-metrics { display: flex; flex-direction: column; gap: 2px; }
.sd-id-metrics span { font-size: 13px; font-weight: 600; color: var(--showcase-ink); }
.sd-remc-global { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 6px; }
.sd-remc-global .gauge { width: 150px; }
.sd-remc-global > span { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; color: var(--showcase-muted); }

/* Les onglets REMC natifs deviennent 4 grandes cartes compétences colorées (façon Klaxo), scopé au dossier élève.
   Pas de cartes en double : ces onglets restent fonctionnels (clic = change la compétence affichée dans la grille). */
.sd-body .remc-tabs { gap: 12px; margin-bottom: 14px; }
.sd-body .remc-tab { align-items: center; justify-content: center; text-align: center; gap: 5px; padding: 16px 12px; border-radius: 14px; box-shadow: 0 4px 14px rgba(20, 38, 74, 0.1); }
.sd-body .remc-tab strong { font-size: 14px; font-weight: 800; }
.sd-body .remc-tab .gauge { width: 62px; }
.sd-body .remc-tab:not(.active) { opacity: 0.78; }
.sd-body .remc-tab.active { box-shadow: 0 0 0 3px rgba(20, 38, 74, 0.18), 0 6px 18px rgba(20, 38, 74, 0.16); }

.sd-locked { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px dashed #d0d8e6; border-radius: 12px; padding: 14px 16px; font-size: 13.5px; font-weight: 700; color: var(--showcase-muted); }
.sd-locked svg { color: #9aa6b8; flex: 0 0 auto; }
.sd-edit-hint { margin: 0; background: #fff7e8; border: 1px solid #f1d79a; border-radius: 10px; padding: 10px 13px; font-size: 12.5px; font-weight: 600; color: #8a5a12; }
.sd-edit-hint--lock { display: flex; align-items: center; gap: 7px; background: #f3f5f9; border-color: #dbe2ec; color: #5a6678; }
.sd-edit-hint--lock svg { flex: 0 0 auto; color: #9aa6b8; }

.sd-actions { display: flex; }
.sd-validation-link { display: inline-flex; align-items: center; gap: 9px; background: #f1591c; color: #fff; border-radius: 11px; padding: 11px 18px; font-weight: 900; font-size: 14px; text-decoration: none; box-shadow: 0 6px 18px rgba(241, 89, 28, 0.25); transition: background 130ms ease; }
.sd-validation-link:hover { background: #d8490f; }

@media (max-width: 900px) {
  .sd-body .remc-tabs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .sk-row { flex-wrap: wrap; gap: 8px 14px; }
  .sk-name { flex: 1 1 100%; }
  .sk-metrics { gap: 10px; }
  .sk-chev { position: absolute; }
  .sk-contact, .sk-link { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .sd-identity { grid-template-columns: 1fr; gap: 12px; }
  .sd-id-col > div { grid-template-columns: 96px 1fr; }
}
@media (max-width: 480px) {
  .sk-search { padding: 10px 12px; }
  .sd-body { padding: 14px 12px; }
}

/* Panneau de débrief en tête de fiche élève (ouvert depuis le planning via ?lesson=). Bordure dorée cohérente avec
   la pilule « Extension » (#f0c45b / fond #fdf3d6) : signale qu'on est dans un contexte d'action « séance ». */
.sd-debrief { border: 1.5px solid #f0c45b; border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
.sd-debrief-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: #fdf3d6; padding: 11px 16px; }
.sd-debrief-head > strong { font-size: 14.5px; color: #6f560e; margin-right: 4px; }
.sd-debrief-chip { font-size: 12px; font-weight: 700; color: #7a5e0f; background: #fff; border: 1px solid #ecd591; border-radius: 999px; padding: 2px 10px; }
.sd-debrief-badge { font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 2px 10px; margin-left: auto; }
.sd-debrief-badge.is-done { color: #16813d; background: #e4f4ea; }
.sd-debrief-badge.is-soon { color: #6b5400; background: #fbefc6; }
.sd-debrief-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: #fff; }
.sd-debrief-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #475569; }
.sd-debrief-field textarea { width: 100%; resize: vertical; min-height: 150px; line-height: 1.5; padding: 10px 12px; border: 1px solid #dce4ef; border-radius: 10px; font: inherit; font-weight: 400; color: #1f2937; }
.sd-debrief-check { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13px; color: #475569; cursor: pointer; }
.sd-debrief-check input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; flex: 0 0 16px; margin: 0; accent-color: #185fa5; }
.sd-debrief-signed { font-size: 13.5px; font-weight: 700; color: #16813d; margin: 0; }
.sd-debrief-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sd-debrief-hint { font-size: 12.5px; color: #94a3b8; margin: 0; }

.pl-debrief-link { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; margin: 4px 0 2px; }

/* Rappel « séances à débriefer » en tête de planning (moniteur) — thème doré cohérent avec le panneau débrief. */
.debrief-reminder { background: #fdf7e6; border: 1.5px solid #f0c45b; border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; }
.debrief-reminder .dr-head { margin: 0 0 9px; font-size: 14px; font-weight: 800; color: #6f560e; display: flex; align-items: center; gap: 7px; }
.debrief-reminder .dr-head svg { color: #c79a23; flex: 0 0 auto; }
.dr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dr-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #fff; border: 1px solid #f0e3b8; border-radius: 10px; text-decoration: none; color: #1f2937; font-size: 13.5px; transition: border-color 120ms ease, background 120ms ease; }
.dr-item:hover { border-color: #e3bd55; background: #fffdf6; }
.dr-when { font-weight: 700; color: #7a5e0f; min-width: 92px; }
.dr-who { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.dr-type { color: #6b7280; font-size: 12.5px; }
.dr-go { margin-left: auto; font-weight: 800; color: #c0830f; white-space: nowrap; }
.dr-more { margin: 8px 2px 0; font-size: 12.5px; font-weight: 600; color: #8a6d12; }
@media (max-width: 600px) {
  .dr-item { flex-wrap: wrap; gap: 4px 10px; }
  .dr-when { min-width: 0; }
  .dr-type { order: 3; }
  .dr-go { margin-left: 0; flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .sd-debrief-head > strong { flex: 1 1 100%; }
  .sd-debrief-badge { margin-left: 0; }
  .sd-debrief-actions .showcase-btn { flex: 1; }
}