/* ============================================================
   CLUB PÉPITES — Design Tokens
   Version 3.5 — Charte Graphique Lobodog / Thomas Guillaumot
   Export pour IA — Fondation + Composants
   Mise à jour v3.5 : bouton secondaire rouge, noir chaud #1A1413,
   pills & tags, double-tag, carte éditoriale, filter bar,
   minimum mobile 16px, icônes sociales SVG footer
   ============================================================ */

/*
  ⚠️  RÈGLES ABSOLUES — À NE JAMAIS ENFREINDRE
  ──────────────────────────────────────────────────────────
  Playfair Display → JAMAIS en italique (font-style: normal TOUJOURS)
                     Seule exception : titres d'articles .card-editorial__title
  Big Shoulders Display → TOUJOURS en majuscules (text-transform: uppercase)
  Uncut Sans / Inter → TOUJOURS en minuscules (jamais text-transform: uppercase)
  Mobile → AUCUN texte lisible/interactif sous 16px (iOS zoom automatique)
*/

:root {

  /* ── COULEURS ─────────────────────────────────────────── */

  /* Primaires */
  --color-rouge:        #E2001A;   /* Rouge Pépites — CTA, urgence, contour btn-secondary */
  --color-or:           #C49A6D;   /* Or Pépites — premium, sous-titres, bordures, icônes footer */

  /* Neutres */
  --color-noir:         #000000;   /* Titres, texte principal */
  --color-noir-chaud:   #1A1413;   /* Fond sombre profond — hero confirmation, sections dark */
  --color-blanc-pur:    #FFFFFF;   /* Fond, texte sur rouge */
  --color-blanc-chaud:  #F9F8F3;   /* Fond crème — sections éditoriales, hero confirmation */
  --color-blanc-froid:  #F3F8F8;   /* Fond bleuté léger — usage rare */

  /* Utilitaires */
  --color-gris-bordure: #E8E5E0;   /* Séparateurs, bordures inputs, pills outlined */
  --color-gris-texte:   #595959;   /* Texte secondaire, descriptions, labels pills */
  --color-gris-photo:   #9B948C;   /* Placeholder photos */
  --color-or-light:     #EDE0CB;   /* Fond barre de progression, tints or */

  /* ── TYPOGRAPHIE ──────────────────────────────────────── */

  /* Familles */
  --font-serif:         'Playfair Display', Georgia, serif;
  --font-display:       'Big Shoulders Display', 'Impact', sans-serif;
  --font-body:          'Uncut Sans', 'Inter', -apple-system, sans-serif;

  /* Règles d'usage :
     --font-serif    → Titres H1-H3 (font-style: normal TOUJOURS sauf carte éditoriale)
     --font-display  → TOUJOURS EN MAJUSCULES — boutons, labels, badges, navigation
     --font-body     → TOUJOURS EN MINUSCULES — corps de texte, descriptions */

  /* Tailles */
  --text-xs:    10px;   /* Labels très petits — cartes uniquement, jamais sur mobile */
  --text-sm:    12px;   /* Captions, steps, notes — éviter sur mobile */
  --text-base:  14px;   /* Corps texte desktop — utiliser --text-md sur mobile */
  --text-md:    16px;   /* ← MINIMUM MOBILE — iOS zoome sous 16px automatiquement */
  --text-lg:    18px;   /* Lead paragraphe */
  --text-xl:    22px;   /* Sous-titres, cards */
  --text-2xl:   28px;   /* H3, titre produit */
  --text-3xl:   36px;   /* H2 */
  --text-4xl:   48px;   /* H1 section */
  --text-5xl:   64px;   /* H1 hero */
  --text-6xl:   80px;   /* Chiffre fort / stat */

  /* Poids */
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-bold:       700;
  --weight-extrabold:  800;
  --weight-black:      900;

  /* Hauteurs de ligne */
  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.4;
  --leading-relaxed: 1.6;

  /* Letterspacing */
  --tracking-wide:    0.08em;   /* Labels display, badges */
  --tracking-wider:   0.12em;   /* Catégories, tags */
  --tracking-widest:  0.16em;   /* CTA buttons */

  /* ── ESPACEMENT ───────────────────────────────────────── */

  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-6:    24px;
  --space-8:    32px;
  --space-12:   48px;
  --space-16:   64px;
  --space-24:   96px;
  --space-32:   128px;

  /* ── MISE EN PAGE ─────────────────────────────────────── */

  --page-width:         1200px;   /* Largeur max du contenu */
  --page-padding:       60px;     /* Marge horizontale desktop */
  --page-padding-mob:   20px;     /* Marge horizontale mobile */
  --section-padding-y:  80px;     /* Padding vertical sections */

  /* ── BORDURES & RAYONS ────────────────────────────────── */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-pill:  999px;

  --border-thin:   1px solid var(--color-gris-bordure);
  --border-or:     1.5px solid var(--color-or);
  --border-rouge:  1.5px solid var(--color-rouge);
  --border-noir:   1.5px solid var(--color-noir);

  /* ── OMBRES ───────────────────────────────────────────── */

  --shadow-card:       0 2px 16px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-editorial:  0 4px 16px rgba(0,0,0,0.07);

  /* ── PICTOGRAMMES ─────────────────────────────────────── */
  /* Style : trait fin stroke-width="1.5", fill="none",
     stroke="#E2001A" (ou blanc / or selon contexte),
     stroke-linecap="round", stroke-linejoin="round"
     Taille de référence : viewBox="0 0 24 24"
     Voir pictograms.svg pour tous les assets */

}


