/*
 * Feuille de style
 * Version 24/10/26
 */


/* ── Variables de thème ──────────────────────────────────────────────────── */
:root {
  --bg:               #f5f5f5;
  --fg:               #222;
  --fg-soft:          #333;
  --fg-muted:         #555;
  --fg-faint:         #aaa;
  --surface:          #ffffff;
  --surface-alt:      #f4f4f4;
  --surface-hover:    #fafafa;
  --border:           #ddd;
  --border-input:     #ccc;
  --link:             #1f5a4a;
  --focus:            #1f5a4a;
  --btn-bg:           #1f5a4a;
  --btn-hover:        #174337;
  --nav-bg:           #1f5a4a;
  --btn-fg:           #ffffff;
  --nav-fg:           #ffffff;
  --erreur-bg:        #fde8e8;
  --erreur-fg:        #922b21;
  --succes-bg:        #e8f5e9;
  --succes-fg:        #1b5e20;
  --info-bg:          #dde6e4;
  --info-fg:          #18473a;
  --cal-jour-fg:      #18473a;
  --cal-date-fg:      #555;
  --cal-vide-fg:      #bbb;
  --cal-confirme-bg:  #d4edda;
  --cal-confirme-fg:  #1b5e20;
  --cal-demande-bg:   #fff3cd;
  --cal-demande-fg:   #7d4e00;
  --cal-demande-bdr:  #ffe08a;
  --cal-demande-hvr:  #ffe8a0;
  --cal-benevole-bg:  #cffafe;
  --cal-benevole-fg:  #0e7490;
  --cal-benevole-bdr: #67e8f9;
  --cal-jour-ouvert-bg:  #d1fae5;
  --cal-jour-ouvert-fg:  #047857;
  --cal-jour-ouvert-bdr: #6ee7b7;
  --cal-evt-info-bg:  #dbeafe;
  --cal-evt-info-fg:  #1d4ed8;
  --cal-evt-info-bdr: #93c5fd;
  --cal-evt-ferm-bg:  #fee2e2;
  --cal-evt-ferm-fg:  #991b1b;
  --cal-evt-ferm-bdr: #fca5a5;
  --cal-evt-autr-bg:  #f3f4f6;
  --cal-evt-autr-fg:  #374151;
  --cal-evt-autr-bdr: #d1d5db;
  --rdv-confirme-bg:  #d4edda;
  --rdv-confirme-fg:  #1b5e20;
  --rdv-confirme-hvr: #c3e6cb;
  --rdv-annule-bg:    #f0f0f0;
  --rdv-annule-fg:    #777;
  --rdv-annule-hvr:   #e4e4e4;
  --rdv-archive-bg:   #e9e9e9;
  --rdv-archive-fg:   #999;
  --rdv-archive-hvr:  #dedede;
  --rdv-demande-bg:   #fff3cd;
  --rdv-demande-fg:   #7d4e00;
  --rdv-demande-hvr:  #ffe8a0;
  --today-border:     #1f5a4a;
  --today-header-bg:  #dde6e4;
  --admin-menu-hvr:   #dde6e4;
  --cal-liste-hd-bg:  #f4f4f4;
  --cal-liste-hd-fg:  #18473a;
  --media-desc-fg:    #888;
  --tag-bg:           #dde6e4;
  --tag-fg:           #18473a;
  --toggle-bg:        #eee;
  --toggle-fg:        #666;
  --avatar-bg:        #ccc;
  --shadow:           rgba(0,0,0,.08);
  --shadow-lg:        rgba(0,0,0,.15);
  --icone-calendrier: #059f74;
  --icone-principal:  #2b76ca;
  --icone-formation:  #7c3aed;
  --icone-forum:      #ff8c00;
  --icone-admin:        #6b7280;
  --icone-gestionnaire: #6b7280;
  --icone-benevole:   #0891b2;
  --icone-materiel:   #65a30d;
  --icone-caisse:     #ca8a04;
  --icone-jeu:        #db2777;
  --icone-outil:      #dc2626;
  --icone-lien:       var(--icone-outil);

  /* Couleurs des boutons de produit de la caisse (fond / texte) */
  --caisse-rouge-bg:     #dc2626;  --caisse-rouge-fg:     #fff;
  --caisse-orange-bg:    #c2410c;  --caisse-orange-fg:    #fff;
  --caisse-jaune-bg:     #facc15;  --caisse-jaune-fg:     #1f2937;
  --caisse-vert-bg:      #15803d;  --caisse-vert-fg:      #fff;
  --caisse-turquoise-bg: #0f766e;  --caisse-turquoise-fg: #fff;
  --caisse-bleu-bg:      #2563eb;  --caisse-bleu-fg:      #fff;
  --caisse-violet-bg:    #7c3aed;  --caisse-violet-fg:    #fff;
  --caisse-rose-bg:      #db2777;  --caisse-rose-fg:      #fff;
  --caisse-gris-bg:      #4b5563;  --caisse-gris-fg:      #fff;

  /* Boutons et résultats du vote rapide */
  --vr-pour:       #15803d;
  --vr-contre:     #b91c1c;
  --vr-abstention: #4b5563;
}

