/* ==========================================================
   PIONEER INVEST — VITRINE / DESIGN SYSTEM v2
   Palette & typo héritées des dashboards (inchangées).
   Tout le reste — layout, composants, motion — est repensé.
   ========================================================== */

/* Polices chargées via <link rel="preconnect"> + <link rel="stylesheet"> dans le <head> de
   chaque page (voir includes/header.php, includes/app-header-*.php, etc.) plutôt qu'ici via
   @import — un @import en tête de CSS force le navigateur à télécharger et parser toute la
   feuille de style avant même de découvrir qu'il doit aller chercher les polices, ce qui
   retarde nettement leur affichage (le visiteur voit la police système de repli pendant ce
   temps). Voir aussi la pile de secours ci-dessous, plus soignée qu'un simple "sans-serif". */

:root{
  /* --- Surfaces (dark, défaut) — palette bleu/vert/lime Pioneer Invest v2 --- */
  --bg-base:      #101820;
  --bg-surface:   #162029;
  --bg-card:      #1e2933;
  --bg-hover:     #26323f;
  --bg-raised:    #313e4c;

  /* --- Accent : vert de marque (texte, icônes, bordures, glow) — même valeur que --green,
     décliné ici en famille accent/light/dim/fill pour usage UI (focus, hover, remplissages) --- */
  --accent:       #7cb65c;
  --accent-light: #a0c28d;
  --accent-dim:   #294719;
  --accent-fill:  #426f29;
  --accent-glow:  rgba(124,182,92,.18);

  /* --- CTA : lime, réservé aux boutons principaux et badges à forte visibilité.
     Trop clair pour du texte blanc lisible : les boutons CTA utilisent un
     texte sombre fixe (--cta-text), cf. audit de contraste WCAG. --cta-dim
     est un survol assombri, distinct de --lime-dim (fond de badge fixe). */
  --cta-dim:       #8ea819;
  --cta-text:      #101820;
  --gradient-cta:  linear-gradient(90deg, var(--accent), var(--lime));
  --gradient-hero: linear-gradient(90deg, #101820, #7cb65c);

  /* --- Statuts ---
     Fonds "-dim" volontairement opaques et fixes (indépendants du thème
     clair/foncé) : un badge de statut (succès/erreur/alerte/info) doit
     rester lisible qu'on soit en dark ou en light mode — voir l'audit
     de contraste WCAG qui a motivé ce choix. */
  --green:      #7cb65c;
  --green-dim:  #16240f;
  --lime:       #c4e23a;
  --lime-dim:   #232905;
  --red:        #ef4444;
  --red-dim:    #23100f;
  --amber:      #f59e0b;
  --amber-dim:  #241d10;
  --blue:       #38bdf8;
  --blue-dim:   #0e191f;

  /* --- Texte --- */
  --text-primary:   #f4f1eb;
  --text-secondary: #949ea8;
  --text-muted:     #8a949e;

  /* --- Bordures --- */
  --border:         rgba(244,241,235,.08);
  --border-accent:  rgba(124,182,92,.32);

  /* --- Typo --- */
  --font-display: 'Archivo', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Archivo', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* --- Radii / spacing : plus carré, façon Bullion --- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --container: 1240px;

  /* --- Elevation --- */
  --shadow-soft: 0 14px 44px -10px rgba(0,0,0,.42);
  --shadow-deep: 0 30px 70px -20px rgba(0,0,0,.55);
  --shadow-glow: 0 0 0 1px rgba(124,182,92,.18), 0 20px 50px -20px rgba(94,148,64,.4);

  --transition: .2s ease;

  /* --- Motion tokens --- */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-soft:   cubic-bezier(.4,0,.2,1);
  --dur-fast:  .18s;
  --dur-med:   .35s;
  --dur-slow:  .7s;

  --mx: 50%; --my: 50%; /* mouse-tracked spotlight coords, set by JS */
}

[data-theme="light"]{
  --bg-base:    #e8f1f8;
  --bg-surface: #f5f9fb;
  --bg-card:    #ffffff;
  --bg-hover:   #ddebf5;
  --bg-raised:  #ffffff;

  /* --- Accent : vert de marque, décliné pour usage UI --- */
  --accent:       #5e9440;
  --accent-light: #6faa4d;
  --accent-dim:   #2b4a1a;
  --accent-fill:  #3d6627;
  --accent-glow:  rgba(94,148,64,.14);

  --cta-dim:       #6e850d;
  --cta-text:      #101820;
  --gradient-cta:  linear-gradient(90deg, var(--accent), var(--lime));
  --gradient-hero: linear-gradient(90deg, #e8f1f8, #a3c614);

  --green: #5e9440;
  --lime:  #a3c614;

  --text-primary:   #0f2133;
  --text-secondary: #3d4c5c;
  --text-muted:     #516070;
  --border:         rgba(15,33,51,.09);
  --border-accent:  rgba(94,148,64,.32);
  --shadow-soft: 0 14px 40px -12px rgba(13,33,44,.12);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; background:var(--bg-base); color:var(--text-primary);
  font-family:var(--font-body); font-size:18.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; transition:background var(--transition), color var(--transition);
  position:relative; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0; letter-spacing:-.015em; text-wrap:balance; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:inherit; }
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

:focus-visible{ outline:2px solid var(--accent-light); outline-offset:2px; border-radius:4px; }

/* Filet de sécurité : toute icône SVG sans classe explicite ne doit jamais s'afficher à sa taille intrinsèque */
svg[class=""]{ width:16px; height:16px; flex-shrink:0; vertical-align:-3px; }
.icon-inline{ width:15px; height:15px; flex-shrink:0; vertical-align:-2px; }
.badge svg{ width:12px; height:12px; flex-shrink:0; }
.article-callout{ display:flex; gap:10px; align-items:flex-start; }
.article-callout svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.hero-note{ display:flex; align-items:flex-start; gap:6px; }
.hero-note svg{ width:14px; height:14px; flex-shrink:0; margin-top:2px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--accent-fill); color:#fff; padding:10px 16px;
  border-radius:0 0 8px 0; z-index:1000;
}
.skip-link:focus{ left:0; }

/* ---------- Grain overlay : désactivé — Bullion est en flat design pur, sans texture ---------- */
.grain{ display:none; }

/* ---------- Layout helpers ---------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:860px; margin:0 auto; padding:0 24px; }
.section{ padding:84px 0 76px; position:relative; }
.section-tight{ padding:52px 0; }
/* Kicker façon Bullion : simple libellé coloré au-dessus du titre, pas de pastille */
.eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  margin-bottom:14px;
}
.eyebrow svg{ width:13px; height:13px; color:var(--accent-light); }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.split{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; max-width:none; }
.section-head h2{ font-size:clamp(28px,3.6vw,42px); margin-bottom:14px; }
.section-head p{ color:var(--text-secondary); font-size:18px; max-width:520px; }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Cards : flat design Bullion, ombre discrète, pas de glow ---------- */
.card{
  --sx:50%; --sy:50%;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; position:relative; isolation:isolate; overflow:hidden;
  transition:border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.card::before{ content:none; }
.card:hover{ border-color:var(--border-accent); transform:translateY(-4px); box-shadow:0 18px 34px -22px rgba(0,0,0,.5); }

/* ---------- Scroll reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.revealed{ opacity:1; transform:translateY(0); }
.js .reveal-left{ transform:translateX(-30px); }
.js .reveal-left.revealed{ transform:translateX(0); }
.js .reveal-right{ transform:translateX(30px); }
.js .reveal-right.revealed{ transform:translateX(0); }
.js .reveal-scale{ transform:scale(.94); }
.js .reveal-scale.revealed{ transform:scale(1); }
.reveal-delay-1.revealed{ transition-delay:.08s; }
.reveal-delay-2.revealed{ transition-delay:.16s; }
.reveal-delay-3.revealed{ transition-delay:.24s; }
.reveal-delay-4.revealed{ transition-delay:.32s; }
.reveal-delay-5.revealed{ transition-delay:.4s; }
.reveal-delay-6.revealed{ transition-delay:.48s; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; }
}

/* GSAP (motion.js) prend le relais sur ces éléments quand chargé : la transition
   CSS générique est désactivée pour éviter un double-jeu d'animation. Si GSAP
   échoue à charger (bloqué, hors-ligne...), le système .reveal CSS ci-dessus
   reste le filet de sécurité — voir la classe .gsap-ready posée par motion.js. */
.gsap-ready [data-gsap]{ transition:none; }

/* ---------- Kinetic headline (mots stagger via JS) ---------- */
.kinetic{ overflow:hidden; display:inline-block; }
.kinetic .word{ display:inline-block; transform:translateY(110%); opacity:0; transition:transform .85s var(--ease-out), opacity .6s ease; }
.kinetic .word.in{ transform:translateY(0); opacity:1; }

/* ---------- Buttons (magnétiques + spotlight-border) ---------- */
/* Boutons façon Bullion : plats, angles nets, flèche qui glisse au survol */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:15.5px; padding:14px 26px; border-radius:var(--radius-sm);
  border:1px solid transparent; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) ease, background .2s ease, border-color .2s ease;
  white-space:nowrap; position:relative; will-change:transform;
}
.btn-primary{
  background:var(--gradient-cta); color:var(--cta-text);
}
.btn-primary::before{ content:none; }
.btn-primary:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 12px 24px -10px var(--accent-dim); }
.btn-primary:active{ transform:translateY(0) scale(.98) !important; }
.btn-ghost{ background:var(--bg-base); color:var(--text-primary); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--accent); background:var(--bg-hover); transform:translateY(-2px); }
.btn-ghost:active{ transform:translateY(0) scale(.98); }
.btn-dark{ background:var(--bg-card); color:#fff; border:1px solid rgba(255,255,255,.12); }
.btn-dark:hover{ background:var(--accent-fill); border-color:var(--accent-fill); transform:translateY(-2px); }
.btn-lg{ padding:17px 32px; font-size:16.5px; }
.btn-block{ width:100%; }
.btn svg{ width:15px; height:15px; transition:transform .3s var(--ease-out); }
.btn:hover svg{ transform:translateX(4px); }

/* ---------- Ticker marquee (bandeau haut : sources de données, pas un banner statique) ---------- */
.ticker-bar{ border-bottom:1px solid rgba(244,241,235,.08); background:#101820; padding:9px 0; overflow:hidden; position:relative; }
.ticker-bar::before,.ticker-bar::after{ content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none; }
.ticker-bar::before{ left:0; background:linear-gradient(90deg, #101820, transparent); }
.ticker-bar::after{ right:0; background:linear-gradient(-90deg, #101820, transparent); }
.ticker-bar .ticker-item{ color:#f4f1eb; }
.ticker-bar .ticker-item .sym{ color:#94a89e; }
.ticker-track{ display:flex; width:max-content; gap:0; animation:tickerScroll 34s linear infinite; }
.ticker-bar:hover .ticker-track{ animation-play-state:paused; }
@keyframes tickerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker-item{ display:flex; align-items:center; gap:8px; padding:0 26px; font-size:14px; font-weight:600; white-space:nowrap; border-right:1px solid var(--border); }
.ticker-item .sym{ color:var(--text-secondary); font-weight:500; }
.ticker-item .chg{ font-weight:700; }
.ticker-item .chg.up{ color:var(--green); }
.ticker-item .chg.down{ color:var(--red); }
.ticker-item svg{ width:12px; height:12px; }

/* ---------- Header / Nav : flat, sombre, façon Bullion (pas de glow/aurora) ---------- */
.site-header{
  position:sticky; top:0; z-index:200; padding-top:0;
  background:var(--bg-base); border-bottom:1px solid var(--border);
  transition:box-shadow var(--dur-med) var(--ease-out);
}
.nav-aurora{ display:none; }
.nav-shell{
  position:relative; background:transparent; border:none; border-radius:0; box-shadow:none;
}
.nav-shell::before{ content:none; }
.site-header.scrolled{ box-shadow:0 12px 30px -18px rgba(0,0,0,.55); }
.scroll-progress{
  position:fixed; left:0; top:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--blue)); transition:width .1s linear; z-index:300;
}
.nav-row{ display:flex; align-items:center; gap:20px; height:82px; padding:0; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.01em; margin-right:auto; color:var(--text-primary); flex-shrink:0; }
.brand-mark{
  width:38px; height:38px; border-radius:var(--radius-sm); background:var(--accent);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px;
}
.brand span{ color:var(--accent); }
.brand-logo{ height:32px; width:auto; display:block; flex-shrink:0; }
.brand-logo-light{ display:none; }
[data-theme="light"] .brand-logo{ display:none; }
[data-theme="light"] .brand-logo-light{ display:block; }

.main-nav{ display:flex; align-items:center; gap:4px; }
.main-nav > li{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:5px; padding:10px 16px; border-radius:0;
  color:var(--text-primary); font-size:15px; font-weight:600; position:relative; white-space:nowrap;
  transition:color .2s ease;
}
.nav-link::after{
  content:''; position:absolute; left:16px; right:16px; bottom:6px; height:2px; background:var(--accent);
  opacity:0; transform:scaleX(0); transform-origin:left; transition:opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.nav-link:hover{ color:var(--accent); }
.nav-link:hover::after{ opacity:1; transform:scaleX(1); }
.nav-link.active{ color:var(--accent); }
.nav-link.active::after{ opacity:1; transform:scaleX(1); }
.nav-link.active::before{ content:none; }
.nav-caret{ width:10px; height:10px; opacity:.7; transition:transform .3s var(--ease-out); }
.has-dropdown:hover .nav-caret{ transform:rotate(180deg); }

/* Mega-menu produits, catégorisé + icônes — habillage flat Bullion (fond marine, angles nets) */
.dropdown{
  position:absolute; top:calc(100% + 1px); left:0; transform:translateY(8px);
  width:600px; max-width:min(600px, calc(100vw - 40px)); background:var(--bg-card); border:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius);
  padding:10px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .25s var(--ease-out), visibility .2s;
  z-index:50; display:flex; gap:4px;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-featured{
  width:180px; flex-shrink:0; background:var(--accent);
  border-radius:var(--radius-sm); padding:18px; display:flex; flex-direction:column; justify-content:space-between;
  border:none;
}
.dropdown-featured .df-icon{ width:36px; height:36px; border-radius:var(--radius-sm); background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; margin-bottom:34px; }
.dropdown-featured .df-icon svg{ width:18px; height:18px; color:#fff; }
.dropdown-featured h4{ font-size:15.5px; margin-bottom:6px; color:#fff; }
.dropdown-featured p{ font-size:12.5px; color:rgba(255,255,255,.82); line-height:1.4; }
.dropdown-featured .btn-primary{ background:#fff; color:var(--accent); }
.dropdown-featured .btn-primary:hover{ background:rgba(255,255,255,.9); }
.dropdown-cols{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.dropdown-cat{ padding:10px 8px 6px; }
.dropdown-cat-title{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); padding:0 6px 8px; }
.dropdown-item{
  display:flex; align-items:center; gap:11px; padding:9px 8px; border-radius:var(--radius-sm);
  transition:background .18s ease, transform .18s ease; font-size:15px; font-weight:500;
}
.dropdown-item:hover{ background:var(--bg-hover); transform:translateX(2px); }
.dropdown-item svg.di-icon{ width:16px; height:16px; color:var(--text-secondary); flex-shrink:0; }
.dropdown-item:hover svg.di-icon{ color:var(--accent-light); }
.dropdown-item .di-chevron{ width:13px; height:13px; margin-left:auto; opacity:0; transform:translateX(-4px); color:var(--text-muted); transition:all .2s ease; }
.dropdown-item:hover .di-chevron{ opacity:1; transform:translateX(0); }
.dropdown-foot{
  margin:6px 6px 2px; padding:14px; border-radius:var(--radius); background:linear-gradient(120deg, var(--accent-glow), transparent);
  border:1px solid var(--border-accent); display:flex; align-items:center; justify-content:space-between; gap:10px;
  grid-column:1/-1;
}
.dropdown-foot p{ font-size:14px; font-weight:600; }
.dropdown-foot span{ font-size:12px; color:var(--text-secondary); font-weight:400; display:block; margin-top:2px; }

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

/* Mega-menu "pile verticale" — icônes orbes abstraites, une seule colonne (ex: Gestion privée) */
.dropdown-narrow{ width:340px; }
.dropdown-stack{ display:flex; flex-direction:column; gap:2px; padding:8px; }
.dropdown-stack-item{ display:flex; align-items:flex-start; gap:14px; padding:12px; border-radius:14px; transition:background .18s ease, transform .18s ease; }
.dropdown-stack-item:hover{ background:var(--bg-hover); transform:translateX(2px); }
.dsi-orb{
  width:46px; height:46px; border-radius:14px; flex-shrink:0; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px -10px rgba(0,0,0,.55);
}
.dsi-orb svg{ width:19px; height:19px; color:#fff; position:relative; z-index:1; }
.dsi-orb.o1{ background:radial-gradient(circle at 30% 25%, var(--accent-light), var(--accent-dim) 75%); }
.dsi-orb.o2{ background:radial-gradient(circle at 30% 25%, #cfd4ff, var(--accent) 80%); }
.dsi-orb.o3{ background:radial-gradient(circle at 30% 25%, var(--blue), var(--accent-dim) 80%); }
.dsi-orb-lg svg{ width:44px !important; height:44px !important; }
.dropdown-stack-item h4{ font-size:15.5px; font-weight:700; margin-bottom:3px; }
.dropdown-stack-item p{ font-size:13px; color:var(--text-secondary); line-height:1.4; }

/* ---------- Grille de solutions (tuiles avec visuel orbe abstrait) ---------- */
.solutions-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.solution-tile{
  position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-med) ease;
}
.solution-tile:hover{ transform:translateY(-5px); border-color:var(--border-accent); }
.solution-tile-badge{
  position:absolute; top:12px; left:12px; z-index:2; background:var(--amber); color:#1a1200; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; padding:4px 9px; border-radius:20px;
}
.solution-tile-visual{
  height:150px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.solution-tile-visual::before{
  content:''; position:absolute; width:120px; height:120px; border-radius:50%; filter:blur(2px);
}
.solution-tile-visual svg{ width:38px; height:38px; color:#fff; position:relative; z-index:1; opacity:.92; }
.stv-1::before{ background:radial-gradient(circle at 35% 30%, var(--accent-light), var(--accent-dim) 75%); }
.stv-2::before{ background:radial-gradient(circle at 35% 30%, var(--blue), var(--accent-dim) 80%); }
.stv-3::before{ background:radial-gradient(circle at 35% 30%, #cfd4ff, var(--accent) 80%); }
.stv-4::before{ background:radial-gradient(circle at 35% 30%, var(--green), var(--accent-dim) 85%); }
.stv-5::before{ background:radial-gradient(circle at 35% 30%, var(--amber), var(--accent-dim) 85%); }
.solution-tile-label{ padding:14px 16px 18px; font-size:15px; font-weight:700; }

/* ---------- Carte conseiller (mock façon "prendre RDV") ---------- */
.advisor-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.advisor-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.advisor-avatar{ width:40px; height:40px; border-radius:50%; background:var(--accent-glow); color:var(--accent-light); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:15.5px; flex-shrink:0; }
.advisor-name{ font-size:15.5px; font-weight:700; }
.advisor-role{ font-size:12.5px; color:var(--text-muted); }
.advisor-cta{ margin-left:auto; }
.advisor-value{ font-family:var(--font-display); font-size:26.5px; font-weight:700; margin-bottom:2px; }
.advisor-spark{ width:100%; height:40px; margin-top:10px; }

/* ---------- Sections : flat Bullion, plus de blobs flous glassmorphism ---------- */
.section-glass{ position:relative; }
.section-glass::before, .section-glass::after{ content:none; }

/* .card-glass : neutralisée, redevient une card flat standard (cohérence flat design) */
.card-glass{
  background:var(--bg-card) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid var(--border) !important;
  box-shadow:none;
}

/* ---------- Icônes 3D (assets image glossy) ---------- */
.icon3d{
  width:76px; height:76px; object-fit:contain; filter:drop-shadow(0 12px 20px rgba(108,99,255,.38));
  transition:transform .35s var(--ease-spring);
}
.card:hover .icon3d{ transform:scale(1.06) rotate(-3deg); }
.icon3d-xs{ width:36px; height:36px; filter:drop-shadow(0 6px 10px rgba(108,99,255,.3)); }
.icon3d-sm{ width:48px; height:48px; filter:drop-shadow(0 8px 14px rgba(108,99,255,.32)); }
.icon3d-lg{ width:150px; height:150px; filter:drop-shadow(0 18px 32px rgba(108,99,255,.42)); }
.icon3d-halo{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
.icon3d-halo::before{
  content:''; position:absolute; inset:-14px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, var(--accent-glow), transparent 70%);
}

/* ---------- Lignes d'offres d'emploi ---------- */
.market-row-link:hover{ background:var(--bg-hover); }
.market-row-link{ border-radius:var(--radius-sm); }
.icon-btn{
  width:39px; height:39px; border-radius:30px; background:var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease-spring);
}
.icon-btn:hover{ border-color:var(--border-accent); background:var(--bg-hover); transform:translateY(-1px) rotate(-4deg); }
.icon-btn svg{ width:16px; height:16px; color:var(--text-secondary); }

.lang-switch{ display:flex; border:1px solid var(--border); border-radius:30px; overflow:hidden; background:var(--bg-card); }
.lang-switch a{ padding:8px 11px; font-size:13px; font-weight:700; color:var(--text-secondary); transition:all .2s ease; }
.lang-switch a:hover{ color:var(--text-primary); }
.lang-switch a.active{ background:var(--accent-fill); color:#fff; border-radius:30px; }

/* --- Sélecteur de langue en dropdown (header) : largeur fixe pour ne jamais décaler le reste de la nav --- */
.lang-dd{ position:relative; }
.lang-dd-trigger{
  display:flex; align-items:center; justify-content:center; gap:6px; min-width:78px;
  padding:8px 12px; border:1px solid var(--border); border-radius:30px; background:var(--bg-card);
  font-size:13px; font-weight:700; color:var(--text-secondary); cursor:pointer; user-select:none;
  white-space:nowrap; list-style:none; transition:border-color .2s ease, color .2s ease;
}
.lang-dd-trigger::-webkit-details-marker{ display:none; }
.lang-dd-trigger svg{ width:14px; height:14px; flex-shrink:0; }
.lang-dd-trigger .chev{ width:10px; height:10px; margin-left:auto; transition:transform .25s var(--ease-out); opacity:.7; }
.lang-dd[open] .lang-dd-trigger{ border-color:var(--border-accent); color:var(--text-primary); }
.lang-dd[open] .lang-dd-trigger .chev{ transform:rotate(180deg); }
.lang-dd-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:170px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-deep);
  padding:6px; z-index:200; opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .2s ease, transform .2s var(--ease-out);
}
.lang-dd[open] .lang-dd-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.lang-dd-menu a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--text-secondary); }
.lang-dd-menu a:hover{ background:var(--bg-hover); color:var(--text-primary); }
.lang-dd-menu a.active{ color:var(--accent); background:var(--accent-glow); }
.lang-dd-menu a.active svg{ width:14px; height:14px; flex-shrink:0; }
.lang-dd-code{ font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-muted); }
.lang-dd-menu a.active .lang-dd-code{ color:var(--accent); }

.burger{ display:none; }

/* ---------- Mega mobile "Produits" (imite un drawer natif : back / titre / X, catégories) ---------- */
.mobile-drawer-panel{
  position:fixed; inset:0; background:var(--bg-base); z-index:301; padding:20px;
  transform:translateX(100%); transition:transform .38s var(--ease-out); overflow-y:auto;
}
.mobile-drawer-panel.open{ transform:translateX(0); }
.mdp-head{ display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.mdp-back{ width:36px; height:36px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.mdp-back-icon{ width:16px; height:16px; transform:scaleX(-1); }
.mdp-title{ font-family:var(--font-display); font-size:21px; font-weight:700; flex:1; }
.mdp-close{ width:36px; height:36px; }
.mdp-featured{
  display:flex; align-items:center; gap:14px; padding:16px; margin:14px 0 6px; border-radius:var(--radius);
  background:linear-gradient(120deg, var(--accent-glow), transparent); border:1px solid var(--border-accent);
}
.mdp-featured .df-icon{ width:38px; height:38px; border-radius:10px; background:var(--bg-card); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mdp-featured .df-icon svg{ width:19px; height:19px; color:var(--accent-light); }
.mdp-featured h4{ font-size:16px; margin-bottom:2px; }
.mdp-featured p{ font-size:13px; color:var(--text-secondary); }
.mdp-cat-title{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); padding:18px 6px 8px; }
.mdp-item{ display:flex; align-items:center; gap:14px; padding:13px 6px; border-bottom:1px solid var(--border); font-size:16.5px; font-weight:500; }
.mdp-item .di-icon{ width:19px; height:19px; color:var(--text-secondary); flex-shrink:0; }
.mdp-item .di-chevron{ width:16px; height:16px; margin-left:auto; color:var(--text-muted); }

/* ---------- Hero ---------- */
.hero{ padding:56px 0 30px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hero h1{ font-size:clamp(38px,5.4vw,64px); margin-bottom:22px; }
.hero h1 .accentline{ display:block; background:linear-gradient(120deg, var(--accent-light), var(--blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p.lead{ font-size:20px; color:var(--text-secondary); max-width:500px; margin-bottom:32px; }
.hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.hero-note{ font-size:14px; color:var(--text-muted); }

.hero-visual{ position:relative; transform:translateX(28px); }
.mock-card{
  background:linear-gradient(165deg, var(--bg-raised), var(--bg-card));
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px; box-shadow:var(--shadow-deep), 0 1px 0 rgba(255,255,255,.06) inset; position:relative; z-index:2;
  transition:transform .4s var(--ease-out);
}
.mock-card-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.mock-value{ font-family:var(--font-display); font-size:35px; font-weight:700; }
.mock-change{ display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:700; color:var(--green); background:var(--green-dim); padding:4px 9px; border-radius:20px; }
.chart-draw{ width:100%; height:150px; }
.chart-draw path.line{
  fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:600; stroke-dashoffset:600; animation:draw 2.2s var(--ease-out) forwards .3s;
}
.chart-draw path.fill{ opacity:0; animation:fadein 1s ease forwards 1.6s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadein{ to{ opacity:1; } }

.floating-chip{
  position:absolute; background:var(--bg-raised); border:1px solid var(--border-accent);
  border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow-soft); z-index:3;
  display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600;
  animation:float 5.5s ease-in-out infinite;
}
.floating-chip.chip-a{ top:-16px; right:4px; animation-delay:0s; }
.floating-chip.chip-b{ bottom:-14px; left:-4px; animation-delay:1.6s; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-10px) rotate(-1.4deg); } }

.orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.16; z-index:0; animation:orbdrift 16s ease-in-out infinite; }
.orb-1{ width:380px; height:380px; background:var(--accent); top:-100px; right:-60px; }
.orb-2{ width:280px; height:280px; background:var(--accent); bottom:-70px; left:16%; opacity:.08; animation-delay:-6s; }
@keyframes orbdrift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-22px,26px) scale(1.08); } }

/* ---------- Ticker de logos presse / sources de données ---------- */
.press-strip{ padding:30px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-surface); overflow:hidden; position:relative; }
.press-strip-label{ text-align:center; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); margin-bottom:22px; }
.press-track{ display:flex; width:max-content; gap:64px; align-items:center; animation:pressScroll 30s linear infinite; }
.press-strip:hover .press-track{ animation-play-state:paused; }
@keyframes pressScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.press-logo{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:18.5px; color:var(--text-secondary); opacity:.85; transition:opacity .25s ease, color .25s ease; white-space:nowrap; }
.press-logo:hover{ opacity:1; color:var(--text-primary); }
.press-logo svg{ width:16px; height:16px; opacity:.8; }

/* ---------- Stat band ---------- */
.stat-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.stat-band .stat{ text-align:center; padding:30px 14px; background:var(--bg-card); }
.stat-num{ font-family:var(--font-display); font-size:35px; font-weight:700; color:var(--accent-light); }
.stat-label{ font-size:14px; color:var(--text-secondary); margin-top:6px; }

/* ---------- Bento (remplace la grille 4 cartes égales) ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.bento .card{ grid-column:span 3; }
.bento .card.b-wide{ grid-column:span 4; }
.bento .card.b-narrow{ grid-column:span 2; }
.bento .card.b-full{ grid-column:1/-1; }
.pillar-icon{
  width:46px; height:46px; border-radius:13px; background:var(--accent-glow);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  transition:transform .3s var(--ease-spring);
}
.card:hover .pillar-icon{ transform:scale(1.08) rotate(-4deg); }
.pillar-icon svg{ width:21px; height:21px; color:var(--accent-light); }
.pillar-card h3{ font-size:20px; margin-bottom:10px; }
.pillar-card p{ color:var(--text-secondary); font-size:16px; }

/* ---------- Agrégats marché (dashboard live sur la home) ---------- */
.agg-panel{
  background:linear-gradient(155deg, var(--bg-card), var(--bg-raised));
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px;
  position:relative; overflow:hidden;
}
.agg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border-radius:var(--radius); overflow:hidden; margin-top:22px; }
.agg-cell{ background:var(--bg-card); padding:22px 20px; }
.agg-cell-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.agg-cell-name{ font-size:14px; color:var(--text-secondary); font-weight:600; }
.agg-cell-value{ font-family:var(--font-display); font-size:23px; font-weight:700; margin-bottom:4px; }
.agg-spark{ width:100%; height:34px; margin-top:6px; }
.gauge-wrap{ display:flex; align-items:center; gap:20px; }
.gauge-ring{ position:relative; width:104px; height:104px; flex-shrink:0; }
.gauge-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.gauge-ring circle{ fill:none; stroke-width:9; }
.gauge-ring .bg{ stroke:var(--bg-hover); }
.gauge-ring .fg{ stroke:var(--amber); stroke-linecap:round; stroke-dasharray:283; transition:stroke-dashoffset 1.4s var(--ease-out); }
.gauge-num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge-num strong{ font-family:var(--font-display); font-size:26.5px; }
.gauge-num span{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.gauge-label{ font-size:15px; color:var(--text-secondary); }
.gauge-label strong{ display:block; color:var(--text-primary); font-size:16.5px; margin-bottom:4px; }

/* ---------- Numbered steps (chemin diagonal, plus de trait plat) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step; position:relative; }
.step{ position:relative; padding:28px 24px 24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); transition:transform .3s var(--ease-out), border-color .3s ease; }
.step:nth-child(2){ transform:translateY(-16px); }
.step:hover{ transform:translateY(-6px); border-color:var(--border-accent); }
.step:nth-child(2):hover{ transform:translateY(-22px); }
.step-num{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--border-accent); background:var(--accent-glow);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
  color:var(--accent-light); margin-bottom:18px;
}
.step h3{ font-size:18.5px; margin-bottom:8px; }
.step p{ color:var(--text-secondary); font-size:16px; }
.step-connector{ display:none; }

/* ---------- Steps verticales (avec ligne de liaison + mockup téléphone) ---------- */
.steps-vertical{ display:flex; flex-direction:column; }
.step-v{ display:flex; gap:22px; position:relative; padding-bottom:38px; }
.step-v:last-child{ padding-bottom:0; }
.step-v-line{
  position:relative; display:flex; flex-direction:column; align-items:center; flex-shrink:0;
}
.step-v-num{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border-accent); background:var(--bg-card);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
  color:var(--accent-light); font-size:17.5px; z-index:1; flex-shrink:0;
}
.step-v:last-child .step-v-line::after{ display:none; }
.step-v-line::after{
  content:''; position:absolute; top:44px; bottom:-38px; width:1px;
  background:linear-gradient(var(--border-accent), var(--border));
}
.step-v-body{ padding-top:6px; }
.step-v-body h3{ font-size:19px; margin-bottom:8px; }
.step-v-body p{ color:var(--text-secondary); font-size:16px; max-width:400px; }

/* ---------- Mockup téléphone (composant maison, pas de captures tierces) ---------- */
.phone-mock{
  width:100%; max-width:290px; margin:0 auto; background:var(--bg-base); border:6px solid #05060a; border-radius:34px;
  box-shadow:var(--shadow-deep), 0 0 0 1px var(--border); overflow:hidden; position:relative;
}
.phone-mock-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:90px; height:20px; background:#05060a; border-radius:0 0 14px 14px; z-index:3; }
.phone-mock-head{ padding:30px 18px 14px; border-bottom:1px solid var(--border); }
.phone-mock-head p{ font-size:16.5px; font-weight:600; }
.phone-mock-list{ padding:6px 10px; }
.phone-mock-row{ display:flex; align-items:center; gap:12px; padding:12px 8px; border-bottom:1px solid var(--border); font-size:15px; font-weight:500; }
.phone-mock-row:last-child{ border-bottom:none; }
.phone-mock-row .pmr-mark{
  width:30px; height:30px; border-radius:9px; background:var(--bg-hover); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--text-secondary); flex-shrink:0;
}
.phone-mock-row .pmr-sub{ color:var(--text-muted); font-size:12.5px; font-weight:400; }

/* ---------- Puces "partenaires" flottantes (chips texte, pas de logos tiers) ---------- */
.partner-chip{
  position:absolute; display:flex; align-items:center; gap:8px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:30px; padding:9px 16px 9px 10px; font-size:14px; font-weight:700; box-shadow:var(--shadow-soft);
  animation:float 6s ease-in-out infinite;
}
.partner-chip .pc-dot{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }

/* ---------- FAQ split (Q&A + centre d'aide + mention légale courte) ---------- */
.faq-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; }
.faq-split-side h2{ font-size:clamp(26px,3vw,36px); margin-bottom:16px; }
.faq-split-side p{ color:var(--text-secondary); font-size:16px; margin-bottom:8px; }
.faq-split-side .helpcenter{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-top:22px; }
.faq-split-side .helpcenter a{ color:var(--accent-light); text-decoration:underline; text-underline-offset:3px; }
.faq-split-side .legal-note{ margin-top:26px; padding-top:22px; border-top:1px solid var(--border); font-size:12.5px; color:var(--text-muted); line-height:1.7; }
.faq-split .faq-item{ border-bottom:1px solid var(--border); }
.faq-split .faq-q{ font-size:18px; }

/* ---------- Feature split (dashboard preview) ---------- */
.feature-split{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.feature-split.reverse{ grid-template-columns:.85fr 1.15fr; }
.feature-split.reverse > *:first-child{ order:2; }
.feature-list li{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--border); font-size:16px; }
.feature-list li:last-child{ border-bottom:none; }
.feature-list svg{ width:18px; height:18px; color:var(--green); flex-shrink:0; margin-top:2px; }

/* ---------- Panneau steps verticales + mockup téléphone ---------- */
.steps-panel{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }

/* ---------- Quote (éditorial, plus centré-générique) ---------- */
.quote-block{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:flex-start; max-width:820px; }
.quote-mark{ width:44px; height:44px; color:var(--accent-light); opacity:.9; flex-shrink:0; margin-top:4px; }
.quote-block p.q{ font-family:var(--font-display); font-size:clamp(21px,2.8vw,30px); line-height:1.35; margin-bottom:18px; text-align:left; }
.quote-block .author{ color:var(--text-secondary); font-size:15px; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{
  width:100%; text-align:left; padding:22px 4px; display:flex;
  justify-content:space-between; align-items:center; color:var(--text-primary); font-size:17px; font-weight:600;
  gap:16px;
}
.faq-q svg{ width:16px; height:16px; color:var(--text-secondary); transition:transform .35s var(--ease-spring); flex-shrink:0; }
.faq-item[open] .faq-q svg{ transform:rotate(45deg); }
.faq-a{ padding:0 4px 22px; color:var(--text-secondary); font-size:16px; line-height:1.65; max-width:640px; }

/* ---------- Final CTA ---------- */
.cta-banner{
  background:linear-gradient(120deg, var(--bg-card), var(--bg-raised));
  border:1px solid var(--border-accent); border-radius:var(--radius-xl);
  padding:64px 56px; text-align:center; position:relative; overflow:hidden;
  box-shadow:var(--shadow-glow);
}
.cta-banner::before{
  content:''; position:absolute; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,182,92,.28), transparent 70%);
  top:-240px; right:-160px; pointer-events:none; animation:orbdrift 14s ease-in-out infinite;
}
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h2{ font-size:clamp(26px,3.2vw,38px); margin-bottom:14px; }
.cta-banner p{ color:var(--text-secondary); margin-bottom:28px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); padding:0 0 0; background:var(--bg-surface); position:relative; overflow:hidden; }
.footer-top-border{
  height:2px; width:100%;
  background:linear-gradient(90deg, var(--accent), var(--blue), var(--green), var(--accent));
  background-size:300% 100%; animation:footerSheen 10s linear infinite;
}
@keyframes footerSheen{ 0%{ background-position:0% 0; } 100%{ background-position:300% 0; } }

.footer-newsletter{
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  background:linear-gradient(120deg, var(--bg-card), var(--bg-raised)); border:1px solid var(--border-accent);
  border-radius:var(--radius-lg); padding:30px 34px; margin:44px 0 52px; box-shadow:var(--shadow-soft);
}
.footer-newsletter-title{ font-family:var(--font-display); font-size:20px; font-weight:600; margin-bottom:6px; }
.footer-newsletter-sub{ color:var(--text-secondary); font-size:15px; }
.footer-newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-newsletter-form input{
  background:var(--bg-surface); border:1px solid var(--border); color:var(--text-primary);
  padding:12px 16px; border-radius:30px; min-width:220px;
}
.footer-newsletter-form input:focus{ border-color:var(--border-accent); outline:none; }

/* Bloc marque seul, pleine largeur, séparé par un trait pointillé (façon capture) */
.footer-brand-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; padding-bottom:32px; }
.footer-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.footer-social{ display:flex; gap:10px; }
.footer-divider{ border:none; border-top:1px dashed var(--border); margin:0; }

.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:36px 0; }
.footer-col-title{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:18px; }
.footer-col li{ margin-bottom:4px; }
.footer-col a{
  display:flex; align-items:center; gap:6px; color:var(--text-secondary); font-size:15.5px; padding:7px 0;
  transition:color .2s ease, transform .2s ease; position:relative;
}
.footer-col a svg{ width:13px; height:13px; opacity:.55; }
.footer-col a:hover{ color:var(--text-primary); transform:translateX(2px); }

.footer-bottom-row{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; flex-wrap:wrap; gap:16px; }
.footer-legal-row{ display:flex; justify-content:flex-end; gap:20px; flex-wrap:wrap; padding-bottom:30px; }
.footer-legal-row a{ font-size:14px; color:var(--text-muted); transition:color .2s ease; }
.footer-legal-row a:hover{ color:var(--text-primary); }
.footer-disclaimer{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13px; color:var(--text-muted); line-height:1.6; padding:24px 0;
}
.footer-disclaimer svg{ width:15px; height:15px; flex-shrink:0; margin-top:1px; opacity:.7; }

/* ---------- Table (market) ---------- */
.market-table{ width:100%; border-collapse:collapse; }
.market-table th{ text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); padding:12px 16px; border-bottom:1px solid var(--border); }
.market-table td{ padding:16px; border-bottom:1px solid var(--border); font-size:15.5px; vertical-align:middle; white-space:nowrap; }
.market-table tr{ transition:background .2s ease; }
.market-table tr:hover td{ background:var(--bg-hover); }
.asset-cell{ display:flex; align-items:center; gap:12px; }
.asset-logo{ width:32px; height:32px; border-radius:9px; background:var(--bg-hover); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:13px; }
.asset-name{ font-weight:600; }
.asset-ticker{ color:var(--text-muted); font-size:13px; }
.change-pill{ font-size:14px; font-weight:700; padding:4px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:3px; }
.change-pill.up{ color:var(--green); background:var(--green-dim); }
.change-pill.down{ color:var(--red); background:var(--red-dim); }
.sparkline{ width:96px; height:32px; }

.tabs{ display:flex; gap:6px; margin-bottom:24px; flex-wrap:wrap; }
.tab-btn{ padding:10px 18px; border-radius:var(--radius-sm); font-size:14.5px; font-weight:700; background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary); transition:all .2s var(--ease-out); }
.tab-btn:hover{ border-color:var(--border-accent); }
.tab-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

