/* =====================================================================
   Carré Sport — feuille de style du back-office
   Sobre, dense, lisible à l'accueil comme sur le téléphone du gérant.
   ===================================================================== */

:root {
  --vert:          #1f7a3d;
  --vert-fonce:    #15592c;
  --vert-clair:    #e8f5ec;

  --fond:          #f5f6f7;
  --surface:       #ffffff;
  --surface-alt:   #fafbfc;
  --bordure:       #e2e5e9;
  --bordure-forte: #c9ced6;

  --texte:         #1b1f24;
  --texte-doux:    #5c6672;
  --texte-faible:  #8b949e;

  --rouge:         #c0392b;
  --rouge-clair:   #fdecea;
  --ambre:         #9a6700;
  --ambre-clair:   #fff8e1;
  --bleu:          #1a5fb4;
  --bleu-clair:    #e8f0fb;

  --rayon:         8px;
  --rayon-petit:   5px;
  --ombre:         0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --ombre-forte:   0 4px 16px rgba(16, 24, 40, .12);

  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vert:          #3fa45f;
    --vert-fonce:    #2d8549;
    --vert-clair:    #16271c;

    --fond:          #15181c;
    --surface:       #1c2126;
    --surface-alt:   #22282e;
    --bordure:       #2f363d;
    --bordure-forte: #434b54;

    --texte:         #e6edf3;
    --texte-doux:    #a9b4bf;
    --texte-faible:  #7d8691;

    --rouge-clair:   #2d1a18;
    --ambre-clair:   #2a2316;
    --bleu-clair:    #16202e;

    --ombre:         0 1px 3px rgba(0, 0, 0, .4);
    --ombre-forte:   0 4px 16px rgba(0, 0, 0, .5);
  }
}

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

/* Les composants ci-dessous posent un display explicite, qui masquerait
   l'attribut hidden sans cette règle. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.55 var(--police);
  color: var(--texte);
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.45rem; margin: 0 0 .2em; letter-spacing: -.01em; }
h2 { font-size: 1.1rem;  margin: 0 0 .75em; letter-spacing: -.005em; }
a  { color: var(--vert); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font: .88em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-alt);
  border: 1px solid var(--bordure);
  border-radius: 4px;
  padding: .1em .35em;
}

/* --- Marque ---------------------------------------------------------- */
.marque {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 650; font-size: 1.02rem; color: var(--texte);
  letter-spacing: -.01em; white-space: nowrap;
}
.marque:hover { text-decoration: none; }
.marque-pastille {
  width: 1.4rem; height: 1.4rem; flex: none;
  border-radius: 4px;
  background: var(--vert);
  box-shadow: inset 0 0 0 2.5px var(--surface), inset 0 0 0 3.5px var(--vert);
}
.marque-grande { font-size: 1.2rem; margin-bottom: 1.5rem; }

/* --- En-tête --------------------------------------------------------- */
.entete {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .7rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  position: sticky; top: 0; z-index: 20;
}
.nav { display: flex; gap: .15rem; flex: 1; flex-wrap: wrap; }
.nav-lien {
  padding: .4rem .7rem;
  border-radius: var(--rayon-petit);
  color: var(--texte-doux);
  font-weight: 500; font-size: .93rem;
  white-space: nowrap;
}
.nav-lien:hover { background: var(--surface-alt); color: var(--texte); text-decoration: none; }
.nav-lien.est-actif { background: var(--vert-clair); color: var(--vert-fonce); font-weight: 600; }

.compte { display: flex; align-items: center; gap: .6rem; }
.compte-nom { font-size: .9rem; color: var(--texte-doux); font-weight: 500; }

.burger {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: .5rem;
}
.burger span { width: 20px; height: 2px; background: var(--texte); border-radius: 2px; }

