/* ============================================================
   IZII Hero — hero.css
   Variation A : Asymétrique graphique
   Préfixe    : .izii-hero  (pas de conflits Elementor/thème)
   Police     : Plus Jakarta Sans (enqueued via functions.php)
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
.izii-hero {
  --izii-yellow:      #F5A623;
  --izii-yellow-deep: #E69418;
  --izii-cream:       #F7F5F0;
  --izii-ink:         #111111;
  --izii-ink-muted:   rgba(17, 17, 17, 0.65);

  --izii-radius-card: 24px;
  --izii-radius-btn:  999px;

  --izii-pad-h:  60px;   /* padding horizontal desktop */
  --izii-pad-hm: 20px;   /* padding horizontal mobile  */
}

/* ── Reset ciblé — défensif contre les surcharges Elementor ── */
.izii-hero *,
.izii-hero *::before,
.izii-hero *::after {
  box-sizing: border-box;
}
.izii-hero ul,
.izii-hero li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.izii-hero a {
  text-decoration: none;
}
.izii-hero img {
  display: block;
  max-width: 100%;
}

/* Reset fort sur tous les <button> du hero.
   Elementor injecte min-height, padding, line-height, etc. sur button {} */
.izii-hero button {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  outline: none;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: 1 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
}

/* Neutraliser le padding qu'Elementor peut ajouter
   sur le widget shortcode qui contient le hero */
.elementor-widget-shortcode:has(#izii-hero),
.elementor-widget:has(#izii-hero) {
  padding: 0 !important;
  margin: 0 !important;
}
/* Fallback sans :has() — le user met la classe .izii-widget sur le widget
   dans Elementor → Advanced → CSS Classes */
.izii-widget.elementor-widget {
  padding: 0 !important;
  margin: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TRANSITIONS SLIDER — fade + glissement vertical
   Direction : slide suivant  → texte monte (leaving-up / entering-down)
               slide précédent→ texte descend (leaving-down / entering-up)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes izii-leave-up {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(-14px); }
}
@keyframes izii-leave-down {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(14px); }
}
@keyframes izii-enter-from-below {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes izii-enter-from-above {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* Sortie */
.izii-leaving-up {
  animation: izii-leave-up 0.2s ease forwards;
}
.izii-leaving-down {
  animation: izii-leave-down 0.2s ease forwards;
}

/* Entrée — stagger via nth-of-type n'est pas applicable ici
   (les éléments ont des IDs différents), on stagger en CSS
   en ciblant chaque ID individuellement */
.izii-entering-down,
.izii-entering-up {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
}
.izii-entering-down { animation-name: izii-enter-from-below; }
.izii-entering-up   { animation-name: izii-enter-from-above; }

/* Stagger : kicker, titre, corps avec un léger décalage */
#izii-kicker.izii-entering-down,
#izii-kicker.izii-entering-up  { animation-delay: 0ms;  }
#izii-title.izii-entering-down,
#izii-title.izii-entering-up   { animation-delay: 50ms; }
#izii-sub.izii-entering-down,
#izii-sub.izii-entering-up     { animation-delay: 90ms; }

/* ── Conteneur global ─────────────────────────────────────── */
.izii-hero {
  position: relative;
  overflow: hidden;
  background: var(--izii-cream);
  color: var(--izii-ink);
  font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Swoosh SVG décoratif ─────────────────────────────────── */
.izii-hero__swoosh {
  position: absolute;
  top:   50px;
  right: -40px;
  width: 58%;
  height: 680px;
  z-index: 0;          /* derrière tout */
  pointer-events: none;
  user-select: none;
}

/* ── Grille principale 2 colonnes ─────────────────────────── */
.izii-hero__main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  padding: 48px var(--izii-pad-h) 36px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COLONNE GAUCHE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.izii-hero__left {
  display: flex;
  flex-direction: column;
}

/* Kicker */
.izii-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #fff;
  border-radius: var(--izii-radius-btn);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  box-shadow: 0 2px 0 var(--izii-ink);
  width: fit-content;
  color: var(--izii-ink);     /* toujours noir */
}
.izii-hero__kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--izii-yellow);
  flex-shrink: 0;
}

