:root {
  --fond: #f4f1ea;
  --papier: #fffdf8;
  --encre: #1f2328;
  --gris: #6b6f76;
  --trait: #e2ddd1;
  --trait-fort: #cfc8b8;
  --boutique: #1f6f8b;
  --rouge: #c0392b;
  --rouge-pale: #fbe3df;
  --orange: #c77c0e;
  --orange-pale: #fdf0d8;
  --vert: #2e7d4f;
  --vert-pale: #e1f1e6;
  --rayure: rgba(192, 57, 43, .16);
  --rayon: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--encre);
  background: var(--fond);
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.4; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
a { color: inherit; }
.aide { color: var(--gris); font-size: .85rem; margin: 0 0 .8em; }
small { color: var(--gris); }

/* --------------------------------------------------------------- entête */
.entete {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem;
  padding: .5rem 1.2rem; background: var(--entete, var(--encre)); color: #fff;
  transition: background-color .3s;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18);
}
.marque { font-weight: 800; text-decoration: none; letter-spacing: -.02em; font-size: 1.15rem; display: flex; align-items: center; min-height: 3rem; }
.marque img { height: 4.6rem; width: auto; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.marque img[hidden], .marque span[hidden] { display: none; }
.marque span span, .connexion h1 span { font-weight: 400; opacity: .6; margin-left: .3em; }
@media (max-width: 600px) { .marque img { height: 3.4rem; } }
.entete nav { display: flex; gap: .2rem; flex-wrap: wrap; }
.entete nav a { text-decoration: none; padding: .35rem .7rem; border-radius: 999px; opacity: .8; }
.entete nav a:hover { opacity: 1; background: rgba(255,255,255,.08); }
.entete nav a { font-weight: 600; }
.entete nav a.actif { opacity: 1; background: rgba(0,0,0,.25); }
.entete nav a.discret { opacity: .5; }

main { max-width: 1100px; margin: 0 auto; padding: 1.2rem; }
main.large { max-width: 1500px; }
main.centre { min-height: 100vh; display: grid; place-items: center; }

.flash {
  background: var(--papier); border: 1px solid var(--trait-fort); border-left: 4px solid var(--boutique);
  padding: .6rem .9rem; border-radius: 8px; margin-bottom: 1rem;
}
.carte { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.2rem; }
.connexion { width: min(340px, 100%); display: grid; gap: .8rem; }

/* --------------------------------------------------------------- boutons & champs */
button, .bouton {
  font: inherit; cursor: pointer; padding: .45rem .85rem; border-radius: 8px;
  border: 1px solid var(--trait-fort); background: var(--papier); color: var(--encre); text-decoration: none;
  display: inline-block;
}
button:hover, .bouton:hover { border-color: var(--encre); }
button.principal, .bouton.principal { background: var(--encre); color: #fff; border-color: var(--encre); }
button.principal:hover { background: #000; }
button.discret { color: var(--gris); }
button.danger { color: var(--rouge); }
button.lien { border: none; background: none; text-decoration: underline; color: var(--gris); padding: .45rem .3rem; }
button.icone { width: 2.2rem; height: 2.2rem; padding: 0; font-size: 1.3rem; line-height: 1; border-radius: 50%; }
input, select, textarea {
  font: inherit; padding: .45rem .6rem; border: 1px solid var(--trait-fort); border-radius: 8px;
  background: #fff; color: var(--encre); width: 100%;
}
label { display: grid; gap: .25rem; font-size: .9rem; font-weight: 600; }
label.case-a-cocher { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; }
label.case-a-cocher input { width: auto; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; }
fieldset { border: 1px solid var(--trait); border-radius: 8px; padding: .6rem .8rem; margin: 0; }
legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.jours-choix { display: flex; flex-wrap: wrap; gap: .3rem .8rem; }

/* --------------------------------------------------------------- barre planning */
.barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.onglets { display: flex; gap: .4rem; }
.onglet {
  border-radius: 999px; padding: .45rem 1.1rem; font-weight: 700;
  border: 2px solid var(--c); color: var(--c); background: transparent;
}
.onglet.actif { background: var(--c); color: #fff; }
a.onglet { text-decoration: none; display: inline-block; }
.onglets-page { margin-bottom: 1rem; flex-wrap: wrap; }
.navsemaine { display: flex; align-items: center; gap: .5rem; }
.titresemaine { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; min-width: 15rem; }
@media (max-width: 600px) {
  .navsemaine { flex-wrap: wrap; width: 100%; justify-content: space-between; }
  .titresemaine { min-width: 0; flex: 1; font-size: .9rem; }
  .navsemaine .lien { flex-basis: 100%; text-align: center; }
  main { padding: .8rem; }
}
.pastille { font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.pastille.brouillon { background: var(--orange-pale); color: var(--orange); }
.pastille.publiee { background: var(--vert-pale); color: var(--vert); }
.pastille.vide { background: var(--trait); color: var(--gris); }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.actions .principal { margin-left: auto; }

.zone { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .zone { grid-template-columns: 1fr; } .actions .principal { margin-left: 0; } }

/* --------------------------------------------------------------- grille */
.grille-cadre { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); overflow-x: auto; }
.grille { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.grille th, .grille td { border-bottom: 1px solid var(--trait); padding: 0; }
.grille thead th { background: var(--papier); position: sticky; top: 0; z-index: 1; font-weight: 600; }
.grille th.coin { text-align: left; padding: .5rem .8rem; color: var(--boutique); font-size: 1.05rem; border-bottom: 3px solid var(--boutique); }
.grille th.jour { padding: .45rem .2rem .1rem; border-left: 1px solid var(--trait-fort); font-size: .85rem; }
.grille th.jour span { color: var(--gris); font-weight: 400; }
.grille th.jour.auj { color: var(--boutique); }
.grille th.jour.auj b { background: var(--boutique); color: #fff; border-radius: 999px; padding: 0 .4rem; }
.grille th.plage { font-size: .7rem; color: var(--gris); font-weight: 500; padding: .1rem 0 .3rem; border-bottom: 3px solid var(--boutique); }
.grille th.plage:nth-child(odd) { border-left: 1px solid var(--trait-fort); }
.grille th.ferme { color: #b8b2a5; }
.grille th.cpt { font-size: .75rem; color: var(--gris); padding: .3rem .6rem; border-bottom: 3px solid var(--boutique); border-left: 1px solid var(--trait-fort); }

.grille th.nom { text-align: left; padding: .45rem .8rem; white-space: nowrap; position: sticky; left: 0; background: var(--papier); z-index: 1; }
.prenom { font-weight: 700; margin-right: .35rem; }
.etiq { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--gris); background: var(--fond); border-radius: 4px; padding: .05rem .3rem; margin-right: .2rem; }
.etiq.joker { background: var(--encre); color: #fff; }
tr.joker th.nom, tr.joker td:not(.ferme) { background: #f8f5ee; }
tr.joker { border-top: 2px solid var(--trait-fort); }

.case { min-width: 2.7rem; height: 2.6rem; cursor: pointer; position: relative; text-align: center; vertical-align: middle; }
.case:not(.finjour) { border-left: 1px solid var(--trait-fort); }
.case.finjour { border-left: 1px dashed var(--trait); }
.case:hover { background: rgba(0,0,0,.035); }
.case.ferme { background: repeating-linear-gradient(135deg, #ece8de 0 4px, #e4dfd3 4px 8px); cursor: not-allowed; }
.case.repos { background-color: #efece5; }
.case.prefere { box-shadow: inset 0 -3px 0 rgba(46, 125, 79, .45); }
.case.indispo { background: repeating-linear-gradient(135deg, var(--rayure) 0 5px, transparent 5px 10px); }
.case .bloc {
  margin: 3px; border-radius: 6px; background: var(--boutique); color: #fff;
  font-size: .78rem; font-weight: 700; height: calc(100% - 6px); display: grid; place-items: center;
}
.case.brouillon .bloc { background: color-mix(in srgb, var(--boutique) 55%, white); }
.case .bloc.surmesure { font-size: .62rem; letter-spacing: -.02em; outline: 2px dotted rgba(255,255,255,.8); outline-offset: -4px; }
.case .bloc.ailleurs { background: none; color: var(--gris); border: 1px dashed var(--trait-fort); font-weight: 500; font-size: .7rem; }
.case.ailleurs { cursor: default; }
.case.indispo.present .bloc { background: var(--rouge); }
.case.propose .bloc {
  background: color-mix(in srgb, var(--boutique) 18%, white); color: var(--boutique);
  border: 2px dashed var(--boutique);
}
.ech.propose { background: color-mix(in srgb, var(--boutique) 18%, white); border: 2px dashed var(--boutique); }
button.moteur { background: var(--boutique); color: #fff; border-color: var(--boutique); font-weight: 700; }
button.moteur:hover { filter: brightness(1.1); border-color: var(--boutique); }
.proposer { display: grid; gap: .7rem; margin-bottom: 1rem; border-left: 4px solid var(--boutique); }
.proposer[hidden], .bandeau[hidden], .rapport[hidden], #bulle-ligne-garder[hidden] { display: none; }
.proposer .ligne { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: end; }
.proposer select { width: auto; }
.proposer .aide { margin: .2rem 0 0; }
.bandeau {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
  background: color-mix(in srgb, var(--boutique) 12%, white); border: 2px dashed var(--boutique);
  border-radius: var(--rayon); padding: .6rem .9rem; margin-bottom: 1rem; font-size: .9rem;
}
.bandeau button { margin-left: .3rem; }
.rapport { margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--trait); }
.rapport .alerte { margin-top: .4rem; }
.pourquoi { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .8rem; color: var(--gris); }

.grille td.cpt { padding: .3rem .6rem; border-left: 1px solid var(--trait-fort); white-space: nowrap; font-size: .85rem; }
.grille td.cpt b { display: block; }
.grille td.cpt small { font-size: .72rem; }
.grille td.cpt b.haut { color: var(--orange); }
.grille td.cpt b.bas { color: var(--gris); }
.grille td.annee { min-width: 9rem; }
.ann { display: flex; align-items: baseline; gap: .3rem; }
.ecart { font-size: .72rem; font-weight: 700; padding: 0 .3rem; border-radius: 4px; margin-left: auto; }
.ecart.ok { background: var(--vert-pale); color: var(--vert); }
.ecart.haut { background: var(--orange-pale); color: var(--orange); }
.ecart.bas { background: #e8e9ec; color: var(--gris); }
.jauge { position: relative; height: 5px; border-radius: 3px; background: var(--trait); margin-top: .3rem; }
.jauge i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--boutique); border-radius: 3px; }
.jauge em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--encre); }

.grille tfoot th, .grille tfoot td { border-top: 2px solid var(--trait-fort); border-bottom: none; }
.couv { text-align: center; font-size: .82rem; padding: .35rem 0 !important; position: relative; }
.couv:not(.finjour) { border-left: 1px solid var(--trait-fort); }
.couv small { font-size: .68rem; }
.couv.ok { background: var(--vert-pale); color: var(--vert); }
.couv.moyen { background: var(--orange-pale); color: var(--orange); }
.couv.bas { background: var(--rouge-pale); color: var(--rouge); }
.couv.ferme { background: #ece8de; }
.couv .pt { position: absolute; top: 2px; right: 3px; font-style: normal; font-weight: 800; color: var(--rouge); font-size: .7rem; }
.eclair { animation: eclair 1.6s ease-out; }
@keyframes eclair { 0%, 30% { box-shadow: inset 0 0 0 3px var(--encre); } 100% { box-shadow: inset 0 0 0 3px transparent; } }

.legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .7rem .9rem; font-size: .78rem; color: var(--gris); border-top: 1px solid var(--trait); }
.legende span { display: inline-flex; align-items: center; gap: .3rem; }
.legende .aide { margin: 0; flex-basis: 100%; }
.ech { width: 1.1rem; height: .8rem; border-radius: 3px; display: inline-block; border: 1px solid var(--trait-fort); }
.ech.present { background: var(--boutique); border-color: var(--boutique); }
.ech.present.brouillon { background: color-mix(in srgb, var(--boutique) 55%, white); }
.ech.indispo { background: repeating-linear-gradient(135deg, var(--rayure) 0 3px, transparent 3px 6px); }
.ech.repos { background: #efece5; }
.ech.prefere { box-shadow: inset 0 -3px 0 rgba(46, 125, 79, .45); }
.ech.ferme { background: repeating-linear-gradient(135deg, #ece8de 0 2px, #d9d3c5 2px 4px); }

/* --------------------------------------------------------------- panneau alertes */
.panneau { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
.compte { font-size: .8rem; background: var(--orange); color: #fff; border-radius: 999px; padding: .05rem .5rem; vertical-align: middle; }
.compte.rouge { background: var(--rouge); }
.compte:empty { display: none; }
.alertes { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; }
.alerte { padding: .45rem .6rem; border-radius: 8px; border-left: 4px solid; font-size: .85rem; display: grid; gap: .1rem; }
.alerte strong { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.alerte.rouge { background: var(--rouge-pale); border-color: var(--rouge); }
.alerte.rouge strong { color: var(--rouge); }
.alerte.orange { background: var(--orange-pale); border-color: var(--orange); }
.alerte.orange strong { color: var(--orange); }
.alerte.cliquable { cursor: pointer; }
.alerte.cliquable:hover { filter: brightness(.97); }
.rien { color: var(--vert); font-size: .9rem; }
.filtres summary { cursor: pointer; font-size: .85rem; color: var(--gris); }
.filtre { display: flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .82rem; margin: .3rem 0; }
.filtre input { width: auto; }
.pt.rouge, .pt.orange { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.pt.rouge { background: var(--rouge); } .pt.orange { background: var(--orange); }

/* --------------------------------------------------------------- bulle & toast */
.bulle {
  position: absolute; z-index: 10; background: var(--papier); border: 1px solid var(--trait-fort);
  border-radius: var(--rayon); padding: .8rem; box-shadow: 0 10px 30px rgba(0,0,0,.15); width: 270px; display: grid; gap: .55rem;
}
.bulle[hidden] { display: none; }
.bulle-titre { font-weight: 700; }
.bulle .ligne { display: flex; gap: .4rem; flex-wrap: wrap; }
.bulle .ligne label { flex: 1; }
.toast {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--encre); color: #fff;
  padding: .6rem 1rem; border-radius: 999px; font-size: .9rem; z-index: 20; max-width: 90vw; text-align: center;
}
.toast[hidden] { display: none; }

/* --------------------------------------------------------------- tableaux simples */
.tableau { width: 100%; border-collapse: collapse; background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau th { font-size: .78rem; color: var(--gris); font-weight: 600; background: #faf7f0; }
.tableau tr.inactif td { opacity: .5; }
.tableau tr.ignoree td { opacity: .45; text-decoration: line-through; }
.tableau .num { text-align: right; }
.tableau form { display: inline; }
.tableau button { padding: .25rem .55rem; font-size: .82rem; }
.cadre-tableau { overflow-x: auto; }
.pastille-b { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.entete-page { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.entete-page h1 { margin: 0; }
.pile { display: grid; gap: 1rem; }

/* --------------------------------------------------------------- bilan */
.bilan-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.chiffres { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: .8rem 0; }
.chiffre { background: var(--fond); border-radius: 8px; padding: .55rem .7rem; }
.chiffre b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.chiffre small { font-size: .75rem; }
.chiffre.rouge b { color: var(--rouge); } .chiffre.vert b { color: var(--vert); } .chiffre.orange b { color: var(--orange); }
.barres { display: grid; gap: .35rem; margin: .8rem 0; }
.barre-l { display: grid; grid-template-columns: 11rem 1fr 4.5rem; gap: .5rem; align-items: center; font-size: .8rem; }
.barre-l .rail { background: var(--fond); height: .8rem; border-radius: 4px; position: relative; overflow: hidden; }
.barre-l .rail i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.barre-l .val { text-align: right; font-variant-numeric: tabular-nums; }
.modeles { display: grid; gap: .7rem; margin-bottom: 1rem; border-left: 4px solid var(--boutique); }
.modeles[hidden] { display: none; }
.modeles .aide { margin: .2rem 0 0; }
.modeles .ligne { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.modeles .ligne label { flex: 1; min-width: 220px; }
.liste-modeles { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.liste-modeles .modele { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border: 1px solid var(--trait); border-radius: 8px; background: var(--fond); }
.liste-modeles .info { display: grid; gap: .15rem; }
.liste-modeles .titre { display: flex; align-items: baseline; gap: .4rem; }
.liste-modeles .titre .lien { padding: 0; font-size: .75rem; }
.liste-modeles .periode { display: flex; align-items: center; gap: .3rem; }
select.mois-mini { width: auto; padding: .1rem .3rem; font-size: .8rem; }
.modeles label.mois { flex: 0 0 auto; min-width: 0; }
.modeles label.mois select { width: auto; }
.attention { color: var(--orange); font-weight: 600; }
.modele-retenu { background: var(--fond); border-radius: 8px; padding: .5rem .6rem; font-size: .85rem; margin-bottom: .4rem; }
.modele-retenu li.retenu { color: var(--vert); font-weight: 700; }
.modele-retenu details summary { cursor: pointer; font-size: .8rem; color: var(--gris); margin-top: .3rem; }
.proposer label select { min-width: 12rem; }
.liste-modeles .btns { display: flex; gap: .3rem; flex-wrap: wrap; }
.liste-modeles button { padding: .3rem .6rem; font-size: .85rem; }
.compte.gris { background: var(--gris); }
.zone-danger { border-color: var(--rouge); border-left: 4px solid var(--rouge); margin-top: 1rem; }
.zone-danger h2 { color: var(--rouge); }
.verdict { font-size: .9rem; padding: .6rem .8rem; border-radius: 8px; background: var(--fond); }