:root{
  --ff-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-heading: "Sora", var(--ff-ui);
}
body{ font-family: var(--ff-ui); }
h1,h2,h3,.h1,.h2,.h3{ font-family: var(--ff-heading); font-weight:800; letter-spacing:.2px; }

:root{
--bg: #f8faf7; --fg:#0f172a; --muted:#64748b; --brand:#059669; --brand-2:#f59e0b; --card:#ffffff; --gold:#e6c229;
--brd:#e2e8f0; --radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#fff, var(--bg));color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
/* NEW : sticky uniquement hors home */
body:not(.home-hero) .site-header{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--brd);
  z-index: 20;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand { display:flex; align-items:center; gap:10px; }
.brand-link { display:inline-flex; align-items:center; }
.logo-img {
  height: 55px;               /* hauteur plus raisonnable */
  width: auto;
  display: block;
  object-fit: contain;
}
.name { font-weight:700; }
.name{font-weight:700}
.nav{display:flex;gap:10px}
.nav-link{padding:8px 12px;border-radius:12px;color:inherit;text-decoration:none}
.nav-link:hover{background:#f1f5f9}
.site-main{padding:24px 0 48px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero .card{background:var(--card);border:1px solid var(--brd);border-radius:24px;padding:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:16px;text-decoration:none;border:1px solid var(--brd);background:#fff}
.btn.primary{background:var(--brand);color:#fff;border-color:transparent}
.btn:hover{transform:translateY(1px)}
.grid{display:grid;gap:16px}
.grid-encarts{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--brd);border-radius:24px;padding:20px}
.card h3{margin:8px 0}
.muted{color:var(--muted)}
.logo-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.logo-cell{border:1px solid var(--brd);border-radius:14px;display:flex;align-items:center;justify-content:center;background:#fff;aspect-ratio:2/1}
.logo-cell img{max-height:40px;object-fit:contain}
.form{background:#fff;border:1px solid var(--brd);border-radius:24px;padding:20px;display:grid;gap:14px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.input{width:100%;padding:10px 12px;border:1px solid var(--brd);border-radius:12px}
.checkbox{display:flex;align-items:flex-start;gap:10px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-top:1px solid var(--brd)}
.partners-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.partner-card{background:#fff;border:1px solid var(--brd);border-radius:20px;padding:12px;text-decoration:none;color:inherit}
.partner-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.06)}
.partner-thumb{background:#f8fafc;border-radius:14px;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden}
.partner-thumb img{max-height:100%;object-fit:contain}


@media (max-width:900px){
.hero{grid-template-columns:1fr}
.grid-encarts{grid-template-columns:1fr}
.partners-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* === CultureCash – peaufinage dashboard === */
:root{
  --brand:#0ea5e9;       /* teal */
  --brand-600:#0284c7;
  --ink:#0f172a;         /* bleu nuit */
  --peacock:#0ea5e9;
  --peacock-dark:#0b7fb1;
  --bg-grad: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 50%, #f5f3ff 100%);
}

.hero {
  background: var(--bg-grad);
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.stat {
  background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:14px;
  box-shadow:0 6px 24px rgba(2,132,199,.08);
}
.stat .label { color:#64748b; font-size:13px; }
.stat .value { font-size:36px; font-weight:800; line-height:1; margin-top:6px; }

.badge {
  display:inline-flex; align-items:center; gap:6px;
  background:#ecfeff; border:1px solid #bae6fd; color:#075985;
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px;
}

.icon-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 13px; border:1px solid #cbd5e1; border-radius:12px; background:#fff;
  font-weight:600; text-decoration:none;
}
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(15,23,42,.08); }
.icon-btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.icon-btn.primary:hover{ background:var(--brand-600); border-color:var(--brand-600); }

.avatar { width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#eef2ff;border:1px solid #c7d2fe;font-weight:800;color:#3730a3; }
.info-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (max-width:780px){ .info-grid{ grid-template-columns:1fr; } }

.table { width:100%; border-collapse:collapse; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; }
.table thead th{ background:#f8fafc; font-weight:700; padding:10px; text-align:left; }
.table td{ padding:10px; border-top:1px solid #e2e8f0; }
.table tr:hover td{ background:#f9fafb; }
/* Liens : même couleur avant/après visite */
a, a:visited { color: #0f172a; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Meilleurs espacements des titres dans le dashboard */
.h1 { font-size: 40px; font-weight: 800; margin: 0; }
.muted { color:#64748b; }

/* Cartes du dashboard plus aérées */
.stat, .card { padding: 16px; border-radius: 16px; }

/* Encarts KPI de hauteur égale */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; align-items:stretch; }
.stat { display:flex; flex-direction:column; justify-content:space-between; }

/* Encapsuler la table pour éviter les chevauchements/overflows */
.table-wrap { margin-top: 10px; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; border:1px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
.table thead th { background:#f8fafc; font-weight:700; padding: 10px; text-align:left; white-space: nowrap; }
.table td { padding:10px; border-top:1px solid #e2e8f0; }
.table td:last-child, .table th:last-child { text-align: right; }

/* Boutons d'action en haut à droite */
.icon-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid #cbd5e1; border-radius:12px; background:#fff; font-weight:600; }
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(15,23,42,.08); }
.icon-btn.primary{ background:#0ea5e9; border-color:#0ea5e9; color:#fff; }
.icon-btn.primary:hover{ background:#0284c7; border-color:#0284c7; }
/* === HERO rotatif === */
/* ===== HERO plein écran & net ===== */
.hero{
  position: relative;
  min-height: 92vh;              /* plein haut, sans forcer 100vh pour tenir compte des barres mobiles */
  height: 92svh;                 /* unités "small viewport" pour mobiles modernes */
  display: grid;
  overflow: hidden;
  border-radius: 0;              /* full-bleed */
  margin: 0;                     /* colle au haut de page */
}

.hero-slide{
  position:absolute; inset:0;
  background-image: var(--bg);
  background-size: cover;        /* image nette, pas de zoom dynamique */
  background-position: center;   /* ajuste si besoin: 'center top' pour les visages */
  background-repeat: no-repeat;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
  /* IMPORTANT: aucun transform ni zoom -> pas de flou */
}

.hero-slide.is-active{
  opacity:1; visibility:visible;
}

/* Overlay plus léger (pas de flou global) */
.hero-overlay{
  position:absolute; inset:0;
  /* dégradé doux pour la lisibilité + vignette en bas */
  background:
    linear-gradient(180deg, rgba(6,10,18,.25) 0%, rgba(6,10,18,.40) 35%, rgba(6,10,18,.55) 65%, rgba(6,10,18,.66) 100%),
    radial-gradient(120% 100% at 20% 20%, transparent 0, rgba(8,12,20,.30) 60%, rgba(8,12,20,.55) 100%);
}

/* Bloc texte : léger, sans blur, lisible */
.hero-content{
  position: absolute;
  inset: auto 0 9vh 0;                 /* bas-gauche */
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(14px, 2.2vw, 24px);
  color: #fff;
}

.hero .brand-mini{
  font-size: 14px; opacity:.9; margin:0 0 8px;
}
.hero h1{
  margin:0 0 8px;
  line-height: 1.05;
  font-weight: 850;
  font-size: clamp(28px, 5.2vw, 60px);
  letter-spacing:.2px;
}
.hero .accent{ color:#5ee3ff; }
.hero .lead{
  margin: 10px 0 16px;
  font-size: clamp(14px, 1.9vw, 19px);
  color: #e6f3ff;
  max-width: 60ch;
}
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.btn.primary{ background: linear-gradient(180deg, #22d3ee, #0ea5e9); color:white; border:none;font-weight: bold; }
.btn.ghost{ background: transparent; color:#e6f4ff; border:1px solid rgba(255,255,255,.4); }
.btn{ padding:12px 16px; border-radius:12px; text-decoration:none; display:inline-block; }

/* Flèches + dots */
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(15,20,32,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color:#fff; cursor:pointer;
}
.hero-nav.prev{ left:16px; }
.hero-nav.next{ right:16px; }

.hero-dots{
  position:absolute; left:0; right:0; bottom:14px;
  display:flex; gap:6px; justify-content:center; z-index:5;
}
.hero-dots button{
  width:9px; height:9px; border-radius:999px; border:none;
  background: rgba(255,255,255,.4); cursor:pointer; transition:all .25s ease;
}
.hero-dots button.is-active{ width:26px; background:#22d3ee; }

/* ===== HEADER au-dessus du hero ===== */
.site-header.over-hero{
  position: absolute; top:0; left:0; right:0;
  background: transparent;
  border-bottom: none;
  z-index: 10;
}
.home-hero .site-header.over-hero a,
.home-hero .site-header.over-hero .nav a,
.home-hero .site-header.over-hero .brand { color: #fff; }

/* Quand on scrolle après le hero -> header solide */
.site-header.over-hero.is-solid{
  position: fixed;                 /* colle en haut en scroll */
  background: rgba(10,14,22,.85);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* petits écrans */
@media (max-width: 640px){
  .hero{ min-height: 86vh; height: 86svh; }
  .hero-content{ inset: auto 0 8vh 0; padding: 14px; }
}
/* ===== Header over hero ===== */
.site-header{
  position: absolute;            /* sits over the hero */
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: transparent;
  border-bottom: none;
}

.site-header .header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;            /* header height control */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo{ height: 64px; width:auto; display:block; }
.brand-name{ font-weight: 700; font-size: 20px;}

/* nav links inline */
.nav{ display:flex; gap:16px;}
.nav a{ text-decoration:none; font-weight:600; background:linear-gradient(180deg, #22d3ee, #0ea5e9);border-radius: 12px;padding: 10px;width: 80px;text-align: center;}

/* On top of the hero -> white content */
.home-hero .site-header.over-hero .brand-name,
.home-hero .site-header.over-hero .nav a{
  color: #ffffff;
}

/* Become solid after the hero */
.site-header.over-hero.is-solid{
  position: fixed;               /* pin on scroll */
  background: rgba(10,14,22,.86);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* When solid, prefer near-white for legibility */
.site-header.over-hero.is-solid .brand-name,
.site-header.over-hero.is-solid .nav a{
  color: #eef3ff;
}

/* Spacer default height equals header height;
   we collapse it by default and reveal it only when header is fixed */
#header-spacer{ height: 0; transition: height .2s ease; }

/* Optional: smaller paddings on small screens */
@media (max-width: 640px){
  .site-header .header-inner{ padding: 10px 12px; }
  .brand-logo{ height: 28px; }
}
/* ===== HOME : header au-dessus de l'image ===== */
body.home-hero .site-header{
  position: absolute;      /* flotte sur le hero */
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: none;
  z-index: 30;
}
/* Liens/noms en blanc sur l'image */
body.home-hero .site-header .brand, 
body.home-hero .site-header .brand-name, 
body.home-hero .site-header .nav a { color:#fff; }

/* Quand on a quitté le hero -> header solide */
body.home-hero .site-header.is-solid{
  position: fixed;         /* se “colle” en haut */
  background: rgba(10,14,22,.86);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.home-hero .site-header.is-solid .brand-name,
body.home-hero .site-header.is-solid .nav a { color:#eef3ff; }

/* Spacer (utile quand le header devient fixed) */
#header-spacer{ height:0; transition:height .2s ease; }
.engagement
{background:linear-gradient(180deg,#22d3ee,#0ea5e9); color:white;border-radius: 20px;padding: 20px;}
/* Pas de spacer hors home */
body:not(.home-hero) #header-spacer { display:none !important; height:0 !important; }

/* Hors home : header normal (sticky, fond clair) */
body:not(.home-hero) .site-header {
  position: sticky !important;
  top: 0;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--brd);
  z-index: 20;
}

/* Hors home : surtout pas “over-hero” */
body:not(.home-hero) .site-header.over-hero { position: sticky !important; background: rgba(255,255,255,.85) !important; }
/* Hors home (pas de header transparent) : neutralise tout spacer résiduel */
body:not(.home-hero) #header-spacer { display:none !important; height:0 !important; }
/* ===== Overrides anti-“grand espace” ===== */

/* Hors home : pas de spacer */
body:not(.home-hero) #header-spacer { display:none !important; height:0 !important; }

/* Hors home : header normal (sticky + fond clair) */
body:not(.home-hero) .site-header {
  position: sticky !important;
  top: 0;
  background: rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--brd);
  z-index: 20;
}

/* Hors home : assure qu'une éventuelle classe over-hero ne s'applique pas */
body:not(.home-hero) .site-header.over-hero {
  position: sticky !important;
  background: rgba(255,255,255,.85) !important;
  border-bottom: 1px solid var(--brd) !important;
}

/* Home : header “sur” l’image */
body.home-hero .site-header {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  border-bottom: none !important;
  z-index: 30;
}

/* Home : header solide après le hero */
body.home-hero .site-header.is-solid {
  position: fixed !important;
  background: rgba(10,14,22,.86) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
/* Bandeau de bienvenue (dashboard) */
.welcome{
  background: var(--bg-grad);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.welcome h3{ margin:0; font-size:22px; font-weight:800; }
/* ==== CAGNOTTE – HERO CARD ==== */
.balance-hero{
  position: relative;
  border-radius: 22px;
  padding: clamp(16px, 3.2vw, 28px);
  background: radial-gradient(120% 150% at 0% 0%, #0ea5e9 0%, #22d3ee 30%, #a78bfa 70%, #ec4899 100%);
  color: #071018;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 30px 60px rgba(14,165,233,.25), inset 0 1px 0 rgba(255,255,255,.6);
  isolation: isolate;
}

/* film “glass” pour lisibilité */
.balance-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  mix-blend-mode: screen;
  pointer-events:none;
}

/* reflets mouvants */
.balance-hero::after{
  content:"";
  position:absolute; inset:-40%;
  background: conic-gradient(from 90deg at 50% 50%, transparent 0 40%, rgba(255,255,255,.22) 45%, transparent 55% 100%);
  animation: spin 12s linear infinite;
  opacity:.5; pointer-events:none;
  z-index: -1;
}
@keyframes spin { to { transform: rotate(1turn); } }

.balance-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(14px,2.5vw,22px);
}
@media (max-width: 820px){ .balance-grid{ grid-template-columns:1fr; } }

.balance-amount{
  font-size: clamp(38px, 8vw, 64px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: .5px;
  color: #001018;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.balance-chip{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.05);
  padding: 6px 10px; border-radius: 999px; font-weight:700;
  -webkit-backdrop-filter: blur(6px);backdrop-filter:blur(6px);
}

.balance-actions{
  display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px;
}
.btn.fx{
  position: relative;
  background: #0f172a;
  color:#fff; border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.btn.fx.primary{
  background: linear-gradient(180deg,#22d3ee,#0ea5e9);
  color:#06111f; border: none;
  box-shadow: 0 10px 28px rgba(14,165,233,.35);
}
.btn.fx:hover{ transform: translateY(0); filter: brightness(1.03); }

/* halo animé autour d’un pictogramme */
.halo{
  position: relative; display:inline-grid; place-items:center;
  width:58px; height:58px; border-radius:18px;
  background: rgba(255,255,255,.65); border:1px solid rgba(0,0,0,.06);
  -webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);
}
.halo::after{
  content:"";
  position:absolute; inset:-10px; border-radius:24px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(34,211,238,.35), transparent 70%);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ transform: scale(.95); opacity:.75 } 50%{ transform: scale(1.05); opacity:.35 } }

/* cartes secondaires bien aérées */
.panel{ background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:16px; }
.panel h4{ margin:0 0 6px; font-size:16px; font-weight:800; }
/* Montants colorés */
.amt{ font-weight:700; text-align:right; white-space:nowrap; }
.amt.pos{ color:#16a34a; }   /* vert */
.amt.neg{ color:#dc2626; }   /* rouge */
/* ===== Encarts “feature cards” ===== */
.features { padding-inline: 16px; }
.features-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width: 960px){ .features-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px){ .features-grid{ grid-template-columns:1fr; } }

.feature-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:18px 18px 16px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  box-shadow:0 10px 40px rgba(15,23,42,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  isolation:isolate;  /* pour le pseudo fond */
}
.feature-card:hover{
  transform: translateY(-3px);
  box-shadow:0 18px 60px rgba(2,132,199,.12);
  border-color:#dbeafe;
}

.feature-bg{
  content:"";
  position:absolute; inset:auto -20% 0 -20%;
  height:50%;
  background:
    radial-gradient(60% 120% at 10% 110%, rgba(34,211,238,.25), transparent 60%),
    radial-gradient(70% 130% at 95% 120%, rgba(99,102,241,.20), transparent 60%),
    linear-gradient(180deg, rgba(226,232,240,.25), rgba(255,255,255,0));
  pointer-events:none;
  z-index:0;
}

.feature-head{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.feature-icon{
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:16px;
  background:linear-gradient(180deg,#eef2ff,#ecfeff);
  border:1px solid #dbeafe;
  box-shadow:0 6px 18px rgba(59,130,246,.18);
  overflow:hidden;
}
.feature-icon img{ width:34px; height:34px; object-fit:contain; }

.feature-title{
  margin:0; font-size:20px; font-weight:800; letter-spacing:.2px;
  color:#0f172a;
}
.feature-text{
  position:relative; z-index:1;
  margin:8px 0 12px; color:#475569; line-height:1.45;
}

.feature-actions{ position:relative; z-index:1; display:flex; gap:8px; flex-wrap:wrap; }

/* Boutons pilules */
.btn.pill{
  border-radius:999px; padding:10px 14px; font-weight:700;
}
.btn.pill.primary{
  background:linear-gradient(180deg,#22d3ee,#0ea5e9); color:#05131c; border:none;
}
.btn.pill.ghost{
  background:transparent; border:1px solid #cbd5e1; color:#0f172a;
}
.btn.pill:hover{ transform: translateY(1px); }

/* Option: léger badge “gratuit / automatique” si besoin
.badge-soft{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border-radius:999px; font-weight:700; font-size:12px;
  background:#ecfeff; border:1px solid #bae6fd; color:#075985;
}
*/
/* ====== Feature cards – v2 ====== */

/* Grid identique, on harmonise la hauteur à l’intérieur des cartes */
.feature-card{
  display:flex;                 /* empile */
  flex-direction:column;
  min-height: 220px;            /* assure une zone de texte confortable */
  padding: 20px 20px 18px;
  border-radius: 22px;
  background:#fff;
  border:1px solid #dbeafe;
  box-shadow:
    0 12px 40px rgba(2,132,199,.10),
    0 2px 0 rgba(255,255,255,.6) inset;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* Fond dégradé un peu plus visible */
.feature-bg{
  height:56%;
  background:
    radial-gradient(70% 120% at 10% 110%, rgba(56,189,248,.28), transparent 62%),
    radial-gradient(68% 130% at 95% 125%, rgba(99,102,241,.24), transparent 62%),
    linear-gradient(180deg, rgba(226,232,240,.28), rgba(255,255,255,0));
}

/* Hover : effet plus "wow" */
.feature-card:hover{
  transform: translateY(-4px);
  border-color:#bfdbfe;
  box-shadow:
    0 22px 70px rgba(2,132,199,.18),
    0 1px 0 rgba(255,255,255,.8) inset;
}

/* Icône plus grande, avec halo doux */
.feature-icon{
  width:72px; height:72px; border-radius:18px;
  background:linear-gradient(180deg,#eef2ff,#ecfeff);
  border:1px solid #c7d2fe;
  box-shadow:
    0 12px 26px rgba(59,130,246,.22),
    0 0 0 6px rgba(59,130,246,.08);
}
.feature-icon img{ width:42px; height:42px; }

/* Titre : pas de coupure bizarre, et garde le ? collé via .no-wrap */
.feature-title{
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
  color:#0ea5e9;
  word-break: keep-all;
}
.no-wrap{ white-space:nowrap; }

/* Texte */
.feature-text{
  margin:10px 0 14px;
  color:#475569; line-height:1.45;
}

/* Actions en bas : on pousse avec auto */
.feature-actions{
  margin-top:auto;              /* << colle les boutons en bas */
  display:flex; gap:10px; flex-wrap:wrap;
}

/* Boutons plus “pilule” et visibles */
.btn.pill{ border-radius:999px; padding:11px 16px; font-weight:800; }
.btn.pill.primary{
  background:linear-gradient(180deg,#22d3ee,#0ea5e9);
  color:#05131c; border:none;
  box-shadow: 0 8px 24px rgba(14,165,233,.25);
}
.btn.pill.primary:hover{ transform: translateY(1px); box-shadow: 0 10px 30px rgba(14,165,233,.35); }
.btn.pill.ghost{ background:transparent; border:1px solid #cbd5e1; color:#0f172a; }
/* ===== HERO split (slide #4) ===== */
.hero-slide.hero-split {
  /* on neutralise l'arrière-plan par défaut des autres slides */
  background: transparent;
}

/* grille 2 colonnes plein écran */
.hero-slide.hero-split .split-wrap{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns: min(48vw, 56%) 1fr;   /* photo à gauche, texte à droite */
}

/* colonne gauche : image portrait qui couvre sans déformer */
.hero-slide.hero-split .split-media{
  margin:0; overflow:hidden; position:relative;
  background:#0b1020;                            /* fond si bords de l’image */
}
.hero-slide.hero-split .split-media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
  transform: none; filter:none;                   /* pas d’effet de blur/zoom */
}

/* colonne droite : fond uni + contenu */
.hero-slide.hero-split .split-content{
  position:relative;
  background:#0c1226;                            /* fond uni sombre élégant */
  color:#fff;
  display:flex; align-items:center;
}
.hero-slide.hero-split .split-content::before{
  /* léger dégradé pour la profondeur, optionnel */
  content:""; position:absolute; inset:0;
  background: radial-gradient(70% 70% at 30% 30%, rgba(255,255,255,.06) 0, transparent 60%);
}
.hero-slide.hero-split .split-content .brand-mini,
.hero-slide.hero-split .split-content h1,
.hero-slide.hero-split .split-content .lead,
.hero-slide.hero-split .split-content .hero-cta{
  position:relative; z-index:1;
}

/* container du texte */
.hero-slide.hero-split .split-content{
  padding: clamp(16px, 4vw, 48px);
}

/* Responsive : on empile image puis texte */
@media (max-width: 900px){
  .hero-slide.hero-split .split-wrap{
    grid-template-columns: 1fr;
    grid-template-rows: 55% 45%;
  }
}
@media (max-width: 560px){
  .hero-slide.hero-split .split-wrap{
    grid-template-rows: 50% 50%;
  }
  .hero-slide.hero-split .split-content{
    padding: 16px;
  }
}
.hero-slide.hero-split .split-media img{ object-position: center top; }
/* --- Ensure the split layout stretches full height --- */
.hero-slide.hero-split { background: transparent; }

.hero-slide.hero-split .split-wrap{
  position:absolute; inset:0;
  display:grid;
  /* photo à gauche, texte à droite */
  grid-template-columns: minmax(320px, 52%) 1fr;
  height:100%;           /* <— critical */
  min-height:100%;       /* <— safari friendliness */
}

.hero-slide.hero-split .split-media,
.hero-slide.hero-split .split-content{
  min-height:100%;
}

/* Left column (portrait) */
.hero-slide.hero-split .split-media{
  margin:0; overflow:hidden; position:relative;
  background:#0b1020; /* fallback color */
}
.hero-slide.hero-split .split-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;  /* try 'center left' or 'center top' if needed */
  display:block;
}

/* Right column (solid background + content) */
.hero-slide.hero-split .split-content{
  position:relative;
  background:#0c1226;
  color:#fff;
  display:flex; align-items:center;
  padding: clamp(16px, 4vw, 48px);
}
.hero-slide.hero-split .split-content::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(70% 70% at 30% 30%, rgba(255,255,255,.06) 0, transparent 60%);
}
.hero-slide.hero-split .split-content > * { position:relative; z-index:1; }

/* Responsive: stack image then text */
@media (max-width: 900px){
  .hero-slide.hero-split .split-wrap{
    grid-template-columns: 1fr;
    grid-template-rows: 55% 45%;
  }
}
@media (max-width: 560px){
  .hero-slide.hero-split .split-wrap{ grid-template-rows: 50% 50%; }
  .hero-slide.hero-split .split-content{ padding:16px; }
}
/* right column text block */
.split-content { color:#eef3ff; }
.split-content .split-inner{
  width:min(640px, 92%);
  margin-left: clamp(8px, 6vw, 70px);   /* push in from the fold */
}

.kicker{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:#8fbfff; opacity:.9; margin:0 0 10px;
}

.headline{
  margin:0 0 10px;
  line-height:1.03;
  font-weight:850;
  font-size: clamp(28px, 5.2vw, 62px);
  letter-spacing:.2px;
  text-wrap:balance;
  text-shadow:0 2px 10px rgba(0,0,0,.24);
}
.headline .accent{
  color:#53e5ff;              /* cyan */
}
.headline .accent-2{
  background: linear-gradient(180deg,#7dd3fc,#22d3ee);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.sub{
  margin: 8px 0 14px;
  font-size: clamp(14px,1.6vw,18px);
  color:#cfe8ff;
}

.benefits{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:0; margin:0 0 18px; list-style:none;
}
.benefits li{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius:999px;
  font-weight:600; font-size:13px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) inset;
}

/* buttons on dark */
.split-content .btn.ghost{
  border-color: rgba(255,255,255,.45);
  color:#e8f6ff;
}
.split-content .btn.primary{
  background: linear-gradient(180deg, #22d3ee, #0ea5e9);
  color:#06111f; border:none;
}

/* mobile tuning */
@media (max-width: 900px){
  .split-content .split-inner{ margin-left: clamp(8px, 4vw, 30px); }
  .benefits{ gap:6px; }
}
/* ==== Contact section ==== */
.contact-wrap{
  margin: 28px auto 42px;
  max-width: 1100px;
  padding: 0 16px;
}
.contact-card{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  border:1px solid var(--brd);
  border-radius: 22px;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at -10% -10%, rgba(14,165,233,.10), transparent 40%),
    #fff;
}
.contact-left{
  padding: 20px;
}
.contact-right{
  padding: 20px;
  color:#0b1220;
  background: linear-gradient(160deg, #0ea5e9 0%, #22c55e 100%);
  /* léger voile pour lisibilité */
  position: relative;
}
.contact-right:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,10,18,.08), rgba(6,10,18,.22));
}
.contact-right > *{ position: relative; z-index: 1; color:#f2fbff; }
.contact-right .muted{ color:#e8f7ff; }

.cta-badge{
  display:inline-block;
  background:#fff;
  color:#0b1220;
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  margin-bottom:8px;
}
.contact-title{ margin:0 0 8px; font-size:20px; font-weight:800; }
.contact-bullets{ margin:10px 0 0; padding-left:18px; }
.contact-bullets li{ margin:6px 0; }

.contact-form .row{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:12px;
}
.contact-form .input{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--brd);
  border-radius:12px;
  background:#fff;
}
.contact-actions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px;
}
.contact-flash{
  padding:10px 12px; border-radius:12px; margin:10px 0;
  font-weight:600;
}
.contact-flash.ok{ background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
.contact-flash.err{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }

@media (max-width: 860px){
  .contact-card{ grid-template-columns: 1fr; }
  .contact-right{ border-top:1px solid rgba(255,255,255,.25); }
}