/* ==================================================
   BLOC — SCHÉMA DES PARCOURS

   Reprise de la maquette : panneau de socle turquoise
   pâle, embranchement tracé, filières en colonnes,
   colonne latérale de spécialisations.

   Les traits de liaison sont en CSS et non dessinés :
   ils suivent la hauteur réelle des cartes, ce qu'un
   tracé fixe ne saurait faire dès qu'un texte s'allonge.
================================================== */

.schema_parcours {
    --sp-trait: #9ca3af;
    --sp-gouttiere: 28px;
    --sp-largeur-voie: 900px;
    --sp-largeur-laterale: 400px;

    background: var(--v-fond-page);
}

/* --------------------------------------------------
   ÉLÉMENTS PARTAGÉS
-------------------------------------------------- */

/* Micro-libellé en capitales : les mentions de rythme,
   de groupe et de légende. */
.schema_parcours .sp-micro {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
}

.schema_parcours .sp-note {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--v-texte-meta);
}

.schema_parcours .sp-duree {
    flex: 0 0 auto;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--v-texte-meta);
}

.schema_parcours .sp-ou {
    align-self: center;
    flex: 0 0 auto;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--v-texte-meta);
}

/* Pastille de catégorie. La couleur vient de --cat, posée par la
   variante de carte : une seule règle sert toutes les familles. */
.schema_parcours .sp-pastille {
    display: inline-block;
    align-self: flex-start;
    margin: 0;
    padding: 4px 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(--cat-texte, var(--v-blanc));
}

.schema_parcours .sp-pastille--bases { --cat: var(--v-cat-bases); --cat-texte: var(--v-blanc); }
.schema_parcours .sp-pastille--specialisations { --cat: var(--v-cat-specialisations); --cat-texte: var(--v-blanc); }

/* --------------------------------------------------
   BARRE — BASCULE DE VOIE ET ÉQUIVALENCES
-------------------------------------------------- */

.sp-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.sp-barre__equiv {
    padding: 12px 22px;
    border: 1.25px solid var(--v-violet-500);
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-violet-500);
    text-decoration: none;
}

.sp-barre__equiv:hover {
    background: var(--v-violet-500);
    color: var(--v-blanc);
}

/* L'intitulé qui dit à quoi sert la bascule. Sans lui, trois pastilles
   posées en tête de page ne s'expliquent pas d'elles-mêmes. */
.sp-barre__voie {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-barre__voie-libelle {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--v-texte-meta);
}

.sp-switch {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--v-violet-500);
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
}

/* Chaque voie porte sa couleur : le rose de l'hypnose pour l'hypnose,
   le violet de la marque pour les autres. Le segment inactif l'écrit,
   le segment actif s'en remplit.

   La classe se déduit du libellé — « Hypnose » donne
   `.sp-switch__seg--hypnose`. Une voie qu'on ajoute, ou qu'on renomme,
   retombe donc sur le violet tant qu'on ne lui écrit pas sa règle. */
.sp-switch__seg {
    --voie: var(--v-violet-500);
    --voie-actif: var(--v-action);
    --voie-texte: var(--v-texte-inverse);

    padding: 9px 20px;
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--voie);
    text-decoration: none;
}

.sp-switch__seg--hypnose {
    --voie: var(--v-urgence);
    --voie-actif: var(--v-urgence);
}

.sp-switch__seg.is-actif {
    background: var(--voie-actif);
    color: var(--voie-texte);
}

/* --------------------------------------------------
   LE SOCLE
-------------------------------------------------- */

.sp-socle {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: var(--sp-largeur-voie);
    margin: 0 auto;
    padding: 22px 24px;
    background: var(--v-turquoise-100);
    border-radius: 18px;
}

.sp-socle__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.sp-socle__titre {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--v-font-titre);
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.sp-socle__titre a { color: inherit; text-decoration: none; }
.sp-socle__titre a:hover { text-decoration: underline; }

.sp-etat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--v-font-corps);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v-turquoise-700);
}

