/* ═══════════════════════════════════════════════
   DESIGN SYSTEM — repris à l'identique de header.php
   ("Calculs points de formation" / gestion.cjbb.be, style GOGO/Vuexy)
   ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #f4f5fa;
  --surface:   #ffffff;
  --panel:     #f8f8fc;
  --border:    #ebe9f1;
  --border2:   #d8d6de;

  --text:      #5e5873;
  --text-s:    #3d3852;
  --muted:     #b9b9c3;
  --hint:      #d8d6de;

  --accent:    #7367f0;
  --accent-d:  #5e50ee;
  --accent-bg: #f2f1ff;
  --accent-tx: #5e50ee;

  --green-bg:  #e8f8ee; --green-tx: #28a745; --green-bd: #b3e6c3;
  --red-bg:    #fce4e4; --red-tx:   #ea5455; --red-bd:   #f9b8b8;
  --blue-bg:   #dff0ff; --blue-tx:  #00a1f1; --blue-bd:  #a8d8ff;
  --amber-bg:  #fff3e0; --amber-tx: #ff9f43; --amber-bd: #ffd8a8;
  --purple-bg: #f2f1ff; --purple-tx:#7367f0; --purple-bd:#c9c3fb;
  --teal-bg:   #d6f8f5; --teal-tx:  #00cfe8; --teal-bd:  #8aeaf4;

  --radius:    18px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --shadow:    0 4px 24px 0 rgba(34,41,47,.1);
  --shadow-sm: 0 2px 10px 0 rgba(34,41,47,.08);
  --shadow-md: 0 8px 32px 0 rgba(34,41,47,.14);

  --sidebar-w: 250px;
}

html[data-theme="dark"] {
  --bg:        #161d31;
  --surface:   #283046;
  --panel:     #242b3d;
  --border:    #3b4253;
  --border2:   #4a5066;

  --text:      #d0d2d6;
  --text-s:    #e8e8ec;
  --muted:     #676d7d;
  --hint:      #4a5066;

  --accent:    #7367f0;
  --accent-d:  #8a7ff5;
  --accent-bg: #1f1b3a;
  --accent-tx: #9e96f5;

  --green-bg:  #1a3226; --green-tx: #28c76f; --green-bd: #1e4730;
  --red-bg:    #3b1f1f; --red-tx:   #ea5455; --red-bd:   #5a2a2a;
  --blue-bg:   #1a2d3b; --blue-tx:  #00cfe8; --blue-bd:  #1d4055;
  --amber-bg:  #2e2011; --amber-tx: #ff9f43; --amber-bd: #4a3518;
  --purple-bg: #1f1b3a; --purple-tx:#9e96f5; --purple-bd:#3a3060;
  --teal-bg:   #0e2830; --teal-tx:  #00cfe8; --teal-bd:  #1a4a55;

  --shadow:    0 4px 24px 0 rgba(0,0,0,.4);
  --shadow-sm: 0 2px 10px 0 rgba(0,0,0,.3);
  --shadow-md: 0 8px 32px 0 rgba(0,0,0,.5);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}
h1, h2, h3 { color: var(--text-s); }
input, textarea, select, button { box-sizing: border-box; }

/* ---------- Page de connexion ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-inner { width: 100%; max-width: 400px; }
.logo-block { text-align: center; margin-bottom: 1.75rem; }
.logo-block img { height: 68px; width: auto; display: block; margin: 0 auto 18px; }
.logo-block h1 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; color: var(--text-s); }
.logo-block p { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ---------- Cartes ---------- */
.card { background: var(--surface); border: none; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
.card h2 { font-size: 17px; font-weight: 700; color: var(--text-s); margin-bottom: 4px; }
.card .sub { font-size: 13px; color: var(--muted); margin-bottom: 1.5rem; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 10px; }
.card-title { font-size: 13px; font-weight: 700; letter-spacing: -.1px; }
.card-subtitle { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---------- Stats ---------- */
.stat { background: var(--surface); border: none; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; transition: transform .2s, box-shadow .2s; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-num { font-size: 28px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; color: var(--text-s); }
.stat-lbl { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 5px; font-weight: 600; }
.stats-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 1.25rem; }

/* ---------- Formulaires ---------- */
.fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.fg label, label { font-size: 13px; font-weight: 500; color: var(--text); display: block; margin-top: 0.6rem; }
.fg label { margin-top: 0; }
.fg input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.fg select, .fg textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface);
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 3px 10px 0 rgba(115,103,240,.2);
}

