/* NeoBlok — site vitrine, direction « clair / épuré / corporate ».
   Blanc, titres noirs nets, accent bleu discret, filets, beaucoup d'espace,
   zéro animation. Feuille partagée par toutes les pages. */
:root{
  --bg:#ffffff;
  --bg-alt:#f7f8fb;
  --ink:#0f1729;
  --ink-2:#4a5568;
  --ink-3:#67718a;
  --line:#e6e9f0;
  --line-2:#eef1f6;
  --accent:#2f6bed;
  --accent-press:#1d4ed8;
  --ok:#0a7d57;
  --sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Hanken Grotesk", var(--sans);
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap:1120px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}

/* typographie */
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500;}
h1,h2,h3{font-family:var(--display); letter-spacing:-.025em; line-height:1.08; font-weight:800; color:var(--ink);}
h1.page{font-size:clamp(32px,4.4vw,52px); margin-top:16px;}
h2.sec{font-size:clamp(26px,3.2vw,38px);}
.lead{font-size:18px; line-height:1.62; color:var(--ink-2);}
.muted{color:var(--ink-2);}

/* boutons — plats, nets */
.btn{display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 20px; border-radius:8px; font-size:14.5px; font-weight:600; border:1px solid transparent; white-space:nowrap; transition:background .15s, border-color .15s, color .15s; cursor:pointer;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-press);}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:#c9d2e3; background:var(--bg-alt);}
.btn svg{stroke-width:2.2;}

/* logo */
.mk{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2.5px;}
.mk i{border-radius:2.5px; background:var(--accent);}
.mk i:nth-child(2),.mk i:nth-child(3){opacity:.5;}

/* header */
header.top{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; letter-spacing:-.01em;}
.brand .mk{width:24px; height:24px;}
.links{display:flex; gap:30px; font-size:14px; color:var(--ink-2); font-weight:500;}
.links a:hover{color:var(--ink);}
.nacct{display:flex; gap:10px; align-items:center;}
.nacct .btn{height:38px; font-size:13.5px; padding:0 16px;}
a.lang{font-family:var(--mono); font-size:12px; color:var(--ink-3); padding:8px 10px; border-radius:7px;}
a.lang:hover{color:var(--ink); background:var(--bg-alt);}
.burger{display:none; flex-direction:column; gap:4px; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer;}
.burger span{display:block; width:17px; height:1.7px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.7px) rotate(-45deg);}
.mnav{position:fixed; inset:66px 0 auto 0; z-index:49; background:#fff; border-bottom:1px solid var(--line); padding:14px 32px 22px; display:none;}
.mnav.open{display:block;}
.mnav a{display:block; padding:13px 0; font-size:16px; color:var(--ink-2); border-bottom:1px solid var(--line-2);}
.mnav .acts{display:flex; gap:10px; margin-top:16px;} .mnav .acts .btn{flex:1; justify-content:center;}
body.menu-open{overflow:hidden;}
@media(max-width:900px){ .links, .nacct .lang, .nacct .btn-ghost{display:none;} .burger{display:flex;} }

/* sections */
section{border-bottom:1px solid var(--line);}
.band{padding:96px 0;}
.band.alt{background:var(--bg-alt);}
.band.tight{padding:64px 0;}
.shead{max-width:46rem;}
.shead .eyebrow{display:block; margin-bottom:14px;}
.shead .lead{margin-top:16px;}

/* hero */
.hero{padding:104px 0 92px; border-bottom:1px solid var(--line);}
.hero .eyebrow{display:block; margin-bottom:18px;}
.hero h1{font-size:clamp(40px,5.6vw,68px); max-width:14ch; letter-spacing:-.03em;}
.hero p.lead{margin-top:24px; max-width:40ch;}
.hero .cta{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap;}
.hero .cta .btn{height:50px; padding:0 22px;}
.hero .trust{display:flex; gap:26px; margin-top:52px; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap;}
.hero .trust span{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2);}
.hero .trust svg{color:var(--accent);}

