/* Boutique des piscines : styles minimaux, à surcharger par le thème.
 * Contrastes vérifiés (RGAA 3.2 et 3.3) : texte blanc sur l'accent 5:1, accent sur les fonds clairs 4,6:1, bordures des
 * champs 3,8:1. Un thème qui change ces couleurs doit garder ces seuils. */

.pb-catalogue,
.pb-planning {
    --pb-accent: #0a7c80;
    --pb-accent-fonce: #065a5e;
    --pb-accent-texte: #ffffff;
    --pb-attenue: #5a6b70;
    --pb-bordure-champ: #768589;
}

/* Les boutons et champs ne reprennent pas la police de la page sans cette règle : texte minuscule en police système. */
.pb-boutique :is(button, input, select, textarea),
.pb-catalogue :is(button, input, select, textarea),
.pb-planning :is(button, input, select, textarea) {
    font: inherit;
}

/* Liens, champs et titres que le thème laisse au navigateur (bleu par défaut, champs « inset ») ou décore (trait sous
 * les h3) : spécificité nulle (:where), pour ne jamais passer devant une règle explicite du plugin ou du thème. */
:where(.pb-boutique, .pb-catalogue, .pb-planning) a {
    color: var(--pb-accent);
}

:where(.pb-boutique, .pb-catalogue, .pb-planning) a:hover {
    color: var(--pb-accent-fonce);
}

:where(.pb-boutique, .pb-catalogue, .pb-planning) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]), select, textarea) {
    padding: 0.4em 0.5em;
    border: 1px solid var(--pb-bordure-champ);
    border-radius: 4px;
    background-color: #ffffff;
    color: inherit;
}

/* Cases à cocher et boutons radio : un thème peut les masquer (appearance: none, sans bordure) pour les dessiner dans
 * ses propres formulaires ; ici, ils restent ceux du navigateur, à la couleur d'accent. Spécificité réelle : la règle
 * doit passer devant celle du thème. Sans elle, la case des conditions de vente à accepter serait invisible. */
:is(.pb-boutique, .pb-catalogue, .pb-planning) input:is([type="checkbox"], [type="radio"]) {
    appearance: auto;
    -webkit-appearance: auto;
    width: 1.2em;
    height: 1.2em;
    margin: 0;
    flex: none;
    accent-color: var(--pb-accent);
}

/* Le trait décoratif des titres du thème n'a pas sa place dans les bandeaux colorés des groupes du catalogue. */
.pb-groupe-titre :is(h2, h3, h4)::before,
.pb-groupe-titre :is(h2, h3, h4)::after {
    content: none;
}

/* Focus visible même si le thème n'en dessine pas (RGAA 10.7). */
.pb-boutique :focus-visible,
.pb-catalogue :focus-visible,
.pb-planning :focus-visible {
    outline: 3px solid #e06c00;
    outline-offset: 2px;
}

.pb-groupe {
    margin: 0 0 1.5em;
}

.pb-groupe-titre {
    margin: 0 0 0.5em;
    padding: 0.4em 0.75em;
    background: var(--pb-fond, var(--pb-accent));
    color: var(--pb-texte, var(--pb-accent-texte));
    border-radius: 4px;
}

.pb-articles,
.pb-creneaux {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pb-article,
.pb-creneau {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em 0.75em;
    align-items: baseline;
    padding: 0.6em 0;
    border-bottom: 1px solid #e3e8ea;
}

.pb-article-nom,
.pb-activite {
    font-weight: 600;
}

.pb-article-prix {
    margin-left: auto;
    white-space: nowrap;
}

.pb-article-validite,
.pb-article-description,
.pb-commentaire {
    flex-basis: 100%;
    color: var(--pb-attenue);
    font-size: 0.9em;
}

.pb-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em 1.5em;
    align-items: flex-end;
    margin-bottom: 1em;
}

.pb-activites {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    margin: 0;
    border: 1px solid #e3e8ea;
}

.pb-navigation {
    display: flex;
    justify-content: space-between;
    margin: 1em 0;
}

.pb-suivant {
    margin-left: auto;
}

.pb-jour-titre {
    margin: 1.25em 0 0.25em;
}

/* « Mardi 27 octobre » : majuscule au jour seulement, pas au mois. */
.pb-jour-titre::first-letter {
    text-transform: uppercase;
}

