/* =========================================================
   figuier-grilles-carrousels.css — FIGUIER (PRODUCTION)
   Objectifs :
   - "Voir tout" = vrai bouton
   - Miniatures 16:9 uniformisées SANS rognage
   - Fix rognage mobile (Kadence/cover/position absolute) ✅
   - Swiper stable + fallback sans JS
   - Pas de tools-block ici
   ========================================================= */

/* =========================================================
   Sections
   ========================================================= */
.figuier-section,
.homepage-latest{
  background: transparent;
  max-width: var(--container, 1180px);
  margin: 0 auto;
  padding: var(--s-6, 24px) var(--s-6, 24px);
}

/* Évite les vides entre rubriques */
.figuier-section + .figuier-section,
.homepage-latest + .homepage-latest,
.figuier-section + .homepage-latest,
.homepage-latest + .figuier-section{
  padding-top: var(--s-5, 18px);
}

/* Titres */
.figuier-section h2,
.homepage-latest h2{
  font-family: 'EB Garamond', serif;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--gris-livre, #5F5C57);
  text-align: left !important;
  margin: 0 0 var(--s-5, 18px) 0;
  padding-bottom: var(--s-3, 10px);
  border-bottom: 2px solid var(--beige-miel, #EADBC8);
}

/* =========================================================
   Grilles (non Swiper)
   ========================================================= */
.figuier-grid,
.figuier-latest-items{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-6, 24px);
  padding: 0;
}

.figuier-latest-items{
  margin-top: var(--s-5, 18px);
  align-items: start;
}

/* =========================================================
   Cartes
   ========================================================= */
.figuier-card,
.figuier-item,
.swiper-slide{
  background: var(--blanc, #FFFFFF);
  border-radius: var(--radius-md, 14px);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,0.05));
  padding: 16px !important;
  text-align: center;
  transition:
    transform var(--t, 220ms) var(--e, cubic-bezier(.2,.8,.2,1)),
    box-shadow var(--t, 220ms) var(--e, cubic-bezier(.2,.8,.2,1));
  margin: 0 !important;
}

.figuier-card:hover,
.figuier-item:hover,
.swiper-slide:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.08));
}

