/* ===========================
   Widget Grille Réalisation Classique + Overlay 
   =========================== */

.custom-realisation-grid{
  display:flex; flex-wrap:wrap; gap:30px; justify-content:flex-start;
}

/* ---- Carte générique ---- */
.realisation-card{
  width:100%;
  max-width:300px;
  transition:transform .3s ease;
  overflow:hidden !important; /* clippe image/overlay */
}
.realisation-card:hover{ transform:translateY(-5px); }

/* ------- Carte classique ------- */
.realisation-image{ position:relative; }
.realisation-image img{ width:100%; height:auto; display:block; }

.realisation-category{
  position:absolute; bottom:10px; left:10px;
  background:#f76b1c; color:#fff; padding:5px 12px;
  border-radius:999px; font-size:12px; font-weight:500;
}

.realisation-content{ padding:15px 10px; }
.realisation-content h3{ font-size:16px; font-weight:600; margin:10px 0 15px; }
.realisation-content h3 a{ color:#002d55; text-decoration:none!important; }
.realisation-link{
  color:#f76b1c; font-weight:500; font-size:14px;
  text-decoration:none; padding-bottom:3px; display:inline-block;
}

/* ------- Variante : image de fond + overlay ------- */
.real-card--overlay{
  position:relative;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  min-height:280px; display:block; color:inherit;
  overflow:hidden !important;
}

/* ⚠️ PAS de couleur ici : Elementor la mettra au hover/focus via le contrôle "Fond de l’overlay" */
.real-card--overlay .overlay{
  position:relative; display:block; width:100%; height:100%; text-decoration:none;
  transition:background-color .25s ease, transform .25s ease;
  border-radius:inherit !important;
}

.real-card--overlay .overlay-inner{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  gap:.5rem; padding:20px;
}

.real-card--overlay h3{ margin:0; font-size:18px; line-height:1.25; color:#fff; }
.real-card--overlay .realisation-link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:#fff; text-decoration:none; }
.real-card--overlay .realisation-icon{ width:16px; height:16px; display:inline-block; }

.real-card--overlay .realisation-category{
  position:absolute; top:12px; left:12px; padding:6px 12px;
  background:#f76b1c; color:#fff; border-radius:999px; font-size:12px; font-weight:600;
}

/* Apparition douce du contenu */
.real-card--overlay .overlay-inner,
.real-card--overlay .realisation-category{
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.real-card--overlay:hover .overlay-inner,
.real-card--overlay:hover .realisation-category,
.real-card--overlay .overlay:focus-visible .overlay-inner,
.real-card--overlay .overlay:focus-visible .realisation-category{
  opacity:1; transform:translateY(0);
}
.real-card--overlay .overlay:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* Icône overlay (inchangé) */
.real-card--overlay .real-overlay-icon{
  position:absolute; z-index:2; display:inline-block;
  width:44px; height:44px; opacity:0; transition:opacity .25s ease, transform .25s ease;
  --ovicon-off-top: 12px; --ovicon-off-right: 12px; --ovicon-off-bottom: 12px; --ovicon-off-left: 12px;
  --ovicon-pad: 6px;
  --ovicon-mar-top: 8px; --ovicon-mar-right: 8px; --ovicon-mar-bottom: 8px; --ovicon-mar-left: 8px;
}
.real-card--overlay .real-overlay-icon::before{
  content:""; position:absolute; inset:0; background:#fff; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.12); z-index:0;
}
.real-card--overlay .real-overlay-icon::after{
  content:""; position:absolute; inset:var(--ovicon-pad); background-color:#000;
  -webkit-mask-image:var(--ovicon-url); mask-image:var(--ovicon-url);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:100% 100%; z-index:1;
}
.real-card--overlay:hover .real-overlay-icon,
.real-card--overlay .overlay:focus-visible .real-overlay-icon{ opacity:1; }

/* Positions de l’icône (idem) */
.real-card--overlay .real-overlay-icon.pos-top-left{ top:calc(var(--ovicon-off-top) + var(--ovicon-mar-top)); left:calc(var(--ovicon-off-left) + var(--ovicon-mar-left)); }
.real-card--overlay .real-overlay-icon.pos-top-center{ top:calc(var(--ovicon-off-top) + var(--ovicon-mar-top)); left:50%; transform:translateX(-50%); }
.real-card--overlay .real-overlay-icon.pos-top-right{ top:calc(var(--ovicon-off-top) + var(--ovicon-mar-top)); right:calc(var(--ovicon-off-right) + var(--ovicon-mar-right)); }
.real-card--overlay .real-overlay-icon.pos-center-left{ top:50%; left:calc(var(--ovicon-off-left) + var(--ovicon-mar-left)); transform:translateY(-50%); }
.real-card--overlay .real-overlay-icon.pos-center{ top:50%; left:50%; transform:translate(-50%,-50%); }
.real-card--overlay .real-overlay-icon.pos-center-right{ top:50%; right:calc(var(--ovicon-off-right) + var(--ovicon-mar-right)); transform:translateY(-50%); }
.real-card--overlay .real-overlay-icon.pos-bottom-left{ bottom:calc(var(--ovicon-off-bottom) + var(--ovicon-mar-bottom)); left:calc(var(--ovicon-off-left) + var(--ovicon-mar-left)); }
.real-card--overlay .real-overlay-icon.pos-bottom-center{ bottom:calc(var(--ovicon-off-bottom) + var(--ovicon-mar-bottom)); left:50%; transform:translateX(-50%); }
.real-card--overlay .real-overlay-icon.pos-bottom-right{ bottom:calc(var(--ovicon-off-bottom) + var(--ovicon-mar-bottom)); right:calc(var(--ovicon-off-right) + var(--ovicon-mar-right)); }

/* Tactile : contenu visible */
@media (hover:none) and (pointer:coarse){
  .real-card--overlay .overlay-inner,
  .real-card--overlay .realisation-category,
  .real-card--overlay .real-overlay-icon{ opacity:1; transform:none; }
}

/* ===========================
   Classic card ONLY (scoped)
   =========================== */

.realisation-card.is-classic{
  --classic-badge-top: 12px;
  --classic-badge-right: auto;
  --classic-badge-bottom: 12px;
  --classic-badge-left: 12px;
}

/* Badge dans l’image */
.realisation-card.is-classic.badgepos-in-bottom .realisation-image .realisation-category{
  position:absolute;
  bottom: var(--classic-badge-bottom);
  left: var(--classic-badge-left);
  top:auto;
  right:auto;
}

.realisation-card.is-classic.badgepos-in-top .realisation-image .realisation-category{
  position:absolute;
  top: var(--classic-badge-top);
  left: var(--classic-badge-left);
  bottom:auto;
  right:auto;
}

/* Badge hors image (dans le contenu) */
.realisation-card.is-classic .realisation-category--outside{
  position:static;
  display:inline-flex;
  align-items:center;
  margin:12px 0 6px;
}

/* Meta (classic only) */
.realisation-card.is-classic .realisation-meta{
  margin: 10px 0 8px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(0,0,0,.55);
}

.realisation-card.is-classic .realisation-meta__sep{
  margin: 0 6px;
}

/* ===========================
   Variante Carousel (CLEAN)
   =========================== */

/* Track */
.ypl-grille-cpt.grr--carousel .custom-realisation-grid.is-carousel{
  display:flex;
  flex-wrap:nowrap;
  gap:24px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-bottom:12px;

  /* scrollbar off */
  scrollbar-width:none;
}
.ypl-grille-cpt.grr--carousel .custom-realisation-grid.is-carousel::-webkit-scrollbar{ height:0; }

.ypl-grille-cpt.grr--carousel .custom-realisation-grid.is-carousel .realisation-card{
  flex:0 0 auto;
  width:360px;
  max-width:none;
  scroll-snap-align:start;
}

/* Titre + flèche à droite */
.ypl-grille-cpt.grr--carousel .realisation-title-row{
 display:flex;
  align-items:center;
  justify-content:flex-start;
}

.ypl-grille-cpt.grr--carousel .realisation-title-arrow{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left: 8px;
}

.ypl-grille-cpt.grr--carousel .realisation-arrow-icon{

  display:block;
}
.ypl-grille-cpt.grr--carousel .realisation-arrow-fallback{
  font-size:20px;
  line-height:1;
}

/* Footer (progress + flèches) */
.ypl-grille-cpt.grr--carousel .grr-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  width:100%;
  box-sizing:border-box;
  padding:0; /* desktop */
}

.ypl-grille-cpt.grr--carousel .grr-progress{
  flex:1 1 auto;
  height:2px;
  background: rgba(0,0,0,.12);
  border-radius:999px;
  overflow:hidden;
}
.ypl-grille-cpt.grr--carousel .grr-progress__bar{
  height:100%;
  width:0%;
  background: rgba(0,0,0,.55);
  border-radius:999px;
}

/* Flèches style maquette (chevrons, sans bouton) */
.ypl-grille-cpt.grr--carousel .grr-arrows{
  display:flex;
  align-items:center;
  gap:14px;
}

.ypl-grille-cpt.grr--carousel .grr-arrow{
  width:auto;
  height:auto;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  cursor:pointer;

  font-size:28px;
  line-height:1;
  color: rgba(0,0,0,.45);
}

.ypl-grille-cpt.grr--carousel .realisation-title-row__text,
.ypl-grille-cpt.grr--carousel .realisation-title-inimage__text{
  flex: 0 1 auto;
  min-width: 0;
}

.ypl-grille-cpt.grr--carousel .realisation-title-arrow,
.ypl-grille-cpt.grr--carousel .realisation-title-inimage__arrow{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
}

.ypl-grille-cpt.grr--carousel .grr-arrow:hover{ color: rgba(0,0,0,.65); }
.ypl-grille-cpt.grr--carousel .grr-arrow:disabled{ opacity:.35; cursor:not-allowed; }

/* MOBILE : full-bleed UNIQUEMENT sur le track (PAS sur tout le widget)
   => le "peek" fonctionne + la nav ne disparaît plus */
@media (max-width: 767px){

  /* Track sort du container */
  .ypl-grille-cpt.grr--carousel .custom-realisation-grid.is-carousel{
    width:100vw;
    max-width:100vw;
    margin-right: 0px ;
    padding-left:10px;
    padding-right:50px;
    margin-left: 0px;
  }

  .ypl-grille-cpt.grr--carousel .custom-realisation-grid.is-carousel .realisation-card{
    width:82vw;
  }

  /* Nav reste bien visible et alignée */
  .ypl-grille-cpt.grr--carousel .grr-nav{
    padding:0 20px;
  }
}

@media (max-width: 767px){
  .ypl-grille-cpt.grr--carousel .grr-progress{
    width: 90%;
    flex: 0 0 auto;
  }
}

@media (max-width: 767px){
  .ypl-grille-cpt.grr--carousel .grr-nav{
    gap: 30px; /* un peu moins */
  }

  .ypl-grille-cpt.grr--carousel .grr-progress{
    min-width: 180px;  /* ajuste (160–220) */
  }
}

/* ============ Carousel : pastilles taxonomies ============ */
.ypl-grille-cpt.grr--carousel .realisation-image{
  position:relative;
}

.ypl-grille-cpt.grr--carousel .realisation-pills{
  position:absolute;
  top:12px;
  left:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  z-index:2;
}

.ypl-grille-cpt.grr--carousel .realisation-pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  background:#fff;
  color:#002d55;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

/* ============ Carousel : titre dans l’image ============ */
.ypl-grille-cpt.grr--carousel .realisation-title-inimage{
  position:absolute;
  left:12px;
  right:12px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  pointer-events:auto;
}

.ypl-grille-cpt.grr--carousel .realisation-title-inimage.pos-top{ top:12px; }
.ypl-grille-cpt.grr--carousel .realisation-title-inimage.pos-bottom{ bottom:12px; }

.ypl-grille-cpt.grr--carousel .realisation-title-inimage__link{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:22px;
  line-height:1.1;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.ypl-grille-cpt.grr--carousel .realisation-title-inimage__arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

@media (max-width: 767px){
  .ypl-grille-cpt.grr--carousel .realisation-title-inimage__link{
    font-size:18px;
  }
}


/* ============ Carousel : pastilles taxonomies ============ */
.ypl-grille-cpt.grr--carousel .realisation-image{ position:relative; }

.ypl-grille-cpt.grr--carousel .realisation-pills{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  z-index:3;
}

.ypl-grille-cpt.grr--carousel .realisation-pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  background:#fff;
  color:#002d55;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

/* ============ Sous-titre entre crochets ============ */
.ypl-grille-cpt.grr--carousel .realisation-subtitle{
  font-size:12px;
  font-weight:600;
  opacity:.9;
  margin-bottom:6px;
  color:inherit;
}

/* ============ Titre dans l’image ============ */
.ypl-grille-cpt.grr--carousel .realisation-title-inimage{
  position:absolute;
  left:12px;
  right:12px;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:12px;
}

.ypl-grille-cpt.grr--carousel .realisation-title-inimage.pos-top{ top:12px; align-items:flex-start; }
.ypl-grille-cpt.grr--carousel .realisation-title-inimage.pos-bottom{ bottom:12px; }

.ypl-grille-cpt.grr--carousel .realisation-title-inimage__text{
  display:flex;
  flex-direction:column;
  gap:0;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.ypl-grille-cpt.grr--carousel .realisation-title-inimage__link{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:22px;
  line-height:1.1;
}

/* ============ Titre sous l’image : sous-titre + title ============ */
.ypl-grille-cpt.grr--carousel .realisation-title-row__text{
  display:flex;
  flex-direction:column;
}

/* Mobile */
@media (max-width: 767px){
  .ypl-grille-cpt.grr--carousel .realisation-title-inimage__link{ font-size:18px; }
}

/* HOTFIX: assure un titre lisible quand il est sous l'image */
.ypl-grille-cpt.grr--carousel .realisation-title-row .realisation-title a{
  color:#002d55 !important;
}



/* Hoover zoom */ 


/* =========================================
   Hover zoom — uniquement carousel
========================================= */

.custom-realisation-grid.is-carousel .realisation-image {
    overflow: hidden;
}

.custom-realisation-grid.is-carousel .realisation-image img {
    transition: transform 0.5s ease;
    display: block;
    width: 100%;
}

.custom-realisation-grid.is-carousel .realisation-card:hover .realisation-image img {
    transform: scale(1.08);
}

/* Désactive le text-decoration */ 

.ypl-grille-cpt .realisation-title-inimage__link,
.ypl-grille-cpt .realisation-title-row .realisation-title a {
  text-decoration: none !important;
}

/* ===========================
   Classic -> Carousel MOBILE (scoped)
   =========================== */
@media (max-width: 767px){

  /* Active seulement si l’option est ON sur ce widget */
  .ypl-grille-cpt.grr--classic-mobile-carousel .custom-realisation-grid.is-carousel-mobile{
    display:flex;
    flex-wrap:nowrap;
    gap:30px;                /* tu peux garder 30 si tu veux */
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding-bottom:12px;

    /* “hors screen / peek” comme ta variante carousel */
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    padding-left: 10px;
    padding-right: 50px;

    /* scrollbar off */
    scrollbar-width:none;
  }

  .ypl-grille-cpt.grr--classic-mobile-carousel .custom-realisation-grid.is-carousel-mobile::-webkit-scrollbar{
    height:0;
  }

 .ypl-grille-cpt.grr--classic-mobile-carousel .custom-realisation-grid.is-carousel-mobile .realisation-card{
  flex:0 0 auto;
  width:82vw;              /* garde le “peek” */
  /* ✅ on NE touche PAS au max-width ici, pour laisser Elementor contrôler */
  scroll-snap-align:start;
}
}