/* =====================================================
   programme.css — Styles du programme WAM : cours collectifs, stages, events
   Chargé sur is_singular('cours'), is_singular('stages'), is_singular('evenements'),
   page-cours-collectifs.php, page-stages-tous.php, page-events-tous.php,
   page-prof-wam.php, page-planning-cours.php
   ===================================================== */

/* =====================================================
   PAGE COURS COLLECTIFS — Layout
   ===================================================== */

/* =====================================================
   LAYOUT COURS & STAGES
   ===================================================== */

/* Inversion du Hero sur mobile pour les STAGES uniquement */
@media (max-width: 1024px) {
    .single-stages .page-hero {
        flex-direction: column-reverse;
    }

    .single-stages .page-hero__image {
        margin-top: 0;
    }
}

.page-cours {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    /* on laisse les wam-container prendre la largeur max possible */
    gap: var(--wam-spacing-xl);
    padding-bottom: var(--wam-spacing-4xl);
}

/* Breadcrumb → voir .wam-breadcrumb dans components.css */

/* Coloration JAUNE ACCENT pour les titres H1 en page single uniquement (cours/stages) */
.single-cours .page-hero__title,
.single-stages .page-hero__title {
    color: var(--wp--preset--color--accent-yellow) !important;
}

/* Hero 2 colonnes — max-width / margin / padding gérés par .page-layout__inner > *:not(.wam-separator) */
.page-cours__hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wam-spacing-3xl);
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .page-cours__hero {
        grid-template-columns: 1fr 1fr;
        gap: var(--wam-spacing-9xl);
        /* 96px */
    }
}

.page-cours__hero--no-media {
    grid-template-columns: 1fr !important;
}

.page-cours__hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-xl);
}

.page-cours__hero-head {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-sm);
}

.page-cours__hero-desc {
    color: var(--wam-color-subtext);
    margin: 0;
}

.page-cours__address {
    display: flex;
    align-items: center;
    gap: var(--wam-spacing-md);
    flex-wrap: wrap;
}


@media (min-width: 1024px) {

    .page-template-page-cours-collectifs .page-cours__address,
    .page-template-page-reinscription .page-cours__address {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-template-page-cours-collectifs .page-cours__address .page-cours__address-icon,
    .page-template-page-reinscription .page-cours__address .page-cours__address-icon {
        display: none;
    }
}

.page-cours__address-icon {
    flex-shrink: 0;
    width: 24px;
    height: auto;
}

.page-cours__address-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.page-cours__address-name {
    color: var(--wam-color-text);
}

.page-cours__address-street {
    color: var(--wam-color-subtext);
}

.page-cours__planning-btn {
    flex-shrink: 0;
    width: fit-content !important;
}

/* Hero media */
.page-cours__hero-media {
    display: none;
    /* masqué sur mobile */
}

@media (min-width: 1024px) {
    .page-cours__hero-media {
        display: block;
        position: relative;
        border-radius: var(--wam-radius-3xl);
        overflow: hidden;
        align-self: stretch;
    }
}

.page-cours__hero-img-wrap {
    position: absolute;
    inset: 0;
}

.page-cours__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-cours__hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: var(--wam-radius-3xl);
    border: 1px solid var(--wam-color-glass-white);
}

/* ============================================================
   SECTION HISTORIQUE DES STAGES ("Ces stages ont déjà eu lieu...")
   ============================================================ */

.page-stages__history {
    /* Le composant separator insère déjà un marge globale. On annule l'ancien margin-top. */
    margin-top: 0;
    padding-top: var(--wam-spacing-xl);
}

.page-stages__history-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wam-spacing-md);
    margin-top: var(--wam-spacing-xl);
}

@media (min-width: 640px) {
    .page-stages__history-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .page-stages__history-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Carte Compacte Historique */
.card-stage-history {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-sm);
    padding: var(--wam-spacing-sm) var(--wam-spacing-md) 0;
    background: var(--wam-color-glass-white);
    border-radius: var(--wam-radius-lg);
    border: 1px solid transparent;
    transition: all 0.2s ease;
    height: 100%;
}

.card-stage-history--enfant {
    background: var(--wam-color-glass-green);
}

.card-stage-history:hover,
.card-stage-history:focus-within {
    border-color: var(--wam-color-yellow);
    transform: translateY(-2px);
}

.card-stage-history--enfant:hover,
.card-stage-history--enfant:focus-within {
    border-color: var(--wam-color-green);
}

/* Content */
.card-stage-history__content {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-3xs);
}

.card-stage-history__title {
    margin: 0;
    line-height: 1.2;
}

.card-stage-history__subtitle {
    margin: 0;
}

.page-cours__hero-img-wrap--svg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--background-600);
}

.page-cours__hero-svg {
    width: 60%;
    height: auto;
    opacity: 0.6;
}

/* Filtre wrapper */
.page-cours__filter-wrap {
    position: relative;
    z-index: 20;
}

/* Prose contenu */
.page-cours__prose {
    margin-top: var(--wam-spacing-4xl);
    padding-top: var(--wam-spacing-4xl);
    border-top: 1px solid var(--wp--preset--color--background-500);
}

.page-cours__empty {
    color: var(--wam-color-disabled);
    text-align: center;
    padding: var(--wam-spacing-4xl) 0;
}

/* =====================================================
   FILTRE COURS — Barre chips + recherche
   ===================================================== */

