/* ===== VY&CO — Foires & Salons ===== */
/* La police est chargée par le plugin (wp_enqueue_style), pas ici. */

/* ---------- 1. PLEINE LARGEUR ----------
   Betheme pose overflow:hidden sur .section, ce qui rognait le bloc.
   On déballe les conteneurs du builder qui entourent .vy. */
.mcb-section:has(.vy),
.section:has(.vy),
.section:has(.vy) .section_wrapper,
.section:has(.vy) .wrap,
.section:has(.vy) .mcb-wrap,
.section:has(.vy) .mcb-wrap-inner,
.section:has(.vy) .column,
.section:has(.vy) .mcb-column,
.section:has(.vy) .mcb-column-inner,
.section:has(.vy) .column_attr,
.mcb-section:has(.vy) .mcb-wrap,
.mcb-section:has(.vy) .mcb-wrap-inner,
.mcb-section:has(.vy) .mcb-column,
.mcb-section:has(.vy) .mcb-column-inner{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  overflow:visible !important;
}

/* Filet de sécurité : si les sélecteurs ci-dessus ne matchent pas le markup,
   ce hack prend le relais. Il devient automatiquement neutre (valeur 0)
   dès que le conteneur parent fait déjà toute la largeur. */
.vy{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
body:has(.vy){overflow-x:hidden;}

/* ---------- 2. NEUTRALISATION DU THÈME ---------- */
.vy,.vy *{box-sizing:border-box;}
.vy h1,.vy h2,.vy h3,.vy p,.vy span,.vy div,.vy a,.vy summary{
  font-family:'Reddit Sans',system-ui,-apple-system,sans-serif;
}
.vy h1,.vy h2{
  color:#2B2B2B !important;
  padding:0 !important;
  text-transform:none !important;
  border:0 !important;
}
.vy h1::before,.vy h1::after,
.vy h2::before,.vy h2::after{content:none !important;display:none !important;}
.vy p{margin-bottom:0;}
.vy img{max-width:100%;height:auto;display:block;}
.vy ul,.vy li{margin:0;padding:0;list-style:none;}

/* Zones à texte clair (plus spécifiques que la règle ci-dessus) */
.vy .vy-hero h1,.vy .vy-cta h2{color:#fff !important;}
.vy .vy-hero p,.vy .vy-cta p{color:rgba(255,255,255,.86) !important;}

/* ---------- 3. ACCORDÉONS ---------- */
.vy details > summary{list-style:none;}
.vy details > summary::-webkit-details-marker{display:none;}
.vy .chev{transition:transform .18s ease;}
.vy details[open] > summary .chev{transform:rotate(45deg) !important;}
.vy details[open] > summary{background:#FBFAF6;}
.vy details > summary:hover .fair-name{color:#3A72C9;}
.vy details > summary:focus-visible{outline:2px solid #1B4F8A;outline-offset:-2px;}

/* ---------- 4. LIENS & BOUTONS ---------- */
.vy a{color:#3A72C9;text-decoration:none;}
.vy a:hover{color:#1B4F8A;}
.vy a.vy-b1{color:#fff !important;transition:background .18s ease;}
.vy a.vy-b1:hover{background:#6B95D3 !important;color:#fff !important;}
.vy a.vy-b2{color:#2B2B2B !important;transition:background .18s ease;}
.vy a.vy-b2:hover{background:#EDE9DF !important;color:#2B2B2B !important;}

/* ---------- 5. HERO SOMBRE ----------
   Le header Betheme est transparent avec un texte blanc : un fond clair
   le rendait illisible. Dégradé repris de la page Collectivités & HPA.
   Les 4 arrêts ci-dessous sont les seules valeurs à retoucher. */
.vy .vy-hero{
  background:linear-gradient(125deg,
    #9296A0 0%,
    #5C5F69 32%,
    #35373F 68%,
    #2A2C33 100%);
}
/* Le badge et le bouton clair restent lisibles sur le fond sombre */
.vy .vy-hero .vy-badge{background:rgba(255,255,255,.94);color:#2B2B2B;}

/* ---------- 6. CARTE ---------- */
/* Le texte reste aligné sur la grille 1180px, la carte occupe le reste. */
.vy .vy-mapgrid > div:first-child{
  padding:72px 24px 72px max(24px,calc(50vw - 566px));
  display:flex;flex-direction:column;justify-content:center;
}
.vy .vy-map{
  position:relative;
  min-height:480px;
  overflow:hidden;
  background:#fff;
}

/* ---------- 7. MOBILE ---------- */
@media (max-width:900px){

  /* Le header mobile de Betheme recouvrait le badge : on descend
     le contenu du hero sous la barre de navigation. */
  .vy .vy-hero > section{padding-top:170px !important;padding-bottom:64px !important;}

  .vy .vy-mapgrid > div:first-child{padding:52px 24px 40px;}

  /* Le viewBox mobile est plus haut que large, la carte réclame
     davantage de hauteur pour ne pas être rognée. */
  .vy .vy-map{min-height:420px;}

  .vy .vy-body{padding-left:26px !important;padding-right:26px !important;}
  .vy details > summary{padding-left:20px !important;padding-right:20px !important;}

  /* Le bloc CTA sortait du cadre : la grille refusait de descendre sous
     280 px alors que la largeur utile tombe à ~260 px sur un petit écran.
     Une seule colonne fluide, et le bouton s'aligne à gauche sur le titre. */
  .vy .vy-cta{
    grid-template-columns:1fr !important;
    padding:32px 24px !important;
  }
  .vy .vy-cta > div:last-child{justify-content:flex-start !important;}
}

/* ---------- 8. ACCESSIBILITÉ ---------- */
@media (prefers-reduced-motion:reduce){
  .vy .chev,.vy a.vy-b1,.vy a.vy-b2{transition:none !important;}
}