/*
 * Le choix des activités et des créneaux.
 *
 * Le nom d'activité qui reste collé en haut pendant le défilement,
 * l'avertissement du nombre de cours, les pastilles de créneaux (choisie,
 * complète, grisée par l'âge, verrouillée, file d'attente), le nom de
 * l'éducateur, les activités réservées par âge, repliées, et la grille des
 * créneaux couverts par une souscription.
 *
 * Écrans : l'étape « Activités » du tunnel ([cnpr_inscriptions]).
 *
 * Sa place dans la cascade est fixée par cnpr_insc_feuilles_front()
 * (includes/front-tunnel-core.php) : toutes les feuilles du front se
 * chargent partout où l'extension s'affiche, dans cet ordre, avant le thème.
 */

/* The activité name floats: it sticks under the theme's sticky site-header (69px)
   while you scroll through its créneaux, so you always know which activité you're
   picking in. Opaque background + a hairline so pills scrolling underneath stay
   readable. Only the open <h3> — the collapsed locked <summary> is never sticky. */
/* (0,2,1) : la marge nulle doit battre `.page-content h3` (0,1,1) du thème. */
.cnpr-insc-conteneur > h3.cnpr-insc-conteneur__name {
    position: sticky;
    /* Height of the pinned top bars, measured live by cnpr-tunnel.js (varies by
       viewport + theme). 69px is only the desktop fallback if JS hasn't run. */
    top: var(--cnpr-sticky-top, 69px);
    z-index: 3;
    margin: 0;
    padding: 12px 4px 10px;
    background: var(--cnpr-fond, #ffffff);
    box-shadow: 0 1px 0 var(--cnpr-fond-doux, #eaf7fd);
}

/* Over-cap warning (max-cours), toggled by the client mirror in cnpr-tunnel.js. */
.cnpr-insc-maxcours-warn { margin: 0 0 16px; }

.cnpr-insc-creneaux { display: flex; flex-direction: column; border-top: 1px solid var(--cnpr-fond-doux, #eaf7fd); }
/* The container-scoped selector (0,2,0) beats the generic ".cnpr-insc-form
   label" reset (0,1,1) which would otherwise force these labels to inline-block
   and collapse their flex layout (checkbox glued to the text). */
.cnpr-insc-creneaux .cnpr-insc-creneau {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 11px 16px 11px 34px;
    border-top: 1px solid var(--cnpr-fond-doux, #eaf7fd);
    cursor: pointer;
    transition: background-color .12s ease;
}
.cnpr-insc-creneau:first-child { border-top: 0; }
.cnpr-insc-creneau:hover { background: var(--cnpr-fond-doux, #eaf7fd); }
.cnpr-insc-creneau input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.cnpr-insc-creneau:has(input:checked) { background: var(--cnpr-fond-doux, #eaf7fd); box-shadow: inset 3px 0 0 var(--cnpr-couleur-titre, #1e3f94); }
.cnpr-insc-creneau__slot { font-weight: 500; }
.cnpr-insc-creneau .cnpr-insc-badge { margin-left: auto; }
/* Same note the pill carries, on the wide souscription control: filled by the
   "incompatibilités" script when it greys this control out (a Natation adultes
   pick blocking Water-polo, say). Pushed to the right so it sits where the
   "réservé"/"complet" badge would, and muted rather than orange: it says
   "another of your own picks makes this one unavailable", not "the club is
   full". `[hidden]` is honoured, so it stays invisible until the script speaks. */
.cnpr-insc-creneau__note {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-creneau__note[hidden] { display: none; }
/* The note takes the badge's place: two elements claiming `margin-left: auto`
   would split the row in three. While the script blocks the control, its note
   is the message. */
.cnpr-insc-creneau:has(input[data-cnpr-block]) .cnpr-insc-badge { display: none; }
.cnpr-insc-creneau--off {
    cursor: not-allowed;
    opacity: .55;
    background: var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-insc-creneau--off:hover { background: var(--cnpr-fond-doux, #eaf7fd); }
.cnpr-insc-creneau--off input { cursor: not-allowed; }

/* Backlog A (suppression-rejet-aspects): a bureau-confirmed seat, shown
   checked+disabled during the self-service activités correction — a
   positive "kept" state, not a greyed-out "off" one. */
.cnpr-insc-creneau--locked {
    cursor: not-allowed;
    background: color-mix(in srgb, var(--cnpr-insc-succes) 8%, transparent);
}
.cnpr-insc-creneau--locked:hover { background: color-mix(in srgb, var(--cnpr-insc-succes) 8%, transparent); }
.cnpr-insc-creneau--locked input { cursor: not-allowed; }
.cnpr-insc-badge--locked { background: var(--cnpr-insc-succes-fond); color: var(--cnpr-insc-succes); }

/* Constant-depth sections inside a container: a jour (Aquagym) or a libellé
   (École de nage « Niveau 1 »…) titles each group; its créneaux sit under it.
   The title carries a top rule to split it from the group above (the container's
   own border-top covers the first one). Each group's first créneau drops its
   border-top so it sits flush under the title, not double-ruled.

   Group-scoped (0,2,0) on purpose, exactly like the pill grid below: this is a
   <h4>, and the theme dresses editorial sub-titles with `.page-content h4`
   (0,1,1) — 18px, semi-bold, accent-coloured. The shortcode is rendered by
   `the_content()` INSIDE `.page-content`, so a bare class (0,1,0) loses and the
   section label came out looking like a page heading instead of the small
   uppercase rubric it is. The extra class is what keeps this component's look
   its own business, whatever the theme decides about page copy. */
.cnpr-insc-creneau-group .cnpr-insc-creneau-group__label {
    margin: 0;
    padding: 14px 16px 6px 34px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
    border-top: 1px solid var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-insc-creneau-group:first-child .cnpr-insc-creneau-group__label { border-top: 0; }

/* Row layout (choix-creneaux-lisible): a group WITH a label lays it out to
   the LEFT and its grid to the right instead of stacking the h4 above the
   grid, so a container with several short sections (Aquagym's per-day rows,
   École de nage's per-niveau rows) reads as a compact table instead of a long
   vertical list. A label-less group (the "one créneau per day" shape,
   cnpr_insc_creneaux_flatten_if_sparse) never gets this modifier and keeps
   the plain single grid above. */
.cnpr-insc-creneau-group--row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 16px 6px 34px;
}
.cnpr-insc-creneau-group--row + .cnpr-insc-creneau-group--row {
    border-top: 1px solid var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-insc-creneau-group--row .cnpr-insc-creneau-group__label {
    flex: 0 0 96px;
    padding: 9px 0 0;
    margin: 0;
    border-top: 0;
}
.cnpr-insc-creneau-group--row .cnpr-insc-creneau-grid {
    flex: 1;
    padding: 0;
}
@media (max-width: 560px) {
    .cnpr-insc-creneau-group--row {
        flex-direction: column;
        gap: 4px;
    }
    .cnpr-insc-creneau-group--row .cnpr-insc-creneau-group__label {
        flex: none;
    }
}

/* Selectable pills, wrapped into a grid under each section title. The créneau's
   checkbox is visually hidden and drives the pill state; the whole chip is the
   click target. Base rule is grid-scoped (0,2,0) to beat the ".cnpr-insc-form
   label" reset (0,1,1) that would otherwise force inline-block + a stray margin. */
.cnpr-insc-creneau-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 16px 16px 34px;
}
.cnpr-insc-creneau-grid .cnpr-insc-creneau-pill {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 76px;
    margin: 0;
    padding: 8px 15px;
    border: 1px solid rgba(16, 32, 53, 0.10);
    border-radius: 11px;
    background: var(--cnpr-fond, #ffffff);
    color: var(--cnpr-couleur-texte, #16284f);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 32, 53, 0.06);
    transition: border-color .3s cubic-bezier(0.32, 0.72, 0, 1),
        background-color .3s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow .3s cubic-bezier(0.32, 0.72, 0, 1),
        color .3s cubic-bezier(0.32, 0.72, 0, 1),
        transform .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.cnpr-insc-creneau-pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}
.cnpr-insc-creneau-pill:hover {
    border-color: var(--cnpr-couleur-lien, #0a6fb2);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--cnpr-couleur-titre, #1e3f94) 35%, transparent);
}
.cnpr-insc-creneau-pill:has(input:checked) {
    border-color: var(--cnpr-couleur-titre, #1e3f94);
    background: var(--cnpr-couleur-titre, #1e3f94);
    color: #fff;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--cnpr-couleur-titre, #1e3f94) 28%, transparent);
}
.cnpr-insc-creneau-pill:has(input:checked) .cnpr-insc-creneau-pill__slot::after {
    content: " ✓";
    font-weight: 700;
}
.cnpr-insc-creneau-pill:has(input:checked) .cnpr-insc-creneau-pill__note { display: none; }
/* Sauf « file d'attente » : cochée, la pastille dit encore qu'elle fait
   attendre — c'est là que le parent risque de croire sa place acquise. Sur le
   fond marine de la case cochée, en blanc : l'orangé n'y serait plus lisible. */
.cnpr-insc-creneau-pill:has(input:checked) .cnpr-insc-creneau-pill__note--attente {
    display: revert;
    color: #fff;
}
.cnpr-insc-creneau-pill:has(input:focus-visible) {
    outline: 2px solid var(--cnpr-couleur-titre, #1e3f94);
    outline-offset: 2px;
}
/* Press only on genuinely pickable pills — --off/--locked carry disabled
   inputs and must not respond physically. */
.cnpr-insc-creneau-pill:has(input:not(:disabled)):active { transform: translateY(0) scale(0.98); }
/* A checked pill is still clickable (uncheck): keep the lift's shadow response,
   which the later-declared :has(input:checked) box-shadow would otherwise win. */
.cnpr-insc-creneau-pill:has(input:checked):hover { box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--cnpr-couleur-titre, #1e3f94) 45%, transparent); }

/* Full but still pickable (waitlist): dashed border + a small "file d'attente" note. */
.cnpr-insc-creneau-pill--full { border-style: dashed; }
.cnpr-insc-creneau-pill__note {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cnpr-insc-alerte);
}

/* Same box, muted (not orange) colour: this note says "another of your own
   picks makes this one unavailable" (choix-creneaux-lisible), not "the club
   is full" — a different kind of news, so it must not borrow the "complet"
   warning colour. */
.cnpr-insc-creneau-pill__note--js {
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
/* While this script blocks a pill, its own note is the message: the server's
   "complet" would otherwise sit under it and say two things at once. */
.cnpr-insc-creneau-pill:has(input[data-cnpr-block]) .cnpr-insc-creneau-pill__note:not(.cnpr-insc-creneau-pill__note--js) { display: none; }

/* Le nom de l'éducateur sous l'horaire. Ni la boîte ni la couleur d'un
   `__note` : une note est un STATUT (« complet », « verrouillé ») et se crie en
   10px gras majuscules ; un nom de personne se lit, en capitalisation
   naturelle. D'où une classe à part — qui la met aussi hors de portée de la
   règle qui masque les notes sous une pastille cochée.
   `max-width` en `ch` plutôt qu'en px : la contrainte est un nombre de
   caractères (« Information indisponible » fait 24 signes), pas une largeur
   d'écran, et une pastille de 76px minimum ne doit pas s'étirer à la longueur
   du nom le plus long de la grille. */
.cnpr-insc-creneau-pill__meta {
    max-width: 16ch;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
/* Cochée, la pastille passe en fond accent : le texte secondaire sur bleu foncé tombe à
   un contraste illisible. Le blanc légèrement voilé garde la hiérarchie
   (l'horaire reste plus fort que le nom) sans quitter la lisibilité. */
.cnpr-insc-creneau-pill:has(input:checked) .cnpr-insc-creneau-pill__meta { color: rgba(255, 255, 255, .85); }
/* Grisée par l'âge ou verrouillée : le nom suit l'état du reste de la pastille
   plutôt que de rester le seul élément à pleine intensité. */
.cnpr-insc-creneau-pill--locked .cnpr-insc-creneau-pill__meta { color: var(--cnpr-insc-succes); }

/* Ineligible by age: greyed, not selectable — title/aria-label carries the why. */
.cnpr-insc-creneau-grid .cnpr-insc-creneau-pill--off {
    cursor: not-allowed;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
    background: var(--cnpr-fond-doux, #eaf7fd);
    border-style: dashed;
    opacity: .6;
}
.cnpr-insc-creneau-pill--off:hover {
    border-color: var(--cnpr-filet, #d3eefb);
    background: var(--cnpr-fond-doux, #eaf7fd);
    /* Neutralise the base hover's lift + shadow: motion on a not-allowed
       chip advertises a click that does nothing. */
    transform: none;
    box-shadow: 0 1px 2px rgba(16, 32, 53, 0.06);
}

/* File d'attente pleine : fermée comme --off (même gris, même curseur), mais
   BARRÉE — ce créneau existe et convient à l'adhérent, c'est le club qui n'y
   prend plus personne. La note en tête d'étape porte la phrase ; ici on ne
   fait que distinguer « pas pour vous » de « plus pour personne ». S'applique
   à la pastille à la carte comme au contrôle large du forfait. */
.cnpr-insc-creneau-pill--file-pleine .cnpr-insc-creneau-pill__slot,
.cnpr-insc-creneau--file-pleine .cnpr-insc-creneau__slot {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Backlog A (suppression-rejet-aspects): a bureau-confirmed seat — checked,
   disabled, but styled as a KEPT choice (green), not a greyed-out one. */
.cnpr-insc-creneau-grid .cnpr-insc-creneau-pill--locked {
    cursor: not-allowed;
    border-color: var(--cnpr-insc-succes);
    background: var(--cnpr-insc-succes-fond);
    color: var(--cnpr-insc-succes);
}
.cnpr-insc-creneau-pill--locked:hover {
    border-color: var(--cnpr-insc-succes);
    background: var(--cnpr-insc-succes-fond);
    /* Same neutralisation as --off: a bureau-locked seat is not clickable. */
    transform: none;
    box-shadow: 0 1px 2px rgba(16, 32, 53, 0.06);
}
.cnpr-insc-creneau-pill--locked .cnpr-insc-creneau-pill__note { color: var(--cnpr-insc-succes); }

/* Age-reserved activités: relegated below the pickable ones, each collapsed
   under its name (a native <details>) so the list stays focused on what the
   adhérent can actually take — the summary spells out the reservation reason. */
.cnpr-insc-picks-locked {
    margin-top: 24px;
    padding-top: 4px;
    border-top: 1px dashed var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-insc-picks-locked__intro {
    margin: 10px 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-conteneur--locked {
    margin-bottom: 6px;
}
/* Sous une activité verrouillée, et pour le bureau seul (le tunnel tenu pour
   une famille) : la porte qui existe côté fiche. Même retrait que le titre du
   <summary>, pour qu'on lise la phrase comme la suite de l'activité. */
.cnpr-insc-picks-locked__bureau {
    margin: -2px 0 10px;
    padding-left: 21px;
    font-size: 13px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-conteneur--locked > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    cursor: pointer;
    list-style: none;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-conteneur--locked > summary::-webkit-details-marker { display: none; }
.cnpr-insc-conteneur--locked > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--cnpr-couleur-texte-doux, #4c5f80);
    border-bottom: 2px solid var(--cnpr-couleur-texte-doux, #4c5f80);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.cnpr-insc-conteneur--locked[open] > summary::before { transform: rotate(45deg); }
.cnpr-insc-conteneur--locked .cnpr-insc-conteneur__title { flex: 1 1 auto; }
.cnpr-insc-conteneur--locked > summary:hover { color: var(--cnpr-couleur-texte, #16284f); }

/* Créneaux covered by a single "souscription" (mode partagé) — informational.
   Grouped by day (like the indépendant grid) then laid on a 3-per-row grid, so a
   6-day week reads Lun/Mar/Mer then Jeu/Ven/Sam. The pills keep the full range
   (durations vary) and are static (no checkbox, no hover state — not pickable). */
.cnpr-insc-day-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
    padding: 10px 16px 14px 34px;
}
/* Same (0,2,0) scoping, same reason: another <h4> living inside
   `.page-content`, which the theme would otherwise dress as page copy. */
.cnpr-insc-day-col .cnpr-insc-day-col__label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-day-col__slots {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.cnpr-insc-slot-pill {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--cnpr-filet, #d3eefb);
    border-radius: 10px;
    background: var(--cnpr-fond-doux, #eaf7fd);
    font-size: 13px;
    font-weight: 600;
    color: var(--cnpr-couleur-texte, #16284f);
}
/* Même registre que la pastille choisissable, dans une pilule informative :
   l'horaire garde son poids, le nom passe en dessous, plus léger. */
.cnpr-insc-slot-pill .cnpr-insc-slot-pill__meta {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
@media (max-width: 620px) {
    .cnpr-insc-day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}