/* ===== CUSTOM FONT — Birds and Home =====
   Validation client (mai 2025) : Birds and Home est la seule typo display
   retenue pour les titres. Chargée en Regular (poids 400) — la typo est
   caractérielle, pas besoin de gras, et un faux-bold synthétisé par le
   navigateur ferait coller les glyphes. Les autres propositions Valentin
   (Arsenica / Brown Sugar / Palmore / Rattani / Sailing Club / Selga /
   Tritone / Zafrada) ont été retirées avec l'ancien switcher. */
@font-face { font-family: 'Birds and Home'; src: url('fonts/Birds and Home.otf') format('opentype'); font-weight: 400; font-display: swap; }

/* Birds and Home étant la typo de tous les titres, on désactive le faux-bold
   du navigateur et on ouvre un peu le tracking (sinon les boucles cursives
   se touchent). Ces règles sont appliquées sans condition de classe. */
h1,
h2,
h3,
.highlight,
.section-title,
.hero-title,
.stat-number {
  font-weight: 400 !important;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Colors - Premium Catering Palette */
  --bg-dark: #0f0f12;
  --bg-dark-secondary: #16161a;
  --bg-light: #f8f7f4;
  --bg-card: #1a1a1f;
  --bg-card-hover: #222229;

  /* Accent - Warm Amber/Gold for food elegance */
  --accent: #d4a853;
  --accent-light: #e8c87a;
  --accent-dark: #b8923f;
  --accent-glow: rgba(212, 168, 83, 0.25);
  --accent-rgb: 212, 168, 83;

  /* Secondary accent - Deep teal */
  --secondary: #2d6b6b;
  --secondary-light: #3d8a8a;

  /* Text colors */
  --text: #f5f5f0;
  --text-muted: #9a9a95;
  --text-dark: #2a2a2a;
  --text-dark-muted: #6a6a6a;

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(0, 0, 0, 0.08);

  /* Hero overlay (gradients depend on theme) */
  --hero-overlay-from: rgba(15, 15, 18, 0.3);
  --hero-overlay-mid:  rgba(15, 15, 18, 0.6);
  --hero-overlay-to:   rgba(15, 15, 18, 0.9);

  /* Typography — typos validées (mai 2025) */
  --font-heading: 'Birds and Home', cursive;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Spacing */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-lg: 24px;

  /* Transitions */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ALTERNATE COLOR-TEMPLATE — "Crème & Bleu marine" =====
   Inspiré du DA Valentin (#142F8A + #FBEFDF) :
   - fond crème dominant, accent bleu marine profond
   - inversion des sections "light" (deviennent bleu marine) pour conserver
     le contraste fond/figure d'origine
   - les valeurs sont mappées sur les *mêmes* variables que le thème par défaut,
     donc la totalité du site s'adapte sans toucher aux classes existantes. */
body.theme-cream {
  /* Bases */
  --bg-dark: #FBEFDF;            /* "fond" principal devient crème */
  --bg-dark-secondary: #F4E5D2;  /* nuance plus chaude pour les bandeaux */
  --bg-light: #142F8A;           /* "fond clair" devient bleu marine (inversion) */
  --bg-card: #FFF7EA;            /* cartes : crème très clair (proche blanc) */
  --bg-card-hover: #F4E5D2;

  /* Accent : bleu marine profond */
  --accent: #142F8A;
  --accent-light: #2A4BB8;
  --accent-dark: #0E2266;
  --accent-glow: rgba(20, 47, 138, 0.22);
  --accent-rgb: 20, 47, 138;

  /* Secondary : un bleu un peu plus clair pour les dégradés */
  --secondary: #2A4BB8;
  --secondary-light: #4664D1;

  /* Texte : on inverse — les zones "sombres" affichent du bleu marine */
  --text: #142F8A;               /* texte principal sur fond crème */
  --text-muted: #4A5A8E;          /* bleu désaturé pour les sous-titres */
  --text-dark: #FBEFDF;          /* texte "sur fond clair" → crème (sur bleu) */
  --text-dark-muted: #E6D8C2;

  /* Bordures */
  --border: rgba(20, 47, 138, 0.14);
  --border-light: rgba(251, 239, 223, 0.20);

  /* Hero overlay : crème translucide pour laisser respirer la photo */
  --hero-overlay-from: rgba(251, 239, 223, 0.55);
  --hero-overlay-mid:  rgba(251, 239, 223, 0.78);
  --hero-overlay-to:   rgba(251, 239, 223, 0.95);
}

/* Logos : on bascule en mode "bleu" sur fond crème, "crème" sur fond bleu.
   On garde les <img> originaux et on les remplace dynamiquement via JS — voir
   script.js. Le filtre ci-dessous protège le rendu si l'image n'a pas pu être
   remplacée (failsafe — passe le SVG blanc en bleu marine via colorisation). */
body.theme-cream .header {
  background: rgba(251, 239, 223, 0.88);
  border-bottom-color: rgba(20, 47, 138, 0.10);
}
body.theme-cream .nav a:hover,
body.theme-cream .nav a.active {
  background: rgba(20, 47, 138, 0.06);
}
body.theme-cream .lang-btn {
  border-color: rgba(20, 47, 138, 0.20);
  color: var(--accent);
}
/* === CTA en thème crème ============================================
   Repos : bleu gradient + texte crème.
   Hover : INVERSION → fond crème + texte bleu marine. Pour que la
           transition entre les deux fonds gradient soit fluide (le
           navigateur ne sait pas interpoler `linear-gradient → solide`),
           on déclare aussi le hover comme un linear-gradient (avec deux
           stops identiques crème) → ainsi gradient↔gradient s'animent
           naturellement, plus aucun "flash". */
body.theme-cream .btn-cta,
body.theme-cream .btn-cta-header,
body.theme-cream .btn-submit {
  color: #FBEFDF !important;
  transition: background 0.30s ease,
              color 0.30s ease,
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* HOVER — inversion claire crème ↔ bleu, scale + ombre.
   IMPORTANT : on enferme dans `@media (hover: hover)` pour que la règle
   ne s'applique QUE sur les appareils capables de survol (souris, trackpad).
   Sur mobile/tactile, un tap déclenche techniquement `:hover` et le navigateur
   le maintient jusqu'au prochain tap ailleurs — résultat : le bouton "demander
   un devis" du sticky-cta restait figé en état hover (crème + bleu) après
   qu'on l'ait tapé pour scroller vers le formulaire. Avec ce media query,
   sur mobile on garde l'état initial (bleu + texte crème) et on n'utilise
   que `:active` pour le feedback de pression. */
@media (hover: hover) {
  body.theme-cream .btn-cta:hover,
  body.theme-cream .btn-cta-header:hover,
  body.theme-cream .btn-submit:hover {
    background: linear-gradient(135deg, #FBEFDF 0%, #FBEFDF 100%) !important;
    color: var(--accent) !important;
    transform: scale(1.03);
    box-shadow: 0 12px 28px rgba(20, 47, 138, 0.28);
  }
}

/* CLICK — micro-retour à la taille initiale, ombre réduite, on garde
   l'état hover (crème + bleu) pour ne pas faire clignoter à chaque clic */
body.theme-cream .btn-cta:active,
body.theme-cream .btn-cta-header:active,
body.theme-cream .btn-submit:active {
  background: linear-gradient(135deg, #FBEFDF 0%, #FBEFDF 100%) !important;
  color: var(--accent) !important;
  transform: scale(1);
  box-shadow: 0 4px 10px rgba(20, 47, 138, 0.20);
  transition: transform 80ms ease, box-shadow 80ms ease;
}

/* Focus accessible (clavier) — anneau crème pour rester lisible sur bleu */
body.theme-cream .btn-cta:focus-visible,
body.theme-cream .btn-cta-header:focus-visible,
body.theme-cream .btn-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(251, 239, 223, 0.85);
}
body.theme-cream .filter-btn {
  background: rgba(20, 47, 138, 0.04);
  color: var(--accent);
}
body.theme-cream .filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}
body.theme-cream .filter-btn.active {
  color: #FBEFDF; background: var(--accent); border-color: var(--accent);
}
body.theme-cream .gallery-tag { color: var(--accent); background: rgba(20, 47, 138, 0.10); }
body.theme-cream .gallery-tags { background: linear-gradient(transparent, rgba(251, 239, 223, 0.96)); }
body.theme-cream .gallery-tag,
body.theme-cream .gallery-tags { backdrop-filter: blur(2px); }
body.theme-cream .btn-load-more:hover { color: #FBEFDF; }
body.theme-cream .case-study-badge {
  background: rgba(251, 239, 223, 0.95);
  color: var(--accent);
}
body.theme-cream .image-caption {
  background: rgba(251, 239, 223, 0.92);
  color: var(--accent);
}
body.theme-cream .image-caption .caption-text { color: var(--accent); }
body.theme-cream .footer { background: var(--bg-dark-secondary); }
body.theme-cream .sticky-cta { background: rgba(251, 239, 223, 0.96); }
body.theme-cream .hero-image { filter: brightness(0.85) sepia(0.15); }

/* La galerie / vignettes restent lisibles : on garde l'image, juste un léger
   filtre pour réduire l'effet "tâche" sur fond crème. */
body.theme-cream .for-who-card,
body.theme-cream .why-card,
body.theme-cream .process-step {
  background: var(--bg-card);
  border-color: var(--border);
}
body.theme-cream .case-study-wrapper { background: var(--bg-card); border-color: var(--border); }
body.theme-cream .cs-quote { background: rgba(20, 47, 138, 0.05); }

/* Section "light" inversée : devient un bandeau bleu marine */
body.theme-cream .section-light { background: var(--bg-light); color: var(--text-dark); }
body.theme-cream .section-light .section-title { color: var(--text-dark); }
body.theme-cream .section-light .section-subtitle { color: var(--text-dark-muted); }
body.theme-cream .section-light .section-tag { color: var(--text-dark-muted); }
body.theme-cream .section-light .highlight {
  /* sur bandeau bleu marine, le highlight passe en crème pour rester lisible */
  background: linear-gradient(135deg, #FBEFDF 0%, #E6D8C2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.theme-cream .section-light .card { background: rgba(251, 239, 223, 0.95); border-color: rgba(251, 239, 223, 0.3); }
body.theme-cream .section-light .card h3 { color: var(--accent); }
body.theme-cream .section-light .card p { color: var(--accent-dark); }
body.theme-cream .section-light .card-icon { color: var(--accent); background: rgba(20, 47, 138, 0.10); }
body.theme-cream .section-light .commitment { background: rgba(251, 239, 223, 0.95); border-color: transparent; }
body.theme-cream .section-light .commitment h4 { color: var(--accent); }
body.theme-cream .section-light .commitment p { color: var(--accent-dark); }
body.theme-cream .section-light .commitment-icon { color: var(--accent); background: rgba(20, 47, 138, 0.10); }
body.theme-cream .section-light .stat-card { background: rgba(251, 239, 223, 0.95); border-color: transparent; }
body.theme-cream .section-light .stat-card .stat-label { color: var(--accent-dark); }
body.theme-cream .section-light .stat-card .stat-number {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text; background-clip: text;
}
body.theme-cream .section-light .logo-item { background: rgba(251, 239, 223, 0.95); color: var(--accent-dark); border-color: transparent; }
body.theme-cream .section-light .for-who-note {
  background: rgba(251, 239, 223, 0.10);
  border-color: rgba(251, 239, 223, 0.25);
  color: var(--text-dark);
}
body.theme-cream .section-light .for-who-note svg { color: var(--text-dark); }

/* Section sombre = principale (crème) en mode crème */
body.theme-cream .section-dark { background: var(--bg-dark); color: var(--text); }
body.theme-cream .section-dark .section-title,
body.theme-cream .section-dark h3 { color: var(--text); }
body.theme-cream .section-dark .section-subtitle,
body.theme-cream .section-dark p { color: var(--text-muted); }
body.theme-cream .section-accent {
  background: linear-gradient(135deg, var(--bg-dark-secondary) 0%, var(--bg-dark) 100%);
  border-color: var(--border);
}
body.theme-cream .section-form {
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-secondary) 100%);
}

/* FAQ : pictos & textes lisibles sur crème */
body.theme-cream .faq-question { color: var(--accent); }
body.theme-cream .faq-question .faq-icon { background: rgba(20, 47, 138, 0.10); color: var(--accent); }
body.theme-cream .faq-item.open .faq-icon { background: var(--accent); color: #FBEFDF; }
body.theme-cream .faq-answer p { color: var(--text-muted); }
body.theme-cream .faq-item { border-bottom-color: var(--border); }

/* Form (page questions / devis) sur fond crème */
body.theme-cream .form-wrapper { background: var(--bg-card); border-color: var(--border); }
body.theme-cream .form-group input,
body.theme-cream .form-group select,
body.theme-cream .form-group textarea {
  background: rgba(20, 47, 138, 0.04);
  border-color: var(--border);
  color: var(--text);
}
body.theme-cream .form-group input:focus,
body.theme-cream .form-group select:focus,
body.theme-cream .form-group textarea:focus {
  background: rgba(20, 47, 138, 0.07);
  border-color: var(--accent);
}
body.theme-cream .form-group label { color: var(--text); }
body.theme-cream .form-hint { color: var(--text-muted); }

/* Hero : badge & dot adaptés */
body.theme-cream .hero-badge {
  background: rgba(20, 47, 138, 0.08);
  border-color: rgba(20, 47, 138, 0.30);
  color: var(--accent);
}
body.theme-cream .badge-dot { background: var(--accent); }

/* Scrollbars + selection en mode crème */
body.theme-cream ::-webkit-scrollbar-track { background: var(--bg-dark); }
body.theme-cream ::-webkit-scrollbar-thumb { background: rgba(20, 47, 138, 0.25); }
body.theme-cream ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
body.theme-cream ::selection { background: var(--accent); color: #FBEFDF; }

/* Step number reste lisible en mode crème */
body.theme-cream .step-number { opacity: 0.85; color: var(--accent); }
body.theme-cream .step-line {
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
}

/* Boutons load more en mode crème */
body.theme-cream .btn-load-more { color: var(--accent); border-color: var(--accent); }
body.theme-cream .btn-load-more:hover { background: var(--accent); color: #FBEFDF; }

/* Lightbox : voile crème pour rester cohérent */
body.theme-cream .lightbox { background: rgba(20, 47, 138, 0.92); }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-light); }

img { max-width: 100%; display: block; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ===== HEADER ===== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(15, 15, 18, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.header.scrolled { background: rgba(15, 15, 18, 0.95); }
body.theme-cream .header.scrolled { background: rgba(251, 239, 223, 0.96); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  height: 80px;
}

.logo {
  display: flex; align-items: center; gap: 12px;
  color: var(--text);
  line-height: 0; /* évite tout décalage vertical hérité */
}

/* Icône (losange/symbole) : carrée, bien visible, ~70% de la hauteur du header (80px) */
.logo-icone {
  height: 56px;
  width: auto;
  display: block;
  transition: var(--transition);
}

/* Typographie du logo : plus basse que l'icône pour rester équilibrée */
.logo-typo {
  height: 30px;
  width: auto;
  display: block;
  transition: var(--transition);
}

.logo:hover .logo-icone,
.logo:hover .logo-typo { filter: brightness(1.15); }

/* Ancien utilitaire conservé pour le footer */
.logo-svg {
  height: 40px;
  width: auto;
  transition: var(--transition);
}

.nav { display: flex; align-items: center; gap: 4px; }

.nav a {
  color: var(--text-muted); font-size: 0.875rem; font-weight: 500;
  padding: 10px 16px; border-radius: var(--radius-sm);
  transition: var(--transition);
}
.nav a:hover, .nav a.active { 
  color: var(--text); 
  background: rgba(255, 255, 255, 0.05); 
}

.lang-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.8rem; font-weight: 600;
  padding: 8px 16px; border-radius: 20px; cursor: pointer;
  transition: var(--transition); margin-left: 12px;
  font-family: var(--font-body);
}
.lang-btn:hover { 
  border-color: var(--accent); 
  color: var(--accent); 
}

.btn-cta-header {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #000 !important; font-weight: 600;
  font-size: 0.875rem; padding: 12px 24px; border-radius: 28px;
  border: none; cursor: pointer; transition: var(--transition);
  margin-left: 16px;
}
/* Le hover du CTA header reprend EXACTEMENT le même comportement que .btn-cta
   (élévation, ombre, inversion bg/color). Avant les valeurs étaient légèrement
   différentes (translateY -2px vs -3px, ombre plus petite) — l'animation
   semblait "moins prononcée" sur le header. Maintenant les 3 CTA partagent
   une seule règle de hover, identique pour tous. */
.btn-cta-header:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px var(--accent-glow);
  background: #000;
  color: #fff !important;
}

/* Mobile menu */
.hamburger {
  display: none; background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px;
}
.hamburger span {
  display: block; width: 24px; height: 2px; background: var(--text);
  border-radius: 2px; transition: var(--transition);
}

@media (max-width: 1024px) {
  .hamburger { display: flex; z-index: 1001; position: relative; }
  .hamburger span { transition: transform 0.3s ease, opacity 0.2s ease; }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    /* Fond crème (cohérent avec la charte validée mai 2025) — les radiales bleu
       marine apportent juste un léger relief sans casser la teinte dominante. */
    background: #FBEFDF;
    background-image:
      radial-gradient(circle at 20% 15%, rgba(20, 47, 138, 0.10) 0%, transparent 55%),
      radial-gradient(circle at 85% 90%, rgba(20, 47, 138, 0.06) 0%, transparent 50%),
      linear-gradient(180deg, #FBEFDF 0%, #F4E5D2 100%);
    flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 24px 40px; gap: 4px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow-y: auto;
  }
  .nav.open { transform: translateX(0); }
  .nav a {
    font-family: var(--font-heading);
    font-size: 1.5rem; font-weight: 500;
    padding: 14px 24px;
    color: var(--text);
    border-radius: var(--radius-sm);
    letter-spacing: 0.01em;
  }
  .nav a:hover, .nav a.active {
    background: rgba(20, 47, 138, 0.08);
    color: var(--accent);
  }
  .btn-cta-header { margin: 24px 0 0 0; font-size: 1rem; }
  .lang-btn { margin: 20px 0 8px 0; padding: 10px 24px; font-size: 0.9rem; }

  /* Body lock when menu open */
  body.menu-open { overflow: hidden; }
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding-top: 80px;
}

.hero-bg {
  position: absolute; inset: 0; z-index: 0;
}

.hero-image {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.4);
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    var(--hero-overlay-from) 0%,
    var(--hero-overlay-mid) 50%,
    var(--hero-overlay-to) 100%
  );
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 800px; padding: 100px 0;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(212, 168, 83, 0.1);
  border: 1px solid rgba(212, 168, 83, 0.3);
  padding: 8px 16px; border-radius: 50px;
  font-size: 0.8rem; font-weight: 500;
  color: var(--accent); margin-bottom: 32px;
  text-transform: uppercase; letter-spacing: 1px;
}

.badge-dot {
  width: 8px; height: 8px; background: var(--accent);
  border-radius: 50%; animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700; line-height: 1.1;
  color: var(--text);
  margin-bottom: 28px;
  letter-spacing: -0.02em;
}

.hero h1 .highlight {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero .subtitle {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--text-muted); max-width: 600px;
  margin-bottom: 48px; line-height: 1.7;
}

.hero-stats {
  display: flex; align-items: center; gap: 32px;
  margin-bottom: 48px; flex-wrap: wrap;
}

.hero-stats .stat {
  text-align: left;
}

.hero-stats .stat-number {
  font-family: var(--font-heading);
  font-size: 2.2rem; font-weight: 700;
  color: var(--accent); line-height: 1;
}

.hero-stats .stat-label {
  font-size: 0.85rem; color: var(--text-muted); margin-top: 6px;
}

.stat-divider {
  width: 1px; height: 40px; background: var(--border);
}

/* --- Hero stats : sur mobile, grille 3 colonnes centrées + dividers masqués --- */
@media (max-width: 640px) {
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 36px;
    width: 100%;
  }
  .hero-stats .stat {
    text-align: center;
    min-width: 0;
  }
  .hero-stats .stat-number {
    font-size: 1.35rem;
    letter-spacing: -0.01em;
  }
  .hero-stats .stat-label {
    font-size: 0.72rem;
    line-height: 1.3;
    margin-top: 4px;
  }
  .hero-stats .stat-divider { display: none; }
}
@media (max-width: 360px) {
  .hero-stats .stat-number { font-size: 1.15rem; }
  .hero-stats .stat-label  { font-size: 0.68rem; }
}

.btn-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #000 !important; font-weight: 600;
  font-size: 1rem; padding: 18px 40px; border-radius: 50px;
  border: none; cursor: pointer; transition: var(--transition);
  font-family: var(--font-body);
}
@media (hover: hover) {
  .btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px var(--accent-glow);
    background: #000;
    color: #fff !important;
  }
}

