/* ============================================================
   Section : Grille de catégories produits (« Nos gammes »)
   Choisissez votre chaleur - CSS de production
   ------------------------------------------------------------
   Historique de conception (phases de travail) :
     1. Architecture HTML sémantique
     2. Layout (Flexbox, composition fidèle à la maquette)
     3. Design UI (couleurs, typographie, profondeur)
     4. Responsive (3 paliers : Desktop/Laptop, Tablette, Mobile)
     5. Motion design (micro-interactions, apparition au scroll)
     6. Optimisation production (ce fichier)
   Un seul fichier, organisé en sections numérotées ci-dessous.
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES
   Design tokens : géométrie, couleurs, typographie, mouvement.
   Source unique de vérité pour tout le composant.
   ------------------------------------------------------------ */
.categories {
  /* --- Géométrie (mesurée sur la maquette, cadre 1440px) --- */
  --frame-width: 1440px;
  --card-ratio: 442 / 288;      /* desktop / tablette : large, cinématographique */
  --card-ratio-mobile: 4 / 3;   /* mobile : plus haut, plus immersif en 1 colonne */

  /* --- Espacements fluides (desktop → mobile) --- */
  /* --container-padding-x et --section-padding-y : hérités de tokens.css */
  --header-margin-bottom: clamp(2rem, 5vw, 3.5rem);      /* 32px → 56px */
  --header-max-width: 37.5rem;

  --grid-gap-x: clamp(0.875rem, 1.5vw, 1rem);     /* 14px → 16px */
  --grid-gap-y: clamp(1.25rem, 2.5vw, 1.3125rem); /* 20px → 21px */

  /* --- Couleurs (contrastes vérifiés WCAG - voir rapport qualité) --- */

  --color-text-muted: color-mix(in srgb, var(--color-ink) 78%, var(--color-cream));
  --color-card-placeholder: color-mix(in srgb, var(--color-cream) 75%, var(--color-wood) 25%);

  /* Dégradé de lisibilité : garantit un contraste texte élevé
     quelle que soit la luminosité de la photo sous-jacente. */
  --overlay-gradient: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.5) 32%,
    rgba(0, 0, 0, 0) 68%
  );

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

  --eyebrow-size: clamp(0.75rem, 0.7rem + 0.4vw, 0.8125rem);     /* 12px → 13px */
  --title-size: clamp(1.8rem, 1.3rem + 2.5vw, 3.375rem);         /* ~29px → 54px */
  --card-title-size: clamp(1rem, 0.9rem + 0.4vw, 1.0625rem);     /* 16px → 17px */
  --card-icon-size: clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem);   /* 18px → 20px */

  /* --- Mouvement --- */
  --ease-hover: ease;
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* décélération douce */
  --duration-hover: 220ms;
  --duration-image: 500ms;
  --duration-entrance: 600ms;
  --stagger-step: 90ms;
  --card-shadow: 0 4px 12px rgba(25, 20, 12, 0.10);
}

/* ------------------------------------------------------------
   2. STYLES GLOBAUX
   ------------------------------------------------------------ */

/* Focus clavier : `outline` plutôt qu'un box-shadow "maison" -
   reste visible en mode Contraste élevé / forced-colors (Windows),
   contrairement à un box-shadow qui y est ignoré. */
a:focus-visible {
  outline: 3px solid var(--color-ember);
  outline-offset: 3px;
  border-radius: var(--r-card);
}

/* ------------------------------------------------------------
   3. SECTION & CONTENEUR
   Plafonné à 1440px : au-delà (≥ 1600px), l'espace
   supplémentaire devient une respiration latérale neutre
   plutôt qu'un étirement du contenu.
   ------------------------------------------------------------ */
.categories {
  padding-block: var(--section-padding-y);
  background-color: var(--color-paper);
}

.categories__container {
  width: 100%;
  max-width: var(--frame-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

/* ------------------------------------------------------------
   4. EN-TÊTE DE SECTION
   ------------------------------------------------------------ */
.categories__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;

  max-width: var(--header-max-width);
  margin-inline: auto;
  margin-bottom: var(--header-margin-bottom);

  text-align: center;
}

.categories__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ember);
}

.categories__title {
  font-family: var(--font-serif);
  font-size: var(--title-size);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-forest);
}


/* ------------------------------------------------------------
   5. GRILLE DE CARTES (Flexbox)
   Le nombre de colonnes change par palier (§8) ; la typo et les
   espacements restent fluides à l'intérieur d'un palier.
   ------------------------------------------------------------ */
.categories__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 7 catégories : la dernière carte seule reste centrée */
  column-gap: var(--grid-gap-x);
  row-gap: var(--grid-gap-y);
}

