/* ══════════════════════════════════════════════════════════════
   Catalogue formations /formations — overrides spécifiques
   ══════════════════════════════════════════════════════════════
   Le layout principal (sidebar, toolbar, header, dropdown,
   pagination, filter chips, empty state) est porté par
   `zones/content.css`. Ce fichier ne porte que les ajouts
   propres aux cartes formation et à la grille 3 colonnes.
   ══════════════════════════════════════════════════════════════ */

/* ── Grille — 2 colonnes au-dela de 640px ──
   On reste sur 2 colonnes meme aux grands ecrans pour preserver une
   card horizontale lisible (image + titre + thematiques sur une seule
   ligne). 3 colonnes ecraserait l'aspect 16/9 sur grand ecran. */

/* ── Card formation — image background + overlay coloré ──
   Pattern aligné sur `.related-training-card` (fiche formation,
   `zones/training.css`). Card cliquable plein cadre, image de fond
   teintée par la couleur du domaine, titre + thématiques en bas,
   chevron d'affordance à droite. Domaine masqué quand la page parente
   est déjà un filtre domaine (cf. `mode=domain` côté template). */

.training-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--training-accent, var(--color-navy));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.training-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.training-card__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Overlay : melange la couleur du domaine avec `--color-primary-dark`
   pour rattraper les pastels qui casseraient le contraste blanc.
   Degrade vertical pour assurer la lisibilite du titre + tags en bas. */
.training-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    --training-accent-tint: color-mix(
        in srgb,
        var(--training-accent, var(--color-primary-dark)) 75%,
        var(--color-primary-dark)
    );
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--training-accent-tint) 55%, transparent) 0%,
        color-mix(in srgb, var(--training-accent-tint) 82%, transparent) 100%
    );
    pointer-events: none;
}

.training-card__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
}

.training-card__domain {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.training-card__bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.training-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
}

/* Chevron en pastille blanche translucide, anime au hover de la card. */
.training-card__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.training-card:hover .training-card__chevron {
    background: rgba(255, 255, 255, 0.35);
    transform: translateX(2px);
}

.training-card__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: var(--line-height-tight);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 640px) {
    .training-card__title {
        font-size: var(--font-size-lg);
    }
}

.training-card__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.training-card__tag {
    display: inline-flex;
    padding: 0.0625rem 0.5rem;
    border-radius: 100px;
    font-size: 0.625rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(4px);
}

/* ══════════════════════════════════════════════════════════════
   Hero principal — fond neutre pour le catalogue Formations
   ══════════════════════════════════════════════════════════════
   Decision 2026-05-19 : abandon de la teinte ambre
   `--color-section-formations-light` en fond du hero — la card
   editoriale bleutee (zones/content.css) porte deja l'identite
   visuelle. Le fondu navy par defaut du `.list-hero` partage
   n'apporte rien sous la card, on le neutralise sur les modes
   `--with-aside`, `--with-body` et `--with-metrics` (mode index
   avec metriques agregées).
   ══════════════════════════════════════════════════════════════ */

.list-hero--training.list-hero--with-aside,
.list-hero--training.list-hero--with-body,
.list-hero--training.list-hero--with-metrics {
    background-image: none;
    background-color: var(--color-bg);
}

/* Sur la landing /formations, le hero est suivi du bloc
   `.domain-spotlight`. Le `padding-bottom` par defaut du hero
   (`spacing-lg`) s'additionne au `margin-top` du domain-spotlight
   (`spacing-2xl`) et cree un ecart vertical de 56px, alors que les
   sections suivantes (domain → env → teaser) sont uniformes a 32px
   via collapse des margins. On annule ce padding pour obtenir 32px
   uniforme partout. `:has()` evite d'impacter le hero → content-list
   sur /formations/catalogue (qui a son propre selecteur adjacent). */
.list-hero--with-metrics:has(+ .domain-spotlight) {
    padding-bottom: 0;
}

/* Catalogue formations : pas de `margin-bottom` sur le `.list-hero__container`
   en mode card editoriale (override du shared zones/content.css spacing-xl).
   La transition vers la liste se fait directement via le `padding-top: 0`
   sur la `.content-list` deja gere cote selecteur adjacent. */
.list-hero--training.list-hero--with-aside .list-hero__container,
.list-hero--training.list-hero--with-body .list-hero__container,
.list-hero--training.list-hero--with-metrics .list-hero__container {
    margin-bottom: 0;
}