/* --- Contenu --------------------------------------------------------- */
.contenu { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.entete-page {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}

.bloc {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.bloc-etroit { max-width: 34rem; }

.aide { color: var(--texte-doux); font-size: .9rem; margin: .2em 0; }
.sous-titre {
  font-size: .98rem; margin: 1.5rem 0 .75rem;
  padding-top: 1.25rem; border-top: 1px solid var(--bordure);
}

/* --- Tuiles d'indicateurs -------------------------------------------- */
.grille-tuiles {
  display: grid; gap: .9rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.tuile {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.tuile-valeur {
  font-size: 1.85rem; font-weight: 650; line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tuile-libelle { font-size: .83rem; color: var(--texte-doux); }

/* --- Formulaires ----------------------------------------------------- */
.formulaire { display: flex; flex-direction: column; gap: 1rem; }
.formulaire-inline { display: inline; }

.champ { display: flex; flex-direction: column; gap: .3rem; }
.champ-libelle { font-size: .88rem; font-weight: 550; color: var(--texte); }
.champ-aide    { font-size: .82rem; color: var(--texte-faible); }
.champ-erreur  { font-size: .82rem; color: var(--rouge); font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"],
input[type="tel"], input[type="search"], select, textarea {
  font: inherit; color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-petit);
  padding: .5rem .65rem;
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 18%, transparent);
}
input:disabled { background: var(--surface-alt); color: var(--texte-faible); }

.choix {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .7rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  cursor: pointer;
  font-size: .92rem;
}
.choix:hover { background: var(--surface-alt); }
.choix input { width: auto; margin-top: .2rem; flex: none; accent-color: var(--vert); }

.barre-actions {
  display: flex; gap: .6rem; flex-wrap: wrap;
  padding-top: .5rem;
}

/* --- Boutons --------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: .91rem; font-weight: 550;
  padding: .48rem .9rem;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--texte);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.bouton:hover { background: var(--surface-alt); text-decoration: none; }
.bouton-principal {
  background: var(--vert); border-color: var(--vert); color: #fff;
}
.bouton-principal:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.bouton-discret {
  background: none; border-color: transparent;
  color: var(--texte-doux); padding: .4rem .6rem; font-size: .88rem;
}
.bouton-discret:hover { background: var(--surface-alt); color: var(--texte); }
.bouton-pleine-largeur { width: 100%; }

/* --- Tableaux -------------------------------------------------------- */
.tableau-defilant { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th {
  text-align: left; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--texte-faible);
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--bordure);
  white-space: nowrap;
}
.tableau td {
  padding: .65rem .6rem;
  border-bottom: 1px solid var(--bordure);
  vertical-align: middle;
}
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--surface-alt); }
.cellule-compacte { white-space: nowrap; }
.cellule-actions  { text-align: right; white-space: nowrap; }
.ligne-inactive   { opacity: .55; }

.liste-definitions { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; margin: 0; font-size: .92rem; }
.liste-definitions dt { font-weight: 550; color: var(--texte-doux); }
.liste-definitions dd { margin: 0; }

/* --- Pastilles d'état ------------------------------------------------ */
.pastille {
  display: inline-block;
  font-size: .76rem; font-weight: 600;
  padding: .18rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pastille-actif  { background: var(--vert-clair); color: var(--vert-fonce); }
.pastille-neutre { background: var(--surface-alt); color: var(--texte-faible); border: 1px solid var(--bordure); }
.pastille-alerte { background: var(--ambre-clair); color: var(--ambre); }
.pastille-erreur { background: var(--rouge-clair); color: var(--rouge); }

/* --- Messages flash -------------------------------------------------- */
.flashs { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }
.flash {
  padding: .7rem .9rem;
  border-radius: var(--rayon-petit);
  border: 1px solid transparent;
  font-size: .92rem;
}
.flash-succes { background: var(--vert-clair);  border-color: color-mix(in srgb, var(--vert) 30%, transparent); color: var(--vert-fonce); }
.flash-erreur { background: var(--rouge-clair); border-color: color-mix(in srgb, var(--rouge) 30%, transparent); color: var(--rouge); }
.flash-info   { background: var(--bleu-clair);  border-color: color-mix(in srgb, var(--bleu) 25%, transparent);  color: var(--bleu); }
.flash-alerte { background: var(--ambre-clair); border-color: color-mix(in srgb, var(--ambre) 30%, transparent); color: var(--ambre); }

/* --- Pages centrées (connexion, installation) ------------------------ */
.corps-centre {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.5rem 1rem;
}
.carte-centre {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  padding: 1.75rem;
  width: 100%; max-width: 25rem;
}
.titre-carte { font-size: 1.2rem; margin-bottom: 1rem; }

/* --- Téléphone ------------------------------------------------------- */
@media (max-width: 860px) {
  .entete { flex-wrap: wrap; gap: .75rem; padding: .7rem 1rem; }
  .burger { display: flex; margin-left: auto; order: 2; }
  .compte { order: 3; width: 100%; justify-content: space-between;
            border-top: 1px solid var(--bordure); padding-top: .6rem; }
  .nav {
    order: 4; width: 100%; flex-direction: column; gap: .1rem;
    display: none;
  }
  .nav.est-ouverte { display: flex; }
  .nav-lien { padding: .6rem .7rem; }
  .contenu { padding: 1.1rem 1rem 3rem; }
  .entete-page { flex-direction: column; }
  .tuile-valeur { font-size: 1.6rem; }
}

/* =====================================================================
   Lot 1 — référentiel
   ===================================================================== */

/* --- Grilles de formulaire ------------------------------------------- */
.grille-deux   { display: grid; grid-template-columns: 1fr 1fr;     gap: 1rem; }
.grille-trois  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grille-deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.champ-compact { max-width: 22rem; }

/* --- Cartes de navigation (hub Paramètres) --------------------------- */
.grille-cartes {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.carte-lien {
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.1rem;
  color: var(--texte);
  transition: border-color .12s, transform .12s;
}
.carte-lien:hover { text-decoration: none; border-color: var(--vert); transform: translateY(-1px); }
.carte-titre       { font-weight: 600; font-size: 1rem; }
.carte-description { font-size: .87rem; color: var(--texte-doux); line-height: 1.45; }
.carte-compteur    { font-size: .8rem; color: var(--vert); font-weight: 600; margin-top: .2rem; }

/* --- Sélecteur de jours ---------------------------------------------- */
.jours-semaine { display: flex; gap: .4rem; flex-wrap: wrap; }
.jour-case { position: relative; cursor: pointer; }
.jour-case input { position: absolute; opacity: 0; width: 0; height: 0; }
.jour-case span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3rem; padding: .45rem .5rem;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-petit);
  font-size: .85rem; font-weight: 550;
  background: var(--surface);
  user-select: none;
}
.jour-case input:checked + span {
  background: var(--vert); border-color: var(--vert); color: #fff;
}
.jour-case input:focus-visible + span {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 25%, transparent);
}

