.agenda-back {
    color: var(--gray-medium);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    transition: background var(--transition);
}
.agenda-back:hover { background: var(--gray-light); color: var(--orange); }

.agenda-wrap { max-width: 1200px; margin: 0 auto; padding: 30px 16px 60px; }
.agenda-header h1 { margin: 0 0 4px; }
.agenda-header .subtitle { color: var(--gray-medium); font-size: 13.5px; margin: 0 0 24px; }

/* Alerte trajet -- purement informative, jamais bloquante. */
/* <details>/<summary> natif -- une seule ligne compacte visible par
   defaut, jamais besoin de JS pour la deplier. Le detail explicatif
   (repliee par defaut) ne pousse le tableau vers le bas que si
   l'artisan choisit lui-meme de la consulter. */
.agenda-trajet-alerte {
    background: #eaf2fd; border: 1.5px solid #cfe0f7; border-radius: 10px;
    padding: 10px 16px; margin: 10px 0 0; font-size: 13px; color: var(--gray-dark);
}
.agenda-trajet-alerte summary {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; list-style: none;
}
.agenda-trajet-alerte summary::-webkit-details-marker { display: none; }
.agenda-trajet-alerte summary::after {
    content: '▾'; margin-left: auto; color: var(--gray-medium); font-size: 11px;
    transition: transform .15s ease;
}
.agenda-trajet-alerte[open] summary::after { transform: rotate(180deg); }
.agenda-trajet-icone { font-size: 18px; flex-shrink: 0; }
.agenda-trajet-detail { font-size: 11.5px; color: var(--gray-medium); margin: 8px 0 0 28px; }

.agenda-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.agenda-nav { display: flex; align-items: center; gap: 10px; }
.agenda-nav-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1.5px solid #e5e5e5; border-radius: 50%;
    text-decoration: none; color: var(--gray-dark); font-size: 18px; font-weight: bold;
    transition: all var(--transition);
}
.agenda-nav-btn:hover { border-color: var(--orange); color: var(--orange); transform: scale(1.08); }
.agenda-periode { font-weight: 700; font-size: 15px; min-width: 150px; text-align: center; }

.agenda-today-btn {
    background: #fff; border: 1.5px solid var(--blue); color: var(--blue);
    padding: 8px 16px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 700;
    transition: all var(--transition);
}
.agenda-today-btn:hover { background: var(--blue); color: #fff; }

.agenda-add-btn {
    margin-left: auto;
    background: var(--orange); color: #fff; border: none;
    padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 700;
    cursor: pointer; box-shadow: 0 3px 10px rgba(255,107,0,.3);
    transition: transform var(--transition), box-shadow var(--transition);
}
.agenda-add-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255,107,0,.4); }

