/* Calendrier de réservation (issues #93, #94).
 *
 * Complète /commun/base.css — jetons de couleur, bandeau, menu de compte,
 * onglets, boutons, messages, champs et dialogue viennent de là. Rien n'est
 * redéfini ici : deux écrans de la même arène qui divergent sur leurs couleurs, ça
 * se voit tout de suite. Jusqu'à l'audit du 03/09/2026 ce socle était celui de
 * l'écran de PILOTAGE, dont cette page héritait faute de mieux ; `.lien-nav`,
 * `.titre-page` et `.note` y étaient même dupliqués à l'identique.
 *
 * Contrainte de conception, pas de finition (CLAUDE.md) : à 360 px de large,
 * aucun défilement horizontal, et des cibles tactiles atteignables au doigt.
 * D'où le basculement des sept colonnes de jours vers une pile, décidé en JS
 * (grille.js) parce que le libellé des jours change avec la place disponible —
 * « lun. 7 sept. » en colonne, « lundi 7 septembre » en pile. */

/* Sélecteur d'arène du bandeau (passe de navigation du 10/09/2026) —
 * visible seulement à partir de deux arènes, cf. index.html. Cible tactile
 * pleine hauteur : c'est un organe de navigation, il se manipule au doigt
 * comme le reste (CLAUDE.md). Pas de garde `:not([hidden])` nécessaire ici :
 * aucune règle ne lui impose de `display`, l'attribut `hidden` suffit donc —
 * contrairement aux blocs en `flex` qui ont coûté le piège de #99. */
.selecteur-terrain {
  min-height: var(--cible-tactile);
  max-width: 14rem;
  padding: 0 var(--espace-2);
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
}

.solde-zone {
  padding: var(--espace-1) var(--espace-3);
  background: #1a2a3a;
  color: var(--accent);
  border-radius: var(--rayon-sm);
  white-space: nowrap;
}

.mise-en-page-reservation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--espace-4);
  padding: var(--espace-4);
  align-items: start;
}

/* minmax(0, 1fr) plus haut : sans le 0, une grille interne large pousse la
   colonne au-delà de la fenêtre et ramène le défilement horizontal qu'on
   cherche justement à éviter. */
@media (max-width: 1000px) {
  .mise-en-page-reservation {
    grid-template-columns: minmax(0, 1fr);
  }
}

.barre-semaine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-2);
  margin-bottom: var(--espace-3);
}

.barre-semaine button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--espace-3);
  background: var(--fond-panneau);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  cursor: pointer;
}

.libelle-semaine {
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 12rem;
}

/* ── Calendrier : une colonne de cartes par jour ────────────────────────── */

.calendrier--grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--espace-2);
  align-items: start;
}

/* En dessous de 760 px, grille.js bascule en mode liste : les mêmes colonnes,
   empilées. Sept colonnes de 45 px ne seraient pas « serrées », elles seraient
   inutilisables (CLAUDE.md, interface utilisable sur téléphone). */
.calendrier--liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.jour {
  padding: var(--espace-2);
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
}

.jour--aujourdhui { border-color: var(--accent); }

.jour-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-1);
  margin-bottom: var(--espace-2);
}

.jour-titre {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.jour--aujourdhui .jour-titre { color: var(--accent); }

.jour-vide {
  margin: 0;
  font-size: 0.8rem;
  color: var(--texte-att);
}

.jour-creneaux {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}

.bouton-ajout {
  width: 100%;
  margin-top: var(--espace-2);
  font-size: 0.8rem;
}

/* ── Créneau ────────────────────────────────────────────────────────────── */

.creneau {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  /* 44 px de haut au minimum : une cible tactile atteignable au doigt (#85),
     qu'un créneau dure 10 minutes ou 50. C'est la raison pour laquelle ce
     calendrier n'est pas une frise proportionnelle — cf. grille.js. */
  min-height: 44px;
  padding: var(--espace-2);
  text-align: left;
  font: inherit;
  font-size: 0.8rem;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--bordure);
  border-radius: var(--rayon-sm);
  cursor: pointer;
}

