/* =====================================================
   COMPONENTS CSS — WAM Dance Studio
   Composants réutilisables sur TOUTES les pages.
   Chargé globalement : boutons, header, footer, cards, etc.
   ===================================================== */

/* =====================================================
   BOUTON — Icône commune
   ===================================================== */
/* Icônes colorables via CSS mask — héritent de currentColor
   Usage : <span class="btn-icon" style="--icon-url: url('chemin/icone.svg')"></span>
   Taille : 1em par défaut — override avec width/height via style ou classe CSS */
.btn-icon {
    display: inline-block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: var(--icon-width, var(--icon-size, 1em));
    height: var(--icon-height, var(--icon-size, 1em));
    /* Rendu net des masques SVG sur tous les navigateurs */
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;

}

/* Modificateurs de taille pour btn-icon (override du 1em par défaut) */
.btn-icon--xs {
    width: 10px;
    height: 10px;
}

/* w-2.5 h-2.5 — boutons pause */
.btn-icon--sm {
    width: 12px;
    height: 12px;
}

/* w-3 h-3 — boutons chevron */
.btn-icon--md {
    width: 24px;
    height: 24px;
}

/* w-6 h-6 — bouton fermer nav */

/* =====================================================
   EFFETS GRAPHIQUES WAM
   ===================================================== */

/**
 * Effet "4 Layers Colors" (Shadow-stack du design Figma)
 */
.wam-effect-4-layers {
    box-shadow:
        -1px -4px 0px 0px var(--wam-color-yellow),
        4px 6px 0px 0px var(--wam-color-pink),
        6px -2px 0px 0px var(--wam-color-orange),
        -5px 4px 0px 0px var(--wam-color-green);
}

/* =====================================================
   BOUTON PLAIN (Primary)
   Figma: bg accent-yellow, texte dark, hover border gradient animé
   Technique : ::before pseudo-élément avec le gradient border,
   transitionné en opacity 0→1 pour une apparition fluide.
   Classes formulaires scopées sous .wamformcss (Gutenberg).
   ===================================================== */
.btn-primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wamformcss .ff-btn-submit,
.wamformcss .ff_btn_style,
.wamformcss form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style),
.mailpoet_submit,
.woocommerce-checkout #place_order {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--wam-spacing-2xs);
    padding: var(--wam-spacing-sm) var(--wam-spacing-xl);
    background-color: var(--wam-color-yellow);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: var(--wam-radius-lg);
    color: var(--wp--preset--color--background-500);
    font-family: var(--wam-font-body);
    font-weight: bold;
    font-size: 1.25rem;
    /* 20px */
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.25;
    cursor: pointer;
    width: fit-content;
    z-index: 1;
}


.btn-primary::before,
.wp-block-button:not(.is-style-outline) .wp-block-button__link::before,
.wamformcss .ff-btn-submit::before,
.wamformcss .ff_btn_style::before,
.wamformcss form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style)::before,
.mailpoet_submit::before,
.woocommerce-checkout #place_order::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: calc(var(--wam-radius-lg) - 3px);
    /* r − border-width : aligne la courbe externe sur le clip jaune */
    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);
}

.btn-primary:hover::before,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::before,
.wamformcss .ff-btn-submit:hover::before,
.wamformcss .ff_btn_style:hover::before,
.wamformcss form.fluent_form_3 .ff-btn-submit:hover::before,
.mailpoet_submit:hover::before,
.woocommerce-checkout #place_order:hover::before {
    opacity: 1;
}

/* Neutralise l'opacity:0.8 injecté par Fluent Forms au hover */
.btn-primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wamformcss .ff-btn-submit:hover,
.wamformcss .ff_btn_style:hover,
.wamformcss form.fluent_form_3 .ff-btn-submit:hover,
.mailpoet_submit:hover,
.woocommerce-checkout #place_order:hover {
    opacity: 1 !important;
    background-color: var(--wam-color-yellow);
}

/* MailPoet — !important nécessaire : inline styles injectés par le plugin */
.mailpoet_submit.btn-primary {
    background-color: var(--wam-color-yellow) !important;
    background-clip: padding-box !important;
    color: var(--wp--preset--color--background-500) !important;
    border: 3px solid transparent !important;
}

.mailpoet_submit.btn-secondary {
    background: transparent !important;
    border: 2px solid var(--wam-color-yellow) !important;
    color: var(--wam-color-yellow) !important;
}

/* Icône sombre sur fond jaune */
.btn-primary .btn-icon img,
.btn-primary .icon-colorable {
    filter: brightness(0);
}

/*
 * États désactivés du bouton primaire
 * ─────────────────────────────────────
 * :disabled         → <button disabled> : retiré du tab order, non interactif.
 *                     Utilisé pour les cas définitivement bloqués (cours complet).
 * [aria-disabled]   → bouton visible et focusable, mais non cliquable.
 *                     Utilisé pour "inscriptions bientôt disponibles" (config WAM) :
 *                     les lecteurs d'écran l'annoncent comme "grisé / non disponible"
 *                     tout en permettant de l'atteindre au clavier.
 */
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
    background-color: var(--wam-color-card-bg);
    color: var(--wam-color-subtext);
    cursor: not-allowed;
    pointer-events: none;
    /* bloque le clic souris */
    opacity: 1;
    /* on garde la lisibilité, pas d'assombrissement */
}

/* Supprime l'effet de bordure gradient au hover sur état désactivé */
.btn-primary:disabled::before,
.btn-primary[aria-disabled="true"]::before {
    display: none;
}


/* Ajout automatique du chevron sur les boutons WordPress (Gutenberg) */
.wp-block-button__link::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: url('../images/chevron-right.svg') no-repeat center / contain;
    mask: url('../images/chevron-right.svg') no-repeat center / contain;
    margin-left: var(--wam-spacing-2xs);
    flex-shrink: 0;
    transform: translateY(1px);
    /* Ajustement optique */
}

/* Espacement des boutons dans le contenu textuel (.wam-prose) */
.wam-prose .wp-block-buttons {
    margin-top: var(--wam-spacing-lg);
    margin-bottom: var(--wam-spacing-lg);
}

/* =====================================================
   BOUTON OUTLINED (Secondary)
   Figma: border yellow, texte yellow, hover bg glass-yellow
   ===================================================== */
.btn-secondary,
.btn-outlined,
.wp-block-button.is-style-outline .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: var(--wam-spacing-2xs);
    padding: var(--wam-spacing-sm) var(--wam-spacing-xl);
    background: transparent;
    border: 2px solid var(--wam-color-yellow);
    border-radius: var(--wam-radius-lg);
    color: var(--wam-color-yellow);
    font-family: var(--wam-font-body);
    font-weight: bold;
    font-size: 1.25rem;
    /* 20px */
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.25;
    cursor: pointer;
    transition: background var(--wam-transition);
}

/* =====================================================
   CHIPS (Composant global)
   ===================================================== */
