/*
 * wp-content/themes/msf/assets/css/pages/formations.css
 *
 * Page « Catalogue Formations » (page-formations.php).
 * Mobile-first strict, s'appuie exclusivement sur les tokens de
 * assets/css/base/token.css : aucune couleur en dur, le mode sombre
 * fonctionne donc sans une seule règle dédiée.
 *
 * Sommaire
 *   1. Variables locales & utilitaires
 *   2. Hero
 *   3. Barre de filtres (select + segmented controls + compteur)
 *   4. Grille
 *   5. Carte
 *   6. Pagination (surcharges du composant partagé)
 *   7. Breakpoints 768px / 1024px / 1280px
 */

@charset "UTF-8";

/* ─────────────────────────────────────────────────────────────
   1. Variables locales & utilitaires
   ───────────────────────────────────────────────────────────── */

.formations {
    /* Gouttière horizontale unique, partagée par le hero, les filtres et la grille. */
    --formations-gutter: 6vw;
    --formations-radius: 8px;
    --formations-radius-sm: 6px;
    --formations-pill-radius: 100px;
    --formations-accent-bar: 4px;
    --formations-grid-gap: 1.5rem;
    --formations-card-padding: 1.25rem;
    --formations-transition: 180ms ease;
}

/* ─────────────────────────────────────────────────────────────
   2. Hero
   ───────────────────────────────────────────────────────────── */

.formations-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    /*
     * Hauteur en rem plutôt qu'en vh : sur mobile, une valeur en vh dépend de
     * la barre d'URL du navigateur et laisse une large bande d'image vide sous
     * le texte.
     */
    min-height: 15rem;
    padding: 2.5rem var(--formations-gutter);
}

.formations-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background-color: var(--surface-container-highest);
}

.formations-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 40%;
}

/*
 * Voile assombrissant : garantit le contraste AA du titre et du sous-titre
 * quelle que soit la photo mise en avant choisie en back-office.
 */
.formations-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    /*
     * Sur mobile le texte occupe toute la largeur du visuel : le voile y est
     * volontairement plus dense, il est éclairci à partir de 768px où la photo
     * reste visible à droite du texte.
     */
    background: linear-gradient(100deg,
            rgb(0 0 0 / 82%) 0%,
            rgb(0 0 0 / 70%) 55%,
            rgb(0 0 0 / 55%) 100%);
}

.formations-hero__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 46rem;
}

.formations-hero__title {
    color: #fff;
    text-wrap: balance;
}

.formations-hero__title-accent {
    display: inline-block;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    border-bottom: 3px solid var(--primary);
    padding-bottom: 0.1em;
}

.formations-hero__subtitle {
    color: #fff;
    font-size: var(--body-medium-font-size);
    line-height: var(--body-medium-line-height);
    max-width: 34rem;
}

/* ─────────────────────────────────────────────────────────────
   3. Barre de filtres
   ───────────────────────────────────────────────────────────── */

.formations-filters {
    background-color: var(--surface-container-var);
    border-bottom: 1px solid var(--outline);
    padding: 1rem var(--formations-gutter);
}

.formations-filters__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.formations-filters__group {
    border: 0;
    min-width: 0;
}

/* --- Select catégories --- */

.formations-select {
    position: relative;
    display: block;
}

.formations-select__control {
    appearance: none;
    width: 100%;
    padding: 0.55rem 2.5rem 0.55rem 0.9rem;
    border: 1px solid var(--outline);
    border-radius: var(--formations-radius);
    background-color: var(--surface-container);
    color: var(--on-surface-var);
    font-size: var(--body-medium-font-size);
    line-height: var(--body-medium-line-height);
    cursor: pointer;
    transition: border-color var(--formations-transition);
}

.formations-select__control:hover {
    border-color: var(--primary);
}

.formations-select__control:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.formations-select__chevron {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    width: 1.15rem;
    height: 1.15rem;
    transform: translateY(-50%);
    pointer-events: none;
    fill: none;
    stroke: var(--on-surface);
}

/* --- Segmented controls (Type / Format) --- */

.formations-segmented {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--outline);
    border-radius: var(--formations-radius);
    background-color: var(--surface-container);
}

/*
 * Le bouton radio natif reste dans le flux (pas de display:none) afin de
 * conserver le focus clavier et la sémantique ; il est rendu invisible et
 * l'état visuel est porté par son <label>.
 */
.formations-segmented__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.formations-segmented__label {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.35rem 0.75rem;
    border-radius: var(--formations-radius-sm);
    color: var(--on-surface);
    font-size: var(--body-medium-font-size);
    line-height: var(--body-medium-line-height);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--formations-transition),
        color var(--formations-transition);
}

