/* ==================================================
   ESPACE MEMBRE

   L'en-tête, le menu latéral et les cartes de la
   maquette, posés sur les gabarits de WooCommerce
   plutôt qu'en surcharge : une mise à jour de
   l'extension ne doit pas défaire la mise en page.
================================================== */

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

/* Même hauteur plancher que le hero compact des pages intérieures : les
   deux ouvrent le même genre d'écran. La variable les tient liés. */
.compte-entete {
    display: flex;
    align-items: center;
    min-height: var(--v-hero-compact);
    padding-top: calc(var(--v-logo-debord) + 24px);
    background: var(--v-turquoise-100);
}

.compte-entete > .container { width: 100%; }

.compte-entete > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.compte-entete__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    color: var(--v-texte-meta);
}

/* La pastille d'initiales de la maquette. */
.compte-entete__pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: 50%;
    background: var(--v-turquoise-500);
    font-family: var(--v-font-titre);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--v-blanc);
}

/* --------------------------------------------------
   CONNEXION, MOT DE PASSE OUBLIÉ

   La même page WordPress que l'espace membre, mais sans
   menu ni colonnes : la mise en page repart de zéro.
-------------------------------------------------- */

/* Le fond turquoise de la maquette court sur toute la page, jusque sous
   le pied de page — d'où la règle sur <main> plutôt que sur le bloc. */
.v-compte-connexion main {
    padding-top: calc(var(--v-logo-debord) + 48px);
    padding-bottom: var(--v-section-y);
    background: var(--v-turquoise-100);
}

/* Neutralise la mise en colonnes de l'espace membre : ici il n'y a ni
   menu ni contenu, seulement les cartes. Le sélecteur passe par `body`
   pour l'emporter sur la règle en flex plus bas, qui a autrement le même
   poids et gagnerait par l'ordre. */
body.v-compte-connexion main > .woocommerce {
    display: block;
    max-width: var(--v-contenu);
    margin: 0 auto;
    padding: 0 28px;
}

/* Carte 480 + gouttière 48 + colonne 400, centrées : les mesures de la
   maquette. */
.compte-connexion {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 48px;
}

.compte-connexion--seul { justify-content: center; }

.compte-connexion__formulaires {
    flex: 0 1 480px;
    max-width: 480px;
}

.compte-connexion__carte {
    padding: 36px;
    border: none;
    box-shadow: 0 2px 18px rgba(45, 30, 90, 0.06);
}

.compte-connexion--seul .compte-connexion__carte {
    flex: 0 1 480px;
    max-width: 480px;
}

.compte-connexion__etape {
    margin: 0 0 6px;
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v-turquoise-700);
}

.compte-connexion__titre {
    margin: 0 0 8px;
    font-family: var(--v-font-titre);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--v-texte-titre);
}

.compte-connexion__intro {
    margin: 0 0 22px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--v-texte-corps);
}

/* La case d'inscription à la lettre, à la création du compte. Cochée par
   défaut : la case doit donc se voir et se décocher sans effort — d'où
   une cible qui couvre le libellé entier, et de l'air autour. */
.compte-newsletter {
    margin-top: 4px;
}

.compte-newsletter__label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--v-texte-corps);
    cursor: pointer;
}

.compte-newsletter__label input {
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: var(--v-action);
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------
   LES FORMULAIRES DU COMPTE

   Connexion, création, mot de passe oublié, « Mon
   compte » : les mêmes champs partout, avec nos classes.

   Ils portaient celles de WooCommerce — woocommerce-Input,
   woocommerce-form-row, button — dont la feuille de style
   leur imposait ses bordures, ses boutons gris et ses
   libellés en ligne ; il fallait ensuite les défaire une
   par une, en montant le poids des sélecteurs à chaque
   fois. Privé de ses classes, WooCommerce ne les voit
   plus, et ces champs n'ont plus qu'une seule feuille :
   celle-ci.
-------------------------------------------------- */

.compte-form__champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
}

/* Prénom et nom sur une rangée : ce sont deux moitiés d'une même
   réponse, et les séparer allongerait le formulaire pour rien. */
.compte-form__ligne {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.compte-form__champ label {
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--v-texte-titre);
}

/* L'astérisque signale, elle n'alerte pas : elle reste dans le gris des
   mentions. */
.compte-form__requis {
    font-weight: 400;
    color: var(--v-texte-meta);
    text-decoration: none;
}

.compte-form__champ input,
.compte-form__champ select,
.compte-form__champ textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
    background: var(--v-blanc);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
}

.compte-form__champ input:focus,
.compte-form__champ select:focus,
.compte-form__champ textarea:focus {
    outline: 2px solid var(--v-turquoise-400);
    outline-offset: 1px;
    border-color: transparent;
}

/* Le mot de passe et son bouton « Afficher ».

   Choisir un mot de passe à l'aveugle, c'est le taper de travers puis en
   prendre un plus court. Le bouton remplace le second champ de
   confirmation : on relit ce qu'on a écrit, une fois. */
.compte-form__mdp {
    display: block;
    position: relative;
}

.compte-form__mdp input { padding-right: 84px; }

.compte-form__oeil {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    padding: 6px 10px;
    border: none;
    background: none;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--v-action);
    cursor: pointer;
}

