/* newversion/assets/css/commerces_site.css */
:root{
  --cs-bg:#0b0f14;
  --cs-card:#0f1620;
  --cs-line:rgba(255,255,255,.08);
  --cs-text:#e9eef6;
  --cs-muted:rgba(233,238,246,.72);
  --cs-pill:rgba(255,255,255,.12);
  --cs-pill2:rgba(255,255,255,.08);
  --cs-shadow:0 12px 35px rgba(0,0,0,.35);
  --cs-radius:22px;
}

/*-------------Permet d'effacer le nom de la carte openstreetmap ------------*/
.leaflet-bottom{
    display:none;
}

.cs-wrap{
  max-width: 1100px;
  margin: 0 auto;
  /*padding: 14px;*/
  color: var(--cs-text);
}

.cs-hero{
  position: relative;
  border-radius: var(--cs-radius);
  overflow: hidden;
  box-shadow: var(--cs-shadow);
  background: #0b0f14;
}

.cs-hero-media{
  position: relative;
  /*height: 340px;*/
  /*background: #0b0f14;*/
}
.cs-hero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}
.cs-hero-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;

}
.cs-hero-gradient{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.5) 78%, rgba(0,0,0,.62) 100%);
}

.cs-hero-content{
  position:absolute;
  inset:auto 0 0 0;
  padding: 18px 18px 16px;
}

.cs-breadcrumb{
  font-size: 13px;
  color: rgba(255,255,255,.7);
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom: 10px;
}
.cs-breadcrumb a{ color: rgba(255,255,255,.85); text-decoration:none; }
.cs-breadcrumb a:hover{ text-decoration:underline; }

.cs-title{
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing:.2px;
}

.cs-sub{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cs-pill{
  background: var(--cs-pill);
  border:1px solid rgba(255,255,255,.14);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  backdrop-filter: blur(8px);
}
.cs-pill-soft{
  background: var(--cs-pill2);
}

.cs-actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.cs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--cs-text);
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
}
.cs-btn:hover{
  background: rgba(255,255,255,.10);
}
.cs-btn-primary{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
}

.cs-card{
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.cs-grid{
  display:grid;
  /*grid-template-columns: 1fr 1fr;*/
  gap: 12px;
}
@media (max-width: 820px){
  /*.cs-hero-media{ height: 300px; }*/
  .cs-grid{ grid-template-columns: 1fr; }
  .cs-title{ font-size: 26px; }
}

.cs-info-title{
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 10px;
  color:white;
}
.cs-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.cs-row:first-of-type{ border-top: 0; padding-top: 0; }
.cs-ico{ width: 24px; opacity:.9; }
.cs-txt{ color: rgba(233,238,246,.92); }
.cs-txt a{ color: rgba(233,238,246,.96); text-decoration:none; }
.cs-txt a:hover{ text-decoration: underline; }

.cs-quick{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
}
.cs-quick-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--cs-text);
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
}
.cs-quick-btn:hover{ background: rgba(255,255,255,.09); }

.cs-h2{
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 10px;
  color:white;
}
.cs-text{
  color: rgba(233,238,246,.88);
  line-height: 1.55;
  font-size: 15px;
}
.cs-muted{ color: var(--cs-muted); font-size: 13px; }

.cs-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cs-link{
  color: rgba(233,238,246,.90);
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
  opacity:.9;
}
.cs-link:hover{ text-decoration: underline; }