/* Hero training : arrondi plus prononcé sur la card pour donner un
   rythme visuel plus marqué que les pages de listing (radius-lg = 12px).
   1.5rem (24px) garde un look soft sans tomber dans la pill agressive. */
.list-hero--training.list-hero--with-chips .list-hero__container,
.list-hero--training.list-hero--background-image .list-hero__container {
    border-radius: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════
   Domain Spotlight — split sticky aside + cards verticales
   ══════════════════════════════════════════════════════════════
   Affiche les domaines pedagogiques sous le hero en mode index.
   Inspiration Branfere : colonne gauche sticky (eyebrow + titre +
   chapo + CTA "Voir toutes les formations" qui ancre vers la liste
   pagineee en bas), colonne droite avec cards verticales (photo a
   gauche, texte a droite, lien "En savoir plus"). Mobile : tout
   s'empile en colonne unique. Pattern reserve aux domaines — les
   environnements professionnels gardent le strip horizontal compact
   `.hero-cards-strip` plus bas (hierarchie : domaine = primary,
   environnement = filtre secondaire).
   ══════════════════════════════════════════════════════════════ */

.domain-spotlight {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-3xl) auto;
    position: relative;
    z-index: 2;
}

.domain-spotlight__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.domain-spotlight__eyebrow {
    display: inline-block;
    margin: 0;
    padding: 0.35rem 0.75rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.domain-spotlight__title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-primary-dark);
}

.domain-spotlight__lead {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.55;
    color: var(--color-text-light);
    max-width: 38ch;
}

/* CTA partage par les trois asides (domaines + environnements +
   dernieres) — pattern bouton primary navy radius lg. Selecteur
   groupe pour eviter la duplication des regles. */
.domain-spotlight__cta,
.environment-strip__cta,
.recent-trainings__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding: 0.75rem 1.25rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.domain-spotlight__cta:hover,
.domain-spotlight__cta:focus-visible,
.environment-strip__cta:hover,
.environment-strip__cta:focus-visible,
.recent-trainings__cta:hover,
.recent-trainings__cta:focus-visible {
    background: var(--color-primary-dark);
    outline: none;
}

.domain-spotlight__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.domain-spotlight__item {
    margin: 0;
}

/* Card individuelle — pattern "thumbnail plein card" : photo en
   background fullbleed, overlay degrade sombre, texte blanc dessus.
   `aspect-ratio` fixe garantit que toutes les cards d'une rangee ont
   strictement la meme hauteur, independamment de la longueur de la
   description. */
.domain-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.domain-card:hover,
.domain-card:focus-within {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
    transform: translateY(-2px);
}

.domain-card__media-link {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--color-bg-light, #f5f7fa);
}

.domain-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.domain-card:hover .domain-card__image,
.domain-card:focus-within .domain-card__image {
    transform: scale(1.04);
}

.domain-card__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.85;
}

.domain-card--placeholder .domain-card__media-link {
    background: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg));
}

.domain-card--placeholder .domain-card__icon {
    color: var(--color-primary);
    opacity: 0.55;
}

/* Body en overlay bas avec gradient sombre — meme pattern que les
   anciennes hero-card mais avec une typographie plus generaire (titre
   plus grand, ligne meta avec count + lien "En savoir plus"). */
.domain-card__body {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    color: #fff;
    background:
        linear-gradient(
            to top,
            rgba(15, 23, 42, 0.88) 0%,
            rgba(15, 23, 42, 0.65) 35%,
            rgba(15, 23, 42, 0.15) 70%,
            rgba(15, 23, 42, 0) 100%
        );
}

.domain-card--placeholder .domain-card__body {
    background: linear-gradient(
        to top,
        rgba(15, 23, 42, 0.45) 0%,
        rgba(15, 23, 42, 0.20) 50%,
        rgba(15, 23, 42, 0) 100%
    );
}

.domain-card__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.domain-card__title a {
    color: inherit;
    text-decoration: none;
}

.domain-card__title a:hover,
.domain-card__title a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    outline: none;
}

/* La description est masquee en mode overlay : trop verbeuse pour
   tenir sur un fond photo sans gener la lisibilite. Le sens passe
   par le titre + la photo + le count. */
.domain-card__description {
    display: none;
}

.domain-card__meta {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
}

