/* ============================================================
   CLUB PÉPITES — Design Tokens
   Version 4.3 — Charte Graphique Lobodog / Thomas Guillaumot
   Export pour IA — Fondation + Composants
   v3.5 : bouton secondaire rouge, noir chaud, pills, double-tag, filter bar
   v4.0 : ivoire, carte-vigneron, carte-evenement portrait
   v4.1 : carte-evenement photos EN COULEUR (plus de N&B), pill-ville Big Shoulders,
          pill-appellation vigneron (contour or), card-produit__chef Uncut Sans,
          encart communauté pleine largeur
   v4.2 : card-produit restructuré en layout VERTICAL (photo en haut),
          pill = catégorie produit, Playfair = nom maison/artisan,
          support multi-producteurs (.card-produit--duo),
          suppression .card-produit__label / __chef / __cta / __sep
   v4.2 : carte-vigneron overlay flex-direction column (pill dessus, nom dessous),
          pill appellation fond or + texte crème (corrige contour transparent v4.1),
          nom vigneron Playfair Bold 17px (corrige Uncut Sans 13px)
   v4.2 : carte-evenement gradient réduit à 180px hauteur, opacité 0.55→0.10
          (était 240px, 0.65→0.25 — trop sombre, impression de fond noir)
   v4.3 : ajout --color-or-text (#8D6635) pour les petits textes sur fond clair —
          contraste WCAG AA conforme (4,5+:1) sur blanc, blanc-chaud et ivoire.
          --color-or (#C49A6D) reste pour fonds, bordures, icônes, dégradés,
          gros titres ≥18px bold uniquement.
   ============================================================ */

