/* ═══════════════════════════════════════════════════════════
   CYNERA — Design System partagé (Phase 2)
   ─────────────────────────────────────────────────────────
   Source unique pour : tokens, typo, boutons, nav, footer,
   sections, cartes. À inclure AVANT les <style> spécifiques
   de chaque page (qui peuvent surcharger localement).
   ═══════════════════════════════════════════════════════════ */

/* ─── FONT SECONDAIRE — Instrument Serif Italic (accents) ─ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&display=swap');

/* ─── TOKENS CANONIQUES ────────────────────────────────── */
:root{
  /* Couleurs de marque */
  --navy:        #0D1B4B;
  --navy-deep:   #070E2B;
  --blue:        #4A7BF7;
  --blue-dark:   #2952D9;

  /* Surfaces */
  --bg:          #F5F5F7;
  --warm:        #FDFAF6;
  --surface:     #FFFFFF;

  /* Encre */
  --ink:         #1A1A2E;
  --muted:       #6F6F82;
  --dim:         #9A9AAB;

  /* Bordures */
  --border:      #E9E6DF;
  --border-soft: #F0EDE7;

  /* Radius */
  --r-sm:        12px;
  --r-md:        18px;
  --r-lg:        28px;
  --r-xl:        36px;
  --r-pill:      100px;

  /* Espacements */
  --s1:           8px;
  --s2:          16px;
  --s3:          24px;
  --s4:          40px;
  --s5:          64px;
  --s6:          96px;

  /* Ombres */
  --shadow-sm:   0 4px 16px rgba(13,27,75,.06);
  --shadow-md:   0 12px 32px rgba(13,27,75,.09);
  --shadow-lg:   0 24px 60px rgba(13,27,75,.12);

  /* Type */
  --font:        'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-serif:  'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Easing */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);

  /* Alias legacy (compat index.html) */
  --sky:         var(--blue);
  --sky-light:   #EEF3FF;
  --text:        var(--ink);
}

/* ─── RESET MINIMAL ────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--surface);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* overflow-x:clip empêche un débordement horizontal SANS bloquer le scroll vertical
     (contrairement à hidden qui crée un containing block et peut casser iOS).
     Fallback hidden pour les très vieux navigateurs : géré via @supports plus bas. */
  overflow-x:clip;
}
@supports not (overflow-x: clip) {
  body{ overflow-x:hidden; }
}
a{ color:inherit; text-decoration:none; }
img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }

/* ─── ANTI-DÉBORDEMENT MOBILE & TOUCH TARGETS ─────────── */
@media (max-width: 600px) {
  /* IMPORTANT : on NE met PAS overflow-x:hidden ni max-width:100vw sur html/body
     en mobile — ça casse le scroll vertical sur iOS Safari (la page se bloque
     en bas). Le débordement horizontal est déjà géré par overflow-x:clip sur
     body (bloc de base au-dessus). */

  /* Touch targets boutons : min 44x44 (WCAG) */
  .btn, .btn-primary, .btn-outline, .btn-ghost, .btn-white, .btn-dark,
  .cyn-nav-cta, .cyn-mobile-cta, button[type="submit"] {
    min-height: 44px;
  }
  /* Liens de navigation mobile : confort tactile */
  .cyn-nav-links > li > a,
  .cyn-mobile-nav a { padding-top: 12px; padding-bottom: 12px; }
  /* Empêche les éléments très larges de pousser le layout */
  pre, code, table { max-width: 100%; overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════
   AXE 1 — MOBILE RESPIRE
   Plus d'air, plus de rythme vertical, headings plus généreux.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  body { line-height: 1.7; }

  /* Headings plus grands (effet magazine, lecture confortable) */
  h1, .h1, .hero h1, .s-hero h1 {
    font-size: clamp(36px, 9vw, 52px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.5px !important;
  }
  h2, .h2 {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
  }
  h3, .h3 { font-size: clamp(20px, 5vw, 26px) !important; }

  /* Sections : padding vertical généreux pour respiration */
  section, .section {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  /* Padding horizontal légèrement généreux */
  section, .section, .container, .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Paragraphes : tailles confortables sur petit écran */
  p, li { font-size: 16px; }

  /* Footer : padding mobile aéré */
  .cyn-footer { padding: 56px 24px 32px; }

  /* Cartes : padding intérieur plus confort */
  [class*="card"] { padding: 24px !important; }
}

/* ─── STICKY CTA MOBILE — barre flottante bas ────────── */
.cyn-mobile-cta-bar{
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-top:1px solid rgba(13,27,75,.08);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  z-index:999;
  transform:translateY(120%);
  transition:transform .35s var(--ease-out);
  box-shadow:0 -8px 32px rgba(13,27,75,.06);
}
.cyn-mobile-cta-bar.visible{ transform:translateY(0); }
.cyn-mobile-cta-bar .btn,
.cyn-mobile-cta-bar a{
  display:flex; width:100%;
  justify-content:center; align-items:center; gap:10px;
  padding:14px 20px;
  background:var(--blue); color:#fff;
  font-size:15px; font-weight:700;
  border-radius:var(--r-pill);
  text-decoration:none;
  box-shadow:0 6px 18px rgba(74,123,247,.32);
}
.cyn-mobile-cta-bar a:active{ transform:scale(.98); }
@media (max-width: 700px) {
  .cyn-mobile-cta-bar{ display:block; }
  /* Réserve l'espace au bas du body pour que le footer ne passe pas dessous */
  body{ padding-bottom: 76px; }
}

/* ─── TYPOGRAPHIE UTILITAIRE ──────────────────────────── */
/* Accent italic serif — pour 1-2 mots dans un H1/H2 (signature visuelle) */
.cyn-serif-i,
.serif-i{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
}
/* Tabular nums : chiffres alignés en colonne (compteurs, prix, stats) */
.cyn-nums,
[data-cyn-count],
.cyn-counter,
.num,
.stat-num{ font-variant-numeric:tabular-nums; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.4px;
  color:var(--blue);
}
.eyebrow::before{
  content:''; width:18px; height:1px; background:var(--blue);
}
.eyebrow.on-dark{ color:#9db8fb; }
.eyebrow.on-dark::before{ background:#9db8fb; }

/* Pill badge — version proéminente pour les heros (notamment sur fond navy) */
.cyn-hero-badge,
.hero-badge,
.s-hero-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(74,123,247,.14);
  border:1px solid rgba(74,123,247,.25);
  color:#9db8fb;
  font-size:12px; font-weight:700;
  padding:7px 14px;
  border-radius:var(--r-pill);
  text-transform:uppercase; letter-spacing:1.2px;
  margin-bottom:var(--s3);
}

/* ─── BOUTONS UNIFIÉS ─────────────────────────────────── */
.btn,
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-white{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px;
  font-size:15px; font-weight:700;
  font-family:inherit;
  border-radius:var(--r-pill);
  border:1.5px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .25s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn-primary{
  background:var(--blue); color:#fff;
  box-shadow:0 6px 20px rgba(74,123,247,.28);
}
.btn-primary:hover{
  background:var(--blue-dark);
  transform:translateY(-1px);
  box-shadow:0 12px 30px rgba(74,123,247,.36);
}
.btn-dark{
  background:var(--navy); color:#fff;
  box-shadow:0 6px 20px rgba(13,27,75,.22);
}
.btn-dark:hover{
  background:var(--navy-deep);
  transform:translateY(-1px);
  box-shadow:0 12px 30px rgba(13,27,75,.32);
}
.btn-outline,
.btn-ghost{
  background:transparent; color:var(--navy);
  border-color:var(--border);
}
.btn-outline:hover,
.btn-ghost:hover{
  background:var(--bg);
  border-color:var(--navy);
}
.btn-white{
  background:#fff; color:var(--navy);
  border-color:#fff;
}
.btn-white:hover{
  background:var(--bg);
  transform:translateY(-1px);
}
/* Micro-interaction : flèche qui glisse au hover */
.btn svg,
.btn-primary svg,
.btn-outline svg,
.btn-ghost svg,
.btn-white svg,
.btn-dark svg{ transition:transform .2s var(--ease); }
.btn:hover svg,
.btn-primary:hover svg,
.btn-outline:hover svg,
.btn-ghost:hover svg,
.btn-white:hover svg,
.btn-dark:hover svg{ transform:translateX(3px); }

/* ═══════════════════════════════════════════════════════════
   NAV UNIVERSELLE — .cyn-nav-wrap (compat 34 pages existantes)
   ═══════════════════════════════════════════════════════════ */
.cyn-nav-wrap{
  position:sticky; top:0; z-index:1000; width:100%;
  pointer-events:none;
  padding:12px 24px 0;
  display:flex; justify-content:center;
}
.cyn-nav{
  pointer-events:all;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(13,27,75,.08);
  border-radius:var(--r-pill);
  padding:6px 8px 6px 18px;
  box-shadow:var(--shadow-sm);
  max-width:100%;
  transition:box-shadow .25s, border-color .25s;
}
.cyn-nav:hover{ box-shadow:var(--shadow-md); }

.cyn-nav-logo{
  display:flex; align-items:center; gap:8px;
  font-size:18px; font-weight:800; letter-spacing:-.5px;
  color:#0a0a0a;
  padding:4px 6px 4px 0;
  flex-shrink:0;
}
.cyn-nav-logo span.cyn-logo-ra{ color:var(--blue); }

.cyn-nav-links{
  list-style:none;
  display:flex; align-items:center; gap:0;
  flex-wrap:nowrap;
}
.cyn-nav-links > li{ position:relative; }
.cyn-nav-links > li > a{
  display:block;
  padding:8px 14px;
  font-size:14px; font-weight:500;
  color:#4a4a5e;
  border-radius:var(--r-pill);
  transition:color .15s, background .15s;
  white-space:nowrap;
}
.cyn-nav-links > li > a:hover{ color:var(--navy); background:rgba(0,0,0,.04); }
.cyn-nav-links > li > a.active-link{ color:var(--navy); font-weight:600; background:rgba(74,123,247,.06); }
.cyn-nav-links > li > a.cyn-has-dropdown::after{
  content:''; display:inline-block;
  width:5px; height:5px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s;
  margin-left:6px;
  vertical-align:middle;
}
.cyn-nav-links > li:hover > a.cyn-has-dropdown::after{
  transform:rotate(-135deg) translateY(0);
}

.cyn-dropdown{
  position:absolute; top:calc(100% + 8px); left:0;
  background:#fff;
  border-radius:var(--r-md);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow-lg);
  z-index:2000;
  padding:12px;
  width:460px;
  display:grid; grid-template-columns:1fr 1fr; gap:3px;
  opacity:0; pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .18s, transform .18s;
}
.cyn-dropdown::before{
  content:''; position:absolute; top:-10px; left:0; right:0; height:12px;
}
.cyn-nav-links > li:hover .cyn-dropdown,
.cyn-nav-links > li:focus-within .cyn-dropdown{
  opacity:1; pointer-events:all; transform:translateY(0);
}
.cyn-dropdown-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  transition:background .12s;
}
.cyn-dropdown-item:hover{ background:rgba(0,0,0,.04); }
.cyn-dropdown-icon{
  width:34px; height:34px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(74,123,247,.16), rgba(74,123,247,.05));
  border:1px solid rgba(74,123,247,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.cyn-dropdown-text{ display:flex; flex-direction:column; gap:1px; }
.cyn-dropdown-title{ font-size:13px; font-weight:600; color:var(--navy); }
.cyn-dropdown-desc{ font-size:11.5px; color:#999; line-height:1.4; }

.cyn-nav-cta{
  display:inline-flex; align-items:center;
  padding:9px 18px;
  background:var(--navy); color:#fff !important;
  font-size:13px; font-weight:600;
  border-radius:var(--r-pill);
  margin-left:8px;
  transition:background .15s, transform .2s;
  flex-shrink:0;
}
.cyn-nav-cta:hover{ background:var(--blue-dark); transform:translateY(-1px); }

.cyn-hamburger{
  display:none;
  background:none; border:none; cursor:pointer;
  padding:8px;
  flex-direction:column; gap:4px;
}
.cyn-hamburger span{ display:block; width:22px; height:2px; background:var(--navy); border-radius:2px; }

.cyn-mobile{
  position:fixed; inset:0;
  background:rgba(13,27,75,.5);
  z-index:9998;
  opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.cyn-mobile.cyn-open{ opacity:1; pointer-events:all; }
.cyn-mobile-inner{
  position:absolute; top:0; right:0;
  width:min(360px, 90vw); height:100%;
  background:#fff;
  padding:24px 20px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
}
.cyn-mobile-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.cyn-mobile-close{ background:none; border:none; font-size:26px; cursor:pointer; color:#666; padding:4px; }
.cyn-mobile-section{
  font-size:11px; font-weight:700;
  color:var(--blue);
  text-transform:uppercase; letter-spacing:1.5px;
  margin:14px 0 4px;
}
.cyn-mobile-nav a{
  display:flex; align-items:center; gap:10px;
  padding:12px 8px;
  font-size:15px; color:var(--navy);
  border-radius:8px;
}
.cyn-mobile-nav a:hover{ background:rgba(74,123,247,.08); }
.cyn-mobile-cta{
  margin-top:20px;
  display:block;
  background:var(--blue); color:#fff !important;
  text-align:center;
  padding:14px;
  border-radius:var(--r-sm);
  font-size:15px; font-weight:700;
}

@media (max-width:1100px){
  .cyn-nav-links{ display:none; }
  .cyn-hamburger{ display:flex; }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER UNIVERSEL — .cyn-footer (variante B · Mid)
   Markup attendu :
   <footer class="cyn-footer">
     <div class="cyn-footer-inner">
       <div class="cyn-footer-top">
         <div class="cyn-footer-brand">...</div>
         <div class="cyn-footer-col">...</div>
         <div class="cyn-footer-col">...</div>
         <div class="cyn-footer-col">...</div>
       </div>
       <div class="cyn-footer-bot">...</div>
     </div>
   </footer>
   ═══════════════════════════════════════════════════════════ */
.cyn-footer{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  padding:64px 24px 32px;
  margin-top:var(--s6);
}
.cyn-footer-inner{ max-width:1100px; margin:0 auto; }
.cyn-footer-top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cyn-footer-brand .logo{
  display:inline-flex; align-items:center; gap:9px;
  font-size:22px; font-weight:800; letter-spacing:-.02em;
  margin-bottom:14px;
  color:#fff;          /* override toute règle locale .logo (ex. index.html navy) */
  text-decoration:none;
}
.cyn-footer-brand .logo svg{ flex-shrink:0; }
.cyn-footer-brand .logo > span{ color:#fff; }
.cyn-footer-brand .logo .cyn-logo-ra{ color:var(--blue); }
.cyn-footer-brand p{
  color:rgba(255,255,255,.6);
  font-size:13.5px; line-height:1.6;
  max-width:280px;
  margin-bottom:18px;
}
.cyn-footer-contact{
  font-size:13px;
  color:rgba(255,255,255,.55);
  line-height:1.8;
}
.cyn-footer-contact a{
  color:inherit;
  transition:color .15s;
}
.cyn-footer-contact a:hover{ color:#fff; }
.cyn-footer-col h4{
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.4px;
  color:var(--blue);
  margin-bottom:16px;
}
.cyn-footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.cyn-footer-col a{
  color:rgba(255,255,255,.7);
  font-size:13.5px;
  transition:color .15s;
}
.cyn-footer-col a:hover{ color:#fff; }
.cyn-footer-bot{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
  padding-top:24px;
  font-size:12.5px;
  color:rgba(255,255,255,.45);
}
.cyn-footer-bot .legal{ display:flex; gap:20px; flex-wrap:wrap; }
.cyn-footer-bot a{ transition:color .15s; }
.cyn-footer-bot a:hover{ color:#fff; }

@media (max-width:820px){
  .cyn-footer-top{ grid-template-columns:1fr 1fr; gap:32px; }
  .cyn-footer-brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .cyn-footer-top{ grid-template-columns:1fr; gap:28px; }
  .cyn-footer-bot{ flex-direction:column; text-align:center; }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 3 — POLISH & MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════ */

/* ─── CTA nav : léger scale au hover (subtil) ─────────── */
.cyn-nav-cta{ will-change:transform; }
.cyn-nav-cta:active{ transform:translateY(0); transition-duration:.08s; }

/* ─── Dropdown items : glissement subtil au hover ────── */
.cyn-dropdown-item{
  position:relative;
  transition:background .15s var(--ease), padding .2s var(--ease);
}
.cyn-dropdown-item:hover{ padding-left:16px; }
.cyn-dropdown-item .cyn-dropdown-icon{ transition:transform .25s var(--ease); }
.cyn-dropdown-item:hover .cyn-dropdown-icon{ transform:scale(1.08) rotate(-3deg); }

/* ─── Footer : liens avec underline animé ─────────────── */
.cyn-footer-col a,
.cyn-footer-contact a,
.cyn-footer-bot a{
  position:relative;
  display:inline-block;
}
.cyn-footer-col a::after,
.cyn-footer-contact a::after,
.cyn-footer-bot a::after{
  content:''; position:absolute;
  left:0; bottom:-2px;
  width:0; height:1px;
  background:#fff;
  transition:width .3s var(--ease-out);
}
.cyn-footer-col a:hover::after,
.cyn-footer-contact a:hover::after,
.cyn-footer-bot a:hover::after{ width:100%; }

/* ─── Focus rings — élégants & cohérents ─────────────── */
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
  transition:outline-offset .15s var(--ease);
}
.cyn-nav a:focus-visible,
.cyn-nav button:focus-visible{ outline-offset:1px; }
button:focus-visible{ outline-offset:2px; }

/* ─── Sélection texte aux couleurs de marque ────────── */
::selection{ background:rgba(74,123,247,.22); color:var(--navy); }

/* ═══════════════════════════════════════════════════════════
   UTILITAIRES OPT-IN (à ajouter aux éléments quand on retouche
   une page — donnent du wow-effect sans risque)
   ═══════════════════════════════════════════════════════════ */

/* Hover lift — pour les cartes (.cyn-lift) */
.cyn-lift{
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  will-change:transform;
}
.cyn-lift:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}

/* Image hover-zoom (.cyn-zoom — applique sur un wrapper) */
.cyn-zoom{ overflow:hidden; border-radius:var(--r-md); }
.cyn-zoom img,
.cyn-zoom svg{ transition:transform .5s var(--ease-out); }
.cyn-zoom:hover img,
.cyn-zoom:hover svg{ transform:scale(1.04); }

/* Shimmer subtil sur un mot/heading (.cyn-shine) */
.cyn-shine{
  background:linear-gradient(110deg, currentColor 40%, rgba(74,123,247,.85) 50%, currentColor 60%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:cyn-shine 4.5s linear infinite;
}
@keyframes cyn-shine{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* Compteur animé — voir cynera.js (data-cyn-count="98") */
[data-cyn-count]{ font-variant-numeric:tabular-nums; }

/* Lien texte avec underline animé — .cyn-link */
.cyn-link{
  position:relative;
  color:var(--blue);
  font-weight:600;
  padding-bottom:2px;
}
.cyn-link::after{
  content:''; position:absolute;
  left:0; bottom:0;
  width:100%; height:1.5px;
  background:var(--blue);
  transform:scaleX(.4); transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.cyn-link:hover::after{ transform:scaleX(1); }

/* ─── MAGNETIC BUTTONS (axe 5) ────────────────────────── */
/* Activé automatiquement par cynera.js sur .btn-primary, .cyn-nav-cta,
   .btn-accent, .btn-dark. Effet "le bouton suit le curseur" subtil (~4px). */
.btn,.btn-primary,.btn-accent,.btn-dark,.btn-outline,.btn-ghost,.btn-white,.cyn-nav-cta{
  will-change:transform;
}
.cyn-magnetic{
  transition:transform .25s var(--ease-out) !important;
}
.cyn-magnetic:hover{
  /* La translation se fait via inline-style depuis JS — on garde juste l'easing */
}

/* ─── SPOTLIGHT CARDS (.cyn-spot) — halo qui suit le curseur ─ */
.cyn-spot{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.cyn-spot::before{
  content:''; position:absolute;
  top:var(--cyn-spot-y, 50%); left:var(--cyn-spot-x, 50%);
  width:420px; height:420px;
  background:radial-gradient(circle, rgba(74,123,247,.18), transparent 60%);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .4s var(--ease-out);
  pointer-events:none;
  z-index:-1;
}
.cyn-spot:hover::before{ opacity:1; }

/* ─── PARALLAX MARKER — opt-in via data-cyn-parallax ──── */
[data-cyn-parallax]{ will-change:transform; }

/* ═══════════════════════════════════════════════════════════
   AXE 4 — PREUVE SOCIALE (composants réutilisables)
   ═══════════════════════════════════════════════════════════ */

/* ─── BANDE STATS ANIMÉES ────────────────────────────── */
.cyn-stats-band{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  padding:48px 32px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  max-width:1100px; margin:0 auto;
}
.cyn-stat{
  text-align:center;
  padding:8px 16px;
  border-right:1px solid var(--border);
}
.cyn-stat:last-child{ border-right:none; }
.cyn-stat-num{
  font-size:clamp(36px, 4vw, 48px);
  font-weight:800;
  letter-spacing:-1.5px;
  color:var(--navy);
  line-height:1;
  font-variant-numeric:tabular-nums;
  margin-bottom:8px;
}
.cyn-stat-num .unit{
  color:var(--blue);
  font-size:.7em;
  margin-left:2px;
}
.cyn-stat-label{
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-weight:600;
}
@media (max-width: 820px){
  .cyn-stats-band{ grid-template-columns:repeat(2,1fr); padding:32px 16px; }
  .cyn-stat{ padding:20px 12px; border-right:none; border-bottom:1px solid var(--border); }
  .cyn-stat:nth-last-child(-n+2){ border-bottom:none; }
  .cyn-stat:nth-child(odd){ border-right:1px solid var(--border); }
}

/* ─── TÉMOIGNAGES ────────────────────────────────────── */
.cyn-testimonials{
  padding:88px 24px;
  background:var(--warm, #FDFAF6);
}
.cyn-testimonials-inner{
  max-width:1100px; margin:0 auto;
}
.cyn-testimonials-head{
  text-align:center;
  max-width:640px; margin:0 auto 56px;
}
.cyn-testimonials-head h2{
  font-size:clamp(32px, 4vw, 44px);
  font-weight:800;
  letter-spacing:-1.4px;
  color:var(--navy);
  margin-top:12px; margin-bottom:14px;
  line-height:1.1;
}
.cyn-testimonials-head p{
  font-size:17px;
  color:var(--muted);
  line-height:1.6;
}
.cyn-testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.cyn-testimonial{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:32px 28px;
  display:flex; flex-direction:column; gap:24px;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
}
.cyn-testimonial:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(74,123,247,.25);
}
.cyn-testimonial-quote{
  font-size:15.5px;
  color:var(--ink);
  line-height:1.65;
  font-weight:500;
  position:relative;
  flex:1;
}
.cyn-testimonial-quote::before{
  content:'"';
  position:absolute;
  top:-18px; left:-8px;
  font-family:var(--font-serif);
  font-size:56px;
  color:var(--blue);
  opacity:.3;
  font-weight:400;
  line-height:1;
}
.cyn-testimonial-author{
  display:flex; align-items:center; gap:12px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.cyn-testimonial-avatar{
  width:44px; height:44px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--blue), var(--navy));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.5px;
  flex-shrink:0;
}
.cyn-testimonial-info{ display:flex; flex-direction:column; gap:1px; }
.cyn-testimonial-name{ font-size:14px; font-weight:700; color:var(--navy); }
.cyn-testimonial-role{ font-size:12.5px; color:var(--muted); }
@media (max-width: 880px){
  .cyn-testimonials{ padding:64px 20px; }
  .cyn-testimonials-grid{ grid-template-columns:1fr; gap:14px; }
}

/* ─── LOGOS DE CONFIANCE ─────────────────────────────── */
.cyn-trust-logos{
  padding:48px 24px;
  text-align:center;
  border-top:1px solid var(--border);
}
.cyn-trust-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2.4px;
  color:var(--muted);
  margin-bottom:24px;
}
.cyn-trust-row{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:48px;
  max-width:1000px; margin:0 auto;
  opacity:.55;
}
.cyn-trust-row > span{
  font-size:18px;
  font-weight:700;
  letter-spacing:-.5px;
  color:var(--ink);
  text-transform:none;
  filter:grayscale(1);
  transition:filter .3s, opacity .3s;
}
.cyn-trust-row > span:hover{ filter:grayscale(0); opacity:1; }