.cs-gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 920px){ .cs-gallery{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .cs-gallery{ grid-template-columns: repeat(2, 1fr); } }

.cs-g{
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:block;
}
.cs-g img{
  width:100%;
  height: 130px;
  object-fit: cover;
  display:block;
  transition: transform .2s ease;
}
.cs-g:hover img{ transform: scale(1.03); }

.cs-note{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(233,238,246,.7);
}

.cs-vr{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.cs-vr iframe{
  width:100%;
  height: 520px;
  border:0;
  display:block;
}
@media (max-width: 640px){
  .cs-vr iframe{ height: 420px; }
}

.cs-hours{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.cs-hours-row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.cs-day{ font-weight: 800; }
.cs-time{ color: rgba(233,238,246,.85); }

.cs-map{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.cs-map iframe{
  width:100%;
  height: 420px;
  border:0;
  display:block;
}

.cs-sticky{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  display:flex;
  gap:10px;
  justify-content:center;
  background: linear-gradient(180deg, rgba(10,14,20,0), rgba(10,14,20,.82) 35%, rgba(10,14,20,.92));
  backdrop-filter: blur(10px);
  z-index: 50;
}
.cs-sticky-btn{
  max-width: 520px;
  width: 48%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--cs-text);
  text-decoration:none;
  font-weight: 900;
}
.cs-sticky-primary{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
}
@media (min-width: 920px){
  .cs-sticky{ display:none; }
}
/* ============================
   HERO MOBILE OPTIMISATION
   ============================ */

@media (max-width: 640px){

  /* photo plus haute = plus immersive */
  .cs-hero-media{
    height: 380px;
  }

  /* titre plus compact */
  .cs-title{
    font-size:22px;
    margin-bottom:6px;
  }

  /* catégories plus petites */
  .cs-pill{
    font-size:12px;
    padding:5px 9px;
  }

  /* boutons plus petits */
  .cs-actions{
    gap:6px;
  }

  .cs-btn{
    font-size:12px;
    padding:7px 9px;
    border-radius:10px;
    font-weight:600;
  }

  /* passe automatiquement sur 2 lignes */
  .cs-actions{
    flex-wrap:wrap;
  }

  /* limite largeur bouton */
  .cs-btn{
    flex: 1 1 calc(50% - 6px);
    justify-content:center;
  }

}

/*=======================================================
     CSS commerces_site
=========================================================*/

/* ===== MODAL SAFE (Safari/Chrome) ===== */
.cs-modal{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;                 /* fallback */
  height: -webkit-fill-available;/* iOS Safari */
  background: rgba(0,0,0,.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
  padding: 2vh 2vw;
}

.cs-modal.is-open{ display:flex; }

/* Important: éviter les bugs de layer Safari */
.cs-modal, .cs-modal *{
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.cs-modal-box{
  position: relative;
  width: 90vw;
  height: 90vh;
  background: rgba(15,15,15,.94);
  border-radius: 16px;
  overflow: hidden;
  display:flex;
  flex-direction: column;
}

/* top bar */
.cs-modal-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 12px;
  gap: 10px;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 14px;
  user-select: none;
}

.cs-modal-count{ opacity:.85; }

/* Bouton fermer "ABSOLU" = jamais caché par Safari */
.cs-modal-close-abs{
  position:absolute;
  top: 10px;
  right: 10px;
  z-index: 99999999;
  border:0;
  background: rgba(255,255,255,.14);
  color:#fff;
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
}
.cs-modal-close-abs:hover{ background: rgba(255,255,255,.20); }

.cs-modal-stage{
  flex: 1;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
  overflow: hidden;
}

.cs-modal-img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  user-select:none;
  -webkit-user-drag:none;
  will-change: transform;
  transition: transform 140ms ease;
}

/* Prev/Next toujours visibles */
.cs-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index: 99999999;
  border:0;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  cursor:pointer;
  background: rgba(255,255,255,.14);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  user-select:none;
}
.cs-nav:hover{ background: rgba(255,255,255,.20); }
.cs-nav:disabled{ opacity:.35; cursor:not-allowed; }

.cs-prev{ left: 12px; }
.cs-next{ right: 12px; }

/* Miniatures */
.cs-thumbs{
  padding: 8px 10px 12px;
  display:flex;
  gap: 8px;
  overflow-x: auto;
  background: rgba(0,0,0,.25);
}
.cs-thumb{
  flex: 0 0 auto;
  width: 60px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.15);
  cursor:pointer;
  opacity: .75;
  background: transparent;
  padding: 0;
}
.cs-thumb.is-active{
  border-color: rgba(255,255,255,.75);
  opacity: 1;
}
.cs-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Mobile */
@media (max-width: 600px){
  .cs-modal-box{ width: 92vw; height: 92vh; }
  .cs-nav{ width: 52px; height: 52px; font-size: 24px; }
  .cs-thumb{ width: 64px; height: 46px; }
}

/* ===== Hide menu sticky when modal open (super safe) ===== */
body.cs-modal-open .cs-sticky{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/*========================*/
/* Affichage des horaires */
/*========================*/
./* Bloc Horaires */
.cs-hours { display: grid; gap: 14px; }

/* Entête: titre + statut */
.cs-hours-head{
  /*display:flex;*/
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.cs-h2{ margin:0; font-size:18px; line-height:1.2; }

/* Statut pill - version fluo (même style que cs-today-badge) */
.cs-status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  font-size:15px;
  font-weight:800;
  white-space: nowrap;

  /* base neutre, la couleur vient des variantes */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

/* le point utilise currentColor */
.cs-status-dot{
  width:10px; height:10px; border-radius:50%;
  background: currentColor;
  opacity:.95;
  box-shadow: 0 0 10px currentColor;
}

/* ✅ OUVERT : vert fluo */
.cs-status.on{
  color:#39ff14;
  background: rgba(57, 255, 20, .18);
  border-color: rgba(57, 255, 20, .55);
  box-shadow: 0 0 18px rgba(57, 255, 20, .25);
}

/* ✅ FERMÉ : rouge fluo */
.cs-status.off{
  color:#ff2d2d;
  background: rgba(255, 45, 45, .16);
  border-color: rgba(255, 45, 45, .55);
  box-shadow: 0 0 18px rgba(255, 45, 45, .22);
}

/* optionnel */
.cs-status.mid{
  color:#ffb020;
  background: rgba(255, 176, 32, .16);
  border-color: rgba(255, 176, 32, .55);
  box-shadow: 0 0 18px rgba(255, 176, 32, .18);
}
/* Saison */
.cs-hours-season{
  padding-top:8px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.cs-hours-season-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:700;
  font-size:14px;
  opacity:.95;
  margin-bottom:10px;
}

/* Liste des jours */
.cs-hours-list{
  display:grid;
  gap:8px;
  color:white;
}

.cs-hours-item{
  display: block !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.cs-hours-day{
  display: block !important;
  width: 100%;
  align-items:center;
  gap:8px;
  min-width: 45%;
}

.cs-hours-time{
  display: block !important;
  width: 100%;
  margin-top: 4px;
  text-align:right;
  font-weight:600;
  opacity:.95;
}

/* mini dot (aujourd’hui) */
.cs-mini-dot{
  width:8px; height:8px; border-radius:50%;
  background: rgba(255,255,255,.35);
}
.cs-mini-dot.on  { background:#39d98a; }
.cs-mini-dot.off { background:#ff5a5f; }
.cs-mini-dot.is-empty{ background: rgba(255,255,255,.15); }

/* badge Aujourd’hui */
.cs-today{
  margin-left:6px;
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  opacity:.9;
}

/* Mise en évidence de la ligne "aujourd'hui" */
.cs-hours-item.is-today{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

/* Mobile: stack time under day if needed */
@media (max-width: 420px){
  .cs-hours-item{
    flex-direction:column;
    align-items:flex-start;
  }
  .cs-hours-time{ text-align:left; }
}


/* -- Petit CSS utile (si tu peux l'ajouter dans ton CSS) :-- */

.cs-dot.is-empty{opacity:0;width:10px;height:10px;display:inline-block;}
.cs-hours-line{justify-content:space-between;gap:12px;padding:6px 0;}
.cs-hours-left{display:flex;align-items:center;gap:8px;min-width:220px;}
.cs-hours-right{margin-left:25px;}



/* --- Modal navigation --- */
.nav-modal{ position: fixed; inset: 0; display:none; z-index: 999999; }
.nav-modal[aria-hidden="false"]{ display:block; }
.nav-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.nav-modal__panel{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: min(520px, 92vw);
  background: rgba(255,255,255,.98);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.nav-modal__top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.nav-modal__title{ font-weight: 900; }
.nav-modal__close{ border:0; background: transparent; font-size: 18px; cursor:pointer; }
.nav-modal__content{ padding: 14px 16px 18px; }
.nav-modal__place{ font-weight: 900; margin-bottom: 10px; }
.nav-modal__actions{ display:flex; flex-direction:column; gap:10px; }
.nav-btn{
  display:flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color:#111;
}
.nav-btn--primary{ background:#111; color:#fff; border-color:#111; }
.nav-modal__note{ margin-top: 10px; font-size: 12px; opacity:.8; }

.cap-marker{
  width:36px;
  height:36px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  border:2px solid rgba(255,255,255,.85);
  font-size:18px;
  line-height:1;
}



.cs-today-badge{
  display:inline-flex;
  align-items:center;
  margin-left:10px;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(57, 255, 20, .18);
  border: 1px solid rgba(57, 255, 20, .55);
  color: #39ff14;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(57, 255, 20, .25);
  white-space: nowrap;
}


/* Saison active = vert fluo */
.cs-season-live{

  color:#39ff14;
  font-weight:900;

  background: rgba(57,255,20,.18);
  border:1px solid rgba(57,255,20,.55);

  padding:6px 14px;
  border-radius:999px;

  box-shadow:0 0 18px rgba(57,255,20,.25);

  display:inline-flex;
  align-items:center;
}

/* Saison inactive */
.cs-season{
  opacity:.75;
  font-weight:700;
}

:root{
  --card-bg: rgba(255,255,255,.08);
  --card-border: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --shadow: 0 18px 50px rgba(0,0,0,.25);
}

/* Si ton site est clair, tu peux poser ce bloc dans un wrapper sombre,
   ou adapter les variables ci-dessus. */

.share-card{
  max-width: 760px;

  padding: 18px 18px 14px;
  border-radius: 22px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.share-head{ display:flex; flex-direction:column; gap:2px; margin-bottom: 14px; }
.share-title{ font-weight: 700; font-size: 16px; color: var(--text); letter-spacing:.2px; }
.share-sub{ font-size: 13px; color: var(--muted); }

.share-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.sbtn{
  display:flex;
  align-items:center;
  gap:10px;

  padding: 12px 14px;
  border-radius: 16px;

  text-decoration:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);

  cursor:pointer;

  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  user-select:none;
}

.sbtn:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 32px rgba(0,0,0,.20);
}

.sbtn:active{
  transform: translateY(-1px) scale(.99);
}

.sico{
  width: 20px;
  height: 20px;
  display:grid;
  place-items:center;
}

.sico svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
  opacity: .95;
}

.slabel{
  font-size: 13px;
  font-weight: 650;
  letter-spacing:.2px;
}

/* accents subtils par réseau */
.s-fb{ border-color: rgba(24,119,242,.35); }
.s-x{ border-color: rgba(255,255,255,.18); }
.s-wa{ border-color: rgba(37,211,102,.35); }
.s-tg{ border-color: rgba(36,161,222,.35); }
.s-native{ border-color: rgba(123,92,255,.35); }
.s-copy{ border-color: rgba(255,255,255,.22); }

/* toast */
.share-foot{
  margin-top: 10px;
  min-height: 18px;
  font-size: 12.5px;
  color: var(--muted);
}

/* responsive */
@media (max-width: 520px){
  .sbtn{ flex: 1 1 calc(50% - 10px); justify-content:center; }
  .share-card{ padding: 16px; }
}



/* =========================
   VIDEOS - Netflix row v2
   ========================= */
.nx-wrap{
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.nx-head2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.nx-title2{
  font-weight: 1000;
  letter-spacing:.2px;
  font-size: 1.15rem;
}

.nx-meta2{
  opacity:.75;
  font-size:.9rem;
  margin-right:auto;
  margin-left:8px;
}

.nx-nav{display:flex;gap:8px}
.nx-arrow{
  width:42px;height:42px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.nx-arrow:hover{background: rgba(0,0,0,.35)}
.nx-arrow:active{transform: scale(.98)}

.nx-row2{
  display:flex;
  gap:12px;
  overflow:auto;
  padding: 6px 2px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.nx-row2::-webkit-scrollbar{height:10px}
.nx-row2::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
.nx-row2::-webkit-scrollbar-track{background:transparent}

.nx-card2{
  flex: 0 0 auto;
  width: 190px;
  padding:0;
  border:0;
  background: transparent;
  cursor:pointer;
  text-align:left;
  scroll-snap-align: start;
  border-radius: 18px;
  overflow:hidden;
  position:relative;
}
@media (min-width: 520px){ .nx-card2{ width: 220px; } }
@media (min-width: 900px){ .nx-card2{ width: 260px; } }

.nx-media{
  display:block;
  position:relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background:#0a0f1d;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nx-card2:hover .nx-media{
  transform: scale(1.05);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 22px 55px rgba(0,0,0,.35);
}

.nx-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.08) contrast(1.06);
}

.nx-grad{
  position:absolute;inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.05));
}

.nx-play2{
  position:absolute;
  left:12px; bottom:12px;
  width:42px;height:42px;
  border-radius: 999px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(8px);
  font-size: 18px;
  color:#fff;
}

.nx-cap{
  position:absolute;
  left:10px; right:10px; bottom:10px;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nx-cap-title{
  font-weight: 950;
  font-size: .95rem;
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.nx-cap-sub{
  opacity:.85;
  font-size: .85rem;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* =========================
   MODAL VIDEO (90% viewport)
   ========================= */
#vxModal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none;                 /* <- caché par défaut */
  pointer-events: none;
}

#vxModal[aria-hidden="false"]{
  display:block !important;      /* <- OBLIGATOIRE pour voir le popup */
  pointer-events: auto;
}

#vxModal .vx-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.80);
  backdrop-filter: blur(8px);
}

#vxModal .vx-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(90vw, 1200px);
  height: 90vh;
  border-radius: 22px;
  overflow:hidden;
  background: #0b0f1a;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 120px rgba(0,0,0,.70);
  display:flex;
  flex-direction:column;
}

#vxModal .vx-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.10));
  border-bottom: 1px solid rgba(255,255,255,.10);
}

#vxModal .vx-top-title{
  font-weight: 900;
  font-size: 1rem;
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

#vxModal .vx-close{
  border:0;
  cursor:pointer;
  color:#fff;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
#vxModal .vx-close:hover{ background: rgba(255,255,255,.16); }

#vxModal .vx-player{
  flex: 1 1 auto;
  background:#000;
}

#vxModal .vx-player iframe{
  width:100%;
  height:100%;
  border:0;
}

#vxModal .vx-desc{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.88);
  font-size: .95rem;
  line-height: 1.35;
  max-height: 22vh;
  overflow:auto;
}

/* =========================
   SOCIAL BUTTONS (visible!)
   ========================= */

/* Bloc social */
.social-block{
  margin-top: 18px;
}

.social-title{
  font-weight: 900;
  font-size: 1.05rem;
  margin-bottom: 14px;
  padding-left: 4px;
  letter-spacing: .3px;
  position: relative;
}

/* Petit accent visuel élégant */
.social-title::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:60px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg,#1877f2,#e1306c,#ff0000);
}