.wam-chip {
    border: 1px solid var(--wam-color-subtext);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--wam-spacing-2xs) var(--wam-spacing-xs);
    border-radius: var(--wam-radius-lg);
    text-decoration: none;
    /* Pour les chips liens */
    transition: background var(--wam-transition), border-color var(--wam-transition);
}

.wam-chip:hover {
    background: var(--wam-color-card-bg);
    border-color: var(--wam-color-disabled);
}

.wam-chip__label {
    color: var(--wam-color-subtext);
}

/* =====================================================
   PROFESSEURS — Liens
   ===================================================== */
.prof-link {
    text-decoration: underline;
    color: inherit;
    transition: color var(--wam-transition);
}

.prof-link:hover {
    color: var(--wam-color-yellow);
}

/* =====================================================
   ICONES — Utilitaires
   ===================================================== */

.btn-secondary:hover,
.btn-outlined:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--wam-color-glass-yellow);
}

/* =====================================================
   BOUTON SMART
   Figma: bg glass-white, texte normal 16px, radius 12px
   Hover: border white + bg glass-white-hover
   ===================================================== */
.btn-smart {
    display: inline-flex;
    align-items: center;
    gap: var(--wam-spacing-2xs);
    padding: var(--wam-spacing-2xs) var(--wam-spacing-sm);
    background: var(--wam-color-glass-white);
    border: 1px solid transparent;
    border-radius: var(--wam-radius-md);
    color: var(--wam-color-text);
    font-family: var(--wam-font-body);
    font-weight: 400;
    font-size: 1rem;
    /* 16px */
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color var(--wam-transition), background var(--wam-transition);
}

.btn-smart:hover {
    border-color: var(--wam-color-text);
    background: var(--wam-color-glass-white-hover);
}

/* =====================================================
   BOUTON PAUSE (icon button Smart carré)
   Figma: bg glass-white, p-8, radius 8px
   ===================================================== */
.btn-pause {
    display: inline-flex;
    align-items: center;
    gap: var(--wam-spacing-xs);
    background: transparent;
    border: none;
    border-radius: var(--wam-radius-sm);
    padding: 0;
    color: var(--wam-color-disabled);
    font-size: var(--wam-font-size-sm);
    cursor: pointer;
    transition: color var(--wam-transition);
}

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

/* Variante : btn-icon (mask) à l'intérieur d'un btn-pause (ex: bouton fermer nav) */
.btn-pause .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--wam-radius-sm);
    background-color: var(--wam-color-glass-white);
    mask-image: none;
    -webkit-mask-image: none;
    transition: background-color var(--wam-transition);
}

.btn-pause .btn-icon::after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: currentColor;
    mask-image: var(--icon-url);
    -webkit-mask-image: var(--icon-url);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

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

.btn-pause:hover {
    color: var(--wam-color-text);
}

.btn-pause__icon {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-pause__icon img {
    width: 100%;
    height: 100%;
    display: block;
    filter: opacity(0.5);
}

/* =====================================================
   COMPATIBILITÉ A11Y — Boutons
   ===================================================== */

/* Thème clair : les couleurs des boutons s'adaptent via
   les overrides CSS vars dans accessibility.css.
   Pas de règle supplémentaire nécessaire ici pour les
   couleurs (les variables se propagent automatiquement).
   On override uniquement les styles hardcodés. */

html.wam-theme-light .btn-primary {
    background: var(--wam-color-yellow);
    color: var(--wp--preset--color--background-500);
}

html.wam-theme-light .btn-secondary,
html.wam-theme-light .btn-outlined {
    border-color: var(--wam-color-yellow);
    color: var(--wam-color-yellow);
}

/* =====================================================
   HEADER DU SITE
   Figma: UI Kit — sticky, blur, pill menu button
   ===================================================== */
.wam-header {
    position: sticky;
    top: 0;
    z-index: var(--wam-z-header);
    width: 100%;
    /* Léger fond flou pour lisibilité en scroll */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: var(--wam-color-overlay-dark);
    border-bottom: 1px solid transparent;
    transition: border-color var(--wam-transition), background var(--wam-transition);
}

.wam-header.scrolled {
    border-bottom-color: var(--wp--preset--color--background-500);
}

.wam-header--home {
    /* Sur homepage : header transparent (pas de bande en haut selon brief) */
    background: transparent;
    border-bottom: none !important;
}

.wam-header__separator {
    width: 100%;
    height: 32px;
    flex-shrink: 0;
    background-color: var(--wam-color-page-bg);
    background-image: var(--wam-pattern-dark-url);
    background-size: 800px;
    background-repeat: repeat;
    background-position: top;
}

/* Hide-on-scroll : masquer en scrollant vers le bas, réafficher vers le haut (mobile) */
@media (max-width: 800px) {
    .wam-header {
        transition: transform 0.3s ease,
            border-color var(--wam-transition),
            background var(--wam-transition);
    }

    .wam-header.header--hidden {
        transform: translateY(-100%);
    }

    .wam-header__separator {
        height: 20px;
        background-size: 480px;
    }
}

.wam-header__inner {
    position: relative;
    /* Nécessaire pour le centrage absolu du logo */
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--wam-max-screen);
    margin: 0 auto;
    padding: var(--wam-spacing-md) var(--wam-page-mx);
}

/* Logo — drop-shadow CSS (remplace le filtre Figma supprimé du SVG pour rendu full-res) */
.wam-header__logo {
    height: 48px;
    width: auto;
    display: block;
    filter: drop-shadow(0px 4px 8px rgba(33, 44, 80, 0.5));
}

.wam-header__logo-text {
    height: 19px;
    width: auto;
    display: block;
}

/* Lien logo — centré absolument au milieu du header */
.wam-header__logo-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    transition: opacity var(--wam-transition);
    z-index: 2;
    height: 100%;
    padding: 0 var(--wam-spacing-lg);
}

.wam-header__logo-link:hover {
    opacity: 0.8;
}

/* Bloc de droite : Dance Studio + Panier */
.wam-header__right {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

/* "DANCE\nSTUDIO" — texte à droite du logo (center-forced) */
.wam-header__logo-subtitle {
    height: 14px;
    width: auto;
    display: block;
}

/* Spacer transparent homepage (compense le logo masqué) */
.wam-header__logo-spacer {
    width: 164px;
}

/* Label "Menu" dans le bouton burger */

/* Lien Panier Header */
.wam-header__cart-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--wp--preset--color--background-600);
    border: 1px solid var(--wp--preset--color--background-500);
    border-radius: var(--wam-radius-md);
    color: var(--wam-color-subtext);
    transition: all var(--wam-transition);
    text-decoration: none;
    flex-shrink: 0;
}

/* État vide du panier : masqué totalement sans prendre d'espace */
.wam-header__cart-link.is-empty {
    width: 0;
    margin-left: 0;
    padding: 0;
    border: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.5);
    overflow: hidden;
}