.dark {
  --bg:               #1f1f1f;
  --fg:               #e1e1e1;
  --fg-soft:          #c5c5c5;
  --fg-muted:         #979797;
  --fg-faint:         #5f5f5f;
  --surface:          #292929;
  --surface-alt:      #2f2f2f;
  --surface-hover:    #343434;
  --border:           #3f3f3f;
  --border-input:     #4c4c4c;
  --link:             #89d6c2;
  --focus:            #89d6c2;
  --btn-bg:           #2a7964;
  --btn-hover:        #256a57;
  --nav-bg:           #1b5041;
  --btn-fg:           #ffffff;
  --nav-fg:           #ffffff;
  --erreur-bg:        #3a1010;
  --erreur-fg:        #f08080;
  --succes-bg:        #0d2a10;
  --succes-fg:        #70d070;
  --info-bg:          #1a4c3e;
  --info-fg:          #89d6c2;
  --cal-jour-fg:      #89d6c2;
  --cal-date-fg:      #979797;
  --cal-vide-fg:      #4c4c4c;
  --cal-confirme-bg:  #1a3822;
  --cal-confirme-fg:  #70d070;
  --cal-demande-bg:   #3a2a00;
  --cal-demande-fg:   #ffc952;
  --cal-demande-bdr:  #7a5a00;
  --cal-demande-hvr:  #4a3600;
  --cal-benevole-bg:  #164e63;
  --cal-benevole-fg:  #67e8f9;
  --cal-benevole-bdr: #0e7490;
  --cal-jour-ouvert-bg:  #064e3b;
  --cal-jour-ouvert-fg:  #6ee7b7;
  --cal-jour-ouvert-bdr: #047857;
  --cal-evt-info-bg:  #172554;
  --cal-evt-info-fg:  #93c5fd;
  --cal-evt-info-bdr: #1e40af;
  --cal-evt-ferm-bg:  #3b0f0f;
  --cal-evt-ferm-fg:  #fca5a5;
  --cal-evt-ferm-bdr: #991b1b;
  --cal-evt-autr-bg:  #1f2937;
  --cal-evt-autr-fg:  #9ca3af;
  --cal-evt-autr-bdr: #374151;
  --rdv-confirme-bg:  #1a3822;
  --rdv-confirme-fg:  #70d070;
  --rdv-confirme-hvr: #1e4228;
  --rdv-annule-bg:    #2b2b2b;
  --rdv-annule-fg:    #717171;
  --rdv-annule-hvr:   #323232;
  --rdv-archive-bg:   #262626;
  --rdv-archive-fg:   #616161;
  --rdv-archive-hvr:  #2f2f2f;
  --rdv-demande-bg:   #3a2a00;
  --rdv-demande-fg:   #ffc952;
  --rdv-demande-hvr:  #4a3600;
  --today-border:     #89d6c2;
  --today-header-bg:  #1a4c3e;
  --admin-menu-hvr:   #1a4c3e;
  --cal-liste-hd-bg:  #2a2a2a;
  --cal-liste-hd-fg:  #89d6c2;
  --media-desc-fg:    #717171;
  --tag-bg:           #1a4c3e;
  --tag-fg:           #89d6c2;
  --toggle-bg:        #3f3f3f;
  --toggle-fg:        #c5c5c5;
  --avatar-bg:        #4c4c4c;
  --shadow:           rgba(0,0,0,.25);
  --shadow-lg:        rgba(0,0,0,.45);
  --icone-calendrier: #34d399;
  --icone-principal:  #78aae8;
  --icone-formation:  #a78bfa;
  --icone-forum:      #fb923c;
  --icone-admin:        #9ca3af;
  --icone-gestionnaire: #9ca3af;
  --icone-benevole:   #22d3ee;
  --icone-materiel:   #a3e635;
  --icone-caisse:     #facc15;
  --icone-jeu:        #f472b6;
  --icone-outil:      #f87171;

  --caisse-rouge-bg:     #b91c1c;
  --caisse-orange-bg:    #9a3412;
  --caisse-jaune-bg:     #eab308;  --caisse-jaune-fg:     #111827;
  --caisse-vert-bg:      #166534;
  --caisse-turquoise-bg: #115e59;
  --caisse-bleu-bg:      #1d4ed8;
  --caisse-violet-bg:    #6d28d9;
  --caisse-rose-bg:      #be185d;
  --caisse-gris-bg:      #374151;

  --vr-pour:       #166534;
  --vr-contre:     #991b1b;
  --vr-abstention: #374151;
}

/* ── Couleurs d'icônes par domaine ───────────────────────────────────────── */
.icone-calendrier { color: var(--icone-calendrier); }
.icone-principal  { color: var(--icone-principal); }
.icone-formation  { color: var(--icone-formation); }
.icone-forum      { color: var(--icone-forum); }
.icone-admin        { color: var(--icone-admin); }
.icone-gestionnaire { color: var(--icone-gestionnaire); }
.icone-benevole   { color: var(--icone-benevole); }
.icone-materiel   { color: var(--icone-materiel); }
.icone-caisse     { color: var(--icone-caisse); }
.icone-jeu        { color: var(--icone-jeu); }
.icone-outil      { color: var(--icone-outil); }
.icone-lien       { color: var(--icone-lien); }

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

body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
}