.categories__item {
  flex: 0 1 calc((100% - (2 * var(--grid-gap-x))) / 3); /* 3 col. par défaut */
  min-width: 0;
}

/* ------------------------------------------------------------
   6. COMPOSANT : CARTE DE CATÉGORIE
   La carte entière est la zone tactile (> 44×44px recommandés
   dès le plus petit format) : aucun élément interne n'a besoin
   d'une cible tactile dédiée.
   ------------------------------------------------------------ */
.category-card {
  width: 100%;
}

.category-card__link {
  display: block;
  width: 100%;
  border-radius: var(--r-card);
  transition: box-shadow var(--duration-hover) var(--ease-hover);
}

/* La carte reste immobile : seuls l'image (zoom) et la flèche réagissent. */
.category-card__link:hover,
.category-card__link:focus-visible {
  box-shadow: var(--card-shadow);
}

.category-card__figure {
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-ratio);
  overflow: hidden;
  border-radius: var(--r-card);
  background-color: var(--color-card-placeholder);
  isolation: isolate; /* empile proprement image, dégradé et légende */
}

.category-card__image {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-image) var(--ease-entrance);
}

.category-card__link:hover .category-card__image,
.category-card__link:focus-visible .category-card__image {
  transform: scale(1.06);
}

.category-card__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-gradient);
  pointer-events: none;
}

.category-card__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

  padding: clamp(1rem, 2vw, 1.25rem) clamp(1.125rem, 2.5vw, 1.5rem);
}

.category-card__title {
  font-family: var(--font-sans);
  font-size: var(--card-title-size);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-paper);
}

.category-card__icon {
  flex-shrink: 0;
  font-size: var(--card-icon-size);
  line-height: 1;
  color: var(--color-paper);
  transition: transform var(--duration-hover) var(--ease-hover);
}

.category-card__link:hover .category-card__icon,
.category-card__link:focus-visible .category-card__icon {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   7. APPARITION AU SCROLL
   État caché appliqué uniquement si le JS a confirmé (a) que
   IntersectionObserver est disponible et (b) qu'aucun mouvement
   réduit n'est demandé - via la classe `.js-motion` sur <html>.
   Sans JavaScript ou en mouvement réduit, le contenu reste
   visible par défaut : zéro dépendance fonctionnelle au script.
   ------------------------------------------------------------ */
html.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-entrance) var(--ease-entrance),
              transform var(--duration-entrance) var(--ease-entrance);
}

html.js-motion [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Cascade sur les 6 cartes : chacune apparaît légèrement après
   la précédente, sans retarder la lecture du titre/sous-titre. */
html.js-motion .categories__grid.is-visible .categories__item:nth-child(1) { transition-delay: calc(var(--stagger-step) * 0); }
html.js-motion .categories__grid.is-visible .categories__item:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
html.js-motion .categories__grid.is-visible .categories__item:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
html.js-motion .categories__grid.is-visible .categories__item:nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); }
html.js-motion .categories__grid.is-visible .categories__item:nth-child(5) { transition-delay: calc(var(--stagger-step) * 4); }
html.js-motion .categories__grid.is-visible .categories__item:nth-child(6) { transition-delay: calc(var(--stagger-step) * 5); }
html.js-motion .categories__grid.is-visible .categories__item:nth-child(7) { transition-delay: calc(var(--stagger-step) * 6); }

/* ------------------------------------------------------------
   8. PALIERS RESPONSIVE
   Chaque palier correspond à une catégorie d'appareil réelle.
   Les résolutions intermédiaires (1600, 1280, 992, 576, 430,
   390, 375, 320…) sont couvertes par ces paliers combinés aux
   valeurs fluides de la section 1 - aucune règle dupliquée par
   résolution.
   ------------------------------------------------------------ */

/* Tablette (768–1023px) : 2 colonnes plutôt que 3, pour ne pas
   écraser la photo et la légende sous ~300px de large. */
@media (max-width: 1023px) {
  .categories__item {
    flex-basis: calc((100% - var(--grid-gap-x)) / 2);
  }
}

/* Mobile (< 768px) : 1 colonne plein largeur, ratio plus haut
   (4/3) pour préserver l'impact photographique en portrait, et
   tracking de l'eyebrow resserré (le gain de lisibilité d'un
   tracking large ne justifie plus l'espace qu'il occupe). */
@media (max-width: 767px) {
  .categories {
  }

  .categories__item {
    flex-basis: 100%;
  }

  .category-card__figure {
    aspect-ratio: var(--card-ratio-mobile);
  }

  .categories__grid {
    row-gap: 1.25rem;
  }
}

/* ------------------------------------------------------------
   9. ACCESSIBILITÉ - MOUVEMENT RÉDUIT
   Filet de sécurité global, y compris pour les micro-interactions
   au survol, pas seulement l'apparition au scroll.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}