/* ===== SECTIONS ===== */
.section-dark { 
  padding: 120px 0; 
  background: var(--bg-dark);
}

.section-light { 
  padding: 120px 0; 
  background: var(--bg-light);
  color: var(--text-dark);
}

.section-light .section-title { color: var(--text-dark); }
.section-light .section-subtitle { color: var(--text-dark-muted); }
.section-light .highlight {
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-accent {
  padding: 120px 0;
  background: linear-gradient(135deg, var(--bg-dark-secondary) 0%, var(--bg-dark) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-form {
  padding: 120px 0;
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-secondary) 100%);
}

.section-header {
  margin-bottom: 64px;
}

.section-header.center {
  text-align: center;
}

.section-header.center .section-subtitle {
  margin-left: auto; margin-right: auto;
}

.section-tag {
  display: inline-block;
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent); margin-bottom: 16px;
}

.section-tag.light {
  color: var(--accent-light);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700; color: var(--text);
  margin-bottom: 20px; line-height: 1.2;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 1.1rem; color: var(--text-muted);
  max-width: 560px; line-height: 1.7;
}

.section-title .highlight {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== FOR WHO ===== */
.for-who-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
}

.for-who-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .for-who-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) { 
  .for-who-grid { grid-template-columns: 1fr; }
  .for-who-grid-3 { grid-template-columns: 1fr; }
}