.agenda-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; font-size: 12.5px; color: var(--gray-medium); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend-sobaso { background: var(--orange); }
.legend-perso { background: var(--blue); }
.legend-libre { background: #fff; border: 1.5px dashed #ccc; }

.agenda-grid-wrap { overflow-x: auto; border-radius: var(--border-radius); box-shadow: 0 2px 10px rgba(0,0,0,.06); }

/* Glissade au changement de semaine -- la nouvelle grille entre depuis
   la droite (semaine suivante) ou la gauche (semaine precedente), pour
   qu'on sente visuellement le mouvement au lieu d'un changement brutal. */
@keyframes agendaSlideInRight {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes agendaSlideInLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}
.agenda-slide-next { animation: agendaSlideInRight .28s cubic-bezier(.2,.8,.3,1); }
.agenda-slide-prev { animation: agendaSlideInLeft .28s cubic-bezier(.2,.8,.3,1); }
.agenda-grid { display: grid; min-width: 760px; background: #fff; border-radius: var(--border-radius); overflow: hidden; }

.agenda-cell { border-bottom: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; }
.agenda-corner { background: #fafafa; }
.agenda-daylabel {
    background: #fafafa; text-align: center; padding: 10px 4px; font-weight: 700; font-size: 12.5px; color: var(--gray-dark);
}
.agenda-daylabel span { font-weight: 400; color: var(--gray-medium); font-size: 11px; }
.agenda-daylabel.agenda-today { background: #fff2e8; color: var(--orange-dark); }
.agenda-jour-trajet-badge { display: inline-block; margin-left: 3px; font-size: 11px; cursor: help; }
.agenda-hourlabel {
    background: #fafafa; text-align: right; padding: 8px 10px; font-size: 11.5px; color: var(--gray-medium); font-weight: 600;
}

.agenda-slot { min-height: 52px; padding: 4px 6px; cursor: pointer; transition: background var(--transition); position: relative; }
.agenda-slot-libre:hover { background: #f7f7f7; }
.agenda-slot-libre::after {
    content: '+'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    color: #ccc; font-size: 16px; opacity: 0; transition: opacity var(--transition);
}
.agenda-slot-libre:hover::after { opacity: 1; }

/* Creneaux passes : grises, non actionnables. Les libres ne sont plus
   cliquables (inutile de bloquer une heure deja ecoulee) ; les occupes
   (client ou personnel) restent cliquables pour consulter le detail,
   juste desatures pour ne pas se confondre avec les creneaux a venir. */
.agenda-slot-passe-libre { background: #fafafa; cursor: default; }
.agenda-slot-passe { filter: grayscale(55%) opacity(.65); cursor: pointer; }
.agenda-slot-passe:hover { filter: grayscale(35%) opacity(.8); }

/* RDV marque termine par l'artisan -- reste visible et cliquable
   (consultable dans le detail), mais visuellement distinct des RDV
   encore a faire. Meme principe que .agenda-slot-passe, applique
   independamment de l'heure (un RDV termine tot le matin reste grise
   toute la journee, pas seulement une fois l'heure ecoulee). */
.agenda-slot-termine { filter: grayscale(70%) opacity(.6); cursor: pointer; }
.agenda-slot-termine:hover { filter: grayscale(45%) opacity(.75); }

/* Infobulle au survol d'un RDV client -- infos minimalistes (nom,
   panne, telephone, ville). Positionnee en JS avec position:fixed et
   ajoutee directement au body (voir le script plus bas), pour echapper
   completement au conteneur de la grille -- ce dernier a overflow-x:auto,
   ce qui force aussi un decoupage vertical (regle standard CSS) et
   coupait l'infobulle en position:absolute classique.
   Une seule infobulle partagee, reutilisee pour chaque case survolee. */
#agenda-tooltip-partagee {
    display: none;
    position: fixed; z-index: 999;
    background: #fff; color: var(--gray-dark); text-align: left;
    border-radius: 10px; padding: 10px 12px; min-width: 170px; max-width: 240px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18); border: 1px solid #eee;
    font-size: 11.5px; line-height: 1.6;
    pointer-events: none;
}
#agenda-tooltip-partagee strong { display: block; font-size: 12.5px; color: var(--orange-dark); margin-bottom: 2px; }
#agenda-tooltip-partagee .agenda-tooltip-fleche {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border: 6px solid transparent;
}

.agenda-slot-sobaso {
    background: linear-gradient(135deg, #ff9a4d, #ffb374); color: #fff; border-radius: 6px; margin: 2px;
    display: flex; flex-direction: column; justify-content: center; font-size: 11px; line-height: 1.3;
    /* Fond plus clair -> legere ombre portee pour garder le texte blanc
       parfaitement lisible, meme sur la partie la plus claire du degrade. */
    text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.agenda-slot-sobaso strong { font-size: 11.5px; }
.agenda-slot-sobaso:hover { filter: brightness(1.08); }

.agenda-slot-perso {
    background: #eaf2fd; color: var(--blue-dark); border: 1.5px solid #cfe3fb; border-radius: 6px; margin: 2px;
    display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; padding: 4px;
}
.agenda-slot-perso:hover { background: #d9e9fc; }

/* Blocage sur plusieurs heures : les cases fusionnent en une seule
   forme continue (comme un evenement long dans Google Calendar), au
   lieu de rester des cases separees reliees par une fleche bricolee.
   Seuls le haut de la premiere case et le bas de la derniere restent
   arrondis -- tout le reste se touche, sans marge ni angle. */
.agenda-slot-multi-debut {
    border-radius: 8px 8px 0 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
}
.agenda-slot-continuation {
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.agenda-slot-continuation:not(.agenda-slot-multi-fin) { border-bottom: none !important; }
.agenda-slot-multi-fin {
    border-radius: 0 0 8px 8px !important;
    margin-bottom: 2px !important;
}

/* Petite pastille "Xh" en haut de la premiere case, pour voir la duree
   totale du blocage sans avoir a compter les cases. */
.agenda-slot-multi-debut { position: relative; }
.agenda-duree-badge {
    position: absolute; top: 4px; right: 5px;
    background: rgba(255,255,255,.25); color: #fff;
    font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 999px;
    letter-spacing: .02em;
}
.agenda-slot-perso .agenda-duree-badge { background: rgba(0,102,204,.12); color: var(--blue-dark); }

/* Modales */
.agenda-modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(20,20,25,.55);
    backdrop-filter: blur(3px);
    z-index: 1000; align-items: center; justify-content: center; padding: 20px;
}
.agenda-modal {
    background: #fff; border-radius: 16px; padding: 0; max-width: 500px; width: 100%;
    box-shadow: 0 25px 60px rgba(0,0,0,.3);
    animation: agendaPop .22s cubic-bezier(.2,.9,.3,1.2);
    /* Sans hauteur maximale ni defilement interne, un formulaire avec
       beaucoup de champs (ex: "RDV client", 9 champs) grandit au-dela
       de l'ecran -- les boutons du bas (Annuler/Bloquer) se retrouvent
       pousses hors de vue plutot que la popup ne defile proprement sur
       elle-meme, contenue dans la hauteur disponible. L'entete et les
       boutons du bas restent fixes (flex-shrink:0 plus bas), seul le
       contenu du milieu (.agenda-modal-body) devient defilant.
    */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.agenda-modal > .agenda-modal-head,
.agenda-modal > .agenda-modal-actions,
.agenda-modal > .agenda-modal-error {
    flex-shrink: 0;
}
.agenda-modal-body {
    overflow-y: auto;
}
.agenda-modal-detail-body {
    overflow-y: auto;
}
@keyframes agendaPop { from { opacity: 0; transform: scale(.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.agenda-modal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid #f0f0f0;
}
.agenda-modal-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, #FF6B00, #ff8c3d);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(255,107,0,.3);
}
.agenda-modal-icon svg { width: 19px; height: 19px; stroke: #fff; }
.agenda-modal h2 { margin: 0; font-size: 17px; font-weight: 800; color: #1a1a1a; }
.agenda-modal-sub { margin: 2px 0 0; font-size: 12px; color: #999; }

.agenda-modal-body { padding: 20px 26px 4px; }

.agenda-mode-switch {
    display: flex; background: #f2f2f2; border-radius: 10px; padding: 3px;
    margin-bottom: 16px;
}
.agenda-mode-btn {
    flex: 1; border: none; background: none; padding: 9px 4px; border-radius: 8px;
    font-size: 11.5px; font-weight: 700; color: #888; cursor: pointer;
    transition: all .15s ease;
}
.agenda-mode-btn.agenda-mode-active { background: #fff; color: var(--orange-dark); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

.agenda-checkbox-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border: 1.5px solid #eee; border-radius: 10px;
    margin-bottom: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
    font-size: 13px; font-weight: 600; color: var(--gray-dark);
}
.agenda-checkbox-row:hover { border-color: var(--orange); background: #fff9f4; }
.agenda-checkbox-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--orange); flex-shrink: 0; }

.agenda-field { margin-bottom: 16px; }
.agenda-field label {
    display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: #888; margin-bottom: 7px;
}
.agenda-field-row { display: flex; gap: 12px; }
.agenda-field-row .agenda-field { flex: 1; }

.agenda-modal input[type="text"],
.agenda-modal input[type="date"],
.agenda-modal input[type="tel"],
.agenda-modal input[type="email"],
.agenda-modal select {
    width: 100%; box-sizing: border-box;
    padding: 11px 13px; font-size: 14.5px; font-family: inherit; color: #222;
    border: 1.5px solid #e2e2e2; border-radius: 10px; background: #fafafa;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.agenda-modal input[type="text"]:focus,
.agenda-modal input[type="date"]:focus,
.agenda-modal input[type="tel"]:focus,
.agenda-modal input[type="email"]:focus,
.agenda-modal select:focus {
    outline: none; border-color: var(--orange); background: #fff;
    box-shadow: 0 0 0 3px rgba(255,107,0,.12);
}
.agenda-modal select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
    padding-right: 34px;
}

.agenda-modal-actions {
    display: flex; gap: 10px;
    padding: 18px 26px 24px;
}
.agenda-modal-actions button, .agenda-modal-actions a {
    flex: 1; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer; border: none;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    /* Sans ca, un bouton flex refuse par defaut de retrecir en dessous
       de la largeur naturelle de son texte (min-width:auto implicite) --
       avec 3 boutons ("Fermer"/"Modifier"/"Supprimer") sur une popup
       etroite, le total depasse l'espace disponible et deborde du
       cadre au lieu de se partager correctement la place. */
    min-width: 0;
}
.agenda-modal-actions button:active, .agenda-modal-actions a:active { transform: scale(.97); }
.agenda-modal-actions .btn-secondary { background: #f2f2f2; color: #555; }
.agenda-modal-actions .btn-secondary:hover { background: #e8e8e8; }
.agenda-modal-actions .btn-primary {
    background: linear-gradient(135deg, #FF6B00, #ff8c3d); color: #fff;
    box-shadow: 0 4px 12px rgba(255,107,0,.3);
}
.agenda-modal-actions .btn-primary:hover { box-shadow: 0 6px 16px rgba(255,107,0,.4); }
.btn-danger { background: #fff0f0; color: #c0392b; }
.btn-danger:hover { background: #c0392b; color: #fff; }
.agenda-modal-error { color: #c0392b; font-size: 12.5px; margin: 0 26px 16px; text-align: center; }
.agenda-alerte-jours {
    background: #fff3e8; border-radius: 10px; padding: 12px 14px;
    font-size: 13.5px; color: var(--orange-dark); line-height: 1.5;
    margin-top: 10px; display: none;
}
.agenda-alerte-jours.agenda-alerte-visible { display: block; }
.agenda-modal-detail-body { padding: 4px 26px 4px; color: #777; font-size: 13.5px; line-height: 1.5; }

@media (max-width: 600px) {
    .agenda-add-btn { margin-left: 0; width: 100%; }
    .agenda-toolbar { flex-direction: column; align-items: stretch; }

    /* La popup "Bloquer du temps" -- 4 onglets cote a cote ("Regle
       recurrente" est un texte assez long) et des paires de champs
       alignees horizontalement (code postal/ville, heure/duree)
       deviennent vite etriquees sur un ecran de telephone. */
    .agenda-modal-overlay { padding: 10px; }
    .agenda-mode-switch {
        flex-wrap: wrap;
    }
    .agenda-mode-btn {
        flex: 1 1 45%;
        font-size: 12px;
        padding: 10px 4px;
    }
    .agenda-field-row {
        flex-direction: column;
        gap: 0;
    }

    /* Les fenetres de DETAIL proposent parfois 3-4 boutons a la fois
       (Fermer / Modifier / Supprimer, ou Fermer / Modifier / Supprimer
       / Aller a Mon espace) -- les empiler verticalement reste plus
       confortable a lire et a toucher qu'une compression horizontale a
       trois sur un ecran etroit. Cible UNIQUEMENT ces deux fenetres de
       detail par leur id, jamais le formulaire d'ajout/modification
       (2 boutons seulement, "Annuler"/"Bloquer" ou "Annuler"/"Ajouter
       le RDV"), qui n'a besoin d'aucun empilement et devenait
       inutilement plus haut avec une regle appliquee trop largement. */
    #modal-detail-overlay .agenda-modal-actions,
    #modal-sobaso-overlay .agenda-modal-actions {
        flex-direction: column;
    }
}

/* Vue mobile : jours empiles les uns au-dessus des autres, plutot que
   cote a cote. Repositionne les MEMES cellules existantes via CSS Grid
   explicite (--jour/--heure-idx poses en PHP sur chaque cellule),
   sans jamais toucher a l'ordre du HTML -- aucun risque de casser la
   logique deja en place (chevauchement, continuation de creneau,
   etc.), purement un changement d'affichage.
   7 jours x (1 ligne d'entete + 10 heures) = 11 lignes par jour. */
@media (max-width: 700px) {
    .agenda-grid-wrap { overflow-x: visible; }
    .agenda-grid {
        min-width: 0;
        grid-template-columns: 1fr !important;
    }
    .agenda-corner, .agenda-hourlabel { display: none; }

    .agenda-daylabel {
        grid-column: 1;
        grid-row: calc(var(--jour) * 11 + 1);
        padding: 12px 14px; text-align: left;
        margin-top: 22px;
        border-radius: var(--border-radius);
        /* Bleu plus clair que var(--blue) (#0066CC), specifiquement
           pour ces entetes -- var(--blue) reste inchangee ailleurs
           (ex: survol du bouton "Aujourd'hui"). */
        background: #5aa8ea; color: #fff;
        font-size: 14.5px;
        box-shadow: 0 2px 6px rgba(90,168,234,.25);
        text-shadow: 0 1px 2px rgba(0,0,0,.15);
        position: relative;
    }
    .agenda-daylabel span { color: rgba(255,255,255,.85); font-size: 12px; }
    .agenda-daylabel:first-of-type { margin-top: 0; }
    /* Neutralise la regle bureau (.agenda-daylabel.agenda-today, fond
       orange clair) qui restait plus specifique (2 classes) que ma
       simple regle .agenda-daylabel ci-dessus -- sans cette
       redeclaration explicite a specificite egale, elle continuait a
       l'emporter silencieusement sur le bleu voulu ici. Le badge
       "Aujourd'hui" (::after ci-dessous) suffit deja comme repere --
       meme bleu que les autres jours, pas besoin d'une couleur de
       fond distincte en plus. */
    .agenda-daylabel.agenda-today {
        background: #5aa8ea; color: #fff;
    }
    .agenda-daylabel.agenda-today::after {
        content: 'Aujourd\'hui';
        position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
        font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
        background: rgba(255,255,255,.25); padding: 3px 8px; border-radius: 999px;
    }

    .agenda-slot, .agenda-slot-passe-libre {
        grid-column: 1 !important;
        grid-row: calc(var(--jour) * 11 + 2 + var(--heure-idx)) !important;
        /* Grille a 2 colonnes explicites plutot qu'un simple flex --
           necessaire pour que l'heure (pseudo-element ::before) reste
           TOUJOURS sur une colonne fixe a gauche, meme quand le contenu
           reel comporte plusieurs elements (badge de duree, nom,
           panne) qui doivent tous se regrouper et se centrer ENSEMBLE
           dans la colonne de droite, plutot que de s'empiler au-dessus
           de l'heure faute d'espace horizontal suffisant en simple flex. */
        display: grid;
        grid-template-columns: 42px 1fr;
        align-items: center;
        min-height: 34px;
        /* Rattache visuellement chaque creneau a l'en-tete de SON jour --
           sans ca, une fois qu'on defile un peu, plus aucun repere ne
           permet de savoir a quel jour appartient une ligne donnee. Une
           fine bordure coloree sur le cote gauche, continue du haut en
           bas de chaque bloc de jour, suffit a le rendre evident. */
        border-left: 3px solid #ffe0cc;
        padding-left: 9px;
    }
    .agenda-slot[data-heure-affichee]::before,
    .agenda-slot-passe-libre[data-heure-affichee]::before {
        grid-column: 1;
        grid-row: 1 / -1;
        font-size: 11px; color: var(--gray-medium); font-weight: 600;
    }
    /* Tous les enfants REELS (badge de duree, nom, panne...) se
       regroupent dans la deuxieme colonne, centres entre eux -- jamais
       un empilement au-dessus de l'heure. */
    .agenda-slot > *, .agenda-slot-passe-libre > * {
        grid-column: 2;
        text-align: center;
    }
    /* Creneaux libres colores en vert clair -- reperage immediat des
       disponibilites, sans avoir a lire chaque ligne une par une. */
    .agenda-slot-libre {
        background: #eafaf3;
        border-left-color: #7dd9ae;
    }
    /* Ces cellules n'ont aucun contenu reel (juste un div vide,
       cliquable pour bloquer) -- sans texte explicite, un artisan qui
       parcourt rapidement la liste ne sait pas d'un coup d'oeil que le
       vert signifie "disponible". Le mot "Libre" leve toute ambiguite. */
    .agenda-slot-libre::after {
        content: 'Libre';
        grid-column: 2;
        text-align: center;
        color: #1a9c6b;
        font-size: 11px;
        font-weight: 600;
    }
    /* Alterne un fond tres legerement teinte entre jours pairs et
       impairs -- renforce encore la separation, meme en defilement
       rapide, sans devenir criard. Jamais sur un creneau qui porte
       deja SA PROPRE couleur (libre en vert, RDV client en orange,
       blocage personnel en bleu, RDV termine en beige) -- exactement
       le meme conflit de specificite deja corrige pour les creneaux
       libres, etendu ici a TOUS les types de contenu colore, qui
       devenaient presque invisibles sur les jours impairs faute
       d'exclusion.
    */
    .agenda-jour-impair.agenda-slot:not(.agenda-slot-libre):not(.agenda-slot-sobaso):not(.agenda-slot-perso),
    .agenda-jour-impair.agenda-slot-passe-libre {
        background: #fafbfc;
    }
    /* L'heure, affichee une seule fois par cellule dans le HTML normal
       (colonne partagee), doit maintenant apparaitre directement dans
       chaque cellule -- impossible autrement de savoir a quelle heure
       correspond une ligne, une fois la colonne d'heures masquee. */
    .agenda-slot[data-heure-affichee]::before,
    .agenda-slot-passe-libre[data-heure-affichee]::before {
        content: attr(data-heure-affichee);
        flex-shrink: 0; width: 42px; font-size: 11px; color: var(--gray-medium); font-weight: 600;
    }
    .agenda-slot strong, .agenda-slot span { display: inline; }
}