.pb-heure {
    min-width: 7.5em;
    font-variant-numeric: tabular-nums;
}

.pb-pastille {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.4em;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.pb-places {
    margin-left: auto;
}

.pb-statut-full .pb-places,
.pb-statut-on_site_only .pb-places {
    color: var(--pb-attenue);
    font-weight: normal;
}

.pb-bouton {
    display: inline-block;
    padding: 0.6em 1.2em;
    background: var(--pb-accent);
    color: var(--pb-accent-texte);
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}

.pb-bouton:hover,
.pb-bouton:focus-visible {
    background: var(--pb-accent-fonce);
    color: var(--pb-accent-texte);
}

.pb-bouton:focus-visible,
.pb-filtres :focus-visible {
    outline: 3px solid #e06c00;
    outline-offset: 2px;
}

/* Page Boutique [piscine_boutique] */

.pb-boutique {
    --pb-accent: #0a7c80;
    --pb-accent-fonce: #065a5e;
    --pb-bordure-champ: #768589;
    --pb-accent-texte: #ffffff;
    --pb-attenue: #5a6b70;
    --pb-erreur: #b3261e;
}

.pb-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 1.5em;
    margin-bottom: 1.5em;
    border-bottom: 2px solid var(--pb-accent);
}

.pb-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-menu a {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

.pb-menu a[aria-current="page"] {
    background: var(--pb-accent);
    color: var(--pb-accent-texte);
}

/* Bandeau du client connecté, au-dessus du menu */
.pb-bandeau {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.25em 1em;
    margin: 0 0 0.5em;
}

.pb-connecte {
    margin: 0;
}

.pb-deconnexion {
    margin: 0;
}

.pb-lien {
    min-height: 24px;
    padding: 0.25em 0;
    background: none;
    border: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.pb-message {
    padding: 0.75em 1em;
    border-radius: 4px;
    border-left: 4px solid var(--pb-accent);
    background: #eef7f7;
}

.pb-message-erreur {
    border-left-color: var(--pb-erreur);
    background: #fbeeed;
}

/* Liens du récapitulatif des erreurs : l'accent n'atteint que 4,4:1 sur ce fond, sa teinte foncée 7:1. */
.pb-message-erreur a {
    color: var(--pb-accent-fonce);
}

.pb-formulaire {
    max-width: 32em;
    margin-bottom: 2em;
}

.pb-formulaire .pb-champ {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    margin: 0 0 1em;
}

.pb-formulaire .pb-case {
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
}

.pb-formulaire input:not([type="checkbox"]):not([type="radio"]),
.pb-formulaire select {
    padding: 0.5em;
    border: 1px solid var(--pb-bordure-champ);
    border-radius: 4px;
    font: inherit;
}

.pb-champ-erreur input,
.pb-champ-erreur select {
    border-color: var(--pb-erreur);
}

.pb-erreur {
    color: var(--pb-erreur);
    font-size: 0.9em;
}

.pb-obligatoire {
    color: var(--pb-erreur);
}

.pb-aide,
.pb-numero {
    color: var(--pb-attenue);
    font-size: 0.9em;
}

.pb-comptes {
    margin: 0 0 1em;
    border: 1px solid #e3e8ea;
}

/* Mes commandes */
.pb-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em;
}

.pb-table th,
.pb-table td {
    padding: 0.4em 0.6em;
    border-bottom: 1px solid #e3e8ea;
    text-align: left;
    vertical-align: top;
}

.pb-table thead th {
    border-bottom-width: 2px;
}

td.pb-actions a {
    white-space: nowrap;
    margin-right: 0.8em;
}

.pb-compte-rendu,
.pb-commande-resume {
    color: var(--pb-attenue);
}

.pb-lignes {
    margin: 0 0 1em;
    padding-left: 1.2em;
}

.pb-lignes li {
    margin: 0 0 0.6em;
}

/* Le thème peut ne pas fournir cette classe de WordPress : texte lu par les lecteurs d'écran seulement. */
.pb-boutique .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sur un écran étroit, le tableau défile plutôt que de perdre sa structure (lue par les lecteurs d'écran). Position
 * relative : les textes réservés aux lecteurs d'écran, positionnés en absolu, restent dans la zone qui défile au lieu
 * d'élargir la page (RGAA 10.11). */
.pb-defilement {
    position: relative;
    overflow-x: auto;
}

/* Groupes du catalogue dépliables : le titre coloré sert de bouton. */
details.pb-groupe > summary.pb-groupe-titre {
    cursor: pointer;
    list-style-position: inside;
}

details.pb-groupe > summary.pb-groupe-titre h3 {
    display: inline;
    margin: 0;
    font-size: 1.1em;
    color: inherit;
}

details.pb-groupe > summary.pb-groupe-titre:focus-visible {
    outline: 2px solid var(--pb-accent);
    outline-offset: 2px;
}

details.pb-groupe:not([open]) > summary.pb-groupe-titre {
    margin-bottom: 0;
}

/* Ajout au panier depuis le catalogue */
.pb-ajout {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5em;
    margin: 0.25em 0 0;
}

.pb-quantite {
    width: 4.5em;
}

/* Panier */
.pb-ligne-detail {
    display: block;
    color: var(--pb-attenue);
    font-size: 0.9em;
    font-weight: normal;
}

.pb-quantites {
    white-space: nowrap;
}

.pb-ligne-action {
    display: inline;
    margin: 0;
}

/* Cibles de 36 px au moins (24 px exigés par le critère 2.5.8 des WCAG 2.2) : boutons − et + du panier. */
.pb-bouton-quantite {
    min-width: 2.25em;
    min-height: 2.25em;
    padding: 0.1em 0.5em;
    line-height: 1;
}

.pb-quantite-panier {
    display: inline-block;
    min-width: 1.5em;
    text-align: center;
}

.pb-total {
    font-weight: 600;
}

.pb-compteur {
    font-weight: 600;
}

/* Sous-onglets : piscines (Acheter, Réserver) et rubriques de « Mon compte » */
.pb-piscines ul,
.pb-sous-onglets ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
    border-bottom: 2px solid var(--pb-accent);
}

.pb-piscines a,
.pb-sous-onglets a {
    display: block;
    padding: 0.5em 1em;
    border: 1px solid #e3e8ea;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    text-decoration: none;
}

.pb-piscines a[aria-current="true"],
.pb-sous-onglets a[aria-current="true"] {
    background: var(--pb-accent);
    border-color: var(--pb-accent);
    color: var(--pb-accent-texte);
    font-weight: 600;
}

/* Pleine largeur (classe alignfull du thème) avec une petite marge */
.pb-boutique {
    box-sizing: border-box;
    padding-inline: clamp(0.75rem, 2.5vw, 2rem);
}

/* Navigation sans rechargement (navigation.js) : place gardée pour la boutique pendant le chargement de la coquille,
 * écran atténué quand la réponse tarde, annonces lues par les lecteurs d'écran seulement. */
.pb-boutique[data-pb-coquille] {
    min-height: 60vh;
}

.pb-boutique.pb-chargement > :not(.pb-coquille-chargement) {
    opacity: 0.55;
    transition: opacity 0.2s;
}

.pb-boutique.pb-chargement {
    cursor: progress;
}

.pb-annonce {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pb-boutique.pb-chargement > * {
        transition: none;
    }
}

/* Planning : « Afficher X jours » en haut à gauche, pagination à droite */
.pb-planning-barre {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75em 1.5em;
    margin: 0 0 1em;
}

.pb-par-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
}