.domain-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.15s ease;
}

.domain-card__link:hover,
.domain-card__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    gap: var(--spacing-sm);
    outline: none;
}

.domain-card__count {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.domain-card--placeholder .domain-card__title,
.domain-card--placeholder .domain-card__link {
    color: var(--color-primary-dark);
    text-shadow: none;
}

.domain-card--placeholder .domain-card__count {
    color: var(--color-text-light);
}

@media (min-width: 64em) {
    .domain-spotlight {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--spacing-2xl);
        align-items: start;
    }
    /* Sticky aligne sous la navbar scrolled : `--header-height` (3.5rem)
       + `--spacing-md` de marge — pattern partage avec article.css /
       member.css pour les sidebars sticky. */
    .domain-spotlight__aside {
        position: sticky;
        top: calc(var(--header-height) + var(--spacing-md));
    }
    /* Cards en grille 2 colonnes dans la colonne droite du split.
       Les cards conservent leur aspect-ratio 4/3 et l'image reste en
       fullbleed (inset: 0) — pas d'override du media-link a ce
       breakpoint, sinon l'image ne remplit que la portion 16/10 du
       card 4/3 (residu de l'ancien layout row). */
    .domain-spotlight__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (min-width: 90em) {
    /* Ultra-wide : 3 colonnes pour absorber 5-6 domaines sans gaspiller
       l'espace horizontal. */
    .domain-spotlight__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ══════════════════════════════════════════════════════════════
   Recent Trainings — liste epuree des dernieres formations publiees
   ══════════════════════════════════════════════════════════════
   Sous le strip environnements en mode='index'. Split sticky
   aside-gauche (eyebrow + titre + paragraphe) + liste verticale
   ordonnee des 5 dernieres formations a droite. Chaque item expose
   le minimum : titre + domaine (pill colore) + count CESU + chevron.
   Pattern reprend le rythme alterne du bloc Branfere domaines :
   aside-gauche → cards-droite (vs environnements en aside-droite).
   ══════════════════════════════════════════════════════════════ */

.recent-trainings {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-3xl) auto;
    position: relative;
    z-index: 2;
}

.recent-trainings__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.recent-trainings__eyebrow {
    display: inline-block;
    margin: 0;
    padding: 0.35rem 0.75rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.recent-trainings__title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-primary-dark);
}

.recent-trainings__lead {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.55;
    color: var(--color-text-light);
    max-width: 38ch;
}

.recent-trainings__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.recent-trainings__item {
    margin: 0;
}

.recent-trainings__item + .recent-trainings__item {
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.recent-trainings__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: var(--spacing-md);
    row-gap: 0.25rem;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.recent-trainings__link:hover,
.recent-trainings__link:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
    outline: none;
}

.recent-trainings__name {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary-dark);
}

.recent-trainings__meta {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.recent-trainings__domain {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--domain-color, var(--color-primary)) 14%, var(--color-bg));
    color: color-mix(in srgb, var(--domain-color, var(--color-primary)) 80%, #000);
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
}

.recent-trainings__cesu {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.recent-trainings__chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-primary);
    transition: transform 0.15s ease;
}

.recent-trainings__link:hover .recent-trainings__chevron,
.recent-trainings__link:focus-visible .recent-trainings__chevron {
    transform: translateX(3px);
}

@media (min-width: 64em) {
    /* Split aside-gauche (1/3) + liste a droite (2/3), sticky aligne
       sous la navbar comme domain-spotlight. Reprend le pattern de
       rythme alterne avec environment-strip (aside-droite). */
    .recent-trainings {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--spacing-2xl);
        align-items: start;
    }
    .recent-trainings__aside {
        position: sticky;
        top: calc(var(--header-height) + var(--spacing-md));
    }
}

/* ══════════════════════════════════════════════════════════════
   Environment Strip — cards horizontales pour les environnements pro
   ══════════════════════════════════════════════════════════════
   Affiche sous le `.domain-spotlight` en mode='index'. Hierarchie
   visuelle : domaines (Branfere split) = lecture primaire ;
   environnements (strip horizontal) = filtre secondaire. Style
   aligne sur les cards Branfere (fond bleute, radius lg, hover
   translate+shadow) pour eviter le decalage visuel entre les deux
   sections successives.
   ══════════════════════════════════════════════════════════════ */

.environment-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-3xl) auto;
    position: relative;
    z-index: 2;
}