.for-who-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}

.for-who-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.for-who-card .card-image {
  position: relative; height: 220px; overflow: hidden;
}

.for-who-card .card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}

.for-who-card:hover .card-image img {
  transform: scale(1.05);
}

.card-image-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--bg-card) 100%);
}

.for-who-card .card-content {
  padding: 32px;
}

.for-who-card .card-icon {
  width: 48px; height: 48px;
  background: rgba(212, 168, 83, 0.1);
  border: 1px solid rgba(212, 168, 83, 0.2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; color: var(--accent);
}

.for-who-card h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem; font-weight: 600;
  color: var(--text); margin-bottom: 12px;
}

.for-who-card p { 
  color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; 
}

.for-who-note {
  margin-top: 40px; padding: 20px 28px;
  background: rgba(212, 168, 83, 0.05);
  border: 1px solid rgba(212, 168, 83, 0.15);
  border-radius: var(--radius);
  color: var(--text-muted); font-size: 0.9rem;
  display: flex; align-items: center; gap: 12px;
}

.for-who-note svg {
  color: var(--accent); flex-shrink: 0;
}

/* ===== CARDS GRID ===== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

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

@media (max-width: 640px) {
  .cards-grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.card-featured {
  grid-column: span 1;
}

.card-image-wrap {
  height: 180px; overflow: hidden;
}

.card-image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card-image-wrap img {
  transform: scale(1.08);
}

.card-body {
  padding: 28px;
}

.card-icon {
  width: 44px; height: 44px;
  background: rgba(212, 168, 83, 0.1);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; color: var(--accent-dark);
}

.card h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 600;
  color: var(--text-dark); margin-bottom: 10px;
}

.card p {
  font-size: 0.9rem; color: var(--text-dark-muted); line-height: 1.6;
}

/* ===== GALLERY ===== */
.gallery-filters {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-bottom: 48px;
}

.filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.85rem; font-weight: 500;
  padding: 10px 20px; border-radius: 50px;
  cursor: pointer; transition: var(--transition);
  font-family: var(--font-body);
}
.filter-btn:hover { border-color: var(--accent); color: var(--text); }
.filter-btn.active {
  background: var(--accent); color: var(--bg-dark);
  border-color: var(--accent); font-weight: 600;
}

/* ===== GALERIE — DISPOSITION MASONRY (ratios d'origine préservés) =====
   Utilise CSS multi-columns : compatible tous navigateurs, zéro JS.
   Layout validé client (mai 2025) ; la variante "grille uniforme" a été
   retirée avec le panneau dev. La classe `.layout-masonry` reste posée
   par JS (initGalleryLayout) pour que le CSS de fallback ne s'applique
   qu'en cas de plantage du JS. */
.gallery-grid {
  display: block;
  column-count: 4;
  column-gap: 16px;
}
.gallery-grid .gallery-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 16px;
  aspect-ratio: auto;
  display: block;
}
.gallery-grid .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: initial;
  aspect-ratio: auto;
}
@media (max-width: 1024px) { .gallery-grid { column-count: 3; } }
@media (max-width: 768px)  { .gallery-grid { column-count: 2; column-gap: 12px; } .gallery-grid .gallery-item { margin-bottom: 12px; } }
@media (max-width: 480px)  { .gallery-grid { column-count: 2; column-gap: 10px; } .gallery-grid .gallery-item { margin-bottom: 10px; } }

/* ===== GALERIE — APPARITION FLUIDE (initial + load more) ===== */
@keyframes gallery-item-appear {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.gallery-item-enter {
  animation: gallery-item-appear 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, transform;
}
/* Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  .gallery-item-enter {
    animation: none;
    opacity: 1; transform: none;
  }
}

.gallery-item {
  position: relative; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 1;
  cursor: pointer; transition: var(--transition);
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item:hover .gallery-tags { opacity: 1; }

.gallery-tags {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px; opacity: 0;
  background: linear-gradient(transparent, rgba(15,15,18,0.9));
  transition: opacity 0.3s ease;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.gallery-tag {
  font-size: 0.7rem; font-weight: 500;
  background: rgba(212, 168, 83, 0.2); color: var(--accent);
  padding: 4px 10px; border-radius: 20px;
}

.gallery-load-more {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px;
  margin-top: 40px;
}
.gallery-cta { margin-top: 4px; }
.btn-load-more {
  background: transparent; border: 1px solid var(--accent);
  color: var(--accent); font-size: 0.9rem; font-weight: 500;
  padding: 14px 36px; border-radius: 50px;
  cursor: pointer; transition: var(--transition);
  font-family: var(--font-body);
}
.btn-load-more:hover {
  background: var(--accent); color: var(--bg-dark);
}
.btn-load-more:disabled {
  opacity: 0.3; cursor: default;
}

/* Gallery lightbox */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.95); backdrop-filter: blur(20px);
  align-items: center; justify-content: center;
  cursor: zoom-out;
  /* on ne capture plus le swipe vertical natif du browser : Escape ou tap fond
     suffisent pour fermer ; le swipe horizontal pilote prev/next via JS */
  touch-action: pan-y;
}
.lightbox.active { display: flex; }
.lightbox img {
  max-width: 86vw; max-height: 88vh; object-fit: contain;
  border-radius: var(--radius-sm);
  cursor: default;
  /* fade quand on change d'image — pilotée en JS via classe .swapping */
  opacity: 1;
  transition: opacity 0.18s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox img.swapping { opacity: 0; }
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: white;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lightbox-close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.lightbox-prev,
.lightbox-next {
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-prev svg,
.lightbox-next svg { width: 24px; height: 24px; }
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
}
.lightbox-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(2px); }
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible,
.lightbox-close:focus-visible {
  outline: 2px solid rgba(255,255,255,0.65);
  outline-offset: 2px;
}
/* Compteur "n / total" discret, en bas-centre */
.lightbox-counter {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  background: rgba(0,0,0,0.35);
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
  user-select: none;
}
/* Mobile : tailles réduites + flèches qui restent à portée du pouce */
@media (max-width: 768px) {
  .lightbox img { max-width: 92vw; max-height: 78vh; }
  .lightbox-close { top: 14px; right: 14px; width: 40px; height: 40px; }
  .lightbox-prev,
  .lightbox-next { width: 44px; height: 44px; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-prev svg,
  .lightbox-next svg { width: 20px; height: 20px; }
  .lightbox-counter { bottom: 14px; font-size: 0.78rem; padding: 5px 12px; }
}

/* ===== WHY GURU ===== */
.why-guru-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1024px) { .why-guru-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .why-guru-grid { grid-template-columns: 1fr; } }

.why-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: var(--transition);
}
.why-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.why-icon {
  width: 48px; height: 48px;
  background: rgba(212, 168, 83, 0.1);
  border: 1px solid rgba(212, 168, 83, 0.2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; color: var(--accent);
}
.why-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 600;
  color: var(--text); margin-bottom: 12px;
}
.why-card p {
  color: var(--text-muted); font-size: 0.9rem; line-height: 1.7;
}

/* ===== CASE STUDY ===== */
.case-study-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.case-study-image {
  position: relative; min-height: 400px;
}

.case-study-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.case-study-badge {
  position: absolute; top: 24px; left: 24px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(15, 15, 18, 0.9);
  border: 1px solid var(--accent);
  padding: 10px 18px; border-radius: 50px;
  font-size: 0.75rem; font-weight: 600;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: 1px;
  z-index: 2;
}

.badge-pulse {
  width: 8px; height: 8px; background: var(--accent);
  border-radius: 50%; animation: pulse 2s infinite;
}

.case-study-content {
  padding: 48px;
}

.case-study-content h3 {
  font-family: var(--font-heading);
  font-size: 1.8rem; font-weight: 700;
  color: var(--text); margin-bottom: 12px;
}

.cs-subtitle {
  color: var(--text-muted); margin-bottom: 40px; font-size: 1.05rem;
}

.cs-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 28px; margin-bottom: 40px;
}

.cs-item {
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.cs-item:hover {
  border-color: var(--accent);
  background: rgba(212, 168, 83, 0.03);
}

.cs-item-icon {
  width: 36px; height: 36px;
  background: rgba(212, 168, 83, 0.1);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; color: var(--accent);
}

.cs-item h4 {
  font-family: var(--font-heading);
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--accent); margin-bottom: 10px;
}

.cs-item p { 
  color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; 
}

