/*
Theme Name: Inside Web
Description: `Inside Web` 2025 - thème
Version: 2.0.0
Author: Inside Web
Author URI: https://www.insideweb.be
*/

/*Example to import font*/
/*@font-face {
  font-family: "Circular-Std";
  src: url("https://insideweb.be/layout/themes/insideweb/fonts/CircularStd-Black.ttf") format('truetype');
  font-weight: 700;
}*/

/* Clair uniquement : empêche l'assombrissement automatique des
   navigateurs mobiles en mode sombre (voir header.php). */
:root {
    color-scheme: only light;

    /* La couleur des liens, celle de Virages et non celle de Bootstrap.
       Rien ne la redéfinissait : tout lien sans classe à lui — dans le
       texte d'une fiche, dans les prérequis — sortait dans le bleu
       #0d6efd de Bootstrap, étranger à la charte (21/09/2026).
       Bootstrap lit la version RVB : les deux doivent être posées. */
    --bs-link-color: #48408c;
    --bs-link-color-rgb: 72, 64, 140;
    --bs-link-hover-color: #38316f;
    --bs-link-hover-color-rgb: 56, 49, 111;
}

:root {
    --white: #ffffff;
    --black: #000000;

    /* Brand Grey Scale */
    --brand-grey-50: #C1C1C1;
    --brand-grey-100: #B2B2B2;
    --brand-grey-200: #959595;
    --brand-grey-300: #777777;
    --brand-grey-400: #5A5A5A;
    --brand-grey-700: #242424;
    --brand-grey-800: #0C0C0C;

    /* Grey Scale */
    --grey-50: #F7F3F2;
    --grey-100: #F2EEED;
    --grey-200: #E8E1DE;
    --grey-300: #DACEC8;
    --grey-400: #CABFBA;
    --grey-500: #BCAFA9;

    /* Status Colors */
    --error: #FF6363;
    --warning: #FFAF57;
    --success: #36D2A1;
    --info: #62C5DA;

    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.15);
    --shadow-medium: rgba(0, 0, 0, 0.30);

    /* Box-shadows */
    --box-shadow-1: 0px 1px 2px var(--shadow-light);
    --box-shadow-2: 0px 2px 6px 2px var(--shadow-medium);
    --box-shadow-3: 0px 1px 3px var(--shadow-medium);
    --box-shadow-4: 0px 2px 3px var(--shadow-medium);
    --box-shadow-5: 0px 4px 4px var(--shadow-medium);

    /* ==================================================
       CHARTE VIRAGES
       Reprise des variables du fichier Figma de la refonte.
       Les blocs du builder n'utilisent que ces jetons,
       jamais une couleur écrite en dur.
    ================================================== */

    /* --------------------------------------------------
       1 · PALETTE BRUTE
       Report exact des variables du fichier Figma. Rien
       ici n'est appelé directement par un bloc.
    -------------------------------------------------- */

    --v-violet-500: #48408c;
    --v-violet-700: #38316f;

    --v-turquoise-100: #e9f4f6;
    --v-turquoise-500: #7cbac1;
    --v-turquoise-700: #3d7f86;

    --v-orange-100: #fde8d0;
    --v-orange-500: #f07f12;

    --v-jaune-100: #fdf3d2;
    --v-jaune-500: #fdd771;

    --v-rose-100: #fae1e7;
    --v-rose-500: #db104e;

    /* Pas de vert dans la charte : le vert de validation a été écarté par
       la cliente. Ce qui est validé, acquis ou réussi se dit en turquoise. */

    --v-brun-700: #b45409;

    --v-blanc: #ffffff;
    --v-papier-100: #fdfbf7;
    --v-sable-300: #e5e0db;
    --v-gris-400: #9aa0ac;
    --v-gris-500: #6b7280;

    /* --------------------------------------------------
       2 · COULEURS DE CATÉGORIE
       Une catégorie de formation garde la même couleur d'un
       bout à l'autre du site : carte du catalogue, pastille,
       fiche, schéma des parcours. C'est ce qui permet de la
       reconnaître sans lire son nom.

       Les portes d'entrée font exception : elles ne
       représentent pas des catégories mais des intentions.
    -------------------------------------------------- */

    --v-cat-bases: #7cbac1;
    --v-cat-therapie: #ed7f14;
    --v-cat-entreprise: #f5ce72;
    --v-cat-hypnose: #d91450;
    --v-cat-specialisations: #48408c;

    /* La supervision est devenue une catégorie à part entière, et il lui
       fallait sa couleur : elle n'en avait pas, faute d'exister comme
       famille. Le turquoise foncé la rattache visiblement au socle —
       une supervision accompagne une pratique déjà acquise — sans se
       confondre avec le turquoise clair des modules de base. */
    --v-cat-supervision: #3d7f86;

    /* Texte lisible sur chacune de ces couleurs. */
    --v-cat-bases-texte: var(--v-blanc);
    --v-cat-therapie-texte: var(--v-blanc);
    --v-cat-entreprise-texte: var(--v-brun-700);
    --v-cat-hypnose-texte: var(--v-blanc);
    --v-cat-specialisations-texte: var(--v-blanc);
    --v-cat-supervision-texte: var(--v-blanc);

    /* Le fond clair de chaque famille. Il porte les encadrés qui
       regroupent plusieurs cartes — une filière du schéma de parcours,
       par exemple — là où la couleur pleine ne sert qu'aux pastilles et
       aux filets. */
    --v-cat-bases-fond: var(--v-turquoise-100);
    --v-cat-therapie-fond: var(--v-orange-100);
    --v-cat-entreprise-fond: var(--v-jaune-100);
    --v-cat-hypnose-fond: var(--v-rose-100);
    /* Les spécialisations n'ont pas de teinte à elles dans la palette :
       le violet n'existe qu'en 500 et 700, deux valeurs pleines qu'on ne
       peut pas mettre derrière du texte. Leur encadré était donc blanc —
       invisible sur le papier de la page, et impossible à distinguer des
       cartes qu'il contient, blanches elles aussi.

       Il prend le turquoise clair, la seule teinte pâle de la charte. Le
       socle le porte aussi, mais il ne s'y confond pas : le liseré violet
       et les pastilles violettes disent la famille, le fond ne fait que
       poser le cadre. */
    --v-cat-specialisations-fond: var(--v-turquoise-100);
    --v-cat-supervision-fond: var(--v-turquoise-100);

    /* --------------------------------------------------
       3 · RÔLES
       C'est ce que les blocs appellent. Changer une couleur
       de marque se fait ici, pas dans les blocs.
    -------------------------------------------------- */

    --v-texte-titre: var(--v-violet-500);
    --v-texte-corps: var(--v-violet-500);
    --v-texte-meta: var(--v-gris-500);
    --v-texte-inverse: var(--v-blanc);
    --v-texte-sur-jaune: var(--v-brun-700);

    --v-action: var(--v-violet-700);
    --v-action-cta: var(--v-orange-500);

    --v-fond-page: var(--v-papier-100);
    --v-fond-carte: var(--v-blanc);
    --v-fond-section: var(--v-turquoise-100);
    --v-fond-hero: var(--v-turquoise-500);
    --v-fond-footer: var(--v-violet-700);
    --v-footer-texte: var(--v-blanc);
    --v-fond-alerte-douce: var(--v-jaune-100);

    --v-bordure: var(--v-sable-300);
    --v-bordure-optionnel: var(--v-gris-400);

    /* États */
    --v-succes: var(--v-turquoise-500);
    --v-succes-fond: var(--v-turquoise-100);
    --v-succes-texte: var(--v-turquoise-700);
    --v-alerte-fond: var(--v-orange-100);
    --v-alerte-texte: var(--v-brun-700);
    --v-urgence: var(--v-rose-500);
    --v-urgence-fond: var(--v-rose-100);

    --v-surlignage: var(--v-jaune-500);

    /* --------------------------------------------------
       Compatibilité — anciens noms encore employés par
       quelques blocs, à retirer au fil des passages.
    -------------------------------------------------- */
    --v-turquoise-400: var(--v-turquoise-500);
    --v-orange: var(--v-cat-therapie);
    --v-jaune: var(--v-cat-entreprise);
    --v-jaune-vif: var(--v-jaune-500);
    --v-rose: var(--v-cat-hypnose);
    --v-papier: var(--v-papier-100);
    --v-meta: var(--v-gris-500);
    --v-fond-clair: var(--v-fond-section);
    --v-fond-papier: var(--v-papier-100);

    /* Rayons */
    --v-radius-sm: 8px;
    --v-radius-md: 12px;
    --v-radius-lg: 16px;
    --v-radius-xl: 20px;
    --v-radius-2xl: 24px;
    --v-radius-pill: 999px;

    /* Grille — relevée sur la maquette Figma (desktop 1440)
       Contenu 1328 px, gouttières 56 px. En plafonnant le conteneur
       à 1440 px avec 56 px de marge interne, on retrouve exactement
       1328 px de contenu quelle que soit la largeur d'écran au-delà. */
    --v-contenu: 1440px;
    --v-gouttiere: 56px;
    /* Le palier tablette manquait : on passait de 56 px à 20 px d'un
       coup à 768 px, si bien qu'un iPad en portrait gardait les 56 px du
       grand écran et perdait un septième de sa largeur en marge. */
    --v-gouttiere-tablette: 32px;
    --v-gouttiere-mobile: 20px;

    /* Rythme vertical des blocs
       Figma n'a pas une valeur unique : les blocs de contenu
       respirent à 56 px, les blocs vitrine à 80 px, les bandeaux
       utilitaires à 28 px. Les valeurs asymétriques de la maquette
       viennent de l'empilement des pages ; le builder réordonnant
       librement les blocs, on les symétrise. */
    --v-section-y: 56px;
    --v-section-y-large: 80px;
    --v-section-y-serre: 28px;
    --v-section-y-mobile: 40px;

    /* Hauteur plancher des bandeaux d'ouverture compacts — hero des pages
       intérieures, en-tête de l'espace membre. Une seule valeur pour les
       deux : ils ouvrent le même genre de page et ne doivent pas se
       répondre de deux hauteurs différentes. */
    --v-hero-compact: 296px;

    /* Typographie
       Fredoka a besoin d'au moins 120 % d'interligne : en dessous,
       ses jambages et ses accents sont rognés. */
    --v-font-titre: 'Fredoka', system-ui, sans-serif;
    --v-font-corps: 'Poppins', system-ui, sans-serif;
    /* Manuscrite, réservée aux annotations de la maquette. */
    --v-font-manuscrite: 'Caveat', cursive;
    --v-lh-titre: 1.2;
    --v-lh-corps: 1.55;
}