/* Animation lors de l'ajout au panier */
.wam-header__cart-link.is-animating {
    animation: cartPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes cartPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.wam-header__cart-link:hover {
    background: var(--wp--preset--color--background-500);
    border-color: var(--wam-color-yellow);
    transform: translateY(-2px);
}

.wam-header__cart-link .btn-icon {
    filter: brightness(0) invert(1);
    opacity: 1;
    /* Pleine opacité pour l'icône plus grande */
}

/* Bulle de notification panier */
.wam-header__cart-count {
    position: absolute;
    top: -12px;
    right: -12px;
    min-width: 29px;
    height: 29px;
    background: var(--wam-color-yellow);
    color: var(--wp--preset--color--background-500);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2;
    border: 2px solid var(--wp--preset--color--background-600);
    /* Détache visuellement la bulle */
}

/* Bouton menu burger pill */
.wam-header__menu-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--wam-spacing-sm);
    padding: var(--wam-spacing-sm) var(--wam-spacing-md);
    background: var(--wp--preset--color--background-600);
    border: 1px solid var(--wp--preset--color--background-500);
    border-radius: var(--wam-radius-xl);
    cursor: pointer;
    box-shadow: var(--wam-shadow-card);
    color: var(--wam-color-subtext);
    font-size: var(--wam-font-size-xs);
    text-decoration: none;
    transition: background var(--wam-transition), border-color var(--wam-transition);
}

.wam-header__menu-btn:hover {
    background: var(--wp--preset--color--background-500);
    border-color: var(--wam-color-subtext);
}

/* Hamburger 4 lignes colorées */
.wam-header__hamburger {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-3xs);
    flex-shrink: 0;
}

.wam-header__hamburger span {
    display: block;
    height: 2px;
    width: 24px;
    border-radius: 80px;
}

.wam-header__hamburger span:nth-child(1) {
    background: var(--wam-color-green);
}

.wam-header__hamburger span:nth-child(2) {
    background: var(--wam-color-yellow);
}

.wam-header__hamburger span:nth-child(3) {
    background: var(--wam-color-orange);
}

.wam-header__hamburger span:nth-child(4) {
    background: var(--wam-color-pink);
}

/* =====================================================
   RESPONSIVE — Header & Menu Mobile
   ===================================================== */
@media (max-width: 1080px) {
    .wam-header__inner {
        padding: var(--wam-spacing-2xs) var(--wam-spacing-md);
        justify-content: space-between;
        gap: var(--wam-spacing-sm);
    }

    /* Homepage : Menu à gauche, Panier à droite */
    .wam-header--home .wam-header__logo-spacer {
        display: none;
    }

    /* Pages internes : Logo au milieu dans le flux flex (pour éviter le chevauchement) */
    .wam-header:not(.wam-header--home) .wam-header__logo-link {
        position: static;
        transform: none;
        order: 2;
        min-height: 64px;
    }

    .wam-header__menu-btn {
        order: -1 !important;
        /* Force le menu TOUJOURS à gauche (1er) */
    }

    .wam-header__right,
    .wam-header__cart-link {
        order: 3 !important;
        /* Force le panier TOUJOURS à droite (3ème) */
        gap: var(--wam-spacing-xs);
    }

    /* Ajustement tailles */
    .wam-header__logo {
        height: 40px;
    }

    .wam-header__logo-subtitle {
        display: none;
        /* Trop encombrant sur mobile */
    }

    .wam-header__menu-label {
        display: none;
        /* On ne garde que le hamburger pour gagner de la place */
    }

    .wam-header__menu-btn {
        padding: var(--wam-spacing-xs);
        border-radius: var(--wam-radius-md);
    }

    .wam-header__cart-link {
        width: 48px;
        height: 48px;
    }

    .wam-header__cart-count {
        min-width: 25px;
        height: 25px;
        font-size: 12px;
        top: -8px;
        right: -8px;
    }
}

/* =====================================================
   COMPATIBILITÉ A11Y — Header
   ===================================================== */
html.wam-theme-light .wam-header {
    background: var(--wam-color-overlay-light);
}

html.wam-theme-light .wam-header--home {
    background: transparent;
}


/* =====================================================
   CARD ARTICLE (sticky posts) — Réutilisable
   Figma: Horizontale, thumbnail 233px, corps flex-1
   ===================================================== */
.card-article {
    display: flex;
    align-items: center;
    gap: var(--wam-spacing-sm);
    padding: var(--wam-spacing-2xs);
    border-radius: var(--wam-radius-3xl);
    border: 2px solid transparent;
    background:
        linear-gradient(90deg, var(--wam-color-glass-green), var(--wam-color-glass-green)),
        linear-gradient(270deg, var(--wam-color-page-bg) 0%, var(--wam-color-card-bg) 100%);
    position: relative;
    box-sizing: border-box;
    transition: border-color var(--wam-transition), background var(--wam-transition);
    width: 90%;
    margin: 0 auto;
}

.card-article:hover {
    border-color: var(--wam-color-green);
}

/* Thumbnail Figma : 400×196 (card-article-featured.php) */
.card-article__image {
    width: 400px;
    height: 100%;
    flex-shrink: 0;
    border-radius: var(--wam-radius-xl);
    overflow: hidden;
    position: relative;
}

.card-article__image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.card-article__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--wam-transition-slow);
}

.card-article:hover .card-article__image img {
    transform: scale(1.05);
}

.card-article__image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 180px;
}

/* Corps */
.card-article__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--wam-spacing-sm);
    padding: var(--wam-spacing-lg);
    width: 100%;
}

.card-article__title {
    font-family: var(--wam-font-graphical-2);
    font-size: var(--wam-font-size-display-lg);
    line-height: 1;
    color: var(--wam-color-green);
    margin: 0;
}

.card-article__content-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wam-spacing-2xl);
    width: 100%;
}

/* Excerpt — utiliser .text-xs sur l'élément PHP */
.card-article__excerpt {
    flex: 1;
    color: var(--wam-color-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bouton carré (ratio 1:1) spécifique à cet article */
.card-article__btn {
    border-radius: var(--wam-radius-lg) !important;
    padding: 0 !important;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Pastille notification animée */
.card-article__notif {
    position: absolute;
    top: 4px;
    left: 32px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wam-color-green);
    animation: wam-pulse 1.8s ease-in-out infinite;
    z-index: 2;
}

.card-article__notif::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--wam-color-green);
    opacity: 0;
    animation: wam-pulse-ring 1.8s ease-in-out infinite;
}

@keyframes wam-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.85;
    }
}

@keyframes wam-pulse-ring {
    0% {
        transform: scale(0.6);
        opacity: 0.5;
    }

    80% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}


@media (max-width: 640px) {
    .card-article {
        flex-direction: column;
        align-items: center;
    }

    .card-article__image {
        width: 100%;
    }
}

/* =====================================================
   CARD ARTICLE LIST — Vignette verticale listing blog
   Réutilisable dans home.php et tout listing d'articles.
   ===================================================== */

