/* ============================================================
   ARCHIVE : Formations — liste des formations
   ============================================================ */

/* ── Layout général ── */
.page-formations {
    padding-bottom: var(--sp-12);
}

/* Pleine largeur — aligné sur le header */
.container-full {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* Breadcrumb */
.breadcrumb.container-full {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* container--narrow décalé à droite */
.page-formations .container--narrow {
    margin-left: 11%;
    margin-right: auto;
}

/* ── Titre page + barre soulignée ── */
.page-formations__title {
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.07em;
    line-height: 0.85;
    color: var(--bm-ink);
    margin-top: 0;
    margin-bottom: var(--sp-8);
    font-style: normal;
}
.page-formations__title.container-full {
    padding-left: calc(var(--container-pad) + 30px);
    padding-right: var(--container-pad);
}
.page-formations__title::after { display: none; }

.page-formations__title-inner {
    display: inline-block;
    position: relative;
    padding-bottom: calc(17px + var(--sp-4));
}
.page-formations__title-inner::after {
    content: "";
    position: absolute;
    left: calc(11vw + 290px - max(0px, (100vw - 2800px) / 2)); /* compense le centrage du titre .container-full sur grand écran pour rester aligné à gauche du bandeau Déclarer */
    right: 0;
    bottom: 0;
    height: 17px;
    background: var(--bm-ink);
}

/* ── Bandeau "Déclarer vos formations" ── */
.formations-declare {
    display: block;
    margin: 0 0 var(--sp-8);
    padding-left: 320px;
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-fast);
}
.formations-declare:hover { transform: translateY(-2px); }
.formations-declare__inner {
    display: grid;
    grid-template-columns: 1fr 45%;
    align-items: stretch;
    background: var(--bm-beige);
    border-radius: 0 var(--r-2xl) 0 0;
    overflow: hidden;
    height: 145px;
    width: 100%;
}
.formations-declare__text {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    font-weight: 700;
    color: var(--bm-ink);
    line-height: 2rem;
    letter-spacing: -0.2rem;
    padding: var(--sp-6) var(--sp-7);
    display: flex;
    align-items: center;
}
.formations-declare__image { position: relative; overflow: hidden; }
.formations-declare__image img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    filter: grayscale(20%);
}

/* ── Liste ── */
.formations-list { display: flex; flex-direction: column; gap: var(--sp-7); }
.formations-list__empty { text-align: center; font-size: var(--fs-lg); color: var(--bm-text-muted); padding: var(--sp-12) 0; }

/* ── Carte ── */
.formation-card {
    display: grid;
    grid-template-columns: auto 1fr;
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    border-radius: 0 0 var(--r-2xl) 0;
    overflow: hidden;
    align-items: stretch;
}
.formation-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.formation-card__image {
    position: relative; overflow: hidden;
    background: var(--bm-dark);
    aspect-ratio: 1 / 1;
    width: 320px; max-width: 32vw;
    flex-shrink: 0;
}
.formation-card__image--empty { background: var(--bm-beige); }
.formation-card__image img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(30%);
}
.formation-card__body {
    background: var(--card-color, #4ba8b2);
    padding: var(--sp-6) var(--sp-7);
    display: flex; flex-direction: column;
    justify-content: space-between;
    color: var(--bm-ink);
    border-radius: 0 0 var(--r-2xl) 0;
    min-height: 100%;
}
.formation-card__title {
    font-size: 2.3rem;
    font-weight: 700;
    margin: 0 0 var(--sp-3);
    line-height: 1.1;
    color: var(--bm-ink);
    text-transform: none;
    letter-spacing: -0.06em;
}
.formation-card__excerpt {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.10rem;
    line-height: 1.45;
    margin: 0 0 var(--sp-5);
    color: var(--bm-ink);
}
.formation-card__footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-1); }
.formation-card__type {
    display: block; font-size: var(--fs-sm);
    font-style: italic; font-weight: var(--fw-regular);
    color: var(--bm-white); letter-spacing: 0.03em; line-height: 1.1;
}
.formation-card__category {
    display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--bm-white); padding: 4px 10px;
    border: 1.5px solid var(--bm-white); border-radius: 999px;
    align-self: flex-start; line-height: 1.1; margin-bottom: var(--sp-1);
}
.formation-card__date {
    display: block;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--bm-white);
    letter-spacing: -0.06em;
}