.cs-quote {
  position: relative;
  padding: 28px 32px;
  background: rgba(212, 168, 83, 0.05);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.quote-icon {
  color: var(--accent); opacity: 0.3;
  margin-bottom: 12px;
}

.cs-quote p {
  font-style: italic; color: var(--text); font-size: 1.05rem;
  line-height: 1.7;
}

@media (max-width: 968px) {
  .case-study-wrapper { grid-template-columns: 1fr; }
  .case-study-image { min-height: 250px; }
  .case-study-content { padding: 32px; }
  .cs-grid { grid-template-columns: 1fr; }
}

/* ===== LOGOS ===== */
.logos-band {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 20px; margin-bottom: 64px;
}

/* === Bandeau déroulant infini ===
   - 2 pistes identiques côte-à-côte (la 2e est aria-hidden)
   - on translate l'ensemble de -50% via CSS animation : la 2e piste prend
     instantanément la place de la 1re, donc la boucle est invisible
   - on fade les bords gauche/droit avec un mask-image pour un effet "défile
     dans le brouillard" plus élégant que des cartes qui apparaissent net
   - hover du bandeau = pause (UX standard pour donner le temps de lire)
   - sur prefers-reduced-motion : on stoppe l'animation et on aligne en
     wrap (les utilisateurs sensibles au mouvement voient une grille statique) */
.logos-marquee {
  position: relative;
  width: 100%;
  /* overflow: hidden classique. On a tenté `overflow: clip` +
     `overflow-clip-margin: 6px` pour autoriser le translateY(-2px) du
     hover à dépasser, mais le `mask-image` horizontal applique son alpha
     UNIQUEMENT dans la box d'origine — au-delà du conteneur, alpha = 0,
     donc le contenu débordant via clip-margin reste invisible. La seule
     solution fiable est d'ajouter un peu de padding vertical interne
     pour absorber le hover lift. On compense ce padding par une marge
     entre bandeaux réduite, pour que le GAP VISIBLE entre pastilles
     reste exactement de 20px. */
  overflow: hidden;
  /* IMPORTANT : flex pour aligner les 2 pistes côte-à-côte (sans flex elles
     s'empilaient verticalement → on voyait 2 lignes de logos qui ne bouclaient
     pas). Avec flex, les 2 pistes occupent une bande horizontale unique, et
     l'animation translate les DEUX simultanément. Quand la 1re sort à gauche
     (-100% - gap), la 2e arrive exactement à sa place → boucle invisible. */
  display: flex;
  flex-wrap: nowrap;
  /* 4px en haut et en bas → absorbent le translateY(-2) du hover + la
     bordure 1px de la pastille (3px max) tout en gardant 1px de marge. */
  padding: 4px 0;
  /* fade edges left/right pour atténuer l'apparition/disparition des items */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%);
}
.logos-marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;        /* jamais de compression : préserve la largeur naturelle */
  min-width: max-content;
  padding-right: 20px;   /* gap entre la fin de cette piste et le début de la suivante */
  animation: logos-marquee-scroll 60s linear infinite;
}
/* On NE met PAS animation-play-state: paused au hover — le client préfère
   garder le scroll continu. L'animation visuelle de chaque pastille (scale
   au :hover) suffit comme feedback. */
@keyframes logos-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); } /* -100% = largeur d'1 piste (incluant son padding-right) */
}

/* === Bandeau MIROIR : sens inverse + ordre d'items inversé en HTML +
   animation-delay pour démarrer en milieu de cycle → les marques restent
   désynchronisées entre les 2 bandeaux. =========================== */
.logos-marquee--reverse {
  /* Gap visible entre la dernière pastille du 1er bandeau et la première
     pastille du 2e doit être 20px (= gap horizontal entre items).
     Cumul : M1.padding-bottom (4) + margin-top + M2.padding-top (4) = 20
     → margin-top = 12px. */
  margin-top: 12px;
  /* Espace entre le 2e bandeau et la stats-row qui suit. La règle
     `.logos-marquee:last-of-type` était bugguée parce que ce sélecteur
     s'applique au DERNIER div de type div parmi ses frères — or après
     les marquees viennent .stats-row et .cta-reminder qui sont aussi
     des div, donc aucun marquee n'était "last-of-type". On pose la
     marge directement sur le bandeau miroir (qui est toujours le 2nd). */
  margin-bottom: 64px;
}
.logos-marquee--reverse .logos-marquee-track {
  /* Inverse le sens de défilement : translation va de -100% vers 0%
     (les items entrent par la gauche, sortent par la droite). */
  animation-direction: reverse;
  /* -30s = -50% du cycle 60s → l'animation paraît avoir déjà tourné une
     demi-boucle au chargement, donc le 2e bandeau ne montre pas exactement
     les mêmes marques au-dessus que le 1er à un instant donné. */
  animation-delay: -30s;
}

@media (prefers-reduced-motion: reduce) {
  .logos-marquee {
    -webkit-mask-image: none; mask-image: none;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logos-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .logos-marquee-track + .logos-marquee-track { display: none; } /* on garde une seule passe */
  /* Sur reduced-motion, on n'affiche QU'UN seul bandeau (le 2e devient redondant). */
  .logos-marquee--reverse { display: none; }
}

.logo-item {
  font-size: 0.9rem; font-weight: 600; color: var(--text-dark-muted);
  letter-spacing: 1px; text-transform: uppercase;
  padding: 16px 28px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  flex-shrink: 0; /* important : pas de compression dans le track scrollant */
  white-space: nowrap;
}

.logo-item:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  transform: translateY(-2px);
}

/* === Monochrome SVG logo silhouettes ===
   Approche : un <span class="logo-img logo-<brand>"> à l'intérieur du .logo-item.
   La SVG est utilisée comme MASQUE (mask-image), et la silhouette est remplie
   par background-color: currentColor — donc la couleur du logo suit la color
   du parent .logo-item, qui dépend du thème.
   Sources et largeurs/hauteurs par marque définies dans des classes dédiées
   plus bas. La hauteur est paramétrée via `--logo-h` pour permettre des
   logos visuellement plus grands sans que `mask-size: contain` les bride. */
.logo-item .logo-img {
  display: block;
  /* --logo-scale est un coefficient global (default 2) appliqué partout :
     les --logo-w / --logo-h par-marque restent dans leurs unités de base et
     on multiplie ici. Permet de re-tweaker la taille globale du bandeau en
     un seul endroit (cf. retour client : "agrandir les logos de 2 à 3 fois"). */
  height: calc(var(--logo-h, 26px) * var(--logo-scale, 2));
  width:  calc(var(--logo-w, 80px) * var(--logo-scale, 2));
  background-color: currentColor;
  -webkit-mask: var(--logo-src) center / contain no-repeat;
  mask: var(--logo-src) center / contain no-repeat;
  transition: transform 0.25s ease;
}
/* On NE met PAS de scale au hover sur .logo-img : ça écraserait les
   `transform: scale()` de désolidarisation par-marque (Red Bull / Asus
   ROG / Mines). Le cross-fade silhouette ↔ nom complet suffit comme
   feedback visuel. */

/* Per-brand : --logo-src + --logo-w. Toutes les pastilles ont LA MÊME
   hauteur de contenu (--logo-h: 26px par défaut) → les cadres restent
   strictement uniformes en hauteur, peu importe la marque. Pour les
   marques qui doivent paraître visuellement plus grandes (Red Bull,
   Asus ROG, Mines), on désolidarise la TAILLE VISUELLE de la pastille
   via `transform: scale()` (cf. plus bas) : le silhouette grossit, mais
   la box du conteneur reste identique aux autres. */
.logo-asus-rog       { --logo-src: url('images/logos/asus-rog.svg');     --logo-w: 36px; }
.logo-blast          { --logo-src: url('images/logos/blast.svg');       --logo-w: 105px; }
.logo-epicgames      { --logo-src: url('images/logos/epicgames.svg');    --logo-w: 90px; }
.logo-eva            { --logo-src: url('images/logos/eva.svg');         --logo-w: 75px; }
.logo-fdj            { --logo-src: url('images/logos/fdj.svg');          --logo-w: 80px; }
.logo-fise           { --logo-src: url('images/logos/fise.svg');         --logo-w: 65px; }
.logo-fnac           { --logo-src: url('images/logos/fnac.svg');         --logo-w: 70px; }
.logo-karmine-corp   { --logo-src: url('images/logos/karmine-corp.svg'); --logo-w: 26px; }
.logo-lancome        { --logo-src: url('images/logos/lancome.svg');     --logo-w: 110px; }
.logo-lcp            { --logo-src: url('images/logos/lcp.svg');         --logo-w: 56px; }
.logo-mines          { --logo-src: url('images/logos/mines.svg');        --logo-w: 36px; }
.logo-playstation    { --logo-src: url('images/logos/playstation.svg'); --logo-w: 100px; }
.logo-redbull        { --logo-src: url('images/logos/redbull.svg');     --logo-w: 90px; }
.logo-riotgames      { --logo-src: url('images/logos/riotgames.svg');   --logo-w: 100px; }
.logo-speedons       { --logo-src: url('images/logos/speedons.svg');     --logo-w: 60px; }
.logo-starladder     { --logo-src: url('images/logos/starladder.svg');   --logo-w: 45px; }
.logo-ubisoft        { --logo-src: url('images/logos/ubisoft.svg');     --logo-w: 75px; }