/* --- Semaine type (horaires) ----------------------------------------- */
.grille-jours {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.colonne-jour {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: .7rem;
  background: var(--surface-alt);
  display: flex; flex-direction: column; gap: .5rem;
}
.colonne-jour-titre {
  font-size: .82rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texte-doux);
}
.aide-fermee { font-style: italic; margin: 0; }
.plage {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 4px;
  padding: .45rem .55rem;
  display: flex; flex-direction: column; gap: .15rem;
  font-size: .85rem;
}
.plage-heures  { font-weight: 600; font-variant-numeric: tabular-nums; }
.plage-terrain { color: var(--texte-faible); font-size: .78rem; }
.plage-actions { display: flex; gap: .5rem; font-size: .78rem; margin-top: .15rem; }
.ajout-jour { font-size: .82rem; color: var(--texte-doux); }
.ajout-jour:hover { color: var(--vert); }

.lien-bouton {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: inherit;
  color: var(--vert); cursor: pointer; text-decoration: none;
}
.lien-bouton:hover { text-decoration: underline; }

/* --- Pastille de couleur d'un terrain -------------------------------- */
.pastille-couleur {
  display: inline-block; width: .9rem; height: .9rem;
  border-radius: 3px; vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, .15);
}

/* --- Barre de filtres ------------------------------------------------ */
.barre-filtres { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.barre-filtres select { width: auto; min-width: 9rem; }
.filtre-recherche { flex: 1; min-width: 14rem; }

/* --- Pagination ------------------------------------------------------ */
.pagination { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: 1rem; }
.page-lien {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; padding: .35rem .5rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  font-size: .87rem; color: var(--texte-doux);
}
.page-lien:hover { background: var(--surface-alt); text-decoration: none; }
.page-lien.est-actif { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }

/* --- Divers ---------------------------------------------------------- */
.valeur-alerte { color: var(--rouge); }
.liste-doublons { margin: .5rem 0 .5rem 1.1rem; padding: 0; }
.liste-doublons li { margin-bottom: .2rem; }
.tuile-libelle { line-height: 1.35; }

input[type="color"] {
  padding: .2rem; height: 2.4rem; cursor: pointer;
}

/* --- Téléphone ------------------------------------------------------- */
@media (max-width: 760px) {
  .grille-deux, .grille-trois, .grille-deux-colonnes { grid-template-columns: 1fr; }
  .barre-filtres select, .filtre-recherche { width: 100%; min-width: 0; }
  .barre-filtres { flex-direction: column; align-items: stretch; }
}

/* --- Liste « à configurer » du tableau de bord ----------------------- */
.liste-manques { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.liste-manques li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .75rem;
  background: var(--ambre-clair);
  border: 1px solid color-mix(in srgb, var(--ambre) 25%, transparent);
  border-radius: var(--rayon-petit);
  font-size: .92rem;
}

/* =====================================================================
   Lot 2 — planning et réservations
   ===================================================================== */

.bloc-planning { padding: 0; overflow: hidden; }

.planning-barre {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
}
.planning-navigation { display: flex; gap: .4rem; flex-wrap: wrap; }
.planning-onglets { display: flex; gap: .3rem; flex-wrap: wrap; }
.onglet {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  font-size: .88rem; color: var(--texte-doux);
}
.onglet:hover { background: var(--surface-alt); text-decoration: none; }
.onglet.est-actif { background: var(--vert-clair); border-color: var(--vert); color: var(--vert-fonce); font-weight: 600; }

/* --- Grille ---------------------------------------------------------- */
/* --px-heure et --px-quart sont définis ici, et non en ligne : la CSP
   interdit l'attribut style, dont dépendait tout le positionnement. */
.planning {
  --largeur-heures: 3.4rem;
  --px-heure: 56px;
  --px-quart: 14px;
  overflow-x: auto;
}

.planning-entete {
  display: grid;
  grid-template-columns: var(--largeur-heures) repeat(auto-fit, minmax(6.5rem, 1fr));
  position: sticky; top: 0; z-index: 3;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  min-width: 48rem;
}
.planning-coin { border-right: 1px solid var(--bordure); }
.planning-jour-entete {
  padding: .5rem .4rem;
  text-align: center;
  border-right: 1px solid var(--bordure);
  display: flex; flex-direction: column; gap: .05rem;
}
.planning-jour-entete:last-child { border-right: 0; }
.planning-jour-entete.est-aujourdhui { background: var(--vert-clair); }
.jour-nom  { font-weight: 650; font-size: .85rem; display: inline-flex; align-items: center; gap: .35rem; justify-content: center; }
.jour-date { font-size: .78rem; color: var(--texte-faible); font-variant-numeric: tabular-nums; }

.planning-corps {
  display: grid;
  grid-template-columns: var(--largeur-heures) repeat(auto-fit, minmax(6.5rem, 1fr));
  position: relative;
  min-width: 48rem;
}

.planning-heures { border-right: 1px solid var(--bordure); position: relative; }
.planning-heure {
  height: var(--px-heure);
  border-bottom: 1px solid var(--bordure);
  position: relative;
}
.planning-heure span {
  position: absolute; top: -.55rem; right: .4rem;
  font-size: .72rem; color: var(--texte-faible);
  font-variant-numeric: tabular-nums;
  background: var(--surface); padding: 0 .15rem;
}

.planning-colonne {
  position: relative;
  border-right: 1px solid var(--bordure);
  cursor: crosshair;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--px-heure) - 1px),
    var(--bordure) calc(var(--px-heure) - 1px),
    var(--bordure) var(--px-heure)
  );
}
.planning-colonne:last-child { border-right: 0; }

