/* ============================================================
   SECTION LE BLOG  (mobile-first)
============================================================ */
.section-blog {
  background-color: #efece9;
  padding: 40px 0 0;
}

.section-blog .section-more {
  padding: 40px 0;
}

.section-blog .container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.blog-titles {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #0f1b24;
  white-space: normal;
}

.blog-heading {
  font-size: 35px;
  line-height: 1;
}

/* En-tête du bloc : titres à gauche, flèches du carrousel à droite (≥769).
   Mobile : pas de flèches (swipe) → l'en-tête n'affiche que les titres.
   Flèches masquées aussi quand rien à défiler (.is-static, posé par
   finding.js), comme les Inspirations. */
.blog-arrows {
  display: none;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.section-blog.is-static .blog-arrows { display: none !important; }

.blog-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #9f9a7c;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.blog-arrow-btn img { width: 20px; height: 20px; }
.blog-arrow-btn:hover { opacity: 0.65; }
.blog-arrow-btn:active { transform: scale(0.92); }
.blog-arrow-btn.is-disabled {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
}
.blog-arrow-btn:focus-visible {
  outline: 2px solid #9f9a7c;
  outline-offset: 4px;
}

/* Carrousel élastique (transform piloté par finding.js) : la fenêtre masque le
   débordement, la piste est translatée (rubber-band + snap align "start").
   Pas de scroll natif. La fenêtre = contenu du .container (gouttières héritées
   du .container de la page : 30 mobile / 40 tablette / 100 desktop) → les cartes
   sont clippées aux gouttières et la 1re carte s'aligne sur le titre. */
.blog-scroll-wrap {
  overflow: hidden;
  touch-action: pan-y;      /* le geste vertical fait défiler la page */
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.blog-scroll-wrap::-webkit-scrollbar { display: none; }

/* Pas assez de cartes pour défiler → curseur normal. */
.blog-scroll-wrap.is-static { cursor: default; }
/* Pendant le glissement. */
.blog-scroll-wrap.is-dragging { cursor: grabbing; user-select: none; }
.blog-scroll-wrap.is-dragging a { cursor: grabbing; }
.blog-scroll-wrap.is-dragging img { pointer-events: none; }

/* « Bleed » des DEUX côtés en structure réduite (≤1100 : mobile + hamburger).
   Comme le bloc Organiser/Excursions (finding_home) : la fenêtre du carrousel
   s'étend sur TOUTE la largeur de l'écran (100vw, sortie du .container via
   margin calc(50% − 50vw)), donc au scroll les cartes débordent jusqu'aux bords
   GAUCHE et DROIT (peek de part et d'autre) au lieu d'être clippées aux
   gouttières. Pour que la 1re carte reste alignée sur le titre au repos ET que la
   dernière carte garde la même marge en fin de scroll, la piste reçoit un
   padding-inline (gauche + droite) = gouttière du .container (30 mobile / 40
   tablette) ; finding.js en tient compte (padL + scrollWidth, qui inclut le
   padding-right → la limite de défilement s'arrête à la gouttière droite).
   La fenêtre reste overflow:hidden
   (+ html,body overflow-x:hidden) → pas de scroll horizontal de page.
   Desktop ≥1101 : inchangé — la rangée de 4 cartes (4×262 + 3×40 = 1168) est
   calibrée pour le contenu 1166. */
@media (max-width: 1100px) {
  .blog-scroll-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .blog-grid {
    padding-inline: 30px;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .blog-grid {
    padding-inline: 40px;
  }
}

.blog-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  background-color: #EFECE9;
}

.blog-card {
  min-width: 262px;
  width: 262px;
  height: 471px;
  border-radius: 15px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.blog-card--white { background-color: #ffffff; color: #0f1b24; }

.blog-card__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
}

/* Image inside white cards (Insolite / Associations) :
   border-radius pour respecter la rondeur du card parent (15px). */
.blog-card__image {
  flex: 1;
  overflow: hidden;
  border-radius: 15px;
}
.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.blog-card--image { color: #ffffff; }

.blog-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 15px;
}

.blog-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2));
  mix-blend-mode: multiply;
  z-index: 0;
  border-radius: 15px;
}

.blog-card--image .blog-card__top,
.blog-card--image .btn { position: relative; z-index: 1; }

/* ============================================================
   BLOG  – Tablet + Desktop  (≥769px)
============================================================ */
@media (min-width: 769px) {
  .section-blog {
    padding: 60px 0 0;
  }

  .section-blog .container {
    gap: 40px;
  }

  /* En-tête en ligne : titres à gauche, flèches à droite (à la gouttière),
     centrées verticalement — comme les Inspirations / Organiser. */
  .blog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
  }
  .blog-arrows { display: flex; }

  .blog-titles {
    white-space: nowrap;
  }

  .section-blog .section-more {
    padding: 60px 0;
  }

  .blog-heading {
    font-size: 50px;
  }

  /* Eyebrow inside cards : Figma utilise Mobile/Body/S (12/20)
     même sur desktop (et non Desktop/Body/S 13/22). Override. */
  .blog-card .body-s {
    font-size: 12px;
    line-height: 20px;
  }
}


/* ============================================================
   BLOG — Structure complète  (≥ 1101px)
   Espacement des cartes 40px (20px en structure réduite/hamburger + mobile).
   Les gouttières (contenu 1166 aligné au header, 100px) et le centrage sont
   fournis par le .container de la page (finding.css) ; la fenêtre du carrousel
   = contenu du .container, donc les cartes sont masquées au-delà des gouttières
   et la rangée de 4 (4×262 + 3×40 = 1168) « dépasse » sans redimensionnement.
============================================================ */
@media (min-width: 1101px) {
  .blog-grid { gap: 40px; }
}