.cours-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wam-spacing-lg);
    padding: var(--wam-spacing-lg) var(--wam-spacing-2xl);
    border-radius: var(--wam-radius-xl);
    background: linear-gradient(to right,
            var(--wp--preset--color--background-600),
            var(--wp--preset--color--background-800));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.cours-filter__chips {
    display: flex;
    align-items: center;
    gap: var(--wam-spacing-2xs);
    flex-wrap: wrap;
    flex: 1;
}

.cours-filter__label {
    color: var(--wam-color-disabled);
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .cours-filter {
        padding: var(--wam-spacing-md) var(--wam-spacing-lg) var(--wam-spacing-2xs);
        margin-top: calc(-1 * var(--wam-spacing-lg));
        gap: var(--wam-spacing-md);
    }
}

/* Chip */
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* permet au ::after d'occuper height: 0 sans déborder */
    padding: var(--wam-spacing-2xs) var(--wam-spacing-xs);
    border: 1px solid var(--wam-color-subtext);
    border-radius: var(--wam-radius-lg);
    background: transparent;
    font-family: var(--wam-font-body);
    font-weight: 400;
    color: var(--wam-color-subtext);
    cursor: pointer;
    transition: border-color var(--wam-transition), color var(--wam-transition);
    white-space: nowrap;
}

/* Réserve l'espace du texte en bold — évite le layout shift au passage 400→700 */
.chip::after {
    content: attr(data-label);
    font-weight: bold;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.chip:hover {
    border-color: var(--wam-color-text);
    color: var(--wam-color-text);
}

.chip--active {
    border-color: var(--wam-color-text);
    color: var(--wam-color-text);
    font-weight: bold;
}

/* Champ recherche — flex row (icône inline, comme Figma) */

.cours-search-wrap {
    position: relative;
    display: block;
    min-width: 264px;
    box-sizing: border-box;
}

/* Input — sans bordure propre, hérite du wrapper */
.cours-search {
    width: 100%;
    min-width: 0;
    background: var(--wam-color-input-bg);
    border: 2px solid var(--wp--preset--color--background-500);
    border-radius: var(--wam-radius-xs);
    outline: none;
    font-family: var(--wam-font-body);
    color: var(--wam-color-text);
    padding: var(--wam-spacing-xs) 72px var(--wam-spacing-xs) var(--wam-spacing-sm);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--wam-transition);
}

.cours-search:focus {
    border-color: var(--wam-color-green);
}

.cours-search::placeholder {
    color: var(--wam-color-disabled);
}

/* Bouton effacer — masqué par défaut, affiché via JS (.is-visible) */
.cours-search-clear {
    display: none;
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    color: var(--wam-color-disabled);
    font-size: 1.75rem;
    line-height: 1;
    transition: color var(--wam-transition);
}

.cours-search-clear.is-visible {
    display: block;
}

.cours-search-clear:hover {
    color: var(--wam-color-text);
}

/* Icône search — inline à droite du texte */
.cours-filter__search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 24px;
    height: 24px;
    pointer-events: none;
    opacity: 1;
    color: var(--wam-color-subtext);
}

/* =====================================================
   FILTRAGE — Animations CSS
   #cours-results.is-filtered est ajouté par filter.js après chaque filtre.
   Le fade-in ne se déclenche que pour les éléments nouvellement visibles
   (ceux qui viennent de perdre l'attribut [hidden]).
   ===================================================== */

@keyframes wamFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Masquage explicite — nécessaire car .card-cours { display: flex }
   écrase le display:none du user-agent sur [hidden]. */
.card-cours--hidden,
.cours-categorie--hidden {
    display: none !important;
}

#cours-results.is-filtered .card-cours:not(.card-cours--hidden) {
    animation: wamFadeIn 0.22s ease both;
}

#cours-results.is-filtered .cours-categorie:not(.cours-categorie--hidden) {
    animation: wamFadeIn 0.28s ease both;
}

/* =====================================================
   CATÉGORIE DE COURS — Section titre + grille
   ===================================================== */

.cours-categorie {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-2xl);
    width: 100%;
}

/* Espacement entre sections (56px) */
.page-cours .cours-categorie+.cours-categorie {
    margin-top: var(--wam-spacing-4xl);
}

.cours-categorie__header {
    display: flex;
    align-items: center;
    gap: var(--wam-spacing-sm);
}

.cours-categorie__header h2 {
    color: var(--wam-color-text);
    margin: 0;
}

.cours-categorie__icon {
    height: 72px;
    width: 72px;
    /* Forcer carré pour le masque */
    flex-shrink: 0;
    background-color: var(--wam-color-subtext);
}

/* Le titre utilise .is-style-title-cool-md (WAM Font 36px) */

.cours-categorie__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wam-spacing-lg);
    /* 40px */
}

/* =====================================================
   CARD COURS — Vignette horizontale
   Hover : gradient border animé via ::before (opacity 0→1)
   ===================================================== */

.card-cours {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    padding: var(--wam-spacing-2xs);
    gap: var(--wam-spacing-sm);
    background-image: linear-gradient(-90deg,
            var(--wp--preset--color--background-800) 0%,
            var(--wp--preset--color--background-600) 100%);
    background-clip: padding-box;
    border: 2px solid var(--wp--preset--color--background-600);
    border-radius: var(--wam-radius-xl);
    transition: background-color var(--wam-transition), background-image var(--wam-transition);
    text-decoration: none;
    min-width: 40%;
    max-width: calc(50% - var(--wam-spacing-xl) / 2);
}