/* Cases de saisie du code 2FA façon PayPal (18/08/2026, demande d'Anthony :
   "change la manière de rentrer le code comme sur PayPal") — 6 cases à un
   chiffre plutôt qu'un champ texte unique, cf. public/admin/login.php. */
.otp-inputs { display: flex; gap: 8px; justify-content: center; margin: 0.5rem 0 0.25rem; }
.otp-box {
  width: 44px; height: 54px; padding: 0; text-align: center;
  font-size: 22px; font-weight: 700; font-family: inherit;
}
@media (max-width: 380px) {
  .otp-box { width: 38px; height: 48px; font-size: 19px; }
}

/* Zone de dépôt de fichier par glisser-déposer — remplace le rendu natif de
   <input type="file"> partout sur le site (14/08/2026, sur demande
   d'Anthony). Le <input> reste réellement présent, superposé en pleine
   opacité 0 sur la zone visuelle : accessibilité clavier/lecteur d'écran et
   compatibilité avec <label for="..."> préservées à l'identique, seul le
   rendu change (cf. enhanceFileInputs() dans theme.js). */
.file-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 18px 14px; min-height: 84px;
  border: 2px dashed var(--border2); border-radius: var(--radius-sm); background: var(--panel);
  transition: border-color .15s, background .15s;
}
.file-drop:hover { border-color: var(--accent); }
.file-drop.dragover { border-color: var(--accent); background: var(--accent-bg); }
.file-drop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; padding: 0; border: none; cursor: pointer;
}
.file-drop-icon { color: var(--hint); line-height: 0; }
.file-drop.dragover .file-drop-icon, .file-drop.has-file .file-drop-icon { color: var(--accent); }
.file-drop-text { font-size: 13px; color: var(--text); }
.file-drop-text strong { color: var(--accent-tx); font-weight: 600; }
.file-drop-hint { font-size: 11px; color: var(--hint); }
.file-drop-filename { font-size: 13px; font-weight: 600; color: var(--text-s); word-break: break-all; }

/* Bloc résumé (rôle/adversaire/n° de rôle/échéance) sur les pages
   publiques confirmer.php / deposer.php — plus aéré que la grille de
   formulaire compacte .fg (gap 6px), sur demande d'Anthony (14/08/2026 :
   "espace-moi un peu tout ça"). */
.info-summary { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 32px; }
.info-summary p { margin: 0; line-height: 1.5; }

/* Variante plus aérée de .fg, pour les champs qu'on veut clairement
   détacher les uns des autres (ex. les 2 zones de dépôt de fichier de
   deposer.php) plutôt que le margin-bottom:16px compact par défaut. */
.fg-lg { margin-bottom: 30px; }

/* Cases à cocher / radios — jamais étirées en pleine largeur par la règle
   générique ci-dessus (bug corrigé le 14/08 : elles héritaient de width:100%,
   padding et border, ce qui les rendait géantes et vides). */
input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; margin: 0;
}
.fg-check {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 2px 0;
}
.fg-check label { margin: 0; font-weight: 500; cursor: pointer; }

/* Dictée vocale sur les champs "remarques" (fiche de cotation, 15/08/2026,
   demande d'Anthony) — bouton micro flottant en haut à droite du textarea,
   masqué en JS (voice.js) sur les navigateurs sans Web Speech API. */
.voice-field { position: relative; }
.voice-field textarea { padding-right: 42px; }
.voice-btn {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.voice-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.voice-btn:hover { border-color: var(--accent); color: var(--accent-tx); background: var(--accent-bg); }
.voice-btn.is-listening {
  background: var(--red-bg); border-color: var(--red-bd); color: var(--red-tx);
  animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 84, 85, .35); }
  50% { box-shadow: 0 0 0 6px rgba(234, 84, 85, 0); }
}

