/* ============================================================
   Profils d'acteurs VanillaMilk — CSS mobile-first
   Base : mobile (< 768px), surcharges desktop via min-width
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   VARIABLES GLOBALES
   ══════════════════════════════════════════════════════════ */

:root {
    --pro-header-height:  90px; /* fallback desktop */
    --pro-tab-nav-height: 44px;
}

@media (max-width: 767px) {
    :root { --pro-header-height: 60px; }
}

/* ══════════════════════════════════════════════════════════
   ALIAS LOCAUX — pointent vers vm-tokens.css
   ──────────────────────────────────────────────────────────
   Aucun hex de charte dans ce fichier : tout passe par un token.
   Les voiles bleus sont calculés depuis --vm-bleu-clair, du plus
   clair au plus soutenu. Le curseur --pro-voile-mix les décale
   tous en même temps.
   ══════════════════════════════════════════════════════════ */

:root {
    /* Couleurs de charte */
    --pro-bleu:          var(--vm-bleu);
    --pro-bleu-mer:      var(--vm-bleu-mer);
    --pro-turquoise:     var(--vm-turquoise);
    --pro-violet:        var(--vm-violet);
    --pro-orange:        var(--vm-orange);
    --pro-jaune:         var(--vm-jaune);
    --pro-blanc:         var(--vm-surface);
    --pro-turquoise-pale: var(--vm-turquoise-pale);
    --pro-rose:          var(--vm-rose); /* encarts d'alerte (21/09/2026) */

    /* Gris des evenements passes et des organisateurs (21/09/2026). */
        --pro-gris:          var(--vm-text-muted); /* 4,8:1 sur blanc depuis la correction du jeton (22/09/2026) */

    /* Taille par defaut des pictos de liste (21/09/2026). Redefinie par
       contexte : titres 22px, mentions 25px, etapes 18px, infos des lieux 16px. */
    --pro-picto:         20px;

    /* Typographie de la fiche (21/09/2026). Texte secondaire (listes,
       details, mentions, liens) : 0.9rem = 14,4px, soit la taille de
       text-2 (0,9em du theme) dans .main. Interligne unique du texte. */
    --pro-fs-texte:      0.9rem;
    --pro-lh-texte:      1.6;

    /* Voiles bleus : 5 niveaux calculés depuis --vm-bleu-clair.
       Du plus clair (1) au plus soutenu (5). Modifier un pourcentage
       décale ce niveau partout où il est employé. */
    --pro-voile-1:       color-mix(in srgb, var(--vm-bleu-clair)  3%, #ffffff);
    --pro-voile-2:       color-mix(in srgb, var(--vm-bleu-clair)  6%, #ffffff);
    --pro-voile-3:       color-mix(in srgb, var(--vm-bleu-clair) 15%, #ffffff);
    --pro-voile-4:       color-mix(in srgb, var(--vm-bleu-clair) 28%, #ffffff);
    --pro-voile-5:       color-mix(in srgb, var(--vm-bleu-clair) 32%, #ffffff);

    /* Nuances dérivées ponctuelles */
    --pro-bleu-fonce:    color-mix(in srgb, var(--vm-bleu) 71%, #000000);
    --pro-bleu-doux:     color-mix(in srgb, var(--vm-bleu) 72%, #ffffff);
    --pro-violet-clair:  color-mix(in srgb, var(--vm-violet) 55%, #ffffff);
    --pro-jaune-voile:   color-mix(in srgb, var(--vm-jaune) 19%, #ffffff);
    --pro-jaune-fonce:   color-mix(in srgb, var(--vm-jaune) 47%, #000000);
    --pro-ombre-rgb:     var(--vm-ombre-rgb);
}



/* ══════════════════════════════════════════════════════════
   BANDEAUX SUPÉRIEURS
   ══════════════════════════════════════════════════════════ */

/* Mode normal */
.bandeau-default {
    background: linear-gradient(180deg, var(--pro-bleu) 0%, var(--pro-bleu-mer) 100%) !important;
}

/* Mode admin / usurpation de profil */
.bandeau-admin {
    background: linear-gradient(180deg, var(--pro-violet) 0%, var(--pro-violet-clair) 100%) !important;
}

/* Bandeau aperçu profil non validé */
.bandeau-preview {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     10px 20px;
    background:  var(--pro-jaune-voile);
    border-left: 4px solid var(--pro-orange);
    color:       var(--pro-jaune-fonce);
    font-size:   0.85rem;
    font-weight: 500;
}


/* ══════════════════════════════════════════════════════════
   OWL CAROUSEL — photos du bandeau (21/09/2026)
   ──────────────────────────────────────────────────────────
   Seul carrousel Owl de la fiche. Les anciennes regles globales
   (reprises de consulter.php sans leurs !important) perdaient
   contre theme-elements.css (.nav-style-3, vers la ligne 4246) :
   fleches decalees sous la photo.
   Specificite (0,5,1) : passe devant nav-style-3 (0,4,0) et
   default.css:1544 (0,4,1) sans !important. La couleur blanche
   vient de .nav-color-light (!important du theme), non redeclaree.
   ══════════════════════════════════════════════════════════ */

/* Photo carree meme en carrousel : Owl impose width:100% et le
   theme une hauteur automatique, d'ou des photos de hauteurs
   differentes et un carrousel plus haut que la photo affichee. */
.vm-photo-wrap .owl-carousel .owl-item img.vm-profile-photo {
    width:        130px;
    height:       130px;
    max-width:    none;
    margin:       0 auto;
    object-fit:   cover;
    aspect-ratio: 1 / 1; /* voir .vm-profile-photo, HAUTEUR DU BANDEAU */
}

/* Marge basse de 20px posee par le theme sous tout .owl-carousel :
   elle allongeait le bandeau sous la photo (21/09/2026). */
.vm-photo-wrap .owl-carousel {
    margin-bottom: 0;
}

/* Calque des fleches : couvre exactement le carrousel */
.vm-photo-wrap .owl-carousel.nav-style-3 .owl-nav {
    position:       absolute;
    top:            0;
    right:          0;
    bottom:         0;
    left:           0;
    width:          auto;
    height:         auto;
    margin:         0;
    transform:      none;
    pointer-events: none;
}

/* Fleches centrees sur la hauteur de la photo, hors de la photo.
   44px de haut : cible tactile confortable. */
.vm-photo-wrap .owl-carousel.nav-style-3 .owl-nav button.owl-prev,
.vm-photo-wrap .owl-carousel.nav-style-3 .owl-nav button.owl-next {
    position:        absolute;
    top:             50%;
    width:           32px;
    height:          44px;
    margin:          -22px 0 0;
    padding:         0;
    transform:       none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    pointer-events:  auto;
}

.vm-photo-wrap .owl-carousel.nav-style-3 .owl-nav button.owl-prev { left: -40px; right: auto; }
.vm-photo-wrap .owl-carousel.nav-style-3 .owl-nav button.owl-next { right: -40px; left: auto; }

@media (min-width: 577px) {
    .vm-photo-wrap .owl-carousel .owl-item img.vm-profile-photo {
        width:  150px;
        height: 150px;
    }
}


/* ══════════════════════════════════════════════════════════
   COMPOSANTS GÉNÉRIQUES
   ══════════════════════════════════════════════════════════ */

/* Texte confort */
.text-confort {
    max-width:   950px;
    line-height: var(--pro-lh-texte);
}

/* Interligne unique des textes de la fiche (21/09/2026). Le theme fixe
   26px aux <p> et 24px aux <li>, en pixels : de 1,5 a 1,9 selon la taille
   du texte. Specificite (0,1,0) grace a :where() : passe devant le theme,
   et chaque composant qui fixe son propre interligne (prix, puces, titres
   de carte) reste maitre. */
.vm-profile-card :where(p, li),
.vm-infopro :where(p, li),
.vm-en-bref {
    line-height: var(--pro-lh-texte);
}


/* ══════════════════════════════════════════════════════════
   ANCRES AVEC OFFSET (header fixe)
   ──────────────────────────────────────────────────────────
   Les regles div:target / section:target (margin + padding de
   80px mobile, 190px desktop) sont retirees le 21/09/2026 :
   chaque clic sur un onglet inserait 160 a 380px de vide au-
   dessus de la section. Le decalage sous le header fixe est
   assure par scroll-margin-top (bloc "BARRE DE NAVIGATION
   ONGLETS PROFIL"). Ne pas les remettre.
   ══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   TITRES DE BLOCS PROFILS
   ══════════════════════════════════════════════════════════ */

.vm-section-title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    margin:          1rem 0;
    text-align:      center;
    flex-wrap:       wrap;
}

.vm-section-title img {
    width:      30px;
    height:     30px;
    flex:       0 0 30px;
    object-fit: contain; /* un PNG non carre n'est plus etire (21/09/2026) */
}

/* Entetes de section en <h2> (hierarchie SEO). Variante <p> retiree le
   21/09/2026 : plus aucune entete en <p>. !important : passe devant
   l'echelle clamp() de .main h2 declaree dans custom.css. */
.vm-section-title h2 {
    margin:         0 !important;
    line-height:    1.2;
    font-size:      1.2rem !important;
    letter-spacing: -0.5px;
    white-space:    normal;
    font-weight:    600;
}

@media (min-width: 768px) {
    .vm-section-title {
        gap:       14px;
        flex-wrap: nowrap;
    }

    .vm-section-title img {
        width:  40px;
        height: 40px;
        flex:   0 0 40px;
    }

    .vm-section-title h2 {
        font-size:      1.6rem !important;
        letter-spacing: normal;
        white-space:    nowrap;
    }
}


/* ══════════════════════════════════════════════════════════
   LIGNES DE CONTACT
   (alignement des pictos : bloc "LISTES AVEC ICÔNES")
   ══════════════════════════════════════════════════════════ */

/* Decalees sous leur titre comme les listes a pictos (21/09/2026) */
.vm-contact-line {
    min-width:    0;
    max-width:    none;
    padding-left: var(--vm-space-3);
}

.vm-contact-link {
    display:       inline-block;
    max-width:     260px; /* mobile : tronque les URLs longues */
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

@media (min-width: 768px) {
    .vm-contact-link { max-width: 100%; }
}


/* ══════════════════════════════════════════════════════════
   ÉTAPES (scroll horizontal mobile)
   ══════════════════════════════════════════════════════════ */

.vm-steps-scroll {
    display:                  flex;
    gap:                      14px;
    overflow-x:               auto;
    scroll-snap-type:         x mandatory;
    padding-bottom:           8px;
    -webkit-overflow-scrolling: touch;
}

.vm-step-card {
    flex:          0 0 280px;
    scroll-snap-align: start;
    background:    var(--pro-blanc);
    border:        1px solid var(--pro-voile-3);
    border-radius: 15px;
    padding:       12px;
}

@media (min-width: 768px) {
    .vm-steps-scroll { overflow-x: visible; }
    .vm-step-card    { flex: 1; }
}


/* ══════════════════════════════════════════════════════════
   NUAGE DE TAGS
   ══════════════════════════════════════════════════════════ */

.vm-cloud-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr); /* mobile : 2 colonnes */
    gap:                   12px;
}

@media (min-width: 576px) {
    .vm-cloud-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
    .vm-cloud-grid { grid-template-columns: repeat(5, 1fr); }
}

.vm-cloud-item {
    background-color: var(--pro-voile-3);
    border-radius:    15px;
    padding:          3px 10px;
    min-height:       40px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    text-align:       center;
    line-height:      1.2;
    max-width:        240px;
}

.vm-cloud-item p {
    margin:      0;
    font-size:   var(--pro-fs-texte); /* 0.875rem avant le 21/09/2026 */
    line-height: 1.3; /* etiquette : le theme imposait 26px au <p> */
}


/* ══════════════════════════════════════════════════════════
   LISTES AVEC ICÔNES
   ══════════════════════════════════════════════════════════ */

/* Alignement des pictos sur la PREMIERE ligne de texte (21/09/2026).
   align-items:center centrait le picto sur la ligne entiere : il flottait
   au-dessus du texte (Raleway pose ses lettres sous le milieu de la
   ligne) et descendait entre deux lignes quand le texte passait a la
   ligne. Desormais : haut de ligne + marge calculee.
   Milieu de la premiere ligne (interligne / 2) + 0.04em de centre
   optique des lettres. La marge se calcule sur la taille du texte : le
   picto reste aligne en text-2, en 0.75rem ou en titre. */
.vm-icon-line,
.vm-contact-line,
.vm-formation-title,
.vm-about-title {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    line-height: var(--pro-lh-texte);
}

.vm-icon-line {
    list-style:    none;
    margin-bottom: 4px;
}

.vm-icon-line > img,
.vm-icon-line > .vm-list-icon,
.vm-contact-line > .vm-list-icon,
.vm-formation-title > img,
.vm-formation-title > .vm-list-icon,
.vm-about-title > img {
    flex:       0 0 var(--pro-picto);
    width:      var(--pro-picto);
    height:     var(--pro-picto);
    margin-top: calc(var(--pro-lh-texte) * 0.5em + 0.04em - var(--pro-picto) / 2);
    object-fit: contain;
}

/* Mentions "Informations indicatives" et "Verification VanillaMilk" */
.vm-icon-line--note {
    --pro-picto:   25px;
    gap:           14px;
    margin-top:    var(--vm-space-6); /* 2rem, valeur du style en ligne retire */
    margin-bottom: 0;
}

/* Reseau pro, "Besoin du moment" (styles en ligne retires le 21/09/2026) */
.vm-icon-line--besoin {
    --pro-picto:  25px;
    gap:          10px;
    padding-left: var(--vm-space-3);
}

/* Deroulement d'une seance : picto de titre d'etape */
.vm-step-card .vm-icon-line {
    --pro-picto: 18px;
}

/* Listes a pictos (21/09/2026) : sans puce, decalees sous leur titre
   comme les listes a puces. Les utilitaires pl-* sont retires du HTML. */
.main ul.vm-liste-pictos,
ul.vm-liste-pictos {
    list-style:   none;
    padding-left: var(--vm-space-3);
}

/* Picto FontAwesome (modalites, disponibilites, honoraires, annulation,
   zone d'intervention) et repli des paiements et outils sans picto dedie. */
.vm-list-icon--fa {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       inherit; /* la marge de .vm-icon-line se calcule sur le texte */
    line-height:     1; /* sans lui, la hauteur de ligne du texte decentrait le glyphe */
    color:           var(--pro-bleu);
}

/* Glyphe a 75% du cadre : 15px pour un picto de 20px, comme avant */
.vm-list-icon--fa::before {
    font-size: calc(var(--pro-picto) * 0.75);
}

/* Bloc Accompagnement (21/09/2026) : deux piles independantes, meme ecart
   entre tous les blocs, titre et liste separes de 8px. */
.vm-accomp-grille {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--vm-space-5);
}

.vm-accomp-pile {
    display:        flex;
    flex-direction: column;
    gap:            var(--vm-space-5);
    min-width:      0;
}

.vm-accomp-bloc > strong {
    display:       block;
    margin-bottom: var(--vm-space-2);
}

@media (min-width: 577px) {
    .vm-accomp-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vm-accomp-pile:only-child {
        grid-column: 1 / -1;
    }
}


/* ══════════════════════════════════════════════════════════
   TITRES FORMATION & À PROPOS
   ══════════════════════════════════════════════════════════ */

/* Alignement et taille des pictos : bloc "LISTES AVEC ICÔNES" */
.vm-formation-title,
.vm-about-title {
    --pro-picto: 22px;
    gap:         10px;
}


/* ══════════════════════════════════════════════════════════
   DIPLÔMES ET CERTIFICATIONS (21/09/2026)
   ──────────────────────────────────────────────────────────
   Deux groupes distincts : formation initiale de sante (filet
   bleu) et diplomes / certifications en allaitement (filet
   turquoise). Empiles a toutes les largeurs : cote a cote, le
   groupe sante, court, laissait un grand vide.
   ══════════════════════════════════════════════════════════ */

.vm-diplomes {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--vm-space-3);
    margin-top:            var(--vm-space-3);
}

.vm-diplomes__groupe {
    padding:       var(--vm-space-3) var(--vm-space-4);
    border-left:   4px solid var(--pro-bleu);
    border-radius: 0 var(--vm-radius-md) var(--vm-radius-md) 0;
    background:    var(--pro-voile-2);
}

.vm-diplomes__groupe--allaitement {
    border-left-color: var(--pro-turquoise);
    background:        var(--pro-turquoise-pale);
}

.vm-diplomes__item + .vm-diplomes__item {
    margin-top: var(--vm-space-3);
}


/* ══════════════════════════════════════════════════════════
   CARTE PROFIL
   ══════════════════════════════════════════════════════════ */

/* Les cartes sont desormais enveloppees dans un .col-12 dans le PHP :
   c'est lui qui fournit la gouttiere laterale (15px). Les marges de 12px
   compensaient l'absence de colonne et s'additionneraient aujourd'hui.
   width:auto est conserve : dans un .col-12 il vaut 100%. */
.vm-profile-card {
    width:        auto;
    margin-left:  0;
    margin-right: 0;
}

/* Filet de securite : si une carte est ajoutee un jour sans son .col-12,
   elle reste en pleine largeur au lieu de se reduire a son contenu. */
.row > .vm-profile-card {
    flex:         0 0 calc(100% - 30px);
    max-width:    calc(100% - 30px);
    margin-left:  15px;
    margin-right: 15px;
}


/* ══════════════════════════════════════════════════════════
   BLOC ACTIONS DU HEADER PROFIL
   ══════════════════════════════════════════════════════════ */

.vm-header-actions {
    display:         flex;
    align-items:     center;
    gap:             20px;
    flex-wrap:       nowrap;
    width:           100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .vm-header-actions { gap: 30px; }
}

/* Bureau (21/09/2026) : le texte du bandeau est aligne a gauche des 992px
   (.text-lg-left, grille Bootstrap du bandeau) ; le CTA suit, au lieu de
   rester centre avec un vide a sa gauche. Bascule calee sur col-lg, pas un
   breakpoint de composant. */
@media (min-width: 992px) {
    .vm-header-actions { justify-content: flex-start; }
}

/* Lieux d'exercice du bandeau : toujours sur une ligne (21/09/2026). Le PHP
   limite deja a 3 lieux et 36 caracteres ; l'ellipse n'est qu'un filet. */
.vm-header-atout--ligne {
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* CTA principal — bouton contour sur bandeau bleu. */
.vm-header-main-cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           min(250px, 90vw);
    min-height:      44px;
    padding:         8px 10px;
    background:      transparent;
    border:          1px solid var(--pro-blanc);
    border-radius:   0.25rem;
    color:           var(--pro-blanc);
    text-decoration: none;
    font-size:       0.9rem;
    font-weight:     600;
    line-height:     1.3;
    text-align:      center;
    white-space:     normal;
    word-break:      normal;
    transition:      transform 0.2s ease, box-shadow 0.2s ease,
                     background-color 0.2s ease, color 0.2s ease;
}

@media (max-width: 390px) {
    .vm-header-main-cta {
        font-size: 0.82rem;
        padding:   7px 8px;
    }
}

@media (min-width: 768px) {
    .vm-header-main-cta {
        width:      350px;
        min-height: 48px;
        padding:    10px 14px;
        font-size:  1rem;
        line-height: 1.1;
    }
}

/* Survol : inversion contour → plein, complétée par le soulèvement
   des .btn-* du système. */
.vm-header-main-cta:hover,
.vm-header-main-cta:focus-visible {
    background:      var(--pro-blanc);
    border-color:    var(--pro-blanc);
    color:           var(--pro-bleu);
    text-decoration: none;
    transform:       translateY(-2px);
    box-shadow:      0 6px 16px rgb(var(--pro-ombre-rgb) / .32);
}

/* Indicateur de focus clavier explicite (RGAA).
   Turquoise : lisible aussi bien sur le bandeau bleu que sur le
   bouton une fois inversé en blanc. */
.vm-header-main-cta:focus-visible {
    outline:        3px solid var(--pro-turquoise);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .vm-header-main-cta { transition: none; }
    .vm-header-main-cta:hover,
    .vm-header-main-cta:focus-visible { transform: none; }
}

/* Icônes du header */
.vm-header-icon-action {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            0 0 auto;
}

.vm-header-icon-action img {
    width:      30px;
    height:     30px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.vm-header-icon-action:hover img { transform: scale(1.05); }


/* ══════════════════════════════════════════════════════════
   LIEUX DE CONSULTATION — cartes d'adresse (21/09/2026)
   ──────────────────────────────────────────────────────────
   Une carte par lieu : titre, adresse, lien carte, bouton copier,
   puis infos pratiques et accueil des familles.
   Mobile : une colonne. Des 577px : deux cartes par ligne ; une
   carte seule prend toute la largeur et range alors ses deux
   blocs d'infos cote a cote.
   ══════════════════════════════════════════════════════════ */

.vm-adresses {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--vm-space-5); /* --vm-space-3 avant le 21/09/2026 : place des pastilles */
    margin-top:            var(--vm-space-4);
}

/* Professionnels : respiration sous "Lieux de consultation proposes", la
   pastille deborde de 11px au-dessus de la carte (21/09/2026) */
.vm-adresses--pastilles {
    margin-top: var(--vm-space-6);
}

.vm-adresses:empty { display: none; }

.vm-adresse-card {
    position:      relative; /* repere de la pastille */
    min-width:     0;
    padding:       var(--vm-space-3);
    border:        1px solid var(--pro-turquoise);
    border-radius: 12px;
    background:    var(--pro-blanc);
}

/* Pastille Principal / #2 / #3 posee a cheval sur le bord haut (21/09/2026) */
.vm-adresse-card--pastille {
    padding-top: var(--vm-space-4);
}

/* Les trois pastilles en bleu plein (21/09/2026) */
.vm-adresse-card__pastille {
    position:      absolute;
    top:           -11px;
    left:          var(--vm-space-3);
    padding:       2px 10px;
    border:        1px solid var(--pro-bleu);
    border-radius: var(--vm-radius-pill);
    background:    var(--pro-bleu);
    color:         var(--pro-blanc); /* 6,8:1 */
    font-size:     0.75rem;
    font-weight:   700;
    line-height:   1.4;
}

.vm-adresse-card__ligne {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             var(--vm-space-2);
}

.vm-adresse-card__texte {
    min-width:     0;
    overflow-wrap: anywhere;
}

.vm-adresse-card__carte {
    font-size: var(--pro-fs-texte);
}

/* Rue non renseignee : ligne explicative sous la ville (21/09/2026) */
.vm-adresse-card__sans-rue {
    font-size:  0.750rem;
    font-style: italic;
}

/* Jours de presence : remplace text-1 (0,8em du theme) */
.vm-adresse-card__jours {
    font-size: var(--pro-fs-texte); /* 0.875rem avant le 21/09/2026 */
}

.vm-adresse-card__carte i {
    margin-right: 6px;
    color:        var(--pro-turquoise);
}

/* Bouton copier : cible de 44px, le picto garde ses 20px */
.vm-adresse-card__copier {
    flex:            0 0 44px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    margin:          -8px -8px 0 0;
    padding:         0;
    border:          0;
    border-radius:   8px;
    background:      none;
    cursor:          pointer;
}

.vm-adresse-card__copier:focus-visible {
    outline:        3px solid var(--pro-turquoise);
    outline-offset: 2px;
}

/* Infos dans la carte : filet pointille au lieu d'un second cadre */
.vm-address-info-box {
    margin-top:            var(--vm-space-3);
    padding-top:           var(--vm-space-3);
    border-top:            1px dashed var(--pro-turquoise);
}

.vm-adresse-card__infos {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--vm-space-2);
}

/* Sous-titres des infos (21/09/2026) : plus petits que le titre du lieu */
.vm-adresse-card__label {
    margin:         0 0 var(--vm-space-2);
    font-size:      0.8rem;
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--pro-bleu);
}

/* Lignes decalees sous leur sous-titre, comme les listes, texte et
   pictos reduits (21/09/2026) */
.vm-adresse-card__infos .vm-icon-line {
    --pro-picto:  16px;
    padding-left: var(--vm-space-3);
    font-size:    0.75rem;
}

@media (min-width: 577px) {
    .vm-adresses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vm-adresse-card:only-child {
        grid-column: 1 / -1;
    }

    .vm-adresse-card:only-child .vm-adresse-card__infos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ══════════════════════════════════════════════════════════
   BARRE DE NAVIGATION ONGLETS PROFIL
   ══════════════════════════════════════════════════════════ */

/* Offset pour les ancres (évite le masquage par le header fixe) */
#haut,
#presentation,
#accompagnement,
#formations,
#contact,
#prestapro,
#reseaupro,
#evenements, /* ajoute le 22/09/2026 (onglet Evenements) */
#infopro {
    scroll-margin-top: calc(var(--pro-header-height) + var(--pro-tab-nav-height) + 8px);
}

/* Reserve la hauteur de la barre d'onglets fixe au-dessus du hero.
   PADDING et non MARGIN : la marge etait exterieure a la section, elle
   laissait donc apparaitre le fond blanc de la page entre le header et
   le hero (bande blanche de 52px). En padding, c'est le degrade du hero
   (.bandeau-default) qui remplit l'espace, et la barre d'onglets se pose
   dessus sans creer de vide.
   #haut porte .page-header : ces deux valeurs passent devant celles du
   bloc "HAUTEUR DU BANDEAU SUPERIEUR" (1,0,0 contre 0,2,0). */
#haut {
    margin-top:    0 !important;
    margin-bottom: 0 !important; /* remplace .mb-0, retire du HTML le 21/09/2026 : .page-header porte une marge basse dans le theme */
    padding-top:   var(--pro-tab-nav-height) !important; /* + 8px avant le 21/09/2026 */
}

/* Barre fixe.
   Refonte du 21/09/2026 : la barre blanche se confondait avec le fond
   blanc de la page. Ombre portee sous la barre, onglets pleins en casse
   normale, onglet actif en bleu plein (blanc sur --vm-bleu : 6,8:1). */
.vm-tab-nav {
    /* --pro-nav-top : sous le header par defaut ; le JS de la page la
       redefinit sur la barre quand un bandeau d'information (.vm-banner-top)
       ou le bandeau admin s'affiche sous le header (21/09/2026). */
    --pro-nav-top:    var(--pro-header-height);
    position:         fixed;
    top:              var(--pro-nav-top);
    left:             0;
    right:            0;
    z-index:          1050;
    height:           var(--pro-tab-nav-height);
    background-color: var(--pro-blanc);
    border-bottom:    1px solid var(--pro-voile-3);
    box-shadow:       0 3px 10px rgb(var(--pro-ombre-rgb) / .16);
    display:          flex;
    align-items:      center;
    gap:              8px;
    padding:          0 12px;
}

/* Nom de l'acteur */
.vm-tab-nav__name {
    flex:          0 0 auto;
    font-size:     0.75rem;
    font-weight:   700;
    color:         var(--pro-bleu-fonce);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     140px;
    padding-right: 8px;
    border-right:  1px solid var(--pro-voile-5); /* remplace ::after (21/09/2026) */
}

/* Zone des onglets */
.vm-tab-nav__inner {
    display:                    flex;
    flex:                       1;
    height:                     100%;
    overflow-x:                 auto;
    scroll-snap-type:           x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
    align-items:                center;
    gap:                        6px;
    padding:                    4px 0;
}

.vm-tab-nav__inner::-webkit-scrollbar { display: none; }

/* Pills. no-skin et vm-no-underline sont poses dans le HTML : sans eux,
   le skin du theme imposait son bleu au survol et custom.css soulignait. */
.vm-tab-nav__item {
    flex:              0 0 auto;
    scroll-snap-align: start;
    display:           inline-flex;
    align-items:       center;
    min-height:        36px; /* cible tactile */
    padding:           5px 14px;
    border-radius:     var(--vm-radius-pill);
    border:            1px solid var(--pro-voile-4);
    background-color:  var(--pro-voile-2);
    color:             var(--pro-bleu);
    font-size:         0.875rem;
    font-weight:       600;
    line-height:       1.2;
    text-decoration:   none;
    white-space:       nowrap;
    transition:        background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vm-tab-nav__item:hover {
    background-color: var(--pro-voile-3);
    border-color:     var(--pro-bleu);
    color:            var(--pro-bleu-fonce);
    text-decoration:  none;
}

.vm-tab-nav__item.is-active,
.vm-tab-nav__item.is-active:hover {
    background-color: var(--pro-bleu);
    border-color:     var(--pro-bleu);
    color:            var(--pro-blanc);
}

/* Mobile (21/09/2026) : le nom n'apparait qu'une fois celui du bandeau
   sorti de l'ecran (classe is-nom-visible posee par le JS), sur deux
   lignes au plus, pour laisser la largeur aux onglets. */
@media (max-width: 576px) {
    .vm-tab-nav__name {
        display:            -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp:         2;
        max-width:          92px;
        font-size:          0.7rem;
        line-height:        1.15;
        white-space:        normal;
    }

    .vm-tab-nav:not(.is-nom-visible) .vm-tab-nav__name {
        display: none;
    }
}

@media (min-width: 768px) {
    .vm-tab-nav {
        justify-content: center;
        padding:         0 20px;
    }

    .vm-tab-nav__name {
        max-width: 200px;
        font-size: 0.85rem;
    }

    .vm-tab-nav__inner {
        flex:       0 0 auto;
        overflow-x: visible;
        padding:    4px 0;
        gap:        8px;
    }

    .vm-tab-nav__item { padding: 6px 16px; }
}


/* ══════════════════════════════════════════════════════════
   INDICATEUR DE SCROLL HORIZONTAL (mobile uniquement)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .vm-tab-nav::after {
        content:         '›';
        position:        absolute;
        right:           0;
        top:             0;
        bottom:          0;
        width:           36px;
        display:         flex;
        align-items:     center;
        justify-content: center;
        background:      linear-gradient(to right, transparent, var(--pro-blanc) 55%);
        color:           var(--pro-bleu);
        font-size:       1.4rem;
        font-weight:     700;
        pointer-events:  none;
        opacity:         1;
        transition:      opacity 0.25s ease;
    }

    .vm-tab-nav.is-scroll-end::after { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════
   ZONE B — Badge inline certification (Formations)
   ══════════════════════════════════════════════════════════ */

.vm-inline-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    font-size:       0.72rem;
    font-weight:     500;
    padding:         2px 9px;
    border-radius:   20px;
    background:      var(--pro-voile-3);
    color:           var(--pro-bleu);
    text-decoration: none;
    margin-left:     8px;
    vertical-align:  middle;
    white-space:     nowrap;
    transition:      background 0.15s ease;
}

.vm-inline-badge:hover {
    background:      var(--pro-voile-4);
    color:           var(--pro-bleu-fonce);
    text-decoration: none;
}

.vm-inline-badge i { font-size: 11px; }


/* ══════════════════════════════════════════════════════════
   ZONE C — Bloc "Continuer votre recherche"
   ══════════════════════════════════════════════════════════ */

.vm-zone-c {
    border: 0.5px solid var(--pro-voile-3);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    background: var(--pro-voile-1);
}

.vm-zone-c__title {
    font-size: 0.78rem;
    line-height: 1.3; /* le theme imposait 26px au <p> */
    font-weight: 600;
    color: var(--pro-bleu);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vm-zone-c__title i { font-size: 14px; opacity: 0.8; }

.vm-zone-c__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.vm-zone-c__card {
    display:          flex;
    flex-direction:   column;
    gap:              4px;
    padding:          .65rem .85rem;
    border-radius:    10px;
    border:           0.5px solid var(--pro-voile-4);
    background:       var(--pro-blanc);
    text-decoration:  none;
    transition:       border-color 0.15s ease, background 0.15s ease;
}

.vm-zone-c__card:hover {
    border-color:    var(--pro-bleu);
    background:      var(--pro-voile-3);
    text-decoration: none;
}

.vm-zone-c__card i {
    font-size:  16px;
    color:      var(--pro-bleu);
    margin-bottom: 2px;
}

.vm-zone-c__card strong {
    font-size:   0.8rem;
    font-weight: 600;
    color:       var(--pro-bleu-fonce);
    line-height: 1.3;
}

.vm-zone-c__card span {
    font-size:   0.72rem;
    color:       var(--pro-bleu-doux);
    line-height: 1.3;
}

/* Card mise en avant */
.vm-zone-c__card--highlight {
    border: 1.5px solid var(--pro-bleu);
    background: var(--pro-voile-2);
}

/* ══════════════════════════════════════════════════════════
   AJOUTS — refonte consulterSH.php (aout 2026)
   ══════════════════════════════════════════════════════════ */

/* Photos de profil : passees de background-image a <img> (indexables,
   avec alt et dimensions explicites, pas de CLS).
   object-fit reproduit le comportement de background-size:cover. */
/* Largeur et hauteur : bloc "HAUTEUR DU BANDEAU SUPERIEUR" (les 160px
   declares ici etaient toujours ecrases, retires le 21/09/2026). */
.vm-profile-photo {
    max-width:       100%;
    border-radius:   10%;
    object-fit:      cover;
    object-position: center center;
}

/* Points cles du professionnel dans le bandeau haut.
   Ce bloc etait un <h2> contenant un <div class="row"> : HTML invalide,
   le navigateur fermait le titre prematurement. Passe en <ul class="row">. */
.main ul.vm-header-atouts {
	padding-left: 0;
	list-style: none;
	color: var(--pro-blanc);
}

.vm-header-atouts > li { list-style: none; }

/* Titres d'adresse et de zone d'intervention : <strong> -> <h3>
   (hierarchie correcte sous le <h2> "Contact & acces", rendu inchange) */
.main h3.vm-adresse-titre,
h3.vm-adresse-titre {
    display:     block;
    font-size:   1.1rem !important; /* inherit avant le 21/09/2026 */
    font-weight: 700;
    line-height: 1.3;
}

/* Titres des blocs "En savoir plus" : <strong> majuscules -> <h2>.
   La mise en majuscules passe en CSS pour que Google lise le texte normal. */
.main h2.vm-ensavoirplus-titre,
h2.vm-ensavoirplus-titre {
    font-size:      inherit !important;
    font-weight:    700;
    line-height:    inherit;
    text-transform: uppercase;
    margin:         0 0 1rem;
}

/* Declencheurs de modale : les <a href=""> sont devenus des <button>
   (plus de rechargement si le JS echoue, plus de lien auto-referent
   remonte par les crawlers). Ces regles leur rendent l'apparence d'un lien. */
.vm-lien-modal {
    padding:    0;
    border:     0;
    background: none;
    font:       inherit;
    color:      inherit;
    cursor:     pointer;
    text-align: inherit;
}

/* AUDIT 21/09/2026 : .vm-modal-close n'est plus utilise par consulterSH.php
   (modales retirees). Conserve en commentaire, a supprimer si aucune autre
   page ne charge profile.css.
.vm-modal-close {
    padding:     0;
    border:      0;
    background:  none;
    line-height: 1;
    cursor:      pointer;
}
.vm-modal-close:focus-visible : retire du selecteur ci-dessous */

.vm-lien-modal:focus-visible {
    outline:        2px solid var(--pro-turquoise);
    outline-offset: 2px;
}

/* .vm-encart-vide retire le 22/09/2026 : sans evenement, le bloc
   Evenements est masque (plus de message "aucun evenement"). */

/* ══════════════════════════════════════════════════════════
   HAUTEUR DU BANDEAU SUPERIEUR
   ──────────────────────────────────────────────────────────
   Mesure avant correctif : 290px desktop / 595px mobile.
   La hauteur est produite par le contenu empile, pas par une
   valeur fixe. Les fleches Owl sont en position:absolute et
   n'y contribuent pas.
   ══════════════════════════════════════════════════════════ */

/* Mobile-first : photo reduite, c'est le plus gros levier.
   130px reste largement lisible et rend ~30px. */
/* aspect-ratio (21/09/2026) : sur mobile, le garde-fou de custom.css
   (.main img:not([class*="vm-img"]):not(.vm-picto), height:auto !important)
   rendait a la photo sa hauteur naturelle, d'ou des portraits de 130 x 190px
   et des fleches decentrees. Le ratio impose le carre sans !important. */
.vm-profile-photo {
    width:        130px;
    height:       130px;
    aspect-ratio: 1 / 1;
}

/* Le conteneur du carrousel est en style inline width:160px dans
   consulterSH.php : il faut l'accompagner, sinon la photo retrecit
   dans un cadre reste large. Voir note ci-dessous. */
.vm-photo-wrap {
    width:  130px !important;
    margin: 0 auto 14px; /* 14px : le pointeur deborde de 14px sous la photo */
    position: relative;
}

/* Pointeur EXPERT / AIDANT / lactarium... pose sur le coin de la photo
   (style en ligne retire le 21/09/2026) */
.vm-photo-wrap__pin {
    position: absolute;
    right:    -12px;
    bottom:   -14px;
    z-index:  5;
    width:    48px;
    height:   auto;
}

/* Neutralisation des paddings du theme sur cette section precise.
   page-header porte des marges parasites documentees. padding-top et
   margin-top retires le 21/09/2026 : #haut, plus specifique, les
   ecrasait (ils n'ont jamais pris effet). */
.page-header.bandeau-default,
.page-header.bandeau-admin {
    padding-bottom: 0 !important;
}

/* Resserrement des espacements internes du bandeau */
.page-header.bandeau-default > .container > .row,
.page-header.bandeau-admin  > .container > .row {
    margin-top:     8px !important; /* 12px avant le 21/09/2026 */
    padding-bottom: 4px !important;
}

/* Nom du profil (21/09/2026). Remplace .policeTitre et son style en ligne :
   la taille de .policeTitre (!important, custom.css) plafonnait le nom a
   environ 24px sur mobile. Specificite (0,2,1) : passe devant .main h1 et
   .page-header h1 (theme) sans !important.
   Le pointeur pose sous la photo est degage par la marge de .vm-photo-wrap. */
.main h1.vm-hero-nom,
h1.vm-hero-nom {
    font-family:    var(--vm-font-titre);
    font-size:      clamp(2.25rem, 1.75rem + 2vw, 2.75rem);
    font-weight:    400;
    line-height:    1.15;
    letter-spacing: normal;
    margin:         4px 0 6px;
}

/* Desktop : la photo retrouve sa taille, le texte partage sa ligne */
@media (min-width: 577px) {

    .vm-profile-photo {
        width:  150px;
        height: 150px;
    }

    .vm-photo-wrap { width: 150px !important; }

}

/* ============================================================================
   PRESTATIONS DE LA FICHE PROFIL (section #prestapro)
   ============================================================================
   Utilise par : consulterSH.php, section #prestapro

   Prefixe .vm-p* volontairement distinct de .vm-rcard* (pro-prestation.css) :
   design identique, noms disjoints. Chaque classe n'a ainsi qu'un seul fichier
   proprietaire, conformement a la convention du projet.

   Conventions respectees :
     - mobile-first, breakpoint unique 576px (bascule desktop en 577px)
     - aucun hex en dur hors #ffffff
     - aucun fallback dans var() : un token manquant doit casser visiblement
     - :focus-visible et non :focus, toujours scope
     - transition: liste explicite de proprietes, jamais `all`
     - prefers-reduced-motion couvert des qu'un transform est pose
   ============================================================================ */

/* ══ BARRE DE FILTRES ═══════════════════════════════════════════════════════ */

.vm-pfilters {
	background: var(--vm-bleu-pale);
	border: 1px solid var(--vm-turquoise);
	border-radius: 12px;
	padding: var(--vm-space-3);
	margin-bottom: var(--vm-space-5); /* --vm-space-4 avant le 21/09/2026 */
}

.vm-pfilters__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vm-space-3); /* --vm-space-2 avant le 21/09/2026 */
}

/* Mobile : filtres replies derriere un bouton (21/09/2026).
   576px et 577px : bornes du breakpoint unique (A5). */
.vm-pfilters__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vm-space-2);
	width: 100%;
	min-height: 44px;
	padding: 6px 12px;
	border: 1px solid var(--vm-turquoise);
	border-radius: 8px;
	background: #ffffff;
	color: var(--vm-bleu);
	font-size: var(--pro-fs-texte); /* .95rem avant le 21/09/2026 */
	font-weight: var(--vm-fw-semi);
	cursor: pointer;
}

