/* ---------- Visibility: only mobile/tablet ---------- */
/* ---------------------------
   Hero Slider (mobile/tablette)
   --------------------------- */
:root{
  /* tokens artlocate (fallbacks si absents) */
  --al-radius-lg: var(--radius-lg, 16px);
  --al-gap-md: var(--gap-md, 16px);
  --al-bg-soft: var(--bg-soft, #f5f7f8);
  --al-fg: var(--fg, #162b33);
  --al-primary: var(--primary, #16323b);
  --al-hero-h: 320px; /* hauteur par défaut */
}

/* caché sur desktop ≥1025px */
@media (min-width:1025px){
  .c-hero-slider{ display:none !important; }
}

.c-hero-slider{
  position:relative;
  overflow:hidden;
  background:var(--al-bg-soft);
  user-select:none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.c-hero-slider__viewport{ height:var(--al-hero-h); position:relative; }
@media (min-width:641px) and (max-width:1024px){
  .c-hero-slider__viewport{ height:calc(var(--al-hero-h) + 40px); }
}

.c-hero-slider__track{
  display:flex; height:100%;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform 420ms cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce){
  .c-hero-slider__track{ transition:none; }
}

.c-hero-slider__slide{
  min-width:100%; height:100%;
  display:grid; grid-template-rows: 1fr auto;
  color:var(--al-fg);
  background:#eaf5ef; /* léger fond par défaut */
}

.c-hero-slider__media{ position:relative; overflow:hidden; }
.c-hero-slider__img{ width:100%; height:100%; object-fit:cover; display:block; }

.c-hero-slider__panel{
  padding:var(--al-gap-md);
  backdrop-filter:saturate(1.1) blur(2px);
}
.c-hero-slider__slide--p1 .c-hero-slider__panel{ background: rgba(255,245,230,.95); }
.c-hero-slider__slide--p2 .c-hero-slider__panel{ background: rgba(238,242,255,.95); }
.c-hero-slider__slide--p3 .c-hero-slider__panel{ background: rgba(230,243,255,.95); }
.c-hero-slider__slide--p4 .c-hero-slider__panel{ background: rgba(233,247,239,.95); }

.c-hero-slider__title{ margin:0 0 4px; font-weight:700; font-size:var(--fs-500, 1.125rem); }
.c-hero-slider__text{ margin:0 0 10px; opacity:.85; font-size:var(--fs-300, .95rem); }
.c-hero-slider__cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:999px; text-decoration:none;
  background:var(--al-primary); color:#fff; font-weight:600;
}
.c-hero-slider__cta:focus-visible{ outline:2px solid #09a; outline-offset:2px; }

/* Dots */
.c-hero-slider__dots{
  position:absolute; right:12px; bottom:12px;
  display:flex; gap:8px;
  padding:6px 8px; border-radius:999px;
  background:rgba(255,255,255,.7);
  backdrop-filter: blur(4px);
}
.c-hero-slider__dot{
  width:8px; height:8px; border-radius:50%;
  background:#9ab; border:0; padding:0; cursor:pointer;
}
.c-hero-slider__dot[aria-current="true"]{ background:var(--al-primary); }
.c-hero-slider__dot:focus-visible{ outline:2px solid #09a; outline-offset:2px; }

/* ===========================
   HERO SLIDER — Desktop layout
   =========================== */

/* Show on desktop */
@media (min-width:1025px){
  .c-hero-slider{ display:block !important; }

  .c-hero-slider{
    margin: 0 auto;
  }
  /* plus haut, plus “hero” */
  .c-hero-slider__viewport{
    height: 320px; /* ajuste */
  }

  /* slide = 2 colonnes */
  .c-hero-slider__slide{
    grid-template-rows: 1fr;         /* on enlève le “1fr auto” */
    grid-template-columns: 58% 42%;  /* image / texte */
    align-items: stretch;
    background: var(--al-bg-soft);
  }

  /* image à gauche, prend toute la hauteur */
  .c-hero-slider__media{
    height: 100%;
  }
  .c-hero-slider__img{
    height: 100%;
  }

  /* panel à droite : slogan centré verticalement */
  .c-hero-slider__panel{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: 28px 32px;
    background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.95));
  }

  .c-hero-slider__title{
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2rem);
    line-height: 1.15;
    margin-bottom: 10px;
    max-width: 18ch;
  }

  .c-hero-slider__text{
    font-size: 1.05rem;
    line-height: 1.5;
    margin-bottom: 16px;
    max-width: 42ch;
  }

  .c-hero-slider__cta{
    align-self:flex-start;
    padding: .7rem 1.05rem;
    font-size: 1rem;
  }

  /* Dots : plutôt à droite, au milieu vertical */
  .c-hero-slider__dots{
    right: 16px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    padding: 10px 8px;
  }

  .c-hero-slider__dot{
    width: 9px;
    height: 9px;
  }

  /* Optionnel : un léger voile sur l'image pour lisibilité globale */
  .c-hero-slider__media::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,0));
    pointer-events:none;
  }
  /* Evite le "peek" au chargement, sans risquer de cacher le slider à vie */
.c-hero-slider { overflow: hidden; }

/* on ne cache que si JS a mis data-js="1" */
.c-hero-slider[data-js="1"]:not(.is-ready){ visibility: hidden; }
.c-hero-slider.is-ready{ visibility: visible; }

/* ---------- Fix "peek" du slide suivant (10-15px) ---------- */
.c-hero-slider__track{
  gap: 0 !important;
}

.c-hero-slider__slide{
  flex: 0 0 100% !important;   /* béton : 100% pile, pas de shrink */
  min-width: 100% !important;
  box-sizing: border-box;
}

.c-hero-slider__media,
.c-hero-slider__panel{
  min-width: 0; /* évite certains débordements grid/flex */
}

.c-hero-slider__img{
  display:block;              /* supprime le petit espace baseline */
  width:100%;
  height:100%;
}
}