/* =========================================================================
   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 {
    --minute: 1.6px;              /* hauteur d'une minute */
    --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: 1.05px; }
.agenda--large { --minute: 2.3px; }

.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; }

.agenda__defilement { overflow: auto; max-height: calc(100vh - 220px); }

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

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

.agenda__coin,
.agenda__tete {
    position: sticky; top: 0; z-index: 3;
    background: var(--surface-douce);
    border-bottom: 1px solid var(--bordure-marquee);
    height: var(--entete-h);
}

.agenda__coin { z-index: 4; 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;
}

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

.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: relative;
    background: var(--surface-douce);
}

.agenda__heure {
    position: absolute; right: var(--e2); left: 0;
    text-align: right;
    font-size: .74rem;
    color: var(--encre-tenue);
    font-variant-numeric: tabular-nums;
    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. */
    background: var(--surface-enfoncee);
}

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

.agenda__travail {
    position: absolute; left: 0; right: 0;
    background: var(--surface);
    box-shadow: inset 3px 0 0 var(--primaire-voile);
}

.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. */
.agenda__maintenant {
    position: absolute; left: 0; right: 0;
    height: 0;
    border-top: 2px solid var(--danger);
    z-index: 5;
    pointer-events: none;
}

.agenda__maintenant::before {
    content: ""; position: absolute; left: -4px; top: -5px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger);
}

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

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

.agenda__creneau:hover { background: rgba(47, 74, 66, .06); }
.agenda__creneau:focus-visible { outline-offset: -2px; }

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

.rdv {
    position: absolute;
    left: 3px; right: 3px;
    border-radius: var(--arrondi-petit);
    border: 1px solid var(--bordure-marquee);
    border-left: 3px solid var(--couleur, var(--primaire));
    background: var(--surface);
    box-shadow: var(--ombre-1);
    padding: 3px var(--e2);
    font-size: .8rem;
    line-height: 1.3;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    z-index: 2;
    transition: box-shadow .12s ease, transform .06s 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; }

.rdv__heure { font-weight: 650; font-variant-numeric: tabular-nums; }
.rdv__cliente { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdv__prestation { color: var(--encre-douce); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rdv--court { padding-top: 1px; padding-bottom: 1px; 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: .5; background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, var(--surface-enfoncee) 6px, var(--surface-enfoncee) 12px); }
.rdv--annule .rdv__cliente { text-decoration: line-through; }

.rdv--noshow { border-style: dashed; }
.rdv--noshow .rdv__cliente::after { content: " · non venue"; font-weight: 400; color: var(--danger); }

.rdv--termine { background: var(--surface-douce); }
.rdv--encours { box-shadow: 0 0 0 2px var(--primaire-voile), var(--ombre-1); }

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

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

.absence {
    position: absolute; left: 0; right: 0;
    background: repeating-linear-gradient(135deg, #EFEBE6, #EFEBE6 5px, #E5DFD8 5px, #E5DFD8 10px);
    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; }