/* =============================================================
   Multimodal la chaîne Management — Feuille de style maquettes SEO
   Alignée sur le design system de index.php (v0.82+)
   --blue #194F63 · --amber #F4D012 · --orange #E07820 · DM Sans
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --blue:#194F63; --blue-d:#103a4a; --navy:#16202b; --navy-2:#1d2a38;
  --amber:#F4D012; --orange:#E07820; --orange-d:#c5680f; --green:#2E7D32;
  --ink:#1c1c1a; --sub:#5a564f; --faint:#8b857b; --bg:#f1efe9; --card:#fff; --line:#e6e2d8;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
}
html{ scroll-behavior:smooth; }
body{ font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1140px; margin:0 auto; padding:0 22px; }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 22px; }
h1,h2,h3{ letter-spacing:-.5px; line-height:1.14; }
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); }

/* Header */
header.top{ position:sticky; top:0; z-index:30; background:rgba(22,32,43,.94); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.08); }
header.top .wrap{ display:flex; align-items:center; gap:14px; height:62px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; }
.brand .brand-mark{ width:38px; height:38px; flex-shrink:0; line-height:0; }
.brand .brand-mark img,.brand .brand-mark svg{ width:38px; height:38px; display:block; border-radius:9px; }
.brand b{ font-size:14.5px; font-weight:800; line-height:1.05; }
.brand small{ display:block; font-size:8px; font-weight:700; letter-spacing:2px; color:var(--amber); }
.top nav{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.top nav a.lnk{ color:#cdd6df; text-decoration:none; font-size:13.5px; font-weight:600; padding:8px 10px; border-radius:8px; }
.top nav a.lnk:hover{ color:#fff; background:rgba(255,255,255,.07); }
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:14px; font-weight:700; border-radius:10px; padding:11px 18px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:.15s; }
.btn-orange{ background:var(--orange); color:#fff; } .btn-orange:hover{ background:var(--orange-d); }
.btn-ghost-light{ color:#fff; border-color:rgba(255,255,255,.25); } .btn-ghost-light:hover{ background:rgba(255,255,255,.1); }
.btn-blue{ background:var(--blue); color:#fff; } .btn-blue:hover{ background:var(--blue-d); }
.btn-lg{ padding:14px 26px; font-size:15.5px; }

/* Hero */
.hero{ background:linear-gradient(160deg,var(--navy),#0f1822); color:#fff; padding:60px 0 70px; }
.hero .eyebrow{ color:var(--amber); }
.hero-badge{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#cdd6df; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); padding:6px 13px; border-radius:30px; margin-bottom:18px; }
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--amber); }
.hero-badge.urgent{ background:rgba(224,120,32,.16); border-color:rgba(224,120,32,.4); color:#ffd09a; }
.hero-badge.urgent .dot{ background:var(--orange); }
.hero h1{ font-size:42px; font-weight:800; margin-bottom:16px; max-width:760px; }
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero p.lead{ font-size:18px; color:#c6cfd8; max-width:620px; margin-bottom:26px; }
.hero-cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero-note{ font-size:13px; color:#9fb0bd; margin-top:16px; }
.hero-kw{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
.hero-kw span{ font-size:12px; color:#aebcc7; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:5px 11px; border-radius:8px; }

/* Sections */
section.s{ padding:64px 0; }
section.s.alt{ background:#fff; }
section.s.tint{ background:linear-gradient(180deg,#fff,var(--bg)); }
.s-head{ max-width:740px; margin-bottom:36px; }
.s-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.s-head h2{ font-size:30px; font-weight:800; margin:10px 0 12px; }
.s-head p{ font-size:16.5px; color:var(--sub); }
.lead-p{ font-size:17px; color:var(--sub); max-width:760px; margin-bottom:18px; }
.prose p{ font-size:16px; color:var(--ink); margin-bottom:16px; max-width:760px; }
.prose p.muted{ color:var(--sub); }
.prose h3{ font-size:20px; font-weight:800; margin:26px 0 10px; }

.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; align-items:center; }
.feat{ background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:22px; }
section.s.alt .feat{ background:#fbfaf7; }
.feat .ic{ width:42px; height:42px; border-radius:11px; background:color-mix(in srgb,var(--blue) 12%,#fff); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:13px; }
.feat .ic svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.feat .ic svg .dot{ fill:currentColor; stroke:none; }
.feat h3{ font-size:16.5px; font-weight:700; margin-bottom:7px; }
.feat p{ font-size:14px; color:var(--sub); }
.feat .kw{ color:var(--blue); font-weight:600; }

/* Figures (captures) */
figure.shot{ margin:30px 0; }
figure.shot img{ width:100%; border:1px solid var(--line); border-radius:14px; box-shadow:0 22px 50px rgba(16,32,43,.16); }
figure.shot figcaption{ font-size:13px; color:var(--faint); margin-top:11px; text-align:center; }
figure.shot figcaption b{ color:var(--sub); }

/* Split / list */
.split-ul{ list-style:none; }
.split-ul li{ position:relative; padding-left:28px; margin-bottom:11px; font-size:15.5px; color:var(--ink); }
.split-ul li::before{ content:"✓"; position:absolute; left:0; top:2px; width:19px; height:19px; border-radius:50%; background:var(--green); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* Comparatif */
.cmp{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.cmp th,.cmp td{ padding:14px 16px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line); }
.cmp thead th{ background:var(--navy); color:#fff; font-weight:700; font-size:14px; }
.cmp thead th.mm{ background:var(--blue); }
.cmp tbody tr:last-child td{ border-bottom:none; }
.cmp td.no{ color:var(--sub); } .cmp td.yes{ color:var(--ink); font-weight:600; }
.cmp td.yes::before{ content:"✓ "; color:var(--green); font-weight:800; }

/* Roadmap */
.roadmap{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rd-col{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:6px 6px 14px; overflow:hidden; }
.rd-col h3{ font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; padding:14px 16px 12px; display:flex; align-items:center; gap:9px; }
.rd-col h3 .d{ width:10px; height:10px; border-radius:50%; }
.rd-col.prod h3{ color:var(--green); } .rd-col.prod h3 .d{ background:var(--green); }
.rd-col.dev h3{ color:var(--orange); } .rd-col.dev h3 .d{ background:var(--orange); }
.rd-col.next h3{ color:var(--blue); } .rd-col.next h3 .d{ background:var(--blue); }
.rd-item{ background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:13px 14px; margin:0 10px 10px; }
.rd-item .t{ font-size:14.5px; font-weight:700; margin-bottom:3px; }
.rd-item .d{ font-size:13px; color:var(--sub); }
.rd-item .tag{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:2px 8px; border-radius:20px; margin-top:8px; }
.rd-col.prod .tag{ background:#e6f4ea; color:var(--green); }
.rd-col.dev .tag{ background:#fdf0e3; color:var(--orange-d); }
.rd-col.next .tag{ background:#e4eef2; color:var(--blue); }

/* Devise / quote */
.devise{ background:linear-gradient(160deg,#fff,#f7f5ef); border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:14px; padding:22px 26px; margin:26px 0; }
.devise p{ font-size:17px; font-weight:600; color:var(--blue); font-style:italic; }
.devise span{ display:block; font-size:13.5px; color:var(--sub); font-style:normal; margin-top:8px; }

/* Stat strip */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stats .c{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; text-align:center; }
.stats .c .n{ font-size:32px; font-weight:800; color:var(--blue); letter-spacing:-.6px; }
.stats .c .t{ font-size:13px; font-weight:600; color:var(--sub); margin-top:4px; }

/* FAQ */
.faq{ max-width:820px; margin:0 auto; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:4px 18px; margin-bottom:12px; }
.faq summary{ cursor:pointer; font-size:16px; font-weight:700; padding:14px 0; list-style:none; position:relative; padding-right:30px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:0; top:12px; font-size:22px; color:var(--orange); font-weight:400; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ font-size:14.5px; color:var(--sub); padding:0 0 16px; }

/* CTA beta */
.beta{ background:linear-gradient(160deg,var(--navy),#0f1822); color:#fff; padding:66px 0; }
.beta-inner{ max-width:680px; margin:0 auto; text-align:center; }
.beta-inner .eyebrow{ color:var(--amber); }
.beta-inner h2{ font-size:30px; font-weight:800; margin:10px 0 12px; }
.beta-inner p.lead{ font-size:16px; color:#c6cfd8; margin-bottom:24px; }
.beta-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.beta-reassure{ font-size:13px; color:#9fb0bd; margin-top:18px; }

/* Footer */
footer.ft{ background:#0f1822; color:#9fb0bd; padding:40px 0 30px; font-size:13.5px; }
footer.ft .cols{ display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between; margin-bottom:26px; }
footer.ft a{ color:#c6cfd8; text-decoration:none; display:block; margin-bottom:7px; }
footer.ft a:hover{ color:#fff; }
footer.ft h4{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:12px; }
footer.ft .legal{ border-top:1px solid rgba(255,255,255,.08); padding-top:18px; font-size:12.5px; color:#7d8b98; }

/* Breadcrumb */
.crumb{ font-size:13px; color:var(--faint); padding:14px 0 0; }
.crumb a{ color:var(--blue); text-decoration:none; }

/* Pages légales */
.legal-doc{ background:#fff; padding:34px 0 60px; }
.legal-wrap{ max-width:840px; margin:0 auto; padding:0 22px; }
.legal-doc .legal-meta{ font-size:13px; color:var(--faint); }
.legal-doc h1{ font-size:30px; font-weight:800; margin:6px 0 6px; }
.legal-doc .sub{ font-size:15.5px; color:var(--sub); margin-bottom:18px; }
.legal-doc h2{ font-size:19px; font-weight:800; color:var(--blue); margin:30px 0 8px; padding-top:6px; border-top:1px solid var(--line); }
.legal-doc h3{ font-size:16px; font-weight:700; margin:18px 0 6px; }
.legal-doc p{ font-size:15px; color:var(--ink); margin-bottom:12px; }
.legal-doc ul{ margin:0 0 14px 20px; } .legal-doc li{ font-size:15px; margin-bottom:6px; }
.legal-doc table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:13.5px; }
.legal-doc th,.legal-doc td{ border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top; }
.legal-doc thead th{ background:var(--bg); font-weight:700; }
.legal-banner{ background:#16202b; color:#ffd09a; border-radius:10px; padding:12px 16px; font-size:13.5px; margin-bottom:22px; }
.legal-banner b{ color:#fff; }
.legal-flag{ background:#fdf0e3; border:1px solid #f0c896; border-left:4px solid var(--orange); border-radius:10px; padding:14px 16px; margin:18px 0; font-size:14px; color:#7a4a12; }
.legal-flag b{ color:var(--orange-d); }
.legal-doc .todo{ background:#fff6d8; padding:0 4px; border-radius:3px; color:#7a5a00; font-style:italic; }

/* Responsive */
@media(max-width:900px){
  .grid3,.roadmap,.stats{ grid-template-columns:1fr; }
  .grid2{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; }
  .hero p.lead{ font-size:16px; }
  .s-head h2{ font-size:25px; }
  .top nav a.lnk{ display:none; }
  .cmp thead th{ font-size:12.5px; } .cmp th,.cmp td{ padding:11px; font-size:13px; }
}