/* ==========================================================================
   1. VARIABLES
   Palette, typographie, rayons et ombres extraits de l'analyse de la
   maquette. Les valeurs fluides (clamp) couvrent en continu la plage
   375px → 1440px : la plupart des breakpoints "intermédiaires" (1280,
   1024, 992, 576, 430...) sont donc déjà résolus ici, sans média-query.
   Seules les vraies ruptures de composition (empilement, réordonnancement,
   alignement) sont traitées en section 6.
   ========================================================================== */

.hero {
  /* --- Couleurs --------------------------------------------------------- */
  --color-media-placeholder: color-mix(in srgb, var(--color-ink) 12%, var(--color-paper));

  /* --- Typographie -------------------------------------------------------- */

  /* Échelle fluide : min à 375px, max à 1440px */
  --fs-eyebrow: clamp(0.75rem, 0.71rem + 0.15vw, 0.8125rem);       /* 12px → 13px */
  --fs-title: clamp(2.25rem, 1.3rem + 4.1vw, 5rem);                /* 36px → 80px, calé sur la maquette */
  --fs-description: clamp(1rem, 0.93rem + 0.28vw, 1.125rem);       /* 16px → 18px */
  --fs-button: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);            /* 15px → 16px */
  --fs-delivery: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);      /* 14px → 15px */

  --lh-title: 1.12;
  --lh-description: 1.7;
  --ls-eyebrow: 0.12em;

  /* --- Espacements fluides -------------------------------------------------
     Chaque token garde le rythme relatif observé sur la maquette desktop,
     mais se resserre progressivement sur les petits écrans. */
  --space-3: clamp(16px, 1.1rem + 0.4vw, 24px);
  --space-4: clamp(16px, 1.2rem + 0.6vw, 32px);
  --space-5: clamp(24px, 1.3rem + 0.8vw, 40px);
  --space-7: clamp(32px, 1.5rem + 1.4vw, 56px);
  --space-8: clamp(32px, 1rem + 2.4vw, 64px);
  --space-9: clamp(20px, 0.4rem + 3.8vw, 80px);

  /* --- Géométrie du hero ---------------------------------------------------- */
  --hero-padding-inline: var(--space-9);
  --hero-padding-block: var(--space-7);
  --hero-column-gap: var(--space-8);
  --hero-content-max-width: clamp(320px, 45vw, 640px);
  --hero-media-width: clamp(280px, 44vw, 660px);
  --hero-media-ratio: 638 / 705;
  --hero-description-max-width: 460px;

  /* --- Ombres ------------------------------------------------------------------ */
  --shadow-media: 0 6px 18px -6px rgba(28, 20, 12, 0.10);

  /* --- Cible tactile minimale (WCAG / Apple HIG) ------------------------------- */
  --touch-target-min: 44px;

  /* --- Motion ---------------------------------------------------------------
     Une seule grammaire d'easing/durées pour toute la page, pour que chaque
     interaction semble appartenir au même système. */
  --ease-out-premium: cubic-bezier(0.16, 1, 0.3, 1); /* décélération douce, sans rebond */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-hover: 200ms;
  --duration-state: 250ms;
  --duration-enter: 600ms;

  /* Raccourci pour toutes les transitions "hover standard" : évite de
     répéter la paire durée/courbe sur chaque propriété animée. */
  --transition-base: var(--duration-hover) var(--ease-standard);

  --shadow-button-hover: 0 3px 8px rgba(28, 20, 12, 0.16);
}

/* ==========================================================================
   2. STYLES GLOBAUX
   (reset, body, img : voir css/global/reset.css et base.css)
   ========================================================================== */

/* ==========================================================================
   3. COMPOSANTS
   ========================================================================== */

/* --- Boutons --------------------------------------------------------------
   Le padding vertical + line-height garantissent une hauteur > 44px sur
   tous les formats : la cible tactile reste confortable même quand la
   police se resserre sur mobile. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: var(--touch-target-min);
  padding-block: var(--space-4);
  padding-inline: var(--space-4);

  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;

  border-radius: var(--r-control);
  cursor: pointer;
  box-shadow: 0 0 0 0 transparent; /* valeur de départ neutre, nécessaire pour que box-shadow se transitionne proprement au survol */
  transition:
    filter var(--transition-base),
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