/* Titre */
.izii-hero__title {
  font-size: clamp(44px, 5.5vw, 82px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2.5px;
  margin: 20px 0 0;
  color: var(--izii-ink);     /* toujours noir */
  font-style: normal;
}
.izii-hero__accent {
  font-style: normal;
  color: var(--izii-yellow-deep);  /* accent jaune */
}

/* Corps */
.izii-hero__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--izii-ink-muted);
  margin: 18px 0 28px;
  max-width: 460px;
}
.izii-hero__body strong {
  color: var(--izii-ink);
  font-weight: 700;
}

/* CTAs */
.izii-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Les deux boutons partagent une base commune */
.izii-hero__btn-primary,
.izii-hero__btn-secondary {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;       /* empêche Elementor de les étirer */
  min-width: 0 !important;
  white-space: nowrap;
  padding: 14px 22px !important;
  border-radius: var(--izii-radius-btn) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer;
  flex-shrink: 0;
}

.izii-hero__btn-primary {
  gap: 10px;
  background: var(--izii-ink) !important;
  color: #fff !important;
  transition: opacity 0.2s;
}
.izii-hero__btn-primary:hover,
.izii-hero__btn-primary:focus { opacity: 0.82; color: #fff !important; }

.izii-hero__btn-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  min-width: 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--izii-yellow);
  color: var(--izii-ink);        /* SVG hérite de currentColor */
  line-height: 1 !important;
  font-size: 0 !important;       /* neutralise tout texte résiduel */
}
.izii-hero__btn-arrow svg {
  display: block;
  flex-shrink: 0;
}

.izii-hero__btn-secondary {
  background: var(--izii-yellow) !important;
  color: var(--izii-ink) !important;
  transition: background 0.2s;
}
.izii-hero__btn-secondary:hover,
.izii-hero__btn-secondary:focus {
  background: var(--izii-yellow-deep) !important;
  color: var(--izii-ink) !important;
}

/* Méta : dots + séparateur + stats */
.izii-hero__meta {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* Dots slider
   Reset très agressif nécessaire : Elementor surcharge button avec
   min-height, padding, line-height, background, border, etc. */
.izii-hero__dots {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.izii-hero__dot {
  /* Dimensions fixes — résistent aux surcharges Elementor */
  display: block !important;
  flex-shrink: 0 !important;
  width:  10px !important;
  height: 10px !important;
  min-width:  0 !important;
  min-height: 0 !important;
  max-width:  none;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 6px !important;
  background: rgba(17, 17, 17, 0.2) !important;
  box-shadow: none !important;
  font-size: 0 !important;      /* cache tout contenu texte résiduel */
  line-height: 0 !important;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.28s ease, background 0.28s ease;
}
.izii-hero__dot.is-active {
  width: 32px !important;
  background: rgba(17, 17, 17, 0.18) !important; /* fond gris = piste */
  position: relative !important;
  overflow: hidden !important;
}

/* Barre de progression — remplit le dot de gauche à droite */
.izii-hero__dot.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--izii-ink);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  animation: izii-dot-progress 5.5s linear forwards;
}

/* Pause visuelle de la barre au survol du hero */
.izii-hero:hover .izii-hero__dot.is-active::after {
  animation-play-state: paused;
}

@keyframes izii-dot-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Séparateur vertical */
.izii-hero__divider {
  width: 1px;
  height: 28px;
  background: rgba(17, 17, 17, 0.15);
  flex-shrink: 0;
}

/* Stats */
.izii-hero__stats {
  display: flex;
  gap: 20px;
}
.izii-hero__stats li {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--izii-ink-muted);
  line-height: 1.35;
}
.izii-hero__stats strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--izii-ink);
  line-height: 1.1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COLONNE DROITE — visuel produit
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.izii-hero__right {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.izii-hero__product {
  position: relative;
  width: 340px;
  height: 460px;
}

/* Photo principale inclinée */
.izii-hero__main-card {
  width: 100%;
  height: 100%;
  border-radius: var(--izii-radius-card);
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.16);
  transform: rotate(-3deg);
}
.izii-hero__main-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Polaroids flottants */
.izii-hero__polaroid {
  position: absolute;
  background: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  /* padding-bottom plus grand = blanc bas style polaroid */
}
.izii-hero__polaroid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.izii-hero__polaroid--left {
  bottom: -20px;
  left: -48px;
  width: 160px;
  padding: 8px 8px 34px;
  transform: rotate(-8deg);
}
.izii-hero__polaroid--right {
  top: -14px;
  right: -38px;
  width: 130px;
  padding: 7px 7px 26px;
  transform: rotate(9deg);
}

