/* ════════════════════════════════════════════════════════
   VARIANT C — Palette "Salsa épicée" (basée sur Figma combo 11)
   Red #C81D25 · Green #2D6A4F · Ink chocolat
   + Mustard #E09F3E (eyebrows uniquement)
   + Purple #5A189A (hover CTA uniquement)

   RÈGLES STRICTES :
   - RED  = chiffres-chocs impairs, CTA, tags impairs, accents principaux
   - GREEN = chiffres-chocs pairs, tags pairs, onglets widget, marks, ombre CTA
   - MUSTARD = UNIQUEMENT les eyebrows (.label-accent + .hero-eyebrow.is-accent
              + .cta-final .label-accent) — c'est ce qui le rend signature
   - PURPLE = UNIQUEMENT le hover du CTA primary — émergence interactive rare
   - INK chocolat = textes, CTA final bg, footer bg
   - Fonds : blanc / parchment alterné (pas de 3e teinte)
   ════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght,SOFT,WONK@0,400..700,30..100,0..1;1,400..700,30..100,0..1&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* ─── PALETTE ────────────────────────────────── */
  --bg:         #FFFFFF;
  --bg-soft:    #F4F2EE;                /* parchment cream */
  --bg-canvas:  #EDF4EE;                /* cream avec micro-nuance vert pur */
  --ink:        #2A1B14;                /* warm dark espresso (ancrage) */
  --fg-muted:   #6B5A4F;
  --fg-faint:   #ACA098;
  --line:       #E5E0D7;
  --line-strong:#CCC2B4;

  /* ─── ACCENT PRIMAIRE : Cerise (red appuyé) ─── */
  --accent:     #C81D25;                /* Salsa épicée — rouge Figma combo 11 */
  --accent-ink: #9B121A;
  --accent-soft:#FCE0E0;                /* Soft red propre, zéro orange/pink — utilisé pour .cat-badge, alerts, insight-neg, etc. */

  /* ─── ACCENT SECONDAIRE : Émeraude (green appuyé) */
  --sage:       #2D6A4F;                /* Salsa épicée — vert Figma combo 11 (forest deep) */
  --sage-ink:   #1F4A37;
  --sage-soft:  #C5DED1;                /* sage soft pour cards & marks */

  /* ─── ACCENTS PONCTUELS (règles strictes) ────── */
  --mustard:    #E09F3E;                /* RÉSERVÉ aux eyebrows + badges catégorie C */
  --mustard-ink:#A87013;                /* Darker mustard pour textes sur soft */
  --mustard-soft:#FAEBD4;               /* Soft mustard pour cat-badge--c */
  --purple:     #5A189A;                /* RÉSERVÉ au hover CTA + badges catégorie D */
  --purple-soft:#E8DAF5;                /* Soft purple pour cat-badge--d */

  /* Fontes */
  --font:       'Manrope', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}

/* TYPO Fraunces */
h1, h2, h3, h4,
.hero-title,
.section-head h2,
.cta-final h2 {
  font-family: var(--font-display) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero-title { font-weight: 600; }

/* Brand : Scalon en Fraunces wonky · dot en ÉMERAUDE */
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--ink);
}
/* Brand : on annule le gap flex (qui séparait Scalon du dot)
   et on remet manuellement l'écart entre le dot et le kicker */
.brand {
  gap: 0 !important;
}
.brand .dot {
  color: var(--sage);
  font-size: 1.4em;
  font-weight: 700;
  margin-right: 12px;            /* écart entre dot et "moteur d'analyse d'avis" */
}
.brand-kicker {
  color: var(--fg-muted) !important;
  font-weight: 500;
}

/* Chiffres-chocs en serif italique CERISE */
.step-num,
.r-stat-v,
.kpi-v,
.why-stat-v {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent) !important;
}
/* Alternance CERISE/ÉMERAUDE sur les 01 02 03 04 (méthode) et les KPIs (pourquoi) */
.steps .step:nth-child(2n) .step-num { color: var(--sage) !important; }
.why-stats > *:nth-child(2n) .why-stat-v { color: var(--sage) !important; }

/* Témoignages : surlignage ÉMERAUDE doux, metric en CERISE */
.testim-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}
.testim-quote mark {
  background: var(--sage-soft);
  color: var(--ink);
}
.testim-quote .metric {
  color: var(--accent);
  font-weight: 600;
}
.testim-dot.is-active {
  background: var(--accent);
}

/* CTA primary CERISE avec ombrage ÉMERAUDE — contraste chaud/froid */
.cta--primary {
  background: var(--accent) !important;
  color: white !important;
  box-shadow: 3px 3px 0 var(--sage);
  transition: transform 150ms, box-shadow 150ms, background 150ms;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
}
.cta--primary:hover {
  background: var(--purple) !important;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--sage);
}