.card-article-list {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom,
            var(--wp--preset--color--background-800) 0%,
            var(--wp--preset--color--background-600) 100%);
    border: 3px solid var(--wp--preset--color--background-800);
    border-radius: var(--wam-radius-xl);
    overflow: hidden;
    transition: box-shadow var(--wam-transition), transform var(--wam-transition), border-color var(--wam-transition);
}

/* Gradient border au survol — donut technique */
.card-article-list::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-article-list:hover,
.card-article-list:focus-within {
    box-shadow: var(--wam-shadow-md);
    transform: translateY(-2px);
    border-color: transparent;
}

.card-article-list:hover::before,
.card-article-list:focus-within::before {
    opacity: 1;
    z-index: 2;
}

/* ---- Image ---- */

.card-article-list__media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
    /* Répète le radius du card sur les coins hauts pour contourner
       le bug de clipping overflow+isolation dans Safari/Chrome */
    border-radius: calc(var(--wam-radius-xl) - 3px) calc(var(--wam-radius-xl) - 3px) 0 0;
}

.card-article-list__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--wam-transition-slow);
}

.card-article-list:hover .card-article-list__img {
    transform: scale(1.04);
}

.card-article-list__img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--wam-color-card-bg);
}

/* ---- Corps ---- */

.card-article-list__body {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-xs);
    padding: var(--wam-spacing-md);
    flex: 1;
}

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

.card-article-list__title {
    margin: 0;
    color: var(--wam-color-text);
}

.card-article-list__excerpt {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Footer CTA ---- */

.card-article-list__footer {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    padding-top: var(--wam-spacing-xs);
}

.card-article-list__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);
    color: var(--wam-color-subtext);
    text-decoration: none;
    transition: all var(--wam-transition);
}

.card-article-list:hover .card-article-list__cta,
.card-article-list:focus-within .card-article-list__cta {
    border-color: var(--wam-color-green);
    color: var(--wam-color-green);
}

/* stretched-link */
.card-article-list .stretched-link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    border-radius: inherit;
}


/* =====================================================
   GRILLE PROFS — Layout réutilisable
   ===================================================== */
.teachers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wam-spacing-lg);
    justify-content: center;
    max-width: var(--wam-max-content);
    width: 100%;
    padding: 0 var(--wam-page-mx);
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

/* =====================================================
   SECTION TEACHERS — Conteneur générique
   ===================================================== */
.section-teachers {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wam-spacing-3xl);
    padding: var(--wam-spacing-6xl) 0;
    width: 100%;
    overflow: hidden;
    background-image: var(--wam-pattern-dark-url);
    background-size: 50%;
    background-repeat: repeat;
    background-position: top center;
}

.section-teachers--no-pattern {
    background-image: none;
    padding: 0;
    overflow: visible;
}

.section-teachers--no-pattern::before {
    display: none;
}

.section-teachers::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(to right,
            transparent 0%,
            var(--wam-color-page-bg) 20%,
            var(--wam-color-page-bg) 80%,
            transparent 100%);
}

@media (max-width: 768px) {
    .section-teachers {
        background-size: 150%;
    }

    .section-teachers::before {
        background: linear-gradient(to right,
                transparent 0%,
                var(--wam-color-page-bg) 16%,
                var(--wam-color-page-bg) 84%,
                transparent 100%);
    }
}

.section-teachers__title {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wam-spacing-3xs);
    max-width: 90%;
}

.section-teachers__cta {
    position: relative;
    z-index: 10;
}

/* =====================================================
   TEACHER CARD — Carte professeur·e réutilisable
   ===================================================== */
.teacher-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wam-spacing-lg);
    padding: var(--wam-spacing-sm);
    background: var(--wam-color-card-bg);
    border-radius: var(--wam-radius-lg);
    width: 240px;
    text-decoration: none;
    transition: transform var(--wam-transition-slow), background var(--wam-transition);
}

/* Ajustement si pas de photo (classe ajoutée dans section-teachers.php) */
.teacher-card--no-photo {
    padding: var(--wam-spacing-xl) var(--wam-spacing-sm) var(--wam-spacing-sm);
}

.teacher-card:hover {
    transform: translateY(-4px);
    background: var(--wam-color-input-bg);
}

.teacher-card__photo {
    width: 100%;
    height: auto;
    border-radius: var(--wam-radius-md);
    overflow: hidden;
    background: var(--wam-color-input-bg);
    aspect-ratio: 2 / 3;
}

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

.teacher-card__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.teacher-card__photo--placeholder svg {
    width: 60px;
    height: 60px;
    fill: var(--wam-color-disabled);
}

.teacher-card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wam-spacing-sm);
    width: 100%;
    text-align: center;
}

/* Nom : Mallia 24px */
.teacher-card__name {
    font-family: var(--wam-font-graphical-1);
    font-size: 1.5rem;
    /* 24px */
    line-height: 1.1;
    color: var(--wam-color-text);
    margin: 0;
    font-style: normal;
}

/* Spécialité — utiliser .text-md sur l'élément PHP */
.teacher-card__specialty {
    color: var(--wam-color-subtext);
    margin: 0;
    line-height: 1.25;
}

/* Lien icône */
.teacher-card__link-icon {
    background: var(--wam-color-glass-white);
    border-radius: var(--wam-radius-sm);
    padding: var(--wam-spacing-2xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--wam-transition);
}

.teacher-card:hover .teacher-card__link-icon {
    background: var(--wam-color-glass-white-hover);
}

.teacher-card__link-icon img {
    width: 10px;
    height: 10px;
    display: block;
    filter: opacity(0.6);
}

/* =====================================================
   SÉPARATEUR — Pattern avec fondu vertical
   ===================================================== */
.wam-separator {
    height: 120px;
    width: 100%;
    display: block;
    background-image: var(--wam-pattern-dark-url);
    background-size: 500px auto;
    background-repeat: repeat;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* =====================================================
   IMAGE BLEND — Filtre artistique brand WAM
   Figma: background-800 (#131620) en mix-blend lighten
   sur toutes les images thumbnail/média (pas les SVG).

   Usage wrapper :  ajouter .wam-img sur le div conteneur.
   L'overlay ::after remplace le div inline bg/mix-blend-lighten.

   Usage contenu :  règles globales sur .entry-content
                    pour les blocks Gutenberg (wp-block-image…)
   ===================================================== */

/* Utilitaire wrapper --------------------------------- */
.wam-img {
    position: relative;
    overflow: hidden;
}

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

.wam-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wam-color-page-bg, var(--wp--preset--color--background-800));
    mix-blend-mode: lighten;
    pointer-events: none;
    z-index: 1;
}

/* =====================================================
   COMPATIBILITÉ A11Y — Composants
   ===================================================== */

/* Polices graphiques désactivées */
html.wam-no-graphical-fonts .card-article__title,
html.wam-no-graphical-fonts .teacher-card__name {
    font-family: var(--wam-font-body) !important;
    font-style: normal !important;
}

/* Animations désactivées */
html.wam-reduce-motion .card-article__notif,
html.wam-reduce-motion .card-article__notif::after {
    animation: none !important;
}