/* Gradient border — caché au repos.
   Technique donut identique à .btn-primary :
   padding = épaisseur de la bordure (2px), mask-composite exclut le content-box
   → seul l'anneau extérieur (= la bordure transparente) montre le gradient. */
.card-cours::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: var(--wam-gradient-brand);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: destination-out;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--wam-transition);
}

.card-cours:hover,
.card-cours:focus-within {
    background-image: none;
    background-color: var(--wp--preset--color--background-600);
}

.card-cours:hover::before,
.card-cours:focus-within::before {
    opacity: 1;
}

/* Lien titre → couvre toute la carte */
.card-cours__link {
    color: inherit;
    text-decoration: none;
}

.card-cours__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

/* Media — colonne gauche */
.card-cours__media {
    position: relative;
    width: 233px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: var(--wam-radius-lg);
    overflow: hidden;
}

.card-cours__img-wrapper {
    position: absolute;
    inset: 0;
    display: block;
}

.card-cours__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-cours__img-overlay {
    position: absolute;
    inset: 0;
    background: var(--wp--preset--color--background-800);
    mix-blend-mode: lighten;
}

/* Placeholder SVG */
.card-cours__img-wrapper--placeholder {
    background: var(--wp--preset--color--background-600);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.card-cours__placeholder-img {
    width: 80%;
    height: auto;
    opacity: 0.7;
    margin-bottom: 0;
}

/* Badge statut */
.card-cours__badge {
    position: absolute;
    top: var(--wam-spacing-sm);
    left: var(--wam-spacing-sm);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--wam-spacing-2xs);
    padding: var(--wam-spacing-2xs) var(--wam-spacing-xs);
    border-radius: var(--wam-radius-lg);
    font-family: var(--wam-font-body);
    font-size: var(--wam-font-size-sm);
    /* 16px */
    font-weight: bold;
    color: var(--wp--preset--color--background-800);
    line-height: 1.25;
}

.card-cours__badge--complet {
    background: var(--wam-color-orange);
}

.card-cours__badge--places {
    background: var(--wam-color-yellow);
}

/* Body — colonne droite */
.card-cours__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--wam-spacing-sm);
    padding: var(--wam-spacing-lg) var(--wam-spacing-sm);
    align-items: flex-end;
    min-width: 0;
    width: 100%;
}

.card-cours__header {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-2xs);
    width: 100%;
    align-self: flex-start;
}

/* Titre — Le style principal est géré par la classe is-style-title-norm-md */
.card-cours__title {
    margin: 0;
    color: var(--wam-color-text);
}

/* Footer — horaires + CTA */
.card-cours__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: var(--wam-spacing-sm);
    margin-top: auto;
}

.card-cours__schedule {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.card-cours__day {
    font-weight: 400;
}

.card-cours__actions {
    display: flex;
    gap: var(--wam-spacing-xs);
    align-items: center;
}

/* CTA bouton icône */
.card-cours__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--wam-spacing-sm);
    border: 1px solid var(--wam-color-subtext);
    border-radius: var(--wam-radius-md);
    color: var(--wam-color-subtext);
    transition: border-color var(--wam-transition), color var(--wam-transition), background-color var(--wam-transition);
    position: relative;
    z-index: 2;
    background: transparent;
    cursor: pointer;
}

/* Survol de la carte : met en avant l'action principale (voir) */
.card-cours:hover .card-cours__cta,
.card-cours:focus-within .card-cours__cta {
    border-color: var(--wam-color-yellow);
    color: var(--wam-color-yellow);
}

/* Si déjà ajouté : le vert prévaut sur le jaune du hover de carte 
   SAUF si le bouton est désactivé (déjà au panier), où il doit rester gris */
.card-cours:hover .card-cours__cta.is-added:not(.is-disabled),
.card-cours:focus-within .card-cours__cta.is-added:not(.is-disabled) {
    border-color: var(--wam-color-green);
    color: var(--wam-color-green);
}

/* Survol spécifique du bouton ajouter au panier : passage au vert accent */
.card-cours__cta--add:hover:not(.is-disabled) {
    border-color: var(--wam-color-green) !important;
    color: var(--wam-color-green) !important;
}

/* État 'Ajouté' : Border et icône vertes, fond transparent 
   On exclut les boutons désactivés pour garder le style neutre subtext */
.card-cours__cta.is-added:not(.is-disabled) {
    background-color: transparent;
    border-color: var(--wam-color-green);
    color: var(--wam-color-green);
}

