/* Heop — deux dates en clair, puis un mini-agenda.
 *
 * CE QUE CETTE FEUILLE REMPLACE. Une liste deroulante de vingt-quatre lignes
 * sur la fiche, et vingt-quatre pastilles a la file sur la vitrine : 689 points
 * de haut pour UN atelier sur un iPhone de 390x844. Julien, le 10/09/2026 :
 * « il est hors de question d'afficher un truc vilain et moche pour les
 * creneaux disponibles ».
 *
 * AUCUNE NOUVELLE COULEUR. Tout vient des jetons deja poses : le vert de marque
 * et son fond doux pour ce qui est ouvert, le sable pour le trait, l'attenue
 * pour le secondaire. Un jour complet n'est pas efface — il est barre et rendu
 * en attenue (#6E6252, 5,63:1 sur creme) : le cacher ferait croire a une date
 * libre.
 *
 * LES REM NE VALENT PAS 16 PIXELS ICI. La racine tombe a 15px sous 640 et a
 * 14px sous 420 (public/layout.css). Tout ce qui doit tenir une COTE — cible
 * tactile, cote d'une case du calendrier — est donc ecrit en pixels ; les
 * textes, eux, suivent la racine et rapetissent avec elle, ce qui est voulu.
 *
 * RIEN N'EST CACHE EN ATTENDANT UN SECOURS. Pas un `opacity: 0` dans cette
 * feuille : un creneau complet reste lisible, et le bouton radio natif garde
 * son anneau de focus — c'est lui qui rend l'agenda parcourable au clavier.
 */

/* --- Les deux prochaines dates ----------------------------------------- */

