/* ============================================================
   design-tokens.css — Pimento design system, kr/skippy theme
   ------------------------------------------------------------
   Tokens DESIGN.md exposés en variables CSS + overrides ciblés
   et classes utilitaires opt-in. NE TOUCHE PAS au rendu actuel
   sauf : (1) override h1::after sur pages éditoriales (article
   sémantique + cms-pillar-*), (2) classes .btn-* / .bg-* opt-in.
   ------------------------------------------------------------
   Créé Sprint 1 jour 1 (D1 CSS) — 2026-05-18
   Source canon : ../../../../../DESIGN.md (repo root)
   ============================================================ */

:root {
  /* Couleurs — palette monochrome + accent grenat */
  --color-primary:         #000000;   /* titres, navigation, body */
  --color-secondary:       #666666;   /* labels discrets */
  --color-tertiary:        #B20511;   /* grenat signature Pimento */
  --color-neutral:         #FFFFFF;   /* fond page par défaut */
  --color-neutral-soft:    #E6E6E6;   /* dividers, image frames */
  --color-surface-muted:   #F6F6F6;   /* boîtes subtiles */
  --color-surface-overlay: #E6E6E6;   /* hover overlay */
  --color-border-subtle:   #DDDDDD;   /* bordures discrètes */
  --color-on-primary:      #FFFFFF;
  --color-on-tertiary:     #FFFFFF;
  --color-bg-warm:         #f8f4ed;   /* crème blanc cassé — pages éditoriales opt-in */

  /* Spacing — échelle DESIGN.md */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  12px;
  --spacing-lg:  20px;
  --spacing-xl:  24px;
  --spacing-xxl: 40px;

  /* Rounded — système crisp, rayons minimes */
  --rounded-xs:  2px;
  --rounded-sm:  4px;

  /* Typographie — Sofia Pro / fallback Helvetica */
  --font-display: "Sofia Pro Extra", Helvetica, Arial, sans-serif;
  --font-body:    "Sofia Pro", Helvetica, Arial, sans-serif;

  --fs-h1:        3rem;     /* 48px */
  --fs-h2:        3rem;     /* 48px — DESIGN.md aligne H1+H2 même taille */
  --fs-h3:        1.7rem;   /* 27.2px */
  --fs-body-md:   1rem;     /* 16px */
  --fs-body-lg:   2rem;     /* 32px */
  --fs-label:     0.95rem;  /* 15.2px */

  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-normal:    1.4;
  --lh-relaxed:   1.6;
}

/* ============================================================
   Override h1::after — pages éditoriales (pilier CMS, articles)
   ------------------------------------------------------------
   La règle globale main.min.css ajoute un trait noir 50px ancré
   à gauche. Sur les pages éditoriales (article schema, cms-pillar),
   on le passe en grenat et on le centre — accent délibéré.
   Cf. mémoire reference_pimento_kr_skippy_h1_underline.
   Pas touché ailleurs (catalogue, checkout, etc.) pour ne rien casser.
   ============================================================ */

article[itemtype*="schema.org/Article"] h1,
[class^="cms-pillar-"] h1,
[class*=" cms-pillar-"] h1 {
  position: relative;
}

article[itemtype*="schema.org/Article"] h1::after,
[class^="cms-pillar-"] h1::after,
[class*=" cms-pillar-"] h1::after {
  background: var(--color-tertiary);
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================
   Classes utilitaires boutons — opt-in
   ------------------------------------------------------------
   Toutes les classes commencent par .btn- et ne ciblent que les
   éléments qui les portent explicitement. Pas de side-effect.
   ============================================================ */

.btn-primary,
.btn-secondary,
.btn-dark {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.2;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--rounded-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  background-color: var(--color-tertiary);
  color: var(--color-on-tertiary);
  border-color: var(--color-tertiary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #8a040d;            /* grenat assombri ~15% */
  border-color: #8a040d;
  color: var(--color-on-tertiary);
  text-decoration: none;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  text-decoration: none;
}

.btn-dark {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.btn-dark:hover,
.btn-dark:focus {
  background-color: #1f1f1f;
  border-color: #1f1f1f;
  color: var(--color-on-primary);
  text-decoration: none;
}

.btn-primary:focus,
.btn-secondary:focus,
.btn-dark:focus {
  outline: 2px solid var(--color-tertiary);
  outline-offset: 2px;
}

/* ============================================================
   Classes utilitaires fond chaud — opt-in
   ------------------------------------------------------------
   Crème blanc cassé pour les pages éditoriales (pilier, articles).
   À appliquer sur un wrapper, jamais sur body global.
   ============================================================ */

.bg-warm {
  background-color: var(--color-bg-warm);
}

/* ============================================================
   Article-meta / expert-quote / pimento-figures — styles légers
   pour les blocs récurrents introduits dans la refonte pilier
   et les futures pages éditoriales du cluster.
   ============================================================ */

.expert-quote {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-left: 3px solid var(--color-tertiary);
  background-color: var(--color-surface-muted);
}
.expert-quote blockquote {
  margin: 0;
  font-size: 1.125rem;
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--color-primary);
}
.expert-quote figcaption {
  margin-top: var(--spacing-sm);
  font-size: var(--fs-label);
  color: var(--color-secondary);
  font-style: normal;
}

.pimento-figures {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg) var(--spacing-xl);
  background-color: var(--color-surface-muted);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}
.pimento-figures h3 {
  margin: 0 0 var(--spacing-md);
  font-size: var(--fs-h3);
  font-weight: 500;
}
.pimento-figures ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pimento-figures li {
  padding: var(--spacing-xs) 0;
  line-height: var(--lh-normal);
}
.pimento-figures li strong {
  color: var(--color-tertiary);
}

.article-meta {
  margin-top: var(--spacing-xxl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--fs-label);
  color: var(--color-secondary);
}
.article-meta p {
  margin: var(--spacing-xs) 0;
}

.resources-list {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
}
.resources-list li {
  margin-bottom: var(--spacing-sm);
}

/* ============================================================
   Footer cluster — légère mise en forme des 2 colonnes ajoutées
   ce jour pour le maillage interne (cluster Marseille + diamant).
   ============================================================ */

.footer-cluster-nav {
  padding: var(--spacing-xl) 0;
  border-top: 1px solid var(--color-border-subtle);
}
.footer-cluster-nav h3 {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}
.footer-cluster-nav .footer-cluster-list {
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  list-style: none;
}
.footer-cluster-nav .footer-cluster-list li {
  padding: 2px 0;
  font-size: var(--fs-label);
}
.footer-cluster-nav .footer-cluster-list a {
  color: var(--color-secondary);
  text-decoration: none;
}
.footer-cluster-nav .footer-cluster-list a:hover,
.footer-cluster-nav .footer-cluster-list a:focus {
  color: var(--color-tertiary);
  text-decoration: underline;
}

/* ============================================================
   Préférence motion réduite — désactive transitions
   ============================================================ */

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