/* =========================================================
   OFFRES — SOUS-MENU (verre = header, propre & sans doublons)
   ========================================================= */

/* --- Positionnement : pile sous la slab --- */
.offres-subnav{
  position: sticky;
  top: calc(var(--headerH) + 24px);
  z-index: 900;
  pointer-events: auto;
}
.offres-subnav .offres-subnav-wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  position: relative;
  padding: 0 20px;
}

/* --- Barre verre : EXACTEMENT comme le header --- */
/*.offres-bar,*/
.offres-track{
  border-radius: 28px;
  background:
    radial-gradient(120% 140% at 0% -20%, rgba(255,155,230,.20) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(180deg,
      rgba(var(--glass-bg,255 255 255), .65) 0%,
      rgba(var(--glass-bg,255 255 255), .45) 100%);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: saturate(160%) blur(var(--blur,18px));
  -webkit-backdrop-filter: saturate(160%) blur(var(--blur,18px));
  box-shadow: var(--shadow, 0 6px 22px rgba(18,24,40,.14), 0 1px 0 rgba(255,255,255,.4) inset);
}

/* conteneur items (desktop) */
.offres-track{
  padding: 5px 5px;
  background-clip: padding-box;
  overflow-y: visible;
  /* Empêche l’apparition de la “barre” de scroll en bas sur desktop */
  overflow-x: clip;          /* moderne */
  /* fallbacks */
  overflow-x: hidden;
}

/* grille (desktop) */
.offres-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: center;
  justify-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Item + halo blanc discret (permanent) --- */
.offres-cell{ list-style: none; }

.offre-link{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  border-radius: 18px;
  text-decoration: none;
  font-weight: 600;
  color: #1F2A44;               /* neutre */
  transition: color .22s ease, transform .22s ease;
  z-index: 0;
}
.offre-link::after{
  content:"";
  position:absolute; inset:0; border-radius:18px; z-index:-1; pointer-events:none;
  background: radial-gradient(closest-side,
              rgba(255,255,255,.88) 0%,
              rgba(255,255,255,.55) 55%,
              rgba(255,255,255,.28) 78%,
              rgba(255,255,255,0) 100%);
  filter: blur(10px);
  opacity:.85;
}

/* Icônes SVG (utilisent currentColor) */
.offre-ico svg{
  width: 32px; height: 32px;
  color: currentColor;
  stroke: currentColor; fill: none; stroke-width: 3;
  transition: transform .22s ease, color .22s ease;
}

/* Label */
.offre-label{
  font-size: 13px;
  font-weight: 700;
  color: currentColor;
  text-align: center;
  position: relative;
}

/* Hover / actif -> accent */
.offre-link:hover{ color: var(--accent, #FF4FA0); transform: translateY(-1px); }
.offre-link.active{ color: var(--accent, #FF4FA0); }
.offre-link.active .offre-label::after{
  content:""; position:absolute; left:50%; bottom:-4px;
  width:28px; height:2px; border-radius:2px;
  background: var(--accent, #FF4FA0);
  transform: translateX(-50%);
}

/* --- État “docké” : le sous-menu prend la place du header --- */
body.subnav-stuck .offres-subnav{
  position: fixed;
  top: 12px; left: 0; right: 0;
  z-index: 1000;
}
body.subnav-stuck .offres-subnav .offres-subnav-wrap{ padding: 0 16px; }
body.subnav-stuck .offres-track{
  animation: subnavDockIn .32s cubic-bezier(.22,.61,.36,1) both;
  transform: translateY(0) scale(1.015) rotateX(.6deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 14px 36px rgba(16,24,40,.16);
  filter: saturate(170%) brightness(1.02);
}
@keyframes subnavDockIn{
  from{ transform: translateY(-10px) scale(.99); opacity:.0; }
  to  { transform: translateY(0)     scale(1.015); opacity:1; }
}

/* petit rebond quand on relâche en haut */
body.subnav-release .offres-track{
  animation: subnavRelease .36s ease-out;
}
@keyframes subnavRelease{
  0%{   transform: translateY(0) scale(1.015); }
  60%{  transform: translateY(2px) scale(1.002); }
  100%{ transform: translateY(0) scale(1); }
}

/* --- Accessibilité : réduit les animations si nécessaire --- */
@media (prefers-reduced-motion: reduce){
  .offres-track{ transition: none !important; animation: none !important; }
  .offre-link{ transition: none !important; }
}

/* =========================================================
   Responsive : carrousel horizontal + flèches (≤ 860px)
   ========================================================= */
@media (max-width: 1100px){
  .offres-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .offre-ico svg{ width: 28px; height: 28px; }
}

@media (max-width: 860px){
  /* on bascule en track scrollable sans changer l'aspect */
  .offres-track{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
.offres-track::-webkit-scrollbar{ display:none !important; height:0 !important; }

  .offres-grid{
    display: flex;
    gap: 10px;
    padding: 14px 56px;               /* place pour les flèches */
    scroll-snap-type: x mandatory;
  }
  .offres-cell{
    flex: 0 0 auto;
    min-width: 180px;
    scroll-snap-align: center;
  }

  /* Flèches type Apple (ne bougent pas le fond) */
  .offres-paddle{
    position: absolute; top: 0; bottom: 0;
    width: 44px; border: 0; background: transparent;
    display: grid; place-items: center; z-index: 2;
    color: #1F2A44; opacity: .9; cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
  }
  .offres-paddle[hidden]{ display:none !important; }
  .offres-paddle:hover{ opacity: 1; transform: scale(1.03); }
  .offres-paddle.left  { left: 6px; }
  .offres-paddle.right { right: 6px; }

  .offres-paddle .chev{
    display:block; width: 28px; height: 28px; line-height: 28px;
    border-radius: 999px; text-align:center; font-size: 22px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 6px 14px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.7);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }

  /* dégradés latéraux (masquent le contenu qui dépasse, façon Apple) */
  .offres-subnav-wrap::before,
  .offres-subnav-wrap::after{
    content:""; position:absolute; top:0; bottom:0; width:48px; z-index:1; pointer-events:none;
  }
  .offres-subnav-wrap::before{
    left:0;
    background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
    border-top-left-radius:28px; border-bottom-left-radius:28px;
  }
  .offres-subnav-wrap::after{
    right:0;
    background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
    border-top-right-radius:28px; border-bottom-right-radius:28px;
  }
}

/* =========================================================
   Header : transitions (juste ce qu’il faut ici)
   ========================================================= */
.site-header .slab{
  transition:
    transform .42s cubic-bezier(.22,.61,.36,1),
    opacity .32s ease,
    filter .32s ease;
  will-change: transform, opacity, filter;
}
body.hide-header .site-header .slab{
  transform: translateY(-140%) scale(.985);
  opacity: 0; filter: blur(2px);
  pointer-events: none;
}

/* --- Fix: no extra bar under the sub-menu on desktop --- */
@media (min-width: 861px){
  /* never create a horizontal scrollbar (or its track) */
  .offres-track{
    overflow-x: visible !important;   /* no scroll area */
  }
}

/* If you still see a faint rule, it’s the shadow edge: soften it */
.offres-track{
  /* softer drop, no hard “line” */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 10px 28px rgba(16,24,40,.12);   /* smaller/softer than before */
}

/* Safety: mobile keeps the horizontal scroll */
@media (max-width: 860px){
  .offres-track{
    overflow-x: auto !important;      /* carrousel */
  }
}

@media (max-width:860px){
  .offres-paddle[disabled] { opacity:.35; pointer-events:none; }
}