/* ==================================================
   EN-TÊTE DU SITE

   Barre de contact (34 px) puis en-tête (86 px), aux
   mesures de la maquette.
================================================== */

/* Lien d'évitement : invisible jusqu'à ce qu'on l'atteigne au clavier.
   Sans lui, il faut traverser toute la navigation à chaque page. */
.v-evitement {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: 12px 20px;
    background: var(--v-action);
    color: var(--v-texte-inverse);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
}

.v-evitement:focus {
    left: 16px;
    top: 16px;
}

/* --------------------------------------------------
   BARRE DE CONTACT
-------------------------------------------------- */

/* Fond violet foncé, texte clair — c'est la bande la plus sombre de la
   page, elle pose la marque avant même le logo. */
.v-topbar {
    background: var(--v-fond-footer);
    color: var(--v-texte-inverse);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
}

.v-topbar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 34px;
    max-width: var(--v-contenu);
    padding-left: var(--v-gouttiere);
    padding-right: var(--v-gouttiere);
}

/* Les téléphones, les réseaux et le compte s'affichent à deux endroits :
   ici, et dans le panneau du burger sur téléphone. Le balisage est le
   même aux deux places — voir virages_entete_contacts() et ses voisines
   —, c'est le parent qui l'habille. D'où des classes sans préfixe de
   zone, et un habillage écrit sous `.v-topbar` d'un côté, sous
   `.v-header__services` de l'autre. */
.v-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
}

.v-contacts a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Le drapeau est une image quand elle est fournie, un émoji sinon. */
.v-drapeau {
    display: inline-block;
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
    flex: 0 0 auto;
}

.v-drapeau--emoji {
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1;
}

.v-topbar a {
    color: var(--v-texte-inverse);
    text-decoration: none;
}

.v-topbar a:hover { color: var(--v-surlignage); }

.v-topbar__droite {
    display: flex;
    align-items: center;
    gap: 18px;
}

.v-reseaux {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

/* Filet de séparation avant « Mon compte », comme dans la maquette. */
.v-topbar .v-compte,
.v-topbar__selection {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 500;
}

/* Déconnecté, deux entrées séparées d'un point médian : le filet de
   gauche vaut pour l'ensemble, les liens ne se soulignent qu'au survol. */
.v-compte--entrer {
    gap: 6px;
}

.v-compte--entrer a {
    font-weight: 500;
}

.v-compte--entrer a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.v-compte__separateur {
    opacity: 0.5;
}

/* Il y avait ici une règle qui masquait « Créer un compte » sous 576 px,
   faute de place dans la barre. Elle n'a plus d'objet : sous 992 px, la
   barre ne s'affiche plus du tout et les deux entrées tiennent
   confortablement dans le panneau. */

/* « Ma sélection » n'existe que lorsqu'elle contient quelque chose : sa
   zone reste vide le reste du temps, sans séparateur ni espace. */
.v-topbar__selection-zone:empty { display: none; }

.v-topbar__selection-nombre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--v-radius-pill);
    background: var(--v-jaune-500);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--v-violet-700);
}

@media (max-width: 767px) {
    /* Sur mobile, la pastille chiffrée suffit : l'intitulé prend une
       place que la barre n'a pas. */
    .v-topbar__selection-texte { display: none; }
}

/* --------------------------------------------------
   EN-TÊTE
-------------------------------------------------- */

/* Collante : l'en-tête reste accessible pendant qu'on parcourt une
   fiche formation, qui fait plusieurs écrans de haut.

   `position: sticky` plutôt que `fixed` : l'en-tête garde sa place
   dans le flux, donc rien à compenser en marge sous lui.

   Le logo déborde sur le bloc suivant : l'en-tête doit passer
   au-dessus, et ne rien rogner. */
.v-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--v-fond-page);
    box-shadow: 0 1px 0 rgba(72, 64, 140, 0.08);
}

.v-header > .container {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 86px;
    max-width: var(--v-contenu);
    padding-left: var(--v-gouttiere);
    padding-right: var(--v-gouttiere);
}

/* Taille du logo, pilotée par une variable : elle change au défilement
   et l'emprise réservée dans le flux suit toute seule. */
.v-header {
    --logo: 170px;
}

/* Au défilement le logo rétrécit, mais il continue de déborder :
   l'en-tête fait 86 px, un logo de 110 px posé à 8 px du haut passe
   encore de 32 px sous la barre. C'est ce débordement qui fait la
   signature visuelle — le perdre changerait l'identité de la page. */
.v-header.est-defile {
    --logo: 110px;
}