/* =====================================================
   MENU OVERLAY (SLIDE OVER) — Navigation principale
   Figma : panneau latéral gauche, backdrop flouté
   ===================================================== */

.wam-nav-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--wam-color-overlay-dark);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity var(--wam-transition-slow);
    opacity: 0;
    pointer-events: none;
    z-index: var(--wam-z-panel);
}

.wam-nav-overlay.wam-nav-overlay--open {
    opacity: 1;
    pointer-events: auto;
}

.wam-nav-panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    box-shadow: var(--wam-shadow-panel);
    padding: var(--wam-spacing-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-xl);
    transition: transform 0.5s ease-out;
    transform: translateX(-100%);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--wam-nav-bg);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    scrollbar-width: thin;
    scrollbar-color: var(--wam-scrollbar-thumb) var(--wam-scrollbar-track);
    z-index: 10;
}

.wam-nav-panel::-webkit-scrollbar {
    width: 6px;
}

.wam-nav-panel::-webkit-scrollbar-track {
    background: var(--wam-scrollbar-track);
}

.wam-nav-panel::-webkit-scrollbar-thumb {
    background: var(--wam-scrollbar-thumb);
    border-radius: var(--wam-radius-sm);
}

.wam-nav-panel::-webkit-scrollbar-thumb:hover {
    background: var(--wam-scrollbar-thumb-hover);
}

.wam-nav-overlay.wam-nav-overlay--open .wam-nav-panel {
    transform: translateX(0);
}

/* Bouton fermer */
.wam-nav__close {
    position: absolute;
    top: var(--wam-spacing-xl);
    /* 32px */
    right: var(--wam-spacing-xl);
    display: inline-flex;
    transition: opacity var(--wam-transition), transform var(--wam-transition);
    cursor: pointer;
    color: var(--wam-nav-text);
    z-index: 50;
}

.wam-nav__close:hover {
    opacity: 1;
    transform: scale(1.1);
    background: var(--wam-color-page-bg);
}

/* Animation d'entrée des éléments */
.wam-nav__anim-item {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.wam-nav-overlay--open .wam-nav__anim-item {
    opacity: 1;
    transform: translateX(0);
}

/* Conteneur particules */
.wam-nav__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    /* Desktop : derrière le panel, visibles à droite */
}

/* Mobile : au-dessus du panel mais limitées au bandeau supérieur */
@media (max-width: 640px) {
    .wam-nav__particles {
        z-index: 15;
        /* Devant le panel (10) mais derrière le bouton close (50) */
        bottom: auto;
        height: 210px;
    }
}

/* Particule individuelle (positionnée par JS dans main.js) */
.keywords-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation: kw-float-particle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes kw-float-particle {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0);
    }

    40% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: translateY(-120px) translateX(var(--drift, 20px));
    }
}

/* Close-wave: overrides float animation with a quick fade-out staggered right→left */
.keywords-particle--closing {
    animation: kw-particle-close 0.3s ease-in var(--close-delay, 0s) forwards;
}

@keyframes kw-particle-close {
    from {
        opacity: 0.6;
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* En-tête du panneau (logo) */
.wam-nav__header {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wam-spacing-2xs);
    margin-top: var(--wam-spacing-sm);
    margin-bottom: var(--wam-spacing-sm);
    width: 100%;
}

/* Logo menu inline SVG */
.wam-logo-menu {
    width: 280px;
    height: auto;
    color: var(--wam-nav-text);
}

.wam-logo-menu svg {
    width: 100%;
    height: auto;
}

/* Supprime les filtres Figma sur le SVG inline */
.wam-logo-menu svg g[filter] {
    filter: none !important;
}

/* Force l'héritage de couleur sur les éléments SVG du menu.
   Les valeurs HEX sont hardcodées pour cibler spécifiquement 
   les couleurs statiques générées par l'export Figma. */
.wam-logo-menu path[fill="#F9F6F1"],
.wam-logo-menu path[fill="#E9DFCD"] {
    fill: currentColor;
}

/* Menu principal */
.wam-nav__menu {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-xl);
    /* 32px */
    width: 100%;
}

.wam-nav__list {
    display: flex;
    flex-direction: column;
    padding: var(--wam-spacing-2xs);
}

.wam-nav__list li {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.wam-nav__list>li>.wam-nav-item-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    position: relative;
}

.wam-nav__list a {
    font-size: 1.1rem;
    /* wam-md = 20px */
    transition: opacity var(--wam-transition);
    padding-top: var(--wam-spacing-3xs);
    padding-bottom: var(--wam-spacing-3xs);
    padding-right: var(--wam-spacing-4xl);
    border: none;
    display: block;
    width: 100%;
    color: var(--wam-nav-text);
    text-decoration: none;
}

.wam-nav__list a:hover {
    opacity: 0.7;
}

.wam-nav__list li.current-menu-item>.wam-nav-item-wrap>a,
.wam-nav__list li.current-menu-item>a {
    font-weight: bold;
}

.wam-nav__list li.current-menu-item>.wam-nav-item-wrap>a::after {
    display: none;
}

/* Séparateur de menu — lien personnalisé avec la classe CSS "nav-separator" */
.wam-nav__list li.nav-separator {
    pointer-events: none;
    padding: 0;
    height: 1px;
    background: var(--wam-color-icon-light);
    margin: var(--wam-spacing-sm) 0 var(--wam-spacing-2xs);
}

.wam-nav__list li.nav-separator>.wam-nav-item-wrap>a,
.wam-nav__list li.nav-separator>a {
    display: none;
    /* masque le texte "--separator" */
}

.wam-nav__list li.nav-separator::after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: rgba(249, 244, 236, 0.12);
    /* --wam-color-text à 12% opacity */
    border-radius: var(--wam-radius-pill);
}


.wam-nav__list .wam-nav__sub {
    padding: 0 0 0 var(--wam-spacing-xl);
    /* 32px = pl-8 */
    margin: 0;
    /* Coupe tous les margin-top/bottom fantômes des ul natifs */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: max-height var(--wam-transition-slow), opacity var(--wam-transition-slow);
    opacity: 0;
    max-height: 0;
}

.wam-nav__list .menu-item-has-children.is-expanded>.wam-nav__sub {
    opacity: 1;
    margin-top: var(--wam-spacing-2xs);
    padding-bottom: var(--wam-spacing-2xs);
    /* 16px = pb-4 */
    max-height: 800px;
}

.wam-nav__list .wam-nav__sub a {
    padding: 6px 0;
}

.wam-nav__list .wam-nav__sub a:hover {
    opacity: 0.7;
}

.wam-nav__list .wam-nav__sub li {
    border: none;
}

/* Bouton chevron (ouvre/ferme sous-menu) */
.wam-nav__chevron-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 64px;
    /* w-16 */
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--wam-transition-slow);
    border: none;
    background: transparent;
    z-index: 10;
    margin: 0;
    padding: 0;
    color: var(--wam-nav-text);
}