.planning-ferme {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 5px,
    color-mix(in srgb, var(--texte-faible) 10%, transparent) 5px,
    color-mix(in srgb, var(--texte-faible) 10%, transparent) 10px
  );
  pointer-events: none;
}
.planning-fermeture {
  position: absolute; left: 1px; right: 1px;
  background: color-mix(in srgb, var(--rouge) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--rouge) 45%, transparent);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}
.planning-fermeture span {
  font-size: .72rem; color: var(--rouge); font-weight: 600;
  padding: 0 .3rem; text-align: center;
}

/* --- Une réservation dans le planning -------------------------------- */
.reservation {
  position: absolute; left: 2px; right: 2px;
  border-radius: 4px;
  padding: .2rem .35rem;
  font-size: .76rem; line-height: 1.25;
  overflow: hidden;
  display: flex; flex-direction: column;
  border-left: 3px solid;
  cursor: pointer;
  z-index: 1;
}
.reservation:hover { text-decoration: none; filter: brightness(.97); z-index: 2; }
.reservation-heure  { font-weight: 650; font-variant-numeric: tabular-nums; }
.reservation-nom    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reservation-marque {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
  opacity: .75; margin-top: auto;
}

.est-confirmee  { background: var(--vert-clair);  border-color: var(--vert);   color: var(--vert-fonce); }
.est-provisoire { background: var(--ambre-clair); border-color: var(--ambre);  color: var(--ambre); }
.est-honoree    { background: var(--surface-alt); border-color: var(--texte-faible); color: var(--texte-doux); }
.est-noshow     { background: var(--rouge-clair); border-color: var(--rouge);  color: var(--rouge); }
.est-annulee    { background: var(--surface-alt); border-color: var(--bordure-forte); color: var(--texte-faible); text-decoration: line-through; }