@media (max-width: 576px) {
	.vm-pfilters:not(.is-ouvert) .vm-pfilters__grid {
		display: none;
	}

	.vm-pfilters.is-ouvert .vm-pfilters__toggle {
		margin-bottom: var(--vm-space-2);
	}
}

@media (min-width: 577px) {
	.vm-pfilters__toggle {
		display: none;
	}
}

/* ══ EN BREF ET SYNTHESE (21/09/2026) ═══════════════════════════════════════
   Paragraphes propres a chaque fiche, construits depuis les donnees.
   .vm-en-bref porte aussi .vm-speakable (cible du JSON-LD speakable). */

.vm-en-bref {
	margin: var(--vm-space-4) 0 var(--vm-space-2);
	padding: var(--vm-space-3) var(--vm-space-4);
	border-left: 4px solid var(--vm-turquoise);
	border-radius: 0 12px 12px 0;
	background: var(--vm-bleu-pale);
	color: var(--vm-bleu);
	font-size: var(--pro-fs-texte); /* 0.9375rem avant le 21/09/2026 */
}

.vm-presta-synthese {
	margin: 0 0 var(--vm-space-4);
	color: var(--vm-bleu);
	font-size: var(--pro-fs-texte); /* .95rem avant le 21/09/2026 */
	text-align: center;
}