/* Retour tactile immédiat à l'appui : le bouton "s'enfonce" légèrement,
   confirmant la prise en compte du clic avant même le changement de page. */
/* Le bouton ne bouge pas : retour visuel uniquement par la couleur / le filtre. */
.button:active {
  transition-duration: 100ms;
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

.button--primary {
  background-color: var(--color-ember);
  border: 1px solid var(--color-ember);
  color: var(--color-paper);
}

.button--primary:hover {
  filter: brightness(0.92);
  box-shadow: var(--shadow-button-hover);
}

.button--secondary {
  background-color: transparent;
  border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
}

.button--secondary:hover {
  background-color: var(--color-ink);
  color: var(--color-cream);
}

/* --- Badge d'information (icône + texte) ---------------------------------- */

.info-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.info-badge__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  stroke: var(--color-ink);
  fill: none;
  stroke-width: 1.6;
  transition: transform var(--transition-base);
}

/* Micro-interaction discrète : le camion "avance" d'un pixel au survol du
   badge, un clin d'œil cohérent avec le message de livraison sans être
   gadget (le badge reste non cliquable, c'est une confirmation, pas un CTA). */
.info-badge:hover .info-badge__icon {
  transform: translateX(2px);
}

.info-badge__text {
  margin: 0;
  font-size: var(--fs-delivery);
  color: var(--color-ink);
}

/* ==========================================================================
   4. SECTIONS
   ========================================================================== */

.hero {
  width: 100%;
  /* Occupe la quasi-totalité de la hauteur visible au chargement (moins
     l'en-tête), pour que le hero soit vu en entier sans avoir à défiler. */
  min-height: min(760px, calc(100svh - 120px));
  display: flex;
  align-items: center;
  background-color: var(--color-cream); /* fond chaud : le hero ne se fond plus dans le header clair */
  overflow: hidden; /* évite tout débordement horizontal pendant les transitions de breakpoint */
}

.hero__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hero-column-gap);
  width: 100%;

  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--hero-padding-inline);
  padding-block: var(--hero-padding-block);
}

/* --- Colonne de contenu ---------------------------------------------------- */

.hero__content {
  flex: 1 1 0;
  max-width: var(--hero-content-max-width);
  min-width: 0; /* autorise la colonne à se comprimer sans forcer le débordement du flex */
}

.hero__text {
  margin-bottom: var(--space-5);
}

.hero__eyebrow {
  margin: 0 0 var(--space-5) 0;

  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ember);
}

.hero__title {
  margin: 0 0 var(--space-4) 0;

  font-family: var(--font-serif);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: var(--lh-title);
  color: var(--color-forest);
}

.hero__title-highlight {
  position: relative;
  font-style: normal;
}

.hero__description {
  margin: 0;
  max-width: var(--hero-description-max-width);

  font-size: var(--fs-description);
  line-height: var(--lh-description);
  color: var(--color-ink);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);

  margin-bottom: var(--space-7);
}

/* --- Colonne média ---------------------------------------------------------- */

.hero__media {
  flex: 0 0 var(--hero-media-width);
  width: var(--hero-media-width);
  max-width: 100%;

  aspect-ratio: var(--hero-media-ratio);
  margin: 0;

  overflow: hidden;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-media);
  background-color: var(--color-media-placeholder);
  transition: box-shadow var(--duration-state) var(--ease-standard);
}

.hero__media:hover {
  box-shadow: 0 8px 22px -6px rgba(28, 20, 12, 0.13);
}

.hero__image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center 35%; /* garde le poêle bien cadré quand le ratio se resserre */
  transition: transform 700ms var(--ease-out-premium);
}

/* Zoom très léger et lent : suggère la profondeur de la pièce sans jamais
   donner l'impression d'un effet "carrousel". */