.bandeau-statut {
  padding: .7rem 1rem;
  border-radius: var(--rayon);
  border-left: 4px solid;
  margin-bottom: 1.25rem;
  font-size: .93rem;
}

/* --- Légende --------------------------------------------------------- */
.legende { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .85rem; color: var(--texte-doux); }
.legende-item { display: inline-flex; align-items: center; gap: .4rem; }
.legende-pastille {
  width: .85rem; height: .85rem; border-radius: 3px;
  border-left: 3px solid; display: inline-block;
}
.legende-ferme {
  border: 1px solid var(--bordure-forte);
  background: repeating-linear-gradient(
    45deg, transparent, transparent 3px,
    color-mix(in srgb, var(--texte-faible) 22%, transparent) 3px,
    color-mix(in srgb, var(--texte-faible) 22%, transparent) 6px
  );
}

/* --- Verdict de disponibilité pendant la saisie ---------------------- */
.verdict {
  padding: .7rem .9rem;
  border-radius: var(--rayon-petit);
  border: 1px solid transparent;
  font-size: .9rem;
}
.verdict-libre   { background: var(--vert-clair);  border-color: color-mix(in srgb, var(--vert) 30%, transparent);  color: var(--vert-fonce); }
.verdict-occupe  { background: var(--rouge-clair); border-color: color-mix(in srgb, var(--rouge) 30%, transparent); color: var(--rouge); }
.verdict-attente { background: var(--surface-alt); border-color: var(--bordure); color: var(--texte-doux); }
.verdict ul { margin: .35rem 0 0 1.1rem; padding: 0; }
.verdict-tarif { display: block; margin-top: .3rem; font-weight: 600; }