/* ── Pagination (style identique à l'annuaire : gros chiffres beiges) ── */
.formations-pagination {
    margin-top: var(--sp-10);
}

.formations-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.formations-pagination .page-numbers li {
    display: inline-flex;
}

.formations-pagination .page-numbers a,
.formations-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 2.5rem;
    padding: 0 var(--sp-1);
    font-family: var(--ff-sans);
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    color: #e2e1d5;
    text-decoration: none;
    border: 0;
    background: none;
    border-radius: var(--r-sm);
    transition: color var(--t-fast);
}

.formations-pagination .page-numbers a:hover,
.formations-pagination .page-numbers .current {
    color: #3b4242;
    background: none;
}

.formations-pagination .page-numbers .dots {
    color: #e2e1d5;
}

/* ============================================================
   ARCHIVE : Évènements — override en grille 3 colonnes
   ============================================================ */
.page-formations--events .container--narrow {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding-left: calc(var(--container-pad) + clamp(100px, 14.5vw, 220px));
    padding-right: var(--container-pad);
}

.page-formations--events .formations-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-7) var(--sp-6);
}

.page-formations--events .formation-card {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: visible;
}

.page-formations--events .formation-card__image {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0 var(--r-xl) 0 0;
    overflow: hidden;
}

.page-formations--events .formation-card__image img {
    filter: none;
}

.page-formations--events .formation-card__body {
    background: #3b4242;
    color: var(--bm-white);
    padding: var(--sp-5) var(--sp-6);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    min-height: 110px;
    gap: var(--sp-3);
    flex: 1 0 auto;
}
.page-formations--events .formation-card {
    align-self: stretch;
}

.page-formations--events .formation-card__title {
    font-size: 1.9rem;
    color: var(--bm-white);
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1;
    order: 2;
    min-height: 2.4em;
}

.page-formations--events .formation-card__footer {
    order: 1;
    margin-top: 0 !important;
    flex-direction: row;
    align-items: center;
}

.page-formations--events .formation-card__date {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--bm-white);
    letter-spacing: 0;
    line-height: 1;
}

.page-formations--events .formation-card__excerpt,
.page-formations--events .formation-card__category {
    display: none;
}

/* Tablette : 2 colonnes */
@media (max-width: 1100px) {
    .page-formations--events .formations-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Responsive : ≤ 900px (photo + body empilés, container pleine largeur) ── */
@media (max-width: 900px) {
    .page-formations .container--narrow {
        margin-left: 0;
    }

    .page-formations__title {
        font-size: 2.2rem;
    }

    .page-formations__title-inner::after {
        /* mobile : trait en segment, aligné à droite du titre (comme desktop) */
        left: auto;
        right: 0;
        width: 34%;
        height: 8px;
    }
    .page-formations__title-inner {
        padding-bottom: calc(8px + var(--sp-2));
    }
    .page-formations__title {
        margin-bottom: var(--sp-5);
    }

    .formations-declare {
        padding-left: 0;
    }
    .formations-declare__inner {
        grid-template-columns: 1fr 40%;
        min-height: 130px;
        width: 100%;
    }
    .formations-declare__text {
        padding: var(--sp-4);
        font-size: var(--fs-lg);
    }

    .formation-card {
        grid-template-columns: 1fr;
    }

    .formation-card__image {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1;
    }

    .formation-card__body {
        padding: var(--sp-5);
        min-height: auto;
    }

    .formation-card__title {
        font-size: 1.1rem;
    }

    .formation-card__date {
        font-size: 1.6rem;
    }

    /* Évènements : 1 colonne en mobile */
    .page-formations--events .formations-list {
        grid-template-columns: 1fr;
    }
    /* Évènements : retirer le grand décalage gauche (calé sur le hero du single) en mobile */
    .page-formations--events .container--narrow {
        padding-left: var(--container-pad);
    }
}


/* Fil d'ariane collé au bord gauche (y compris très grand écran) */
.page-formations .breadcrumb.container-full {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}