.sp-etat i { font-size: 0.875rem; }

/* Séparateur « puis, quel que soit le rythme choisi » : un trait de
   part et d'autre du texte, obtenu par deux pseudo-éléments extensibles. */
.sp-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 2px;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--v-texte-meta);
}

.sp-sep::before,
.sp-sep::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #bfd9df;
}

.sp-alt {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.sp-alt__col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Cadre pointillé des modules interchangeables. */
.sp-encadre {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--v-violet-500);
    border-radius: var(--v-radius-md);
}

.sp-module {
    padding: 13px 16px;
    background: var(--v-blanc);
    border: 1px solid #cfe3e8;
    border-radius: var(--v-radius-md);
}

.sp-module--valide {
    background: var(--v-turquoise-100);
    border-color: var(--v-turquoise-500);
}

.sp-module__titre-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
}

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

.sp-module__titre:hover { text-decoration: underline; }

.sp-module__note {
    margin: 4px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--v-texte-meta);
}

.sp-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--v-radius-pill);
    background: var(--v-succes-fond);
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v-succes-texte);
}

/* Le renvoi en question, sous un rang du socle.

   « Systémique pour les hypnos » ouvre le socle elle aussi, mais à un
   seul public. En troisième colonne d'alternative, elle se lisait comme
   un troisième rythme offert à tout le monde, et le rang alignait trois
   cartes séparées de deux « ou ». Une question posée dessous ne
   s'adresse qu'à ceux qu'elle concerne. */
.sp-renvoi {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.sp-renvoi__question {
    color: var(--v-texte-meta);
}

.sp-renvoi__lien {
    font-weight: 600;
    color: var(--v-violet-500);
    text-decoration: none;
}

.sp-renvoi__lien:hover,
.sp-renvoi__lien:focus-visible {
    text-decoration: underline;
}

.sp-renvoi__fleche {
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.sp-renvoi__lien:hover .sp-renvoi__fleche {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .sp-renvoi__fleche { transition: none; }
}

.sp-evaluation {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 13px 16px;
    background: var(--v-blanc);
    border: 1.5px solid var(--v-violet-500);
    border-radius: var(--v-radius-md);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-violet-500);
}

/* --------------------------------------------------
   LE SOCLE ANNOTÉ — REPÈRES ET COLONNE DE NOTES

   Un schéma dense ne dit jamais comment il se lit. La page « La Base,
   pas à pas » pose donc des repères chiffrés sur ses éléments et range
   leurs explications dans une colonne, à côté — comme on annote un
   plan, plutôt qu'en intercalant des encadrés qui hacheraient le fil
   des rangs.

   Rien de tout ceci ne se rend sans annotation saisie : le socle reste
   alors centré sur ses 900 px, comme sur les deux autres pages.
-------------------------------------------------- */

.sp-socle-annote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sp-largeur-laterale);
    gap: var(--sp-gouttiere);
    align-items: start;
}

/* Le socle perd sa largeur maximale et sa mise au centre : c'est la
   grille qui le mesure désormais, et il partagerait mal la ligne en
   gardant 900 px pour lui seul. */
.sp-socle-annote > .sp-socle {
    max-width: none;
    margin: 0;
}

/* Le jeton chiffré, sur le schéma comme devant la note : c'est le même
   objet aux deux bouts, il faut qu'on le reconnaisse d'un coup d'œil.
   Orange, parce qu'il désigne sans faire partie du parcours. */
.sp-repere {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--v-action-cta);
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--v-blanc);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.sp-repere + .sp-repere { margin-left: 4px; }

a.sp-repere:hover,
a.sp-repere:focus-visible { transform: scale(1.15); }

/* Un rang sans séparateur n'a pas de ligne où poser ses repères — c'est
   le cas de l'alternative de rythme qui ouvre le socle. Ils prennent
   donc la leur, calée à droite, du côté où se lit la note. La marge
   négative les fait tenir à leur rang plutôt que de flotter entre
   deux. */