/* ==================================================
   SOCLE COMMUN AUX BLOCS DU BUILDER
   Tout ce qui est partagé vit ici. Chaque bloc n'a
   dans css/layouts/ que ce qui lui est propre.
================================================== */

.v-bloc {
    padding-top: var(--v-section-y);
    padding-bottom: var(--v-section-y);
}

.v-bloc--large {
    padding-top: var(--v-section-y-large);
    padding-bottom: var(--v-section-y-large);
}

.v-bloc--serre {
    padding-top: var(--v-section-y-serre);
    padding-bottom: var(--v-section-y-serre);
}

/* La grille de Figma, appliquée au conteneur Bootstrap des blocs.
   Bootstrap plafonne à 1320 px et centre : on obtiendrait 60 px de
   gouttière au lieu de 56, et un contenu qui n'atteint jamais 1328. */
.v-bloc > .container {
    max-width: var(--v-contenu);
    padding-left: var(--v-gouttiere);
    padding-right: var(--v-gouttiere);
}

.v-eyebrow {
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
    margin-bottom: 10px;
}

.v-titre {
    font-family: var(--v-font-titre);
    font-weight: 600;
    line-height: var(--v-lh-titre);
    color: var(--v-texte-titre);
    margin-bottom: 0;
}

/* Échelle relevée sur les styles de texte Figma :
   H1 40 px, H2 28 px, H3 22 px, H4 18 px. */
