/* ==========================================================
 * PÉPITES — DETAIL FOUNDATION
 * Source unique des métriques communes aux heroes éditoriaux.
 * Aucun sélecteur métier dans ce fichier.
 * ========================================================== */

:root {
  --pep-header-height: 88px;

  /* Largeur standard des contenus Pépites (home / festivals / infos pratiques).
   * Le rail HERO reste indépendant à 1120px. */
  --pep-page-container: 1350px;

  --pep-detail-container: 1120px;
  --pep-detail-gutter: clamp(16px, 4vw, 48px);
  --pep-detail-safe-gap: clamp(18px, 2.2vw, 28px);

  /* Hauteur minimale du hero, calée sur le contenu réel (breadcrumb + H1 +
   * trait + intro + repères), pas sur un pourcentage d'écran arbitraire —
   * l'ancienne valeur (jusqu'à 620px) laissait une bande de photo vide
   * disproportionnée sur les pages au contenu plus court, repoussant le
   * vrai contenu sous la ligne de flottaison. DETAIL est volontairement
   * plus compact que COVER (cahier § 2 : "le COVER est plus ample"). */
  --pep-detail-hero-min: clamp(320px, 38vh, 440px);
  /* Vrai filet de sécurité (évite un hero écrasé sur un très petit écran),
   * pas une hauteur cible : un H1 sur 1 ligne (ex. Recettes) doit pouvoir
   * donner un hero plus court qu'un H1 sur 2 lignes (ex. Chroniques) sans
   * bande de photo vide en dessous — cahier § 27 : le hero grandit selon
   * son contenu, il n'est jamais forcé à une hauteur fixe.
   * Recalé de ~15px vers le bas pour compenser l'ajout de
   * --pep-cover-hero-bottom (ci-dessous) : sur les pages où le contenu réel
   * dépasse déjà ce plancher (Chroniques, 2 lignes de titre), le plancher
   * n'a aucun effet et ces pages profitent pleinement du padding-bottom
   * agrandi. Sur les pages où c'est le plancher qui gouverne la hauteur
   * (Recettes, 1 ligne de titre), ce recalage évite que l'ajout de
   * padding-bottom ne les regonfle en plus — elles retrouvent la hauteur
   * déjà validée. */
  --pep-cover-hero-min: clamp(305px, 33vh, 385px);
  --pep-detail-hero-bottom: clamp(2.5rem, 4vw, 3.5rem);
  /* COVER a ses propres repères ("facts") en dernière ligne du hero — il
   * leur faut plus de respiration avant le bord du bloc que le simple
   * padding DETAIL (pensé pour un intro-texte, pas pour une ligne de
   * chiffres). Token dédié plutôt que de retoucher --pep-detail-hero-bottom
   * (qui reste correct pour DETAIL) — même logique que --pep-cover-hero-min
   * et --pep-cover-title-size : COVER et DETAIL ne partagent plus un
   * réglage qui doit en réalité différer. */
  --pep-cover-hero-bottom: clamp(3.25rem, 5vw, 4.5rem);
  --pep-cover-hero-bottom-mobile: 2.75rem;

  --pep-detail-accent: #ff5a36;
  --pep-detail-title-font: "Lora", Georgia, serif;
  --pep-detail-ui-font: "Montserrat", Arial, sans-serif;

  --pep-detail-breadcrumb-size: 11px;
  --pep-detail-breadcrumb-line: 1.4;
  --pep-detail-breadcrumb-weight: 700;
  --pep-detail-breadcrumb-tracking: .095em;
  --pep-detail-breadcrumb-gap: 18px;

  --pep-detail-title-size: clamp(2.7rem, 3.9vw, 4rem);
  --pep-detail-title-size-mobile: clamp(2.05rem, 9.2vw, 3rem);
  --pep-detail-title-weight: 600;
  --pep-detail-title-line: 1.03;
  --pep-detail-title-line-mobile: 1.06;
  --pep-detail-title-tracking: -.03em;
  --pep-detail-title-width: 920px;

  /* COVER : même famille typographique (Lora 600, -.03em) mais plus ample
   * que DETAIL — cahier des charges § 12. */
  --pep-cover-title-size: clamp(3rem, 4.3vw, 4.4rem);
  --pep-cover-title-size-mobile: clamp(2.15rem, 9.5vw, 3.15rem);
  --pep-cover-title-line: 1.02;
  --pep-cover-title-line-mobile: 1.05;

  --pep-detail-copy-size: clamp(.98rem, 1.12vw, 1.06rem);
  --pep-detail-copy-line: 1.55;
  --pep-detail-copy-width: 780px;

  --pep-detail-rule-width: 52px;
  --pep-detail-rule-height: 3px;

  --pep-detail-hero-overlay:
    linear-gradient(90deg, rgba(5, 9, 15, .82) 0%, rgba(5, 9, 15, .55) 50%, rgba(5, 9, 15, .16) 100%),
    linear-gradient(0deg, rgba(4, 7, 12, .48) 0%, rgba(4, 7, 12, .10) 66%, transparent 100%);

  /* ------------------------------------------------------------
   * PALETTES SANS IMAGE — warm / night / plum (cahier § 3).
   * Source unique : réutilisées par le shell COVER (v3-shell.css)
   * ET par chaque CSS métier DETAIL pour l'état .no-image. Aucune
   * nouvelle couleur inventée ici — reprise à l'identique des valeurs
   * déjà en place dans .v3-static-hero--palette-*.
   * ------------------------------------------------------------ */
  --pep-hero-palette-warm-from: #171411;
  --pep-hero-palette-warm-via: #211a16;
  --pep-hero-palette-warm-to: #34241b;
  --pep-hero-palette-warm-tint: rgba(33, 26, 22, .88);

  --pep-hero-palette-night-from: #07111f;
  --pep-hero-palette-night-via: #0c1b2d;
  --pep-hero-palette-night-to: #10253d;
  --pep-hero-palette-night-tint: rgba(12, 27, 45, .88);

  --pep-hero-palette-plum-from: #160d18;
  --pep-hero-palette-plum-via: #241322;
  --pep-hero-palette-plum-to: #321728;
  --pep-hero-palette-plum-tint: rgba(36, 19, 34, .88);

  /* Dégradé de base commun aux 3 palettes (liseré + diagonale from/via/to),
   * paramétré via --pep-hero-palette-current-*. Chaque bloc .palette-warm/
   * night/plum (shell ou CSS métier) se contente d'assigner ces 3 variables
   * "current" aux valeurs ci-dessus, puis applique --pep-hero-palette-bg. */
  /* Filet de sécurité : si une famille oublie d'assigner .palette-xxx, on
   * retombe sur "night" (palette par défaut du site) plutôt que sur du
   * transparent/blanc. */
  --pep-hero-palette-bg:
    radial-gradient(circle at 78% 14%, rgba(240, 100, 35, .08), transparent 32%),
    linear-gradient(
      112deg,
      var(--pep-hero-palette-current-from, var(--pep-hero-palette-night-from)) 0%,
      var(--pep-hero-palette-current-via, var(--pep-hero-palette-night-via)) 58%,
      var(--pep-hero-palette-current-to, var(--pep-hero-palette-night-to)) 100%
    );
}