/* ==================================================
   BLOC — VOTRE ITINÉRAIRE

   Des pastilles d'objectif, puis l'itinéraire
   correspondant : des étapes empilées, reliées par des
   flèches, avec un total qui ne compte que ce qui reste
   à suivre.
================================================== */

.itineraire {
    background: var(--v-fond-page);
}

.itineraire__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

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

/* Plein et fléché comme le renvoi des portes d'entrée : c'est le même
   service rendu au même visiteur — voir l'ensemble plutôt que choisir
   tout de suite. Il se voyait à peine en petit texte gris. */
.itineraire__schema {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    padding: 11px 22px;
    background: var(--v-action-cta);
    border: 1px solid var(--v-action-cta);
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-blanc);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.itineraire__schema:hover,
.itineraire__schema:focus-visible {
    background: var(--v-blanc);
    color: var(--v-action-cta);
    text-decoration: none;
}

.itineraire__schema-fleche { transition: transform 0.2s ease; }
.itineraire__schema:hover .itineraire__schema-fleche { transform: translateX(3px); }

/* --------------------------------------------------
   LES PASTILLES D'OBJECTIF
-------------------------------------------------- */

.itineraire__objectifs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.itineraire__objectif {
    padding: 11px 22px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.itineraire__objectif:hover { border-color: var(--v-violet-500); }

.itineraire__objectif.est-actif {
    background: var(--v-violet-700);
    border-color: var(--v-violet-700);
    color: var(--v-blanc);
    font-weight: 600;
}

/* --------------------------------------------------
   L'ITINÉRAIRE
-------------------------------------------------- */

.itineraire__carte {
    padding: 24px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

.itineraire__carte-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.itineraire__carte-titre {
    margin: 0;
    font-family: var(--v-font-titre);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.itineraire__total {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 14px;
    border-radius: var(--v-radius-pill);
    background: var(--v-rose-100);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--v-rose-500);
}

/* Plus rien à suivre : la pastille passe au vert et cesse de compter. */
.itineraire__total--fini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--v-succes-fond);
    color: var(--v-succes-texte);
}

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

/* La flèche entre deux étapes est un pseudo-élément : elle suit la
   hauteur réelle des cartes, et disparaît d'elle-même sur la dernière. */
.itineraire__etape {
    position: relative;
    padding: 16px 18px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
}

.itineraire__etape + .itineraire__etape { margin-top: 42px; }

.itineraire__etape + .itineraire__etape::before {
    content: "↓";
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    line-height: 1;
    color: var(--v-gris-400);
}

/* La famille colore la pastille, l'état et le lien — une seule saisie. */
.itineraire__etape--bases           { --cat: var(--v-cat-bases); }
.itineraire__etape--therapie        { --cat: var(--v-cat-therapie); }
.itineraire__etape--entreprise      { --cat: var(--v-cat-entreprise); }
.itineraire__etape--hypnose         { --cat: var(--v-cat-hypnose); }
.itineraire__etape--specialisations { --cat: var(--v-cat-specialisations); }

.itineraire__pastille {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: var(--v-radius-pill);
    background: var(--cat, var(--v-violet-500));
    font-family: var(--v-font-corps);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v-blanc);
}

/* Le jaune ne supporte pas le texte blanc. */
.itineraire__etape--entreprise .itineraire__pastille { color: var(--v-violet-700); }

.itineraire__etape-titre {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.itineraire__detail {
    margin: 4px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

.itineraire__etat {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

/* « Voir la formation → » n'est plus un lien : c'est le repère qui dit
   que la carte entière en est un. Deux liens superposés se disputaient
   le clic et le lecteur d'écran annonçait deux fois la destination. */
.itineraire__voir {
    margin: 8px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cat, var(--v-action));
}

.itineraire__voir span {
    display: inline-block;
    transition: transform 0.2s ease;
}

/* --------------------------------------------------
   LA CARTE CLIQUABLE

   Le lien est porté par le titre, et son ::after couvre
   la carte : un seul lien dans le balisage, toute la
   carte cliquable à l'écran.
-------------------------------------------------- */

.itineraire__etape--cliquable {
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.itineraire__etape--cliquable .itineraire__etape-titre a {
    color: inherit;
    text-decoration: none;
}

.itineraire__etape--cliquable .itineraire__etape-titre a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.itineraire__etape--cliquable:hover {
    border-color: var(--cat, var(--v-violet-500));
    box-shadow: 0 6px 18px rgba(17, 12, 34, 0.08);
    transform: translateY(-1px);
}

.itineraire__etape--cliquable:hover .itineraire__etape-titre { color: var(--cat, var(--v-action)); }
.itineraire__etape--cliquable:hover .itineraire__voir span { transform: translateX(3px); }

/* Le focus clavier doit se voir sur la carte, pas sur le seul titre. */
.itineraire__etape--cliquable:focus-within {
    border-color: var(--cat, var(--v-violet-500));
    outline: 2px solid var(--v-violet-500);
    outline-offset: 2px;
}

.itineraire__etape--cliquable .itineraire__etape-titre a:focus-visible { outline: none; }

/* --------------------------------------------------
   ÉTAPE DÉJÀ SUIVIE

   Elle vient du compte, plus d'une case cochée : c'est
   un fait, pas une déclaration. On l'atténue sans
   l'effacer — le visiteur doit voir sa progression, et
   la carte reste cliquable pour revoir la fiche.
-------------------------------------------------- */

.itineraire__etape--acquise {
    background: var(--v-succes-fond);
    border-color: var(--v-succes);
}

.itineraire__etape--acquise .itineraire__etape-titre,
.itineraire__etape--acquise .itineraire__detail,
.itineraire__etape--acquise .itineraire__etat,
.itineraire__etape--acquise .itineraire__voir { opacity: 0.7; }

.itineraire__acquise {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 3px 12px;
    border-radius: var(--v-radius-pill);
    background: var(--v-succes);
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--v-blanc);
}

.itineraire__diplome {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 42px 0 0;
    padding: 16px 20px;
    background: var(--v-violet-700);
    border-radius: var(--v-radius-md);
    color: var(--v-blanc);
}

.itineraire__diplome i { color: var(--v-jaune-500); }

.itineraire__diplome-label {
    width: 100%;
    font-family: var(--v-font-corps);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v-jaune-500);
}

.itineraire__diplome-nom {
    font-family: var(--v-font-titre);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* --------------------------------------------------
   ATTENTE ET NOTE
-------------------------------------------------- */

.itineraire__attente {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 64px 24px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
    font-family: var(--v-font-corps);
    text-align: center;
}

.itineraire__attente strong {
    font-family: var(--v-font-titre);
    font-size: 1.0625rem;
    color: var(--v-texte-titre);
}

.itineraire__attente span {
    font-size: 0.8125rem;
    color: var(--v-texte-meta);
}

.itineraire__attente[hidden] { display: none; }

.itineraire__vide {
    margin: 0;
    padding: 40px 24px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
    font-family: var(--v-font-corps);
    color: var(--v-texte-meta);
    text-align: center;
}

.itineraire__note {
    margin: 16px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

@media (max-width: 767px) {
    .itineraire__head { flex-direction: column; align-items: stretch; }
    .itineraire__schema { justify-content: center; }
    .itineraire__carte-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575px) {
    /* 64 px de haut et de bas pour deux lignes d'attente : sur un
       téléphone, ce cadre occupait un tiers de l'écran pour dire qu'il
       n'y avait rien à voir. */
    .itineraire__attente {
        padding: 32px 18px;
    }

    .itineraire__vide {
        padding: 24px 18px;
    }

    .itineraire__carte {
        padding: 18px;
    }
}