/* Grille de champs 2 colonnes — regroupe les champs courts liés (nom/prénom,
   email/date...) au lieu de les empiler en pleine largeur un par un. */
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px;
}
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Titre de section hors carte (ex: "Ajouter un stagiaire" au-dessus du form) */
.section { margin-bottom: 1.75rem; }
.section-title { font-size: 16px; font-weight: 700; color: var(--text-s); margin-bottom: 1rem; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* ---------- Dashboard ---------- */
.stat-card { display: flex; align-items: center; gap: 14px; }
.stat-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.stat-icon svg { width: 20px; height: 20px; stroke-width: 2; fill: none; }
.stat-icon.purple { background: var(--purple-bg); color: var(--purple-tx); }
.stat-icon.blue   { background: var(--blue-bg);   color: var(--blue-tx); }
.stat-icon.green  { background: var(--green-bg);  color: var(--green-tx); }
.stat-icon.amber  { background: var(--amber-bg);  color: var(--amber-tx); }
.stat-icon.teal   { background: var(--teal-bg);   color: var(--teal-tx); }
.stat-icon.red    { background: var(--red-bg);    color: var(--red-tx); }

.progress { height: 8px; border-radius: 999px; background: var(--panel); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(118deg, var(--accent), rgba(115,103,240,.7)); transition: width .3s ease; }

.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.quick-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px; border-radius: var(--radius-sm); background: var(--panel);
  text-decoration: none; color: var(--text); transition: all .18s; border: 1px solid transparent;
}
.quick-link:hover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-tx); transform: translateY(-1px); }
.quick-link .stat-icon { width: 36px; height: 36px; }
.quick-link .stat-icon svg { width: 17px; height: 17px; }
.quick-link span.ql-label { font-size: 13px; font-weight: 600; }

.empty-hint { color: var(--muted); font-size: 13px; text-align: center; padding: 1.5rem; }

/* Deux cartes côte à côte (ex: Tribunal 1 / Tribunal 2) */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.card h3 { font-size: 14px; font-weight: 700; color: var(--text-s); margin-bottom: 1rem; }
.card table { box-shadow: none; }

/* ---------- Boutons ---------- */
.btn, .btn-submit {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 10px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 500; font-family: inherit; text-decoration: none; cursor: pointer;
  transition: all .2s; box-shadow: var(--shadow-sm);
  /* 18/08/2026 — cause racine (enfin identifiée) du "les boutons ne sont
     pas de la même hauteur" reproché à plusieurs reprises : un <button>
     garde par défaut appearance:auto (confirmé via getComputedStyle), ce
     qui sur Safari/WebKit fait garder un habillage natif imposant une
     hauteur minimale propre à l'OS, ignorée par Chrome mais PAS par
     Safari — un <a class="btn"> n'a jamais ce problème (appearance:none
     par défaut sur les liens). Ce n'était donc jamais un souci de
     padding/bordure/ombre (déjà identiques), mais ce style natif résiduel
     sur les <button> (Supprimer, Ajouter, Marquer reconvoqué(e)...).
     Neutralisé une bonne fois pour toutes ici, pour TOUS les boutons du
     site. */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.btn:hover { background: var(--panel); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-submit { width: 100%; padding: 12px; border: none; }

.btn-primary, .btn-submit {
  background: linear-gradient(118deg, var(--accent), rgba(115,103,240,.7));
  color: #fff; border: none; box-shadow: 0 4px 18px 0 rgba(115,103,240,.55);
}
.btn-primary:hover, .btn-submit:hover {
  background: linear-gradient(118deg, var(--accent), rgba(115,103,240,.85));
  box-shadow: 0 6px 24px 0 rgba(115,103,240,.65); transform: translateY(-2px);
}
.btn.secondary { background: var(--surface); color: var(--text); }
/* 18/08/2026, demande d'Anthony : "je veux des boutons identiques avec
   juste le fond de couleur différente" — .btn.danger différait encore
   par sa bordure et la couleur de son texte (rouges), donnant
   l'impression d'un bouton "outline" à côté du bouton "Éditer" plein.
   Aucune surcharge de bordure/texte/ombre/survol ici : .btn.danger
   hérite tout de .btn tel quel (bordure var(--border) neutre, texte
   var(--text), ombre, survol -> var(--panel)), SEUL le fond change. */
.btn.danger { background: var(--red-bg); }
.btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }

/* Bouton "filtre" à 2 états (ex: bascule "éligibles seulement") : neutre au
   repos, teinté accent quand le filtre est actif — donne un vrai retour
   visuel sur l'état courant plutôt qu'un simple bouton secondaire. */
.btn.filter-toggle.is-on { background: var(--accent-bg); color: var(--accent-tx); border-color: transparent; box-shadow: none; }
.btn.filter-toggle.is-on:hover { background: var(--accent-bg); transform: translateY(-1px); }

/* Boutons d'action ronds à icône seule (18/08/2026, demande d'Anthony :
   "remplace les boutons de ce tableau par des icônes dans un cercle" —
   admin/stagiaires.php, colonne actions). Taille fixe identique quel que
   soit l'élément (<a> ou <button>) puisqu'il n'y a plus de texte à
   mesurer — élimine par construction tout risque de désalignement entre
   les deux, en plus du appearance:none hérité de .btn ci-dessus.
   aria-label obligatoire à l'usage : une icône seule n'est pas lisible
   par un lecteur d'écran (cf. title= + aria-label= sur chaque bouton). */
.btn-icon {
  width: 34px; height: 34px; padding: 0; border-radius: 999px; flex-shrink: 0;
}
.btn-icon svg { width: 16px; height: 16px; }
.btn-icon.primary:hover { background: var(--accent-bg); color: var(--accent-tx); border-color: transparent; }
.btn-icon.danger:hover { background: var(--red-bg); color: var(--red-tx); border-color: transparent; }
.btn-icon.warn:hover { background: var(--amber-bg); color: var(--amber-tx); border-color: transparent; }

/* ---------- Messages ---------- */
/* position:relative + padding-left/absolute icon plutôt que display:flex :
   un flash-ok/flash-err contient souvent du HTML riche (liens, <code>,
   <strong>...) — en display:flex, CHAQUE élément inline direct devient son
   propre item flex et casse le texte en colonnes séparées au lieu de
   s'écouler normalement (bug constaté sur annees.php et stagiaires_import.php,
   14/08/2026). Cette approche n'a pas ce problème quel que soit le contenu. */
.err, .flash-err {
  position: relative; background: var(--red-bg); color: var(--red-tx);
  border-radius: var(--radius-sm); padding: 11px 14px 11px 34px; font-size: 13px; margin-bottom: 18px; line-height: 1.45;
}
.err::before, .flash-err::before { content: '⚠'; position: absolute; left: 14px; top: 11px; }
.flash-ok {
  position: relative; background: var(--green-bg); color: var(--green-tx);
  border-radius: var(--radius-sm); padding: 11px 14px 11px 34px; font-size: 13px; margin-bottom: 18px; line-height: 1.45;
}
.flash-ok::before { content: '✓'; position: absolute; left: 14px; top: 11px; }
.links { text-align: center; margin-top: 1.5rem; }
.links a { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 500; }
.links a:hover { text-decoration: underline; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; }
th { background: var(--panel); padding: 8px 12px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--panel); }

