:root {
  --yellow: #fecc20;
  --yellow-deep: #fecc27;
  --btn: #8AD07E;
  --btn-hover: #79C46B;
}

* { box-sizing: border-box }
html, body { height: 100% }
html { scroll-behavior: smooth }
body {
  margin: 0;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Popins", Arial, sans-serif;
  overflow-x: hidden; /* empêche le scroll horizontal */
}

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  height: 100dvh;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  isolation: isolate;
}

/* --- VIDÉO DE FOND --- */
.bg-video { position: absolute; inset: 0; z-index: -5; overflow: hidden }
.bg-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(110%) contrast(102%);
}

/* --- MOTIF ALVÉOLÉ --- */
.pattern {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='70' viewBox='0 0 60 70'>\
<defs><pattern id='hex' width='60' height='70' patternUnits='userSpaceOnUse'>\
<g fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.33'>\
<polygon points='30,0 60,17.5 60,52.5 30,70 0,52.5 0,17.5'/>\
</g></pattern></defs><rect width='100%' height='100%' fill='transparent'/>\
<rect width='100%' height='100%' fill='url(%23hex)'/>\
</svg>") center/300px 350px repeat;
  mix-blend-mode: soft-light;
}

.veil {
  position: absolute; inset: 0; z-index: -2;
  backdrop-filter: blur(1.2px);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.10));
}

/* --- TOPBAR + LOGO --- */
.topbar {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 24px clamp(16px,4vw,40px);
}

.logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: #fff; font-weight: 800; letter-spacing: .5px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  padding: 10px 14px; border-radius: 14px; backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.logo-badge {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, #fff 0 30%, #ffeaa3 32% 100%);
  color: #24a64a; font-weight: 900; box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
}

/* --- CONTENU CENTRAL --- */
.center { width: min(1200px,92vw); text-align: center; margin: -12px auto 0 }

h1 {
  margin: 0 0 28px;
  font-family: "Poppins", system-ui;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .5px;
  font-size: clamp(34px,5.2vw,72px);
  color: transparent;
  background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow-deep) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0px 6px 12px rgba(0,0,0,0.3));
}

.cta-row { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap }
.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 18px clamp(26px,4.6vw,42px);
  border-radius: 18px;
  background: var(--btn);
  color: #174219;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), 0 10px 24px rgba(122,181,110,.35);
  transition: .2s transform ease, .2s box-shadow ease, .2s background ease;
  text-decoration: none;
  font-size: clamp(16px,2.3vw,24px);
}
.btn:hover { background: var(--btn-hover); transform: translateY(-2px) }
.btn:active { transform: translateY(0); box-shadow: inset 0 3px 0 rgba(0,0,0,.1) }

footer {
  padding: 18px 16px 26px;
  font-size: 14px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

@media (max-height:620px){
  .hero { align-content: space-between }
  h1 { font-size: clamp(26px,4.6vw,54px) }
  .btn { padding: 14px 24px }
}

/* ===== FLÈCHE ===== */
.scroll-arrow {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(254,202,59,0.48); border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  z-index: 2;
}
.scroll-arrow:hover { transform: translateX(-50%) translateY(-2px); background: rgba(255,255,255,.18) }
.scroll-arrow svg { width: 26px; height: 26px; display: block }

/* ===== SECTION TEXTE CENTRÉ ===== */
.centered-section {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: clamp(24px,6vw,80px) 0;
  color: #fff; text-align: center; position: relative;
  background: radial-gradient(1200px 600px at 50% 20%, rgba(0,0,0,.06), transparent 60%),
              linear-gradient(90deg, #fecc20 0%, #fecc20 38%, #fecc20 100%);
}
.centered-wrap { width: min(1100px, 92vw) }
.centered-title {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(28px, 5.4vw, 58px);
  letter-spacing: .3px; color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.centered-lead {
  margin: 0 auto;
  font-weight: 800;
  font-size: clamp(18px, 2.5vw, 34px);
  line-height: 1.2; letter-spacing: .2px; white-space: pre-line;
  text-shadow: 0 3px 10px rgba(0,0,0,.35); max-width: 60ch;
}
.centered-section .cta-row { margin-top: clamp(16px, 3vw, 32px); justify-content: center }

/* ===== SECTION STORIES ===== */
.story {
  --media-w: 520px;
  --gap: clamp(12px, 3.5vw, 32px);
  --duration: 6500ms;
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: clamp(12px, 4vw, 40px) 0;
  color: #fecc20;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 38%, #ffffff 100%);
  position: relative;
}

.story-viewport { width: min(1200px,92vw); overflow: hidden }
.story-track { display: flex; align-items: stretch; will-change: transform; transition: transform .6s cubic-bezier(.2,.8,.2,1) }
.story-slide { flex: 0 0 100%; display: grid; align-items: center; gap: var(--gap); padding: clamp(6px, 1.6vw, 14px) }
.story-slide.left  { grid-template-columns: var(--media-w) 1fr }
.story-slide.right { grid-template-columns: 1fr var(--media-w) }
.story-slide.centered { grid-template-columns: 1fr; text-align: center; place-items: center }

.story-media { width: 100%; max-width: var(--media-w) }
.story-media img, .story-media video { width: 100%; height: auto; display: block; border-radius: 20px; object-fit: cover }
.story-text {
  font-weight: 400;
  font-size: clamp(10px, 2.8vw, 20px);
  line-height: 1.18; letter-spacing: .2px;
  white-space: pre-line; text-align: justify;
}
.story-text strong { color: #8AD07E; font-weight: 700 }

/* jauge */
.story-progress {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center; justify-content: center;
  padding: 6px 8px; border-radius: 12px;
  background: rgba(0,0,0,.15); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
}
.story-dot {
  --w: 58px; --h: 6px;
  position: relative; width: var(--w); height: var(--h);
  border-radius: 999px; background: rgba(255,255,255,.25);
  overflow: hidden; border: none; padding: 0; cursor: pointer;
}
.story-dot .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(180deg, #8AD07E, #79C46B); transition: width linear }

/* ===== WIDGET AVIS GOOGLE ===== */
.rw-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: min(92vw, 340px);
  pointer-events: none;
}
.rw-card {
  pointer-events: auto;
  background: rgba(18,18,18,.66);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  color: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* ======= RESPONSIVE MOBILE ======= */
@media (max-width: 900px) {
  .hero {
    grid-template-rows: 1fr auto auto;
    text-align: center;
    padding: 20px;
  }

  .center h1 {
    font-size: clamp(26px, 7vw, 40px);
  }

  .cta-row {
    flex-direction: column;
    gap: 12px;
  }
  .btn {
    width: 80%;
    max-width: 280px;
    margin: 0 auto;
  }

  .scroll-arrow {
    bottom: 40px;
    width: 42px;
    height: 42px;
  }

  .story-slide.left, .story-slide.right {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .story-media {
    order: -1;
    max-width: 90%;
    margin: 0 auto 20px;
  }
  .story-text {
    text-align: center;
    font-size: clamp(14px, 4vw, 18px);
  }
  .story-progress {
    bottom: 10px;
    transform: translateX(-50%) scale(0.9);
  }

  .centered-section {
    padding: 60px 20px;
  }
  .centered-lead {
    font-size: clamp(16px, 4vw, 20px);
  }

  .rw-widget {
    bottom: 12px;
    right: 12px;
    width: calc(100vw - 24px);
  }

  footer {
    font-size: 12px;
    padding: 12px;
  }
}