/*
  ⚠️  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)

  Or-brun (v4.7) → `color: var(--color-or)` est INTERDIT sur du texte, sauf 2 exceptions :
    1. Texte sur fond sombre (--color-noir-chaud ou équivalent) — contraste ≥7:1, OK AAA
    2. Texte ≥24px ou ≥19px bold (large text WCAG) AVEC commentaire explicite
       /* exception décorative — large text */ sur la ligne color:
    Tout autre texte en or DOIT utiliser var(--color-or-text) (#8D6635, AA conforme).
    Une seule exception nominée actuellement : .stat-number (chiffres signature
    44-64px bold) — voir commentaire sur la règle pour la raison.
*/

:root {

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

  /* Primaires */
  --color-rouge:        #E2001A;   /* Rouge Pépites — CTA, urgence, contour btn-secondary */
  --color-or:           #C49A6D;   /* ⛔ DÉCORATIF UNIQUEMENT (fonds, bordures, icônes, dégradés). INTERDIT pour `color:` sur texte sauf : (1) fond sombre, (2) large text avec commentaire d'exception. Sinon → utiliser --color-or-text. (v4.7) */
  --color-or-text:      #8D6635;   /* ✅ Or Pépites Texte — TOUJOURS pour `color:` sur texte sur fond clair. Conforme WCAG AA : 5,14:1 sur blanc, 4,84:1 sur blanc-chaud, 4,77:1 sur ivoire (labels, captions, bylines, "RECOMMANDÉ PAR", kickers, .text-or, etc.) */

  /* 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-medium:  #999999;   /* v4.4 — Texte/icônes désactivés, hint, stepper pending */
  --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 */
  --color-ivoire:       #F9F6F1;   /* v4.0 — Fond pills contextuelles sur fonds sombres */
  --color-fond-fallback: #F0EBE4;  /* v4.4 — Fond carte si photo ne charge pas (.carte-evenement et apparentés) */

  /* ── 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 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 V3 — Source : Figma v3 (node 210:2) ──────────────────── */
/* v4.2 : layout vertical 360×440, photo pleine largeur 240px en haut,
   pill = catégorie produit (fond or, texte blanc),
   2 lignes Playfair Bold 20px : producteur + nom produit (ou 2ème producteur),
   suppression SÉLECTION PÉPITES / VOIR LA SÉLECTION / RECOMMANDÉ PAR */

.card-produit {
  display: flex;
  flex-direction: column;           /* VERTICAL — photo en haut, infos en bas */
  border: 1px solid var(--color-gris-bordure);   /* #E8E5E0 — conforme Figma */
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-blanc-pur);
  width: 360px;                     /* Dimension Figma exacte */
}

.card-produit__photo {
  width: 100%;
  height: 240px;                    /* 240px conforme Figma */
  background: var(--color-gris-photo);
  flex-shrink: 0;
  overflow: hidden;
}

.card-produit__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-produit__info {
  background: var(--color-blanc-chaud);   /* #F9F8F3 — fond crème Figma */
  padding: 16px 24px;               /* Conforme Figma */
  display: flex;
  flex-direction: column;
  gap: 7px;                         /* Conforme Figma */
  height: 200px;
  overflow: hidden;
}

/* Pills container */
.card-produit__pills {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

/* Pill catégorie — FOND OR + TEXTE BLANC (conforme Figma) */
/* Ex : CHOCOLAT · PÂTÉ CROÛTE · FROMAGE AFFINÉ · CAVIAR · SAUMON FUMÉ · BŒUF WAGYU */
.card-produit__category {
  display: inline-flex;
  background: var(--color-or);             /* #C49A6D — fond or */
  color: #FFFFFF;                          /* Texte blanc */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;                   /* Conforme Figma : tracking-[1.5px] */
  padding: 5px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Ligne Playfair — producteur (ligne 1) et produit ou 2ème producteur (ligne 2) */
/* Même style pour les deux lignes — Playfair Bold 20px, noir #0A0A0A, JAMAIS italic */
.card-produit__maison,
.card-produit__nom {
  font-family: var(--font-serif);
  font-style: normal;                      /* JAMAIS italic */
  font-weight: var(--weight-bold);
  font-size: 20px;
  line-height: 26px;
  color: #0A0A0A;
  margin: 0;
  white-space: nowrap;
}

/* ❌ CLASSES OBSOLÈTES — SUPPRIMÉES EN v4.2 — NE PLUS UTILISER :
   .card-produit__label  → "SÉLECTION PÉPITES", "RECOMMANDÉ PAR", "MOF" — supprimé
   .card-produit__chef   → nom du chef recommandant — supprimé
   .card-produit__title  → ancien titre produit — remplacé par __maison + __nom
   .card-produit__sep    → séparateur vertical paysage — supprimé
   .card-produit__cta    → "VOIR LA SÉLECTION →" — supprimé
   .card-produit__region → ancienne ligne région/lieu — supprimé
   Ces classes ne font plus partie du composant card-produit v3. */

/* ── 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-dark,
  .tag--outlined-white,
  .card-editorial__byline,
  .card-avis__stars {
    font-size: var(--text-md);   /* forcer 16px sur mobile */
  }
}


/* ============================================================
   COMPOSANTS v4.0 / v4.1 — Nouveaux composants
   ============================================================ */

/* ── PILLS CARTE (ivoire, appellation, ville) ─────────────── */

/*
  pill-ivoire  : fond ivoire #F9F6F1 — ✅ UNIQUEMENT sur fonds SOMBRES
                 (cartes événements, dark surfaces)
                 ❌ NE PAS utiliser sur fonds clairs/crème — pill quasi-invisible

  Sur cartes vignerons (fond crème), utiliser .carte-vigneron .pill-ivoire
  qui override avec un contour or transparent.
*/
.pill-ivoire {
  display: inline-flex;
  align-items: center;
  background: var(--color-ivoire);              /* #F9F6F1 — pour fonds sombres */
  color: var(--color-noir-chaud);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* pill-pre : PRÉ-OUVERTURE — même traitement que pill-ivoire */
.pill-pre {
  display: inline-flex;
  align-items: center;
  background: var(--color-ivoire);
  color: var(--color-noir-chaud);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*
  pill-ville : ville/lieu — fond blanc pur
  ⚠️ v4.1 : Big Shoulders Display ExtraBold uppercase (pas Uncut Sans)
  Règle absolue : TOUTES les pills = Big Shoulders Display, sans exception
*/
.pill-ville {
  display: inline-flex;
  align-items: center;
  background: var(--color-blanc-pur);
  color: var(--color-noir-chaud);
  font-family: var(--font-display);             /* Big Shoulders Display */
  font-weight: var(--weight-extrabold);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Rangée de pills */
.pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ── CARTE VIGNERON — v4.2 ───────────────────────────────── */
/*
  Format portrait 360×440 — Source Figma v3 node 238:27
  Photo EN COULEUR plein-cadre (jamais grayscale)
  Overlay crème 70px en bas : pill or en haut, nom vigneron en Playfair en dessous
*/

.carte-vigneron {
  position: relative;
  aspect-ratio: 360 / 440;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
}

.carte-vigneron__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
  /* ✅ PAS de filter: grayscale — photo EN COULEUR obligatoire */
}

.carte-vigneron:hover .carte-vigneron__photo {
  transform: scale(1.04);
}

/* Overlay 70px en bas — pill au-dessus, nom en-dessous (conforme Figma v3) */
.carte-vigneron__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: var(--color-blanc-chaud);         /* #F9F8F3 crème */
  overflow: hidden;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  display: flex;
  flex-direction: column;                        /* ✅ COLONNE — pill dessus, nom dessous */
  justify-content: center;
  gap: 4px;
  padding: 8px 20px;                             /* conforme Figma : left:20px, top:8px */
}

/*
  Pill appellation — FOND OR + TEXTE CRÈME (conforme Figma v3 node 238:30)
  ⚠️ v4.2 : corrige la v4.1 qui utilisait contour transparent (ne correspond pas au Figma)
  Big Shoulders ExtraBold 12px, uppercase, letter-spacing 0.8px
*/
.carte-vigneron .pill-ivoire {
  background: var(--color-or);                  /* #C49A6D — fond or */
  color: var(--color-ivoire);                   /* #F9F6F1 — texte crème */
  border: none;                                  /* pas de contour */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 100px;
  white-space: nowrap;
  display: inline-flex;
  align-self: flex-start;
}

/* Nom du vigneron — Playfair Bold 17px, noir (conforme Figma v3 node 238:32) */
/* ⚠️ v4.2 : remplace Uncut Sans 13px (ne correspondait pas au Figma) */
.carte-vigneron__nom {
  font-family: var(--font-serif);                /* Playfair Display */
  font-style: normal;                            /* JAMAIS italic */
  font-weight: var(--weight-bold);               /* 700 */
  font-size: 17px;
  line-height: 25px;
  color: #0A0A0A;
  margin: 0;
  white-space: nowrap;
}


/* ── CARTE ÉVÉNEMENT v2 — v4.1 ───────────────────────────── */
/*
  Format portrait 360×440
  ⚠️ v4.1 : Photos EN COULEUR (plus de grayscale), fond neutre (plus de noir chaud)
  Gradient allégé en bas pour lisibilité du texte
  Pills + chef + restaurant toujours en bas de carte
*/

.carte-evenement {
  position: relative;
  aspect-ratio: 360 / 440;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #f0ebe4;                          /* fallback neutre — PAS de noir chaud */
  cursor: pointer;
}

.carte-evenement__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
  /* ✅ PAS de filter: grayscale — photos EN COULEUR (v4.1) */
}

.carte-evenement:hover .carte-evenement__photo {
  transform: scale(1.04);
}

/* Dégradé minimal — couvre uniquement la zone de texte (bas 35%) */
/* ⚠️ v4.2 : réduit de 0.65/50% à 0.50/35% — Charlotte : pas de fond noir visible */
.carte-evenement__gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;                                 /* réduit de 240px à 180px (40% de la carte) */
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.55) 0%,                  /* bas : 0.55 (était 0.65) */
    rgba(10, 10, 10, 0.10) 50%,                  /* milieu : 0.10 (était 0.25) */
    transparent 100%                             /* transparent dès 180px depuis le bas */
  );
  pointer-events: none;
}

