/* ══════════════════════════════════════════════════════════════════════════
   CodiSuite — site vitrine (codisuite.com) — VERSION 11
   Feuille unique. Aucune ressource externe : pas de CDN, pas de police
   distante, pas de script tiers. Polices système uniquement.
   Charte : docs/identite-graphique.md. Le bleu-cyan du logo est la couleur
   de marque (accent, liens, boutons) ; le violet ne parle que de protection
   des données ; le vert ne signale que la décision du codeur. Le corail de
   l'ancien logo est retiré.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --violet:#6D28D9; --violet-l:#7C3AED; --violet-bg:#F5F1FE; --violet-li:#E3D9FB;
  --bleu:#0A6EBD;   --bleu-l:#0EB5F0;   --bleu-bg:#EBF6FD;   --bleu-li:#CFE7F7;
  --bleu-dk:#0A4D8C;
  --vert:#34A853;   --vert-bg:#E9F6EC;  --vert-li:#CBE8D3;   --vert-dk:#12653A;
  --rouge:#EA4335;  --rouge-bg:#FDEDEC; --rouge-li:#F5C3BE;  --rouge-dk:#A32217;
  --jaune:#F9AB00;  --jaune-bg:#FEF7E6; --jaune-dk:#B07800;
  --ink:#16324A; --grey:#52657A; --grey-l:#8697A8;
  --line:#DBE7F1; --wash:#F4F9FD;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'Cascadia Mono',Consolas,'SF Mono','Roboto Mono','Courier New',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--bleu);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:99;background:#fff;border:2px solid var(--bleu);
     border-radius:8px;padding:10px 16px}

/* ── Barre de navigation ────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
        backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:68px}
.logo{display:flex;align-items:center;gap:11px;font-weight:600;font-size:19.5px;
      letter-spacing:-.3px;color:var(--ink);flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo .mark{width:32px;height:32px;flex:0 0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{font-size:15px;color:var(--grey);font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{font-weight:600}
.lang{display:flex;align-items:center;gap:2px;font-size:13px;font-weight:700;
      border:1px solid var(--line);border-radius:999px;padding:4px 4px;background:#fff}
.lang a,.lang span{padding:3px 9px;border-radius:999px;line-height:1}
.lang .on{background:var(--bleu);color:#fff}
.lang a{color:var(--grey)}
.lang a:hover{color:var(--ink);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     background:linear-gradient(135deg,var(--bleu-l),var(--bleu));color:#fff;
     font-weight:600;font-size:15px;
     border-radius:12px;padding:11px 20px;border:1px solid var(--bleu);
     transition:box-shadow .16s ease,transform .16s ease,filter .16s ease}
a.btn,a.btn:hover,a.btn:visited,a.btn:focus{color:#fff}
.btn:hover{text-decoration:none;filter:brightness(.94);
     box-shadow:0 3px 10px rgba(10,110,189,.30);transform:translateY(-1px)}
a.btn.ghost,a.btn.ghost:hover,a.btn.ghost:visited{color:var(--ink)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--wash);box-shadow:none;filter:none}
.btn.sm{font-size:14px;padding:9px 16px;border-radius:10px}
.navtoggle{display:none;margin-left:auto;background:#fff;border:1px solid var(--line);
     border-radius:10px;width:42px;height:38px;align-items:center;justify-content:center;
     cursor:pointer;color:var(--ink)}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{padding:78px 0 62px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--bleu-bg);
     color:var(--bleu);font-size:12.5px;font-weight:700;letter-spacing:.5px;
     text-transform:uppercase;padding:7px 15px;border-radius:999px;margin-bottom:26px}
h1{font-size:56px;line-height:1.08;letter-spacing:-1.6px;font-weight:600;margin:0 0 22px}
h1 .grad{background:linear-gradient(100deg,var(--bleu-l) 0%,var(--bleu-dk) 75%);
     -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:21px;line-height:1.55;color:var(--grey);max-width:770px;margin:0 0 32px}
.motto{display:inline-flex;align-items:center;gap:13px;background:var(--vert-bg);
     border:1px solid var(--vert-li);border-radius:14px;padding:15px 22px;
     font-size:17px;font-weight:600;color:var(--vert-dk)}
.motto .tick{width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:var(--vert);
     display:flex;align-items:center;justify-content:center}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
.cta-row .fine{font-size:14px;color:var(--grey-l)}

/* ── Sections ───────────────────────────────────────────────────────────── */
section{padding:62px 0;border-top:1px solid var(--line)}
section.plain{border-top:none}
section.tinted{background:var(--wash)}
.snum{font-family:var(--mono);font-size:12.5px;color:var(--grey);letter-spacing:1.6px;
      text-transform:uppercase;margin-bottom:12px}
