/* ══════════════════════════════════════════════════════════════
   Training detail — fiche publique /formations/{slug}
   ══════════════════════════════════════════════════════════════
   Layout/typographie hérités de :
   - article.css : .article-single*, .article-sidebar*, .prose-content
   - content.css : .training-card (formations associées)
   - shared.css  : .btn, .container

   Ce fichier ne porte que les ajouts propres à la fiche formation :
   - chips (modalité, durée, capacité, CESU)
   - panneaux d'aside non-sticky (faits-clés, documents, mini-carte, CESU)
   - Qualiopi <dl>
   - sessions list
   ══════════════════════════════════════════════════════════════ */

/* La fiche formation a sa propre cloture visuelle en bas (section
   "Ces formations pourraient vous interesser" + margin-top dedie),
   le padding-bottom `--spacing-3xl` herite de `.article-single`
   creusait un vide superflu. Override desktop uniquement : sur mobile
   `.article-single` reserve la place de la barre d'actions fixee. */
@media (min-width: 64em) {
    .article-single.training-single {
        padding-bottom: 0;
    }
}

/* ── Body ── */

.training-single__body p {
    white-space: normal;
}

/* Rubrique Qualiopi : aération haut/bas pour rythmer le TOC sticky. */
.training-single__section + .training-single__section {
    margin-top: var(--spacing-xl);
}

/* Le h2 d'une rubrique est porté par l'espacement entre rubriques
   (`--spacing-xl` ci-dessus). Pas de `margin-top: 2.5rem` herite de
   `.prose-content h2` — sinon double creux au-dessus de chaque h2,
   et un creux parasite au-dessus du premier h2 (qui n'a pas de soeur
   en amont). */
.training-single__section > h2 {
    margin-top: 0;
}

/* Offset top sur toutes les ancres TOC (rubriques + sessions + CESU)
   pour que le scroll smooth ne masque pas le titre sous la nav fixe. */
.training-single h2[id] {
    scroll-margin-top: 5rem;
}

/* ── Sessions ── */

.training-single__sessions-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-md);
}

/* Segment toggle pour le filtre de période (3/6/12 mois/toutes).
   Pattern pill avec option active en fond primary. Liens accessibles
   (pas de JS) — chaque option est une `<a>` qui recharge la page. */
.training-single__period-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    padding: 0.1875rem;
    background: var(--color-bg-light);
    border-radius: 100px;
}

.training-single__period-option {
    padding: 0.3125rem 0.75rem;
    border-radius: 100px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.training-single__period-option:hover {
    color: var(--color-primary);
}

.training-single__period-option--active {
    background: var(--color-primary);
    color: #fff;
}

.training-single__period-option--active:hover {
    background: var(--color-primary-dark);
    color: #fff;
}

/* Bannière hint quand un tri proximité est appliqué — visible discret
   pour signaler à l'utilisateur que le tri n'est pas seulement
   chronologique. */
.training-single__proximity-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    margin: 0;
    background: color-mix(in srgb, var(--color-primary) 8%, #fff);
    color: var(--color-primary-dark);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    line-height: 1.3;
}

.training-single__proximity-hint svg {
    flex-shrink: 0;
    opacity: 0.75;
}

.training-single__sessions {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.training-single__session {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 40em) {
    .training-single__session {
        grid-template-columns: 4.5rem 1fr auto;
    }
}

.training-single__session:hover {
    border-color: var(--color-primary);
    box-shadow: 0 1px 6px rgba(42, 77, 146, 0.06);
}

/* HAUTEUR COMMUNE A TOUTES LES RANGEES. Le gabarit ne rend plus qu'une seule
   forme — jour, mois, annee — donc rien ne peut plus se replier ; `min-height`
   couvre le seul cas restant, le repli textuel d'une session sans date, qui
   n'a que deux lignes. Tant que la pastille portait la plage, il fallait en
   plus un `nowrap` et une colonne plus large : c'est la forme unique qui a
   rendu ces deux beliers inutiles, pas leur reglage. */
.training-single__session-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    text-align: center;
    line-height: 1;
    min-width: 3.5rem;
    min-height: 4rem;
}

.training-single__session-day {
    font-size: 1.25rem;
    font-weight: 800;
}

.training-single__session-month {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.1875rem;
}

.training-single__session-year-sm {
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin-top: 0.125rem;
    opacity: 0.75;
}

.training-single__session-year-lg {
    font-size: var(--font-size-lg);
    font-weight: 800;
}

.training-single__session-body {
    min-width: 0;
}

.training-single__session-title {
    margin: 0 0 0.25rem;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
}

.training-single__session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.training-single__session-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.training-single__session-meta svg {
    flex-shrink: 0;
    vertical-align: -1px;
}

.training-single__session-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    grid-column: 1 / -1;
}