.compte-form__oeil:hover { text-decoration: underline; }

/* Le texte d'aide sous un champ : présent, mais qui ne doit pas rivaliser
   avec le libellé. */
.compte-form__aide,
.compte-champ__aide {
    display: block;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--v-texte-meta);
}

.compte-form__envoi { margin: 22px 0 0; }

/* Dans une carte de connexion, le bouton occupe toute la largeur : c'est
   la seule action de l'écran. */
.compte-form__submit {
    width: 100%;
    justify-content: center;
}

/* Rangés dans une carte de « Mon compte », les champs suivent la grille
   de la carte : c'est elle qui tient les écarts. */
.compte-carte__champs .compte-form__champ { margin: 0; }
.compte-carte__champs .compte-form__champ--pleine { grid-column: 1 / -1; }

@media (max-width: 575px) {
    .compte-form__ligne { grid-template-columns: minmax(0, 1fr); }
}

/* « Rester connecté » : case et libellé sur une ligne, alignés. */
.compte-connexion__options label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--v-texte-corps);
    cursor: pointer;
}

/* Une case à cocher n'est pas un champ de saisie : sans cette règle elle
   hérite du `width: 100%` des champs et s'étire sur toute la carte. Le
   sélecteur vise le type plutôt que le bloc, pour qu'aucune case ajoutée
   plus tard n'y échappe. */
.compte-form__champ input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--v-action);
}

.compte-connexion__oubli,
.compte-connexion__retour {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 14px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
}

.compte-connexion__oubli a,
.compte-connexion__retour a {
    color: var(--v-violet-700);
    text-decoration: none;
}

.compte-connexion__oubli a:hover,
.compte-connexion__retour a:hover { text-decoration: underline; }

/* Le filet puis la mention de création de compte, en bas de la carte. */
.compte-connexion__creation {
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--v-bordure);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--v-texte-meta);
}

/* Le renvoi vers l'autre page : depuis la création vers la connexion,
   comme depuis la connexion vers la création. Même traitement des deux
   côtés — ce sont deux portes de même rang, pas une principale et une
   secondaire. */
.compte-connexion__bascule {
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--v-bordure);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--v-texte-meta);
}

.compte-connexion__creation a,
.compte-connexion__bascule a {
    color: var(--v-action);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* La page « Créer un compte » n'est pas une page de WooCommerce : son
   code court tombe directement dans <main>, sans le conteneur qui donne
   sa largeur et ses marges au contenu de l'écran de connexion. Elle
   reprend donc les mêmes mesures ici — c'est la seule chose qui les
   séparait encore, la disposition étant désormais partagée. */
.v-compte-creation .compte-connexion {
    max-width: var(--v-contenu);
    margin: 0 auto;
    padding: 0 28px;
}

/* Le bandeau « lien envoyé » : ce n'est pas une erreur, c'est une
   confirmation — le liseré turquoise le dit avant la lecture. */
.compte-connexion__bandeau {
    margin: 0 0 20px;
    padding: 16px 18px;
    border-left: 3px solid var(--v-turquoise-500);
    border-radius: var(--v-radius-md);
    background: var(--v-turquoise-100);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--v-texte-corps);
}

.compte-connexion__bandeau p { margin: 0; }