.social-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

@media (max-width: 520px){
  .social-grid{ grid-template-columns: 1fr; }
}

.social-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  text-decoration:none;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.social-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(0,0,0,.35);
  filter: brightness(1.03);
}

.social-btn:active{ transform: translateY(0); }

.social-ico{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  flex: 0 0 auto;
}
.social-ico i{
  font-size: 18px;
  color:#fff;
}

.social-txt{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width:0;
}
.social-name{
  font-weight: 900;
  letter-spacing:.2px;
  font-size: 1rem;
}
.social-sub{
  opacity:.9;
  font-size: .86rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 22ch;
}

.social-go{
  margin-left:auto;
  opacity:.9;
  font-weight:900;
  font-size: 1.05rem;
}

/* Brand backgrounds */
.social-fb{
  background: linear-gradient(135deg, #1877F2, #0B4FB3);
}
.social-ig{
  background: linear-gradient(135deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4);
}
.social-yt{
  background: linear-gradient(135deg, #FF0033, #B80022);
}
.social-web{
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
}




/* =========================================================
   POPUP SOIRÉES / OFFRES — COMPLET (cohérent HTML/JS)
========================================================= */

/* Modal base */
.soirees-modal{
  position:fixed; inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.soirees-modal[aria-hidden="false"]{ pointer-events:auto; opacity:1; }

.soirees-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.soirees-panel{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(94vw, 560px);
  max-height:82vh;
  overflow:hidden;

  background:#f4f7fb;
  color:#0b1b2b;
  border-radius:22px;
  box-shadow:0 22px 70px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.25);
  display:flex;
  flex-direction:column;
}

.soirees-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  border-bottom:1px solid rgba(0,0,0,.08);
}

.soirees-title{ font-weight:900; font-size:18px; letter-spacing:.2px; }

.soirees-close{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.7);
  color:#0b1b2b;
  padding:8px 12px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
}