@media (min-width: 40em) {
    .training-single__session-actions {
        grid-column: auto;
        align-items: flex-end;
    }
}

.training-single__session-status {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-bg-light);
    color: var(--color-text-light);
    white-space: nowrap;
}

.training-single__session-status--open {
    background: #e8f5e9;
    color: #2e7d32;
}

.training-single__session-status--in_progress {
    background: #fff3e0;
    color: #e65100;
}

.training-single__session-status--planned {
    background: color-mix(in srgb, var(--color-primary) 12%, #fff);
    color: var(--color-primary-dark);
}

.training-single__session-status--full {
    background: #fde7e7;
    color: #b71c1c;
}

.training-single__session-status--cancelled {
    background: var(--color-bg-light);
    color: var(--color-text-light);
    text-decoration: line-through;
}

.training-single__no-sessions {
    padding: var(--spacing-lg);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    text-align: center;
}

.training-single__no-sessions p {
    margin: 0;
}

/* PAS DE REGLE SUR LES LIENS DE CET ETAT VIDE. Elle habillait le balisage
   maison d'avant, et depuis que la brique partagee le rend elle ECRASAIT son
   bouton : `content-list__reset-link` pose un fond navy et un texte blanc,
   `color: var(--color-primary)` remettait le texte en navy. Fond et encre
   identiques, contraste 1:1, libelle invisible — mesure du 2026-09-01.

   La classe `--no-sessions-action` est partie avec le meme balisage. */

/* ── Panneaux d'aside ── */

.training-single__panel {
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
}

/* Faits-clés */

.training-single__keyfacts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.training-single__keyfacts li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding: 0.4375rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.training-single__keyfacts li:last-child {
    border-bottom: none;
}

.training-single__keyfacts span {
    color: var(--color-text-light);
}

.training-single__keyfacts strong {
    color: var(--color-text);
    font-weight: 600;
    text-align: right;
}

/* Documents */

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

.training-single__downloads a {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.training-single__downloads a:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

/* ── Section « Où la suivre » : sessions + cartographie en 2 colonnes ──
   Grand écran (>= 64em) : grille `sessions | carte+CESUs` à proportions
   égales (légère préférence sessions pour absorber la pagination).
   Mobile : empile en colonne unique, sessions d'abord (besoin métier
   primaire), cartographie ensuite. Fond gris pâle pour distinguer la
   zone du body éditorial du dessus. */

/* LA ZONE « OU » SUIT LE RYTHME DES SECTIONS D'APRES-CARTE, pas le sien.

   Elle portait une bande de fond teintee et un rembourrage de 48 px en haut et
   en bas, quand les blocs de rebond du site — « A lire aussi » d'une actualite,
   « Ces formations pourraient vous interesser » ici meme — se posent a meme le
   fond de page avec une seule marge haute de 48 px. Trois traitements pour la
   meme situation sur une seule page : la carte, puis une bande, puis rien.

   Mesure du 2026-09-01 : la bande ajoutait 96 px de rembourrage a une marge de
   48, soit un ecart de 144 px la ou les autres sections en ont 48. C'est ce que
   le rythme paie. */
.training-single__where {
    margin-top: var(--spacing-2xl);
}

/* TOUTES LES SECTIONS S'ALIGNENT SUR LA COLONNE DE LECTURE.

   La page portait TROIS largeurs, mesurees le 2026-09-01 a 1707 px : le
   mobilier de page (entete, lettre du reseau, pied) a 1240, la colonne de
   lecture a 1192, les sections d'apres-carte a 1152. Trois bords gauches a
   258, 278 et 294 — l'oeil suit un bord vertical, et il en avait trois.

   La reference est la CARTE DE LECTURE : c'est le bloc dont les sections
   d'apres-carte prolongent la lecture, et son bord gauche est celui que le
   regard vient de suivre sur toute la hauteur du texte. On reprend donc les
   mesures de `.container` — 1240 borne, gouttiere de `spacing-md` — qui
   donnent exactement la meme colonne de contenu.

   L'alignement passe par la CLASSE `.container` posee dans le gabarit, et non
   par une recopie de ses mesures ici : `--container-max` se lit bien, mais sa
   gouttiere vaut 24 px et non `--spacing-md` comme sa declaration le laisse
   croire — surchargee ailleurs. Recopier des nombres qu'on ne controle pas
   produit un ecart de 8 px que personne ne retrouve. La classe, elle, suit.

   Le bloc de rebond juste dessous porte `.container` A LA PLACE de son
   conteneur propre, qui n'apportait que ces trois memes mesures a une valeur
   differente. Deux conteneurs sur un meme element se disputent leur
   `max-width` selon l'ordre des feuilles ; un seul ne se dispute rien. La
   fiche d'actualite garde le sien : corriger son decalage depasse ce lot. */

/* DEUX COLONNES AU-DELA DU PALIER : les dates a gauche, la cartographie a
   droite. En dessous, elles s'empilent, les dates d'abord. */
.training-single__where-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
}

@media (min-width: 64em) {
    .training-single__where-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
    }

    /* La carte ne s'etire plus a la hauteur de sa voisine. Elle le faisait par
       `flex: 1` et `aspect-ratio: auto`, ce qui marchait quand la colonne des
       sessions portait cinq cards ; des que la formation n'en annonce aucune,
       c'est la carte qui imposait sa hauteur et la colonne gauche se vidait.
       `align-items: start` laisse chacune a sa hauteur propre. */

    /* Cards de session resserrees en bureau : le rembourrage vertical passe de
       16 a 8 px, ce qui rapproche la colonne des dates de la hauteur de la
       carte sans etirer quoi que ce soit. */
    .training-single__where-col--sessions .training-single__session {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Espace liste <-> pagination resserre : le composant global pose une marge
       et un rembourrage prevus pour les listes de catalogue, qui creaient un
       trou d'environ 80 px sous la derniere date. */
    .training-single__where-col--sessions .training-single__sessions {
        margin-bottom: 0;
    }

    .training-single__where-col--sessions .pagination {
        margin-top: var(--spacing-md);
        padding-top: var(--spacing-md);
    }
}

/* LA LEGENDE DES ETATS, en rangee sous les commandes. Les pastilles y sont
   vides de texte : c'est la couleur qu'elles nomment, et le libelle la suit. */
.training-single__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
    align-items: center;
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.training-single__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
}