/* Ce que le logo dépasse sous l'en-tête, à chaque palier : la hauteur du
   logo, plus ses 8 px de décalage, moins les 86 px de l'en-tête. La
   variable est posée sur :root et non sur .v-header, parce que c'est le
   bloc suivant — un frère, pas un descendant — qui doit la lire. */
:root { --v-logo-debord: 92px; }

/* Le débordement doit rester une signature, pas un obstacle. Sur un
   écran d'ordinateur portable, le hero est plus bas et un logo de
   170 px vient mordre le surtitre : on le réduit par paliers. */
@media (max-width: 1440px) {
    .v-header { --logo: 142px; }
    .v-header.est-defile { --logo: 100px; }
    :root { --v-logo-debord: 64px; }
}

@media (max-width: 1200px) {
    .v-header { --logo: 120px; }
    .v-header.est-defile { --logo: 92px; }
    :root { --v-logo-debord: 42px; }
}

/* La marque réserve sa largeur dans le flux — la navigation démarre
   après — mais l'image, elle, sort vers le bas. */
.v-header__marque {
    position: relative;
    flex: 0 0 var(--logo);
    align-self: stretch;
    text-decoration: none;
    /* Courbe douce et durée longue : le logo est gros, une transition
       courte donne l'impression qu'il saute. */
    transition: flex-basis 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Le logo déborde de l'en-tête sur le bloc suivant.
   Le liseré reprend exactement la couleur de fond de l'en-tête — pas
   un blanc pur — pour que le cercle paraisse découpé dedans plutôt
   que collé par-dessus. */
.v-header__marque img {
    position: absolute;
    top: 8px;
    left: 0;
    width: var(--logo);
    height: var(--logo);
    box-sizing: border-box;
    border: 3px solid var(--v-fond-page);
    border-radius: 50%;
    display: block;
    background: var(--v-fond-page);
    transition: width 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
                height 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Le débordement du logo est une décision d'en-tête : c'est donc ici
   qu'on réserve la place qu'il prend sur le bloc suivant.

   Un hero l'absorbe dans son propre rembourrage — il est fait pour ça.
   Tout autre premier élément doit la réserver, sans quoi le cercle
   recouvre son contenu. La règle vaut pour toutes les pages : personne
   n'a à se souvenir de commencer par un hero.

   L'exclusion nomme un à un ce qui réserve déjà, au lieu d'écarter tout
   ce qui s'appelle « hero ». C'est la leçon de fiche_hero : il portait
   le mot dans son nom, il était donc écarté du filet, et il réservait
   64 px pour un cercle qui en déborde 92. Sur quarante fiches de
   formation, le logo mordait le fil d'Ariane. Nommer la liste, c'est
   accepter de la tenir à jour ; l'oubli se voit alors comme un trou
   sous l'en-tête, et non comme du texte recouvert.

   Chacun de ces noms correspond à une règle qui calcule son rembourrage
   sur --v-logo-debord. Ajouter un hero, c'est faire les deux. */
main > .v-bloc:first-child:not(.hero_simple):not(.hero_small):not(.hero_agenda):not(.hero_slider):not(.fiche_hero):not(.blog-hero):not(.article-hero):not(.compte-entete):not(.erreur404__bloc):not(.recherche__entete):not(.tunnel) {
    /* On ne réserve que ce qui manque : le bloc a déjà son rembourrage
       haut, la marge complète la différence. Elle tombe donc à zéro dès
       que le rembourrage suffit — et sur mobile, où le logo ne déborde
       plus.

       C'est une marge et non un rembourrage : le bloc garde le sien,
       quelle que soit sa variante. */
    margin-top: max(0px, calc(var(--v-logo-debord) - var(--v-section-y)));
}

/* Une page dont le premier élément n'est pas un bloc du builder — un
   code court posé seul, un gabarit de WooCommerce — n'a pas de
   rembourrage à compléter : elle reçoit la réserve entière.

   C'était le cas de « Créer un compte », dont la carte partait du haut
   de <main> et passait sous le cercle.

   Les écrans de connexion en sont exclus depuis qu'ils partagent une
   disposition : `.v-compte-connexion main` réserve déjà le débord dans
   son rembourrage haut, et la marge s'y ajoutait — la création comptait
   la réserve deux fois et s'ouvrait quatre-vingt-douze pixels plus bas
   que la connexion, à qui elle est censée ressembler. */
main > :first-child:not(.v-bloc):not(.hero_simple):not(.hero_small):not(.hero_agenda):not(.hero_slider):not(.fiche_hero):not(.blog-hero):not(.article-hero):not(.compte-entete):not(.erreur404__bloc):not(.recherche__entete):not(.tunnel):not(.woocommerce):not(.compte-connexion) {
    margin-top: var(--v-logo-debord);
}

/* Respect du réglage système : pas d'animation pour qui la refuse. */
@media (prefers-reduced-motion: reduce) {
    .v-header__marque,
    .v-header__marque img {
        transition: none;
    }
}

.v-header__nom {
    font-family: var(--v-font-titre);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

/* La navigation est poussée à droite, contre le bouton : dans la
   maquette, tout l'espace libre est entre le logo et « Formations ». */
.v-header__nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}

.v-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.v-nav a {
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--v-texte-corps);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}

/* Le sous-titre n'apparaît que dans le menu déplié du téléphone. Dans
   la barre du bureau, il doublerait la hauteur de l'en-tête pour
   répéter en petit ce que l'intitulé dit déjà. */
.v-nav__sous {
    display: none;
}

.v-nav a:hover,
.v-nav .current-menu-item > a,
.v-nav .current_page_parent > a {
    border-bottom-color: var(--v-turquoise-400);
    color: var(--v-texte-titre);
}

.v-header__rdv {
    flex: 0 0 auto;
}

/* --------------------------------------------------
   BASCULE MOBILE
-------------------------------------------------- */

/* Trois traits superposés, pas empilés.

   Empilés par une marge, ils ne pouvaient que disparaître à
   l'ouverture. Posés les uns sur les autres et écartés par une
   translation, les deux extrêmes pivotent en croix et celui du milieu
   s'efface : le bouton dit alors qu'il ferme, là où trois traits
   immobiles laissaient croire qu'il ouvrirait une seconde fois.

   Le bouton reste au-dessus du panneau qu'il commande : c'est par lui
   qu'on referme. */
.v-header__bascule {
    display: none;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-sm);
    background: var(--v-blanc);
    cursor: pointer;
}