.card-cours__cta--reinscription {
    padding: var(--wam-spacing-xs);
    /* Réduit de sm à xs */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* État désactivé (déjà au panier) — On s'aligne sur le style .btn-primary:disabled */
.card-cours__cta.is-disabled {
    background-color: var(--wam-color-card-bg);
    color: var(--wam-color-subtext);
    border-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

.card-cours__cta.is-disabled .btn-icon {
    background-color: var(--wam-color-subtext); /* Force la couleur de l'icône */
}

.card-cours__cta--reinscription .btn-icon {
    width: 28px;
    /* Plus grand que le défaut sm (20px) */
    height: 28px;
}

/* Bulle de quantité sur la carte */
.card-cours__cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 21px;
    /* Ajusté de 20px à 21px */
    height: 21px;
    background: var(--wam-color-yellow);
    color: var(--wp--preset--color--background-500);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 3;
    border: 1px solid var(--wp--preset--color--background-600);
    transition: opacity var(--wam-transition), transform var(--wam-transition);
}

.card-cours__cart-count.is-hidden {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

.card-cours__cta--disabled {
    opacity: 0.4;
}

/* Responsive mobile — stack vertical */
@media (max-width: 640px) {
    .card-cours {
        min-width: 100%;
        flex-direction: column;
    }

    .card-cours__media {
        width: 100%;
        height: 180px;
    }
}

/* =====================================================
   PAGE HERO — Structure dans layout.css
   Styles spécifiques cours/stages ci-dessous
   ===================================================== */

/* Placeholder quand pas de photo — stage sans image */
.stage-placeholder-img {
    position: absolute;
    inset: 0;
    background: var(--wp--preset--color--background-600);
}

/* =====================================================
   BADGE COURS COMPLET — positionné en absolu sur la photo
   ===================================================== */
.cours-complet {
    position: absolute;
    top: 16px;
    /* top-4 */
    left: 16px;
    /* left-4 */
    background: var(--wam-color-orange);
    display: flex;
    gap: var(--wam-spacing-sm);
    /* 16px = gap-4 */
    align-items: center;
    padding: var(--wam-spacing-sm) var(--wam-spacing-lg);
    /* py-4 px-6 */
    border-radius: var(--wam-radius-3xl);
    max-width: calc(100% - 32px);
    z-index: 10;
}

.cours-complet svg {
    flex-shrink: 0;
    color: var(--wp--preset--color--background-800);
    width: 40px;
    height: 40px;
}

.cours-complet__body {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-2xs);
    align-items: flex-start;
}

.cours-complet__title {
    font-weight: bold;
    line-height: 1.1;
    font-size: var(--wam-font-size-h2);
    color: var(--wp--preset--color--background-800);
    margin: 0;
}

.cours-complet__text {
    font-size: var(--wam-font-size-sm);
    color: var(--wp--preset--color--background-800);
    margin: 0;
}

.cours-complet__link {
    background: var(--wam-color-page-bg);
    display: flex;
    gap: var(--wam-spacing-2xs);
    align-items: center;
    padding: var(--wam-spacing-2xs) var(--wam-spacing-sm);
    border-radius: var(--wam-radius-md);
    text-decoration: none;
}

.cours-complet__link span {
    font-size: var(--wam-font-size-sm);
    color: var(--wam-color-text);
}

/* Flèche SVG du lien (rotate -90deg = pointer vers le bas → haut) */
.cours-complet__link svg {
    color: var(--wam-color-text);
    width: 12px;
    height: 12px;
    transform: rotate(-90deg);
}

/* =====================================================
   PAGE HERO — Styles spécifiques cours/stages
   (structure commune dans layout.css)
   ===================================================== */

/* Variante typographique enfant — WAM Font 68px */
.page-hero__title--enfant {
    font-family: var(--wam-font-graphical-2);
    font-size: 68px;
    line-height: 1;
    font-weight: 400;
}

@media (max-width: 768px) {
    .page-hero__title--enfant {
        font-size: 54px !important;
    }
}


/* =====================================================
   INFO CARD — Encart horaires / lieu / tarif
   Figma : gradient bg600→bg800, rounded-3xl
   ===================================================== */
.cours-info-card {
    background: linear-gradient(to right, var(--wam-color-card-bg), var(--wam-color-page-bg));
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-sm);
    /* 16px = gap-4 */
    align-items: flex-start;
    padding: var(--wam-spacing-lg) var(--wam-spacing-2xl);
    /* py-6 px-10 */
    border-radius: var(--wam-radius-3xl);
    width: 100%;
    box-sizing: border-box;
}

.cours-info-card__row {
    display: flex;
    gap: var(--wam-spacing-md);
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

/* Icônes SVG dans les rangées */
.cours-info-card__row svg {
    flex-shrink: 0;
    color: var(--wam-color-subtext);
    width: 24px;
    height: 24px;
}

.cours-info-card__cell {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-3xs);
    align-items: flex-start;
    flex: 1;
}

.cours-info-card__day {
    color: var(--wam-color-text);
    margin: 0;
    width: 100%;
}

/* Spécificité doublée (0,2,0) pour passer au-dessus de tout conflit */
.cours-info-card__day.cours-info-card__day--enfant {
    color: var(--wam-color-green);
}

.cours-info-card__time {
    color: var(--wam-color-text);
    margin: 0;
    width: 100%;
}

.cours-info-card__lieu {
    color: var(--wam-color-text);
    margin: 0;
    width: 100%;
}

.cours-info-card__adresse {
    color: var(--wam-color-subtext);
    margin: 0;
    width: 100%;
}

.cours-info-card__tarif,
.cours-info-card__info {
    color: var(--wam-color-text);
    margin: 0;
    flex: 1;
}



/* Chips taxonomie — Styles déplacés vers components.css (.wam-chip) */
/* =====================================================
   DESCRIPTION — Texte principal du cours
   ===================================================== */
.cours-description {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-sm);
    /* 16px = gap-4 */
    width: 100%;
}

/* =====================================================
   CTAs — Inscription + essai
   ===================================================== */
.cours-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wam-spacing-sm);
    /* 16px = gap-4 */
    align-items: flex-start;
    width: 100%;
}

/* Bouton inscription actif (similaire à btn-primary) */
.btn-inscription svg {
    margin-left: 8px;
    width: 12px;
    height: 12px;
    transform: rotate(-90deg);
}

