/* ==================================================
   GABARIT — FICHE FORMATION
   D'après la maquette 97:35
================================================== */

/* ENTÊTE (98:2)

   Turquoise plein et écriture blanche. Le turquoise 100 qu'on posait
   auparavant donnait une entête presque blanche, avec un titre violet :
   c'était la seule page du site où la couleur d'accueil ne se voyait
   pas. */

.fiche_hero {
    position: relative;
    overflow: hidden;
    background: var(--v-turquoise-500);
    color: var(--v-blanc);
    /* Le logo rond de l'en-tête déborde d'une nonantaine de pixels sur
       ce qui suit : sans cette réserve, le cercle tombe sur le fil
       d'Ariane. La réserve se lit sur --v-logo-debord plutôt que d'être
       réécrite en dur — c'est l'en-tête qui décide de la taille de son
       logo, et elle change par paliers selon la largeur de l'écran. */
    padding: max(6rem, calc(var(--v-logo-debord) + 24px)) 0 1.5rem;
}

/* Les cercles en haut à droite sont ceux de tous les entêtes : voir
   hero_motifs.css. */

/* Le contenu passe devant les cercles.

   Et il prend la gouttière du thème, pas celle de Bootstrap.

   Une fiche formation n'est pas bâtie en blocs du builder : son entête
   et son corps ouvrent leur `.container` directement, sans passer par
   `.v-bloc`. Ils échappaient donc à la règle qui donne à tous les
   conteneurs du site 56 px de marge sur grand écran et 20 sur
   téléphone, et gardaient les 12 px de Bootstrap : le titre d'une fiche
   commençait huit pixels plus à gauche que tout le reste de la page.

   Sur le corps, c'était pire qu'une irrégularité. Il contient une
   `row g-5`, dont les marges valent − 24 px : douze pixels de plus que
   le rembourrage n'en rattrapait, de chaque côté. La page défilait
   horizontalement. */
.fiche_hero > .container,
.fiche_formation__corps > .container {
    max-width: var(--v-contenu);
    padding-left: var(--v-gouttiere);
    padding-right: var(--v-gouttiere);
}

.fiche_hero > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .fiche_hero > .container,
    .fiche_formation__corps > .container {
        padding-left: var(--v-gouttiere-tablette);
        padding-right: var(--v-gouttiere-tablette);
    }
}

@media (max-width: 767px) {
    .fiche_hero > .container,
    .fiche_formation__corps > .container {
        padding-left: var(--v-gouttiere-mobile);
        padding-right: var(--v-gouttiere-mobile);
    }
}

/* La mention en capitales jaunes, au-dessus du titre. C'est le premier
   signal de la fiche : à qui elle s'adresse et où elle se donne. */
.fiche_hero__mention {
    margin: 0 0 0.75rem;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v-jaune-500);
}

.fiche_hero__titre {
    margin: 0 0 1rem;
    color: var(--v-blanc);
}

/* Le nom commercial de l'ancien site, sous le titre : plus discret que
   l'accroche, il sert à se reconnaître, pas à convaincre. */
.fiche_hero__nom-commercial {
    margin: -0.25rem 0 0.75rem;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
}

.fiche_hero__accroche {
    max-width: 40em;
    margin: 0 0 1.5rem;
    font-family: var(--v-font-corps);
    font-size: 0.9375rem;
    line-height: var(--v-lh-corps);
    color: rgba(255, 255, 255, 0.92);
}

.fiche_hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* La durée en pastille blanche, à la suite des boutons : elle répond à
   « combien de temps ça prend » au moment où on s'apprête à cliquer, et
   porte la couleur de la filière pour rester lisible sur blanc. */
.fiche_hero__duree {
    display: inline-block;
    padding: 7px 14px;
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cat, var(--v-violet-500));
}

/* Le visuel est rogné en paysage : la maquette lui donne 420 × 260, et
   les images carrées reprises de l'ancien site écraseraient le texte en
   vis-à-vis si on les laissait telles quelles. */
.fiche_hero__visuel {
    margin: 0;
    border-radius: var(--v-radius-2xl);
    overflow: hidden;
    aspect-ratio: 42 / 26;
}

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

/* CORPS EN DEUX COLONNES */

.fiche_formation__corps {
    padding: 3rem 0;
}

/* Sans bloc pleine largeur derrière lui, le premier étage est le pied
   de la page : il lui faut alors sa propre respiration avant le footer,
   que les blocs de la suite fournissent d'eux-mêmes. */