/* admin/stagiaires.php (18/08/2026, demande d'Anthony : "aligne les
   noms au milieu") — lignes courtes à une seule ligne, le
   vertical-align:top par défaut du tableau faisait paraître le texte
   "collé en haut" par rapport aux boutons Éditer/Supprimer. */
#stag-table td { vertical-align: middle; }
/* La largeur minimale commune forcée sur .btn (17/08 -> 18/08/2026) n'a
   plus lieu d'être : les actions de cette colonne sont passées à
   .btn-icon (boutons ronds à icône, largeur fixe 34px par construction,
   cf. règle .btn-icon plus bas), donc plus aucun texte de largeur
   variable à égaliser. */

/* Indicateur de statut de convocation (18/08/2026 v2 — suite à "Ce design
   est horrible, refais-moi quelque chose de beau", admin/stagiaires.php) :
   remplace le fond de ligne pastel plein (v1 ci-dessus, retiré) par une
   fine barre de couleur insérée en inset-box-shadow sur la 1re cellule
   (n'affecte pas la largeur/le layout, contrairement à un border-left) +
   une pastille .status-dot dédiée dans la colonne Statut. Le fond plein
   sur toute la ligne écrasait le texte et donnait un rendu "surligneur" ;
   ce traitement, façon Linear/Notion, reste lisible au premier coup d'œil
   tout en gardant des lignes blanches propres. */
tr.row-conv-ok td:first-child   { box-shadow: inset 3px 0 0 0 var(--green-tx); }
tr.row-conv-bad td:first-child  { box-shadow: inset 3px 0 0 0 var(--red-tx); }
tr.row-conv-none td:first-child { box-shadow: inset 3px 0 0 0 var(--amber-tx); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--green-bg); color: var(--green-tx); }
.badge.no { background: var(--red-bg); color: var(--red-tx); }
.badge.warn { background: var(--amber-bg); color: var(--amber-tx); }
mark { background: var(--accent-bg); color: var(--accent-tx); padding: 0 2px; border-radius: 3px; }

