/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #1a3a2a;
  --navy-mid: #2d5a42;
  --navy-light: #3a7055;
  --red: #c8a96e;
  --red-hover: #b8954e;
  --white: #f4f0e8;
  --gray: #555450;
  --light-bg: #e8e2d4;
  --text: #1a1a18;
  --border: rgba(26,58,42,0.15);
  --radius: 4px;
  --shadow: 0 4px 24px rgba(26,58,42,0.10);
  --shadow-lg: 0 8px 40px rgba(26,58,42,0.16);
  --cream: #f4f0e8;
  --black: #0a0a09;
  --accent: #c8a96e;
  --accent2: #e8d4a0;
}

html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text); background: var(--cream); }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
a { text-decoration: none; color: inherit; }

/* ===== ANIMATE ON SCROLL ===== */
.animate { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.animate.visible { opacity: 1; transform: translateY(0); }
.animate:nth-child(2) { transition-delay: 0.12s; }
.animate:nth-child(3) { transition-delay: 0.24s; }
.animate:nth-child(4) { transition-delay: 0.36s; }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 8px; font-weight: 600; font-size: 15px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; text-decoration: none; }
.btn--primary { background: var(--red); color: var(--black); border-color: var(--red); }
.btn--primary:hover { background: var(--red-hover); border-color: var(--red-hover); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(200,169,110,0.35); }
.btn--outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn--outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn--outline-dark { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline-dark:hover { background: var(--navy); color: var(--white); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.25); }
.btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
.btn--white { background: var(--white); color: var(--red); border-color: var(--white); }
.btn--white:hover { background: #f0f0f0; transform: translateY(-1px); }
.btn--sm { padding: 9px 20px; font-size: 13px; }
.btn--lg { padding: 16px 36px; font-size: 16px; }
.btn--full { width: 100%; justify-content: center; }

/* ===== COMPONENT PLACEHOLDERS (évite CLS pendant l'injection JS) ===== */
#nav-placeholder { height: 130px; background: var(--cream); }
#footer-placeholder { height: 380px; background: #07111e; }

/* ===== PROMO BANNER ===== */
.promo-banner { background: var(--navy); color: var(--cream); text-align: center; padding: 10px 20px; font-size: 14px; font-weight: 500; }
.promo-banner a { color: var(--accent); text-decoration: underline; }

/* ===== LOGO ===== */
.nav__logo { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; text-decoration: none; padding: 0; }
.logo-svg { height: 36px; width: auto; display: block; flex-shrink: 0; }
.logo-text { font-family: 'Playfair Display', serif; font-size: 17px; letter-spacing: 0.2px; line-height: 1; }
.logo-well { color: var(--black); font-weight: 700; }
.logo-assoc { color: var(--navy); font-weight: 400; }
.footer__brand-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 14px; }
.footer__brand-logo .logo-text { font-size: 18px; }
.footer__brand-logo .logo-well { color: #f4f0e8; }
.footer__brand-logo .logo-assoc { color: rgba(200,169,110,0.85); }
.nav__logo img {
  height: 80px;
  width: auto;
  display: block;
  mix-blend-mode: multiply;
}
.footer__brand-logo img {
  height: 52px;
  width: auto;
  display: block;
  margin-bottom: 12px;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* ===== NAV ===== */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(244,240,232,0.95); backdrop-filter: blur(12px); border-bottom: 0.5px solid var(--border); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 90px; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links > a, .nav__item > a { color: var(--gray); font-size: 13px; font-weight: 400; transition: color 0.2s; }
.nav__links > a:hover, .nav__item > a:hover { color: var(--navy); }
.nav__item { position: relative; }
.nav__dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--white); border-radius: 10px; box-shadow: var(--shadow-lg); min-width: 220px; padding: 20px 8px 8px; border: 1px solid var(--border); z-index: 200; }
.nav__item:hover .nav__dropdown { display: flex; flex-direction: column; }
.nav__dropdown a { color: var(--text); font-size: 14px; padding: 10px 14px; border-radius: 6px; display: block; transition: background 0.15s; }
.nav__dropdown a:hover { background: var(--light-bg); color: var(--red); }
.nav__burger { display: none; background: none; border: none; color: var(--navy); font-size: 22px; cursor: pointer; }
.nav__mobile { display: none; flex-direction: column; gap: 4px; padding: 16px 24px 20px; background: var(--cream); border-top: 0.5px solid var(--border); }
.nav__mobile a { color: var(--gray); font-size: 15px; padding: 10px 0; border-bottom: 0.5px solid var(--border); }
.nav__mobile-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy); opacity: 0.5; padding: 14px 0 4px; }
.nav__mobile.open { display: flex; }

