/*
Theme Name:   Velora Child (Astra)
Theme URI:    https://liora-secret.com
Description:  Child theme d'Astra pour Liora — site d'affiliation bien-etre intime. DA violet "Peps" (Passage du Desir, #53225E verifie), Poppins en titres (self-host woff2), theme clair par defaut + sombre en option. Mobile-first, optimise SEO/Core Web Vitals. Remplace l'ancien child theme GeneratePress (velora-child) suite a un bug de rendu non elucide.
Author:       MTDS Digital
Template:     astra
Version:      0.2.0
Text Domain:  velora-child
*/

/* =========================================================================
   0. POLICE — Fraunces (serif display self-hosté, variable 400→600), pour
   coller au template maquette ("Glamour Peps", titres serif élégants).
   Remplace Poppins. font-display: swap (SEO/CWV).
   ========================================================================= */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-display.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}

/* =========================================================================
   1. DESIGN TOKENS (source de verite : maquettes-templates.html, atlas v2
   "Glamour Peps" — la charte CHARTE-GRAPHIQUE.md est partiellement obsolete,
   cf. sa note d'evolution du 2026-07-07)
   ========================================================================= */

:root {
  /* Peps — accent de marque (ramp complete 950 -> 50).
     Gamme MAUVE/PRUNE desaturee "Glamour Peps", source de verite =
     maquettes-templates.html (atlas). --peps-700 #53225E = violet Passage du
     Desir verifie. Historique : une gamme violette VIVE avait ete adoptee le
     2026-07-11 ; revert vers le mauve de l'atlas decide le 2026-07-16 (le live
     etait desaligne de l'atlas ET du reste : header du theme + --shadow-cta-glow
     referencaient deja #53225E). */
  --peps-950: #210E26;
  --peps-900: #321438;
  --peps-800: #421B4B;
  --peps-700: #53225E;
  --peps-600: #6D4376;
  --peps-500: #87648E;
  --peps-400: #A085A6;
  --peps-300: #BAA7BF;
  --peps-200: #D4C8D7;
  --peps-100: #E9E2EA;
  --peps-50:  #F6F4F7;

  /* Or — accent secondaire ponctuel (filets, etoiles de notation), ramp ambre
     plus vive que l'ancien --gold unique (#C9A24B) */
  --gold-900: #4A3208;
  --gold-700: #B8860B;
  --gold-600: #E0A426;
  --gold-500: #F5B82E;
  --gold-300: #FFD166;
  --gold-100: #FFF0C2;
  --gold-50:  #FFF9E8;

  /* Peps flash — rose fuchsia vif, moteur du "envie de cliquer" (CHARTE-GRAPHIQUE.md §2.3).
     Reserve aux CTA/badges des pages TRANSACTIONNELLES (guides-achat, comparatifs) : le violet
     ci-dessus reste la voix serieuse de la marque, le flash est son sourire. Jamais en zone
     editoriale pure (conseils/bien-etre) au-dela d'une touche unique. */
  --flash-900: #4A0E27;
  --flash-700: #AC0B57;
  --flash-600: #D8106D;
  --flash-500: #F52389;
  --flash-400: #FF4D9E;
  --flash-300: #FF7FB8;
  --flash-200: #FFB3D6;
  --flash-100: #FFDCEA;
  --flash-50:  #FFF0F6;

  /* Semantiques (UI, pas marque) */
  --success-500: #3F9B5C;
  --success-100: #D8EEDD;
  --danger-500:  #D64545;
  --danger-100:  #FAD1CE;

  /* Typographie : Fraunces (serif display self-host, ci-dessus) en titres,
     system font stack en corps (perf/SEO). */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Echelle typographique (mobile-first, fluide) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.55rem, 3.4vw, 2.05rem);
  --text-4xl: clamp(2.05rem, 4.4vw, 2.75rem);
  --text-5xl: clamp(2.35rem, 5.4vw, 3.4rem);

  /* Rayons — formes douces/accueillantes, boutons en pilule */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Ombres — teintees chaudement (jamais gris/noir pur) */
  --shadow-card: 0 8px 24px rgba(28, 20, 24, 0.12);
  --shadow-card-hover: 0 14px 32px rgba(28, 20, 24, 0.16);
  --shadow-cta-glow: 0 6px 20px rgba(83, 34, 94, 0.35);

  /* Motion — rebond ludique sur les CTA, ease-out sobre ailleurs */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Alias retro-compatibles : du contenu deja publie reference --violet-XXX
     en inline style (ex. pages "avis-joia", "joia-review"). Ne pas supprimer
     tant que ce contenu existe. */
  --violet-900: var(--peps-900);
  --violet-700: var(--peps-700);
  --violet-500: var(--peps-500);
  --violet-300: var(--peps-300);
  --violet-50:  var(--peps-50);
  --gold: var(--gold-500);
}

/* ---- Theme CLAIR (defaut) ---- */
:root,
:root[data-theme="light"] {
  --bg-primary:     #FFFFFF;
  --bg-surface:     #FFFFFF;
  --bg-subtle:      #F7F7F5;
  --text-primary:   #1C1418;
  --text-secondary: #5E545A;
  --text-tertiary:  #8C8289;
  --border:         rgba(28, 20, 24, 0.12);
  --accent:         var(--peps-700);
  --accent-hover:   var(--peps-900);
}

/* ---- Theme SOMBRE (option : prefers-color-scheme OU [data-theme="dark"]) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:     #14101A;
    --bg-surface:     #1C1622;
    --bg-subtle:      #241B2A;
    --text-primary:   #F3E8D4;
    --text-secondary: #B8AEB4;
    --text-tertiary:  #8A8088;
    --border:         rgba(243, 232, 212, 0.14);
    --accent:         var(--peps-300);
    --accent-hover:   #D4C8D7;
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 14px 32px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --bg-primary:     #14101A;
  --bg-surface:     #1C1622;
  --bg-subtle:      #241B2A;
  --text-primary:   #F3E8D4;
  --text-secondary: #B8AEB4;
  --text-tertiary:  #8A8088;
  --border:         rgba(243, 232, 212, 0.14);
  --accent:         var(--peps-300);
  --accent-hover:   #D4C8D7;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 14px 32px rgba(0, 0, 0, 0.4);
}

/* =========================================================================
   2. BASE
   ========================================================================= */

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.7;               /* confort de lecture longue (SEO) */
}

h1, h2, h3, .entry-title, .site-title {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Echelle indicative (mobile-first) */
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); font-weight: 600; }
.entry-content { font-size: var(--text-base); }

/* Respiration generale entre les blocs de contenu (articles/guides longs) */
.entry-content > h2, .entry-content .wp-block-group > h2 { margin: 3rem 0 1.25rem; }
.entry-content > h3, .entry-content .wp-block-group > h3 { margin: 2.25rem 0 0.85rem; }
.entry-content > *:first-child,
.entry-content .wp-block-group > *:first-child { margin-top: 0; }
.entry-content > p, .entry-content .wp-block-group > p { margin: 0 0 1.25rem; }
.entry-content > ul, .entry-content > ol { margin: 0 0 1.5rem; }
@media (max-width: 640px) {
  .entry-content > h2, .entry-content .wp-block-group > h2 { margin-top: 2.25rem; }
  .entry-content > h3, .entry-content .wp-block-group > h3 { margin-top: 1.75rem; }
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* Surtitre de rubrique — petites capitales espacees, couleur accent */
.velora-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
}

/* =========================================================================
   3. COMPOSANTS
   ========================================================================= */

/* Surfaces / cartes */
.velora-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.velora-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* Boutons / CTA — pilule pleine peps, glow + rebond au survol (pattern verifie
   chez Passage du Desir, spec CHARTE-GRAPHIQUE.md §7).
   !important necessaire : Astra applique .wp-block-button .wp-block-button__link{background-color:
   var(--ast-global-color-0)} (2 classes, plus specifique que notre regle a 1 classe). */
.velora-btn,
.wp-block-button .wp-block-button__link,
.wp-block-button__link {
  background: var(--peps-700) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--radius-full);
  padding: 0.8em 1.75em;
  font-weight: 700;
  text-decoration: none !important;
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-bounce),
              background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.velora-btn:hover,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button__link:hover {
  background: var(--peps-800) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-glow);
}

/* CTA flash — rose fuchsia vif, reserve aux pages transactionnelles (cf. tokens ci-dessus).
   Halo au survol + leger effet rebond : c'est la signature "on a envie de cliquer". */
.velora-btn--flash {
  background: var(--flash-500) !important;
  color: var(--peps-950) !important;
  border: none !important;
  border-radius: var(--radius-full);
  padding: 0.8em 1.75em;
  font-weight: 700;
  text-decoration: none !important;
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-bounce),
              background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.velora-btn--flash:hover {
  background: var(--flash-400) !important;
  color: var(--peps-950) !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 20px rgba(245, 35, 137, 0.35);
}

/* Bouton secondaire / discret (contour, sans fond plein) */
.velora-btn--ghost {
  background: transparent !important;
  color: var(--text-primary) !important;
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 0.75em 1.6em;
  text-decoration: none !important;
  display: inline-block;
  border: 1.5px solid var(--border) !important;
  transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.velora-btn--ghost:hover { border-color: var(--peps-600) !important; color: var(--peps-700) !important; }

/* Badge de rubrique */
.velora-badge {
  background: var(--peps-50);
  color: var(--peps-900);
  border-radius: var(--radius-full);
  padding: 0.2em 0.7em;
  font-size: var(--text-xs);
  font-weight: 700;
}

/* Tampon d'icone de rubrique */
.velora-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 6px;
  background: var(--peps-700);
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

/* Sections alternees */
.velora-section--subtle { background: var(--bg-subtle); }

/* Lien affilie (rendu via ThirstyAffiliates) — discret, jamais criard */
a[rel~="sponsored"] { font-weight: 600; }

/* Encadre TL;DR / Callout */
.velora-callout {
  background: var(--bg-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0 2.25rem;
}
.velora-callout ul { margin: 0.5rem 0 0; }
.velora-callout li { margin-bottom: 0.35rem; }
.velora-callout li:last-child { margin-bottom: 0; }

/* Accessibilite : focus visibles */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--peps-600);
  outline-offset: 2px;
  border-radius: 3px;
}

/* =========================================================================
   4. PAGE D'ACCUEIL — hero, grille de rubriques, sections
   ========================================================================= */

/* Hero : largeur de lecture confortable, respiration */
.velora-section--subtle .has-text-align-center {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}
.velora-eyebrow.has-text-align-center { margin-bottom: 0.5rem; }

/* Titres de section centres + fin filet or */
.home h2.has-text-align-center { margin-top: 3.5rem; }
.home h2.has-text-align-center::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 0.7rem auto 0;
  background: var(--gold-500);
  border-radius: 2px;
}