/* ============================================================
   COMPOSANTS — Classes utilitaires de base
   ============================================================ */

/* ── BOUTONS ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s, background 0.15s, box-shadow 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

/* Primaire — Rouge */
.btn-primary {
  background: var(--color-rouge);
  color: var(--color-blanc-pur);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
}
.btn-primary:hover {
  background: #C00015;                          /* rouge plus sombre */
  box-shadow: 0 4px 16px rgba(226, 0, 26, 0.35);
  transform: translateY(-1px);
}

/* Secondaire — Contour rouge (⚠️ plus contour noir) */
.btn-secondary {
  background: transparent;
  color: var(--color-noir-chaud);
  border: var(--border-rouge);                  /* rouge, pas noir */
  padding: 14px 28px;
  border-radius: var(--radius-sm);
}
.btn-secondary:hover {
  background: rgba(226, 0, 26, 0.05);
  color: var(--color-rouge);
}

/* Or premium — Gradient or, texte blanc */
.btn-or {
  background: linear-gradient(135deg, #C49A6D, #D4AA7D);
  color: var(--color-blanc-pur);
  padding: 18px 36px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.btn-or:hover { opacity: 0.92; }

/* Ghost — Transparent, contour rouge, texte rouge */
.btn-ghost {
  background: transparent;
  color: var(--color-rouge);
  border: var(--border-rouge);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
}

/* Focus (accessibilité) */
.btn:focus-visible {
  outline: 2px solid var(--color-or);
  outline-offset: 3px;
}

/* ── BADGES & TAGS ───────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.badge-or {
  background: var(--color-blanc-chaud);
  color: var(--color-or);
  border: 1px solid var(--color-or);
}

.badge-rouge {
  background: var(--color-rouge);
  color: var(--color-blanc-pur);
}

.badge-discount {
  background: var(--color-rouge);
  color: var(--color-blanc-pur);
  font-size: 14px;
  margin-left: 8px;                             /* espace avec le texte adjacent */
}

/* ── PILLS & TAGS ────────────────────────────────────────── */

/* Base commune */
.tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  white-space: nowrap;
  line-height: 1;
}

/* Outlined — filtre inactif */
.tag--outlined {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: var(--color-gris-texte);
  border: 1px solid var(--color-gris-bordure);
  background: transparent;
}

/* Outlined — filtre actif */
.tag--outlined.tag--active {
  font-weight: var(--weight-medium);
  color: var(--color-rouge);
  border-color: var(--color-rouge);
}

/* Outlined blanc semi-transparent — sur fond sombre (cartes événements) */
.tag--outlined-white {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: var(--weight-regular);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  border-radius: var(--radius-pill);
}

/* Filled label — or sur fond crème (labels contextuels carte) */
.tag--filled-label {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-or);
  background: #F9F6F1;
}

/* Filled active — blanc sur rouge (catégorie principale) */
.tag--filled-active {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-blanc-pur);
  background: var(--color-rouge);
}