.compte-connexion__bandeau-titre {
    margin: 0 0 4px !important;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

/* La colonne de droite : ce que le compte permet de faire. Elle répond à
   la question qu'on se pose devant un mur de connexion. */
.compte-connexion__promesses {
    flex: 0 1 400px;
    max-width: 400px;
    padding-top: 12px;
}

.compte-connexion__promesses-titre {
    margin: 0 0 20px;
    font-family: var(--v-font-titre);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.compte-connexion__point { margin-bottom: 18px; }

.compte-connexion__point h3 {
    margin: 0 0 2px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.compte-connexion__point p {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--v-texte-meta);
}

@media (max-width: 991px) {
    /* La colonne de droite passe sous la carte : elle explique, elle ne
       conditionne pas la connexion. */
    .compte-connexion { flex-direction: column; align-items: stretch; gap: 32px; }
    .compte-connexion__formulaires,
    .compte-connexion__promesses,
    .compte-connexion--seul .compte-connexion__carte { flex: 1 1 auto; max-width: none; }
}

@media (max-width: 575px) {
    .compte-connexion__carte { padding: 24px 20px; }
    .compte-connexion__titre { font-size: 1.5rem; }
}

/* --------------------------------------------------
   MENU ET CONTENU
-------------------------------------------------- */

/* L'espace membre s'affiche par un code court, directement dans <main> :
   il n'a donc aucun conteneur et occupait toute la largeur de l'écran.
   C'est ici qu'on lui en donne un. */
.v-espace-membre main > .woocommerce {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    max-width: var(--v-contenu);
    margin: 0 auto;
    padding: var(--v-section-y) 28px;
}

/* WooCommerce met ses deux colonnes en float, avec des largeurs en
   pourcentage — 30 % et 68 %. En flex le float est ignoré, mais pas la
   largeur : le contenu tombait à 177 px, tassé à gauche. On reprend la
   main sur les deux propriétés.

   Flex et non grille : la grille plaçait les deux colonnes dans le
   mauvais ordre, mesuré. Flex suit l'ordre du balisage, qui est le bon. */
.v-espace-membre .woocommerce-MyAccount-navigation {
    float: none;
    flex: 0 0 260px;
    width: 260px;
}

.v-espace-membre .woocommerce-MyAccount-content {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.woocommerce-MyAccount-navigation {
    padding: 10px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    border-radius: var(--v-radius-md);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
    text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover { background: var(--v-fond-page); }

.woocommerce-MyAccount-navigation .is-active a {
    background: var(--v-violet-700);
    color: var(--v-blanc);
    font-weight: 600;
}

/* Le repère « bientôt » : lisible, mais clairement second par rapport à
   l'intitulé de l'onglet. */
.compte-menu__bientot {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: var(--v-radius-pill);
    background: var(--v-turquoise-100);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v-turquoise-700);
}

/* Sur l'onglet actif le fond est violet : la pastille doit rester lisible. */
.woocommerce-MyAccount-navigation .is-active .compte-menu__bientot {
    background: rgba(255, 255, 255, 0.22);
    color: var(--v-blanc);
}

/* La déconnexion se détache du reste, sous une fine ligne : ce n'est pas
   un onglet. La règle visait jusqu'ici une classe mal orthographiée
   (« navigation--link »), et la ligne ne s'affichait jamais — d'où une
   classe à nous, posée par navigation.php. */
.compte-menu__sortie {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--v-bordure);
}

.compte-menu__sortie a { color: var(--v-texte-meta); }
.compte-menu__sortie i { font-size: 0.8125rem; }

/* La confirmation de déconnexion : une petite boîte, au centre. */
.compte-sortie {
    width: min(400px, calc(100vw - 32px));
    padding: 28px;
    border: none;
    border-radius: var(--v-radius-lg);
    background: var(--v-fond-carte);
    box-shadow: 0 12px 40px rgba(45, 30, 90, 0.18);
    font-family: var(--v-font-corps);
}

.compte-sortie::backdrop { background: rgba(45, 30, 90, 0.35); }

.compte-sortie__titre {
    margin: 0 0 6px;
    font-family: var(--v-font-titre);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.compte-sortie__texte {
    margin: 0 0 22px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--v-texte-meta);
}

.compte-sortie__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 575px) {
    .compte-sortie__actions { flex-direction: column-reverse; }
    .compte-sortie__actions .v-bouton { justify-content: center; }
}

/* Le contenu n'est plus une carte unique : la maquette en empile
   plusieurs, une par sujet. Le conteneur ne fait donc plus que tenir la
   colonne — sauf pour les écrans que WooCommerce rend sans nos cartes,
   qui gardent un cadre pour ne pas flotter dans le vide. */
.woocommerce-MyAccount-content {
    min-width: 0;
    font-family: var(--v-font-corps);
}

.woocommerce-MyAccount-content > form:not(.edit-account):not(.compte-facturation),
.woocommerce-MyAccount-content > .woocommerce-Addresses,
.woocommerce-MyAccount-content > p,
.woocommerce-MyAccount-content > table {
    padding: 24px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

/* --------------------------------------------------
   LES CARTES DE « MON COMPTE »
-------------------------------------------------- */

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

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

.compte-carte__note {
    margin: 0 0 16px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--v-texte-meta);
}

.compte-carte__titre + .compte-carte__champs { margin-top: 16px; }

/* Les informations pratiques d'une commande — dates, lieu, lien de
   connexion. Le même balisage que dans la convocation : un tableau de
   deux colonnes, écrit pour tenir dans un client de messagerie, et qui
   n'a donc besoin ici que d'être remis à la mesure du site. */
.virages-pratique table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
}

.virages-pratique th,
.virages-pratique td {
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
    padding: 6px 16px 6px 0;
}

.virages-pratique th {
    width: 1%;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-texte-meta);
}

.virages-pratique td { color: var(--v-texte-corps); }
.virages-pratique td a { color: var(--v-action); }

.virages-pratique p {
    margin: 0 0 8px;
    font-family: var(--v-font-titre);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

/* Deux colonnes, comme la maquette. */
.compte-carte__champs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.compte-carte__champs .form-row { margin: 0; padding: 0; }
.compte-carte__champs .form-row-wide { grid-column: 1 / -1; }

/* WooCommerce laisse ses libellés en ligne : dans une grille de champs il
   faut qu'ils tiennent leur propre ligne, au-dessus du champ. */
.woocommerce .compte-carte__champs .form-row label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--v-texte-titre);
}

.woocommerce .compte-carte__champs .form-row label .required {
    color: var(--v-texte-meta);
    text-decoration: none;
}

/* Les champs de facturation sont rendus par WooCommerce, qui pose ses
   propres classes : on ne peut pas leur donner les nôtres, seulement leur
   rendre le même habillage — sans quoi la carte « Facturation » aurait
   des champs d'une autre famille que celle du dessus. */
.woocommerce .compte-carte__champs .form-row input.input-text,
.woocommerce .compte-carte__champs .form-row select,
.woocommerce .compte-carte__champs .form-row textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
    background: var(--v-blanc);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
}