.soirees-content{ padding:14px 14px 16px 14px; overflow:auto; }

.soirees-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.soirees-loading,
.soirees-empty{
  padding:14px;
  text-align:center;
  color:#2a3b52;
  opacity:.9;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
}

/* =========================================================
   CARTE ÉVÉNEMENT (ligne alignée + desc pleine largeur)
========================================================= */

.soiree-card{
  display:flex;
  flex-direction:column;
  gap:10px;

  background:rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  padding:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  text-decoration:none;
  color:#0b1b2b;
}

/* Ligne du haut: date | thumb | infos | chevron */
.soiree-row{
  display:grid;
  grid-template-columns: 92px 92px 1fr 22px;
  gap:12px;
  align-items:start;
}

/* Carré date */
.soiree-datebox{
  width:92px;
  height:92px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(16,123,255,.14), rgba(16,123,255,.06));
  border:1px solid rgba(16,123,255,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:10px 8px;
}
.soiree-day{
  font-size:34px;
  font-weight:950;
  line-height:1;
}
.soiree-month{
  font-size:14px;
  font-weight:900;
  opacity:.85;
  margin-top:6px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

/* Thumb flyer */
.soiree-thumb{
  width:92px;
  height:92px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ⚠️ blindage contre les styles globaux img */
.soiree-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
  max-width:none !important;
}

.soiree-fallback{
  font-size:26px;
  opacity:.75;
}

/* Infos */
.soiree-info{ min-width:0; }
.soiree-title{
  font-weight:950;
  font-size:16px;
  line-height:1.15;
  margin:0 0 6px 0;
}

/* Meta stable */
.soiree-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.soiree-line{
  font-size:13px;
  line-height:1.25;
  color:#2a3b52;
  opacity:.95;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Chevron */
.soiree-chev{
  font-size:26px;
  opacity:.35;
  align-self:center;
  justify-self:center;
}

/* Description pleine largeur (3 lignes) */
.soiree-desc{
  margin-top:6px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.08);

  font-size:14px;
  line-height:1.35;
  color:#0b1b2b;
  opacity:.92;

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Responsive */
@media (max-width:420px){
  .soiree-row{ grid-template-columns: 84px 84px 1fr 20px; gap:10px; }
  .soiree-datebox, .soiree-thumb{ width:84px; height:84px; }
  .soiree-day{ font-size:30px; }
  .soiree-title{ font-size:15px; }
  .soiree-line{ font-size:12px; }
}