.training-single__legend .training-single__session-status {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    border-radius: var(--radius-pill);
}

.training-single__where-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

.training-single__where-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm) var(--spacing-md);
    min-height: 2.25rem;
}

.training-single__where-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary-dark);
    letter-spacing: -0.01em;
}

.training-single__where-caption {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    flex-basis: 100%;
}

/* ── Mini carte + popover CESU au clic département ──
   Composant `trainingCesuMap` (Alpine) : chaque département coloré
   ouvre un panneau listant ses CESU. Pas de liste dupliquée sous la
   carte, pas de sous-titre comptage : la carte porte l'info. */

.training-single__map {
    display: block;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-navy) 6%, transparent);
    /* Aspect ratio aligné sur le viewBox compact du `GeoSvgRenderer`
       (650x580). Canvas dimensionné au plus juste pour la composition
       finale : DOM-TOM bas-gauche, métropole centrale, IDF top-right
       agrandi, Corse bas-droite. */
    aspect-ratio: 650 / 580;
    width: 100%;
    position: relative;
}

.training-single__map svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Départements porteurs de CESU : cliquables, repeints en vert ANCESU
   au survol et à l'état actif (popover ouvert). On cible le `path`
   enfant pour surcharger le `fill` inline posé par `GeoSvgRenderer` —
   CSS `fill` sur un parent <g> ne casse pas un attribut `fill=` sur le
   <path>. Pas de filtre `brightness` : la couleur seule signale
   l'interactivité, sans assombrir. La transition sur `fill` reste
   fluide grâce à la transition globale `fill 0.2s` déjà posée par
   `GeoSvgRenderer` dans la balise <style> embarquée. */
.training-cesu-map .geo-area--clickable {
    cursor: pointer;
}

.training-cesu-map .geo-area--clickable:hover > path,
.training-cesu-map .geo-area--active > path {
    fill: var(--color-section-ancesu, var(--color-callout-success));
}

/* Libellé centré sur chaque département cliquable (numéro de dept ou
   zone). Inséré dans la SVG racine (outer viewBox 650×580) par
   `trainingCesuMap` plutôt que dans la `<g class="geo-area">` qui vit
   dans une SVG nested en coords PostGIS (~983k unités). Blanc plein,
   sans halo : le contraste contre les fills navy / vert ANCESU /
   gris suffit, le contour rendait le chiffre épais et brouillon. */
.training-cesu-map .geo-area__label {
    fill: #fff;
    font-family: var(--font-sans, sans-serif);
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}

/* Popover liste CESU — ancrée en haut à gauche, ultra discrète :
   largeur compacte (13rem), bordure fine + ombre légère, chevron par
   CESU pour signaler la navigation. Volontairement réduit pour minimiser
   le recouvrement de la métropole (Nord notamment). */