.pb-par-page select {
    min-height: 2.5em;
}

/* Filtres du planning appliqués à chaque choix par navigation.js (classe pb-filtres-auto du bloc) : plus de bouton
 * « Appliquer ». Sans le script, il reste. */
.pb-filtres-auto .pb-par-page button[type="submit"] {
    display: none;
}

.pb-planning-titre {
    margin: 0 0 0.5em;
    font-size: 1.2em;
}

.pb-pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-pagination a {
    display: inline-block;
    min-width: 2.5em;
    padding: 0.4em 0.6em;
    border: 1px solid #e3e8ea;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
}

.pb-pagination a[aria-current="page"] {
    background: var(--pb-accent);
    border-color: var(--pb-accent);
    color: var(--pb-accent-texte);
    font-weight: 600;
}

.pb-pagination a:focus-visible {
    outline: 2px solid var(--pb-accent);
    outline-offset: 2px;
}

.pb-planning > .pb-pagination {
    margin: 1em 0 0;
}

.pb-reservations h3 {
    margin: 1.5em 0 0.5em;
}

.pb-reservations caption {
    text-align: left;
    padding: 0 0 0.25em;
}

/* Mes abonnements : une fiche par carte, recharge dépliable */
.pb-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 1em;
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

.pb-carte {
    padding: 0.75em 1em;
    border: 1px solid #e3e8ea;
    border-top: 4px solid var(--pb-accent);
    border-radius: 4px;
}

