/* ===============================================================================
   [14.08.2026] ANCRES `#course-<ID>` — sélecteurs écrits EN DOUBLE, volontairement.
   Les fiches s'appelaient `bien<rang>` (reste de la base immobilière) ; elles s'appellent
   désormais `course-<ID>`, avec l'identifiant RÉEL de la course, qui ne bouge jamais.
   ⚠️ Les 48 sélecteurs de fiche existent en DEUX exemplaires (`bien` + `course`) le temps
   que le catalogue soit republié : tant qu'il ne l'est pas, le HTML en ligne porte encore
   `id="bien61"`. Sans le doublon, toute la mise en page des fiches tomberait dans l'intervalle.
   Les jumeaux `bien` pourront être retirés APRÈS la republication — pas avant.
   =============================================================================== */

/* ===== Pied de page collé en bas sur les pages courtes (.vigprocfg-footer) ===== */
/* body:not(.et-fb) = ne s'applique PAS pendant l'édition Divi -> tes pages restent 100% Divi */
body:not(.et-fb) #page-container{
  display:flex !important;
  flex-direction:column !important;
  min-height:100vh !important;
}
/* Barre d'admin WordPress (visible seulement quand tu es connecté) : on déduit sa hauteur */
body.admin-bar:not(.et-fb) #page-container{ min-height:calc(100vh - 32px) !important; }
@media screen and (max-width:782px){
  body.admin-bar:not(.et-fb) #page-container{ min-height:calc(100vh - 46px) !important; }
}
/* La chaîne de conteneurs Divi remplit la hauteur d'écran */
body:not(.et-fb) #et-boc,
body:not(.et-fb) #et-main-area,
body:not(.et-fb) #main-content,
body:not(.et-fb) #main-content article.page,
body:not(.et-fb) #main-content article.page .entry-content{
  display:flex !important;
  flex-direction:column !important;
  flex:1 0 auto !important;
}
/* Le pied de page est poussé tout en bas ; le contenu reste en haut */
body:not(.et-fb) .entry-content > .vigprocfg-footer{ margin-top:auto !important; }

/* ===== Hero accueil : au-delà de 1300px, MOINS de vide à gauche/droite (demande JP) =====
   Le hero est capé à max-width:1140px (centré) → grosses marges sur grand écran. On élargit le
   cap à 1700px ≥1300px : le titre « Rejoins le RUN… » tient sur UNE ligne, la photo et le contenu
   prennent plus de place, marges réduites (~52px à 1800px). ===== */
/* [14.08, mesuré] Cap porté de 1700px à AUCUN. Le hero était plus ÉTROIT que la grille des
   vignettes juste en dessous — 1700px contre 1908 mesurés à 2071px de large — ce qui créait un
   décrochement de 208px entre l'en-tête et le catalogue. Sans cap, le hero prend la largeur de
   son conteneur moins ses 24px de marge intérieure, soit 1902px : aligné à 6px près sur la grille.
   ⚠️ Aucun risque de débordement : la page entière est bridée à 2300px et centrée (bloc G).
   ⚠️ On ne change QUE la largeur. Le déplacement des 3 blocs et de la désignation dans la colonne
   de gauche a été essayé puis ABANDONNÉ (14.08) : il raccourcissait le hero de 768 à 600px, mais
   uniquement au-dessus de 1300px — sous 820px le hero est empilé en une colonne, donc AUCUN gain
   sur natel, là où la longueur de page compte le plus. JP : « ça ne sert à rien ». */
/* ===== [25.08] L'ENTETE DE /test/ ETAIT PLUS ETROITE QUE CELLE DE L'ACCUEIL (constat JP) =====
   CAUSE MESUREE EN DIRECT : sur l'accueil le hero fait 1900px de large (max-width levee), sur
   /test/ il retombait a 1140px, centre, avec 380px de marge de chaque cote. Toutes les regles de
   mise en page du hero ci-dessous etaient ecrites `body.home ...` — or /test/ n'est PAS l'accueil,
   donc AUCUNE ne s'y appliquait : ni la largeur, ni le titre fluide, ni l'aeration, ni la carte
   blanche de la designation, ni le plafond de la photo.
   CORRECTION : chaque regle du hero est doublee avec `body:has(#sommaire)`, exactement la meme
   astuce que celle deja utilisee plus bas pour la largeur de page — /test/ se reconnait a son
   bloc `#sommaire`. Les deux pages sont desormais rigoureusement identiques.
   ⚠️ Si tu ajoutes une regle `body.home ...` pour le hero, PENSE A LA DOUBLER de la meme facon. */

