/* ============================================================
   MyWebo Design System — Colors & Typography
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

/* ============================================================
   COLOR TOKENS — Base Palette
   ============================================================ */
:root {
  /* Primary — Orange (inchangé) */
  --color-orange:         #E66637;
  --color-orange-light:   #F08560;
  --color-orange-dark:    #B84A22;

  /* Secondary — Palette violet/lavande */
  --color-violet:       #742E8E;   /* violet principal */
  --color-violet-light: #9B45AE;   /* violet clair (hover, accents) */
  --color-violet-dark:  #5B2070;   /* violet foncé (pressed) */
  --color-violet-muted: #C4B5FD;   /* lavande douce (fonds subtils) */

  /* Neutrals — Fonds sombres remplacés par le violet profond */
  --color-nuit:         #1E0848;   /* fond le plus sombre */
  --color-encre:        #2D1060;   /* cartes, titres sombres, dossiers */
  --color-ecru:         #F5F2EC;   /* blanc chaud (inchangé) */
  --color-gris:         #E8E4DE;   /* bordures (inchangé) */
  --color-brume:        #9B85B5;   /* texte secondaire (ajusté au violet) */
  --color-blanc:        #FFFFFF;   /* blanc pur (inchangé) */

  /* Backgrounds */
  --bg-primary:         var(--color-ecru);
  --bg-dark:            var(--color-nuit);
  --bg-card:            var(--color-blanc);
  --bg-card-alt:        var(--color-ecru);
  --bg-accent:          var(--color-violet);
  --bg-highlight:       var(--color-orange);

  /* Text */
  --text-primary:       var(--color-encre);
  --text-secondary:     var(--color-brume);
  --text-on-dark:       var(--color-ecru);
  --text-on-orange:       var(--color-encre);
  --text-on-violet:     var(--color-blanc);
  --text-link:          var(--color-violet);
  --text-link-hover:    var(--color-violet-light);

  /* Borders */
  --border-default:     var(--color-gris);
  --border-focus:       var(--color-violet);
  --border-strong:      var(--color-encre);

  /* Interactive */
  --interactive-primary:       var(--color-orange);
  --interactive-primary-hover: var(--color-orange-light);
  --interactive-primary-press: var(--color-orange-dark);
  --interactive-secondary:     var(--color-violet);
  --interactive-secondary-hover: var(--color-violet-light);

  /* Status */
  --status-success:     #5CB85C;
  --status-warning:     #F0A500;
  --status-error:       #D93B2F;
  --status-info:        var(--color-violet-light);

  /* Font families */
  --font-display:  'Instrument Serif', serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* Font weights */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* Type scale */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   88px;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-relaxed:1.75;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

  /* Semantic type roles */
  --h1-font:    var(--font-display);
  --h1-size:    var(--text-4xl);
  --h1-weight:  var(--font-weight-regular);
  --h1-leading: var(--leading-tight);
  --h1-tracking:var(--tracking-tight);

  --h2-font:    var(--font-display);
  --h2-size:    var(--text-3xl);
  --h2-weight:  var(--font-weight-regular);
  --h2-leading: var(--leading-snug);

  --h3-font:    var(--font-display);
  --h3-size:    var(--text-2xl);
  --h3-weight:  var(--font-weight-regular);
  --h3-leading: var(--leading-snug);

  /* Body */
  --body-font:    var(--font-body);
  --body-size:    var(--text-base);
  --body-weight:  var(--font-weight-light);
  --body-leading: var(--leading-relaxed);

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px  rgba(15, 10, 30, 0.06);
  --shadow-md:  0 4px 24px rgba(15, 10, 30, 0.10);
  --shadow-lg:  0 8px 48px rgba(15, 10, 30, 0.14);
  --shadow-xl:  0 16px 64px rgba(15, 10, 30, 0.18);
  --shadow-orange: 0 4px 32px rgba(230,102,55, 0.30);
  --shadow-violet: 0 4px 32px rgba(107, 47, 217, 0.25);

  /* Transitions */
  --transition-fast:   150ms ease-in-out;
  --transition-base:   250ms ease-in-out;
  --transition-slow:   400ms ease-in-out;

  /* Layout */
  --container-max: 1280px;
  --container-pad: var(--space-6);

  /* Aurora tokens — couleurs directes de la marque active (MyWebo par défaut) */
  --aurora-a: #E66637;
  --aurora-b: #742E8E;
  --aurora-c: #F08560;
  --aurora-d: #9B45AE;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--h1-font);
  font-size: clamp(42px, 5.2vw, 72px);
  font-weight: var(--h1-weight);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
}

