/* ==========================================================================
   PRODUITS VEDETTES
   Phase 2 : Layout Engineering    → géométrie (conteneurs, espacements)
   Phase 3 : UI Pixel-Perfect      → direction artistique (couleurs,
                                      typographie, ombres, rayons)
   --------------------------------------------------------------------------
   Toutes les valeurs de design (section 2bis) ont été extraites par analyse
   colorimétrique directe de la maquette (1440 × 912 px) : couleurs les plus
   fréquentes par zone de texte/fond, rayons mesurés sur les coins de carte,
   police identifiée visuellement (serif display + sans-serif utilitaire).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET MINIMAL
   Strict nécessaire pour que les mesures de layout ne soient pas faussées
   par les styles par défaut du navigateur (marges de <ul>, <figure>, etc.).
   -------------------------------------------------------------------------- */

/* Utilitaire d'accessibilité : masque visuellement sans retirer du DOM */

/* --------------------------------------------------------------------------
   2. JETONS DE MISE EN PAGE
   Échelle d'espacement déduite de la maquette (grille de 8px).
   Pas de couleur ici : uniquement des dimensions.
   -------------------------------------------------------------------------- */

.featured-products {
  /* Calculée pour que le contenu s'aligne à 47px des bords à 1440px de
     large (mesure maquette), en conservant un padding de sécurité pour
     les viewports plus étroits : 1440 - 2 * (47 - 24) = 1394. */
  --container-max-width: var(--container-max-width-wide);
  /* Gouttière latérale partagée avec les catégories (tokens.css) */
  --container-padding-inline: var(--container-padding-x);

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  --grid-gap: 32px;          /* espace mesuré entre les cartes (~30px) */
  --card-padding-inline: 16px;
  --card-padding-block-end: 24px;

  /* Inset de l'image dans la carte (mesuré : carte→image ≈ 16px) : la photo
     n'est pas en plein bord, elle "flotte" dans un cadre de carte, avec son
     propre rayon (--r-media) distinct de celui de la carte. */
  --card-media-padding-top: 16px;

  --card-media-ratio: 8 / 9; /* proportion mesurée de l'image (~290 × 328) */
  --button-height: 56px;
}

/* --------------------------------------------------------------------------
   2bis. JETONS DE DESIGN (Phase 3)
   Palette, typographie, ombres et rayons - extraits par analyse
   colorimétrique de la maquette.
   -------------------------------------------------------------------------- */

.featured-products {
  /* --- Couleurs ------------------------------------------------------- */

  /* Fond crème chaud de la page/section */
  /* Fond blanc des cartes produit */
  /* Fond beige du calque image, visible tant que la photo n'est pas chargée */

  /* Vert forêt profond : eyebrow… non, réservé au titre de section et au
     prix actuel (les deux éléments "de marque" les plus saillants) */

  /* Rouge d'accent : eyebrow, pastille de réduction, bouton d'action */

  /* Texte */

  --color-text-secondary: color-mix(in srgb, var(--color-ink) 72%, var(--color-cream)); /* catégorie, caractéristiques */
  --color-text-muted: color-mix(in srgb, var(--color-ink) 42%, var(--color-cream));     /* prix barré */
  --color-accent-red-dark: color-mix(in srgb, var(--color-ember) 82%, black);           /* état :hover / :active */

  /* Statut */

  /* Ombres (noir désaturé, faible opacité pour une profondeur discrète) */
  --shadow-badge: 0 1px 3px rgba(20, 15, 10, 0.06);
  --shadow-button: 0 2px 6px rgba(188, 32, 24, 0.18);
  --shadow-button-hover: 0 3px 8px rgba(188, 32, 24, 0.24);

  /* Typographie */

  /* Fluides (Phase 4) : bornes mesurées à 375px et 1440px, interpolées en vw
     pour éviter les paliers brusques entre les breakpoints structurels. */
  --fs-link: 15px;
  --fs-category: 12px;
  --fs-card-title: clamp(18px, 17.3px + 0.19vw, 20px);
  --fs-specs: 14px;
  --fs-price-current: clamp(22px, 19.9px + 0.56vw, 28px);
  --fs-price-original: 16px;
  --fs-button: 15px;
}

/* --------------------------------------------------------------------------
   3. CONTENEUR DE SECTION
   -------------------------------------------------------------------------- */

.featured-products {
  /* Fluide (Phase 4) : ~40px sur mobile jusqu'à 64px mesurés sur desktop.
     Évite l'excès de vide vertical sur petit écran. */
  padding-block: var(--section-padding-y);
  background-color: var(--color-cream);
}

.featured-products__container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);

  /* Empile l'en-tête et la grille avec un espacement contrôlé (~33px mesuré) */
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* --------------------------------------------------------------------------
   4. EN-TÊTE DE SECTION
   Eyebrow + titre à gauche, lien "voir tout" à droite, sur une même ligne.
   -------------------------------------------------------------------------- */

.featured-products__header {
  display: flex;
  flex-direction: row;
  align-items: center;         /* aligne le lien avec le bloc de titre */
  justify-content: space-between;
  flex-wrap: wrap;              /* garde-fou anti-casse (pas de vrai responsive ici) */
  gap: var(--space-3);
}

.featured-products__heading {
  display: flex;
  flex-direction: column;
  /* écart mesuré eyebrow -> titre (~29px) */
  gap: var(--space-4);
}

