/**
 * Page Accueil — Macq la Boutik
 *
 * Reproduit la structure de la prod (Elementor post-78.css) avec du code natif moderne :
 *   1. Hero (shortcode Rev Slider)
 *   2. Divider centré
 *   3. Section produits 1 "Des fleurs à l'image de vos émotions"
 *   4. Divider
 *   5. Section vidéo
 *   6. Divider
 *   7. Section blog (article featured + liste)
 *   8. Divider
 *   9. Section produits 2 "Coups de cœur"
 *  10. Divider
 *  11. Section "Savoir-faire / Créations / Conceptualisation" (3 cols, fond sombre)
 *  12. Spacer
 *  13. Section Instagram
 *
 * Contrainte créative : ZÉRO pour l'instant, on reproduit la prod.
 * Fidélité visuelle > créativité pour cette refonte.
 */

/* ═══════════════════════════════════════════════════════════════
 *  Wrapper général de la home
 * ═══════════════════════════════════════════════════════════════ */

.home-page {
  --section-pad-y: clamp(2rem, 5vw, 3.5rem);
  --section-gap: var(--space-l);
}

/* ═══════════════════════════════════════════════════════════════
 *  Hero — conteneur pour le shortcode Rev Slider
 *  On ne style pas le slider lui-même (il arrive avec ses propres styles),
 *  on cadre juste le container qui l'accueille.
 * ═══════════════════════════════════════════════════════════════ */