h2 {
  font-family: var(--h2-font);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: var(--h2-weight);
  line-height: var(--h2-leading);
}

h3 {
  font-family: var(--h3-font);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
}

p {
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--text-link-hover); }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Hero action buttons — used via slot in Hero.astro */
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* ── Boutons CTA — effet relief 3D (gauche-bas) ── */
.btn-primary,
.btn-cta-page {
  background: var(--color-orange);
  color: #fff !important;
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
  /* Ombre gauche-bas = effet relief */
  box-shadow: -4px 4px 0 var(--color-orange-dark);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.btn-primary:hover,
.btn-cta-page:hover {
  background: var(--color-orange);
  color: #fff !important;
  /* On se rapproche de l'ombre = bouton qui s'enfonce légèrement */
  transform: translate(-2px, 2px);
  box-shadow: -2px 2px 0 var(--color-orange-dark);
}

.btn-primary:active,
.btn-cta-page:active {
  /* Complètement enfoncé = pas d'ombre */
  transform: translate(-4px, 4px);
  box-shadow: none;
}

.btn-ghost {
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  color: var(--color-encre);
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: all 200ms;
  background: transparent;
  cursor: pointer;
}

.btn-ghost:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
  background: rgba(230, 102, 55, 0.05);
}

/* ─── Post-its board — style orange/violet adaptatif ── */
.postits-board {
  position: relative;
  min-height: 500px;
  margin-top: 32px;
  padding: 24px;
  background:
    radial-gradient(ellipse at 15% 50%,
      color-mix(in srgb, var(--color-orange) 14%, var(--color-ecru)) 0%,
      transparent 55%),
    radial-gradient(ellipse at 85% 50%,
      color-mix(in srgb, var(--color-violet) 12%, var(--color-ecru)) 0%,
      transparent 55%),
    var(--color-ecru);
  border-radius: 16px;
  border: 2px dashed var(--color-orange);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-violet) 30%, transparent),
    0 4px 24px rgba(0,0,0,0.06);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; /* contient les post-its */
}

/* Couleurs post-its via CSS color-mix — réactives au changement de thème */
.postit[data-ci="0"] { background: color-mix(in srgb, var(--color-orange)        28%, var(--color-ecru)); }
.postit[data-ci="1"] { background: color-mix(in srgb, var(--color-violet)        22%, var(--color-ecru)); }
.postit[data-ci="2"] { background: color-mix(in srgb, var(--color-violet-muted)  45%, var(--color-ecru)); }
.postit[data-ci="3"] { background: color-mix(in srgb, var(--color-orange-light)  32%, var(--color-ecru)); }
.postit[data-ci="4"] { background: color-mix(in srgb, var(--color-violet)        16%, var(--color-ecru)); }
.postit[data-ci="5"] { background: color-mix(in srgb, var(--color-orange)        22%, var(--color-ecru)); }
.postit[data-ci="6"] { background: color-mix(in srgb, var(--color-violet-muted)  35%, var(--color-ecru)); }
.postit[data-ci="7"] { background: color-mix(in srgb, var(--color-orange-light)  26%, var(--color-ecru)); }

.postit {
  position: absolute !important;
  width: 185px;
  min-height: 140px;
  padding: 36px 16px 18px;
  border-radius: 2px;
  cursor: grab;
  user-select: none;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
  z-index: 1;
}
.postit:active { cursor: grabbing; }
.postit p { font-size: 13.5px; line-height: 1.55; color: rgba(0,0,0,0.72); margin: 0; font-weight: 500; }