/* --- Recherche d'équipe ---------------------------------------------- */
.champ-recherche { display: flex; gap: .5rem; align-items: center; }
.champ-recherche input[type="text"] { flex: 1; }
.suggestions {
  list-style: none; margin: .3rem 0 0; padding: 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  box-shadow: var(--ombre);
  max-height: 14rem; overflow-y: auto;
}
.suggestions li { border-bottom: 1px solid var(--bordure); }
.suggestions li:last-child { border-bottom: 0; }
.suggestions button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: .55rem .7rem;
  font: inherit; cursor: pointer; color: var(--texte);
}
.suggestions button:hover, .suggestions button:focus { background: var(--vert-clair); }
.suggestion-detail { display: block; font-size: .8rem; color: var(--texte-faible); }

/* --- Prestations annexes sur une réservation ------------------------- */
.liste-options { display: flex; flex-direction: column; gap: .4rem; }
.ligne-option {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .45rem .6rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  font-size: .9rem;
}
.option-libelle { display: flex; flex-direction: column; gap: .05rem; }
.option-quantite { width: 4.5rem; flex: none; text-align: center; }

.repli > summary {
  cursor: pointer; font-size: .9rem; font-weight: 550;
  padding: .5rem 0; color: var(--texte-doux);
}
.repli > summary:hover { color: var(--texte); }