.hero__media:hover .hero__image {
  transform: scale(1.045);
}

/* ==========================================================================
   6. ANIMATIONS D'ENTRÉE
   Le hero est le tout premier contenu vu par l'utilisateur : pas de scroll
   avant lui, donc pas d'Intersection Observer nécessaire ici - un simple
   enchaînement CSS au chargement suffit et évite tout JavaScript superflu.
   Chaque groupe apparaît légèrement décalé dans le temps (stagger) pour
   guider le regard dans l'ordre de lecture : label → titre → texte →
   actions → réassurance, pendant que le visuel s'installe en parallèle.
   ========================================================================== */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero__eyebrow,
.hero__title,
.hero__description,
.hero__actions,
.hero__delivery {
  opacity: 0;
  animation: fade-up var(--duration-enter) var(--ease-out-premium) forwards;
}

.hero__eyebrow     { animation-delay: 0ms; }
.hero__title       { animation-delay: 90ms; }
.hero__description { animation-delay: 180ms; }
.hero__actions     { animation-delay: 270ms; }
.hero__delivery    { animation-delay: 360ms; }

.hero__media {
  opacity: 0;
  animation: scale-in 700ms var(--ease-out-premium) forwards;
  animation-delay: 120ms;
}

/* ==========================================================================
   7. RESPONSIVE - RUPTURES DE COMPOSITION
   Les tailles/espacements sont déjà fluides (section 1). Les media queries
   ci-dessous ne servent qu'aux changements structurels : ceux qu'un
   `clamp()` ne peut pas exprimer (empilement, ordre, alignement, ratio du
   visuel, largeur des boutons).
   ========================================================================== */

/* --- ≤ 992px : grande tablette ---------------------------------------------
   Les deux colonnes commencent à se sentir à l'étroit (le texte descend
   sous ~370px de large) : on bascule vers une composition empilée un peu
   plus tôt que le tablet "classique", pour ne jamais comprimer le texte. */

@media (max-width: 992px) {
  .hero {
    min-height: auto;
  }

  .hero__container {
    flex-direction: column;
    align-items: stretch;
  }

  /* Le visuel est réordonné en premier : sur un écran vertical, l'image
     capte l'attention avant le texte et sert d'accroche immédiate. */
  .hero__media {
    order: -1;
    width: 100%;
    flex-basis: auto;
    aspect-ratio: 4 / 3; /* recadrage : un format portrait serait trop long en pleine largeur */
  }

  .hero__content {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
  }

  .hero__description {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .info-badge {
    justify-content: center;
  }
}

/* --- ≤ 600px : smartphone ----------------------------------------------------
   Les boutons passent en pleine largeur et se réempilent verticalement :
   plus simple à toucher d'une main, et hiérarchise clairement l'action
   principale au-dessus de l'action secondaire. */

@media (max-width: 600px) {
  .hero__media {
    aspect-ratio: 1 / 1;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  .info-badge {
    flex-wrap: wrap;
  }
}

/* --- ≤ 360px : très petit smartphone ------------------------------------------
   Garde-fou final : évite que le titre ne devienne trop grand pour les
   appareils les plus étroits (iPhone SE et équivalents Android compacts). */

@media (max-width: 360px) {
  .hero {
    --hero-padding-inline: 16px;
  }

  .hero__title {
    font-size: 2rem;
  }
}

/* ==========================================================================
   8. ACCESSIBILITÉ - PRÉFÉRENCE DE MOUVEMENT RÉDUIT
   Pour les utilisateurs sensibles au mouvement : le contenu reste
   immédiatement visible et complet, seules les transformations/animations
   sont neutralisées. Rien n'est jamais caché ni retardé indéfiniment.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__title,
  .hero__description,
  .hero__actions,
  .hero__delivery,
  .hero__media {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .button,
  .button:hover,
  .button:active,
  .hero__media,
  .hero__media:hover,
  .hero__image,
  .hero__media:hover .hero__image,
  .info-badge__icon,
  .info-badge:hover .info-badge__icon {
    transition: none;
    transform: none;
  }

}