/* ==========================================================================
   DIVI 5 RESPONSIVE — 7 BREAKPOINTS (2025)
   Source : divi5-toolkit (cjsimon2/Divi5-ToolKit)
   Adapté pour : Terre et Saveurs

   Système de breakpoints :
   1. Phone Portrait    ≤479px
   2. Phone Landscape   480–767px
   3. Tablet Portrait   768–1023px
   4. Tablet Landscape  1024–1279px
   5. Desktop           1280–1535px  ← BASE (pas de media query)
   6. Widescreen        1536–1919px
   7. Ultra Wide        ≥1920px
   ========================================================================== */

/* ============================================================
   TOKENS DE DESIGN (Design Tokens)
   Source : audit Lovable 2026-06-06 (audit_design.py)
   ============================================================ */
:root {
  /* ── Polices ──────────────────────────────────────────────── */
  /* Confirmées par audit_design.py sur terre-saveurs-boutique.lovable.app */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;

  /* ── Couleurs T&S ─────────────────────────────────────────── */
  --ts-vert:       #1a3a2d;   /* vert forêt — couleur principale     */
  --ts-or:         #C9A24C;   /* or doré — accent logo & highlights  */
  --ts-beige:      #FCFBF8;   /* fond beige blanc — background pages */
  --ts-texte:      #1b1b1b;   /* texte principal quasi-noir          */
  --ts-texte-2:    #3f3f3f;   /* texte secondaire gris foncé         */
  --ts-gris:       #c5c1b9;   /* gris clair — placeholders           */
  --ts-bordure:    #dcdad5;   /* bordures fines                      */
  --ts-bordure-2:  #e8e8e8;   /* bordures très légères               */
  --ts-blanc:      #ffffff;

  /* ── Typographie fluide ───────────────────────────────────── */
  /* Valeurs desktop confirmées par audit : H1=46px H2=48px H3=20px */
  --font-h1:   clamp(1.875rem, 2.875rem, 2.875rem); /* 46px desktop */
  --font-h2:   clamp(1.875rem, 3rem, 3rem);         /* 48px desktop */
  --font-h3:   clamp(1.125rem, 1.25rem, 1.25rem);   /* 20px desktop */
  --font-body: 0.9375rem;                            /* 15px         */
  --font-nav:  0.6875rem;                            /* 11px nav     */
  --font-foot: 0.875rem;                             /* 14px footer  */

  /* ── Espacement ───────────────────────────────────────────── */
  --space-xs:  clamp(0.5rem, 1vw, 0.75rem);
  --space-sm:  clamp(0.75rem, 1.5vw, 1rem);
  --space-md:  clamp(1rem, 2vw, 1.5rem);
  --space-lg:  clamp(1.5rem, 3vw, 2.5rem);
  --space-xl:  clamp(2rem, 4vw, 4rem);
  --space-2xl: clamp(3rem, 6vw, 6rem);

  /* ── Largeur de contenu ───────────────────────────────────── */
  --content-max:    1140px;
  --content-narrow: 720px;
  --content-wide:   1320px;

  /* ── Rayons ───────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Ombres ───────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.2);

  /* ── Alias DIVI ───────────────────────────────────────────── */
  --color-primary: var(--ts-vert);

  /* ── z-index ──────────────────────────────────────────────── */
  --z-fixed: 1030;
  --z-modal: 1050;
}