/* Note : les transform: scale() de désolidarisation pour Red Bull / Asus /
   Mines sont définies plus bas dans .logo-item--svg > .logo-img.logo-<brand>
   parce qu'on a besoin de combiner le translate(-50%,-50%) de centrage
   absolute avec le scale() de grossissement. */

/* Logos "image" (silhouette SVG) : padding plus serré pour rester équilibrés
   avec les pastilles texte (qui ont 16px 28px).
   Layout en GRID monocellule : la silhouette et le nom de marque partagent
   exactement la même cellule (grid-area: media). Au :hover on cross-fade
   entre les deux → pas de saut, pas de redimensionnement de pastille,
   et le nom complet reste lisible quel que soit l'item. */
.logo-item--svg {
  /* Layout en COLONNE partout (desktop ET mobile) — décision client mai 2025 :
     le cross-fade silhouette ↔ nom au survol n'a aucun sens en tactile et
     n'apporte pas grand-chose en desktop ; on affiche les deux en permanence.
     La pastille empile : silhouette du logo en haut, nom de la marque en bas. */
  width: 340px;
  min-height: 132px;
  height: auto;
  box-sizing: border-box;
  padding: 16px 18px;
  /* Important : la silhouette utilise currentColor → on contrôle la couleur
     ici, par thème. */
  color: var(--text-dark-muted);  /* dark theme par défaut sur fond blanc pur */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.logo-item--svg > .logo-name {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: currentColor;
  white-space: normal;        /* permet le retour à la ligne (ex : "La Chaîne Parlementaire") */
  text-align: center;
  max-width: 100%;
  line-height: 1.15;
  pointer-events: none;
  opacity: 1;
}

/* Scale visuel pour les 3 marques dont la silhouette d'origine est plus
   petite que la moyenne (Red Bull / Asus ROG / Mines). Plus de translate
   nécessaire puisque les enfants sont en flux normal (flex-column). */
.logo-item--svg > .logo-img.logo-redbull   { transform: scale(1.32); }
.logo-item--svg > .logo-img.logo-asus-rog  { transform: scale(1.32); }
.logo-item--svg > .logo-img.logo-mines     { transform: scale(1.20); }

/* Mobile : on réduit la taille globale + la pastille pour préserver la
   densité du bandeau et garder le scroll fluide. Le layout reste identique
   (flex-column, nom toujours visible). */
@media (max-width: 768px) {
  .logo-item--svg {
    --logo-scale: 1.5;
    width: 200px;
    min-height: 96px;
    padding: 12px 8px;
    gap: 8px;
  }
  .logo-item--svg > .logo-name {
    font-size: 0.74rem;
    letter-spacing: 0.5px;
  }
}
@media (max-width: 480px) {
  .logo-item--svg {
    --logo-scale: 1.3;
    width: 170px;
    min-height: 88px;
    padding: 10px 6px;
  }
  .logo-item--svg > .logo-name { font-size: 0.7rem; }
}

/* La règle "color: var(--text)" pour les silhouettes sur trust en thème
   sombre est définie plus bas, APRÈS l'override .logo-item dans le bloc
   ALTERNANCE FOND CLAIR / FOND SOMBRE — c'est nécessaire pour gagner à
   spécificité égale. */

/* En thème crème, la pastille reste blanche (cohérent avec une "carte d'identité
   marque" sur bandeau crème), juste l'ombre douce passe en bleu marine. */
body.theme-cream .logo-item {
  border-color: rgba(20, 47, 138, 0.10);
  color: #4A5A8E;
  box-shadow: 0 2px 8px rgba(20, 47, 138, 0.06);
}
body.theme-cream .logo-item:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* En thème crème : silhouette en bleu marine pour contraster avec le bandeau */
body.theme-cream .logo-item--svg {
  color: var(--accent);         /* #142F8A */
}
body.theme-cream .logo-item--svg:hover {
  color: var(--accent-dark);    /* #0E2266 */
}

/* Note : il n'y a plus d'overrides --logo-w par-marque sur mobile.
   La taille globale est pilotée par --logo-scale (cf. media query plus haut)
   qui multiplie les valeurs de base. */

.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}

.stat-card {
  text-align: center;
  padding: 32px 24px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  transition: var(--transition);
}

.stat-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.stat-card .stat-number {
  font-family: var(--font-heading);
  font-size: 2rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.stat-card .stat-label {
  font-size: 0.85rem; color: var(--text-dark-muted);
}

@media (max-width: 768px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }
}

/* Header logo : légèrement réduit sur mobile pour garder le menu lisible */
@media (max-width: 600px) {
  .logo { gap: 8px; }
  .logo-icone { height: 44px; }
  .logo-typo { height: 22px; }
}

/* ===== PROCESS ===== */
.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.process-step {
  position: relative;
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
}

.process-step:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.step-number {
  font-family: var(--font-heading);
  font-size: 2.5rem; font-weight: 700;
  color: var(--accent); line-height: 1;
  margin-bottom: 20px; opacity: 0.6;
}

.step-line {
  position: absolute; top: 48px; right: -32px;
  width: 32px; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
}

.process-step:last-child .step-line { display: none; }

.process-step h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 600;
  color: var(--text); margin-bottom: 12px;
}

.process-step p { 
  font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; 
}

@media (max-width: 968px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .step-line { display: none; }
}

@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; }
}

/* ===== COMMITMENTS ===== */
.commitments-wrapper {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 64px; align-items: center;
}

.commitments-image {
  position: relative; border-radius: var(--radius-lg);
  overflow: hidden;
}

.commitments-image img {
  width: 100%; height: auto;
  border-radius: var(--radius-lg);
}

.image-caption {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  background: rgba(15, 15, 18, 0.9);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-sm);
}

.caption-tag {
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent);
}

.caption-text {
  font-size: 0.95rem; font-weight: 500;
  color: var(--text);
}

.commitments-content .section-subtitle {
  margin-bottom: 40px;
}

.commitments-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.commitment {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 24px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.commitment:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

.commitment-icon {
  width: 44px; height: 44px;
  background: rgba(212, 168, 83, 0.1);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--accent-dark);
}

.commitment h4 {
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 600;
  color: var(--text-dark); margin-bottom: 6px;
}

.commitment p { 
  font-size: 0.85rem; color: var(--text-dark-muted); line-height: 1.6; 
}

@media (max-width: 968px) {
  .commitments-wrapper { grid-template-columns: 1fr; }
  .commitments-image { max-width: 500px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .commitments-grid { grid-template-columns: 1fr; }
}

/* ===== FAQ ===== */
.faq-list {
  max-width: 800px; margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0; color: var(--text);
  font-size: 1.05rem; font-weight: 500; text-align: left;
  font-family: var(--font-body);
  transition: var(--transition);
}

.faq-question:hover {
  color: var(--accent);
}

.faq-question .faq-icon {
  width: 32px; height: 32px;
  background: rgba(212, 168, 83, 0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: transform 0.3s ease;
  flex-shrink: 0; margin-left: 16px;
}

.faq-item.open .faq-icon { 
  transform: rotate(45deg);
  background: var(--accent);
  color: var(--bg-dark);
}

.faq-answer {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
}

.faq-answer p {
  padding: 0 0 28px; color: var(--text-muted);
  font-size: 0.95rem; line-height: 1.8;
}

/* ===== FORM ===== */
.form-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 56px;
  max-width: 900px; margin: 0 auto;
}

.form-header {
  text-align: center;
  margin-bottom: 48px;
}

/* Centre aussi le BLOC subtitle (qui a max-width: 560px) — sans cette règle
   le paragraphe restait collé à gauche du form-header même si son TEXTE
   interne était centré via text-align hérité. */
.form-header .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.form-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}