/* Libre = ce sur quoi on peut cliquer : c'est le seul état qui doit attirer
   l'œil. Les autres informent, ils n'invitent pas. */
.creneau--libre { border-left-color: var(--ok); }
.creneau--libre:hover { background: #1a2a20; }
.creneau--a-moi { border-left-color: var(--accent); background: #16202c; }
.creneau--pris { border-left-color: var(--bordure); color: var(--texte-att); }
/* Interne : visible du seul exploitant (#69), volontairement discret — c'est
   du temps machine, pas une offre. */
.creneau--interne {
  border-left-color: var(--alerte);
  background: repeating-linear-gradient(
    45deg, #24211a, #24211a 6px, #1f1d18 6px, #1f1d18 12px
  );
  color: var(--texte-att);
}

.creneau-horaire { font-variant-numeric: tabular-nums; color: var(--texte-att); }
.creneau-titre { font-weight: 600; }
.creneau-detail { color: var(--texte-att); }

.calendrier--liste .creneau { font-size: 0.9rem; }

/* ── Météo (#95) ────────────────────────────────────────────────────────── */

.meteo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--texte-att);
}

.meteo--pluie, .meteo--orage { color: var(--accent); }
.meteo--neige { color: #cfe6ff; }
.meteo-symbole { font-size: 0.95rem; }

/* ── Colonne latérale ───────────────────────────────────────────────────── */

.colonne-laterale h2 { font-size: 1rem; margin: 0 0 var(--espace-2); }

.reservation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espace-2);
  padding: var(--espace-3);
  margin-bottom: var(--espace-2);
  background: var(--fond-panneau);
  border-radius: var(--rayon-md);
}

.reservation button { align-self: start; }
/* Agenda et « Annuler » empilés dans la colonne de droite (#172), et non
   côte à côte : à 360 px, trois cibles tactiles sur une ligne écraseraient
   l'heure du créneau, qui est l'information de la ligne. */
.reservation-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--espace-2);
}
.reservation-actions .agenda-liens { margin-top: 0; justify-content: flex-end; }
.reservation-titre { font-weight: 600; }
.reservation-detail { font-size: 0.8rem; color: var(--texte-att); }

/* ── Panneau exploitant (#94) ───────────────────────────────────────────── */

.panneau-exploitant { margin-top: var(--espace-4); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1);
  margin-bottom: var(--espace-2);
}

.chip {
  padding: var(--espace-1) var(--espace-2);
  min-height: 32px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--texte);
  background: #1a2a3a;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  cursor: pointer;
}

/* Onglets de machine : la barre du pilotage étire ses onglets sur toute la
   largeur (deux vues à choisir, autant remplir). Ici ils nomment des machines
   d'un parc appelé à grandir — un onglet large comme un demi-écran pour
   « Voiture 1 » ne dit rien de plus, et les rangerait mal à cinq machines. */
#onglets-machines { flex-wrap: wrap; }
#onglets-machines .onglet { flex: 0 1 auto; }

/* Un libellé long (« Maintenance batterie ») dans une colonne étroite doit se
   couper plutôt que déborder de sa carte. `break-word` et non `anywhere` :
   ce dernier autorise une coupure même quand le mot tiendrait, et découpait
   « Découverte » en « Découvert / e » sur une colonne d'à peine 100 px. */
.creneau-titre, .creneau-detail { overflow-wrap: break-word; }

/* En sept colonnes, chaque carte dispose d'environ 100 px : le rembourrage
   confortable du mode liste y coûte assez de place pour couper « Découverte »
   en deux. On le resserre ici seulement — en pile, la place ne manque pas. */
.calendrier--grille .jour { padding: var(--espace-1); }
.calendrier--grille .creneau { padding: var(--espace-1) 6px; }