/* ============================================================
   BASE — Desktop 1280–1535px (pas de media query)
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--font-body);
  line-height: 1.6;
  color: var(--ts-texte);
  background-color: var(--ts-beige);
}

/* Titres — Fraunces (audit confirmé) */
h1, .et_pb_module h1 {
  font-family: var(--font-serif);
  font-size: var(--font-h1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em; /* -1.15px @ 46px */
}
h2, .et_pb_module h2 {
  font-family: var(--font-serif);
  font-size: var(--font-h2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;  /* -0.48px @ 48px */
}
h3, .et_pb_module h3 {
  font-family: var(--font-serif);
  font-size: var(--font-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;  /* -0.2px @ 20px */
}

/* Navigation principale — Inter 11px uppercase (audit) */
.et_pb_menu .et_pb_menu__menu a,
.et_pb_menu .et-menu a,
.et-l--header nav a {
  font-family: var(--font-sans);
  font-size: var(--font-nav); /* 11px */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;    /* 2.42px @ 11px */
  color: var(--ts-vert);
}

/* Footer — Inter 14px uppercase (audit) */
footer,
.et_pb_footer_manager,
.et-l--footer {
  font-family: var(--font-sans);
  font-size: var(--font-foot); /* 14px */
  text-transform: uppercase;
  letter-spacing: 0.25em;      /* 3.5px @ 14px */
}

.et_pb_row { max-width: var(--content-max) !important; }
.et_pb_section { padding: var(--space-xl) 0 !important; }

/* ============================================================
   ULTRA WIDE ≥1920px
   ============================================================ */
@media (min-width: 1920px) {
  :root { --content-max: 1500px; font-size: 18px; }

  .et_pb_row { max-width: 1500px !important; }
  .et_pb_section { padding: 6rem 0 !important; }
}

/* ============================================================
   WIDESCREEN 1536–1919px
   ============================================================ */
@media (min-width: 1536px) and (max-width: 1919px) {
  :root { --content-max: 1320px; font-size: 17px; }

  .et_pb_row { max-width: 1320px !important; }
}

/* ============================================================
   TABLET LANDSCAPE 1024–1279px
   ============================================================ */
@media (max-width: 1279px) {
  :root { --content-max: 960px; }

  .et_pb_row {
    max-width: 960px !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .et_pb_column_1_4 { width: 50% !important; }
}

/* ============================================================
   TABLET PORTRAIT 768–1023px
   ============================================================ */
@media (max-width: 1023px) {
  :root { --content-max: 720px; font-size: 15px; }

  .et_pb_row {
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .et_pb_section { padding: var(--space-lg) 0 !important; }
  .et_pb_column_1_3 { width: 50% !important; }
  .et_pb_column_1_4 { width: 50% !important; margin-bottom: 1.5rem !important; }

  h1, .et_pb_module h1 { font-size: 2.25rem !important; }
  h2, .et_pb_module h2 { font-size: 1.75rem !important; }
}

/* ============================================================
   PHONE LANDSCAPE 480–767px
   ============================================================ */
@media (max-width: 767px) {
  :root { font-size: 15px; }

  .et_pb_row {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .et_pb_section { padding: var(--space-md) 0 !important; }

  /* Toutes colonnes en pleine largeur */
  .et_pb_column,
  .et_pb_column_1_2,
  .et_pb_column_1_3,
  .et_pb_column_1_4,
  .et_pb_column_2_3,
  .et_pb_column_3_4 {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  h1, .et_pb_module h1 { font-size: 1.875rem !important; line-height: 1.2 !important; }
  h2, .et_pb_module h2 { font-size: 1.5rem !important; }
  h3, .et_pb_module h3 { font-size: 1.25rem !important; }

  /* Touch targets boutons */
  .et_pb_button { padding: 0.875rem 1.5rem !important; min-height: 44px !important; }
  .et_mobile_menu li a { padding: 1rem !important; min-height: 48px !important; }
}

/* ============================================================
   PHONE PORTRAIT ≤479px
   ============================================================ */
@media (max-width: 479px) {
  :root { font-size: 14px; }

  .et_pb_row {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .et_pb_section { padding: 1.5rem 0 !important; }

  h1, .et_pb_module h1 { font-size: 1.5rem !important; letter-spacing: 0.02em !important; }
  h2, .et_pb_module h2 { font-size: 1.25rem !important; }
  h3, .et_pb_module h3 { font-size: 1.125rem !important; }

  p, .et_pb_text_inner { font-size: 0.938rem !important; line-height: 1.5 !important; }

  /* Boutons pleine largeur sur petits téléphones */
  .et_pb_button {
    width: 100% !important;
    text-align: center !important;
    padding: 1rem 1.5rem !important;
  }

  .et_pb_image img { width: 100% !important; height: auto !important; }
  .hide-on-phone { display: none !important; }
}

/* ============================================================
   CLASSES UTILITAIRES
   ============================================================ */
.show-phone-only { display: none !important; }
.show-tablet-only { display: none !important; }
.show-desktop-only { display: block !important; }

@media (max-width: 767px) {
  .show-phone-only { display: block !important; }
  .hide-on-phone { display: none !important; }
  .show-desktop-only { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet-only { display: block !important; }
  .hide-on-tablet { display: none !important; }
}

@media (min-width: 1024px) {
  .hide-on-desktop { display: none !important; }
}

/* ============================================================
   IMPRESSION
   ============================================================ */
@media print {
  .et_pb_section { padding: 1rem 0 !important; }
  .no-print, .et_pb_menu, .et_pb_footer { display: none !important; }
  body { font-size: 12pt !important; }
}