/* Pastille de statut à puce colorée (ex. colonne "Statut" et légende de
   admin/stagiaires.php) — plus discrète qu'un badge à fond plein, pensée
   pour être répétée sur toutes les lignes d'un tableau sans le charger
   visuellement. */
.status-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.status-dot.ok   { color: var(--green-tx); }
.status-dot.warn { color: var(--amber-tx); }
.status-dot.bad  { color: var(--red-tx); }

/* ---------- Modal (porté depuis gestion.cjbb.be, ex. gestion des présidents) ---------- */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; }
.overlay.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-width: 480px; width: 100%; box-shadow: var(--shadow-md); }
.modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-header span { font-size: 16px; font-weight: 600; }
.modal-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--muted); line-height: 1; }
.modal-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 12px; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.sig-preview-box { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: var(--panel); text-align: center; min-height: 60px; display: flex; align-items: center; justify-content: center; }
.sig-preview-box img { max-height: 55px; max-width: 200px; object-fit: contain; }
.sig-preview-box span { font-size: 12px; color: var(--hint); }
.sig-thumb { max-height: 38px; max-width: 120px; object-fit: contain; border: 1px solid var(--border); border-radius: 4px; padding: 3px; background: #fff; display: block; }

/* ---------- Pastilles année judiciaire (porté depuis gestion.cjbb.be) ---------- */
.year-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.25rem; }
.year-tab { padding: 6px 16px; border: 1px solid var(--border); border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer; background: var(--surface); color: var(--muted); transition: all .12s; font-family: inherit; text-decoration: none; display: inline-block; }
.year-tab:hover { border-color: var(--border2); color: var(--text); }
.year-tab.active { background: var(--text); color: var(--surface); border-color: var(--text); }
/* Variante ambre pour un pill "actif" hors sélecteur d'année (ex. filtre
   "Reportés / Annulés" de admin/stagiaires.php, 17/08/2026) — même boîte
   exactement que .year-tab/.year-tab.active (hérité), seule la couleur
   change, pour rester pixel-aligné avec les autres pills au lieu d'un
   style en ligne ad hoc. */
.year-tab.active-warn { background: var(--amber-bg); color: var(--amber-tx); border-color: transparent; font-weight: 700; }

/* 18/08/2026, demande d'Anthony (bulles de filtre "avec/sans date de
   séance/reportés") — mêmes couleurs que les lignes du tableau
   correspondantes (.row-conv-*), même traitement que .active-warn. */
.year-tab.active-ok { background: var(--green-bg); color: var(--green-tx); border-color: transparent; font-weight: 700; }
.year-tab.active-danger { background: var(--red-bg); color: var(--red-tx); border-color: transparent; font-weight: 700; }

/* ---------- Sidebar ---------- */
.site-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--surface); box-shadow: 0 0 15px 0 rgba(34,41,47,.05);
  display: flex; flex-direction: column; z-index: 500; overflow-y: auto; overflow-x: hidden;
  transition: background .2s;
}
html[data-theme="dark"] .site-sidebar { box-shadow: 0 0 15px 0 rgba(0,0,0,.3); }

.sidebar-logo { display: flex; align-items: center; padding: 22px 20px 18px; flex-shrink: 0; text-decoration: none; }
.sidebar-logo img { width: 100%; height: auto; transition: opacity .2s; }
.sidebar-logo:hover img { opacity: .8; }

.sidebar-section { padding: 10px 14px; flex: 1; }
.sidebar-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 6px; display: block; }