/* Filled or — blanc sur or (catégorie principale, variante premium) */
.tag--filled-or {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-blanc-pur);
  background: var(--color-or);
}

/* Filled dark — blanc sur noir chaud */
.tag--filled-dark {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-blanc-pur);
  background: var(--color-noir-chaud);
}

/* ── DOUBLE TAG ──────────────────────────────────────────── */

.double-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── BARRE DE FILTRES ────────────────────────────────────── */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

/* ── INPUTS ──────────────────────────────────────────────── */

.input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: var(--text-md);                     /* 16px — minimum iOS mobile */
  color: var(--color-noir);
  background: var(--color-blanc-pur);
  border: 1px solid var(--color-gris-bordure);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.input::placeholder { color: #AAAAAA; }

.input:focus {
  border-color: var(--color-or);
  box-shadow: 0 0 0 3px rgba(196, 154, 109, 0.15);
}

.input.error { border-color: var(--color-rouge); }

/* ── TYPOGRAPHIE ─────────────────────────────────────────── */

.heading-hero {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-style: normal;                            /* TOUJOURS normal */
  font-size: var(--text-5xl);
  line-height: var(--leading-snug);
  color: var(--color-noir);
}

.heading-section {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-style: normal;                            /* TOUJOURS normal */
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  color: var(--color-noir);
}

.heading-card {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-style: normal;                            /* TOUJOURS normal */
  font-size: var(--text-2xl);
  line-height: var(--leading-normal);
  color: var(--color-noir);
}

.text-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-gris-texte);
}

.text-or {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-or);
}

.label-display {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-or);
}

/* Label de section doré — "LA SÉLECTION", "LA MISSION", "RECOMMANDÉ PAR" */
.label-section {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: 14px;                              /* Minimum absolu — jamais en dessous */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-or);
  display: block;
  margin-bottom: 8px;
}

/* ── DIVIDER OR ──────────────────────────────────────────── */

.divider-or {
  width: 48px;
  height: 1.5px;
  background: var(--color-or);
  border: none;
  margin: var(--space-4) 0;
}

/* ── JAUGE URGENCE ───────────────────────────────────────── */

.urgency-bar {
  width: 100%;
  height: 8px;
  background: var(--color-or-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.urgency-bar__fill {
  height: 100%;
  background: var(--color-or);
  border-radius: var(--radius-pill);
}

/* ── CARTE SÉLECTION (format cinéma) ─────────────────────── */

.card-selection {
  display: flex;
  width: 680px;
  height: 380px;
  border: 1.5px solid var(--color-or);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.card-selection__photo {
  width: 45%;
  background: var(--color-gris-photo);
  flex-shrink: 0;
  object-fit: cover;
}

.card-selection__sep {
  width: 1px;
  background: rgba(196, 154, 109, 0.4);
  flex-shrink: 0;
}

.card-selection__info {
  flex: 1;
  background: var(--color-blanc-chaud);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-selection__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-style: normal;                            /* JAMAIS italic */
  font-size: 28px;
  line-height: 34px;
  color: var(--color-noir);
  text-align: left;
}

.card-selection__artisan {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-or);
}

.card-selection__cta {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  color: var(--color-rouge);
  text-decoration: none;
  text-transform: uppercase;
}

/* ── CARTE AVIS / TÉMOIGNAGE ─────────────────────────────── */

.card-avis {
  background: var(--color-blanc-pur);
  border: 1.5px solid var(--color-or);
  border-radius: var(--radius-sm);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-avis__stars {
  display: flex;
  gap: 4px;
  color: var(--color-or);
  font-size: 14px;
}

/* Citation — Playfair, JAMAIS italique */
.card-avis__quote {
  font-family: var(--font-serif);
  font-style: normal;                            /* JAMAIS italic */
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--color-noir);
  flex: 1;
}

.card-avis__sep {
  width: 32px;
  height: 1.5px;
  background: var(--color-or);
  border: none;
}

.card-avis__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-avis__name {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  color: var(--color-noir);
}

.card-avis__label {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-or);
}

/* ── CARTE PRODUIT V2 (avec "recommandé par") ────────────── */

.card-produit {
  display: flex;
  border: 1.5px solid var(--color-or);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-blanc-chaud);
}

