/*
 Theme Name: Ekko Child
 Template: ekko
 Version: 1.0
*/

/* Below you can write your style */
/* === Actu (single-actualite) === */

.vc_grid-item-mini .vc_gitem_row .vc_gitem-col{padding: 7px 0!important}
.vc_grid-item-mini .vc_gitem-zone {background: transparent!important};
.vc_gitem-zone-a .vc_gitem-zone-mini {
    padding: 2px 5px 0px 5px !important;
    background: #fff!important;}

html, body { background:#000 !important; }
.actu-hero{
  position:relative;color:#fff;background:#111;
  padding: clamp(2rem, 6vw, 6rem) 0 clamp(1.5rem, 4vw, 3rem);
  isolation:isolate;
}
.actu-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    var(--hero, none);
  background-size:cover;background-position:center;
  filter:saturate(1) brightness(.9);
}
.actu-badge{
  display:inline-block;background:#e71d36;color:#fff;font-weight:800;
  padding:.35rem .7rem;border-radius:.35rem;transform:rotate(-2deg);
  text-decoration:none;
}
.actu-title{margin:.6rem 0 .4rem;font-weight:800;line-height:1.05;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
}
.actu-meta{opacity:.95;display:flex;gap:.6rem;flex-wrap:wrap}
.actu-chapo{font-size:clamp(1.05rem, 1.5vw, 1.25rem);margin:.9rem 0 0;max-width:60ch;opacity:.95}
.actu-share{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.share-btn{border:2px solid #fff;background:transparent;color:#fff;font-weight:800;border-radius:2px;padding:.45rem .9rem;cursor:pointer;text-decoration:none!important;}
.share-btn:hover{background:#e71d36!important;color:#fff!important;border:2px solid #e71d36;}

.actu-body{padding:clamp(1rem,3vw,2rem) 0;color:#111}
.actu-content{max-width:850px}
.actu-content img{height:auto;max-width:100%}
.actu-content h2{margin-top:1.2em}

.actu-footer{padding:1rem 0 2rem}
.actu-post-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.actu-post-nav .prev{text-align:left}
.actu-post-nav .next{text-align:right}
.back-to-list{justify-self:center;border:2px solid #000;padding:.5rem .9rem;border-radius:999px;text-decoration:none;font-weight:800;color:#000}
.back-to-list:hover{background:#000;color:#fff}

.actu-related{padding:1rem 0 3rem}
.actu-related__title{font-weight:800;font-size:clamp(1.5rem,2.2vw,2rem)}
.actu-related__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit, minmax(220px,1fr))}
.actu-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.actu-card__media{display:block;aspect-ratio:4/3;background:#000}
.actu-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.actu-card__body{padding:.9rem}
.actu-card__date{opacity:.7;font-size:.9rem}
.actu-card__title{margin:.25rem 0 0;font-size:1.05rem}


#wrapper .hide-title-section {
    position: relative;
    z-index: 10;
    background-color: #000!important;
    padding-bottom: 0;
}
section {
    padding: 0;
    position: relative;
    background: #000!important;
}


/* Page Actualité : corps toujours noir, aucun wrapper blanc */
body.is-actualite-single{ background:#000 !important; }
body.is-actualite-single .site,
body.is-actualite-single .content-area,
body.is-actualite-single .container,
body.is-actualite-single .entry-content{
  background: transparent !important;
}

/* HERO : fond noir même avant l'image, puis image via la variable --hero */
.actu .actu-hero{
  background-color:#000;                 /* fallback noir permanent */
  background-image: var(--hero, none);   /* image si présente */
  background-size: cover;
  background-position: 50% 35%;
  background-repeat: no-repeat;
  position: relative;
  color:#fff;
}
.actu .actu-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  pointer-events:none;
}
.actu .actu-hero__inner{
  position:relative;
  padding: clamp(40px, 6vw, 96px) 0;
  min-height: clamp(260px, 40vw, 520px);
  display:flex; flex-direction:column; gap:12px; justify-content:flex-end;
}

/* Mobile : cadrage un peu plus haut et ratio stable */
@media (max-width: 600px){
  .actu .actu-hero{
    background-position: 50% 20%;
    aspect-ratio: 16/9;  /* évite les sauts pendant le chargement */
    min-height: auto;
  }
  .actu .actu-hero__inner{
    padding: 14vw 0 8vw;
    min-height: 0;
  }
}








/* === HERO Actu : fond noir + image en cover via --hero === */
/* Fond noir + image en cover (si présente) */
.actu-header{
  background-color:#000;
  background-image: var(--hero, none);
  background-repeat:no-repeat;
  background-position: 50% 25%;
  background-size: cover;
  -webkit-background-size: cover; /* iOS anciens */
  color:#fff;
  position: relative;
}

/* voile de lisibilité (optionnel) */
.actu-header::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0));
  pointer-events:none;
}

/* Hauteur responsive avec plafond desktop = 450px */
.actu-header__inner{
  position:relative;
  /* hauteur “fluide” mais ne dépasse JAMAIS 450px */
  height: min(40vw, 450px);
  min-height: 220px;                 /* pour éviter un header trop petit */
  padding: clamp(24px, 4vw, 48px) 0; /* espace interne */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* Mobile : hauteur fixe = 300px */
@media (max-width:600px){
  .actu-content {
   
    padding: 0 30px;
}
  .actu-header{
    background-position: 50% 24%;
    background-attachment: scroll !important; /* iOS */
  }
  .actu-header__inner{
    height: 300px;
    min-height: 300px;
    max-height: 300px;               /* on verrouille bien */
    padding: 14vw 0 8vw;             /* un peu d'air en bas */
  }
}

@media (max-width: 959px) {
    .single-post .entry-header.blog-header {
        padding-bottom: 0;
        padding-top: 0PX;
    }
}

.actu-body {
    padding: 40px 0 90px 0!important;

}


@media (max-width: 499px) {
    .les-spectales .container {
        padding-right: 15px!important;
        padding-left: 15px;
    }
}


.back-to-top .fa {
    color: #000!important;
    font-size: 18px;
    line-height: 50px;
}

@media (max-width: 960px) {
    body {
        padding-bottom: 0px!important;
    }
}

@media (min-width: 500px) and (max-width: 600px) {
    .date-wrapper {
        position: absolute !important;
        right: 2px !important;
        margin-top: 24px!important;
        margin-right: 0px;
    }
}

.bloc-tarifs ul {
  list-style-type: none; /* enlève les puces */
  padding-left: 0;       /* enlève l’espace à gauche */
  margin: 0;             /* enlève la marge si nécessaire */
}

.bloc-tarifs li {
    padding: 5px 0;
    color: #fff;
    font-size: 23px;
    font-weight: bold;
}

.special-prix{font-size: 13px;
    padding-top: 5px;}
















.actus-grid .vc_is-hover,
.actus-grid .vc_is-hover * {
  transform: none !important;
  transition: none !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}


/* Désactive TOUTE animation/mouvement WPBakery sur le slider Actus en mobile */
@media (max-width: 767px) {
  .actus-swiper .vc_grid-item,
  .actus-swiper .vc_grid-item *,
  .actus-swiper .vc_gitem-animated-block,
  .actus-swiper .vc_gitem-animated-block *,
  .actus-swiper .vc_grid-item-mini,
  .actus-swiper .vc_grid-item-mini * {
    transform: none !important;
    transition: none !important;
    top: auto !important;
    bottom: auto !important;
  }

  /* On neutralise aussi les états hover/active/focus qui déclenchent l'anim */
  .actus-swiper .vc_grid-item:hover,
  .actus-swiper .vc_grid-item:active,
  .actus-swiper .vc_grid-item:focus,
  .actus-swiper .vc_grid-item.vc_is-hover,
  .actus-swiper .vc_grid-item-mini.vc_is-hover,
  .actus-swiper .vc_gitem-animated-block.vc_is-hover {
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    transition: none !important;
  }
}




@media (max-width: 767px) {
  .actus-swiper {
    overflow: hidden !important;
    padding: 0 16px 24px !important;
  }

  .actus-swiper .swiper-slide {
    width: auto;
  }

  .actus-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
  }

  .actus-pagination .swiper-pagination-bullet {
    width: 32px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,0.3);
    opacity: 1;
    transition: background 0.3s ease;
  }

  .actus-pagination .swiper-pagination-bullet-active {
    background: #EA1E63;
  }
}



    .wpb_wrapper .vc_grid-item-mini .blog-detailed-grid img {
        margin-bottom: 0;
        max-width: 100%;
        border-radius: 0;
    }


.vc_grid-item-mini .vc_gitem-zone-a .vc_gitem-row-position-middle, .vc_gitem-zone-b .vc_gitem-row-position-middle {
    top: -19px !important;
    padding: 2px 15px 0 15px !important;
    min-height: 235px;
}