nav {
  background: var(--nav-bg);
  color: var(--nav-fg);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
nav a { color: var(--nav-fg); text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav.nav-avec-logo { padding-top: .2rem; padding-bottom: .2rem; }
.nav-titre { font-weight: bold; margin-right: auto; }
a.nav-titre { display: flex; align-items: center; line-height: 0; }
.nav-logo { height: auto; max-height: 64px; max-width: 60vw; display: block; }
.nav-systeme {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-left: 1px solid rgba(255,255,255,.25);
  padding-left: 1.25rem;
  margin-left: .25rem;
  flex-shrink: 0;
}
.nav-deco { font-size: .85rem; opacity: .72; }
.nav-deco:hover { opacity: 1; }
.nav-notif { position: relative; display: inline-flex; align-items: center; }
.notif-badge {
  position: absolute; top: -.45rem; right: -.55rem;
  background: #e74c3c; color: #fff;
  border-radius: 10px; font-size: .65rem; font-weight: bold;
  min-width: 16px; height: 16px; line-height: 16px;
  text-align: center; padding: 0 4px; pointer-events: none;
}
.notif-liste { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.notif-item {
  padding: .6rem 1rem .75rem .85rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; gap: .2rem;
}
.notif-item.notif-non-lue { background: var(--info-bg); border-left-color: var(--info-fg); }
.notif-date { font-size: .78rem; color: var(--fg-muted); }
.notif-titre { font-weight: 500; line-height: 1.4; }
.notif-details { font-size: .875rem; color: var(--fg-muted); }

main { padding: 2rem 1.5rem; max-width: 1160px; margin: 0 auto; }

.form-center { max-width: 420px; margin: 3rem auto; }
/* Logotype : capitales de Familjen Grotesk = 0,65 em ; icône = 1,85 cap, espace = ½ icône, centrée sur les capitales */
@font-face {
  font-family: "Familjen Grotesk";
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/familjen-grotesk.woff2") format("woff2");
}
.logotype {
  margin-top: 2rem; text-align: center; line-height: 1;
  font-family: "Familjen Grotesk", system-ui, sans-serif; font-size: 2.25rem; font-weight: 400;
}
.logotype b { font-weight: 700; }
.logotype img {
  width: 1.2025em; height: 1.2025em; margin-right: 0.60125em;
  vertical-align: -0.27625em; border-radius: 15%;
}

/* ── Cartes de choix tactiles (saisie de résultat, saisie d'entretien) ───── */
.choix-groupe {
  display: flex;
  flex-direction: row;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.choix-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  flex: 1;
  padding: .75rem .5rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color .15s, background .15s, box-shadow .15s;
  user-select: none;
  text-align: center;
}
.choix-carte:hover {
  border-color: var(--btn-bg);
  background: var(--surface-alt);
}
.choix-carte input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* État sélectionné par défaut ; les écrans qui portent une sémantique
   propre (réussite, échec…) le redéfinissent par data-value. */
.choix-carte.actif {
  border-color: var(--btn-bg);
  box-shadow: 0 0 0 1px var(--btn-bg);
  background: var(--surface-alt);
}
.choix-icone { font-size: 1.5rem; line-height: 1; }
.choix-carte strong { font-size: .9rem; }

h1 { margin-bottom: 1.5rem; font-size: 1.5rem; }

form { display: flex; flex-direction: column; gap: 1rem; }

label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .9rem;
  font-weight: 500;
}

input, select, textarea {
  padding: .5rem .75rem;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
  background: var(--surface);
  color: var(--fg);
}
input:focus, select:focus {
  outline: 2px solid var(--focus);
  border-color: var(--focus);
}

button {
  padding: .6rem 1.2rem;
  border: none;
  border-radius: 6px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  cursor: pointer;
}
button:hover { background: var(--btn-hover); }
button.danger { background: var(--btn-bg); }
button.danger:hover { background: var(--btn-hover); }

/* Bouton « afficher le mot de passe » dans un champ */
.password-wrapper { position: relative; display: block; }
.password-wrapper input { width: 100%; padding-right: 2.5rem; box-sizing: border-box; }
.toggle-password {
  position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 1.1rem; line-height: 1; width: auto;
  color: var(--fg-muted);
}
.toggle-password:hover { background: none; }

.page-note {
  font-size: .85em;
  color: var(--fg-muted, #888);
  font-style: italic;
  margin-top: -1.25rem;
  margin-bottom: 1rem;
}
.erreur {
  background: var(--erreur-bg);
  color: var(--erreur-fg);
  padding: .75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.succes {
  background: var(--succes-bg);
  color: var(--succes-fg);
  padding: .75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
details summary { cursor: pointer; color: var(--fg); margin-bottom: .5rem; }
p { margin-top: .75rem; }
a { color: var(--link); }

.categorie {
  margin-top: 2.5rem;
}
.categorie-titre {
  font-size: .7rem;
  font-weight: 500;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .4rem;
}

.tuiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 120px;
  height: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg-soft);
  box-shadow: 0 1px 3px var(--shadow);
  transition: transform .15s, box-shadow .15s;
  padding: .75rem;
  text-align: center;
  position: relative;
}
.tuile-new-dot {
  position: absolute;
  top: .45rem; right: .45rem;
  width: .55rem; height: .55rem;
  background: #ff8c00;
  border-radius: 50%;
}
/* Tuile « Entretien matériel » : couleur de la pire échéance du parc */
.tuile-dot-retard { background: var(--erreur-fg); }
.tuile-dot-proche { background: var(--icone-forum); }
.tuile:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px var(--shadow-lg);
}
.tuile-icone { font-size: 2rem; line-height: 1; }
.tuile-icone-img { height: 2rem; width: auto; max-width: 3rem; object-fit: contain; vertical-align: middle; }
.tuile-label {
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  max-width: 100%;
}

/* Layout admin */
.admin-layout {
  display: flex;
  min-height: calc(100vh - 48px);
}
.admin-menu {
  width: 180px;
  min-width: 180px;
  background: var(--surface-alt);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border-right: 1px solid var(--border);
}
.admin-menu a {
  padding: .4rem .75rem;
  border-radius: 6px;
  color: var(--fg-soft);
  text-decoration: none;
  font-size: .95rem;
}
.admin-menu a:hover { background: var(--admin-menu-hvr); }

.admin-content { padding: 2rem; flex: 1; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin-top: 2rem; margin-bottom: 2rem; }
th, td { padding: .6rem .75rem; border: 1px solid var(--border); text-align: left; }
th { background: var(--surface-alt); font-weight: 500; }
tr:hover td { background: var(--surface-hover); }
tr.desactive td { color: var(--fg-faint); font-style: italic; }

/* Code couleur statuts (même palette que le calendrier) */
tr.rdv-confirme td { background: var(--rdv-confirme-bg); color: var(--rdv-confirme-fg); }
tr.rdv-confirme:hover td { background: var(--rdv-confirme-hvr); }
tr.rdv-annule td   { background: var(--rdv-annule-bg); color: var(--rdv-annule-fg); text-decoration: line-through; }
tr.rdv-annule td:last-child { text-decoration: none; }
tr.rdv-annule:hover td { background: var(--rdv-annule-hvr); }
tr.rdv-archive td  { background: var(--rdv-archive-bg); color: var(--rdv-archive-fg); }
tr.rdv-archive:hover td { background: var(--rdv-archive-hvr); }
tr.rdv-demande td  { background: var(--rdv-demande-bg); color: var(--rdv-demande-fg); }
tr.rdv-demande:hover td { background: var(--rdv-demande-hvr); }
td form {
  display: inline;
}

/* Bouton toggle aptitudes/utilisations */
button.toggle {
  background: var(--toggle-bg);
  color: var(--toggle-fg);
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
button.toggle.actif { background: var(--btn-bg); color: var(--btn-fg); }
.toggle-roles button.toggle.actif:has(.icone-gestionnaire) { background: var(--icone-gestionnaire); }
.toggle-roles button.toggle { display: inline-block; width: auto; height: auto; padding: .6rem 1.2rem; }

/* Étoile « formation par défaut » à côté d'une aptitude */
button.etoile-defaut {
  background: none;
  color: var(--fg-muted);
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
button.etoile-defaut[hidden] { display: none; }
button.etoile-defaut:hover { background: none; color: var(--link); }
button.etoile-defaut.actif { color: var(--link); }

.bandeau-maintenance {
  background: var(--erreur-bg);
  color: var(--erreur-fg);
  padding: .5rem 1rem;
  text-align: center;
}
.bandeau-maintenance a { color: inherit; text-decoration: underline; }
.texte-multiligne { white-space: pre-line; }

.info {
  background: var(--info-bg);
  color: var(--info-fg);
  padding: .75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

fieldset {
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: .75rem 1rem;
}
fieldset legend {
  font-size: .9rem;
  font-weight: 500;
  padding: 0 .4rem;
}
fieldset label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .4rem;
  font-weight: 400;
  margin-bottom: .2rem;
}
fieldset input[type="checkbox"] {
  width: auto;
  margin: 0;
}
/* Case à cocher isolée : case et libellé sur une ligne, alignés à gauche
   (la règle globale `label` les empilerait) */
label.case-ligne {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
}
label.case-ligne input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex: none;
}

/* Responsive mobile */
@media (max-width: 600px) {
  nav { flex-wrap: wrap; gap: .4rem 1rem; padding: .6rem 1rem; }
  .nav-titre { width: 100%; margin-right: 0; }
  .nav-logo { height: auto; max-height: 48px; max-width: 55vw; }
  .nav-systeme { border-left: none; padding-left: 0; margin-left: 0; }

  .admin-layout { flex-direction: column; }
  .admin-menu { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none;
                border-bottom: 1px solid var(--border); }

  .tuiles { justify-content: center; }
}

/* Table avec défilement horizontal */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Table responsive en cartes */
.card-media-icone { display: none; }
.card-connexion-mobile { display: none; } /* date + bouton côte à côte en mode carte */
@media (max-width: 640px) {
  table.responsive { border: none; }
  table.responsive thead { display: none; }
  table.responsive tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  table.responsive td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: .5rem .75rem;
    text-align: right;
  }
  table.responsive td:last-child { border-bottom: none; }
  table.responsive td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--fg-muted);
    text-align: left;
    flex-shrink: 0;
  }
  table.responsive tr:hover td { background: inherit; }
  table.responsive td[data-empty] { display: none; }
  table.responsive td[data-label=""]:not(:has(a, button)) { display: none; }
  table.responsive td.card-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-weight: bold;
  }
  table.responsive td.card-titre::before { display: none; }
  table.responsive td.card-type-masque { display: none; }
  .card-media-icone { display: inline-flex; align-items: center; flex-shrink: 0; }
  table.responsive td.card-message {
    display: block;
    text-align: left;
  }
  table.responsive td.card-message::before { display: none; }
  table.responsive td.card-formation {
    flex: 1 1 0;
    min-width: 0;
    font-weight: bold;
    text-align: left;
    justify-content: flex-start;
  }
  table.responsive td.card-formation::before { display: none; }
  table.responsive td.card-date {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  table.responsive td.card-date::before { display: none; }
  table.responsive td.card-left {
    text-align: left;
    justify-content: flex-start;
  }
  table.responsive td.card-left::before { display: none; }
  .drag-handle::before { content: none; }
  .drag-handle { text-align: right; font-size: 1.2rem; }
  .card-connexion-mobile { display: inline; font-size: .85rem; color: var(--fg-muted); }
  table.responsive td.card-spread { justify-content: space-between; }
  table.responsive td.card-spread::before { display: none; }
  .comp-badge img { width: 48px; height: 48px; }
  .comp-badge-ph  { width: 48px; height: 48px; }
  table.responsive td.card-actions { justify-content: flex-end; }
  table.responsive td.card-actions::before { display: none; }
}