.home-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.home-hero:empty {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
 *  Titre de section réutilisable — surtitre + titre
 *
 *  Structure HTML attendue :
 *  <header class="section-heading">
 *    <span class="kicker">Kicker text</span>
 *    <h2 class="section-heading__title">Section Title</h2>
 *  </header>
 *
 *  Variantes :
 *  .section-heading--dark   → titre blanc (pour section sombre)
 *  .section-heading--ink    → titre encre noir (pour section blog)
 * ═══════════════════════════════════════════════════════════════ */

.section-heading {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.section-heading .kicker {
  /* hérite de .kicker : Anton uppercase rose */
  margin-bottom: var(--space-xs);
}

.section-heading__title {
  font-family: var(--font-body);
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--color-primary);
  margin: 0;
}

.section-heading--ink .section-heading__title {
  color: var(--color-ink);
}

.section-heading--dark .section-heading__title {
  color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════════
 *  Divider — trait 25% 1px noir centré
 *  Reproduit exactement le divider récurrent de la prod.
 * ═══════════════════════════════════════════════════════════════ */

.home-divider {
  width: 25%;
  height: 1px;
  background: var(--color-divider);
  margin: var(--space-s) auto;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════
 *  Section produits (réutilisée pour "Nos produits" et "Coups de cœur")
 * ═══════════════════════════════════════════════════════════════ */

.home-products {
  padding-block: var(--section-pad-y);
}

/* ─── Carrousel produits ───────────────────────────────────────────
 *
 * Approche : viewport overflow-hidden + track translateX piloté par JS.
 * CSS : on dimensionne les slides, JS : on bouge le track.
 *
 * Largeur visible contrôlée par --cards-visible (3 desktop / 2 tablette / 1.2 mobile).
 * La gouttière entre cards est gérée en CSS via gap.
 * ─────────────────────────────────────────────────────────────────── */

.home-products__carousel {
  --cards-visible: 3;
  --card-gap: var(--space-m);

  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-xl);
  /* Safari : forcer le GPU pour des transitions lisses */
  transform: translateZ(0);
}

@media (max-width: 1024px) {
  .home-products__carousel { --cards-visible: 2; }
}

@media (max-width: 767px) {
  .home-products__carousel {
    --cards-visible: 1.2;
    --card-gap: var(--space-s);
  }
}

.home-products__track {
  display: flex;
  gap: var(--card-gap);
  list-style: none;
  padding: 0;
  margin: 0;
  /*
   * Gouttière intérieure quand le carrousel est en edge-to-edge :
   * sinon la première card est collée au bord gauche du viewport.
   * Reproduit la gouttière du container (--container-gutter) pour rester
   * aligné avec le reste de la page (kicker, autres sections).
   */
  padding-inline: var(--container-gutter);
  /* Transition assurée par le JS via toggle d'une classe, pas ici : l'état "saut silencieux" doit être sans anim */
  will-change: transform;
  touch-action: pan-y pinch-zoom;   /* laisse le scroll vertical, capture le swipe horizontal */
}

/*
 * Propagation touch-action aux cards et liens internes (v1.5.29).
 *
 * Sans ça, les <a class="product-card__link"> qui couvrent ~90% de la
 * surface des cards récupèrent le `touch-action: auto` par défaut → le
 * navigateur traite tout geste tactile comme du scroll potentiel, et au
 * moindre mouvement vertical (inévitable sur mobile), il "vole" le
 * pointer en envoyant un pointercancel et le swipe horizontal devient
 * impossible.
 *
 * On force `pan-y pinch-zoom` partout : le navigateur ne gère QUE le
 * scroll vertical et le pinch, on garde la main sur le pan horizontal.
 */
.home-products__track .product-card,
.home-products__track .product-card__link,
.home-products__track .product-card__media,
.home-products__track .product-card__media img {
  touch-action: pan-y pinch-zoom;
}

.home-products__track--animate {
  transition: transform var(--dur-slow) var(--ease-out);
}

.home-products__carousel .product-card {
  /* Chaque card occupe exactement 1/cards-visible du viewport, moins la gouttière proportionnelle */
  flex: 0 0 calc(
    (100% - (var(--cards-visible) - 1) * var(--card-gap)) / var(--cards-visible)
  );
  min-width: 0;   /* évite que le contenu déborde */
}

/* Pendant le drag, on désactive les interactions pointer sur les liens
 * pour éviter qu'un simple clic + drag ouvre la fiche produit */
.home-products__track--dragging a,
.home-products__track--dragging img {
  pointer-events: none;
  user-select: none;
}

/* prefers-reduced-motion : désactive l'animation, les slides apparaissent brutes */
@media (prefers-reduced-motion: reduce) {
  .home-products__track--animate {
    transition: none;
  }
}

.home-products__cta {
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
 *  Section vidéo
 *  Ratio 16:9, embed oEmbed YouTube.
 * ═══════════════════════════════════════════════════════════════ */

.home-video {
  padding-block: var(--section-pad-y);
}

.home-video__player {
  position: relative;
  width: 100%;
  /*
   * Pas de max-width ici : la classe utilitaire .is-fullbleed appliquée
   * sur le markup étend le player sur 100vw. Si on veut limiter à nouveau,
   * il suffit de retirer .is-fullbleed côté template.
   */
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.home-video__player iframe,
.home-video__player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════
 *  Section blog — 1 article featured + liste d'articles
 *  Desktop : 2 colonnes (615px + auto) — valeur exacte de la prod.
 *  Tablette : 2 colonnes adaptées.
 *  Mobile : 1 colonne empilée.
 * ═══════════════════════════════════════════════════════════════ */

.home-blog {
  padding-block: var(--section-pad-y);
}

.home-blog__layout {
  display: grid;
  grid-template-columns: 615px 1fr;
  gap: var(--space-l);
  align-items: start;
}

@media (max-width: 1024px) {
  .home-blog__layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
  }
}

@media (max-width: 767px) {
  .home-blog__layout {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
}

/* Article featured (grand, à gauche) */
.home-blog__featured {
  position: relative;
  min-height: 505px;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--color-surface-alt);
  display: flex;
  flex-direction: column;
}

.home-blog__featured-media {
  flex: 1 1 auto;
  min-height: 280px;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.home-blog__featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.home-blog__featured:hover .home-blog__featured-media img {
  transform: scale(1.04);
}

.home-blog__featured-content {
  padding: var(--space-l);
  background: var(--color-surface);
  border-radius: var(--radius-m);
}

.home-blog__featured-title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);   /* 20 → 24 px */
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-xs);
  transition: color var(--dur-fast) var(--ease-out);
}

.home-blog__featured:hover .home-blog__featured-title,
.home-blog__featured:focus-within .home-blog__featured-title {
  color: var(--color-primary);
}

.home-blog__featured-meta {
  font-family: var(--font-body);
  font-size: 0.8125rem;   /* 13 px (valeur prod) */
  color: var(--color-ink);
  text-transform: capitalize;
  margin-bottom: var(--space-xs);
}

.home-blog__featured-excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink);
  line-height: var(--lh-normal);
  margin: 0;
}

/* Liste d'articles (droite) */
.home-blog__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-blog__item {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: var(--space-s);
  align-items: start;
  border-radius: var(--radius-m);
  padding: var(--space-xs);
  transition: background var(--dur-fast) var(--ease-out);
}

.home-blog__item:hover {
  background: var(--color-surface-alt);
}

.home-blog__item-media {
  width: 145px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--color-surface-alt);
}

.home-blog__item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-blog__item-title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 1.1875rem;   /* 19 px */
  line-height: 1;
  color: var(--color-ink);
  margin: 0 0 var(--space-2xs);
  transition: color var(--dur-fast) var(--ease-out);
}

.home-blog__item:hover .home-blog__item-title {
  color: var(--color-primary);
}

.home-blog__item-meta {
  font-family: var(--font-body);
  font-size: 0.875rem;   /* 14 px */
  color: var(--color-ink);
  text-transform: capitalize;
  margin-bottom: var(--space-2xs);
}

