/* sections & layout */
.section{ padding: 20px 0px 40px 0px; }
.section-muted{ background: rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 -1px 0 rgba(122,74,31,.25); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom: 20px; }
.section-title{ font-size: clamp(1.5rem, 2.2vw, 2.1rem); margin:0; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* === Prestations: 2 colonnes, largeur maîtrisée + beaucoup d’air (desktop) === */
@media (min-width: 981px){
  .grid-3[data-presta-slot],
  .grid-4[data-presta-slot]{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 800px;

    /* aligné à gauche (au lieu d’être centré) */
    margin-inline: 0;

    /* plus de vide */
    column-gap: 56px;
    row-gap: 28px;
  }
}


@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: 1fr 1fr; }
}

/* Smartphone en paysage : on garde aussi le rail horizontal.
   Sinon, le breakpoint 980px force .grid-3 en 1 colonne, ce qui devient “naze” en landscape. */
@media (max-width: 980px) and (orientation: landscape) and (pointer: coarse) {
  [data-presta-slot]{
    display: grid;
    grid-auto-flow: column;
    /* en paysage, on peut afficher ~2 cards à l'écran */
    grid-auto-columns: minmax(62%, 1fr);
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 0 16px 10px 16px;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  [data-presta-slot] > * { scroll-snap-align: start; }

  [data-presta-slot]::-webkit-scrollbar { height: 8px; }
  [data-presta-slot]::-webkit-scrollbar-thumb { border-radius: 8px; }

  [data-presta-slot] .card{ padding: 0; }
  [data-presta-slot] .card .presta-thumb{ margin: 0; }
}
@media (max-width: 560px){
  .grid-4{ grid-template-columns: 1fr; }
}

/* Mobile: les triptyques deviennent un rail horizontal (swipe) */
@media (max-width: 720px) {
  [data-presta-slot]{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78%, 1fr);
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;

    /* IMPORTANT: gutter interne pour éviter la carte “coupée” à gauche */
    padding: 0 16px 10px 16px;  /* gauche/droite + petit bas */

    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;

    -webkit-overflow-scrolling: touch;

    /* évite le scroll chain bizarre / page qui “accroche” */
    overscroll-behavior-x: contain;
  }

  [data-presta-slot] > * {
    scroll-snap-align: start;
  }

  /* Optionnel: scrollbar */
  [data-presta-slot]::-webkit-scrollbar { height: 8px; }
  [data-presta-slot]::-webkit-scrollbar-thumb { border-radius: 8px; }

  /* Fix: en rail horizontal, on annule le “bleed” (-18px) des thumbs,
     sinon la 1ère card déborde à gauche et devient impossible à swiper correctement */
  [data-presta-slot] .card{
    padding: 0; /* plus besoin de compenser */
  }
  [data-presta-slot] .card .presta-thumb{
    margin: 0;  /* stop le débordement qui casse la 1ère card */
  }
}

/* === FIX rail mobile prestations === */
@media (max-width: 980px) and (pointer: coarse) {

  [data-presta-slot] {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
  }

  /* Portrait */
  @media (orientation: portrait) {
    [data-presta-slot] .card {
      flex: 0 0 85%;
      max-width: 85%;
    }
  }

  /* Paysage smartphone */
  @media (orientation: landscape) {
    [data-presta-slot] .card {
      flex: 0 0 60%;
      max-width: 60%;
    }
  }
}

/* === Grid section : panneau partenaires (Classique home) === */

/* Par défaut : 1 colonne (pas de vide) */
.grid-section {
  display: block;
}

/* Activé seulement si on a des partners (classe posée en JS) */
.grid-section.grid-section--has-partners {
  display: grid;
  grid-template-columns: minmax(0, 800px) 1fr; /* grid à gauche (800), bande à droite (reste) */
  column-gap: 28px;
  align-items: start;
  position: relative;

  /* Rythme vertical = rythme des rangées de cards (desktop) */
  --partners-row-gap: 28px;

  /*
    Hauteur “visuelle” d'une rangée de cards sur desktop :
    grid 800px, 2 colonnes, gap 56px => largeur carte ≈ 372px
    hauteur 16/9 => ≈ 209px
  */
  --partners-row-h: 210px;
}

.grid-section__main {
  min-width: 0;
}

/* Panneau caché tant qu'il n'y a pas de partners */
.grid-section__partners {
  display: none;
  min-width: 0;
}

/* Visible uniquement quand activé */
.grid-section.grid-section--has-partners .grid-section__partners {
  display: block;
  padding-left: 28px;
  position: relative; /* ancre le titre en absolute */
}

/* Titre AU-DESSUS de la 1ère rangée de grid */
.grid-section__partners-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;

  position: absolute;
  top: -18px;   /* ajuste finement si besoin (-14 / -22) */
  right: 0;
  pointer-events: none; /* déco uniquement */
}

/* Conteneur des rangées partners (une rangée = 2 prestas en desktop) */
.grid-section__partners-rows {
  display: grid;
  grid-auto-rows: var(--partners-row-h);
  row-gap: var(--partners-row-gap);
  align-items: start;

  padding-top: 10px; /* espace sous le titre */
}

/* Une rangée : plusieurs logos (tu limites à 3, mais on reste safe) */
.grid-section__partners-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Un item */
.grid-section__partner {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 160ms ease;
}
.grid-section__partner:hover { opacity: 1; }

.grid-section__partner img {
  width: 160px;     /* largeur fixe */
  height: auto;     /* hauteur auto */
  max-width: 100%;
  max-height: 56px; /* homogénéité */
  object-fit: contain;

  /* premium : gris -> couleur au hover */
  filter: grayscale(100%) contrast(1.05);
  opacity: 0.92;
  transition: filter 160ms ease, opacity 160ms ease;
}
.grid-section__partner:hover img { filter: none; opacity: 1; }

/* Mobile : panneau sous la grille, simple */
@media (max-width: 980px){
  .grid-section.grid-section--has-partners {
    grid-template-columns: 1fr;
    row-gap: 18px;
    --partners-row-h: auto;
    --partners-row-gap: 14px;
  }

  .grid-section.grid-section--has-partners .grid-section__partners {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: 18px;
    position: static; /* on repasse en flux normal */
  }

  .grid-section__partners-title {
    position: static;   /* en mobile, titre normal au-dessus */
    pointer-events: auto;
    margin: 0 0 12px 0;
    text-align: left; /* mobile: lecture naturelle */
  }

  .grid-section__partners-rows {
    grid-auto-rows: auto;
    row-gap: 14px;
    padding-top: 0;
  }

  .grid-section__partners-row {
    gap: 12px 14px;
  }

  .grid-section__partner img {
    width: 150px;
    max-height: 52px;
  }
}

/* Smartphone portrait : partners en 2 colonnes même si un seul JSON alimente la rangée */
@media (max-width: 720px) and (orientation: portrait){
  .grid-section__partners-rows{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: center;
  }

  .grid-section__partners-row{
    display: contents;
  }

  .grid-section__partner{
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .grid-section__partner img{
    width: min(100%, 150px);
    max-height: 52px;
  }
}