.user-tip { cursor: default; }
#avatar-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  display: none;
}
#avatar-tooltip img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-cercle-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 600;
  color: white;
  background: var(--avatar-bg);
  flex-shrink: 0;
}

/* Liste de suggestions des mentions @membre (forum) */
.mention-suggestions {
  position: absolute;
  z-index: 50;
  list-style: none;
  margin: 2px 0 0;
  padding: .25rem 0;
  max-width: 22rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.mention-suggestions li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  cursor: pointer;
  color: var(--fg);
}
.mention-suggestions li:hover { background: var(--surface-hover); }
.mention-suggestions li.actif { background: var(--surface-alt); }
.mention-suggestions img,
.mention-suggestions .mention-initiales {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.mention-suggestions .mention-initiales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  color: white;
  background: var(--avatar-bg);
}

.drag-handle {
  cursor: grab;
  color: var(--fg-faint);
  text-align: center;
  padding: 0 .5rem;
  touch-action: none;
}
.drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: .4; }

.btn-lien {
  display: inline-block;
  padding: .4rem .8rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: 6px;
  text-decoration: none;
  font-size: .9rem;
}
.btn-lien:hover { background: var(--btn-hover); color: var(--btn-fg); }
/* Rangée de liens-boutons : passage à la ligne espacé sur mobile */
.barre-liens { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }

.btn-lien.danger {
  background: var(--btn-bg);
}
.btn-lien.danger:hover {
  background: var(--btn-hover);
}

/* Calendrier semaine */
.main-large { max-width: 1200px; }

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: 6px;
  padding: .4rem .75rem;
}
.cal-nav h1 { margin-bottom: 0; font-size: 1.2rem; text-align: center; flex: 1; color: inherit; }
.cal-nav span { font-size: 1.1rem; font-weight: 600; text-align: center; flex: 1; color: inherit; }
.cal-nav a {
  display: inline-block;
  padding: .3rem .9rem;
  color: var(--btn-fg);
  border-radius: 4px;
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1.5;
  white-space: nowrap;
}
.cal-nav a:hover { background: rgba(255,255,255,.18); text-decoration: none; }

.semaine {
  display: flex;
  gap: 4px;
  align-items: stretch;
}