.vm-pfilters__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.vm-pfilters__field label {
	font-size: .8rem;
	font-weight: var(--vm-fw-semi);
	color: var(--vm-bleu);
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0;
}

.vm-pfilters__field select {
	width: 100%;
	min-height: 44px;              /* cible tactile confortable */
	padding: 6px 10px;
	border: 1px solid var(--vm-turquoise);
	border-radius: 8px;
	background: #ffffff;
	color: var(--vm-bleu);
	font-size: 1rem; /* .95rem avant le 21/09/2026 : sous 16px, iOS zoome la page a l'ouverture du menu */
	line-height: 1.3;
	cursor: pointer;
}

.vm-pfilters :focus-visible {
	outline: 3px solid var(--vm-turquoise);
	outline-offset: 2px;
}

.vm-pfilters__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vm-space-2);
	margin: var(--vm-space-2) 0 0;
}

.vm-pfilters__count {
	font-weight: 700;
	color: var(--vm-bleu);
	font-size: var(--pro-fs-texte); /* .95rem avant le 21/09/2026 */
}

.vm-pfilters__reset {
	border: 0;
	background: none;
	padding: 4px 0;
	color: var(--vm-bleu);
	font-size: .9rem;
	text-decoration: underline;
	cursor: pointer;
}

.vm-pfilters__reset:hover {
	color: var(--vm-rose);
}