/* ═══════════════════════════════════════════════
   Use case cards — avatars peeking + bubble + "Lire plus"
   - Avatar en haut-droite, partiellement caché derrière la card (z-index)
   - Hover de l'avatar → speech bubble au-dessus de tout (desktop)
   - Sous-paragraphe caché par défaut, révélé par "Lire plus" (JS)
   - Mobile : pas de hover, avatar visible mais bulle reste cachée
   ═══════════════════════════════════════════════ */

.uc-card {
  position: relative;
  overflow: visible !important;        /* avatar peut dépasser */
  border-color: var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;             /* contenu aligné à gauche */
}
.uc-card > *:not(.uc-avatar) {
  position: relative;
  z-index: 2;                          /* contenu au-dessus de l'avatar */
}
.uc-card .uc-tag { color: var(--accent); font-weight: 700; }
.uc-card:nth-of-type(2n) .uc-tag { color: var(--sage-ink); }

/* "Voir le use case" pushed to bottom-right */
.uc-card .uc-arrow {
  align-self: flex-end;
  margin-top: auto;
  padding-top: 16px;
}

/* Avatar peeking */
.uc-avatar {
  position: absolute;
  top: -18px;
  right: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  z-index: 1;                          /* derrière le corps de card */
  cursor: help;
}
.uc-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-soft);
  display: block;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 200ms ease;
}
@media (hover: hover) {
  .uc-avatar:hover img { transform: scale(1.06); }
}

/* Speech bubble — fond dark net, large, lisible, persistante */
.uc-bubble {
  position: absolute;
  bottom: calc(100% + 4px);            /* gap minimal pour transition smooth */
  right: -16px;
  width: 380px;
  background: #1A140F !important;      /* dark net (même que CTA/footer) — force pour battre tout override */
  color: #FFFFFF !important;
  border-radius: 14px;
  padding: 22px 26px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  transition-delay: 250ms;             /* grâce à la fermeture pour traverser le gap */
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}
.uc-bubble-quote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: #FFFFFF !important;
  font-size: 16px;
  line-height: 1.6;
}
.uc-bubble-meta {
  margin: 14px 0 0;
  font-size: 13px;
  opacity: 0.82;
  letter-spacing: 0.02em;
  color: #FFFFFF !important;
  font-family: var(--font);
  font-style: normal;
  font-weight: 500;
}
.uc-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 36px;
  border: 9px solid transparent;
  border-top-color: #1A140F;            /* triangle pointer match le bg */
}
/* Trigger : hover sur l'AVATAR uniquement (pas toute la card).
   Persistance : .uc-bubble:hover maintient pendant lecture. */
@media (hover: hover) {
  .uc-avatar:hover .uc-bubble,
  .uc-bubble:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0ms;
  }
}

/* Lire plus / Lire moins */
.uc-readmore {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
  user-select: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
  transition: color 150ms;
}
.uc-readmore:hover { color: var(--accent-ink); }

/* Sous-paragraphe caché par défaut */
.uc-card > p {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  transition: max-height 280ms ease, opacity 220ms ease, margin-top 280ms ease;
}
.uc-card.is-expanded > p {
  max-height: 12em;
  opacity: 1;
  margin-top: 14px;
}
/* Hover : PURPLE (rare emphasis interactive — comme le hover du CTA primary) */
.uc-card:hover {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--purple);
}

/* Logos strip */
.logos > * {
  color: var(--fg-muted);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════
   FORM SUCCESS — confirmation après soumission email
   Remplace le minimaliste "Reçu." par une vraie carte de réassurance
   ═══════════════════════════════════════════════ */
.form-success {
  text-align: center;
  padding: 36px 24px !important;
}
.form-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--sage);
  color: white;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin: 0 auto 18px;
  box-shadow: 3px 3px 0 var(--sage-ink);
}
.form-success .big {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  color: var(--ink) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.01em;
}
.form-success p {
  color: var(--fg-muted) !important;
  margin: 0 0 8px !important;
  font-size: 15px;
  line-height: 1.5;
}
.form-success .form-success-email-line {
  font-size: 18px !important;
  font-weight: 600;
  margin: 0 0 4px !important;
  color: var(--ink) !important;
  text-align: center;
  letter-spacing: -0.005em;
}
.form-success .form-success-eta {
  font-size: 13px;
  line-height: 1.6;
  margin: 18px 0 24px !important;
  color: var(--fg-muted) !important;
  opacity: 0.85;
}
.form-success-cta {
  font-size: 13px !important;
  padding: 9px 18px !important;
  display: inline-flex !important;
  width: auto !important;
}

/* ═══════════════════════════════════════════════
   REPORT PAGES — Bouton "Télécharger en CSV la liste" au-dessus des tables
   ═══════════════════════════════════════════════ */