.sous-titre-premier { margin-top: 0; padding-top: 0; border-top: 0; }
.champ-inline { flex-direction: row; align-items: center; gap: .5rem; }
.champ-inline input { width: auto; }
.cellule-montant { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ligne-total td { border-top: 2px solid var(--bordure); border-bottom: 0; }
.liste-empechements { margin: .4rem 0 0 1.1rem; padding: 0; }

@media (max-width: 760px) {
  .planning-barre { flex-direction: column; align-items: stretch; }
  .planning-navigation, .planning-onglets { justify-content: space-between; }
  .bloc-planning { margin-left: -1rem; margin-right: -1rem; border-radius: 0; }
}

.entete-bloc { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.entete-bloc h2 { margin: 0; }
.valeur-attente { color: var(--ambre); }

/* --- Palette des terrains -------------------------------------------- */
/* Une palette fixe plutôt qu'une couleur libre : contraste maîtrisé dans
   les deux thèmes, et aucun style en ligne à autoriser dans la CSP. */
.couleur-vert   { background: #1f7a3d; }
.couleur-bleu   { background: #1a5fb4; }
.couleur-violet { background: #7340b8; }
.couleur-ambre  { background: #b8860b; }
.couleur-rose   { background: #b83280; }
.couleur-cyan   { background: #0e7490; }
.couleur-rouge  { background: #c0392b; }
.couleur-gris   { background: #566070; }

/* --- Espacements utilitaires ----------------------------------------- */
.espace-haut       { margin-top: 1rem; }
.espace-haut-petit { margin-top: .75rem; }

/* --- Choix d'une couleur de terrain ---------------------------------- */
.palette { display: flex; gap: .5rem; flex-wrap: wrap; }
.palette-choix { position: relative; cursor: pointer; line-height: 0; }
.palette-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.palette-choix .pastille-couleur {
  width: 2rem; height: 2rem; border-radius: var(--rayon-petit);
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.palette-choix input:checked + .pastille-couleur {
  border-color: var(--texte);
  box-shadow: inset 0 0 0 2px var(--surface);
}
.palette-choix input:focus-visible + .pastille-couleur {
  outline: 2px solid var(--vert); outline-offset: 2px;
}

/* =====================================================================
   Lot 3 : abonnements
   ===================================================================== */

.liste-occurrences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .3rem;
  max-height: 24rem;
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--surface-alt);
}
.occurrence {
  display: grid;
  grid-template-columns: auto 6.5rem 4.6rem 1fr;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 4px;
  font-size: .85rem;
  cursor: pointer;
}
.occurrence:hover { border-color: var(--bordure-forte); }
.occurrence input { width: auto; margin: 0; accent-color: var(--rouge); }
.occurrence-date  { font-weight: 550; font-variant-numeric: tabular-nums; }
.occurrence-heure { color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.occurrence-motif { color: var(--rouge); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.occurrence.est-bloquee { background: var(--rouge-clair); border-color: color-mix(in srgb, var(--rouge) 28%, transparent); }
/* Une date décochée manuellement reste lisible comme écartée. */
.occurrence:has(input:checked) .occurrence-date,
.occurrence:has(input:checked) .occurrence-heure { text-decoration: line-through; opacity: .6; }

@media (max-width: 760px) {
  .occurrence { grid-template-columns: auto 1fr; }
  .occurrence-motif { grid-column: 1 / -1; }
}

/* --- Mouvements de carnet -------------------------------------------- */
.variation-plus  { color: var(--vert-fonce); }
.variation-moins { color: var(--texte-doux); }

.tuile-lien { color: var(--texte); transition: border-color .12s; }
.tuile-lien:hover { text-decoration: none; border-color: var(--vert); }

.empreinte { font-size: .75rem; word-break: break-all; }

/* --- Choix du mode de règlement -------------------------------------- */
.modes-paiement { display: flex; gap: .4rem; flex-wrap: wrap; }
.mode-choix { position: relative; cursor: pointer; }
.mode-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.mode-choix span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .8rem;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-petit);
  font-size: .88rem; font-weight: 500;
  background: var(--surface);
  user-select: none;
}
.mode-choix input:checked + span {
  background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600;
}
.mode-choix input:focus-visible + span {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 25%, transparent);
}

/* --- Aperçu d'un message --------------------------------------------- */
.apercu-message {
  font: .88rem/1.6 var(--police);
  background: var(--surface-alt);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 1rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* =====================================================================
   Lot 8 : pilotage
   ===================================================================== */

.tuile-forte { border-color: var(--vert); background: var(--vert-clair); }
.tuile-forte .tuile-valeur { color: var(--vert-fonce); }

/* --- Graphique d'évolution ------------------------------------------- */
.graphe-defilant { overflow-x: auto; }
.graphe { display: block; min-width: 100%; }
.barre-facture { fill: var(--vert); }
.barre-regle   { fill: var(--bleu); }
.graphe-legende {
  font: 10px var(--police);
  fill: var(--texte-doux);
}
.graphe-legende-faible { fill: var(--texte-faible); font-size: 9px; }

.legende-carre {
  width: .8rem; height: .8rem; border-radius: 2px; display: inline-block;
}
.carre-facture { background: var(--vert); }
.carre-regle   { background: var(--bleu); }

/* --- Grille de chaleur ----------------------------------------------- */
.grille-chaleur { border-collapse: separate; border-spacing: 2px; font-size: .78rem; }
.grille-chaleur th {
  font-weight: 600; color: var(--texte-faible); font-size: .72rem;
  padding: .2rem .3rem; text-align: center;
}
.grille-chaleur tbody th { text-align: right; padding-right: .5rem; }
.grille-chaleur td {
  width: 2rem; height: 1.7rem; text-align: center; border-radius: 3px;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.chaleur-ferme {
  background: repeating-linear-gradient(45deg, transparent, transparent 3px,
    color-mix(in srgb, var(--texte-faible) 14%, transparent) 3px,
    color-mix(in srgb, var(--texte-faible) 14%, transparent) 6px);
}
.chaleur-0 { background: var(--rouge-clair); color: var(--rouge); }
.chaleur-1 { background: color-mix(in srgb, var(--vert) 14%, var(--surface)); color: var(--texte-doux); }
.chaleur-2 { background: color-mix(in srgb, var(--vert) 30%, var(--surface)); color: var(--texte); }
.chaleur-3 { background: color-mix(in srgb, var(--vert) 55%, var(--surface)); color: #fff; }
.chaleur-4 { background: var(--vert); color: #fff; }

.liste-puces { margin: .5rem 0 0 1.1rem; padding: 0; font-size: .92rem; }
.liste-puces li { margin-bottom: .4rem; }