.wam-nav__list .menu-item-has-children.is-expanded>.wam-nav-item-wrap .wam-nav__chevron-btn {
    transform: rotate(180deg);
}

/* Réseaux sociaux */
.wam-nav__socials {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wam-spacing-2xl);
    /* 40px = gap-10 */
    margin-top: auto;
    padding-top: var(--wam-spacing-xl);
    /* 32px = pt-8 */
    border: none;
}

.wam-nav__social-link {
    transition: opacity var(--wam-transition), transform var(--wam-transition);
    color: var(--wam-nav-text);
    font-size: 2.25rem;
    /* text-4xl */
}

.wam-nav__social-link:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

/* Responsive Menu Mobile */
@media (max-width: 640px) {
    .wam-nav-panel {
        padding: var(--wam-spacing-xl) var(--wam-spacing-md);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .wam-nav__list a {
        padding-right: var(--wam-spacing-xl);
    }

    /* Permettre au texte long de passer à la ligne s'il dépasse */
    .wam-nav__list a {
        white-space: normal;
        word-break: break-word;
    }

    .wam-nav__chevron-btn {
        width: 48px;
    }

    .wam-nav__list .wam-nav__sub {
        padding-left: var(--wam-spacing-md);
    }

    .wam-nav__socials {
        padding-top: 0;
    }
}

/* =====================================================
   FOOTER — WAM Dance Studio
   Figma : node-id 125:828 (desktop) / 129:1372 (mobile)
   ===================================================== */

.wam-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--wam-color-card-bg);
}

.wam-footer__separator {
    width: 100%;
    height: 48px;
    /* h-12 */
    flex-shrink: 0;
    background-color: var(--wam-color-page-bg);
    background-image: var(--wam-pattern-dark-url);
    background-size: 800px;
    background-repeat: repeat;
    background-position: center;
}

.wam-footer__container {
    width: 100%;
    max-width: var(--wam-max-screen);
    /* 1536px */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--wam-spacing-xl) var(--wam-page-mx);
    gap: var(--wam-spacing-3xl);
    box-sizing: border-box;
}

.wam-footer__action {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--wam-spacing-sm);
    /* 16px = pb-4 */
    box-sizing: border-box;
    gap: var(--wam-spacing-2xl);
    /* 40px */
}

.wam-footer__ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--wam-spacing-sm);
    /* 16px = gap-4 */
    flex: 1;
}

.wam-footer__logo {
    flex-shrink: 0;
    margin: 0;
}

.wam-footer__logo:hover {
    opacity: 0.75;
}

.wam-footer__logo img {
    width: 160px !important;
    height: auto !important;
    display: block !important;
    filter: drop-shadow(0px 4px 8px rgba(33, 44, 80, 0.5));
}

.wam-footer__socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--wam-spacing-lg);
    /* 24px = gap-6 */
    flex-shrink: 0;
    margin-left: auto;
}

.wam-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--wam-transition), transform var(--wam-transition);
    color: var(--wam-color-text);
    opacity: 0.8;
}

.wam-footer__social-link:hover,
.wam-footer__social-link:focus-visible {
    opacity: 1;
    transform: scale(1.1);
}

/* Icône réseau social (mask-image, même pattern que .btn-icon) */
.wam-footer__social-icon {
    display: block;
    width: 40px;
    /* w-10 */
    height: 40px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.wam-footer__nav {
    width: 100%;
}

.wam-footer__nav-list {
    display: block;
    /* Nécessaire pour column-count */
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wam-footer__nav-list>li {
    list-style-type: none;
}

.wam-footer__nav-list>li>a {
    font-size: 1.25rem;
    /* 20px = .text-md */
    text-decoration: none;
    color: var(--wam-color-text);
    transition: color var(--wam-transition);
}

.wam-footer__nav-list>li>a:hover {
    color: var(--wam-color-yellow);
}

.wam-footer__nav-list>li::before {
    content: "•";
    color: var(--wam-color-text);
    font-size: 1.4rem;
}

.wam-footer__section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: var(--wam-spacing-xs);
    /* 12px = gap-3 */
}

.wam-footer__section-title {
    font-family: var(--wam-font-body);
    font-size: 1.25rem;
    /* wam-md */
    font-weight: bold;
    color: var(--wam-color-text);
    margin: 0;
}

.wam-footer__section-cols {
    display: flex;
    gap: var(--wam-spacing-xl);
    /* 32px = gap-8 */
    width: 100%;
}

.wam-footer__section-col {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-2xs);
    /* 8px = gap-2 */
    flex: 1;
    min-width: 0;
    list-style-type: disc;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

.wam-footer__section-col li {
    list-style-type: disc;
    color: var(--wam-color-subtext);
}

.wam-footer__section-link {
    font-family: var(--wam-font-body);
    font-size: 0.875rem;
    /* wam-xs = 14px */
    color: var(--wam-color-subtext);
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-4xs);
    text-decoration: none;
    position: relative;
}

/* Soulignement animé sur le titre du lien */
.wam-footer__section-link .wam-footer__link-title {
    display: inline-block;
    transition: background-size var(--wam-transition);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
}

.wam-footer__section-link:hover .wam-footer__link-title,
.wam-footer__section-link:focus-visible .wam-footer__link-title {
    background-size: 100% 1px;
}

.wam-footer__link-sub {
    font-size: var(--wam-font-size-xs);
    line-height: 1.2;
    color: var(--wam-color-disabled);
    font-style: italic;
}

.wam-footer__section-link:hover {
    opacity: 0.8;
}

.wam-footer__section-empty {
    font-size: 0.875rem;
    /* wam-xs */
    color: var(--wam-color-subtext);
    font-style: italic;
}

.wam-footer__section-all {
    font-family: var(--wam-font-body);
    font-size: 1rem;
    /* wam-sm */
    text-decoration: underline;
    color: var(--wam-color-yellow);
    margin-top: 4px;
    /* mt-1 */
    transition: opacity var(--wam-transition);
    text-decoration-skip-ink: none;
}

.wam-footer__section-all:hover {
    opacity: 0.7;
}

/* --- Nouvel affichage catégorisé des cours (Structure Plate) --- */
.wam-footer__columns {
    width: 100%;
}

.wam-footer__flat-list {
    column-count: 3;
    column-gap: var(--wam-spacing-xl);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.wam-footer__category-title-li {
    font-family: var(--wam-font-body);
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--wam-color-text);
    margin-top: var(--wam-spacing-md);
    margin-bottom: var(--wam-spacing-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    break-after: avoid-column;
    /* Évite de séparer le titre de son premier cours */
}

/* On retire la marge sur la première catégorie */
.wam-footer__category-title-li:first-child {
    margin-top: 0;
}

.wam-footer__course-li,
.wam-footer__flat-list li {
    display: flex;
    align-items: center;
    gap: var(--wam-spacing-2xs);
    margin-bottom: var(--wam-spacing-3xs);
    break-inside: avoid;
}

.wam-footer__course-li::before {
    content: "•";
    color: var(--wam-color-text);
    font-size: 1rem;
}

.wam-footer__flat-list li::before {
    content: "•";
    color: var(--wam-color-text);
    font-size: 1.4rem;
}

/* Styles spécifiques à wam-footer__flat-list gérés via les classes de liens internes */

.wam-footer__category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-3xs);
}

