/* ==================================================
   BLOC — GRILLE DE FORMATIONS
   Le style de la carte de formation vit ici : elle est
   partagée avec le bloc « Liste de formations », qui
   n'en change que la disposition.
================================================== */

.grille_formations__groupe {
    font-family: var(--v-font-titre);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--v-texte-titre);
    margin: 34px 0 14px;

    /* Cible des pastilles du hero : le saut ne doit pas glisser le
       titre sous l'entête collant. */
    scroll-margin-top: 120px;
}

.grille_formations__groupe:first-child { margin-top: 0; }

/* `auto-fill` et non `auto-fit` : les colonnes vides sont conservées.

   Avec `auto-fit`, une filière d'une ou deux formations voyait ses
   cartes s'étirer sur toute la largeur. Le correctif précédent les
   plafonnait puis les centrait — et le catalogue alternait alors des
   rangées alignées à gauche et des rangées centrées.

   Ici, une filière de une à trois cartes garde la largeur d'une
   rangée pleine et commence dans la colonne de gauche, comme les
   autres. */
.grille_formations__grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 36px;
}

.grille_formations__vide {
    font-family: var(--v-font-corps);
    font-size: 0.9375rem;
    color: var(--v-texte-meta);
}

/* ==================================================
   CARTE DE FORMATION
================================================== */

.carte-formation {
    display: flex;
    flex-direction: column;
    background: var(--v-blanc);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.carte-formation:hover {
    border-color: var(--v-turquoise-400);
    transform: translateY(-2px);
}

.carte-formation__media {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

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

.carte-formation__corps {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px;
}

/* Le niveau reprend la couleur du module : même repère que le badge
   de date sur les cartes de session. */
.carte-formation__niveau {
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: var(--v-radius-pill);
    background: var(--v-lavande);
    color: var(--v-texte-inverse);
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.carte-formation__titre {
    font-family: var(--v-font-titre);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

.carte-formation__titre a {
    color: var(--v-texte-titre);
    text-decoration: none;
}

.carte-formation__titre a:hover { text-decoration: underline; }

/* Toute la carte est cliquable (Virages, 21/09/2026).
   Le lien du titre s'étend sur la carte entière par une couche invisible :
   un seul lien, donc un seul arrêt au clavier et une seule annonce au
   lecteur d'écran — au lieu d'envelopper la carte dans un <a> qui ferait
   lire tout son contenu comme l'intitulé du lien. La carte ne porte plus
   d'autre lien qui se retrouverait dessous. */
.carte-formation {
    position: relative;
    cursor: pointer;
}

.carte-formation__titre a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.carte-formation:hover .carte-formation__titre a { text-decoration: underline; }

/* Le focus clavier se voit sur la carte entière, pas sur le seul titre. */
.carte-formation:has(.carte-formation__titre a:focus-visible) {
    outline: 3px solid var(--v-violet-500);
    outline-offset: 2px;
}

.carte-formation__titre a:focus-visible { outline: none; }

.carte-formation__accroche {
    margin: 0 0 14px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-corps);
    flex: 1 1 auto;
}

.carte-formation__metas {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--v-bordure);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

.carte-formation__session--vide {
    font-style: italic;
    opacity: 0.75;
}

/* --------------------------------------------------
   TOUT AU MÊME NIVEAU (Virages, 21/09/2026)

   Chaque zone de la carte a une hauteur fixe : la tête, le titre sur
   deux lignes, l'accroche sur deux, une ligne de durée et de date, puis
   la place du prérequis. Une carte au titre court ou sans accroche garde
   donc ses lignes à la hauteur de ses voisines, et la rangée se lit
   d'un trait. Ce qui dépasse se coupe par « … ».
-------------------------------------------------- */

.carte-formation--carte .carte-formation__titre {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(2 * 1.3em);
}

.carte-formation--carte .carte-formation__accroche {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    flex: 0 0 auto;
    min-height: calc(2 * var(--v-lh-corps, 1.55) * 1em);
}

/* La date en bas de la carte, quelle que soit sa hauteur : c'est la
   grille qui étire les cartes d'une rangée à la même taille. */
.carte-formation--carte .carte-formation__metas {
    display: block;
    margin-top: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sans image, un aplat pâle de la couleur de la filière tient la place :
   toutes les têtes ont la même hauteur. */
.carte-formation__media--vide {
    background: color-mix(in srgb, var(--cat, var(--v-turquoise-500)) 22%, var(--v-blanc));
}

/* Où en est la personne connectée : validée, accessible, ou prérequis
   manquant au cadenas rouge. Sa place est réservée même vide. */
.carte-formation__prerequis {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.4em;
    margin: 0.5rem 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}

.carte-formation__prerequis.est-manque {
    color: var(--v-rose-500);
}

/* Validée en turquoise : la charte n'a pas de vert, ce qui est acquis se
   dit en turquoise (base.css). Accessible en violet, plus discret. */
.carte-formation__prerequis.est-validee {
    color: var(--v-succes-texte);
}

.carte-formation__prerequis.est-accessible {
    font-weight: 500;
    color: var(--v-violet-500);
}

.carte-formation__niveau--vide {
    visibility: hidden;
}

/* GABARIT LIGNE — utilisé par le bloc « Liste de formations » */
.carte-formation--ligne {
    flex-direction: row;
    align-items: stretch;
}

.carte-formation--ligne .carte-formation__media {
    flex: 0 0 200px;
    aspect-ratio: auto;
}

.carte-formation--ligne .carte-formation__metas {
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .grille_formations__grille { grid-template-columns: 1fr; }
    .carte-formation--ligne { flex-direction: column; }
    .carte-formation--ligne .carte-formation__media { flex: 0 0 auto; aspect-ratio: 16 / 9; }
}

/* La vue « liste » : le même bloc, les mêmes regroupements, des cartes
   en lignes denses. La grille en colonnes cède la place à une pile —
   sans quoi les lignes s'afficheraient côte à côte, trois par rangée. */
.grille_formations--liste .grille_formations__grille {
    display: flex;
    flex-direction: column;
    gap: 10px;
}