:root{
  --bg:#0a0f16; --surface:#0f1621; --text:#f8fafc; --muted:#cbd5e1; --muted-2:#94a3b8;
  --card:#0f172a; --line:rgba(148,163,184,.25);
  --brand1:#2563eb; --brand2:#0ea5a8; --danger:#ef4444;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab, var(--surface) 88%, transparent);border-bottom:1px solid var(--line);backdrop-filter:saturate(180%) blur(16px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:900;font-size:20px;letter-spacing:.4px}
.brand b{background:linear-gradient(90deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:12px;align-items:center}
.nav-link{padding:10px 12px;border-radius:999px}
.nav-link:hover,.nav-link.active{background:color-mix(in oklab, var(--text) 10%, transparent)}
.nav-cta{display:flex;gap:10px;align-items:center}
.btn-wa{padding:8px 12px;border-radius:999px;background:#25D366;color:#0b1117;font-weight:700}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:22px}

/* Hero */
.hero{display:grid;place-items:center;min-height:70vh;background:
 radial-gradient(60% 40% at 70% 10%, color-mix(in oklab, var(--brand1) 35%, transparent), transparent 60%),
 linear-gradient(180deg, color-mix(in oklab, var(--bg) 94%, #000) , var(--bg));}
:root[data-theme="light"] .hero{background:linear-gradient(180deg,#e9f2ff,#ffffff)}
.hero-inner{text-align:center;padding:80px 0}
.headline{font-size:54px;font-weight:900;margin:0 0 10px;letter-spacing:-.02em}
.grad{background:linear-gradient(90deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.subhead{color:var(--muted);font-size:20px;max-width:880px;margin:0 auto 24px;line-height:1.6}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font-weight:700}
.btn.primary{border:none;background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff;box-shadow:var(--shadow)}

/* Sections */
.section{padding:72px 0}
.section-alt{background:linear-gradient(180deg,var(--bg) 0%, color-mix(in oklab, var(--bg) 82%, var(--surface)) 100%)}
.section-title{font-size:34px;margin:0 0 14px;text-align:center}
.lead{font-size:18px;color:var(--muted);text-align:center;max-width:920px;margin:0 auto 24px}

/* Cards & grids */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.card h3{margin:0 0 8px}
.kpi-band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}
.kpi-band strong{font-size:26px;display:block}
.kpi-band span{color:var(--muted)}


/* === EcritPro: Luxury blue & bold for service tabs (better contrast on dark) === */
.svc-tab{
  color: var(--brand1);
  font-weight: 700;
  border-color: color-mix(in oklab, var(--brand1) 45%, var(--line));
  box-shadow: 0 0 0 0 transparent;
}
.svc-tab:hover{
  outline: 2px solid var(--brand1);
  background: color-mix(in oklab, var(--surface) 80%, var(--brand1));
}
.svc-tab.active{
  color: #fff;
  font-weight: 800;
  outline: 2px solid var(--brand1);
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand1) 20%, #0b1020), #0c1430);
  box-shadow: 0 8px 24px rgba(37, 99, 235, .25);
}
/* Stronger heading color for panel titles to match the luxury blue */
.svc-panel h3, .svc-card h4{
  color: var(--brand1);
  font-weight: 800;
}
/* Services tabs (detailed view on index too) */
.svc{display:grid;grid-template-columns:280px 1fr;gap:18px;margin-top:10px}
.svc-tabs{display:grid;gap:8px;align-content:start;position:sticky;top:88px;height:fit-content}
.svc-tab{padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left}
.svc-tab.active{outline:2px solid var(--brand1);background:color-mix(in oklab, var(--surface) 90%, var(--text))}
.svc-panels{display:grid;gap:14px}
.svc-panel{display:none;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.svc-panel.show{display:block}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.svc-card h4{margin:0 0 8px}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:12px}
.plan.highlight{outline:2px solid var(--brand1)}
.plan-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.badge{font-size:12px;padding:6px 8px;border-radius:999px;background:color-mix(in oklab, var(--text) 10%, transparent)}
.badge-hot{background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff}
.feat{margin:0;padding-left:18px;color:var(--text)}

/* Table */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);margin:10px 0}
.table{width:100%;border-collapse:collapse;min-width:680px}
.table th,.table td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left}
.table thead th{position:sticky;top:0;background:var(--surface)}

/* Contact & footer */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
input,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.footer{border-top:1px solid var(--line);padding:28px 0}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:10px}
.copy{color:var(--muted-2);font-size:14px}
.fab{position:fixed;right:18px;bottom:18px;height:52px;width:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff;box-shadow:var(--shadow)}

@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .kpi-band{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .cards,.svc-grid,.plans{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-links{position:fixed;top:64px;right:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;display:none;flex-direction:column;min-width:220px}
  .nav-links.open{display:flex}
}


/* === A11y & Contrast hardening === */
:root{
  --on-brand:#0b1117;
  --on-surface:#e5efff;
  --on-card:#f8fafc;
}
h1,h2,h3,h4,h5,h6,p,li,th,td,small,span{color:var(--text)}
.section-alt, .card, .contact-card, .svc-panel, .faq-item, .price, .plan{color:var(--text)}
.btn, .btn.primary, .btn-wa{color:var(--on-brand)}
.btn, .btn.primary{border-color:transparent}
.btn.primary{background:linear-gradient(90deg,var(--brandA,var(--brand1)),var(--brandB,var(--brand2)));color:#fff}
.btn{background:color-mix(in oklab, var(--text) 8%, transparent);color:var(--text);border:1px solid var(--line)}
a.nav-link, .nav-link{color:var(--text)}
.table th, .table td{color:var(--text)}
.post-card, .tile, .p-logo{background:var(--surface)}

/* Focus states */
:where(a,button,input,textarea,select,.nav-link,.btn){outline:none}
:where(a,button,input,textarea,select,.nav-link,.btn):focus-visible{outline:2px solid color-mix(in oklab, var(--brandA) 60%, var(--brandB));outline-offset:2px;border-radius:8px}

/* Ensure alternating backgrounds never match text color */
.section, .section-alt, .footer, .nav, body{color:var(--text)}

/* Badge/labels contrast */
.badge{color:var(--text)}

/* Light theme adjustments for readability */
:root[data-theme="light"] .btn{background:#0b1117;color:#fff;border-color:#0b1117}
:root[data-theme="light"] .btn.primary{background:linear-gradient(90deg,#0b1117,#2a2f36)}
:root[data-theme="light"] .faq-item{background:#ffffff}


/* === EcritPro v4+ Base Tokens & Components === */
[data-theme="light"]{
  --brand:#0f172a;
  --brand-accent:#2563eb;
  --brand-accent-2:#0ea5a8;
  --surface:#ffffff;
  --surface-2:#f7fbff;
  --surface-3:#e9f2ff;
  --text:#0b1320;
  --text-muted:#475569;
  --on-dark:#f8fafc;
}
/* Links & headings */
a{ color:var(--brand-accent); }
a:hover, a:focus{ text-decoration:underline; text-underline-offset:2px; }
h1,h2,h3,h4{ color:var(--text); }

/* Cards */
.grid-auto{
  display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:stretch;
}
.card{
  background:var(--surface);
  border:1px solid #e5efff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 4px 18px rgba(2,6,23,.06);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 10px 26px rgba(2,6,23,.12); border-color:var(--surface-3); }
.card h3{ margin:0 0 12px; font-size:1.15rem; }
.card p{ margin:0 0 10px; color:var(--text-muted); }
.card ul{ margin:8px 0 0 0; padding-left:0; list-style:none; }
.card li{ position:relative; padding-left:28px; margin:10px 0; }
.card li::before{
  content:""; position:absolute; left:0; top:.35em; width:18px; height:18px; border-radius:10px;
  background:linear-gradient(180deg,var(--brand-accent), var(--brand));
  box-shadow:0 2px 6px rgba(37,99,235,.35);
  mask: url('#check-dot') no-repeat center / 70% 70%;
}
.icon-bullet{ display:flex; gap:12px; align-items:flex-start; }
.icon-bullet svg{ flex:0 0 28px; width:28px; height:28px; }
.icon-bullet .content{ flex:1 1 auto; }

/* Section scaffold */
.section{ padding:64px 20px; background:var(--surface); }
.section.alt{ background:var(--surface-2); }
.section .container{ max-width:1100px; margin:0 auto; }
.section .eyebrow{ color:var(--brand-accent); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.section h2{ font-size:1.9rem; margin:10px 0 18px; }
.section .lead{ font-size:1.05rem; color:var(--text-muted); max-width:70ch; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* Buttons */
.button, .btn{ display:inline-flex; align-items:center; gap:10px; padding:.8rem 1.1rem; border-radius:10px; border:1px solid transparent; font-weight:600; text-decoration:none; }
.btn-primary{ background:var(--brand-accent); color:var(--on-dark); }
.btn-primary:hover{ filter:brightness(.95); }
.btn-ghost{ background:transparent; color:var(--brand-accent); border-color:var(--brand-accent); }
.btn-ghost:hover{ background:var(--surface-3); }

/* Contrast-only safety patch (keeps original bg if needed) */
*[style*="color:#fff"][style*="background:#fff"],
*[style*="color:#ffffff"][style*="background:#ffffff"]{ color:#0b1320 !important; }
*[style*="color:#000"][style*="background:#000"],
*[style*="color:#000000"][style*="background:#000000"]{ color:#f8fafc !important; }

/* Onboarding modal */
.onb.hidden{ display:none; }
.onb{ position:fixed; inset:0; z-index:50; }
.onb-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.55); backdrop-filter:saturate(120%) blur(6px); }
.onb-dialog{ position:relative; z-index:51; width:min(760px, calc(100% - 28px)); margin:6vh auto; background:#fff; color:#0b1320; border-radius:20px; box-shadow:0 20px 55px rgba(2,6,23,.25); padding:22px 22px 26px; }
.onb-close{ position:absolute; top:8px; right:12px; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer; }
.onb-progress{ position:relative; height:6px; background:#e9f2ff; border-radius:999px; overflow:hidden; margin:8px 0 18px; }
.onb-bar{ display:block; height:100%; background:linear-gradient(90deg, #2563eb, #0ea5a8); border-radius:999px; transition:width .3s ease; }
.onb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:14px 0; }
.onb-chip{ border:1px solid #dbeafe; background:#fff; border-radius:999px; padding:.6rem .9rem; cursor:pointer; }
.onb-chip.is-selected{ border-color:#2563eb; background:#e5efff; }
.onb-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.onb-step{ display:none; }
.onb-step--active{ display:block; }
.onb-formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.onb-formgrid input{ border:1px solid #e5efff; padding:.8rem .9rem; border-radius:10px; }
@media (max-width: 640px){ .onb-dialog{ margin:3vh auto; } .onb-formgrid{ grid-template-columns:1fr; } }

/* === Global Dark Theme (fond sombre) === */
.theme-dark{
  --surface:#0b1117;
  --surface-2:#0a0f16;
  --surface-3:#0f1621;
  --text:#f8fafc;
  --text-muted:rgba(248,250,252,.78);
}
.theme-dark, .theme-dark body{ background-color:var(--surface); color:var(--text); }
.theme-dark section, .theme-dark .section{ background:transparent; }
.theme-dark h1,.theme-dark h2,.theme-dark h3,.theme-dark h4{ color:var(--text); }
.theme-dark a{ color:#e9f2ff; }
.theme-dark a:hover{ text-decoration:underline; text-underline-offset:2px; }
.theme-dark .lead{ color:var(--text-muted); }
.theme-dark .eyebrow{ color:#93c5fd; }
.theme-dark .text-muted{ color:var(--text-muted) !important; }
.theme-dark .card{ background:#0f1621; border-color:#2a2f36; box-shadow:0 8px 28px rgba(0,0,0,.35); }
.theme-dark .card p{ color:var(--text-muted); }
.theme-dark .badge{ background:#1f2937; color:#e5e7eb; }
.theme-dark .btn-ghost{ color:#e9f2ff; border-color:#3b82f6; }
.theme-dark .btn-ghost:hover{ background:rgba(255,255,255,.06); }
.theme-dark .btn-primary{ color:#f8fafc; }
.theme-dark footer, .theme-dark .footer, .theme-dark header, .theme-dark nav{ color:var(--text); background:transparent; }
.theme-dark .onb-backdrop{ background:rgba(2,6,23,.65); }



/* === Premium underline hover === */
.nav-links .nav-link{
  position: relative;
  text-decoration: none;
}
.nav-links .nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:100%; height:2px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--brand1) 75%, var(--text) 25%), color-mix(in oklab, var(--brand2) 75%, var(--text) 25%));
  transform:scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  border-radius: 2px;
}
.nav-links .nav-link:hover::after,
.nav-links .nav-link:focus-visible::after{
  transform:scaleX(1);
}

/* Focus ring improvements */
a, button, input, textarea, select {
  outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand1) 40%, transparent);
  border-radius: 10px;
  transition: box-shadow .2s ease;
}

/* Ensure legibility on dark */
body{ color: var(--on-card, var(--text)); background: var(--bg); }
.section-title{ color: var(--on-surface, var(--text)); }
p, li{ color: color-mix(in oklab, var(--text) 92%, black 8%); }
.muted{ color: var(--muted-2); }

/* Buttons stronger contrast */
.btn{
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand1) 85%, black 15%), color-mix(in oklab, var(--brand2) 65%, black 35%));
  color: var(--on-brand);
  border: 1px solid color-mix(in oklab, var(--brand1) 45%, black 55%);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.btn:active{ transform: translateY(0); box-shadow: 0 4px 16px rgba(0,0,0,.28); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}

/* === EcritPro dynamic enhancements === */
.svc-tab{
  transition: all .3s ease;
}
.svc-tab:hover{
  transform: translateX(6px) scale(1.02);
  box-shadow: 0 6px 18px rgba(37,99,235,.2);
}
.reveal{
  opacity:0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in{
  opacity:1;
  transform: none;
}


/* === Dynamic enhancements === */
.menu a, .svc-tab{ transition: color .2s ease, background .25s ease, transform .2s ease; }
.svc-card, .plan, .feature, .kpi{ transition: transform .22s ease, box-shadow .22s ease; }
.lift{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.25); }

/* Reveal-on-scroll */
.reveal-base{ opacity:.001; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
.reveal-in{ opacity:1 !important; transform: translateY(0) !important; }

/* Premium underline placeholder span */
._u{ pointer-events:none; }

/* Scrollspy active link style */
.nav-links a.active{
  color: var(--brand1);
  font-weight:700;
  border-bottom:2px solid var(--brand1);
}


/* === Scrollspy underline effect === */
.nav-links .nav-link{
  position:relative;
  padding-bottom:4px;
  transition:color .3s ease;
}
.nav-links .nav-link.active::after{
  content:"";
  position:absolute;
  left:8px; right:8px; bottom:0;
  height:3px;
  border-radius:2px;
  background:var(--brand1);
  animation:underlineIn .4s ease forwards;
}
@keyframes underlineIn{
  from{transform:scaleX(0); opacity:0;}
  to{transform:scaleX(1); opacity:1;}
}


/* === Navigation active line & scrollspy === */
.nav-links{ position: relative; display:flex; gap:18px; align-items:center; }
.nav-link{ position: relative; padding:10px 4px; }
.active-line{
  position:absolute; bottom:0; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--brand1), color-mix(in oklab, var(--brand1) 40%, #fff));
  width:0; left:0; transition: left .35s ease, width .35s ease;
}
.nav-link.is-active{ color: var(--brand1); font-weight:700; }


/* === Active line (premium) for nav === */
.nav .menu{ position: relative; }
.active-line{
  position:absolute; bottom: 6px; height: 2px; border-radius: 2px;
  width: 0; left: 0; background: linear-gradient(90deg, var(--brand1), var(--brand2));
  transition: left .25s ease, width .25s ease;
}

/* Current section link highlight */
.menu a.is-current{ color: var(--brand1); font-weight: 700; }


/* === Ultra responsive tweaks === */
.grid-auto{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1024px){
  .svc-grid{ grid-template-columns: repeat(2, 1fr); }
  .grid-auto{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .svc{ grid-template-columns: 1fr; }
  .svc-tabs{ position: static; top:auto; }
  .svc-grid{ grid-template-columns: 1fr; }
  .plans{ grid-template-columns: 1fr; }
  .grid-auto{ grid-template-columns: 1fr; }
  .section{ padding: 56px 0; }
  .section-title{ font-size: 28px; }
}

/* === Pack composer highlight === */
.svc-tab.selected-pack{
  background: color-mix(in oklab, var(--brand1) 20%, var(--surface));
  outline: 2px solid var(--brand1);
  color: var(--brand1);
}


/* === Compact KPI band between sections === */
.section-compact{ padding: 32px 0; }
.kpi-compact{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; align-items:center; }
.kpi-compact .kpi-item{ 
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--line); border-radius: 14px; padding: 14px;
}
.kpi-compact .kpi-item strong{ font-size: 1.6rem; line-height:1; color: var(--brand1); }
.kpi-compact .kpi-item span{ font-size:.95rem; color: var(--text); }

@media (max-width: 1024px){
  .section-compact{ padding: 28px 0; }
  .kpi-compact{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 768px){
  .kpi-compact{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .section{ padding: 52px 0; } /* slightly tighter global */
  .section-compact{ padding: 24px 0; }
  .kpi-compact{ grid-template-columns: 1fr; }
  .kpi-compact .kpi-item strong{ font-size: 1.4rem; }
}

/* === Pourquoi Écrit Pro ? callout === */
.why-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
.why-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-card:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.2); }
.why-card h3{ margin:0 0 10px; font-size:1.2rem; color:var(--brand1); }
.why-card p{ font-size:.97rem; color:var(--muted); }

@media(max-width:1024px){
  .why-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
}
@media(max-width:640px){
  .why-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
  .why-card{ padding:18px; }
}

/* === Why icons (SVG gradient) === */
.why-icon{ width:48px; height:48px; display:block; margin:0 auto 10px auto; }
.why-card:hover .why-icon g{ filter: drop-shadow(0 4px 12px rgba(37,99,235,.28)); }
@media(max-width:640px){ .why-icon{ width:36px; height:36px; margin-bottom:8px; } }


/* === Force visible callout & remove gap === */
.no-reveal{ opacity:1 !important; transform:none !important; }
#droits-volets{ padding-bottom: 28px; }
#why-ecritpro.section-compact{ padding: 18px 0; }
#services.section.container{ padding-top: 36px; }

/* Emoji bullet list styling */
.why-bullets{
  list-style:none; padding:0; margin:0 auto; max-width: 980px; display:grid; gap:12px;
}
.why-bullets li{
  display:flex; align-items:flex-start; gap:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; line-height:1.45; box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.why-bullets li strong{ color: var(--brand1); }

@media (max-width: 640px){
  #droits-volets{ padding-bottom: 16px; }
  #why-ecritpro.section-compact{ padding: 14px 0; }
  #services.section.container{ padding-top: 28px; }
  .why-bullets li{ padding:12px; }
}


/* === Reduced gap between callout and services === */
#why-ecritpro.section-compact{ padding-bottom: 10px !important; }
#services.section.container{ padding-top: 20px !important; }

@media(max-width:640px){
  .why-item{ padding:18px; }
}

/* === Anonymous quote under Why callout === */
.quote-anon{
  position:relative;
  max-width: 980px;
  margin: 12px auto 0 auto;
  padding: 14px 18px 12px 18px;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--line) 70%, var(--brand1));
  border-radius: 14px;
  font-style: italic;
  color: var(--text);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
.quote-anon::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, #2563eb, #0ea5a8);
  border-top-left-radius: 14px; border-bottom-left-radius: 14px;
}
.quote-anon cite{
  display:block; margin-top:6px; text-align:right; font-style: normal; color: var(--muted-2);
}
@media(max-width:640px){
  .quote-anon{ margin-top: 10px; padding: 12px 14px 10px; }
}


/* === Ultra-tight spacing between Why and Services === */
#why-ecritpro.section-compact{ padding-bottom: 6px !important; }
#services.section.container{ padding-top: 12px !important; }


/* === Responsive navbar with burger === */
.burger{ display:none; position:relative; width:36px; height:28px; border:none; background:transparent; cursor:pointer; }
.burger span{ position:absolute; left:0; right:0; height:2px; background:var(--on-dark, #f8fafc); transition: transform .25s ease, top .25s ease, opacity .2s ease; }
.burger span:nth-child(1){ top:4px; }
.burger span:nth-child(2){ top:13px; }
.burger span:nth-child(3){ top:22px; }
.burger.is-open span:nth-child(1){ top:13px; transform:rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ top:13px; transform:rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu{ position:fixed; inset:0; display:none; background:rgba(0,0,0,.5); z-index:90; }
.mobile-menu .m-wrap{ position:absolute; top:0; right:0; width:min(86%, 360px); height:100%; background:var(--surface); color:var(--text); padding:18px; box-shadow:-8px 0 24px rgba(0,0,0,.35); overflow-y:auto; }
.mobile-menu .m-item{ display:block; padding:12px 10px; margin:6px 0; border-radius:12px; border:1px solid var(--line); text-decoration:none; color:inherit; }
.mobile-menu .m-item:hover{ background:color-mix(in oklab, var(--surface) 75%, var(--brand1)); border-color: color-mix(in oklab, var(--line) 40%, var(--brand1)); }

/* Hide categories (desktop nav links) on small screens */
@media(max-width: 900px){
  .nav .menu a{ display:none; }
  .burger{ display:inline-block; }
}

/* Prevent scroll when menu open */
.body-lock{ overflow:hidden; touch-action:none; }