/* catalogue par familles — grille de cartes (inspiration office.com, sobre) */
.ocat .family{padding:44px 0; border-bottom:1px solid var(--line-2);}
.ocat .family:first-child{padding-top:8px;}
.ocat .family:last-child{border-bottom:0; padding-bottom:0;}
.ocat .fh{display:flex; align-items:baseline; gap:14px; margin-bottom:22px;}
.ocat .fh h3{position:relative; padding-left:14px; font-family:var(--display); font-size:18px; font-weight:800; letter-spacing:-.02em;}
.ocat .fh h3::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:2px; background:var(--accent);}
.ocat .fh .n{font-family:var(--mono); font-size:12px; color:var(--ink-3);}
.gcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:16px;}
.ocard{display:flex; flex-direction:column; gap:14px; padding:22px; border:1px solid var(--line); border-radius:14px; background:#fff; transition:border-color .13s, box-shadow .13s;}
.ocard:hover{border-color:#d3dcec; box-shadow:0 6px 22px rgba(15,23,41,.06);}
.ocard:hover .an{color:var(--accent);}
.ocard .top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.ocard .tile{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--line-2); border:1px solid var(--line); color:var(--accent);}
.ocard .tile svg{width:22px; height:22px; stroke-width:2.05;}
/* la couleur porte une INFO : tuile verte = application en ligne */
.ocard.is-live .tile{background:#e7f4ee; border-color:#c2e5d5; color:var(--ok);}
.ocard .an{font-size:16px; font-weight:700; letter-spacing:-.01em; transition:color .13s;}
.ocard .ad{font-size:13.5px; color:var(--ink-2); line-height:1.5;}
.ocard .st{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; padding-top:6px;}
.ocard .st.live{color:var(--ok);}

/* deux colonnes (socle) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media(max-width:840px){ .split{grid-template-columns:1fr; gap:36px;} }
.slist{display:flex; flex-direction:column;}
.slist .it{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line);}
.slist .it:first-child{border-top:0;}
.slist .it .k{font-family:var(--mono); font-size:12px; color:var(--accent); width:26px; flex:none; padding-top:2px;}
.slist .it b{font-size:15px; font-weight:700;}
.slist .it p{font-size:14px; color:var(--ink-2); margin-top:3px; line-height:1.55;}

/* trois points (souveraineté) */
.cols3{display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:52px;}
@media(max-width:820px){ .cols3{grid-template-columns:1fr; gap:34px;} }
.pt .ic{width:40px; height:40px; border-radius:10px; border:1px solid var(--line); display:grid; place-items:center; color:var(--accent); margin-bottom:16px;}
.pt h3{font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.3; margin-bottom:8px;}
.pt p{font-size:14.5px; color:var(--ink-2); line-height:1.62;}

/* CTA final */
.final{text-align:center;}
.final h2{max-width:16ch; margin:14px auto 0;}
.final p{margin:16px auto 0; max-width:44ch;}
.final .cta{display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap;}
.final .cta .btn{height:50px; padding:0 24px;}

/* footer */
footer{background:var(--bg-alt); border-top:1px solid var(--line);}
.foot{display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap; padding:56px 0;}
.foot .cols{display:flex; gap:44px; flex-wrap:wrap;}
.foot .col h5{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px;}
.foot .col a{display:block; font-size:14px; color:var(--ink-2); margin-bottom:10px;}
.foot .col a:hover{color:var(--accent);}
.foot .legal{font-size:13px; color:var(--ink-3); margin-top:16px; line-height:1.6;}

/* fiche produit */
.phero{padding:64px 0 56px; border-bottom:1px solid var(--line);}
.crumb{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-bottom:20px;}
.crumb a:hover{color:var(--accent);} .crumb span{margin:0 7px; opacity:.6;}
.phero .pt-tag{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3);}
.phero .pt-tag .sq{width:7px; height:7px; border-radius:2px; background:currentColor;} .phero .pt-tag.live{color:var(--ok);}
.phero .cta{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
.specs{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
@media(max-width:760px){ .specs{grid-template-columns:1fr 1fr;} }
.spec{padding:22px 22px 22px 0; border-right:1px solid var(--line);}
.spec:last-child{border-right:0;}
.spec b{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;}
.spec span{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;}
.feat{display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; margin-top:8px;}
@media(max-width:700px){ .feat{grid-template-columns:1fr;} }
.fc{display:flex; gap:16px; padding:24px 0; border-top:1px solid var(--line);}
.fc .ic{width:36px; height:36px; border-radius:9px; border:1px solid var(--line); display:grid; place-items:center; color:var(--accent); flex:none; background:var(--bg-alt);}
.fc h3{font-family:var(--sans); font-size:15px; font-weight:700; line-height:1.35; margin-bottom:5px;}
.fc p{font-size:13.5px; color:var(--ink-2); line-height:1.58;}
.adj{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:16px; margin-top:8px;}
a.acard{display:block; padding:20px 22px; border:1px solid var(--line); border-radius:14px; background:#fff; transition:border-color .13s, box-shadow .13s;}
a.acard:hover{border-color:#d3dcec; box-shadow:0 6px 22px rgba(15,23,41,.06);}
a.acard:hover h3{color:var(--accent);}
a.acard h3{font-family:var(--sans); font-size:15px; font-weight:700; line-height:1.35; margin-bottom:6px;}
a.acard p{font-size:13px; color:var(--ink-2); line-height:1.5;}

/* pages contenu (légal / ressources) */
.content{max-width:760px; margin:0 auto; padding:72px 32px 40px;}
.content .updated{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:14px;}
.legal-block{margin-top:44px;}
.legal-block h2{font-family:var(--display); font-size:20px; letter-spacing:-.02em; margin-bottom:12px; padding-top:26px; border-top:1px solid var(--line);}
.legal-block p, .legal-block li{font-size:15px; line-height:1.72; color:var(--ink-2);}
.legal-block ul{padding-left:20px; display:grid; gap:8px; margin-top:6px;}
.legal-block a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.legal-note{font-size:13px !important; color:var(--ink-3) !important; font-style:italic;}
em{font-style:normal; color:var(--accent);}

/* ---- accessibilité ---- */
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; font-size:14px; font-weight:600;}
.skip:focus{left:0;}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

/* ---- hero en deux colonnes (panneau sobre) ---- */
.hero .grid{display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:center;}
@media(max-width:900px){ .hero .grid{grid-template-columns:1fr; gap:40px;} }
.hpanel{border:1px solid var(--line); border-radius:12px; background:var(--bg); overflow:hidden;}
.hpanel .hph{padding:16px 20px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.hpanel .row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--line-2);}
.hpanel .row:last-child{border-bottom:0;}
.hpanel .row .k{font-size:13.5px; color:var(--ink-2);}
.hpanel .row .v{font-size:14px; font-weight:700; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums;}
.hpanel .row .v .d{width:8px; height:8px; border-radius:2px; background:var(--ink-3);}
.hpanel .row .v .d.on{background:var(--ok);}

/* ---- FAQ ---- */
.faq{max-width:820px;}
.faq details{border-top:1px solid var(--line); padding:6px 0;}
.faq details[open]{padding-bottom:12px;}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{flex:none; width:20px; height:20px; position:relative;}
.faq summary .pm::before, .faq summary .pm::after{content:""; position:absolute; background:var(--ink-3); border-radius:2px;}
.faq summary .pm::before{left:2px; right:2px; top:9px; height:2px;}
.faq summary .pm::after{top:2px; bottom:2px; left:9px; width:2px; transition:transform .18s;}
.faq details[open] summary .pm::after{transform:scaleY(0);}
.faq details p{font-size:15px; line-height:1.68; color:var(--ink-2); max-width:64ch;}