.formations-segmented__label:hover {
    background-color: var(--surface-container-highest);
}

/* État actif : Type en accent primaire (orange), Format en accent secondaire (bleu). */
.formations-segmented--type .formations-segmented__input:checked + .formations-segmented__label {
    background-color: var(--primary);
    color: var(--on-primary);
    font-weight: var(--bold-weight);
}

.formations-segmented--format .formations-segmented__input:checked + .formations-segmented__label {
    background-color: var(--secondary);
    color: var(--on-secondary);
    font-weight: var(--bold-weight);
}

.formations-segmented__input:focus-visible + .formations-segmented__label {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --- Bouton de repli sans JavaScript --- */

.formations-filters__submit {
    align-self: flex-start;
    padding: 0.5rem 1.25rem;
    border-radius: var(--formations-radius);
    background-color: var(--secondary);
    color: var(--on-secondary);
    font-weight: var(--bold-weight);
}

/* --- Réinitialiser + compteur --- */

.formations-filters__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 1rem;
    padding-top: 0.25rem;
}

.formations-filters__reset {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--on-surface);
    font-size: var(--body-medium-font-size);
    line-height: var(--body-medium-line-height);
    transition: color var(--formations-transition);
}

a.formations-filters__reset:hover,
a.formations-filters__reset:focus-visible {
    color: var(--primary);
}

.formations-filters__reset--disabled {
    opacity: 0.45;
}

.formations-filters__reset-icon {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    flex: 0 0 auto;
}

.formations-filters__count {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    font-size: var(--body-medium-font-size);
    line-height: var(--body-medium-line-height);
}

.formations-filters__count-value {
    color: var(--on-surface-var);
    font-size: var(--body-large-font-size);
    font-weight: var(--bold-weight);
}

.formations-filters__count-label {
    color: var(--on-surface);
    font-size: var(--body-medium-font-size);
}

/* ─────────────────────────────────────────────────────────────
   4. Grille
   ───────────────────────────────────────────────────────────── */

.formations__results {
    padding: 2.5rem var(--formations-gutter) 4rem;
}

.formations__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--formations-grid-gap);
}

.formations__grid-item {
    display: flex;
    min-width: 0;
}

.formations__empty {
    text-align: center;
    padding: 4rem 0;
    color: var(--on-surface);
}

.formations__empty-reset {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--primary);
    font-weight: var(--bold-weight);
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   5. Carte
   ───────────────────────────────────────────────────────────── */

.formation-card {
    /* Accent par défaut ; surchargé par les modificateurs ci-dessous. */
    --card-accent: var(--secondary);
    --card-accent-on: var(--on-secondary);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    padding: var(--formations-card-padding);
    border: 1px solid var(--outline);
    border-top: var(--formations-accent-bar) solid var(--card-accent);
    border-radius: 0 0 var(--formations-radius) var(--formations-radius);
    background-color: var(--surface-container);
    transition: transform var(--formations-transition),
        box-shadow var(--formations-transition);
}

.formation-card--metiers {
    --card-accent: var(--secondary);
    --card-accent-on: var(--on-secondary);
}

.formation-card--competences {
    --card-accent: var(--primary);
    --card-accent-on: var(--on-primary);
}

.formation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
}

/* Anneau de focus porté par la carte quand son lien étiré reçoit le focus. */
.formation-card:has(.formation-card__link:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.formation-card__header {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.formation-card__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.formation-card__pill {
    padding: 0.15rem 0.6rem;
    border-radius: var(--formations-pill-radius);
    font-size: var(--body-medium-font-size);
    line-height: var(--body-medium-line-height);
    font-weight: var(--bold-weight);
    white-space: nowrap;
}

.formation-card__pill--type {
    background-color: var(--card-accent);
    color: var(--card-accent-on);
}

.formation-card__pill--certification,
.formation-card__pill--cpf {
    border: 1px solid var(--outline);
    background-color: var(--surface-container-highest);
    color: var(--on-surface-var);
}

.formation-card__title {
    font-size: var(--headline-large-font-size);
    line-height: var(--headline-large-line-height);
    color: var(--on-surface-var);
    text-wrap: balance;
}

.formation-card__link {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/*
 * « Stretched link » : un seul lien par carte, mais toute la surface est
 * cliquable. Le pseudo-élément est au-dessus du fond et sous les contenus
 * en position relative (aucun ici), donc rien n'est masqué.
 */
.formation-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.formation-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--on-surface);
    font-size: var(--body-medium-font-size);
    line-height: var(--body-medium-line-height);
}

.formation-card__footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
}

.formation-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.9rem;
}

.formation-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--on-surface);
    font-size: var(--body-medium-font-size);
    line-height: var(--body-medium-line-height);
}

