/* ==================================================
   BLOC — HERO SLIDER
================================================== */

/* Le hero d'accueil est le seul bloc à sortir de l'échelle commune :
   Figma lui donne 600 px de haut et un titre à 56 px. */
/* Le fond appartient à la diapositive, pas au bloc : chacune a son
   ambiance, et la couleur change avec elle au défilement. */
.hero_slider {
    position: relative;
    overflow: hidden;
}

/* Le logo de l'en-tête déborde sur le hero, en haut à gauche. Sans
   réserve, il tombe pile sur le surtitre. On dégage donc le haut de la
   diapositive — c'est aussi ce que fait la maquette, où le contenu
   commence bien en dessous du bord.

   La mesure se lit sur --v-logo-debord et non plus en dur : trois
   valeurs recopiées à trois paliers, c'est trois occasions de ne plus
   suivre l'en-tête quand il change. La fiche de formation, elle, avait
   déjà cessé de le suivre. */
.hero_slider__slide {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 600px;
    padding: max(96px, calc(var(--v-logo-debord) + 40px)) 0 56px;
    background: var(--fond, var(--v-fond-hero));
    color: var(--v-texte-inverse);
}

/* En dessous de 992 px le logo ne déborde plus : la réserve n'a plus
   lieu d'être. */
@media (max-width: 991px) {
    .hero_slider__slide {
        min-height: 0;
        padding: 48px 0;
    }
}

/* Le conteneur est dans la diapositive : c'est lui qui borne le
   contenu, la diapositive ne borne que la couleur. */
.hero_slider__slide > .container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--v-contenu);
    padding-left: var(--v-gouttiere);
    padding-right: var(--v-gouttiere);
}

/* L'image du héros tient un cadre 16:9, quelle que soit la proportion
   du fichier déposé.

   Sans lui, chaque diapositive prenait la hauteur de sa propre image :
   une photo en 4:3 poussait la diapositive plus bas qu'une panoramique,
   et le carrousel sautait d'une hauteur à l'autre à chaque passage. Le
   plafond reste malgré tout, pour les colonnes les plus larges. */
.hero_slider__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 420px;
    object-fit: cover;
    display: block;
    border-radius: var(--v-radius-2xl);
}

@media (max-width: 991px) {
    .hero_slider__slide > .container {
        padding-left: var(--v-gouttiere-mobile);
        padding-right: var(--v-gouttiere-mobile);
    }

    .hero_slider__media img {
        max-height: 280px;
    }
}

/* Sur un fond clair — jaune, blanc — le texte blanc disparaît.
   Une seule classe bascule l'ensemble. */
.hero_slider__slide--clair,
.hero_slider__slide--clair .hero_slider__titre,
.hero_slider__slide--clair .hero_slider__sous-titre,
.hero_slider__slide--clair .hero_slider__texte,
.hero_slider__slide--clair .hero_slider__mention,
.hero_slider__slide--clair .v-entoure__mot {
    color: var(--v-texte-titre);
}

.hero_slider__slide--clair .hero_slider__eyebrow {
    color: var(--v-texte-meta) !important;
}

/* Sur fond clair, le bouton clair devient illisible. */
.hero_slider__slide--clair .hero_slider__bouton-clair {
    background: var(--v-action);
    color: var(--v-texte-inverse);
}

/* Image à gauche : seul l'ordre visuel change, le balisage garde le
   texte en premier — c'est lui que suivent les lecteurs d'écran. */
.hero_slider--image-gauche .hero_slider__media {
    margin-right: auto;
}

.hero_slider > .container {
    width: 100%;
}

/* Le H1 n'est pas affiché : c'est le titre de la diapositive qui porte
   le message à l'écran. Il reste dans le balisage parce qu'une page a
   besoin d'un H1 unique et stable — pour les moteurs de recherche
   comme pour qui navigue de titre en titre au clavier.
   `clip` plutôt que `display: none` : masqué à l'œil, toujours lu. */
