:root{
  --blue-dark:#0e2336;
  --blue:#1f4e79;
  --gold:#d4af37;
  --white:#ffffff;
  --gray:#f5f7fb;
  --text:#0f172a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:#ffffff;scroll-behavior:smooth}
.container{max-width:1480px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:14px 22px;border-radius:12px;text-decoration:none;font-weight:600;border:1px solid transparent;transition:.25s all ease}
.btn-primary{background:linear-gradient(135deg,var(--blue),#234d6a);color:#fff;border-color:#1c4264}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(31,78,121,.25)}
.btn-ghost{background:transparent;border-color:var(--blue);color:var(--blue)}
.btn-ghost:hover{background:rgba(31,78,121,.08)}

.nav{position:sticky;top:0;background:#ffffffcc;border-bottom:1px solid #eaeef5;backdrop-filter:saturate(180%) blur(12px);z-index:99}
.nav .inner{display:flex;align-items:center;gap:24px;padding:10px 0}
.nav .spacer{flex:1}
.nav a{color:#0e2336;text-decoration:none;font-weight:600;opacity:.9}
.nav a:hover{opacity:1}
.logo{display:flex;align-items:center;gap:10px}

.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,.18), transparent), #0e2336;color:#fff}
.hero .grid{display:grid;grid-template-columns:2.4fr 1fr;gap:40px;align-items:center;padding:80px 0}
.hero h1{font-size:42px;line-height:1.15;margin:0 0 16px}
.hero p{font-size:18px;opacity:.9;margin:0 0 28px}
.hero .bg{position:absolute;inset:0;opacity:.25;background-image:url('../assets/hero-bg.svg');background-size:cover;background-position:center}
.hero .badge{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);margin-bottom:16px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.mock{border-radius:16px;overflow:hidden;border:1px solid #204b6f;box-shadow:0 14px 60px rgba(16,38,58,.45)}

.section{padding:80px 0}
.section h2{font-size:32px;margin:0 0 20px;color:var(--blue)}
.section .sub{font-size:18px;color:#334155;margin-bottom:30px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:22px;border:1px solid #eaeef5;border-radius:16px;background:#fff;transition:.25s transform, .25s box-shadow}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(31,78,121,.15)}
.card .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.price{font-size:28px;color:var(--blue);font-weight:800}
.badge{padding:6px 10px;border-radius:999px;background:rgba(31,78,121,.06);color:var(--blue);font-size:12px;font-weight:700;border:1px solid rgba(31,78,121,.15)}
.badge.hot{background:rgba(212,175,55,.12);border-color:#e1c878;color:#9a7a1c}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{padding:20px;border:1px dashed #dbe5f1;border-radius:14px;background:#fcfdff}
.feature h4{margin:0 0 8px;color:var(--blue)}

.comparatif{margin-top:30px;border:1px solid #eaeef5;border-radius:16px;overflow:hidden}
.comparatif table{width:100%;border-collapse:collapse}
.comparatif th, .comparatif td{padding:14px 12px;border-bottom:1px solid #eef2f7;text-align:left}
.comparatif th{background:#f7f9fd;color:#0e2336}
.comparatif tr:last-child td{border-bottom:none}

.bot{background:linear-gradient(180deg,#f6f9ff, #fff)}
.bot .grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}

.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{border:1px solid #eaeef5;border-radius:14px;overflow:hidden;background:#fff}
.post img{width:100%;height:160px;object-fit:cover}
.post .p{padding:14px}
.post h4{margin:0 0 8px}
.meta{font-size:12px;color:#64748b;margin:0 0 8px}

.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{padding:22px;border:1px solid #eaeef5;border-radius:16px;background:#fff}
.tcard .who{margin-top:14px;font-weight:700;color:#0e2336}

.faq{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.faq-item{border:1px solid #eaeef5;border-radius:12px;padding:16px;background:#fff}
.faq-item summary{cursor:pointer;color:var(--blue);font-weight:700}
.faq-item p{margin:10px 0 0;color:#334155}

.cta-band{background:linear-gradient(135deg,var(--blue), #0e2336);color:#fff;border-radius:16px;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:20px}

.footer{background:#0e2336;color:#dbeafe;padding:40px 0;margin-top:60px}
.footer a{color:#dbeafe;text-decoration:none;opacity:.9}
.footer a:hover{opacity:1}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
.kpi{background:#fff;border:1px solid #eaeef5;border-radius:12px;padding:12px;text-align:center}
.kpi b{display:block;color:var(--blue);font-size:20px}

@media (max-width:1024px){
  .hero .grid, .bot .grid{grid-template-columns:1fr}
  .cards, .blog, .testimonials{grid-template-columns:1fr 1fr}
  .features{grid-template-columns:1fr 1fr}
  .faq{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cards, .blog, .testimonials{grid-template-columns:1fr}
}
.reveal{opacity:0;transform:translateY(18px);transition:.6s all ease}
.reveal.show{opacity:1;transform:none}

/* v2 accents + stats section */
:root{ --blue-light:#37c9ff; --ink:#0b1b2a; --sand:#f8f5ec; }
.hero.v2{ background-image: radial-gradient(1000px 600px at 10% -10%, rgba(55,201,255,.16), transparent), url('../assets/pattern-grid.svg'); background-size:cover; background-position:center; }
.hero.v2 h1 span{color:var(--gold)}
.kpi i{display:block;font-size:24px;margin-bottom:6px;opacity:.9}

.stats{background:linear-gradient(180deg,#f7fbff,#fff);}
.stats .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.counter_cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}
.ccard{background:#fff;border:1px solid #eaeef5;border-radius:14px;padding:16px}
.ccard b{display:block;color:var(--blue);font-size:22px}
.ccard small{color:#64748b}

.chartwrap{border:1px solid #eaeef5;border-radius:14px;background:#fff;padding:16px}
.chartwrap h4{margin:0 0 8px;color:var(--blue)}
.chartwrap svg{width:100%;height:180px;display:block}

.badges{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.badges img{height:48px}

.notice-demo{font-size:12px;color:#64748b;margin-top:6px}

/* v3 dark theme inversion */
html,body{background:#0e2336;color:#e8f2ff}
.nav{background:#0b1b2a !important;border-bottom:1px solid #1f4e79 !important}
.nav a{color:#e8f2ff}
.btn-primary{background:linear-gradient(135deg,#d4af37,#c8a23a);color:#0e2336;border-color:#e1c878}
.btn-ghost{border-color:#d4af37;color:#ffd66b}
.btn-ghost:hover{background:rgba(212,175,55,.12)}
.section{background:linear-gradient(180deg,#0e2336,#132c47)}
.section h2{color:#ffd66b}
.section .sub{color:#dbeafe}
.card{background:#0b1b2a;border-color:#1f4e79;color:#e8f2ff}
.post{background:#0b1b2a;border-color:#1f4e79}
.post .meta{color:#9ec5ff}
.faq-item{background:#0b1b2a;border-color:#1f4e79}
.footer{background:#0b1b2a;color:#dbeafe;border-top:1px solid #1f4e79}
.hero.v2{background-image: radial-gradient(1000px 600px at 10% -10%, rgba(55,201,255,.18), transparent), url('../assets/pattern-grid.svg');}
.mock{border-color:#2a6aa3}

/* Improved text-image integration */
.figure{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:center}
.figure img{border-radius:16px;border:1px solid #1f4e79;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.figure .caption{font-size:14px;color:#c7e0ff;opacity:.9;margin-top:6px}
@media (max-width:900px){ .figure{grid-template-columns:1fr} }

/* excellence band */
.excellence{background-image:url('../assets/cta-ribbon.svg');background-size:cover;background-position:center;border:1px solid #1f4e79;border-radius:16px;padding:24px;margin-top:16px}
.excellence h3{color:#ffd66b;margin:0 0 6px}
.excellence p{margin:0;color:#e8f2ff}
.badges img{filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}

/* v4 — Alternance clair/sombre + contrastes lisibles */
:root{
  --text-dark:#0e2336;
  --text-light:#e8f2ff;
  --muted-dark:#334155;
  --muted-light:#c7e0ff;
  --border-light:#e6edf5;
  --border-dark:#1f4e79;
}

/* Base text colors to ensure visibility */
body{color:var(--text-light)}
a{color:#9ed2ff}
a:hover{color:#d4af37}

/* Section variants */
.section.light{
  background:#ffffff;
  color:var(--text-dark);
}
.section.light h2{color:#1f4e79}
.section.light .sub{color:#334155}
.section.light a{color:#1f4e79}
.section.light a:hover{color:#0e2336}

/* Cards, posts, faq inside light sections */
.section.light .card,
.section.light .post,
.section.light .faq-item{
  background:#ffffff;
  color:var(--text-dark);
  border-color:var(--border-light);
}
.section.light .post .meta{color:#64748b}
.section.light .card .price{color:#1f4e79}
.section.light .badge{background:rgba(31,78,121,.06);color:#1f4e79;border-color:rgba(31,78,121,.2)}

/* Stats counters in light sections */
.section.light .ccard{
  background:#ffffff;
  color:var(--text-dark);
  border-color:var(--border-light);
}
.section.light .chartwrap{background:#ffffff;border-color:var(--border-light)}

/* Figure captions adapt to section */
.section.light .figure .caption{color:#64748b}
.figure .caption{color:#c7e0ff}

/* Buttons adaption */
.section.light .btn-ghost{border-color:#1f4e79;color:#1f4e79}
.section.light .btn-ghost:hover{background:rgba(31,78,121,.08)}
.section.light .btn-primary{color:#0e2336}

/* Ensure HorizonBot section stays dark for contrast with surrounding light sections */
.section.bot{background:linear-gradient(180deg,#0e2336,#132c47) !important}

/* Blog headings and links contrast */
.post h4{color:inherit}
.post .p p{color:inherit}

/* Improve FAQ readability on dark */
.faq-item p{color:inherit}

/* Nav hover visible on dark */
.nav a:hover{color:#ffd66b;opacity:1}

/* v5 — HorizonBot layout & text integration */
.hb-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.hb-card{background:#ffffff;border:1px solid var(--border-light);border-radius:16px;padding:22px;color:var(--text-dark);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.hb-card h2{color:#1f4e79;margin-top:0}
.hb-sub{color:#334155;margin:6px 0 16px;max-width:60ch}
.hb-features{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:12px 0 14px}
.hb-item{display:flex;align-items:flex-start;gap:10px}
.hb-item img{width:24px;height:24px;flex:0 0 24px}
.hb-item span{color:#0e2336;line-height:1.5}
.hb-chips{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 2px}
.hb-chip{background:#0e2336;color:#e8f2ff;border:1px solid #1f4e79;border-radius:999px;padding:6px 10px;font-size:12px}
.hb-price{display:flex;align-items:center;gap:12px;margin-top:10px}
.hb-meta{font-size:12px;color:#475569}
.hb-visual img{border-radius:16px;border:1px solid #1f4e79;box-shadow:0 16px 50px rgba(0,0,0,.45)}
@media (max-width:980px){ .hb-wrap{grid-template-columns:1fr}.hb-visual{order:-1} .hb-features{grid-template-columns:1fr}}

/* Site-wide hover elevation for cards and panels */
.elevate-hover{transition:transform .25s ease, box-shadow .25s ease}
.elevate-hover:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.35)}

/* Apply gentle elevation to common card-like blocks */
.article-card,
.latest-article-card,
.post,
.faq-item,
.value-box,
.commitment-item{
  transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.article-card:hover,
.latest-article-card:hover,
.post:hover,
.faq-item:hover,
.value-box:hover,
.commitment-item:hover{
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  border-color:rgba(212,175,55,.35);
}


/* === FIX: HorizonBot layout improvements === */
.section.bot .container{ padding-left: clamp(24px, 4vw, 42px); padding-right: clamp(24px, 4vw, 42px); }

.hb-wrap{ grid-template-columns: 2.8fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 1200px){ .hb-wrap{ grid-template-columns: 2.4fr 1fr; gap: 40px; } }
@media (max-width: 980px){ .hb-wrap{ grid-template-columns: 1fr; gap: 24px; } }

/* widen the "bandeau" and center heading/sub/ctas */
.hb-card{ padding: 36px 44px; border-radius: 20px; box-shadow: 0 12px 36px rgba(0,0,0,.16); }
.hb-card h2, .hb-card .hb-sub, .hb-price, .hb-meta{ text-align: center; margin-left: auto; margin-right: auto; }
.hb-card h2{ line-height: 1.15; }
.hb-card .hb-sub{ max-width: 84ch; }
.hb-price{ justify-content: center; }

/* Keep features readable but not too wide */
.hb-features{ max-width: 1100px; margin-left: auto; margin-right: auto; }

/* chips centered and wrapped nicely */
.hb-chips{ justify-content: center; }

/* shrink image column dominance */
.hb-visual{ justify-self: end; }
.hb-visual img{ width: 100%; max-width: 520px; }

/* optional: if image still feels big on mid screens, clamp it */
@media (max-width:1200px){ .hb-visual img{ max-width: 460px; } }
@media (max-width:1024px){ .hb-visual img{ max-width: 420px; } }

/* ensure the card does not feel glued to the edge */
.section.bot .hb-card{ margin-left: auto; margin-right: auto; }


/* === FIX: KPI centering in hero === */
.kpis{ gap: 18px; }
.kpi{ 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  min-height: 92px; 
  border-radius: 14px; 
  border: 1px solid rgba(31,78,121,.15); 
  background: rgba(255,255,255,.06);
  padding: 10px 8px;
}
.kpi b{ font-size: 20px; line-height: 1.1; }
.kpi span{ opacity: .9; }