.woocommerce .compte-carte__champs .form-row input.input-text:focus,
.woocommerce .compte-carte__champs .form-row select:focus {
    outline: 2px solid var(--v-turquoise-400);
    outline-offset: 1px;
    border-color: transparent;
}

/* La facturation a une rangée de trois : code postal, ville, pays. */
.compte-carte__champs--facturation {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Les numéros de TVA et d'entreprise sont nos champs, pas ceux de
   WooCommerce : sans la même portée, ils prenaient une colonne sur six
   chacun, serrés à gauche de la carte. */
.compte-carte__champs--facturation > .form-row,
.compte-carte__champs--facturation > .compte-form__champ { grid-column: span 3; }

.compte-carte__champs--facturation > #billing_address_1_field { grid-column: span 6; }

.compte-carte__champs--facturation > #billing_postcode_field,
.compte-carte__champs--facturation > #billing_city_field,
.compte-carte__champs--facturation > #billing_country_field { grid-column: span 2; }

/* La province ferme la carte, sur sa propre ligne : elle ne concerne
   qu'une poignée de pays, et les scripts de WooCommerce l'effacent pour
   les autres — son absence ne doit donc décaler personne. */
.compte-carte__champs--facturation > #billing_state_field { grid-column: span 6; }

/* --------------------------------------------------
   L'ENREGISTREMENT

   Un bouton par formulaire, à la fin du formulaire,
   aligné à droite sous la dernière carte qu'il emporte.

   Il flottait au bas de l'écran : sur une page de cartes
   empilées, la barre passait par-dessus les champs et se
   lisait comme un bandeau de plus. Il reste à sa place,
   dans le fil de la page.
-------------------------------------------------- */

.compte-barre {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 20px;
    flex-wrap: wrap;
    margin: -4px 0 32px;
}

.compte-barre__note {
    flex: 1 1 16rem;
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--v-texte-meta);
}

.compte-barre .v-bouton { flex: 0 0 auto; }

@media (max-width: 575px) {
    .compte-barre { flex-direction: column; align-items: stretch; }
    .compte-barre .v-bouton { justify-content: center; }
}

/* --------------------------------------------------
   UN ÉCRAN ANNONCÉ MAIS PAS ENCORE OUVERT
-------------------------------------------------- */

.compte-bientot__etiquette {
    display: inline-block;
    margin: 0 0 10px;
    padding: 3px 10px;
    border-radius: var(--v-radius-pill);
    background: var(--v-turquoise-100);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v-turquoise-700);
}

.compte-bientot .compte-carte__note:last-child { margin-bottom: 0; }

/* --------------------------------------------------
   MES RÉSERVATIONS

   Le détail qu'on ouvre depuis la liste est rendu par
   WooCommerce, dont la feuille n'est plus servie (voir
   css/include-styles.php). Il sortait donc de nos blocs, et retombaient sur les
   réglages du navigateur : titres à la taille par défaut,
   sections sans cadre, et surtout des liens bleus soulignés
   de violet une fois visités — le numéro de commande, le
   nom de la session, l'adresse de facturation.

   base.css retire le soulignement des liens sans leur
   donner de couleur : partout ailleurs, ce sont nos blocs
   qui la posent. Ici, personne ne la posait.
-------------------------------------------------- */

/* Les liens de l'espace membre prennent la couleur d'action, et se
   soulignent au survol. Les boutons — qui sont des liens chez
   WooCommerce — gardent le leur. */
.woocommerce-MyAccount-content a:not(.v-bouton):not(.button):not(.woocommerce-button) {
    color: var(--v-action);
}

.woocommerce-MyAccount-content a:not(.v-bouton):not(.button):not(.woocommerce-button):hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Les titres que WooCommerce écrit lui-même — « Détails de la
   commande », « Adresse de facturation », « Suivi de la commande ».
   Sans règle, ils sortaient à 1.5 em en gras, deux fois plus gros que
   les titres de nos cartes juste à côté.

   Les siens seulement : nos cartes ont leur propre titre, et un
   sélecteur qui prendrait tous les h2 du contenu passerait devant
   .compte-carte__titre par sa spécificité. */
.woocommerce-MyAccount-content h2:not([class]),
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content .woocommerce-order-downloads__title,
.woocommerce-MyAccount-content .woocommerce-column__title {
    margin: 0 0 12px;
    font-family: var(--v-font-titre);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--v-texte-titre);
}