.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; transition: all .18s; margin-bottom: 2px;
  white-space: nowrap;
}
.nav-item svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }
.nav-item:hover { background: var(--accent-bg); color: var(--accent-tx); }
.nav-item:hover svg { stroke: var(--accent-tx); }
.nav-item.active {
  background: linear-gradient(118deg, var(--accent), rgba(115,103,240,.7));
  color: #fff; font-weight: 600; box-shadow: 0 4px 18px 0 rgba(115,103,240,.4);
}
.nav-item.active svg { stroke: #fff; }
.nav-item.nav-logout:hover { background: var(--red-bg); color: var(--red-tx); }
.nav-item.nav-logout:hover svg { stroke: var(--red-tx); }

.sidebar-bottom { padding: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sidebar-user { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.theme-toggle {
  width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel);
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; transition: all .18s;
}
.theme-toggle:hover { background: var(--accent-bg); color: var(--accent-tx); border-color: var(--accent); }
.theme-toggle svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; pointer-events: none; }

main.content { padding-left: var(--sidebar-w); }
/* 18/08/2026, demande d'Anthony : "élargis le tableau pour qu'on n'ait
   pas de scroll à droite" — 1200px était trop juste pour les tableaux à
   beaucoup de colonnes (ex. admin/stagiaires.php : nom/prénom/email/
   année/date séance/statut/remarques/actions), qui débordaient dans le
   scroll horizontal de .table-wrap. 1200px -> 1500px. */
main.content .inner { max-width: 1500px; margin: 0 auto; padding: 2.5rem 1.75rem 4rem; }
main.content h1 { font-size: 26px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 1.25rem; }

/* Titre de page + actions (Importer/Ajouter...) alignés sur la même ligne
   (15/08/2026, demande d'Anthony) — cf. admin_header($title, $actionsHtml)
   dans includes/admin_layout.php. */
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 1.25rem; }
.page-head h1 { margin-bottom: 0; }
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
  .site-sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 40px 0 rgba(0,0,0,.28); width: min(82vw, 300px); }
  body.sidebar-open .site-sidebar { transform: translateX(0); }
  main.content { padding-left: 0; padding-top: 56px; }
  .mobile-topbar {
    display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; height: 56px;
    background: var(--surface); box-shadow: var(--shadow-sm); z-index: 400; padding: 0 12px;
  }
  .mobile-topbar .mt-brand { font-weight: 800; letter-spacing: .04em; color: var(--accent); font-size: 16px; text-decoration: none; }
  .hamburger {
    width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center;
    justify-content: center; color: var(--text-s); border-radius: var(--radius-sm); flex-shrink: 0; transition: background .18s;
  }
  .hamburger:hover { background: var(--accent-bg); color: var(--accent-tx); }
  .hamburger svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }
  body.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 450;
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  }
}

/* ---------- Page d'accueil publique (public/index.php uniquement) ----------
   16/08/2026, demande d'Anthony : "une plus belle page avec un fond de
   palais de justice de Bruxelles". Tout est scopé sous .home-hero pour ne
   RIEN changer aux autres pages qui réutilisent .auth-wrap/.auth-inner/.card
   (deposer.php, confirmer.php, jury.php, admin/login.php, etc.) — cf.
   public/index.php, qui est la seule page à porter cette classe. */
.home-hero {
  position: relative;
  background:
    linear-gradient(165deg, rgba(10,7,16,.62) 0%, rgba(30,20,48,.22) 45%, rgba(8,6,12,.72) 100%),
    url('/assets/themis-lady-justice.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  /* PAS de background-attachment:fixed : avec un contenu plus haut que
     100vh (ex. retrouver_acces.php), un fond "fixed" ne couvre que le
     premier écran et laisse la suite de la page sans image (16/08/2026,
     repéré en vérifiant cette page). background-size:cover sur un fond
     "scroll" (par défaut) couvre toute la hauteur réelle de l'élément,
     quel que soit le contenu. */
  overflow: hidden;
}
.home-hero .auth-inner { position: relative; z-index: 2; max-width: 420px; animation: home-hero-rise .6s ease both; }
.home-hero .logo-block img { filter: drop-shadow(0 2px 10px rgba(0,0,0,.4)); }
.home-hero .logo-block h1 {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 30px; font-weight: 600; letter-spacing: 0; color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.home-hero .logo-block p { color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.home-hero .card {
  background: rgba(22,20,34,.58); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px 0 rgba(0,0,0,.35);
}
.home-hero .card h2 { color: #fff; }
.home-hero .card .sub { color: rgba(255,255,255,.78); }
.home-hero .card label { color: rgba(255,255,255,.9); }
.home-hero .card input {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff;
}
.home-hero .card input::placeholder { color: rgba(255,255,255,.45); }
.home-hero .card .card-divider { border-top-color: rgba(255,255,255,.16) !important; }
.home-hero .card a { color: #fff; text-decoration: none; }
.home-hero .card a:hover { color: rgba(255,255,255,.8); }
.home-photo-credit {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; text-align: center;
  font-size: 11px; color: rgba(255,255,255,.55); text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.home-photo-credit a { color: rgba(255,255,255,.7); text-decoration: none; }
@keyframes home-hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .home-hero .auth-inner { animation: none; } }
@media (max-width: 640px) { .home-hero { background-position: 65% center; } }