/* DECIDD — site marketing (navy/bleu, Inter). Charte validée le 06/08.
   Indépendant des tokens teal/charcoal du cockpit applicatif (index.html / perso.html
   authentifiés) : ces pages sont uniquement le site vitrine (accueil, solutions,
   tarifs, blog, contact, etc.), servies par des routes FastAPI dédiées. */
:root{
  --bg-deep:#081226;
  --bg-deep-2:#0B1B33;
  --bg-panel:#152743;
  --bg-panel-2:#1B2E4E;
  --border-subtle:rgba(255,255,255,.09);
  --blue:#2E90E8;
  --blue-fill:#1B66B0; /* fond plein + texte blanc dessus (boutons) : #2E90E8 seul est sous 4.5:1 (AA) */
  --blue-bright:#5CADF2;
  --blue-dim:#1B4B7A;
  --white:#FFFFFF;
  --text-muted:#9FB0C6;
  --text-faint:#6E82A0;
  --radius:14px;
  --good:#3FBF8F;
  --warn:#E9A23B;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  background:var(--bg-deep);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px;}
img,svg{display:block;}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px;border-radius:4px;}

.mockup-flag{
  background:var(--blue-dim);color:#cfe4fb;text-align:center;font-size:12px;
  padding:7px;letter-spacing:.02em;
}