.featured-products__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ember);
}

.featured-products__title {
  font-family: var(--font-serif);
  font-size: var(--fs-section-title);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-forest);
}

.featured-products__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;

  font-family: var(--font-sans);
  font-size: var(--fs-link);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.featured-products__link:hover,
.featured-products__link:focus-visible {
  color: var(--color-ember);
}

.featured-products__link-icon {
  transition: transform 0.2s ease;
}

.featured-products__link:hover .featured-products__link-icon,
.featured-products__link:focus-visible .featured-products__link-icon {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   5. GRILLE DE PRODUITS
   Flexbox plutôt que Grid : 4 colonnes de largeur égale avec un gap fixe.
   -------------------------------------------------------------------------- */

.featured-products__grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;              /* évite la casse sur petit écran (Phase 4 affinera) */
  gap: var(--grid-gap);
  align-items: stretch;         /* toutes les cartes ont la même hauteur */
}

.featured-products__item {
  /* 4 colonnes égales : (100% - 3 gaps) / 4, avec un plancher de sécurité */
  flex: 1 1 calc((100% - (3 * var(--grid-gap))) / 4);
  min-width: 260px;
  display: flex; /* permet à .product-card de s'étirer en pleine hauteur */
}

/* ==========================================================================
   7. RESPONSIVE EXPERIENCE DESIGN (Phase 4)
   --------------------------------------------------------------------------
   Chaque palier ci-dessous est une décision de composition, pas un simple
   rétrécissement :
     • ≥ 1600px  → confort supplémentaire sur très grand écran (conteneur
                    et gouttières élargis), sans jamais dépasser les tailles
                    de texte maximales déjà plafonnées par clamp().
     • 1280–1599 → composition desktop de référence (4 colonnes, non modifiée).
     • 768–1279  → grille 2×2 : au-delà de 4 colonnes de ~220px, le contenu
                    (image + titre + caractéristiques + prix + CTA) devient
                    trop dense pour rester agréable à lire ; 2 colonnes plus
                    larges redonnent de l'air à chaque carte.
     • < 768     → grille 2 colonnes, cartes compactes (< 600px : image,
                    titre, prix, bouton). Un carrousel horizontal cachait les
                    produits suivants derrière un geste que peu d'utilisateurs
                    font ; empiler 4 cartes complètes (~800px chacune) était
                    trop long. 2 cartes par ligne résout les deux problèmes.
   -------------------------------------------------------------------------- */

/* --- 7.1 Très grand écran : plus de respiration, pas plus de texte -------- */

@media (min-width: 1600px) {
  .featured-products {
    --container-max-width: 1600px;
    --grid-gap: 40px;
  }
}

/* --- 7.2 Tablette (992px, 768px) et petit laptop (1024px) : grille 2×2 --- */

@media (max-width: 1279px) {
  .featured-products {
    --grid-gap: 24px;
  }

  .featured-products__item {
    /* 2 colonnes égales plutôt que 4 : chaque carte respire davantage et
       le texte (titre, caractéristiques) n'a plus besoin de se compresser. */
    flex: 1 1 calc(50% - (var(--grid-gap) / 2));
    min-width: 280px;
  }
}

/* --- 7.3 Smartphones (576px, 390–430px, 320–375px) : grille 2 colonnes --- */

@media (max-width: 767px) {
  .featured-products {
    --grid-gap: 16px;
  }

  /* En-tête : le lien passe sous le titre plutôt que de forcer un retour
     à la ligne au milieu de la phrase (meilleure hiérarchie de lecture,
     plus confortable au pouce qu'un lien collé en haut à droite). */
  .featured-products__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .featured-products__link {
    /* Zone tactile confortable (≥ 44px) sans agrandir visuellement le lien */
    padding-block: var(--space-2);
    margin-block-start: calc(-1 * var(--space-2));
  }

  /* Grille 2 colonnes (cartes compactes, voir product-card.css) : les 4 produits tiennent
     dans ~2 écrans de hauteur et sont tous visibles d'un coup d'œil, sans balayage caché.
     Même schéma que le catalogue et que les grandes enseignes (2 produits par ligne). */
  .featured-products__item {
    flex: 1 1 calc(50% - (var(--grid-gap) / 2));
    min-width: 0;
  }
}

/* Mobile : padding interne des cartes resserré (la gouttière de page fait déjà 16 px) */
@media (max-width: 599px) {
  .featured-products { --grid-gap: 12px; }
}


/* --------------------------------------------------------------------------
   APPEL À L'ACTION SOUS LE CATALOGUE
   Même bandeau que sous le carrousel d'avis (carrousel-avis.css) : phrase
   d'invitation + boutons principal / secondaire entre deux filets.
   -------------------------------------------------------------------------- */
.featured-products__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  padding-block: 20px;
  border-block: 1px solid var(--color-border);
}

.featured-products__cta-text {
  margin: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.featured-products__cta-text strong { color: var(--color-text, inherit); }

.featured-products__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.featured-products__actions .button { padding-inline: 28px; }

/* Smartphone : boutons pleine largeur, zone tactile confortable */
@media (max-width: 576px) {
  .featured-products__cta-buttons { width: 100%; flex-direction: column; gap: 12px; }
  .featured-products__actions .button { width: 100%; }
}