/* ══ MESSAGE "AUCUN RESULTAT" ═══════════════════════════════════════════════ */

.vm-presta-vide {
	text-align: center;
	font-weight: 700;
	color: var(--vm-bleu);
	padding: var(--vm-space-4) var(--vm-space-2);
	margin: 0;
}

/* ══ GROUPE THEMATIQUE ══════════════════════════════════════════════════════ */

.vm-pgroup {
	margin-bottom: var(--vm-space-6); /* --vm-space-5 avant le 21/09/2026 */
}

.vm-pgroup:last-child {
	margin-bottom: 0;
}

/* .main h3.vm-pgroup__titre (21/09/2026) : .main h3 (custom.css) imposait
   son echelle clamp() au titre, et donc au picto qui en herite. */
.vm-pgroup__titre,
.main h3.vm-pgroup__titre {
	display: flex;
	align-items: center;
	gap: var(--vm-space-2);
	margin: 0 0 var(--vm-space-3);
	padding-bottom: 8px;
	border-bottom: 2px solid var(--vm-turquoise);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--vm-bleu);
	line-height: 1.25;
}

/* Vignette de la thematique (21/09/2026) : remplace l'image repetee sur
   chaque carte. aspect-ratio : carree meme sous le garde-fou mobile de
   custom.css (height:auto !important). */
