/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ============================================================
   AZALEA — DESIGN SYSTEM (socle Bricks)
   Les paliers correspondent aux breakpoints natifs de Bricks.
   ============================================================ */

:root {
  /* — Typographie : 6 niveaux fluides — */
  --text-xs:    clamp(12px, 1.1vw, 14px);
  --text-body:  clamp(15px, 1.4vw, 17px);
  --text-md:    clamp(16px, 1.8vw, 20px);
  --text-lg:    clamp(20px, 2.6vw, 28px);
  --text-xl:    clamp(26px, 4vw, 42px);
  --text-hero:  clamp(32px, 6vw, 72px);

  --lh-tight: 1.2;
  --lh-title: 1.3;
  --lh-body:  1.6;

  /* — Espacements : base 8 — */
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: clamp(48px, 8vw, 96px);

  /* — Grille produits — */
  --grid-gap:      var(--space-md);
  --thumb-ratio:   3 / 4;
  --measure:       65ch;
}

@media (max-width: 767px) {
  :root {
    --grid-gap: var(--space-sm);
  }
}

/* MOTIF 1 — Vignette produit */
.az-thumb {
  display: block;
  width: 100%;
  aspect-ratio: var(--thumb-ratio);
  overflow: hidden;
}

.az-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* MOTIF 2 — Grille produits : 4 → 3 → 2 */
.az-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 1279px) {
  .az-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .az-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* MOTIF 3 — Bloc éditorial */
.az-prose {
  max-width: var(--measure);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.az-prose > * + * {
  margin-top: var(--space-md);
}

.az-prose h2 {
  font-size: var(--text-lg);
  line-height: var(--lh-title);
  margin-top: var(--space-xl);
}

/* Rythme de section */
.az-section {
  padding-block: var(--space-3xl);
}

.az-section + .az-section {
  padding-block-start: 0;
}