.fiche_formation__corps:last-child {
    padding-bottom: 4rem;
}

/* Les blocs rouvrent chacun leur propre .container : dans la colonne de
   gauche, il faut le neutraliser, sinon on empile des marges et la
   largeur se réduit à chaque niveau. */
.fiche_formation__contenu .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.fiche_formation__contenu .v-bloc {
    padding-top: 0;
    padding-bottom: 0;
}

.fiche_formation__contenu .v-bloc + .v-bloc {
    margin-top: 3rem;
}

/* Ce qui suit le premier étage court sur toute la largeur : en savoir
   plus, public et prérequis, avis, questions fréquentes, appel à
   l'action. Ces blocs gardent leur propre .container et leur propre
   rythme vertical — on ne fait ici que reprendre le fil sous les deux
   colonnes. */
.fiche_formation__suite {
    padding-bottom: 1.5rem;
}

/* COLONNE DES SESSIONS (100:2)

   Un titre, une ligne d'explication, des cartes blanches posées sur le
   fond de page. Pas de panneau : la maquette n'enferme rien ici, et le
   cadre crème bordé qu'on avait posé n'existe nulle part ailleurs sur
   le site. */

.fiche_sessions {
    position: sticky;
    top: 1.5rem;
}

.fiche_sessions__titre {
    margin: 0 0 0.5rem;
    color: var(--v-violet-700);
}

.fiche_sessions__intro,
.fiche_sessions__vide {
    margin: 0 0 1rem;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-meta);
}

/* Trois cartes au plus : la colonne n'a plus à défiler, et le panneau
   ne concurrence plus la fiche qu'il accompagne. Les deux pixels de
   marge intérieure laissent l'ombre des cartes respirer. */
.fiche_sessions__liste {
    list-style: none;
    margin: 0;
    padding: 2px;
    display: grid;
    gap: 16px;
}

/* La sortie vers l'agenda, remontée au-dessus des cartes.

   Elle était sous la liste, en bas d'une colonne de trois cartes
   hautes : hors de l'écran pour la personne à qui aucune des trois
   dates ne convient — la seule à en avoir besoin. */
.fiche_sessions__agenda {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 0 0 1rem;
}

/* Les pastilles de provenance — Toutes, Belgique, France, Distanciel.
   Elles s'enroulent : la colonne fait quatre douzièmes, et quatre
   pastilles n'y tiennent pas sur une ligne. */
.fiche_sessions__filtres {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
}

.fiche_sessions__filtre {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-pill);
    background: var(--v-fond-carte);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--v-texte-corps);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fiche_sessions__filtre:hover {
    border-color: var(--v-action);
    color: var(--v-action);
}

/* La pastille courante est pleine : à ce format, un simple liseré plus
   sombre ne se distingue pas des trois autres. */
.fiche_sessions__filtre.est-actif {
    background: var(--v-action);
    border-color: var(--v-action);
    color: var(--v-texte-inverse);
}

/* Le décompte de ce qui n'est pas montré, sous les cartes. Il change
   avec la pastille : « 4 autres dates programmées » ne veut pas dire la
   même chose pour toutes les provenances et pour la France seule. */
.fiche_sessions__reste {
    margin: 12px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
    text-align: center;
}

.fiche_sessions__carte {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    border-radius: var(--v-radius-xl);
    background: var(--v-fond-carte);
    box-shadow: 0 4px 16px rgba(56, 49, 111, 0.08);
}

/* Les cartes masquées par les pastilles.

   Sans cette règle, elles resteraient visibles : `display: flex` posé
   par une classe l'emporte sur le `[hidden] { display: none }` de la
   feuille du navigateur, qui n'est qu'un sélecteur d'attribut. */
.fiche_sessions__carte[hidden] {
    display: none;
}

.fiche_sessions__carte--complete {
    opacity: 0.72;
}

/* Le badge de date et ce qu'il annonce, côte à côte. */
.fiche_sessions__entete {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fiche_sessions__badge {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 8px;
    border-radius: var(--v-radius-md);
    /* La couleur du module quand elle est saisie sur la formation, la
       couleur de la filière sinon : l'attribut style de la carte passe
       devant cette règle. */
    background: var(--cat, var(--v-violet-500));
    color: var(--cat-texte, var(--v-blanc));
    line-height: 1;
}

.fiche_sessions__jour {
    font-family: var(--v-font-titre);
    font-size: 1.125rem;
    font-weight: 700;
}

.fiche_sessions__mois {
    margin-top: 2px;
    font-family: var(--v-font-corps);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.125em;
}

.fiche_sessions__quand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fiche_sessions__periode {
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-texte-titre);
    text-decoration: none;
}