.vm-pgroup__img {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
}

.vm-pgroup__nom {
	min-width: 0;
}

.vm-pgroup__count {
	margin-left: auto;
	flex: 0 0 auto;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	border-radius: 13px;
	background: var(--vm-turquoise);
	color: #ffffff;
	font-size: .8rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ══ GRILLE DE CARTES ═══════════════════════════════════════════════════════ */

.vm-pcards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vm-space-4); /* --vm-space-3 avant le 21/09/2026 */
}

/* ══ CARTE PRESTATION ═══════════════════════════════════════════════════════ */

.vm-pcard {
	display: flex;
	flex-direction: column;
	gap: var(--vm-space-2);
	background: #ffffff;
	border: 1px solid var(--vm-turquoise);
	border-radius: 15px;
	padding: var(--vm-space-3);
	transition: box-shadow .2s ease, transform .2s ease;
}

.vm-pcard:hover {
	box-shadow: 0 6px 18px rgb(var(--vm-ombre-rgb) / .14);
	transform: translateY(-2px);
}

/* Le filtre JS pose [hidden] : sans !important, display:flex l'emporterait
   sur la valeur par defaut du navigateur pour [hidden]. */
.vm-pcard[hidden],
.vm-pgroup[hidden] {
	display: none !important;
}

/* ── Corps ──────────────────────────────────────────────────────────────── */