.creneaux {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.creneaux__proches,
.mini-agenda__horaires {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.creneaux__legende {
    padding: 0 0 2px;
    color: var(--hp-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.creneaux__vide {
    margin: 0;
    color: var(--hp-muted);
    font-size: .74rem;
    font-weight: 600;
}

.creneau {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 48 et non 44 : la ligne porte deux etages de texte, et le plancher de
       WCAG 2.5.5 est un plancher, pas une cible. */
    min-height: 48px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--ui-color-line);
    border-radius: var(--pdp-card-radius, 8px);
    background: var(--ui-plan-card);
    cursor: pointer;
}

.creneau:has(.creneau__choix:checked) {
    border-color: var(--ui-color-brand);
    background: var(--ui-color-brand-soft);
}

.creneau--complet {
    cursor: default;
}

.creneau__choix {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--ui-color-brand);
}

.creneau__corps {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.creneau__date {
    color: var(--hp-ink);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.2;
}

.creneau__detail {
    color: var(--hp-muted);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.2;
}

.creneau--complet .creneau__date,
.creneau--complet .creneau__detail {
    color: var(--hp-muted);
}

/* --- Le mini-agenda ----------------------------------------------------- */

.mini-agenda {
    min-width: 0;
    /* SIX POINTS DE COTE, ET C'EST UN CALCUL. Le module d'achat fait 324
       points de large sur l'iPhone de reference ; moins deux de trait et douze
       de marge, il reste 310 pour sept colonnes, soit 44,3 par jour. Un
       padding de dix aurait rendu des cases de 43 — sous le plancher tactile,
       pour trois points de decor. */
    padding: 6px 6px 10px;
    border: 1px solid var(--ui-color-line);
    border-radius: var(--pdp-card-radius, 8px);
    background: var(--hp-surface-warm);
}

/* La poignee du repli. C'est le geste qui fait « apparaitre » l'agenda : elle
   prend donc le plancher tactile, comme tout ce qui se touche ici. */
.mini-agenda__ouverture {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--ui-color-brand);
    cursor: pointer;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    /* LE MARQUEUR NATIF DISPARAIT DES QUE `display` N'EST PLUS `list-item` :
       un `<summary>` en flex n'a plus de triangle, et le bloc n'annonce plus
       qu'il s'ouvre. Le chevron du jeu maison le remplace, et il tourne. */
    list-style: none;
}

.mini-agenda__ouverture::-webkit-details-marker {
    display: none;
}

.mini-agenda__chevron {
    flex: none;
    transition: transform var(--ui-motion-response, 220ms) var(--ui-motion-ease, ease);
}

.mini-agenda[open] .mini-agenda__chevron {
    transform: rotate(90deg);
}

.mini-agenda__corps {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding-top: 4px;
}

/* Le conteneur porte `tabindex="-1"` pour retenir le point de depart du
   clavier apres un changement de mois. Il n'est pas un bouton : on ne lui
   dessine un anneau que lorsque le navigateur le juge utile au clavier. */
.mini-agenda:focus:not(:focus-visible) {
    outline: none;
}

.mini-agenda__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.mini-agenda__fleche {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ui-color-line);
    border-radius: var(--ui-radius-pill, 999px);
    background: var(--ui-plan-card);
    color: var(--ui-color-brand);
    text-decoration: none;
}

.mini-agenda__fleche--muette {
    border-color: transparent;
    background: transparent;
}

.mini-agenda__titre {
    flex: 1;
    color: var(--hp-ink);
    font-family: var(--ui-font-display);
    font-size: .95rem;
    text-align: center;
}

.mini-agenda__grille {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.mini-agenda__grille th {
    padding: 2px 0;
    color: var(--hp-muted);
    font-size: .68rem;
    font-weight: 700;
}

.mini-agenda__grille abbr {
    text-decoration: none;
}

.mini-agenda__case {
    /* Aucun espacement ici : la respiration entre les jours vient du trait
       transparent de la case elle-meme, qui la DECORE sans retrecir ce qu'on
       touche. Un `padding` de deux points aurait coute quatre points de cible
       sur chaque colonne. */
    padding: 0;
    text-align: center;
}

.mini-agenda__jour {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* La cible tactile. La colonne fait la largeur de la grille divisee par
       sept ; la hauteur est ecrite ici pour que le carre ne descende jamais
       sous le plancher, quelle que soit la police servie. */
    min-height: 44px;
    border: 2px solid transparent;
    /* Six et non dix : quatre cases arrondies qui se touchent laissent au
       point de rencontre un losange blanc d'autant plus visible que le rayon
       est grand. A six, la bande des jours ouverts se lit d'un trait. */
    border-radius: 6px;
    background-clip: padding-box;
    color: var(--hp-muted);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.mini-agenda__jour--ouvert {
    background: var(--ui-color-brand-soft);
    color: var(--ui-color-brand);
}

.mini-agenda__jour--choisi {
    background: var(--ui-color-brand);
    color: var(--ui-plan-card);
}

.mini-agenda__jour--complet {
    color: var(--hp-muted);
    text-decoration: line-through;
}

.mini-agenda__aide {
    margin: 0;
    color: var(--hp-muted);
    font-size: .72rem;
    font-weight: 600;
}

/* --- Le module d'achat de la fiche ------------------------------------- */
/*
 * Le selecteur d'activite tenait sur deux colonnes : la date a gauche, le
 * nombre de participants dans 94 pixels a droite. Un agenda ne rentre pas dans
 * une demi-largeur : il prend la ligne, et les participants passent dessous.
 */

.public-product-detail-page .booking-selector--activity {
    grid-template-columns: minmax(0, 1fr);
}

.public-product-detail-page .booking-selector__participants {
    max-width: 170px;
}


/* --- Reprendre la main sur deux regles de la fiche ----------------------
 *
 * product-detail.css habille le selecteur par TYPE et non par nom :
 * `.booking-selector label { display: grid }` et `.booking-selector input {
 * width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid ... }`.
 * Ecrites pour une liste deroulante et un champ nombre, elles attrapaient au
 * passage la case a cocher d'un creneau : chaque ligne montait a quatre-vingt-
 * dix points au lieu de quarante-huit, et le bouton radio s'etalait sur toute
 * la largeur en boite de formulaire.
 *
 * C'est le defaut que `test_vitrine_reperes.py` decrit pour la vitrine : ce
 * qu'on habille, on le NOMME. On ne reecrit pas la feuille de la fiche dans ce
 * lot — ce serait toucher au champ « Participants » et au selecteur de nuits —
 * mais on rend explicitement leur forme aux deux elements nommes ici.
 */

.public-product-detail-page .booking-selector .creneau {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 12px;
}

.public-product-detail-page .booking-selector .creneau__choix {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.public-product-detail-page .booking-selector .creneau__corps {
    display: grid;
    gap: 2px;
    min-width: 0;
}