/* =========================================================================
   AGENDA
   =========================================================================

   La grille est une pile de colonnes en position absolue plutôt qu'un tableau.

   Un tableau imposerait une ligne par tranche de temps, donc une granularité
   fixe : un rendez-vous de 20 minutes ne tomberait sur aucune ligne, et un
   rendez-vous de 09:10 à 09:50 devrait être « arrondi » pour s'afficher. Avec
   un positionnement en pixels, la hauteur suit la durée réelle à la minute
   près, et les tranches ne sont plus qu'un repère visuel.

   Une variable porte la hauteur d'une minute : changer le zoom de la journée ne
   demande de toucher à rien d'autre.
   ========================================================================= */

.agenda {
    /* Les trois échelles de la journée sont nommées une fois pour toutes :
       « 1.05px » écrit dans une règle de vue semaine ne se rattachait à rien,
       et personne n'osait y toucher de peur de casser la vue jour. */
    --agenda-minute-jour: 1.6px;
    --agenda-minute-large: 2.3px;
    --agenda-minute-semaine: 1.05px;

    --minute: var(--agenda-minute-jour);
    --largeur-heures: 58px;
    --entete-h: 56px;

    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi-grand);
    box-shadow: var(--ombre-1);
    overflow: hidden;
}

.agenda--compact { --minute: var(--agenda-minute-semaine); }
.agenda--large { --minute: var(--agenda-minute-large); }

.agenda__barre {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--bordure);
    flex-wrap: wrap;
}

.agenda__date { font-weight: 600; font-size: 1.02rem; text-transform: capitalize; min-width: 12ch; }

/* HAUTEUR UTILE DE LA GRILLE.

   « 220px » était écrit en dur et décrivait l'en-tête du bureau. Sur téléphone,
   l'en-tête est bien plus haut : la grille dépassait donc le bas de la fenêtre,
   et la page se mettait à défiler EN PLUS du défilement interne de l'agenda.
   Mesuré à 390 px : 1019 px de document pour 844 px de fenêtre.

   « dvh » et non « vh » : sur mobile, vh compte la zone masquée par la barre
   d'adresse, ce qui redonne exactement le même dépassement — un défaut qu'on ne
   voit jamais sur un poste de bureau. */
.agenda { --reserve: 300px; }

.agenda__defilement {
    overflow: auto;
    max-height: calc(100vh - var(--reserve));
    max-height: calc(100dvh - var(--reserve));
}

.agenda__grille {
    display: grid;
    grid-template-columns: var(--largeur-heures) repeat(var(--colonnes), minmax(150px, 1fr));
    min-width: fit-content;
    position: relative;
}

/* --------------------------------------------------------------- Entêtes */

/* COLLANT SUR LES DEUX AXES.

   Les en-têtes de praticienne tenaient déjà au défilement vertical. Il
   manquait l'autre moitié : en défilement HORIZONTAL — trois praticiennes sur
   un portable, ou huit sur un poste — la gouttière des heures sortait de
   l'écran, et on lisait des blocs sans savoir à quelle heure ils étaient.
   L'angle, lui, tient sur les deux axes, sinon il glisse sous les heures. */
.agenda__coin,
.agenda__tete {
    position: sticky; top: 0; z-index: 8;
    background: var(--surface-douce);
    border-bottom: 1px solid var(--bordure-marquee);
    height: var(--entete-h);
}

.agenda__coin { left: 0; z-index: 9; border-right: 1px solid var(--bordure); }

.agenda__tete {
    display: flex; align-items: center; gap: var(--e2);
    padding: 0 var(--e3);
    border-left: 1px solid var(--bordure);
    min-width: 0;
    position: relative;
}

/* Le filet de couleur en tête de colonne rattache la colonne à sa
   praticienne. C'est le même code que le liseré des blocs : on apprend une
   fois, on lit partout. */
.agenda__tete--praticienne::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--couleur, var(--primaire));
    opacity: .85;
}