.sp-rang-reperes {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin: 0 0 -8px;
}

.sp-annotations {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

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

.sp-annotations__liste {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Le repère et son texte côte à côte : le chiffre garde sa colonne, et
   le texte reste aligné sur lui-même d'une ligne à l'autre. */
.sp-annotation {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    /* Un saut depuis un repère ne doit pas coller la note au bord haut
       de la fenêtre, sous l'entête fixe. */
    scroll-margin-top: 100px;
}

.sp-annotation__corps p {
    margin: 0 0 6px;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--v-texte-corps);
}

.sp-annotation__corps p:last-child { margin-bottom: 0; }

.sp-annotation__lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-action-cta);
    text-decoration: none;
}

.sp-annotation__lien:hover { text-decoration: underline; }

/* La note visée se signale un instant : arriver au milieu d'une liste
   de quatre sans savoir laquelle on vient d'ouvrir ne sert à rien. */
.sp-annotation:target .sp-repere--note {
    box-shadow: 0 0 0 4px var(--v-orange-100);
}

/* --------------------------------------------------
   ENCADRÉ DES SUPERVISIONS

   Carte blanche à filet orange, dans le socle. L'orange la distingue
   des modules du parcours, qui sont turquoise : ce n'est pas une étape
   de plus, c'est ce qui accompagne toutes les autres.
-------------------------------------------------- */
/* L'encadre porte la couleur de sa categorie, comme les cartes.

   Son liseré était orange — celui de la thérapie brève — et son badge
   violet. Ni l'un ni l'autre n'était la couleur des supervisions, qui
   sont pourtant une catégorie à part entière depuis qu'elles ont quitté
   leur filière d'origine, et qui ont leur jeton : --v-cat-supervision.

   L'encadré et son badge la prennent tous les deux, par la variable
   --cat : une seule déclaration, et ils ne peuvent plus diverger. */
.sp-supervisions {
    --cat: var(--v-cat-supervision);
    --cat-texte: var(--v-cat-supervision-texte);

    margin-top: 6px;
    padding: 18px 20px;
    background: var(--v-blanc);
    border-left: 4px solid var(--cat);
    border-radius: var(--v-radius-md);
}

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

.sp-supervisions__titre {
    font-family: var(--v-font-titre);
    font-size: 1rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

/* Le badge n'a plus sa couleur propre : il herite de celle de l'encadre
   qui le contient, donc les deux s'accordent par construction. */

.sp-supervisions__texte p {
    margin: 0 0 8px;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--v-texte-corps);
}

.sp-supervisions__texte p:last-child { margin-bottom: 0; }

.sp-supervisions__lien {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-cat-therapie);
    text-decoration: none;
}

.sp-supervisions__lien:hover { text-decoration: underline; }

.sp-facultatif {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 11px 14px;
    background: var(--v-blanc);
    border-radius: 10px;
    font-family: var(--v-font-corps);
    font-size: 0.71875rem;
    color: var(--v-texte-meta);
}

/* --------------------------------------------------
   TIGE ET EMBRANCHEMENTS
-------------------------------------------------- */

/* Tige verticale entre le socle et le premier embranchement. */
.sp-tige {
    display: block;
    width: 1.5px;
    height: 26px;
    margin: 0 auto;
    background: var(--sp-trait);
}

/* Flèche verticale : trait puis pointe, en pseudo-éléments pour qu'elle
   s'étire avec le rang plutôt que d'être posée à une hauteur fixe. */
.sp-fleche {
    display: block;
    position: relative;
    height: 34px;
    margin: 0;
}

.sp-fleche--legendee {
    height: auto;
    padding: 6px 0 32px;
    font-family: var(--v-font-corps);
    font-size: 0.65625rem;
    color: var(--v-texte-meta);
    text-align: center;
}

.sp-fleche::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 1.5px;
    height: 20px;
    background: var(--sp-trait);
    transform: translateX(-50%);
}