.tbl-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}
.tbl-download {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.tbl-download:hover {
  background: var(--accent);
  color: white;
}

/* ═══════════════════════════════════════════════
   REPORT PAGES — Cat badges colorés par catégorie (palette Salsa)
   A = RED (douleur identifiée à exploiter)
   B = GREEN (forces alignées avec le produit)
   C = MUSTARD (top du marché / premium — positionnement gold)
   D = PURPLE (à surveiller / pédagogique — attention rare)

   NOTE : `!important` + sélecteur double-classe pour battre v2-report.css
   qui définit aussi `.cat-badge` avec --accent-soft à la même spécificité.
   ═══════════════════════════════════════════════ */
.cat-badge { font-weight: 600 !important; }
.cat-badge b { font-weight: 700 !important; }

/* A · Douleur résolue → RED */
.cat-badge.cat-badge--a { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.cat-badge.cat-badge--a b { color: var(--accent) !important; }

/* B · Alignés forces → GREEN */
.cat-badge.cat-badge--b { background: var(--sage-soft) !important; color: var(--sage-ink) !important; }
.cat-badge.cat-badge--b b { color: var(--sage) !important; }

/* C · Top du marché / Premium → MUSTARD */
.cat-badge.cat-badge--c { background: var(--mustard-soft) !important; color: var(--mustard-ink) !important; }
.cat-badge.cat-badge--c b { color: var(--mustard) !important; }

/* D · À surveiller / Pédagogique → PURPLE */
.cat-badge.cat-badge--d { background: var(--purple-soft) !important; color: var(--purple) !important; }
.cat-badge.cat-badge--d b { color: var(--purple) !important; }

/* ═══════════════════════════════════════════════
   SALES-V2 / use case pages — lead text wider
   Évite les retours à la ligne agressifs sur les sous-textes de section
   ═══════════════════════════════════════════════ */
.section-head .lead {
  max-width: 72ch;
}

/* Eyebrows : TOUS en MUSTARD (règle stricte, seul endroit où on voit cette couleur).
   Couvre 3 cas distincts du HTML :
   1. .label-accent → brand kicker "moteur d'analyse d'avis" (hero)
   2. .section-head .label + .label-num → eyebrows "01 · Pour qui, pour quoi ?" etc.
   3. .hero-eyebrow.is-accent → eyebrow du hero
*/
.label-accent {
  color: var(--mustard);
  font-weight: 600;
}
.section-head .label,
.section-head .label-num {
  color: var(--mustard) !important;
  font-weight: 600;
}
.hero-eyebrow.is-accent { color: var(--mustard); }

/* Alternance simple sur 2 fonds : parchment vs blanc.
   Plus de cream-vert qui créait une 3e teinte ambiguë. */
#pour-qui {
  background: var(--bg-soft);
}
#methode {
  background: var(--bg);
}
#pourquoi {
  background: var(--bg-soft);
}

/* CTA FINAL : fond INK chocolat, CTA cerise, textes cream parchment (sans rose) */
.cta-final {
  background: #1A140F !important;       /* dark plus net que le chocolat ink — single tone */
  border-top: 0 !important;             /* enlève le 1px gris clair qui crée un faux trait */
}
.cta-final h2 { color: white !important; }
.cta-final p { color: rgba(237, 229, 211, 0.85) !important; }
.cta-final .label-accent { color: var(--mustard) !important; }
.cta-final .form-card {
  background: #EDE5D3;
  border-color: var(--accent);
}
.cta-final .form-row input,
.cta-final .form-row textarea {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--accent);
}
.cta-final .cta-final-note {
  color: rgba(237, 229, 211, 0.5) !important;
}

/* FOOTER : fond dark unifié avec CTA final (single tone, plus de chocolat muddy) */
.foot {
  background: #1A140F;
  color: #EDE5D3;
}
.foot-brand,
.foot-tag,
.foot li a,
.foot-bot {
  color: #EDE5D3 !important;
}
.foot h4 { color: var(--sage) !important; }
.foot-brand .dot { color: var(--sage) !important; }
.foot li a:hover { color: var(--sage) !important; }
.foot-tag { opacity: 0.75; }
.foot-bot { opacity: 0.6; }

/* Widget Verbatim Explorer : header INK chocolat, onglets ÉMERAUDE actifs */
.vbx { border-color: var(--ink); }
.vbx-head {
  background: var(--ink);
  color: #EDE5D3;
}
.vbx-head .vbx-dot { background: rgba(237, 229, 211, 0.4); }
.vbx-path { color: rgba(237, 229, 211, 0.7); }
.vbx-side + .vbx-side { background: var(--bg-canvas); }
/* Onglets du widget : ÉMERAUDE pour la 2e couleur visible */
.vbx-tab:hover { background: var(--sage-soft); color: var(--sage-ink); }
.vbx-tab.is-active {
  background: var(--sage);
  color: white;
  box-shadow: inset 0 -3px 0 var(--sage-ink);
}
.vbx-theme-pol.is-neg { color: var(--accent); }
.vbx-bar-fill { background: var(--sage); }