.postit-pin {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px;
  background: radial-gradient(circle at 38% 35%, #ff8a8a, #cc2222);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,200,200,0.5);
  z-index: 2;
}
.postit-pin::after {
  content: '';
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 9px;
  background: linear-gradient(to bottom, #bbb, #888);
  border-radius: 0 0 2px 2px;
}

/* ─── Stats pleine largeur ───────────────────────── */
.section.stats .section-inner,
.section.stats > .section-inner {
  max-width: 100%;
  padding-left: var(--space-12);
  padding-right: var(--space-12);
}

/* ─── Global FAQ dark design ────────────────────────
   Cible : sections avec id="faq", class faq, faq-section, section-dark contenant .faq-list
   ─────────────────────────────────────────────────── */

/* Fond sombre sur toutes les sections FAQ */
section[id="faq"],
section.faq,
section.faq-section,
section.section-dark:has(.faq-list) {
  background: var(--color-nuit) !important;
}

/* Titres, sous-titres et tags en clair — !important pour surcharger les styles locaux */
section[id="faq"] h2,
section.faq h2,
section.faq-section h2,
section.section-dark:has(.faq-list) h2 {
  color: var(--color-ecru) !important;
}
section[id="faq"] h2 em,
section.faq h2 em,
section.section-dark:has(.faq-list) h2 em { color: var(--color-orange) !important; font-style: italic; }

section[id="faq"] p,
section.faq p,
section.faq-section p,
section.section-dark:has(.faq-list) > .section-inner > p {
  color: rgba(245, 242, 236, 0.65) !important;
}

section[id="faq"] .section-tag,
section.faq .section-tag,
section.faq-section .section-tag {
  color: var(--color-orange) !important;
}

/* Cards FAQ */
details.faq-item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  overflow: hidden;
  margin: 0;
}
details.faq-item[open] {
  background: rgba(255,255,255,0.07) !important;
}

/* Summary (question) */
details.faq-item summary,
details.faq-item .faq-q,
details.faq-item .faq-new-q {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  cursor: pointer !important;
  list-style: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-ecru) !important;
  transition: color 200ms !important;
  background: none !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
}
details.faq-item summary::-webkit-details-marker { display: none !important; }
details.faq-item summary::marker { display: none !important; }

/* Chevron via ::after sur les summary sans faq-q */
details.faq-item summary:not(.faq-q):not(.faq-new-q)::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  flex-shrink: 0;
  color: var(--color-orange);
  transition: transform 250ms ease;
  display: inline-block;
}
details.faq-item[open] summary:not(.faq-q):not(.faq-new-q)::after {
  transform: rotate(45deg);
}

/* Chevron explicite (faq-chevron span) */
.faq-chevron {
  font-size: 22px !important;
  font-weight: 300 !important;
  flex-shrink: 0 !important;
  color: var(--color-orange) !important;
  transition: transform 250ms ease !important;
  display: inline-block !important;
}
details.faq-item[open] .faq-chevron { transform: rotate(45deg) !important; }
details.faq-item[open] .faq-arrow   { transform: rotate(45deg) !important; }

/* Réponse (answer) */
details.faq-item .faq-a,
details.faq-item > p,
details.faq-item .faq-new-a {
  padding: 0 24px 20px !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: rgba(245,242,236,0.65) !important;
}

/* ─── Global FAQ style (dark) ───────────────────────
   Applicable aux sections .section-dark avec .faq-list
   Les styles scopés des pages prennent la priorité si besoin.
   ─────────────────────────────────────────────────── */
details.faq-item {
  border-radius: 12px;
  overflow: hidden;
}
details.faq-item .faq-q,
details.faq-item > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  transition: color 200ms;
}
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::marker { display: none; }
details.faq-item .faq-chevron {
  font-size: 22px;
  font-weight: 300;
  flex-shrink: 0;
  color: var(--color-orange);
  transition: transform 250ms ease;
  display: inline-block;
}
details.faq-item[open] .faq-chevron { transform: rotate(45deg); }

div.article-body-content > a > svg , div.article-body-content > svg {
   width:20px;
   display: inline-block;
}

/* ══════════════════════════════════════════════════════════════
   TIMELINE-STYLE PHOTO CARDS (global — "Quatre étapes" style)
   Usage: wrap cards in .tl-grid, each card is .tl-card
   ══════════════════════════════════════════════════════════════ */

.tl-grid {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: nowrap;
}