.jour-col {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.jour-col.aujourd-hui { border-color: var(--today-border); }

.jour-entete {
  background: var(--surface-alt);
  padding: .35rem .5rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.jour-col.aujourd-hui .jour-entete { background: var(--today-header-bg); }
.jour-nom  { display: block; font-weight: 600; font-size: .8rem; color: var(--cal-jour-fg); }
.jour-date { display: block; font-size: .8rem; color: var(--cal-date-fg); }

.jour-corps {
  padding: .4rem .3rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
}

.cal-vide { font-size: .8rem; color: var(--cal-vide-fg); text-align: center; margin-top: .5rem; }

.cal-evt {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  padding: .25rem .4rem;
  border-radius: 4px;
  font-size: .75rem;
  text-decoration: none;
  cursor: default;
}
.cal-evt.cal-demande { cursor: pointer; }
.cal-evt.cal-demande-inactive { cursor: default; }

.cal-evt-heure  { font-weight: 600; }
.cal-evt-titre  { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evt-detail { color: inherit; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evt-statut { font-size: .7rem; opacity: .8; font-style: italic; }

.cal-rdv.confirme        { background: var(--cal-confirme-bg); color: var(--cal-confirme-fg); }
.cal-demande             { background: var(--cal-demande-bg);  color: var(--cal-demande-fg);  border: 1px solid var(--cal-demande-bdr); }
.cal-benevole            { background: var(--cal-benevole-bg); color: var(--cal-benevole-fg); border: 1px solid var(--cal-benevole-bdr); cursor: default; }
a.cal-benevole           { cursor: pointer; }
.cal-evenement           { cursor: default; border: 1px solid; }
.cal-evenement-info      { background: var(--cal-evt-info-bg); color: var(--cal-evt-info-fg); border-color: var(--cal-evt-info-bdr); }
.cal-evenement-fermeture { background: var(--cal-evt-ferm-bg); color: var(--cal-evt-ferm-fg); border-color: var(--cal-evt-ferm-bdr); }
.cal-evenement-autre     { background: var(--cal-evt-autr-bg); color: var(--cal-evt-autr-fg); border-color: var(--cal-evt-autr-bdr); }
.cal-demande:hover          { background: var(--cal-demande-hvr); }
.cal-demande-inactive       { cursor: default; }
.cal-demande-inactive:hover { background: var(--cal-demande-bg); }

.cal-legende {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
}
.cal-legende .cal-evt { cursor: default; }
.cal-legende .cal-demande:hover { background: var(--cal-demande-bg); }

/* Calendrier — vue liste mobile */
.cal-liste { display: none; }

@media (max-width: 640px) {
  .semaine { display: none; }
  .cal-liste { display: block; }

  .cal-liste-jour { margin-bottom: 1.5rem; }

  .cal-liste-entete {
    font-weight: 600;
    font-size: 1rem;
    color: var(--cal-liste-hd-fg);
    background: var(--cal-liste-hd-bg);
    border-radius: 6px;
    padding: .4rem .75rem;
    margin-bottom: .5rem;
  }

  .cal-liste .cal-evt {
    font-size: .95rem;
    margin-bottom: .35rem;
    padding: .4rem .75rem;
  }
}

/* Médiathèque — layout carte */
#grille-medias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.tuile-media {
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-template-rows: auto auto;
  width: auto;
  height: auto;
  overflow: visible;
  text-align: left;
  align-items: start;
  padding: .75rem 1rem;
  gap: .1rem .75rem;
  position: relative;
}

.media-type-icone {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 2rem;
  line-height: 1;
  align-self: start;
  justify-self: center;
}

.tuile-media .tuile-label {
  grid-column: 2;
  grid-row: 1;
  font-size: .95rem;
  font-weight: 600;
  display: block;
  overflow: visible;
}

.desc-wrapper {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  height: 2.3rem; /* 2 lignes @ .82rem × 1.4 */
  overflow: visible;
}

.media-hover-desc {
  position: static;
  background: none;
  color: var(--media-desc-fg);
  padding: 0;
  font-size: .82rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tuile-media:hover {
  z-index: 1;
}
.tuile-media:hover .media-hover-desc {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .3rem .5rem;
  box-shadow: 0 4px 12px var(--shadow-lg);
  z-index: 100;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Bouton info description (mobile uniquement) */
.btn-info-desc {
  display: none;
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--fg-soft);
  font-size: .75rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--border);
  z-index: 2;
  line-height: 1;
  text-align: center;
  user-select: none;
}

/* Dialog description complète */
.desc-dialog-content {
  padding: 1rem 1.25rem;
  max-width: 90vw;
  width: 22rem;
}
.desc-dialog-content h3 {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.desc-dialog-content p {
  margin: 0 0 1rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--fg-soft);
}
.desc-dialog-content .btn-fermer {
  display: block;
  margin-left: auto;
}

/* Médiathèque — mobile */
@media (max-width: 640px) {
  #grille-medias {
    grid-template-columns: 1fr;
  }
  .btn-info-desc {
    display: flex;
  }
}

/* Tags — wrapper flex dans les cellules de table */
.tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  justify-content: flex-end;
}

/* Tags — badges */
.tag-badge {
  display: inline-block;
  font-size: .72rem;
  padding: .1rem .45rem;
  border-radius: 1rem;
  background: var(--tag-bg);
  color: var(--tag-fg);
  margin: .1rem .15rem .1rem 0;
  white-space: nowrap;
}

.tag-badge-cliquable {
  cursor: pointer;
  transition: opacity .15s;
}
.tag-badge-cliquable:hover { opacity: .75; }

/* Tags — barre de filtres (vue médiathèque) */
.tag-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.2rem;
}

.tag-filtre {
  font-size: .8rem;
  padding: .25rem .75rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tag-filtre:hover {
  background: var(--surface-hover);
  color: var(--fg);
}
.tag-filtre.actif {
  background: var(--tag-bg);
  color: var(--tag-fg);
  border-color: var(--tag-fg);
  font-weight: 600;
}

/* Badges sur les cartes médiathèque */
.media-tags {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin-top: .25rem;
}

.version {
  font-size: .8rem;
  color: var(--fg-faint);
  margin-top: 1.5rem;
  text-align: left;
}

/* Backdrop des dialogs */
dialog::backdrop {
  background: rgba(0, 0, 0, .45);
}

/* Splash screen de connexion */
.splash-texte {
  line-height: 1.7;
}
.btn-discret {
  background: none;
  color: var(--fg-faint);
  border: 1px solid var(--border-input);
  font-size: .85rem;
  padding: .35rem 1.8rem;
}
.btn-discret:hover {
  background: var(--surface-alt);
  color: var(--fg-muted);
}

/* Honeypot anti-robot */
.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Modals */
dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-input);
  border-radius: .5rem;
  padding: 1.5rem;
  background: var(--surface);
  color: var(--fg);
}
dialog h2 { margin-top: 0; }

/* Colonne de boutons d'action */
.btn-col {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: flex-start;
}

/* Bouton d'action à largeur fixe */
.btn-action { width: 7rem; }

/* Utilitaire espacement */
.mt-2 { margin-top: 2rem; }