.formation-card__meta-item--certification {
    color: var(--secondary);
    font-weight: var(--bold-weight);
}

.formation-card__meta-item--certification .formation-card__meta-text {
    color: var(--secondary);
}

.formation-card__meta-text {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.formation-card__icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
}

.formation-card__cta {
    align-self: flex-end;
    color: var(--card-accent);
    font-size: var(--body-medium-font-size);
    line-height: var(--body-medium-line-height);
    font-weight: var(--bold-weight);
}

.formation-card:hover .formation-card__cta {
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   6. Pagination (surcharges du composant partagé)
   ───────────────────────────────────────────────────────────── */

/*
 * Le composant partagé attend un conteneur <section class="pagination">.
 * Ici le conteneur est un <nav> — la sémantique attendue pour une pagination —
 * donc les règles `section.pagination svg` ne s'appliquent pas : on les
 * redéclare dans notre scope plutôt que de modifier le composant, afin de ne
 * rien casser sur le blog et les grilles existantes.
 */
.formations__pagination {
    /* Le composant utilise --corner-radius, qui n'est pas défini dans token.css. */
    --corner-radius: var(--formations-radius-sm);

    margin-top: 2.5rem;
}

.formations__pagination svg {
    display: block;
    width: var(--pagination-svg-size, 1rem);
    height: var(--pagination-svg-size, 1rem);
    fill: var(--on-secondary);
    stroke: unset;
}

/* Numéros de page : plus sobres que le réglage par défaut du composant. */
.formations__pagination .pagination-link {
    font-size: var(--headline-small-font-size);
    line-height: var(--headline-small-line-height);
    border-radius: var(--formations-radius-sm);
}

.formations__pagination a.pagination-link:not(.pagination-prev):not(.pagination-next):hover {
    background-color: var(--surface-container-highest);
}

/* Flèches précédent/suivant : carrés compacts, et non les larges rectangles
   du réglage par défaut du composant. */
.formations__pagination .pagination-prev,
.formations__pagination .pagination-next {
    padding: 0;
}

/* Sur petit écran, on resserre les puces pour qu'une série complète tienne
   sur une seule ligne. */
@media screen and (max-width: 767px) {
    .formations__pagination .pagination-link {
        min-width: 2rem;
        min-height: 2rem;
        font-size: var(--body-large-font-size);
    }

    .formations__pagination .pagination-list {
        gap: 0.35rem;
    }
}

/* L'ellipse suit la taille des numéros, pas celle par défaut du composant. */
.formations__pagination .pagination-ellipsis span {
    font-size: var(--headline-small-font-size);
    line-height: var(--headline-small-line-height);
    color: var(--on-surface);
}

/* Page courante : pastille pleine, comme sur la maquette. */
.formations__pagination span.pagination-current {
    background-color: var(--secondary);
    color: var(--on-secondary);
}

/*
 * pagination-style.css retourne les SVG des deux premiers <li> (hypothèse
 * « première + précédente »). Ici la flèche précédente est seule en tête :
 * on pilote donc explicitement l'orientation par classe.
 */
.formations__pagination .pagination-list .pagination-prev svg {
    transform: rotateZ(180deg);
}

.formations__pagination .pagination-list .pagination-next svg {
    transform: none;
}

/* ─────────────────────────────────────────────────────────────
   7. Breakpoints
   ───────────────────────────────────────────────────────────── */

@media screen and (min-width: 768px) {
    .formations {
        --formations-gutter: 8vw;
        --formations-grid-gap: 1.75rem;
        --formations-card-padding: 1.5rem;
    }

    .formations-hero {
        min-height: 20rem;
        padding: 4rem var(--formations-gutter);
    }

    .formations-hero__media::after {
        background: linear-gradient(100deg,
                rgb(0 0 0 / 78%) 0%,
                rgb(0 0 0 / 55%) 55%,
                rgb(0 0 0 / 25%) 100%);
    }

    .formations-filters__form {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1rem;
    }

    .formations-filters__group--select {
        flex: 0 1 15rem;
    }

    .formations-filters__summary {
        flex: 1 1 100%;
        justify-content: flex-end;
        gap: 0.35rem 1.25rem;
    }

    .formations__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1024px) {
    .formations {
        --formations-gutter: 10vw;
        --formations-grid-gap: 2rem;
    }

    .formations-hero {
        min-height: 24rem;
        padding: 5rem var(--formations-gutter);
    }

    .formations-filters {
        padding: 1.15rem var(--formations-gutter);
    }

    .formations-filters__summary {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .formations__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .formations__results {
        padding: 3.5rem var(--formations-gutter) 5rem;
    }
}

@media screen and (min-width: 1280px) {
    .formations-hero {
        min-height: 28rem;
    }
}