/* Sticker prix circulaire */
.izii-hero__sticker {
  position: absolute;
  bottom: 30px;
  right: -28px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--izii-ink);
  color: var(--izii-yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.15;
  transform: rotate(8deg);
}
.izii-hero__sticker span {
  font-size: 21px;
  line-height: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ZONES NAVIGATION BAS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.izii-hero__nav-zones {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 var(--izii-pad-h) 56px;
}

.izii-hero__zone {
  position: relative;
  height: 320px;
  border-radius: var(--izii-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  color: #fff;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.izii-hero__zone:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.izii-hero__zone-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.4s ease;
}
.izii-hero__zone:hover .izii-hero__zone-img {
  transform: scale(1.04);
}

.izii-hero__zone-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0)    30%,
    rgba(0, 0, 0, 0.72) 100%
  );
}

.izii-hero__zone-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  padding: 5px 12px;
  border-radius: var(--izii-radius-btn);
  background: var(--izii-yellow);
  color: var(--izii-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.izii-hero__zone-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.izii-hero__zone-title {
  font-size: 60px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
  margin: 0;
  color: #fff;
}

.izii-hero__zone-sub {
  font-size: 16px;
  margin: 4px 0 0;
  opacity: 0.88;
  color: #fff;
}

.izii-hero__zone-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--izii-yellow);
  color: var(--izii-ink);
  font-size: 0;                  /* pas de texte résiduel */
  transition: background 0.2s;
}
.izii-hero__zone-arrow svg {
  display: block;
  flex-shrink: 0;
}
.izii-hero__zone:hover .izii-hero__zone-arrow {
  background: #fff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — mobile ≤ 768px
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {

  .izii-hero__swoosh {
    width: 85%;
    right: -50px;
    top: 10px;
    height: 260px;
  }

  /* Grille en colonne */
  .izii-hero__main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px var(--izii-pad-hm) 24px;
  }

  /* Titre plus petit */
  .izii-hero__title {
    font-size: 36px;
    letter-spacing: -1px;
    margin-top: 12px;
  }

  .izii-hero__body {
    font-size: 14px;
    margin: 12px 0 20px;
  }

  /* CTAs en colonne pleine largeur sur mobile */
  .izii-hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .izii-hero__btn-primary,
  .izii-hero__btn-secondary {
    justify-content: center !important;
    width: 100% !important;
  }
  .izii-hero__btn-primary {
    justify-content: space-between !important;
  }

  /* Stats plus compactes */
  .izii-hero__meta {
    margin-top: 20px;
    gap: 16px;
  }
  .izii-hero__stats {
    gap: 14px;
  }
  .izii-hero__stats strong {
    font-size: 16px;
  }

  /* Visuel produit centré, plus compact */
  .izii-hero__right {
    height: auto;
    order: -1;   /* visuel au-dessus du texte sur mobile */
  }

  .izii-hero__product {
    width: 200px;
    height: 250px;
    margin: 0 auto;
  }

  .izii-hero__polaroid--left {
    width: 92px;
    left: -28px;
    padding: 5px 5px 20px;
  }
  .izii-hero__polaroid--right {
    width: 78px;
    right: -20px;
    top: -10px;
    padding: 5px 5px 18px;
  }

  .izii-hero__sticker {
    width: 72px;
    height: 72px;
    right: -14px;
    bottom: 22px;
    font-size: 10px;
  }
  .izii-hero__sticker span { font-size: 17px; }

  /* Zones nav en colonne */
  .izii-hero__nav-zones {
    grid-template-columns: 1fr;
    padding: 0 var(--izii-pad-hm) 36px;
    gap: 12px;
  }

  .izii-hero__zone { height: 240px; padding: 18px; }
  .izii-hero__zone-title { font-size: 44px; }
}