/* ===== HERO ===== */
@keyframes heroGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero {
  background: linear-gradient(135deg, #f4f0e8 0%, #e4dece 30%, #d8e8dc 60%, #f4f0e8 100%);
  background-size: 400% 400%;
  animation: heroGradientShift 9s ease infinite;
  padding: 80px 0 72px; color: var(--text); position: relative; overflow: hidden;
}
.hero__bg-grid { position: absolute; inset: 0; opacity: 0.045; background-image: linear-gradient(var(--navy) 1px, transparent 1px), linear-gradient(90deg, var(--navy) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; }
.hero__inner { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start; }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 0.5px solid rgba(26,58,42,0.2); border-radius: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); margin-bottom: 28px; background: rgba(26,58,42,0.05); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* H1 */
.hero h1 { font-size: clamp(40px, 4.5vw, 66px); font-weight: 900; line-height: 1.05; margin-bottom: 24px; letter-spacing: -2px; color: var(--black); }
.hero h1 em { color: var(--navy); font-style: italic; display: inline; }
.highlight { color: var(--navy); font-style: italic; }

/* Rotating text */
.hero__rotate { display: inline; }
.word { display: none; }
.word.active { display: inline; animation: fadeWord 0.4s ease; }
@keyframes fadeWord { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.hero__sub { font-size: 17px; color: var(--gray); max-width: 520px; line-height: 1.75; font-weight: 300; margin-bottom: 36px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.stats { display: flex; gap: 40px; border-top: 0.5px solid var(--border); padding-top: 32px; }
.stat__num { display: block; font-size: 26px; font-weight: 700; color: var(--navy); font-family: 'Playfair Display', serif; letter-spacing: -0.5px; }
.stat__label { font-size: 12px; color: var(--gray); margin-top: 2px; }

/* ===== DASHBOARD HERO ===== */
.dashboard { background: #0f0f0e; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.35); width: 100%; }
.dash__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); background: #111110; }
.dash__header-left { display: flex; align-items: center; gap: 8px; }
.dash__pulse { width: 7px; height: 7px; border-radius: 50%; background: #c8a96e; animation: livepulse 1.6s ease-in-out infinite; flex-shrink: 0; }
.dash__header-title { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #c8a96e; }
.dash__header-date { font-size: 11px; color: rgba(244,240,232,0.3); font-variant-numeric: tabular-nums; }
.dash__kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid rgba(255,255,255,0.06); }
.dash__kpi { padding: 14px 16px; border-right: 1px solid rgba(255,255,255,0.06); position: relative; }
.dash__kpi:last-child { border-right: none; }
.dash__kpi-label { font-size: 9px; color: rgba(244,240,232,0.35); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
.dash__kpi-value { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: #f4f0e8; letter-spacing: -0.5px; }
.dash__kpi-delta { font-size: 10px; font-weight: 600; margin-top: 3px; color: #4ade80; }
.dash__sparkline { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.spark-bar { width: 3px; background: rgba(200,169,110,0.25); border-radius: 1px; animation: growBar 0.5s ease forwards; transform-origin: bottom; }
@keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.dash__gauge-row { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 12px; }
.dash__gauge-label { font-size: 10px; color: rgba(244,240,232,0.4); white-space: nowrap; }
.dash__gauge-track { flex: 1; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.dash__gauge-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, #2d5a42, #c8a96e); width: 0%; transition: width 1.8s cubic-bezier(0.22,1,0.36,1); }
.dash__gauge-pct { font-size: 11px; font-weight: 700; color: #c8a96e; min-width: 30px; text-align: right; }
.dash__feed { padding: 4px 0; }
.dash__feed-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); animation: feedSlide 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.dash__feed-item:last-child { border-bottom: none; }
@keyframes feedSlide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.dash__feed-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(200,169,110,0.4); flex-shrink: 0; }
.dash__feed-dot--new { background: #c8a96e; box-shadow: 0 0 6px rgba(200,169,110,0.6); }
.dash__feed-info { flex: 1; min-width: 0; }
.dash__feed-name { font-size: 12px; color: rgba(244,240,232,0.88); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash__feed-meta { font-size: 10px; color: rgba(244,240,232,0.3); margin-top: 1px; }
.dash__feed-status { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 2px; flex-shrink: 0; }
.status--livré  { background: rgba(26,80,50,0.8); color: #86efac; }
.status--qualif { background: rgba(200,169,110,0.15); color: #c8a96e; border: 1px solid rgba(200,169,110,0.3); }
.status--new    { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(59,130,246,0.25); }
.dash__footer { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; }
.dash__footer-text { font-size: 10px; color: rgba(244,240,232,0.2); letter-spacing: 0.03em; }
.dash__footer-dot { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; animation: livepulse 2s ease-in-out infinite; }

/* ===== LIVEFEED ===== */
.hero__right { position: relative; }
.livefeed { background: var(--black); border-radius: 8px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.22); width: 100%; }
.livefeed__header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.livefeed__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: livepulse 1.5s ease-in-out infinite; }
@keyframes livepulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }
.livefeed__title { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); flex: 1; }
.livefeed__count { font-size: 11px; font-weight: 700; color: rgba(244,240,232,0.4); font-family: 'Playfair Display', serif; }

.livefeed__list { padding: 8px 0; min-height: 280px; overflow: hidden; position: relative; }
.livefeed__item { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.2s; animation: slideIn 0.4s ease; }
.livefeed__item:last-child { border-bottom: none; }
.livefeed__item:hover { background: rgba(255,255,255,0.03); }
@keyframes slideIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.livefeed__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(200,169,110,0.6); flex-shrink: 0; }
.livefeed__dot--new { background: var(--accent); box-shadow: 0 0 6px rgba(200,169,110,0.5); }
.livefeed__info { flex: 1; min-width: 0; }
.livefeed__name { font-size: 13px; color: rgba(244,240,232,0.92); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.livefeed__meta { font-size: 11px; color: rgba(244,240,232,0.38); margin-top: 2px; }
.livefeed__badge { font-size: 10px; padding: 3px 9px; border-radius: 2px; background: rgba(26,58,42,0.7); color: #7ec89a; font-weight: 600; letter-spacing: 0.04em; flex-shrink: 0; }
.livefeed__badge--new { background: rgba(26,100,50,0.8); color: #a0f0b8; }

.livefeed__footer { padding: 12px 20px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 11px; color: rgba(244,240,232,0.25); text-align: center; letter-spacing: 0.03em; }

/* ===== MARQUEE BANDEAU ===== */
.marquee-section { background: var(--navy); padding: 16px 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.06); }
.marquee-track { display: flex; gap: 60px; animation: marquee 22s linear infinite; white-space: nowrap; width: max-content; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item { font-size: 11px; font-weight: 500; color: rgba(244,240,232,0.8); letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.marquee-item::after { content: '◆'; font-size: 5px; color: var(--accent); }

/* ===== TRUST ===== */
.trust { background: var(--navy); border-bottom: none; padding: 16px 0; overflow: hidden; }
.trust__label { text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: rgba(244,240,232,0.5); margin-bottom: 16px; }
.trust__logos { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.trust__logo { padding: 6px 20px; font-size: 13px; font-weight: 500; color: rgba(244,240,232,0.6); letter-spacing: 0.05em; border-left: 1px solid rgba(244,240,232,0.15); padding-left: 24px; }

/* ===== SECTIONS ===== */
.section { padding: 88px 0; }
.section--light { background: var(--light-bg); }
.section--dark { background: var(--black); color: var(--cream); }
.section:not(.section--dark) { background-image: linear-gradient(rgba(26,58,42,0.048) 1px, transparent 1px), linear-gradient(90deg, rgba(26,58,42,0.048) 1px, transparent 1px); background-size: 56px 56px; }
.section__header { text-align: center; margin-bottom: 56px; }
.section__tag { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--navy); margin-bottom: 12px; opacity: 0.7; }
.section__header h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; margin-bottom: 16px; }
.section--dark .section__header h2 { color: var(--white); }
.section__header p { font-size: 17px; color: var(--gray); max-width: 560px; margin: 0 auto; }

/* ===== PROMISE ===== */
.promise__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.promise__text h2 { font-size: clamp(28px,4vw,42px); font-weight: 800; line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.5px; }
.promise__text p { color: var(--gray); margin-bottom: 24px; font-size: 16px; }
.promise__list { list-style: none; margin-bottom: 32px; }
.promise__list li { padding: 8px 0; font-size: 15px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--border); }
.promise__visual { display: flex; flex-direction: column; gap: 16px; }
.promise__card { background: var(--light-bg); border-radius: var(--radius); padding: 24px; border-left: 4px solid var(--red); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; }
.promise__card:hover { transform: translateY(-7px); box-shadow: 0 14px 40px rgba(26,58,42,0.16); }
.promise__card-icon { font-size: 24px; margin-bottom: 8px; }
.promise__card strong { font-size: 15px; font-weight: 700; display: block; margin-bottom: 6px; }
.promise__card p { font-size: 14px; color: var(--gray); }

/* ===== CARDS ===== */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card { border-radius: 16px; padding: 40px 36px; position: relative; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; }
.card:hover { transform: translateY(-10px); box-shadow: 0 20px 56px rgba(26,58,42,0.22); }
.card--dark { background: var(--navy); color: var(--white); }
.card--accent { background: var(--red); color: var(--white); }
.card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--navy); color: var(--white); font-size: 12px; font-weight: 700; padding: 5px 18px; border-radius: 100px; white-space: nowrap; }
.card__icon { font-size: 36px; margin-bottom: 16px; }
.card h3 { font-size: 24px; font-weight: 800; margin-bottom: 14px; line-height: 1.2; }
.card p { font-size: 15px; opacity: 0.85; margin-bottom: 20px; line-height: 1.65; }
.checklist { list-style: none; margin-bottom: 24px; }
.checklist li { padding: 7px 0; padding-left: 24px; position: relative; font-size: 14px; opacity: 0.9; border-bottom: 1px solid rgba(255,255,255,0.1); }
.checklist li::before { content: '✓'; position: absolute; left: 0; color: rgba(255,255,255,0.7); font-weight: 700; }
.card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.card__tags span { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); padding: 3px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.card__tags--light span { background: rgba(255,255,255,0.25); }

/* ===== PROBLEMS/SOLUTIONS ===== */
.problems { display: flex; flex-direction: column; gap: 20px; }
.problem { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: stretch; background: var(--light-bg); border-radius: var(--radius); overflow: hidden; }
.problem__issue { padding: 28px; background: #fff5f5; border-left: 4px solid #ffc0c7; }
.problem__solution { padding: 28px; background: #f0faf4; border-right: 4px solid #a8d5b5; }
.problem__label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px; border-radius: 100px; margin-bottom: 10px; background: #ffd6da; color: #c0001a; }
.problem__label--ok { background: #c3efd3; color: #1a6635; }
.problem h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.problem p { font-size: 14px; color: var(--gray); line-height: 1.6; }
.problem__arrow { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--red); font-weight: 700; background: var(--white); }

/* ===== PROCESS HORIZONTAL ===== */
.process-horizontal { display: flex; align-items: stretch; margin-top: 60px; border: 0.5px solid var(--border); }
.ph-step { flex: 1; padding: 36px 24px; border-right: 0.5px solid var(--border); transition: background 0.2s; }
.ph-step:last-child { border-right: none; }
.ph-step:hover { background: rgba(26,58,42,0.04); }
.ph-step.highlight { background: var(--navy); }
.ph-step.highlight:hover { background: var(--navy-mid); }
.ph-icon { font-size: 22px; margin-bottom: 14px; display: block; }
.ph-num { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 900; color: rgba(26,58,42,0.12); line-height: 1; margin-bottom: 10px; }
.ph-step.highlight .ph-num { color: rgba(244,240,232,0.2); }
.ph-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.ph-step.highlight .ph-title { color: var(--cream); }
.ph-desc { font-size: 12px; color: var(--gray); line-height: 1.65; }
.ph-step.highlight .ph-desc { color: rgba(244,240,232,0.6); }
.ph-badge { display: inline-block; margin-top: 14px; font-size: 10px; padding: 4px 10px; background: var(--accent); color: var(--black); border-radius: 2px; font-weight: 700; letter-spacing: 0.06em; }
@media (max-width: 960px) { .process-horizontal { flex-direction: column; } .ph-step { border-right: none; border-bottom: 0.5px solid var(--border); } .ph-step:last-child { border-bottom: none; } }

/* ===== STEPS ===== */
.steps { display: flex; align-items: flex-start; gap: 0; margin-bottom: 48px; }
.step { flex: 1; padding: 32px 24px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; }
.step:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(26,58,42,0.18); }
.step__num { font-size: 42px; font-weight: 900; color: var(--red); opacity: 0.9; margin-bottom: 12px; line-height: 1; }
.step h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--gray); line-height: 1.6; }
.step__arrow { flex-shrink: 0; padding: 44px 10px 0; font-size: 22px; color: var(--red); font-weight: 700; }
.process-quote { text-align: center; font-size: 19px; color: var(--navy); padding: 28px 40px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); border-left: 4px solid var(--red); }

/* ===== FEATURES ===== */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature { background: var(--white); padding: 28px 24px; border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-bottom-color 0.2s; border-bottom: 3px solid transparent; }
.feature:hover { transform: translateY(-9px); box-shadow: 0 18px 50px rgba(26,58,42,0.20); border-bottom-color: var(--red); }
.feature__icon { font-size: 32px; margin-bottom: 14px; }
.feature h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.feature p { font-size: 14px; color: var(--gray); line-height: 1.65; }

/* ===== CHANNELS ===== */
.channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.channel { display: flex; align-items: flex-start; gap: 16px; padding: 24px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; }
.channel:hover { transform: translateY(-7px); box-shadow: 0 14px 40px rgba(26,58,42,0.18); }
.channel__icon { flex-shrink: 0; width: 46px; height: 46px; background: var(--red); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; }
.channel strong { display: block; font-size: 15px; margin-bottom: 4px; }
.channel small { font-size: 13px; color: var(--gray); }

/* ===== REVIEWS ===== */
.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.review { background: var(--light-bg); border-radius: var(--radius); padding: 28px; border-top: 3px solid var(--red); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; }
.review:hover { transform: translateY(-8px); box-shadow: 0 18px 50px rgba(26,58,42,0.18); }
.review__stars { color: #f59e0b; font-size: 16px; margin-bottom: 14px; letter-spacing: 2px; }
.review p { font-size: 15px; color: var(--text); line-height: 1.7; margin-bottom: 20px; font-style: italic; }
.review__author { display: flex; align-items: center; gap: 12px; }
.review__avatar { width: 40px; height: 40px; background: var(--navy); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.review__author strong { display: block; font-size: 14px; font-weight: 700; }
.review__author small { font-size: 13px; color: var(--gray); }

/* ===== CRÉATION DE SITE ===== */
.creation__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.creation__text h2 { font-size: clamp(28px,4vw,42px); font-weight: 800; line-height: 1.2; margin-bottom: 16px; color: var(--white); }
.creation__text p { color: rgba(255,255,255,0.7); margin-bottom: 28px; font-size: 16px; line-height: 1.7; }
.creation__list { list-style: none; margin-bottom: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.creation__list li { font-size: 14px; color: rgba(255,255,255,0.8); font-weight: 500; }
.creation__cards { display: flex; flex-direction: column; gap: 16px; }
.creation__card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); padding: 24px; transition: background 0.2s; }
.creation__card:hover { background: rgba(255,255,255,0.12); }
.creation__card-num { font-size: 32px; font-weight: 900; color: var(--red); opacity: 0.8; line-height: 1; margin-bottom: 8px; }
.creation__card h3 { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.creation__card p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.6; }

/* ===== AGENT IA ===== */
.ia__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.ia__terminal { background: #0a0f1a; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.06); margin-bottom: 16px; }
.ia__terminal-bar { background: #1a2236; padding: 12px 16px; display: flex; gap: 8px; }
.ia__terminal-bar span { width: 12px; height: 12px; border-radius: 50%; }
.ia__terminal-bar span:nth-child(1) { background: #ff5f57; }
.ia__terminal-bar span:nth-child(2) { background: #febc2e; }
.ia__terminal-bar span:nth-child(3) { background: #28c840; }
.ia__terminal-body { padding: 20px; font-family: 'Courier New', monospace; }
.ia__line { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.8; }
.ia__prompt { color: var(--red); font-weight: 700; margin-right: 8px; }
.ia__line--out { color: rgba(255,255,255,0.5); padding-left: 16px; }
.ia__green { color: #4ade80; }
.ia__badges { display: flex; gap: 10px; flex-wrap: wrap; }
.ia__badges span { background: var(--light-bg); border: 1px solid var(--border); border-radius: 100px; padding: 5px 14px; font-size: 13px; font-weight: 600; color: var(--navy); }
.ia__text h2 { font-size: clamp(28px,4vw,44px); font-weight: 800; line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.5px; }
.ia__text > p { font-size: 16px; color: var(--gray); margin-bottom: 32px; line-height: 1.7; }
.ia__features { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
.ia__feature { display: flex; align-items: flex-start; gap: 16px; }
.ia__feature-icon { font-size: 24px; flex-shrink: 0; width: 44px; height: 44px; background: var(--light-bg); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ia__feature strong { font-size: 15px; font-weight: 700; display: block; margin-bottom: 4px; }
.ia__feature p { font-size: 14px; color: var(--gray); line-height: 1.6; }

/* ===== ABOUT ===== */
.about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.about__text h2 { font-size: clamp(28px,4vw,42px); font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
.about__text p { color: var(--gray); margin-bottom: 16px; font-size: 16px; line-height: 1.7; }
.about__stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 32px; }
.about__stat { text-align: center; padding: 16px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; }
.about__stat:hover { transform: translateY(-7px); box-shadow: 0 14px 40px rgba(26,58,42,0.18); }
.about__stat span { display: block; font-size: 20px; font-weight: 900; color: var(--red); }
.about__stat small { font-size: 12px; color: var(--gray); }
.about__card { background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 28px; margin-bottom: 20px; }
.about__card h3 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.about__card > p { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 20px; }
.about__contact-links { display: flex; flex-direction: column; gap: 10px; }
.about__contact-links a, .about__contact-links span { font-size: 14px; color: rgba(255,255,255,0.75); display: block; }
.about__contact-links a:hover { color: var(--white); }
.about__values { display: flex; flex-direction: column; gap: 12px; }
.about__value { background: var(--light-bg); border-radius: 10px; padding: 18px; border-left: 3px solid var(--red); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; }
.about__value:hover { transform: translateX(10px); box-shadow: -4px 0 0 var(--accent), 0 8px 32px rgba(26,58,42,0.12); }
.about__value strong { font-size: 15px; display: block; margin-bottom: 4px; }
.about__value p { font-size: 14px; color: var(--gray); }

/* ===== FAQ ===== */
.faq-list { max-width: 820px; margin: 0 auto 40px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { padding: 20px 0; font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 24px; color: var(--red); font-weight: 300; transition: transform 0.2s; flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 24px 20px 0; color: var(--gray); font-size: 15px; line-height: 1.75; }
.faq-cta { text-align: center; padding: 40px; background: var(--navy); border-radius: 16px; color: var(--white); max-width: 560px; margin: 0 auto; }
.faq-cta p { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.faq-cta .btn { margin: 0 8px; }

/* ===== BLOG ===== */
.blog-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.blog-filter { padding: 8px 18px; border: 2px solid var(--border); background: var(--white); border-radius: 100px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; color: var(--text); }
.blog-filter:hover, .blog-filter.active { border-color: var(--red); background: var(--red); color: var(--black); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.blog-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; }
.blog-card:hover { transform: translateY(-9px); box-shadow: 0 20px 56px rgba(26,58,42,0.20); }
.blog-card__img { height: 180px; background: var(--navy-light); }
.blog-card__img--1 { background: linear-gradient(135deg, #1e3050 0%, #e8354a 100%); }
.blog-card__img--2 { background: linear-gradient(135deg, #152236 0%, #3d6b9e 100%); }
.blog-card__img--3 { background: linear-gradient(135deg, #0a0f1a 0%, #4a1942 100%); }
.blog-card__body { padding: 24px; }
.blog-card__tag { display: inline-block; background: var(--light-bg); color: var(--red); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px; border-radius: 100px; margin-bottom: 12px; }
.blog-card h3 { font-size: 16px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
.blog-card p { font-size: 14px; color: var(--gray); line-height: 1.6; margin-bottom: 16px; }
.blog-card__link { font-size: 14px; font-weight: 600; color: var(--red); }
.blog-card__link:hover { text-decoration: underline; }
.blog-cta { text-align: center; }

/* ===== CONTACT ===== */
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact__text h2 { font-size: clamp(28px,4vw,42px); font-weight: 800; line-height: 1.2; margin-bottom: 16px; color: var(--white); }
.contact__text > p { color: rgba(255,255,255,0.65); margin-bottom: 32px; font-size: 16px; }
.contact__steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.contact__step { display: flex; align-items: flex-start; gap: 16px; }
.contact__step > span { width: 32px; height: 32px; background: var(--red); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.contact__step strong { display: block; font-size: 15px; color: var(--white); margin-bottom: 2px; }
.contact__step p { font-size: 13px; color: rgba(255,255,255,0.55); }
.contact__info { display: flex; flex-direction: column; gap: 10px; }
.contact__link { color: rgba(255,255,255,0.75); font-size: 15px; transition: color 0.2s; }
.contact__link:hover { color: var(--white); }
.contact__form { background: var(--white); border-radius: 16px; padding: 36px; box-shadow: 0 8px 40px rgba(0,0,0,0.25); }
.contact__form h3 { font-size: 20px; font-weight: 700; margin-bottom: 24px; color: var(--navy); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact__form input, .contact__form select, .contact__form textarea { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--text); background: var(--white); margin-bottom: 12px; transition: border-color 0.2s; outline: none; }
.contact__form input:focus, .contact__form select:focus, .contact__form textarea:focus { border-color: var(--red); }
.contact__form textarea { resize: vertical; }
.form__rgpd { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--gray); margin-bottom: 16px; cursor: pointer; line-height: 1.5; }
.form__rgpd input { width: auto; margin: 0; flex-shrink: 0; }
.form__rgpd a { color: var(--red); }
.form__success { margin-top: 12px; padding: 12px 16px; background: #e8f5e9; color: #2e7d32; border-radius: 8px; font-size: 14px; font-weight: 500; }
.form__error { margin-top: 12px; padding: 12px 16px; background: #fdecea; color: #c62828; border-radius: 8px; font-size: 14px; font-weight: 500; }

/* ===== FOOTER ===== */
.footer { background: #07111e; color: rgba(255,255,255,0.55); padding: 60px 0 0; font-size: 14px; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer__brand strong { color: var(--white); font-size: 18px; font-weight: 900; display: block; margin-bottom: 12px; }
.footer__brand p { line-height: 1.7; margin-bottom: 16px; }
.footer__contact { display: flex; flex-direction: column; gap: 6px; }
.footer__contact a { color: rgba(255,255,255,0.65); font-size: 14px; transition: color 0.2s; }
.footer__contact a:hover { color: var(--white); }
.footer__col strong { color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 14px; }
.footer__col a { display: block; color: rgba(255,255,255,0.55); padding: 4px 0; transition: color 0.2s; font-size: 14px; }
.footer__col a:hover { color: var(--white); }
.footer__legal-info { margin-top: 12px; font-size: 12px; line-height: 1.8; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.07); padding: 24px 0; }
.footer__bottom .container { display: block; font-size: 12px; flex-wrap: wrap; gap: 8px; }
.footer__legal { color: rgba(255,255,255,0.55); }
.footer__legal p { margin: 0 0 10px; line-height: 1.7; }
.footer__legal p:last-child { margin-bottom: 0; }
.footer__legal a { color: rgba(255,255,255,0.7); text-decoration: underline; }
.footer__legal a:hover { color: var(--white); }

/* ===== CHATBOT + SCROLL TOP =====
   Le design complet (widget + scroll-to-top) est injecté par chatbot.js
   en un bloc <style> unique au chargement de la page, pour éviter tout
   conflit avec des règles statiques ici (c'était la cause du bug texte
   invisible : deux feuilles de style concurrentes sur les mêmes id).
   Ne pas re-déclarer #chatbot-*, .chat-msg*, #scrollTop ici. */

/* ===== ÉTUDES DE CAS ===== */
.cas-grid { display: flex; flex-direction: column; gap: 24px; }
.cas-card { background: var(--white); border: 0.5px solid var(--border); border-radius: 4px; overflow: hidden; transition: box-shadow 0.3s cubic-bezier(0.22,1,0.36,1); }
.cas-card:hover { box-shadow: 0 12px 40px rgba(26,58,42,0.12); }
.cas-card__header { display: flex; align-items: flex-start; gap: 24px; padding: 28px 32px 20px; border-bottom: 0.5px solid var(--border); }
.cas-num { font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 900; color: rgba(26,58,42,0.1); line-height: 1; flex-shrink: 0; }
.cas-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 6px; }
.cas-card__header h3 { font-size: 18px; font-weight: 700; color: var(--black); line-height: 1.3; margin: 0; }
.cas-card__body { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0; }
.cas-col { padding: 24px 32px; border-right: 0.5px solid var(--border); }
.cas-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 8px; }
.cas-col p { font-size: 14px; color: var(--text); line-height: 1.65; margin: 0; }
.cas-results { display: flex; flex-direction: column; gap: 16px; padding: 24px 32px; background: var(--navy); }
.cas-stat span { display: block; font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 900; color: var(--accent); line-height: 1; }
.cas-stat small { font-size: 11px; color: rgba(244,240,232,0.6); }
@media (max-width: 768px) {
  .cas-card__body { grid-template-columns: 1fr; }
  .cas-col { border-right: none; border-bottom: 0.5px solid var(--border); }
  .cas-results { flex-direction: row; flex-wrap: wrap; gap: 12px; }
}

/* ===== TUNNEL QUALIFICATION ===== */
.tunnel-section { padding: 88px 0; background: var(--navy); color: var(--cream); text-align: center; }
.tunnel-section .section__tag { color: var(--accent); opacity: 1; }
.tunnel-title { font-family: 'Playfair Display', serif; font-size: clamp(28px,4vw,46px); font-weight: 800; line-height: 1.2; color: var(--cream); max-width: 600px; margin: 12px auto 0; }
.tunnel-intro { font-size: 15px; color: rgba(244,240,232,0.72); margin: 14px auto 0; font-weight: 300; }
.tunnel-wrapper { max-width: 560px; margin: 48px auto 0; text-align: left; }
.progress-track { height: 3px; background: rgba(244,240,232,0.15); border-radius: 2px; margin-bottom: 8px; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s ease; width: 0%; }
.progress-label { font-size: 11px; color: rgba(244,240,232,0.72); text-align: right; margin-bottom: 40px; letter-spacing: 0.08em; }
.tunnel-question { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--cream); margin-bottom: 32px; line-height: 1.3; }
.tunnel-options { display: flex; flex-direction: column; gap: 12px; }
.tunnel-btn { background: rgba(244,240,232,0.06); border: 1px solid rgba(244,240,232,0.2); color: var(--cream); padding: 18px 24px; border-radius: 4px; font-size: 15px; text-align: left; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.2s; font-family: 'DM Sans', sans-serif; }
.tunnel-btn:hover { background: rgba(244,240,232,0.12); border-color: var(--accent); transform: translateX(8px); }
.tunnel-btn.selected { background: rgba(200,169,110,0.15); border-color: var(--accent); }
.result-box { background: rgba(244,240,232,0.06); border: 1px solid rgba(200,169,110,0.3); border-radius: 4px; padding: 24px; margin: 24px 0; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.action-card { background: rgba(244,240,232,0.06); border: 1px solid rgba(244,240,232,0.2); border-radius: 4px; padding: 24px; }
.action-card input, .action-card select { width: 100%; background: rgba(244,240,232,0.08); border: 1px solid rgba(244,240,232,0.2); color: var(--cream); padding: 12px 16px; border-radius: 2px; font-size: 14px; margin: 6px 0; font-family: 'DM Sans', sans-serif; outline: none; transition: border-color 0.2s; }
.action-card input:focus, .action-card select:focus { border-color: rgba(200,169,110,0.5); }
.action-card input::placeholder { color: rgba(244,240,232,0.4); }
.action-card select option { background: var(--navy); }
.tunnel-action-btn { width: 100%; background: var(--accent); color: var(--black); border: none; padding: 14px; border-radius: 2px; font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 12px; transition: opacity 0.2s, transform 0.2s; font-family: 'DM Sans', sans-serif; letter-spacing: 0.02em; }
.tunnel-action-btn:hover { opacity: 0.88; transform: translateY(-2px); }
.tunnel-confirm { text-align: center; padding: 48px 20px; }
.tunnel-confirm-icon { font-size: 48px; margin-bottom: 20px; }
.tunnel-confirm-title { font-family: 'Playfair Display', serif; font-size: 28px; color: var(--accent); margin-bottom: 12px; }
.tunnel-confirm-sub { font-size: 15px; color: rgba(244,240,232,0.6); line-height: 1.7; }
@keyframes slideInTunnel { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .result-actions { grid-template-columns: 1fr; }
  .tunnel-question { font-size: 22px; }
}

/* ===== CHIFFRES CLÉS ===== */
.chiffres-cles { background: var(--black); color: var(--cream); text-align: center; padding: 80px 0; }
.chiffres-cles .section__tag { color: var(--accent); opacity: 1; }
.chiffres-cles .section__header { margin-bottom: 56px; }
.chiffres-cles .section__header h2 { color: var(--cream); font-size: clamp(32px,5vw,54px); letter-spacing: -1px; }
.chiffres-cles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; max-width: 960px; margin: 0 auto; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.08); }
.chiffre-cle { padding: 48px 32px; background: var(--black); border: 0.5px solid rgba(255,255,255,0.06); transition: background 0.3s cubic-bezier(0.22,1,0.36,1); }
.chiffre-cle:hover { background: rgba(255,255,255,0.03); }
.cc-num { font-family: 'Playfair Display', serif; font-size: clamp(36px,4vw,52px); font-weight: 900; color: var(--accent); letter-spacing: -1px; line-height: 1; margin-bottom: 12px; }
.cc-label { font-size: 13px; color: rgba(244,240,232,0.55); line-height: 1.4; }
@media (max-width: 600px) { .chiffres-cles-grid { grid-template-columns: 1fr 1fr; } }

/* ===== PRODUITS DARK ===== */
.produits { background: var(--black); padding: 80px 0; }
.produits .section__header { text-align: left; margin-bottom: 60px; }
.produits .section__tag { color: var(--accent); opacity: 1; }
.produits .section__header h2 { color: var(--cream); font-size: clamp(32px,5vw,58px); letter-spacing: -1.5px; }
.produits .section__header p { color: rgba(244,240,232,0.7); }
.produits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.08); }
.produit-card { padding: 36px 28px; background: var(--black); border: 0.5px solid rgba(255,255,255,0.06); transition: background 0.2s; display: block; text-decoration: none; }
.produit-card:hover { background: rgba(255,255,255,0.03); }
.produit-card__icon { width: 40px; height: 40px; border: 0.5px solid rgba(200,169,110,0.3); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 20px; }
.produit-card h3 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--cream); margin-bottom: 8px; }
.produit-card__tag { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; display: block; }
.produit-card p { font-size: 13px; color: rgba(244,240,232,0.68); line-height: 1.65; margin-bottom: 0; }
.produit-card__link { display: none; }
@media (max-width: 960px) { .produits__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .produits__grid { grid-template-columns: 1fr; } }

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .promise__inner, .creation__inner, .ia__inner, .about__inner, .contact__inner { grid-template-columns: 1fr; gap: 40px; }
  .cards { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr 1fr; }
  .channels { grid-template-columns: 1fr 1fr; }
  .reviews { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .steps { flex-direction: column; }
  .step__arrow { display: none; }
  .problem { grid-template-columns: 1fr; }
  .problem__arrow { display: none; }
}
@media (max-width: 600px) {
  .hero { padding: 64px 0 48px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .features { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .about__stats { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .creation__list { grid-template-columns: 1fr; }
  .faq-cta .btn { display: block; margin: 6px auto; text-align: center; }
}

/* ===== KEYWORD LINKS ===== */
.kw-link { color: var(--navy); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; font-weight: 500; transition: color 0.15s; }
.kw-link:hover { color: var(--accent); }

/* ===== GRID SYSTEM ===== */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ===== PROCESS STEPS ===== */
.process-steps { display: flex; flex-direction: column; gap: 0; max-width: 760px; margin: 0 auto; }
.process-step { display: flex; gap: 32px; align-items: flex-start; padding: 36px 0; border-bottom: 1px solid rgba(26,58,42,0.1); }
.process-step:last-child { border-bottom: none; }
.process-step__num { font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 900; color: rgba(26,58,42,0.1); line-height: 1; flex-shrink: 0; width: 64px; }
.process-step__content h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.process-step__content p { font-size: 15px; line-height: 1.7; color: #4a4a48; }
.section--dark .process-step { border-bottom-color: rgba(244,240,232,0.1); }
.section--dark .process-step__num { color: rgba(244,240,232,0.1); }
.section--dark .process-step__content h3 { color: var(--cream); }
.section--dark .process-step__content p { color: rgba(244,240,232,0.7); }

/* ===== STAT CARDS ===== */
.stat-card { background: var(--cream); border-radius: 12px; padding: 28px 24px; text-align: center; }
.stat-card--dark { background: rgba(255,255,255,0.06); border: 1px solid rgba(200,169,110,0.2); border-radius: 12px; padding: 28px 24px; text-align: center; }
.stat-card__num { display: block; font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 900; color: var(--navy); line-height: 1; margin-bottom: 8px; }
.stat-card--dark .stat-card__num { color: var(--accent); }
.stat-card__label { display: block; font-size: 13px; color: #6b6b66; line-height: 1.4; }
.stat-card--dark .stat-card__label { color: rgba(244,240,232,0.6); }

/* ===== TERMINAL BLOCK ===== */
.terminal-block { background: #0d0d0b; border: 1px solid rgba(200,169,110,0.25); border-radius: 12px; padding: 28px 32px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 2; max-width: 600px; margin: 40px auto 0; }
.terminal-block .t-prompt { color: var(--accent); }
.terminal-block .t-ok { color: #4ade80; }
.terminal-block .t-text { color: rgba(244,240,232,0.85); }

/* ===== COMPARE TABLE (dark sections) ===== */
.compare-table { width: 100%; border-collapse: collapse; margin-top: 40px; }
.compare-table th { padding: 16px 20px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.compare-table th:nth-child(1) { text-align: left; color: rgba(244,240,232,0.5); }
.compare-table th:nth-child(2) { background: rgba(255,255,255,0.05); color: rgba(244,240,232,0.7); border-radius: 8px 8px 0 0; }
.compare-table th:nth-child(3) { background: rgba(200,169,110,0.15); color: var(--accent); border-radius: 8px 8px 0 0; }
.compare-table td { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; }
.compare-table td:nth-child(1) { color: rgba(244,240,232,0.6); font-weight: 500; }
.compare-table td:nth-child(2) { background: rgba(255,255,255,0.03); color: rgba(244,240,232,0.65); text-align: center; }
.compare-table td:nth-child(3) { background: rgba(200,169,110,0.07); color: rgba(244,240,232,0.9); text-align: center; font-weight: 500; }
.compare-table .bad { color: #f87171; }
.compare-table .good { color: #4ade80; }

/* ===== COMPARE TABLE (light sections) ===== */
.compare-table-article { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 14px; }
.compare-table-article th { padding: 14px 18px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; text-align: left; border-bottom: 2px solid var(--light-bg); }
.compare-table-article th:nth-child(2) { color: #9ca3af; }
.compare-table-article th:nth-child(3) { color: var(--navy); }
.compare-table-article td { padding: 12px 18px; border-bottom: 1px solid var(--light-bg); vertical-align: top; line-height: 1.5; }
.compare-table-article td:nth-child(1) { font-weight: 600; color: var(--black); }
.compare-table-article td:nth-child(2) { color: #9ca3af; }
.compare-table-article td:nth-child(3) { color: var(--navy); font-weight: 500; }

/* ===== ARTICLE PAGES ===== */
.article-hero { background: var(--black); padding: 120px 0 80px; position: relative; overflow: hidden; }
.article-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 50%, rgba(200,169,110,0.06) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(26,58,42,0.15) 0%, transparent 60%); }
.article-hero__inner { position: relative; max-width: 780px; }
.article-hero__tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 20px; display: block; }
.article-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 52px); font-weight: 700; color: var(--cream); line-height: 1.2; margin-bottom: 24px; }
.article-hero__meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; }
.article-hero__meta span { font-size: 13px; color: rgba(244,240,232,0.5); }
.article-hero__meta strong { color: rgba(244,240,232,0.8); font-weight: 600; }
.article-section { padding: 80px 0; }
.article-body { max-width: 720px; margin: 0 auto; }
.article-body h2 { font-family: 'Playfair Display', serif; font-size: clamp(22px, 2.5vw, 30px); color: var(--black); margin: 56px 0 16px; line-height: 1.3; }
.article-body h2:first-child { margin-top: 0; }
.article-body p { font-size: 17px; line-height: 1.85; color: #3a3a38; margin-bottom: 24px; }
.article-body ul { margin: 0 0 24px 0; padding-left: 24px; }
.article-body ul li { font-size: 17px; line-height: 1.7; color: #3a3a38; margin-bottom: 10px; }
.article-quote { background: var(--light-bg); border-left: 4px solid var(--accent); padding: 20px 28px; margin: 32px 0; font-size: 18px; font-style: italic; color: var(--navy); border-radius: 0 8px 8px 0; }
.article-callout { background: var(--navy); color: var(--cream); border-radius: 12px; padding: 28px 32px; margin: 40px 0; }
.article-callout strong { color: var(--accent); display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.article-callout p { color: rgba(244,240,232,0.85); margin-bottom: 0; }
.article-cta { background: var(--black); border-radius: 16px; padding: 40px 48px; text-align: center; margin: 56px 0 0; }
.article-cta h3 { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--cream); margin-bottom: 12px; }
.article-cta p { color: rgba(244,240,232,0.6); font-size: 15px; margin-bottom: 24px; }

/* ===== CASE STUDIES ===== */
.case-study { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; padding: 48px 0; border-top: 1px solid rgba(26,58,42,0.12); }
.case-study:first-of-type { border-top: none; }
.case-study__meta { display: flex; flex-direction: column; gap: 8px; }
.case-study__tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.case-study__title { font-family: 'Playfair Display', serif; font-size: clamp(22px, 2vw, 28px); color: var(--navy); margin: 8px 0 16px; }
.case-study__desc { font-size: 15px; line-height: 1.7; color: #3a3a38; }
.case-study__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: 20px 0 6px; }
.case-study__results { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.case-study__result { background: var(--cream); border-radius: 10px; padding: 16px 18px; }
.case-study__result-num { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--navy); display: block; }
.case-study__result-label { font-size: 12px; color: #6b6b66; margin-top: 2px; display: block; }
.section--dark .case-study { border-top-color: rgba(244,240,232,0.1); }
.section--dark .case-study__title { color: var(--cream); }
.section--dark .case-study__desc { color: rgba(244,240,232,0.75); }
.section--dark .case-study__result { background: rgba(255,255,255,0.06); }
.section--dark .case-study__result-num { color: var(--cream); }
.section--dark .case-study__result-label { color: rgba(244,240,232,0.5); }
@media (max-width: 768px) {
  .case-study { grid-template-columns: 1fr; gap: 24px; }
  .process-step { flex-direction: column; gap: 8px; }
  .process-step__num { font-size: 32px; width: auto; }
  .article-cta { padding: 32px 24px; }
}

/* ══════════════════════════════════════════════════════════
   MODERN LAYER — porté depuis index-v2.html, recoloré au code
   couleur de la marque (navy vert #1a3a2a / or #c8a96e / crème).
   Ajouté le 02/07/2026 — refonte-2026.
   ══════════════════════════════════════════════════════════ */
:root {
  --dark2: #0d140f;
  --glass: rgba(244,240,232,0.04);
  --glass-border: rgba(244,240,232,0.10);
  --glass-border2: rgba(244,240,232,0.16);
  --glow-green: #5cb88a;
}

/* ── TIMELINE CONNECTÉE (remplace process-horizontal sur fond sombre) ── */
.timeline-modern { position: relative; display: flex; flex-direction: column; padding-left: 8px; }
.timeline-modern::before {
  content: ''; position: absolute; left: 23px; top: 26px; bottom: 26px; width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--accent2), var(--navy-light));
  border-radius: 2px; opacity: .8;
}
.tlm-step { display: flex; gap: 20px; align-items: flex-start; padding: 0 0 34px; position: relative; }
.tlm-step:last-child { padding-bottom: 0; }
.tlm-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--dark2);
  border: 2px solid var(--glass-border2); display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; position: relative; z-index: 1; transition: box-shadow .3s, border-color .3s;
}
.tlm-step.hl .tlm-icon { background: rgba(200,169,110,.16); border-color: var(--accent); box-shadow: 0 0 18px rgba(200,169,110,.4); }
.tlm-num { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--accent2); margin-bottom: 3px; }
.tlm-text strong { display: block; font-size: 16px; font-weight: 700; color: var(--cream); margin-bottom: 5px; }
.tlm-text p { font-size: 13px; color: rgba(244,240,232,.6); line-height: 1.6; }
.tlm-badge {
  display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--black); background: var(--accent); border-radius: 3px; padding: 3px 9px;
}

/* ── STATS GLOW (enrichit .chiffre-cle existant) ── */
.cc-num { text-shadow: 0 0 22px rgba(200,169,110,.35); }
.chiffre-cle .cc-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: rgba(244,240,232,.7);
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px;
  padding: 4px 10px; margin-top: 10px;
}
.cc-chip::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 6px var(--accent); }
.chiffre-cle:nth-child(3n+2) .cc-chip::before { background: var(--glow-green); box-shadow: 0 0 6px var(--glow-green); }
.chiffre-cle:nth-child(3n+3) .cc-chip::before { background: var(--navy-light); box-shadow: 0 0 6px var(--navy-light); }

/* ── SERVICES CARDS + TERMINAL (grille 3 colonnes, fond sombre) ── */
.srv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 48px; }
@media (max-width: 900px) { .srv-grid { grid-template-columns: 1fr; } }
.srv-card-modern {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 32px 26px; display: flex; flex-direction: column; gap: 14px; position: relative;
  overflow: hidden; transition: border-color .25s, transform .25s;
}
.srv-card-modern:hover { border-color: var(--glass-border2); transform: translateY(-4px); }
.srv-card-modern__num {
  font-family: 'Playfair Display', serif; font-size: 46px; font-weight: 900; color: rgba(244,240,232,.05);
  position: absolute; top: 14px; right: 20px; line-height: 1;
}
.srv-card-modern__icon {
  width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 22px; background: rgba(200,169,110,.14);
}
.srv-card-modern h3 { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700; color: var(--cream); }
.srv-card-modern p { font-size: 13.5px; color: rgba(244,240,232,.62); line-height: 1.65; }
.srv-card-modern__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.srv-tag-modern {
  font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: rgba(244,240,232,.05); border: 1px solid var(--glass-border); color: var(--accent2);
}
.srv-terminal-modern {
  background: #060907; border: 1px solid rgba(92,184,138,.25); border-radius: 10px;
  padding: 14px 16px; margin-top: 4px; font-family: 'Courier New', monospace; font-size: 12px;
}
.srv-terminal-modern .t-line { margin-bottom: 4px; color: rgba(244,240,232,.4); }
.srv-terminal-modern .t-prompt, .srv-terminal-modern .t-ok { color: var(--glow-green); }

/* ── GLOW BORDER AU SURVOL (carte mise en avant) ── */
@property --ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes spinAngleWA { to { --ang: 360deg; } }
.glow-card-modern { position: relative; }
.glow-card-modern::after {
  content:''; position:absolute; inset:-1px; border-radius:inherit;
  background: conic-gradient(from var(--ang), transparent 20%, var(--accent) 40%, var(--accent2) 60%, var(--navy-light) 80%, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinAngleWA 4s linear infinite; opacity:0; transition:opacity .35s; pointer-events:none; z-index:0;
}
.glow-card-modern:hover::after { opacity: 1; }

/* ── MARQUEE (bandeau défilant, si pas déjà présent) ── */
.marquee-wrap-modern { border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); overflow:hidden; padding:14px 0; background:var(--dark2); }
.marquee-track-modern { display:flex; gap:48px; width:max-content; animation: marqueeWA 24s linear infinite; }
@keyframes marqueeWA { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-item-modern { font-size:12px; font-weight:600; color:rgba(244,240,232,.5); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.marquee-item-modern::before { content:'◆ '; color:var(--accent); font-size:9px; }

/* ============================================================
   OFFRES DE LEADS — bandeau Commande Test + grilles tarifaires
   (partagé : nos-offres, leads-mutuelle-senior, animaux, RAC)
   ============================================================ */
.ct-banner{ position:relative; overflow:hidden; background:linear-gradient(135deg,#1a3a2a 0%,#2d5a42 100%); border-radius:22px; padding:38px 40px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; box-shadow:0 26px 70px rgba(26,58,42,.24); }
.ct-banner::after{ content:''; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(200,169,110,.28),transparent 70%); pointer-events:none; }
.ct-banner__tag{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.ct-banner__tag::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(200,169,110,.2); }
.ct-banner h3{ font-family:'Playfair Display',serif; font-size:clamp(24px,2.6vw,34px); line-height:1.18; color:var(--cream); margin:0 0 12px; }
.ct-banner h3 em{ font-style:italic; color:var(--accent); }
.ct-banner p{ color:rgba(244,240,232,.72); font-size:15px; line-height:1.65; max-width:620px; margin:0; }
.ct-banner__pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.ct-banner__pills span{ font-size:12.5px; color:rgba(244,240,232,.85); background:rgba(244,240,232,.07); border:1px solid rgba(244,240,232,.14); border-radius:999px; padding:6px 14px; }
.ct-banner__side{ position:relative; z-index:1; text-align:center; }
.ct-banner__side .btn{ white-space:nowrap; }
.ct-banner__side small{ display:block; margin-top:12px; font-size:12px; color:rgba(244,240,232,.5); }
@media(max-width:880px){ .ct-banner{ grid-template-columns:1fr; padding:30px 24px; } .ct-banner__side{ text-align:left; } }

.tarif-prod{ background:#fff; border:1px solid var(--border); border-radius:20px; overflow:hidden; margin-bottom:26px; box-shadow:0 14px 44px rgba(26,58,42,.07); }
.tarif-prod__head{ display:flex; align-items:center; gap:16px; padding:24px 28px; border-bottom:1px solid var(--border); border-top:3px solid var(--tp-col,#3b82f6); flex-wrap:wrap; }
.tarif-prod__ico{ font-size:30px; line-height:1; }
.tarif-prod__title{ font-family:'Playfair Display',serif; font-size:23px; color:var(--navy); margin:0; }
.tarif-prod__cible{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tp-col,#3b82f6); }
.tarif-prod__excl{ margin-left:auto; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); background:rgba(200,169,110,.16); border:1px solid rgba(200,169,110,.4); border-radius:999px; padding:6px 13px; }
.tarif-table{ width:100%; border-collapse:collapse; font-size:14px; }
.tarif-table th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--gray); padding:14px 20px; background:#faf8f3; border-bottom:1px solid var(--border); }
.tarif-table td{ padding:18px 20px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text); }
.tarif-table tr:last-child td{ border-bottom:none; }
.tarif-table tr:hover td{ background:#fcfbf7; }
.tt-format{ font-weight:600; color:var(--navy); display:block; }
.tt-format small{ display:block; font-weight:400; font-size:12.5px; color:var(--gray); margin-top:3px; line-height:1.45; }
.tt-ht{ font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--navy); white-space:nowrap; }
.tt-ttc{ display:block; font-size:12.5px; color:var(--gray); margin-top:2px; white-space:nowrap; }
.tt-min{ font-size:13px; color:var(--gray); line-height:1.5; max-width:230px; }
.tarif-table .btn{ white-space:nowrap; }
.tarif-prod__foot{ padding:16px 28px; background:#faf8f3; font-size:13px; color:var(--gray); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tarif-prod__foot a{ color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:860px){
  .tarif-table thead{ display:none; }
  .tarif-table tr{ display:block; border-bottom:1px solid var(--border); padding:6px 0; }
  .tarif-table tr:last-child{ border-bottom:none; }
  .tarif-table td{ display:block; border:none; padding:8px 20px; }
}

.fiche-lead{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:26px; padding:0; }
.fiche-lead li{ list-style:none; display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(244,240,232,.82); background:rgba(244,240,232,.045); border:1px solid rgba(244,240,232,.1); border-radius:12px; padding:13px 16px; }
.fiche-lead li::before{ content:'✓'; color:var(--accent); font-weight:700; flex:none; }
.fiche-lead--light li{ color:var(--text); background:#fff; border-color:var(--border); }

.mb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:8px; }
.mb-card{ display:flex; flex-direction:column; gap:12px; background:rgba(244,240,232,.04); border:1px solid rgba(244,240,232,.12); border-radius:18px; padding:26px; transition:border-color .2s, transform .2s; text-decoration:none; }
.mb-card:hover{ border-color:rgba(200,169,110,.45); transform:translateY(-3px); }
.mb-card__url{ font-size:12.5px; font-weight:600; color:var(--accent); word-break:break-all; }
.mb-card h4{ font-family:'Playfair Display',serif; font-size:19px; color:var(--cream); margin:0; }
.mb-card p{ font-size:14px; color:rgba(244,240,232,.62); line-height:1.6; margin:0; }
.mb-card__go{ margin-top:auto; font-size:13px; font-weight:600; color:var(--cream); }

/* ============================================================
   FICHE LEAD — page Rachat de crédit (3 familles + mock-up)
   ============================================================ */
.lead-grid{ display:grid; grid-template-columns:1fr 420px; gap:44px; align-items:start; margin-top:14px; }
@media(max-width:1040px){ .lead-grid{ grid-template-columns:1fr; gap:36px; } }

.fam{ background:rgba(244,240,232,.04); border:1px solid rgba(244,240,232,.12); border-left:3px solid var(--fam-col,#f59e0b); border-radius:14px; padding:22px 24px; margin-bottom:14px; }
.fam__head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.fam__num{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--fam-col,#f59e0b); color:#0a0a09; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.fam h3{ font-family:'Playfair Display',serif; font-size:18px; color:var(--cream); margin:0; line-height:1.25; }
.fam p{ font-size:13.5px; color:rgba(244,240,232,.85); line-height:1.7; margin:0; }
.fam p em{ font-style:normal; color:var(--fam-col,#f59e0b); font-weight:600; }

/* Mock-up de la fiche livrée */
.lead-mock{ position:sticky; top:96px; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.35); }
@media(max-width:1040px){ .lead-mock{ position:static; max-width:460px; } }
.lm-head{ background:#1a3a2a; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.lm-head__id{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.lm-head__name{ font-family:'Playfair Display',serif; font-size:19px; color:var(--cream); margin-top:3px; }
.lm-head__excl{ font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#0a0a09; background:var(--accent); border-radius:999px; padding:5px 10px; white-space:nowrap; }
.lm-sec{ font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--gray); background:#faf8f3; padding:9px 22px; border-bottom:1px solid var(--border); border-top:1px solid var(--border); }
.lm-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 22px; font-size:12.5px; border-bottom:1px solid rgba(26,58,42,.06); }
.lm-row span:first-child{ color:var(--gray); }
.lm-row span:last-child{ color:var(--navy); font-weight:600; text-align:right; }
.lm-row--alert span:last-child{ color:#b45309; }
.lm-row--ok span:last-child{ color:#0f7a4a; }
.lm-rdv{ margin:14px 22px 0; background:rgba(200,169,110,.12); border:1px solid rgba(200,169,110,.4); border-radius:10px; padding:12px 14px; text-align:center; }
.lm-rdv strong{ display:block; font-size:13px; color:var(--navy); }
.lm-rdv span{ font-size:11.5px; color:var(--gray); }
.lm-foot{ padding:12px 22px 16px; font-size:10.5px; color:var(--gray); text-align:center; line-height:1.5; }

/* ============================================================
   BANDEAU FAQ — remplace les FAQ inline, renvoie vers faq.html
   ============================================================ */
.faq-band{ display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:20px; padding:32px 36px; box-shadow:0 16px 46px rgba(26,58,42,.08); }
.faq-band h3{ font-family:'Playfair Display',serif; font-size:clamp(20px,2.2vw,27px); color:var(--navy); margin:10px 0 8px; line-height:1.25; }
.faq-band p{ font-size:14.5px; color:var(--gray); line-height:1.65; margin:0; max-width:640px; }
.faq-band .btn{ white-space:nowrap; }
.faq-band--dark{ background:rgba(244,240,232,.04); border-color:rgba(244,240,232,.13); box-shadow:none; }
.faq-band--dark h3{ color:var(--cream); }
.faq-band--dark p{ color:rgba(244,240,232,.6); }
@media(max-width:820px){ .faq-band{ grid-template-columns:1fr; padding:26px 24px; } }

/* ============================================================
   CORRECTIFS RESPONSIVE GLOBAUX
   Placés en fin de fichier : ils priment sur les règles ci-dessus.
   Objectif : aucun débordement horizontal, aucun bloc masqué,
   du 320 px (petit mobile) au 1440 px (desktop).
   ============================================================ */

/* --- Garde-fous : plus jamais de scroll horizontal --- */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, canvas, iframe, table { max-width: 100%; }
img, video { height: auto; }
p, li, td, th, h1, h2, h3, h4, summary, a { overflow-wrap: break-word; }

/* --- HERO : la 2ᵉ colonne (dashboard, livefeed) passait sous l'écran --- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__right { max-width: 560px; width: 100%; }
  .hero__sub { max-width: none; }
}

/* --- STATS : c'est un flex, la règle grid des anciennes media queries
       n'avait aucun effet → 4 blocs côte à côte qui débordaient --- */
@media (max-width: 860px) {
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
}
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; gap: 16px; }
}

/* --- DASHBOARD du hero : on garde les 3 KPI sur UNE SEULE LIGNE
       et on réduit toute la carte proportionnellement. --- */

/* Les 3 cellules KPI ont la même hauteur quelle que soit la longueur du texte */
.dash__kpi { display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; }
.dash__kpi-label { min-height: 2.1em; display: flex; align-items: flex-start; }
.dash__kpi-delta { margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .dashboard { max-width: 480px; margin: 0 auto; }
  .dash__kpi { padding: 12px 12px; }
  .dash__kpi-value { font-size: 21px; }
  .dash__sparkline { display: none; }
}

@media (max-width: 560px) {
  .dashboard { max-width: 400px; }
  .dash__header { padding: 11px 14px; }
  .dash__header-title { font-size: 9px; letter-spacing: 0.1em; }
  .dash__header-date { font-size: 10px; }

  .dash__kpis { grid-template-columns: repeat(3, 1fr); }   /* on reste sur une ligne */
  .dash__kpi { padding: 10px 8px; }
  .dash__kpi-label { font-size: 8px; letter-spacing: 0.05em; line-height: 1.25; min-height: 2.4em; margin-bottom: 3px; }
  .dash__kpi-value { font-size: 19px; letter-spacing: -0.3px; }
  .dash__kpi-delta { font-size: 8.5px; }

  .dash__gauge-row { padding: 10px 14px; gap: 9px; }
  .dash__gauge-label { font-size: 9px; }
  .dash__gauge-pct { font-size: 10px; min-width: 26px; }

  .dash__feed-item { padding: 7px 14px; gap: 8px; }
  .dash__feed-name { font-size: 11px; }
  .dash__feed-meta { font-size: 9px; }
  .dash__feed-status { font-size: 8px; padding: 2px 6px; }
  .dash__feed-item:nth-child(n+4) { display: none; }        /* 3 lignes suffisent sur mobile */

  .dash__footer { padding: 9px 14px; }
  .dash__footer-text { font-size: 8.5px; }
}

/* Très petits écrans : on garde les 3 colonnes, on masque le détail secondaire */
@media (max-width: 400px) {
  .dashboard { max-width: 100%; }
  .dash__kpi { padding: 9px 6px; }
  .dash__kpi-label { font-size: 7.5px; }
  .dash__kpi-value { font-size: 17px; }
  .dash__kpi-delta { display: none; }
  .dash__feed-meta { display: none; }
}

/* --- TABLEAUX : défilement horizontal contrôlé plutôt que débordement --- */
@media (max-width: 640px) {
  .compare-table-article { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- CONTAINER : marges resserrées sur petit écran --- */
@media (max-width: 520px) {
  .container { padding: 0 16px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
}

/* --- BOUTONS : pleine largeur sur mobile, plus faciles à viser au pouce --- */
@media (max-width: 520px) {
  .hero__cta, .tunnel__cta, .page-hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn, .tunnel__cta .btn, .page-hero__cta .btn { width: 100%; text-align: center; justify-content: center; }
  .btn--lg { padding-left: 18px; padding-right: 18px; }
}

/* --- CHIFFRES CLÉS : 2 colonnes trop serrées sous 420 px --- */
@media (max-width: 420px) {
  .chiffres-cles-grid { grid-template-columns: 1fr; }
}

/* --- PROCESS : le gros numéro mangeait la largeur du texte --- */
@media (max-width: 560px) {
  .process-step { flex-direction: column; gap: 10px; }
  .process-step__num { font-size: 34px; width: auto; }
}

/* --- BANDEAU PROMO + NAV MOBILE --- */
@media (max-width: 640px) {
  .promo-banner { font-size: 12px; line-height: 1.5; padding: 9px 14px; text-align: center; }
}

/* --- FICHE LEAD (page RAC) : le mock-up ne doit pas rester sticky en mobile --- */
@media (max-width: 1040px) {
  .lead-mock { position: static; margin: 0 auto; }
}

/* --- GRILLES TARIFAIRES : en mode carte sous 860 px, on annote les cellules --- */
@media (max-width: 860px) {
  .tarif-table td { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
  .tarif-table td .btn { width: 100%; text-align: center; margin-top: 6px; }
  .tt-min { max-width: none; text-align: right; }
}

/* --- FORMULAIRES : jamais moins de 16 px, sinon iOS zoome au focus --- */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Delta « leads chauds » : même typo que les autres, couleur d'accent */
.dash__kpi-delta--hot { color: var(--accent) !important; }

/* ── Conformité loi du 11 août 2026 ──────────────────────────────────
   Deux traitements distincts, volontairement :
   .hero__conformite = mention de confiance DISCRÈTE, placée SOUS les CTA.
     Elle ne doit jamais couper le chemin titre → sous-titre → bouton.
   .bandeau-loi = bandeau de section assumé, quand le sujet est le propos. */
.hero__conformite {
  /* Pas de filet ici : .stats en pose déjà un juste en dessous.
     La marge négative va chercher l'espace laissé par .hero__cta (48px). */
  display: flex; align-items: baseline; gap: 8px;
  max-width: 600px; margin: -26px 0 30px;
  font-size: 12.5px; line-height: 1.6; color: var(--gray);
}
.hero__conformite > span:first-child { font-size: 13px; opacity: .5; flex-shrink: 0; }
.hero__conformite strong { color: var(--navy); font-weight: 600; }
.hero__conformite a {
  color: var(--navy); font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid rgba(26,58,42,.3);
}
.hero__conformite a:hover { border-bottom-color: var(--navy); }

.bandeau-loi {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(26,58,42,.05);
  border: 1px solid rgba(26,58,42,.16);
  border-left: 3px solid var(--navy);
  border-radius: 6px; padding: 15px 20px; margin: 0 0 30px;
  font-size: 14px; line-height: 1.65; color: var(--gray);
}
.bandeau-loi > span:first-child { font-size: 17px; opacity: .65; flex-shrink: 0; line-height: 1.3; }
.bandeau-loi strong { color: var(--navy); font-weight: 600; }
.bandeau-loi a { color: var(--navy); font-weight: 600; border-bottom: 1px solid rgba(26,58,42,.3); }
.bandeau-loi a:hover { border-bottom-color: var(--navy); }

@media (max-width: 640px) {
  .hero__conformite { font-size: 12px; margin-bottom: 26px; }
  .hero__conformite a { white-space: normal; }
  .bandeau-loi { font-size: 13px; padding: 13px 15px; gap: 10px; }
}
}

/* ── Bandeau de consentement cookies ─────────────────────────────────────────
   Carte ancrée en bas à gauche, pas une modale plein écran : on n'assomme pas
   le visiteur. Le voile est très léger et NE FERME PAS au clic — fermer sans
   choisir ne doit pas valoir acceptation tacite. */
.ck-racine { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.ck-voile {
  position: absolute; inset: 0; background: rgba(10,10,9,.28);
  backdrop-filter: blur(1.5px); pointer-events: auto;
  animation: ckVoile .3s ease;
}
@keyframes ckVoile { from { opacity: 0 } to { opacity: 1 } }

.ck-panneau {
  position: absolute; left: 24px; bottom: 24px; width: min(440px, calc(100vw - 48px));
  max-height: calc(100vh - 48px); overflow-y: auto; pointer-events: auto;
  background: #fff; border: 1px solid rgba(26,58,42,.14); border-radius: 12px;
  padding: 24px 26px 20px; box-shadow: 0 18px 50px rgba(26,58,42,.22);
  animation: ckMonte .35s cubic-bezier(.16,1,.3,1);
}
@keyframes ckMonte { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

.ck-titre {
  font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 700;
  color: var(--navy); letter-spacing: -.3px; margin-bottom: 9px;
}
.ck-intro { font-size: 13px; line-height: 1.62; color: var(--gray); margin-bottom: 18px; }

/* Les deux boutons ont exactement le même gabarit : refuser doit être
   aussi facile qu'accepter. Ne pas transformer « refuser » en lien discret. */
.ck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-btn {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 12px 14px; border-radius: 6px; border: 1px solid var(--navy);
  transition: background .15s, color .15s;
}
.ck-btn--refuser  { background: #fff; color: var(--navy); }
.ck-btn--refuser:hover { background: rgba(26,58,42,.06); }
.ck-btn--accepter { background: var(--navy); color: var(--cream); }
.ck-btn--accepter:hover { background: var(--navy-mid); }

.ck-liens {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(26,58,42,.1);
}
.ck-lien {
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--gray);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.ck-lien:hover { color: var(--navy); }

.ck-details { margin: 4px 0 18px; border-top: 1px solid rgba(26,58,42,.1); }
.ck-cat { padding: 14px 0; border-bottom: 1px solid rgba(26,58,42,.08); }
.ck-cat__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.ck-cat__titre { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.ck-cat__fixe { font-size: 11px; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.ck-cat__txt { font-size: 12.5px; line-height: 1.58; color: var(--gray); }

.ck-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.ck-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ck-switch__piste {
  width: 38px; height: 21px; border-radius: 999px; background: #cfcbc1;
  position: relative; transition: background .18s; flex-shrink: 0;
}
.ck-switch__pouce {
  position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.ck-switch input:checked + .ck-switch__piste { background: var(--navy); }
.ck-switch input:checked + .ck-switch__piste .ck-switch__pouce { transform: translateX(17px); }
.ck-switch input:focus-visible + .ck-switch__piste { outline: 2px solid var(--accent); outline-offset: 2px; }
.ck-switch__txt { font-size: 12px; color: var(--gray); }

@media (max-width: 560px) {
  .ck-panneau { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px 18px 16px; }
  .ck-titre { font-size: 18px; }
  .ck-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-panneau, .ck-voile { animation: none; }
  .ck-switch__piste, .ck-switch__pouce { transition: none; }
}