/* Bouton inscription désactivé — pointer-events:none bloque hover/focus sans surcharge d'états */
.btn-inscription--disabled {
    background: var(--wam-color-card-bg);
    pointer-events: none;
    padding: var(--wam-spacing-lg) var(--wam-spacing-xl);
}

.btn-inscription--disabled .btn-inscription__label {
    color: var(--wam-color-subtext);
}

/* Message de remplacement quand les inscriptions sont fermées */
.cours-inscriptions-fermees {
    color: var(--wam-color-subtext);
    font-style: italic;
    padding: var(--wam-spacing-sm) 0;
}

/* Bouton essai (similaire à btn-secondary) */
.btn-essai svg {
    margin-left: 8px;
    width: 12px;
    height: 12px;
    transform: rotate(-90deg);
}

/* =====================================================
   SECTIONS DESCRIPTION — Pédagogie, Tenue
   ===================================================== */
/* max-width / margin / padding gérés par .page-layout__inner > *:not(.wam-separator) */
.cours-sections {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-9xl);
    /* 96px = gap-24 */
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* Section individuelle : row (photo | texte) */
.cours-section {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-xl);
    align-items: flex-start;
    width: 100%;
}

@media (min-width: 1024px) {
    .cours-section {
        flex-direction: row;
        gap: 64px;
        align-items: center;
    }
}

.cours-section__col {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--wam-spacing-2xl);
    /* 40px = gap-10 */
    align-items: flex-start;
}

.cours-section__heading {
    display: flex;
    gap: var(--wam-spacing-sm);
    /* 16px = gap-4 */
    align-items: center;
    width: 100%;
}

.cours-section__heading svg {
    flex-shrink: 0;
}

/* Titres de section — styles gérés par .is-style-title-sign-lg */
.cours-section__title {
    flex: 1;
    margin: 0;
}

.cours-section__text {
    color: var(--wam-color-subtext);
    margin: 0;
    width: 100%;
}

/* Photo illustrative (pédagogie : 440×240) */
.cours-section__photo {
    position: relative;
    border-radius: var(--wam-radius-3xl);
    overflow: hidden;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 560 / 320;
    height: auto;
}

@media (min-width: 1024px) {
    .cours-section__photo {
        width: 560px;
        height: 320px;
    }
}

/* Variante tenue : plus large (640×248) */
.cours-section__photo--tenue {
    max-width: 640px;
    height: auto;
    width: 100%;
    aspect-ratio: 640 / 248;
    flex: 1;
}

.cours-section__photo-img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.cours-section__photo-overlay {
    position: absolute;
    inset: 0;
    background: var(--wam-color-page-bg);
    mix-blend-mode: lighten;
    pointer-events: none;
}

/* =====================================================
   DÉROULEMENT — Section "Comment se déroule un cours ?"
   (centré, flex-col — distinct des sections pédagogie/tenue)
   ===================================================== */
.cours-deroulement {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-xl);
    /* 32px = gap-8 */
    align-items: center;
    width: 100%;
}

.cours-deroulement__heading {
    display: flex;
    gap: var(--wam-spacing-sm);
    /* 16px = gap-4 */
    align-items: center;
    justify-content: center;
    padding-bottom: var(--wam-spacing-sm);
    /* pb-4 */
    width: 100%;
}

.cours-deroulement__heading svg {
    flex-shrink: 0;
}

/* Styles gérés par .is-style-title-sign-lg */
.cours-deroulement__title {
    flex: 1;
    margin: 0;
}

/* 3 étapes : row */
.cours-etapes {
    display: flex;
    gap: var(--wam-spacing-sm);
    /* 16px = gap-4 */
    align-items: stretch;
    width: 100%;
    min-height: 301px;
}

/* Étape base — exercices (card normale) */
.cours-etape {
    background: var(--wam-color-card-bg);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--wam-spacing-sm);
    /* 16px = gap-4 — exercices */
    align-items: center;
    justify-content: center;
    padding: var(--wam-spacing-2xl);
    /* 40px = py-10 px-10 */
    border-radius: var(--wam-radius-3xl);
    align-self: stretch;
}

/* Échauffement — pill gauche (border-radius asymétrique) */
.cours-etape--left {
    background: linear-gradient(to right, var(--wam-color-page-bg), var(--wam-color-card-bg));
    gap: var(--wam-spacing-lg);
    /* 24px = gap-6 */
    padding-top: var(--wam-spacing-2xl);
    padding-bottom: var(--wam-spacing-2xl);
    padding-left: 56px;
    /* pl-14 */
    padding-right: var(--wam-spacing-lg);
    /* pr-6 */
    border-radius: 200px var(--wam-radius-3xl) var(--wam-radius-3xl) 200px;
}

/* Chorégraphie — pill droite */
.cours-etape--right {
    background: linear-gradient(to left, var(--wam-color-page-bg), var(--wam-color-card-bg));
    gap: var(--wam-spacing-lg);
    /* 24px = gap-6 */
    padding-top: var(--wam-spacing-2xl);
    padding-bottom: var(--wam-spacing-2xl);
    padding-left: var(--wam-spacing-lg);
    /* pl-6 */
    padding-right: 56px;
    /* pr-14 */
    border-radius: var(--wam-radius-3xl) 200px 200px var(--wam-radius-3xl);
}

/* ============================================================
   RESPONSIVE COMPOSANTS COURS
   ============================================================ */
