/* ===== Capsules Deck — section ===== */
.capsules-deck{
  /* largeur réellement basée sur le viewport (pas sur le parent) */
  --deck-max: 1800px;                 /* borne douce, ajuste si besoin */
  width: 80vw;
  max-width: 100vw;
  position: relative;
 
  padding: clamp(18px, 3.2vw, 28px) 0;
  background: var(--caps-sec-bg, transparent);
}

.capsules-deck[data-layout="grid"]{
  padding-top: clamp(10px, 2.6vw, 24px);
}

/* ===== Titre / lead ===== */
.capsules-deck__head{
  text-align:center;
  margin: 0 0 clamp(12px,2.2vw,18px);
}
.capsules-deck__head h2{
  margin:0 0 6px;
  font-size:clamp(1.4rem,2.5vw,2rem);
}
.capsules-deck__lead{ margin:0; opacity:.9; }

/* ===== Grille / liste ===== */
.capsules-deck__wrap{ position:relative; }

.capsules-deck__list{
  list-style:none; margin:0; padding:0;
  display:grid;
  gap: clamp(12px, 2vw, 18px);
  width: 100%;
}

/* Colonnes pilotées par variables envoyées du Customizer
   --caps-cols-d (1–6), --caps-cols-t (1–4), --caps-cols-m (1–2) */