.pb-carte h3 {
    margin: 0 0 0.5em;
    font-size: 1.1em;
}

.pb-carte p {
    margin: 0.25em 0;
}

.pb-carte-badge,
.pb-carte-validite {
    color: var(--pb-attenue);
}

.pb-carte-solde {
    font-weight: 600;
}

.pb-carte > .pb-ajout {
    justify-content: flex-start;
    margin-top: 0.75em;
}

.pb-recharge {
    margin-top: 0.75em;
}

.pb-recharge > summary {
    display: inline-block;
    cursor: pointer;
    padding: 0.4em 1em;
    border-radius: 4px;
    background: var(--pb-accent);
    color: var(--pb-accent-texte);
    font-weight: 600;
}

.pb-recharge > summary:focus-visible {
    outline: 2px solid var(--pb-accent);
    outline-offset: 2px;
}

.pb-recharges {
    margin: 0.5em 0 0;
    padding: 0;
    list-style: none;
}

.pb-recharges > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25em 0.75em;
    padding: 0.5em 0;
    border-top: 1px solid #e3e8ea;
}

.pb-recharge-article {
    font-weight: 600;
}

.pb-recharges .pb-validite {
    color: var(--pb-attenue);
    font-size: 0.9em;
}

/* Les offres promotionnelles, en rouge dans l'original */
.pb-promo .pb-recharge-article {
    color: var(--pb-erreur);
}

/* QR code du badge (assets/abonnements.js) : fond blanc et marge, pour rester lisible par les lecteurs */
.pb-qrcode {
    margin-top: 0.75em;
}

.pb-qrcode > summary {
    display: inline-block;
    cursor: pointer;
    padding: 0.4em 1em;
    border: 2px solid var(--pb-accent);
    border-radius: 4px;
    font-weight: 600;
}

.pb-qrcode > summary:focus-visible {
    outline: 2px solid var(--pb-accent);
    outline-offset: 2px;
}

.pb-qrcode-contenu {
    margin-top: 0.5em;
}

.pb-qrcode-image img {
    display: block;
    width: min(100%, 232px);
    height: auto;
    background: #ffffff;
    image-rendering: pixelated;
}

.pb-qrcode-legende {
    margin: 0.25em 0 0.5em;
    color: var(--pb-attenue);
}

/* « Imprimer » : seul le QR code choisi et sa légende sortent sur papier */
@media print {
    html.pb-impression-qrcode body * {
        visibility: hidden;
    }

    html.pb-impression-qrcode .pb-qrcode-imprime .pb-qrcode-contenu,
    html.pb-impression-qrcode .pb-qrcode-imprime .pb-qrcode-contenu * {
        visibility: visible;
    }

    html.pb-impression-qrcode .pb-qrcode-imprime .pb-qrcode-contenu {
        position: absolute;
        top: 0;
        left: 0;
    }

    html.pb-impression-qrcode .pb-qrcode-imprimer {
        display: none;
    }

    html.pb-impression-qrcode .pb-qrcode-image img {
        width: 60mm;
    }
}

/* Réservations : fiche d'un créneau, choix de la carte, choix de la séance d'un article */
.pb-retour {
    margin: 0 0 0.5em;
}

.pb-creneau-quand {
    font-weight: 600;
}

.pb-creneau-infos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25em 1em;
    margin: 0 0 1em;
}

.pb-creneau-infos dt {
    font-weight: 600;
}

.pb-creneau-infos dd {
    margin: 0;
}

.pb-remarques {
    margin: 0 0 1em;
    padding: 0.5em 1em 0.5em 2em;
    border-left: 4px solid var(--pb-erreur);
    background: #fdf3f2;
}

.pb-reservation-carte fieldset,
.pb-reglement fieldset,
.pb-choix fieldset {
    margin: 0 0 1em;
    padding: 0.5em 1em;
    border: 1px solid #e3e8ea;
}

