/* =========================================================================
   Tokens — issus de la maquette Figma Clapasson & Fils TP
   Typo & spacing scale calés sur les 3 breakpoints Figma :
     - Desktop  : frame 2284:643 (1512 px)
     - Tablet   : frame 2202:512 (768 px)   → @media (max-width: 1024px)
     - Mobile   : frame 2088:12844 (390 px) → @media (max-width: 640px)
   Les valeurs typo proviennent de l'agrégation des nœuds TEXT par fréquence
   sur chacun des 3 frames (font-size / line-height / font-weight Figma).
   ========================================================================= */
:root {
  --color-primary:        #ccd310;            /* BUTTON/Filled/primary-background-default */
  --color-primary-dark:   #8f940c;            /* Colors/Primary/primary 120 */
  --color-secondary:      #1d1d1b;            /* Colors/Secondary/secondary (texte/border dark) */
  --color-tertiary:       #688c82;            /* Colors/Tertiary/tertiary (vert sage) */
  --color-white:          #ffffff;
  --color-overlay-50:     rgba(20, 19, 19, 0.5); /* Opacity/Black/Opacity-05 */

  --btn-padding-x:        24px;               /* button/padding/horizontal */
  --btn-padding-y:        12px;               /* button/padding/vertical */
  --btn-border-width:     3px;
  --btn-font-size:        16px;               /* 1512/button */
  --btn-font-family:      'Poppins', system-ui, -apple-system, sans-serif;
  --btn-font-weight:      700;
  --btn-transition:       background-color .2s ease, color .2s ease, border-color .2s ease;

  /* ---- Familles ------------------------------------------------------- */
  --font-sans:            var(--btn-font-family);

  /* ---- Échelle typo — DESKTOP (> 1024px) ------------------------------ */
  /* H1 hero — node 4001:1868 (48/58/700). */
  --fs-h1:   48px;
  --lh-h1:   58px;
  /* H2 section title — weight 900 (3 occurrences home, 44/54/900). */
  --fs-h2:   44px;
  --lh-h2:   54px;
  /* H3 / gros texte regular (32/48/400 — 7 occurrences : labels footer, gros sous-titres). */
  --fs-h3:   32px;
  --lh-h3:   48px;
  /* Lead / texte mis en avant (20/30/500). */
  --fs-lead: 20px;
  --lh-lead: 30px;
  /* Body — invariant cross-breakpoints (16/24, regular ou bold). */
  --fs-body: 16px;
  --lh-body: 24px;
  /* Small — netdev-footer (14/16/700/Work Sans). */
  --fs-sm:   14px;
  --lh-sm:   16px;

  /* ---- Poids typo ----------------------------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-black:    900;

  /* ---- Échelle d'espacements (gaps Figma agrégés) --------------------- */
  --sp-1:   10px;   /* gap fin */
  --sp-2:   16px;   /* gap standard intra-bloc */
  --sp-3:   20px;   /* gap inter-éléments d'une section */
  --sp-4:   40px;   /* gap inter-sections internes */
  --sp-5:   60px;   /* gap entre sections / colonnes */
  --sp-6:   80px;   /* gap large entre grosses sections (desktop) */

  /* ---- Padding horizontal de page (gouttière) ------------------------- */
  --page-px: 60px;

  /* ---- Espacement entre sections (haut/bas d'une section) ------------- */
  --section-py: 80px;
}

/* ---- Override Tablet (≤ 1024px) — valeurs frame 2202:512 ------------- */
@media (max-width: 1024px) {
  :root {
    --fs-h1:   36px;
    --lh-h1:   46px;
    --fs-h2:   32px;
    --lh-h2:   42px;
    --fs-h3:   24px;
    --lh-h3:   36px;
    /* body, lead, small : inchangés (constants cross-BP dans Figma) */

    --sp-5:    40px;
    --sp-6:    60px;
    --page-px: 40px;
    --section-py: 60px;
  }
}

/* ---- Override Mobile (≤ 640px) — valeurs frame 2088:12844 ------------ */
@media (max-width: 640px) {
  :root {
    --fs-h1:   28px;
    --lh-h1:   38px;
    --fs-h2:   24px;
    --lh-h2:   34px;
    --fs-h3:   20px;
    --lh-h3:   30px;

    --sp-4:    32px;
    --sp-5:    32px;
    --sp-6:    40px;
    --page-px: 20px;
    --section-py: 40px;
  }
}

/* =========================================================================
   Boutons — 3 variantes (Principal / Obscur / Foncé) avec hover
   Source : Figma node 2206:306 ("button" component, 6 symboles)
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: var(--btn-border-width) solid var(--color-secondary);
  background: var(--color-primary);
  color: var(--color-secondary);
  font-family: var(--btn-font-family);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--btn-transition);
}

.btn:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Principal : jaune-vert → hover vert sage */
.btn--principal {
  background: var(--color-primary);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.btn--principal:hover {
  background: var(--color-tertiary);
}

/* Obscur : vert sage → hover vert sage assombri (overlay 50 % noir), texte blanc */
.btn--obscur {
  background: var(--color-tertiary);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.btn--obscur:hover {
  background:
    linear-gradient(var(--color-overlay-50), var(--color-overlay-50)),
    var(--color-tertiary);
  color: var(--color-white);
}

/* Foncé : jaune-vert sur fond sombre (bordure blanche) → hover jaune-vert assombri, texte blanc */
.btn--fonce {
  background: var(--color-primary);
  border-color: var(--color-white);
  color: var(--color-secondary);
}
.btn--fonce:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}