.v-header__trait {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 2px;
    margin: -1px 0 0 -11px;
    background: var(--v-texte-titre);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.15s ease, background-color 0.25s ease;
}

.v-header__trait--haut   { transform: translateY(-6px); }
.v-header__trait--bas    { transform: translateY(6px); }

/* Le trait du milieu porte la couleur d'accent : c'est le seul rappel
   de marque à cette taille, et il disparaît une fois ouvert. */
.v-header__trait--milieu { background: var(--v-turquoise-500); }

.v-header__bascule[aria-expanded="true"] .v-header__trait--haut {
    transform: translateY(0) rotate(45deg);
}

.v-header__bascule[aria-expanded="true"] .v-header__trait--milieu {
    opacity: 0;
}

.v-header__bascule[aria-expanded="true"] .v-header__trait--bas {
    transform: translateY(0) rotate(-45deg);
}

/* --------------------------------------------------
   LE PANNEAU

   Sur grand écran il n'existe pas. `display: contents` retire sa boîte :
   la navigation, la recherche et le bouton de rendez-vous restent les
   enfants directs de la barre et gardent leur répartition, sans qu'une
   seule mesure du bureau ait à bouger.
-------------------------------------------------- */

.v-header__panneau,
.v-header__panneau-bas {
    display: contents;
}

/* Le groupe des services — sélection, compte, réseaux — n'existe que
   dans le panneau du téléphone.

   Ses trois éléments sont aussi rendus dans la barre de contact, qui
   les porte sur grand écran. Comme le panneau y est transparent
   (`display: contents`), ce groupe, lui, restait une boîte visible :
   la barre affichait donc « Mon compte » et les réseaux deux fois,
   une fois en haut et une fois à côté du bouton de rendez-vous.

   Il ne peut pas être `display: contents` comme ses voisins : sur
   téléphone il doit être une vraie colonne, avec son filet et son
   écart. On le retire donc, et le bloc mobile le rétablit. */
.v-header__services {
    display: none;
}

/* ==================================================
   L'EN-TÊTE SUR TÉLÉPHONE ET TABLETTE

   D'après les composants « Header mobile » (569:4406, deux états) et
   « Topbar mobile » (123:262), et le frame « Menu mobile — ouvert »
   (570:4390).

   Trois décisions de la maquette, qui vont ensemble :

     1. la barre de contact NE DISPARAÎT PAS. Elle reste violet foncé,
        les deux numéros à gauche, « Mon compte » à droite ;
     2. le logo NE DÉBORDE PLUS. Il redevient un rond de 36 px, suivi
        du nom « Virages » — un cercle de cette taille ne dit plus chez
        qui on est, le nom prend le relais ;
     3. le burger est fait de trois traits nus, sans cadre ni fond.

   Le débordement du logo était une reprise du bureau, et il coûtait
   cher : il fallait réserver 38 px sous l'en-tête sur toutes les pages,
   ce qui ouvrait une bande claire vide au-dessus du premier bloc pour
   un cercle qui n'avait plus la place d'être imposant.
================================================== */