.tl-card {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 300px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: var(--tl-bg, linear-gradient(145deg, var(--color-nuit) 0%, var(--color-encre) 100%));
  box-shadow: 0 4px 20px rgba(15,10,30,0.12);
  transition:
    height 400ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 280ms ease,
    flex 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tl-grid:has(.tl-card:hover) .tl-card:not(:hover) {
  height: 260px;
  flex: 0.82;
}

.tl-card:hover {
  height: 440px;
  flex: 1.4;
  box-shadow: 0 24px 64px rgba(15,10,30,0.28);
}

.tl-card img {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 300px;
  width: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tl-card:hover img { transform: scale(1.04); }

.tl-label {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-encre);
  white-space: nowrap;
  z-index: 10;
  font-weight: 600;
  transition: opacity 250ms ease, transform 250ms ease;
}
.tl-card:hover .tl-label {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.tl-overlay {
  position: absolute;
  top: 300px;
  left: 0; right: 0; bottom: 0;
  background: var(--color-encre);
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  z-index: 9;
}

.tl-icon {
  position: absolute;
  top: 20px; left: 20px;
  font-size: 32px;
  z-index: 8;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  transition: opacity 280ms ease;
}
.tl-card:hover .tl-icon { opacity: 0; }

.tl-num {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  font-weight: 700;
  font-family: var(--font-body);
}

.tl-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-ecru);
  margin: 0;
}

.tl-desc {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(245,242,236,0.72);
  margin: 0;
}

@media (max-width: 1024px) {
  .tl-grid { flex-wrap: wrap; }
  .tl-card { flex: 0 0 calc(50% - 8px); height: 260px; }
  .tl-card img { height: 260px; }
  .tl-overlay { top: 260px; }
  .tl-grid:has(.tl-card:hover) .tl-card:not(:hover) { height: 260px; flex: 0 0 calc(50% - 8px); }
  .tl-card:hover { height: 400px; flex: 0 0 calc(50% - 8px); }
}
@media (max-width: 640px) {
  .tl-card { flex: 0 0 100%; height: 220px; }
  .tl-card img { height: 220px; }
  .tl-overlay { top: 220px; }
  .tl-grid:has(.tl-card:hover) .tl-card:not(:hover) { flex: 0 0 100%; height: 220px; }
  .tl-card:hover { flex: 0 0 100%; height: 360px; }
}

/* ══════════════════════════════════════════════════════════════
   COMPARISON TABLE — style global (dark header + colonne vedette)
   Usage: wrap in .cmp-table, data in .cmp-head + .cmp-row
   ══════════════════════════════════════════════════════════════ */