/* Carre arrondi du logo, repris comme puce de section (rayon = 11 % du cote) */
.snum::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;
      background:linear-gradient(135deg,var(--bleu-l),var(--bleu));margin-right:10px;
      vertical-align:baseline;position:relative;top:0}
h2{font-size:36px;line-height:1.18;letter-spacing:-.9px;font-weight:600;margin:0 0 16px}
h3{font-size:19.5px;line-height:1.3;font-weight:600;letter-spacing:-.2px;margin:0 0 10px}
.sub{font-size:18px;color:var(--grey);max-width:800px;margin:0 0 40px}
.sub.tight{margin-bottom:26px}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

/* ── Repères chiffrés ───────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:34px}
.stat{background:var(--wash);border:1px solid var(--line);border-radius:16px;padding:26px 24px}
section.tinted .stat{background:#fff}
.stat .n{font-size:40px;font-weight:600;letter-spacing:-1.4px;line-height:1;margin-bottom:10px}
.stat:nth-child(1) .n{color:var(--bleu)}
.stat:nth-child(2) .n{color:var(--bleu)}
.stat:nth-child(3) .n{color:var(--violet)}
.stat .t strong{display:block;color:var(--ink);font-size:15.5px;margin-bottom:5px}
.stat .t{font-size:14.5px;color:var(--grey);line-height:1.45}

.quote{border-left:4px solid var(--jaune);background:var(--jaune-bg);
   border-radius:0 14px 14px 0;padding:20px 26px;font-size:17.5px;line-height:1.6}
.quote .who{display:block;margin-top:10px;font-size:14px;color:var(--grey)}

/* ── Flux en trois temps ────────────────────────────────────────────────── */
.flow{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:stretch}
.step{border-radius:18px;padding:28px 24px;border:1px solid var(--line);background:#fff}
.step.w{background:var(--violet-bg);border-color:var(--violet-li)}
.step.x{background:var(--bleu-bg);border-color:var(--bleu-li)}
.step.h{background:var(--vert-bg);border-color:var(--vert-li)}
.step .tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.9px;
   text-transform:uppercase;padding:4px 10px;border-radius:6px;margin-bottom:14px;color:#fff}
.step.w .tag{background:var(--violet)}
.step.x .tag{background:var(--bleu)}
.step.h .tag{background:var(--vert)}
.step h3{font-size:19px}
.step p{margin:0 0 12px;font-size:15px;color:var(--grey);line-height:1.55}
.step .note{font-size:13px;font-weight:600}
.step.w .note{color:var(--violet)}
.step.x .note{color:var(--bleu)}
.step.h .note{color:var(--vert-dk)}
.arrow{display:flex;align-items:center;justify-content:center;color:#BDC1C6;font-size:26px}

/* ── Cartes ─────────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--line);border-radius:18px;padding:28px;background:#fff;
      transition:box-shadow .18s ease,transform .18s ease}
.card:hover{box-shadow:0 2px 6px rgba(22,50,74,.10),0 6px 18px rgba(10,110,189,.10);
      transform:translateY(-2px)}
.card .ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;
      justify-content:center;margin-bottom:18px}
.card p{margin:0;color:var(--grey);font-size:15.3px;line-height:1.6}
.card .why{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
      font-size:13.5px;font-weight:600}
.card.wide{grid-column:1 / -1}
.card.hi{grid-column:1 / -1;border-color:var(--rouge-li);
      background:linear-gradient(180deg,#FEF7F6 0%,#fff 62%)}
.bans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.ban{background:#fff;border:1px solid var(--rouge-li);border-radius:14px;padding:20px 22px}
.ban .eq{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--rouge);
      margin-bottom:9px;display:block}
.ban p{font-size:14.5px}

/* Petites cartes compactes (personnalisation) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff}
section.tinted .tile{background:#fff}
.tile h3{font-size:16.5px;margin-bottom:8px}
.tile p{margin:0;font-size:14.6px;color:var(--grey);line-height:1.55}
.tile .k{font-family:var(--mono);font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;
      color:var(--bleu);display:block;margin-bottom:9px;font-weight:700}

/* Listes à puces cochées */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.checks li{position:relative;padding-left:32px;font-size:16px;color:var(--grey);line-height:1.55}
.checks li::before{content:"";position:absolute;left:0;top:4px;width:19px;height:19px;
      border-radius:50%;background:var(--vert-bg);
      box-shadow:inset 0 0 0 1px var(--vert-li)}
.checks li::after{content:"";position:absolute;left:5.5px;top:9.5px;width:8px;height:4.5px;
      border-left:2px solid var(--vert);border-bottom:2px solid var(--vert);
      transform:rotate(-45deg)}
.checks li strong{color:var(--ink)}
.checks.dash li::before{background:var(--rouge-bg);box-shadow:inset 0 0 0 1px var(--rouge-li)}
.checks.dash li::after{border-color:var(--rouge)}

/* ── Bloc « à retenir » ─────────────────────────────────────────────────── */
.pull{background:var(--bleu-bg);border:1px solid var(--bleu-li);border-radius:16px;
      padding:22px 26px;font-size:17px;font-weight:600;color:var(--bleu);line-height:1.5}
.pull.v{background:var(--violet-bg);border-color:var(--violet-li);color:var(--violet)}
.pull.g{background:var(--vert-bg);border-color:var(--vert-li);color:var(--vert-dk)}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{border:1px solid var(--line);border-radius:18px;overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;padding:20px 24px;font-size:17px;font-weight:600;
      list-style:none;display:flex;align-items:flex-start;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--bleu);font-weight:700;font-size:20px;
      line-height:1.25;flex:0 0 auto;width:16px}
.faq details[open] summary::before{content:"–"}
.faq summary:hover{background:var(--wash)}
.faq .a{padding:0 24px 22px 54px;color:var(--grey);font-size:15.6px}

/* ── Tableau ────────────────────────────────────────────────────────────── */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
th,td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--wash);font-weight:600;font-size:13.5px;letter-spacing:.3px;
      text-transform:uppercase;color:var(--grey)}