.sp-fleche::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--sp-trait);
    transform: translateX(-50%);
}

/* L'embranchement.

   Le trait horizontal est fait de deux demi-traits, portés par la
   première et la dernière branche et prolongés d'une demi-gouttière :
   il relie donc les centres réels des branches, quelles que soient
   leurs largeurs. Un trait unique centré se décalerait dès que les
   colonnes cessent d'être égales — ce qui est le cas ici, 900 et 400. */
.sp-fork {
    display: grid;
    gap: var(--sp-gouttiere);
    align-items: start;
}

.sp-fork__branche {
    position: relative;
    padding-top: 26px;
    min-width: 0;
    text-align: center;
}

.sp-fork__branche::before {
    content: "";
    position: absolute;
    top: 0;
    height: 1.5px;
    background: var(--sp-trait);
}

.sp-fork__branche:first-child::before {
    left: 50%;
    right: calc(var(--sp-gouttiere) / -2);
}

.sp-fork__branche:last-child::before {
    left: 0;
    right: 50%;
    margin-left: calc(var(--sp-gouttiere) / -2);
}

.sp-fork__branche:only-child::before { display: none; }

.sp-fork__tige {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.5px;
    height: 26px;
    background: var(--sp-trait);
    transform: translateX(-50%);
}

.sp-fork__libelle {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v-violet-700);
}

/* L'intitulé de la voie devient un lien quand elle mène à une page de
   palier. Il garde exactement l'allure du texte qu'il remplace — même
   graisse, même capitales, même couleur : c'est un repère du schéma
   avant d'être un lien, et le souligner en permanence le ferait passer
   pour un bouton posé au milieu du tracé.

   Le lien vivait auparavant sur la carte du premier module, qui prenait
   alors le titre de la page au lieu de nommer la formation qu'on
   réserve. « Où ça mène » se demande au-dessus de la voie. */
.sp-fork__lien {
    color: inherit;
    text-decoration: none;
}

.sp-fork__lien:hover,
.sp-fork__lien:focus-visible {
    text-decoration: underline;
}

.sp-fork__fleche-lien {
    display: inline-block;
    margin-left: 3px;
    transition: transform 0.2s ease;
}

.sp-fork__lien:hover .sp-fork__fleche-lien {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .sp-fork__fleche-lien { transition: none; }
}

.sp-fork__note {
    display: block;
    margin-top: 2px;
    font-size: 0.65625rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v-texte-meta);
}

/* Les branches épousent la grille des colonnes qu'elles annoncent :
   la flèche tombe exactement au milieu de la colonne concernée. */
.sp-fork--colonnes { grid-template-columns: minmax(0, 1fr) var(--sp-largeur-laterale); }
.sp-fork--seule    { grid-template-columns: minmax(0, var(--sp-largeur-voie)); justify-content: center; }
.sp-fork--filieres { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------
   LES COLONNES
-------------------------------------------------- */

.sp-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sp-largeur-laterale);
    gap: var(--sp-gouttiere);
    align-items: start;
}

.sp-colonnes--seule {
    grid-template-columns: minmax(0, var(--sp-largeur-voie));
    justify-content: center;
}

.sp-filieres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-gouttiere);
    align-items: start;
}