@media (max-width: 1199px) {

    /* --------------------------------------------------
       LA BARRE DE CONTACT — Topbar mobile (123:262)
    -------------------------------------------------- */

    .v-topbar > .container {
        gap: 12px;
        min-height: 0;
        padding: 7px var(--v-gouttiere-mobile);
        font-size: 0.625rem;
    }

    /* Les deux numéros tiennent sur une ligne : 15 px de drapeau, un
       espace de 7, treize chiffres en 10 px. Rapprochés, parce que
       « Mon compte » leur dispute les 350 px. */
    .v-topbar .v-contacts {
        gap: 12px;
    }

    .v-topbar .v-contacts a {
        gap: 7px;
    }

    .v-topbar .v-drapeau {
        width: 15px;
        height: 10px;
    }

    /* La barre ne porte plus que les numéros et le compte. Les réseaux
       descendent au bas du panneau, où ils ont la place d'être des
       icônes ; la sélection y descend aussi. Ici, ils ne feraient que
       pousser « Mon compte » hors de l'écran. */
    .v-topbar .v-reseaux,
    .v-topbar .v-topbar__selection-zone {
        display: none;
    }

    .v-topbar .v-compte {
        gap: 6px;
        padding-left: 0;
        border-left: 0;
        font-weight: 500;
    }

    /* Déconnecté, « Connexion · Créer un compte » ne tient pas à côté
       des deux numéros : seule « Connexion » reste, et la page qu'elle
       ouvre propose la création juste en dessous. Le panneau, lui,
       montre les deux. */
    .v-topbar .v-compte--entrer .v-compte__separateur,
    .v-topbar .v-compte--entrer a + a {
        display: none;
    }

    /* --------------------------------------------------
       LA BARRE — Header mobile, état Fermé (569:4390)

       64 px de haut, fond papier, un filet en bas. Le logo et le nom à
       gauche, le burger à droite, et rien entre les deux.
    -------------------------------------------------- */

    .v-header {
        border-bottom: 1px solid var(--v-bordure);
        box-shadow: none;
    }

    /* Pas de rembourrage vertical : la hauteur vient de `min-height`, et
       le burger se centre tout seul.

       Il y en avait douze, repris de la maquette. Mais la marque est
       « étirée » sur la hauteur du contenu, et le logo se place à 8 px
       du haut de la marque : ces douze pixels s'ajoutaient aux huit et
       poussaient le cercle à vingt-huit pixels sous la barre, là où le
       calcul de --v-logo-debord en annonçait seize. La réserve des blocs
       aurait été fausse de douze pixels. */
    .v-header > .container {
        flex-wrap: nowrap;
        gap: 10px;
        min-height: 64px;
        padding: 0 var(--v-gouttiere-mobile);
    }

    /* --------------------------------------------------
       LE LOGO : UN DÉBORDEMENT LÉGER

       Le débordement est la signature de la marque, et il vaut sur
       téléphone comme sur ordinateur. Ce qui change, c'est l'ampleur.

       Sur grand écran, un cercle de 142 px passe de 64 px sous une
       barre de 86 : il mord franchement sur le bloc suivant, et le
       bloc lui réserve la place. Reprendre cette proportion à l'échelle
       du téléphone demandait de réserver 38 px sous l'en-tête sur toutes
       les pages — c'est cette réserve qui ouvrait une bande claire vide
       au-dessus du titre, pour un cercle qui n'avait plus la place
       d'être imposant.

       72 px sur une barre de 64, posés à 8 px du haut : le cercle passe
       de SEIZE pixels en dessous. Assez pour qu'on voie qu'il dépasse,
       assez peu pour que le rembourrage des blocs l'absorbe sans qu'on
       ait à leur ajouter quoi que ce soit.
    -------------------------------------------------- */

    .v-header { --logo: 72px; }

    /* Il ne rétrécit pas au défilement : à 72 px il est déjà à sa plus
       petite taille lisible, et le voir bouger à chaque geste de
       défilement coûterait plus qu'il ne rapporte. */
    .v-header.est-defile { --logo: 72px; }

    :root { --v-logo-debord: 16px; }

    .v-header__marque {
        flex: 0 0 var(--logo);
        align-self: stretch;

        /* Au-dessus du panneau : le cercle déborde dans la zone qu'il
           occupe une fois ouvert, et il doit rester devant. */
        z-index: 2;
    }

    .v-header__marque img {
        top: 8px;

        /* Le lisere reprend le fond de la barre, si bien que le cercle
           paraît découpé dedans plutôt que collé par-dessus. Deux
           pixels et non trois : à cette taille, trois font un anneau. */
        border-width: 2px;
    }

    /* --------------------------------------------------
       LE BURGER — trois traits, sans cadre

       Il portait une bordure, un fond blanc et un rayon : un bouton
       dessiné comme un champ. La maquette n'en garde que les traits,
       posés à même la barre.
    -------------------------------------------------- */

    .v-header__bascule {
        display: block;
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
        margin-left: auto;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .v-header__trait {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20px;
        height: 2px;
        margin: -1px 0 0 -10px;
        background: var(--v-texte-titre);
        border-radius: 999px;
        transition: transform 0.25s ease, opacity 0.15s ease, background-color 0.25s ease;
    }

    .v-header__trait--haut   { transform: translateY(-7px); }
    .v-header__trait--milieu { transform: translateY(0); }
    .v-header__trait--bas    { transform: translateY(7px); }

    /* --------------------------------------------------
       L'ÉTAT OUVERT

       La barre passe en violet foncé — la même teinte que la barre de
       contact au-dessus, si bien que les deux ne font plus qu'un bandeau
       avec le panneau qui les prolonge. Le nom passe en blanc, les trois
       traits deviennent une croix.
    -------------------------------------------------- */

    .v-header:has(.v-header__bascule[aria-expanded="true"]) {
        background: var(--v-violet-700);
        border-bottom: 0;
    }

    /* Le lisere du logo suit le fond, sinon un anneau couleur papier
       resterait dessiné sur le violet. */
    .v-header:has(.v-header__bascule[aria-expanded="true"]) .v-header__marque img {
        border-color: var(--v-violet-700);
        background: var(--v-violet-700);
    }

    .v-header__bascule[aria-expanded="true"] .v-header__trait {
        background: var(--v-texte-inverse);
    }

    .v-header__bascule[aria-expanded="true"] .v-header__trait--haut {
        transform: translateY(0) rotate(45deg);
    }

    .v-header__bascule[aria-expanded="true"] .v-header__trait--milieu {
        opacity: 0;
    }

    .v-header__bascule[aria-expanded="true"] .v-header__trait--bas {
        transform: translateY(0) rotate(-45deg);
    }

    /* --------------------------------------------------
       LE PANNEAU — Menu mobile ouvert (570:4416)

       Fermé, il est hors de l'écran plutôt que masqué : `visibility` le
       retire du parcours clavier, et la translation lui donne son
       mouvement. Un `display: none` n'aurait rien pu animer.

       Il commence sous la barre, dont la hauteur varie selon qu'on a
       défilé ou non — c'est le script qui la mesure et pose
       --v-panneau-top.
    -------------------------------------------------- */

    .v-header__panneau {
        position: fixed;
        top: var(--v-panneau-top, 93px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;

        display: flex;
        flex-direction: column;
        gap: 0;

        padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
        background: var(--v-violet-700);

        overflow-y: auto;
        overscroll-behavior: contain;

        /* --------------------------------------------------
           IL SE DÉROULE, IL NE TOMBE PAS

           Il arrivait par une translation de -100 %. Sur un écran de
           844 px, cela lui faisait traverser sept cent cinquante pixels
           en trois cent quarante millièmes : deux mille pixels par
           seconde, un aplat violet plein écran lancé à travers la page.
           L'œil ne lit pas un mouvement, il lit un claquement.

           Désormais le panneau ne bouge pas : il est déjà à sa place, et
           c'est son masque qui s'ouvre du haut vers le bas. Il se
           déroule sous la barre comme un store. Rien ne traverse
           l'écran, donc rien ne peut être brutal — la durée devient un
           réglage de confort et non une course.

           La courbe est une sortie douce : rapide au début, elle se
           pose sur la fin plutôt que de s'arrêter net.

           Pas de fondu par-dessus : un store ne s'éclaircit pas en
           descendant, et le fondu de fermeture, plus court que le
           déroulé, faisait disparaître le panneau avant que son masque
           n'ait fini de remonter.
        -------------------------------------------------- */
        clip-path: inset(0 0 100% 0);
        visibility: hidden;
        transition: clip-path 0.42s cubic-bezier(0.33, 1, 0.68, 1),
                    visibility 0s linear 0.42s;
    }

    .v-header__bascule[aria-expanded="true"] ~ .v-header__panneau {
        clip-path: inset(0 0 0 0);
        visibility: visible;
        transition: clip-path 0.42s cubic-bezier(0.33, 1, 0.68, 1),
                    visibility 0s;
    }

    /* --------------------------------------------------
       LES ENTRÉES ARRIVENT DERRIÈRE LE STORE

       Le déroulé seul reste un peu mécanique : les neuf lignes
       apparaissent d'un coup, coupées par le bord du masque. Elles
       montent donc chacune de quelques pixels, l'une après l'autre,
       juste derrière lui.

       Les décalages sont courts — trente millièmes — et s'arrêtent à
       la sixième : au-delà, on attend le menu au lieu de le lire. Ce
       qui suit arrive avec elle.
    -------------------------------------------------- */
    .v-nav li,
    .v-header__panneau-bas {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .v-header__bascule[aria-expanded="true"] ~ .v-header__panneau .v-nav li,
    .v-header__bascule[aria-expanded="true"] ~ .v-header__panneau .v-header__panneau-bas {
        opacity: 1;
        transform: translateY(0);
    }

    .v-header__bascule[aria-expanded="true"] ~ .v-header__panneau .v-nav li:nth-child(1) { transition-delay: 0.06s; }
    .v-header__bascule[aria-expanded="true"] ~ .v-header__panneau .v-nav li:nth-child(2) { transition-delay: 0.09s; }
    .v-header__bascule[aria-expanded="true"] ~ .v-header__panneau .v-nav li:nth-child(3) { transition-delay: 0.12s; }
    .v-header__bascule[aria-expanded="true"] ~ .v-header__panneau .v-nav li:nth-child(4) { transition-delay: 0.15s; }
    .v-header__bascule[aria-expanded="true"] ~ .v-header__panneau .v-nav li:nth-child(5) { transition-delay: 0.18s; }
    .v-header__bascule[aria-expanded="true"] ~ .v-header__panneau .v-nav li:nth-child(n+6),
    .v-header__bascule[aria-expanded="true"] ~ .v-header__panneau .v-header__panneau-bas { transition-delay: 0.21s; }

    /* À la fermeture, tout repart ensemble et sans attendre : un menu
       qui se referme ligne par ligne donne l'impression qu'il résiste. */
    .v-header__bascule[aria-expanded="false"] ~ .v-header__panneau .v-nav li,
    .v-header__bascule[aria-expanded="false"] ~ .v-header__panneau .v-header__panneau-bas {
        transition-delay: 0s;
        transition-duration: 0.14s;
    }

    /* Le pied suit la dernière entrée, il ne se colle pas au bas de
       l'écran.

       La navigation prenait la hauteur disponible et poussait les
       boutons tout en bas : sur un grand téléphone, cela laissait un
       vide violet au milieu du panneau. La maquette les pose à vingt
       pixels sous le dernier lien, et le panneau défile si l'ensemble
       dépasse. */
    .v-header__nav {
        display: block;
        flex: 0 0 auto;
    }

    /* --------------------------------------------------
       LES ENTRÉES DU MENU (570:4417 et suivantes)

       Chaque entrée occupe la largeur, un filet la sépare de la
       suivante, un chevron dit qu'elle mène quelque part, et celles
       dont l'intitulé ne suffit pas portent leur surtitre en dessous.
       La ligne entière est la cible.
    -------------------------------------------------- */

    .v-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }

    .v-nav li {
        position: relative;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .v-nav li:first-child {
        border-top: 0;
    }

    .v-nav a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-height: 0;
        padding: 12px 28px 12px 0;
        font-family: var(--v-font-titre);
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.25;
        color: var(--v-texte-inverse);
        border-bottom: 0;
    }

    .v-nav a:hover,
    .v-nav .current-menu-item > a,
    .v-nav .current_page_parent > a {
        color: var(--v-texte-inverse);
        border-bottom-color: transparent;
    }

    /* L'entrée courante se marque par sa couleur d'accent, pas par le
       trait du bureau : en liste, ce trait passerait pour un séparateur
       de plus. */
    .v-nav .current-menu-item > a,
    .v-nav .current_page_parent > a {
        color: var(--v-turquoise-400);
    }

    .v-nav__sous {
        display: block;
        font-family: var(--v-font-corps);
        font-size: 0.6875rem;
        font-weight: 400;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.55);
    }

    /* Le chevron, calé à droite. Dessiné en bordures : deux traits
       tournés à 45°, ce qui évite une image pour huit pixels. */
    .v-nav a::after {
        content: "";
        position: absolute;
        right: 2px;
        top: 50%;
        width: 7px;
        height: 7px;
        margin-top: -4px;
        border-top: 1.5px solid rgba(255, 255, 255, 0.5);
        border-right: 1.5px solid rgba(255, 255, 255, 0.5);
        transform: rotate(45deg);
    }

    /* --------------------------------------------------
       LE PIED DU PANNEAU (570:4463)

       Deux boutons pleine largeur — le rendez-vous en orange, le compte
       en contour clair — puis les réseaux. La recherche s'y ajoute au-
       dessus : la maquette ne la dessine pas, mais un site qui répond
       sur quatre types de contenu doit pouvoir être interrogé depuis un
       téléphone.
    -------------------------------------------------- */

    .v-header__panneau-bas {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-top: 20px;
    }

    /* La recherche ne s'affiche pas dans le panneau.

       Je l'y avais mise, en me disant qu'un site qui répond sur quatre
       types de contenu doit pouvoir être interrogé depuis un téléphone.
       Elle n'est pas dans la maquette, et elle s'y voyait : son champ
       est un long ovale blanc à ombre portée, dessiné pour se poser sur
       la barre claire du bureau. Posé sur le violet, sous la liste des
       pages, il ouvrait une barre blanche.

       Le balisage reste — c'est le même élément qui sert la barre sur
       grand écran, le panneau n'étant qu'un contenant transparent
       au-dessus de 992 px. */
    .v-header__panneau-bas .v-header__recherche {
        display: none;
    }

    /* Le rendez-vous : orange, pleine largeur. C'est l'action de la
       maison, et la seule du panneau qui soit pleine.

       L'orange n'est pas un choix d'humeur, c'est une nécessité :
       .v-bouton--primaire peint son fond en --v-action, c'est-à-dire
       en violet 700 — exactement la couleur du panneau. Le bouton y
       était donc invisible, réduit à son texte blanc flottant. La
       maquette le donne en --action-cta, l'orange, et c'est le seul
       aplat coloré de tout le panneau. */
    .v-header__rdv {
        width: 100%;
        justify-content: center;
        padding: 13px 22px;
        background: var(--v-action-cta);
        color: var(--v-texte-inverse);
    }

    .v-header__rdv:hover {
        background: var(--v-action-cta);
        opacity: 0.9;
    }

    /* --------------------------------------------------
       LES SERVICES : COMPTE, SÉLECTION, RÉSEAUX
    -------------------------------------------------- */

    .v-header__services {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Le compte, en contour clair : un second bouton pleine largeur,
       mais qui ne dispute pas la vedette à l'orange. */
    .v-header__services .v-compte,
    .v-header__services .v-topbar__selection {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 20px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: var(--v-radius-pill);
        font-family: var(--v-font-corps);
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.95);
        text-decoration: none;
    }

    .v-header__services a {
        color: rgba(255, 255, 255, 0.95);
        text-decoration: none;
    }

    .v-header__services .v-compte__separateur {
        opacity: 0.5;
    }

    /* La sélection porte son compte en pastille orange : c'est le seul
       endroit du panneau où un chiffre doit sauter aux yeux. */
    .v-header__services .v-topbar__selection-nombre {
        background: var(--v-action-cta);
        color: var(--v-texte-inverse);
    }

    .v-header__services .v-reseaux {
        justify-content: flex-start;
        gap: 18px;
        padding-top: 8px;
        font-size: 1.125rem;
    }

    .v-header__services .v-reseaux a {
        color: rgba(255, 255, 255, 0.6);
    }

    .v-header__services .v-reseaux a:hover {
        color: var(--v-texte-inverse);
    }
}

/* --------------------------------------------------
   MOUVEMENT RÉDUIT, SUR TÉLÉPHONE

   Écrit APRÈS le bloc mobile, et c'est indispensable.

   Ce sont les mêmes sélecteurs, avec la même spécificité : c'est donc
   le dernier écrit qui gagne. Placées avant, ces règles auraient été
   défaites par l'étagement des entrées — et comme les transitions sont
   coupées, les liens seraient restés à zéro d'opacité pour toujours.
   Le menu aurait été vide, exactement pour les personnes qui ont
   demandé moins de mouvement.
-------------------------------------------------- */

/* --------------------------------------------------
   LA TABLETTE GARDE SES AISES

   Le burger apparaît dès 1199 px parce que la barre ne tient plus sur
   une ligne : huit entrées de menu, une loupe et un bouton de
   rendez-vous demandent près de douze cents pixels à côté du logo.

   Mais un iPad n'est pas un téléphone. Entre 992 et 1199 px, il reste
   de la place pour un logo qui déborde franchement, une barre plus
   haute, et une barre de contact complète — réseaux et sélection
   compris. Seule la navigation passe dans le panneau, parce qu'elle
   seule ne tient pas.
-------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1199px) {

    .v-header { --logo: 96px; }
    .v-header.est-defile { --logo: 84px; }
    :root { --v-logo-debord: 28px; }

    .v-header > .container {
        min-height: 76px;
        padding-left: var(--v-gouttiere-tablette);
        padding-right: var(--v-gouttiere-tablette);
    }

    /* La barre de contact reprend sa taille et ses éléments : à cette
       largeur, les deux numéros, les réseaux, la sélection et le compte
       tiennent tous sur une ligne. */
    .v-topbar > .container {
        min-height: 34px;
        padding: 0 var(--v-gouttiere-tablette);
        font-size: 0.75rem;
    }

    .v-topbar .v-reseaux {
        display: flex;
    }

    /* `:not(:empty)` et non `display: flex` sec : la zone de sélection
       reste vide tant que le panier l'est, et la règle qui la masque
       alors a la même spécificité que celle-ci. La lui reprendre aurait
       laissé une boîte vide, et son écart, dans la barre. */
    .v-topbar .v-topbar__selection-zone:not(:empty) {
        display: inline;
    }

    .v-topbar .v-compte {
        padding-left: 18px;
        border-left: 1px solid rgba(255, 255, 255, 0.25);
    }

    .v-topbar .v-compte--entrer .v-compte__separateur,
    .v-topbar .v-compte--entrer a + a {
        display: inline;
    }

    /* Les services restent dans la barre de contact, qui les porte :
       les répéter au bas du panneau ferait doublon. */
    .v-header__services {
        display: none;
    }
}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {

    .v-header__panneau,
    .v-header__trait,
    .v-nav li,
    .v-header__panneau-bas {
        transition: none;
    }

    /* Les mêmes états, pris d'un coup : le panneau paraît et disparaît
       sans se dérouler, les entrées sont là dès l'ouverture. */
    .v-nav li,
    .v-header__panneau-bas {
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }
}

