/*
 * Le planning de la semaine.
 *
 * La grille jours × heures de début, les filtres par activité et par
 * public, les onglets de jour sur téléphone
 * (includes/front-creneaux-planning.php).
 *
 * Écrans : [cnpr_creneaux_publics] en planning (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.
 */

/* --- Planning de la semaine (front-creneaux-planning.php) -----------------
   Une grille jours × HEURES DE DÉBUT, pas une échelle de temps : une ligne
   n'existe que si une séance y commence, et les séances qui démarrent ensemble
   s'empilent dans la case. Chaque activité porte une teinte (--cnpr-teinte,
   posée par le PHP) ; la pastille et sa séance la partagent, c'est ce qui fait
   le lien entre le filtre et la grille. */
.cnpr-planning {
    --cnpr-planning-col-heure: 56px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cnpr-planning .cnpr-creneaux-public-titre { margin-bottom: 2px; }
/* La carte de page du thème est en overflow: hidden, ce qui en fait un
   conteneur de défilement : l'en-tête des jours et les onglets y colleraient
   à la carte, jamais à l'écran. clip rogne pareil sans cet effet. */
article.card:has(.cnpr-planning) { overflow: clip; }

/* --- Le bloc « Trouver un cours » ------------------------------------------
   UN PANNEAU QUI SE VOIT ET SE NOMME. Trois rangées de pilules pâles, sans
   titre, se lisaient comme un décor : un parent ne devinait pas qu'on pouvait
   y toucher. Ici un fond d'eau, un titre, et chaque rangée sa question à
   gauche (« Pour qui ? ») — un formulaire, pas une barre d'outils.
   Les rangées sont en `display: contents` : la question et ses boutons
   deviennent les deux cellules d'une même grille, si bien que les questions
   s'alignent en colonne quelle que soit leur longueur. */
.cnpr-planning .cnpr-planning-filtres {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: center;
    gap: 14px 24px;
    padding: 22px 24px 18px;
    border: 1px solid var(--cnpr-filet, #d3eefb);
    border-radius: var(--cnpr-rayon, 16px);
    background: var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-planning .cnpr-planning-filtres[hidden],
.cnpr-planning-onglets[hidden],
.cnpr-planning-ligne[hidden],
.cnpr-planning-seance[hidden] { display: none; }
/* Trois sélecteurs : la pastille et le bouton se posent en inline-flex plus
   bas, à (0,2,0), ce qui battrait un simple [hidden] — les pastilles d'un
   autre public restaient ainsi visibles. */
.cnpr-planning .cnpr-planning-puce[hidden],
.cnpr-planning .cnpr-planning-reset[hidden] { display: none; }
.cnpr-planning-filtre { display: contents; }
/* Deux classes : `.page-content h3` du thème (0,1,1) poserait sinon sa
   taille et ses marges. */
.cnpr-planning .cnpr-planning-filtres-titre {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    font-size: 19px;
    line-height: 1.3;
    color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-planning .cnpr-planning-filtre-nom {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cnpr-couleur-texte, #16284f);
}
/* Face aux pastilles, la question se cale sur leur PREMIÈRE rangée, pas sur
   le milieu de trois. */
.cnpr-planning .cnpr-planning-filtre--activites .cnpr-planning-filtre-nom { align-self: start; padding-top: 8px; }

/* Les choix exclusifs (public, moment) : des boutons séparés et pleins, et
   non plus un rail pâle où l'état choisi était la seule chose visible. 40 px
   de haut sous une souris ; 44 px au doigt (la cible tactile recommandée),
   posés par la règle du téléphone. */
.cnpr-planning-publics { display: flex; flex-wrap: wrap; gap: 8px; }
.cnpr-planning .cnpr-planning-public {
    min-height: 40px;
    padding: 0 18px;
    border: 1.5px solid color-mix(in srgb, var(--cnpr-couleur-titre, #1e3f94) 22%, transparent);
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cnpr-couleur-titre, #1e3f94);
    background: var(--cnpr-fond, #ffffff);
    cursor: pointer;
}
.cnpr-planning .cnpr-planning-public:hover { border-color: var(--cnpr-couleur-titre, #1e3f94); }
.cnpr-planning .cnpr-planning-public[aria-pressed="true"] {
    color: #fff;
    border-color: var(--cnpr-couleur-titre, #1e3f94);
    background: var(--cnpr-couleur-titre, #1e3f94);
}

/* Les activités, à choix multiples : chaque pastille garde la teinte de ses
   séances dans la grille (--cnpr-teinte) — c'est le lien entre le filtre et
   le planning. Choisie, elle se REMPLIT de sa teinte et prend une coche : la
   différence se voit sans distinguer les couleurs. */
.cnpr-planning-activites { display: flex; flex-wrap: wrap; gap: 7px 6px; }
.cnpr-planning-choix-titre { display: none; }
.cnpr-planning-choix-titre::-webkit-details-marker { display: none; }
.cnpr-planning .cnpr-planning-puce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 15px 0 12px;
    text-align: left;
    border: 1.5px solid hsl(var(--cnpr-teinte) 45% 82%);
    border-radius: 999px;
    font: inherit;
    font-size: 14.5px;
    line-height: 1.2;
    color: var(--cnpr-couleur-texte, #16284f);
    background: var(--cnpr-fond, #ffffff);
    cursor: pointer;
}
.cnpr-planning .cnpr-planning-puce::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: hsl(var(--cnpr-teinte) 62% 46%);
    flex: none;
}
.cnpr-planning .cnpr-planning-puce:hover { border-color: hsl(var(--cnpr-teinte) 55% 45%); }
.cnpr-planning .cnpr-planning-puce[aria-pressed="true"] {
    color: #fff;
    font-weight: 700;
    border-color: hsl(var(--cnpr-teinte) 60% 30%);
    background: hsl(var(--cnpr-teinte) 60% 30%);
}
.cnpr-planning .cnpr-planning-puce[aria-pressed="true"]::before { background: #fff; }
.cnpr-planning .cnpr-planning-puce[aria-pressed="true"]::after {
    content: "✓";
    margin-left: 2px;
    font-size: 14px;
    font-weight: 700;
}
.cnpr-planning .cnpr-planning-public:focus-visible,
.cnpr-planning .cnpr-planning-puce:focus-visible,
.cnpr-planning .cnpr-planning-onglet:focus-visible,
.cnpr-planning .cnpr-planning-reset:focus-visible,
.cnpr-planning .cnpr-planning-copier:focus-visible,
.cnpr-planning .cnpr-planning-choix-titre:focus-visible {
    outline: 3px solid var(--cnpr-couleur-accent, #009fe0);
    outline-offset: 2px;
}

/* Le pied : ce qu'on voit, comment revenir à tout, et le lien à partager. */
.cnpr-planning .cnpr-planning-filtres-pied {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--cnpr-filet, #d3eefb);
}
/* `p.` et trois classes : `.page-standard .page-content p` (0,2,1) du thème
   repeindrait sinon la phrase. */
.cnpr-planning .cnpr-planning-filtres p.cnpr-planning-resume {
    flex: 0 1 auto;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--cnpr-couleur-texte, #16284f);
}
.cnpr-planning .cnpr-planning-reset {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--cnpr-couleur-titre, #1e3f94);
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--cnpr-couleur-titre, #1e3f94);
    background: var(--cnpr-fond, #ffffff);
    cursor: pointer;
}
.cnpr-planning .cnpr-planning-reset:hover { color: #fff; background: var(--cnpr-couleur-titre, #1e3f94); }
/* Discret, et rangé à droite : un service, pas une action du planning. */
.cnpr-planning .cnpr-planning-copier {
    margin-left: auto;
    border: 0;
    padding: 6px 0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--cnpr-couleur-lien, #0a6fb2);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    background: none;
    cursor: pointer;
}
.cnpr-planning .cnpr-planning-copier.est-copie { text-decoration: none; color: var(--cnpr-couleur-texte, #16284f); }

/* La grille. Une ligne = une heure de début ; la colonne d'heure est étroite
   et collée à gauche, les jours se partagent le reste. */
.cnpr-planning-grille {
    border: 1px solid var(--cnpr-filet, #d3eefb);
    border-radius: 12px;
    background: var(--cnpr-fond, #ffffff);
    /* clip et non hidden : hidden ferait de la grille un conteneur de
       défilement, et l'en-tête des jours ne collerait plus en haut de page. */
    overflow: clip;
}
.cnpr-planning-ligne {
    display: grid;
    grid-template-columns: var(--cnpr-planning-col-heure) repeat(var(--cnpr-planning-jours, 6), minmax(0, 1fr));
    border-top: 1px solid var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-planning-entete {
    border-top: 0;
    /* Opaque, pour masquer les séances qui défilent dessous : le fond de la
       grille elle-même (le fond de page de l'ancien thème, blanc lui aussi). */
    background: var(--cnpr-fond, #ffffff);
    position: sticky;
    top: var(--cnpr-planning-haut, 0px);
    z-index: 1;
}
/* Le passage du midi au soir : un filet plus marqué, pour que deux lignes
   séparées de quatre heures ne se lisent pas comme voisines. */
.cnpr-planning-ligne--coupure { border-top: 3px double var(--cnpr-filet, #d3eefb); }
.cnpr-planning-jour {
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cnpr-couleur-titre, #1e3f94);
    border-left: 1px solid var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-planning-heure {
    padding: 8px 8px 0 10px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-planning-case {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
    min-width: 0;
    border-left: 1px solid var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-planning-seance {
    display: flex;
    flex-direction: column;
    padding: 5px 7px 6px;
    border-left: 4px solid hsl(var(--cnpr-teinte) 62% 44%);
    border-radius: 6px;
    background: hsl(var(--cnpr-teinte) 70% 94%);
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--cnpr-couleur-texte, #16284f);
    overflow-wrap: anywhere;
}
.cnpr-planning-seance-nom { font-weight: 700; color: hsl(var(--cnpr-teinte) 55% 24%); }
.cnpr-planning-seance-groupe { font-weight: 600; }
.cnpr-planning-seance-details { font-size: 11.5px; color: var(--cnpr-couleur-texte-doux, #4c5f80); }

.cnpr-planning .cnpr-planning-vide {
    margin: 0;
    padding: 18px;
    text-align: center;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
    border: 1px dashed var(--cnpr-filet, #d3eefb);
    border-radius: 12px;
}

/* Les onglets de jour n'existent que sur téléphone : sur un écran large, les
   six jours tiennent côte à côte. */
.cnpr-planning-onglets { display: none; }

@media (max-width: 720px) {
    /* Une seule colonne : la question au-dessus de ses boutons. */
    .cnpr-planning .cnpr-planning-filtres { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 16px 14px; }
    .cnpr-planning .cnpr-planning-filtre-nom { margin-top: 8px; }
    /* Trois boutons dans 330 px : ils se partagent la rangée et passent à la
       ligne plutôt que de déborder (« Après-midi et soir »). */
    .cnpr-planning .cnpr-planning-public { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 4px 4px; border-radius: 14px; font-size: 14px; }
    .cnpr-planning .cnpr-planning-copier { margin-left: 0; }
    .cnpr-planning .cnpr-planning-puce { min-height: 44px; }
    /* Les activités : la question devient le titre du volet repliable. */
    .cnpr-planning .cnpr-planning-filtre--activites .cnpr-planning-filtre-nom { display: none; }
    .cnpr-planning .cnpr-planning-choix { margin-top: 8px; }
    .cnpr-planning-choix-titre {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 48px;
        padding: 0 14px;
        border: 1.5px solid color-mix(in srgb, var(--cnpr-couleur-titre, #1e3f94) 22%, transparent);
        border-radius: 12px;
        font-size: 16px;
        font-weight: 700;
        color: var(--cnpr-couleur-texte, #16284f);
        background: var(--cnpr-fond, #ffffff);
        cursor: pointer;
        list-style: none;
    }
    .cnpr-planning-choix-etat { font-weight: 400; color: var(--cnpr-couleur-texte-doux, #4c5f80); }
    .cnpr-planning-choix-titre::after { content: "▾"; margin-left: auto; color: var(--cnpr-couleur-titre, #1e3f94); }
    .cnpr-planning-choix[open] .cnpr-planning-choix-titre { margin-bottom: 10px; }
    .cnpr-planning-choix[open] .cnpr-planning-choix-titre::after { content: "▴"; }
    .cnpr-planning.est-interactif .cnpr-planning-onglets:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(var(--cnpr-planning-jours-onglets, 6), minmax(0, 1fr));
        grid-auto-flow: column;
        gap: 4px;
        position: sticky;
        top: var(--cnpr-planning-haut, 0px);
        z-index: 2;
        padding: 4px 0;
        background: var(--cnpr-fond, #ffffff);
    }
    .cnpr-planning .cnpr-planning-onglet {
        border: 1px solid var(--cnpr-filet, #d3eefb);
        border-radius: 10px;
        padding: 9px 0;
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        color: var(--cnpr-couleur-titre, #1e3f94);
        background: var(--cnpr-fond, #ffffff);
        cursor: pointer;
    }
    .cnpr-planning .cnpr-planning-onglet.est-vide { color: var(--cnpr-couleur-texte-doux, #4c5f80); opacity: .55; }
    .cnpr-planning .cnpr-planning-onglet[aria-selected="true"] {
        color: #fff;
        background: var(--cnpr-couleur-titre, #1e3f94);
        border-color: var(--cnpr-couleur-titre, #1e3f94);
        opacity: 1;
    }
    /* Un seul jour à la fois : l'en-tête des jours devient inutile, et la case
       du jour prend toute la largeur. */
    .cnpr-planning.est-interactif .cnpr-planning-entete { display: none; }
    .cnpr-planning.est-interactif .cnpr-planning-ligne { grid-template-columns: var(--cnpr-planning-col-heure) minmax(0, 1fr); }
    .cnpr-planning.est-interactif .cnpr-planning-ligne:nth-child(2) { border-top: 0; }
    .cnpr-planning.est-interactif .cnpr-planning-case:not(.est-jour-actif) { display: none; }
    .cnpr-planning-seance { font-size: 14px; padding: 7px 10px; }
    .cnpr-planning-seance-details { font-size: 12.5px; }
    /* Sans script, les six jours restent là : la grille défile en largeur
       plutôt que d'écraser six colonnes dans un écran de téléphone. */
    .cnpr-planning:not(.est-interactif) .cnpr-planning-grille { overflow-x: auto; }
    .cnpr-planning:not(.est-interactif) .cnpr-planning-ligne { min-width: 640px; }
}

/* --- Le filtre de la liste (cnpr_insc_creneaux_publics_filtre_render) ------
   Le bloc « Trouver un cours » de la grille, repris tel quel par ses classes
   (d'où `.cnpr-planning` sur sa racine) : seules manquent la question
   « Quand ? » et la grille. Il naît `hidden` et le script le montre —
   `display: flex` de .cnpr-planning battrait sinon l'attribut. */
.cnpr-planning.cnpr-horaires-filtre[hidden] { display: none; }