.sp-duo {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.sp-duo .sp-carte { flex: 1 1 0; min-width: 0; }

/* --------------------------------------------------
   LES CARTES
-------------------------------------------------- */

/* --------------------------------------------------
   L'ENCADRÉ D'UNE FAMILLE

   La maquette pose chaque filière sur le fond clair de
   sa famille, et les cartes blanches par-dessus. C'est
   ce fond qui dit d'un coup d'œil que ces deux ou trois
   cartes forment un même chemin.
-------------------------------------------------- */

.sp-famille {
    padding: 24px;
    border-radius: 18px;
    background: var(--cat-fond);
}

.sp-famille--bases           { --cat-fond: var(--v-cat-bases-fond); }
.sp-famille--therapie        { --cat-fond: var(--v-cat-therapie-fond); }
.sp-famille--entreprise      { --cat-fond: var(--v-cat-entreprise-fond); }
.sp-famille--hypnose         { --cat-fond: var(--v-cat-hypnose-fond); }
.sp-famille--specialisations { --cat-fond: var(--v-cat-specialisations-fond); }

/* Le liseré violet, comme sur la colonne latérale : c'est lui qui
   nomme la famille, le fond ne fait que poser le cadre. */
.sp-famille--specialisations {
    border: 1.5px solid var(--v-cat-specialisations);
}

/* Le titre de la voie, dans son cadre.

   Le schema nomme quatre choses : le socle, la voie, les filieres et les
   specialisations. Trois d'entre elles affichaient leur nom DANS leur
   encadre ; la voie, seule, laissait le sien flotter au-dessus, sur la
   tige de l'embranchement. Son cadre restait anonyme alors qu'il porte
   la couleur d'une filiere entiere.

   Meme composition que .sp-socle__titre, a la meme taille : c'est le
   pendant du socle, pas un sous-titre. */
/* L'ecart avec la premiere carte est porte par le bloc entier, pas par
   la precision : celle-ci peut etre vide, et le titre se retrouvait
   alors colle a la carte. Meme valeur que la gouttiere interne du
   socle, dont ce bloc est le pendant. */
.sp-voie__head {
    margin-bottom: 14px;
}

.sp-voie__titre {
    margin: 0 0 2px;
    font-family: var(--v-font-titre);
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.sp-voie__titre a { color: inherit; text-decoration: none; }
.sp-voie__titre a:hover { text-decoration: underline; }

/* La precision sous le titre — « des Tactique d'intervention validee,
   sans attendre l'evaluation ». Elle descend avec lui : separee de son
   titre, elle ne se rattachait plus a rien. */
.sp-voie__note {
    margin: 0;
}

.sp-carte {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: 14px;
}

/* La couleur de famille tient le cadre et la pastille : une variante,
   deux effets, aucun risque de les voir diverger. */
.sp-carte--therapie        { --cat: var(--v-cat-therapie);        --cat-texte: var(--v-cat-therapie-texte);        border: 1.5px solid var(--cat); }
.sp-carte--entreprise      { --cat: var(--v-cat-entreprise);      --cat-texte: var(--v-cat-entreprise-texte);      border: 1.5px solid var(--cat); }
.sp-carte--hypnose         { --cat: var(--v-cat-hypnose);         --cat-texte: var(--v-cat-hypnose-texte);         border: 1.5px solid var(--cat); }
.sp-carte--bases           { --cat: var(--v-cat-bases);           --cat-texte: var(--v-cat-bases-texte);           border: 1.5px solid var(--cat); }
.sp-carte--specialisations { --cat: var(--v-cat-specialisations); --cat-texte: var(--v-cat-specialisations-texte); border: 1.5px solid var(--cat); }

.sp-carte__titre-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sp-carte__titre {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--v-font-titre);
    font-size: 0.96875rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

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

/* UN TITRE QUI MÈNE QUELQUE PART LE DIT AVANT QU'ON LE SURVOLE.

   Le lien d'un palier n'avait pour tout indice qu'un soulignement au
   survol : invisible au doigt, qui ne survole rien, et invisible à l'œil
   qui parcourt le schéma sans y promener la souris. On lisait donc un
   dessin de cartes mortes, alors que la moitié d'entre elles ouvrent la
   page de leur palier.

   Le chevron ne s'affiche que là où il y a un lien — il est posé DANS
   la balise, pas en pseudo-élément — donc il ne promet jamais rien qui
   n'existe pas. Il avance de trois pixels au survol, comme les autres
   liens fléchés du site.

   Survoler la carte souligne son titre : la zone se signale en entier,
   sans que la carte se prétende cliquable. Le curseur main reste sur le
   lien seul, parce que le reste de la carte ne mène nulle part et
   qu'une main sur une zone morte est une promesse non tenue. */
.sp-carte__titre a:hover,
.sp-carte__titre a:focus-visible,
.sp-carte:hover .sp-carte__titre a {
    text-decoration: underline;
}

.sp-fleche-lien {
    display: inline-block;
    margin-left: 4px;
    font-weight: 400;
    color: var(--v-action);
    transition: transform 0.2s ease;
}

.sp-carte:hover .sp-fleche-lien,
.sp-carte__titre a:hover .sp-fleche-lien,
.sp-socle__titre a:hover .sp-fleche-lien,
.sp-laterale__titre a:hover .sp-fleche-lien {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .sp-fleche-lien { transition: none; }
}

.sp-carte__note {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--v-texte-meta);
}

.sp-lignes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
}

