/* ==================================================
   BLOC — MODULES DU PALIER

   Les modules qui composent un niveau, en cartes.

   C'était un empilement de lignes — intitulé à gauche,
   durée à droite. On y lisait ce que le palier
   contient, jamais ce qu'il coûte ni quand il se
   suit : il fallait ouvrir les six fiches pour s'en
   faire une idée. Chaque module porte maintenant sa
   filière, son accroche, sa durée, son tarif d'entrée
   et sa prochaine date.

   La grille vient de Bootstrap (row-cols-lg-2) ; cette
   feuille n'habille que l'intérieur des cartes.
================================================== */

.modules_palier__head {
    margin-bottom: 24px;
}

.modules_palier__note {
    margin: 6px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-meta);
}

.modules_palier__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* La carte occupe toute la hauteur de sa colonne : sans cela, deux
   cartes côte à côte dont l'une a une accroche plus longue se
   décalent, et leurs boutons ne s'alignent plus. */
.modules_palier__carte {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modules_palier__carte:hover {
    border-color: var(--v-action);
    box-shadow: 0 6px 20px rgba(56, 49, 111, 0.08);
}

/* La pastille de filière, comme sur les cartes de formation et de
   session : les couleurs viennent du jeu v-cat--*, jamais d'ici. */
.modules_palier__chip {
    /* Seule la pastille se rétrécit à son contenu ; tout le reste occupe
       la largeur de la carte. Poser align-items: flex-start sur la carte
       aurait aussi rétréci l'accroche et le pied, et le bouton « pleine
       largeur » se serait aligné sur la longueur de son propre texte. */
    align-self: flex-start;
    margin: 0 0 10px;
    padding: 3px 10px;
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modules_palier__titre {
    margin: 0;
    font-family: var(--v-font-titre);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--v-texte-titre);
}

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

.modules_palier__titre a:hover { text-decoration: underline; }

.modules_palier__accroche {
    margin: 8px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--v-texte-meta);
}

/* Durée et tarif, sur une ligne. Le point médian est un séparateur
   décoratif : il est masqué aux lecteurs d'écran côté gabarit, qui
   entendent « 3 jours dès 690 € » sans ponctuation parasite. */
.modules_palier__faits {
    margin: 14px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.modules_palier__separateur {
    margin: 0 8px;
    color: var(--v-bordure);
}

/* La prochaine date, avec sa pastille turquoise : c'est le seul
   renseignement de la carte qui change tout seul, et le seul qui
   décide d'un clic. */
.modules_palier__date {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    color: var(--v-texte-corps);
}

.modules_palier__puce {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v-succes);
}

/* Pas de date ouverte : on le dit sans alarmer. La ligne reste à sa
   place pour que les cartes ne se décalent pas les unes des autres. */
.modules_palier__date--vide {
    color: var(--v-texte-meta);
    font-style: italic;
}

/* Le bouton est poussé en bas de la carte : d'une carte à l'autre les
   accroches n'ont pas la même longueur, et des boutons à des hauteurs
   différentes font lire la grille de travers. */
.modules_palier__pied {
    width: 100%;
    margin: auto 0 0;
    padding-top: 18px;
}

/* L'espace est porté par le pied, jamais par le bouton : un padding
   sur .v-bouton s'ajouterait au sien et le ferait grandir. */
.modules_palier__bouton {
    width: 100%;
    justify-content: center;
}

@media (max-width: 575px) {
    .modules_palier__carte {
        padding: 18px;
    }
}