/* ═══════════════════════════════════════════════════════════
   L'Atelier de la Source – Hero page d'accueil v2.0
   ═══════════════════════════════════════════════════════════ */

/* ── Section hero ──────────────────────────────────────────── */
#als-hero.als-hero {
  position         : relative;
  width            : 100%;
  background-color : #c8bfb0;
  background-size  : cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  display          : flex;
  align-items      : center;
  overflow         : hidden;
  margin-top       : 0;
}

.als-hero--align-left   { justify-content: flex-start; text-align: left; }
.als-hero--align-center { justify-content: center;     text-align: center; }
.als-hero--align-right  { justify-content: flex-end;   text-align: right; }

/* ── Overlay sombre ────────────────────────────────────────── */
.als-hero__overlay {
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
}

/* ── Contenu ───────────────────────────────────────────────── */
.als-hero__content {
  position  : relative;
  z-index   : 5;
  max-width : 820px;
  padding   : 2.5rem 2rem;
  width     : 100%;
}
.als-hero--align-left  .als-hero__content { padding-left: clamp(2rem, 8vw, 6rem); }
.als-hero--align-right .als-hero__content { padding-right: clamp(2rem, 8vw, 6rem); }

.als-hero__title {
  font-size    : clamp(2rem, 5vw, 3.5rem);
  font-weight  : 700;
  line-height  : 1.15;
  color        : #ffffff;
  margin       : 0 0 1rem;
  text-shadow  : 0 2px 8px rgba(0,0,0,.4);
}
.als-hero__subtitle {
  font-size  : clamp(1rem, 2.2vw, 1.35rem);
  color      : rgba(255,255,255,.92);
  margin     : 0 0 1.75rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
  line-height: 1.55;
}
.als-hero__cta {
  display        : inline-block;
  padding        : .8rem 2.2rem;
  background     : #ffffff;
  color          : #2b2b2b;
  font-weight    : 600;
  font-size      : 1rem;
  text-decoration: none;
  border-radius  : 2px;
  letter-spacing : .03em;
  transition     : background .2s, color .2s, transform .15s;
  box-shadow     : 0 3px 12px rgba(0,0,0,.2);
}
.als-hero__cta:hover { background: #f0f0f0; transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════
   EFFETS
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Zoom lent (Ken Burns) ──────────────────────────────── */
.als-hero--fx-zoom {
  animation: als-ken-burns 8s ease forwards;
}
@keyframes als-ken-burns {
  from { background-size: 100%; }
  to   { background-size: 110%; }
}

/* ── 2. Fondu à l'entrée ───────────────────────────────────── */
.als-hero--fx-fade {
  animation: als-fade-in 1.4s ease both;
}
@keyframes als-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 3. Zoom + fondu ───────────────────────────────────────── */
.als-hero--fx-zoom_fade {
  animation: als-ken-burns 8s ease forwards, als-fade-in 1.4s ease both;
}

/* ── 4. Parallax ───────────────────────────────────────────── */
/* L'image est sur un div enfant contrôlé par hero-fx.js */
.als-hero--fx-parallax {
  background: none !important;
}
.als-hero__parallax-img {
  position          : absolute;
  inset             : -20% 0;
  background-size   : cover;
  background-repeat : no-repeat;
  z-index           : 1;
  will-change       : transform;
}

/* ── 5. Rideau (reveal) ────────────────────────────────────── */
/* Le voile blanc est animé via hero-fx.js (requestAnimationFrame → pas de
   repaint forcé) mais on peut aussi utiliser une pure animation CSS au chargement */
.als-hero__reveal {
  position        : absolute;
  inset           : 0;
  background      : #ffffff;
  z-index         : 6; /* au-dessus de tout */
  transform-origin: right center;
  animation       : als-reveal 1.2s cubic-bezier(.77,0,.18,1) .15s both;
  pointer-events  : none;
}
@keyframes als-reveal {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── 6. Duotone ────────────────────────────────────────────── */
.als-hero--fx-duotone { background: none !important; }
.als-hero__duotone-img {
  position  : absolute;
  inset     : 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index   : 1;
  filter    : url(#als-dt-filter);
}

/* ── 7. Fondu bas ──────────────────────────────────────────── */
.als-hero__blur-edge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height : 45%;
  /* background defini en style inline via PHP (couleur parametrable) */
  z-index: 4;
  pointer-events: none;
}

/* ── Vague SVG bas ─────────────────────────────────────────── */
.als-hero__wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  width: 100%; overflow: hidden;
  line-height: 0; z-index: 6;
  pointer-events: none;
}
.als-hero__wave svg { display: block; width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════
   Header transparent sur la homepage (desktop)
   ═══════════════════════════════════════════════════════════ */
body.als-hero-page #als-header-spacer { display: none !important; }

body.als-hero-page #header-als {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* justify-content géré globalement dans header.css */
body.als-hero-page #topbar-als { background: transparent !important; }

body.als-hero-page #header-als:not(.scrolled) .nav-link,
body.als-hero-page #header-als:not(.scrolled) .nav-item > a,
body.als-hero-page #header-als:not(.scrolled) .action-btn,
body.als-hero-page #topbar-als .topbar-item {
  color: #ffffff !important;
}
body.als-hero-page #header-als:not(.scrolled) .cart-count {
  background: #ffffff !important; color: #2b2b2b !important;
}
/* Logo image : halo sombre pour lisibilite sur n'importe quelle photo */
body.als-hero-page #header-als:not(.scrolled) .als-logo img {
  filter: drop-shadow(0 0 6px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(0,0,0,.4));
}
/* Texte logo (nom + accroche) : meme halo via text-shadow */
body.als-hero-page #header-als:not(.scrolled) .als-logo-main,
body.als-hero-page #header-als:not(.scrolled) .als-logo-sub {
  text-shadow: 0 0 8px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.55) !important;
}
body.als-hero-page:not(.als-header-scrolled) #header-als #burger-als span {
  background: #ffffff !important;
}
body.als-hero-page #header-als.scrolled {
  background: var(--als-header-bg, #ffffff) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}
body.als-hero-page #header-als.scrolled .als-logo img { filter: none !important; }
body.als-hero-page #header-als.scrolled .als-logo-main,
body.als-hero-page #header-als.scrolled .als-logo-sub { text-shadow: none !important; }

#header-als { transition: background .35s ease, box-shadow .35s ease !important; }
#header-als .nav-link,
#header-als .nav-item > a,
#header-als .action-btn { transition: color .3s ease !important; }

/* ═══════════════════════════════════════════════════════════
   Mobile — comportement identique hero ou non
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  #als-hero.als-hero {
    /* min-height : gere par le <style> inline PHP avec calc(Xdvh - header-mob) */
    align-items   : center;
    padding-bottom: 0;
  }
  .als-hero__content { padding: 1.5rem 1.25rem; max-width: 100%; }

  /* Mobile avec hero : spacer DESACTIVE (le hero est position dans le flux
     directement apres le header fixe, sans espace supplementaire).
     La hauteur calc() du hero compense deja la hauteur du header. */
  body.als-hero-page #als-header-spacer {
    display: none !important;
  }

  /* Header mobile sur homepage : transparent pour laisser l'image respirer,
     mais avec un leger degrade pour que logo/burger restent lisibles */
  body.als-hero-page #header-als {
    background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, transparent 100%) !important;
    box-shadow: none !important;

  }

  /* Icones et logo en blanc sur le degrade sombre */
  body.als-hero-page #header-als .nav-link,
  body.als-hero-page #header-als .nav-item > a,
  body.als-hero-page #header-als .action-btn,
  /* Logo mobile : halo drop-shadow (garde les couleurs d'origine) */
  body.als-hero-page #header-als .als-logo img {
    filter: drop-shadow(0 0 5px rgba(0,0,0,.65)) drop-shadow(0 0 12px rgba(0,0,0,.45)) !important;
  }
  body.als-hero-page #header-als .als-logo-main,
  body.als-hero-page #header-als .als-logo-sub {
    text-shadow: 0 0 8px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.55) !important;
  }
  body.als-hero-page #header-als #burger-als span {
    background: #ffffff !important;
  }
  body.als-hero-page #header-als .cart-count {
    background: #ffffff !important; color: #2b2b2b !important;
  }

  /* Au scroll sur mobile : header redevient opaque normal */
  body.als-hero-page #header-als.scrolled {
    background: var(--als-header-bg, #ffffff) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
  }
  body.als-hero-page #header-als.scrolled .nav-link,
  body.als-hero-page #header-als.scrolled .action-btn,
  body.als-hero-page #header-als.scrolled .als-logo-main,
  body.als-hero-page #header-als.scrolled .als-logo-sub {
    color: var(--als-nav-text) !important;
  }
  body.als-hero-page #header-als.scrolled .als-logo img { filter: none !important; }
  body.als-hero-page #header-als.scrolled #burger-als span {
    background: var(--als-nav-text) !important;
  }
  body.als-hero-page #header-als.scrolled .cart-count {
    background: var(--als-accent, #8AB834) !important; color: #ffffff !important;
  }
}