/* Pills + chef + restaurant — toujours en bas, jamais en haut */
.carte-evenement__bottom {
  position: absolute;
  bottom: 24px;
  left: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Nom du chef — Playfair Display Bold, jamais italic */
.carte-evenement__chef {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: var(--weight-bold);
  font-style: normal;                           /* JAMAIS italic */
  color: var(--color-blanc-pur);
  line-height: 1.3;
  margin: 8px 0 6px;
}

/* Nom du restaurant — Uncut Sans, gris blanc */
.carte-evenement__restaurant {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}


/* ── ENCART COMMUNAUTÉ — v4.1 ────────────────────────────── */
/*
  Bandeau pleine largeur sous les 3 piliers "Être membre"
  Fond ivoire, bordure or solide, disposition horizontale
  "1 000" en grand à gauche | séparateur | texte à droite
*/

.pillars__community {
  margin-top: 32px;
  background: var(--color-ivoire);
  border: var(--border-or);
  border-radius: var(--radius-sm);
  padding: 32px 40px;
}

.pillars__community-inner {
  display: flex;
  align-items: center;
}

.pillars__community-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 160px;
  padding-right: 40px;
  flex-shrink: 0;
}

.stat-number {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: clamp(44px, 5vw, 64px);
  color: var(--color-or);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-label {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: 11px;
  color: var(--color-or);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 4px;
}

.pillars__community-sep {
  width: 1px;
  height: 64px;
  background: rgba(196, 154, 109, 0.35);
  flex-shrink: 0;
}

.pillars__community-text {
  padding-left: 40px;
}

.pillars__community-text h4 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-style: normal;                           /* JAMAIS italic */
  font-size: clamp(18px, 2vw, 24px);
  color: var(--color-noir-chaud);
  margin-bottom: 12px;
}

.pillars__community-text p {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-gris-texte);
  line-height: var(--leading-relaxed);
  max-width: 680px;
}

@media (max-width: 768px) {
  .pillars__community {
    padding: 24px 20px;
  }
  .pillars__community-inner {
    flex-direction: column;
    text-align: center;
  }
  .pillars__community-stat {
    padding-right: 0;
    padding-bottom: 20px;
  }
  .pillars__community-sep {
    width: 48px;
    height: 1px;
    margin-bottom: 20px;
  }
  .pillars__community-text {
    padding-left: 0;
  }
}