.agenda__tete-nom { font-weight: 650; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda__tete-nom--court { display: none; }
.agenda__tete-note { font-size: .74rem; color: var(--encre-tenue); }

/* « ne travaille pas » n'est pas une note de bas de page : c'est la raison
   pour laquelle une colonne entière est vide. Elle se lit donc comme une
   étiquette, et non comme du texte gris perdu à côté d'un nom. */
.agenda__tete-note--repos {
    background: var(--surface-enfoncee);
    color: var(--encre-douce);
    border-radius: var(--arrondi-rond);
    padding: 1px var(--e2);
    font-weight: 550;
}

/* Sous 480 px, les colonnes tombent à leur minimum de 150 px. Mesuré à
   390 px : la note « ne travaille pas » — insécable en flex, son plus long
   mot fait sa largeur plancher — écrasait le nom à 35 px visibles pour
   80 à 109 px de contenu. Il restait « In… ». Deux gestes : le prénom +
   initiale remplace le nom complet, et la note descend sur sa propre ligne
   au lieu de voler la largeur du nom. */
@media (max-width: 480px) {
    .agenda__tete--praticienne { flex-wrap: wrap; align-content: center; }
    .agenda__tete--praticienne .agenda__tete-nom { display: none; }
    .agenda__tete--praticienne .agenda__tete-nom--court { display: block; }
    .agenda__tete--praticienne .agenda__tete-note { flex-basis: 100%; line-height: 1.2; }
}

.agenda__tete--jour { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.agenda__tete--aujourdhui { background: var(--primaire-voile); }
.agenda__tete--aujourdhui .agenda__tete-nom { color: var(--primaire); }

/* ------------------------------------------------------------ Axe horaire */

.agenda__heures {
    grid-column: 1;
    border-right: 1px solid var(--bordure);
    position: sticky; left: 0; z-index: 7;
    background: var(--surface-douce);
}

.agenda__heure {
    position: absolute; right: var(--e2); left: 0;
    text-align: right;
    font-size: .74rem;
    font-weight: 550;
    color: var(--encre-tenue);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    transform: translateY(-.5em);
}

/* ------------------------------------------------------------- Colonnes */

.agenda__colonne {
    position: relative;
    border-left: 1px solid var(--bordure);
    min-width: 0;
    /* Hors des heures d'ouverture : légèrement enfoncé. La zone reste
       cliquable — un institut prend parfois un rendez-vous en dehors de ses
       horaires affichés, et le lui interdire serait présumer de son
       organisation.

       La référence V3 tranche pour --surface-enfoncee : c'est la même teinte
       que les petits fonds, ce qui fait une seule décision de couleur au lieu
       de deux. */
    background: var(--surface-enfoncee);
}

.agenda__ouvert {
    position: absolute; left: 0; right: 0;
    background: var(--surface);
}

/* La plage de travail de la praticienne : blanche, et bordée de SA couleur.
   Hors de cette plage la colonne reste enfoncée — on voit donc d'un coup
   d'œil qui commence tard et qui finit tôt, sans lire un seul horaire. */
.agenda__travail {
    position: absolute; left: 0; right: 0;
    background: var(--surface);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--couleur, var(--primaire)) 45%, var(--surface));
}

.agenda__ligne {
    position: absolute; left: 0; right: 0;
    border-top: 1px solid var(--bordure);
    pointer-events: none;
}

.agenda__ligne--demi { border-top-style: dotted; border-top-color: var(--bordure); opacity: .7; }

/* Trait de l'heure courante — le repère le plus consulté d'une journée.

   EN BRONZE, PLUS EN ROUGE. Le rouge dit « erreur » partout ailleurs dans
   l'application ; le poser en travers de la journée entière racontait une
   alarme permanente. Le bronze est la couleur d'accent de Royaume, il ne
   signifie rien d'autre que « ici », et il ressort sur toutes les teintes de
   praticienne sans se confondre avec aucune. */
.agenda__maintenant {
    position: absolute; left: 0; right: 0;
    height: 0;
    border-top: 2px solid var(--bronze);
    z-index: 5;
    pointer-events: none;
}

.agenda__maintenant::before {
    content: ""; position: absolute; left: -5px; top: -5px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--bronze);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bronze) 22%, transparent);
}

/* --------------------------------------------------------- Zone cliquable */

.agenda__creneau {
    position: absolute; left: 0; right: 0;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Le créneau libre s'annonce au survol : sans cela, rien ne disait qu'un vide
   se clique. Teinté prune — c'est une action, pas une donnée. */
.agenda__creneau:hover { background: var(--survol-creneau); }
.agenda__creneau:focus-visible { outline-offset: -2px; }

/* ----------------------------------------------------------- Rendez-vous */

/* LE BLOC SE LIT EN TROIS LIGNES.

   Heure, cliente, prestation — chacune sur sa ligne, la première en mono
   tabulaire. C'est la composition de la référence V3, et elle remplace le fond
   teinté par praticienne de la V2.

   Pourquoi ce changement : le fond teinté rendait le GROUPEMENT lisible de
   loin, mais écrasait la hiérarchie DANS le bloc — les trois informations
   avaient le même poids sur un fond coloré. La composition en trois lignes
   rend le bloc lisible de près, et le liseré de couleur suffit au groupement
   de loin. On lit d'abord l'heure, puis qui, puis quoi : l'ordre dans lequel
   la question se pose au comptoir. */
.rdv {
    position: absolute;
    left: 3px; right: 3px;
    border-radius: var(--arrondi-petit);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--couleur, var(--primaire));
    display: flex;
    flex-direction: column;
    box-shadow: var(--ombre-1);
    padding: 3px 8px;
    font-size: var(--taille-menue);
    line-height: 1.35;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    z-index: 2;
    /* Pas de transition sur « filter » ni sur la géométrie : le bloc est
       saisissable au doigt et à la souris, et une propriété encore en cours
       d'animation au moment où on l'attrape rend la prise incertaine. Seule
       l'ombre s'anime — elle ne déplace rien. */
    transition: box-shadow .12s ease;

    /* pan-y et NON none.
       Sur un agenda chargé, les blocs recouvrent la quasi-totalité de la
       colonne : « none » rendait le défilement vertical au doigt IMPOSSIBLE,
       puisqu'il n'y avait presque plus de fond libre où poser le doigt. Avec
       « pan-y », le navigateur fait défiler comme partout ailleurs, et le
       module JavaScript ne prend la main qu'après un appui maintenu — moment
       où il passe lui-même à « none ». Voir agenda.js. */
    touch-action: pan-y;
}

