/*
 * La liste publique des créneaux.
 *
 * Les horaires par jour ou par niveau, le nom de l'éducateur, les sections
 * par public et leur ligne de contexte, la saison.
 *
 * Écrans : [cnpr_creneaux_publics] (page « Sections de nage »).
 *
 * 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.
 */

/* Public timetable ([cnpr_creneaux_publics]) — a read-only page, no controls.
   Two columns: the section label (a day, or a level) and its start times. The
   grid collapses to one column on narrow screens rather than letting a row of
   six times squeeze the label to two characters. */
.cnpr-creneaux {
    display: grid;
    /* Two wide columns on desktop: three squeezed the times column enough that
       Aquagym and Natation adultes wrapped mid-list. minmax(0,1fr) rather than
       1fr so a long unbroken time row cannot push the column past its share. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; /* a two-line card must not stretch to its row's tallest */
    gap: 24px;
}
@media (max-width: 760px) {
    .cnpr-creneaux { grid-template-columns: 1fr; gap: 16px; }
}
.cnpr-creneaux-activite {
    border: 1px solid var(--cnpr-filet, #d3eefb);
    border-radius: 12px;
    padding: 16px 18px 14px;
    background: var(--cnpr-fond, #ffffff);
}
.cnpr-creneaux-titre {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-creneaux-ages {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-creneaux-faits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 2px 0 10px;
}
.cnpr-creneaux-duree,
.cnpr-creneaux-prix {
    margin: 0;
    font-size: 13px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-creneaux-titre + .cnpr-creneaux-table { margin-top: 10px; }
.cnpr-creneaux-table {
    width: 100%;
    border-collapse: collapse;
}
.cnpr-creneaux-table th,
.cnpr-creneaux-table td {
    text-align: left;
    vertical-align: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--cnpr-filet, #d3eefb);
}
.cnpr-creneaux-table tr:last-child th,
.cnpr-creneaux-table tr:last-child td { border-bottom: 0; }
/* Two-class selector on purpose: the `th, td { padding: 6px 0 }` rule above is
   (0,2,0) and silently wins over a lone .cnpr-creneaux-label, which left the
   longest labels glued to their times ("Mercredi18:00"). */
.cnpr-creneaux-table .cnpr-creneaux-label {
    /* Shrink-to-fit: a percentage width starves the times column, which is the
       one that actually wraps. */
    width: 1%;
    padding-right: 14px;
    font-weight: 600;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
    white-space: nowrap;
}
.cnpr-creneaux-heures { font-variant-numeric: tabular-nums; }
/* Le nom de l'éducateur sous les heures.
   SÉLECTEUR À DEUX CLASSES, obligatoire : `.cnpr-creneaux-table th, td` est
   déjà posé en (0,2,0) juste au-dessus, et le thème ajoute
   `.page-standard .page-content p` en (0,2,1) sur toute page de contenu — ce
   shortcode y vit. Une règle à une seule classe serait inerte, et le
   symptôme (un seul élément gris, le reste noir) ne se voit pas à la relecture.
   `font-variant-numeric` remis à `normal` : le tabular-nums hérité de la
   cellule écarte les chiffres d'un nom qui en contiendrait, sans raison ici. */
.cnpr-creneaux-table .cnpr-creneaux-educateur {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    font-variant-numeric: normal;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
@media (max-width: 480px) {
    .cnpr-creneaux-table th,
    .cnpr-creneaux-table td { display: block; width: auto; padding: 0; }
    .cnpr-creneaux-table th { padding-top: 8px; }
    .cnpr-creneaux-table td { padding-bottom: 8px; }
}

/* Public timetable, sectioned by public (Enfants et ados / Adultes) — each
   section wraps its own unchanged .cnpr-creneaux grid, so the two-column
   layout above needs no change. Space between sections keeps them from
   reading as one long list; the section title sits clearly above its cards
   so the h2 -> h3 hierarchy (section -> activité) is visible, not just
   semantic. */
.cnpr-creneaux-publics {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.cnpr-creneaux-public-titre {
    margin: 0 0 16px;
    padding-bottom: 8px;
    font-size: 22px;
    line-height: 1.3;
    color: var(--cnpr-couleur-titre, #1e3f94);
    border-bottom: 2px solid var(--cnpr-filet, #d3eefb);
}
/* Context line above every section — deliberately understated (no border, no
   accent colour) so it never competes with the h2 section titles below it.
   No bottom margin: it is a flex child of .cnpr-creneaux-publics, whose gap
   already spaces it from the first section — a margin here would stack on top
   of that gap instead of replacing it. */
.cnpr-creneaux-saison {
    margin: 0;
    font-size: 14px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
/* Ce que le filtre de la liste masque (creneaux-planning.js, horaires()).
   Trois classes : l'activité se pose en grille dans le thème, à (0,2,0), ce
   qui battrait un simple [hidden]. */
.cnpr-creneaux-publics .cnpr-creneaux-public[hidden],
.cnpr-creneaux-publics .cnpr-creneaux .cnpr-creneaux-activite[hidden] { display: none; }
/* Et ce que « Places ? » masque : un créneau, et une ligne dont tous les
   créneaux sont partis. La ligne est posée en bloc plus bas, à (0,4,1) : sans
   ce rappel, son titre (« Mercredi ») restait seul au-dessus de rien. */
.cnpr-creneaux-publics .cnpr-creneaux-activite--cases .cnpr-creneaux-table tr[hidden],
.cnpr-creneaux-publics .cnpr-creneaux-table .cnpr-creneaux-case[hidden] { display: none; }


/* --- Les horaires en cases (cnpr_insc_creneaux_publics_render_cases) -------
   Chaque horaire de la page est une CASE (le choix est dit dans le PHP) : le
   jour et l'heure, et l'éducateur quand il change d'une case à l'autre. Deux
   colonnes sur un écran large, une seule sur téléphone.
   LE DAMIER ALTERNE LA CASE (ligne + colonne), PAS LA LIGNE. Sur deux
   colonnes, un simple :nth-child(even) peindrait toute la colonne de droite et
   ferait deux rubans verticaux ; le damier suit les rangs 2, 3, 6, 7… soit
   (4n+2) et (4n+3). Chaque case se détache ainsi de ses quatre voisines, et un
   horaire se lit d'un coup d'œil sans filet entre eux.
   Les cases claires sont une eau plus pâle, pas du blanc : en blanc, seules
   les cases foncées se voyaient, et la grille se lisait comme des pavés épars
   aux coins arrondis au hasard. Teintées toutes deux, les cases forment un
   bloc. Sans bordure autour, une case manquante (nombre impair) laisse une
   simple encoche, pas un trou encadré. */
/* LE NIVEAU AU-DESSUS DE SES CASES, à toutes les largeurs. Posé dans une
   colonne à gauche, il poussait les heures de ses activités plus à droite
   que celles des autres : les cases commencent désormais toutes au même
   bord. Le tableau garde sa sémantique (le niveau reste l'en-tête de sa
   ligne), seul son dessin passe en blocs. Trois classes et un élément,
   pour battre la largeur de 30 % que le thème donne au niveau. */
.cnpr-creneaux-publics .cnpr-creneaux-activite--cases .cnpr-creneaux-table,
.cnpr-creneaux-publics .cnpr-creneaux-activite--cases .cnpr-creneaux-table tbody,
.cnpr-creneaux-publics .cnpr-creneaux-activite--cases .cnpr-creneaux-table tr {
    display: block;
}
.cnpr-creneaux-publics .cnpr-creneaux-activite--cases .cnpr-creneaux-table th,
.cnpr-creneaux-publics .cnpr-creneaux-activite--cases .cnpr-creneaux-table td {
    display: block;
    width: auto;
    padding: 0;
}
.cnpr-creneaux-publics .cnpr-creneaux-activite--cases .cnpr-creneaux-table th {
    padding: 0 0 6px;
    border-bottom: 0;
}
.cnpr-creneaux-publics .cnpr-creneaux-activite--cases .cnpr-creneaux-table td { padding-bottom: 14px; }
.cnpr-creneaux-publics .cnpr-creneaux-activite--cases .cnpr-creneaux-table tr + tr { padding-top: 14px; }
.cnpr-creneaux-publics .cnpr-creneaux-activite--cases .cnpr-creneaux-table tr:last-child td { padding-bottom: 0; }
.cnpr-creneaux-table .cnpr-creneaux-cases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 10px;
    overflow: hidden;
}
.cnpr-creneaux-table .cnpr-creneaux-case {
    margin: 0;
    padding: 9px 14px 10px;
    background: color-mix(in srgb, var(--cnpr-fond-doux, #eaf7fd) 40%, var(--cnpr-fond, #ffffff));
}
.cnpr-creneaux-table .cnpr-creneaux-case:nth-child(4n+2),
.cnpr-creneaux-table .cnpr-creneaux-case:nth-child(4n+3) {
    background: var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-creneaux-table .cnpr-creneaux-case .cnpr-creneaux-heure { display: block; }
/* LE DAMIER COMPTE LES CASES MONTRÉES. Quand « Places ? » en masque, un simple
   :nth-child compterait les absentes, et deux cases voisines prendraient la
   même teinte. `of :not([hidden])` recompte sur les seules visibles ; un
   navigateur qui ne le lit pas ignore ces deux règles et garde le damier
   d'avant — imparfait, jamais cassé. */
.cnpr-creneaux-table .cnpr-creneaux-cases:has(> [hidden]) .cnpr-creneaux-case {
    background: color-mix(in srgb, var(--cnpr-fond-doux, #eaf7fd) 40%, var(--cnpr-fond, #ffffff));
}
.cnpr-creneaux-table .cnpr-creneaux-cases:has(> [hidden]) .cnpr-creneaux-case:nth-child(4n+2 of :not([hidden])),
.cnpr-creneaux-table .cnpr-creneaux-cases:has(> [hidden]) .cnpr-creneaux-case:nth-child(4n+3 of :not([hidden])) {
    background: var(--cnpr-fond-doux, #eaf7fd);
}
/* Une case SEULE (activité d'un seul créneau) : le bloc se réduit à sa
   colonne, pour que ses quatre coins s'arrondissent comme ceux des autres
   blocs — pleine largeur, la case finissait net au milieu de la ligne. */
.cnpr-creneaux-table .cnpr-creneaux-cases:has(> .cnpr-creneaux-case:only-child) {
    width: 50%;
    grid-template-columns: minmax(0, 1fr);
}
/* Même réduction quand le filtre ne laisse qu'UNE case visible sur la ligne. */
.cnpr-creneaux-table .cnpr-creneaux-cases:has(> .cnpr-creneaux-case:nth-child(1 of :not([hidden])):nth-last-child(1 of :not([hidden]))) {
    width: 50%;
    grid-template-columns: minmax(0, 1fr);
}
/* L'éducateur commun à toute la ligne, dit une fois sous les cases. */
.cnpr-creneaux-table .cnpr-creneaux-educateur--commun { margin-top: 6px; padding-left: 14px; }

@media (max-width: 480px) {
    /* Une colonne : le damier redevient une simple alternance. */
    .cnpr-creneaux-table .cnpr-creneaux-cases { grid-template-columns: minmax(0, 1fr); }
    .cnpr-creneaux-table .cnpr-creneaux-cases:has(> .cnpr-creneaux-case:only-child) { width: auto; }
    .cnpr-creneaux-table .cnpr-creneaux-case:nth-child(n) { background: color-mix(in srgb, var(--cnpr-fond-doux, #eaf7fd) 40%, var(--cnpr-fond, #ffffff)); }
    .cnpr-creneaux-table .cnpr-creneaux-case:nth-child(even) { background: var(--cnpr-fond-doux, #eaf7fd); }
    .cnpr-creneaux-table .cnpr-creneaux-cases:has(> .cnpr-creneaux-case:nth-child(1 of :not([hidden])):nth-last-child(1 of :not([hidden]))) { width: auto; }
    .cnpr-creneaux-table .cnpr-creneaux-cases:has(> [hidden]) .cnpr-creneaux-case:nth-child(n) { background: color-mix(in srgb, var(--cnpr-fond-doux, #eaf7fd) 40%, var(--cnpr-fond, #ffffff)); }
    .cnpr-creneaux-table .cnpr-creneaux-cases:has(> [hidden]) .cnpr-creneaux-case:nth-child(even of :not([hidden])) { background: var(--cnpr-fond-doux, #eaf7fd); }
}

/* --- L'état d'un créneau (cnpr_insc_creneaux_publics_dispo) ---------------
   Les deux mots du tunnel, en petite pastille après l'heure : « file
   d'attente » dans l'ambré du badge du tunnel (on peut encore s'inscrire),
   « complet » en ardoise (fermé). Rien quand il reste de la place : l'absence
   de mot est la bonne nouvelle, et la page reste un horaire, pas un
   compteur. Le mot ne se coupe pas : il descend plutôt entier à la ligne. */
.cnpr-creneaux-dispo {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: 1px;
}
.cnpr-creneaux-dispo--attente { background: #f6e2c9; color: #7a4a13; }
.cnpr-creneaux-dispo--complet { background: #e2e8f0; color: #334155; }
.cnpr-creneaux-titre .cnpr-creneaux-dispo { font-size: 13px; vertical-align: 2px; }
.cnpr-creneaux-tete {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cnpr-creneaux-legende {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-creneaux-legende .cnpr-creneaux-dispo { margin-left: 0; margin-right: 4px; }