.environment-strip__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    max-width: 60ch;
}

.environment-strip__eyebrow {
    display: inline-block;
    margin: 0;
    padding: 0.35rem 0.75rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.environment-strip__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-primary-dark);
}

.environment-strip__lead {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.55;
    color: var(--color-text-light);
}

.environment-strip__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.environment-strip__item {
    margin: 0;
}

.environment-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.environment-card:hover,
.environment-card:focus-visible {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
    outline: none;
}

.environment-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg-light, #f5f7fa);
}

.environment-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.environment-card:hover .environment-card__image,
.environment-card:focus-visible .environment-card__image {
    transform: scale(1.04);
}

.environment-card__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    opacity: 0.45;
}

.environment-card--placeholder .environment-card__media {
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
}

.environment-card__body {
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.environment-card__name {
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary-dark);
}

.environment-card__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    font-weight: 500;
}

@media (min-width: 64em) {
    /* Split inverse vs `.domain-spotlight` : cards a gauche (2/3),
       aside descriptif a droite (1/3) avec sticky aligne sous la
       navbar. Cree un rythme alterne (domaines aside-gauche /
       environnements aside-droite) qui dynamise la landing. */
    .environment-strip {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: var(--spacing-2xl);
        align-items: start;
    }
    .environment-strip__grid {
        grid-column: 1;
        grid-row: 1;
    }
    .environment-strip__header {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: calc(var(--header-height) + var(--spacing-md));
    }
}

/* ══════════════════════════════════════════════════════════════
   Hero strip — pattern compact legacy (n'est plus utilise depuis
   l'extraction du strip environnements vers `.environment-strip`).
   Conserve tant qu'aucun autre consommateur ne migre. A supprimer
   dans une passe de cleanup ulterieure.
   ══════════════════════════════════════════════════════════════ */

.hero-cards-strip {
    margin: var(--spacing-xl) auto;
    position: relative;
    z-index: 2;
}

.hero-cards-strip__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-sm);
}

.hero-cards-strip__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-sm);
    /* `auto-fit minmax` 12rem absorbe 4 (domaines) ou 5
       (environnements pro) sur une seule ligne dès ~960px, wrap propre
       en dessous. Min `min(100%, 12rem)` empêche l'overflow sur très
       petits écrans (chaque card prend 100%). */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.hero-card {
    display: block;
    height: 13rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: #fff;
    background: #1f2937;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.hero-card:hover,
.hero-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.hero-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hero-card:hover .hero-card__image,
.hero-card:focus-visible .hero-card__image {
    transform: scale(1.06);
}

.hero-card__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-card__icon svg {
    width: 5rem;
    height: 5rem;
    color: #fff;
    opacity: 0.35;
    stroke-width: 1.5;
}

.hero-card__body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.55) 40%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0) 100%);
}

.hero-card__name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-tight);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    flex: 1;
    min-width: 0;
}

.hero-card__chevron {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.hero-card:hover .hero-card__chevron,
.hero-card:focus-visible .hero-card__chevron {
    transform: translateX(4px);
}

/* ── Variante placeholder : card sans photo (icone Lucide seulement)
   ───────────────────────────────────────────────────────────────── */

.hero-card--placeholder {
    background: var(--color-bg-light, #f5f7fa);
    color: var(--color-text, #1f2937);
    border: 1px solid var(--color-border, #e5e7eb);
    box-shadow: none;
}

.hero-card--placeholder:hover,
.hero-card--placeholder:focus-visible {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary);
}

.hero-card--placeholder .hero-card__icon svg {
    color: var(--color-text-light, #6b7280);
    opacity: 0.55;
}

.hero-card--placeholder .hero-card__body {
    /* Surcharge le gradient sombre — pas necessaire sur fond clair,
       le texte est deja contraste. */
    background: none;
    color: var(--color-text, #1f2937);
}

.hero-card--placeholder .hero-card__name {
    text-shadow: none;
}

.hero-card--placeholder .hero-card__chevron {
    color: var(--color-primary);
}

/* Le bouton "Rechercher" du hero reprend la couleur primary navy par defaut
   (cf. zones/content.css `.search-field--hero .search-field__submit.btn`) —
   coherent avec la card editoriale bleutee, plus de teinte ambre.
   Decision 2026-05-19 : abandon des couleurs section formations. */