.woocommerce-MyAccount-content h3:not([class]) {
    margin: 0 0 8px;
    font-family: var(--v-font-titre);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

/* Le détail d'une commande : les mêmes cartes que « Mon compte », pour
   que passer de l'un à l'autre ne change pas de site. */
.woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-MyAccount-content .woocommerce-customer-details,
.woocommerce-MyAccount-content .woocommerce-order-downloads {
    display: block;
    margin: 0 0 16px;
    padding: 24px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

/* La phrase d'ouverture — « Commande #123 effectuée le … » — est un
   paragraphe nu que la règle générale met déjà en carte. Elle mérite
   d'être lue : c'est le résumé de l'écran. */
.woocommerce-MyAccount-content > p {
    margin: 0 0 16px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--v-texte-corps);
}

.woocommerce-MyAccount-content > p mark {
    padding: 1px 6px;
    border-radius: var(--v-radius-pill);
    background: var(--v-turquoise-100);
    font-weight: 600;
    color: var(--v-turquoise-700);
}

/* Le suivi de la commande : les notes que l'équipe ajoute. Une liste
   ordonnée nue affichait ses numéros dans la marge. */
.woocommerce-MyAccount-content .woocommerce-OrderUpdates {
    margin: 0 0 16px;
    padding: 24px;
    list-style: none;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

.woocommerce-MyAccount-content .woocommerce-OrderUpdates li + li {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--v-bordure);
}

.woocommerce-MyAccount-content .woocommerce-OrderUpdates .meta {
    margin: 0 0 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
}

.woocommerce-MyAccount-content .woocommerce-OrderUpdates .description p:last-child { margin-bottom: 0; }

/* Le nom de la session, dans le détail : c'est la ligne qui compte du
   tableau, et elle était de la taille du reste. */
.woocommerce-MyAccount-content .woocommerce-table--order-details .product-name {
    font-size: 0.875rem;
    color: var(--v-texte-titre);
}

.woocommerce-MyAccount-content .woocommerce-table--order-details .product-quantity {
    font-weight: 400;
    color: var(--v-texte-meta);
}

/* --------------------------------------------------
   LA LISTE DES RÉSERVATIONS

   Une carte par réservation (woocommerce/myaccount/
   orders.php) : les sessions d'abord, leur période, puis
   le total et les actions. Le tableau de WooCommerce est
   parti avec ses règles.
-------------------------------------------------- */

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

.compte-reservation {
    padding: 20px 22px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
    font-family: var(--v-font-corps);
}

.compte-reservation__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.compte-reservation__numero {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

/* L'état se lit d'un coup d'œil : trois familles, trois couleurs. */
.compte-reservation__etat {
    padding: 3px 10px;
    border-radius: var(--v-radius-pill);
    background: var(--v-fond-alerte-douce);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v-alerte-texte);
    white-space: nowrap;
}

.compte-reservation--ok .compte-reservation__etat {
    background: var(--v-succes-fond);
    color: var(--v-succes-texte);
}

.compte-reservation--annulee .compte-reservation__etat {
    background: var(--v-urgence-fond);
    color: var(--v-urgence);
}

.compte-reservation--annulee .compte-reservation__session { color: var(--v-texte-meta); }

.compte-reservation__sessions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compte-reservation__sessions li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compte-reservation__session {
    font-family: var(--v-font-titre);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--v-texte-titre);
}

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

.compte-reservation__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--v-bordure);
}

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

.compte-reservation__total small { font-weight: 400; color: var(--v-texte-meta); }

.compte-reservation__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 0;
}

.compte-reservation__lien {
    font-size: 0.8125rem;
    font-weight: 600;
}

.compte-reservation__action--cancel { color: var(--v-texte-meta) !important; font-weight: 500; }

.compte-reservations__pages {
    display: flex;
    justify-content: space-between;
    margin: 18px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
}

.compte-reservations__vide .compte-carte__note { margin-bottom: 18px; }

/* Les deux colonnes d'adresses du détail. WooCommerce les pose en
   flottant ; woocommerce.css les remet en grille — reste l'écart avec le
   titre de la section, qui les surplombait. */
.woocommerce-MyAccount-content .woocommerce-customer-details address {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.6;
    color: var(--v-texte-corps);
}

/* --------------------------------------------------
   MES FACTURES

   Une liste plutôt qu'un tableau : chaque facture porte
   quatre informations de longueurs très inégales — un
   numéro court, un état, un montant, un libellé long —
   et un tableau les aurait étirées sur des colonnes à
   moitié vides. Sur mobile, il aurait fallu le casser.
-------------------------------------------------- */