/* Grille de cartes : espacement + cartes a hauteur egale */
.home .wp-block-columns { gap: 1.5rem; margin-top: 1.5rem; }
.wp-block-column > .velora-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Carte de rubrique : titre en lien discret, texte secondaire */
.velora-card h2,
.velora-card h3 { margin-top: 0; margin-bottom: 0.4rem; }
.velora-card h2 a,
.velora-card h3 a {
  color: var(--text-primary);
  text-decoration: none;
}
.velora-card:hover h2 a,
.velora-card:hover h3 a,
.velora-card h2 a:hover,
.velora-card h3 a:hover { color: var(--accent); }
.velora-card p {
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* Placeholder visuel pour un contenu pas encore pret (photo produit, guide a venir...) */
.velora-img-ph {
  background: var(--bg-subtle);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  height: 7rem;
  margin-bottom: 0.75rem;
  width: 100%;
  object-fit: cover; /* pour une vraie <img>, pas d'effet sur un <div> placeholder */
}

/* Badge "Bientot disponible" — jamais de fausse donnee, juste un statut honnete */
.velora-soon {
  display: inline-block;
  background: var(--peps-50);
  color: var(--peps-900);
  border-radius: var(--radius-full);
  padding: 0.2em 0.75em;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.velora-card--soon { opacity: 0.85; }

/* Section newsletter (fond peps) : liens/boutons lisibles */
.home section[style*="53225E"] a:not(.wp-block-button__link) {
  color: #F6F4F7;
  text-decoration: underline;
}
.home section[style*="53225E"] .wp-block-button__link {
  background: #FFFFFF !important;
  color: var(--peps-700) !important;
}
.home section[style*="53225E"] .wp-block-button__link:hover {
  background: var(--peps-50) !important;
  color: var(--peps-900) !important;
}

/* Rangee de valeurs (4 props) */
.velora-values { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.velora-values > div { flex: 1 1 12rem; }

/* Bloc "La fondatrice" (persona Liora) — reutilise l'avatar-initiale existant
   (pas de photo stock : cf. CHARTE-GRAPHIQUE.md §10, la photo de la maquette
   est un placeholder randomuser.me non libre de droits en production). */
.velora-founder {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: 1.75rem;
  margin: 2rem 0 3rem;
  background: linear-gradient(120deg, var(--peps-50), var(--bg-surface));
  flex-wrap: wrap;
}
.velora-founder .velora-avatar { flex-shrink: 0; }
.velora-founder blockquote {
  margin: 0.5rem 0 0;
  padding: 0;
  border: none;
  font-style: normal;
  color: var(--text-primary);
  font-weight: 600;
}

/* =========================================================================
   5. TEMPLATES GUIDE / COMPARATIF / AVIS DE MARQUE
   ========================================================================= */

/* Bandeau "contenu de demonstration" — obligatoire sur toute page utilisant
   des produits/avis fictifs, pour ne jamais laisser croire a une vraie offre. */
.velora-demo-banner {
  background: #FFF4E5;
  border: 1px solid #F0B429;
  color: #7A5200;
  border-radius: var(--radius);
  padding: 0.85rem 1.25rem;
  font-size: 0.9rem;
  margin-bottom: 2rem;
}
.velora-demo-banner strong { color: #5C3D00; }

/* Fil d'ariane */
.velora-breadcrumb { font-size: 0.8125rem; color: var(--text-tertiary); margin-bottom: 1rem; }
.velora-breadcrumb a { color: var(--text-tertiary); }
.velora-breadcrumb a:hover { color: var(--accent); }
/* Variante sur fond sombre (hero violet) */
.velora-breadcrumb--on-dark,
.velora-breadcrumb--on-dark a { color: rgba(255,255,255,0.72); }
.velora-breadcrumb--on-dark a:hover { color: #fff; }
.velora-breadcrumb--on-dark .current { color: #fff; }

/* Hero pleine largeur (guides "meilleur X"), fond peps degrade, texte clair */
.velora-hero-band { padding: 3.5rem 0 3.75rem; }
.velora-hero-band h1 { color: #fff; margin: 0.85rem 0 1rem; }
.velora-hero-band .velora-hero-sub { color: var(--peps-50); font-size: var(--text-lg); max-width: 42rem; margin: 0; }
.velora-hero-band .velora-breadcrumb { flex-wrap: wrap; }
@media (max-width: 640px) {
  .velora-hero-band { padding: 2.25rem 0 2.5rem; }
  .velora-hero-band h1 { margin: 0.65rem 0 0.75rem; }
  .velora-hero-band .velora-hero-sub { font-size: var(--text-base); }
}

/* Bandes pleine largeur reutilisables (hero, teintee, violette) : padding coherent + responsive */
.velora-section-band { padding: 3rem 0; }
@media (max-width: 640px) { .velora-section-band { padding: 2.25rem 0; } }

/* Bande de section pleine largeur, alterne avec le blanc pour rythmer la page */
.velora-band--tint { background: var(--flash-50); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .velora-band--tint { background: var(--peps-950); }
}
:root[data-theme="dark"] .velora-band--tint { background: var(--peps-950); }

/* Badge "Top choix" — rose flash, plus de punch que le violet neutre */
.velora-badge--top {
  display: inline-block;
  background: var(--flash-100);
  color: var(--flash-700);
  border-radius: var(--radius-full);
  padding: 0.25em 0.75em;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .velora-badge--top { background: var(--flash-900); color: var(--flash-100); }
}
:root[data-theme="dark"] .velora-badge--top { background: var(--flash-900); color: var(--flash-100); }

/* Tableau comparatif */
.velora-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); margin: 2rem 0 2.5rem; }
.velora-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.velora-table th, .velora-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.9375rem; }
.velora-table thead th { background: var(--bg-subtle); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
.velora-table tbody tr:last-child td { border-bottom: none; }
.velora-table tbody tr:hover { background: var(--bg-subtle); }
.velora-table td.price { font-weight: 700; }
.velora-table .center { text-align: center; }
.velora-ok { color: var(--success-500); font-weight: 700; }
.velora-no { color: var(--danger-500); font-weight: 700; }
/* Vignette photo dans une cellule de tableau */
.velora-table .velora-img-ph--table {
  width: 3rem; height: 3rem; margin: 0; font-size: 0.55rem; border-radius: var(--radius-sm); flex-shrink: 0;
}
.velora-table td.velora-table-photo { width: 3.75rem; padding-right: 0.5rem; }

/* Pour / Contre */
.velora-pc { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1.5rem 0; }
.velora-pc > div { flex: 1 1 14rem; }
.velora-pc h4 { font-size: 0.875rem; margin-bottom: 0.6rem; }
.velora-pc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9375rem; color: var(--text-secondary); }
@media (max-width: 480px) { .velora-pc { gap: 1.25rem; } }

/* FAQ — accordeon (<details class="velora-faq"><summary>Question</summary><p>Reponse</p></details>) */
.velora-faq-list { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0 2.5rem; }
.velora-faq {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.velora-faq:hover { border-color: var(--peps-300); }
.velora-faq[open] { box-shadow: var(--shadow-card); }
.velora-faq summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.velora-faq summary::-webkit-details-marker { display: none; }
.velora-faq summary::after {
  content: "+";
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--flash-100); color: var(--flash-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1;
  transition: transform var(--duration-base) var(--ease-out);
}
.velora-faq[open] summary::after { transform: rotate(45deg); }
.velora-faq p { margin-top: 0.75rem; color: var(--text-secondary); }

/* Avatar rond generique (initiale), utilise pour la signature "Liora" sur du contenu de demo */
.velora-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--peps-700); color: #fff;
  font-family: var(--font-serif); font-weight: 700;
  flex-shrink: 0;
}
.velora-avatar--lg { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }

/* Bloc de citation / verdict signe */
.velora-quote { display: flex; gap: 1rem; align-items: flex-start; background: var(--bg-subtle); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 1.75rem 0; }
@media (max-width: 480px) { .velora-quote { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.25rem; } }
/* Variante sur bande violette : fond translucide clair, texte blanc, avatar inverse */
.velora-quote--on-dark {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
}
.velora-quote--on-dark p { color: #fff; }
.velora-quote--on-dark .velora-avatar { background: #fff; color: var(--peps-700); }

/* Disclosure affiliation */
.velora-disclosure { background: var(--bg-subtle); border-radius: var(--radius); padding: 1rem 1.25rem; font-size: 0.875rem; color: var(--text-secondary); margin: 1.5rem 0; }

/* Listing produit numerote (guides "meilleur X" / "best X") — inspire du format
   e-commerce classique (image + badge de classement + prix barre + CTA), mais avec
   plus de contenu editorial (description + pour/contre) que sur une simple fiche produit. */
.velora-ranked-list { display: flex; flex-direction: column; gap: 2rem; margin: 2.5rem 0 3.5rem; }
.velora-ranked-item {
  display: flex; gap: 1.5rem; align-items: flex-start;
  padding: 1.75rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
}
@media (max-width: 480px) { .velora-ranked-item { padding: 1.25rem; gap: 1rem; } }
.velora-ranked-media { position: relative; flex-shrink: 0; width: 11rem; }
.velora-ranked-media .velora-img-ph { width: 11rem; height: 11rem; margin-bottom: 0; }
.velora-ranked-badge {
  position: absolute; top: -0.6rem; left: -0.6rem; z-index: 2;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--flash-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 3px 8px rgba(245, 35, 137, 0.35);
}
.velora-ranked-body { flex: 1; min-width: 0; }
.velora-ranked-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.velora-ranked-brand { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
.velora-ranked-body h3 { margin: 0.15rem 0 0.5rem; }
.velora-ranked-desc { color: var(--text-secondary); margin-bottom: 0.85rem; }
.velora-ranked-body .velora-pc { margin: 0.5rem 0 1rem; }
.velora-ranked-price-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.velora-ranked-price { font-weight: 700; font-size: 1.125rem; color: var(--flash-700); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .velora-ranked-price { color: var(--flash-300); } }
:root[data-theme="dark"] .velora-ranked-price { color: var(--flash-300); }
.velora-ranked-price .was { text-decoration: line-through; color: var(--text-tertiary); font-weight: 400; font-size: 0.875rem; margin-right: 0.4em; }
@media (max-width: 640px) {
  .velora-ranked-item { flex-direction: column; }
  .velora-ranked-media, .velora-ranked-media .velora-img-ph { width: 100%; height: 11rem; }
}

/* VS divider */
.velora-vs {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--peps-600); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 0.875rem;
  margin: -1.5rem auto; position: relative; z-index: 2;
  box-shadow: var(--shadow-cta-glow);
}

/* =========================================================================
   6. HEADER / MEGA-NAVIGATION (Astra)
   Astra rend nativement les sous-menus en dropdown au survol/focus. Markup
   confirme en prod : header.site-header, nav#primary-site-navigation,
   ul.main-header-menu > li.menu-item > a, sous-menus en ul.sub-menu (classe
   core WordPress, independante du theme). On habille ce marquage existant
   dans la DA peps, aucun JS personnalise.
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.ast-site-identity .site-title,
.ast-site-identity .site-title a {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--text-primary);
}

/* Liens de premier niveau */
.main-header-menu > .menu-item > a,
.main-header-menu > .menu-item > .menu-link {
  font-weight: 600;
  color: var(--text-primary) !important;
  transition: color var(--duration-fast) var(--ease-out);
}
.main-header-menu > .menu-item:hover > a,
.main-header-menu > .menu-item:focus-within > a,
.main-header-menu > .menu-item:hover > .menu-link,
.main-header-menu > .menu-item:focus-within > .menu-link {
  color: var(--accent) !important;
}

/* Dropdown de categorie — panneau carte (mega-navigation legere) */
.main-header-menu .sub-menu {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card-hover) !important;
  padding: 0.4rem !important;
  min-width: 240px !important;
}
.main-header-menu .sub-menu .menu-item > a {
  color: var(--text-primary) !important;
  padding: 0.65rem 0.9rem !important;
  border-radius: 6px;
  font-weight: 500 !important;
  white-space: normal !important;
}
.main-header-menu .sub-menu .menu-item > a:hover {
  background: var(--peps-50) !important;
  color: var(--accent) !important;
}

/* CTA de fin de menu — bouton plein (coherent avec .velora-btn) */
.main-header-menu .velora-hd-cta > a {
  background: var(--peps-700) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-full) !important;
  padding: 0.55em 1.3em !important;
  font-weight: 700 !important;
  margin-left: 0.5rem;
}
.main-header-menu .velora-hd-cta > a:hover {
  background: var(--peps-900) !important;
  color: #FFFFFF !important;
}

/* Toggle mobile natif Astra, recolore dans la DA */
.ast-mobile-menu-trigger-minimal .astra-menu-toggle-icon { color: var(--peps-700); }
#ast-mobile-header .main-header-menu .menu-item > a {
  border-color: var(--border);
}

/* =========================================================================
   7. TEMPLATE D'ARCHIVE DE CATEGORIE (category.php)
   ========================================================================= */

.velora-cat-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.velora-cat-hero {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0 2.5rem;
  margin-bottom: 2.5rem;
}
.velora-cat-hero h1 { margin: 0.35rem 0 0.75rem; }
.velora-cat-desc { color: var(--text-secondary); max-width: 60ch; margin-bottom: 1.25rem; }
.velora-cat-cta-row { margin-top: 0.25rem; }

.velora-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 900px) { .velora-cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .velora-cat-grid { grid-template-columns: 1fr; } }

.velora-cat-card { overflow: hidden; display: flex; flex-direction: column; }
.velora-cat-card-thumb-link { display: block; }
.velora-cat-card-thumb { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.velora-cat-card-body { padding: 1.1rem 1.25rem 1.35rem; }
.velora-cat-card-body h2 { font-size: 1.0625rem; margin: 0 0 0.5rem; }
.velora-cat-card-body h2 a { color: var(--text-primary); text-decoration: none; }
.velora-cat-card-body h2 a:hover { color: var(--accent); }
.velora-cat-card-body p { color: var(--text-secondary); font-size: 0.9375rem; margin: 0 0 0.6rem; }
.velora-cat-card-date { color: var(--text-tertiary); font-size: 0.8125rem; }

.velora-cat-empty {
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

.velora-cat-pagination { margin-bottom: 2.5rem; }
.velora-cat-pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.velora-cat-pagination a,
.velora-cat-pagination span.current {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
}
.velora-cat-pagination span.current { background: var(--peps-700); color: #fff; border-color: var(--peps-700); }
.velora-cat-pagination a:hover { border-color: var(--accent); color: var(--accent); }

.velora-cat-band {
  background: var(--peps-700);
  color: #fff;
  border-radius: var(--radius);
  padding: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
}
.velora-cat-band h2 { color: #fff; margin: 0 0 0.5rem; }
.velora-cat-band p { color: var(--peps-50); margin: 0 0 1.25rem; }
.velora-cat-band .velora-btn { background: #fff !important; color: var(--peps-700) !important; }
.velora-cat-band .velora-btn:hover { background: var(--peps-50) !important; color: var(--peps-900) !important; }

/* =========================================================================
   8. HOMEPAGE V2 (structure inspiree de lovehoney.com : tuiles de categorie,
   bandeau 3 colonnes, bloc editorial, grille de guides) — palette peps
   uniquement, pas de couleurs arc-en-ciel hors marque, et aucune donnee
   e-commerce inventee (pas de promos/prix/avis tant qu'il n'y a pas de vrais
   partenaires affilies).
   ========================================================================= */

.velora-tilegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0 3rem;
}
@media (max-width: 900px) { .velora-tilegrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .velora-tilegrid { grid-template-columns: 1fr; } }

/* !important sur les couleurs/decoration : Astra applique a{color:var(--ast-global-color-0)} et
   .entry-content h1..h6{color:var(--ast-global-color-3)} globalement ; nos composants (tuiles,
   cartes, bandeau) doivent gagner de facon fiable, quelle que soit la specificite exacte du theme. */
.velora-tile {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(28, 20, 24, 0.06);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.velora-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.velora-tile h3 { margin: 0; font-size: 1.1875rem; text-decoration: none !important; }
.velora-tile p { margin: 0; font-size: 0.9375rem; text-decoration: none !important; }
.velora-tile .velora-stamp { margin-bottom: 0.25rem; width: 3rem; height: 3rem; font-size: 1rem; border-radius: 10px; }

.velora-tile--violet { background: linear-gradient(155deg, var(--peps-700), var(--peps-900)); }
.velora-tile--violet h3, .velora-tile--violet h3 a { color: #fff !important; }
.velora-tile--violet p { color: var(--peps-50) !important; }
.velora-tile--violet .velora-stamp { background: #fff; color: var(--peps-700); }

.velora-tile--tint { background: var(--peps-50); border: 1px solid var(--peps-200); }
.velora-tile--tint h3, .velora-tile--tint h3 a { color: var(--text-primary) !important; }
.velora-tile--tint p { color: var(--text-secondary) !important; }
.velora-tile--tint .velora-stamp { background: var(--peps-700); color: #fff; }

.velora-tile--gold { background: var(--gold-50); border: 1px solid var(--gold-300); }
.velora-tile--gold h3, .velora-tile--gold h3 a { color: var(--text-primary) !important; }
.velora-tile--gold p { color: var(--text-secondary) !important; }
.velora-tile--gold .velora-stamp { background: var(--gold-600); color: #fff; }

.velora-tile--ink { background: linear-gradient(155deg, #2A2129, var(--text-primary)); }
.velora-tile--ink h3, .velora-tile--ink h3 a { color: #fff !important; }
.velora-tile--ink p { color: rgba(255,255,255,0.72) !important; }
.velora-tile--ink .velora-stamp { background: var(--gold-600); color: #fff; }

/* Bandeau 3 colonnes (newsletter / positionnement / besoin d'aide) */
.velora-stripe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2.5rem 0;
}
@media (max-width: 780px) { .velora-stripe { grid-template-columns: 1fr; } }
.velora-stripe > div {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  text-decoration: none !important;
  display: block;
  height: 100%;
  box-sizing: border-box;
}
.velora-stripe h4 { margin: 0 0 0.35rem; font-size: 1.0625rem; text-decoration: none !important; }
.velora-stripe p { margin: 0; font-size: 0.9375rem; text-decoration: none !important; }
.velora-stripe--violet { background: var(--peps-700); }
.velora-stripe--violet h4 { color: #fff !important; }
.velora-stripe--violet p { color: var(--peps-50) !important; }
.velora-stripe--tint { background: var(--peps-50); border: 1px solid var(--border); }
.velora-stripe--tint h4 { color: var(--text-primary) !important; }
.velora-stripe--tint p { color: var(--text-secondary) !important; }
.velora-stripe--gold { background: var(--gold-50); border: 1px solid var(--gold-300); }
.velora-stripe--gold h4 { color: var(--text-primary) !important; }
.velora-stripe--gold p { color: var(--text-secondary) !important; }
a.velora-stripe-link { color: inherit !important; text-decoration: none !important; display: block; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); border-radius: var(--radius-lg); }
a.velora-stripe-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
a.velora-stripe-link:hover h4 { text-decoration: underline !important; }

/* Bloc editorial SEO ("Pourquoi Liora") */
.velora-editorial { max-width: 68rem; margin: 3.5rem auto; padding: 0 1.5rem; }
.velora-editorial h2 { margin-bottom: 0.75rem; }
.velora-editorial > p:first-of-type { color: var(--text-secondary); max-width: 68ch; margin-bottom: 2.25rem; font-size: 1.0625rem; }
.velora-editorial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2.5rem; }
@media (max-width: 700px) { .velora-editorial-grid { grid-template-columns: 1fr; } }
.velora-editorial-grid h3 { font-size: 1.0625rem; margin: 0 0 0.4rem; color: var(--text-primary) !important; }
.velora-editorial-grid p { color: var(--text-secondary) !important; margin: 0; font-size: 0.9375rem; }

/* Grille de guides reels (remplace les anciennes cartes "coming soon") */
.velora-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0 3rem;
}
@media (max-width: 900px) { .velora-guide-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .velora-guide-grid { grid-template-columns: 1fr; } }
.velora-guide-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(28, 20, 24, 0.06);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.velora-guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.velora-guide-card-top { padding: 0; position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.velora-guide-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.velora-guide-card-top .velora-eyebrow {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2;
  display: inline-block;
  margin-bottom: 0;
  background: rgba(20, 16, 26, 0.62) !important;
  color: #fff !important;
  padding: 0.25em 0.75em;
  border-radius: var(--radius-full);
  letter-spacing: 0.08em;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.velora-tile--tint .velora-eyebrow, .velora-tile--gold .velora-eyebrow,
.velora-guide-card-top.velora-tile--tint .velora-eyebrow, .velora-guide-card-top.velora-tile--gold .velora-eyebrow { background: rgba(28,20,24,0.06); color: var(--peps-700) !important; }
.velora-guide-card-bottom { background: var(--bg-surface); border: 1px solid var(--border); border-top: none; padding: 1.1rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 0.85rem; }
.velora-guide-card-bottom h3 { font-size: 1.0625rem; margin: 0; color: var(--text-primary) !important; text-decoration: none !important; }
.velora-guide-card-cta { font-weight: 700; color: var(--peps-700) !important; font-size: 0.9375rem; text-decoration: none !important; }
.velora-guide-card:hover .velora-guide-card-cta { text-decoration: underline !important; }

/* =========================================================================
   9. FOOTER DE MARQUE (injecte via le filtre astra_footer_copyright, cf.
   functions.php velora_brand_footer). On neutralise le centrage/typo de la
   barre Astra pour poser un footer pleine largeur en colonnes.
   ========================================================================= */

/* Le footer est injecte en wp_footer (cf. functions.php) : on masque la barre
   de copyright Astra par defaut, et on pose notre footer en bande pleine largeur. */
.site-below-footer-wrap { display: none !important; }

.velora-footer {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  text-align: left;
  font-size: var(--text-base);
  padding: 2.75rem 1.5rem 0;
}
.velora-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding-bottom: 2.25rem;
}
@media (max-width: 900px) { .velora-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
@media (max-width: 520px) { .velora-footer-grid { grid-template-columns: 1fr; } }

.velora-footer-brand { max-width: 24rem; }
.velora-footer-logo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text-primary);
  display: inline-block;
  margin-bottom: 0.6rem;
}
.velora-footer-logo span { color: var(--accent); }
.velora-footer-brand p { color: var(--text-secondary); font-size: 0.9375rem; margin: 0; line-height: 1.6; }

.velora-footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.velora-footer-col h4 {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin: 0 0 0.35rem;
}
.velora-footer-col a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--duration-fast) var(--ease-out);
}
.velora-footer-col a:hover { color: var(--accent); }

.velora-footer-bar {
  max-width: 72rem;
  margin: 0 auto;
  border-top: 1px solid var(--border);
  padding: 1.1rem 0 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

/* =========================================================================
   10. HOME "BOUTIQUE" — chrome inspiré du prototype (bandeau valeur, hero
   boutique, univers en icônes, réassurance, piliers) MAIS sans données
   e-commerce inventées (pas de prix/promos/notes fictifs). Palette Peps.
   ========================================================================= */

/* Bandeau de valeur (haut de page, honnête — pas de fausse promo) */
.velora-promobar {
  background: linear-gradient(90deg, var(--peps-900), var(--peps-700));
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.55rem 1rem;
}
.velora-promobar strong { color: var(--gold-300); }

/* Hero boutique : panneau dégradé plein, texte clair, CTA blanc */
.velora-shop-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  padding: clamp(2rem, 5vw, 3.25rem);
  background: linear-gradient(120deg, var(--peps-900) 0%, var(--peps-700) 52%, var(--peps-600) 100%);
  box-shadow: var(--shadow-card);
}
.velora-shop-hero .velora-eyebrow { color: var(--gold-300) !important; }
.velora-shop-hero h1 { color: #fff; max-width: 20ch; margin: 0.35rem 0 0.6rem; }
.velora-shop-hero p { color: rgba(255,255,255,0.9); max-width: 46ch; font-size: var(--text-lg); margin: 0 0 1.35rem; }
.velora-shop-hero .velora-btn { background: #fff !important; color: var(--peps-700) !important; }
.velora-shop-hero .velora-btn:hover { background: var(--gold-300) !important; color: var(--peps-900) !important; }
.velora-shop-tag {
  display: inline-block;
  background: var(--flash-600);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: 0.2em 1em;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

/* Univers en icônes rondes (émoji, pas de dépendance à un sprite) */
.velora-univers {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin: 2.25rem 0 1rem;
}
@media (max-width: 860px) { .velora-univers { grid-template-columns: repeat(3, 1fr); } }
.velora-univers a {
  text-align: center;
  text-decoration: none !important;
  color: var(--text-primary) !important;
  font-weight: 600;
  font-size: 0.9rem;
}
.velora-univers-ic {
  width: 76px; height: 76px; margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: var(--peps-50);
  border: 1px solid var(--peps-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; line-height: 1;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.velora-univers a:hover .velora-univers-ic { transform: translateY(-3px); box-shadow: var(--shadow-card); }

/* Bande de réassurance (4 points honnêtes) */
.velora-reassure {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 1.25rem;
  border-radius: var(--radius);
  margin: 2.5rem 0;
}
@media (max-width: 860px) { .velora-reassure { grid-template-columns: 1fr 1fr; } }
.velora-reassure-item { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; color: var(--text-secondary); }
.velora-reassure-item .ic { font-size: 1.5rem; line-height: 1; }
.velora-reassure-item strong { color: var(--text-primary); display: block; font-size: 0.92rem; }

/* En-tête de section (titre + lien "voir tout") */
.velora-secthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 2.5rem 0 1.25rem;
}
.velora-secthead h2 { margin: 0; }
.velora-secthead h2::after { display: none; } /* pas de filet ici, contrairement aux titres centrés */
.velora-secthead a { font-size: 0.9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; color: var(--peps-700) !important; }

/* Piliers "mission" (4, centrés, émoji) */
.velora-mission {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  text-align: center; margin: 2.5rem 0;
}
@media (max-width: 860px) { .velora-mission { grid-template-columns: 1fr 1fr; } }
.velora-mission-item .ic { font-size: 1.9rem; line-height: 1; }
.velora-mission-item h4 { margin: 0.5rem 0 0.2rem; font-size: 1rem; }
.velora-mission-item p { font-size: 0.9rem; color: var(--text-secondary); margin: 0; }

/* Cartes produit (home "boutique") — vraie photo + prix + CTA affilié.
   Toute la carte est un lien affilié (/go/... via ThirstyAffiliates). */
.velora-prodgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 1.75rem 0 0.5rem;
}
@media (max-width: 900px) { .velora-prodgrid { grid-template-columns: 1fr 1fr; } }
.velora-prodcard {
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none !important;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.velora-prodcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.velora-prodcard-media { aspect-ratio: 1; background: var(--bg-subtle); position: relative; }
.velora-prodcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.velora-prodcard-cat {
  position: absolute; top: 0.6rem; left: 0.6rem;
  background: rgba(255,255,255,0.92); color: var(--peps-800);
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: var(--radius-full); padding: 0.2em 0.7em;
}
.velora-prodcard-body { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.velora-prodcard-brand { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); font-weight: 700; }
.velora-prodcard-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary) !important; line-height: 1.3; margin: 0; }
.velora-prodcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.65rem; }
.velora-prodcard-price { font-weight: 700; font-size: 1.05rem; color: var(--flash-700); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .velora-prodcard-price { color: var(--flash-300); } }
:root[data-theme="dark"] .velora-prodcard-price { color: var(--flash-300); }
.velora-prodcard-cta {
  font-size: 0.8rem; font-weight: 700; color: #fff !important;
  background: var(--flash-600); border-radius: var(--radius-full);
  padding: 0.4em 0.95em; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out);
}
.velora-prodcard:hover .velora-prodcard-cta { background: var(--flash-500); }
.velora-prodnote { font-size: 0.8125rem; color: var(--text-tertiary); margin: 0.25rem 0 0; }

/* Sélecteur de langue (Polylang) dans le menu — bouton compact "🌐 EN"
   (cf. functions.php ; on n'affiche que la langue vers laquelle basculer). */
.velora-lang-switcher { display: inline-flex !important; align-items: center !important; align-self: center !important; width: auto !important; white-space: nowrap; }
.velora-lang-switcher .velora-lang {
  display: inline-flex !important;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700 !important;
  font-size: 0.8rem;
  line-height: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  letter-spacing: 0.03em;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  white-space: nowrap;
  padding: 0.4rem 0.75rem !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.velora-lang-switcher .velora-lang:hover { color: var(--peps-700) !important; border-color: var(--peps-300); }
.velora-lang-globe { font-size: 0.95em; line-height: 1; }
:root[data-theme="dark"] .velora-lang-switcher .velora-lang:hover { color: var(--peps-300) !important; }

/* =========================================================================
   11. CHROME EDITORIAL (aligne articles/guides sur les templates maquettes) :
   mise en page 2 colonnes + sommaire sticky, en-tete signe, auteur, a-lire-aussi.
   ========================================================================= */

/* Élargir le conteneur des articles pour loger la colonne sommaire */
.single-post .ast-container,
.single-post .site-content > .ast-container,
.single-post #primary { max-width: 1120px; }

.velora-ed-layout { display: flex; align-items: flex-start; gap: 2.75rem; }
.velora-ed-main { flex: 1 1 auto; min-width: 0; }
.velora-ed-side { flex: 0 0 236px; }
@media (max-width: 980px) {
  .velora-ed-layout { display: block; }
  .velora-ed-side { max-width: 40rem; margin: 0 0 2rem; }
}

.velora-toc {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.velora-ed-side .velora-toc { position: sticky; top: 96px; }
.velora-toc h4 {
  font-family: var(--font-serif);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-tertiary); margin: 0 0 0.7rem;
}
.velora-toc ol { list-style: none; margin: 0; padding: 0; }
.velora-toc li { margin: 0.1rem 0; }
.velora-toc a { display: block; color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; padding: 0.3rem 0.45rem; border-radius: 6px; line-height: 1.35; }
.velora-toc a:hover { background: var(--peps-50); color: var(--accent); }
.velora-toc-l3 a { padding-left: 1.35rem; font-size: 0.84rem; }
.velora-toc--box { max-width: 36rem; margin: 1.5rem 0 2.25rem; }

/* Masquer la méta Astra par défaut sur les articles (doublon avec notre en-tête signé) */
.single-post .entry-header .entry-meta,
.single-post .ast-single-post .entry-meta,
.single-post .entry-header .post-meta { display: none; }

.velora-article-meta { display: flex; align-items: center; gap: 0.6rem; color: var(--text-tertiary); font-size: 0.9rem; margin: 0.25rem 0 1.75rem; }
.velora-article-meta .velora-avatar { width: 2.1rem; height: 2.1rem; font-size: 0.85rem; }

.velora-author {
  display: flex; gap: 1.1rem; align-items: center;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.35rem 1.5rem; margin: 2.75rem 0 1rem;
}
.velora-author h4 { margin: 0 0 0.2rem; }
.velora-author p { margin: 0; font-size: 0.92rem; color: var(--text-secondary); }

.velora-related { background: var(--bg-subtle); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin: 2.25rem 0; }
.velora-related .velora-eyebrow { display: block; margin-bottom: 0.5rem; }
.velora-related ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.velora-related a { font-weight: 600; text-decoration: none; color: var(--accent); }
.velora-related a:hover { color: var(--accent-hover); }

/* =========================================================================
   12. HOME "BOUTIQUE" — port fidèle du prototype (prototypes/index.html),
   scopé sous .velora-home pour ne rien affecter ailleurs.
   ========================================================================= */
.velora-home { --vh-radius: 10px; --vh-radius-lg: 16px; --vh-container: 1200px; }
.velora-home * { box-sizing: border-box; }
.velora-home .vh-container { max-width: var(--vh-container); margin: 0 auto; padding: 0 1.25rem; }
.velora-home .vh-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; font-weight: 700; color: var(--peps-700); margin: 0 0 .4rem; }
.velora-home .vh-btn { display: inline-block; background: var(--peps-700); color: #fff !important; border-radius: var(--vh-radius); padding: .8em 1.6em; font-weight: 700; text-decoration: none !important; border: 1px solid transparent; transition: background .2s, transform .15s; }
.velora-home .vh-btn:hover { background: var(--peps-900); transform: translateY(-1px); }
.velora-home .vh-badge { display: inline-block; background: var(--peps-50); color: var(--peps-900); border-radius: 999px; padding: .2em .8em; font-size: .8125rem; font-weight: 700; }

/* Bandeau promo plein */
.velora-home .vh-promobar { background: linear-gradient(90deg, var(--peps-900), var(--peps-700)); color:#fff; text-align:center; font-size:.85rem; font-weight:500; padding:.55rem 1rem; }
.velora-home .vh-promobar strong { color: var(--gold-300); }
.velora-home .vh-promobar a { color:#fff; }

/* Hero boutique */
.velora-home .vh-hero { padding: 1.5rem 0 .5rem; }
.velora-home .vh-hero-banner { position:relative; border-radius: var(--vh-radius-lg); overflow:hidden; min-height:340px; display:flex; flex-direction:column; justify-content:center; color:#fff; padding:2.5rem; background: linear-gradient(120deg, var(--peps-900) 0%, var(--peps-700) 50%, var(--peps-500) 100%); }
.velora-home .vh-hero-banner .vh-eyebrow{ color: var(--gold-300); }
.velora-home .vh-hero-banner h1{ color:#fff; font-size: clamp(1.8rem,4vw,2.8rem); max-width:18ch; margin:.2rem 0 .5rem; }
.velora-home .vh-hero-banner p{ color:rgba(255,255,255,.9); max-width:42ch; font-size:1.05rem; margin-bottom:0; }
.velora-home .vh-hero-banner .vh-btn{ margin-top:1.2rem; align-self:flex-start; background:#fff; color: var(--peps-700) !important; }
.velora-home .vh-hero-banner .vh-btn:hover{ background: var(--gold-300); color: var(--peps-900) !important; }
.velora-home .vh-pricetag { display:inline-block; background: var(--flash-600); color:#fff; font-weight:700; border-radius:999px; padding:.2em 1em; font-size:1rem; margin-bottom:.6rem; }

/* Univers (icônes) */
.velora-home .vh-univers { display:grid; grid-template-columns: repeat(6,1fr); gap:1rem; padding:1.5rem 0; }
.velora-home .vh-univers a { text-align:center; text-decoration:none; color: var(--text-primary); font-weight:600; font-size:.9rem; }
.velora-home .vh-univers-ic { width:84px; height:84px; margin:0 auto .5rem; border-radius:50%; background: var(--peps-50); display:flex; align-items:center; justify-content:center; font-size:2rem; transition: transform .2s, box-shadow .2s; }
.velora-home .vh-univers a:hover .vh-univers-ic { transform: translateY(-3px); box-shadow: var(--shadow-card); }
@media (max-width:860px){ .velora-home .vh-univers{ grid-template-columns: repeat(3,1fr); } }

/* Section + en-tête */
.velora-home .vh-section { padding: 2.2rem 0; }
.velora-home .vh-section--subtle { background: var(--bg-subtle); }
.velora-home .vh-sechead { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; }
.velora-home .vh-sechead h2 { margin:0; }
.velora-home .vh-sechead a { font-size:.95rem; font-weight:700; text-decoration:none; white-space:nowrap; color: var(--peps-700); }

/* Grilles produit */
.velora-home .vh-pgrid { display:grid; grid-template-columns: repeat(4,1fr); gap:1.2rem; }
@media (max-width:980px){ .velora-home .vh-pgrid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .velora-home .vh-pgrid{ grid-template-columns: 1fr;} }

/* Carte produit */
.velora-home .vh-pcard { background: var(--bg-surface); border:1px solid var(--border); border-radius: var(--vh-radius-lg); overflow:hidden; display:flex; flex-direction:column; text-decoration:none !important; transition: transform .2s, box-shadow .2s; }
.velora-home .vh-pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.velora-home .vh-pcard-media { position:relative; aspect-ratio:1; background: var(--bg-subtle); }
.velora-home .vh-pcard-media img { width:100%; height:100%; object-fit:cover; display:block; }
.velora-home .vh-pcard-badge { position:absolute; top:.6rem; left:.6rem; background: var(--flash-600); color:#fff; font-weight:700; font-size:.78rem; border-radius:8px; padding:.2em .6em; }
.velora-home .vh-pcard-tag { position:absolute; bottom:.6rem; left:.6rem; background: rgba(26,18,34,.72); color:#fff; font-size:.72rem; border-radius:6px; padding:.15em .5em; }
.velora-home .vh-pcard-body { padding:.9rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.velora-home .vh-pcard-brand { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-tertiary); font-weight:700; }
.velora-home .vh-pcard-title { font-family: var(--font-sans); font-size:.98rem; font-weight:600; line-height:1.3; margin:0; color: var(--text-primary) !important; }
.velora-home .vh-pcard-price { display:flex; align-items:baseline; gap:.5rem; margin-top:.2rem; }
.velora-home .vh-pcard-price .now { font-size:1.25rem; font-weight:700; color: var(--text-primary); }
.velora-home .vh-pcard .vh-btn { margin-top:.6rem; text-align:center; padding:.6em 1em; font-size:.92rem; background: var(--flash-600); }
.velora-home .vh-pcard .vh-btn:hover { background: var(--flash-500); }

/* Réassurance */
.velora-home .vh-reassure { background: var(--bg-subtle); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.velora-home .vh-reassure-inner { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; padding:1.1rem 0; }
.velora-home .vh-reassure-item { display:flex; align-items:center; gap:.7rem; font-size:.85rem; color: var(--text-secondary); }
.velora-home .vh-reassure-item .ic { font-size:1.4rem; line-height:1; }
.velora-home .vh-reassure-item strong { color: var(--text-primary); display:block; font-size:.92rem; }
@media (max-width:860px){ .velora-home .vh-reassure-inner{ grid-template-columns: 1fr 1fr; } }

/* Grille de cartes éditoriales */
.velora-home .vh-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; }
@media (max-width:860px){ .velora-home .vh-grid{ grid-template-columns: 1fr; } }
.velora-home .vh-card { background: var(--bg-surface); border:1px solid var(--border); border-radius: var(--vh-radius-lg); overflow:hidden; display:flex; flex-direction:column; text-decoration:none !important; transition: transform .2s, box-shadow .2s; }
.velora-home .vh-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.velora-home .vh-card-media { aspect-ratio:16/10; position:relative; background: linear-gradient(135deg, var(--bg-subtle), var(--peps-50)); }
.velora-home .vh-card-media img { width:100%; height:100%; object-fit:cover; display:block; }
.velora-home .vh-card-media .vh-badge { position:absolute; top:.8rem; left:.8rem; }
.velora-home .vh-card-body { padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.velora-home .vh-card-body h3 { margin:0; font-size:1.18rem; }
.velora-home .vh-card-body h3 a { color: var(--text-primary); text-decoration:none; }
.velora-home .vh-card:hover h3 a { color: var(--peps-700); }
.velora-home .vh-card-excerpt { color: var(--text-secondary); font-size:.95rem; margin:0; }
.velora-home .vh-card-meta { margin-top:auto; padding-top:.6rem; color: var(--text-tertiary); font-size:.85rem; }

/* Mission (piliers) */
.velora-home .vh-mission { display:grid; grid-template-columns: repeat(4,1fr); gap:1.5rem; text-align:center; padding:1rem 0; }
.velora-home .vh-mission-item .ic { font-size:2rem; line-height:1; }
.velora-home .vh-mission-item h4 { margin:.5rem 0 .2rem; font-size:1.05rem; }
.velora-home .vh-mission-item p { font-size:.9rem; color: var(--text-secondary); margin:0; }
@media (max-width:860px){ .velora-home .vh-mission{ grid-template-columns: 1fr 1fr; } }

/* Partenaires */
.velora-home .vh-partners { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; padding:.5rem 0; }
.velora-home .vh-partners span { border:1px solid var(--border); border-radius:999px; padding:.4em 1.1em; font-size:.85rem; color: var(--text-secondary); font-weight:600; }
.velora-home .vh-center { text-align:center; }

/* Newsletter */
.velora-home .vh-narrow { max-width: 760px; margin: 0 auto; }
.velora-home .vh-newsletter { background: var(--peps-700); color:#F3E8D4; border-radius: var(--vh-radius-lg); padding:2.4rem; text-align:center; }
.velora-home .vh-newsletter h2 { color:#fff; margin:0 0 .4rem; }
.velora-home .vh-newsletter p { color:rgba(243,232,212,.86); max-width:46ch; margin:0 auto 1.4rem; }
.velora-home .vh-newsletter form { display:flex; gap:.6rem; max-width:440px; margin:0 auto; }
.velora-home .vh-newsletter input { flex:1; border:1px solid rgba(243,232,212,.3); background: rgba(255,255,255,.08); color:#fff; border-radius: var(--vh-radius); padding:.8em 1em; font-size:1rem; }
.velora-home .vh-newsletter input::placeholder { color: rgba(243,232,212,.6); }
.velora-home .vh-newsletter .vh-btn { background:#fff; color: var(--peps-700) !important; }
.velora-home .vh-newsletter .vh-btn:hover { background: var(--gold-300); color: var(--peps-900) !important; }
.velora-home .vh-newsletter small { display:block; margin-top:.9rem; color: rgba(243,232,212,.6); }
@media (max-width:560px){ .velora-home .vh-newsletter form { flex-direction:column; } }

/* =========================================================================
   13. HEADER BOUTIQUE custom (cf. functions.php velora_shop_header) —
   remplace le header Astra (masqué), reproduit le header du prototype.
   ========================================================================= */
#masthead { display: none !important; }
.velora-shophead { position: sticky; top: 0; z-index: 500; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.velora-shophead-main { display: flex; align-items: center; gap: 1.2rem; height: 68px; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.velora-shophead-brand { font-family: var(--font-serif); font-size: 1.55rem; font-weight: 600; color: var(--text-primary); text-decoration: none; letter-spacing: .01em; }
.velora-shophead-brand span { color: var(--peps-700); }
.velora-shophead-search { flex: 1; max-width: 540px; display: flex; align-items: center; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .35rem .3rem 1.1rem; gap: .5rem; }
.velora-shophead-search input { border: none; background: transparent; outline: none; flex: 1; font-size: .95rem; color: var(--text-primary); font-family: var(--font-sans); }
.velora-shophead-search button { border: none; background: var(--peps-700); color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1.05rem; flex: none; display: flex; align-items: center; justify-content: center; }
.velora-shophead-search button:hover { background: var(--peps-900); }
.velora-shophead-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.velora-catnav { border-top: 1px solid var(--border); background: var(--bg-surface); }
.velora-catnav-inner { position: relative; display: flex; gap: 1.6rem; height: 46px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.velora-catnav-inner > a, .velora-cat-item > a { color: var(--text-secondary); text-decoration: none; font-size: .92rem; font-weight: 600; white-space: nowrap; transition: color .15s; display: inline-flex; align-items: center; gap: .2rem; }
.velora-catnav-inner > a:hover, .velora-cat-item:hover > a { color: var(--peps-700); }
.velora-catnav-inner a.hot { color: var(--flash-600); }
.velora-cat-caret { font-size: .62rem; opacity: .65; }

/* Sous-menus déroulants */
.velora-cat-item { position: relative; }
.velora-cat-drop {
  position: absolute; top: 100%; left: -.4rem; z-index: 600;
  min-width: 250px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover); padding: .4rem; margin-top: .1rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out), visibility .15s;
}
.velora-cat-item:hover > .velora-cat-drop,
.velora-cat-item:focus-within > .velora-cat-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.velora-cat-drop a { display: block; padding: .5rem .75rem; border-radius: 6px; font-size: .9rem; font-weight: 500; color: var(--text-primary) !important; white-space: nowrap; }
.velora-cat-drop a:hover { background: var(--peps-50); color: var(--peps-700) !important; }

/* ---- Méga-menu à colonnes (façon boutique / Lovehoney) ---- */
/* position:static => le panneau large s'ancre sur .velora-catnav-inner (position:relative) */
.velora-cat-item--mega { position: static; }
.velora-cat-drop--mega {
  left: 1.25rem; right: 1.25rem; width: auto; max-width: 1180px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .3rem 1.4rem; padding: 1.35rem 1.5rem;
}
.velora-mega-col { display: flex; flex-direction: column; min-width: 0; }
.velora-mega-h {
  font-family: var(--font-serif); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--peps-700);
  padding: 0 .75rem .45rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--border);
}
.velora-cat-drop--mega .velora-mega-col > a { white-space: normal; line-height: 1.25; }
/* Tuile promo (dernière cellule de la grille) */
.velora-mega-feature {
  display: flex !important; flex-direction: column; justify-content: center; gap: .3rem;
  padding: 1.1rem 1.15rem !important; border-radius: var(--radius);
  background: linear-gradient(150deg, var(--peps-50), var(--gold-50));
  border: 1px solid var(--border); white-space: normal !important;
}
.velora-mega-feature:hover { background: linear-gradient(150deg, var(--peps-50), var(--gold-100)) !important; }
.velora-mega-feature-k { font-size: .72rem; font-weight: 700; color: var(--flash-600); text-transform: uppercase; letter-spacing: .04em; }
.velora-mega-feature-t { font-family: var(--font-serif); font-size: 1.02rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.velora-mega-feature-x { font-size: .82rem; color: var(--text-secondary); font-weight: 400; line-height: 1.35; }
.velora-mega-feature-cta { font-size: .82rem; font-weight: 700; color: var(--peps-700); margin-top: .1rem; }

/* Bouton hamburger — masqué sur desktop, affiché en mobile */
.velora-navtoggle {
  display: none; align-items: center; justify-content: center; flex-direction: column;
  gap: 4px; width: 40px; height: 40px; flex: none; padding: 0; margin-left: .1rem;
  background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.velora-navtoggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text-primary); transition: transform .2s var(--ease-out), opacity .15s; }
body.velora-nav-open .velora-navtoggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.velora-nav-open .velora-navtoggle span:nth-child(2) { opacity: 0; }
body.velora-nav-open .velora-navtoggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .velora-shophead-search { display: none; }
  .velora-shophead-main { height: 58px; gap: .8rem; }
  .velora-navtoggle { display: inline-flex; }

  /* La barre catégories devient un panneau vertical dépliable sous le header */
  .velora-catnav { display: none; }
  .velora-catnav.is-open {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 700;
    max-height: calc(100vh - 108px); overflow-y: auto;
    border-top: 1px solid var(--border); box-shadow: var(--shadow-card-hover);
  }
  .velora-catnav-inner { display: block; position: static; height: auto; padding: .25rem 0; overflow: visible; max-width: none; }

  .velora-catnav-inner > a,
  .velora-cat-item { display: block; width: 100%; position: static; border-bottom: 1px solid var(--border); }
  .velora-catnav-inner > a:last-child,
  .velora-cat-item:last-child { border-bottom: 0; }
  .velora-catnav-inner > a,
  .velora-cat-item > a { padding: .95rem 1.25rem; font-size: 1rem; white-space: normal; }
  .velora-cat-item > a { justify-content: space-between; }
  .velora-cat-caret { display: inline-block; font-size: .8rem; opacity: .5; transition: transform .2s var(--ease-out); }
  .velora-cat-item.is-open > a .velora-cat-caret { transform: rotate(180deg); opacity: .9; }

  /* Panneau d'accordéon : replié par défaut, déplié via .is-open (JS au tap) */
  .velora-cat-drop, .velora-cat-drop--mega {
    display: block; position: static; opacity: 1; visibility: visible; transform: none;
    left: auto; right: auto; top: auto; width: auto; max-width: none; min-width: 0;
    margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    background: var(--bg-subtle);
    max-height: 0; overflow: hidden; transition: max-height .3s var(--ease-out);
  }
  .velora-cat-item.is-open > .velora-cat-drop { max-height: 1600px; padding: .35rem 0 .8rem; }
  .velora-mega-col { display: block; min-width: 0; padding: 0; }
  .velora-mega-h { padding: .7rem 1.5rem .35rem; margin: 0; border: 0; }
  .velora-cat-drop a:not(.velora-mega-feature) { padding: .65rem 1.75rem !important; border-radius: 0; white-space: normal !important; }
  .velora-cat-drop--mega .velora-mega-col > a { white-space: normal; }
  .velora-mega-feature { margin: .5rem 1.25rem 0; border-radius: var(--radius); }
}

/* =========================================================================
   14. GABARIT GUIDE (.velora-guide) — porté du prototype guide-*.html
   ========================================================================= */
.velora-guide {
  --vg-accent: var(--peps-700, #53225E);
  --vg-accent-hover: var(--peps-800, #421B4B);
  --vg-gold: var(--gold-500, #C8A96A);
  --vg-surface: var(--bg-surface, #fff);
  --vg-subtle: var(--bg-subtle, #F7F2FA);
  --vg-border: var(--border, #E8E1EE);
  --vg-t1: var(--text-primary, #241f29);
  --vg-t2: var(--text-secondary, #5c5563);
  --vg-t3: var(--text-tertiary, #8b8492);
  --vg-radius: var(--radius, 12px);
  --vg-radius-lg: var(--radius-lg, 16px);
  --vg-serif: var(--font-serif, 'Fraunces', Georgia, serif);
  --vg-sans: var(--font-sans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  background: var(--bg-page, #fff);
}
.velora-guide .vg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem 3.5rem; }
.velora-guide .vg-wrap > * { box-sizing: border-box; }

/* Fil d'ariane + tete d'article */
.velora-guide .breadcrumb { font-size: .85rem; color: var(--vg-t3); padding: 1.4rem 0 0; }
.velora-guide .breadcrumb a { color: var(--vg-t2); text-decoration: none; }
.velora-guide .breadcrumb a:hover { color: var(--vg-accent); }
.velora-guide .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; font-weight: 600; color: var(--vg-accent); margin: 0 0 .4rem; }
/* Hero coloré pleine largeur */
.wp-block-group.velora-guide { padding: 0 !important; margin-top: 0 !important; }
.velora-guide .vg-hero { background: linear-gradient(135deg, var(--peps-600, #6D4376) 0%, var(--peps-900, #321438) 100%); color: #fff; }
.velora-guide .vg-hero-inner { max-width: 1120px; margin: 0 auto; padding: 2.2rem 1.25rem 2.6rem; }
.velora-guide .vg-hero .breadcrumb { color: rgba(255,255,255,.6); padding: 0 0 .7rem; }
.velora-guide .vg-hero .breadcrumb a { color: rgba(255,255,255,.85); }
.velora-guide .vg-hero .breadcrumb a:hover { color: #fff; }
.velora-guide .vg-hero .eyebrow { color: var(--vg-gold); }
.velora-guide .vg-hero h1 { margin: .3rem 0 .6rem; font-family: var(--vg-serif); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.12; color: #fff; }
.velora-guide .vg-hero .lede { font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 62ch; line-height: 1.6; margin: 0; }
.velora-guide .article-meta { display: flex; align-items: center; gap: .8rem; color: var(--vg-t3); font-size: .9rem; margin-top: 1.2rem; }
.velora-guide .vg-hero .article-meta { color: rgba(255,255,255,.8); }
.velora-guide .vg-hero .article-meta strong { color: #fff; }
.velora-guide .article-meta .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--peps-500, #87648E), var(--peps-900, #321438)); flex-shrink: 0; }
.velora-guide .vg-hero .article-meta .avatar { background: rgba(255,255,255,.25); }
.velora-guide .disclosure { background: var(--vg-subtle); border-radius: var(--vg-radius); padding: .7rem 1rem; font-size: .85rem; color: var(--vg-t2); margin: 1.6rem 0 0; }

/* Layout 2 colonnes + sommaire */
.velora-guide .layout { display: grid; grid-template-columns: 1fr 280px; gap: 2.5rem; align-items: start; padding: 1.8rem 0 0; }
.velora-guide .layout__main { min-width: 0; }
.velora-guide .layout__main h2 { font-family: var(--vg-serif); font-weight: 600; font-size: 1.6rem; margin: 2.2rem 0 .6rem; color: var(--vg-t1); }
.velora-guide .layout__main h3 { font-family: var(--vg-serif); font-weight: 600; font-size: 1.18rem; margin: 1.5rem 0 .35rem; color: var(--vg-t1); }
.velora-guide .layout__main h2 + p { margin-top: .2rem; }
.velora-guide .layout__main > p, .velora-guide .layout__main li { font-size: 1.0625rem; line-height: 1.65; color: var(--vg-t1); }
.velora-guide .toc { position: sticky; top: 100px; background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); padding: 1.2rem 1.3rem; }
.velora-guide .toc h4 { font-family: var(--vg-sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--vg-t3); margin: 0 0 .7rem; }
.velora-guide .toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; }
.velora-guide .toc li { counter-increment: toc; margin: .1rem 0; }
.velora-guide .toc a { display: block; color: var(--vg-t2); text-decoration: none; font-size: .92rem; padding: .35rem .4rem .35rem 1.6rem; border-radius: 8px; position: relative; }
.velora-guide .toc a::before { content: counter(toc); position: absolute; left: .5rem; color: var(--vg-t3); font-size: .8rem; }
.velora-guide .toc a:hover { background: var(--vg-subtle); color: var(--vg-accent); }
.velora-guide .toc .cta { margin-top: 1rem; }
.velora-guide .toc .cta .btn { width: 100%; text-align: center; }
@media (max-width: 980px) { .velora-guide .layout { grid-template-columns: 1fr; } .velora-guide .toc { position: static; order: -1; } }

/* Callout verdict */
.velora-guide .callout { background: var(--vg-subtle); border-left: 3px solid var(--vg-accent); border-radius: var(--vg-radius); padding: 1.1rem 1.3rem; margin: 1.4rem 0 1.8rem; }
.velora-guide .callout--gold { border-left-color: var(--vg-gold); }
.velora-guide .callout h3 { margin-top: 0; font-family: var(--vg-serif); font-weight: 600; }
.velora-guide .callout ul { margin-bottom: 0; }

/* Boutons */
.velora-guide .btn { display: inline-block; background: var(--vg-accent); color: #FBF9F6; border-radius: var(--vg-radius); padding: .8em 1.6em; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, transform .15s; }
.velora-guide .btn:hover { background: var(--vg-accent-hover); color: #FBF9F6; transform: translateY(-1px); }

/* Tableau comparatif */
.velora-guide .cmp-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); overflow: hidden; }
.velora-guide .cmp-table th, .velora-guide .cmp-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--vg-border); }
.velora-guide .cmp-table thead th { background: var(--vg-subtle); font-family: var(--vg-sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vg-t2); }
.velora-guide .cmp-table tbody tr:last-child td { border-bottom: none; }
.velora-guide .cmp-table .pick .cmp-prod span { color: var(--vg-accent); font-weight: 600; }
.velora-guide .cmp-table .cmp-prod { display: flex; align-items: center; gap: .7rem; }
.velora-guide .cmp-table .cmp-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: linear-gradient(135deg, var(--vg-subtle), var(--peps-50, #F6F4F7)); border: 1px solid var(--vg-border); }
@media (max-width: 620px) { .velora-guide .cmp-table .cmp-thumb { display: none; } }

/* Cartes produit */
.velora-guide .product { display: grid; grid-template-columns: 200px 1fr; gap: 1.4rem; background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); padding: 1.4rem; margin: 1.5rem 0; position: relative; }
.velora-guide .product__rank { position: absolute; top: -12px; left: 1.2rem; background: var(--vg-accent); color: #FBF9F6; font-weight: 700; font-family: var(--vg-serif); border-radius: 999px; padding: .15em .9em; font-size: .85rem; }
.velora-guide .product__media { aspect-ratio: 1; border-radius: var(--vg-radius); background: linear-gradient(135deg, var(--vg-subtle), var(--peps-50, #F6F4F7)); overflow: hidden; display: flex; }
.velora-guide .product__media img { width: 100%; height: 100%; object-fit: cover; }
.velora-guide .product__body h3 { margin: .2rem 0 .3rem; font-family: var(--vg-serif); font-weight: 600; font-size: 1.28rem; color: var(--vg-t1); }
.velora-guide .product__brand { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vg-t3); font-weight: 600; }
.velora-guide .product__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.velora-guide .product__tags span { font-size: .8rem; background: var(--vg-subtle); color: var(--vg-t2); border-radius: 999px; padding: .15em .7em; }
.velora-guide .product__body > p { color: var(--vg-t1); line-height: 1.6; }
.velora-guide .prosbox { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .8rem 0; }
.velora-guide .prosbox h4 { margin: 0; font-family: var(--vg-sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.velora-guide .prosbox ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.velora-guide .prosbox .pros h4 { color: #3a8a52; }
.velora-guide .prosbox .cons h4 { color: var(--peps-600, #6D4376); }
.velora-guide .prosbox .pros li::marker { color: #3a8a52; }
.velora-guide .prosbox .cons li::marker { color: var(--peps-600, #6D4376); }
.velora-guide .product__cta { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; flex-wrap: wrap; }
.velora-guide .aff-note { font-size: .82rem; color: var(--vg-t3); font-style: italic; }
@media (max-width: 620px) { .velora-guide .product { grid-template-columns: 1fr; } .velora-guide .prosbox { grid-template-columns: 1fr; } }

/* Pour aller plus loin */
.velora-guide .related { background: var(--vg-subtle); border-radius: var(--vg-radius-lg); padding: 1.3rem 1.5rem; margin: 2rem 0; }
.velora-guide .related .eyebrow { margin-bottom: .6rem; }
.velora-guide .related ul { margin: 0; padding-left: 1.1rem; }
.velora-guide .related li { margin: .3rem 0; }
.velora-guide .related a { font-weight: 600; text-decoration: none; color: var(--vg-accent); }
.velora-guide .related a:hover { text-decoration: underline; }

/* FAQ */
.velora-guide .faq { margin: 1.2rem 0; }
.velora-guide .faq details { border: 1px solid var(--vg-border); border-radius: var(--vg-radius); margin-bottom: .7rem; background: var(--vg-surface); }
.velora-guide .faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; font-family: var(--vg-serif); font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--vg-t1); }
.velora-guide .faq summary::-webkit-details-marker { display: none; }
.velora-guide .faq summary::after { content: "+"; color: var(--vg-accent); font-size: 1.4rem; transition: transform .2s ease; }
.velora-guide .faq details[open] summary::after { transform: rotate(45deg); }
.velora-guide .faq details > div { padding: 0 1.2rem 1.1rem; color: var(--vg-t2); }

/* Bloc redaction */
.velora-guide .author { display: flex; gap: 1rem; align-items: center; background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); padding: 1.2rem 1.4rem; margin: 2.5rem 0 0; }
.velora-guide .author .avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--peps-500, #87648E), var(--peps-900, #321438)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--vg-serif); font-size: 1.4rem; }
.velora-guide .author h4 { margin: 0 0 .2rem; font-family: var(--vg-serif); font-weight: 600; }
.velora-guide .author p { margin: 0; font-size: .92rem; color: var(--vg-t2); }

/* Masque le titre Astra en double sur les pages guide */
.velora-guide-page .entry-header { display: none; }
.velora-guide-page .ast-container, .velora-guide-page .site-content .ast-container { padding-top: 0; }

/* Notes editoriales (etoiles) */
.velora-guide .stars { --val: 0; display: inline-block; position: relative; font-size: 1rem; line-height: 1; color: var(--vg-border); }
.velora-guide .stars::before { content: "★★★★★"; letter-spacing: 2px; }
.velora-guide .stars__fill { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; width: calc(var(--val) / 5 * 100%); color: var(--vg-gold); }
.velora-guide .stars__fill::before { content: "★★★★★"; letter-spacing: 2px; }
.velora-guide .rating { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--vg-t1); font-size: .95rem; }
.velora-guide .rating small { color: var(--vg-t3); font-weight: 400; }
.velora-guide .product__body .rating { margin: .1rem 0 .2rem; }
.velora-guide .cmp-table .note { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }

/* =========================================================================
   15. GABARIT ARTICLE PREMIUM (.velora-article)
   ========================================================================= */
.velora-article-page .entry-header,
.velora-article-page .ast-single-post .ast-post-format-,
.velora-article-page .entry-meta { display: none !important; }
.velora-article-page .ast-container { max-width: none; padding: 0; }
.velora-article-page .entry-content { margin-top: 0; }
.velora-article { padding: 0 !important; margin: 0 !important; }
.velora-article { --va-accent: var(--peps-700, #53225E); }

/* ---- Breakout TOTAL du conteneur "boxed" d'Astra (ast-separate-container) :
   notre template article prend la main sur toute la largeur, sans carte blanche
   ni marges Astra. Nos propres conteneurs (.velora-art-hero-inner, .velora-art-body)
   recentrent le contenu. Canvas blanc, le hero fournit sa bande dégradée. ---- */
.velora-article-page #content.site-content { background: var(--bg-page, #fff); }
.velora-article-page.ast-separate-container .site-content > .ast-container,
.velora-article-page .ast-container { max-width: 100% !important; padding: 0 !important; }
.velora-article-page #primary,
.velora-article-page .site-main,
.velora-article-page .content-area { margin: 0 !important; padding: 0 !important; max-width: none !important; }
.velora-article-page .ast-article-single {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.velora-article-page .entry-content,
.velora-article-page .entry-content.clear { margin: 0 !important; padding: 0 !important; }

/* Hero clair avec halo violet */
.velora-art-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--peps-50, #F6F4F7) 0%, var(--bg-page, #fff) 92%); border-bottom: 1px solid var(--border, #E8E1EE); }
.velora-art-hero::before { content: ""; position: absolute; top: -140px; right: -100px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(135, 100, 142, .20), transparent 68%); pointer-events: none; }
.velora-art-hero-inner { max-width: 1120px; margin: 0 auto; padding: 2rem 1.25rem 2.4rem; position: relative; }
.velora-art-hero .velora-breadcrumb { font-size: .85rem; color: var(--text-tertiary, #8b8492); padding: 0 0 1.1rem; margin: 0; }
.velora-art-hero .velora-breadcrumb a { color: var(--text-secondary, #5c5563); text-decoration: none; }
.velora-art-hero .velora-breadcrumb a:hover { color: var(--peps-700, #53225E); }

.velora-art-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.velora-chip { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .35em .85em; border-radius: 999px; line-height: 1.4; }
.velora-chip--cat { background: var(--peps-100, #E9E2EA); color: var(--peps-800, #421B4B); }
.velora-chip--read { background: #E9F1FF; color: #2c5aa0; }
.velora-chip--date { background: var(--bg-subtle, #f2eef5); color: var(--text-secondary, #5c5563); }

.velora-art-title { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; color: var(--text-primary, #241f29); margin: .1rem 0 .8rem; max-width: 20ch; }
.velora-art-lede { font-size: 1.2rem; line-height: 1.6; color: var(--text-secondary, #5c5563); max-width: 62ch; margin: 0; }
.velora-art-byline { display: flex; align-items: center; gap: .8rem; margin-top: 1.7rem; padding-top: 1.4rem; border-top: 1px solid var(--border, #E8E1EE); }
.velora-art-byline .velora-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--peps-500, #87648E), var(--peps-900, #321438)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif, serif); font-weight: 600; font-size: 1.15rem; flex-shrink: 0; }
.velora-art-byline-txt { display: flex; flex-direction: column; line-height: 1.35; }
.velora-art-byline-txt strong { color: var(--text-primary, #241f29); }
.velora-art-byline-txt span { font-size: .85rem; color: var(--text-tertiary, #8b8492); }

/* Corps */
.velora-art-body { max-width: 1120px; margin: 0 auto; padding: 2.2rem 1.25rem 3.5rem; }
.velora-art-body .velora-ed-side { flex: 0 0 260px; }

/* Cartes "Au programme" */
.velora-art-cards { margin: 0 0 2rem; }
.velora-art-cards .velora-eyebrow { display: block; margin-bottom: .7rem; color: var(--peps-700, #53225E); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.velora-art-cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.velora-art-card { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; background: var(--bg-surface, #fff); border: 1px solid var(--border, #E8E1EE); border-radius: 12px; text-decoration: none; color: var(--text-primary, #241f29); font-weight: 600; font-size: .93rem; line-height: 1.25; transition: border-color .15s, transform .15s, box-shadow .15s; }
.velora-art-card:hover { border-color: var(--peps-400, #A085A6); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(83, 34, 94, .10); }
.velora-art-card-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--peps-50, #F6F4F7); color: var(--peps-700, #53225E); display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; }

/* Banniere CTA */
.velora-art-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; background: linear-gradient(135deg, var(--peps-600, #6D4376), var(--peps-900, #321438)); color: #fff; border-radius: 16px; padding: 1.6rem 1.9rem; margin: 2.6rem 0; }
.velora-art-cta h3 { margin: 0 0 .3rem; font-family: var(--font-serif, serif); font-weight: 600; color: #fff; font-size: 1.3rem; }
.velora-art-cta p { margin: 0; color: rgba(255, 255, 255, .85); }
.velora-art-cta .velora-btn { background: #fff; color: var(--peps-800, #421B4B); border-radius: 10px; padding: .8em 1.6em; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .15s; }
.velora-art-cta .velora-btn:hover { transform: translateY(-1px); }

/* CTA laterale */
.velora-side-cta { margin-top: 1.3rem; background: var(--peps-50, #F6F4F7); border: 1px solid var(--peps-100, #E9E2EA); border-radius: 14px; padding: 1.2rem 1.3rem; }
.velora-side-cta .velora-eyebrow { color: var(--peps-700, #53225E); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.velora-side-cta p { font-size: .9rem; color: var(--text-secondary, #5c5563); margin: .35rem 0 .9rem; line-height: 1.5; }
.velora-side-cta .velora-btn { display: block; text-align: center; background: var(--peps-700, #53225E); color: #fff; border-radius: 10px; padding: .65em 1em; font-weight: 600; text-decoration: none; transition: background .15s; }
.velora-side-cta .velora-btn:hover { background: var(--peps-800, #421B4B); }

@media (max-width: 900px) {
  .velora-art-title { font-size: clamp(1.75rem, 7vw, 2.3rem); }
  .velora-art-lede { font-size: 1.08rem; }
  .velora-art-cta { padding: 1.4rem; }
}

/* =========================================================================
   16. TEMPLATE COMPARATIF (duel A vs B) + AVIS DE MARQUE (verdict) —
   portes de l'atlas maquettes-templates.html (tpl-comparatif, tpl-avis).
   Ces composants sont utilisables partout (pas scopes sous .velora-guide),
   pour batir une page comparatif ou avis en blocs Gutenberg.
   ========================================================================= */

/* ---- Notation reutilisable (etoiles + note) — meme technique de remplissage
   fractionnaire que .velora-guide .stars, mais disponible globalement.
   Usage : <span class="velora-stars" style="--val:4.5"><i></i></span> ---- */
.velora-stars {
  --val: 0;
  display: inline-block; position: relative;
  font-size: 1rem; line-height: 1;
  color: var(--peps-100);
}
.velora-stars::before { content: "\2605\2605\2605\2605\2605"; letter-spacing: 2px; }
.velora-stars > i {
  position: absolute; inset: 0; overflow: hidden; white-space: nowrap;
  width: calc(var(--val) / 5 * 100%); color: var(--gold-600);
}
.velora-stars > i::before { content: "\2605\2605\2605\2605\2605"; letter-spacing: 2px; }
.velora-rating { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--text-primary); font-size: 0.95rem; }
.velora-rating small { color: var(--text-tertiary); font-weight: 400; }

/* ---- Monogramme de marque (initiale dans une pastille) ---- */
.velora-monogram {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full);
  background: var(--bg-subtle); color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem;
  flex-shrink: 0;
}
.velora-monogram--lg { width: 4rem; height: 4rem; font-size: 1.6rem; }
.velora-monogram--peps { background: var(--peps-700); color: #fff; }

/* ---- AVIS DE MARQUE : en-tete verdict (monogramme + nom + note globale) ---- */
.velora-verdict {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem 1.75rem;
  margin: 1.75rem 0 2.25rem;
}
.velora-verdict-id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.velora-verdict-name { margin: 0; font-size: var(--text-2xl); line-height: 1.1; }
.velora-verdict-name small { display: block; font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: 0.15rem; }
.velora-verdict-score { margin-left: auto; text-align: center; flex-shrink: 0; }
.velora-verdict-score .num { font-family: var(--font-serif); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--peps-700); }
.velora-verdict-score .num span { font-size: 1.1rem; color: var(--text-tertiary); }
.velora-verdict-score .velora-stars { margin-top: 0.35rem; font-size: 0.95rem; }
@media (max-width: 560px) {
  .velora-verdict { padding: 1.25rem; }
  .velora-verdict-score { margin-left: 0; text-align: left; }
}

/* Bandeau de confiance (badges honnetes : testé, indépendant, mis à jour...) */
.velora-trust-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0; }
.velora-trust-badges span {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 0.4em 1em; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary);
}
.velora-trust-badges .ic { font-size: 1em; line-height: 1; }

/* ---- COMPARATIF : duel visuel A vs B (deux cartes + pastille VS au centre) ---- */
.velora-compare {
  display: flex; align-items: stretch; gap: 0; margin: 2rem 0 2.5rem;
}
.velora-compare-col {
  flex: 1 1 0; min-width: 0;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.75rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.velora-compare-col:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.velora-compare-col:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; }
.velora-compare-col--winner { border-color: var(--peps-400); box-shadow: var(--shadow-card); }
.velora-compare-col h3 { margin: 0.15rem 0 0.25rem; }
.velora-compare-col .velora-brand { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); font-weight: 700; }
.velora-compare .velora-vs { align-self: center; margin: 0 -1.5rem; }
@media (max-width: 640px) {
  .velora-compare { flex-direction: column; }
  .velora-compare-col { border-radius: var(--radius-lg) !important; border-left: 1px solid var(--border) !important; }
  .velora-compare .velora-vs { margin: -1.5rem auto; }
}

/* =========================================================================
   17. HOME — hero pleine largeur + alternance blanc/violet (demande 2026-07-16)
   ========================================================================= */

/* ---- Hero full-bleed : le dégradé occupe toute la largeur de l'écran, le
   contenu reste aligné sur la colonne de lecture (1200px) via un padding
   latéral fluide. On neutralise le .vh-container qui bridait le hero. ---- */
.velora-home .vh-hero { padding: 0; }
.velora-home .vh-hero > .vh-container { max-width: none; padding: 0; }
.velora-home .vh-hero-banner {
  border-radius: 0;
  min-height: 440px;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  padding-left: max(1.25rem, calc((100% - 1200px) / 2 + 1.25rem));
  padding-right: max(1.25rem, calc((100% - 1200px) / 2 + 1.25rem));
}
.velora-home .vh-hero-banner h1 { max-width: 20ch; }
.velora-home .vh-hero-banner p { max-width: 46ch; }

/* ---- Alternance blanc ↔ violet : les sections "subtle" (gris) deviennent un
   violet clair, et la bande des piliers (.vh-mission) passe en violet profond.
   Ciblage via :has() → aucune modification du contenu de la page. ---- */
.velora-home .vh-section--subtle { background: var(--peps-100); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .velora-home .vh-section--subtle { background: var(--bg-subtle); }
}
:root[data-theme="dark"] .velora-home .vh-section--subtle { background: var(--bg-subtle); }

/* Bande d'accent violet profond = section qui contient les piliers/mission */
.velora-home .vh-section:has(.vh-mission) {
  background: linear-gradient(135deg, var(--peps-800) 0%, var(--peps-600) 100%);
}
.velora-home .vh-section:has(.vh-mission) h2,
.velora-home .vh-section:has(.vh-mission) .vh-sechead a,
.velora-home .vh-section:has(.vh-mission) .vh-mission-item h4 { color: #fff !important; }
.velora-home .vh-section:has(.vh-mission) .vh-mission-item p { color: rgba(255, 255, 255, 0.82); }

/* =========================================================================
   18. TOPBAR annonce (au-dessus du header) + barre de lecture + sommaire
   scroll-spy + sélecteur de langue (demande 2026-07-16)
   ========================================================================= */

/* ---- Barre "annonce" tout en haut, AVANT le logo (rendue par velora_shop_header) ---- */
.velora-topbar {
  background: linear-gradient(90deg, var(--peps-900), var(--peps-700));
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  line-height: 1.4;
}
.velora-topbar strong { color: var(--gold-300); font-weight: 700; }
/* L'ancienne promobar dans le contenu de la home fait doublon : masquée. */
.velora-home .vh-promobar { display: none !important; }
/* Supprime le blanc (marge block-gap WP) entre le menu et le hero. */
.velora-home .vh-hero { margin-top: 0 !important; }

/* ---- Barre de progression de lecture, tout en haut du viewport ---- */
.velora-readbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--flash-500), var(--peps-500));
  z-index: 1000;
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ---- Sommaire (guide + article) : toujours lisible (fond opaque + relief),
   même quand le fond derrière est violet, + état actif au défilement ---- */
.velora-guide .toc,
.velora-toc {
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
}
.velora-guide .toc a.is-active {
  background: var(--peps-50);
  color: var(--vg-accent);
  font-weight: 600;
}
.velora-guide .toc a.is-active::before { color: var(--vg-accent); }
/* Bouton CTA du sommaire : le sélecteur .toc a écrasait le blanc du .btn (texte
   gris illisible sur fond violet) et injectait le numéro de counter. On rétablit. */
.velora-guide .toc .cta .btn { color: #FBF9F6; padding-left: 0.8em; text-align: center; }
.velora-guide .toc .cta .btn::before { content: none; }
.velora-guide .toc .cta .btn:hover { color: #FBF9F6; background: var(--vg-accent-hover); }

/* ---- Image à la une intégrée au héros d'article (colonne droite du hero) ---- */
.velora-art-hero-row--media {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.5rem;
  align-items: center;
}
.velora-art-hero-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-card);
  background: var(--bg-subtle);
}
.velora-art-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .velora-art-hero-row--media { grid-template-columns: 1fr; gap: 1.5rem; }
  .velora-art-hero-media { aspect-ratio: 16 / 9; }
}

/* ---- Hero de guide illustré : image à la une en fond + calque violet (lisibilité du texte blanc) ---- */
.velora-guide .vg-hero--img {
  background-image:
    linear-gradient(135deg, rgba(50, 20, 56, 0.90) 0%, rgba(83, 34, 94, 0.78) 100%),
    var(--vg-hero-img);
  background-size: cover;
  background-position: center;
}

/* =========================================================================
   19. GABARIT ARTICLE — layout 3 colonnes (sommaire | contenu | CTA) + cartes
   d'intro pleine largeur + bandeau KPI + encadrés colorés (forme "guide décision",
   d'après la ref comparatif-facture-electronique.fr). Les blocs pilotés par le
   contenu (KPI, descriptions de cartes) ne s'affichent que si le contenu les fournit.
   ========================================================================= */

/* Conteneurs alignés, un peu plus larges pour loger 3 colonnes */
.velora-art-hero-inner,
.velora-art-body { max-width: 1280px; }

/* Cartes d'intro "Au programme" en pleine largeur, juste sous le hero */
.velora-art-cards-wrap { max-width: 1280px; margin: 2rem auto 0; padding: 0 1.25rem; }
.velora-art-cards-wrap .velora-art-cards { margin: 0; }
.velora-art-cards-wrap .velora-art-cards-row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .velora-art-cards-wrap .velora-art-cards-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .velora-art-cards-wrap .velora-art-cards-row { grid-template-columns: 1fr; } }

/* Grille 3 colonnes : sommaire 240 | contenu | CTA 280 */
.velora-art-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 280px;
  gap: 2.75rem;
  align-items: start;
}
.velora-art-grid--notoc { grid-template-columns: minmax(0, 1fr) 280px; }
.velora-art-side--toc,
.velora-art-side--cta { position: sticky; top: 96px; align-self: start; }
.velora-art-side--toc .velora-toc { margin: 0; }
.velora-art-side--cta .velora-side-cta { margin-top: 0; }

/* Sous 1100px : on empile (sommaire en haut, CTA sous le contenu), sans sticky */
@media (max-width: 1100px) {
  .velora-art-grid,
  .velora-art-grid--notoc { grid-template-columns: 1fr; gap: 1.75rem; }
  .velora-art-side--toc,
  .velora-art-side--cta { position: static; }
  .velora-art-side--toc { order: -1; max-width: 42rem; }
}

/* ---- Bandeau KPI / chiffres-clés (affiché si le contenu fournit .velora-art-stats) ---- */
.velora-art-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  max-width: 1280px; margin: 1.5rem auto 0; padding: 0 1.25rem;
}
@media (max-width: 780px) { .velora-art-stats { grid-template-columns: 1fr 1fr; } }
.velora-art-stat {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0;
}
.velora-art-stat .num { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 1.6rem; color: var(--peps-700); line-height: 1.1; }
.velora-art-stat .lbl { display: block; margin-top: 0.25rem; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.35; }

/* ---- Encadrés colorés (variantes de .velora-callout, si le contenu les utilise) ---- */
.velora-callout--warn { background: var(--gold-50); border-left-color: var(--gold-600); }
.velora-callout--tip  { background: #EAF2FF; border-left-color: #2C5AA0; }
.velora-callout--ok   { background: var(--success-100); border-left-color: var(--success-500); }
.velora-toc a.is-active {
  background: var(--peps-50);
  color: var(--accent);
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .velora-guide .toc a.is-active,
  :root:not([data-theme="light"]) .velora-toc a.is-active { background: var(--peps-900); color: #fff; }
}
:root[data-theme="dark"] .velora-guide .toc a.is-active,
:root[data-theme="dark"] .velora-toc a.is-active { background: var(--peps-900); color: #fff; }

/* ---- Sélecteur de langue : pilule accentuée (globe + code langue) ---- */
.velora-lang-switcher .velora-lang {
  background: var(--peps-50) !important;
  border-color: var(--peps-200) !important;
  color: var(--peps-800) !important;
  gap: 0.35rem;
  box-shadow: 0 1px 2px rgba(28, 20, 24, 0.05);
}
.velora-lang-switcher .velora-lang:hover {
  background: var(--peps-100) !important;
  border-color: var(--peps-400) !important;
  color: var(--peps-900) !important;
}
.velora-lang-switcher .velora-lang-globe { font-size: 1.05em; opacity: 0.9; }
:root[data-theme="dark"] .velora-lang-switcher .velora-lang {
  background: var(--peps-900) !important;
  border-color: var(--peps-700) !important;
  color: var(--peps-50) !important;
}

/* =========================================================================
   20. GABARIT ARTICLE v2 — forme éditoriale d'après la ref
   comparatif-facture-electronique.fr (infirmier-kine…) : hero UNE colonne
   centrée sans image (l'image à la une passe en illustration dans le corps),
   ligne auteur avec bouton Partager, mesure de lecture resserrée (~720px),
   sommaire sticky à gauche + encadré CTA sticky à droite conservés,
   bloc « À lire ensuite » en cartes. Palette Liora inchangée.
   ========================================================================= */

/* Hero étroit et centré, une seule colonne */
.velora-art-hero-inner { max-width: 1140px; }
.velora-art-hero-text  { max-width: 780px; }
.velora-art-hero-row--media { grid-template-columns: 1fr; } /* neutralisé (plus d'image hero) */

/* Bandeau KPI aligné sous le texte du hero ; cartes d'intro + corps plus larges */
.velora-art-stats      { max-width: 1140px; }
.velora-art-cards-wrap { max-width: 1360px; }
.velora-art-body       { max-width: 1360px; }
.velora-art-grid       { grid-template-columns: 240px minmax(0, 1fr) 288px; }

/* Mesure de lecture confortable (~720px comme la ref) + ancrage sous header sticky */
.velora-ed-main { max-width: 760px; }
.velora-ed-main h2, .velora-ed-main h3 { scroll-margin-top: 92px; }
@media (max-width: 1100px) { .velora-ed-main { max-width: none; } }

/* Bouton Partager dans la ligne auteur */
.velora-art-byline { flex-wrap: wrap; }
.velora-art-share {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--peps-50, #F6F4F7); color: var(--peps-800, #421B4B);
  border: 1px solid var(--peps-200, #D9CCDD); border-radius: 999px;
  padding: 0.5em 1.05em; font: inherit; font-size: 0.85rem; font-weight: 600;
  line-height: 1; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.velora-art-share:hover  { background: var(--peps-100, #E9E2EA); border-color: var(--peps-400, #A085A6); }
.velora-art-share:active { transform: translateY(1px); }
.velora-art-share svg    { width: 15px; height: 15px; }
.velora-art-share.is-copied { color: #157a45; border-color: var(--success-500, #16A34A); background: var(--success-100, #ECFDF5); }
.velora-art-share.is-copied .velora-art-share-lbl::after { content: " \2713"; }

/* Image à la une déplacée en illustration "lead" dans le corps */
.velora-art-figure { margin: 0 0 1.9rem; border-radius: var(--radius-lg, 16px); overflow: hidden; box-shadow: var(--shadow-card); }
.velora-art-figure img { display: block; width: 100%; height: auto; }
.velora-art-figure figcaption { font-size: 0.82rem; color: var(--text-tertiary, #8b8492); padding: 0.5rem 0.2rem 0; }

/* « À lire ensuite » en 3 cartes (forme .cfe-next de la ref) */
.velora-next { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--border, #E8E1EE); }
.velora-next > .velora-eyebrow { display: block; margin-bottom: 1rem; color: var(--peps-700, #53225E); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.velora-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.velora-next-c { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.1rem 1.15rem; background: var(--bg-surface, #fff); border: 1px solid var(--border, #E8E1EE); border-radius: 14px; text-decoration: none; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.velora-next-c:hover { border-color: var(--peps-400, #A085A6); transform: translateY(-3px); box-shadow: 0 8px 22px rgba(83, 34, 94, 0.10); }
.velora-next-tag { align-self: flex-start; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--peps-800, #421B4B); background: var(--peps-100, #E9E2EA); border-radius: 999px; padding: 0.3em 0.8em; }
.velora-next-c h3 { margin: 0; font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-weight: 600; font-size: 1.02rem; line-height: 1.25; color: var(--text-primary, #241f29); }
@media (max-width: 860px) { .velora-next-grid { grid-template-columns: 1fr; } }