/* =============================================================================
   AGENDA — LE STYLE. Lot `AGENDA-1`, 27/08/2026.

   Repris de `10_cloudflare_admin/agenda.css` (2 893 lignes) pour la structure —
   colonne de 210 px, panneau, barre d'outils, légende, grille — et **reposé sur
   la palette du v3**, qui existe déjà dans `hub.css` et ne se redéfinit pas ici.

   ⛔ AUCUNE COULEUR N'EST RÉÉCRITE. La V1 a ses propres variables
      (`--surface #141b2a`, `--orange #ea7b28`…). Le v3 a les siennes. *« Une
      maquette fait foi sur le dessin, pas sur la palette d'un logiciel qui en a
      déjà une »* (`B000-D255`). Les seules couleurs écrites en dur sont les six
      familles de prestations, et elles vivent dans `agenda_socle.js` parce
      qu'elles viennent d'une donnée.

   ⚠️  LE BUDGET DE HAUTEUR — `V3-y` ③ :
          768 écran − 40 bandeau      = 728
          − 56 en-tête − 64 outils − 34 légende − 16 marges = 558 pour la grille
      La grille défile **dans son cadre**, et elle seule : c'est l'exception
      nommée en tête de `agenda.html`. La page, elle, ne défile pas.
   ============================================================================= */

:root {
  --ap-cote: 210px;
  --ap-entete: 56px;
  --ap-outils: 64px;
  --ap-legende: 34px;
}

/* ⛔ `hidden` DOIT GAGNER, ET SANS CETTE LIGNE IL PERD.
      L'attribut `hidden` ne vaut que `display: none` **dans la feuille par
      défaut du navigateur** : n'importe quelle règle d'auteur qui pose un
      `display` le bat, sans avertissement.

      Mesuré à l'épreuve, et c'était grave : `.formulaire-fond` et
      `.fiche-tiroir` portent `display: flex` et sont `position: fixed` sur tout
      l'écran. Les deux restaient donc étalés par-dessus la page **en étant
      « cachés »** — `elementFromPoint` rendait `formulaire-fond` au milieu du
      calendrier. **Plus rien n'était cliquable, et rien ne le disait.**
      ⟶ Un élément caché qui intercepte les clics est pire qu'un élément
        visible : on cherche le défaut là où il n'est pas. */
[hidden] { display: none !important; }

/* -----------------------------------------------------------------------------
   LA PAGE — trois bandes, aucune ne déborde.
   -------------------------------------------------------------------------- */
body { overflow: hidden; }

.agenda-page {
  height: var(--utile);
  display: grid;
  grid-template-rows: var(--ap-entete) 1fr;
  gap: 8px;
  padding: 8px;
}

/* ① L'EN-TÊTE ---------------------------------------------------------------- */
.ap-entete {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bleu);
  border-radius: 12px;
  padding: 0 12px;
}

.ap-modules { display: flex; gap: 6px; }