@media (max-width: 768px) {
    .cours-info-card {
        padding: var(--wam-spacing-lg);
    }

    .cours-etapes {
        flex-direction: column;
        min-height: auto;
    }

    .cours-etape {
        border-radius: var(--wam-radius-3xl);
        padding: var(--wam-spacing-xl);
        padding-left: var(--wam-spacing-xl);
        padding-right: var(--wam-spacing-xl);
    }

    .cours-etape--left {
        background: linear-gradient(to bottom, var(--wam-color-page-bg), var(--wam-color-card-bg));
        border-radius: 200px 200px var(--wam-radius-3xl) var(--wam-radius-3xl);
    }

    .cours-etape--right {
        padding-top: var(--wam-spacing-xs);
        background: linear-gradient(to top, var(--wam-color-page-bg), var(--wam-color-card-bg));
        border-radius: var(--wam-radius-3xl) var(--wam-radius-3xl) 200px 200px;
    }

    .cours-musiques {
        border-radius: var(--wam-radius-xl) !important;
        flex-direction: column;
    }

    .cours-section--tenue {
        flex-direction: column;
    }
}

/* Wrapper icône SVG + durée */
.cours-etape__icon-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-2xs);
    align-items: center;
}

.cours-etape__icon-wrap svg {
    color: var(--wam-color-text);
}

/* Titre étape — WAM Font 36px */
.cours-etape__title {
    color: var(--wam-color-yellow);
    text-align: center;
    margin: 0;
    width: 100%;
}

.cours-etape__desc {
    color: var(--wam-color-subtext);
    text-align: center;
    margin: 0;
    width: 100%;
}

/* =====================================================
   STYLES MUSICAUX — Pill pleine largeur
   ===================================================== */
.cours-musiques {
    background: var(--wam-color-card-bg);
    display: flex;
    gap: var(--wam-spacing-xl);
    /* 32px = gap-8 */
    align-items: center;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--wam-spacing-lg) 56px;
    /* py-6 px-14 */
    border-radius: var(--wam-radius-pill);
    width: 100%;
    box-sizing: border-box;
}

.cours-musiques svg {
    flex-shrink: 0;
    color: var(--wam-color-subtext);
    width: 40px;
    height: 45px;
}

.cours-musiques__text {
    flex: 1;
    color: var(--wam-color-text);
    margin: 0;
    line-height: 1.25;
}

.cours-musiques__text strong {
    font-weight: bold;
    color: var(--wam-color-subtext);
}

/* =====================================================
   VIDÉOS — Section embeds oEmbed
   ===================================================== */
.cours-videos {
    width: 100%;
    max-width: var(--wam-max-screen);
    padding: 0 var(--wam-page-mx);
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-lg);
    /* 24px = gap-6 */
    box-sizing: border-box;
    margin: 0 auto;
}

/* Conteneur vidéo — ratio 16:9 forcé */
.cours-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--wam-radius-3xl);
    overflow: hidden;
}



/* =====================================================
   STAGE — Composants spécifiques (single-stages.php)
   Structure générale : réutilise cours-hero, cours-info-card, cours-complet
   ===================================================== */

/* Badge type (STAGE / ATELIER / WORKSHOP) — Outline pill, couleur via .color-* PHP */
.stage-badge-type {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--wam-spacing-sm);
    border-radius: var(--wam-radius-pill);
    border: 1px solid currentColor;
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--wam-spacing-md);
    /* font-size et couleur portés par .text-xs + .color-* appliqués en PHP */
}

/* Variante align-top pour les rangées info-card avec contenu de hauteur variable (ex: date square) */
.cours-info-card__row--top {
    align-items: center;
}

/* Date display : date (col) + séparateur 1px + heure */
.stage-date-display {
    display: flex;
    flex-direction: row;
    gap: var(--wam-spacing-lg);
    align-items: stretch;
}

.stage-date-square {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    padding-bottom: var(--wam-spacing-sm);
}


/* typographie (font-size, couleur) portée par les classes tokens en PHP */
.date-name {
    text-transform: capitalize;
    margin-bottom: var(--wam-spacing-3xs);
}

.stage-date-square--enfant .date-name {
    color: var(--wam-color-green);
    /* modificateur — surcharge .color-subtext */
}


.stage-date-square--enfant .date-number {
    color: var(--wam-color-green);
    /* modificateur — surcharge .color-yellow */
}

.date-month {
    font-weight: 600;
    /* fw-semi inexistant en tokens, doit rester ici */
    text-transform: capitalize;
}

/* .date-year — entièrement géré par .text-xs .color-disabled en PHP */

/* Séparateur 1px entre la date et l'horaire */
.stage-time-display {
    display: flex;
    border-left: 1px solid var(--wam-color-subtext);
    align-items: center;
    padding-left: var(--wam-spacing-lg);
}

/* Multi-dates Toggle Button — aligné avec les icônes (pas d'indentation cellule) */
.stage-dates-toggle-wrap {
    margin-top: calc(-1 * var(--wam-spacing-2xs));
}

.btn-toggle-dates {
    background: var(--wam-color-glass-white);
    border: none;
    padding: var(--wam-spacing-2xs) var(--wam-spacing-lg);
    /* 8px 24px */
    border-radius: var(--wam-radius-pill);
    color: var(--wam-color-text);
    font-family: var(--wam-font-body);
    font-size: var(--wam-font-size-xs);
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--wam-spacing-xs);
    transition: background var(--wam-transition);
}