.capsules-deck[data-layout="grid"] .capsules-deck__list{
  grid-template-columns: repeat(var(--caps-cols-d, 4), minmax(0, 1fr));
}
@media (max-width: 1280px){
  .capsules-deck[data-layout="grid"] .capsules-deck__list{
    grid-template-columns: repeat(var(--caps-cols-t, 2), minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .capsules-deck[data-layout="grid"] .capsules-deck__list{
    grid-template-columns: repeat(var(--caps-cols-m, 1), minmax(0, 1fr));
  }
}

/* ===== Slider ===== */
.capsules-deck[data-layout="slider"] .capsules-deck__list{
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w, 260px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.capsules-deck[data-layout="slider"] .capsule-card{ scroll-snap-align:start; }

.capsules-deck__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:none; cursor:pointer;
  background:rgba(0,0,0,.08); transition:background .15s ease;
}
.capsules-deck__nav:hover{ background:rgba(0,0,0,.14); }
.capsules-deck__nav.is-prev{ left:-6px; }
.capsules-deck__nav.is-next{ right:-6px; }

/* ===== Tailles de cartes — compact / moyen / grand =====
   data-size est injecté par le PHP avec $size : sm | md | lg
   -> ça change la largeur « auto-column » du slider ET
      l’échelle des éléments internes pour la grille. */
.capsules-deck{ --card-w: 260px; }           /* défaut = compact */
.capsules-deck[data-size="md"]{ --card-w: 310px; }
.capsules-deck[data-size="lg"]{ --card-w: 360px; }

/* Impact visuel léger des tailles (titres / boutons) */
.capsules-deck[data-size="sm"] .capsule-card__title{ font-size:1.02rem; }
.capsules-deck[data-size="md"] .capsule-card__title{ font-size:1.08rem; }
.capsules-deck[data-size="lg"] .capsule-card__title{ font-size:1.14rem; }

/* ===== Carte ===== */
.capsule-card{
  background: var(--caps-card-bg, #141416);
  color:#fff; border-radius:16px; overflow:hidden; isolation:isolate;
  border: var(--caps-border, 0px) solid var(--caps-border-col, transparent);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
h3.capsule-card__title{
  font-weight:600; line-height:1.2;
  font-size:clamp(0.8rem, 1.2vw, 1rem);
}
.capsule-card__media{ display:block; }
.capsule-card__thumb{
  width:100%;
  aspect-ratio: var(--caps-ratio, 1/1);      /* 1/1 ou 4/3 via Customizer */
  background: rgba(255,255,255,.06);
  background-size: cover; background-position: center;
}

.capsule-card__body{ padding:12px 14px 10px; }
.capsule-card__title{
  margin:0 0 6px;
  text-transform:none; letter-spacing:.2px;
}

/* Petit liseré premium sous le titre */
.capsule-card__divider{
  display:inline-block; width:64px; height:3px; border-radius:3px;
  background: var(--caps-border-col, #c8a46b);
  opacity:.95; margin: 0 0 10px;
}

/* Boutons ouvrir/fermer (toggle) */
.capsule-card__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.capsule-card__toggle:hover,
.capsule-card__toggle:focus-visible{
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.capsule-card__toggle.is-secondary{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.28);
  color:#fff; font-weight: 500;
}
.capsule-card__toggle.is-hidden{ display:none !important; }

/* Teaser (zone qui s’ouvre) */
.capsule-card__teaser{
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.28));
}
.capsule-card__story{ margin:0 0 10px; line-height:1.5; font-size:.95rem; }

/* Actions (CTA + Fermer) */
.capsule-card__actions{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center;
  padding-inline: 8px;
}

/* CTA "Voir l’univers" — ghost premium, ne déborde pas */
.capsule-card__cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 clamp(10px, 2vw, 18px);
  border-radius:999px; white-space:nowrap; max-width:100%; min-width:0;
  text-decoration:none;

  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  color:#fff; font-weight:600; letter-spacing:.2px;
  border:1px solid var(--caps-border-col, #c8a46b);
  box-shadow: 0 0 0 1px rgba(200,164,107,.25) inset, 0 10px 20px rgba(0,0,0,.20);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  font-size: clamp(12px, 1.6vw, 16px);
}
.capsule-card__cta::after{
  content:"↗";
  margin-left: .55em; font-size:.95em; opacity:.9; transform: translateY(-.5px);
  transition: transform .15s ease, opacity .15s ease;
}
.capsule-card__cta:hover,
.capsule-card__cta:focus-visible{
  background: rgba(255,255,255,.22);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(200,164,107,.45) inset, 0 12px 26px rgba(0,0,0,.26);
}
.capsule-card__cta:hover::after,
.capsule-card__cta:focus-visible::after{
  transform: translate(.15em,-.5px); opacity:1;
}

/* CTA et “Fermer” s’adaptent au très petit écran */
@media (max-width: 380px){
  .capsule-card__cta{ font-size:.9rem; padding:0 12px; }
  .capsule-card__toggle{ padding:0 12px; }
}
/* ===== Compactage vertical ~ -30% (desktop) ===== */
@media (min-width: 1024px){
  /* 1) La vignette prend moins de hauteur (largeur inchangée).
     4/3 = 1.333  → -30% de hauteur ≈ ratio ~1.9
     On part sur 19/10 (≈1.9). Si tu étais en 1/1, ça marche aussi : ça la “aplatie”. */
  .capsules-deck .capsule-card__thumb{
    aspect-ratio: 19 / 10;
  }

  /* 2) Espaces internes et éléments visuels plus compacts */
  .capsules-deck .capsule-card__body{
    padding: 8px 12px 8px;           /* 12/14/10 -> 8/12/8 */
  }
  .capsules-deck .capsule-card__title{
    margin: 0 0 4px;                 /* 6px -> 4px */
    font-size: 1rem;                 /* léger downscale */
  }
  .capsules-deck .capsule-card__divider{
    height: 2px;                     /* 3px -> 2px */
    width: 56px;                     /* 64px -> 56px */
    margin: 0 0 8px;                 /* 10px -> 8px */
  }

  /* CTA + Boutons un poil plus bas/étroits pour gagner de la place */
  .capsules-deck .capsule-card__toggle{
    height: 32px;                    /* 34px -> 32px */
    padding: 0 12px;                 /* 14px -> 12px */
    font-size: .95rem;
  }
  .capsules-deck .capsule-card__teaser{
    padding: 10px 12px 12px;         /* 12/14/14 -> 10/12/12 */
  }
  .capsules-deck .capsule-card__story{
    font-size: .92rem;               /* 0.95 -> 0.92 */
    line-height: 1.45;               /* 1.5 -> 1.45 */
    margin: 0 0 8px;                 /* 10px -> 8px */
  }
  .capsules-deck .capsule-card__actions{
    gap: 8px;                        /* 10px -> 8px */
    padding-inline: 6px;             /* 8px -> 6px */
  }
  .capsules-deck .capsule-card__cta{
    height: 34px;                    /* 36px -> 34px */
    padding: 0 clamp(10px, 1.6vw, 16px);
    font-size: clamp(12px, 1.4vw, 15px);
  }
}

/* ===== Option : très grand écran, encore un petit cran ===== */
@media (min-width: 1600px){
  .capsules-deck .capsule-card__thumb{ aspect-ratio: 2 / 1; } /* ≈ -33% de hauteur */
}