.sp-ligne a {
    color: var(--v-texte-corps);
    text-decoration: none;
}

.sp-ligne a:hover { text-decoration: underline; }

/* L'évaluation qui conclut le niveau, en bas de sa carte : le losange et
   le cadre violet de l'évaluation d'accès du socle, en plus serré. Un
   filet la sépare des modules, dont elle n'est pas un de plus. */
.sp-carte__evaluation {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 0;
    padding: 9px 12px;
    background: var(--v-blanc);
    border: 1.5px solid var(--v-violet-500);
    border-radius: var(--v-radius-md);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-violet-500);
}

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

.sp-carte__evaluation a:hover { text-decoration: underline; }

.sp-diplome {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-cat-therapie);
}

/* --------------------------------------------------
   COLONNE LATÉRALE — SPÉCIALISATIONS
-------------------------------------------------- */

.sp-laterale {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px;
    /* Le même fond que l'encadré des spécialisations de la page famille :
       une seule décision, prise dans la charte, pour les deux schémas. */
    background: var(--v-cat-specialisations-fond);
    border: 1.5px solid var(--v-cat-specialisations);
    border-radius: var(--v-radius-lg);
}

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

/* Le titre menant a la page des specialisations sortait en bleu souligne,
   la couleur de lien par defaut du navigateur : c'etait le seul des
   quatre titres du schema a ne pas neutraliser son <a>, et il tranchait
   avec le socle, la voie et les cartes, qui heritent tous du leur.

   Un titre reste un titre : il se souligne au survol pour dire qu'il
   mene quelque part, pas en permanence. */
.sp-laterale__titre a { color: inherit; text-decoration: none; }
.sp-laterale__titre a:hover { text-decoration: underline; }

.sp-laterale__groupe {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

/* --------------------------------------------------
   PASTILLES DE LIENS
-------------------------------------------------- */

.sp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-chips a,
.sp-chip-inerte {
    display: inline-block;
    padding: 5px 11px;
    border-radius: var(--v-radius-pill);
    background: #efeff3;
    font-family: var(--v-font-corps);
    font-size: 0.71875rem;
    font-weight: 500;
    color: var(--v-texte-titre);
    text-decoration: none;
}

.sp-chips a:hover { background: var(--v-violet-500); color: var(--v-blanc); }

/* Dans la colonne des spécialisations, les pastilles se posent en blanc.

   Leur gris-violet #efeff3 était fait pour un fond blanc ; sur le
   turquoise clair de la colonne il en est à deux points, et les neuf
   spécialisations se fondaient dans leur cadre. Le socle fait déjà cela
   avec ses modules — cartes blanches sur panneau turquoise. */
.sp-laterale .sp-chips a,
.sp-laterale .sp-chip-inerte {
    background: var(--v-blanc);
}

/* Le survol, rétabli après le fond blanc.
   La règle du dessus a la même force que « .sp-chips a:hover » et vient
   après elle : au survol, le fond restait blanc pendant que le texte
   passait au blanc — les intitulés disparaissaient (Virages, 21/09/2026). */
.sp-laterale .sp-chips a:hover,
.sp-laterale .sp-chips a:focus-visible {
    background: var(--v-violet-500);
    color: var(--v-blanc);
}

.sp-chips--neutres a,
.sp-chips--neutres .sp-chip-inerte {
    background: #f4f2ee;
    color: var(--v-texte-meta);
}

/* --------------------------------------------------
   MODULES AUTONOMES ET LÉGENDE
-------------------------------------------------- */

.sp-autonomes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 44px;
    padding: 18px 20px;
    background: var(--v-fond-carte);
    border: 1px dashed #c9c4bc;
    border-radius: var(--v-radius-lg);
}