.training-cesu-map__panel {
    position: absolute;
    top: var(--spacing-xs);
    left: var(--spacing-xs);
    right: var(--spacing-xs);
    max-height: calc(100% - 2 * var(--spacing-xs));
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-navy) 6%, transparent);
    z-index: 2;
    overflow: hidden;
}

@media (min-width: 48em) {
    .training-cesu-map__panel {
        right: auto;
        width: 13rem;
        max-width: calc(100% - 2 * var(--spacing-xs));
    }
}

.training-cesu-map__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    padding: 0.375rem 0.375rem 0.25rem 0.625rem;
    background: transparent;
}

.training-cesu-map__panel-title {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
}

.training-cesu-map__panel-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-cesu-map__panel-title small {
    color: var(--color-text-light);
    font-size: 0.625rem;
    font-weight: 600;
    flex-shrink: 0;
}

.training-cesu-map__panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-light);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.training-cesu-map__panel-close:hover {
    opacity: 1;
    color: var(--color-text);
}

.training-cesu-map__panel-list {
    list-style: none;
    padding: 0 0 var(--spacing-xs);
    margin: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-text-light) 35%, transparent) transparent;
}

.training-cesu-map__panel-list::-webkit-scrollbar {
    width: 6px;
}

.training-cesu-map__panel-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-text-light) 35%, transparent);
    border-radius: 999px;
}

.training-cesu-map__panel-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-xs);
    line-height: 1.3;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.training-cesu-map__panel-link-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-cesu-map__panel-link-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    opacity: 0.5;
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.training-cesu-map__panel-list a:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    color: var(--color-primary);
}

.training-cesu-map__panel-list a:hover .training-cesu-map__panel-link-chevron {
    color: var(--color-primary);
    opacity: 1;
    transform: translateX(2px);
}

/* ── « Ces formations pourraient vous intéresser » ──
   - Espacement aligné sur la transition fiche → bandeau gris (margin-top
     2xl + zéro padding), pour neutraliser le bloc related "article" qui
     porte 3xl + 2xl par défaut sur les fiches CMS.
   - Grille 4 colonnes au-dessus de 1024px (paliers 1/2 hérités d'article.css).
   - Cards image-de-fond : aspect ratio portrait, overlay dégradé pour la
     lisibilité, domaine en haut, titre + tags en bas. */

.article-single__related--training {
    margin-top: var(--spacing-2xl);
    padding-top: 0;
}

@media (min-width: 64em) {
    .article-single__related-grid--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.related-training-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--related-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;
}

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

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

/* Overlay teinte avec la couleur du domaine (`--related-accent` injecte
   sur la card). On melange legerement la couleur avec `--color-primary-dark`
   pour rattraper les pastels qui casseraient le contraste blanc, sans
   etouffer les domaines deja saturee. Le degrade applique ensuite une
   opacite croissante du haut vers le bas pour garantir le contraste sur
   le titre + tags. */
.related-training-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    --related-accent-tint: color-mix(
        in srgb,
        var(--related-accent, var(--color-primary-dark)) 75%,
        var(--color-primary-dark)
    );
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--related-accent-tint) 55%, transparent) 0%,
        color-mix(in srgb, var(--related-accent-tint) 82%, transparent) 100%
    );
    pointer-events: none;
}

.related-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);
}

.related-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);
}

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

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

/* Chevron discret en pastille blanche translucide. Animation au hover de
   la card : translation de +2px + intensification du fond pour signaler
   l'affordance cliquable. */
.related-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;
}

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

.related-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: 40em) {
    .related-training-card__title {
        font-size: var(--font-size-lg);
    }
}

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

.related-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);
}

/* ── Print ── */

@media print {
    .article-sidebar,
    .article-single__related {
        display: none !important;
    }
}

/* ── LA CARTE « PRES DE VOUS » RESTE VISIBLE AU TELEPHONE ──

   `article.css` masque tout le rail sous 64em, et c'est juste pour une
   actualite : son rail ne porte qu'un sommaire, dont le corps de la page tient
   deja lieu. Ici il porte l'APPEL A L'ACTION principal — demander une place a
   la session la plus proche. Le masquer, c'est retirer le geste de la page sur
   l'ecran ou il est le plus utile.

   La maquette empile le rail sous l'article a ce palier ; on fait de meme, en
   ne gardant que la carte : un sommaire de douze entrees pousserait les
   sessions hors de vue avant qu'on ait lu une ligne. */
@media (width < 64em) {
    .training-single .article-sidebar {
        display: block;
    }

    .training-single .article-sidebar__toc {
        display: none;
    }
}