.filters-bar{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:28px; padding:20px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.filter-group{ display:flex; flex-direction:column; gap:6px; }
.filter-group label{ font-size:12.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.filter-group select{
  background:var(--bg-surface); border:1px solid var(--border); color:var(--text-primary);
  padding:9px 12px; border-radius:var(--radius-sm); min-width:150px;
}

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:820px; margin:0 auto; }
.price-card{ position:relative; }
.price-card.featured{ border-color:var(--border-accent); background:linear-gradient(160deg, var(--bg-card), var(--bg-raised)); }
.price-badge{ position:absolute; top:-13px; left:28px; background:var(--gradient-cta); color:var(--cta-text); font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:20px; }
.price-amount{ font-family:var(--font-display); font-size:42px; font-weight:700; margin:14px 0 4px; }
.price-amount span{ font-size:15.5px; color:var(--text-secondary); font-weight:500; }
.price-list li{ display:flex; gap:10px; padding:10px 0; font-size:15.5px; border-bottom:1px solid var(--border); }
.price-list li:last-child{ border-bottom:none; }
.price-list svg{ width:16px; height:16px; color:var(--green); flex-shrink:0; margin-top:2px; }

.compare-table{ width:100%; border-collapse:collapse; margin-top:20px; }
.compare-table th,.compare-table td{ padding:14px 16px; border-bottom:1px solid var(--border); font-size:15.5px; text-align:center; }
.compare-table th:first-child,.compare-table td:first-child{ text-align:left; color:var(--text-secondary); }
.compare-table th{ font-family:var(--font-display); }

/* ---------- Blog ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{ display:flex; flex-direction:column; height:100%; }
.blog-tag{ display:inline-block; font-size:12.5px; font-weight:700; color:var(--accent-light); background:var(--accent-glow); padding:4px 10px; border-radius:20px; margin-bottom:14px; width:fit-content; }
.blog-card h3{ font-size:20px; margin-bottom:10px; }
.blog-card p{ color:var(--text-secondary); font-size:15.5px; flex:1; margin-bottom:16px; }
.blog-meta{ display:flex; gap:10px; font-size:13px; color:var(--text-muted); }
.article-body{ max-width:720px; margin:0 auto; }
.article-body h2{ font-size:24px; margin:34px 0 14px; }
.article-body p{ color:var(--text-secondary); font-size:17px; margin-bottom:16px; line-height:1.75; }
.article-body ul{ margin-bottom:16px; }
.article-body li{ color:var(--text-secondary); padding:6px 0 6px 20px; position:relative; font-size:16.5px; }
.article-body li::before{ content:''; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.article-callout{ background:var(--bg-card); border:1px solid var(--border-accent); border-radius:var(--radius); padding:20px 24px; margin:24px 0; font-size:16px; color:var(--text-secondary); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:14.5px; font-weight:600; margin-bottom:8px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-primary);
  padding:12px 14px; border-radius:var(--radius-sm); transition:border-color var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color:var(--border-accent); outline:none; }
.form-group textarea{ resize:vertical; min-height:130px; }
.form-consent{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--text-secondary); margin-bottom:20px; }
.form-consent input{ width:auto; margin-top:3px; }
.contact-side .card{ margin-bottom:16px; }
.contact-side .row{ display:flex; align-items:center; gap:12px; padding:10px 0; }
.contact-side svg{ width:18px; height:18px; color:var(--accent-light); }

/* ---------- Legal pages ---------- */
.legal-body{ max-width:760px; margin:0 auto; }
.legal-body h2{ font-size:22px; margin:32px 0 12px; }
.legal-body h3{ font-size:17.5px; margin:22px 0 8px; color:var(--text-primary); }
.legal-body p, .legal-body li{ color:var(--text-secondary); font-size:16px; line-height:1.75; margin-bottom:12px; }
.legal-body li{ padding-left:18px; position:relative; }
.legal-body li::before{ content:'—'; position:absolute; left:0; color:var(--text-muted); }
.legal-toc{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:22px 26px; margin-bottom:34px; }
.legal-toc a{ display:block; padding:5px 0; color:var(--text-secondary); font-size:15.5px; }
.legal-toc a:hover{ color:var(--accent-light); }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; max-width:640px; margin:0 auto;
  background:var(--bg-card); border:1px solid var(--border-accent); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--shadow-soft); z-index:500; display:none;
}
.cookie-banner.visible{ display:block; animation:riseup .5s var(--ease-out); }
@keyframes riseup{ from{ transform:translateY(24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.cookie-banner p{ font-size:15px; color:var(--text-secondary); margin-bottom:16px; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-actions .btn{ padding:9px 16px; font-size:14.5px; }

.cookie-modal-overlay{ position:fixed; inset:0; background:rgba(5,6,10,.6); backdrop-filter:blur(3px); z-index:600; display:none; align-items:center; justify-content:center; padding:20px; }
.cookie-modal-overlay.visible{ display:flex; }
.cookie-modal{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px; max-width:480px; width:100%; }
.cookie-modal h3{ font-size:21px; margin-bottom:18px; }
.cookie-toggle-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:16px 0; border-bottom:1px solid var(--border); }
.cookie-toggle-row:last-of-type{ border-bottom:none; }
.cookie-toggle-row h4{ font-size:15.5px; margin-bottom:4px; }
.cookie-toggle-row p{ font-size:14px; color:var(--text-secondary); margin:0; }
.switch{ position:relative; width:40px; height:22px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch-track{ position:absolute; inset:0; background:var(--bg-hover); border-radius:20px; transition:var(--transition); border:1px solid var(--border); }
.switch-track::before{ content:''; position:absolute; width:16px; height:16px; left:2px; top:2px; background:var(--text-secondary); border-radius:50%; transition:var(--transition); }
.switch input:checked + .switch-track{ background:var(--accent); }
.switch input:checked + .switch-track::before{ transform:translateX(18px); background:#fff; }
.switch input:disabled + .switch-track{ opacity:.5; }

/* ---------- Utilities ----------
   Ajoutées à partir d'un audit réel des styles inline dupliqués dans le
   projet (voir l'audit UI/UX) — chaque classe ci-dessous correspond à un
   motif "style=" répété au moins 5 fois, pas à un système générique
   pré-fabriqué. Objectif : réduire la duplication de markup sans réécrire
   les styles vraiment ponctuels (laissés en inline, ce qui est très bien). */
.text-center{ text-align:center; }
.text-left{ text-align:left; }
.mt-24{ margin-top:24px; }
.mt-40{ margin-top:40px; }
.mt-20{ margin-top:20px; }
.mb-0{ margin-bottom:0; }
.mb-8{ margin-bottom:8px; }
.mb-14{ margin-bottom:14px; }
.mb-16{ margin-bottom:16px; }
.mb-18{ margin-bottom:18px; }
.mb-20{ margin-bottom:20px; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.ml-auto{ margin-left:auto; }
.w-auto{ width:auto; }
.flex-1{ flex:1; }
.hidden{ display:none; }
.no-underline{ text-decoration:none; }
.capitalize{ text-transform:capitalize; }
.fw-600{ font-weight:600; }
.fs-13{ font-size:13px; }
.text-muted{ color:var(--text-muted); }
.text-muted-12{ color:var(--text-muted); font-size:12px; }
.text-muted-13{ color:var(--text-muted); font-size:13px; }
.text-muted-125{ color:var(--text-muted); font-size:12.5px; }
.text-secondary{ color:var(--text-secondary); }
.text-secondary-12{ font-size:12px; color:var(--text-secondary); }
.text-accent-light{ color:var(--accent-light); }
.flex-gap-8{ display:flex; align-items:center; gap:8px; }
.flex-gap-10{ display:flex; align-items:center; gap:10px; }
/* Bandeau de section alterné (fond légèrement différent, bordures haut/bas) */
.section-alt-bg{ background:var(--bg-surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
/* Carte contenant un tableau : pas de padding interne, scroll horizontal si besoin */
.table-card{ padding:0; overflow-x:auto; }
.card-flush{ padding:0; overflow:hidden; }
/* État vide générique (liste/table sans résultat) */
.empty-state{ text-align:center; color:var(--text-muted); padding:30px; }
.empty-state-sm{ text-align:center; color:var(--text-muted); padding:24px; }
/* Titres de page/section récurrents (tailles fluides déjà utilisées partout) */
.h1-hero{ font-size:clamp(28px,4vw,42px); margin-bottom:14px; }
.h2-section{ font-size:clamp(24px,3vw,32px); margin-bottom:20px; }

.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:20px; }
.badge-green{ color:var(--green); background:var(--green-dim); }
.badge-amber{ color:var(--amber); background:var(--amber-dim); }
.badge-blue{ color:var(--blue); background:var(--blue-dim); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid, .feature-split, .feature-split.reverse, .contact-grid, .steps-panel, .faq-split{ grid-template-columns:1fr; }
  .feature-split.reverse > *:first-child{ order:0; }
  .hero-visual{ transform:none; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento .card, .bento .card.b-wide, .bento .card.b-narrow{ grid-column:span 1; }
  .solutions-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-band{ grid-template-columns:repeat(2,1fr); }
  .agg-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:repeat(2,1fr); }
  .footer-cols{ grid-template-columns:repeat(2,1fr); }
  .footer-legal-row{ justify-content:flex-start; }
  .steps{ grid-template-columns:1fr; }
  .step:nth-child(2){ transform:none; }
  .step:nth-child(2):hover{ transform:translateY(-6px); }
  .pricing-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .quote-block{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .main-nav, .nav-actions .lang-switch, .nav-actions .lang-dd, .nav-actions .btn-ghost, .nav-actions .btn-primary{ display:none; }
  .burger{ display:flex; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .solutions-grid{ grid-template-columns:1fr; }
  .agg-grid{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .cta-banner{ padding:40px 24px; }
  .compare-table{ font-size:13px; }
  .site-header{ padding-top:0; }
  .nav-shell{ border-radius:0; border-left:none; border-right:none; }
}

/* ---------- Mobile nav drawer (niveau racine) ---------- */
.mobile-drawer{
  position:fixed; inset:0; background:var(--bg-base); z-index:300; padding:24px;
  transform:translateX(100%); transition:transform .38s var(--ease-out); overflow-y:auto;
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer .nav-link{ display:flex; padding:14px 6px; font-size:17.5px; border-bottom:1px solid var(--border); border-radius:0; }
.mobile-drawer .nav-link::after{ display:none; }
.mobile-drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.mobile-drawer-head-actions{ display:flex; align-items:center; gap:10px; }
.mobile-drawer-head-actions .lang-dd-menu{ right:0; left:auto; }

/* ---------- Footer : moyens de paiement acceptés ---------- */
.footer-payments-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:20px 0; }
.footer-payments-label{ font-size:12.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-right:4px; }
.footer-payments-icons{ display:flex; flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; }
.footer-payments-icons img{ display:inline-block; width:47px; height:30px; flex:0 0 auto; border-radius:6px; box-shadow:0 0 0 1px rgba(255,255,255,.08); }

/* ---------- Transition d'entrée de page (vitrine) ---------- */
#main{ animation:pageContentIn .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes pageContentIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ #main{ animation:none; } }

/* ---------- Texte en dégradé (mots-clés dans les titres) ---------- */
.text-gradient{
  background:linear-gradient(120deg, var(--accent-light), var(--blue));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:inline-block;
}
.text-gradient-warm{
  background:linear-gradient(120deg, var(--accent-light), #a78bfa, var(--blue));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:inline-block;
}

/* ==========================================================
   COMPOSANTS SPÉCIFIQUES — refonte façon Bullion (homepage)
   ========================================================== */

/* --- Titre 2 tons (mot-clé en corail dans le H1/H2), signature Bullion --- */
.accentline{ color:var(--accent-light) !important; -webkit-text-fill-color:var(--accent-light) !important; background:none !important; }
[data-theme="light"] .accentline{ color:var(--accent) !important; -webkit-text-fill-color:var(--accent) !important; }

/* --- Bloc "stat numérotée" en bas du hero (ex : "02. Gold & Silver") --- */
.hero-stat-strip{
  display:flex; align-items:stretch; margin-top:34px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.hero-stat-strip .num{ display:flex; align-items:center; padding:0 20px; font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--accent); border-right:1px solid var(--border); }
.hero-stat-strip .body{ flex:1; padding:16px 20px; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.hero-stat-strip .body strong{ font-size:15.5px; font-weight:700; }
.hero-stat-strip .body span{ font-size:13px; color:var(--text-secondary); }
.hero-stat-strip .more{ display:flex; align-items:center; gap:6px; padding:0 22px; font-size:13.5px; font-weight:700; color:var(--accent); border-left:1px solid var(--border); white-space:nowrap; }
.hero-stat-strip .more svg{ width:13px; height:13px; }

/* --- Section sombre "Gateway" : 3 cartes vert forêt sur fond plein --- */
.gateway-dark{ background:#101820; color:#fff; padding:80px 0; }
.gateway-dark .eyebrow{ color:var(--accent-light); }
.gateway-dark .section-head h2{ color:#fff; }
.gateway-dark .section-head p{ color:rgba(244,241,235,.62); }
.gateway-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gateway-card{
  background:#1e2933; border:1px solid rgba(244,241,235,.08); border-radius:var(--radius);
  padding:26px; transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-med) ease, background var(--dur-med) ease;
}
.gateway-card:hover{ transform:translateY(-4px); border-color:var(--accent-light); background:#26323f; }
.gateway-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.gateway-card-icon{ width:38px; height:38px; border-radius:var(--radius-sm); background:var(--accent-glow); display:flex; align-items:center; justify-content:center; }
.gateway-card-icon svg{ width:18px; height:18px; color:var(--accent-light); }
.gateway-card h3{ color:#fff; font-size:17.5px; margin-bottom:8px; }
.gateway-card p{ color:rgba(244,241,235,.6); font-size:14.5px; line-height:1.6; margin-bottom:16px; }
.gateway-card-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid rgba(244,241,235,.08); }
.gateway-card-foot .quote{ font-size:12.5px; color:rgba(244,241,235,.45); font-style:italic; }
.gateway-card-foot a{ font-size:13px; font-weight:700; color:var(--accent-light); display:flex; align-items:center; gap:4px; }
.gateway-card-foot a svg{ width:13px; height:13px; transition:transform .25s ease; }
.gateway-card-foot a:hover svg{ transform:translateX(3px); }

/* --- Cartes "types de compte" (image haut + badge overlay) --- */
.account-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.account-card{ overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-card); transition:transform var(--dur-med) var(--ease-out); }
.account-card:hover{ transform:translateY(-5px); }
.account-card-media{ position:relative; height:170px; overflow:hidden; }
.account-card-media img{ width:100%; height:100%; object-fit:cover; }
.account-card-badge{
  position:absolute; left:14px; bottom:14px; background:#101820; color:#fff; font-size:13.5px; font-weight:700;
  padding:8px 14px; border-radius:var(--radius-sm);
}
.account-card-share{
  position:absolute; right:14px; bottom:14px; width:32px; height:32px; border-radius:50%;
  background:rgba(244,241,235,.92); display:flex; align-items:center; justify-content:center;
}
.account-card-share svg{ width:14px; height:14px; color:#101820; }
.account-card-media-icon svg{ width:52px; height:52px; color:#fff; opacity:.92; }
.account-card-body{ padding:20px; }
.account-card-body p{ color:var(--text-secondary); font-size:14.5px; margin-bottom:16px; line-height:1.6; }
.account-card-body a{ font-size:14px; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:5px; }
.account-card-body a svg{ width:13px; height:13px; }

/* --- Bandeau partenaires --- */
.partners-strip{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:40px 0; }
.partners-strip .plabel{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--text-secondary); opacity:.55; white-space:nowrap; }
.partners-strip .plabel:hover{ opacity:1; }

/* --- Étapes "How it's work" en cercles connectés --- */
.steps-circles{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; align-items:start; text-align:center; }
.steps-circles.steps-3{ grid-template-columns:repeat(3,1fr); }
.step-circle-item{ position:relative; padding:0 14px; }
.step-circle-item::after{
  content:''; position:absolute; top:44px; left:calc(50% + 54px); width:calc(100% - 108px); height:2px;
  background:repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
}
.step-circle-item:last-child::after{ display:none; }
.step-circle{
  width:88px; height:88px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; position:relative; z-index:1;
  transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-med) ease;
}
.step-circle-item:hover .step-circle{ transform:translateY(-4px); border-color:var(--accent); }
.step-circle svg{ width:30px; height:30px; color:var(--accent-light); }
.step-circle-item h3{ font-size:16.5px; margin-bottom:6px; }
.step-circle-item p{ font-size:13.5px; color:var(--text-secondary); margin-bottom:6px; }
.step-circle-item .stepno{ font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }

/* --- Grille "Raisons de nous choisir" (2x2, icône filigrane) --- */
.reason-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.reason-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px; position:relative; overflow:hidden; transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-med) ease;
}
.reason-card:hover{ transform:translateY(-4px); border-color:var(--accent); }
.reason-card h3{ font-size:17px; margin-bottom:8px; }
.reason-card p{ color:var(--text-secondary); font-size:14.5px; line-height:1.6; max-width:220px; }
.reason-card-icon{ position:absolute; right:14px; bottom:10px; width:46px; height:46px; opacity:.14; }
.reason-card-icon svg{ width:100%; height:100%; color:var(--accent-light); }

/* --- Bloc "App mobile" (photo + badge flottant + lignes pointillées vers points forts) --- */
.mobile-app-block{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.mobile-app-visual{ position:relative; }
.mobile-app-visual img{ border-radius:var(--radius-lg); width:100%; object-fit:cover; }
.mobile-app-badge{
  position:absolute; left:-18px; bottom:24px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 18px; box-shadow:var(--shadow-soft); min-width:170px;
}
.mobile-app-badge .num{ font-family:var(--font-display); font-size:20px; font-weight:800; }
.mobile-app-badge .lbl{ font-size:12px; color:var(--text-secondary); margin-bottom:6px; }
.mobile-app-badge .stars{ color:var(--amber); font-size:13px; letter-spacing:1px; }
.mobile-app-points{ display:flex; flex-direction:column; gap:22px; margin:22px 0 24px; }
.mobile-app-point{ display:flex; align-items:center; gap:14px; }
.mobile-app-point .ico{ width:42px; height:42px; border-radius:50%; background:var(--accent-glow); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mobile-app-point .ico svg{ width:19px; height:19px; color:var(--accent-light); }
.mobile-app-point strong{ display:block; font-size:15px; margin-bottom:2px; }
.mobile-app-point span{ font-size:13.5px; color:var(--text-secondary); }

/* --- FAQ accordéon façon Bullion : cercle numéroté + item actif surligné --- */
.faq-bullion{ display:flex; flex-direction:column; gap:10px; }
.faq-bullion .faq-item{ border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); padding:6px 20px; }
.faq-bullion .faq-item[open]{ background:var(--bg-hover); border-color:var(--border-accent); }
.faq-bullion .faq-q{ display:flex; align-items:center; gap:16px; padding:18px 0; font-size:16px; font-weight:700; }
.faq-bullion .faq-q .faqnum{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--accent-fill); color:#fff;
  font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.faq-bullion .faq-q .faqtoggle{ margin-left:auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.faq-bullion .faq-a{ padding:0 0 20px 46px; max-width:none; }

/* --- Footer "Live chat" mini-carte (façon Bullion) --- */
.footer-help-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.footer-help-card h3{ font-size:15px; margin-bottom:6px; }
.footer-help-card p{ font-size:13px; color:var(--text-secondary); margin-bottom:16px; }
.footer-help-row{ display:flex; align-items:center; gap:12px; }
.footer-help-avatar{ width:38px; height:38px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; flex-shrink:0; }
.footer-help-row a{ font-size:13.5px; font-weight:700; color:#fff; display:flex; align-items:center; gap:4px; }
.footer-help-row a svg{ width:12px; height:12px; }

@media (max-width: 980px){
  .gateway-grid, .account-cards{ grid-template-columns:1fr; }
  .steps-circles{ grid-template-columns:repeat(2,1fr); gap:32px 0; }
  .step-circle-item::after{ display:none; }
  .reason-grid{ grid-template-columns:1fr; }
  .mobile-app-block{ grid-template-columns:1fr; }
  .partners-strip{ justify-content:center; }}

@media (max-width: 640px){
  .steps-circles, .steps-circles.steps-3{
    grid-template-columns:1fr; gap:0; text-align:left;
  }
  .step-circle-item{
    display:flex; align-items:flex-start; gap:16px; padding:20px 0;
    border-bottom:1px solid var(--border); text-align:left;
  }
  .step-circle-item:last-child{ border-bottom:none; }
  .step-circle-item::after{ display:none; }
  .step-circle{ flex-shrink:0; margin:0; }
  .step-circle-item h3{ margin-bottom:4px; }
}

/* ==========================================================
   Transitions de page natives (View Transitions API, cross-document)
   Aucun JS, aucun changement d'architecture : le navigateur anime lui-même
   la bascule entre deux pages PHP classiques. Dégradation totalement
   silencieuse sur les navigateurs qui ne supportent pas la spec (le site
   continue de fonctionner exactement comme avant, sans transition).
   ========================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .42s;
  animation-timing-function: var(--ease-out);
}
::view-transition-old(root) { animation-name: pioneerinvest-page-out; }
::view-transition-new(root) { animation-name: pioneerinvest-page-in; }

@keyframes pioneerinvest-page-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}
@keyframes pioneerinvest-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Le header vitrine et la coquille du dashboard "persistent" visuellement
   d'une page à l'autre au lieu de disparaître dans le fondu général —
   c'est ce qui donne l'impression d'une app qui reste en place. */
.site-header{ view-transition-name: pioneerinvest-site-header; }
.app-sidebar{ view-transition-name: pioneerinvest-app-sidebar; }
.app-topbar{ view-transition-name: pioneerinvest-app-topbar; }

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none !important; }
}

/* ==========================================================
   HOME — HERO 2.0 & ABOUT TEASER
   Refonte de la section hero + section suivante de la page
   d'accueil, sur un gabarit de mise en page dédié. Classes
   scopées (préfixe hero2- / about-teaser-) pour ne toucher
   à aucun autre style existant utilisé ailleurs sur le site.
   ========================================================== */

.hero2{ padding:20px 0 0; }
.hero2-panel{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:28px;
  padding:52px 52px 0; position:relative; overflow:hidden;
}
.hero2-grid{
  display:grid; grid-template-columns:1.2fr .72fr 1fr; gap:30px; align-items:start;
  padding-bottom:52px;
}

/* --- Nouvelle mise en page "freeform" du hero, calée sur la maquette de référence --- */
.hero2-ff{ position:relative; min-height:730px; padding-bottom:40px; }
.hero2-ff-text{ position:relative; z-index:2; max-width:46%; }
.hero2-ff-text .hero2-cta-row{ flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:30px; }
.hero2-ff-text .hero2-btn{ width:auto; }

.hero2-ff-photo-badge{
  position:absolute; left:47%; top:0; width:108px; height:108px; border-radius:50%; overflow:hidden;
  border:4px solid var(--bg-card); box-shadow:var(--shadow-soft); z-index:2;
}
.hero2-ff-photo-badge img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero2-ff-badge-group{ position:absolute; left:64%; top:16px; width:35%; z-index:2; }
.hero2-ff-badge-group h3{ font-family:var(--font-display); font-size:17px; font-weight:700; line-height:1.35; margin-top:14px; }

.hero2-ff-phone{ position:absolute; right:-16px; top:175px; width:50%; z-index:1; }
.hero2-ff-phone img{ width:100%; height:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.3)); }

.hero2-ff-stat{ position:absolute; left:32%; top:430px; width:232px; z-index:3; }

@media (max-width:980px){
  .hero2-ff{ min-height:0; padding-bottom:0; }
  .hero2-ff-text, .hero2-ff-photo-badge, .hero2-ff-badge-group, .hero2-ff-phone, .hero2-ff-stat{
    position:static; width:auto; max-width:none; left:auto; right:auto; top:auto;
  }
  .hero2-ff-text{ margin-bottom:28px; }
  .hero2-ff-photo-badge{ width:88px; height:88px; margin-bottom:16px; }
  .hero2-ff-badge-group{ margin-bottom:28px; }
  .hero2-ff-phone{ display:flex; justify-content:center; margin-bottom:28px; }
  .hero2-ff-phone img{ max-width:340px; }
  .hero2-ff-stat{ max-width:280px; }
}

/* --- Colonne 1 : texte, CTA, témoignage --- */
.hero2-title{ font-size:clamp(32px,4vw,46px); line-height:1.1; margin-bottom:18px; }
.hero2-sub{ color:var(--text-secondary); font-size:16px; max-width:440px; margin-bottom:28px; }
.hero2-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px; }
.hero2-btn{
  display:inline-flex; align-items:center; gap:14px; padding:6px 6px 6px 24px; border-radius:999px;
  font-weight:700; font-size:15px; white-space:nowrap; transition:transform .2s var(--ease-out), box-shadow .2s ease, border-color .2s ease;
  font-family:var(--font-display);
}
.hero2-btn-primary{ background:var(--gradient-cta); color:var(--cta-text); }
.hero2-btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 14px 26px -12px var(--accent-dim); }
.hero2-btn-secondary{ background:transparent; color:var(--text-primary); border:1.5px solid var(--border-accent); padding:5.5px 5.5px 5.5px 23px; }
.hero2-btn-secondary:hover{ border-color:var(--accent); transform:translateY(-2px); }
.hero2-btn-icon{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero2-btn-primary .hero2-btn-icon{ background:#fff; color:var(--accent); }
.hero2-btn-secondary .hero2-btn-icon{ background:var(--accent-fill); color:#fff; }
.hero2-btn-icon svg{ width:13px; height:13px; transform:rotate(-45deg); }

.hero2-quote-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.hero2-quote{ display:flex; gap:14px; align-items:flex-start; max-width:280px; }
.hero2-quote svg{ width:26px; height:26px; color:var(--border-accent); flex-shrink:0; margin-top:2px; }
.hero2-quote p{ font-size:14.5px; color:var(--text-secondary); line-height:1.5; margin-bottom:8px; }
.hero2-quote .author{ font-size:13.5px; font-weight:700; color:var(--text-primary); }
.hero2-quote-deco{ color:var(--text-muted); opacity:.55; flex-shrink:0; margin-bottom:4px; }
.hero2-quote-deco svg{ width:44px; height:44px; }

/* --- Colonne 2 : avatar-icône + connecteur + carte stat --- */
.hero2-col-mid{ display:flex; flex-direction:column; align-items:center; padding-top:6px; }
.hero2-avatar-badge{
  width:80px; height:80px; border-radius:50%; background:var(--accent-fill); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 16px 30px -14px var(--accent-dim); border:4px solid var(--bg-card);
}
.hero2-avatar-badge svg{ width:30px; height:30px; }
.hero2-connector{ width:1px; flex:1; min-height:56px; background:linear-gradient(var(--border-accent), transparent); margin:10px 0; }
.hero2-stat-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; box-shadow:var(--shadow-soft); width:100%; max-width:225px;
}
.hero2-stat-top{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.hero2-stat-icon{
  width:36px; height:36px; border-radius:50%; background:var(--accent-fill); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hero2-stat-icon svg{ width:16px; height:16px; }
.hero2-stat-tag{ font-size:11.5px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; display:block; }
.hero2-stat-value{ font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--accent); }
.hero2-stat-card p{ font-family:var(--font-display); font-weight:700; font-size:15.5px; line-height:1.35; color:var(--text-primary); }

/* --- Colonne 3 : badge + titre + visuel --- */
.hero2-badge-pill{
  display:inline-flex; align-items:center; gap:9px; background:var(--bg-card); border:1px solid var(--border);
  padding:6px 16px 6px 6px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--text-secondary); margin-bottom:18px;
}
.hero2-badge-pill .ic{
  width:24px; height:24px; border-radius:50%; background:var(--accent-glow); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hero2-badge-pill .ic svg{ width:12px; height:12px; }
.hero2-col-right h3{ font-family:var(--font-display); font-size:19px; font-weight:700; line-height:1.35; margin-bottom:20px; max-width:250px; }
.hero2-photo{
  position:relative;
  background:linear-gradient(160deg, var(--accent-glow), var(--bg-hover));
  aspect-ratio:4/4.4; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-lg); overflow:hidden;
}
.hero2-photo img{ width:56%; height:auto; filter:drop-shadow(0 24px 40px rgba(0,0,0,.22)); }
.hero2-photo.hero2-photo-device{ overflow:visible; }
.hero2-photo-device img.device-shot{ width:78%; height:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.35)); }
.hero2-photo-badge{
  position:absolute; left:-16px; bottom:20px; width:92px; height:92px; border-radius:16px; overflow:hidden;
  border:3px solid var(--bg-card); box-shadow:var(--shadow-deep); z-index:2;
}
.hero2-photo-badge img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:600px){ .hero2-photo-badge{ width:70px; height:70px; left:-10px; bottom:14px; } }

/* --- Barre du bas, forme découpée façon "billet" --- */
.hero2-bottombar{
  margin:0 -52px; background:var(--bg-card); display:flex; align-items:stretch; min-height:150px;
  clip-path:polygon(0 54px, 300px 54px, 348px 0, 100% 0, 100% 100%, 0 100%);
}
.hero2-bb-left{ flex:0 0 320px; padding:64px 26px 26px 44px; }
.hero2-bb-left p{ font-family:var(--font-display); font-weight:700; font-size:15.5px; margin-bottom:14px; max-width:220px; }
.hero2-bb-form{ display:flex; border:1.5px solid var(--border-accent); border-radius:999px; padding:5px; gap:4px; background:var(--bg-base); max-width:280px; }
.hero2-bb-form input{ border:none; background:none; padding:8px 6px 8px 14px; flex:1; min-width:0; color:var(--text-primary); font-size:13.5px; font-family:inherit; }
.hero2-bb-form input:focus{ outline:none; }
.hero2-bb-form button{ background:var(--gradient-cta); color:var(--cta-text); border:none; border-radius:999px; padding:9px 18px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; font-family:var(--font-display); transition:filter .2s ease; }
.hero2-bb-form button:hover{ filter:brightness(1.08); }
.hero2-bb-right{ flex:1; display:flex; align-items:center; gap:34px; padding:26px 44px 26px 20px; flex-wrap:wrap; }
.hero2-bb-star{ color:var(--accent); flex-shrink:0; display:flex; }
.hero2-bb-star svg{ width:44px; height:44px; }
.hero2-bb-avatars{ display:flex; align-items:center; flex-shrink:0; }
.hero2-bb-avatars .av{
  width:72px; height:72px; border-radius:50%; background:var(--bg-hover); border:3px solid var(--bg-card);
  margin-left:-20px; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); flex-shrink:0;
  overflow:hidden;
}
.hero2-bb-avatars .av img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero2-bb-avatars .av svg{ width:27px; height:27px; }
.hero2-bb-avatars .av:first-child{ margin-left:0; }
.hero2-bb-avatars .av.plus{ background:var(--accent-fill); color:#fff; font-weight:800; font-size:20px; }
.hero2-bb-right p{ font-size:16px; color:var(--text-secondary); white-space:nowrap; }
.hero2-bb-right p strong{ font-family:var(--font-display); color:var(--accent); font-size:19px; }

@media (max-width:980px){
  .hero2-panel{ padding:36px 28px 0; border-radius:22px; }
  .hero2-grid{ grid-template-columns:1fr; padding-bottom:36px; gap:36px; }
  .hero2-col-mid{ flex-direction:row; justify-content:flex-start; gap:16px; }
  .hero2-connector{ display:none; }
  .hero2-stat-card{ max-width:none; }
  .hero2-photo{ aspect-ratio:16/10; }
  .hero2-bottombar{ margin:0 -28px; clip-path:none !important; flex-wrap:wrap; }
  .hero2-bb-left{ flex:1 1 100%; padding:28px 28px 20px; }
  .hero2-bb-left p{ max-width:none; }
  .hero2-bb-right{ flex:1 1 100%; padding:0 28px 28px; }
}

/* --- Section "About teaser" (juste après le hero) --- */
.about-teaser{ padding:88px 0; }
.about-teaser-grid{ display:grid; grid-template-columns:.92fr 1.15fr; gap:60px; align-items:center; }
.about-teaser-media{ position:relative; }
.about-teaser-media img{ width:100%; height:460px; object-fit:cover; border-radius:var(--radius-lg); display:block; }
.about-teaser-stat-card{
  position:absolute; left:-16px; bottom:-16px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 22px; box-shadow:var(--shadow-soft);
}
.about-teaser-stat-card strong{ display:block; font-family:var(--font-display); font-size:25px; font-weight:800; color:var(--accent); line-height:1.1; }
.about-teaser-stat-card span{ font-size:12.5px; color:var(--text-secondary); }
.about-teaser-badge{
  position:absolute; top:-18px; right:-18px; width:104px; height:104px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border); box-shadow:var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
}
.about-teaser-badge svg.ring{ position:absolute; inset:0; width:100%; height:100%; animation:aboutBadgeSpin 14s linear infinite; }
.about-teaser-badge .center-ic{
  width:36px; height:36px; border-radius:50%; background:var(--accent-fill); color:#fff;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
}
.about-teaser-badge .center-ic svg{ width:15px; height:15px; transform:rotate(-45deg); }
@keyframes aboutBadgeSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .about-teaser-badge svg.ring{ animation:none; } }

/* --- Image "marchés mondiaux" : statique, sans cadre, grand format --- */
.globe-tablet-wrap{ display:flex; align-items:center; justify-content:center; }
.globe-tablet-img{ width:100%; max-width:520px; height:auto; display:block; }
@media (max-width:860px){ .globe-tablet-img{ max-width:400px; } }

.about-teaser-content h2{ font-size:clamp(26px,3.2vw,38px); margin:14px 0 16px; }
.about-teaser-content > p.lead2{ color:var(--text-secondary); max-width:480px; margin-bottom:28px; }
.about-teaser-expertise-card{
  display:flex; align-items:center; gap:22px; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:26px; margin-bottom:30px; flex-wrap:wrap;
}
.about-teaser-expertise-card h4{ font-family:var(--font-display); font-size:16.5px; font-weight:700; margin-bottom:14px; flex-basis:100%; }
.about-teaser-expertise-card ul{ display:flex; flex-direction:column; gap:10px; flex:1; min-width:200px; }
.about-teaser-expertise-card li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--text-secondary); }
.about-teaser-expertise-card li svg{ width:16px; height:16px; color:var(--green); flex-shrink:0; }
.about-teaser-expertise-thumb{ flex-shrink:0; width:140px; height:140px; border-radius:var(--radius); background:var(--bg-hover); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.about-teaser-expertise-thumb img{ width:74%; height:74%; object-fit:contain; }
.about-teaser-cta-row{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.about-teaser-team{ display:flex; align-items:center; gap:11px; }
.att-avatar{ width:40px; height:40px; border-radius:50%; background:var(--accent-glow); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.att-avatar svg{ width:17px; height:17px; }
.about-teaser-team strong{ display:block; font-size:14px; font-weight:700; }
.about-teaser-team span{ font-size:12.5px; color:var(--text-muted); }

@media (max-width:860px){
  .about-teaser{ padding:56px 0; }
  .about-teaser-grid{ grid-template-columns:1fr; gap:60px; }
  .about-teaser-media img{ height:340px; }
}

/* ==========================================================
   HOME — SERVICES / PROJECTS / CTA-CARD / WHY / TESTIMONIALS
   / CTA-GUIDANCE / PRICING / FAQ (suite de la refonte vitrine)
   ========================================================== */

/* --- Services (3 cartes) --- */
.svc-section{ padding:88px 0; background:var(--bg-surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.svc-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.svc-head p{ color:var(--text-secondary); max-width:360px; font-size:14.5px; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:transform .3s var(--ease-out), border-color .3s ease; }
.svc-card:hover{ transform:translateY(-4px); border-color:var(--border-accent); }
.svc-media{ height:180px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.svc-media img{ width:60px; height:60px; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.28)); }
.svc-media.svc-media-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:none;
}
.svc-media.svc-media-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(124,182,92,.45), rgba(41,71,25,.55));
}
.svc-media .svc-ic{ position:absolute; left:18px; bottom:-18px; width:44px; height:44px; border-radius:12px; background:var(--accent-fill); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft); border:3px solid var(--bg-card); z-index:1; }
.svc-media .svc-ic svg{ width:19px; height:19px; }
.svc-body{ padding:30px 22px 22px; }
.svc-body h3{ font-family:var(--font-display); font-size:17px; font-weight:700; margin-bottom:8px; }
.svc-body p{ color:var(--text-secondary); font-size:14.5px; margin-bottom:18px; line-height:1.5; }
.svc-body a{ font-size:12.5px; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:5px; text-transform:uppercase; letter-spacing:.03em; }
.svc-body a svg{ width:12px; height:12px; }
@media (max-width:860px){ .svc-grid{ grid-template-columns:1fr; } }

/* --- Projects (grille 3+2) --- */
.proj-section{ padding:88px 0; }
.proj-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.proj-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:270px;
  display:flex; align-items:flex-end; grid-column:span 2;
  transition:transform .3s var(--ease-out);
}
.proj-card:nth-child(4), .proj-card:nth-child(5){ grid-column:span 3; min-height:220px; }
.proj-card:hover{ transform:translateY(-4px); }
.proj-card-bg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.proj-card-bg img{ width:44%; height:44%; object-fit:contain; opacity:.85; }
.proj-card-bg.proj-card-bg-photo img{ width:100%; height:100%; object-fit:cover; opacity:1; }
.proj-card-bg.proj-card-bg-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(16,24,32,.5), rgba(16,24,32,.72));
}
.proj-card-bg-photo + .proj-card-overlay{
  background:linear-gradient(0deg, rgba(5,6,10,.95), rgba(5,6,10,.55) 60%, rgba(5,6,10,.1) 100%);
}
.proj-card-overlay{ position:relative; z-index:1; padding:22px; width:100%; background:linear-gradient(0deg, rgba(5,6,10,.82), rgba(5,6,10,.1) 75%, transparent); }
.proj-card h3{ color:#fff; font-size:16.5px; font-weight:700; margin-bottom:5px; font-family:var(--font-display); }
.proj-card p{ color:rgba(255,255,255,.72); font-size:13px; }
.proj-arrow{ position:absolute; top:16px; right:16px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; color:#fff; }
.proj-arrow svg{ width:14px; height:14px; transform:rotate(-45deg); }
.proj-foot{ text-align:center; margin-top:40px; }
@media (max-width:860px){ .proj-grid{ grid-template-columns:1fr 1fr; } .proj-card{ grid-column:span 1 !important; } }
@media (max-width:560px){ .proj-grid{ grid-template-columns:1fr; } }

/* --- CTA + carte portefeuille --- */
.ctacard-section{ padding:0 0 88px; }
.ctacard-wrap{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:28px; padding:52px;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; overflow:hidden;
}
.ctacard-text h2{ font-size:clamp(24px,3vw,34px); margin-bottom:14px; max-width:420px; }
.ctacard-text p{ color:var(--text-secondary); margin-bottom:26px; max-width:420px; }
.ctacard-visual{
  background:linear-gradient(160deg, var(--accent), var(--bg-base)); border-radius:var(--radius-lg);
  padding:40px; display:flex; align-items:center; justify-content:center; min-height:260px;
}
.ctacard-mock{ background:#101820; border-radius:var(--radius-lg); padding:26px; width:100%; max-width:320px; color:#fff; box-shadow:var(--shadow-deep); }
.ctacard-mock-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.ctacard-mock-label{ font-size:12px; opacity:.65; margin-bottom:6px; }
.ctacard-mock-value{ font-family:var(--font-display); font-size:29px; font-weight:800; white-space:nowrap; }
.ctacard-mock-badge{ background:rgba(255,255,255,.14); border-radius:999px; padding:6px 13px; font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.ctacard-mock-change{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:var(--green); background:rgba(124,182,92,.16); padding:4px 10px; border-radius:20px; margin-top:4px; }
.ctacard-mock-chart{ width:100%; height:70px; margin-top:8px; }
@media (max-width:860px){ .ctacard-wrap{ grid-template-columns:1fr; padding:32px; } }

/* --- Why choose us --- */
.why-section{ padding:88px 0; }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.why-list{ display:flex; flex-direction:column; margin-top:24px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.why-item{ display:flex; gap:16px; padding:20px 22px; border-bottom:1px solid var(--border); }
.why-item:last-child{ border-bottom:none; }
.why-item .ic{ width:42px; height:42px; border-radius:10px; background:var(--accent-glow); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.why-item .ic svg{ width:19px; height:19px; }
.why-item h4{ font-family:var(--font-display); font-size:15.5px; font-weight:700; margin-bottom:4px; }
.why-item p{ color:var(--text-secondary); font-size:13.5px; line-height:1.5; }
.why-media{ position:relative; max-width:420px; margin:0 auto; }
.why-media-inner{ border-radius:50%; overflow:hidden; aspect-ratio:1; background:var(--bg-hover); }
.why-media-inner img{ width:100%; height:100%; object-fit:cover; }
.why-badge-circle{
  position:absolute; bottom:18px; right:18px; width:126px; height:126px; border-radius:50%; background:var(--accent);
  color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  box-shadow:var(--shadow-deep); padding:6px; border:4px solid var(--bg-base);
}
.why-badge-circle strong{ font-family:var(--font-display); font-size:18px; line-height:1.1; }
.why-badge-circle span{ font-size:9.5px; line-height:1.25; margin-top:3px; max-width:82px; }
@media (max-width:860px){ .why-grid{ grid-template-columns:1fr; gap:36px; } .why-media{ order:-1; } }

/* --- Testimonials --- */
.testi-section{ padding:88px 0; }
.testi-grid{ display:grid; grid-template-columns:.85fr 1.3fr; gap:20px; margin-top:32px; align-items:stretch; }
.testi-badge-card{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:36px 26px; gap:22px;
}
.testi-badge-card .ic{ width:100px; height:100px; border-radius:50%; background:var(--accent-glow); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.testi-badge-card .ic svg{ width:46px; height:46px; }
.testi-badge-card strong{ font-family:var(--font-display); font-size:17px; font-weight:700; line-height:1.3; }
.testi-quote-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; display:flex; flex-direction:column; justify-content:center; }
.testi-quote-card svg.mark{ width:30px; height:30px; color:var(--border-accent); margin-bottom:16px; flex-shrink:0; }
.testi-quote-card p.q{ font-family:var(--font-display); font-size:18px; font-weight:600; line-height:1.5; margin-bottom:16px; }
.testi-quote-card p.author{ font-size:13.5px; color:var(--text-secondary); font-weight:700; }

/* --- Slider de témoignages --- */
.testi-slider{ position:relative; }
.testi-slider-track{ position:relative; min-height:118px; }
.testi-slide{ display:none; opacity:0; animation:testiFade .4s ease forwards; }
.testi-slide.active{ display:block; }
@keyframes testiFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.testi-slider-dots{ display:flex; gap:8px; margin-top:20px; }
.testi-dot{ width:8px; height:8px; border-radius:50%; background:var(--border-accent); border:none; padding:0; cursor:pointer; transition:width .25s var(--ease-out), background .25s ease; }
.testi-dot.active{ width:22px; border-radius:5px; background:var(--accent); }
@media (prefers-reduced-motion:reduce){ .testi-slide{ animation:none; } }

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

/* --- CTA guidance (contact + visuel) --- */
.ctaguide-section{ padding:0 0 88px; }
.ctaguide-wrap{ background:var(--bg-surface); border:1px solid var(--border); border-radius:28px; padding:52px; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.ctaguide-text h2{ font-size:clamp(24px,3vw,32px); margin-bottom:14px; max-width:420px; }
.ctaguide-text p{ color:var(--text-secondary); margin-bottom:26px; max-width:420px; }
.ctaguide-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.ctaguide-phone{ display:flex; align-items:center; gap:10px; }
.ctaguide-phone .ic{ width:40px; height:40px; border-radius:50%; background:var(--accent-fill); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ctaguide-phone .ic svg{ width:17px; height:17px; }
.ctaguide-phone strong{ display:block; font-size:14px; font-weight:700; }
.ctaguide-phone span{ font-size:13px; color:var(--text-secondary); }
.ctaguide-visual{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:280px;
  background:linear-gradient(160deg,var(--accent-glow),var(--bg-hover)); display:flex; align-items:center; justify-content:center;
}
.ctaguide-visual img{ width:82%; height:auto; object-fit:contain; display:block; filter:drop-shadow(0 20px 34px rgba(0,0,0,.28)); }
.ctaguide-play{ position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; background:var(--accent-fill); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft); }
.ctaguide-play svg{ width:16px; height:16px; }
@media (max-width:860px){ .ctaguide-wrap{ grid-template-columns:1fr; padding:32px; } }

/* --- Pricing (teaser, 2 formules réelles) --- */
.pricing2-section{ padding:88px 0; }
.pricing2-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:24px; align-items:stretch; margin-top:36px; }
.pricing2-media{ border-radius:var(--radius-lg); overflow:hidden; min-height:260px; background:linear-gradient(160deg,var(--accent-glow),var(--bg-hover)); display:flex; align-items:center; justify-content:center; padding:20px; }
.pricing2-media img{ width:100%; height:100%; object-fit:contain; }
.pricing2-plans{ display:flex; flex-direction:column; gap:16px; justify-content:center; }
.pricing2-plan{ background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.pricing2-plan.featured{ border-color:var(--border-accent); background:linear-gradient(120deg,var(--bg-card),var(--bg-raised)); position:relative; }
.pricing2-plan-badge{ position:absolute; top:-11px; left:26px; background:var(--gradient-cta); color:var(--cta-text); font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; }
.pricing2-plan-name{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.pricing2-plan-name svg{ width:13px; height:13px; color:var(--accent); }
.pricing2-plan-title{ font-family:var(--font-display); font-size:19px; font-weight:700; margin-bottom:8px; }
.pricing2-plan-price{ font-family:var(--font-display); font-size:27px; font-weight:800; }
.pricing2-plan-price span{ font-size:13px; color:var(--text-secondary); font-weight:500; }
.pricing2-plan-feats{ display:flex; flex-direction:column; gap:7px; font-size:13.5px; color:var(--text-secondary); }
.pricing2-plan-feats li{ display:flex; align-items:center; gap:8px; }
.pricing2-plan-feats svg{ width:14px; height:14px; color:var(--green); flex-shrink:0; }
@media (max-width:860px){ .pricing2-grid{ grid-template-columns:1fr; } .pricing2-plan{ flex-direction:column; align-items:flex-start; } }

/* --- FAQ (restylée façon liste + visuel) --- */
.faq2-section{ padding:88px 0; background:var(--bg-surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.faq2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.faq2-list details{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px; overflow:hidden; }
.faq2-list details[open]{ border-color:var(--border-accent); }
.faq2-list summary{ padding:16px 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:700; font-size:14.5px; font-family:var(--font-display); cursor:pointer; list-style:none; }
.faq2-list summary::-webkit-details-marker{ display:none; }
.faq2-list summary svg{ width:15px; height:15px; color:var(--text-secondary); flex-shrink:0; transition:transform .3s var(--ease-spring); }
.faq2-list details[open] summary svg{ transform:rotate(45deg); }
.faq2-list .a{ padding:0 20px 18px; color:var(--text-secondary); font-size:13.5px; line-height:1.6; }
.faq2-side img{ border-radius:var(--radius-lg); width:100%; height:230px; object-fit:cover; margin-top:26px; }
.faq2-bottombar{
  display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 34px; margin-top:36px; flex-wrap:wrap;
}
.faq2-bottombar h3{ font-family:var(--font-display); font-size:19px; font-weight:700; }
.faq2-bottombar p{ color:var(--text-secondary); font-size:13.5px; max-width:320px; }
@media (max-width:860px){ .faq2-grid{ grid-template-columns:1fr; gap:32px; } }

/* ==========================================================
   FOOTER 2.0 — barre de contact + section sombre (photo en
   overlay, opacité réduite) + colonnes de liens
   ========================================================== */
.ftr2{ position:relative; margin-top:40px; }

.ftr2-contact-bar{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-bottom:-46px;
}
.ftr2-contact-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px 20px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-soft);
}
.ftr2-contact-card .ic{
  width:44px; height:44px; border-radius:50%; background:var(--accent-fill); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ftr2-contact-card .ic svg{ width:18px; height:18px; }
.ftr2-contact-card strong{ display:block; font-family:var(--font-display); font-size:13.5px; font-weight:700; margin-bottom:2px; }
.ftr2-contact-card span{ font-size:13px; color:var(--text-secondary); }

.ftr2-main{
  position:relative; padding:88px 0 0; overflow:hidden; color:#f4f1eb;
  background:#0b1218;
}
.ftr2-main-bg{ position:absolute; inset:0; z-index:0; }
.ftr2-main-bg img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.ftr2-main-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,18,24,.72), rgba(11,18,24,.9));
}
.ftr2-main .container{ position:relative; z-index:1; }

.ftr2-grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px; }
.ftr2-brand-logo{ height:30px; width:auto; display:block; margin-bottom:16px; }
.ftr2-desc{ color:rgba(244,241,235,.6); font-size:13.5px; line-height:1.7; max-width:280px; margin-bottom:22px; }
.ftr2-social{ display:flex; gap:10px; }
.ftr2-social a{
  width:36px; height:36px; border-radius:50%; background:rgba(244,241,235,.08); border:1px solid rgba(244,241,235,.12);
  color:#f4f1eb; display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .2s ease;
}
.ftr2-social a:hover{ background:var(--accent); transform:translateY(-2px); }
.ftr2-social a svg{ width:15px; height:15px; }

.ftr2-col-title{ font-family:var(--font-display); font-size:16px; font-weight:700; margin-bottom:20px; color:#fff; }
.ftr2-col ul{ display:flex; flex-direction:column; gap:13px; }
.ftr2-col a{
  display:flex; align-items:center; gap:9px; color:rgba(244,241,235,.68); font-size:14px; font-weight:600; transition:color .2s ease, transform .2s ease;
}
.ftr2-col a:hover{ color:#fff; transform:translateX(3px); }
.ftr2-col a .chev{ color:var(--accent-light); flex-shrink:0; }
.ftr2-col a .chev svg{ width:11px; height:11px; }

.ftr2-subrow{
  position:relative; z-index:1; border-top:1px solid rgba(244,241,235,.1); padding:22px 0;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.ftr2-disclaimer{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:rgba(244,241,235,.45); max-width:640px; line-height:1.6; }
.ftr2-disclaimer svg{ width:14px; height:14px; flex-shrink:0; margin-top:1px; opacity:.7; }
.ftr2-disclaimer a{ color:rgba(244,241,235,.65); text-decoration:underline; }
.ftr2-legalrow{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ftr2-legalrow a{ font-size:12.5px; color:rgba(244,241,235,.5); }
.ftr2-legalrow a:hover{ color:#fff; }
.ftr2-lang{ display:flex; gap:4px; }
.ftr2-lang a{ padding:3px 8px; border-radius:6px; font-size:11.5px; font-weight:700; color:rgba(244,241,235,.5); }
.ftr2-lang a.active{ background:rgba(244,241,235,.1); color:#fff; }

.ftr2-bottom{ position:relative; z-index:1; border-top:1px solid rgba(244,241,235,.1); padding:20px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.ftr2-bottom p{ font-size:13px; color:rgba(244,241,235,.5); }
.ftr2-bottom-links{ display:flex; gap:24px; }
.ftr2-bottom-links a{ font-size:13px; color:rgba(244,241,235,.5); }
.ftr2-bottom-links a:hover{ color:#fff; }

@media (max-width:980px){
  .ftr2-contact-bar{ grid-template-columns:1fr 1fr; margin-bottom:-30px; }
  .ftr2-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .ftr2-contact-bar{ grid-template-columns:1fr; margin-bottom:0; }
  .ftr2-main{ padding-top:36px; }
  .ftr2-grid{ grid-template-columns:1fr; gap:36px; }
}

/* --- Hero 2.0 "simple" (mono-colonne), pour les pages vitrine secondaires --- */
.hero2-simple{ padding:20px 0 0; }
.hero2-simple-panel{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:28px;
  padding:56px 52px; position:relative; overflow:hidden;
}
.hero2-simple-panel .eyebrow{ margin-bottom:16px; }
.hero2-simple-panel h1{ font-size:clamp(30px,4.4vw,48px); line-height:1.1; margin-bottom:20px; max-width:720px; }
.hero2-simple-panel .lead{ max-width:600px; }
@media (max-width:640px){ .hero2-simple-panel{ padding:32px 24px; border-radius:22px; } }

/* --- section-head.split : empiler titre + action sur mobile (le titre wrappait sur des lignes trop étroites) --- */
@media (max-width:640px){
  .section-head.split{ flex-direction:column; align-items:flex-start; gap:16px; }
  .section-head.split .btn{ align-self:flex-start; }
}

/* --- Carte conteneur du widget TradingView (pas de hover "lien") --- */
.tv-widget-card{ transition:none; cursor:default; }
.tv-widget-card:hover{ transform:none; border-color:var(--border); box-shadow:none; }
.tradingview-widget-container{ min-height:480px; }