.vm-pcard__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* 1rem / 1.05rem (21/09/2026) : nettement sous le titre de thematique */
.vm-pcard__titre,
.main h4.vm-pcard__titre {
	margin: 0 0 var(--vm-space-2);
	font-size: 1rem;
	font-weight: 700;
	color: var(--vm-bleu);
	line-height: 1.3;
}

.vm-pcard__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 var(--vm-space-2);
}

.vm-pchip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--vm-bleu-pale);
	color: var(--vm-bleu);
	font-size: .8rem;
	line-height: 1.4;
	white-space: nowrap;
}

.vm-pchip > i {
	font-size: .85em;
}

.vm-pchip--lieu {
	background: var(--vm-turquoise-pale);
}

.vm-pchip--collectif {
	background: var(--vm-jaune-pale);
}

/* ── Liens secondaires (description / partage) ──────────────────────────── */

.vm-pcard__liens {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vm-space-3);
	margin: 0;
}

.vm-pcard__lien {
	border: 0;
	background: none;
	padding: 2px 0;
	color: var(--vm-bleu);
	font-size: var(--pro-fs-texte); /* .88rem avant le 21/09/2026 */
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vm-pcard__lien > span {
	text-decoration: underline;
}

.vm-pcard__lien:hover {
	color: var(--vm-rose);
}

.vm-pcard :focus-visible {
	outline: 3px solid var(--vm-turquoise);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Chevron d'etat sur le toggle de description */
.vm-pcard__toggle > i {
	transition: transform .2s ease;
}

.vm-pcard__toggle[aria-expanded="true"] > i {
	transform: rotate(90deg);
}

.vm-pcard__desc {
	margin-top: var(--vm-space-2);
	padding: var(--vm-space-2) var(--vm-space-3);
	border-left: 3px solid var(--vm-turquoise);
	background: var(--vm-bleu-pale);
	border-radius: 0 8px 8px 0;
	font-size: var(--pro-fs-texte); /* .88rem / 1.45 avant le 21/09/2026 */
	color: var(--vm-bleu);
}

/* Paragraphes produits par vmDescriptionPresta() (21/09/2026) :
   un demi-interligne entre deux paragraphes, rien apres le dernier. */
.vm-pcard__desc p {
	margin: 0 0 .5em;
}

.vm-pcard__desc p:last-child {
	margin-bottom: 0;
}

/* ── Colonne d'action (prix + CTA) ──────────────────────────────────────── */

.vm-pcard__action {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding-top: var(--vm-space-2);
	border-top: 1px dashed var(--vm-turquoise);
}

.vm-pcard__prix {
	margin: 0;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--vm-bleu);
	line-height: 1.2;
}

.vm-pcard__prix small {
	font-size: .6em;
	font-weight: 400;
}

/* Les CTA du systeme VM font 1.25rem : trop lourd dans une carte.
   profile.css charge apres custom.css, la reduction passe sans !important. */
.vm-pcard__cta {
	font-size: 1rem;
	padding: 10px 16px;
	text-align: center;
	white-space: normal;
	border-radius: 999px;
}

/* Variante secondaire : contour turquoise sur fond blanc.
   La classe .btn est presente dans le HTML a cote de .vm-pcard__cta--sec :
   elle est exclue par le selecteur de survol du skin du theme, qui imposerait
   sinon son bleu au survol. */
.vm-pcard__cta--sec {
	background: #ffffff;
	border: 2px solid var(--vm-turquoise);
	color: var(--vm-bleu);
	font-weight: 600;
}

.vm-pcard__cta--sec:hover,
.vm-pcard__cta--sec:focus-visible {
	background: var(--vm-turquoise);
	color: #ffffff;
}

.vm-pcard__plus {
	text-align: center;
	font-size: var(--pro-fs-texte); /* .88rem avant le 21/09/2026 */
	color: var(--vm-bleu);
}

/* ══ DESKTOP (577px et plus) ════════════════════════════════════════════════ */

@media (min-width: 577px) {

	.vm-pfilters__grid {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: var(--vm-space-3);
	}

	.vm-pgroup__titre,
	.main h3.vm-pgroup__titre {
		font-size: 1.25rem;
	}

	.vm-pgroup__img {
		flex-basis: 52px;
		width: 52px;
		height: 52px;
	}

	/* La carte passe en 2 colonnes : corps | actions (visuel retire le
	   21/09/2026, remplace par la vignette de la thematique) */
	.vm-pcard {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--vm-space-3);
		padding: var(--vm-space-3) var(--vm-space-4);
	}

	.vm-pcard__action {
		width: 230px;
		padding-top: 0;
		border-top: 0;
		border-left: 1px dashed var(--vm-turquoise);
		padding-left: var(--vm-space-3);
		align-self: stretch;
		justify-content: center;
	}

	.vm-pcard__titre,
	.main h4.vm-pcard__titre {
		font-size: 1.05rem;
	}
}