.sp-autonomes__titre {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.sp-autonomes__titre i { color: var(--v-gris-400); }

/* --------------------------------------------------
   LÉGENDE DES ÉTATS

   Retirée par erreur, remise : les deux maquettes v3
   la portent bien, en pied de schéma.
-------------------------------------------------- */

.sp-legende {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin: 20px 0 0;
    padding: 12px 20px;
    background: var(--v-blanc);
    border-radius: 14px;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

.sp-legende__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sp-legende__item--accessible i { color: var(--v-turquoise-500); }
.sp-legende__item--valide i     { color: var(--v-turquoise-500); }
.sp-legende__item--evaluation i { color: var(--v-violet-500); }
.sp-legende__item--diplome i    { color: var(--v-cat-therapie); }
.sp-legende__item--verrou i     { color: var(--v-gris-400); }

/* --------------------------------------------------
   ADAPTATIONS
-------------------------------------------------- */

@media (max-width: 1199px) {
    .sp-colonnes,
    .sp-fork--colonnes {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Les annotations passent sous le schéma au même palier que la
       colonne latérale — 400 px de notes à côté d'un socle qui n'en fait
       plus que 500, ce n'est plus une marge, c'est une seconde colonne.
       Les repères deviennent alors des liens utiles : ils descendent
       jusqu'à leur note. */
    .sp-socle-annote {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .sp-socle-annote > .sp-socle,
    .sp-socle-annote > .sp-annotations {
        width: 100%;
        max-width: var(--sp-largeur-voie);
        margin: 0 auto;
    }

    /* Une seule colonne : l'embranchement n'a plus rien à relier — ni le
       demi-trait horizontal, ni la tige, ni la flèche.

       Les deux dernières restaient dessinées une fois les branches
       empilées : on lisait quatre traits verticaux à la file, puis les
       cartes en dessous. Un tracé ne relie que ce qui est côte à côte.

       Seuls les intitulés demeurent, chacun en tête de ce qu'il annonce. */
    .sp-tige:has(+ .sp-fork--colonnes),
    .sp-fork--colonnes .sp-fork__branche::before,
    .sp-fork--colonnes .sp-fork__tige,
    .sp-fork--colonnes .sp-fork__branche > .sp-fleche {
        display: none;
    }

    /* L'air que donnaient la tige et la flèche, rendu en marges : sans
       elles, l'intitulé se collait au socle d'un côté, aux cartes de
       l'autre. */
    .sp-fork--colonnes {
        margin: 22px 0 14px;
    }

    .sp-fork--colonnes .sp-fork__branche {
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    .sp-alt,
    .sp-duo {
        flex-direction: column;
    }

    .sp-filieres {
        grid-template-columns: minmax(0, 1fr);
    }

    /* LES INTITULÉS D'EMBRANCHEMENT PARTENT AVEC LEUR TRACÉ.

       Un embranchement est un bloc à part, posé AU-DESSUS des colonnes
       qu'il annonce : côte à côte, chaque intitulé tombe au centre de la
       sienne, et c'est cette position qui lui donne son sens.

       Empilées, les colonnes emportent cette position. Les deux
       embranchements se suivent alors sans rien entre eux, et le schéma
       s'ouvre sur sept lignes de texte d'affilée — « Voie thérapie brève
       & coaching », « Spécialisations », « Filière … », leurs notes de
       condition — avant la première carte. Des légendes de tracé sans
       tracé ne définissent plus aucun chemin ; elles s'effacent.

       Rien d'unique ne disparaît côté spécialisations : la colonne porte
       son propre titre et sa propre note dans son encadré. */
    .sp-tige:has(+ .sp-fork--colonnes),
    .sp-fork--colonnes,
    .sp-fork--filieres {
        display: none;
    }

    /* L'écart que donnait l'embranchement entre le socle et la voie,
       rendu en marge : sans lui, le premier cadre venait coller au
       socle. */
    .sp-colonnes {
        margin-top: 18px;
    }

    .sp-socle,
    .sp-annotations { padding: 18px; }

    .sp-barre { justify-content: center; }

    .sp-legende { gap: 12px 18px; }

    .sp-famille { padding: 16px; }


}

/* ==================================================
   MOBILE 390

   Le schéma est le bloc le plus dense du thème : un socle, des
   embranchements tracés, deux voies en colonnes, une colonne latérale.
   Tout cela s'empile déjà à 1200 et à 768 px. Ce qui manquait, ce sont
   les mesures : des rembourrages de 20 à 24 px repris du grand écran,
   et surtout une bascule de voie qui ne pouvait pas tenir.
================================================== */

@media (max-width: 575px) {

    /* L'écart entre les branches se resserre : à 28 px, deux cartes
       empilées paraissaient sans rapport l'une avec l'autre. */
    .schema_parcours {
        --sp-gouttiere: 16px;
    }

    /* --------------------------------------------------
       LA BASCULE DE VOIE

       « Je veux voir le parcours : » suivi de deux pastilles —
       Thérapie & coaching, Hypnose — demandait près de quatre cents
       pixels sur une ligne. La rangée s'enroulait bien, mais pas son
       intérieur : l'intitulé et la bascule restaient soudés et
       débordaient ensemble.

       L'intitulé passe donc au-dessus, et les voies s'empilent.
    -------------------------------------------------- */
    .sp-barre {
        gap: 12px;
    }

    .sp-barre__voie {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    /* Les segments s'empilent au lieu de se partager la ligne.

       Ils étaient trois à se serrer dans 350 px, et le premier —
       « Thérapie brève ou coaching d'entreprise » — n'y tenait pas :
       cinq lignes de texte dans un tiers de la largeur, sous deux
       pastilles d'un mot. Une pastille pleine largeur par voie se lit,
       et le doigt la trouve. */
    .sp-switch {
        width: 100%;
        flex-direction: column;
    }

    .sp-switch__seg {
        flex: 0 0 auto;
        min-width: 0;
        padding: 10px 12px;
        text-align: center;
    }

    /* Le renvoi vers les équivalences prend la largeur lui aussi : une
       pastille de 200 px calée à gauche sous une bascule pleine
       largeur se lit comme un reste. */
    .sp-barre__equiv {
        width: 100%;
        padding: 11px 16px;
        text-align: center;
    }

    /* --------------------------------------------------
       LES MESURES DES PANNEAUX

       Vingt-quatre pixels de chaque côté sur 350 px de large, c'est un
       septième de la page en marge intérieure — et les cartes du
       schéma en contiennent d'autres, qui rembourrent à leur tour.
    -------------------------------------------------- */
    .sp-socle,
    .sp-annotations,
    .sp-laterale,
    .sp-supervisions,
    .sp-autonomes,
    .sp-famille {
        padding: 16px;
    }

    .sp-carte {
        padding: 14px;
    }

    .sp-module,
    .sp-evaluation {
        padding: 11px 13px;
    }

    .sp-facultatif {
        padding: 10px 12px;
    }

    .sp-legende {
        gap: 10px 14px;
        padding: 12px 14px;
    }

    /* Les flèches légendées tiennent trente-deux pixels de haut sous
       chaque carte. Empilées, elles finissaient par occuper plus de
       place que ce qu'elles relient. */
    .sp-fleche--legendee {
        padding-bottom: 24px;
    }
}