/* Sextant - main.css (generated)
   Aggregates variables.css + styles.css to keep legacy references to css/main.css.
   Do not edit directly: edit variables.css/styles.css then re-generate.
*/

/* ===== variables.css ===== */
/**
 * Variables CSS Globales - Sextant
 * Thème unifié pour toutes les pages du site
 * Version: 1.0.0
 */

:root {
  /* ============================================ */
  /* COULEURS PRINCIPALES - IDENTITÉ DE MARQUE */
  /* ============================================ */
  
  /* Bleus - Couleurs corporate */
  --night-blue: #0e2336;
  --night-blue-light: #132c47;
  --blue-primary: #1f4e79;
  --blue-accent: #37c9ff;
  
  /* Or - Couleur premium */
  --gold-primary: #d4af37;
  --gold-light: #ffd66b;
  --gold-dark: #b8941f;
  
  /* ============================================ */
  /* TEXTE */
  /* ============================================ */
  
  --text-light: #e8f2ff;
  --text-muted: #c7e0ff;
  --text-white: #ffffff;
  --text-gray: #94a3b8;
  
  /* ============================================ */
  /* BACKGROUNDS */
  /* ============================================ */
  
  --bg-dark: #0b1b2a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-glass: rgba(255, 255, 255, 0.08);
  --bg-glass-border: rgba(255, 255, 255, 0.12);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0e2336 0%, #132c47 100%);
  --gradient-gold: linear-gradient(135deg, #d4af37, #b8941f);
  --gradient-blue: linear-gradient(135deg, #1f4e79, #0e2336);
  
  /* ============================================ */
  /* COULEURS STATUS */
  /* ============================================ */
  
  --success: #10b981;
  --success-light: #4ade80;
  --success-dark: #059669;
  
  --warning: #f59e0b;
  --warning-light: #fbbf24;
  --warning-dark: #d97706;
  
  --error: #ef4444;
  --error-light: #f87171;
  --error-dark: #dc2626;
  
  --info: #3b82f6;
  --info-light: #60a5fa;
  --info-dark: #2563eb;
  
  /* ============================================ */
  /* UI ELEMENTS */
  /* ============================================ */
  
  /* Border radius */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
  
  /* Shadows colorées */
  --shadow-gold: 0 8px 32px rgba(212, 175, 55, 0.2);
  --shadow-gold-lg: 0 12px 48px rgba(212, 175, 55, 0.3);
  --shadow-blue: 0 8px 32px rgba(31, 78, 121, 0.2);
  
  /* ============================================ */
  /* TRANSITIONS & ANIMATIONS */
  /* ============================================ */
  
  --transition-fast: 0.2s ease;
  --transition: 0.3s ease;
  --transition-slow: 0.4s ease;
  
  --ease-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1);
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* ============================================ */
  /* SPACING */
  /* ============================================ */
  
  --space-xs: 4px;
  --space-sm: 8px;
  --space: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  
  /* ============================================ */
  /* TYPOGRAPHY */
  /* ============================================ */
  
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Space Grotesk', sans-serif;
  
  /* Font sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  
  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* ============================================ */
  /* Z-INDEX */
  /* ============================================ */
  
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;
  
  /* ============================================ */
  /* BREAKPOINTS (pour référence JS) */
  /* ============================================ */
  
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ============================================ */
/* RESET & BASE STYLES */
/* ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  color: var(--text-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================ */
/* UTILITY CLASSES */
/* ============================================ */

.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-gold {
  background: var(--gradient-gold);
}

.gradient-blue {
  background: var(--gradient-blue);
}

.text-gold {
  color: var(--gold-primary);
}

.text-muted {
  color: var(--text-muted);
}

.shadow-gold {
  box-shadow: var(--shadow-gold);
}

.transition-all {
  transition: all var(--transition);
}


/* ===== styles.css ===== */

: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 Sextant Bot 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 — Sextant Bot 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: Sextant Bot 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; }