.wam-footer__category-list li {
    display: flex;
    align-items: center;
    gap: var(--wam-spacing-2xs);
}

.wam-footer__category-list li::before {
    content: "•";
    color: var(--wam-color-text);
    font-size: 1.2rem;
}

.wam-footer__simple-link {
    font-family: var(--wam-font-body);
    font-size: 1rem;
    /* Retour à l'ancien style (16px) */
    color: var(--wam-color-subtext);
    text-decoration: none;
    transition: color var(--wam-transition);
}

.wam-footer__simple-link:hover {
    color: var(--wam-color-yellow);
    text-decoration: none;
}

.wam-footer__simple-link-sub {
    font-size: 0.8em;
    font-style: italic;
    color: var(--wam-color-disabled);
    margin-left: 6px;
    font-weight: 400;
}

.wam-footer__partners {
    width: 100%;
    margin-bottom: 1.5rem;
}

.wam-footer__partners img {
    display: block;
    max-width: 120px;
    height: auto;
}

.wam-footer__legal {
    width: 100%;
    font-family: var(--wam-font-body);
    font-size: 0.875rem;
    /* wam-xs */
    color: var(--wam-color-disabled);
    margin: 0;
}

.wam-footer__legal a {
    color: inherit;
    text-decoration: underline;
    transition: color var(--wam-transition);
}

.wam-footer__legal a:hover {
    color: var(--wam-color-text);
}

/* Responsive Mobile */
@media (max-width: 800px) {
    .wam-footer__container {
        padding: var(--wam-spacing-lg) var(--wam-spacing-xl);
        /* py-6 px-8 */
        gap: var(--wam-spacing-2xl);
        /* 40px */
    }

    .wam-footer__action {
        flex-direction: column !important;
        gap: 2rem !important;
        min-height: auto;
    }

    .wam-footer__logo {
        position: static !important;
        transform: none !important;
    }

    .wam-footer__ctas {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--wam-spacing-md);
    }

    .wam-footer__socials {
        display: flex !important;
        justify-content: center;
        margin-left: 0;
        width: 100%;
    }

    .wam-footer__nav-list {
        flex-direction: column;
        gap: var(--wam-spacing-3xs);
    }

    .wam-footer__section-cols {
        flex-direction: column;
        gap: var(--wam-spacing-2xs);
        /* 8px = gap-2 */
    }

    .wam-footer__columns,
    .wam-footer__flat-list {
        column-count: 1;
        column-gap: 0;
    }

    /* display: flex sur .wam-footer__course-li écrase le [hidden] natif — on force */
    .wam-footer__flat-list .wam-footer__course-li[hidden] {
        display: none;
    }

    /* Bouton accordéon catégorie footer (mobile only) */
    .wam-footer__category-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-family: var(--wam-font-body);
        font-size: 1.125rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--wam-color-text);
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        text-align: left;
    }

    .wam-footer__category-btn .btn-icon {
        flex-shrink: 0;
        transition: transform var(--wam-transition);
    }

    .wam-footer__category-title-li.is-expanded .wam-footer__category-btn .btn-icon {
        transform: rotate(180deg);
    }
}

/* =====================================================
   COMPATIBILITÉ A11Y — Titres typographiques
   Polices graphiques désactivées : repli sur Outfit
   (complète les overrides de style.css pour card/teacher)
   ===================================================== */
html.wam-no-graphical-fonts .title-cool-lg,
html.wam-no-graphical-fonts .title-cool-md,
html.wam-no-graphical-fonts .title-sign-lg,
html.wam-no-graphical-fonts .title-sign-md,
html.wam-no-graphical-fonts .title-sign-sm {
    font-family: var(--wam-font-body) !important;
    font-style: normal !important;
}

/* =====================================================
   CARD POST — Carte verticale réutilisable
   Utilisée dans card-article.php pour articles, cours et stages.
   Figma : gradient page-bg → card-bg, hover translate, photo aspect-ratio
   ===================================================== */
.card-similaire {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--wam-spacing-sm);
    /* 16px = gap-4 */
    min-width: 280px;
    max-width: 320px;
    width: 100%;
    padding: var(--wam-spacing-2xs);
    /* 8px = p-2 */
    position: relative;
    border-radius: var(--wam-radius-xl);
    background: linear-gradient(to bottom, var(--wam-color-page-bg), var(--wam-color-card-bg));
    transition: transform var(--wam-transition);
}

.card-similaire:hover {
    transform: translateY(-8px);
    /* hover:-translate-y-2 */
}

/* Lien sur le titre — ::after couvre toute la carte sans bloquer l'inspecteur */
.card-similaire__link {
    color: inherit;
    text-decoration: none;
}

.card-similaire__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Photo — aspect ratio Figma 304:503 */
.card-similaire__photo {
    aspect-ratio: 304 / 503;
    position: relative;
    border-radius: var(--wam-radius-lg);
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

.card-similaire--article .card-similaire__photo {
    aspect-ratio: 304 / 251;
}

.card-similaire__img-wrapper {
    height: 100%;
}

.card-similaire__img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    transition: transform var(--wam-transition-slow);
}

.card-similaire:hover .card-similaire__img {
    transform: scale(1.05);
}

/* Overlay blend-lighten (filtre artistique WAM sur la photo) */
.card-similaire__photo-overlay {
    position: absolute;
    inset: 0;
    background: var(--wam-color-overlay-photo);
    mix-blend-mode: lighten;
    pointer-events: none;
    transition: background var(--wam-transition-slow);
}

.card-similaire:hover .card-similaire__photo-overlay {
    background: var(--wam-color-overlay-photo-hover);
}


/* Corps de la carte */
.card-similaire__body {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-xl);
    /* 32px = gap-8 */
    align-items: center;
    padding: var(--wam-spacing-lg) var(--wam-spacing-sm);
    /* py:24px px:16px */
    width: 100%;
    flex-grow: 1;
}

/* En-tête : titre + sous-titre */
.card-similaire__header {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-2xs);
    /* 8px = gap-2 */
    align-items: center;
    text-align: center;
    width: 100%;
}

/* Titre (utilise .title-sign-md pour la police/taille) */
.card-similaire__title {
    margin: 0;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-similaire--cours .card-similaire__title,
.card-similaire--stage .card-similaire__title {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

/* Sous-titre cours (Outfit Bold jaune) */
.card-similaire__subtitle {
    font-weight: bold;
    line-height: 1.25;
    color: var(--wam-color-text);
    margin: 0;
}

/* Bas de carte : méta + CTA */
.card-similaire__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wam-spacing-xl);
    /* 32px = gap-8 */
    width: 100%;
    margin-top: auto;
}