.module-bouton {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid #35507a;
  border-radius: 10px;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.module-bouton.actif { background: var(--or); border-color: var(--or); color: #1a1400; }
.module-bouton:not(.actif):hover { background: var(--bleu-clair); }

.ap-titre { margin: 0; font-size: 20px; font-weight: 700; }
.ap-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Les boutons communs de cet écran. */
.bouton {
  height: 40px;
  padding: 0 16px;
  border: 1px solid #35507a;
  border-radius: 10px;
  background: var(--bleu-clair);
  color: var(--texte);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.bouton:hover { border-color: var(--or); }
.bouton.or { background: var(--or); border-color: var(--or); color: #1a1400; }
.bouton.discret { background: transparent; }
.bouton.danger { border-color: var(--rouge); color: #ffb4ad; }
.bouton.danger:hover { background: var(--rouge); color: #fff; }

.icone-bouton {
  width: 38px; height: 38px;
  border: 1px solid #35507a;
  border-radius: 10px;
  background: var(--bleu-clair);
  color: var(--texte);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.icone-bouton:hover { border-color: var(--or); }

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

/* ② LE CORPS — colonne + panneau ------------------------------------------- */
.ap-corps {
  display: grid;
  grid-template-columns: var(--ap-cote) minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
}

/* --- LA COLONNE DE GAUCHE -------------------------------------------------- */
.ap-cote { min-height: 0; }

.cote-carte {
  height: 100%;
  background: var(--bleu);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.carte-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.carte-tete h2 { margin: 0; font-size: 14px; font-weight: 700; }
.carte-sur-titre {
  margin: 0;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}
.mini-nav { display: flex; gap: 4px; }
.mini-nav .icone-bouton { width: 28px; height: 28px; font-size: 14px; }

.mini-mois-ligne {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13px; font-weight: 600;
}
.mini-mois-ligne .lien-bouton { font-size: 11px; }

.mini-entete, .mini-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.mini-entete span {
  text-align: center; font-size: 10px; color: var(--gris); padding-bottom: 2px;
}

.mini-jour {
  aspect-ratio: 1;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  position: relative;
}
.mini-jour:hover { background: var(--bleu-clair); }
.mini-jour.dehors { color: #4d5a70; }
.mini-jour.ferme { color: #6b7688; }
.mini-jour.aujourdhui { outline: 1px solid var(--or); }
.mini-jour.choisi { background: var(--or); color: #1a1400; font-weight: 700; }

/* Le point : « il y a quelque chose ici ». Pas un compte — voir `agenda_mini.js`. */
.mini-jour.porte-rdv::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 3px;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--or);
}
.mini-jour.choisi.porte-rdv::after { background: #1a1400; }

.separateur { height: 1px; background: #2b3d5c; }

.cote-date { margin: 0; font-size: 13px; font-weight: 700; text-transform: capitalize; }
.cote-hebreu { margin: 0; font-size: 12px; color: var(--gris); }
.cote-fete { margin: 0; font-size: 12px; color: var(--or); }

.cote-compte { margin: 4px 0 0; display: flex; flex-direction: column; gap: 3px; }
.cote-etat { font-size: 12px; font-weight: 600; }
.cote-etat.open { color: var(--vert); }
.cote-etat.closed, .cote-etat.blocked { color: var(--rouge); }
.cote-etat.inconnu { color: var(--gris); font-style: italic; }
.cote-nombre { font-size: 12px; color: var(--gris); }

/* --- LE PANNEAU DU CALENDRIER ---------------------------------------------- */
.ap-panneau {
  min-height: 0;
  display: grid;
  grid-template-rows: var(--ap-outils) var(--ap-legende) minmax(0, 1fr);
  gap: 8px;
}

.ap-outils {
  background: var(--bleu);
  border-radius: 12px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.outils-nav { display: flex; align-items: center; gap: 8px; }
.outils-titre h2 {
  margin: 0; font-size: 17px; font-weight: 700; text-transform: capitalize;
  white-space: nowrap;
}

.outils-commandes { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.vue-bascule { display: flex; gap: 4px; }
.vue-bouton {
  height: 38px; padding: 0 20px;
  border: 1px solid #35507a; border-radius: 10px;
  background: transparent; color: var(--texte); font: inherit; font-weight: 600;
  cursor: pointer;
}
.vue-bouton.actif { background: var(--or); border-color: var(--or); color: #1a1400; }

.champ-recherche, .champ-filtre { display: flex; flex-direction: column; gap: 2px; }
.champ-recherche span, .champ-filtre span {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
}
.champ-recherche input, .champ-filtre select {
  height: 34px;
  border: 1px solid #35507a; border-radius: 8px;
  background: var(--fond); color: var(--texte);
  font: inherit; font-size: 13px; padding: 0 8px;
}
.champ-recherche input { width: 210px; }
.champ-filtre select { width: 150px; }

/* --- LA LÉGENDE ------------------------------------------------------------ */
.ap-legende {
  background: var(--bleu);
  border-radius: 12px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  color: var(--gris);
}
.legende-item { display: inline-flex; align-items: center; gap: 6px; }
.pastille { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.pastille.rdv   { background: #2563eb; }
.pastille.libre { background: rgba(46, 158, 91, .35); border: 1px solid var(--vert); }
.pastille.ferme { background: #0b1220; border: 1px solid #2b3d5c; }
.pastille.bloc  {
  border: 1px solid var(--rouge);
  background: repeating-linear-gradient(45deg,
    rgba(196, 69, 58, .45) 0 4px, transparent 4px 8px);
}
.legende-etat { margin-left: auto; color: var(--jaune); font-style: italic; }

/* --- LE CADRE DE LA GRILLE ------------------------------------------------- */
/*  ⚠️  C'EST ICI, ET NULLE PART AILLEURS, QUE ÇA DÉFILE. */
.ap-grille-cadre {
  background: var(--bleu);
  border-radius: 12px;
  padding: 8px;
  min-height: 0;
  overflow: hidden;
}
#calendrier { height: 100%; }

/* -----------------------------------------------------------------------------
   FULLCALENDAR — on ne repeint que ses variables, pas ses règles.
   -------------------------------------------------------------------------- */
.fc {
  --fc-border-color: #2b3d5c;
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: transparent;
  --fc-today-bg-color: rgba(201, 162, 39, .07);
  --fc-now-indicator-color: var(--orange);
  --fc-event-border-color: transparent;
  font-size: 13px;
}

.fc .fc-timegrid-slot { height: 30px; }
.fc .fc-col-header-cell-cushion,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
  color: var(--gris);
  text-decoration: none;
  text-transform: capitalize;
}
.fc .fc-col-header-cell { background: var(--bleu-clair); }
.fc .fc-scrollgrid { border-radius: 8px; overflow: hidden; }

/* Les fonds — l'ordre de la feuille fait l'empilement. */
.fc .fc-bg-event.fond-ferme  { background: #0b1220; opacity: .85; }
.fc .fc-bg-event.fond-libre  { background: rgba(46, 158, 91, .16); opacity: 1; }
.fc .fc-bg-event.fond-bloc   {
  opacity: 1;
  background: repeating-linear-gradient(45deg,
    rgba(196, 69, 58, .38) 0 6px, rgba(196, 69, 58, .12) 6px 12px);
}

/* Les blocs de rendez-vous. */
.fc .fc-timegrid-event { border-radius: 6px; border-width: 0 0 0 3px; }
.fc .fc-event.rdv-bloc { cursor: pointer; }
.fc .fc-event.rdv-bloc.est-absent {
  border-style: dashed;
  border-width: 1px 1px 1px 3px;
  opacity: .75;
}

/* -----------------------------------------------------------------------------
   LE CONTENU D'UNE CASE — `AGENDA-2`, 27/08.

   ⛔ EN VUE JOUR, LA CASE EST LARGE ET BASSE : ~1 100 × 30 px pour vingt
      minutes. Tout tient donc **sur une ligne**, et c'est la seule disposition
      qui remplisse la place sans rien couper.
   ⛔ EN VUE SEMAINE, elle fait ~150 px : on empile, et on n'écrit que
      l'essentiel. C'est la VUE qui décide, pas la durée.
   -------------------------------------------------------------------------- */
.rdv-contenu {
  display: flex;
  overflow: hidden;
  line-height: 1.2;
  padding: 2px 6px;
}

/* Vue Jour — une ligne, tout à la suite. */
/* `center` et non `baseline` : la case d'un rendez-vous de vingt minutes fait
   30 px de haut, et une ligne calée sur la ligne de base y flotte. */
.rdv-contenu.large {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 100%;
}
/* Vue Semaine — empilé, serré. */
.rdv-contenu.etroit { flex-direction: column; gap: 1px; }

.rdv-nom { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdv-contenu.large .rdv-nom { flex: 0 0 auto; max-width: 28%; }

/* Les informations secondaires : présentes, lisibles, jamais au premier plan.
   Elles s'effacent l'une après l'autre si la case rétrécit — le nom, lui,
   ne disparaît jamais. */
.rdv-info {
  font-size: 11.5px;
  opacity: .82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rdv-contenu.large .rdv-info { flex: 0 1 auto; min-width: 0; }

/* Le numéro se lit plus qu'il ne se devine : chiffres alignés, pleine opacité. */
.rdv-tel {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
  flex: 0 0 auto;
}

.rdv-contenu.taille-xs .rdv-nom { font-size: 11px; }
.rdv-contenu.taille-lg .rdv-nom { font-size: 14px; }

/* ⚠️  LA COULEUR DU TEXTE EST ÉCRITE ICI, ET C'EST UNE CORRECTION.
       Les pastilles héritaient de la couleur du bloc — qui, sur un rendez-vous
       marqué absent, est celle de la FAMILLE de la prestation, posée sur un
       fond transparent. La pastille d'absence sortait donc **violet sur orange**
       et paraissait vide : l'information était là, illisible. */
.rdv-marque {
  align-self: center;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .32);
  color: #fff;
  white-space: nowrap;
}
.rdv-contenu.etroit .rdv-marque { align-self: flex-start; }

/* Les absences comptent aux deux vues : ce sont elles qui font lever les yeux.
   Au-delà du seuil posé par David (3, `B000-D240`), elles passent en rouge —
   l'écran INFORME, il ne refuse rien. */
.rdv-marque.absences { background: rgba(243, 112, 33, .55); }
.rdv-marque.absences.alerte { background: var(--rouge); }
.rdv-contenu.large .rdv-marque { margin-left: auto; }

/* -----------------------------------------------------------------------------
   LE TIROIR DE DÉTAIL
   -------------------------------------------------------------------------- */
.voile {
  position: fixed; inset: var(--bandeau) 0 0 0;
  background: rgba(6, 11, 20, .6);
  z-index: 60;
}

.fiche-tiroir {
  position: fixed;
  top: var(--bandeau); right: 0; bottom: 0;
  width: 380px;
  z-index: 61;
  background: var(--bleu);
  border-left: 1px solid #2b3d5c;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.fiche-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fiche-tete h2 { margin: 2px 0 0; font-size: 20px; }

.fiche-lignes { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fiche-lignes > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; border-bottom: 1px solid #24354f;
}
.fiche-lignes dt { color: var(--gris); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.fiche-lignes dd { margin: 0; font-weight: 600; text-align: right; }

.fiche-actes { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.fiche-actes .bouton { height: var(--cible); justify-content: center; }
.fiche-note { margin: 0; font-size: 12px; color: var(--gris); font-style: italic; }

/* -----------------------------------------------------------------------------
   LE FORMULAIRE
   -------------------------------------------------------------------------- */
.formulaire-fond {
  position: fixed; inset: var(--bandeau) 0 0 0;
  z-index: 70;
  background: rgba(6, 11, 20, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

.formulaire-carte {
  width: 620px;
  max-height: 100%;
  background: var(--bleu);
  border: 1px solid #2b3d5c;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.form-corps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
}

.form-champ { display: flex; flex-direction: column; gap: 4px; position: relative; }
.form-champ > span {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
}
.form-champ input, .form-champ select {
  height: 42px;
  border: 1px solid #35507a; border-radius: 8px;
  background: var(--fond); color: var(--texte);
  font: inherit; padding: 0 10px;
}
.form-champ:nth-of-type(3), .form-champ:nth-of-type(5) { grid-column: 1 / -1; }

.creneaux {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 132px; overflow-y: auto;
  padding: 6px;
  border: 1px solid #2b3d5c; border-radius: 8px;
  background: var(--fond);
}
.creneau {
  height: 38px; min-width: 66px;
  border: 1px solid #35507a; border-radius: 8px;
  background: var(--bleu-clair); color: var(--texte);
  font: inherit; font-weight: 600; cursor: pointer;
}
.creneau:hover { border-color: var(--or); }
.creneau.choisi { background: var(--or); border-color: var(--or); color: #1a1400; }

.form-libre { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.form-libre span { font-size: 11px; text-transform: uppercase; color: var(--gris); }
.form-libre input { height: 38px; }

.suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
  max-height: 190px; overflow-y: auto;
  background: var(--bleu-clair);
  border: 1px solid #35507a; border-radius: 8px;
  margin-top: 2px;
}
.suggestion {
  display: flex; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 42px; padding: 6px 10px;
  border: 0; border-bottom: 1px solid #2b3d5c;
  background: transparent; color: var(--texte);
  font: inherit; text-align: left; cursor: pointer;
}
.suggestion:hover { background: var(--bleu); }
.suggestion span { color: var(--gris); font-size: 12px; }

.form-pied { display: flex; align-items: center; gap: 8px; }
.form-pied .bouton { height: var(--cible); }
.form-pied .bouton.or { margin-left: 0; }
.form-erreur { margin: 0 auto 0 0; color: #ffb4ad; font-size: 13px; }

.vide { margin: 0; padding: 8px; color: var(--gris); font-style: italic; font-size: 13px; }