.card-produit__photo {
  width: 45%;
  min-height: 320px;
  background: var(--color-gris-photo);
  flex-shrink: 0;
  object-fit: cover;
}

.card-produit__sep {
  width: 1px;
  background: rgba(196, 154, 109, 0.4);
  flex-shrink: 0;
}

.card-produit__info {
  flex: 1;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 1. "RECOMMANDÉ PAR" — label or, EN PREMIER */
.card-produit__artisan {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-or);
}

/* 2. Nom du chef — petit (14px), jamais italic */
.card-produit__chef {
  font-family: var(--font-serif);
  font-style: normal;                            /* JAMAIS italic */
  font-weight: var(--weight-bold);
  font-size: 14px;                              /* Plus petit que le produit */
  color: var(--color-noir);
}

/* 3. Nom du produit — grand (28px), jamais italic, star du show */
.card-produit__title {
  font-family: var(--font-serif);
  font-style: normal;                            /* JAMAIS italic */
  font-weight: var(--weight-bold);
  font-size: 28px;                              /* Plus grand que le chef */
  line-height: 34px;
  color: var(--color-noir);
}

/* 4. Artisan + région — gris, minuscules */
.card-produit__recommande {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-gris-texte);
}

/* 5. CTA */
.card-produit__cta {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-rouge);
  text-decoration: none;
}

/* ── CARTE ÉVÉNEMENT ─────────────────────────────────────── */

.card-event {
  position: relative;
  width: 520px;
  height: 280px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.card-event__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.card-event__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 50%);
}

.card-event__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-event__title {
  font-family: var(--font-serif);
  font-style: normal;                            /* JAMAIS italic */
  font-weight: var(--weight-bold);
  font-size: 20px;
  line-height: 26px;
  color: var(--color-blanc-pur);
}

.card-event__chef {
  font-family: var(--font-body);
  font-size: var(--text-md);                     /* 16px — visible sur mobile */
  color: rgba(255, 255, 255, 0.8);
}

/* ── CARTE ÉDITORIALE — Journal Pépites ─────────────────── */

.card-editorial {
  width: 360px;
  background: var(--color-blanc-pur);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-editorial);
  overflow: hidden;
}

.card-editorial__photo {
  width: 100%;
  height: 186px;
  object-fit: cover;
  filter: grayscale(100%);
  display: block;
}

.card-editorial__content {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*
  ⚠️ EXCEPTION UNIQUE — Playfair Italic autorisé ici seulement
  Dans TOUS les autres composants, font-style est TOUJOURS normal
*/
.card-editorial__title {
  font-family: var(--font-serif);
  font-style: italic;                            /* SEUL usage autorisé de Playfair italic */
  font-weight: var(--weight-bold);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-noir-chaud);
}

.card-editorial__sep {
  width: 100%;
  height: 1px;
  background: var(--color-gris-bordure);
  border: none;
}

.card-editorial__byline {
  font-family: var(--font-body);
  font-size: 12px;
  color: #9B9590;
}

/* ── ÉTAPE LOSANGE (numérotation) ────────────────────────── */

.step-diamond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-rouge);
  transform: rotate(45deg);
  border-radius: 2px;
  flex-shrink: 0;
}

.step-diamond__number {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-base);
  color: var(--color-blanc-pur);
  transform: rotate(-45deg);
  line-height: 1;
}

/* Variante compacte (28px) */
.step-diamond--sm {
  width: 28px;
  height: 28px;
}
.step-diamond--sm .step-diamond__number {
  font-size: var(--text-xs);
}

/* ── GRILLE COLONNES ÉGALES ──────────────────────────────── */

.grid-equal-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  align-items: stretch;
}

.grid-equal-cols > * {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .grid-equal-cols {
    grid-template-columns: 1fr;
  }
  /* Sur mobile, s'assurer qu'aucun texte lisible n'est sous 16px */
  .tag--filled-label,
  .tag--filled-active,
  .tag--filled-or,
  .tag--filled-dark,
  .tag--outlined-white,
  .card-editorial__byline,
  .card-avis__stars {
    font-size: var(--text-md);   /* forcer 16px sur mobile */
  }
}