/* ══ ACCESSIBILITE — animations reduites ════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

	.vm-pcard,
	.vm-pcard__toggle > i {
		transition: none;
	}

	.vm-pcard:hover {
		transform: none;
	}
}

/* Titre de carte de prestation lié à sa page (25/09/2026). */
.vm-pcard .vm-pcard__titre a.vm-pcard__link { color: inherit; text-decoration: none; }
.vm-pcard .vm-pcard__titre a.vm-pcard__link:hover,
.vm-pcard .vm-pcard__titre a.vm-pcard__link:focus-visible { text-decoration: underline; }


/* ══ BLOC "BIEN CHOISIR SON PROFESSIONNEL" (21/09/2026) ═════════════════════
   Fin de fiche des professionnels (#infopro). Accordeons : .vm-toggle et
   .vm-toggle-body, proprietaire custom.css. */

.vm-infopro {
	padding: var(--vm-space-4) 0 var(--vm-space-5);
	color: var(--vm-bleu);
}

/* Titre long : le nowrap desktop de .vm-section-title h2 le faisait deborder */
.vm-infopro .vm-section-title h2 {
	white-space: normal;
}

.vm-infopro__intro {
	margin: 0 0 var(--vm-space-4);
}

/* Interligne : bloc "Interligne unique" (1.55 avant le 21/09/2026).
   Specificite (0,2,1) : passe devant .vm-toggle-body p de custom.css. */
