:root {
  --fond: #f4f6f8;
  --carte: #ffffff;
  --texte: #1f2933;
  --texte-doux: #62707d;
  --bord: #dde3ea;
  --accent: #2f6f4e;
  --accent-clair: #e6f1ea;
  --danger: #b3261e;
  --rayon: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14181c;
    --carte: #1c2126;
    --texte: #e6eaee;
    --texte-doux: #9aa5b1;
    --bord: #2c343b;
    --accent: #6fbf8e;
    --accent-clair: #21312a;
    --danger: #ef8a84;
  }
}

* { box-sizing: border-box; }

/* L'attribut hidden doit primer sur les display: grid/flex definis plus bas. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.25; }
h2 { font-size: 1.15rem; margin: 0; }
h3 { font-size: .95rem; margin: 22px 0 8px; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .04em; }

input, select, textarea, button { font: inherit; color: inherit; }

input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--carte);
}

textarea { resize: vertical; }

label { display: block; font-size: .85rem; color: var(--texte-doux); margin-bottom: 10px; }
label input, label select { margin-top: 4px; }

button { cursor: pointer; border-radius: 8px; border: 1px solid transparent; padding: 8px 14px; }
button.primaire { background: var(--accent); color: #fff; border-color: var(--accent); }
button.secondaire { background: var(--carte); border-color: var(--bord); }
button.petit { padding: 5px 10px; font-size: .85rem; }
button.lien { background: none; border: none; color: var(--texte-doux); padding: 4px 6px; }
button.lien.danger { color: var(--danger); }
button:hover { filter: brightness(1.06); }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 18px;
}

.sous-titre { color: var(--texte-doux); font-size: .85rem; }
.aide { color: var(--texte-doux); font-size: .85rem; }
.erreur { color: var(--danger); font-size: .85rem; }
code { background: var(--accent-clair); padding: 1px 5px; border-radius: 4px; font-size: .85em; }

/* Connexion */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login { width: min(380px, 100%); }
.login h1 { margin: 0 0 2px; font-size: 1.4rem; }
.login p.sous-titre { margin: 0 0 20px; }
.login button { width: 100%; margin-top: 8px; }