.compte-factures {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.compte-facture {
    padding: 16px 18px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
    background: var(--v-fond-carte);
}

.compte-facture__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.compte-facture__numero {
    font-weight: 600;
    color: var(--v-texte-titre);
}

/* L'état se lit d'un coup d'œil : c'est la seule chose que le membre
   cherche vraiment en ouvrant cet écran. Pas de vert — la charte n'en
   a pas, ce qui est réglé se dit en turquoise. */
.compte-facture__etat {
    padding: 2px 10px;
    border-radius: var(--v-radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.compte-facture__etat--payee {
    background: var(--v-succes-fond);
    color: var(--v-succes-texte);
}

.compte-facture__etat--due {
    background: var(--v-alerte-fond);
    color: var(--v-alerte-texte);
}

/* Le paiement parti mais pas encore rapproché, et le versement partiel :
   quelque chose est en route, rien n'est demandé. Le jaune dit l'attente
   là où l'orange dirait l'action à faire. */
.compte-facture__etat--encours {
    background: var(--v-fond-alerte-douce);
    color: var(--v-alerte-texte);
}

/* Une pièce annulée ne demande plus rien : elle sort de la couleur. */
.compte-facture__etat--annulee {
    background: var(--v-sable-300);
    color: var(--v-texte-titre);
}

.compte-facture__detail,
.compte-facture__restant {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    color: var(--v-texte-corps);
}

.compte-facture__restant { font-weight: 600; }

.compte-facture__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 0;
    font-size: 0.9375rem;
}

.compte-facture__lien { font-weight: 600; }

/* Quand la facture arrive d'Odoo sans jeton d'accès, il n'y a rien à
   cliquer : cette ligne dit pourquoi, sans en faire une alerte. Le
   membre n'y peut rien, et sa facture existe bel et bien. */
.compte-facture__indisponible {
    margin: 10px 0 0;
    font-size: 0.875rem;
    color: var(--v-texte-meta);
}

/* --------------------------------------------------
   MES RENDEZ-VOUS
-------------------------------------------------- */

/* Une note qui cadre l'écran avant la liste : ici, dire que Calendly
   reste maître des rendez-vous évite de chercher un bouton d'annulation
   qui n'existera pas. */
.compte-note {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-left: 3px solid var(--v-violet-500);
    border-radius: var(--v-radius-md);
    background: var(--v-fond-carte);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--v-texte-corps);
}

.compte-note p { margin: 0; }
.compte-note--info { border-left-color: var(--v-turquoise-500); background: var(--v-turquoise-100); }

.compte-rdv {
    list-style: none;
    margin: 10px 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.compte-rdv__ligne {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

/* Les rendez-vous passés n'ont pas de pastille de date : la colonne
   disparaît plutôt que de rester vide. */
.compte-rdv--passes .compte-rdv__ligne { grid-template-columns: minmax(0, 1fr) auto; }

.compte-rdv__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin: 0;
    padding: 8px 0;
    border-radius: var(--v-radius-md);
    background: var(--v-turquoise-100);
    font-family: var(--v-font-titre);
    color: var(--v-turquoise-700);
}

.compte-rdv__date span:first-child { font-size: 1.125rem; font-weight: 600; line-height: 1; }
.compte-rdv__date span:last-child { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.06em; }

.compte-rdv__corps h3 {
    margin: 0 0 3px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

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

.compte-rdv__quand span { margin: 0 5px; }

.compte-rdv__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.compte-rdv__statut {
    margin: 0;
    padding: 3px 10px;
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.compte-rdv__statut--honore { background: var(--v-turquoise-100); color: var(--v-turquoise-700); }
.compte-rdv__statut--annule { background: var(--v-urgence-fond); color: var(--v-urgence); }

.compte-rdv__appel { background: var(--v-turquoise-100); border-color: var(--v-turquoise-500); }
.compte-rdv__appel p:last-child { margin-bottom: 0; }

@media (max-width: 575px) {
    .compte-rdv__ligne,
    .compte-rdv--passes .compte-rdv__ligne {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .compte-rdv__actions,
    .compte-rdv__statut { grid-column: 1 / -1; }

    .compte-rdv--passes .compte-rdv__ligne { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------
   MOT DE PASSE ET SÉCURITÉ

   La maquette ne montre qu'une phrase et un bouton : les champs
   n'apparaissent qu'à la demande.
-------------------------------------------------- */

.compte-securite__ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 16px;
}

.compte-securite__etat {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--v-texte-meta);
}

.compte-securite__champs { margin-top: 18px; }
.compte-securite__champs[hidden] { display: none; }

/* --------------------------------------------------
   SUPPRIMER SON COMPTE

   Dernière carte de l'écran, et volontairement discrète :
   c'est une sortie, pas un réglage. Le liseré rose la
   distingue des autres sans en faire une alerte, puisque
   rien n'est encore arrivé.
-------------------------------------------------- */

.compte-suppression { border-left: 3px solid var(--v-urgence); }

.compte-suppression__form { margin-top: 18px; }
.compte-suppression__form[hidden] { display: none; }

/* La confirmation n'est pas un champ de plus dans un formulaire long :
   elle tient sur une largeur de lecture, pour qu'on relise ce qu'on
   tape. */
.compte-suppression__form .compte-form__champ { max-width: 22rem; }

.compte-suppression__form .compte-form__envoi { margin-top: 18px; }

/* --------------------------------------------------
   PRÉFÉRENCES
-------------------------------------------------- */

.compte-preferences {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.compte-preferences label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--v-texte-corps);
    cursor: pointer;
}

.compte-preferences input { margin-top: 2px; }

.compte-preferences + .compte-carte__note { margin: 14px 0 0; }

@media (max-width: 767px) {
    .compte-carte__champs,
    .compte-carte__champs--facturation { grid-template-columns: minmax(0, 1fr); }

    .compte-carte__champs--facturation > .form-row,
    .compte-carte__champs--facturation > .compte-form__champ,
    .compte-carte__champs--facturation > #billing_address_1_field,
    .compte-carte__champs--facturation > #billing_postcode_field,
    .compte-carte__champs--facturation > #billing_city_field,
    .compte-carte__champs--facturation > #billing_state_field,
    .compte-carte__champs--facturation > #billing_country_field { grid-column: span 1; }

    .compte-securite__ligne { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 991px) {
    /* Le menu passe au-dessus du contenu, sur toute la largeur. */
    .v-espace-membre main > .woocommerce { flex-direction: column; }
    .v-espace-membre .woocommerce-MyAccount-navigation { flex: 1 1 auto; width: 100%; }

    .compte-entete > .container { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------
   RÉSERVATION ET ACOMPTE
-------------------------------------------------- */

/* Invitation à se connecter, à la place du bouton de réservation. */
.virages-connexion-requise {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0;
    padding: 18px 20px;
    background: var(--v-turquoise-100);
    border-radius: var(--v-radius-md);
}

.virages-connexion-requise span {
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--v-texte-meta);
}

/* Le solde, sous les totaux : présent mais visiblement second — ce n'est
   pas ce qu'on paie maintenant. */
.virages-solde td {
    font-family: var(--v-font-corps);
}

.virages-solde small {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

/* ==================================================
   VOS AVANTAGES

   Les codes offerts — certification, ristourne
   rattrapée — en tête de « Mon parcours ».

   Le code est ce qu'on vient chercher : il est donc
   à gauche, en gros, et se copie du regard. Le reste
   explique pourquoi on l'a.
================================================== */

.compte-avantages {
    margin: 0 0 28px;
    padding: 18px 20px;
    border: 1px solid var(--v-jaune);
    border-radius: var(--v-radius-md);
    background: #fdf3d2;
}

.compte-avantages h3 {
    margin: 0 0 12px;
    font-family: var(--v-font-titre);
    font-size: 1rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.compte-avantages__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.compte-avantages__ligne {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 14px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
}

/* Le code se lit caractère par caractère — on le recopie dans un champ.
   Une chasse fixe sépare le zéro du O et le un du l. */
.compte-avantages__code {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--v-texte-titre);
    background: var(--v-blanc);
    border: 1px dashed var(--v-gris-400);
    border-radius: var(--v-radius-sm);
    padding: 4px 10px;
    white-space: nowrap;
    user-select: all;
}

.compte-avantages__validite {
    font-size: 0.75rem;
    color: var(--v-texte-meta);
    white-space: nowrap;
}

/* Un code périmé reste affiché : le retirer ferait douter de l'avoir
   reçu. Il s'efface, et sa date dit pourquoi. */
.compte-avantages__ligne.est-perimee {
    opacity: 0.55;
}

.compte-avantages__ligne.est-perimee .compte-avantages__code {
    text-decoration: line-through;
}

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

@media (max-width: 575px) {
    .compte-avantages__ligne {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .compte-avantages__code { justify-self: start; }
    .compte-avantages__validite { white-space: normal; }
}

/* ==================================================
   MON PARCOURS

   La liste des formations du catalogue, marquées
   validées ou non pour la personne connectée.
================================================== */

.compte-parcours__resume {
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--v-turquoise-100);
    border-radius: var(--v-radius-md);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
}

.compte-parcours__resume p { margin: 0 0 10px; }
.compte-parcours__resume strong { color: var(--v-turquoise-700); }

.compte-parcours__jauge {
    display: block;
    height: 6px;
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
    overflow: hidden;
}

.compte-parcours__jauge span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--v-turquoise-700);
}

/* Fidélité : le compteur de points, en tête de « Mon parcours ». Orange
   pour le distinguer du résumé turquoise des acquis, juste en dessous. */
.compte-fidelite {
    margin: 0 0 20px;
    padding: 16px 18px;
    background: var(--v-orange-100);
    border-radius: var(--v-radius-md);
    font-family: var(--v-font-corps);
}

.compte-fidelite__titre {
    margin: 0 0 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--v-texte-titre);
}

.compte-fidelite__total {
    margin: 0 0 10px;
    font-size: 0.875rem;
}

.compte-fidelite__total strong {
    font-size: 1.5rem;
    color: var(--v-orange-500);
}

.compte-fidelite__jauge {
    height: 8px;
    margin: 0 0 10px;
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
    overflow: hidden;
}

.compte-fidelite__jauge span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--v-orange-500);
}

.compte-fidelite__note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.compte-parcours__vide {
    margin: 0 0 24px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--v-texte-meta);
}

/* --------------------------------------------------
   LE MINI-SCHÉMA

   Une filière par étape, sur un fil vertical ; le jalon
   de gauche compte ce qui est validé. Dans l'étape, les
   formations en pastilles — la couleur dit l'état avant
   qu'on lise l'intitulé.
-------------------------------------------------- */

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

.compte-schema__etape {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding-bottom: 22px;
}

/* Le fil qui relie un jalon au suivant. */
.compte-schema__etape::before {
    content: "";
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 21px;
    width: 2px;
    background: var(--v-bordure);
}

.compte-schema__etape:last-child { padding-bottom: 0; }
.compte-schema__etape:last-child::before { display: none; }
.compte-schema__etape.est-complete::before { background: var(--v-turquoise-500); }

.compte-schema__jalon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--v-bordure);
    border-radius: 50%;
    background: var(--v-fond-carte);
    font-family: var(--v-font-titre);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--v-texte-meta);
}