@media (max-width: 640px) { 
  .form-grid { grid-template-columns: 1fr; } 
  .form-wrapper { padding: 32px; }
}

.form-group { display: flex; flex-direction: column; }
.form-group.full { grid-column: 1 / -1; }

.form-group label {
  font-size: 0.85rem; font-weight: 500; color: var(--text);
  margin-bottom: 8px;
}

.form-group input, .form-group select, .form-group textarea {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  color: var(--text); font-family: var(--font-body); font-size: 0.95rem;
  transition: var(--transition);
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(212, 168, 83, 0.03);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-group select { cursor: pointer; appearance: none; }
.form-group select option { background: var(--bg-card); color: var(--text); }

/* Champ texte "Autre (préciser)" — apparaît sous le select Type d'événement
   uniquement quand l'utilisateur sélectionne "Autre". Slide-down doux pour
   rester en harmonie avec les autres transitions du site (lightbox, FAQ). */
.event-type-other {
  margin-top: 10px;
  animation: slide-down-fade 0.28s ease-out;
}
.event-type-other[hidden] { display: none !important; }
@keyframes slide-down-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .event-type-other { animation: none; }
}

.checkbox-group {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px;
}

.checkbox-group label {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; font-weight: 400; color: var(--text-muted);
  cursor: pointer;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.checkbox-group label:hover {
  border-color: var(--accent);
  color: var(--text);
}

.checkbox-group input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--accent);
  cursor: pointer;
}

.btn-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: var(--bg-dark); font-weight: 600;
  font-size: 1rem; padding: 18px 48px; border-radius: 50px;
  border: none; cursor: pointer; margin-top: 32px;
  transition: var(--transition);
  font-family: var(--font-body);
}

.btn-submit:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 12px 32px var(--accent-glow);
}

/* ===== FOOTER ===== */
.footer {
  background: var(--bg-dark-secondary);
  border-top: 1px solid var(--border);
  padding: 60px 0 40px;
}

.footer-content {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 24px;
}

.footer-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.3rem; font-weight: 700;
  color: var(--text);
}

.footer-logo { line-height: 0; }
.footer-logo .logo-svg { height: 80px; width: auto; display: block; }
@media (max-width: 600px) {
  .footer-logo .logo-svg { height: 64px; }
}

.footer-text {
  color: var(--text-muted); font-size: 0.9rem;
}

.footer-links {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 24px;
  margin-top: 16px;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: var(--transition);
}

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

/* ===== STICKY MOBILE CTA ===== */
.sticky-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 999; padding: 16px 20px;
  background: rgba(15, 15, 18, 0.98);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.sticky-cta.hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

.sticky-cta .btn-cta { 
  width: 100%; justify-content: center; 
  font-size: 1rem; padding: 16px;
}

@media (max-width: 1024px) {
  .sticky-cta { display: block; }
  .section-form { padding-bottom: 100px; }

  /* Sur mobile, seul le sticky-cta en bas reste visible.
     Tous les autres rappels "Demander un devis" sont masqués pour éviter la redondance. */
  .hero .btn-cta,
  .gallery-cta,
  .cta-reminder { display: none !important; }
}

/* ===== ANIMATIONS ===== */
.fade-up {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Note : le panneau "gouvernail" (font-switcher / sélecteur thème / sélecteur
   layout) et le calque overlay-assets (fork + chopsticks décoratifs) ont été
   retirés du code — décision client validée le 05/05. Les défauts validés
   (cream + Birds and Home + masonry) sont désormais figés en CSS / HTML. */

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

/* ===== SELECTION ===== */
::selection {
  background: var(--accent);
  color: var(--bg-dark);
}

/* ===== FORM HINT (questions page) ===== */
.form-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-style: italic;
  opacity: 0.7;
  line-height: 1.5;
}

/* ===== HERO MINI (questions page) ===== */
.hero-mini {
  min-height: auto;
}

/* ============================================================
   CTA REMINDER — rappel "Demander un devis" entre les sections
   (transcript réunion 25/02 : le client veut un rappel à intervalle
   régulier, à la façon des sites de conversion)
   ============================================================ */