/* En-tête */
.entete {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--carte); border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 5;
}
.marque { display: flex; flex-direction: column; }
.onglets { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.onglets button { background: none; border: none; color: var(--texte-doux); padding: 8px 12px; }
.onglets button.actif { background: var(--accent-clair); color: var(--accent); font-weight: 600; }
.utilisateur { display: flex; align-items: center; gap: 10px; font-size: .9rem; }

main { padding: 20px; max-width: 1400px; margin: 0 auto; }
.panneau { display: none; }
.panneau.actif { display: block; }

.colonnes { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .colonnes { grid-template-columns: 1fr; } }

.entete-carte { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

/* Liste des réunions */
.liste-reunions ul { list-style: none; margin: 12px 0 0; padding: 0; }
.liste-reunions li {
  padding: 10px; border: 1px solid var(--bord); border-radius: 8px;
  margin-bottom: 8px; cursor: pointer;
}
.liste-reunions li.actif { border-color: var(--accent); background: var(--accent-clair); }
.liste-reunions .ligne-date { font-weight: 600; }
.liste-reunions .ligne-meta { font-size: .8rem; color: var(--texte-doux); }

.badge {
  font-size: .75rem; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-clair); color: var(--accent); white-space: nowrap;
}
.badge.en_cours { background: #fff3cd; color: #7a5b00; }
.badge.cloturee { background: var(--bord); color: var(--texte-doux); }

.actions-globales ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: .85rem; }
.actions-globales li { padding: 6px 0; border-bottom: 1px dashed var(--bord); }
.actions-globales .resp { color: var(--texte-doux); }

/* Détail réunion */
.titre-edit { font-size: 1.15rem; font-weight: 600; border: none; padding: 4px 0; background: none; }
.titre-edit:focus { outline: none; border-bottom: 1px solid var(--accent); }
.meta-ligne { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.meta-ligne input { width: auto; }
.meta-ligne input.large { min-width: 260px; flex: 1; }
.statut-bloc { display: flex; align-items: center; gap: 8px; }

.etapes { display: flex; gap: 6px; margin: 18px 0 14px; border-bottom: 1px solid var(--bord); flex-wrap: wrap; }
.etapes button { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--texte-doux); }
.etapes button.actif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.etape { display: none; }
.etape.actif { display: block; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grille-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
@media (max-width: 700px) { .grille-2, .grille-3 { grid-template-columns: 1fr; } }

.cases, .presence { display: flex; flex-wrap: wrap; gap: 8px; }
.cases label, .presence .membre {
  display: flex; align-items: center; gap: 6px; margin: 0;
  border: 1px solid var(--bord); border-radius: 999px; padding: 5px 12px;
  font-size: .85rem; color: var(--texte); background: var(--carte);
}
.cases input[type=checkbox] { width: auto; margin: 0; }
.presence .membre select { width: auto; border: none; background: none; padding: 0 4px; font-size: .8rem; }

/* Points */
.points { display: flex; flex-direction: column; gap: 12px; }
.point { border: 1px solid var(--bord); border-radius: 8px; padding: 12px; }
.point-entete { display: flex; align-items: center; gap: 8px; }
.point-entete .numero { color: var(--texte-doux); font-weight: 600; min-width: 18px; }
.point-corps { margin-top: 10px; display: none; }
.point-corps textarea { margin-bottom: 8px; }
.points[data-mode="preparation"] .point-corps.preparation { display: block; }
.points[data-mode="seance"] .point-corps.seance { display: block; }

.votes { display: flex; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.votes label { display: flex; align-items: center; gap: 6px; margin: 0; }
.votes input { width: 70px; }

.actions-point { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.action { display: grid; grid-template-columns: 2fr 1.2fr 140px 120px 32px; gap: 6px; align-items: center; }
@media (max-width: 800px) { .action { grid-template-columns: 1fr 1fr; } }

.barre-boutons { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }

.apercu {
  border: 1px solid var(--bord); border-radius: 8px; padding: 14px;
  background: var(--fond); margin-top: 10px; max-height: 480px; overflow: auto;
}
.apercu .sujet { font-weight: 600; margin-bottom: 4px; }
.apercu .destinataires { font-size: .8rem; color: var(--texte-doux); margin-bottom: 10px; word-break: break-all; }
.apercu.mono { white-space: pre-wrap; font-family: Consolas, "Courier New", monospace; font-size: .82rem; }

.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau th, .tableau td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--bord); }
.tableau th { color: var(--texte-doux); font-weight: 600; font-size: .8rem; text-transform: uppercase; }
/* Le bleu par defaut des liens est illisible sur fond sombre. */
.tableau a { color: var(--texte); text-decoration: underline; text-underline-offset: 2px; }
.tableau a:hover { color: var(--accent); }

.tableau-edit td { padding: 4px 6px; }
.tableau-edit input { border-color: transparent; background: transparent; }
.tableau-edit input:hover { border-color: var(--bord); }
.tableau-edit input:focus { border-color: var(--accent); background: var(--carte); outline: none; }
.tableau-edit td:last-child { width: 36px; text-align: right; }

.alerte {
  border: 1px solid var(--bord); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 10px 14px; margin: 12px 0; font-size: .85rem;
}
.alerte ul { margin: 6px 0 0; padding-left: 18px; }
.alerte li { margin-bottom: 4px; }

.pied-sauvegarde {
  display: flex; justify-content: flex-end; align-items: center; gap: 12px;
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--bord);
}

.vide { color: var(--texte-doux); text-align: center; padding: 60px 20px; }

.liste-fichiers { list-style: none; padding: 0; }
.liste-fichiers li { padding: 8px 0; border-bottom: 1px solid var(--bord); display: flex; justify-content: space-between; gap: 12px; }
.liste-fichiers .chemin { color: var(--texte-doux); font-size: .8rem; }