.compte-schema__etape.est-entamee .compte-schema__jalon {
    border-color: var(--v-turquoise-500);
    color: var(--v-turquoise-700);
}

.compte-schema__etape.est-complete .compte-schema__jalon {
    border-color: var(--v-turquoise-700);
    background: var(--v-turquoise-700);
    color: var(--v-blanc);
}

.compte-schema__titre {
    margin: 11px 0 10px;
    font-family: var(--v-font-titre);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--v-texte-titre);
}

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

.compte-schema__noeud a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-pill);
    background: var(--v-fond-carte);
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--v-texte-corps) !important;
    text-decoration: none !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.compte-schema__noeud a:hover,
.compte-schema__noeud a:focus-visible { border-color: var(--v-violet-500); }

.compte-schema__noeud i { font-size: 0.75rem; color: var(--v-gris-400); }

.compte-schema__noeud.est-acquise a {
    border-color: var(--v-turquoise-500);
    background: var(--v-turquoise-100);
    color: var(--v-turquoise-700) !important;
    font-weight: 600;
}

.compte-schema__noeud.est-acquise i { color: var(--v-turquoise-700); }

/* Fermée faute de prérequis : en retrait, pas cachée — elle reste un but. */
.compte-schema__noeud.est-bloquee a {
    border-style: dashed;
    background: var(--v-fond-page);
    color: var(--v-texte-meta) !important;
}