.fiche_sessions__periode:hover { text-decoration: underline; }

.fiche_sessions__lieu,
.fiche_sessions__detail {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-meta);
}

.fiche_sessions__ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* Trois états, trois couleurs : turquoise tant qu'il reste de la place,
   orange quand il n'en reste presque plus, rose quand c'est fini. */
.fiche_sessions__dispo {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--v-radius-pill);
    background: var(--v-succes-fond);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--v-succes-texte);
}

.fiche_sessions__dispo--alerte {
    background: var(--v-alerte-fond);
    color: var(--v-alerte-texte);
}

.fiche_sessions__dispo--complet {
    background: var(--v-urgence-fond);
    color: var(--v-urgence);
}

/* Seule mention d'argent restée sur la carte : ce qu'on paie en
   réservant. Le tarif lui-même vit en bas de la fiche. */
.fiche_sessions__note-prix {
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    color: var(--v-texte-meta);
    white-space: nowrap;
}

.fiche_sessions__bouton {
    width: 100%;
    justify-content: center;
}

/* « Bon à savoir » : les conditions de réservation, en dernier. */
.fiche_sessions__note {
    margin-top: 1rem;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--v-fond-alerte-douce);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-corps);
}

.fiche_sessions__note-titre {
    margin: 0 0 6px;
    font-family: var(--v-font-titre);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--v-violet-700);
}

.fiche_sessions__note > div > *:first-child { margin-top: 0; }
.fiche_sessions__note > div > *:last-child  { margin-bottom: 0; }

/* En dessous de lg, la colonne passe sous le contenu : le collant n'a
   plus de sens et elle reprend sa hauteur naturelle. */
@media (max-width: 991px) {
    .fiche_sessions {
        position: static;
        margin-top: 2.5rem;
    }

    .fiche_sessions__liste {
        max-height: none;
    }

    /* Le plancher de six rem a été dessiné pour un logo qui déborde
       de l'en-tête. Sous 992 px il ne déborde plus, --v-logo-debord
       vaut zéro, et ce plancher n'ouvre qu'une bande vide. */
    .fiche_hero {
        padding: 2rem 0 2.5rem;
    }

}

/* --------------------------------------------------
   MOBILE 390

   La colonne des dates est déjà passée sous le contenu à 992 px, et
   les cercles décoratifs ont disparu. Restent les mesures d'une
   entête dessinée pour 1440 px : un titre de 40 px, un rythme
   vertical de 3 rem, des pastilles calées sur une largeur qu'on n'a
   plus.
-------------------------------------------------- */