.v-titre--h1 { font-size: 2.5rem; }
.v-titre--h2 { font-size: 1.75rem; }
.v-titre--h3 { font-size: 1.375rem; }
.v-titre--h4 { font-size: 1.125rem; }

.v-chapo {
    font-family: var(--v-font-corps);
    font-size: 0.9375rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-corps);
    margin-top: 0.625rem;
    margin-bottom: 0;
}

/* Entête de section — surtitre et titre à gauche, lien « voir tout »
   aligné sur la ligne de base du titre, à droite.
   Figma : 10 px entre le surtitre et le titre, lien à 14 px. */
.v-entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.v-entete__lien {
    flex: 0 0 auto;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-action);
    text-decoration: none;
    white-space: nowrap;
}

.v-entete__lien:hover { text-decoration: underline; }

@media (max-width: 575px) {
    .v-entete {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* --------------------------------------------------
   FIL D'ARIANE
-------------------------------------------------- */

/* La couleur est héritée, pas imposée : le fil s'affiche sur un hero
   turquoise comme sur un fond clair, et prend à chaque fois la couleur
   du texte qui l'entoure. Une valeur en dur le rendrait invisible dès
   qu'un hero change de fond. */
.v-fil {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: inherit;
    opacity: 0.85;
}

.v-fil a { color: inherit; text-decoration: none; }
.v-fil a:hover { text-decoration: underline; }

/* Renvoi sous une grille — une phrase, puis un bouton bordé, centrés.
   « Vous préférez voir l'ensemble avant de choisir ? Voir le schéma
   complet des parcours → ». Deux blocs s'en servent, d'où sa place ici
   plutôt que dans l'un des deux.

   La phrase passe au-dessus et le bouton en dessous : côte à côte sur
   une ligne, le lien se lisait comme la fin de la question et se
   confondait avec elle. C'est pourtant la seule issue proposée à qui
   ne sait pas encore quelle porte pousser. */
.v-renvoi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 28px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.84375rem;
}

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

/* Orange plein et non violet : ce renvoi vers le parcours complet est
   la seule issue proposée à qui ne sait pas quelle porte pousser, et
   il se voyait mal en simple contour. Il se vide au survol plutôt que
   de se remplir : le bouton reste orange d’un bout à l’autre, seul le
   sens de la couleur s’inverse. */
.v-renvoi__lien {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    background: var(--v-action-cta);
    border: 1px solid var(--v-action-cta);
    border-radius: var(--v-radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-blanc);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

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

/* La flèche avance au survol : le seul mouvement du bouton, il suffit
   à dire qu'on part ailleurs. */
.v-renvoi__fleche { transition: transform 0.2s ease; }
.v-renvoi__lien:hover .v-renvoi__fleche { transform: translateX(3px); }

/* ==================================================
   COULEURS DE CATÉGORIE — classes utilitaires

   Un seul endroit décide de la couleur d'une catégorie.
   Les blocs posent `v-cat--hypnose` et n'ont plus à savoir
   que l'hypnose est bordeaux : le jour où elle change, elle
   change partout d'un coup.
================================================== */

/* Repli d'abord : une catégorie inconnue prend le violet de marque
   plutôt que de rendre une couleur vide. Déclaré avant les classes
   précises, qui ont la même spécificité et doivent l'emporter. */
[class*="v-cat--"] { --cat: var(--v-violet-500); --cat-texte: var(--v-blanc); }

.v-cat--bases            { --cat: var(--v-cat-bases);            --cat-texte: var(--v-cat-bases-texte); }
.v-cat--therapie         { --cat: var(--v-cat-therapie);         --cat-texte: var(--v-cat-therapie-texte); }
.v-cat--entreprise       { --cat: var(--v-cat-entreprise);       --cat-texte: var(--v-cat-entreprise-texte); }
.v-cat--hypnose          { --cat: var(--v-cat-hypnose);          --cat-texte: var(--v-cat-hypnose-texte); }
.v-cat--specialisations  { --cat: var(--v-cat-specialisations);  --cat-texte: var(--v-cat-specialisations-texte); }
.v-cat--supervision      { --cat: var(--v-cat-supervision);      --cat-texte: var(--v-cat-supervision-texte); }

.v-cat-fond   { background: var(--cat); color: var(--cat-texte); }
.v-cat-texte  { color: var(--cat); }
.v-cat-liseré { border-color: var(--cat); }

/* ==================================================
   ARRONDIS PAR DÉFAUT

   Toutes les images et médias du site sont arrondis.
   Le poser une fois évite d'y penser bloc par bloc, et
   d'oublier ceux qu'on ajoutera plus tard.

   Les exceptions — logos ronds, portraits, drapeaux —
   redéfinissent leur propre rayon après cette règle.
================================================== */

.v-bloc img,
.v-bloc figure,
.v-bloc video,
.v-bloc iframe {
    border-radius: var(--v-radius-lg);
}

/* Ces éléments portent déjà leur forme. */
.v-drapeau,
.v-header__marque img,
.v-footer__marque img,
.grille_personnes__portrait img,
.temoignages__portrait img,
.intervenants__portrait img {
    border-radius: 50%;
}

.v-footer__badges img,
.logos__image {
    border-radius: 0;
}

/* La carte de base — fond blanc, liseré sable, angles à 16 px.
   Elle revient dans une douzaine de blocs : étapes, groupes,
   formulaires, encadrés latéraux. */
.v-carte {
    padding: 22px;
    background: var(--v-blanc);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

.v-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    /* La règle générique `button` du thème impose une bordure et un fond :
       on les neutralise pour que .v-bouton se comporte pareil sur un
       <a> et sur un <button type="submit">. */
    border: none;
    cursor: pointer;
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.v-bouton:hover { opacity: 0.88; }

.v-bouton--primaire {
    background: var(--v-action);
    color: var(--v-texte-inverse);
}

.v-bouton--secondaire {
    background: transparent;
    color: var(--v-texte-titre);
    border: 1.25px solid currentColor;
}

/* La troisième variante du composant Bouton de la maquette : contourée
   de blanc, pour les fonds de couleur pleine — entêtes turquoise,
   bandeaux violets. La variante secondaire y disparaîtrait, son liseré
   violet n'ayant pas de contraste sur le turquoise 500. */
.v-bouton--blanc {
    background: transparent;
    color: var(--v-blanc);
    border: 1.5px solid var(--v-blanc);
}

/* La cinquième variante du composant Bouton — « CTA orange » — existait
   dans la maquette et pas ici. Faute de l'avoir, les blocs qui en
   avaient besoin se peignaient un bouton à la main, avec une classe à
   eux : le produit d'appel posait `produit_appel__cta` en REMPLACEMENT
   de la variante, si bien que son bouton n'était plus un bouton du
   système mais un `.v-bouton` nu repeint. Une règle de plus ailleurs, et
   il perdait sa couleur.

   Elle sert aux offres — conférence gratuite, essai — jamais à la
   navigation ordinaire. */
.v-bouton--cta {
    background: var(--v-action-cta);
    color: var(--v-texte-inverse);
}

/* Une action qu'on ne rattrape pas — supprimer son compte. Contourée et
   non pleine : elle doit se voir sans s'offrir, et ne pas rivaliser du
   regard avec l'action normale de l'écran. */
.v-bouton--danger {
    background: transparent;
    color: var(--v-urgence);
    border: 1.25px solid currentColor;
}

/* Une action qui existe mais n'est pas ouverte à cette personne — la
   réservation d'une formation dont le prérequis manque.

   Elle garde la place et la forme du bouton qu'elle remplace : le
   supprimer laisserait un trou dans la carte et ferait chercher ce qui
   manque. Grisée et non barrée, curseur d'interdiction, et le pourquoi
   dans l'infobulle. */
.v-bouton--bloque {
    background: var(--v-fond-page);
    color: var(--v-texte-meta);
    border: 1.25px dashed var(--v-bordure);
    cursor: not-allowed;
}

.v-bouton--bloque:hover { opacity: 1; }

/* --------------------------------------------------
   L'ÉCHELLE DES ÉCRANS

   Quatre paliers, ceux de Bootstrap, pour que le CSS maison et la
   grille ne se contredisent jamais :

     ≤ 1199  grand écran étroit — les grilles de quatre passent à trois
     ≤ 991   tablette      — trois passent à deux, les colonnes s'empilent
     ≤ 767   grande phone  — deux passent à une
     ≤ 575   Mobile 390    — les mesures de la maquette

   La maquette ne dessine que Desktop 1440 et Mobile 390. Les deux
   paliers du milieu sont donc des interpolations, et non des écrans
   dessinés : ils existent pour qu'une tablette ne reçoive ni la
   densité du bureau, ni la maigreur du téléphone.
-------------------------------------------------- */

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

@media (max-width: 767px) {
    .v-bloc,
    .v-bloc--large {
        padding-top: var(--v-section-y-mobile);
        padding-bottom: var(--v-section-y-mobile);
    }
    .v-bloc--serre {
        padding-top: calc(var(--v-section-y-serre) / 2);
        padding-bottom: calc(var(--v-section-y-serre) / 2);
    }
    .v-bloc > .container {
        padding-left: var(--v-gouttiere-mobile);
        padding-right: var(--v-gouttiere-mobile);
    }
    .v-titre--h1 { font-size: 1.75rem; }
    .v-titre--h2 { font-size: 1.5rem; }
    .v-titre--h3 { font-size: 1.1875rem; }
    .v-titre--h4 { font-size: 1.0625rem; }
}

/* --------------------------------------------------
   LA GOUTTIÈRE DE BOOTSTRAP CONTRE CELLE DU THÈME

   C'était la cause du défilement horizontal sur téléphone, et il
   touchait presque toutes les pages.

   Une `.row` de Bootstrap tire des marges négatives égales à la moitié
   de sa gouttière, à charge pour le rembourrage du conteneur de les
   rattraper. Avec `g-4`, la gouttière fait 24 px, les marges − 12, et
   le rembourrage de 12 px du conteneur les absorbe exactement.

   Avec **`g-5`**, elle fait 48 px et les marges − 24. Or notre
   gouttière mobile vaut 20 px : la rangée dépassait donc de quatre
   pixels de chaque côté. Quatre pixels suffisent — la barre de
   défilement horizontale apparaît, et toute la page glisse sous le
   doigt.

   Six blocs sont concernés : les deux entêtes, le portrait de
   formateur, le résumé de réservation, texte-image et le corps d'une
   fiche formation. Tous rangent leurs colonnes en `col-lg-*` : sous
   992 px elles sont empilées, et la gouttière HORIZONTALE ne sépare
   donc plus rien. On la ramène à 32 px — marges − 16, absorbées
   aussi bien par les 20 px du téléphone que par les 32 de la tablette
   — plutôt que de la supprimer : si une colonne passait un jour en
   `col-md-*`, elle aurait encore de quoi respirer.

   La gouttière verticale, elle, ne bouge pas : c'est elle qui sépare
   les colonnes une fois empilées.
-------------------------------------------------- */

@media (max-width: 991px) {
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 2rem;
    }
}

/* --------------------------------------------------
   CE QUI NE DOIT JAMAIS DÉBORDER

   Un seul élément trop large élargit la page entière : la barre de
   défilement horizontale apparaît, et TOUS les blocs se décalent en
   glissant du doigt. Le coupable est presque toujours le même — un
   tableau, un bloc de code, une adresse sans espace, une vidéo
   intégrée.

   On ne masque pas le débordement de la page (`overflow-x: hidden` sur
   `body` casse le défilement ancré et les éléments collés). On rend
   chaque coupable responsable de son propre débordement.
-------------------------------------------------- */

/* Les médias ne dépassent jamais leur colonne. `height: auto` évite
   l'écrasement quand le HTML porte un attribut `height`. */
.v-bloc img,
.v-bloc video,
.v-bloc iframe,
.v-bloc embed,
.v-bloc object {
    max-width: 100%;
    height: auto;
}

/* Sauf l'iframe Calendly : elle n'a pas de ratio propre et tire sa
   hauteur de son conteneur via l'attribut `height="100%"`, que le
   `height: auto` ci-dessus écrase — elle retombe alors aux 150 px par
   défaut d'une iframe, avec tout l'agenda en défilement interne. */
.v-bloc .calendly-inline-widget iframe {
    height: 100%;
}

/* Un tableau de contenu défile dans son cadre, pas dans la page. */
.v-texte table,
.texte_riche table,
.entry-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Le code ne se coupe pas en mots : il défile. */
.v-bloc pre {
    max-width: 100%;
    overflow-x: auto;
}

/* Une adresse électronique ou une URL colle sans espace et pousse sa
   colonne. On l'autorise à casser — seulement elle, pas tout le texte,
   qu'une césure générale rendrait illisible. */
.v-bloc a[href^="mailto:"],
.v-bloc a[href^="http"] {
    overflow-wrap: anywhere;
}

/* --------------------------------------------------
   LE DOIGT N'EST PAS UN CURSEUR

   Sous 768 px, on vise avec un doigt : les cibles de moins de 44 px
   se ratent une fois sur trois. La règle vaut pour ce qu'on peut
   presser, jamais pour les liens en pleine phrase, qu'élargir
   déchirerait le paragraphe.
-------------------------------------------------- */

@media (max-width: 767px) {

    /* Visé sur ce qui EST un bouton, et non sur toute balise `button` :
       les puces d'un carrousel et les chevrons d'accordéon en sont
       aussi, et les porter à 44 px crèverait leur rangée. */
    .v-bouton,
    button[type="submit"],
    input[type="submit"],
    .woocommerce-button,
    .button {
        min-height: 44px;
    }

    /* Un intitulé long ne déborde plus du bouton : il passe à la
       ligne, centré, plutôt que d'élargir sa colonne. */
    .v-bouton {
        text-align: center;
        white-space: normal;
    }

    /* Les champs à 16 px au moins : en dessous, iOS zoome sur le
       formulaire dès qu'on y entre, et ne dézoome jamais. */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }
}

body{
    font-family: var(--v-font-corps);
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: var(--v-texte-corps);
    margin: 0;
    overflow-y: scroll;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* TYPOGRAPHY CLASSES */

/* Display Styles */
.display1 {

}

.display2 {

}

/* Title Styles */
.title1 {

}

.title2 {

}

.title3 {

}

.title4 {

}

.title5 {

}

/* Body Regular Text Styles */
.body-regular-text1 {

}

.body-regular-text2 {

}

.body-regular-text3 {

}

.body-regular-text4 {

}

/* Body Bold Text Styles */
.body-bold-text1 {

}

.body-bold-text2 {

}

.body-bold-text3 {

}

.body-bold-text4 {

}

/* Caption Regular Styles */
.caption-regular-1 {

}

.caption-regular-2 {

}

.caption-regular-3 {

}

/* Caption Bold Styles */
.caption-bold-1 {

}

.caption-bold-2 {

}

.caption-bold-3 {

}

/* Button Bold Styles */
.button-bold-text1 {

}

.button-bold-text2 {

}

/* Button Regular Styles */
.button-regular-text1 {

}

.button-regular-text2 {

}

/* Mobile Responsive Versions */
@media only screen and (max-width: 768px) {
    .display1 {

    }

    .display2 {

    }

    .title1 {

    }

    .title2 {

    }

    .title3 {

    }

    .title4 {

    }

    .title5 {

    }
}
/* END TYPOGRAPHY CLASSES */

.pt-60{

}
.pb-60{

}
.pt-40{

}
.pb-40{

}
.mb-10{

}

a {
    text-decoration: none;
}

a:hover {

}

/* `width: 100%` forçait toutes les images à remplir leur conteneur, y
   compris les logos dimensionnés par un attribut `height` : le logo du
   footer s'étalait en ellipse. `max-width` laisse les petites images
   à leur taille tout en empêchant les grandes de déborder. */
img {
    max-width: 100%;
    height: auto;
}

p:last-child {
    margin-bottom: 0;
}

button, .button{
    background: var(--secondary);
    border: 1px solid var(--secondary);
    padding: 10px 20px;
    color: var(--primary);
    font-size: clamp(0.875rem, 0.831rem + 0.1878vw, 1rem);
    transition: all 0.5s ease 0s;
}

button:hover, .button:hover{
    outline: none;
    box-shadow: none!important;
}

/* Un libellé écrit pour les lecteurs d'écran, et pour eux seuls.

   Le thème s'en sert — la recherche du 404, le champ de code promo, le
   nombre de places du panier — et l'utilisait jusqu'ici sans le définir :
   c'est la feuille de WooCommerce qui posait cette classe, discrètement,
   sur toutes les pages. Elle n'est plus chargée, et sans cette règle les
   libellés cachés s'affichaient en clair au milieu des formulaires.

   display:none serait plus court et ferait le contraire de ce qu'on veut :
   un texte ainsi masqué n'est pas lu non plus. */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Sauf au clavier : un lien d'évitement doit se montrer quand on
   l'atteint. */
.screen-reader-text:focus {
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 14px;
    clip: auto;
    clip-path: none;
    background: var(--v-blanc);
    color: var(--v-texte-titre);
    z-index: 100000;
}
button:focus, .button:focus{
    outline: none;
    box-shadow: none!important;
}

input {
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

/* iOS: Prevent auto-zoom on input focus (requires 16px minimum) */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        font-size: 16px;
    }
}

input:focus {
    outline: none;
}

.hide{
    display: none;
}

.btnSite{
    border: 1px solid var(--primary);
    color: var(--primary);
    background-color: var(--white);
    padding: 5px 20px;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
}

.btnSite:hover{
    background-color: var(--primary);
    color: var(--white);
}

/* ==================================================
   Verdict de vérification du numéro de TVA

   Le champ vit à deux endroits — tunnel de réservation et espace membre —
   et le message se pose juste sous lui dans les deux cas. Les couleurs
   reprennent les variables du thème plutôt que les utilitaires Bootstrap :
   le vert et le rouge de Bootstrap jurent avec la palette Virages.
   ================================================== */

.tva-verdict {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
}

.tva-verdict:empty {
    display: none;
}

.tva-verdict--attente {
    color: var(--gray-600, #6c757d);
}

.tva-verdict--valide {
    color: #1a7f4b;
}

.tva-verdict--invalide {
    color: #b3261e;
}

/* Vérification impossible : ce n'est pas un refus, le numéro est
   peut-être bon. Le ton doit rester neutre, jamais alarmant. */
.tva-verdict--indisponible {
    color: var(--gray-600, #6c757d);
}

/* --------------------------------------------------
   PRÉREQUIS — « voir plus » et ses bulles

   Le composant commun à la case « Prérequis » d'une fiche et à la ligne
   de prérequis des cartes de formation (Virages, 21/09/2026). Rendu par
   virages_prerequis_voir_plus(), piloté par js/blocs/prerequis.js.

   Masqués par la feuille de style et non par l'attribut « hidden » : la
   case de la fiche passe par le filtre de WordPress, qui peut le retirer.
   Le bouton n'apparaît qu'une fois le script prêt (.est-pret) ; sans
   lui, la ligne des prérequis suffit.
-------------------------------------------------- */

.v-prerequis-plus {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--v-violet-500);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
}

/* Toujours sous les liens, jamais à leur suite (Virages, 21/09/2026).
   Sur la carte, le bouton vit dans une ligne en flex : il y prend toute
   la largeur pour passer dessous. */
.v-prerequis-plus.est-pret {
    display: block;
    flex-basis: 100%;
    width: fit-content;
    margin-top: 0.2rem;
    text-align: left;
}

.v-prerequis-plus:hover { color: var(--v-violet-700); }

/* Une seule ligne : ce qui dépasse est remplacé par « … ». Les bulles
   sont des boîtes en ligne, que le navigateur retire en entier plutôt
   que de les couper au milieu d'un mot. */
.v-prerequis-bulles {
    display: none;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v-prerequis-bulles.est-ouvert { display: block; }

.v-prerequis-bulles li {
    display: inline-block;
    max-width: 100%;
    margin: 0 0.3rem 0 0;
    vertical-align: middle;
}

.v-prerequis-bulles a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.1rem 0.55rem;
    border-radius: var(--v-radius-pill);
    background: #edebf6;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--v-violet-700);
    text-decoration: none;
}

.v-prerequis-bulles a:hover {
    background: var(--v-violet-500);
    color: var(--v-blanc);
    text-decoration: none;
}