@media (min-width:1300px){ body.home .vigprocfg-hero, body:has(#sommaire) .vigprocfg-hero{ max-width:none !important; } }

/* [14.08] TITRE D'ACCUEIL SUR UNE SEULE LIGNE (demande JP : « il y a de la place pour l'année »).
   Le titre était figé à 42px : il tenait sur une ligne au-dessus d'environ 1580px de fenêtre et
   passait à deux en dessous, en laissant un grand vide à droite de la 2e ligne.
   MESURÉ : « Rejoins le RUN et progresse toute l'année » réclame **20,76px de largeur par pixel
   de police** (872px à 42px). La colonne de gauche vaut environ 0,586 × (largeur de page − 88).
   Une police FLUIDE résout l'équation à toutes les tailles : à 2,15vw, la largeur nécessaire
   (0,446 × fenêtre) reste toujours sous la largeur disponible (0,586 × fenêtre − 52).
   Bornes : plancher 24px, plafond 46px. Conséquence des bornes — une seule ligne à partir
   d'environ **1050px** ; en dessous le plancher s'applique et le titre repasse à deux lignes,
   ce qui est acceptable puisque sous 820px le hero est de toute façon empilé en une colonne.
   Effet de bord agréable : sur très grand écran le titre monte jusqu'à 46px au lieu de rester
   bloqué à 42, alors que la place permettrait jusqu'à 55.
   ⚠️ Ne s'applique qu'à partir de 821px : en dessous, la règle du plugin gère le mobile. */
@media (min-width:821px){
  body.home .vigprocfg-hero .vh-title, body:has(#sommaire) .vigprocfg-hero .vh-title{ font-size:clamp(24px, 2.15vw, 46px) !important; }
}

/* [14.08] AÉRATION DE L'EN-TÊTE (demande JP : « ça aérerait le titre »).
   MESURÉ avant : logo à 102px du haut, et seulement **14px** entre le bas du titre et les boutons —
   d'où l'impression d'étouffement. Après : logo à **38px** (1 cm CSS = 37,8px exactement),
   photo à 38px elle aussi, et **38px** entre le titre et les boutons.
   ⚠️ LA PHOTO EST DESCENDUE DU MÊME CENTIMÈTRE, ce que JP n'avait pas demandé : sans ça elle
   serait restée à 19px pendant que le logo descendait à 38, et les deux colonnes auraient commencé
   à des hauteurs différentes. Là elles démarrent sur la même ligne.
   ⚠️ `align-self:start` remplace le centrage vertical de la colonne de gauche — c'est ce qui permet
   de fixer le logo à 1 cm du haut. Conséquence : ~140px de blanc restent SOUS « Suivez-nous »,
   alors que le centrage les répartissait de part et d'autre. **JP a vu et accepté** ce vide
   (« on laisse le vide ») — ne pas le "corriger" en revenant au centrage.
   ⚠️ Seuil 1001px, comme demandé : en dessous rien ne change. */
@media (min-width:1001px){
  body.home .vigprocfg-hero .vh-left, body:has(#sommaire) .vigprocfg-hero .vh-left { align-self:start !important; padding-top:1cm !important; }
  body.home .vigprocfg-hero .vh-photo, body:has(#sommaire) .vigprocfg-hero .vh-photo{ margin-top:1cm !important; }
  /* [14.08, 2e passe] JP après avoir vu le résultat : « le titre encore 1,5 cm plus bas et les
     boutons aussi encore 1,5 cm plus bas (par rapport à la photo) ». Le 1 cm d'écart posé plus
     tôt devient donc 1,5 cm AU-DESSUS du titre et 2,5 cm en dessous (1 + 1,5).
     Le but, en réalité, était de RÉPARTIR les ~140 px de blanc qui restaient sous « Suivez-nous »
     depuis le passage en `align-self:start` : plutôt que de les laisser s'accumuler en bas, on les
     redistribue autour du titre. MESURÉ : le vide résiduel tombe de 140 à **45 px**, et la colonne
     de gauche s'arrête maintenant à 468 px contre 513 pour la photo — les deux colonnes se
     terminent presque ensemble, ce qui était le sens de « par rapport à la photo ».
     Écarts obtenus : 62 px entre le logo et le titre, 94 px entre le titre et les boutons. */
  body.home .vigprocfg-hero .vh-title, body:has(#sommaire) .vigprocfg-hero .vh-title{ margin-top:1.5cm !important; margin-bottom:2.5cm !important; }
}

/* [14.08] LA DÉSIGNATION DANS UNE CARTE BLANCHE, comme les 3 blocs du dessus (demande JP).
   Les valeurs ne sont pas choisies « à l'œil » : elles sont RELEVÉES sur `.vh-fcard` pour que les
   quatre encadrés soient rigoureusement identiques — fond #fff, bordure 1px sur la couleur de
   cadre de Config, rayon 14px, padding 18px/20px, ombre 0 8px 22px -12px rgba(0,0,0,.15).
   VÉRIFIÉ après coup : les cinq propriétés correspondent, et les bords gauche/droite tombent
   exactement sur ceux de la bande des 3 blocs (écart 0px des deux côtés).
   ⚠️ Pas de media query : l'encadré a du sens à toutes les largeurs, y compris sur natel. */
body.home .vigprocfg-hero .vh-msg, body:has(#sommaire) .vigprocfg-hero .vh-msg{
  background:#fff !important;
  border:1px solid var(--vigprocfg-cadre-vignette,#e3e3e3) !important;
  border-radius:14px !important;
  padding:18px 20px !important;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.15) !important;
  max-width:none !important;
}

/* [14.08] « Suivez-nous » REMONTÉ À DROITE DES BOUTONS (demande JP : « tant qu'il y a assez de
   place »). Les deux blocs étaient empilés : `.vh-btns` puis `.vh-social` sur la ligne suivante.
   On les passe en `inline-flex` — ils se suivent alors sur la même ligne comme deux mots, et
   REPASSENT À LA LIGNE TOUT SEULS dès que la largeur manque. C'est exactement la condition posée
   par JP, sans avoir à choisir un seuil arbitraire.
   MESURÉ à 2071px : les boutons s'arrêtent à 402px, « Suivez-nous » va de 428 à 609, il reste
   481px de libre. La colonne perd 56px de haut (290 -> 234) et le hero 24px.
   REPLI VÉRIFIÉ en rétrécissant la colonne : même ligne encore à 700px, passage à la ligne à
   560px et en dessous, sans jamais déborder (débordement toujours négatif). Le natel, où la
   colonne est bien plus étroite, retombe donc sur la présentation empilée d'origine. */
body.home .vigprocfg-hero .vh-btns, body:has(#sommaire) .vigprocfg-hero .vh-btns{ display:inline-flex !important; vertical-align:middle !important; }
body.home .vigprocfg-hero .vh-social, body:has(#sommaire) .vigprocfg-hero .vh-social{ display:inline-flex !important; align-items:center !important;
  vertical-align:middle !important; margin-left:26px !important; margin-top:0 !important; }
/* La designation « Depuis 2019, le RUN fait courir Neuchatel… » etait capee a 900px
   (grosses marges G/D). ≥1300px : on l'elargit sur toute la largeur (alignee avec les 3
   encarts au-dessus, bords a 24px) et on grossit un peu le texte (16 → 19px). */
@media (min-width:1300px){
  body.home .vigprocfg-hero .vh-msg, body:has(#sommaire) .vigprocfg-hero .vh-msg{
    max-width:none !important;
    padding-left:24px !important; padding-right:24px !important;
    font-size:19px !important; line-height:1.55 !important;
  }
}

/* ===== Hero accueil : PLAFONNER la photo au-dessus de 1000px (demande JP) =====
   La photo (.vh-photo, ratio 4/5) remplit sa colonne → plus l'ecran est large, plus elle grandit
   (a 1700px elle fait ~670px de large × 4/5 = tres haute) et allonge la page d'accueil.
   On la bloque a ~sa taille de 1000px (380px de large) au-dela de 1000px, centree dans sa colonne.
   Resultat : page d'accueil moins haute sur grand ecran. (380px = taille approx. a 1000px ; ajustable.) ===== */
@media (min-width:1001px){
  body.home .vigprocfg-hero .vh-photo, body:has(#sommaire) .vigprocfg-hero .vh-photo{
    max-width:380px !important;
    /* [14.08] `center` -> `end` : plafonnée à 380px, la photo était CENTRÉE dans sa colonne de
       1652px, donc décalée de 144px vers l'intérieur — son bord droit ne tombait pas sur celui du
       3e bloc « Ambiance conviviale » ni sur celui de la désignation (constat JP : « au lieu
       d'être décalée »). Alignée à droite, les trois bords droits coïncident au pixel : mesuré,
       photo et dernier bloc s'arrêtent tous deux à 1979px.
       ⚠️ NE PAS toucher au repli mobile : sous 820px la photo est recentrée par
       `margin-left/right:auto` dans la règle du plugin, et c'est bien ce qu'on veut là-bas. */
    justify-self:end !important;
  }
}

/* =====================================================================
   RUN — Page CONTACT : embellir le FORMULAIRE Divi
   Ne touche QUE la page Contact (page-id-45). Couleurs = Vigpro Config.
   ===================================================================== */
body.page-id-45{
  --c-accent: var(--vigprocfg-principale,#E11D48);
  --c-border: var(--vigprocfg-cadre-vignette,#e3e3e3);
  --c-ink:    var(--vigprocfg-texte-vignette,#33404F);
  --c-focus:  var(--vigprocfg-badge-louer,#E11D48);
}
/* Le formulaire devient une belle carte blanche */
body.page-id-45 .et_pb_contact{
  background:#fff;border:1px solid var(--c-border);border-radius:14px;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.12);padding:26px 24px;
}
/* Champs : arrondis, propres, aérés */
body.page-id-45 .et_pb_contact_form input.input,
body.page-id-45 .et_pb_contact_form select.input,
body.page-id-45 .et_pb_contact_form textarea.et_pb_contact_message,
body.page-id-45 .et_pb_contact_form .et_pb_contact_field input,
body.page-id-45 .et_pb_contact_form .et_pb_contact_field select,
body.page-id-45 .et_pb_contact_form .et_pb_contact_field textarea{
  border:1px solid var(--c-border) !important;
  border-radius:10px !important;
  padding:11px 13px !important;
  background:#f7f9fc !important;
  color:var(--c-ink) !important;
  font-family:'Poppins',sans-serif !important;
  font-size:14px !important;
  box-shadow:none !important;
}
/* Focus : couleur « Survol des boutons » (--vigprocfg-badge-louer), comme Devenir membre.
   #page-container = priorité sur Divi. */
body.page-id-45 #page-container .et_pb_contact_form input:focus,
body.page-id-45 #page-container .et_pb_contact_form select:focus,
body.page-id-45 #page-container .et_pb_contact_form textarea:focus,
body.page-id-45 #page-container .et_pb_contact_form .et_pb_contact_field input:focus,
body.page-id-45 #page-container .et_pb_contact_form .et_pb_contact_field select:focus,
body.page-id-45 #page-container .et_pb_contact_form .et_pb_contact_field textarea:focus{
  border-color:var(--c-focus) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c-focus) 22%, transparent) !important;
  background:#fff !important;
  outline:none !important;
}
/* Un peu d'air entre les champs */
body.page-id-45 .et_pb_contact_field{ padding:6px !important; }
/* Placeholders lisibles */
body.page-id-45 .et_pb_contact_form ::placeholder{ color:#9aa0a6 !important; opacity:1; }
/* Bouton d'envoi : pilule aux couleurs du club. */
body.page-id-45 #page-container .et_pb_contact_submit.et_pb_button,
body.page-id-45 #page-container .et_pb_contact_submit.et_pb_button:hover{
  background-color:var(--c-accent) !important;
  background-image:none !important;
  color:#fff !important;
  border:none !important;
  border-radius:30px !important;
  padding:13px 32px !important;
  font-weight:600 !important;
  font-family:'Poppins',sans-serif !important;
  opacity:1 !important;
  transition:filter .15s !important;
}
body.page-id-45 #page-container .et_pb_contact_submit.et_pb_button:hover{ filter:brightness(.92) !important; }
body.page-id-45 #page-container .et_pb_contact_submit.et_pb_button:after{ display:none !important; }

/* =====================================================================
   RUN — Page PHOTOS : embellir la galerie Divi (page-id-28929)
   La galerie et la lightbox restent 100% fonctionnelles. Couleurs = Vigpro Config.
   ===================================================================== */
body.page-id-28929{ --c-accent: var(--vigprocfg-principale,#E11D48); }
/* Titre de la page */
body.page-id-28929 .et_pb_text h1{
  font-family:'Poppins',sans-serif; font-weight:600;
  color:var(--vigprocfg-texte-vignette,#33404F); text-align:center;
}
/* Vignettes : ombre douce + zoom au survol. (L'arrondi est déjà géré par le module galerie
   Divi lui-même — 10px ; on garde juste overflow:hidden pour clipper le zoom dans l'arrondi.) */
body.page-id-28929 .et_pb_gallery_image{
  overflow:hidden;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.35);
}
body.page-id-28929 .et_pb_gallery_image img{
  display:block; width:100%;
  transition:transform .35s ease;
}
body.page-id-28929 .et_pb_gallery_item{ margin-bottom:2.5% !important; }
/* Survol : léger zoom de la photo */
body.page-id-28929 .et_pb_gallery_item:hover .et_pb_gallery_image img{
  transform:scale(1.08);
}
/* Survol : teinte aux couleurs du club + loupe blanche */
body.page-id-28929 .et_pb_gallery_image .et_overlay{
  background:var(--c-accent) !important; opacity:.5 !important; border:none !important;
}
body.page-id-28929 .et_pb_gallery_image .et_overlay:before{ color:#fff !important; }
/* Pagination */
body.page-id-28929 .et_pb_gallery_pagination{ border:none !important; padding-top:14px; }
body.page-id-28929 .et_pb_gallery_pagination a{
  color:var(--c-accent) !important; font-weight:600;
  border-radius:8px; padding:4px 12px; margin:0 2px; transition:background .15s;
}
body.page-id-28929 .et_pb_gallery_pagination a.active,
body.page-id-28929 .et_pb_gallery_pagination a:hover{
  background:var(--c-accent) !important; color:#fff !important;
}

/* ===== Barre supérieure Divi (#top-header) : MASQUÉE sur tout le site (demande JP) =====
   Le bandeau gris du haut (enveloppe + « Contact » + réseaux sociaux) est retiré de TOUS
   les écrans. Les réseaux sociaux restent disponibles dans le pied de page.
   Pour la réafficher un jour : supprimer la règle ci-dessous. ===== */
#top-header{ display:none !important; }

/* ===== Anti-saut de l'en-tête au CHARGEMENT (utilisateur CONNECTÉ) =====
   CAUSE (mesurée live) : l'en-tête est en position:fixed ; quand on est connecté, la barre
   d'admin WordPress (32px bureau) décale l'en-tête, et Divi applique ce décalage en JS APRÈS
   le 1er rendu → l'en-tête saute de ~32px (= l'espace blanc en haut, ≈ 7-8 mm). On force le
   décalage dès le CSS (avant le JS) → plus de saut. ⚠️ Les VISITEURS (pas de barre d'admin)
   ne sont PAS concernés — à vérifier en navigation privée. On retire aussi l'animation de
   glissement par sécurité. ===== */
#main-header{ transition: background-color .4s ease, color .4s ease !important; }
@media (min-width:783px){ .admin-bar #main-header{ top:32px !important; } }

/* ===== Logo RUN : taille CONSTANTE (demande JP) =====
   Divi donne au logo max-height:99% de la hauteur de l'en-tête. Quand le menu
   passe sur 2 lignes (~1300-1630px) l'en-tête grandit → le logo grossissait.
   On fige sa hauteur à 48px (height, pas max-height) : constant ET rentre dans l'en-tête (~54px). ===== */
@media (min-width:981px){ #main-header #logo{ height:48px !important; max-height:48px !important; width:auto !important; } }

/* ===== Loupe (recherche) de l'en-tête : RETIRÉE (demande JP) =====
   Elle passait à la ligne quand la fenêtre rétrécissait. On la masque partout. ===== */
#et_top_search{ display:none !important; }

/* ===== TITRES PRINCIPAUX DE PAGE au STANDARD sur TOUS LES ÉCRANS (demande JP — cohérence globale) :
   22px au-dessus + 22px en dessous, Poppins 600 / 36px / line-height:36px / #0a0a0a / centré.
   Une règle par page (chaque page construit son titre autrement). Contact (page-45) = géré plus bas
   via ::before. Adhérer (page-30987) = déjà au standard (référence). ===== */
/* Entraînements (29190) + Tarifs (30975) : titre .run-head déjà en 36px ; le 22px du haut vient du
   wrapper .run-train/.run-tarifs → on annule juste le padding-haut de la 1ère section + 22px dessous. */
#page-container .run-train, #page-container .run-tarifs{ margin-top:22px !important; }
body.page-id-29190 .et_pb_section_0, body.page-id-30975 .et_pb_section_0{ padding-top:0 !important; }
body.page-id-29190 .run-head h2, body.page-id-30975 .run-head h2{ margin-bottom:22px !important; }
/* Classements (29079) : titre .run-res 32px → 36px. */
body.page-id-29079 .et_pb_section_0{ padding-top:0 !important; }
body.page-id-29079 .run-res h2{ font-family:'Poppins',sans-serif !important; font-size:36px !important; line-height:36px !important; font-weight:600 !important; color:#0a0a0a !important; text-align:center !important; margin:22px 0 22px !important; }
/* Photos (28929) : titre H1 42px → 36px standard. ⚠️ La galerie (shortcode plugin vigpp) est rendue
   en JS et se CASSE si on modifie les paddings/marges de section (recalcul de layout). Donc ici on
   ne touche QUE la police du titre, jamais la structure des sections. L'espace titre→galerie reste
   un peu grand (paddings de section natifs) — à affiner prudemment plus tard si vraiment nécessaire. */
body.page-id-28929 .et_pb_text_0 h1{ font-family:'Poppins',sans-serif !important; font-size:36px !important; line-height:36px !important; font-weight:600 !important; color:#0a0a0a !important; text-align:center !important; margin:22px 0 22px !important; }
/* Photos : la galerie était bridée par le conteneur Divi.
   - section galerie (section_1) qui se réduisait à ~108px et se collait à droite dès ~980px
     (bug flex Divi 5) → forcée en pleine largeur.
   - la RANGÉE Divi capait la largeur (861px dans une section de 1077) → 2 bandes blanches G/D qui
     grandissaient sur grand écran → rangée en pleine largeur ; la galerie garde son max-width 1280
     centré (design du plugin).
   - espace titre→« Les dernières courses » réduit (padding-bas section-titre + padding-haut galerie
     à 0 → l'écart = ~la marge du sous-titre). */
body.page-id-28929 .et_pb_section_1{ width:100% !important; flex:1 0 100% !important; padding-top:0 !important; }
body.page-id-28929 .et_pb_section_1 .et_pb_row{ width:100% !important; max-width:100% !important; }
body.page-id-28929 .et_pb_section_0{ padding-top:0 !important; padding-bottom:0 !important; }
body.page-id-28929 .et_pb_section_0 .et_pb_row{ padding-top:0 !important; margin-top:0 !important; }
body.page-id-28929 .et_pb_text_0{ margin-top:0 !important; }
body.page-id-28929 .vigpp-h:first-of-type{ margin-top:22px !important; }
/* Grand écran (>1300px) : on retire le max-width 1280 de la galerie → elle remplit toute la largeur
   (plus de bandes G/D) et affiche plus de photos dans le carrousel. Petit padding latéral de confort. */
@media (min-width:1300px){ body.page-id-28929 .vigpp-wrap{ max-width:100% !important; padding:0 40px !important; } }
/* Qui sommes-nous (29165) : les 3 titres de section (Le Président / Le Comité / Les Coachs) au même
   standard 36px (le titre = h2.sec, la classe est sur le h2). Le 1er remonté à 22px sous l'en-tête.
   Le « Le » noir + nom gris est conservé (span interne). */
body.page-id-29165 .et_pb_section_0{ padding-top:0 !important; }
body.page-id-29165 .run-team h2.sec{ font-family:'Poppins',sans-serif !important; font-size:36px !important; line-height:36px !important; font-weight:600 !important; color:#0a0a0a !important; text-align:center !important; }
body.page-id-29165 .run-team h2.sec:first-of-type{ margin-top:22px !important; }
/* Grand écran PC : elargir le bloc comite (moins de marge G/D) + espacer les 5 fiches
   (gap ~75px = ~2cm entre les photos). Le max-width de .run-team passe de 1100 a 1460. */
@media (min-width:1300px){
  body.page-id-29165 .run-team{ max-width:1460px !important; }
  body.page-id-29165 .run-team .grid:not(.coachs){ gap:75px !important; }
}

/* ===== Page CONTACT (page-id-45) : titre « Formulaire de contact » à 1cm du haut (demande JP) =====
   Titre ajouté en CSS (la page n'en avait pas), centré, même style que les autres titres.
   1cm au-dessus ET 1cm en dessous (avant le formulaire). ===== */
/* ===== STANDARD DE TITRE DU SITE (réf. page « Adhérer/Devenir membre ») =====
   Poppins 600, 36px, line-height:36px (interligne serré = bon espace entre 2 lignes),
   centré, couleur #0a0a0a, marge 22px au-dessus ET 22px en dessous.
   ⭐ À REPRODUIRE SUR TOUS LES TITRES DE PAGE (demande JP, automatique). ===== */
body.page-id-45 #main-content .et_pb_section_0::before{
  content:"Formulaire de contact";
  display:block; width:100%; text-align:center;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:36px; line-height:36px;
  color:#0a0a0a;
  margin:22px 0 22px;
}
/* Titre à la MÊME hauteur que les autres pages (22px sous l'en-tête) : on retire le padding-HAUT
   de la section-titre (sinon le titre descend de ~30px / 8mm de trop) + padding-bas à 0 + padding
   haut de la section-formulaire à 0. */
body.page-id-45 .et_pb_section_0{ padding-top:0 !important; padding-bottom:0 !important; }
body.page-id-45 .et_pb_section.et_section_specialty{ padding-top:0 !important; }
/* --- Portrait natel + tablette portrait (≤980px) : présentation du formulaire (demande JP) ---
   - Les 2 cartes (formulaire + « Nos coordonnées ») à la MÊME largeur et centrées :
     la colonne du formulaire ne faisait que ~90% de sa rangée et était collée à gauche → 100%.
   - Champs sur UNE seule colonne pleine largeur (l'e-mail ne fait plus une demi-largeur).
   (Nouveau champ « Natel » ajouté dans le module Divi = hérite auto de ce style de champ.) */
@media (max-width:980px){
  body.page-id-45 .et_pb_section.et_section_specialty .et_pb_specialty_column{ width:100% !important; }
  body.page-id-45 .et_pb_row_inner{ width:100% !important; max-width:100% !important; float:none !important; }
  body.page-id-45 .et_pb_contact_field{ width:100% !important; float:none !important; }
}
/* Formulaire moins espacé (demande JP) : Divi 5 met le formulaire en flex avec gap:15px entre
   les champs → réduit à 8px + carte un peu moins haute. Tous écrans. */
body.page-id-45 .et_pb_contact_form{ gap:8px !important; }
body.page-id-45 .et_pb_contact{ padding:20px 22px !important; }
@media (max-width: 980px){
  /* Masque le crédit "Création : …" */
  .et_pb_text_0_tb_footer{ display:none !important; }
  /* Réduit le pied de page au strict nécessaire (les 2 icônes sociales) */
  .et_pb_section_0_tb_footer{ min-height:0 !important; padding-top:6px !important; padding-bottom:6px !important; }
  .et_pb_row_0_tb_footer{ padding-top:4px !important; padding-bottom:4px !important; margin-top:0 !important; margin-bottom:0 !important; }
}

/* =====================================================================
   RUN — MENU MOBILE (burger) EN NOIR — JP 16.08.2026
   Le menu de BUREAU (#top-menu) est en noir, mais le menu MOBILE
   (.et_mobile_menu, affiché sous 981px) était resté ROUGE (couleur de lien
   Divi). On le met en NOIR comme sur PC. Sélecteurs DIFFÉRENTS du menu de
   bureau ; volontairement HORS du @media(min-width:981px) pour viser le mobile.
   ===================================================================== */
#page-container #et_mobile_nav_menu .et_mobile_menu li a,
#page-container #mobile_menu li a,
#main-header #mobile_menu .et_mobile_menu li a,
.et_mobile_menu li a,
.et_mobile_menu li.current-menu-item > a,
.et_mobile_menu li.current_page_item > a{ color:#000 !important; }

/* =====================================================================
   RUN — MENU DYNAMIQUE « surbrillance douce + icones » (proposition 3)
   - N'affecte QUE le menu de bureau (#top-menu). Le menu burger MOBILE reste intact.
   - Couleur du menu = Vigpro Config, point 2, champ « Survol des boutons »
     (variable --vigprocfg-badge-louer, repli rouge #E11D48).
   - Toutes les entrees identiques : seule la PAGE ACTIVE est foncee (pastille pleine).
   ===================================================================== */
@media (min-width:981px){
  /* Recentrage vertical des pilules du menu dans la barre (elles penchaient ~8px trop bas :
     20px d'espace au-dessus vs 3px en dessous). translateY ne touche PAS la hauteur de l'en-tête. */
  #et-top-navigation #top-menu{ transform:translateY(4px); } /* JP 2026-08-07 : position verticale de TOUT le menu — descendu ~3mm pour centrer avec le logo. Régler ce nombre (plus grand = plus bas, négatif = plus haut). */
  /* Chaque entree = pilule avec icone a gauche */
  /* JP 2026 : libellés du menu en NOIR (avant rouge #9f3245 hérité de Divi + gris sur page active/parent).
     3 IDs = bat les règles Divi ; couvre l'état normal, la page active, son parent et l'accueil.
     Les icônes restent colorées (leur couleur est posée à part avec !important plus bas). */
  #page-container #et-top-navigation #top-menu > li > a,
  #page-container #et-top-navigation #top-menu > li.current-menu-item > a,
  #page-container #et-top-navigation #top-menu > li.current-menu-ancestor > a,
  #page-container #et-top-navigation #top-menu > li.current_page_item > a,
  #page-container #et-top-navigation #top-menu > li.menu-item-home > a{ color:#000 !important; }
  #top-menu > li > a{
    display:inline-flex !important;
    align-items:center;
    gap:6px;
    padding:7px 12px !important;
    border-radius:20px;
    line-height:1;
    opacity:1 !important;
    transition:background-color .2s ease, color .2s ease;
  }
  /* L'icone : carre masque, colore avec la couleur courante du lien */
  #top-menu > li > a::before{
    content:"";
    width:17px; height:17px;
    flex:0 0 auto;
    background-color:currentColor;
    -webkit-mask:var(--i) center / contain no-repeat;
            mask:var(--i) center / contain no-repeat;
  }
  /* Survol d'une page NON active : fond teinte leger + texte accent.
     #page-container = priorite sur la couleur de lien imposee par Divi. */
  #page-container #top-menu > li:not(.current-menu-item) > a:hover{
    background:#e3e3e3;
    background:color-mix(in srgb, var(--vigprocfg-badge-louer,#E11D48) 26%, transparent);
    color:#000 !important; /* JP : libellé NOIR au survol (lisible sur le fond teinté) */
    text-decoration:none;
  }
  /* PAGE ACTIVE = surbrillance DOUCE (pas de pastille foncee) + gras,
     texte et icone en couleur accent. #page-container = priorite sur Divi. */
  #page-container #top-menu > li.current-menu-item > a{
    background:#dcdcde;
    background:color-mix(in srgb, var(--vigprocfg-badge-louer,#E11D48) 42%, transparent) !important;
    color:#000 !important; /* JP : libellé NOIR pour la page active */
    font-weight:600;
    text-decoration:none;
  }
  /* ---------- Une icone par entree (ciblage par page = robuste) ---------- */
  #top-menu > li.menu-item-home > a{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 11v10h6v-6h6v6h6V11z'/%3E%3C/svg%3E");
  }
  #top-menu > li > a[href*="/qui-sommes-nous"]{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E");
  }
  #top-menu > li > a[href*="/les-entrainements"]{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E");
  }
  #top-menu > li > a[href*="/photos"]{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3H3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM8.5 7A2.5 2.5 0 1 1 6 9.5 2.5 2.5 0 0 1 8.5 7zM5 19l5-6 3 3.5L16 12l4 7z'/%3E%3C/svg%3E");
  }
  #top-menu > li > a[href*="/tarifs"]{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11 2 2 11l9 9 9-9V2zm5 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E");
  }
  #top-menu > li > a[href*="/resultat-des-courses"]{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13h4v8H4zm6-7h4v15h-4zm6 3h4v12h-4z'/%3E%3C/svg%3E");
  }
  #top-menu > li > a[href*="/contact"]{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
  }
  /* « Devenir membre » = entree NORMALE comme les autres (icone coeur). */
  #top-menu > li > a[href*="/devenir-membre-du-run"]{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 3.6 12.6a5 5 0 0 1 7-7l1.4 1.4 1.4-1.4a5 5 0 0 1 7 7z'/%3E%3C/svg%3E");
  }
  /* « Espace membre » = entree normale + icone COUREUR (demande JP 2026-08-05). SVG URL-encode = survit au collage Divi. */
  #top-menu > li > a[href*="/espace-membre"]{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9 1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z'/%3E%3C/svg%3E");
  }
  /* « Tosali » (boutique du club) : icône PANIER. Cible le lien externe (tosallisport) OU une page /tosali. Ajouté JP 2026-08-07. */
  #top-menu > li > a[href*="tosallisport"],
  #top-menu > li > a[href*="/tosali"]{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6h-2a4 4 0 0 0-8 0H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm-6-2a2 2 0 0 1 2 2h-4a2 2 0 0 1 2-2zm0 10a4 4 0 0 1-4-4h2a2 2 0 0 0 4 0h2a4 4 0 0 1-4 4z'/%3E%3C/svg%3E");
  }
  /* « Points de rendez-vous » : icone DEUX PERSONNES = « on se retrouve » (choix JP 11.08, proposition 3).
     Sans cette ligne le ::before restait un CARRE plein (pas de masque = pas d'icone) — c'etait le carre
     sombre signale par JP a cote de l'entree. */
  #top-menu > li > a[href*="/nos-points-de-rendez-vous"],
  #top-menu > li > a[href*="/points-de-rendez-vous"]{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
  }
  /* « Une séance gratuite ! » = popup (item de menu 31175, sans page) : icône CADEAU 🎁 (demande JP 17.08). */
  #top-menu > li.menu-item-31175 > a{
    --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E");
  }
  /* ---------- Icones du menu EN COULEUR (multicolore, demande JP) ----------
     Chaque icone garde sa couleur propre (l'icone = ::before colore via background-color).
     Le texte du lien, lui, suit toujours la couleur du theme / accent au survol/actif. */
  #page-container #top-menu > li.menu-item-home > a::before{ background-color:#FF8A3D !important; }              /* accueil - orange */
  #page-container #top-menu > li > a[href*="/qui-sommes-nous"]::before{ background-color:#2BB673 !important; }  /* equipe - vert */
  #page-container #top-menu > li > a[href*="/les-entrainements"]::before{ background-color:#F5A623 !important; }/* entrainements - ambre */
  #page-container #top-menu > li > a[href*="/photos"]::before{ background-color:#7C5CFC !important; }           /* photos - violet */
  #page-container #top-menu > li > a[href*="/tarifs"]::before{ background-color:#E4436B !important; }           /* tarifs - rose */
  #page-container #top-menu > li > a[href*="/resultat-des-courses"]::before{ background-color:#3D9BE9 !important; } /* resultats - bleu */
  #page-container #top-menu > li > a[href*="/contact"]::before{ background-color:#17B0A6 !important; }          /* contact - turquoise */
  #page-container #top-menu > li > a[href*="/devenir-membre-du-run"]::before{ background-color:#E11D48 !important; } /* membre - rouge */
  #page-container #top-menu > li > a[href*="/espace-membre"]::before{ background-color:var(--vigprocfg-principale,#9f3245) !important; } /* espace membre - rouge club */
  #page-container #top-menu > li > a[href*="tosallisport"]::before,
  #page-container #top-menu > li > a[href*="/tosali"]::before{ background-color:#22B04B !important; } /* Tosali - vert TS */
  #page-container #top-menu > li > a[href*="/nos-points-de-rendez-vous"]::before,
  #page-container #top-menu > li > a[href*="/points-de-rendez-vous"]::before{ background-color:#4338CA !important; } /* points de RDV - indigo */
  #page-container #top-menu > li.menu-item-31175 > a::before{ background-color:#DB2777 !important; } /* séance gratuite - rose cadeau */
}

/* ===== Sous-menu deroulant (ex : Les entrainements -> Tarifs, Adherer) : blanc, coins arrondis,
   liseré rouge en haut, ombre douce ; au SURVOL = fond gris clair + texte FONCE et GRAS
   (demande JP 2026-08-05 : pas de rose ; survol gris + gras, texte reste noir). Desktop uniquement. ===== */
@media (min-width:981px){
  #top-menu li ul.sub-menu{
    background:#fff !important; border:none !important;
    border-top:3px solid var(--vigprocfg-badge-louer,#E11D48) !important;
    border-radius:0 0 12px 12px !important;
    box-shadow:0 14px 34px -12px rgba(0,0,0,.28) !important;
    padding:6px 0 !important;
    width:auto !important; min-width:255px !important; /* assez large pour « Points de rendez-vous » sur 1 ligne (JP 2026-08-07) */
  }
  #top-menu li ul.sub-menu li{ border:none !important; margin:0 !important; width:auto !important; }
  #page-container #et-top-navigation #top-menu li ul.sub-menu li a{ color:#1a1a1a !important; opacity:1 !important; font-weight:600 !important; padding:11px 22px !important; white-space:nowrap !important; transition:background .12s !important; }
  /* SURVOL : fond gris clair + texte FONCÉ et GRAS. On force opacity:1 car Divi estompe le texte au survol
     (c'est ce qui donnait le gris pâle au lieu du noir). Spécificité #page-container #et-top-navigation pour passer devant Divi. */
  #page-container #et-top-navigation #top-menu li ul.sub-menu li a:hover{ background:#eef0f2 !important; color:#0a0a0a !important; opacity:1 !important; font-weight:800 !important; }
  /* [17.08 JP] ICÔNES AUSSI dans le sous-menu déroulant (mêmes icônes/couleurs que le menu principal). */
  #page-container #et-top-navigation #top-menu li ul.sub-menu li > a{ display:flex !important; align-items:center !important; gap:9px !important; }
  #top-menu li ul.sub-menu li > a::before{
    content:""; width:16px; height:16px; flex:0 0 auto;
    background-color:currentColor;
    -webkit-mask:var(--i) center / contain no-repeat;
            mask:var(--i) center / contain no-repeat;
  }
  #top-menu li ul.sub-menu li > a[href*="/les-entrainements"]{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E"); }
  #top-menu li ul.sub-menu li > a[href*="/tarifs"]{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11 2 2 11l9 9 9-9V2zm5 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E"); }
  #top-menu li ul.sub-menu li > a[href*="/devenir-membre-du-run"]{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 3.6 12.6a5 5 0 0 1 7-7l1.4 1.4 1.4-1.4a5 5 0 0 1 7 7z'/%3E%3C/svg%3E"); }
  #top-menu li ul.sub-menu li.menu-item-31175 > a{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E"); }
  #top-menu li ul.sub-menu li > a[href*="/nos-points-de-rendez-vous"],
  #top-menu li ul.sub-menu li > a[href*="/points-de-rendez-vous"]{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }
  #page-container #top-menu li ul.sub-menu li > a[href*="/les-entrainements"]::before{ background-color:#F5A623 !important; }
  #page-container #top-menu li ul.sub-menu li > a[href*="/tarifs"]::before{ background-color:#E4436B !important; }
  #page-container #top-menu li ul.sub-menu li > a[href*="/devenir-membre-du-run"]::before{ background-color:#E11D48 !important; }
  #page-container #top-menu li ul.sub-menu li.menu-item-31175 > a::before{ background-color:#DB2777 !important; }
  #page-container #top-menu li ul.sub-menu li > a[href*="/nos-points-de-rendez-vous"]::before,
  #page-container #top-menu li ul.sub-menu li > a[href*="/points-de-rendez-vous"]::before{ background-color:#4338CA !important; }
}

/* ===== Menu : TAILLE des libellés (demande JP 2026-08-07) =====
   Taille UNIQUE sur tout le desktop (≥981px) = 17px ; NE rétrécit plus sous 1200px (demande JP).
   Sous 1200px on resserre seulement les ESPACEMENTS (padding), pas la taille, pour limiter le passage
   à 2 lignes. #page-container = priorité sur la règle du plugin. Le nom du membre suit la même taille ;
   le translateY recale verticalement la pastille membre sur les autres entrées.
   RÉGLAGES : font-size 17px · translateY(-8px) de la pastille (plus négatif = pastille plus HAUTE). ===== */
@media (min-width:981px){
  #page-container #et-top-navigation #top-menu > li > a{ font-size:17px !important; }
  #page-container #et-top-navigation #top-menu .vgm-menu-me .vgm-menu-nm{ font-size:17px !important; line-height:1; font-weight:600; }
  #page-container #et-top-navigation #top-menu .vgm-menu-me{ transform:translateY(-8px); } /* aligne la pastille membre sur le menu — AJUSTER ce -8px */
}
@media (min-width:981px) and (max-width:1200px){
  #page-container #et-top-navigation #top-menu > li > a{ padding:5px 8px !important; gap:4px !important; }
  #page-container #et-top-navigation #top-menu > li > a::before{ width:15px !important; height:15px !important; }
  #page-container #et-top-navigation #top-menu .vgm-menu-me{ padding:2px 10px 2px 2px; gap:5px; }
  #page-container #et-top-navigation #top-menu .vgm-menu-me img{ width:26px; height:26px; }
}

/* =====================================================================
   RUN — Page DEVENIR MEMBRE (page-id-30987) : formulaire d'adhésion dans une CARTE (demande JP).
   Carte blanche, radius 16px, SANS ombre (fine bordure), MÊME largeur que les autres cartes
   (« Une saison » = pleine largeur de rangée → on retire le padding du conteneur Divi : 10px
   latéraux pour la largeur + 14px en haut qui faisaient démarrer la carte 3,7mm plus bas que
   le bloc « Une saison » à sa droite → les 2 blocs côte à côte ont maintenant le même haut).
   Ombre des CHAMPS retirée → bordure fine. Tout hors media query = valable sur TOUS les écrans. */
body.page-id-30987 .et_pb_contact_form_container{ padding:0 !important; }
body.page-id-30987 .et_pb_contact{
  background:#fff !important; border-radius:16px !important;
  box-shadow:none !important; border:1px solid #e3e3e3 !important; padding:26px 24px !important;
}
body.page-id-30987 .et_pb_contact_form .input,
body.page-id-30987 .et_pb_contact_form input,
body.page-id-30987 .et_pb_contact_form select,
body.page-id-30987 .et_pb_contact_form textarea{
  box-shadow:none !important; border:1px solid #e3e3e3 !important;
}

/* =====================================================================
   RUN — Page DEVENIR MEMBRE (page-id-30987) : couleur au CLIC/FOCUS des champs.
   ⚠️ La VRAIE page « Devenir membre » en ligne est la 30987 (PAS la 29610 :
   l'ancien membre-4 ciblait 29610 et ne s'appliquait donc jamais). Le formulaire
   lui-même est déjà stylé dans le Divi Builder (module) → on ne re-style PAS la
   carte ici. On remplace seulement le FOND ORANGE au focus (réglé dans le module
   Divi, #FC9569) par un surlignage doux à la couleur « Survol des boutons »
   (Vigpro Config, pt 2 → --vigprocfg-badge-louer). #page-container = priorité.
   Vérifié en direct (Claude in Chrome) : plus d'orange, le champ suit le réglage.
   ===================================================================== */
body.page-id-30987 #page-container .et_pb_contact_form input:focus,
body.page-id-30987 #page-container .et_pb_contact_form textarea:focus,
body.page-id-30987 #page-container .et_pb_contact_form select:focus,
body.page-id-30987 #page-container .et_pb_contact_field .input:focus{
  background-color:color-mix(in srgb, var(--vigprocfg-badge-louer,#E11D48) 14%, #fff) !important;
  border-color:var(--vigprocfg-badge-louer,#E11D48) !important;
  color:var(--vigprocfg-texte-vignette,#33404F) !important;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--vigprocfg-badge-louer,#E11D48) 30%, transparent) !important;
}

/* ============================================================================
   FORMULAIRE CONTACT (Divi) — message d'erreur / confirmation en BANNIÈRE FIXE
   Demande JP (2026-08-04) : sur natel, en bas du formulaire, on ne voyait pas le
   message d'erreur (affiché en haut) → on ne savait pas si la demande partait.
   Ici, dès que le message a du contenu (:not(:empty)), on l'épingle en haut de
   l'écran, TOUJOURS visible où qu'on soit dans la page. 100% CSS.
   ============================================================================ */
.et_pb_contact_form_container .et-pb-contact-message:not(:empty){
  position:fixed !important; top:76px; left:12px; right:12px; z-index:100000;
  max-width:620px; margin:0 auto;
  background:#fff; border:2px solid #d81b2a; border-radius:12px;
  padding:14px 18px; box-shadow:0 12px 40px rgba(0,0,0,.30);
  max-height:70vh; overflow:auto; text-align:left; color:#2c2c2c;
}
.et_pb_contact_form_container .et-pb-contact-message:not(:empty) p{font-weight:700;margin:0 0 6px;}
.et_pb_contact_form_container .et-pb-contact-message:not(:empty) ul{margin:0;padding-left:20px;}
@media(max-width:782px){ .et_pb_contact_form_container .et-pb-contact-message:not(:empty){top:64px;} }


/* ===== « Tosali » (boutique du club) : entrée de menu réservée aux MEMBRES CONNECTÉS (demande JP 2026-08-07) =====
   Masquée pour les visiteurs NON connectés (menu desktop ET mobile). Dès qu'un membre — ou l'admin —
   est connecté, WordPress ajoute la classe body.logged-in → la règle ne s'applique plus → « Tosali » réapparaît.
   Cible le lien vers /tosali OU le site externe tosallisport.
   ⚠️ Si tes membres ne sont PAS des comptes WordPress (pas de body.logged-in), dis-le-moi : je bascule sur
   le repérage du badge membre (VigproMembre) à la place. ===== */
body:not(.logged-in) #top-menu > li:has(> a[href*="/tosali"]),
body:not(.logged-in) #top-menu > li:has(> a[href*="tosallisport"]),
body:not(.logged-in) #mobile_menu li:has(> a[href*="/tosali"]),
body:not(.logged-in) #mobile_menu li:has(> a[href*="tosallisport"]){ display:none !important; }


/* ===== Réglages verticaux fins de l'en-tête (demande JP 2026-08-07) ===== */
@media (min-width:981px){
  /* Icône COUREUR (espace membre) : ~2mm trop basse → remontée. Régler le top (plus négatif = plus haut). */
  #page-container #et-top-navigation #top-menu > li > a[href*="/espace-membre"]::before{ position:relative; top:-6px; }
  /* Réseaux sociaux (Facebook / Instagram) de l'en-tête : descendus ~2mm pour s'aligner. Régler le top. */
  #page-container #et-top-navigation .vigprocfg-header-social{ top:15px !important; }
}

/* ===== Page TOSALI (page-id-31142) : fenêtre boutique PLUS LARGE (demande JP 2026-08-08, VALIDÉ en direct) =====
   La fenêtre était bridée à 1150px par DEUX caps : `.run-embed-wrap{max-width:1150px}` (style du module Code)
   ET la rangée Divi capée à 1500px → sur grand écran la boutique ne faisait que ~la moitié de l'écran.
   Désormais : ~96% de la largeur de l'écran (validé par JP à 2306px → 2195px). HAUTEUR inchangée (82vh / 74vh mobile).
   RÉGLAGE : le 96% ci-dessous (baisser pour rétrécir). !important = bat le <style> du module (chargé après le CSS perso). ===== */
body.page-id-31142 #page-container .et_pb_row_0{ max-width:100% !important; width:100% !important; }
body.page-id-31142 #page-container .run-embed-wrap{ width:96% !important; max-width:none !important; }

/* ===== Page TARIFS (page-id-30975) : marges G/D alignées sur les vignettes du catalogue (demande JP 2026-08-08) =====
   La rangée Divi est à 80% de large (même mécanisme que Tosali) → mesuré à 1020px : ~100px de vide de chaque côté.
   Paliers = ceux des vignettes « Nos courses » : ≤1024px → 12px par côté ; ≤600px → 8px par côté. ===== */
@media(max-width:1024px){ body.page-id-30975 #page-container .et_pb_row_0{ width:calc(100% - 24px) !important; max-width:none !important; } }
@media(max-width:600px){ body.page-id-30975 #page-container .et_pb_row_0{ width:calc(100% - 16px) !important; } }

/* ===== Page COURSES (accueil + /test) : marges EXTÉRIEURES du corps « boxé » à ~5mm (demande JP 2026-08-08) =====
   Le thème met ~53px (mesuré à 2055px, avec !important) de marge autour de TOUT le corps de page → grosses
   bandes blanches autour du héros beige et du panneau « Nos courses ». Sur les pages qui contiennent le
   catalogue (accueil = body.home ; /test repéré par son #sommaire via :has), on les ramène à 19px (5mm)
   dès 661px (en dessous, la marge du thème est déjà plus petite — on n'y touche pas).
   L'en-tête fixe (pleine largeur via left:0/right:0) n'est PAS affecté. Vérifié en direct à 2055px. ===== */
@media(min-width:661px){
  /* Le thème fixe AUSSI la largeur du corps (~94%) → sans le width, la marge de DROITE récupérait tout
     le reste (constat JP). width = tout l'écran moins 2×19px → G et D = 19px chacune (vérifié en direct). */
  body.home, body:has(#sommaire){ margin-left:19px !important; margin-right:19px !important; width:calc(100% - 38px) !important; max-width:none !important; }
}

/* ===== Page POINTS DE RDV (page-id-31116) : marges ~5mm partout, ~2mm sous 1000px (demande JP 2026-08-08) =====
   Mêmes plafonds à lever qu'ailleurs : corps « boxé » du thème (marge ~53px + largeur 94%), rangée Divi à 80%,
   et le conteneur du plugin (.vgpt-page) capé à 1200px — la grille auto-fill ajoute des colonnes avec la place. ===== */
body.page-id-31116{ margin-left:19px !important; margin-right:19px !important; width:calc(100% - 38px) !important; max-width:none !important; }
body.page-id-31116 #page-container .et_pb_row_0{ width:100% !important; max-width:none !important; }
body.page-id-31116 #page-container .vgpt-page{ max-width:none !important; }
@media(max-width:1000px){
  body.page-id-31116{ margin-left:8px !important; margin-right:8px !important; width:calc(100% - 16px) !important; }
}

/* ===== Page ADHÉSION (page-id-30987) — corrections JP 2026-08-09 (v2, VÉRIFIÉ en direct) =====
   Le formulaire Divi 5 est en FLEX (gap 15px) → il faut piloter flex-basis, pas des floats.
   5) NPA ~30% et Localité prend le reste, sur la MÊME ligne (écrans ≥ 768px).
   6) « Expérience de course » et « Objectifs » chacun sur SA ligne (pleine largeur). ===== */
/* (corr. JP 10.08 v3 : le formulaire est UN SEUL conteneur flex (gap 15px) — il faut que NPA + Localité
   remplissent EXACTEMENT 100 % de la ligne, sinon le champ suivant (Email) remonte à côté :
   NPA 30 % + gap + Localité calc(70 % - 15px) = ligne pleine, à TOUTES les largeurs, même <407px.) */
body.page-id-30987 .et_pb_contact_field[data-id="npa"]{ flex:0 0 30% !important; width:30% !important; max-width:30% !important; min-width:0 !important; }
body.page-id-30987 .et_pb_contact_field[data-id="localite"]{ flex:0 0 calc(70% - 15px) !important; width:calc(70% - 15px) !important; max-width:calc(70% - 15px) !important; min-width:0 !important; }
body.page-id-30987 .et_pb_contact_field[data-id="experience"],
body.page-id-30987 .et_pb_contact_field[data-id="objectifs"]{ flex:0 0 100% !important; width:100% !important; max-width:100% !important; }

/* ===== Page CLASSEMENTS (page-id-29079) — correction JP 2026-08-09 (point 9) =====
   Marges G/D à ~5mm (19px), ~2mm (8px) sur natel (même mécanisme que Points de RDV) ;
   blocs ~30% plus grands : le conteneur .run-res était capé à 1000px (style du module Code) → 1300px. ===== */
body.page-id-29079{ margin-left:19px !important; margin-right:19px !important; width:calc(100% - 38px) !important; max-width:none !important; }
body.page-id-29079 #page-container .et_pb_row_0{ width:100% !important; max-width:none !important; }
body.page-id-29079 #page-container .run-res{ max-width:1300px !important; }
@media(max-width:1000px){
  body.page-id-29079{ margin-left:8px !important; margin-right:8px !important; width:calc(100% - 16px) !important; }
}

/* ===== Page CONTACT (page-id-45) — correction JP 2026-08-09 (point 11) =====
   Mêmes marges que les autres pages : ~5mm (19px) G/D, ~2mm (8px) sur natel. ===== */
body.page-id-45{ margin-left:19px !important; margin-right:19px !important; width:calc(100% - 38px) !important; max-width:none !important; }
body.page-id-45 #page-container .et_pb_row_0{ width:100% !important; max-width:none !important; }
@media(max-width:1000px){
  body.page-id-45{ margin-left:8px !important; margin-right:8px !important; width:calc(100% - 16px) !important; }
}

/* ===== Corrections JP 2026-08-10 (mesuré en direct) ===== */
/* (1) ACCUEIL ≤ 820px : le logo du héros était COLLÉ en haut (écart mesuré = 0) → +19px (5mm, porté de 14 à 19 le 10.08).
   Et l'écart « Suivez-nous » → photo était de 59px → −19px (~5mm) en annulant la marge haute de la photo. */
@media(max-width:820px){
  body.home .vh-logo-link, body:has(#sommaire) .vh-logo-link{ margin-top:19px !important; }
  body.home .vh-photo, body:has(#sommaire) .vh-photo{ margin-top:0 !important; }
}
/* (5) ADHÉSION : même effet de survol que le bloc « Offerte » (s'élève de 2px + ombre) sur TOUS les blocs
   « Nos formules » et sur le bloc « Si tu veux, viens simplement à la séance » (.run-mb-alt). */
body.page-id-30987 .run-mb-info .formule,
body.page-id-30987 .run-mb-alt{ transition:transform .18s ease, box-shadow .18s ease; }
body.page-id-30987 .run-mb-info .formule:hover,
body.page-id-30987 .run-mb-alt:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(0,0,0,.25); }
/* (6) TARIFS ≤ 480px (1 colonne) : marges latérales à ~5mm (19px) de chaque côté — cartes, cotisation et titre
   compris (tout est dans la même rangée Divi ; cette règle vient APRÈS les 24px/16px plus haut → elle gagne). */
@media(max-width:480px){
  body.page-id-30975 #page-container .et_pb_row_0{ width:calc(100% - 38px) !important; }
}
/* (13) TITRES à 2 teintes de noir (ex. « Nos <span class=r>Tarifs</span> » : noir #0a0a0a + gris #787c82)
   → UNE seule teinte. (11.08 : #41464d → #676c73, « −20 % moins foncé » choisi par JP sur aperçu,
   partout — même valeur que le bloc TITRES ci-dessous.) */
#et-main-area :is(h1,h2,h3):has(> span.r){ color:#676c73 !important; }
#et-main-area :is(h1,h2,h3) > span.r{ color:#676c73 !important; }

/* ===== Corrections JP 10.08 (2e série — vérifiées en direct avant publication) ===== */
/* (A) CONTACT : formulaire à ~5mm (19px) G+D — la rangée Divi de la section spéciale faisait 80% centré
   (mesuré : marges de 55 à 135px selon l'écran) → 100%. Les marges deviennent celles de la page
   (19px, 8px sur natel). Vérifié : les 2 colonnes (formulaire + « Nos coordonnées ») restent côte à côte. */
body.page-id-45 #et-main-area .et_pb_row{ width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
/* (B) TITRES DE PAGE — TAILLE UNIQUE DU SITE (réf. « Nos entraînements » sous 600px : 28.8px/28.8px,
   Poppins 600). Appliqué PARTOUT et à toutes les largeurs, SAUF Accueil (« Courses ») et « Le Staff
   du RUN » (vérifié : aucun de ces sélecteurs n'existe sur ces 2 pages). */
#page-container .run-head h2,                                /* Entraînements + Tarifs */
#page-container .run-mb-head h2,                             /* Adhérer au RUN */
#page-container .run-res .head h2,                           /* Recherche Résultats */
body.page-id-28929 #et-main-area .et_pb_text_0 h1,           /* Photos des courses */
#page-container .run-team h2.sec,                            /* Staff : « Le Président » / « Le Comité » / « Les Coachs » (ajout JP 10.08 soir, vérifié en direct) */
body.page-id-45 #main-content .et_pb_section_0::before,      /* Contact (titre en CSS) */
body.page-id-31116 #main-content .et_pb_section_0::before,   /* Points de RDV (titre en CSS) */
body.page-id-31142 #main-content .et_pb_section_0::before{   /* Tosali (titre en CSS) */
  font-size:28.8px !important; line-height:28.8px !important;
  color:#676c73 !important; /* (11.08) COULEUR UNIQUE de tous les titres, choix JP : −20 % moins foncé que l'ancien #41464d */
}
/* (C) TITRES AJOUTÉS en CSS (pages qui n'en avaient pas — même procédé que Contact) :
   Points de RDV (31116) « Points de Rendez-vous » et Tosali (31142) « Commande d'accessoire ». */
body.page-id-31116 #main-content .et_pb_section_0::before{ content:"Points de Rendez-vous"; }
body.page-id-31142 #main-content .et_pb_section_0::before{ content:"Commande d'accessoire"; }
body.page-id-31116 #main-content .et_pb_section_0::before,
body.page-id-31142 #main-content .et_pb_section_0::before{
  display:block; width:100%; text-align:center;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:28.8px; line-height:28.8px;
  color:#0a0a0a; margin:22px 0 22px;
}
body.page-id-31116 .et_pb_section_0,
body.page-id-31142 .et_pb_section_0{ padding-top:0 !important; }
/* (E v2) FICHES DE COURSE AVEC TABLEAU, 680–1024px — disposition idéale demandée par JP (10.08 soir) :
   PHOTO à gauche | PLAN à droite (mêmes dimensions ~50 %), en dessous DÉSIGNATION à gauche | TABLEAU
   à droite, et le LIEN OFFICIEL encore en dessous (pleine largeur, avant la barre Demande et la galerie).
   Technique : .property-main en GRILLE 2 colonnes ; .property-left / .property-right-col / .property-right
   passent en display:contents (leurs enfants deviennent les cases de la grille, ordonnées par `order`).
   La désignation est placée DANS .property-left par le script vgDescMove (gestion ≥680, 1.40.216).
   Vérifié en direct à 981px : photo 451×613 | plan 451×601, désignation 451 | tableau 451 alignés,
   lien 913 en dessous. <680 : inchangé. Fiches SANS tableau : inchangées (garde :has). */
@media (min-width:680px) and (max-width:1024px){
  div.page[id^="bien"]:has(.caract-table) .property-main,
  div.page[id^="course"]:has(.caract-table) .property-main{ display:grid !important; grid-template-columns:1fr 1fr; gap:14px 12px; }
  div.page[id^="bien"]:has(.caract-table) .property-main > .property-left,
  div.page[id^="course"]:has(.caract-table) .property-main > .property-left,
  div.page[id^="bien"]:has(.caract-table) .property-main > .property-right-col,
  div.page[id^="course"]:has(.caract-table) .property-main > .property-right-col,
  div.page[id^="bien"]:has(.caract-table) .property-main .property-right,
  div.page[id^="course"]:has(.caract-table) .property-main .property-right{ display:contents !important; }
  div.page[id^="bien"]:has(.caract-table) .vigpro-cardtop,
  div.page[id^="course"]:has(.caract-table) .vigpro-cardtop{ grid-column:1/-1; order:1; }
  div.page[id^="bien"]:has(.caract-table) .vigpro-mainphoto-wrap,
  div.page[id^="course"]:has(.caract-table) .vigpro-mainphoto-wrap{ order:2; min-width:0; width:100% !important; margin:0 !important; }
  /* Plan EXACTEMENT à la hauteur de la photo (constat JP « pas aligné ») : son margin-top:12px décalait le
     haut, et son aspect-ratio 3/4 le faisait 12px moins haut → margin 0 + étiré sur la hauteur de la rangée.
     Vérifié en direct : photo et plan tous deux à top 3331 / hauteur 601. */
  div.page[id^="bien"]:has(.caract-table) .property-right .property-map,
  div.page[id^="course"]:has(.caract-table) .property-right .property-map{ order:3; min-width:0; width:100% !important; margin:0 !important; height:100% !important; aspect-ratio:auto !important; align-self:stretch; }
  div.page[id^="bien"]:has(.caract-table) .map-address-note,
  div.page[id^="course"]:has(.caract-table) .map-address-note{ grid-column:1/-1; order:4; margin:0 !important; }
  /* [13.08 - demande JP] SOUS 1025px, le TABLEAU passe en PLEINE LARGEUR (il occupait une demi-colonne).
     Conséquence assumée : la désignation passe aussi en pleine largeur, sinon la moitié droite de sa
     rangée resterait vide. Résultat : PHOTO | PLAN côte à côte, puis tout le reste sur toute la largeur. */
  /* L'encadré « Important » (conditions) est posé JUSTE AU-DESSUS de la Description (G 1.40.251). */
  div.page[id^="bien"]:has(.caract-table) .property-conditions,
  div.page[id^="course"]:has(.caract-table) .property-conditions{ grid-column:1/-1; order:5; min-width:0; width:100% !important; margin:0 !important; }
  div.page[id^="bien"]:has(.caract-table) .property-description,
  div.page[id^="course"]:has(.caract-table) .property-description{ grid-column:1/-1; order:6; min-width:0; width:100% !important; margin:0 !important; }
  /* Le bloc MÉTÉO est injecté dans .property-left (qui est en display:contents) : il devient donc lui aussi
     une case de la grille. Sans ces 2 lignes il se retrouvait tout seul sur une demi-largeur (capture JP).
     Il est placé JUSTE AU-DESSUS du tableau, comme sur les grands écrans → même ordre partout. */
  /* margin-bottom:0 ici : dans la grille, c'est le `row-gap:14px` qui fait déjà l'espace avant le tableau
     (sinon 16 + 14 = 30px, deux fois trop). Mesuré : 30px avant, 14px après. */
  div.page[id^="bien"]:has(.caract-table) .vgmeteo-fiche,
  div.page[id^="course"]:has(.caract-table) .vgmeteo-fiche{ grid-column:1/-1; order:7; width:100% !important; margin-bottom:0 !important; }
  div.page[id^="bien"]:has(.caract-table) .caract-table,
  div.page[id^="course"]:has(.caract-table) .caract-table{ grid-column:1/-1; order:8; min-width:0; width:100% !important; }
  div.page[id^="bien"]:has(.caract-table) .property-lien,
  div.page[id^="course"]:has(.caract-table) .property-lien{ grid-column:1/-1; order:9; margin:0 !important; }
  div.page[id^="bien"]:has(.caract-table) .property-demande,
  div.page[id^="course"]:has(.caract-table) .property-demande{ grid-column:1/-1; order:10; }
}
/* (D) Espace sous ces titres à ~5mm au lieu de ~3cm (demande JP) : en Divi 5 la section est en flex
   avec un gap de 60px entre le titre (::before) et la rangée → gap à 0. Mesuré après correction :
   en-tête → titre = 22px et titre → contenu = 22px (~6mm chacun, sous le 1cm demandé).
   Sans risque : la section_0 de ces 3 pages n'a qu'UNE rangée (vérifié). */
body.page-id-31142 #main-content .et_pb_section_0,
body.page-id-31116 #main-content .et_pb_section_0,
body.page-id-45 #main-content .et_pb_section_0{ row-gap:0 !important; }

/* ===== Page ADHÉSION (page-id-30987) — 2026-08-12, demande JP (MESURÉ EN DIRECT avant écriture) =====
   Le bloc « Une saison, plein d'objectifs » passe à GAUCHE et le FORMULAIRE à DROITE, à toutes les
   largeurs → sous 981px (palier de dégroupage de Divi) les colonnes s'empilent DANS CET ORDRE :
   le visiteur lit d'abord les formules, puis remplit le formulaire juste en dessous.
   Technique : la rangée `.et_pb_row_1` est en `display:block` + colonnes flottantes (Divi classique) ;
   on la passe en FLEX (les flottants sont alors ignorés) et on inverse avec `order`. La gouttière
   Divi (5,5 %) est reportée sur la colonne de GAUCHE et retirée à celle de droite ; largeurs 47 %
   au lieu de 47,25 % → 99,5 % au total, sinon l'arrondi au sous-pixel fait passer la 2e colonne
   à la ligne (constat mesuré). Le formulaire reçoit le MÊME cadre blanc + ombre que le bloc de
   gauche (`.panel`), pour que les deux colonnes se répondent. ===== */
body.page-id-30987 #page-container .et_pb_row_1{ display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important; }
body.page-id-30987 #page-container .et_pb_row_1 > .et_pb_column{ float:none !important; width:47% !important; }
body.page-id-30987 #page-container .et_pb_row_1 > .et_pb_column_2{ order:1 !important; margin-right:5.5% !important; }  /* « Une saison… » → GAUCHE */
body.page-id-30987 #page-container .et_pb_row_1 > .et_pb_column_1{ order:2 !important; margin-right:0 !important; }     /* formulaire      → DROITE */
body.page-id-30987 #page-container .et_pb_column_1 .et_pb_contact_form_container{
  background:var(--vigprocfg-autour-vignette,#fff) !important;
  border:1px solid var(--vigprocfg-cadre-vignette,#e3e3e3) !important;
  border-radius:14px !important;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.12) !important;
  padding:26px 24px !important;
}
@media(max-width:980px){
  body.page-id-30987 #page-container .et_pb_row_1 > .et_pb_column{ width:100% !important; margin-right:0 !important; }
}
/* Titres et sous-titre du bloc de gauche CENTRÉS (demande JP 12.08) : « Une saison, plein d'objectifs »,
   son sous-titre et « Nos formules ». Les h3 sont en flex (icône + texte) → il faut justify-content. */
body.page-id-30987 .run-mb-info h3{ justify-content:center !important; text-align:center !important; }
body.page-id-30987 .run-mb-info .lead{ text-align:center !important; }

/* (F) FICHES DE COURSE >= 1500px — 3 COLONNES : TEXTES | PHOTO | PLAN (demande JP 13.08.2026 :
   « sur un grand écran, les images, tableau, plan sont trop grands »).
   MESURÉ EN DIRECT AVANT/APRÈS sur un écran 2562px, fiche « Course de la solidarité » :
     AVANT : photo 1158x1543 et plan 1158x1543 EMPILÉS à droite, colonne de textes 1198 de large
             mais seulement 1133 de haut → près de 2000px de vide en dessous. Fiche = 3228px de haut.
     APRÈS : TEXTES (1/3) | PHOTO (1/3) | PLAN (1/3). Photo et plan 781x1041. Fiche = 1364px.
   Technique : la même que le bloc (E v2) plus haut (déjà éprouvée sur ce site) — .property-main passe
   en GRILLE 3 colonnes, et .property-right-col / .property-right passent en display:contents pour que
   la photo et le plan deviennent directement des cases de la grille.

   ATTENTION — les 118 fiches n'ont PAS toutes la même structure (vérifié une par une en direct) :
     · 64 fiches AVEC tableau : photo + plan dans .property-right, textes dans .property-left
       → .property-left devient la colonne 1, la photo la 2, le plan la 3.
     · 54 fiches SANS tableau (anciennes) : la photo est DANS .property-left et la description est
       HORS de .property-main → .property-left passe LUI AUSSI en display:contents, photo colonne 1,
       plan colonne 2. Sans ce cas particulier, la photo passait à 1558x2077, soit PIRE qu'avant.
       (16 de ces fiches n'ont même pas de plan : la photo reste alors à 1/3, 781x1041 au lieu de
        1558x2077 — elles gagnent donc aussi au change.)

   Sous 1500px : STRICTEMENT rien ne change (mobile, tablette et le bloc E v2 680–1024px intacts).
   Aucun HTML touché → aucune republication du catalogue nécessaire.
   RÉGLAGE : le seuil 1500px et le « 1fr 1fr 1fr » ci-dessous sont les deux seules valeurs à toucher. */
@media (min-width:1500px){
  div.page[id^="bien"] .property-main,
  div.page[id^="course"] .property-main{ display:grid !important; grid-template-columns:1fr 1fr 1fr; gap:14px 16px; align-items:start; }
  div.page[id^="bien"] .property-main > .property-right-col,
  div.page[id^="course"] .property-main > .property-right-col,
  div.page[id^="bien"] .property-main .property-right,
  div.page[id^="course"] .property-main .property-right{ display:contents !important; }
  /* fiches AVEC tableau : la colonne de textes est la 1re */
  div.page[id^="bien"]:has(.caract-table) .property-main > .property-left,
  div.page[id^="course"]:has(.caract-table) .property-main > .property-left{ grid-column:1; grid-row:2 / span 2; width:auto !important; max-width:none !important; min-width:0; margin:0 !important; }
  div.page[id^="bien"]:has(.caract-table) .vigpro-mainphoto-wrap,
  div.page[id^="course"]:has(.caract-table) .vigpro-mainphoto-wrap{ grid-column:2; }
  div.page[id^="bien"]:has(.caract-table) .property-right .property-map,
  div.page[id^="course"]:has(.caract-table) .property-right .property-map{ grid-column:3; }
  /* La localité doit être SOUS LE PLAN (consigne JP), pas étalée sous la photo + le plan. */
  div.page[id^="bien"]:has(.caract-table) .map-address-note,
  div.page[id^="course"]:has(.caract-table) .map-address-note{ grid-column:3; }
  /* fiches SANS tableau : pas de colonne de textes → photo puis plan */
  div.page[id^="bien"]:not(:has(.caract-table)) .property-main > .property-left,
  div.page[id^="course"]:not(:has(.caract-table)) .property-main > .property-left{ display:contents !important; }
  div.page[id^="bien"]:not(:has(.caract-table)) .vigpro-mainphoto-wrap,
  div.page[id^="course"]:not(:has(.caract-table)) .vigpro-mainphoto-wrap{ grid-column:1; }
  div.page[id^="bien"]:not(:has(.caract-table)) .property-right .property-map,
  div.page[id^="course"]:not(:has(.caract-table)) .property-right .property-map{ grid-column:2; }
  div.page[id^="bien"]:not(:has(.caract-table)) .map-address-note,
  div.page[id^="course"]:not(:has(.caract-table)) .map-address-note{ grid-column:2; }
  /* placement commun aux deux familles */
  div.page[id^="bien"] .vigpro-cardtop,
  div.page[id^="course"] .vigpro-cardtop{ grid-column:1 / -1; grid-row:1; }
  div.page[id^="bien"] .vigpro-mainphoto-wrap,
  div.page[id^="course"] .vigpro-mainphoto-wrap{ grid-row:2; min-width:0; width:100% !important; max-width:none !important; margin:0 !important; }
  div.page[id^="bien"] .property-right .property-map,
  div.page[id^="course"] .property-right .property-map{ grid-row:2; min-width:0; width:100% !important; margin:0 !important; }
  div.page[id^="bien"] .map-address-note,
  div.page[id^="course"] .map-address-note{ grid-row:3; margin:0 !important; }
  div.page[id^="bien"] .property-main > .property-demande,
  div.page[id^="course"] .property-main > .property-demande{ grid-column:1 / -1; grid-row:4; }
}

/* (F2) FICHES ≥1500px : la DESCRIPTION passe en PLEINE LARGEUR (demande JP 13.08.2026).
   Pourquoi : plus l'écran rétrécit, plus la colonne de textes dépasse sous la photo et le plan
   (mesuré : 174px de dépassement à 2562px, 346px à 2296px) → un grand vide gris à droite du bas
   de la description, ET la localité repoussée tout en bas. En sortant la description de la
   colonne, la pile de gauche (lien + météo + tableau + Important) tombe à la hauteur de la photo :
   le vide disparaît et la localité remonte juste sous le plan.
   ⚠️ CONTRAINTE JP : « l'indication de la localité doit TOUJOURS être sous le plan » → la note
   d'adresse garde sa rangée à elle (rangée 7), sous la photo et le plan, AVANT la description.
   ⚠️ HISTORIQUE : ce bloc était d'abord plafonné à 2299px (JP : « en dessous de 2300 »). Mais son
   écran fait ~2300–2560px : il tombait donc du mauvais côté du seuil et voyait la localité très
   basse. Plafond SUPPRIMÉ le 13.08 sur sa décision → une seule mise en page dès 1500px.
   (La localité est CONSERVÉE : mesuré, sur les 87 fiches qui l'affichent, 42 — 48 % — ne citent
   la ville NULLE PART ailleurs sur la fiche. La retirer perdrait l'info une fois sur deux.)

   COMMENT ÇA MARCHE (et pourquoi c'est écrit comme ça — mesuré, pas deviné) :
   `.property-left` passe en `display:contents` : ses enfants deviennent des cases de la grille.
   Chaque bloc a SA rangée réservée (2 adresse · 3 lien · 4 météo · 5 tableau · 6 Important),
   ce qui rend la règle insensible aux blocs absents : une rangée vide fait 0 px (d'où `row-gap:0`
   + une marge basse de 14px portée par chaque bloc, sinon les rangées vides laissaient des trous
   de 14px — constaté sur les fiches sans lien ni météo, le tableau tombait 52px trop bas).
   ⚠️ La rangée 6 est en `1fr` et PAS en `min-content` : Chrome répartit le surplus de hauteur
   d'un élément qui chevauche plusieurs rangées (ici la photo, 5 rangées) sur TOUTES les rangées
   intrinsèques — le tableau se retrouvait 400px plus bas. Seule une rangée flexible absorbe tout
   le surplus proprement. Vérifié sur 5 fiches (avec/sans lien, sans météo, sans Important,
   et les 2 fiches qui ont À LA FOIS une adresse et un lien) : tout démarre à la même hauteur
   que la photo. Les 35 fiches dont la description est HORS de `.property-main` ne sont pas
   concernées par la dernière règle : elle ne les touche pas, elles étaient déjà pleine largeur. */
@media (min-width:1500px){
  div.page[id^="bien"]:has(.caract-table) .property-main,
  div.page[id^="course"]:has(.caract-table) .property-main{ grid-template-rows:auto auto auto auto auto 1fr auto auto auto !important; row-gap:0 !important; }
  div.page[id^="bien"]:has(.caract-table) .property-main > .property-left,
  div.page[id^="course"]:has(.caract-table) .property-main > .property-left{ display:contents !important; }
  div.page[id^="bien"]:has(.caract-table) .vigpro-cardtop,
  div.page[id^="course"]:has(.caract-table) .vigpro-cardtop{ margin-bottom:14px !important; }
  div.page[id^="bien"]:has(.caract-table) .property-address,
  div.page[id^="course"]:has(.caract-table) .property-address{ grid-column:1; grid-row:2; }
  div.page[id^="bien"]:has(.caract-table) .property-lien,
  div.page[id^="course"]:has(.caract-table) .property-lien{ grid-column:1; grid-row:3; }
  div.page[id^="bien"]:has(.caract-table) .vgmeteo-fiche,
  div.page[id^="course"]:has(.caract-table) .vgmeteo-fiche{ grid-column:1; grid-row:4; width:100% !important; }
  div.page[id^="bien"]:has(.caract-table) .caract-table,
  div.page[id^="course"]:has(.caract-table) .caract-table{ grid-column:1; grid-row:5; width:100% !important; }
  div.page[id^="bien"]:has(.caract-table) .property-conditions,
  div.page[id^="course"]:has(.caract-table) .property-conditions{ grid-column:1; grid-row:6; align-self:start; }
  div.page[id^="bien"]:has(.caract-table) .property-address,
  div.page[id^="course"]:has(.caract-table) .property-address,
  div.page[id^="bien"]:has(.caract-table) .property-lien,
  div.page[id^="course"]:has(.caract-table) .property-lien,
  div.page[id^="bien"]:has(.caract-table) .vgmeteo-fiche,
  div.page[id^="course"]:has(.caract-table) .vgmeteo-fiche,
  div.page[id^="bien"]:has(.caract-table) .caract-table,
  div.page[id^="course"]:has(.caract-table) .caract-table,
  div.page[id^="bien"]:has(.caract-table) .property-conditions,
  div.page[id^="course"]:has(.caract-table) .property-conditions{ margin:0 0 14px !important; }
  div.page[id^="bien"]:has(.caract-table) .vigpro-mainphoto-wrap,
  div.page[id^="course"]:has(.caract-table) .vigpro-mainphoto-wrap{ grid-column:2; grid-row:2 / span 5; }
  div.page[id^="bien"]:has(.caract-table) .property-right .property-map,
  div.page[id^="course"]:has(.caract-table) .property-right .property-map{ grid-column:3; grid-row:2 / span 5; }
  div.page[id^="bien"]:has(.caract-table) .map-address-note,
  div.page[id^="course"]:has(.caract-table) .map-address-note{ grid-column:3; grid-row:7; margin:14px 0 0 !important; }
  div.page[id^="bien"]:has(.caract-table) .property-description,
  div.page[id^="course"]:has(.caract-table) .property-description{ grid-column:1 / -1; grid-row:8; margin:14px 0 0 !important; }
  div.page[id^="bien"]:has(.caract-table) .property-main > .property-demande,
  div.page[id^="course"]:has(.caract-table) .property-main > .property-demande{ grid-column:1 / -1; grid-row:9; }
}

/* (G) AU-DELÀ DE 2300px : LA PAGE NE GRANDIT PLUS, ELLE SE CENTRE (demande JP 13.08.2026 :
   « plus de 2300, il ne faut plus agrandir, mieux centrer la page »).
   Le corps de page est bloqué à 2300px et centré ; l'EN-TÊTE et le PIED DE PAGE restent pleine
   largeur (ils sont posés en fixe/hors flux — c'est voulu, la barre sombre doit traverser l'écran).
   MESURÉ à 2596px : avant, le corps faisait 19→2562 (2543 de large) ; après, 141→2441 (2300 pile),
   avec 141px de marge égale de chaque côté.
   ⚠️ Il ne suffit PAS de brider le <body> : trois conteneurs se re-calculent en `vw` et débordaient
   du corps bridé (mesuré : `#sommaire` restait à 2475 de large et sortait jusqu'à 2616, donc
   au-delà du bord droit). D'où la 2e règle, qui les remet tous à 100 % du parent. La liste a été
   établie en remontant la chaîne des parents à l'écran, pas au jugé. */
@media(min-width:2301px){
  body.home, body:has(#sommaire){ width:2300px !important; max-width:2300px !important; margin-left:auto !important; margin-right:auto !important; }
  body.home #page-container, body:has(#sommaire) #page-container,
  body.home #et-main-area, body:has(#sommaire) #et-main-area,
  body.home #main-content, body:has(#sommaire) #main-content,
  body.home .entry-content, body:has(#sommaire) .entry-content,
  body.home [id^="post-"], body:has(#sommaire) [id^="post-"],
  body.home .et-l--post, body:has(#sommaire) .et-l--post,
  body.home .et_builder_inner_content, body:has(#sommaire) .et_builder_inner_content,
  body.home #sommaire, body:has(#sommaire) #sommaire,
  body.home div.page, body:has(#sommaire) div.page,
  body.home .vigprot-grid-wrap, body:has(#sommaire) .vigprot-grid-wrap,
  body.home .vigprot-grid, body:has(#sommaire) .vigprot-grid{ width:100% !important; max-width:100% !important; }
}



/* (H) BARRE HAUTE DE LA VIGNETTE : « Aujourd'hui » ÉTAIT COUPÉ (constat JP 14.08.2026 :
   « déplacer légèrement à gauche la date, mettre le champ météo un petit peu plus petit,
   et si ça ne suffit pas faire la vignette 1,2 mm plus large »).
   MESURÉ EN DIRECT sur l'accueil (fenêtre 1808px, vignette 259,2px) AVANT de régler quoi que ce soit :
   la barre offre 227px utiles et en demande 293 -> 66px de DÉBORDEMENT, rognés par
   l'`overflow:hidden` de la vignette. Le trio coupable : date 86px + météo 73px + « Aujourd'hui »
   114px, plus 2 écarts de 10px, dans une barre qui perd déjà 28px en marges intérieures.
   Seules les vignettes qui portent une pastille météo sont touchées : au-delà de 14 jours c'est
   l'année (masquée quand la météo est là) qui occupe le milieu, et là ça tient (mesuré : 0 et -1px).
   « Aujourd'hui » est le pire cas — c'est le plus long des trois libellés (J-x / Aujourd'hui / Passée).

   RÉGLAGE RETENU, mesuré sur 4 combinaisons :
     · marges intérieures de la barre 14 -> 7px  = la date part vers la gauche (demande JP)
     · écart entre pastilles 10 -> 5px
     · marges des pastilles date/statut 12 -> 7px, corps 15 -> 13,5px
     · pastille météo : 12 -> 6px et 15 -> 12px  = « un peu plus petite » (demande JP)
     · plancher de la grille 250 -> 255px        = les ~1,2 mm de large (demande JP), utiles
       UNIQUEMENT quand la grille tombe pile sur son minimum
   RÉSULTAT MESURÉ (pire cas = « Aujourd'hui » + météo) :
     vignette 259px -> +15px de marge en été, +11px avec une météo « -12° » (2 chiffres + signe)
     vignette 250px -> +6px / +2px  ... d'où le plancher à 255px, qui ramène à +11px / +7px.
   Réglages écartés : police laissée à 15px (ne laissait que +4px en hiver, ça recoupait au premier
   froid) et police à 13px (sûr, mais 2 points de moins pour rien). Si JP trouve que ça respire
   encore trop peu, la valeur à baisser est le 13,5px ci-dessous — et elle seule.

   ⚠️ `!important` : ces valeurs sont écrites EN LIGNE dans le HTML des vignettes (catalogue « cuit »
   par vigpro_card_topbar au moment du « Publier ») -> sans `!important` la feuille ne gagnerait pas,
   et il faudrait republier pour voir le moindre effet. Là, c'est visible dès la purge du cache. */
/* [correctif 14.08, constat JP] La 1re version rapetissait la SEULE pastille météo (12px contre 13,5px) :
   elle paraissait rabougrie à côté des deux autres, et le `justify-content:space-between` la posait de
   travers — le milieu d'une barre en `space-between` n'est centré que si les deux extrémités font la même
   largeur, or « Aujourd'hui » (~102px) est bien plus large que la date (~74px), d'où un décalage de ~14px.
   Deux corrections : (1) les TROIS pastilles à la MÊME taille (13px, mêmes marges) ; (2) la barre passe en
   GRILLE `1fr auto 1fr`, qui centre la pastille du milieu quelles que soient les largeurs des deux autres.
   MESURÉ (pire cas « Aujourd'hui » + météo, vignette 255px) : décentrage 14px -> 3,5px, et la marge
   disponible PASSE de +11 à +17px en été, de +7 à +13px avec une météo « -12° ». Uniformiser était donc
   aussi plus sûr que l'astuce précédente. Portée limitée à `.vigprot-card` : la barre des FICHES n'a que
   deux pastilles et ne doit surtout pas passer en grille 3 colonnes. */
.vigprot-card .vigpro-cardtop{ display:grid !important; grid-template-columns:1fr auto 1fr !important; align-items:center !important; padding-left:7px !important; padding-right:7px !important; column-gap:5px !important; }
.vigprot-card .vigpro-cardtop > *:first-child{ justify-self:start !important; }
.vigprot-card .vigpro-cardtop > *:last-child{ justify-self:end !important; }
.vigprot-card .vigpro-cardtop > span{ padding-left:6px !important; padding-right:6px !important; font-size:13px !important; }
/* `line-height:1.85` et RIEN d'autre : la pastille météo est un <button> en inline-flex avec une
   interligne de 1,35, les autres sont des <span> qui héritent de l'interligne du site — d'où 24px de
   haut contre 30px, c'est ce qui la faisait paraître rabougrie. ⚠️ NE PAS forcer `display` sur ces
   éléments pour égaliser les hauteurs : essayé et mesuré, un `display:inline-flex !important` sur les
   <span> RÉAFFICHE la pastille de l'année, que le script météo masque en `display:none` — la barre
   repassait à 4 pastilles, débordait de 20px et le centrage sautait à 76px. */
.vigprot-card .vgmeteo-pill{ justify-self:center !important; padding-left:6px !important; padding-right:6px !important; font-size:13px !important; gap:4px !important; line-height:1.85 !important; }
#sommaire .vigprot-grid{ grid-template-columns:repeat(auto-fill,minmax(255px,1fr)) !important; }
/* Sous 600px la vignette passe en pleine largeur (une par ligne, bascule flex déjà en place dans le
   plugin) : la place ne manque plus jamais, on rend donc au trio sa taille d'origine.
   ⚠️ Le seuil est bien 600 et PAS 980 : entre 601 et 980 la grille reste multi-colonnes avec des
   vignettes autour de 250-300px, donc exactement le cas où « Aujourd'hui » se coupait. */
@media(max-width:600px){
  .vigprot-card .vigpro-cardtop{ display:flex !important; grid-template-columns:none !important; padding-left:14px !important; padding-right:14px !important; gap:10px !important; }
  .vigprot-card .vigpro-cardtop > span{ padding-left:12px !important; padding-right:12px !important; font-size:15px !important; }
  .vigprot-card .vgmeteo-pill{ justify-self:auto !important; padding-left:12px !important; padding-right:12px !important; font-size:15px !important; gap:5px !important; }
  #sommaire .vigprot-grid{ grid-template-columns:none !important; }
}


/* =====================================================================
   (I) SURVOL DES BOUTONS — UN SEUL COMPORTEMENT POUR TOUT LE SITE
   Demande JP 14.08 : « c'est mieux d'avoir une unité dans le site en entier ».
   RECENSÉ AVANT D'ÉCRIRE, sur l'accueil : 131 boutons et **18 traitements de survol
   DIFFÉRENTS** — certains s'assombrissaient de 5 ou 8 %, un s'ÉCLAIRCISSAIT (+8 %),
   un se soulevait, et deux ne faisaient rien du tout (« Nos entraînements » et
   « Voir les courses d'un membre du RUN »). Ce n'était pas une intention de design,
   c'était l'accumulation de décisions ponctuelles.
   Réglage unique : assombrissement franc, ombre portée, décalage d'1px vers le haut.
   Pourquoi .85 et pas .92 (l'ancienne valeur) : sur le gris #787c82 de l'identité
   actuelle, .92 fait passer la luminosité de 122 à 112 sur 255 — invisible. .85 la
   descend à 104, soit près du triple d'écart. MESURÉ.
   ⚠️ LES BOUTONS À CONTOUR NE PEUVENT PAS S'ASSOMBRIR (fond blanc) : ils s'INVERSENT,
   fond plein + texte blanc. C'est le cas de « Nos entraînements ».
   ⚠️ ON NE TOUCHE PAS AUX LIENS DE TEXTE. Ils ont leur propre convention — gras 800 +
   trait net — réglée dans `vigpro_liens_style()` et voulue depuis le 13.08. Les mélanger
   serait une régression. C'est pourquoi la règle nomme les CLASSES de boutons une par
   une plutôt que de viser `a:hover`.
   ⚠️ AJOUTER ICI toute nouvelle classe de bouton, pour ne pas repartir vers un 19e cas.
   Couverture mesurée sur l'accueil : 363 éléments.
   ===================================================================== */
body .vh-btn,
body .vigprot-addcourse,
body .vigprot-map-toggle,
body .vigprot-view-btn,
body .vigprot-adv-btn,
body .vgm-qp-field,
body .vigprot-search-btn,
body .nsb-reset-full,
body .vgm-part-btn,
body .vgalb-open,
body .dl-btn-online,
body .dl-btn-pdf,
body .wa-btn,
body .vigprot-pop-link,
body .vigprocfg-cr-open,
body .vigprocfg-cr-submit,
body .vigpp-arrow,
body .vh-badge-clic{
  transition:filter .18s ease, box-shadow .18s ease, transform .12s ease,
             background-color .18s ease, color .18s ease !important;
}
body .vh-btn:hover,
body .vigprot-addcourse:hover,
body .vigprot-map-toggle:hover,
body .vigprot-view-btn:hover,
body .vigprot-adv-btn:hover,
body .vgm-qp-field:hover,
body .vigprot-search-btn:hover,
body .nsb-reset-full:hover,
body .vgm-part-btn:hover,
body .vgalb-open:hover,
body .dl-btn-online:hover,
body .dl-btn-pdf:hover,
body .wa-btn:hover,
body .vigprot-pop-link:hover,
body .vigprocfg-cr-open:hover,
body .vigprocfg-cr-submit:hover,
body .vigpp-arrow:hover,
body .vh-badge-clic:hover{
  filter:brightness(.85) !important;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.42) !important;
  transform:translateY(-1px) !important;
}
/* Bouton à contour : l'assombrissement ne se verrait pas sur du blanc -> on le remplit. */
body .vh-btn.vh-g:hover{
  background:var(--vigprocfg-principale,#787c82) !important;
  color:#fff !important;
  filter:none !important;
}
/* --- ICÔNES DES RÉSEAUX SOCIAUX (constat JP : « aucun effet quand on passe dessus ») ---
   Six icônes, à TROIS endroits et sous DEUX classes : menu du haut et en-tête après
   « Suivez-nous » (`.vigprocfg-soc`), et pied de page (`.cf-social a`, des SVG dessinés).
   La seule règle qui les visait était `text-decoration:none` — donc rien de visible.
   ⚠️ ELLES NE REÇOIVENT PAS le traitement des boutons ci-dessus, VOLONTAIREMENT : ce sont des
   icônes de marque sur fond transparent. Un `brightness(.85)` ternirait le bleu Facebook et le
   dégradé Instagram sans que le geste se comprenne. On agrandit de 12 % avec une pointe de
   saturation et une ombre portée : net, immédiat, et les couleurs des marques sont respectées.
   Même durée de transition que les boutons, pour que l'ensemble reste d'une seule main.
   `display:inline-flex` est nécessaire : `transform` n'a aucun effet sur un élément `inline`. */
body .vigprocfg-soc,
body .cf-social a{
  display:inline-flex !important;
  transition:transform .15s ease, filter .15s ease !important;
}
body .vigprocfg-soc:hover,
body .cf-social a:hover{
  transform:scale(1.12) !important;
  filter:saturate(1.25) drop-shadow(0 3px 8px rgba(0,0,0,.28)) !important;
}
body .vigprocfg-soc:active,
body .cf-social a:active{ transform:scale(1.02) !important; }

/* Au clic, le bouton se repose : le décalage disparaît, l'ombre se resserre. */
body .vh-btn:active,body .vigprot-addcourse:active,body .vigprot-map-toggle:active,body .vigprot-view-btn:active,body .vigprot-adv-btn:active,body .vgm-qp-field:active,body .vigprot-search-btn:active,body .nsb-reset-full:active,body .vgm-part-btn:active,body .vgalb-open:active,body .dl-btn-online:active,body .dl-btn-pdf:active,body .wa-btn:active,body .vigprot-pop-link:active,body .vigprocfg-cr-open:active,body .vigprocfg-cr-submit:active,body .vigpp-arrow:active,body .vh-badge-clic:active{
  transform:translateY(0) !important;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.4) !important;
}


/* [15.08] ICÔNE « ESPACE MEMBRE » DU MENU, PLUS GRANDE (demande JP : « mets le petit bonhomme
   plus grand, même grandeur que celui de la vignette »).
   MESURÉ : toutes les icônes du menu sont des SVG masqués calibrés à **17px** dans
   `#top-menu > li > a::before` (voir menu-dynamique-CSS.txt) ; le coureur du bas de vignette,
   lui, est un emoji à **32px**.
   ⚠️ JP demandait 32px, on est allés à **22px** après discussion : à 32 le coureur ferait presque
   le DOUBLE de ses voisines et casserait l'alignement de toute la barre — exactement la rupture
   d'unité qu'on a corrigée hier sur les survols. Le 32px de la vignette se justifie parce que
   l'icône y est seule dans une zone large ; dans une barre serrée, la même valeur ne se transpose
   pas. 22px la rend nettement plus visible sans écraser les autres entrées.
   Ciblage par l'URL de la page, comme le reste du fichier de menu : robuste si l'ID change.
   ⚠️ La hauteur de la barre ne bouge pas : le lien est en `inline-flex; align-items:center` avec
   `padding:8px 13px`, l'icône reste sous la hauteur de ligne. Au-delà de ~26px elle pousserait. */
#top-menu > li > a[href*="/espace-membre"]::before{
  width:22px !important;
  height:22px !important;
}

/* [15.08] ICÔNES DANS LE MENU MOBILE (demande JP). Le fichier `menu-dynamique-CSS.txt` ne visait
   QUE `#top-menu` — le menu burger était explicitement laissé intact. On reprend ici EXACTEMENT
   le même mécanisme : un carré masqué par un SVG, coloré avec `currentColor`, donc il suit
   automatiquement la couleur du texte et la page active. Les SVG sont les mêmes que ceux du
   bureau, recopiés une seule fois — pas de fichier externe, pas de police d'icônes.
   ⚠️ Une icône PAR DÉFAUT (petit rond) est posée sur `a` : sans elle, les entrées sans règle —
   « Nos Tarifs », « Adhérer », « Boutique Tosali », « Administration », et le sous-menu — se
   retrouveraient avec un carré vide et un texte décalé de 27px. Le rond n'est pas décoratif, il
   garantit l'alignement de TOUTE la colonne.
   ⚠️ 18px et pas 22 : le menu mobile est déjà dense, et les entrées de sous-menu sont indentées.
   ⚠️ Vérifié en direct : le masque s'applique bien et l'icône prend la couleur du menu (var(--vigprocfg-principale,#9f3245)). */
.et_mobile_menu li > a{
  display:flex !important; align-items:center; gap:9px;
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a::before{
  content:""; width:18px; height:18px; flex:0 0 auto; opacity:.85;
  background-color:currentColor;
  -webkit-mask:var(--i) center / contain no-repeat;
          mask:var(--i) center / contain no-repeat;
}
.et_mobile_menu li.menu-item-home > a{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 11v10h6v-6h6v6h6V11z'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a[href*="/nos-points-de-rendez-vous"]{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5z'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a[href*="/qui-sommes-nous"]{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a[href*="/les-entrainements"]{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a[href*="/photos"]{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3H3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM8.5 7A2.5 2.5 0 1 1 6 9.5 2.5 2.5 0 0 1 8.5 7zM5 19l5-6 3 3.5L16 12l4 7z'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a[href*="tarifs"]{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11 2 2 11l9 9 9-9V2zm5 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a[href*="/resultat-des-courses"]{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13h4v8H4zm6-7h4v15h-4zm6 3h4v12h-4z'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a[href*="/contact"]{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a[href*="/devenir-membre-du-run"]{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 3.6 12.6a5 5 0 0 1 7-7l1.4 1.4 1.4-1.4a5 5 0 0 1 7 7z'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a[href*="/espace-membre"]{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0 1.8c-3.6 0-6.5 1.8-6.5 4v2.4h13v-2.4c0-2.2-2.9-4-6.5-4z'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a[href*="/tosali"]{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v1h3l1 16H3L4 4zM9 4h6V3.8H9z'/%3E%3C/svg%3E");
}
.et_mobile_menu li > a[href*="/admin"]{
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 2.9 6 6.6.6-5 4.4 1.5 6.5L12 16.1 6 19.5 7.5 13l-5-4.4L9.1 8z'/%3E%3C/svg%3E");
}
/* [16.08 JP] ICÔNES DU MENU MOBILE EN COULEUR, comme le menu de bureau. L'icône ::before est colorée
   par background-color (avant : currentColor = noir). Mêmes couleurs que #top-menu. Hors media-query :
   le menu mobile ne s'affiche que sous 981px de toute façon. On enlève l'opacité pour des couleurs franches. */
/* [16.08 JP v2] Préfixe #page-container RETIRÉ : le menu mobile Divi n'est pas toujours dans #page-container,
   donc les règles scopées ne s'appliquaient pas (le noir marchait car il avait une variante non scopée). */
.et_mobile_menu li > a::before{ opacity:1 !important; }
.et_mobile_menu li.menu-item-home > a::before{ background-color:#FF8A3D !important; }                /* accueil - orange */
.et_mobile_menu li > a[href*="/nos-points-de-rendez-vous"]::before,
.et_mobile_menu li > a[href*="/points-de-rendez-vous"]::before{ background-color:#4338CA !important; } /* points de RDV - indigo */
.et_mobile_menu li > a[href*="/qui-sommes-nous"]::before{ background-color:#2BB673 !important; }    /* staff / equipe - vert */
.et_mobile_menu li > a[href*="/les-entrainements"]::before{ background-color:#F5A623 !important; }  /* entrainements - ambre */
.et_mobile_menu li > a[href*="/photos"]::before{ background-color:#7C5CFC !important; }             /* photos - violet */
.et_mobile_menu li > a[href*="tarifs"]::before{ background-color:#E4436B !important; }              /* tarifs - rose */
.et_mobile_menu li > a[href*="/resultat-des-courses"]::before{ background-color:#3D9BE9 !important; } /* resultats - bleu */
.et_mobile_menu li > a[href*="/contact"]::before{ background-color:#17B0A6 !important; }            /* contact - turquoise */
.et_mobile_menu li > a[href*="/devenir-membre-du-run"]::before{ background-color:#E11D48 !important; } /* membre - rouge */
.et_mobile_menu li > a[href*="/espace-membre"]::before{ background-color:var(--vigprocfg-principale,#9f3245) !important; } /* espace membre - rouge club */
.et_mobile_menu li > a[href*="/tosali"]::before{ background-color:#22B04B !important; }             /* Tosali - vert TS */
.et_mobile_menu li > a[href*="/admin"]::before{ background-color:#E0A82E !important; }              /* administration - or (etoile) */

/* [17.08 JP] « Une séance gratuite ! » (menu-item-31175, popup) : icône CADEAU 🎁 aussi dans le menu MOBILE, rose. */
.et_mobile_menu li.menu-item-31175 > a{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E"); }
.et_mobile_menu li.menu-item-31175 > a::before{ background-color:#DB2777 !important; }

/* ============================================================================
   [17.08 JP] MENU EN EMOJIS MULTICOULEURS — desktop + sous-menu déroulant + mobile.
   Remplace les icônes de traits colorées par de VRAIS emojis (multicolores).
   Taille calée à 18px (demande JP « 2px plus grand »).
   RETOUR ARRIÈRE : supprimer tout ce bloc → les icônes de traits colorées reviennent telles quelles.
   Spécificité forte (#page-container #et-top-navigation … + [href]) pour passer devant les règles de couleur ci-dessus,
   et neutralisation du masque SVG + du fond pour que l'emoji s'affiche dans ses propres couleurs.
   ============================================================================ */
/* Accueil : icône COUREUR ARC-EN-CIEL (SVG couleur dégradé sur mesure — choix JP « version 2 »), au lieu de la maison. */
#page-container #et-top-navigation #top-menu > li.menu-item-home > a::before,
.et_mobile_menu li.menu-item-home > a::before{ content:""!important; -webkit-mask:none!important; mask:none!important; background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PGcgb3BhY2l0eT0nLjk1Jz48cmVjdCB4PScyLjYnIHk9JzYnIHdpZHRoPSc2JyBoZWlnaHQ9JzEuNycgcng9Jy44NScgZmlsbD0nI2UxMWQyZicvPjxyZWN0IHg9JzEuMicgeT0nOScgd2lkdGg9JzcuNCcgaGVpZ2h0PScxLjcnIHJ4PScuODUnIGZpbGw9JyNmNGMyMGQnLz48cmVjdCB4PScwLjgnIHk9JzEyJyB3aWR0aD0nNy42JyBoZWlnaHQ9JzEuNycgcng9Jy44NScgZmlsbD0nIzJiYjY3MycvPjxyZWN0IHg9JzInIHk9JzE1JyB3aWR0aD0nNi42JyBoZWlnaHQ9JzEuNycgcng9Jy44NScgZmlsbD0nIzJiN2RlOScvPjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg2LjYsMS42KSBzY2FsZSgwLjcpJyBmaWxsPScjMTExMTExJz48cGF0aCBkPSdNMTMuNDkgNS40OGMxLjEgMCAyLS45IDItMnMtLjktMi0yLTItMiAuOS0yIDIgLjkgMiAyIDJ6bS0zLjYgMTMuOSAxLTQuNCAyLjEgMnY2aDJ2LTcuNWwtMi4xLTIgLjYtM2MxLjMgMS41IDMuMyAyLjUgNS41IDIuNXYtMmMtMS45IDAtMy41LTEtNC4zLTIuNGwtMS0xLjZjLS40LS42LTEtMS0xLjctMS0uMyAwLS41LjEtLjguMWwtNS4yIDIuMnY0LjdoMnYtMy40bDEuOC0uNy0xLjYgOC4xLTQuOS0xLS40IDIgNyAxLjR6Jy8+PC9nPjwvc3ZnPg==") center/contain no-repeat!important; width:26px!important; height:22px!important; font-size:0!important; line-height:1!important; opacity:1!important; }
/* Qui sommes-nous 👥 */
#page-container #et-top-navigation #top-menu > li > a[href*="/qui-sommes-nous"]::before,
.et_mobile_menu li > a[href*="/qui-sommes-nous"]::before{ content:"👥"!important; -webkit-mask:none!important; mask:none!important; background:none!important; width:auto!important; height:auto!important; font-size:18px!important; line-height:1!important; opacity:1!important; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; }
/* Les entraînements 🏃 */
#page-container #et-top-navigation #top-menu > li > a[href*="/les-entrainements"]::before,
#page-container #et-top-navigation #top-menu li ul.sub-menu li > a[href*="/les-entrainements"]::before,
.et_mobile_menu li > a[href*="/les-entrainements"]::before{ content:"🏃"!important; -webkit-mask:none!important; mask:none!important; background:none!important; width:auto!important; height:auto!important; font-size:18px!important; line-height:1!important; opacity:1!important; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; }
/* Photos des courses : icône CADRE BOIS + coureur rouge club (SVG couleur sur mesure — choix JP « version 2 »).
   Ce n'est pas un emoji mais une image SVG (donc multicolore) : on met un background-image au lieu du masque. */
#page-container #et-top-navigation #top-menu > li > a[href*="/photos"]::before,
.et_mobile_menu li > a[href*="/photos"]::before{ content:""!important; -webkit-mask:none!important; mask:none!important; background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHJlY3QgeD0nMS41JyB5PScyLjUnIHdpZHRoPScyMScgaGVpZ2h0PScxOScgcng9JzEuNicgZmlsbD0nI2M2ODg0YScgc3Ryb2tlPScjOGE1YTI4JyBzdHJva2Utd2lkdGg9Jy43Jy8+PHJlY3QgeD0nMy41JyB5PSc0LjUnIHdpZHRoPScxNycgaGVpZ2h0PScxNScgZmlsbD0nI2RjZWJmNycvPjxyZWN0IHg9JzMuNScgeT0nMTQnIHdpZHRoPScxNycgaGVpZ2h0PSc1LjUnIGZpbGw9JyNlN2RjYzQnLz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg1LDUpIHNjYWxlKDAuNTgpJyBmaWxsPScjOWYzMjQ1Jz48cGF0aCBkPSdNMTMuNDkgNS40OGMxLjEgMCAyLS45IDItMnMtLjktMi0yLTItMiAuOS0yIDIgLjkgMiAyIDJ6bS0zLjYgMTMuOSAxLTQuNCAyLjEgMnY2aDJ2LTcuNWwtMi4xLTIgLjYtM2MxLjMgMS41IDMuMyAyLjUgNS41IDIuNXYtMmMtMS45IDAtMy41LTEtNC4zLTIuNGwtMS0xLjZjLS40LS42LTEtMS0xLjctMS0uMyAwLS41LjEtLjguMWwtNS4yIDIuMnY0LjdoMnYtMy40bDEuOC0uNy0xLjYgOC4xLTQuOS0xLS40IDIgNyAxLjR6Jy8+PC9nPjwvc3ZnPg==") center/contain no-repeat!important; width:20px!important; height:18px!important; font-size:0!important; line-height:1!important; opacity:1!important; }
/* Nos tarifs 💰 */
#page-container #et-top-navigation #top-menu > li > a[href*="tarifs"]::before,
#page-container #et-top-navigation #top-menu li ul.sub-menu li > a[href*="tarifs"]::before,
.et_mobile_menu li > a[href*="tarifs"]::before{ content:"💰"!important; -webkit-mask:none!important; mask:none!important; background:none!important; width:auto!important; height:auto!important; font-size:18px!important; line-height:1!important; opacity:1!important; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; }
/* Résultat des courses 🏆 */
#page-container #et-top-navigation #top-menu > li > a[href*="/resultat-des-courses"]::before,
.et_mobile_menu li > a[href*="/resultat-des-courses"]::before{ content:"🏆"!important; -webkit-mask:none!important; mask:none!important; background:none!important; width:auto!important; height:auto!important; font-size:18px!important; line-height:1!important; opacity:1!important; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; }
/* Contact ✉️ */
#page-container #et-top-navigation #top-menu > li > a[href*="/contact"]::before,
.et_mobile_menu li > a[href*="/contact"]::before{ content:"✉️"!important; -webkit-mask:none!important; mask:none!important; background:none!important; width:auto!important; height:auto!important; font-size:18px!important; line-height:1!important; opacity:1!important; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; }
/* Devenir membre 🧡 */
#page-container #et-top-navigation #top-menu > li > a[href*="/devenir-membre-du-run"]::before,
#page-container #et-top-navigation #top-menu li ul.sub-menu li > a[href*="/devenir-membre-du-run"]::before,
.et_mobile_menu li > a[href*="/devenir-membre-du-run"]::before{ content:"🧡"!important; -webkit-mask:none!important; mask:none!important; background:none!important; width:auto!important; height:auto!important; font-size:18px!important; line-height:1!important; opacity:1!important; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; }
/* Espace membre 👤 */
#page-container #et-top-navigation #top-menu > li > a[href*="/espace-membre"]::before,
.et_mobile_menu li > a[href*="/espace-membre"]::before{ content:"👤"!important; -webkit-mask:none!important; mask:none!important; background:none!important; width:auto!important; height:auto!important; font-size:18px!important; line-height:1!important; opacity:1!important; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; }
/* Tosali (boutique) 🛒 */
#page-container #et-top-navigation #top-menu > li > a[href*="tosal"]::before,
.et_mobile_menu li > a[href*="tosal"]::before{ content:"🛒"!important; -webkit-mask:none!important; mask:none!important; background:none!important; width:auto!important; height:auto!important; font-size:18px!important; line-height:1!important; opacity:1!important; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; }
/* Points de rendez-vous 📍 */
#page-container #et-top-navigation #top-menu > li > a[href*="points-de-rendez-vous"]::before,
#page-container #et-top-navigation #top-menu li ul.sub-menu li > a[href*="points-de-rendez-vous"]::before,
.et_mobile_menu li > a[href*="points-de-rendez-vous"]::before{ content:"📍"!important; -webkit-mask:none!important; mask:none!important; background:none!important; width:auto!important; height:auto!important; font-size:18px!important; line-height:1!important; opacity:1!important; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; }
/* Administration ⭐ (mobile) */
.et_mobile_menu li > a[href*="/admin"]::before{ content:"⭐"!important; -webkit-mask:none!important; mask:none!important; background:none!important; width:auto!important; height:auto!important; font-size:18px!important; line-height:1!important; opacity:1!important; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; }
/* Une séance gratuite 🎁 */
#page-container #et-top-navigation #top-menu > li.menu-item-31175 > a::before,
#page-container #et-top-navigation #top-menu li ul.sub-menu li.menu-item-31175 > a::before,
.et_mobile_menu li.menu-item-31175 > a::before{ content:"🎁"!important; -webkit-mask:none!important; mask:none!important; background:none!important; width:auto!important; height:auto!important; font-size:18px!important; line-height:1!important; opacity:1!important; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important; }
/* ===================== FIN MENU EMOJIS ===================== */

/* [17.08 JP] Boutons des cartes de la page « les-entrainements » (.run-cta) : étaient gris (#7a7a7a) peu
   lisibles → vrais boutons rouge club, texte blanc, arrondis. Visibles et jolis sur les 2 cartes. */
/* ⚠️ Fond en DUR (#9f3245) et NON via var(--vigprocfg-principale) : sur cette page la carte redéfinit
   cette variable en GRIS #7a7a7a → le bouton ressortait gris. Sélecteur #page-container a.run-cta =
   assez prioritaire pour battre la règle d'origine de la page. */
#page-container a.run-cta,
#page-container a.run-cta:link,
#page-container a.run-cta:visited{ background:#9f3245 !important; color:#fff !important; border:none !important; border-radius:999px !important; padding:13px 28px !important; font-weight:700 !important; text-decoration:none !important; box-shadow:0 8px 18px -6px rgba(159,50,69,.55) !important; display:inline-block !important; transition:filter .15s ease, transform .15s ease !important; }
#page-container a.run-cta:hover{ filter:brightness(1.08) !important; transform:translateY(-1px) !important; color:#fff !important; text-decoration:none !important; }
/* [17.08 JP] Page Nos Tarifs (.run-tarifs) : aligner les TRAITS (.run-div, ligne grise) à la MÊME hauteur
   → on les pousse en bas de chaque carte (les cartes font déjà la même hauteur), le bouton suit juste après. */
#page-container .run-tarifs .run-card .run-div{ display:none !important; } /* [17.08 JP] trait retiré : plus de bouton en dessous, plus épuré */
#page-container .run-tarifs .run-card a.run-cta{ margin-top:14px !important; }
/* [17.08 JP] Page « Les entrainements » (.run-train) : VIGNETTES ENTIÈREMENT CLIQUABLES + boutons rouges
   MASQUÉS (JP les trouvait trop rouges). Les 2 boutons sont de simples liens (séance→/contact,
   membre→/devenir-membre) : on étire le lien, invisible, sur TOUTE la carte → clic n'importe où = on va
   sur la page correspondante. Léger effet au survol pour montrer que c'est cliquable. ⚠️ Scopé à .run-train
   → n'affecte PAS les boutons rouges de la page Nos Tarifs (.run-tarifs). */
/* [17.08 JP] Vignettes cliquables + boutons masqués sur Les entrainements (.run-train) ET Nos Tarifs (.run-tarifs). */
#page-container .run-train .run-card,
#page-container .run-tarifs .run-card{ position:relative; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
#page-container .run-train .run-card:hover,
#page-container .run-tarifs .run-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(0,0,0,.28); }
#page-container .run-train .run-card a.run-cta,
#page-container .run-tarifs .run-card a.run-cta{ position:absolute !important; inset:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; border:none !important; color:transparent !important; font-size:0 !important; z-index:2 !important; }
/* [17.08 JP] Page NOS TARIFS : les 5 icônes de cartes → emojis MULTICOULEURS (5 div.run-card dans .run-grid, nth-child fiable).
   1 Tous les mardis 🏃 · 2 Mardis & jeudis 🏃 · 3 Mardis & jeudis (le plus complet) 🏅 · 4 Séance à la carte 🎫 · 5 Séance d'essai 🎁 */
#page-container .run-tarifs .run-grid > .run-card .run-ico{ display:flex !important; align-items:center !important; justify-content:center !important; }
#page-container .run-tarifs .run-grid > .run-card .run-ico svg{ display:none !important; }
#page-container .run-tarifs .run-grid > .run-card .run-ico::after{
  font-size:32px; line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color","Twemoji Mozilla",sans-serif;
}
#page-container .run-tarifs .run-grid > .run-card:nth-child(1) .run-ico::after{ content:"🏃"; }  /* Tous les mardis */
#page-container .run-tarifs .run-grid > .run-card:nth-child(2) .run-ico::after{ content:"🏃"; }  /* Mardis & jeudis (semestre) */
#page-container .run-tarifs .run-grid > .run-card:nth-child(3) .run-ico::after{ content:"🏅"; }  /* Mardis & jeudis - le plus complet */
#page-container .run-tarifs .run-grid > .run-card:nth-child(4) .run-ico::after{ content:"🎫"; }  /* Séance à la carte */
#page-container .run-tarifs .run-grid > .run-card:nth-child(5) .run-ico::after{ content:"🎁"; }  /* Séance d'essai */
/* [17.08 JP] Page LES ENTRAÎNEMENTS : les 4 icônes de cartes → emojis MULTICOULEURS (pas besoin de recoller le module Divi).
   On masque le contour SVG gris et on pose un emoji coloré propre à chaque carte. Ordre des cartes dans .run-grid :
   1=École, 2=Trail, (trait), séance=.run-card-hl, 4=Rejoins le RUN. Le <hr> n'est pas un <a> → nth-of-type compte bien les cartes. */
#page-container .run-train .run-grid > a.run-card .run-ico{ display:flex !important; align-items:center !important; justify-content:center !important; }
#page-container .run-train .run-grid > a.run-card .run-ico svg{ display:none !important; }
#page-container .run-train .run-grid > a.run-card .run-ico::after{
  font-size:32px; line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color","Twemoji Mozilla",sans-serif;
}
#page-container .run-train .run-grid > a.run-card:nth-of-type(1) .run-ico::after{ content:"🏃"; }   /* École de course & PPG */
#page-container .run-train .run-grid > a.run-card:nth-of-type(2) .run-ico::after{ content:"🥾"; }   /* Trail et Route */
#page-container .run-train .run-grid > a.run-card.run-card-hl .run-ico::after{ content:"🎁"; }        /* Séance offerte */
#page-container .run-train .run-grid > a.run-card:nth-of-type(4) .run-ico::after{ content:"👥"; }   /* Rejoins le RUN */

/* [16.08 JP] PAGE POINTS DE RDV : glisse de 1-2mm horizontalement sur natel. Le garde-fou sur .vgpt-page
   n'a pas suffi → le débordement est AU-DESSUS (structure Divi de la page). On coupe le débordement de la
   ZONE DE CONTENU (#et-main-area), pas l'entête. `:has(.vgpt-page)` = trouve la page seule (indépendant du
   n° de page) ; variante page-id 31116 en secours. clip (pas hidden) = pas de scrollbar verticale parasite. */
#et-main-area:has(.vgpt-page){ overflow-x:clip; }
body.page-id-31116 #et-main-area{ overflow-x:clip; }
/* [16.08 JP v2] Garde-fou ULTIME au niveau du <body> de la page Points : coupe tout débordement
   horizontal restant (les 2mm), quelle que soit son origine (section/row Divi). `overflow-x:clip`
   sur le body ne rogne PAS l'entête fixe (elle n'a pas de transform ici). :has = indépendant du n° de page. */
body:has(.vgpt-page){ overflow-x:clip; }

/* [15.08] AU-DELÀ DE 1700px, LA PHOTO ET LE PLAN NE GRANDISSENT PLUS (demande JP : « ils sont
   assez grands »). MESURÉ à 1991px de fenêtre : la photo faisait **872 × 1163px** — plus haute
   qu'un écran d'ordinateur portable, il fallait défiler pour voir la fiche sous elle.
   Plafond à **745px**, la largeur qu'elle atteint naturellement vers 1700px : en dessous de ce
   seuil rien ne change, au-dessus elle se fige au lieu de suivre la page. Nouvelle taille : 745 × 993.
   ⚠️ LE PLAN EST PLAFONNÉ AUSSI, et c'est indispensable : photo et plan partagent la variable
   `--vg-photo-ratio` pour garder le MÊME cadre (voir vigpro-gestion). Ne plafonner que la photo
   aurait cassé cette égalité, qu'on a justement mise en place le 14.08.
   ⚠️ 745px et pas une valeur ronde : c'est la largeur mesurée au seuil, pour qu'il n'y ait aucun
   saut visible quand on franchit 1700px en redimensionnant. */
@media (min-width:1700px){
  .page .vigpro-mainphoto-wrap,
  .page .vgpro-plan-box{ max-width:745px !important; }
}

/* [15.08] BANDEAU D'ACCUEIL EN PLEINE LARGEUR + CATALOGUE EN CARTE ARRONDIE (demande JP).
   HISTORIQUE DE LA JOURNÉE, pour ne pas refaire le chemin à l'envers :
   on a d'abord arrondi les 4 coins du bandeau ET du catalogue, puis JP a demandé le bord à bord
   pour l'en-tête SEULEMENT -> les arrondis du bandeau n'ont plus de sens collés aux bords de
   l'écran, ils sont donc RETIRÉS (JP : « les arrondis sont à supprimer »). Le catalogue, lui,
   GARDE les siens : c'est ce qui fait la composition — une bannière, puis une carte.
   MESURÉ : la marge venait de `article.page` (max-width 1592px + 34px de marge de chaque côté),
   donc de l'élément qui contient TOUTE la page. On ne l'élargit pas : on fait DÉBORDER le seul
   bandeau avec `margin-left/right:calc(50% - 50vw)`.
   ⭐ LE POINT IMPORTANT : le `padding` compensatoire `calc(50vw - 50%)` remet le CONTENU du
   bandeau à sa place. Sans lui, logo, titre et blocs partiraient à 0 et on perdrait l'alignement
   avec le catalogue gagné hier (128px de décrochement corrigés). Vérifié : contenu du hero et
   catalogue démarrent tous deux à 53px, seul le fond gris déborde.
   ⚠️ Aucune barre de défilement horizontale — c'est le piège classique de ce genre de débordement,
   vérifié en direct (scrollWidth 1705 pour une fenêtre de 1713).
   ⚠️ La marge de 1 mm sous le menu est retirée elle aussi : une bannière doit toucher le menu.
   Retour arrière : supprimer ce bloc, le bandeau redevient une carte arrondie comme le catalogue. */
/* ===== [25.08] LE FOND GRIS S'ARRETE MAINTENANT AU BORD DU CATALOGUE (demande JP : « quand on
   l'ouvre, que la partie grise ne depasse pas a gauche et a droite »).
   Le bloc ci-dessus faisait DEBORDER l'enveloppe de la banniere sur toute la largeur de l'ecran
   (`margin-left:calc(50% - 50vw)`, choix du 14.08), avec un remplissage compensatoire pour garder
   le contenu aligne. Resultat : deux bandes grises qui depassaient de chaque cote du bloc
   « Toutes nos courses ». On revient donc a la largeur du conteneur — MESURE apres correction :
   l'enveloppe, la barre repliable et `#sommaire` commencent tous a 53px et finissent tous a 1534px.
   Le rayon de 14px reprend celui du bloc du catalogue, pour que les deux se repondent.
   Retour arriere : remettre les `calc(...)` d'origine si on veut de nouveau un fond pleine largeur. ===== */
body.home .vigpro-accueil-cover, body:has(#sommaire) .vigpro-accueil-cover{
  width:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
  margin-top:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
/* [25.08, 2e passe] Demande JP : « la ou il y a le carre rouge, supprimer cet espace ; je pense
   que 5 mm suffit ». MESURE avant : 26px entre le bas du texte d'invitation et le haut du bloc du
   catalogue — 12px de marge basse de l'enveloppe + 14px ici. On ramene le tout a 5 mm (19px) :
   la marge basse de l'enveloppe passe a 0 et c'est cette regle qui donne l'ecart. */
/* [25.08, 3e passe] Deux constats JP : « quand j'actualise il y a l'espace, mais le menu reprend
   de la place et le supprime » (en haut), et « il y a toujours trop d'espace sous Cliquez sur une
   vignette, ote environ 6..8 mm » (en bas).
   EN HAUT : la regle du 14.08 imposait `margin-top:0` — « une banniere doit toucher le menu ». On
   lui redonne donc 3,5 mm, EN FLUX : le menu fixe ne peut plus les manger, quoi qu'il fasse.
   EN BAS : MESURE avant — 12px au-dessus du texte d'invitation, puis 26px entre lui et le
   catalogue (12 de marge basse + 14 ici), soit ~38px en tout. Apres : 4px et 8px, soit 26px de
   moins — les 6..8 mm demandes. (Le 4px se regle dans vigprocfg, `.vh-invite`.) */
body.home .vigpro-accueil-cover, body:has(#sommaire) .vigpro-accueil-cover{
  margin-top:3.5mm !important;
  margin-bottom:0 !important;
}
body.home #sommaire, body:has(#sommaire) #sommaire{
  border-radius:14px !important;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.15) !important;
  margin-top:1mm !important;   /* [25.08, 3e passe] 5mm -> 2mm ; [5e passe] 2mm -> 1mm : « il y a toujours ce petit espace en dessous de Cliquez sur une… que je trouve trop grand, diminue-le de moitie ». MESURE : 8 px entre le bas du texte et le haut du bloc du catalogue -> 4 px. C est desormais cette seule regle qui donne l ecart (l enveloppe est a 0 depuis la 3e passe). */
}
/* [25.08, 4e passe] JP : « l espace pour les ecrans en dessous c est tres bien, mais en dessus
   c est trop, regarde la difference » (deux captures : natel = serre, grand ecran = enorme).
   MESURE sur grand ecran (1678px) : bas du menu = 189, haut de la barre = 260 -> 71 px de vide.
   Il ne venait PAS de nos marges (la barre n en a que 13 = 3,5 mm) mais du `padding-top:58px`
   que Divi pose sur `#main-content .container` — padding qui tombe a presque rien sur natel,
   d ou la difference que JP voit. On l annule sur l accueil / la page du catalogue uniquement :
   l ecart passe a 12 px, exactement ce qu on a sur natel. Les autres pages gardent leur padding
   (le bouton « Retour » y est insere en haut de ce meme conteneur). */
body.home #main-content .container, body:has(#sommaire) #main-content .container{
  padding-top:0 !important;
}
/* [25.08, 6e passe] ⚠️ POURQUOI JP NE VOYAIT « AUCUN CHANGEMENT » apres la 5e passe : on reglait la
   MARGE entre les deux blocs (8 px -> 4 px), alors que le vide qu il montrait est surtout le
   REMPLISSAGE INTERIEUR du bloc du catalogue. MESURE : du bas de « Cliquez sur une vignette » au
   haut de « Toutes nos Courses » il y avait 30 px — 4 px de marge, et 26 px de `padding-top` a
   l interieur de `#sommaire`. Comme le bloc et le fond de la page sont de la meme couleur, la
   frontiere ne se voit pas : les deux espaces n en font qu un a l oeil.
   JP : « il suffit de remonter le bloc toutes les courses de 4 mm ». 4 mm = 15 px, donc 26 - 15 = 11.
   Le BORD du bloc ne bouge pas (il reste a 4 px du texte) : c est son CONTENU qui remonte. */
body.home #sommaire, body:has(#sommaire) #sommaire{
  padding-top:11px !important;
}

/* ===== [25.08, 7e passe] ⚠️ « TOUS LES TITRES SONT TROP BAS, IL FAUT LES REMONTER D ENVIRON 2 CM »
   (JP). MESURE en direct, entre le bas du menu et le titre :
       page Photos ........... 22 px   (deja bien)
       Staff / Entrainements .. 84 px
       Ajout d une course ..... 92 px
   DECOMPOSITION des 92 px : **54 px pour le bouton « Retour »** + 6 px de sa marge, puis **32 px
   de remplissage haut de la 1re section Divi**, puis 10 px du titre lui-meme.
   ⭐ LE COUPABLE PRINCIPAL EST DONC LE BOUTON « RETOUR », arrive en Config 1.6.148 — d ou le « je
   ne sais pas pourquoi » de JP : rien n avait bouge dans les pages, c est un element qui s est
   ajoute DEVANT. Il est resserre dans vigprocfg (54 -> 30 px, voir la-bas) ; ici on reprend les
   deux autres morceaux.
   ⚠️ On ne vise que la PREMIERE section de la page : le remplissage des sections suivantes est un
   choix de mise en page de JP dans Divi, on n y touche pas. ===== */
.et_builder_inner_content > .et_pb_section:first-child{
  padding-top:6px !important;
}
/* Le padding que Divi pose en haut du conteneur des pages SANS constructeur (ancien gabarit) :
   58 px, la meme valeur que sur l accueil, ou on l avait deja annule en 4e passe. */
#main-content .container{
  padding-top:0 !important;
}
/* Le titre de la page d ajout n a plus besoin de son propre espace au-dessus. */
.vpc-titre{ padding-top:0 !important; }
/* [25.08, 8e passe] Le PREMIER titre de la page portait encore 22 px de marge haute, qui
   s ajoutaient au bouton « Retour ». On la retire — uniquement sur ce premier titre, pour ne pas
   toucher aux intertitres du reste de la page. MESURE : page Photos 64 -> 40 px.
   ⚠️ ESSAI ECARTE, garde en memoire : on avait aussi tente d annuler `.run-staff{margin-top}` et
   `.run-train{margin-top}`. MAUVAISE IDEE pour le Staff — sa marge est **negative** (-34 px), et
   l annuler faisait DESCENDRE le titre de 34 a 66 px. Ne pas y revenir sans mesurer. */
.et_builder_inner_content > .et_pb_section:first-child .et_pb_text:first-child h1:first-child,
.et_builder_inner_content > .et_pb_section:first-child .et_pb_text:first-child h2:first-child{
  margin-top:0 !important;
}
/* Le beige qui apparaît dans la bande de 14px : il vient de `article.page{background:#e6e9ee!important}`
   (vigpro-gestion.php, ~ligne 12024). Il était là DEPUIS TOUJOURS mais entièrement recouvert par les
   deux blocs, qui se touchaient — en les séparant, on l'a simplement révélé.
   ⚠️ ON NE SUPPRIME PAS cette règle : elle vise `article.page`, donc TOUTES les pages du site, où
   ce beige est peut-être voulu. On le neutralise UNIQUEMENT sur l'accueil (`body.home`).
   Effet secondaire recherché : l'ombre des deux blocs redevient visible. Elle était bien appliquée
   (vérifié), mais une ombre à 15 % d'opacité projetée sur 8px ne se distingue pas sur du beige. */
/* [25.08] JP : « ce fond, on ne le voit pour ainsi dire jamais, peut-on le mettre transparent ? »
   MESURE : le bloc du catalogue (`#sommaire`) est deja en #f4f4f4, comme `#main-content` derriere.
   Le blanc de `article.page` n apparaissait donc que dans la bande de 14 px au-dessus du catalogue
   (derriere « Cliquez sur une vignette… ») — une tache blanche entre deux gris. En `transparent`,
   cette bande prend le #f4f4f4 de `#main-content` : plus aucune rupture.
   ⚠️ ON GARDE LA REGLE (au lieu de la supprimer) : c est elle qui neutralise le beige #e6e9ee
   pose par `article.page{background:#e6e9ee!important}` de vigpro-gestion.php (~ligne 16847). */
body.home article.page, body:has(#sommaire) article.page{ background:transparent !important; }

/* ===== [25.08] UNE LIGNE DE SEPARATION SOUS LE MENU (demande JP : « ce serait bien de mettre
   une petite ligne de separation entre le menu et la page, avec un petit peu d'ombre en dessous »).
   MESURE avant : aucune bordure, et pour toute ombre un filet de 1px a 10 % — invisible en pratique,
   d'ou l'impression que le contenu « colle » au menu quand on fait defiler.
   Apres : un trait gris clair de 1px, et une ombre douce et courte (12px, decalee de 6px, tres
   estompee) — elle marque la limite sans faire lourd. Vaut aussi pour le menu en position fixe
   (`.et-fixed-header`), sinon l'effet disparaitrait des qu'on descend dans la page. ===== */
#main-header,
#main-header.et-fixed-header{
  /* [25.08, 2e passe] Demande JP : trait a peine plus fonce et 2px, ombre un peu plus grande.
     #dfe3e8 -> #ccd3da, 1px -> 2px, ombre 12px/-8 -> 20px/-6 (elle descend un peu plus bas et se
     voit mieux, sans devenir une barre noire). Ajustable : le 0.40 du rgba pour l'assombrir. */
  border-bottom:2px solid #ccd3da !important;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.40) !important;
}

/* ===== [25.08] LE MEME TRAIT ET LA MEME OMBRE POUR LE PIED DE PAGE (demande JP : « fais
   maintenant la meme chose pour le pied de page »). Symetrique de la regle du menu : le trait est
   en HAUT et l'ombre remonte (decalage negatif), sinon elle irait se perdre sous la page.
   MESURE avant : aucun trait, et une ombre de 12px a 18 % — a peine perceptible.
   Memes valeurs que le menu, pour que les deux se repondent. ===== */
.vigprocfg-footer{
  border-top:2px solid rgba(0,0,0,.14) !important;   /* [25.08, 2e passe] Correction JP : « pour le pied de page, met plutot une ligne a peine plus foncee que le fond du pied de page ». Le #ccd3da du menu est un gris CLAIR : pose sur le fond du pied de page (MESURE : #7a7a7a), il formait une bande blanche tres voyante. Un noir a 14 % laisse voir le fond juste en dessous (le background s etend sous la bordure) : le trait EST le fond, simplement assombri — et il suivra tout seul si la couleur du pied de page change dans la Config. */
  box-shadow:0 -8px 20px -6px rgba(0,0,0,.40) !important;
}