.pb-reservation-carte .pb-case,
.pb-reglement .pb-case,
.pb-choix .pb-case {
    flex-wrap: wrap;
}

.pb-reservation-carte .pb-aide,
.pb-reglement .pb-aide,
.pb-choix .pb-aide {
    flex-basis: 100%;
    padding-left: 1.75em;
}

.pb-refus {
    color: var(--pb-erreur);
}

.pb-bouton-secondaire {
    background: transparent;
    color: var(--pb-accent);
    box-shadow: inset 0 0 0 2px var(--pb-accent);
}

.pb-bouton-secondaire:hover,
.pb-bouton-secondaire:focus-visible {
    background: var(--pb-accent);
    color: var(--pb-accent-texte);
}

.pb-lien-creneau {
    margin-left: auto;
    font-weight: 600;
}

.pb-creneau .pb-choix-creneau {
    flex-basis: auto;
    margin: 0 0 0 auto;
}

.pb-ignorer {
    justify-content: flex-start;
    margin: 0 0 1em;
}

/* Page de confirmation d'une réservation */
.pb-confirmation-reservation {
    padding: 1em 1.25em;
    border-left: 4px solid var(--pb-accent);
    background: #eef7f7;
}

.pb-confirmation-reservation h2 {
    margin-top: 0;
    color: var(--pb-accent);
}

.pb-suite {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1.5em;
    margin: 1em 0 0;
    padding: 0;
    list-style: none;
}

/* Choix « recharger ma carte » ou « nouvelle carte », présenté comme une boîte de dialogue */
.pb-choix-carte .pb-choix {
    max-width: 40em;
    padding: 1em 1.25em;
    border: 1px solid #e3e8ea;
    border-top: 4px solid var(--pb-accent);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}

.pb-choix legend {
    font-weight: 600;
}

/* Tableaux adaptables (View/Table) : sur un écran étroit, une fiche par ligne, chaque valeur précédée de son en-tête.
 * Les en-têtes de colonne restent dans la page pour les lecteurs d'écran, hors de la vue. */
.pb-libelle {
    display: none;
}

@media (max-width: 40em) {
    .pb-table-adaptable,
    .pb-table-adaptable :is(thead, tbody, tfoot, tr, th, td) {
        display: block;
        width: 100%;
    }

    .pb-table-adaptable thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .pb-table-adaptable tr {
        box-sizing: border-box;
        margin: 0 0 0.75em;
        padding: 0.6em 0.75em;
        border: 1px solid #e3e8ea;
        border-radius: 4px;
    }

    .pb-table-adaptable :is(th, td) {
        box-sizing: border-box;
        padding: 0.2em 0;
        border: 0;
    }

    .pb-table-adaptable td:empty {
        display: none;
    }

    .pb-table-adaptable caption {
        display: block;
        width: 100%;
    }

    .pb-table-adaptable tfoot tr {
        border: 2px solid var(--pb-accent);
    }

    .pb-libelle {
        display: inline;
        color: var(--pb-attenue);
    }
}

/* Filtre des activités du planning, au-dessus de « Afficher X jours » */
.pb-par-page .pb-activites {
    flex-basis: 100%;
    margin: 0 0 0.5em;
    padding: 0.5em 1em;
}

.pb-activites .pb-case {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-height: 24px;
}

.pb-activites .pb-aide {
    flex-basis: 100%;
    margin: 0.25em 0 0;
}

/* Nombre d'articles d'un groupe du catalogue, à côté de son nom */
.pb-groupe-nombre {
    font-size: 0.8em;
    font-weight: normal;
}

/* Récapitulatif des erreurs d'un formulaire refusé : chaque lien mène au champ à corriger */
.pb-resume-erreurs p {
    margin: 0 0 0.25em;
}

.pb-resume-erreurs ul {
    margin: 0;
    padding-left: 1.2em;
}

.pb-resume-erreurs:focus {
    outline: 3px solid #e06c00;
    outline-offset: 2px;
}

/* Cases à cocher et boutons radio un peu plus grands que ceux du navigateur : plus faciles à viser au doigt. */
.pb-boutique :is(input[type="checkbox"], input[type="radio"]),
.pb-planning :is(input[type="checkbox"], input[type="radio"]) {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}