.cmp-table {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

.cmp-head {
  display: grid;
  background: var(--color-nuit);
}

.cmp-head .cmp-cell {
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.03em;
}

.cmp-head .cmp-cell.cmp-star {
  background: var(--color-orange);
  color: white;
}

.cmp-row {
  display: grid;
  background: white;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-row:nth-child(even) { background: rgba(245,242,236,0.55); }

/* Ligne inconvénients — fond rosé subtil */
.cmp-row.cmp-cons { background: rgba(220, 60, 40, 0.04) !important; border-top: 1px dashed rgba(220,60,40,0.2); }
.cmp-row.cmp-cons .cmp-cell { color: #555; font-size: 13px; }
.cmp-row.cmp-cons .cmp-label { color: #c0392b !important; font-weight: 700 !important; font-size: 13px; }
.cmp-row.cmp-cons .cmp-star  { background: rgba(220,60,40,0.06) !important; color: #c0392b !important; font-weight: 400 !important; }

.cmp-row .cmp-cell {
  padding: 15px 20px;
  font-size: 14px;
  color: #1a1a1a;
  border-right: 1px solid rgba(0,0,0,0.04);
}
.cmp-row .cmp-cell:last-child { border-right: none; }
.cmp-row .cmp-cell.cmp-label { font-weight: 600; color: var(--color-encre); }
.cmp-row .cmp-cell.cmp-star  {
  background: rgba(230,102,55,0.07);
  color: var(--color-orange-dark);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   GLASS KPI — chiffres clés effet glace (usage global)
   Usage : section.section-glass-kpi > .glass-kpi-grid > .glass-kpi-card
   ══════════════════════════════════════════════════════════════ */

.section-glass-kpi {
  background: linear-gradient(135deg, var(--color-nuit) 0%, var(--color-encre) 100%);
  position: relative;
  overflow: hidden;
}
.section-glass-kpi::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(116,46,142,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(230,102,55,0.20) 0%, transparent 50%);
  pointer-events: none;
}
.section-glass-kpi .section-tag  { color: var(--color-orange)            !important; position: relative; }
.section-glass-kpi h2             { color: var(--color-ecru)              !important; position: relative; }
.section-glass-kpi h2 em          { color: var(--color-orange)            !important; }
.section-glass-kpi h3             { color: var(--color-ecru)              !important; }
.section-glass-kpi .section-lead  { color: rgba(245,242,236,0.65)         !important; position: relative; }
.section-glass-kpi p              { color: rgba(245,242,236,0.65); }

.glass-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  position: relative;
}

.glass-kpi-card {
  text-align: center;
  padding: 52px 32px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 500ms ease var(--delay, 0ms),
    transform 500ms cubic-bezier(0.34,1.2,0.64,1) var(--delay, 0ms);
}
.glass-kpi-card.visible { opacity: 1; transform: translateY(0); }
.glass-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  pointer-events: none;
}
.glass-kpi-card::after {
  content: '';
  position: absolute;
  top: 20%; left: 15%; right: 15%; bottom: 20%;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.04) 35%, transparent 40%, rgba(255,255,255,0.06) 55%, transparent 60%);
  pointer-events: none;
}
.glass-kpi-value {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  font-style: italic;
  color: #FFFFFF;
  line-height: 1;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.glass-kpi-label {
  font-size: 13px;
  color: rgba(245,242,236,0.65);
  margin: 0;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.glass-kpi-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  color: rgba(245,242,236,0.80);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .glass-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .glass-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   SECTION ECRU — fond beige chaud (StepsVisual / boules)
   ══════════════════════════════════════════════════════════════ */
.section-ecru {
  background: var(--color-ecru);
  border-bottom: 1px solid var(--border-default, #E8E4DE);
}

/* ══════════════════════════════════════════════════════════════
   RB-TRACK — boules 3D draggables (inline StepsVisual)
   Usage: .rb-track > .rb-item x N
   ══════════════════════════════════════════════════════════════ */
.rb-track {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px 64px;
  overflow: hidden;
}
.rb-track-4  { height: 520px; }
.rb-track-5  { height: 540px; }
.rb-track-6  { height: 540px; }

.rb-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rb-path { fill: none; stroke: var(--color-orange); stroke-width: 1.5; opacity: 0.5; }
.rb-dot  { fill: var(--color-orange); opacity: 0.7; }

.rb-item { position: absolute; left: var(--bx); top: var(--by); }
.rb-ball {
  position: absolute;
  width: var(--bs); height: var(--bs);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.22) 32%, transparent 56%),
    radial-gradient(circle at 68% 74%, rgba(0,0,0,0.14) 0%, transparent 42%),
    var(--bc);
  box-shadow:
    0 20px 40px var(--bsh),
    inset -4px -8px 20px rgba(0,0,0,0.18),
    inset 3px 4px 12px rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: calc(var(--bs) * 0.33);
  font-style: italic;
  color: var(--bt);
  cursor: grab;
  z-index: 2;
  transition: transform 320ms ease, box-shadow 320ms ease;
}
.rb-ball:hover {
  transform: translate(-50%, calc(-50% - 8px)) scale(1.06);
  box-shadow: 0 28px 52px var(--bsh), inset -4px -8px 20px rgba(0,0,0,0.18), inset 3px 4px 12px rgba(255,255,255,0.3);
}
.rb-label {
  position: absolute; left: 50%; width: 180px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px; z-index: 3;
}
.rb-below { transform: translate(-50%, calc(var(--bs) / 2 + 10px)); }
.rb-above { transform: translate(-50%, calc(-100% - var(--bs) / 2 - 10px)); }
.rb-label strong { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--color-encre); }
.rb-label p      { font-size: 13px; line-height: 1.6; color: var(--color-brume); margin: 0; }
.rb-stem { display: block; width: 1px; height: 28px; background: var(--color-orange); opacity: 0.45; flex-shrink: 0; }

@media (max-width: 768px) {
  .rb-track { height: auto !important; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 24px 24px 48px; }
  .rb-svg { display: none; }
  .rb-item { position: static; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .rb-ball { position: static; transform: none; }
  .rb-ball:hover { transform: translateY(-6px); }
  .rb-label { position: static; transform: none; width: 240px; }
  .rb-above { flex-direction: column-reverse; }
}

/* ══════════════════════════════════════════════════════════════
   BOUTONS PILULE — override global 100px pour toutes les pages
   ══════════════════════════════════════════════════════════════ */
.btn-primary,
.btn-ghost,
.btn-cta,
.btn-sim-cta,
.btn-large {
  border-radius: 100px !important;
}