tr:last-child td{border-bottom:none}
td strong{color:var(--ink)}

/* ══ MAQUETTES D'ÉCRAN ══════════════════════════════════════════════════ */
.shot{border-radius:14px;overflow:hidden;background:#EEF3FA;border:1px solid #C5D8F0;
      box-shadow:0 3px 10px rgba(22,50,74,.10),0 18px 44px rgba(10,110,189,.16);
      font-size:13px}
.shot .bar{height:38px;background:#1A6FD4;display:flex;align-items:center;gap:10px;
      padding:0 12px;color:#fff}
.shot .bar .dotmark{width:20px;height:20px;border-radius:6px;flex:0 0 auto;
      background:#fff;object-fit:cover}
.shot .bar b{font-size:12.5px;font-weight:700;letter-spacing:.1px}
.shot .bar .right{margin-left:auto;display:flex;align-items:center;gap:12px;
      font-size:10.5px;color:#A8CCEE}
.shot .bar .ok{color:#9BE8A8}
.shot .tabs{display:flex;gap:0;background:#D0E6FF;padding:0;font-size:11px;font-weight:700}
.shot .tabs span{padding:7px 14px;color:#4A6080}
.shot .tabs span.on{background:#1A6FD4;color:#fff}
.shot .tools{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#E2F5E9;
      border-bottom:1px solid #9ECFA8;font-size:11px;font-weight:700;color:#1C2B3A}
.shot .tools .b{margin-left:auto;display:flex;gap:5px}
.shot .tools .b i{font-style:normal;background:#fff;border:1px solid #C5D8F0;border-radius:5px;
      padding:3px 8px;font-size:10px;font-weight:600;color:#4A6080}
.shot .tools .b i.p{background:#1A6FD4;border-color:#1A6FD4;color:#fff}
.shot .cols{display:grid;grid-template-columns:1.55fr 1fr;gap:8px;padding:8px}
.shot .pane{background:#fff;border:1px solid #C5D8F0;border-radius:6px;overflow:hidden}
.shot .pane .ph{background:#37474F;color:#ECEFF1;font-size:10.5px;font-weight:700;
      padding:5px 10px;display:flex;gap:8px;align-items:baseline}
.shot .pane .ph em{font-style:normal;font-weight:500;color:#90A4AE;font-size:9.5px}
.shot .letter{font-family:var(--mono);font-size:11px;line-height:1.85;padding:12px 13px;
      color:#1C2B3A}
.shot .letter .h{color:#4A6080;font-weight:700;display:block;margin-top:9px}
.shot .letter .h:first-child{margin-top:0}
.shot .letter .r{color:#1A237E;font-weight:700;font-size:10px}
.shot .letter .tok{color:#0A6EBD;font-weight:700}
.shot .letter mark{padding:1px 3px;border-radius:3px;color:#1C2B3A}
.hl1{background:#EF9A9A}.hl2{background:#CE93D8}.hl3{background:#90CAF9}
.hl4{background:#80CBC4}.hl5{background:#FFCC80}
.shot .codes{padding:8px;display:grid;gap:7px;background:#EEF3FA}
.shot .ccard{background:#fff;border:1px solid #BDBDBD;border-radius:5px;padding:7px 9px 7px 13px;
      position:relative}
.shot .ccard .strip{position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:5px 0 0 5px}
.shot .ccard .l1{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
      color:#1C2B3A}
.shot .ccard .n{color:#1A237E;font-size:10.5px}
.shot .ccard .t{color:#fff;border-radius:3px;padding:1px 5px;font-size:9px;letter-spacing:.3px}
.shot .ccard .t.dp{background:#2E7D32}.shot .ccard .t.ds{background:#1565C0}
.shot .ccard .t.z{background:#6A1B9A}
.shot .ccard .anch{margin-left:auto;color:#2E7D32;font-size:11px}
.shot .ccard .l2{font-size:10.5px;color:#1C2B3A;margin-top:3px}
.shot .ccard .l3{font-size:9.5px;color:#2E7D32;margin-top:2px}
.shot .status{background:#EBF4FF;border-top:1px solid #C5D8F0;padding:5px 12px;
      font-size:10.5px;color:#4A6080}
.shotcap{font-size:13.5px;color:var(--grey-l);margin-top:12px}

/* Maquette « checklist » monospace */
.shot.mono .sheet{background:#fff;padding:14px 16px;font-family:var(--mono);font-size:11px;
      line-height:1.75;color:#1C2B3A}
.shot.mono .sheet .sep{color:#C0392B}
.shot.mono .sheet .sep.g{color:#1B7A3D}
.shot.mono .sheet .sep.n{color:#C5D8F0}
.shot.mono .sheet .ttl{color:#C0392B;font-weight:700}
.shot.mono .sheet .ttl.g{color:#1B7A3D}
.shot.mono .sheet .ttl.n{color:#1C2B3A}
.shot.mono .sheet .warn{color:#C0392B;font-weight:700}
.shot.mono .sheet .done{color:#9AA0A6;text-decoration:line-through}
.shot.mono .sheet .chk{color:#5F6368}
.shot.mono .sheet .chkon{color:#1B7A3D;font-weight:700}
.shot.mono .sheet .ok{color:#1B7A3D;font-weight:700}
.shot.mono .sheet .dim{color:#4A6080}
.shot.mono .sheet .grn{color:#1B7A3D}

/* Maquette « protection des données » : avant / après */
.shot.wall .bar{background:#5B21B6}
.shot.wall .bar .dotmark{background:linear-gradient(135deg,#C084FC,#5B21B6)}
.shot.wall .cols{grid-template-columns:1fr 92px 1fr;align-items:stretch}
.shot.wall .pane .ph{background:#4C1D95}
.shot.wall .pane.out .ph{background:#1B7A3D}
.shot.wall .txt{font-family:var(--mono);font-size:10.5px;line-height:1.8;padding:12px 13px;
      color:#1C2B3A;white-space:pre-wrap}
.shot.wall .txt .id{background:#FEF3C7;border-radius:3px;padding:0 2px;font-weight:700;
      color:#92400E}
.shot.wall .txt .tok{color:#6D28D9;font-weight:700}
.shot.wall .txt .amb{background:#FDE68A;border-bottom:2px solid #F59E0B;padding:0 2px}
.shot.wall .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:9px}
.shot.wall .mid .go{background:#6D28D9;color:#fff;border-radius:8px;padding:9px 10px;
      font-size:10.5px;font-weight:700;text-align:center;line-height:1.3;
      box-shadow:0 3px 10px rgba(109,40,217,.35)}
.shot.wall .mid .sm{background:#fff;border:1px solid #C5D8F0;border-radius:6px;
      padding:5px 10px;font-size:10px;color:#4A6080;font-weight:600}
.shot.wall .status{background:#EDE9FE;border-top-color:#DDD6FE;color:#4C1D95;font-weight:600}
.shot.wall .netbadge{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
      border-radius:5px;padding:3px 8px;font-size:9.5px;font-weight:700;color:#fff;
      letter-spacing:.3px}

/* ── Bandeau d'appel à l'action ─────────────────────────────────────────── */
.deal{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.dcard{border:1px solid var(--line);border-radius:18px;padding:26px;background:#fff}
.dcard .h{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.dcard .h .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.dcard h3{font-size:17px;margin:0}
.dcard ul{margin:0;padding-left:19px;color:var(--grey);font-size:15px;line-height:1.65}
.dcard li{margin-bottom:8px}
.dcard li:last-child{margin-bottom:0}

.callout{background:var(--wash);border:1px solid var(--line);border-radius:22px;
      padding:44px 42px;margin-top:34px}
.callout h3{font-size:23px;margin-bottom:12px}
.callout p{color:var(--grey);max-width:720px}

/* ── Pied de page ───────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:48px 0 56px;color:var(--grey);font-size:15px;
      background:var(--wash)}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:32px}
footer h4{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--grey-l);
      margin:0 0 14px;font-weight:700}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:var(--grey)}
footer a:hover{color:var(--ink)}
.fine{border-top:1px solid var(--line);padding-top:24px;font-size:13px;line-height:1.65;
      color:var(--grey-l)}
.fine .legal{margin-top:14px}

/* ── Impression ─────────────────────────────────────────────────────────── */
@media print{
  .topbar{position:static;background:#fff}
  .nav,.navtoggle,.lang,.btn{display:none !important}
  section{page-break-inside:avoid}
  .card:hover{box-shadow:none;transform:none}
  .shot{box-shadow:none}
  a{color:var(--ink)}
  footer{background:#fff}
}

/* ── Adaptatif ──────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .grid.g3,.tiles{grid-template-columns:repeat(2,1fr)}
  .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  h1{font-size:38px;letter-spacing:-1px} h2{font-size:28px;letter-spacing:-.5px}
  .lead{font-size:19px} .sub{font-size:17px}
  .wrap{padding:0 20px}
  .hero{padding:52px 0 44px}
  section{padding:48px 0}
  .grid,.grid.g3,.stats,.deal,.bans,.tiles,.fcols{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .arrow{transform:rotate(90deg);padding:8px 0}
  .callout{padding:30px 24px}
  .shot .cols{grid-template-columns:1fr}
  .shot.wall .cols{grid-template-columns:1fr}
  .shot.wall .mid{flex-direction:row;padding:4px 0}
  .shot .bar .right{display:none}

  .navtoggle{display:flex}
  .nav{position:absolute;top:68px;left:0;right:0;background:#fff;
       border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
       gap:0;padding:8px 20px 18px;display:none;
       box-shadow:0 10px 24px rgba(22,50,74,.10)}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav .lang{align-self:flex-start;margin-top:14px}
  .nav .btn{margin-top:14px}
}

/* ══════════════════════════════════════════════════════════════════════════
   VERSION 11 — « le produit d'abord »
   La maquette de l'ecran quitte la section Produit et occupe la moitie droite
   du hero. Chez les autres propositions cette moitie est vide ; ici elle
   montre l'outil au travail des la premiere seconde. Aucun texte ne change :
   seule l'architecture de la page bouge.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le hero respire plus large que le reste de la page pour loger la maquette */
.hwrap{max-width:1300px;margin:0 auto;padding:0 32px}

/* Bande claire pleine largeur derriere le hero : la maquette blanche s'en
   detache. Un vrai conteneur, pas un pseudo-element en 100vw — celui-ci
   depassait de la largeur de l'ascenseur et faisait defiler la page en travers. */
.heroband{background:linear-gradient(180deg,var(--wash) 0%,#fff 94%);
     border-bottom:1px solid var(--line)}
.hero.split{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);
     gap:54px;align-items:center;padding-top:64px;padding-bottom:72px}
.hero.split .eyebrow{margin-bottom:22px}
.hero.split h1{font-size:40px;line-height:1.12;letter-spacing:-1.1px;margin-bottom:18px}
.hero.split .lead{font-size:18px;margin-bottom:26px}
.hero.split .motto{font-size:15.5px;padding:13px 19px;gap:11px}
.hero.split .motto .tick{width:22px;height:22px}
.hero.split .cta-row{margin-top:26px}

/* Maquette reduite pour tenir dans la colonne sans perdre sa lisibilite */
.hshot{min-width:0}
.hshot .shot{font-size:12px}
.hshot .shot .bar{height:34px}
.hshot .shot .cols{grid-template-columns:1.5fr 1fr}
.hshot .shot .letter{font-size:10.2px;line-height:1.78;padding:10px 11px}
.hshot .shot .codes{padding:7px;gap:6px}
.hshot .shot .ccard{padding:6px 8px 6px 12px}
.hshot .shotcap{margin-top:14px;font-size:13px}

/* La section Produit n'a plus de maquette : son premier bloc remonte */
#produit .sub,#product .sub{margin-bottom:34px}

@media (max-width:1120px){
  .hwrap{max-width:1080px}
  .hero.split{grid-template-columns:1fr;gap:40px;padding-top:52px;padding-bottom:58px}
  .hero.split h1{font-size:42px}
  .hero.split .lead{max-width:720px}
  .hshot .shot{font-size:12.5px}
  .hshot .shot .letter{font-size:11px}
}
@media (max-width:860px){
  .hwrap{padding:0 20px}
  .hero.split{padding-top:44px;padding-bottom:48px;gap:32px}
  .hero.split h1{font-size:34px;letter-spacing:-.9px}
  .hero.split .lead{font-size:17.5px}
}

/* Le nom du produit, en bleu de marque partout dans le corps de texte.
   Jamais sur les boutons (texte blanc) ni sur le logo de la barre. */
.cs{color:var(--bleu)}

/* ══ Maquette « Tâches » — le premier onglet de CodiSuite ═════════════════
   Colonnes, statuts et couleurs repris de CodiSuite/codisuite.py
   (TRANSLATIONS, STATUT_STYLE, CHIP_TINT). Toute retouche du programme qui
   touche a ces libelles doit se repercuter ici.
   ════════════════════════════════════════════════════════════════════════ */
.shot .thdr{display:flex;align-items:center;gap:8px;padding:7px 10px;
     background:#E8EEF3;border-bottom:1px solid #C5D8F0;
     font-size:11.5px;font-weight:700;color:#0A4D8C}
.shot .chips{display:flex;gap:4px;margin-left:4px}
.shot .chips i{font-style:normal;font-size:9.5px;font-weight:700;
     border-radius:999px;padding:2px 8px;white-space:nowrap}
.shot .chips .all{background:#E5F3FD;color:#0A6EBD}
.shot .chips .ps {background:#F3EEFB;color:#6D28D9}
.shot .chips .en {background:#E5F3FD;color:#0A6EBD}
.shot .chips .av {background:#FEF3E2;color:#B45309}
.shot .chips .vl {background:#E8F5E9;color:#2E7D32}
.shot .thdr .b{margin-left:auto;display:flex;gap:5px}
.shot .thdr .b i{font-style:normal;background:#fff;border:1px solid #C5D8F0;
     border-radius:5px;padding:3px 8px;font-size:10px;font-weight:600;
     color:#4A6080;white-space:nowrap}
.shot .thdr .b i.p{background:#34A853;border-color:#34A853;color:#fff}

/* min-width:0 obligatoire : la regle generique table{min-width:560px} du site
   s'applique aussi ici et faisait deborder la maquette de son cadre. */
.shot table.tks{width:100%;min-width:0;border-collapse:collapse;background:#fff;
     font-size:10.5px}
.shot .tks th{background:#F4F9FD;color:#4A6080;font-size:9.5px;font-weight:700;
     letter-spacing:.3px;text-transform:uppercase;text-align:left;
     padding:6px 9px;border-bottom:1px solid #C5D8F0;white-space:nowrap}
.shot .tks td{padding:7px 9px;border-bottom:1px solid #EDF2F7;color:#1C2B3A}
.shot .tks tr:last-child td{border-bottom:none}
.shot .tks .c{text-align:center}
.shot .tks .sj{font-family:var(--mono);font-weight:700;white-space:nowrap}
.shot .tks .dt{color:#4A6080}
.shot .tks .st{font-weight:700;white-space:nowrap}
/* La pastille reprend la couleur du statut, comme la ligne du Treeview */
.shot .tks .st::before{content:"";display:inline-block;width:7px;height:7px;
     border-radius:50%;margin-right:6px;background:currentColor}
.shot .tks .r-ps{background:#F7F4FC} .shot .tks .r-ps .st{color:#6D28D9}
.shot .tks .r-en{background:#F0F8FE} .shot .tks .r-en .st{color:#0A6EBD}
.shot .tks .r-av{background:#FFF9F0} .shot .tks .r-av .st{color:#B45309}
.shot .tks .r-vl{background:#FFFFFF} .shot .tks .r-vl .st{color:#2E7D32}

@media (max-width:860px){
  /* « Reçue » et « Détail » sautent : le statut et le DP suffisent. Les
     libelles doivent aussi pouvoir passer a la ligne — sinon la largeur
     minimale du tableau depasse le cadre, qui est en overflow:hidden, et les
     colonnes de droite sont coupees sans etre atteignables. */
  .shot .tks .hid-s{display:none}
  .shot .chips{display:none}
  .shot table.tks{font-size:9.5px}
  .shot .tks th,.shot .tks td{padding:5px 6px}
  .shot .tks .st,.shot .tks .sj{white-space:normal}
}

/* Bandeau des trois USP : la section porte deja son padding. */
#valeur .stats{margin-bottom:0}
/* Les trois bulles ne portent qu'une phrase : ni nombre, ni texte de detail. */
#valeur .stat{display:flex;align-items:center}
#valeur .stat .t strong{font-size:17.5px;line-height:1.4;margin-bottom:0}