/* HEADER */
header.site{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 40px;background:rgba(8,18,38,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:40;
}
.logo{font-size:21px;font-weight:800;display:flex;align-items:center;gap:9px;}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);flex-shrink:0;}
nav.main-nav{display:flex;gap:28px;font-size:14.5px;color:var(--text-muted);}
nav.main-nav a{transition:color .15s ease;}
nav.main-nav a:hover{color:var(--white);}
nav.main-nav a.active{color:var(--white);}
.header-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.nav-toggle{display:none;}
.btn{
  font-family:inherit;font-weight:600;font-size:14px;border-radius:9px;padding:11px 22px;
  border:1px solid transparent;cursor:pointer;display:inline-block;transition:filter .15s ease,border-color .15s ease;
}
.btn-primary{background:var(--blue-fill);color:#fff;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;border:1px solid var(--border-subtle);color:var(--white);}
.btn-ghost:hover{border-color:var(--blue-bright);}
.btn-outline-blue{background:transparent;border:1.5px solid var(--blue);color:var(--blue-bright);}

/* AMBIANT GLOW */
.hero{position:relative;overflow:hidden;}
.glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;pointer-events:none;z-index:0;}
.glow-blue{width:520px;height:520px;background:#2E90E8;top:-220px;right:-140px;}
.glow-violet{width:420px;height:420px;background:#6C6CE5;bottom:-180px;left:-120px;opacity:.22;}
.glow-amber{width:380px;height:380px;background:#E9A23B;opacity:.20;}
.hero > .wrap, section > .wrap, .hero > div:not(.glow){position:relative;z-index:1;}

/* ICONS — set unique (trait, currentColor), jamais d'emoji comme icône */
.icon{width:22px;height:22px;flex-shrink:0;}
.icon, .icon *{stroke:currentColor;}

/* DEVICE MOCKUP — laptop + phone */
.device-scene{position:relative;padding:20px 10px 46px;}
.device-laptop{
  background:linear-gradient(180deg,#2b3a52,#0e1b30);
  border-radius:16px 16px 6px 6px;padding:10px 10px 0;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
}
.laptop-screen{
  background:linear-gradient(160deg,#0F2038,#152A47);
  border-radius:8px;padding:16px;min-height:250px;
  border:1px solid rgba(255,255,255,.06);
}
.laptop-screen .mini-topbar{display:flex;gap:5px;margin-bottom:14px;}
.laptop-screen .mini-topbar span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);}
.laptop-base{
  height:14px;background:linear-gradient(180deg,#3a4a63,#1a2740);
  border-radius:0 0 10px 10px;margin-top:0;position:relative;
}
.laptop-base::after{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:70px;height:5px;background:rgba(0,0,0,.25);border-radius:0 0 6px 6px;
}
.device-phone{
  position:absolute;right:-6px;bottom:-30px;width:168px;
  background:linear-gradient(180deg,#2b3a52,#0e1b30);
  border-radius:26px;padding:8px;box-shadow:0 24px 48px -14px rgba(0,0,0,.6);
  transform:rotate(4deg);
}
.phone-screen{
  background:linear-gradient(165deg,#122544,#0d1a2e);border-radius:19px;padding:14px 12px;
  border:1px solid rgba(255,255,255,.07);min-height:200px;
}
.phone-screen .notch{width:44px;height:5px;background:rgba(255,255,255,.14);border-radius:4px;margin:0 auto 12px;}

/* mini UI bits used inside device screens */
.mini-card{background:rgba(255,255,255,.05);border-radius:8px;padding:10px;margin-bottom:8px;}
.mini-card .lbl{font-size:9.5px;color:var(--text-faint);margin-bottom:3px;}
.mini-card .val{font-size:13px;font-weight:800;color:#fff;}
.mini-chip{display:inline-block;background:rgba(46,144,232,.18);color:var(--blue-bright);font-size:9px;font-weight:700;padding:3px 8px;border-radius:999px;}
.mini-bars{display:flex;align-items:flex-end;gap:4px;height:46px;margin-top:10px;}
.mini-bars span{flex:1;background:linear-gradient(180deg,var(--blue-bright),var(--blue));border-radius:3px 3px 0 0;}
.mini-line{margin-top:8px;}

.illustration-wrap{position:relative;display:flex;justify-content:center;align-items:center;min-height:340px;}

/* HERO */
.hero{padding:76px 0 64px;}
.eyebrow{color:var(--blue-bright);font-weight:700;font-size:12.5px;letter-spacing:.09em;margin-bottom:14px;text-transform:uppercase;}
h1{font-size:42px;line-height:1.16;font-weight:800;margin:0 0 18px;text-wrap:balance;}
.hero p.lead{color:var(--text-muted);font-size:16.5px;line-height:1.65;max-width:560px;margin-bottom:30px;}
.hero-ctas{display:flex;gap:16px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
.hero-ctas .link-play{display:flex;align-items:center;gap:8px;color:var(--blue-bright);font-weight:600;font-size:14.5px;cursor:pointer;background:none;border:none;font-family:inherit;padding:0;}

/* TOGGLE */
.toggle-block{margin-top:52px;}
.toggle-title{font-size:19px;font-weight:700;margin-bottom:18px;}
.toggle-switch{
  display:flex;align-items:center;background:var(--bg-panel);border:1px solid var(--border-subtle);
  border-radius:999px;padding:6px;max-width:560px;
}
.toggle-side{flex:1;display:flex;align-items:center;gap:8px;justify-content:center;padding:11px 14px;border-radius:999px;font-weight:600;font-size:14.5px;color:var(--text-muted);cursor:pointer;border:none;background:none;font-family:inherit;transition:color .15s ease;}
.toggle-side.on{background:var(--blue-fill);color:#fff;}
.toggle-side .icon{width:16px;height:16px;}

/* SECTION generic */
section{padding:60px 0;}
.section-tag{color:var(--blue-bright);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
h2.section-title{font-size:28px;font-weight:800;margin:0 0 14px;text-wrap:balance;}
p.section-sub{color:var(--text-muted);font-size:15px;line-height:1.65;max-width:640px;}

/* FEATURE GRID (cards) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;}
.feat-card{
  background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:26px;
  transition:border-color .2s ease;
}
.feat-icon{
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(150deg,rgba(46,144,232,.28),rgba(46,144,232,.06));
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--blue-bright);
  border:1px solid rgba(92,173,242,.25);
}
.feat-card:hover{border-color:rgba(92,173,242,.35);}
.feat-card h3{font-size:16px;margin:0 0 8px;font-weight:700;}
.feat-card p{font-size:13.5px;color:var(--text-muted);line-height:1.6;margin:0;}

/* KPI / GAUGE CARD */
.kpi-card{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:18px;padding:26px;}
.kpi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:12.5px;color:var(--text-muted);font-weight:600;letter-spacing:.03em;}
.badge{background:rgba(46,144,232,.14);color:var(--blue-bright);font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;}
.kpi-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:18px;}
.kpi-stat{background:var(--bg-panel-2);border-radius:10px;padding:14px;}
.kpi-stat .lbl{font-size:11px;color:var(--text-faint);margin-bottom:6px;}
.kpi-stat .val{font-size:19px;font-weight:800;}
.gauge{position:relative;width:150px;height:150px;margin:6px auto 6px;}
.gauge-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
.gauge-value .num{font-size:30px;font-weight:800;}
.gauge-value .lbl{font-size:11px;color:var(--text-faint);}

/* COMPARE PANEL */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px;}
.compare-col{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:14px;padding:24px;}
.compare-col.win{background:rgba(46,144,232,.10);border:1px solid var(--blue-dim);}
.compare-col h4{font-size:11.5px;letter-spacing:.06em;color:var(--text-muted);margin:0 0 14px;text-transform:uppercase;}
.compare-col.win h4{color:var(--blue-bright);}
.compare-col ul{margin:0;padding-left:18px;font-size:14px;line-height:2;color:var(--text-muted);}
.compare-col.win ul{color:var(--white);}

/* STEPS */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px;}
.step{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:14px;padding:20px;}
.step .n{font-size:11px;color:var(--blue-bright);font-weight:700;margin-bottom:10px;}
.step p{font-size:13px;color:var(--text-muted);line-height:1.55;margin:10px 0 0;}

/* BEFORE/AFTER */
.before-after{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;margin-top:32px;}
.arrow-sep{font-size:22px;color:var(--blue-bright);}

/* Mockup iPhone (avant/après) — vrai boîtier (lunette + encoche), statut, grille
   d'icônes app (monogrammes abstraits — pas de logos tiers reproduits, cf. marque) */
.liphone{background:#0A0D12;border-radius:44px;padding:12px;box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 0 0 1.5px rgba(255,255,255,.08);max-width:260px;margin:0 auto;position:relative;}
.liphone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:84px;height:22px;background:#0A0D12;border-radius:12px;z-index:2;}
.liphone-screen{background:linear-gradient(165deg,#1B2E4E,#0B1B33);border-radius:34px;padding:20px 14px 20px;overflow:hidden;position:relative;}
.liphone-status{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;color:var(--white);padding:0 3px 18px;}
.liphone-status svg{stroke:var(--white);fill:none;}
.liapps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px;}
.liapp{display:flex;flex-direction:column;align-items:center;gap:5px;}
.liapp-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;}
.liapp-ic img{display:block;}
.liapp span{font-size:9px;color:var(--text-muted);text-align:center;line-height:1.2;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.liphone-wordmark{text-align:center;margin-top:14px;font-size:15px;font-weight:800;color:var(--white);letter-spacing:-.01em;}
.liphone-tagline{text-align:center;font-size:11px;color:var(--text-muted);margin-top:2px;}
.liapp:nth-child(6n+1) .liapp-ic{background:linear-gradient(135deg,#2E90E8,#1B4B7A);}
.liapp:nth-child(6n+2) .liapp-ic{background:linear-gradient(135deg,#E9C46A,#B07515);}
.liapp:nth-child(6n+3) .liapp-ic{background:linear-gradient(135deg,#6FA8E8,#2E5FA8);}
.liapp:nth-child(6n+4) .liapp-ic{background:linear-gradient(135deg,#E0715A,#B23A26);}
.liapp:nth-child(6n+5) .liapp-ic{background:linear-gradient(135deg,#A78BFA,#6D4FD6);}
.liapp:nth-child(6n+6) .liapp-ic{background:linear-gradient(135deg,#8FA6AE,#455A73);}
.liphone-single{display:flex;flex-direction:column;align-items:center;padding:30px 0 0;}
.liphone-single .liapp-ic{width:62px;height:62px;border-radius:17px;background:linear-gradient(135deg,#2E90E8,#1B4B7A);box-shadow:0 10px 24px rgba(46,144,232,.4);}
.liphone-single .liapp-ic svg{width:30px;height:30px;}
.liphone-notif{background:var(--bg-panel-2);border:1px solid var(--border-subtle);border-radius:12px;padding:12px 14px;margin-top:20px;}
.lba-lbl{font-size:12px;font-weight:700;color:var(--text-muted);text-align:center;margin-top:14px;}

/* PRICING */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;}
.price-card{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:18px;padding:30px;display:flex;flex-direction:column;}
.price-card.highlight{border:1.5px solid var(--blue);background:linear-gradient(180deg,rgba(46,144,232,.10),var(--bg-panel));}
.price-card .tag-pop{align-self:flex-start;background:var(--blue-fill);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;margin-bottom:14px;}
.price-card h3{font-size:17px;margin:0 0 6px;}
.price-card .price{font-size:32px;font-weight:800;margin:14px 0 4px;}
.price-card .price span{font-size:13px;font-weight:500;color:var(--text-muted);}
.price-card ul{list-style:none;margin:22px 0;padding:0;font-size:13.5px;color:var(--text-muted);}
.price-card li{padding:7px 0;border-top:1px solid var(--border-subtle);}
.price-card li:first-child{border-top:none;}
.price-card .btn{width:100%;text-align:center;margin-top:auto;}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;}
.blog-card{display:block;background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:14px;overflow:hidden;transition:border-color .2s ease;}
.blog-card:hover{border-color:rgba(92,173,242,.35);}
.blog-thumb{height:130px;background:linear-gradient(135deg,var(--bg-panel-2),var(--blue-dim));position:relative;}
.blog-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(92,173,242,.25),transparent 60%);}
.blog-body{padding:20px;}
.blog-cat{font-size:11px;color:var(--blue-bright);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;}
.blog-body h3{font-size:15.5px;margin:0 0 8px;line-height:1.4;}
.blog-body p{font-size:13px;color:var(--text-muted);margin:0;}

/* ARTICLE */
.article-head{max-width:720px;}
.article-body{max-width:680px;font-size:15.5px;line-height:1.75;color:var(--text-muted);}
.article-body h2{color:var(--white);font-size:21px;margin:34px 0 12px;}
.article-body p{margin:0 0 18px;}
.article-body strong{color:var(--white);}
.article-meta{display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--text-faint);margin-bottom:8px;}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:30px;}
.form-field{margin-bottom:16px;}
.form-field label{display:block;font-size:12.5px;color:var(--text-muted);margin-bottom:7px;font-weight:600;}
.form-field input, .form-field textarea{
  width:100%;background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:9px;
  padding:12px 14px;color:#fff;font-family:inherit;font-size:14px;
}
.form-field input:focus, .form-field textarea:focus{border-color:var(--blue-bright);}
.contact-info-card{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:16px;padding:26px;margin-bottom:16px;}
.contact-info-card .lbl{font-size:11.5px;color:var(--text-faint);margin-bottom:6px;}
.contact-info-card .val{font-size:15px;font-weight:600;}
#contact-msg{font-size:13.5px;margin-top:12px;min-height:18px;}
#contact-msg.ok{color:var(--good);}
#contact-msg.err{color:#F27E7E;}

/* FINAL CTA */
.final-cta{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:22px;padding:56px;text-align:center;}
.final-cta h2{font-size:27px;margin:0 0 12px;text-wrap:balance;}
.final-cta p{color:var(--text-muted);font-size:14.5px;margin-bottom:26px;}
.final-cta .switch-link{display:block;margin-top:18px;font-size:13px;color:var(--blue-bright);}

/* FOOTER */
footer.site{background:var(--bg-deep-2);border-top:1px solid var(--border-subtle);padding:44px 0 24px;margin-top:10px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;font-size:13.5px;color:var(--text-muted);}
footer h5{font-size:11.5px;color:var(--white);margin:0 0 12px;letter-spacing:.05em;text-transform:uppercase;}
footer a{display:block;color:var(--text-muted);margin-bottom:9px;font-size:13.5px;transition:color .15s ease;}
footer a:hover{color:var(--white);}
.footer-bottom{text-align:center;font-size:12px;color:var(--text-faint);margin-top:32px;padding-top:18px;border-top:1px solid var(--border-subtle);}
.social-row{display:flex;gap:12px;margin-top:14px;}
.social-row span{width:30px;height:30px;border-radius:50%;background:var(--bg-panel);display:flex;align-items:center;justify-content:center;font-size:13px;border:1px solid var(--border-subtle);}

/* RESPONSIVE */
@media (max-width:980px){
  .wrap{padding:0 24px;}
  header.site{padding:16px 20px;}
  nav.main-nav{display:none;}
  .device-phone{display:none;}
  h1{font-size:32px;}
  .hero > div[style*="grid-template-columns"]{display:flex !important;flex-direction:column;}
  .grid-3, .steps4, .pricing-grid, .blog-grid{grid-template-columns:1fr;}
  .grid-2, .compare-grid, .contact-grid{grid-template-columns:1fr;}
  .before-after{grid-template-columns:1fr;}
  .arrow-sep{transform:rotate(90deg);justify-self:center;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 20px;}
}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  h1{font-size:27px;}
  .final-cta{padding:34px 22px;}
  .footer-grid{grid-template-columns:1fr;}
  .header-right .btn-ghost{display:none;}
}