/* =========================================================================
   FasterMessage — Feuille de style commune
   Charte v2.0 · Couleur de marque #18457E · Ratio 60/30/10
   Typographies : Sora (display) · Hanken Grotesk (body) · Geist Mono (mono)
   ========================================================================= */

:root{
  /* Navy (couleur de marque) */
  --navy-50:#EFF4FA; --navy-100:#D7E4F4; --navy-200:#A9C9EF; --navy-300:#6DA2E3;
  --navy-400:#266DC5; --navy-500:#18457E; --navy-600:#133865; --navy-700:#0F2E55;
  --navy-800:#0B203A; --navy-900:#08182B;
  /* Accent (bleu vif) */
  --accent-50:#EFF4FB; --accent-100:#D6E3F5; --accent-200:#A1C6F7; --accent-300:#71AAF4;
  --accent-400:#4C93F0; --accent-500:#2F80ED; --accent-600:#126ADE; --accent-700:#0F5ABD;
  --accent-800:#0C4897; --accent-900:#093671;
  /* Neutres (teintés bleu) */
  --gray-0:#FFFFFF; --gray-50:#F7F8FA; --gray-100:#F1F2F4; --gray-200:#E2E5E9; --gray-300:#CED3D9;
  --gray-400:#9EA7B3; --gray-500:#707D8F; --gray-600:#5A6472; --gray-700:#434B56;
  --gray-800:#2D3239; --gray-900:#1B1E22; --gray-950:#101114;
  /* Sémantiques */
  --success:#2E9E66; --success-700:#1F7A4D; --success-50:#E8F6EE;
  --error:#DC2828;   --error-700:#A31515;   --error-50:#FCEBEB;
  --warning:#F59F0A; --warning-700:#B45309; --warning-50:#FEF4E2;
  --info:#2F80ED;    --info-700:#0F5ABD;    --info-50:#EAF2FE;
  /* Surfaces (clair) */
  --bg:var(--gray-50); --surface:#FFFFFF; --surface-2:var(--gray-100);
  --border:var(--gray-200); --border-strong:var(--gray-300);
  --text:var(--navy-700); --text-body:var(--gray-700); --text-muted:var(--gray-500);
  /* Typographie */
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --body:"Hanken Grotesk",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"Geist Mono","SF Mono",Menlo,monospace;
  /* Rayons */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-full:999px;
  /* Élévations (ombres teintées navy) */
  --sh-1:0 1px 2px rgba(8,24,43,.06), 0 1px 1px rgba(8,24,43,.04);
  --sh-2:0 2px 6px rgba(8,24,43,.08), 0 1px 2px rgba(8,24,43,.05);
  --sh-3:0 8px 24px rgba(8,24,43,.10), 0 2px 6px rgba(8,24,43,.06);
  --sh-4:0 20px 50px rgba(8,24,43,.16), 0 6px 16px rgba(8,24,43,.08);
  /* Conteneur */
  --maxw:1200px;
  --header-h:68px;
}

/* ===== Reset / base ===== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px);}
body{
  margin:0; background:var(--bg); color:var(--text-body);
  font-family:var(--body); font-size:16px; line-height:1.6; font-weight:450;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display); color:var(--text); margin:0; line-height:1.15; font-weight:600;}
p{margin:0 0 1em;}
a{color:var(--accent-700); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
code,.mono{font-family:var(--mono); font-size:.86em;}
ul{margin:0; padding:0;}
:focus-visible{outline:3px solid var(--accent-500); outline-offset:2px; border-radius:3px;}

/* Lien d'évitement */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--navy-700); color:#fff; padding:10px 16px; border-radius:0 0 var(--r-md) 0;
  font-size:14px; font-weight:600;
}
.skip-link:focus{left:0; text-decoration:none;}

/* ===== Layout helpers ===== */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.logo-mark{display:block;}
.section{padding:80px 0; border-top:1px solid var(--border);}
.section.tight{padding:56px 0;}
.center{text-align:center;}
.muted{color:var(--text-muted);}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-600); margin:0 0 14px;
}
.eyebrow.on-dark{color:var(--accent-300);}
.eyebrow .glyph{display:inline-flex; gap:2px; align-items:flex-end; height:13px;}
.eyebrow .glyph i{width:3px; background:currentColor; border-radius:2px;}
.eyebrow .glyph i:nth-child(1){height:5px;}
.eyebrow .glyph i:nth-child(2){height:9px;}
.eyebrow .glyph i:nth-child(3){height:13px;}