@media (max-width: 575px) {
    /* La maquette Mobile 390 dessine la barre de contact à 20 px de
       gouttière et 12 px entre les deux numéros : à cette largeur,
       « +32 473 43 32 16 », « +33 623 27 83 31 » et « Mon compte »
       tiennent tout juste sur une ligne. */
    .v-topbar .v-contacts { gap: 12px; }

    /* Le panneau garde les 24 px de la maquette à gauche et à droite,
       là où les blocs de la page en prennent 20 : c'est une liste de
       liens, pas du contenu, et la maquette lui donne cet écart. */
    .v-header__panneau {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* --------------------------------------------------
   RECHERCHE — UNE LOUPE, UN CHAMP QUI SE POSE DESSUS

   Repliée, c'est une icône : la barre garde ses mesures. Dépliée, le
   champ se pose en absolu sur la navigation — il la recouvre au lieu de
   la pousser, donc ni le menu ni le bouton de rendez-vous ne bougent.

   Elle a d'abord vécu dans la barre de contact, trop étroite, puis en
   panneau sous l'en-tête, qui demandait un clic pour rien, puis en champ
   permanent, qui mangeait la place du menu.
-------------------------------------------------- */
.v-header__recherche {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.v-header__loupe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.25px solid var(--v-bordure);
    border-radius: var(--v-radius-pill);
    background: var(--v-fond-page);
    color: var(--v-texte-titre);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.v-header__loupe:hover {
    border-color: var(--v-turquoise-500);
    background: var(--v-turquoise-100);
}

/* Ouverte, la loupe devient le bord gauche du champ : elle garde sa
   place et cesse d'être un rond isolé posé à côté d'un cadre. */
.v-header__loupe[aria-expanded="true"] {
    border-color: var(--v-turquoise-500);
    background: var(--v-turquoise-100);
}

/* Le champ part de la loupe et s'étend vers la gauche, par-dessus la
   navigation. `right: 0` l'ancre sur la loupe ; la largeur est celle du
   contenu qu'on veut pouvoir lire, plafonnée à l'écran. */
.v-header__recherche-form {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: none;
    width: min(360px, 60vw);
    z-index: 2;
}

.v-header__loupe[aria-expanded="true"] + .v-header__recherche-form {
    display: block;
}

/* Le retrait de droite laisse la loupe visible et cliquable : c'est elle
   qui referme. */
.v-header__recherche-champ {
    width: 100%;
    height: 40px;
    padding: 0 52px 0 18px;
    border: 1.25px solid var(--v-turquoise-500);
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
    box-shadow: 0 8px 24px rgba(56, 49, 111, 0.14);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    color: var(--v-texte-corps);
}

.v-header__recherche-champ::placeholder { color: var(--v-texte-meta); }

.v-header__recherche-champ:focus {
    outline: 2px solid var(--v-surlignage);
    outline-offset: 2px;
}

/* Il y avait ici une règle qui faisait descendre le champ flottant sous
   la loupe en dessous de 992 px. Elle n'a plus d'objet : sous cette
   largeur, la recherche n'est plus une loupe dans la barre mais un
   champ ouvert au bas du panneau. Voir la requête à 991 px plus haut. */