/* Avatar profil */
.avatar-wrap {
  position: relative;
  width: 80px;
  margin: 0 auto 1.5rem;
}
.avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 600;
  background: var(--avatar-bg);
  color: white;
  user-select: none;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-pencil {
  position: absolute;
  bottom: 0;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .7rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  line-height: 1;
}
.avatar-pencil:hover { background: var(--btn-hover); }
.avatar-badge-img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  position: absolute;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
.dark .avatar-badge-img { filter: drop-shadow(0 0 4px rgba(255,255,255,.35)); }
.avatar-badge-pos-1 { top:  -9px; left: -27px; }
.avatar-badge-pos-2 { top:  29px; left: -27px; }
.avatar-badge-pos-3 { top:  67px; left: -27px; }
.avatar-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow-lg);
  min-width: 190px;
  z-index: 100;
  overflow: hidden;
}
.avatar-menu button {
  display: block;
  width: 100%;
  padding: .6rem 1rem;
  background: none;
  color: var(--fg);
  text-align: left;
  border-radius: 0;
  font-size: .95rem;
}
.avatar-menu button:hover { background: var(--surface-alt); color: var(--fg); }
.avatar-menu button.danger { color: #c0392b; }
.avatar-menu button.danger:hover { background: var(--erreur-bg); color: #c0392b; }
#avatar-preview-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 1rem auto;
}

/* Bouton mode sombre dans la nav */
#btn-theme {
  background: none;
  border: 1px solid rgba(255,255,255,.4);
  color: var(--nav-fg);
  padding: .25rem .55rem;
  font-size: .9rem;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
}
#btn-theme:hover { background: rgba(255,255,255,.15); }

/* Menu guides dans la nav */
.nav-guide-wrap { position: relative; }
#btn-guide {
  background: none;
  border: 1px solid rgba(255,255,255,.4);
  color: var(--nav-fg);
  padding: .25rem .55rem;
  font-size: .9rem;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
}
#btn-guide:hover { background: rgba(255,255,255,.15); }
#nav-guide-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  min-width: 14rem;
  z-index: 200;
  overflow: hidden;
}
#nav-guide-menu a {
  display: block;
  padding: .55rem .9rem;
  color: var(--fg);
  text-decoration: none;
  font-size: .9rem;
}
#nav-guide-menu a:hover { background: var(--surface-alt); }
@media (max-width: 600px) {
  #nav-guide-menu { right: auto; left: 0; }
}