.home-blog__item-excerpt {
  font-family: var(--font-body);
  font-size: 0.9375rem;   /* 15 px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  margin: 0;
}

@media (max-width: 767px) {
  .home-blog__item {
    grid-template-columns: 100px 1fr;
  }
  .home-blog__item-media {
    width: 100px;
  }
}

/* CTA blog */
.home-blog__cta {
  text-align: center;
  margin-top: var(--space-xl);
}

/* ═══════════════════════════════════════════════════════════════
 *  Section "Savoir-faire / Créations / Conceptualisation"
 *  3 colonnes 33.33%, fond sombre #292929, textes blancs justifiés.
 * ═══════════════════════════════════════════════════════════════ */

.home-valeurs {
  background: var(--color-dark-bg);
  color: #FFFFFF;
  padding-block: var(--space-2xl);
}

.home-valeurs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 1024px) {
  .home-valeurs__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

.home-valeurs__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.home-valeurs__media {
  width: 100%;
  height: 236px;     /* valeur exacte prod */
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--color-surface-alt);
}

.home-valeurs__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.home-valeurs__item:hover .home-valeurs__media img {
  transform: scale(1.04);
}

.home-valeurs__title {
  font-family: var(--font-display);   /* Anton — comme dans la prod */
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);   /* 24 → 32 px */
  line-height: var(--lh-tight);
  color: #FFFFFF;
  margin: 0;
}

.home-valeurs__text {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: #FFFFFF;
  text-align: justify;
  hyphens: auto;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
 *  Section Instagram — shortcode, cadre léger
 * ═══════════════════════════════════════════════════════════════ */

.home-instagram {
  padding-block: var(--section-pad-y);
}

.home-instagram__feed {
  margin-top: var(--space-l);
}

.home-instagram__feed:empty {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
 *  Spacer final (100px prod)
 * ═══════════════════════════════════════════════════════════════ */

.home-spacer {
  height: var(--space-3xl);
}

@media (max-width: 767px) {
  .home-spacer {
    height: var(--space-xl);
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  Sections fullscreen — Accueil v1.5.7
 *
 *  Demande client : chaque section de l'accueil doit "remplir l'écran".
 *
 *  Stratégie responsive :
 *   - Desktop ≥1024px  : min-height 100svh - header (vraie immersion)
 *   - Tablette 768-1023 : min-height 80svh (un peu de respiration)
 *   - Mobile  <768px   : hauteur naturelle (scroll fluide pouce)
 *
 *  Pourquoi `100svh` et non `100vh` :
 *    `svh` = Small Viewport Height (CSS Values Level 4). Évite le saut
 *    quand la barre d'URL mobile apparaît/disparaît au scroll.
 *    Baseline 2022 : Chrome 108+, Safari 15.4+, Firefox 101+ → universel.
 *
 *  Pourquoi `min-height` et non `height` :
 *    Une section avec beaucoup de contenu (8 cards produit en grid)
 *    peut excéder 100vh. `min-height` permet de grandir si besoin sans
 *    overflow caché.
 *
 *  Display flex column + justify-content center :
 *    Centre VERTICALEMENT le contenu de chaque section.
 *    Quand le contenu est court (ex: section vidéo avec juste un player),
 *    il flotte au milieu pour rythme visuel régulier au scroll.
 *
 *  Padding vertical :
 *    On garde `clamp` pour respiration min/max, en plus du flex center.
 *    Ça évite que le contenu colle aux bords sur sections moyennement
 *    remplies.
 *
 *  Header offset :
 *    On soustrait --macq-header-height (88px) au calcul desktop UNIQUEMENT,
 *    car sur mobile le header n'est pas sticky (cf. nav.css).
 * ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .home-hero,
  .home-products,
  .home-video,
  .home-blog,
  .home-valeurs,
  .home-instagram {
    /* Fallback browsers anciens (~5% en 2026) */
    min-height: calc(100vh - var(--macq-header-height, 88px));
    /* Modernes : svh = small viewport height, stable au scroll mobile */
    min-height: calc(100svh - var(--macq-header-height, 88px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(2rem, 5vh, 5rem);
  }

  /* Le > .container interne doit pouvoir s'étirer si besoin */
  .home-hero > .container,
  .home-products > .container,
  .home-video > .container,
  .home-blog > .container,
  .home-valeurs > .container,
  .home-instagram > .container {
    width: 100%;
  }
}

/* Tablette : sections moins hautes, plus aérées qu'un mobile mais
   pas écrasantes comme un fullscreen desktop. */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-hero,
  .home-products,
  .home-video,
  .home-blog,
  .home-valeurs,
  .home-instagram {
    min-height: 80vh;
    min-height: 80svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(2rem, 6vh, 4rem);
  }
}

/* Mobile : on NE FORCE PAS de hauteur. Hauteur naturelle = scroll fluide,
   adapté au pouce. Forcer 100vh sur mobile rend la navigation pénible. */