.cta-reminder {
  margin-top: 72px;
  padding: 36px 40px;
  border-radius: var(--radius-lg);
  background: rgba(212, 168, 83, 0.08);
  border: 1px solid rgba(212, 168, 83, 0.25);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cta-reminder-text {
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 500;
  color: var(--text-dark); line-height: 1.4;
  margin: 0; flex: 1 1 320px;
}
.cta-reminder-dark {
  background: rgba(212, 168, 83, 0.06);
  border-color: rgba(212, 168, 83, 0.2);
}
.cta-reminder-dark .cta-reminder-text { color: var(--text); }
@media (max-width: 640px) {
  .cta-reminder {
    padding: 28px 24px;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cta-reminder-text { font-size: 1.1rem; }
  .cta-reminder .btn-cta { justify-content: center; }
}

/* ============================================================
   ALTERNANCE FOND CLAIR / FOND SOMBRE — overrides lisibilité
   Plan des sections (V2) :
     hero (dark) → for-who (light) → gallery (dark) →
     why-guru (light) → trust (dark + watermark) → faq (light) → devis (dark)
   ============================================================ */

/* --- why-guru sur fond clair --- */
.section-light .why-card {
  background: #ffffff;
  border-color: var(--border-light);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.section-light .why-card:hover {
  border-color: var(--accent-dark);
  box-shadow: 0 18px 36px rgba(0,0,0,0.08);
}
.section-light .why-card h3 { color: var(--text-dark); }
.section-light .why-card p { color: var(--text-dark-muted); }
.section-light .why-icon {
  background: rgba(212, 168, 83, 0.14);
  border-color: rgba(212, 168, 83, 0.35);
  color: var(--accent-dark);
}

/* --- for-who sur fond clair --- */
.section-light .for-who-card {
  background: #ffffff;
  border-color: var(--border-light);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.section-light .for-who-card:hover {
  border-color: var(--accent-dark);
  box-shadow: 0 18px 36px rgba(0,0,0,0.08);
}
.section-light .for-who-card h3 { color: var(--text-dark); }
.section-light .for-who-card p  { color: var(--text-dark-muted); }
.section-light .for-who-card .card-icon {
  background: rgba(212, 168, 83, 0.14);
  border-color: rgba(212, 168, 83, 0.35);
  color: var(--accent-dark);
}
.section-light .for-who-note {
  color: var(--text-dark-muted);
  border-color: var(--border-light);
  background: rgba(0,0,0,0.02);
}

/* --- FAQ sur fond clair --- */
.section-light .faq-item { border-bottom-color: var(--border-light); }
.section-light .faq-question { color: var(--text-dark); }
.section-light .faq-question:hover { color: var(--accent-dark); }
.section-light .faq-answer p { color: var(--text-dark-muted); }
.section-light .faq-question .faq-icon {
  background: rgba(212, 168, 83, 0.14);
  color: var(--accent-dark);
}
.section-light .faq-item.open .faq-icon {
  background: var(--accent-dark);
  color: #fff;
}

/* --- section-tag sur fond clair : accent foncé pour lisibilité --- */
.section-light .section-tag { color: var(--accent-dark); }

/* ============================================================
   THEME CRÈME — overrides de lisibilité des sections inversées
   En thème crème, .section-light devient un bandeau bleu marine.
   Les overrides ci-dessus (pensés pour texte sombre sur carte blanche)
   font apparaître du crème sur du blanc — illisible. On rebascule ici. */

/* Cards for-who & why : fond crème pur (#FBEFDF — palette Valentin), titre +
   texte en bleu marine. On NE passe PAS par var(--bg-card) ici, parce que cette
   variable doit rester en crème "très clair" (#FFF7EA) pour les autres composants
   (form-wrapper, etc.). Seuls ces 2 blocs basculent en crème pur.
   On supprime aussi le contour 1px (trop visible/pixelisé sur bandeau bleu) —
   l'ombre douce suffit à détacher la carte du fond. */
body.theme-cream .section-light .for-who-card,
body.theme-cream .section-light .why-card {
  background: #FBEFDF;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(20, 47, 138, 0.10);
}
body.theme-cream .section-light .for-who-card:hover,
body.theme-cream .section-light .why-card:hover {
  border-color: transparent;                        /* on garde la suppression au hover aussi */
  box-shadow: 0 22px 44px rgba(20, 47, 138, 0.20);
}
body.theme-cream .section-light .for-who-card h3,
body.theme-cream .section-light .why-card h3 { color: var(--accent); }
body.theme-cream .section-light .for-who-card p,
body.theme-cream .section-light .why-card p   { color: var(--text-muted); }

/* Le card-image-overlay fade vers le bg de la carte — qu'il faut suivre,
   sinon on voit une coupure entre l'image et la zone texte.
   Stops calibrés (mai 2025, retour client) pour laisser la photo bien visible :
   - 0 → 68 %  : photo intacte (~150px sur 220px de hauteur de carte)
   - 68 → 96 % : fondu progressif vers le crème
   - 96 → 100 %: solid #FBEFDF qui sert de "pont" propre vers .card-content
                 (masque la ligne 1px qui apparaissait pendant le hover scale).
   Couleur explicite (#FBEFDF) pour rester aligné avec le bg crème pur des cartes
   et NON la variable --bg-card (qui reste en #FFF7EA pour les autres composants). */
body.theme-cream .section-light .for-who-card .card-image-overlay,
body.theme-cream .section-light .why-card .card-image-overlay {
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 78%,
    #FBEFDF 98%,
    #FBEFDF 100%);
}

/* Bridge entre l'image et la partie texte : la gradient overlay vit DANS
   .card-image (clippée à height:220px), donc pendant le `scale(1.05)` de l'image
   il pouvait subsister 1-2px d'image visibles au bord — le temps que le navigateur
   recompose. On fait chevaucher .card-content sur les 8 derniers pixels de
   .card-image avec un fond crème opaque : peu importe le micro-décalage de
   l'animation, il y a toujours 8px de masque solide qui couvrent la jonction.
   Padding-top resserré (mai 2025, retour client : "la zone blanche au-dessus
   des pictos est trop grande") — passe de 42 à 28 px pour rapprocher visuellement
   le picto du bas de la photo.
   Couleur explicite (#FBEFDF) pour rester alignée avec le bg crème pur des cartes. */
body.theme-cream .section-light .for-who-card .card-content,
body.theme-cream .section-light .why-card .card-content {
  position: relative;
  z-index: 2;
  background: #FBEFDF;
  margin-top: -6px;
  padding-top: 22px;            /* resserré au max pour rapprocher le picto du bas de la photo */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* on respecte les coins arrondis */
}

/* Pastilles d'icônes : bleu translucide + glyphe bleu marine */
body.theme-cream .section-light .for-who-card .card-icon,
body.theme-cream .section-light .why-icon {
  background: rgba(20, 47, 138, 0.10);
  border-color: rgba(20, 47, 138, 0.22);
  color: var(--accent);
}

/* "Nous ne faisons pas de petits événements" : note crème sur bandeau bleu */
body.theme-cream .section-light .for-who-note {
  background: rgba(251, 239, 223, 0.08);
  border-color: rgba(251, 239, 223, 0.22);
  color: var(--text-dark);
}
body.theme-cream .section-light .for-who-note svg { color: var(--text-dark); }

/* FAQ sur bandeau bleu : titre/sous-titre déjà en crème via section-light.
   Ici on force les éléments interactifs à rester lisibles. */
body.theme-cream .section-light .faq-item { border-bottom-color: rgba(251, 239, 223, 0.18); }
body.theme-cream .section-light .faq-question { color: var(--text-dark); }              /* crème */
body.theme-cream .section-light .faq-question:hover { color: #ffffff; }
body.theme-cream .section-light .faq-answer p { color: var(--text-dark-muted); }        /* crème désaturé */
body.theme-cream .section-light .faq-question .faq-icon {
  background: rgba(251, 239, 223, 0.14);
  color: var(--text-dark);                                                              /* crème */
}
body.theme-cream .section-light .faq-item.open .faq-icon {
  background: var(--text-dark);                                                         /* crème */
  color: var(--accent);                                                                 /* bleu marine */
}

/* section-tag (label "INFORMATIONS" / "POURQUOI GURU") sur bandeau bleu */
body.theme-cream .section-light .section-tag { color: var(--text-dark-muted); }

/* Watermark logo en thème crème : on bascule sur le SVG bleu pour le contraste,
   et on réduit l'opacité (sinon le bleu sur crème devient trop "tâche") */
body.theme-cream .has-logo-watermark::before {
  background-image: url('images/logo-icone-bleu.svg');
  opacity: 0.05;
  filter: drop-shadow(0 0 40px rgba(20, 47, 138, 0.04));
}

/* Fix anti-aliasing : la ligne ténue qui apparaissait au bas de l'image
   pendant le hover de la carte (scale 1.05) venait du sub-pixel rendering
   au bord du conteneur overflow:hidden. On force un layer GPU + on étend
   légèrement le clip pour éviter le bord visible. */
.for-who-card .card-image,
.why-card .card-image {
  background: var(--bg-card); /* fallback derrière l'image scalée */
}
/* En thème crème : on aligne le fallback sur le crème pur des cartes
   (#FBEFDF) au lieu du var(--bg-card) qui reste en #FFF7EA pour les autres
   composants. */
body.theme-cream .for-who-card .card-image,
body.theme-cream .why-card .card-image {
  background: #FBEFDF;
}
.for-who-card .card-image img,
.why-card .card-image img {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.for-who-card:hover .card-image img,
.why-card:hover .card-image img {
  transform: translate3d(0, 0, 0) scale(1.05);
}

/* --- TRUST sur fond sombre : inverser logos + cartes stats --- */
#trust.section-dark .logo-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text-muted);
}
#trust.section-dark .logo-item:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}
/* Logos image (silhouette monochrome) sur trust en thème sombre :
   on monte la couleur sur var(--text) (crème) — l'override sur .logo-item
   plus haut imposait var(--text-muted) (gris) qui rendait les SVG ternes.
   Cette règle DOIT venir APRÈS la règle .logo-item ci-dessus pour gagner
   à spécificité égale (last-rule-wins). */
#trust.section-dark .logo-item--svg { color: var(--text); }
#trust.section-dark .logo-item--svg:hover { color: var(--accent); }
#trust.section-dark .stat-card {
  background: var(--bg-card);
  border-color: var(--border);
}
#trust.section-dark .stat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}
#trust.section-dark .stat-card .stat-label { color: var(--text-muted); }

/* --- WATERMARK logo SVG grand format ---
   Bonne pratique : logo blanc → fond sombre (contraste sobre, effet premium).
   Sur fond clair, un logo blanc disparaîtrait ; un logo noir serait trop dur.
   On place l'icône en très grand derrière le contenu, avec 6% d'opacité. */
.has-logo-watermark { position: relative; overflow: hidden; }
.has-logo-watermark > .container { position: relative; z-index: 1; }
.has-logo-watermark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(780px, 80vw);
  height: min(780px, 80vw);
  background: url('images/logo-icone-blanc.svg') no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 40px rgba(255,255,255,0.05));
}
@media (max-width: 768px) {
  .has-logo-watermark::before {
    width: 85vw; height: 85vw;
    opacity: 0.05;
  }
}