/* Bloc méta (jour/horaires pour cours, date pour articles) */
.card-similaire__meta {
    display: flex;
    flex-direction: column;
    font-family: var(--wam-font-body);
    font-weight: 400;
    align-items: center;
    line-height: 1.25;
    text-align: center;
    width: 100%;
}

/* Jour du cours (.text-lg pour la taille) */
.card-similaire__day {
    text-transform: capitalize;
    color: var(--wam-color-text);
    margin: 0;
}

/* Horaire du cours (.text-md pour la taille) */
.card-similaire__time {
    color: var(--wam-color-subtext);
    margin: 0;
}

/* Date de l'article (.text-sm pour la taille) */
.card-similaire__date {
    color: var(--wam-color-pink);
    margin: 0;
}

/* Bouton CTA — variante card (rounded-sm, hover border green sur parent:hover) */
.card-similaire__cta {
    display: flex;
    justify-content: center;
}

/* =====================================================
   PROF PROFILE — Page individuelle
   ===================================================== */


.prof-header__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wam-spacing-md);
    margin-top: var(--wam-spacing-lg);
}

.prof-social-link {
    display: inline-flex;
    transition: transform var(--wam-transition);
}

.prof-social-link .btn-icon {
    width: 32px;
    height: 32px;
}

.prof-social-link:hover {
    transform: translateY(-2px);
}

/* .page-hero--centered gère le centrage du profil prof (voir layout.css) */

/* Sections liées (Cours/Stages) sur le profil prof */
.prof-related-section {
    padding-top: var(--wam-spacing-2xl);
}

.prof-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--wam-spacing-md);
}

.prof-related-card {
    display: flex;
    align-items: center;
    gap: var(--wam-spacing-md);
    padding: var(--wam-spacing-sm);
    background: var(--wam-color-card-bg);
    border-radius: var(--wam-radius-lg);
    text-decoration: none;
    transition: transform var(--wam-transition), background var(--wam-transition);
}

.prof-related-card:hover {
    transform: translateY(-2px);
    background: var(--wam-color-input-bg);
}

.prof-related-card__photo {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--wam-radius-md);
    overflow: hidden;
}

.prof-related-card__photo .photo-wrapper {
    width: 100%;
    height: 100%;
}

.prof-related-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prof-related-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-4xs);
}


/* =====================================================
   BREADCRUMB — Fil d'Ariane (partagé toutes pages)
   Remplace .page-breadcrumb, .page-cours__breadcrumb, .stage-breadcrumb
   ===================================================== */
.wam-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--wam-spacing-2xs);
    flex-wrap: wrap;
    font-size: var(--wam-font-size-xs);
    color: var(--wam-color-disabled);
}

/* Couvre les liens Yoast (a) ET les liens manuels (.wam-breadcrumb__link) */
.wam-breadcrumb a,
.wam-breadcrumb__link {
    color: var(--wam-color-disabled);
    text-decoration: none;
    transition: color var(--wam-transition);
}

.wam-breadcrumb a:hover,
.wam-breadcrumb__link:hover {
    color: var(--wam-color-text);
}

.wam-breadcrumb__sep {
    color: var(--wam-color-disabled);
}

/* Variante pleine largeur — utilisée dans .page-layout__inner (padding géré par > *:not(.wam-separator)) */
.wam-breadcrumb--full {
    width: 100%;
    box-sizing: border-box;
}

/* =====================================================
   BOUTON MODIFIER FLOTTANT (ADMIN)
   ===================================================== */
.wam-floating-edit {
    position: fixed;
    bottom: var(--wam-spacing-md);
    right: var(--wam-spacing-md);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: var(--wam-spacing-2xs);
    padding: 10px 20px;
    background: var(--wam-color-yellow);
    color: var(--wam-color-page-bg) !important;
    text-decoration: none !important;
    border-radius: var(--wam-radius-full);
    font-weight: bold;
    font-size: var(--wam-font-size-sm);
    box-shadow: 0 4px 16px rgba(19, 22, 32, 0.4);
    transition: transform var(--wam-transition), background-color var(--wam-transition);
}

.wam-floating-edit:hover {
    transform: translateY(-2px);
    background: #fff;
}

.wam-floating-edit__icon {
    font-size: 1.25em;
    line-height: 1;
}

@media (max-width: 1024px) {
    .wam-floating-edit {
        bottom: 80px;
        /* Évite de bloquer d'autres boutons mobile */
        right: var(--wam-spacing-sm);
        padding: 12px;
    }

    .wam-floating-edit__label {
        display: none;
    }
}

/* =====================================================
   WAM PRICE CARD (Shortcode [wam_price])
   ===================================================== */
.wam-price-card {
    background: var(--wam-color-card-bg);
    padding: var(--wam-spacing-xl);
    border-radius: var(--wam-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-md);
    margin: var(--wam-spacing-lg) 0;
    max-width: 400px;
}

.wam-price-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--wam-spacing-xs);
}

.wam-price-card__title {
    margin: 0 !important;
}

.wam-price-card__price {
    font-family: var(--wam-font-title-cool);
    /* WAM Font fallback */
    font-weight: normal;
    color: var(--wam-color-subtext);
}

/* Conteneur pour plusieurs tarifs */
.wam-prices-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wam-spacing-md);
    margin: var(--wam-spacing-lg) 0;
}

/* =====================================================
   WOOCOMMERCE ACCOUNT ORDERS BEM
   ===================================================== */
.wam-orders-list {
    display: flex;
    flex-direction: column;
}
.wam-order-card {
    background: var(--wam-color-card-bg);
    border-radius: var(--wam-radius-lg);
}
.wam-order-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--wam-spacing-lg);
}
.wam-order-card__status {
    display: block;
    margin-top: var(--wam-spacing-2xs);
}
.wam-order-card__actions {
    text-align: right;
}
.wam-order-card__total {
    display: block;
    margin-bottom: var(--wam-spacing-2xs);
}
.wam-order-card__link {
    text-decoration: underline;
}
.wam-order-card__items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--wam-spacing-md);
    padding: 0 var(--wam-spacing-lg) var(--wam-spacing-lg);
}
.wam-order-item {
    display: flex;
    gap: var(--wam-spacing-md);
    align-items: center;
    flex-direction: row;
    border: 1px solid var(--wp--preset--color--background-500);
    flex: 1 1 calc(50% - (var(--wam-spacing-md) / 2));
    max-width: 50%;
    border-radius: var(--wam-radius-sm);
    padding: var(--wam-spacing-sm);
    box-sizing: border-box;
}
.wam-order-item__thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--wam-radius-sm);
    overflow: hidden;
}
.wam-order-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wam-order-item__title {
    margin: 0;
}
.wam-order-item__meta {
    display: block;
}
.wam-order-item__price {
    display: block;
    margin-top: var(--wam-spacing-2xs);
}

@media (max-width: 768px) {
    .wam-order-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}