/* ===================================================== */
/* EB Gallery – CSS propre (images + thumbs + rubans + vidéo) */
/* ===================================================== */

:root{
  --eb-border:#e4e4e4;
  --eb-radius-main:10px;
  --eb-radius-thumb:8px;

  --eb-accent:#3B7B2A;
  --eb-hover:#FFE28A;

  --eb-green:#67a71f;
  --eb-orange:#f39a10;
  --eb-yellow:#f3b300;
}

/* -------- Layout global -------- */
.eb-gallery{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* -------- Zone média principale -------- */
.eb-gallery-main{
  position:relative;
  border:1px solid var(--eb-border);
  border-radius:var(--eb-radius-main);
  overflow:hidden;
  background:#fff;
}

/* le container qui reçoit img / iframe (dans ton HTML il y a [data-eb-main]) */
.eb-gallery-main [data-eb-main],
.eb-gallery [data-eb-main]{
  position:relative;
  width:100%;
}

/* Image principale : PAS de zoom / PAS de crop */
.eb-gallery-main img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;     /* clé anti-déformation */
  transform:none;         /* clé anti-zoom */
}

/* IMPORTANT : on supprime le hover zoom qui te gêne */
.eb-gallery-main:hover img{
  transform:none;
}

/* -------- Thumbnails -------- */
.eb-gallery-thumbs{
  display:flex;
  gap:8px;
  justify-content:flex-start;
  flex-wrap:nowrap;
}

/* bouton miniature */
.eb-thumb{
  position:relative;
  flex:0 0 80px;
  width:80px;
  height:80px;

  border:1px solid var(--eb-border);
  border-radius:var(--eb-radius-thumb);
  background:#fff;
  padding:0;
  overflow:hidden;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* image miniature : on peut garder cover (c’est normal pour des thumbs carrées) */
.eb-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.eb-thumb:hover{
  border-color:var(--eb-hover);
  box-shadow:0 0 0 1px var(--eb-hover);
  transform:translateY(-1px);
}

.eb-thumb.is-active{
  border-color:var(--eb-accent);
  box-shadow:0 0 0 2px var(--eb-accent);
}

/* mobile : thumbs scroll horizontal */
@media (max-width:768px){
  .eb-gallery{
    gap:20px;
  }
  .eb-thumb{
    border:2px solid #d0d0d0;
    box-shadow:0 1px 2px rgba(0,0,0,.08);
    overflow:hidden;
    box-sizing:border-box;
  }
  .eb-thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block;
  }
  .eb-thumb:hover{
    border-color:var(--eb-hover);
    box-shadow:0 0 0 2px var(--eb-hover), 0 1px 2px rgba(0,0,0,.08);
  }
  .eb-thumb.is-active{
    border-color:var(--eb-accent);
    box-shadow:0 0 0 2px rgba(59,123,42,.35), 0 1px 2px rgba(0,0,0,.08);
  }
  .eb-gallery-thumbs{
    overflow-x:auto;
    padding:4px 4px 8px;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
}

/* ===================================================== */
/* RUBANS – visibles UNIQUEMENT quand .eb-show-ribbons est présent */
/* ===================================================== */

/* par défaut OFF */
.eb-gallery .eb-ribbons{
  display:none;
}

/* ON uniquement via JS (quand tu es sur la 1ère photo) */
.eb-gallery.eb-show-ribbons .eb-ribbons{
  display:flex;
}

/* placement */
.eb-ribbons{
  position:absolute;
  top:16px;
  right:14px;
  z-index:50;

  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  pointer-events:none;
}

/* ruban */
.eb-ribbon{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  position:relative;

  padding:9px 14px 9px 44px;
  border-radius:6px;
  clip-path:polygon(34px 0, 100% 0, 100% 100%, 0 100%);

  color:#fff;
  line-height:1.1;
  white-space:nowrap;

  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

/* typo demandée */
.eb-ribbon__main{
  display:block;
  font-size:16px;
  font-weight:500;
}

.eb-ribbon__extra{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:500;
  opacity:.92;
}

/* couleurs */
.eb-ribbon--green{ background:var(--eb-green); }
.eb-ribbon--orange{ background:var(--eb-orange); }
.eb-ribbon--yellow{ background:var(--eb-yellow); }

/* mobile rubans */
@media (max-width:767px){
  .eb-ribbons{
    top:12px;
    right:10px;
    gap:6px;
  }
  .eb-ribbon{
    padding:8px 12px 8px 34px;
    border-radius:5px;
    clip-path:polygon(26px 0, 100% 0, 100% 100%, 0 100%);
  }
  .eb-ribbon__main{
    font-size:15px;
    font-weight:500;
  }
}

/* ===================================================== */
/* YOUTUBE – miniature + lecteur */
/* ===================================================== */

/* miniature vidéo (icone play) */
.eb-thumb.is-video{
  position:relative;
}

.eb-video-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:26px;
  height:26px;
  border-radius:999px;

  background:rgba(0,0,0,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:13px;
  line-height:1;
  pointer-events:none;
}

/* lecteur vidéo responsive */
.eb-video-wrap{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}

.eb-video-wrap iframe,
.eb-video-iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

/* ===================================================== */
/* EB FIX FINAL : image principale toujours entière       */
/* (écrase thème/Elementor)                               */
/* ===================================================== */

.eb-gallery .eb-gallery-main,
.eb-gallery .eb-gallery-main [data-eb-main]{
  height:auto !important;
  max-height:none !important;
}

/* cible large : au cas où Elementor injecte picture/source */
.eb-gallery .eb-gallery-main img,
.eb-gallery .eb-gallery-main picture img,
.eb-gallery [data-eb-main] img,
.eb-gallery [data-eb-main] picture img{
  width:90% !important;
  height:auto !important;            /* 🔥 empêche height:100% */
  max-width:100% !important;
  max-height:none !important;

  object-fit:contain !important;     /* 🔥 image entière */
  object-position:center center !important;

  transform:none !important;         /* 🔥 pas de zoom */
}

/* si un parent force une hauteur + overflow */
.eb-gallery [data-eb-main]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.eb-gallery .eb-gallery-main img,
.eb-gallery .eb-gallery-main picture img,
.eb-gallery [data-eb-main] img{
  height:auto !important;
  width:80% !important;
  max-width:80% !important;
  object-fit:contain !important;
}

/* ===================================================== */
/* FIX MOBILE – Elementor/Thème remet height:100%         */
/* Objectif: image principale toujours entière            */
/* ===================================================== */

@media (max-width: 767px){

  /* Le conteneur ne doit pas imposer une hauteur */
  .eb-gallery .eb-gallery-main,
  .eb-gallery .eb-gallery-main [data-eb-main],
  .eb-gallery [data-eb-main]{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  /* L'image principale doit rester proportionnelle */
  .eb-gallery .eb-gallery-main img,
  .eb-gallery [data-eb-main] img,
  .eb-gallery .eb-gallery-main picture img,
  .eb-gallery [data-eb-main] picture img{
    width:100% !important;
    height:auto !important;              /* 🔥 annule height:100% mobile */
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
  }

  /* Si Elementor a mis display:flex + align-items qui étire */
  .eb-gallery [data-eb-main]{
    display:block !important;
  }
}