/* Titres carte */
.figuier-card h3,
.figuier-item h3,
.swiper-slide h3{
  font-family: 'EB Garamond', serif;
  font-size: 20px;
  color: var(--brun-dore, #B28C64);
  margin: 10px 0 var(--s-3, 10px);
}

.figuier-card h3 a,
.figuier-item h3 a,
.swiper-slide h3 a{
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.figuier-card h3 a:hover,
.figuier-item h3 a:hover,
.swiper-slide h3 a:hover{
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* Extrait */
.figuier-card p,
.figuier-item p,
.swiper-slide p{
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  color: var(--gris-chaud, #83776C);
  line-height: 1.6;
  margin: 0;
}

/* =========================================================
   VIGNETTES — 16:9 SANS ROGNAGE (contain)
   IMPORTANT : ton rognage actuel vient presque toujours de :
   - object-fit: cover imposé par le thème/une règle Kadence
   - ou image position:absolute + overflow hidden
   => on “reset” tout + contain en super priorité
   ========================================================= */
.figuier-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(250,246,242,0.95), rgba(234,219,200,0.65));
  border: 1px solid rgba(178,140,100,0.12);

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

  /* évite certains layouts où l'enfant est absolute */
  position: relative;
}

/* Si l'image est enveloppée dans un lien */
.figuier-thumb > a{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;

  /* si certains templates utilisent background-image sur le lien */
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Anti-rognage “hard reset” */
.figuier-section .figuier-thumb img,
.homepage-latest .figuier-thumb img,
.figuier-thumb img,
.figuier-thumb a img,
.figuier-thumb picture img,
.figuier-thumb .wp-post-image{
  /* Dimensions contraintes => object-fit fonctionne */
  width: 100% !important;
  height: 100% !important;

  /* Le coeur du fix */
  object-fit: contain !important;
  object-position: center !important;

  /* Reset des thèmes qui posent l'image en absolute */
  position: static !important;
  inset: auto !important;
  transform: none !important;

  display: block !important;
  border-radius: 10px;
}

/* =========================================================
   Swiper — stable + fallback si JS ne s'initialise pas
   ========================================================= */
.swiper.figuier-swiper{
  position: relative;
  width: 100%;
  padding: var(--s-4, 14px) 0;
  margin: 0 !important;
}

/* Fallback si Swiper n'est pas initialisé */
.swiper.figuier-swiper:not(.swiper-initialized){
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4, 14px);
}

.swiper.figuier-swiper:not(.swiper-initialized) .swiper-wrapper{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-6, 24px);
}

.swiper.figuier-swiper:not(.swiper-initialized) .swiper-slide{
  flex: 0 0 320px;
  scroll-snap-align: start;
}

/* Flèches (desktop/tablet) */
.swiper-button-next,
.swiper-button-prev{
  position: absolute !important;
  z-index: 10 !important;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  border: 1px solid rgba(178,140,100,0.25);
  margin-top: 0 !important;
  transition:
    transform var(--t, 220ms) var(--e, cubic-bezier(.2,.8,.2,1)),
    box-shadow var(--t, 220ms) var(--e, cubic-bezier(.2,.8,.2,1)),
    background var(--t, 220ms) var(--e, cubic-bezier(.2,.8,.2,1));
}

.swiper-button-prev{ left: 8px !important; }
.swiper-button-next{ right: 8px !important; }

.swiper-button-next::after,
.swiper-button-prev::after{
  font-size: 14px;
  color: var(--brun-dore, #B28C64);
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.98);
}

/* Pagination */
.swiper-pagination{
  position: relative !important;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.swiper-pagination-bullet{
  width: 7px;
  height: 7px;
  opacity: 1;
  background: rgba(178,140,100,0.25);
}
.swiper-pagination-bullet-active{
  background: rgba(178,140,100,0.90);
}

/* =========================================================
   "Voir tout" — bouton verrouillé
   ========================================================= */
.homepage-latest .voir-tout-container,
.figuier-section .voir-tout-container{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  margin: 18px 0 10px !important;
  padding: 0 !important;
  text-align: center !important;
}

.homepage-latest .voir-tout-container .btn-voir-tout,
.figuier-section .voir-tout-container .btn-voir-tout,
.homepage-latest .voir-tout-container > a,
.figuier-section .voir-tout-container > a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 26px !important;
  border-radius: 999px !important;

  background: var(--beige-miel, #EADBC8) !important;
  color: #3C2F2F !important;

  text-decoration: none !important;
  border-bottom: 0 !important;
  outline: 0 !important;

  border: 1px solid rgba(178,140,100,0.20) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.06) !important;

  font-family: 'EB Garamond', serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;

  transition: all 220ms cubic-bezier(.2,.8,.2,1) !important;
  margin: 0 !important;
}

.homepage-latest .voir-tout-container .btn-voir-tout:hover,
.figuier-section .voir-tout-container .btn-voir-tout:hover,
.homepage-latest .voir-tout-container > a:hover,
.figuier-section .voir-tout-container > a:hover{
  background: var(--beige-hover, #D6C2A7) !important;
  color: var(--blanc, #FFFFFF) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 22px rgba(0,0,0,0.08) !important;
}

.homepage-latest .voir-tout-container .btn-voir-tout:focus,
.homepage-latest .voir-tout-container .btn-voir-tout:focus-visible,
.figuier-section .voir-tout-container .btn-voir-tout:focus,
.figuier-section .voir-tout-container .btn-voir-tout:focus-visible,
.homepage-latest .voir-tout-container > a:focus,
.homepage-latest .voir-tout-container > a:focus-visible,
.figuier-section .voir-tout-container > a:focus,
.figuier-section .voir-tout-container > a:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(178,140,100,0.30),
    0 14px 22px rgba(0,0,0,0.08) !important;
}

/* =========================================================
   Anti-spacers home/front-page
   ========================================================= */
.home .wp-block-spacer,
.front-page .wp-block-spacer,
.home .kt-spacer,
.front-page .kt-spacer,
.home .kadence-spacer,
.front-page .kadence-spacer,
.home .kb-spacer,
.front-page .kb-spacer{
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.home .wp-block-kadence-rowlayout,
.front-page .wp-block-kadence-rowlayout{
  margin-block: 0 !important;
  padding-block: 0 !important;
}

.home .kt-row-column-wrap,
.front-page .kt-row-column-wrap{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 768px){

  .figuier-section,
  .homepage-latest{
    padding: 18px 16px;
  }

  .figuier-section h2,
  .homepage-latest h2{
    font-size: 22px;
    margin-bottom: 14px;
    padding-bottom: 8px;
  }

  /* Fallback slides : largeur plus “mobile-native” */
  .swiper.figuier-swiper:not(.swiper-initialized) .swiper-slide{
    flex: 0 0 86%;
  }

  /* Flèches : on masque en mobile */
  .swiper-button-next,
  .swiper-button-prev{
    display: none !important;
  }

  /* "Voir tout" : pleine largeur */
  .homepage-latest .voir-tout-container,
  .figuier-section .voir-tout-container{
    margin: 14px 0 6px !important;
  }

  .homepage-latest .voir-tout-container .btn-voir-tout,
  .figuier-section .voir-tout-container .btn-voir-tout,
  .homepage-latest .voir-tout-container > a,
  .figuier-section .voir-tout-container > a{
    width: min(92vw, 360px) !important;
    padding: 12px 18px !important;
    font-size: 15.5px !important;
  }

  /* Vignette un peu plus haute en mobile (toujours sans crop) */
  .figuier-thumb{
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================
   HARDENING Swiper (évite “casse” de layout)
   ========================================================= */
.figuier-swiper.swiper{ overflow: hidden !important; }
.figuier-swiper .swiper-wrapper{
  display: flex !important;
  align-items: stretch !important;
}
.figuier-swiper .swiper-slide{
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 1px !important;
}