/* Thèmes : variables de couleur, choisies par l'attribut data-theme de <html> (classique par défaut) */
:root, [data-theme="classique"] {
  --accent: #1d3b6e; --accent-texte: #fff; --fond: #fff; --surface: #fff; --fond2: #fbfbfc; --survol: #f2f3f5;
  --texte: #222; --texte2: #5f6470; --bord: #e1e3e8; --rouge: #e5484d; --libre: #d8f5dd; --weekend: #f7f7f9;
  --ferme-a: #e8e8ec; --ferme-b: #f6f6f8; --zebra: #f8f9fb; --mois-fond: #eef2fa; --info: #f2c94c;
  --pave-texte: #fff; --bandeau: #333; --choisi: #111; color-scheme: light; }
[data-theme="nuit"] {
  --accent: #7aa2f7; --accent-texte: #0f1320; --fond: #14171f; --surface: #1c2029; --fond2: #191c24; --survol: #262b36;
  --texte: #e3e6ee; --texte2: #9aa1b2; --bord: #2c3240; --rouge: #ff6b6f; --libre: #1f3d2a; --weekend: #181b23;
  --ferme-a: #22262f; --ferme-b: #1a1d25; --zebra: #1a1e27; --mois-fond: #1f2638; --info: #c9a227;
  --pave-texte: #fff; --bandeau: #e3e6ee; --choisi: #fff; color-scheme: dark; }
[data-theme="pastel"] {
  --accent: #7c6fb0; --accent-texte: #fff; --fond: #fdfcfa; --surface: #fff; --fond2: #f8f5f0; --survol: #f1ecf7;
  --texte: #3a3645; --texte2: #6f6a7d; --bord: #e9e3ef; --rouge: #d9534f; --libre: #dff3e4; --weekend: #f6f3f8;
  --ferme-a: #ece7f0; --ferme-b: #f7f4f9; --zebra: #faf8fc; --mois-fond: #efeaf8; --info: #f3c98b;
  --pave-texte: #2e2a38; --bandeau: #4a4458; --choisi: #3a3645; color-scheme: light; }
[data-theme="foret"] {
  --accent: #2f7d4a; --accent-texte: #fff; --fond: #fbfdfb; --surface: #fff; --fond2: #f4f8f4; --survol: #e9f2ea;
  --texte: #1f2a22; --texte2: #56645a; --bord: #dbe6dc; --rouge: #d64545; --libre: #cdeed5; --weekend: #f2f6f2;
  --ferme-a: #e3eae3; --ferme-b: #f3f7f3; --zebra: #f6faf6; --mois-fond: #e6f2e8; --info: #e2b93b;
  --pave-texte: #fff; --bandeau: #24452f; --choisi: #1f2a22; color-scheme: light; }
:root { font: 13px/1.35 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
body { color: var(--texte); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); height: 100vh; display: flex; flex-direction: column; }
#app { display: flex; flex-direction: column; height: 100vh; }
button { font: inherit; border: 1px solid var(--bord); background: var(--surface); color: var(--texte); border-radius: 6px; padding: 4px 9px; cursor: pointer; }
button:hover { background: var(--survol); }
button.actif, summary.actif { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }

.barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--bord); }
.titre { color: var(--accent); font-size: 15px; margin-right: 4px; }
.groupe, .onglets, .jours { display: flex; align-items: center; gap: 4px; }
.periode { margin-left: 6px; color: var(--texte2); }
.moi { margin-left: auto; color: var(--texte2); }
.moi a { color: var(--accent); }
.filtre { position: relative; }
.filtre summary { list-style: none; border: 1px solid var(--bord); border-radius: 6px; padding: 4px 9px; cursor: pointer; }
.filtre .liste { position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--bord); border-radius: 6px;
  box-shadow: 0 4px 16px #0002; padding: 6px; max-height: 60vh; overflow: auto; min-width: 220px; }
.filtre label { display: block; padding: 2px 4px; white-space: nowrap; }
.coche input { vertical-align: -2px; }
.conflits.alerte { border-color: var(--rouge); color: var(--rouge); font-weight: 600; }
.liste-conflits { position: fixed; right: 12px; top: 56px; width: 320px; max-height: 70vh; overflow: auto; z-index: 40;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 8px; box-shadow: 0 6px 24px #0003; padding: 6px; }
.liste-conflits button { display: block; width: 100%; text-align: left; margin-bottom: 4px; }
.liste-conflits small { color: var(--rouge); }
.bandeau { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--bandeau); color: var(--fond);
  padding: 8px 14px; border-radius: 8px; z-index: 50; }
.vide { padding: 40px; color: var(--texte2); }

.plan { flex: 1; display: flex; min-height: 0; }
.timeline { flex: 1; overflow: auto; position: relative; min-width: 0; }
.grille { display: grid; width: 100%; min-width: min-content; user-select: none; }
.grille > div { border-right: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.entete { position: sticky; background: var(--surface); z-index: 10; font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; }
.mois { top: 0; height: 22px; font-weight: 600; color: var(--accent); padding-top: 3px; }
.jour { top: 22px; height: 22px; padding-top: 3px; color: var(--texte2); }
.coin { left: 0; z-index: 20; }
.coin:first-child { top: 0; }
.jours-entete { top: 22px; }
.section { position: sticky; left: 0; background: var(--survol); font-weight: 600; padding: 4px 8px; cursor: pointer; z-index: 5; }
.nom { position: sticky; left: 0; background: var(--surface); z-index: 4; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case { min-height: 30px; padding: 2px 1px; display: flex; flex-direction: column; gap: 2px; }
.weekend { background: var(--weekend); }
.ferme { background: repeating-linear-gradient(45deg, var(--ferme-a), var(--ferme-a) 4px, var(--ferme-b) 4px, var(--ferme-b) 8px); }
.jour.info { box-shadow: inset 0 -3px 0 var(--info); }
.case.libre { background: var(--libre); }
.pave { --pave-fond: var(--c); background: var(--pave-fond); color: var(--pave-texte); border-radius: 4px; padding: 1px 4px; font-size: 11px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-height: 14px; cursor: pointer; }
.pave.conflit { outline: 2px solid var(--rouge); outline-offset: -1px; box-shadow: inset 0 0 0 99px #e5484d55; }
.pave.surligne { outline: 3px solid var(--choisi); }
.compact .pave { padding: 0; min-height: 10px; border-radius: 2px; }
.compact .case { padding: 1px 0; }

.login main { max-width: 360px; margin: 18vh auto; text-align: center; }
.login .bouton { display: inline-block; background: var(--accent); color: var(--accent-texte); padding: 10px 18px; border-radius: 8px; text-decoration: none; }
.erreur { color: var(--rouge); }

.pave.choisi { outline: 2px solid var(--choisi); outline-offset: 1px; }
.case:not(.ferme) { cursor: copy; }
.panneau { width: 300px; border-left: 1px solid var(--bord); padding: 10px 12px; overflow: auto; display: flex;
  flex-direction: column; gap: 8px; background: var(--fond2); }
.panneau header { display: flex; justify-content: space-between; align-items: center; }
.panneau label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--texte2); }
.panneau label.coche { flex-direction: row; align-items: center; gap: 6px; }
.panneau .ligne { display: flex; gap: 8px; }
.panneau .ligne label { flex: 1; }
.panneau input, .panneau select, .panneau textarea { font: inherit; padding: 4px 6px; border: 1px solid var(--bord); border-radius: 6px; background: var(--surface); color: var(--texte); }
.panneau .alerte { color: var(--rouge); margin: 0; font-weight: 600; }
.panneau .supprimer { color: var(--rouge); }
.panneau .aide { font-size: 11px; color: var(--texte2); }

.reglages { flex: 1; overflow: auto; padding: 12px 16px; }
.sous-onglets { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tableau { border-collapse: collapse; }
.tableau th { background: var(--accent); color: var(--accent-texte); text-align: left; padding: 5px 8px; font-weight: 600; }
.tableau td { border-bottom: 1px solid var(--bord); padding: 3px 6px; }
.tableau tr:nth-child(even) td { background: var(--zebra); }
.tableau tr.archive td { color: var(--texte2); }
.tableau input[type=text], .tableau input:not([type]), .tableau input[type=date], .tableau input[type=number], .tableau select {
  font: inherit; padding: 3px 6px; border: 1px solid var(--bord); border-radius: 5px; min-width: 120px; background: var(--surface); color: var(--texte); }
.tableau .fusion { display: flex; gap: 4px; }
.reglages .aide { color: var(--texte2); max-width: 800px; }
label.coche { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.rapports { flex: 1; display: flex; min-height: 0; }
.reglages-rapport { width: 320px; padding: 12px; border-right: 1px solid var(--bord); overflow: auto; display: flex; flex-direction: column; gap: 10px; background: var(--fond2); }
.reglages-rapport > label, .reglages-rapport .ligne label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--texte2); }
.reglages-rapport select, .reglages-rapport input:not([type=checkbox]) { font: inherit; padding: 4px 6px; border: 1px solid var(--bord); border-radius: 6px; background: var(--surface); color: var(--texte); }
.reglages-rapport .ligne { display: flex; gap: 6px; }
.liste-choix { max-height: 180px; overflow: auto; border: 1px solid var(--bord); border-radius: 6px; padding: 4px 6px; background: var(--surface); display: flex; flex-direction: column; }
.actions { display: flex; gap: 6px; }
.bouton { display: inline-block; background: var(--accent); color: var(--accent-texte); padding: 6px 14px; border-radius: 6px; text-decoration: none; }
.bouton.inactif { opacity: .4; pointer-events: none; }
.enregistre { display: flex; gap: 4px; margin-top: 4px; }
.enregistre button:first-child { flex: 1; text-align: left; }
.apercu { flex: 1; overflow: auto; padding: 12px 18px; }
.apercu h2 { color: var(--accent); margin: 0 0 2px; font-size: 17px; }
.apercu .aide { color: var(--texte2); margin-top: 0; }
.tableau tr.mois td { background: var(--mois-fond); color: var(--accent); font-weight: 700; }
.login main img { width: 90px; }

/* Thèmes : pavés éclaircis (pastel) ou assombris (nuit) pour rester lisibles */
[data-theme="nuit"] .pave { --pave-fond: color-mix(in srgb, var(--c) 78%, #000); }
[data-theme="pastel"] .pave { --pave-fond: color-mix(in srgb, var(--c) 32%, #fff); }
.theme { padding: 3px 6px; border: 1px solid var(--bord); border-radius: 6px; background: var(--surface); color: var(--texte); font: inherit; }
.login .bouton { color: var(--accent-texte); }