/*
  Section 4 — blog. Mise en page inspirée d'une référence fournie par le
  client : article vedette à gauche (grande image + titre), liste numérotée
  d'articles au centre (01–05, titre + extrait), colonne "Sur Instagram" à
  droite. Reskin complet aux tokens de base.css (Sora + Inter, blanc/gris/rouge).
*/

.blog{
  background:var(--white);
  padding:88px 0 96px;
}
.blog-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 48px;
}

.blog-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px 8px 8px;
  background:var(--red-soft);
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--red-dark);
  margin-bottom:40px;
}
.blog-eyebrow .dot{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  flex-shrink:0;
}

.blog-grid{
  display:grid;
  grid-template-columns:minmax(260px, 340px) 1fr minmax(170px, 210px);
  gap:48px;
  align-items:start;
}

/* ---- article vedette (colonne gauche) ---- */
.blog-featured{ position:relative; }
.blog-featured-media{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  border-radius:16px;
  overflow:hidden;
  background:var(--gray-100);
}
.blog-featured-media img{ width:100%; height:100%; object-fit:cover; }
.blog-featured-media .media-fallback{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--gray-100), var(--red-soft) 140%);
  color:var(--ink-soft);
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:13px;
}
.blog-featured-label{
  margin-top:18px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.blog-featured-title{
  margin-top:10px;
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.blog-featured a:hover .blog-featured-title{ color:var(--red); }

/* ---- liste numérotée (colonne centrale) ---- */
.blog-list{
  border-top:1px solid var(--gray-200);
}
.blog-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:28px;
  align-items:baseline;
  padding:26px 0;
  border-bottom:1px solid var(--gray-200);
  transition:background .2s ease;
}
.blog-item .num{
  font-family:'Sora', sans-serif;
  font-weight:400;
  font-size:30px;
  color:var(--gray-300);
  line-height:1;
  transition:color .2s ease;
}
.blog-item:hover .num{ color:var(--red); }
.blog-item .body{ min-width:0; }
.blog-item .title{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:0.01em;
  color:var(--ink);
  margin-bottom:8px;
}
.blog-item .excerpt{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:520px;
}
.blog-more{
  margin-top:28px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:var(--red);
}
.blog-more:hover{ color:var(--red-dark); }

/* ---- colonne Instagram (droite) ---- */
.blog-insta-label{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:16px;
  transition:color .18s ease;
}
a.blog-insta-label:hover{ color:var(--red); }
.blog-insta-follow{
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:var(--red);
}
.blog-insta-follow svg{ width:16px; height:16px; flex-shrink:0; }
.blog-insta-follow:hover{ color:var(--red-dark); }
.blog-insta-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.blog-insta-cell{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  background:var(--gray-100);
}
.blog-insta-cell img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.blog-insta-cell:hover img{ transform:scale(1.05); }
.blog-insta-cell .insta-fallback{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--gray-100), var(--red-soft) 150%);
  color:var(--gray-300);
  font-size:18px;
}

@media (max-width:1180px){
  .blog{ padding:72px 0 80px; }
  .blog-inner{ padding:0 28px; }
  .blog-grid{ gap:36px; }
}

@media (max-width:900px){
  /* empilé : article à la une, puis la liste, puis Instagram */
  /* minmax(0,…) : sinon la rangée Instagram (plus large que l'écran) élargit
     la colonne et toute la page déborde */
  .blog-grid{ grid-template-columns:minmax(0, 1fr); gap:44px; }
  .blog-grid > *{ min-width:0; }
  .blog-featured-media{ aspect-ratio:16/9; }

  /* Instagram : rangée qui défile au doigt (scroll natif + aimantation),
     bord à bord — elle déborde volontairement des marges de .blog-inner */
  .blog-insta-grid{
    flex-direction:row;
    gap:12px;
    margin:0 -28px;
    padding:0 28px 6px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding:0 28px;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .blog-insta-grid::-webkit-scrollbar{ display:none; }
  .blog-insta-cell{
    flex:0 0 clamp(150px, 42vw, 240px);
    scroll-snap-align:start;
  }
  .blog-insta-cell:hover img{ transform:none; }
}

@media (max-width:520px){
  .blog{ padding:52px 0 60px; }
  .blog-inner{ padding:0 20px; }
  .blog-eyebrow{ margin-bottom:28px; }
  .blog-grid{ gap:36px; }
  .blog-featured-media{ aspect-ratio:4/3; }
  .blog-featured-title{ font-size:21px; }
  .blog-item{ grid-template-columns:1fr; gap:8px; padding:22px 0; }
  .blog-item .num{ font-size:24px; }
  .blog-insta-grid{ margin:0 -20px; padding:0 20px 6px; scroll-padding:0 20px; }
  /* ~1,6 vignette visible : on devine qu'il y en a d'autres à faire glisser */
  .blog-insta-cell{ flex-basis:60vw; }
}