/* La dérogation ouvre l'accès sans rien valider : un liseré violet la
   distingue d'une formation simplement accessible. */
.compte-schema__noeud.est-dispensee a { border-color: var(--v-violet-500); }

.compte-schema__legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 22px 0 0;
    padding: 14px 0 0;
    list-style: none;
    border-top: 1px solid var(--v-bordure);
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    color: var(--v-texte-meta);
}

.compte-schema__legende i { margin-right: 4px; color: var(--v-gris-400); }
.compte-schema__legende .est-acquise i { color: var(--v-turquoise-700); }

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

@media (max-width: 575px) {
    .compte-schema__etape { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
    .compte-schema__etape::before { top: 36px; left: 17px; }
    .compte-schema__jalon { width: 36px; height: 36px; font-size: 0.6875rem; }
    .compte-schema__titre { margin-top: 7px; }
}

/* ==================================================
   MON ENTREPRISE

   La liste des collaborateurs, le formulaire d'ajout et le
   tableau des inscriptions de l'équipe.
================================================== */

.compte-entreprise__liste {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compte-entreprise__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
    background: var(--v-blanc);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-corps);
}

.compte-entreprise__qui { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 2px; }
.compte-entreprise__qui span { font-size: 0.75rem; color: var(--v-texte-meta); }

.compte-entreprise__statut {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--v-radius-pill);
    background: var(--v-turquoise-100);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--v-turquoise-700);
    white-space: nowrap;
}

.compte-entreprise__action { margin: 0; }

.compte-entreprise__sous-titre {
    margin: 8px 0 12px;
    font-family: var(--v-font-titre);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.compte-entreprise__ajout { padding-top: 16px; border-top: 1px solid var(--v-bordure); }

/* Le mode d'emploi de l'espace entreprise, avant le bouton qui l'active. */
.compte-entreprise__etapes {
    display: grid;
    gap: 10px;
    margin: 16px 0 20px;
    padding-left: 1.25rem;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--v-texte-corps);
}

.compte-entreprise__etapes li::marker {
    font-weight: 600;
    color: var(--v-action);
}

.compte-entreprise__etapes strong { color: var(--v-texte-titre); }

.compte-entreprise__tableau { overflow-x: auto; }

.compte-entreprise__tableau table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
}

.compte-entreprise__tableau th,
.compte-entreprise__tableau td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--v-bordure);
    text-align: left;
    vertical-align: top;
}

.compte-entreprise__tableau th { font-weight: 600; color: var(--v-texte-meta); white-space: nowrap; }
.compte-entreprise__tableau tr.est-passee td { color: var(--v-texte-meta); }
.compte-entreprise__tableau .compte-entreprise__statut { margin-left: 6px; }

/* Le choix du type de compte, à l'inscription. Le nom de l'organisation
   reste visible sans JavaScript ; il n'est exigé que pour « organisation ». */
.compte-type-compte { border: 0; padding: 0; margin: 0 0 14px; }
.compte-type-compte legend { margin-bottom: 6px; font-size: 0.8125rem; font-weight: 600; }
.compte-type-compte > label { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; font-size: 0.875rem; }
.compte-type-compte__societe { display: block; margin-top: 8px; }
.compte-type-compte__societe label { display: block; margin-bottom: 5px; font-size: 0.8125rem; }
.compte-type-compte__societe input { width: 100%; }

.compte-rdv__pratique { margin-top: 8px; font-size: 0.8125rem; }
.compte-rdv__pratique summary { cursor: pointer; color: var(--v-action); font-weight: 600; }

@media (max-width: 575px) {
    /* Les écrans que WooCommerce rend sans nos cartes gardent un cadre :
       à 24 px, il ne laissait plus que 302 px à un tableau de commande
       déjà à l'étroit. */
    .woocommerce-MyAccount-content > form:not(.edit-account):not(.compte-facturation),
    .woocommerce-MyAccount-content > .woocommerce-Addresses,
    .woocommerce-MyAccount-content > p,
    .woocommerce-MyAccount-content > table,
    .compte-carte {
        padding: 18px 16px;
    }
}