.btn-toggle-dates .btn-label::before {
    content: "Plusieurs dates disponibles";
}

.btn-toggle-dates[aria-expanded="true"] .btn-label::before {
    content: "Fermer les dates";
}

.btn-toggle-dates[aria-expanded="true"] .btn-icon {
    --icon-url: url('../images/close.svg') !important;
    --icon-size: 14px;
    /* plus visible que le chevron (10px) — visuellement équivalent */
}

.btn-toggle-dates:hover {
    background: var(--wam-color-glass-white-hover);
}

/* Multi-dates Dropdown */
.stage-dates-dropdown {
    width: 100%;
    margin-top: var(--wam-spacing-xs);
    animation: wamFadeIn 0.35s ease both;
}

/* Conteneur des dates supplémentaires — fond teinté adulte (jaune) ou enfant (vert) */
.stage-dates-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wam-spacing-2xs);
    padding: var(--wam-spacing-2xs);
    border-radius: var(--wam-radius-lg);
    align-items: flex-start;
    align-content: flex-start;
    background: var(--wam-color-glass-white);
    /* adulte */
}

.stage-dates-grid--enfant {
    background: var(--wam-color-glass-green);
}

/* Card adulte : fond neutre, bordure jaune au hover — 3 par ligne */
.stage-mini-date-card {
    background: var(--wam-color-glass-white);
    border-radius: var(--wam-radius-lg);
    padding: var(--wam-spacing-sm);
    text-align: center;
    border: 1px solid transparent;
    transition: border-color var(--wam-transition);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 calc((100% - 2 * var(--wam-spacing-2xs)) / 3);
}

@media (max-width: 480px) {
    .stage-mini-date-card {
        flex: 0 0 100%;
    }
}

/* Variante enfant : fond glass-green, bordure verte au hover */
.stage-mini-date-card--enfant {
    background: var(--wam-color-glass-green);
}

.stage-mini-date-card:not(.is-complet):hover,
.stage-mini-date-card:not(.is-complet):focus {
    border-color: var(--wam-color-yellow);
}

.stage-mini-date-card--enfant:not(.is-complet):hover,
.stage-mini-date-card--enfant:not(.is-complet):focus {
    border-color: var(--wam-color-green);
}

/* .mini-date-num — taille et couleur portées par .title-norm-md + .color-yellow/.color-green en PHP */
.mini-date-num {
    line-height: 1.2;
}

.mini-date-month {
    font-weight: 600;
    /* fw-semi inexistant en tokens */
    text-transform: capitalize;
}

/* .mini-date-time — typographie et gras portés par .text-md .fw-bold .color-text en PHP */
.mini-date-time {
    margin-top: var(--wam-spacing-2xs);
}

/* État complet : fond transparent, lien actif mais sans hover/focus visuel */
.stage-mini-date-card.is-complet {
    background: transparent;
}

.stage-mini-date-card.is-complet:hover,
.stage-mini-date-card.is-complet:focus {
    border-color: transparent;
    outline: none;
}

/* Complet : numéro et mois en grisé (l'horaire est remplacé par le badge en PHP) */
.stage-mini-date-card.is-complet .mini-date-num,
.stage-mini-date-card.is-complet .mini-date-month {
    color: var(--wam-color-disabled) !important;
}

/* .mini-badge — taille et couleur portées par .text-md .color-orange en PHP */
.mini-badge {
    display: block;
    margin-top: var(--wam-spacing-2xs);
    font-weight: bold;
}

/* Layout Spécifique Section Description */
.stage-full-desc-section {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--wam-spacing-4xl) 0;
}

/* Responsive Stages — .stage-date-display est désormais en colonne, pas de règle spécifique nécessaire */

/* =====================================================
   PAGE STAGES — Layout listing "Tous les stages"
   ===================================================== */

.page-stages {
    width: 100%;
}

.page-stages__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wam-spacing-lg);
    align-items: stretch;
}

.page-stages__empty {
    color: var(--wam-color-disabled);
    text-align: center;
    padding: var(--wam-spacing-4xl) 0;
}

/* =====================================================
   CARD STAGE — Vignette verticale portrait
   Hover : élévation légère.
   ===================================================== */

.card-stage {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 3 * var(--wam-spacing-2xl)) / 4);
    /* 4 par ligne desktop */
    min-width: 0;
    max-width: none;
    background: linear-gradient(to bottom,
            var(--wp--preset--color--background-800) 0%,
            var(--wp--preset--color--background-600) 100%);
    border: 2px solid var(--wp--preset--color--background-600);
    border-radius: var(--wam-radius-xl);
    overflow: hidden;
    padding: var(--wam-spacing-2xs);
    gap: var(--wam-spacing-md);
    text-decoration: none;
    transition: box-shadow var(--wam-transition), transform var(--wam-transition), border-color var(--wam-transition);
}

/* Gradient border — donut technique (3px) */
.card-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: inherit;
    background: var(--wam-gradient-brand);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: destination-out;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--wam-transition);
    pointer-events: none;
}

.card-stage:hover,
.card-stage:focus-within {
    box-shadow: var(--wam-shadow-md);
    transform: translateY(-2px);
    border-color: transparent;
}

.card-stage:hover::before,
.card-stage:focus-within::before {
    opacity: 1;
}




/* Variante complet — atténué */
.card-stage--complet {
    opacity: 0.65;
}

.card-stage--complet:hover,
.card-stage--complet:focus-within {
    transform: none;
}