@media (max-width: 575px) {

    .fiche_hero {
        /* Le logo déborde encore à cette taille — c'est la signature de
           la marque, et l'en-tête la garde sur téléphone. La réserve
           reste donc calculée sur --v-logo-debord ; ce qui tombe, c'est
           le plancher de six rem, dessiné pour un cercle de 142 px. */
        padding: max(1.75rem, calc(var(--v-logo-debord) + 16px)) 0 2rem;
    }

    .fiche_hero__mention {
        letter-spacing: 0.12em;
        font-size: 0.625rem;
    }

    .fiche_hero__accroche {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }

    /* Les deux boutons de l'entête prennent la largeur et s'empilent :
        côte à côte, « Voir les prochaines dates » se coupait en trois
        lignes dans une moitié d'écran. La pastille de durée, elle,
        reste à sa taille — ce n'est pas un bouton. */
    .fiche_hero__actions > .v-bouton {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* Une image en 42:26 sur 350 px de large ne fait plus que 216 px de
       haut : elle passe en 3:2, qui tient mieux le cadrage des
       portraits repris de l'ancien site. */
    .fiche_hero__visuel {
        aspect-ratio: 3 / 2;
    }

    .fiche_formation__corps {
        padding: 2rem 0;
    }

    .fiche_formation__contenu .v-bloc + .v-bloc {
        margin-top: 2rem;
    }

    .fiche_sessions {
        margin-top: 2rem;
    }

    /* Le badge de date et la période restent côte à côte — c'est le
       couple qu'on lit —, mais le prix et la disponibilité passent
       l'un sous l'autre plutôt que de se disputer 310 px. */
    .fiche_sessions__ligne {
        align-items: flex-start;
        flex-direction: column;
    }

    .fiche_sessions__note {
        padding: 12px 14px;
    }
}

/* MINI BANDEAU « VOTRE ITINÉRAIRE » (98:41)

   Une bande blanche bordée entre l'entête et le contenu : le parcours à
   gauche, les arrêts au centre, le renvoi vers le schéma à droite.

   ---------------------------------------------------------------
   Une seule ligne, une seule hauteur
   ---------------------------------------------------------------

   Le bandeau paraissait épais, et pour une raison mesurable : l'arrêt
   courant portait son palier en surtitre AU-DESSUS de son intitulé, ce
   qui lui donnait 46 px là où ses voisins en faisaient 32. Une file
   interrompue par un pavé deux fois plus haut ne se lit pas comme une
   progression, mais comme un défaut de composition.

   Le palier est donc passé EN LIGNE, devant l'intitulé, en petites
   capitales. Tous les arrêts font 28 px, et la hiérarchie tient à la
   couleur et à la graisse plutôt qu'à la hauteur.

   ---------------------------------------------------------------
   Tout affiché, abrégé, et déroulé au survol
   ---------------------------------------------------------------

   Trois modèles se sont succédé ici avant celui-ci : tout déplié et
   tronqué net ; tout replié sur des numéros ; puis un script qui
   mesurait la barre pour choisir lesquels sacrifier, les empilait quand
   ils se suivaient et réservait une marge pour le survol. Cent lignes
   de mécanique pour décider quoi cacher — et ça cachait.

   Le modèle retenu ne cache rien. Les arrêts sont tous affichés et se
   partagent la largeur ; celui dont la part ne suffit pas abrège son
   intitulé par des points de suspension ; le survol déroule celui qu'on
   veut lire, en le faisant cesser de céder du terrain à ses voisins.

   Tout tient dans la mise en page, donc tout fonctionne sans
   JavaScript. Le script ne s'occupe plus que des panneaux. */

.fiche_itineraire {
    background: var(--v-blanc);
    border-top: 1px solid var(--v-bordure);
    border-bottom: 1px solid var(--v-bordure);
}

.fiche_itineraire__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
}

.fiche_itineraire__parcours {
    /* « Parcours » et « — Hypnose » tiennent sur une ligne : le tiret
       appartient à la filière qu'il annonce, et se retrouver seul en fin
       de ligne le fait lire comme une coupure de mot. */
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
}

.fiche_itineraire__branche::before {
    content: " — ";
}

/* Une seule ligne, toujours.

   Les arrêts s'y partagent la place et abrègent ce qui dépasse. Sous
   1200 px la barre s'empile et les arrêts reprennent le droit de passer
   à la ligne — voir la requête média en fin de fichier : sur un
   téléphone, cinq intitulés réduits à deux mots ne valent pas mieux que
   deux lignes. */
.fiche_itineraire__etapes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: center;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* La flèche dit la progression : elle doit se voir.
   Elle était dans la couleur des bordures, en petit corps — un filet
   décoratif entre deux bulles, que Virages ne lisait pas comme « puis »
   (21/09/2026). Plus grande, grasse, et violette sur toutes les fiches :
   la couleur de la filière serait un jaune pâle pour le coaching
   d'entreprise, et la flèche y redeviendrait invisible. */
.fiche_itineraire__fleche {
    flex: 0 0 auto;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--v-violet-500);
}

/* L'arret : large comme son contenu, et il cede ou il ne cede pas.

   Deux largeurs fixes ont ete essayees ici — une courte, une longue. Le
   defaut saute aux yeux des qu'on les regarde : une largeur fixe est
   toujours trop courte pour « Hypnose conversationnelle strategique » et
   trop large pour « L'Immersion », qui trainait alors un blanc a sa
   droite. Aucun nombre ne convient a la fois aux deux.

   La base est donc `auto` : chaque arret demande exactement la largeur
   de son intitule. Ce qui distingue l'arret qu'on regarde n'est plus sa
   taille mais son refus de ceder — `flex-shrink: 0`. Il garde donc son
   nom entier, quoi qu'il arrive, tandis que les autres se serrent et
   abregent le leur.

   `flex-shrink` est un nombre : il s'interpole, donc la redistribution
   s'anime. C'est ce qui manquait aux mecaniques precedentes, qui
   essayaient toutes d'animer une largeur vers une cible inconnue.

   Le `min-width` est le plancher de lisibilite : un arrete serre garde
   son rang et le debut de son nom plutot que de se reduire a rien. */