.section h1,.section h2{font-size:clamp(28px,4vw,40px); letter-spacing:-.02em; margin-bottom:16px;}
.section h3.sub{font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--navy-600); margin:40px 0 18px; font-weight:600;}
.lead{font-size:18px; color:var(--text-body); max-width:64ch; margin:0 0 8px;}
.lead.center{margin-left:auto; margin-right:auto;}
.note{
  font-size:13.5px; color:var(--text-muted); border-left:3px solid var(--accent-200);
  padding:8px 0 8px 14px; background:var(--accent-50); border-radius:0 var(--r-sm) var(--r-sm) 0; margin:20px 0;
}
.placeholder{
  font-family:var(--mono); font-size:11px; color:var(--warning-700);
  background:var(--warning-50); border:1px dashed var(--warning); border-radius:var(--r-sm);
  padding:1px 6px; display:inline-block;
}

/* ===== Grids ===== */
.grid{display:grid; gap:16px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g5{grid-template-columns:repeat(5,1fr);}

/* ===== Cards ===== */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px;}
.card.hover{transition:transform .15s, box-shadow .15s, border-color .15s;}
.card.hover:hover{transform:translateY(-3px); box-shadow:var(--sh-3); border-color:var(--border-strong);}
a.card{color:inherit;}
a.card:hover{text-decoration:none;}
.card .ic{
  width:42px; height:42px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--accent-50); color:var(--accent-600); margin-bottom:16px;
}
.card .ic svg{width:22px; height:22px; stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.card h3, .card h4{color:var(--navy-800); margin-bottom:8px;}
.card h3{font-size:19px;}
.card h4{font-size:16px;}
.card p:last-child{margin-bottom:0;}
.card .more{font-size:13.5px; font-weight:600; color:var(--accent-700); display:inline-flex; gap:6px; align-items:center; margin-top:12px;}

/* ===== Buttons ===== */
.btn{
  font-family:var(--body); font-weight:600; font-size:14.5px; line-height:1; border-radius:var(--r-md);
  padding:12px 20px; border:1.5px solid transparent; cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; white-space:nowrap;
}
.btn:hover{text-decoration:none;}
.btn svg{width:17px; height:17px;}
.btn-primary{background:var(--navy-500); color:#fff;}
.btn-primary:hover{background:var(--navy-600); color:#fff;}
.btn-accent{background:var(--accent-600); color:#fff;}
.btn-accent:hover{background:var(--accent-700); color:#fff;}
.btn-secondary{background:#fff; color:var(--navy-600); border-color:var(--border-strong);}
.btn-secondary:hover{background:var(--gray-50); border-color:var(--gray-400); color:var(--navy-700);}
.btn-ghost{background:transparent; color:var(--accent-700);}
.btn-ghost:hover{background:var(--accent-50);}
.btn-ghost.on-dark{color:#fff;}
.btn-ghost.on-dark:hover{background:rgba(255,255,255,.1);}
.btn-lg{padding:14px 26px; font-size:15.5px;}
.btn:disabled,.btn.is-disabled{background:var(--gray-200); color:var(--gray-400); border-color:transparent; cursor:not-allowed;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

/* ===== Badges / pills ===== */
.pill{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; padding:3px 9px; border-radius:var(--r-full);
  background:var(--gray-100); color:var(--gray-600); display:inline-flex; align-items:center; gap:5px;
}
.pill.success{background:var(--success-50); color:var(--success-700);}
.pill.error{background:var(--error-50); color:var(--error-700);}
.pill.warning{background:var(--warning-50); color:var(--warning-700);}
.pill.accent{background:var(--accent-50); color:var(--accent-700);}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

/* ===== Avatars ===== */
.avatar{
  width:40px; height:40px; border-radius:var(--r-full); display:grid; place-items:center;
  color:#fff; font-family:var(--display); font-weight:600; font-size:15px; flex:none;
}

/* =========================================================================
   HEADER (sticky)
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border);
}
.site-header .wrap{display:flex; align-items:center; gap:24px; height:var(--header-h);}
.brand{display:flex; align-items:center; gap:10px; flex:none;}
.brand:hover{text-decoration:none;}
.brand .logo-mark{width:22px; color:var(--navy-500);}
.brand b{font-family:var(--display); font-size:17px; color:var(--navy-900); letter-spacing:-.02em; font-weight:700;}
.main-nav{display:flex; align-items:center; gap:4px; margin-left:8px;}
.main-nav a{
  color:var(--text-body); font-size:14.5px; font-weight:500; padding:8px 12px; border-radius:var(--r-md);
}
.main-nav a:hover{background:var(--gray-100); color:var(--navy-700); text-decoration:none;}
.main-nav a.active{color:var(--accent-700); background:var(--accent-50);}
.header-actions{display:flex; align-items:center; gap:10px; margin-left:auto;}
.burger{
  display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--border-strong);
  border-radius:var(--r-md); background:#fff; cursor:pointer; align-items:center; justify-content:center; color:var(--navy-700);
}
.burger svg{width:22px; height:22px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round;}
.burger .close-ic{display:none;}
body.nav-open .burger .open-ic{display:none;}
body.nav-open .burger .close-ic{display:block;}

@media (max-width:960px){
  .main-nav{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--border); padding:14px 24px 22px; margin:0;
    box-shadow:var(--sh-3); transform:translateY(-130%); transition:transform .25s ease; max-height:calc(100vh - var(--header-h)); overflow:auto;
  }
  body.nav-open .main-nav{transform:translateY(0);}
  .main-nav a{padding:12px 12px; font-size:16px;}
  .header-actions{position:fixed; inset:auto 0 0 0; display:none;}
  .header-actions .btn{display:none;}
  .header-actions .lang{margin-left:auto;}
  .burger{display:inline-flex;}
  .main-nav .mobile-cta{display:flex; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border);}
  .main-nav .mobile-cta .btn{flex:1; justify-content:center;}
}
@media (min-width:961px){
  .main-nav .mobile-cta{display:none;}
}

/* Language toggle */
.lang{display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--r-full); overflow:hidden; font-family:var(--mono); font-size:11px;}
.lang button{background:#fff; border:none; padding:5px 10px; cursor:pointer; color:var(--gray-500); font-family:inherit; font-size:inherit;}
.lang button.active{background:var(--navy-500); color:#fff;}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(47,128,237,.28), transparent 60%),
    linear-gradient(160deg, var(--navy-700), var(--navy-900) 70%);
  color:#fff; position:relative; overflow:hidden;
}
.hero .wrap{position:relative; z-index:2; padding-top:84px; padding-bottom:80px;}
.hero.compact .wrap{padding-top:60px; padding-bottom:56px;}
.hero h1{font-size:clamp(40px,6.5vw,72px); letter-spacing:-.03em; color:#fff; font-weight:700; max-width:16ch;}
.hero h1 .lite{color:var(--accent-200);}
.hero.compact h1{font-size:clamp(34px,5vw,52px);}
.hero p.tag{font-size:clamp(17px,2.2vw,21px); color:var(--navy-100); max-width:60ch; margin:20px 0 0; font-weight:450;}
.hero .btn-row{margin-top:36px;}
.hero-meta{display:flex; gap:32px; margin-top:44px; flex-wrap:wrap;}
.hero-meta div{font-size:13px; color:var(--navy-200);}
.hero-meta b{display:block; font-family:var(--display); color:#fff; font-size:15px; font-weight:500; margin-bottom:2px;}

/* Illustrations (SVG sur-mesure) */
.hero.has-ill .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.hero-ill{display:flex; justify-content:center; position:relative; z-index:2;}
.hero-ill img{width:100%; max-width:500px; height:auto; filter:drop-shadow(0 24px 48px rgba(8,24,43,.35));}
.media-split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.media-split.rev .ill{order:-1;}
.ill{display:flex; justify-content:center;}
.ill img{width:100%; max-width:520px; height:auto;}
.sector-ill{width:60px; height:60px; margin-bottom:14px; display:block;}
@media (max-width:860px){
  .hero.has-ill .wrap{grid-template-columns:1fr; gap:28px;}
  .hero-ill{order:2;} .hero-ill img{max-width:360px;}
  .media-split{grid-template-columns:1fr; gap:28px;}
  .media-split.rev .ill{order:0;}
}

/* Equalizer décor */
.eq{position:absolute; right:6%; bottom:0; top:0; display:flex; align-items:flex-end; gap:14px; z-index:1; opacity:.5;}
.eq i{width:30px; background:linear-gradient(180deg, var(--accent-400), rgba(47,128,237,0)); border-radius:8px 8px 0 0; transform-origin:bottom;}
.eq i:nth-child(1){height:42%; animation:bar 2.6s ease-in-out infinite;}
.eq i:nth-child(2){height:66%; animation:bar 2.6s ease-in-out .25s infinite;}
.eq i:nth-child(3){height:90%; animation:bar 2.6s ease-in-out .5s infinite;}
@keyframes bar{0%,100%{transform:scaleY(.7);}50%{transform:scaleY(1);}}

/* ===== Bande de confiance ===== */
.trust{background:var(--surface);}
.trust .sectors{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.trust .sectors .pill{font-size:12px; padding:7px 14px; background:var(--navy-50); color:var(--navy-700);}

/* ===== Feature row (icône + texte) ===== */
.feature{display:flex; gap:18px; align-items:flex-start;}
.feature .ic{
  width:46px; height:46px; flex:none; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--accent-50); color:var(--accent-600);
}
.feature .ic svg{width:24px; height:24px; stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.feature h3{font-size:19px; color:var(--navy-800); margin-bottom:6px;}
.feature p:last-child{margin-bottom:0;}

/* ===== Bande marine (stats / CTA) ===== */
.band-navy{
  background:linear-gradient(160deg, var(--navy-600), var(--navy-900)); color:#fff; border-top:none;
}
.band-navy h2{color:#fff;}
.band-navy .lead{color:var(--navy-100);}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.stat .n{font-family:var(--display); font-size:clamp(32px,4vw,48px); font-weight:700; color:#fff; letter-spacing:-.02em; line-height:1;}
.stat .l{font-size:13.5px; color:var(--navy-200); margin-top:8px;}

.band-accent{background:linear-gradient(135deg, var(--accent-600), var(--accent-800)); color:#fff; border-top:none;}
.band-accent h2{color:#fff;}
.band-accent p{color:var(--accent-50);}
.cta-block{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.cta-block .btn-secondary{background:#fff;}

/* ===== Chat mock (illustrations canaux) ===== */
.chat{max-width:380px; border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3); background:#fff;}
.chat .top{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--gray-50);}
.chat .top .nm{font-family:var(--display); font-weight:600; font-size:14px; color:var(--navy-900);}
.chat .top .pres{font-size:11px; color:var(--success);}
.chat .body{padding:16px; display:flex; flex-direction:column; gap:10px; background:#fff;}
.bubble{max-width:78%; padding:9px 13px; border-radius:16px; font-size:13.5px; line-height:1.45;}
.bubble.recv{align-self:flex-start; background:var(--gray-100); color:var(--navy-900); border-bottom-left-radius:5px;}
.bubble.sent{align-self:flex-end; background:var(--navy-500); color:#fff; border-bottom-right-radius:5px;}
.bubble .time{display:block; font-family:var(--mono); font-size:10px; margin-top:4px; opacity:.7;}
.bubble.sent .time{color:var(--navy-100); text-align:right;}
.bubble.recv .time{color:var(--gray-500);}

/* ===== Code block (développeurs) ===== */
.code-block{
  background:var(--navy-900); color:var(--navy-100); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-3); font-family:var(--mono); font-size:13px; line-height:1.7;
}
.code-block .cb-bar{display:flex; align-items:center; gap:8px; padding:10px 16px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08);}
.code-block .cb-bar .pill{background:rgba(255,255,255,.08); color:var(--navy-100);}
.code-block .cb-dot{width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.18);}
.code-block pre{margin:0; padding:18px 20px; overflow-x:auto;}
.code-block .tok-key{color:var(--accent-300);}
.code-block .tok-str{color:#9FE6B8;}
.code-block .tok-num{color:#F6C177;}
.code-block .tok-com{color:var(--gray-500);}

/* ===== Steps numérotés ===== */
.steps{counter-reset:step; display:grid; gap:18px;}
.step{display:flex; gap:18px; align-items:flex-start;}
.step .num{
  flex:none; width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--navy-500); color:#fff; font-family:var(--mono); font-weight:500; font-size:15px;
}
.step h3{font-size:18px; color:var(--navy-800); margin-bottom:4px;}

/* ===== Pricing ===== */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start;}
.plan{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px; display:flex; flex-direction:column;}
.plan.featured{border:2px solid var(--accent-500); box-shadow:var(--sh-3); position:relative;}
.plan.featured .tag-top{position:absolute; top:-12px; left:28px; background:var(--accent-600); color:#fff; font-family:var(--mono); font-size:10.5px; padding:3px 10px; border-radius:var(--r-full);}
.plan h3{font-size:20px; color:var(--navy-800);}
.plan .price{font-family:var(--display); font-size:38px; font-weight:700; color:var(--navy-900); margin:14px 0 2px; letter-spacing:-.02em;}
.plan .price small{font-size:14px; font-weight:400; color:var(--text-muted);}
.plan .desc{font-size:13.5px; color:var(--text-muted); min-height:42px;}
.plan ul.feats{list-style:none; margin:18px 0 22px; display:flex; flex-direction:column; gap:11px;}
.plan ul.feats li{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text-body);}
.plan ul.feats li svg{flex:none; width:18px; height:18px; stroke:var(--success); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; margin-top:2px;}
.plan .btn{justify-content:center; margin-top:auto;}

/* ===== Comparison / feature table ===== */
.ftable{width:100%; border-collapse:collapse; font-size:14px;}
.ftable th,.ftable td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--border);}
.ftable thead th{font-family:var(--display); font-size:13px; color:var(--navy-700); background:var(--gray-50);}
.ftable td.c, .ftable th.c{text-align:center;}
.ftable .yes{color:var(--success-700); font-weight:600;}
.ftable .no{color:var(--gray-400);}

/* ===== FAQ (accordéon) ===== */
.faq{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:#fff;}
.faq details{border-bottom:1px solid var(--border);}
.faq details:last-child{border-bottom:none;}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 20px; font-family:var(--display); font-weight:600;
  font-size:16px; color:var(--navy-800); display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .chev{flex:none; width:20px; height:20px; stroke:var(--accent-600); stroke-width:2; fill:none; transition:transform .2s;}
.faq details[open] summary .chev{transform:rotate(180deg);}
.faq .answer{padding:0 20px 18px; font-size:14.5px; color:var(--text-body);}

/* ===== Forms ===== */
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:600; color:var(--navy-700); margin-bottom:6px;}
.field label .req{color:var(--error);}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--body); font-size:14.5px; padding:11px 14px;
  border:1.5px solid var(--border-strong); border-radius:var(--r-md); background:#fff; color:var(--navy-900);
}
.field textarea{min-height:120px; resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--gray-400);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent-500); box-shadow:0 0 0 3px var(--accent-100);}
.field.err input,.field.err select,.field.err textarea{border-color:var(--error); box-shadow:0 0 0 3px var(--error-50);}
.field .hint{font-size:12px; color:var(--error-700); margin-top:6px; display:none; gap:6px; align-items:center;}
.field.err .hint{display:flex;}
.field .hint svg{width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none;}
.checks{display:flex; flex-wrap:wrap; gap:10px;}
.check{
  display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--border-strong);
  border-radius:var(--r-full); padding:8px 14px; font-size:13.5px; cursor:pointer; color:var(--navy-700); background:#fff;
}
.check input{width:auto; margin:0;}
.check:has(input:checked){border-color:var(--accent-500); background:var(--accent-50); color:var(--accent-700);}

/* Champ mot de passe avec bascule afficher / masquer */
.pw{position:relative;}
.pw input{padding-right:46px;}
.pw .pw-toggle{position:absolute; right:6px; top:6px; height:calc(100% - 12px); width:38px; display:grid; place-items:center; background:none; border:none; padding:0; cursor:pointer; color:var(--gray-500); border-radius:var(--r-sm);}
.pw .pw-toggle:hover{color:var(--navy-600);}
.pw .pw-toggle svg{width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none;}
.pw .pw-toggle .eye-off{display:none;}
.pw .pw-toggle.on .eye{display:none;}
.pw .pw-toggle.on .eye-off{display:block;}

/* Carte d'authentification (connexion / inscription) */
.auth{max-width:440px; margin:0 auto;}
.auth .field input{font-size:15px;}
.auth-sep{display:flex; align-items:center; gap:14px; margin:26px 0; color:var(--gray-400); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em;}
.auth-sep::before,.auth-sep::after{content:""; flex:1; height:1px; background:var(--border);}
.auth-alt{text-align:center; font-size:14px; color:var(--text-body); margin-top:24px;}
.field-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
.field-row a{font-size:13px;}

/* Vérification KYC — assistant multi-étapes */
[hidden]{display:none !important;}
.kyc{max-width:720px; margin:0 auto;}
.kyc-steps{display:flex; list-style:none; gap:4px; margin:0 0 36px; padding:0; counter-reset:step;}
.kyc-steps li{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; font-size:11.5px; line-height:1.3; color:var(--gray-500); text-align:center;}
.kyc-steps li::before{counter-increment:step; content:counter(step); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#fff; border:2px solid var(--border-strong); color:var(--gray-500); font-family:var(--display); font-weight:600; font-size:14px; position:relative; z-index:1;}
.kyc-steps li::after{content:""; position:absolute; top:16px; right:50%; width:100%; height:2px; background:var(--border); z-index:0;}
.kyc-steps li:first-child::after{display:none;}
.kyc-steps li.active{color:var(--navy-800); font-weight:600;}
.kyc-steps li.active::before{border-color:var(--accent-500); color:var(--accent-700); box-shadow:0 0 0 4px var(--accent-100);}
.kyc-steps li.done::before{content:"\2713"; background:var(--accent-600); border-color:var(--accent-600); color:#fff;}
.kyc-steps li.done::after{background:var(--accent-500);}
.kyc-step h2{font-size:22px; margin-bottom:6px; color:var(--navy-900);}
.kyc-step .step-lead{color:var(--text-body); font-size:14.5px; margin-bottom:22px;}
.kyc-fieldset{border:none; padding:0; margin:0;}
.kyc-nav{display:flex; justify-content:space-between; gap:12px; margin-top:28px; padding-top:22px; border-top:1px solid var(--border);}
.kyc-radios{display:flex; gap:10px; flex-wrap:wrap;}
.field input[type="file"]{padding:9px 12px; font-size:13.5px; cursor:pointer; background:var(--gray-50);}
.field input[type="file"]::file-selector-button{margin-right:12px; border:1.5px solid var(--border-strong); background:#fff; padding:7px 12px; border-radius:var(--r-sm); font-family:var(--body); font-size:13px; color:var(--navy-700); cursor:pointer;}
.field input[type="file"]::file-selector-button:hover{background:var(--gray-50); border-color:var(--gray-400);}
.field .file-help{font-size:12px; color:var(--gray-500); margin-top:6px; display:block;}
@media(max-width:640px){ .kyc-steps li span{display:none;} .kyc-steps{gap:0;} }
.form-success{
  display:none; background:var(--success-50); border:1px solid var(--success); color:var(--success-700);
  border-radius:var(--r-lg); padding:18px 20px; font-weight:500; align-items:center; gap:12px;
}
.form-success.show{display:flex;}
.form-success svg{flex:none; width:24px; height:24px; stroke:var(--success); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round;}

/* ===== Split layout (contact, à propos) ===== */
.split{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:start;}
.contact-aside .ci{display:flex; gap:14px; align-items:flex-start; margin-bottom:20px;}
.contact-aside .ci .ic{width:40px; height:40px; flex:none; border-radius:var(--r-md); background:var(--accent-50); color:var(--accent-600); display:grid; place-items:center;}
.contact-aside .ci .ic svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.contact-aside .ci b{display:block; color:var(--navy-800); font-family:var(--display); font-size:15px;}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--navy-900); color:var(--navy-200); padding:56px 0 28px;}
.site-footer a{color:var(--navy-200);}
.site-footer a:hover{color:#fff;}
.footer-top{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand .fb{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.footer-brand .logo-mark{width:26px; color:#fff;}
.footer-brand .fb b{font-family:var(--display); color:#fff; font-size:17px;}
.footer-brand p{font-size:13.5px; color:var(--navy-300); max-width:30ch;}
.footer-col h4{font-family:var(--display); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#fff; margin-bottom:14px;}
.footer-col a{display:block; font-size:14px; margin-bottom:9px; text-decoration:none;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:24px;}
.footer-bottom small{font-family:var(--mono); font-size:12px; color:var(--navy-300);}
.footer-social{display:flex; gap:12px;}
.footer-social a{width:36px; height:36px; border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); display:grid; place-items:center;}
.footer-social svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none;}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1024px){
  .split{grid-template-columns:1fr; gap:32px;}
  .footer-top{grid-template-columns:1fr 1fr 1fr; }
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:860px){
  .section{padding:60px 0;}
  .g4,.g5{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}
  .price-grid{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
  .eq{display:none;}
}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .cta-block{flex-direction:column; align-items:flex-start;}
  .hero .btn-row .btn{flex:1; justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* =========================================================================
   BLOG
   ========================================================================= */
.post-card{display:flex; flex-direction:column; overflow:hidden; padding:0;}
.post-card .thumb{
  height:160px; position:relative; display:flex; align-items:flex-end; padding:16px; overflow:hidden;
}
.post-card .thumb .logo-mark{position:absolute; right:-10px; bottom:-14px; width:96px; opacity:.18; color:#fff;}
.post-card .thumb.t1{background:linear-gradient(160deg,var(--navy-500),var(--navy-800));}
.post-card .thumb.t2{background:linear-gradient(160deg,var(--accent-500),var(--navy-700));}
.post-card .thumb.t3{background:linear-gradient(160deg,var(--navy-400),var(--navy-900));}
.post-card .thumb.t4{background:linear-gradient(160deg,var(--accent-600),var(--accent-900));}
.post-card .thumb .cat{position:relative; z-index:1; background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px);}
.post-card .pc-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1;}
.post-card h3{font-size:19px; color:var(--navy-800); margin-bottom:8px; line-height:1.25;}
.post-card .excerpt{color:var(--text-muted); font-size:14.5px; margin-bottom:16px; flex:1;}
.post-meta{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px; color:var(--gray-500);}
.post-meta .sep{width:3px; height:3px; border-radius:50%; background:var(--gray-400);}
.blog-featured{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0; border:1px solid var(--border);
  border-radius:var(--r-xl); overflow:hidden; background:var(--surface); box-shadow:var(--sh-1);
}
.blog-featured .thumb{min-height:300px; position:relative; display:flex; align-items:flex-end; padding:24px;
  background:radial-gradient(600px 300px at 80% 0%, rgba(47,128,237,.4),transparent 60%),linear-gradient(160deg,var(--navy-600),var(--navy-900));}
.blog-featured .thumb .logo-mark{position:absolute; right:20px; top:24px; width:46px; color:#fff; opacity:.7;}
.blog-featured .fc-body{padding:36px; display:flex; flex-direction:column; justify-content:center;}
.blog-featured h2{font-size:clamp(24px,3vw,32px); margin-bottom:14px;}

/* Catégories / filtres */
.cat-bar{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
.cat-bar a{
  font-size:13.5px; font-weight:500; padding:7px 15px; border-radius:var(--r-full);
  border:1px solid var(--border-strong); color:var(--navy-700); background:#fff;
}
.cat-bar a:hover{background:var(--gray-50); text-decoration:none;}
.cat-bar a.active{background:var(--navy-500); color:#fff; border-color:var(--navy-500);}

/* Article (contenu) */
.article{max-width:740px; margin:0 auto;}
.article .post-meta{margin-bottom:14px;}
.article h1{font-size:clamp(30px,4.5vw,46px); letter-spacing:-.02em; color:var(--navy-900); margin-bottom:18px; line-height:1.12;}
.article .lead{font-size:20px; color:var(--text-body); margin-bottom:8px;}
.article-body{font-size:17px; line-height:1.75; color:var(--gray-800); margin-top:32px;}
.article-body h2{font-size:26px; margin:40px 0 14px; color:var(--navy-800);}
.article-body h3{font-size:20px; margin:30px 0 10px; color:var(--navy-800);}
.article-body p{margin:0 0 18px;}
.article-body ul,.article-body ol{margin:0 0 18px; padding-left:24px;}
.article-body li{margin-bottom:8px;}
.article-body blockquote{
  margin:24px 0; padding:16px 22px; border-left:4px solid var(--accent-500);
  background:var(--accent-50); border-radius:0 var(--r-md) var(--r-md) 0; color:var(--navy-700); font-size:18px;
}
.article-body code{background:var(--gray-100); padding:2px 6px; border-radius:var(--r-sm); color:var(--accent-800);}
.article-body img{border-radius:var(--r-lg); margin:24px 0;}
.author-box{display:flex; gap:14px; align-items:center; margin-top:40px; padding-top:28px; border-top:1px solid var(--border);}
.author-box .avatar{width:52px; height:52px; font-size:18px;}
.author-box b{font-family:var(--display); color:var(--navy-900); display:block;}

/* =========================================================================
   DOCUMENTATION API
   ========================================================================= */
.docs-shell{display:flex; gap:0; align-items:flex-start; max-width:1280px; margin:0 auto;}
.docs-nav{
  position:sticky; top:var(--header-h); align-self:flex-start;
  width:256px; flex:0 0 256px; height:calc(100vh - var(--header-h));
  overflow-y:auto; padding:32px 16px 32px 24px; border-right:1px solid var(--border);
}
.docs-nav .dn-group{margin-bottom:22px;}
.docs-nav .dn-group > span{
  display:block; font-family:var(--display); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--navy-600); margin-bottom:8px; font-weight:600;
}
.docs-nav a{display:block; padding:6px 12px; border-radius:var(--r-md); font-size:14px; color:var(--text-body); margin-bottom:1px;}
.docs-nav a:hover{background:var(--gray-100); color:var(--navy-700); text-decoration:none;}
.docs-nav a.active{background:var(--accent-50); color:var(--accent-700);}
.docs-main{flex:1 1 auto; min-width:0; padding:40px 48px 80px;}
.docs-main h1{font-size:clamp(30px,4vw,42px); letter-spacing:-.02em; color:var(--navy-900); margin-bottom:14px;}
.docs-section{padding:36px 0; border-top:1px solid var(--border);}
.docs-section:first-of-type{border-top:none; padding-top:8px;}
.docs-section h2{font-size:26px; color:var(--navy-800); margin-bottom:14px; scroll-margin-top:calc(var(--header-h) + 20px);}
.docs-section h3{font-size:18px; color:var(--navy-800); margin:26px 0 10px;}
.docs-section p{max-width:68ch;}
.docs-section ul{padding-left:22px; max-width:68ch;}
.docs-section li{margin-bottom:8px;}
.docs-section code{background:var(--gray-100); padding:2px 6px; border-radius:var(--r-sm); color:var(--accent-800); font-size:.9em;}
.docs-section .code-block{margin:18px 0;}

/* Méthodes HTTP */
.method{font-family:var(--mono); font-size:11px; font-weight:500; padding:3px 9px; border-radius:var(--r-sm); color:#fff; text-transform:uppercase; letter-spacing:.04em;}
.method.get{background:var(--success);}
.method.post{background:var(--accent-600);}
.method.put{background:var(--warning);}
.method.del{background:var(--error);}
.endpoint{
  display:flex; align-items:center; gap:12px; background:var(--navy-900); color:#fff;
  border-radius:var(--r-md); padding:12px 16px; font-family:var(--mono); font-size:14px; margin:18px 0; flex-wrap:wrap;
}
.endpoint .path{color:var(--navy-100);}
.endpoint .path b{color:#fff;}

/* Tableau de paramètres */
.param-table{width:100%; border-collapse:collapse; font-size:14px; margin:14px 0;}
.param-table th,.param-table td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top;}
.param-table thead th{font-family:var(--display); font-size:12.5px; color:var(--navy-700); background:var(--gray-50);}
.param-table td.name{font-family:var(--mono); font-size:13px; color:var(--accent-800); white-space:nowrap;}
.param-table td.type{font-family:var(--mono); font-size:12px; color:var(--gray-500);}
.param-table .tag-req{font-family:var(--mono); font-size:10px; color:var(--error-700); margin-left:6px;}
.param-table .tag-opt{font-family:var(--mono); font-size:10px; color:var(--gray-400); margin-left:6px;}

/* Bouton menu docs mobile */
.docs-mobile-toggle{display:none;}
@media (max-width:900px){
  .docs-shell{flex-direction:column;}
  .docs-nav{
    position:static; width:100%; flex:none; height:auto; max-height:none;
    border-right:none; border-bottom:1px solid var(--border); padding:18px 24px;
    display:none;
  }
  body.docs-open .docs-nav{display:block;}
  .docs-main{padding:28px 24px 64px; width:100%;}
  .docs-mobile-toggle{
    display:flex; align-items:center; gap:8px; margin:18px 24px 0; padding:11px 16px;
    border:1px solid var(--border-strong); border-radius:var(--r-md); background:#fff;
    font-family:var(--body); font-weight:600; font-size:14px; color:var(--navy-700); cursor:pointer;
  }
}

@media (max-width:860px){
  .blog-featured{grid-template-columns:1fr;}
  .blog-featured .thumb{min-height:200px;}
}

/* ===== Pages légales — texte justifié ===== */
.legal-doc p, .legal-doc li{text-align:justify; text-justify:inter-word; hyphens:auto;}
.legal-doc .lead{max-width:none;}