/* Statuts résultat RDV */
.statut-valide     { color: var(--succes-fg); }
.statut-non-valide { color: var(--erreur-fg); }
.statut-non-tenu   { color: #7c3aed; }
.dark .statut-non-tenu { color: #a78bfa; }

/* Aide syntaxe Markdown dans les formulaires */
.aide-markdown {
  margin: .15rem 0 .75rem;
  font-size: .8rem;
  color: var(--fg-muted);
  font-family: monospace;
}

/* Toolbar Markdown */
.md-toolbar {
  display: flex;
  gap: .2rem;
  padding: .3rem .4rem;
  background: var(--surface-alt);
  border: 1px solid var(--border-input);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.md-toolbar + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -1rem;
}
.md-btn {
  padding: .2rem .4rem;
  background: var(--surface-alt);
  color: var(--fg-faint);
  border: none;
  border-radius: 3px;
  font-size: .75rem;
  cursor: pointer;
  line-height: 1;
}
.md-btn:hover {
  background: var(--surface-alt);
  color: var(--fg-muted);
}
.md-emoji-panel {
  position: fixed;
  display: none;
  inset: auto;            /* popover : neutralise le centrage par défaut, top/left posés en JS */
  margin: 0;
  overflow: visible;
  color: inherit;
  grid-template-columns: repeat(12, 1.9rem);
  gap: .15rem;
  padding: .4rem;
  max-width: calc(100vw - 8px);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  z-index: 300;
}
.md-emoji-btn {
  width: 1.9rem;
  height: 1.9rem;
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1rem;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1.9rem;
  padding: 0;
  text-align: center;
}
.md-emoji-btn:hover {
  background: var(--surface-alt);
}
@media (max-width: 480px) {
  .md-emoji-panel {
    grid-template-columns: repeat(auto-fill, 1.9rem);
  }
}

/* Compétences — badge + titre dans la même cellule */
.comp-badge-titre { display: flex; align-items: center; gap: .75rem; }
.comp-badge img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.comp-badge-ph {
  display: inline-flex;
  width: 64px; height: 64px;
  background: var(--surface-alt); border-radius: 4px;
  align-items: center; justify-content: center;
  color: var(--fg-faint);
}

/* Zone — bloc délimité d'une page (carte avec titre et pictogramme) */
.zone {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  margin-top: 1.25rem;
}
.zone-titre {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.1rem;
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.zone-titre i { color: var(--icone-materiel); }
.zone-titre i.icone-formation { color: var(--icone-formation); }
.zone-titre i.icone-gestionnaire { color: var(--icone-gestionnaire); }
/* Titre accompagné d'une action alignée à droite : div.zone-titre > h2 + bouton */
.zone-titre h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: inherit; }
.zone-titre .zone-action { margin: 0 0 0 auto; font-size: .9rem; font-weight: 400; }
.zone-titre form.zone-action button { margin: 0; }
/* Zone réduite à son titre : pas de séparateur */
.zone-titre:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
@media (max-width: 600px) {
  .zone { padding: .75rem .85rem 1rem; }
}

/* Utilisations hors formations — matrice administrateur */
.uhf-entete { text-align: center; white-space: normal; min-width: 8rem; }
.uhf-entete > span:first-child { display: block; margin-bottom: .35rem; }
.uhf-actions { display: inline-flex; gap: .4rem; align-items: center; justify-content: center; }
.uhf-actions form { display: inline-flex; margin: 0; }
.uhf-mobile-liste { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.uhf-carte {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.uhf-carte-libelle { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* Pagination d'une liste dans une page (boutons bordés) */
.pager { display: flex; gap: .4rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }
.pager a, .pager strong {
  display: inline-block; min-width: 2rem; padding: .25rem .5rem;
  text-align: center; border: 1px solid var(--border); border-radius: 4px;
  text-decoration: none; font-size: .9rem;
}
.pager strong { background: var(--surface-hover); font-weight: 700; }
.pager-ellipsis { color: var(--fg-muted); padding: 0 .15rem; user-select: none; }
.zone-compteur { font-size: .85rem; font-weight: 400; color: var(--fg-muted); }

/* Matériels — intitulé + ligne « N° de série · statut » sous la vignette */
.mat-intitule { display: flex; flex-direction: column; min-width: 0; }
.mat-meta { color: var(--fg-muted); font-size: .85em; }
.mat-statut-hors_service { color: var(--erreur-fg); font-weight: 500; }
.mat-statut-reforme      { color: var(--fg-muted); }

/* Utilisations — double vue desktop/mobile */
.utilisations-mobile { display: none; }

@media (max-width: 640px) {
  .utilisations-desktop { display: none; }
  .utilisations-mobile { display: block; }

  .utilisations-mobile details {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: .75rem;
    overflow: hidden;
  }
  .utilisations-mobile details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0;
    list-style: none;
  }
  .utilisations-mobile details summary::-webkit-details-marker { display: none; }
  .utilisations-mobile details[open] summary { border-bottom: 1px solid var(--border); }

  .utilis-badge {
    font-size: .8rem;
    background: var(--toggle-bg);
    color: var(--toggle-fg);
    border-radius: 999px;
    padding: .15rem .6rem;
    flex-shrink: 0;
  }
  .utilis-liste {
    padding: .25rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .utilis-liste form {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
  }
  .utilis-liste form span { font-size: .9rem; flex: 1; min-width: 0; }
}

/* Easter egg — tuile secrète */
@keyframes tuile-pop {
  0%   { opacity: 0; transform: translate(var(--tuile-start-x, 0), var(--tuile-start-y, -200px)); }
  70%  { transform: translate(0, 10px); }
  85%  { transform: translate(0, -5px); }
  100% { opacity: 1; transform: translate(0, 0); }
}
.tuile-pop {
  animation: tuile-pop 2.8s ease-out both;
}

/* Forum — pièces jointes */
.forum-pjs-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .5rem 0 .25rem;
}
.forum-pj-lien {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .83rem;
  color: var(--fg-muted);
  text-decoration: none;
  background: var(--surface-hover);
  border-radius: 4px;
  padding: .2rem .55rem;
  max-width: 26rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forum-pj-lien:hover { color: var(--fg); text-decoration: underline; }
.forum-pj-lien small { flex-shrink: 0; }
.forum-pj-widget {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin: -1.1rem 0 .5rem;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: .4rem .6rem;
}
.btn-pj-upload {
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: .35rem;
  user-select: none;
  white-space: nowrap;
  padding: .35rem .7rem;
  border-radius: 6px;
}
.btn-pj-upload i { font-size: 1.25em; }
.pj-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .76rem;
  background: var(--surface-hover);
  border-radius: 4px;
  padding: .2rem .55rem;
  max-width: 26rem;
  overflow: hidden;
}
.pj-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-taille { color: var(--fg-muted); flex-shrink: 0; }
.pj-suppr {
  background: none;
  border: none;
  color: #c0392b;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  padding: 0 .15rem;
  width: auto;
  min-width: auto;
  flex-shrink: 0;
}
.pj-suppr:hover { background: none; color: #922b21; }

/* Dashboard admin */
.da-periode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  font-size: .9rem;
}
.da-periode .btn-lien.active {
  font-weight: 700;
  text-decoration: underline;
}
.da-kpi {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.da-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .4rem 1.25rem;
  min-width: 8rem;
}
.da-kpi-erreur  { border-color: var(--erreur-fg); }
.da-kpi-alerte  { border-color: #f90; }
.da-kpi-value--sm { font-size: 1rem; }
.da-backup-status {
  font-size: .8rem;
  font-weight: 600;
  margin-top: .1rem;
}
.da-backup-ok  { color: var(--succes-fg); }
.da-backup-nok { color: var(--erreur-fg); }
.da-kpi-label {
  font-size: .75rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .1rem;
}
.da-kpi-value {
  font-size: 1.3rem;
  font-weight: 700;
}
.da-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.da-chart-bloc h2 {
  font-size: 1rem;
  margin-bottom: .75rem;
}
@media (max-width: 700px) {
  .da-charts { grid-template-columns: 1fr; }
}


/* Bannière d'installation PWA */
#pwa-install-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 1000;
}
#pwa-install-banner img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
}
#pwa-install-banner .pwa-install-text {
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.4;
}
#pwa-install-banner .pwa-install-text strong {
  display: block;
  margin-bottom: 0.15rem;
}
#pwa-install-banner .pwa-install-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
#pwa-install-banner button {
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
}
#pwa-install-banner .btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
}

/* ── Sélection d'options et de personnes ─────────────────────────────────── */
/* Utilisé par l'envoi d'emails du volet Gestion. La règle globale
   `label { flex-direction: column }` empilerait la case au-dessus de son
   libellé : ces classes rétablissent une disposition en ligne. */

.choix-liste {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: .75rem 0;
}

/* Cadre de l'option : contient l'en-tête cliquable et, le cas échéant,
   les réglages propres à cette option. */
.choix {
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color .15s, background-color .15s;
}
.choix:hover { background: var(--surface-hover); }
.choix:has(input:checked) {
  border-color: var(--btn-bg);
  background: var(--surface-alt);
}
/* En-tête : le bouton (ou la case) suivi de son libellé, sur une ligne */
.choix-entete {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: .65rem;
  cursor: pointer;
}
.choix-entete input {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--btn-bg);
}
.choix-texte {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.choix-aide {
  font-weight: 400;
  font-size: .82rem;
  color: var(--fg-muted);
}
/* Réglages de l'option, dans son cadre, alignés sous le libellé */
.choix-detail { margin: .65rem 0 .1rem 2rem; }

/* Cases à cocher présentées en pastilles cliquables */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.chip {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border: 1px solid var(--border-input);
  border-radius: 999px;
  background: var(--surface);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--btn-bg); }
.chip:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.chip:has(input:checked) {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}
/* La case native reste focusable au clavier mais n'est plus dessinée */
.chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.chip .fa-check { font-size: .75rem; display: none; }
.chip:has(input:checked) .fa-check { display: inline; }

/* Personnes sélectionnées, sous forme de pastilles retirables */
.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  min-height: 1.9rem;
}
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .3rem .2rem .65rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .82rem;
}
.pastille button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0 .2rem;
  font-size: 1rem;
  line-height: 1;
}
.pastille button:hover { opacity: .7; }