.fiche_itineraire__etape {
    --v-itin-duree: 0.38s;
    --v-itin-courbe: cubic-bezier(0.4, 0, 0.2, 1);
    --v-itin-attente: 0.09s;

    flex: 0 1 auto;
    min-width: 7rem;
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px 14px 5px 5px;
    border-radius: 999px;
    background: var(--v-blanc);
    border: 1px solid var(--v-bordure);
    transition: flex-shrink var(--v-itin-duree) var(--v-itin-courbe) var(--v-itin-attente),
                opacity var(--v-itin-duree) var(--v-itin-courbe) var(--v-itin-attente);
}

/* ... et se referme des qu'on regarde ailleurs.

   C'est la place que prend l'arret survole. Sans cette cession, deux
   arrets seraient longs en meme temps et la barre deborderait — ou bien
   il aurait fallu mesurer, ce que cette mecanique existe precisement
   pour eviter.

   Les quatre `:not()` la protegent d'elle-meme : si c'est l'etape
   courante qu'on survole, elle reste a fond. La regle est plus specifique
   que celle du survol, elle l'emporterait sans cette precaution. */
.fiche_itineraire__etapes:hover
    .fiche_itineraire__etape--ici:not(:hover):not(:focus-within):not(.est-ouverte) {
    flex-shrink: 1;
}

/* Celui qu'on regarde ne cede rien.

   Au repos c'est l'etape courante ; des qu'on en survole une autre,
   c'est elle. Un seul arret refuse de ceder a la fois : les autres se
   partagent ce qui reste, et la place existe donc toujours — sans rien
   mesurer.

   L'attente empeche la barre de reagir a un curseur qui ne fait que
   passer. L'ouverture dure plus longtemps que la fermeture, parce qu'une
   case qui s'ouvre montre quelque chose et qu'on veut la voir venir ; au
   clic et au clavier, `est-ouverte` remet l'attente a zero sans
   raccourcir le mouvement. */
.fiche_itineraire__etape:hover,
.fiche_itineraire__etape:focus-within,
.fiche_itineraire__etape.est-ouverte {
    --v-itin-attente: 0.12s;
    --v-itin-duree: 0.62s;
    flex-shrink: 0;
    z-index: 5;
}

.fiche_itineraire__etape.est-ouverte {
    --v-itin-attente: 0s;
    --v-itin-duree: 0.62s;
}

/* Les étapes déjà franchies, en retrait : elles situent, elles
   n'appellent pas le regard. */
.fiche_itineraire__etape--avant,
.fiche_itineraire__etape--avant-valide {
    background: var(--v-fond-page);
}

/* La pastille porte le RANG de l'étape.

   Elle ne portait qu'une coche ou rien, ce qui disait « fait / pas
   fait » mais jamais où l'on en était dans la suite. Le numéro, lui, se
   compte : on voit d'un coup qu'on est à la troisième étape sur cinq.
   La coche le remplace quand l'étape est réellement acquise.

   Le numéro appartient à l'étape, jamais au module : les six modules du
   Niveau 2 partagent le même, parce qu'ils sont interchangeables. */
.fiche_itineraire__marque {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--v-bordure);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--v-texte-meta);
}

/* Le libellé est un <span>, un <a> ou un <button> selon l'arrêt. La
   règle générique `button` du thème impose un fond et une bordure : on
   les neutralise pour que les trois se ressemblent exactement.

   Sur une ligne, palier compris : c'est ce qui donne à tous les arrêts
   la même hauteur. */
/* Le libelle occupe la largeur que l'arret lui laisse, et tronque ce
   qui depasse. Il a ete une grille qui s'ouvrait de 0fr a 1fr, du temps
   ou l'on animait vers la largeur du contenu ; les deux largeurs fixes
   rendent ce detour inutile.

   La regle generique `button` du theme impose un fond et une bordure :
   on les neutralise pour que le <span>, le <a> et le <button> se
   ressemblent exactement. */
.fiche_itineraire__libelle {
    display: block;
    min-width: 0;
    margin-left: 7px;
    overflow: hidden;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--v-texte-titre);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