.card-stage--hidden {
    display: none !important;
}

/* Plus besoin de l'overlay manuel, on utilise stretched-link sur le CTA */
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
    border-radius: inherit;
}

/* ---- Media (portrait) ---- */

.card-stage__media {
    position: relative;
    width: 100%;
    aspect-ratio: 405 / 568;
    border-radius: var(--wam-radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--wp--preset--color--background-600);
}

.card-stage__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-stage__img-overlay {
    position: absolute;
    inset: 0;
    background: var(--wam-color-page-bg);
    mix-blend-mode: lighten;
    pointer-events: none;
}

.card-stage__img-placeholder {
    position: absolute;
    inset: 0;
    background: var(--wp--preset--color--background-600);
}

/* ---- Badge statut (complet) ---- */

.card-stage__badge {
    position: absolute;
    top: var(--wam-spacing-sm);
    left: var(--wam-spacing-sm);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--wam-spacing-2xs);
    padding: var(--wam-spacing-2xs) var(--wam-spacing-xs);
    border-radius: var(--wam-radius-lg);
    line-height: 1.25;
    /* La couleur et police sont gérées par text-sm et fw-bold en HTML */
    color: var(--wp--preset--color--background-800);
}

.card-stage__badge--complet {
    background: var(--wam-color-orange);
}

/* ---- Pill de date — glassmorphism bottom-left ---- */

.card-stage__date {
    position: absolute;
    bottom: var(--wam-spacing-sm);
    left: var(--wam-spacing-sm);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 90px;
    padding: var(--wam-spacing-sm) var(--wam-spacing-xl);
    border-radius: var(--wam-radius-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.card-stage__date::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: inherit;
    display: block;
    background: var(--wam-color-overlay-photo);
    opacity: 0.5;

}

/* Variantes BEM strictes pour les fonds teinté */
.card-stage--stage .card-stage__date {
    background: var(--wam-color-glass-yellow);
}

.card-stage--atelier .card-stage__date {
    background: var(--wam-color-accent-tertiary-bg);
}

.card-stage--workshop .card-stage__date {
    background: var(--wam-color-glass-pink);
}

.card-stage--enfant .card-stage__date {
    background: var(--wam-color-accent-tertiary-bg);
}

.card-stage__date-day {
    line-height: 1.25;
}

.card-stage__date-num {
    line-height: 1.1;
}

.card-stage__date-month {
    line-height: 1.25;
}

.card-stage__date-year {
    line-height: 1.25;
}

/* ---- Body ---- */

.card-stage__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 var(--wam-spacing-lg) var(--wam-spacing-lg);
    gap: var(--wam-spacing-2xs);
    min-width: 0;
    position: relative;
    z-index: 2;
}

/* Badge type (STAGE / ATELIER / WORKSHOP) — Style Outline */
.card-stage__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 4px var(--wam-spacing-sm);
    border-radius: var(--wam-radius-pill);
    border: 1px solid currentColor;
    background: transparent !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--wam-spacing-2xs);
    /* font-size porté par .text-xs en PHP */
}

.card-stage--stage .card-stage__type {
    color: var(--wam-color-yellow);
}

.card-stage--atelier .card-stage__type {
    color: var(--wam-color-green);
}

.card-stage--workshop .card-stage__type {
    color: var(--wam-color-pink);
}

.card-stage--enfant .card-stage__type {
    color: var(--wam-color-green);
}

/* Titre */
.card-stage__title {
    margin: 0 0 var(--wam-spacing-2xs) 0;
    word-break: break-word;
}

/* Sous-titre / Niveau */
.card-stage__subtitle {
    display: block;
    line-height: 1.25;
    margin: 0;
}

/* Horaires */
.card-stage__time {
    line-height: 1.25;
    margin: 0;
}

/* Footer CTA */
.card-stage__footer {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: var(--wam-spacing-sm);
}

.card-stage__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--wam-spacing-sm);
    border: 2px solid var(--wam-color-subtext);
    border-radius: var(--wam-radius-sm);
    /* 8px fixed version */
    color: var(--wam-color-subtext);
    transition: all var(--wam-transition);
}


/* État Hover par variante (BEM stricte) */
.card-stage--stage:hover .card-stage__cta,
.card-stage--stage:focus-within .card-stage__cta {
    border-color: var(--wam-color-yellow);
    color: var(--wam-color-yellow);
}

.card-stage--atelier:hover .card-stage__cta,
.card-stage--atelier:focus-within .card-stage__cta {
    border-color: var(--wam-color-green);
    color: var(--wam-color-green);
}

.card-stage--workshop:hover .card-stage__cta,
.card-stage--workshop:focus-within .card-stage__cta {
    border-color: var(--wam-color-pink);
    color: var(--wam-color-pink);
}

.card-stage--enfant:hover .card-stage__cta,
.card-stage--enfant:focus-within .card-stage__cta {
    border-color: var(--wam-color-green);
    color: var(--wam-color-green);
}

.card-stage__cta--disabled {
    opacity: 0.4;
}

/* Masquage par filtre JS */
.card-stage--hidden {
    display: none !important;
}

/* Responsive — 2 par ligne en tablette */
@media (max-width: 1024px) {
    .card-stage {
        flex: 0 0 calc((100% - var(--wam-spacing-2xl)) / 2);
    }
}

/* Responsive — 1 par ligne en mobile */
@media (max-width: 640px) {
    .card-stage {
        flex: 0 0 100%;
    }
}