.hero_slider__titre {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Exception assumée : dans ce bloc, les titres de diapositive ont la
   même taille que le titre principal. Le hero se lit comme une seule
   phrase — un H2 rapetissé y ferait un décrochage visuel injustifié.
   La hiérarchie reste correcte dans le balisage, seule la taille
   s'aligne. */
.hero_slider__sous-titre {
    font-size: 3.5rem;
    line-height: var(--v-lh-titre);
    color: var(--v-texte-inverse);
    margin-bottom: 0;
}

/* Les motifs de fond — cercles et filets — sont communs aux trois
   entêtes : voir hero_motifs.css. Le contenu passe devant eux. */
.hero_slider > .container {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------
   MISE EN VALEUR — cercle tracé autour d'un mot

   S'écrit dans n'importe quel champ de texte riche :
   <span class="v-entoure">le mot</span>. Le tracé est
   une image de fond, donc il suit le mot s'il change
   de longueur ou passe à la ligne.
-------------------------------------------------- */

.v-entoure {
    position: relative;
    display: inline-block;
    /* `currentColor` du tracé : c'est cette teinte qu'il reprend. */
    color: var(--v-cat-therapie);
}

/* Le mot garde la couleur du titre : seul le tracé prend l'accent. */
.v-entoure__mot {
    position: relative;
    z-index: 1;
    color: var(--v-texte-inverse);
}

/* Le tracé déborde du mot de tous les côtés, comme un trait de stylo
   qui ne serre jamais le texte de près. */
.v-entoure__trace {
    position: absolute;
    left: -0.34em;
    right: -0.34em;
    top: -0.3em;
    bottom: -0.28em;
    width: calc(100% + 0.68em);
    height: calc(100% + 0.58em);
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

/* Le trait se dessine : on masque toute sa longueur, puis on la
   découvre. `pathLength` n'étant pas fixé, on prend une longueur
   généreuse — le surplus ne se voit pas. */
.v-entoure__trace path {
    stroke-dasharray: 760;
    stroke-dashoffset: 760;
    /* Légèrement transparent : le trait se pose sur le fond au lieu de
       s'y découper. */
    opacity: 0.75;
    animation: v-entoure-tracer 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
}

@keyframes v-entoure-tracer {
    to { stroke-dashoffset: 0; }
}

/* Sans animation, le trait est là d'emblée. */
@media (prefers-reduced-motion: reduce) {
    .v-entoure__trace path {
        animation: none;
        stroke-dashoffset: 0;
    }
}

.hero_slider__eyebrow {
    font-size: 0.75rem;
}

.hero_slider .v-eyebrow,
.hero_slider .v-titre,
.hero_slider .v-chapo {
    color: var(--v-texte-inverse);
}

.hero_slider__eyebrow {
    color: var(--v-jaune) !important;
}

/* Figma : colonne de texte à 600 px, éléments espacés de 22 px,
   texte à 16 px — plus grand que le chapo courant. */
.hero_slider__texte {
    max-width: 600px;
    margin-top: 22px;
    font-size: 1rem;
}

/* Annotation manuscrite, entre le texte et l'image.
   Figma : Caveat Bold 30 px, jaune, inclinée de 5°.

   Elle était posée en absolu, ce qui la faisait sortir du cadre selon
   la hauteur du hero. Dans le flux, elle tient sa place. */
.hero_slider__accroche {
    display: block;
    width: fit-content;
    margin: 22px 0 0 auto;
    padding-right: 8%;
    font-family: var(--v-font-manuscrite);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--v-surlignage);
    transform: rotate(-5deg);
    pointer-events: none;
}

.hero_slider__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

/* Ligne de réassurance sous les boutons — Figma : 12,5 px. */
.hero_slider__mention {
    margin: 18px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.78125rem;
    color: var(--v-texte-inverse);
    opacity: 0.85;
}

/* Sur le turquoise, le bouton secondaire passe en blanc plein */
.hero_slider__bouton-clair {
    background: var(--v-blanc);
    color: var(--v-texte-titre);
}

.hero_slider__media {
    margin: 0;
}

/* Le cadre de l'image est défini plus haut, avec son 16:9. Cette
   seconde déclaration ne portait que la largeur, l'affichage et
   l'arrondi, qui l'ont rejoint. */

/* CARTE PROCHAINE SESSION — 330 px de large, 20 px de marge interne. */
.hero_slider__session {
    position: absolute;
    right: 5%;
    bottom: 8%;
    width: 330px;
    max-width: 100%;
    padding: 20px;
    background: var(--v-blanc);
    border-radius: var(--v-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.hero_slider__session-titre {
    margin: 0 0 12px;
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v-orange);
}

.hero_slider__session-formation {
    margin: 0 0 0.25rem;
    font-family: var(--v-font-titre);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

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

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

/* --------------------------------------------------
   CONTRÔLES DU CARROUSEL

   Flèches rondes blanches sur les côtés, pastilles en
   bas au centre. La pastille active s'allonge en barre :
   on voit d'un coup d'œil où l'on est, ce qu'un simple
   changement de teinte ne dit pas.
-------------------------------------------------- */

.hero_slider .tns-controls button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--v-radius-pill);
    border: none;
    background: var(--v-blanc);
    box-shadow: 0 4px 14px rgba(56, 49, 111, 0.18);
    color: var(--v-texte-titre);
    /* Le chevron doit remplir le rond : à 1,125 rem il flottait au
       milieu d'un bouton de 48 px. */
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero_slider .tns-controls button:hover {
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 6px 20px rgba(56, 49, 111, 0.26);
}

.hero_slider .tns-controls button[data-controls="prev"] { left: 24px; }
.hero_slider .tns-controls button[data-controls="next"] { right: 24px; }

/* Les pastilles se calent sur le bord gauche du contenu, pas au centre
   de l'écran : elles reprennent la largeur et les gouttières du
   conteneur pour s'aligner sur le texte au-dessus. */
.hero_slider .tns-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 32px;
    z-index: 3;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    max-width: var(--v-contenu);
    padding-left: var(--v-gouttiere);
    padding-right: var(--v-gouttiere);
}

@media (max-width: 991px) {
    .hero_slider .tns-nav {
        bottom: 20px;
        padding-left: var(--v-gouttiere-mobile);
        padding-right: var(--v-gouttiere-mobile);
    }
}

.hero_slider .tns-nav button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: var(--v-radius-pill);
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: width 0.28s ease, background-color 0.28s ease;
}

.hero_slider .tns-nav button.tns-nav-active {
    width: 30px;
    background: var(--v-blanc);
}

/* Sur un fond clair, des pastilles blanches seraient invisibles. */
.hero_slider__slide--clair ~ .tns-nav button,
.hero_slider--clair .tns-nav button {
    background: rgba(72, 64, 140, 0.3);
}


@media (max-width: 767px) {
    .hero_slider .tns-controls button {
        width: 40px;
        height: 40px;
    }
    .hero_slider .tns-controls button[data-controls="prev"] { left: 8px; }
    .hero_slider .tns-controls button[data-controls="next"] { right: 8px; }
}

@media (max-width: 991px) {

    /* LA BANDE CLAIRE SOUS L'EN-TÊTE VENAIT D'ICI.

       Ces 56 px de rembourrage étaient posés sur .hero_slider. Or ce
       bloc-là ne porte AUCUN fond : il ne fait que cadrer et rogner. La
       couleur — ou l'image — appartient à .hero_slider__slide, à
       l'intérieur.

       Le rembourrage poussait donc la diapositive vers le bas et
       laissait voir 56 px du fond de page, crème, entre l'en-tête et
       elle. Une bande claire pleine largeur, juste sous la barre — et
       autant sous le carrousel.

       La diapositive a déjà le sien, déclaré plus haut dans ce fichier :
       48 px de haut et de bas, absorbés par sa couleur. Il n'y a donc
       rien à reporter — seulement à retirer. .hero_slider ne garde que
       ce qui le concerne : sa hauteur. */
    .hero_slider {
        min-height: 0;
    }
    /* C'est __sous-titre qu'on réduit, pas __titre.

       __titre est le H1 de la page, masqué à l'œil et réservé aux
       lecteurs d'écran — lui donner une taille ne change rien à ce
       qu'on voit. Le titre visible de chaque diapositive est
       __sous-titre, et il est resté à 56 px sur tous les écrans : à
       partir de la tablette, il était plus gros que ce que la page
       pouvait porter. */
    .hero_slider__sous-titre {
        font-size: 2.25rem;
    }
    .hero_slider__session {
        position: static;
        width: auto;
        margin-top: 1.5rem;
    }
    /* En dessous de 992 px, la place manque pour poser l'annotation
       en travers sans qu'elle chevauche le texte. */
    .hero_slider__accroche {
        position: static;
        margin-top: 18px;
        transform: rotate(-3deg);
        transform-origin: left center;
    }
}

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

   Écrit en DERNIER, et c'est délibéré.

   Ces règles et celles de la requête à 991 px visent les mêmes
   sélecteurs, avec la même spécificité. À 390 px, les deux requêtes
   s'appliquent : c'est donc la dernière écrite qui gagne. Placées
   avant, celles-ci étaient écrasées par la tablette et le titre
   restait à 36 px sur un téléphone.
-------------------------------------------------- */

@media (max-width: 575px) {
    /* 36 px de titre sur 350 px de large, c'est trois mots par ligne :
       la promesse d'accueil s'y lit comme une liste. */
    .hero_slider__sous-titre {
        font-size: 1.75rem;
    }

    .hero_slider__accroche {
        font-size: 0.875rem;
    }

    /* Le rembourrage va sur la DIAPOSITIVE, pas sur le bloc.

       Je l'avais posé sur .hero_slider. Or ce bloc n'a aucun fond — il
       ne fait que cadrer et rogner ; la couleur, elle, est portée par
       .hero_slider__slide. Quarante pixels de rembourrage sur le bloc
       poussaient donc la diapositive vers le bas et laissaient
       apparaître quarante pixels du fond de page, crème, au-dessus
       d'elle : une bande claire pleine largeur juste sous l'en-tête.
       Et autant en dessous. */
    .hero_slider__slide {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    /* Les boutons de l'accueil prennent la largeur : ils portent des
       intitulés longs, et c'est le premier geste du site. */
    .hero_slider__actions > .v-bouton {
        flex: 1 1 100%;
        justify-content: center;
    }
}