/* Menu déroulant de recherche de personnes */
.selecteur {
  position: relative;
  display: inline-block;
  margin-top: .45rem;
}
.selecteur-liste {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 15rem;
  max-height: 13rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.selecteur-liste input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-size: .85rem;
  padding: .4rem .65rem;
}
.selecteur-liste ul {
  list-style: none;
  margin: 0;
  padding: .2rem 0;
}
.selecteur-liste li {
  padding: .35rem .7rem;
  cursor: pointer;
  font-size: .85rem;
  white-space: nowrap;
}
.selecteur-liste li:hover { background: var(--surface-hover); }
.selecteur-liste li.vide { color: var(--fg-muted); cursor: default; }
.selecteur-liste li.vide:hover { background: none; }


/* ── Caisse : couleurs des produits ──────────────────────────────────────── */
/* `neutre` suit les boutons standards, donc la couleur principale configurée */
.caisse-couleur-neutre    { background: var(--btn-bg);             color: var(--btn-fg); }
.caisse-couleur-rouge     { background: var(--caisse-rouge-bg);     color: var(--caisse-rouge-fg); }
.caisse-couleur-orange    { background: var(--caisse-orange-bg);    color: var(--caisse-orange-fg); }
.caisse-couleur-jaune     { background: var(--caisse-jaune-bg);     color: var(--caisse-jaune-fg); }
.caisse-couleur-vert      { background: var(--caisse-vert-bg);      color: var(--caisse-vert-fg); }
.caisse-couleur-turquoise { background: var(--caisse-turquoise-bg); color: var(--caisse-turquoise-fg); }
.caisse-couleur-bleu      { background: var(--caisse-bleu-bg);      color: var(--caisse-bleu-fg); }
.caisse-couleur-violet    { background: var(--caisse-violet-bg);    color: var(--caisse-violet-fg); }
.caisse-couleur-rose      { background: var(--caisse-rose-bg);      color: var(--caisse-rose-fg); }
.caisse-couleur-gris      { background: var(--caisse-gris-bg);      color: var(--caisse-gris-fg); }

/* Aperçu d'un produit (pavé coloré : titre et prix) */
.caisse-pave {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 7rem; min-height: 3.2rem; padding: .35rem .6rem; border-radius: 8px;
  text-align: center; line-height: 1.2; font-weight: 600;
}
.caisse-pave small { font-weight: 400; opacity: .9; }

/* Choix d'une couleur (pastilles radio) */
.caisse-palette { display: flex; flex-wrap: wrap; gap: .4rem; }
.caisse-palette label { display: inline-flex; flex-direction: row; align-items: center; cursor: pointer; }
.caisse-palette input { position: absolute; opacity: 0; width: 0; height: 0; }
.caisse-palette span {
  display: inline-block; width: 2rem; height: 2rem; border-radius: 50%;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border);
}
.caisse-palette input:checked + span { border-color: var(--fg); box-shadow: 0 0 0 2px var(--bg) inset; }
.caisse-palette input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Parcours de formation ── */
.parcours { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: .75rem 1rem; margin-bottom: 1rem; }
.parcours-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.parcours-entete h3 { margin: 0; font-size: 1.05rem; }
.parcours-entete form { margin: 0; flex-shrink: 0; }
.parcours-compteur { font-size: .9rem; color: var(--fg-muted); }
.parcours-barre { height: .5rem; border-radius: 4px; background: var(--surface-alt); overflow: hidden; margin: .5rem 0 .75rem; }
.parcours-barre > span { display: block; height: 100%; background: var(--succes-fg); }
.parcours-etapes { list-style: none; padding: 0; margin: 0; }
.parcours-etapes li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .3rem 0; border-top: 1px solid var(--border); }
.parcours-etapes li:first-child { border-top: none; }
.parcours-derogation { flex-basis: 100%; font-size: .85rem; color: var(--fg-muted); }
.parcours-termine { color: var(--succes-fg); font-weight: 600; }

/* ── Vote rapide (conçu d'abord pour smartphone) ── */
.vr-page { max-width: 34rem; margin-left: auto; margin-right: auto; }
.vr-choix { display: flex; flex-direction: column; gap: .9rem; margin: 1rem 0 1.5rem; }
.vr-choix button {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 3.75rem;
  font-size: 1.25rem; font-weight: 600; color: #fff;
}
.vr-choix button:disabled { opacity: .6; cursor: default; }
.vr-choix .vr-pour, .vr-choix .vr-pour:hover             { background: var(--vr-pour); }
.vr-choix .vr-contre, .vr-choix .vr-contre:hover         { background: var(--vr-contre); }
.vr-choix .vr-abstention, .vr-choix .vr-abstention:hover { background: var(--vr-abstention); }
.vr-choix button:hover { filter: brightness(1.1); }
.vr-attente { font-size: 1.05rem; margin: 1rem 0 1.5rem; }
.vr-attente-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0 1.5rem; }
.vr-attente-ligne .vr-attente { flex: 1; margin: 0; }
.vr-resultats h2 { margin: .5rem 0 .75rem; }
/* Résultats empilés : trois bandeaux de même largeur et de même hauteur */
.vr-resultats-liste { display: flex; flex-direction: column; gap: .6rem; }
.vr-resultat {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 3.75rem; padding: 0 1.1rem; border-radius: 8px;
  color: #fff; font-size: 1.2rem; font-weight: 600;
}
.vr-resultat-pour       { background: var(--vr-pour); }
.vr-resultat-contre     { background: var(--vr-contre); }
.vr-resultat-abstention { background: var(--vr-abstention); }
.vr-nombre { font-size: 2rem; line-height: 1; }
.vr-non-votants { color: var(--fg-muted); margin: .75rem 0 0; }
.vr-compteur { margin: 1.25rem 0 .5rem; }
.vr-votants { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.vr-votant {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem; border-radius: 999px; font-size: .9rem;
  border: 1px solid var(--border-input); background: var(--surface); color: var(--fg-muted);
}
.vr-votant.vr-a-vote { background: var(--succes-bg); color: var(--succes-fg); border-color: transparent; }
/* Deux actions de gestion de même dimension, côte à côte */
.vr-gestion, .vr-actions-selection {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem;
}
.vr-gestion { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.vr-actions-selection { margin-top: 1.5rem; }
.vr-gestion button, .vr-actions-selection button { width: 100%; height: 100%; font-size: .9rem; }