/* Le bloc que la colonne mesure. Il porte le débordement : la grille se
   referme sur lui, et c'est lui qui tranche le texte.

   Deux lignes : le palier au-dessus, le nom en dessous. Ils ont été
   côte à côte un temps, quand tous les arrêts étaient dépliés et que
   l'arrêt courant, seul à porter deux lignes, faisait une bosse dans la
   file. Ce n'est plus le cas : les arrêts sont repliés par défaut, ceux
   qui s'ouvrent s'ouvrent tous pareil, et la hauteur ne varie plus.

   Sur une ligne, « NIVEAU 2 · Hypnose conversationnelle stratégique »
   demandait 300 px pour dire deux choses de nature différente : un rang
   et un nom. Empilées, elles en demandent la moitié et se distinguent
   mieux. */
.fiche_itineraire__contenu {
    display: flex;
    flex-direction: column;
    /* Pas d'`align-items: flex-start` ici, malgré l'apparence.

       En colonne, l'alignement transversal décide de la LARGEUR des
       lignes. Calées au début, elles prennent celle de leur contenu et
       débordent du bloc au lieu de s'y ajuster : le texte serait alors
       tranché par le débordement du parent, et l'abréviation ne se
       déclencherait jamais. Étirées — le défaut — elles héritent de la
       largeur du bloc, et les points de suspension retrouvent leur
       raison d'être. Le texte, lui, reste à gauche de lui-même. */
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

/* Une seule case bouge.

   Il y a deux ouvertures dans cette barre, et elles ne font pas la meme
   chose :

     — le PANNEAU, quand l'etape couvre plusieurs modules : il les liste,
       parce qu'aucun nom ne peut les representer tous ;
     — l'INTITULE, qui s'allonge pour montrer le nom entier du module.

   La seconde a d'abord echoue faute de place : le script remplit la
   barre, et une colonne `1fr` vaut la place DISPONIBLE, pas la largeur
   du contenu. La pastille s'ouvrait donc sur zero.

   J'ai essaye de la prendre aux voisins, en les repliant pendant le
   survol. Ca marchait, et c'etait pire : toute la barre se reorganisait
   pour ouvrir une case. Un survol doit remuer ce qu'on survole, pas le
   reste.

   La place est donc RESERVEE a l'avance, par le script, qui cesse de
   deplier avant d'avoir tout rempli. Voir js/fiche-itineraire.js. La
   pastille survolee s'ouvre dedans, et rien d'autre ne bouge. */

button.fiche_itineraire__libelle { cursor: pointer; }

a.fiche_itineraire__libelle:hover,
button.fiche_itineraire__libelle:hover { text-decoration: underline; }

/* Le palier devant l'intitulé, en petites capitales : il nomme un rang,
   pas un titre, et il ne doit pas peser autant que le nom qu'on lit. */
.fiche_itineraire__palier {
    flex: 0 0 auto;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
}

.fiche_itineraire__nom {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

/* L'intitulé s'abrège plutôt que de se faire trancher.

   `text-overflow` ne peut pas s'appliquer a un noeud de texte nu dans un
   conteneur en flex : il faut un element a lui. C'est ce que cette
   classe apporte, et les points de suspension disent enfin que le nom
   continue au lieu de s'arreter au milieu d'un mot. */
.fiche_itineraire__texte {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fiche_itineraire__chevron {
    flex: 0 0 auto;
    font-size: 0.5rem;
    opacity: 0.55;
}

/* Une étape réellement acquise : coche turquoise, comme les objectifs.
   Une étape simplement antérieure garde son numéro — elle précède, elle
   n'est pas acquise pour autant. */
.fiche_itineraire__etape--avant-valide .fiche_itineraire__marque {
    background: var(--v-succes);
    border-color: var(--v-succes);
    color: var(--v-blanc);
}

.fiche_itineraire__etape--avant .fiche_itineraire__libelle,
.fiche_itineraire__etape--apres .fiche_itineraire__libelle,
.fiche_itineraire__etape--apres-flou .fiche_itineraire__libelle {
    color: var(--v-texte-meta);
}

/* La fourche : ce qui est incertain en a l'air.

   Depuis le socle, la suite dépend de la voie qu'on prendra — thérapie
   brève, coaching d'entreprise, hypnose — et le bandeau ne peut pas en
   choisir une. Il l'a longtemps fait quand même, en déroulant la voie de
   la première page trouvée.

   Le liseré en pointillé et l'estompe le disent. Le flou d'image a été
   retiré : sur un caractère seul dans un rond de 18 px, il ne se lisait
   pas comme une incertitude mais comme un défaut de rendu. */
.fiche_itineraire__etape--apres-flou {
    border-style: dashed;
    background: transparent;
    opacity: 0.6;
}

.fiche_itineraire__etape--apres-flou:hover,
.fiche_itineraire__etape--apres-flou:focus-within,
.fiche_itineraire__etape--apres-flou.est-ouverte {
    opacity: 1;
}

.fiche_itineraire__etape--apres-flou .fiche_itineraire__marque {
    border-style: dashed;
}

/* Où l'on est : le seul arrêt plein, et le seul qui ne se replie jamais.

   Sa bordure reste, transparente : la retirer lui ferait perdre deux
   pixels de hauteur et il ne s'alignerait plus sur ses voisins. Son
   intitulé ne se coupe pas non plus — une fiche dont le titre est
   tronqué sur sa propre page se lit comme un bug. */
/* L'etape courante est celle qu'on regarde par defaut : elle ne cede
   pas non plus, tant qu'on ne regarde pas ailleurs. */
.fiche_itineraire__etape--ici {
    flex-shrink: 0;
    background: var(--cat, var(--v-violet-500));
    border-color: transparent;
}

.fiche_itineraire__etape--ici .fiche_itineraire__marque {
    background: var(--v-blanc);
    border-color: var(--v-blanc);
    color: var(--cat, var(--v-violet-500));
}

.fiche_itineraire__etape--ici .fiche_itineraire__libelle {
    font-weight: 600;
    color: var(--cat-texte, var(--v-blanc));
}

.fiche_itineraire__etape--ici .fiche_itineraire__palier {
    opacity: 0.7;
}

/* La mention que seuls les lecteurs d'écran reçoivent : à l'œil, c'est
   la couleur qui dit où l'on est. */
.fiche_itineraire__masque {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------
   Le panneau dépliant

   Une étape qui couvre plusieurs modules ne peut en nommer aucun sans
   choisir à la place du visiteur. Elle annonce donc leur nombre, et
   c'est ici qu'on les lit.

   Le panneau ne porte que des titres, en liens. Il accompagne un fil, il
   ne remplace pas les fiches : y répéter durées et tarifs en ferait un
   catalogue flottant, à tenir à jour à côté des cartes qui les portent
   déjà.
-------------------------------------------------- */

/* `display` ne s'anime pas : le panneau apparaissait d'un bloc. Une
   breve arrivee par le haut le rattache visuellement a l'arret qui
   l'ouvre, au lieu de le faire surgir de nulle part. */
@keyframes virages-itineraire-panneau {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

.fiche_itineraire__panneau {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    animation: virages-itineraire-panneau 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    min-width: 220px;
    max-width: 300px;
    padding: 12px 14px;
    border-radius: var(--v-radius-md);
    background: var(--v-blanc);
    border: 1px solid var(--v-bordure);
    box-shadow: 0 8px 24px rgba(56, 49, 111, 0.12);
    text-align: left;
}

/* Le survol suffit à la souris, et il tient sans JavaScript. Le clic et
   le clavier passent par `est-ouverte`, que pose le script — c'est lui
   qui rend le détail atteignable au toucher, où il n'y a pas de survol.

   Le sélecteur de classe l'emporte sur le `[hidden]` de la feuille du
   navigateur, qui n'est qu'un sélecteur d'attribut. */
.fiche_itineraire__etape.est-depliable:hover .fiche_itineraire__panneau,
.fiche_itineraire__etape.est-depliable:focus-within .fiche_itineraire__panneau,
.fiche_itineraire__etape.est-ouverte .fiche_itineraire__panneau {
    display: block;
}

.fiche_itineraire__groupe {
    margin: 10px 0 4px;
    font-family: var(--v-font-corps);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
}

.fiche_itineraire__panneau > .fiche_itineraire__groupe:first-child { margin-top: 0; }

.fiche_itineraire__modules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fiche_itineraire__modules a {
    display: block;
    padding: 4px 6px;
    border-radius: 6px;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--v-texte-titre);
    text-decoration: none;
}

.fiche_itineraire__modules a:hover {
    background: var(--v-fond-page);
    text-decoration: underline;
}

/* Le module qu'on lit, dans sa propre liste : sans repère, on cherche
   lequel des six est celui de la page ouverte. */
.fiche_itineraire__modules .est-ici a {
    font-weight: 700;
    color: var(--v-action);
}

/* Une liste verticale se lit comme un ordre. Cette ligne dit qu'il n'y
   en a pas — c'est tout l'objet du groupe. */
.fiche_itineraire__regle {
    margin: 8px 0 0;
    padding-top: 7px;
    border-top: 1px solid var(--v-bordure);
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--v-texte-meta);
}

.fiche_itineraire__schema {
    flex: 0 0 auto;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--v-action);
    text-decoration: none;
    white-space: nowrap;
}

.fiche_itineraire__schema:hover { text-decoration: underline; }

.fiche_itineraire__schema-fleche {
    display: inline-block;
    transition: transform 0.2s ease;
}

.fiche_itineraire__schema:hover .fiche_itineraire__schema-fleche {
    transform: translateX(3px);
}

/* L'animation est un confort, jamais le porteur du sens. Qui a demandé
   moins de mouvement voit les mêmes états, sans transition. */
@media (prefers-reduced-motion: reduce) {

    .fiche_itineraire__etape,
    .fiche_itineraire__libelle,
    .fiche_itineraire__schema-fleche {
        transition: none;
    }

    .fiche_itineraire__panneau {
        animation: none;
    }

    /* L'attente d'intention reste : elle n'est pas du mouvement, c'est
       ce qui evite d'ouvrir cinq panneaux en traversant la barre. */
}

/* Sous 1200 px, la bande s'empile : le parcours au-dessus, les arrêts en
   dessous sur toute la largeur. C'est de la place gagnée pour eux, donc
   moins d'arrêts à replier. */
@media (max-width: 1199px) {
    .fiche_itineraire__barre {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Sur un téléphone, cinq intitulés réduits à deux mots ne valent pas
       mieux que deux lignes : les arrêts reprennent le droit de passer à
       la ligne, et chacun garde sa largeur naturelle. */
    .fiche_itineraire__etapes {
        justify-content: flex-start;
        flex-wrap: wrap;
        row-gap: 8px;
        width: 100%;
    }

    /* Un panneau qui s'ouvre près du bord droit sortirait de l'écran. */
    .fiche_itineraire__panneau {
        max-width: min(300px, calc(100vw - 48px));
    }
}

/* --------------------------------------------------
   LE MINI PARCOURS SUR TÉLÉPHONE

   Le bandeau s'empile déjà à 1200 px et ses arrêts s'enroulent. Restent
   deux choses qui ne tiennent pas dans 350 pixels.

   D'abord les arrêts eux-mêmes : sept rem de largeur minimale et
   quatorze pixels de marge à droite, cela fait deux arrêts par ligne
   qui touchent les bords.

   Ensuite et surtout le panneau dépliant. Il s'ouvre en absolu depuis
   le bord gauche de SON arrêt, sur 300 px de large. Ouvert depuis le
   second arrêt d'une ligne, il démarrait vers le milieu de l'écran et
   sortait de la page — le plafond en `100vw` limitait sa largeur, pas
   sa position.

   Il s'ancre donc à la rangée entière et non plus à l'arrêt qui
   l'ouvre : l'arrêt rend sa position, la liste la prend, et le panneau
   s'étend d'un bord à l'autre sous les arrêts.
-------------------------------------------------- */

@media (max-width: 767px) {

    .fiche_itineraire__etapes {
        position: relative;
        gap: 6px;
    }

    .fiche_itineraire__etape {
        position: static;
        min-width: 0;
        flex: 1 1 calc(50% - 3px);
        padding: 4px 10px 4px 4px;
    }

    .fiche_itineraire__panneau {
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
    }

    /* « Parcours — Base » ne se coupe pas, mais il n'a plus besoin de
       toute une ligne pour lui : il se pose au-dessus des arrêts. */
    .fiche_itineraire__barre {
        gap: 8px;
        padding: 12px 0;
    }
}

/* L'avertissement de prérequis, au-dessus des dates.

   Il double le bouton grisé de chaque carte : celui-ci dit « non »,
   celui-là dit pourquoi, nomme la formation manquante et donne le moyen
   de lever le refus. Un bouton mort sans explication fait abandonner. */
.fiche_sessions__prerequis {
    margin: 0 0 1rem;
    padding: 12px 14px;
    border-radius: var(--v-radius-md);
    background: var(--v-alerte-fond);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: var(--v-lh-corps);
    color: var(--v-alerte-texte);
}

.fiche_sessions__prerequis-titre {
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
}

.fiche_sessions__prerequis a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}