.vm-infopro .vm-toggle-body p {
	line-height: var(--pro-lh-texte);
}

.vm-infopro .vm-toggle-body p:last-child {
	margin-bottom: 0;
}

.main ul.vm-infopro__categories {
	list-style: none;
	padding-left: 0;
	margin: 0 0 var(--vm-space-3);
}

.vm-infopro__categories li {
	display: flex;
	align-items: flex-start;
	gap: var(--vm-space-2);
	margin-bottom: var(--vm-space-3);
	line-height: var(--pro-lh-texte); /* le theme imposait 24px */
}

.vm-infopro__pin {
	flex: 0 0 24px;
	width: 24px;
	height: auto;
	margin-top: 2px;
}

.vm-infopro a {
	color: var(--vm-bleu);
	font-weight: 600;
}

.vm-infopro a:hover {
	color: var(--pro-bleu-fonce);
}

.vm-infopro__mention {
	margin: var(--vm-space-6) 0 0; /* --vm-space-4 avant le 21/09/2026 */
	text-align: center;
}


/* ══════════════════════════════════════════════════════════
   STYLES EN LIGNE REMPLACES (21/09/2026)
   ──────────────────────────────────────────────────────────
   43 attributs style="" retires de consulterSH.php (arbitrages
   1a, 2a, 3a, 4a du 21/09/2026). Aucun !important : specificites
   a 2 ou 3 classes. Si une regle du theme l'emporte (F12, onglet
   Styles), ajouter !important en citant le fichier et la ligne de
   la regle gagnante (exception A5).
   ══════════════════════════════════════════════════════════ */

/* Sections de la fiche posees sur .page-header (hors bandeau #haut) :
   padding du theme neutralise. Remplace style="padding:0px" (5). */
.main section.page-header.vm-fiche-bloc {
    padding: 0;
}

/* Filet bleu des cartes de la fiche. Remplace le style en ligne
   border-color:#005ca2 !important (7 cartes). (0,3,0) : passe devant
   .card de Bootstrap et du theme. */
.main .card.vm-profile-card {
    border-color: var(--pro-bleu);
}

/* Encart d'alerte : lactarium en penurie, attention speciale d'un lieu AB.
   Reproduction a l'identique de l'ancien style en ligne (arbitrage 3a).
   Rose sur blanc : 3,76:1, sous le seuil AA pour ce texte de 18px.
   no-skin est pose sur le lien : sans lui, le skin du theme imposerait
   son bleu. Declare apres le filet bleu : meme specificite, il l'emporte. */
.main .card.vm-profile-card--alerte {
    border-color: var(--pro-rose);
}

.main .vm-profile-card--alerte p,
.main .vm-profile-card--alerte a,
.main .vm-profile-card--alerte a:hover,
.main .vm-profile-card--alerte a:focus-visible {
    color: var(--pro-rose);
}

/* Logo "Allaitement bienvenu" (fiche d'un lieu AB). Remplace
   style="width:150px; max-width:100%;" */
.main .vm-logo-ab {
    width:     150px;
    max-width: 100%;
    height:    auto;
}


/* ══════════════════════════════════════════════════════════
   ÉVÉNEMENTS — liste compacte (22/09/2026)
   ──────────────────────────────────────────────────────────
   Professionnels, associations, lieux AB. Une ligne par
   evenement : pastille de date, titre, lieu, organisateur,
   chevron. Environ 90px par evenement sur mobile (280px avant :
   date, titre, organisateur, adresse et bouton empiles).
   Toute la ligne est le lien : classe __link, exclue du
   soulignement global de custom.css ; titre souligne au survol
   par la convention __link / __title (custom.css).
   Evenements a venir au-dela de 3 et evenements passes :
   accordeons .vm-toggle (custom.css).
   ══════════════════════════════════════════════════════════ */

/* .main ul impose un retrait de 24px et la couleur de marque (custom.css) */
.main ul.vm-evt-liste {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--vm-space-2);
    margin:                0;
    padding-left:          0;
    list-style:            none;
}

/* no-skin est pose dans le HTML : sans lui, le skin du theme imposerait
   son bleu au lien et au survol */
.vm-evt__link {
    display:         flex;
    align-items:     center;
    gap:             var(--vm-space-3);
    padding:         var(--vm-space-2) var(--vm-space-3);
    border:          1px solid var(--pro-voile-4);
    border-radius:   var(--vm-radius-md);
    background:      var(--pro-blanc);
    color:           var(--pro-bleu);
    text-decoration: none;
    transition:      border-color 0.15s ease, background-color 0.15s ease;
}

.vm-evt__link:hover {
    border-color:     var(--pro-bleu);
    background-color: var(--pro-voile-1);
    color:            var(--pro-bleu);
    text-decoration:  none;
}

.vm-evt__link:focus-visible {
    outline:        3px solid var(--pro-turquoise);
    outline-offset: 2px;
}

/* Pastille de date : blanc sur bleu (6,8:1) */
.vm-evt__date {
    flex:            0 0 56px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      60px;
    border:          1px solid var(--pro-bleu);
    border-radius:   8px;
    background:      var(--pro-bleu);
    color:           var(--pro-blanc);
    line-height:     1.1;
    text-align:      center;
}

.vm-evt__jour {
    font-size:   1.35rem;
    font-weight: 700;
}

.vm-evt__mois {
    font-size:      0.75rem;
    font-weight:    600;
    text-transform: uppercase;
}

.vm-evt__annee {
    font-size: 0.7rem;
}

.vm-evt__corps {
    flex:      1 1 auto;
    min-width: 0;
}

/* (0,2,1) : passe devant l'echelle clamp() de .main h3 (custom.css) */
.main h3.vm-evt__title {
    margin:         0 0 2px;
    font-size:      1rem;
    font-weight:    700;
    line-height:    1.3;
    letter-spacing: normal;
    color:          var(--pro-bleu);
}

/* Lieu et organisateur : --pro-gris, 4,8:1 sur blanc */
.vm-evt__meta {
    margin:      0;
    font-size:   0.8rem;
    line-height: 1.4;
    color:       var(--pro-gris);
}

.vm-evt__meta > i {
    margin-right: 4px;
    color:        var(--pro-turquoise); /* decoratif, aria-hidden */
}

/* Organisateur : saisie libre parfois longue, une ligne (texte complet
   sur la page de l'evenement) */
.vm-evt__orga {
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
    font-style:    italic;
}

.vm-evt__chevron {
    flex:      0 0 auto;
    font-size: 0.8rem;
    color:     var(--pro-turquoise);
}

/* Evenement passe : pastille pale, titre gris.
   --pro-gris sur --pro-voile-1 : 4,65:1 */
.vm-evt--passe .vm-evt__date {
    border-color: var(--pro-voile-4);
    background:   var(--pro-voile-1);
    color:        var(--pro-gris);
}

.main .vm-evt--passe h3.vm-evt__title {
    color: var(--pro-gris);
}

/* Accordeons "autres evenements a venir" et "evenements passes".
   Marges internes reduites : les lignes gardent leur largeur sur mobile. */
.vm-evt-toggle {
    margin: var(--vm-space-3) 0 0;
}

.vm-evt-toggle > .vm-toggle-body {
    margin-top: 0;
    padding:    0 var(--vm-space-2) var(--vm-space-2);
}

/* Bouton des cartes de prestation (28/09/2026) : texte centre quelle que soit
   la largeur du bouton. Specificite (0,2,0) : un CSS de page est emis AVANT
   custom.css et perd a specificite egale (B1). */
.vm-pcard__action .vm-pcard__cta {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
}