.rdv:hover { box-shadow: var(--ombre-2); z-index: 6; }
.rdv:active { cursor: grabbing; }

/* L'heure d'abord, en mono tabulaire : c'est la donnée qu'on cherche en
   premier quand on cale un rendez-vous au téléphone, et les chiffres alignés
   se comparent d'une colonne à l'autre sans les relire. */
.rdv__heure {
    font-family: var(--police-chiffres);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    font-size: .74rem;
    color: var(--encre-douce);
}

.rdv__cliente { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--encre); }
.rdv__prestation { color: var(--encre-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }

/* SOUS 35 MINUTES, LA PRESTATION DISPARAÎT — elle ne se coupe pas.
   Un bloc de 15 min ne peut pas porter trois lignes : le texte débordait et
   se faisait rogner en plein mot. Mieux vaut deux informations entières que
   trois tronquées ; le nom de la prestation reste dans le panneau. */
.rdv--court { padding: 1px 6px; font-size: .74rem; }
.rdv--court .rdv__prestation { display: none; }

/* Un rendez-vous annulé reste visible et barré : le faire disparaître
   empêcherait de comprendre pourquoi le créneau s'est libéré. */
.rdv--annule {
    opacity: .55;
    background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, var(--surface-enfoncee) 6px, var(--surface-enfoncee) 12px);
    border-left-color: var(--bordure-marquee);
}
.rdv--annule .rdv__cliente { text-decoration: line-through; }
.rdv--annule .rdv__heure { color: var(--encre-tenue); }

/* STATUT : jamais la couleur seule.
   Chaque état se distingue aussi par une FORME — trait discontinu, hachure,
   anneau — et par un mot. Un écran délavé, une impression en gris ou un œil
   daltonien ne doivent pas faire perdre l'information. */
.rdv--noshow {
    border-style: dashed;
    border-left-style: solid;
    background: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(140,58,56,.06) 7px, rgba(140,58,56,.06) 14px), var(--surface);
}
.rdv--noshow .rdv__cliente::after { content: " · non venue"; font-weight: 500; color: var(--danger); }

.rdv--termine {
    background: var(--surface-douce);
    border-left-color: color-mix(in srgb, var(--couleur, var(--primaire)) 45%, var(--surface));
}
.rdv--termine .rdv__cliente { color: var(--encre-douce); }
.rdv--termine .rdv__heure { color: var(--encre-tenue); }

/* En cours : l'anneau bronze. C'est le seul bloc de la journée qui en porte
   un, donc le seul que l'œil trouve sans chercher — et le bronze ne dit
   « erreur » à personne, contrairement au rouge. */
.rdv--encours {
    box-shadow: 0 0 0 2px var(--bronze), var(--ombre-2);
    z-index: 4;
}
.rdv--encours .rdv__cliente::after { content: " · en cours"; font-weight: 500; color: var(--bronze-encre); }

.rdv--deplacement { opacity: .85; z-index: 20; box-shadow: var(--ombre-3); cursor: grabbing; }

/* --------------------------------------------------------------- Absence */

.absence {
    position: absolute; left: 0; right: 0;
    background: var(--hachure-absence);
    border-top: 1px solid var(--bordure-marquee);
    border-bottom: 1px solid var(--bordure-marquee);
    z-index: 1;
    font-size: .74rem;
    color: var(--encre-tenue);
    padding: 2px var(--e2);
    overflow: hidden;
}

/* ------------------------------------------------------ Aide au déplacement */

.agenda__fantome {
    position: absolute; left: 3px; right: 3px;
    border: 2px dashed var(--primaire);
    background: var(--primaire-voile);
    border-radius: var(--arrondi-petit);
    z-index: 19;
    pointer-events: none;
    font-size: .78rem;
    font-weight: 650;
    color: var(--primaire);
    padding: 2px var(--e2);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Semaine */

.semaine__jour { display: contents; }

.agenda--semaine .rdv { font-size: .74rem; }
.agenda--semaine .rdv__prestation { display: none; }

/* ----------------------------------------------------------- Écrans étroits */

/* Sur téléphone, le rail passe en barre horizontale et l'en-tête de page
   s'empile sur plusieurs rangs : la réserve du bureau ne décrit plus rien.
   Les valeurs ci-dessous sont MESURÉES sur les largeurs de référence, pas
   estimées — le test de recette vérifie qu'aucune des deux ne laisse la page
   déborder. Les cibles tactiles restent à 44 px : les rétrécir pour gagner
   quelques pixels irait contre l'usage réel, debout, entre deux clientes. */
@media (max-width: 900px) {
    .agenda { --reserve: 512px; }
}

@media (max-width: 420px) {
    .agenda { --reserve: 472px; }
}