/* ══════════════════════════════════════════════════════════════════
     TANIA — DA « GRAPHITE VERT PÂLE »
     Source de vérité : css/DESIGN-SYSTEM-GRAPHITE.html
     Mapping des anciens tokens (conservés pour compat article/simulator/inline) :
       --ink→#151E17 · --ink-soft→ink2 #687A6C · --ink-faint→mut #92A697
       --emerald→green #25D366 · --emerald-deep→on-green #0B2013 (texte accent)
       --paper→tile #FFF · --mist→tile2 #F0F8F2 · --mint→#D2F7E1 (chips, extrait de --tagok)
       --line→#1A231C (contour structurel 2.5px) · --line-strong→#1A231C
       --rowline (nouveau)→#E5EFE8 (filets 2px) · --navy→#121A14
       ombres→dures 0 blur : 7/5/3 px #CFE2D4 (--sh) ou #A9E2BE (--shg)
       polices→Archivo Black (display, graisse unique 400) + Space Grotesk (corps)
     ══════════════════════════════════════════════════════════════════ */
  :root{
    --ink:#151E17;--ink-soft:#687A6C;--ink-faint:#92A697;
    --emerald:#25D366;--emerald-deep:#0B2013;--forest:#25D366;--forest-hover:#2FDC7B;--forest-dark:#0B2013;
    --wa-header:#121A14;--wa-bubble:#DCF8C6;--wa-bg:#ECE5DD;
    --paper:#FFFFFF;--mist:#F0F8F2;--mint:#D2F7E1;--navy:#121A14;
    --line:#1A231C;--line-strong:#1A231C;--rowline:#E5EFE8;--bar:#E4EFE7;
    --bg:#E6F2E8;--tile:#FFFFFF;--tile2:#F0F8F2;
    --sh:#CFE2D4;--shg:#A9E2BE;
    --shadow:7px 7px 0 var(--sh);--shadow-soft:5px 5px 0 var(--sh);--shadow-xs:3px 3px 0 var(--sh);
    --grad:linear-gradient(135deg,#25D366,#2FDC7B);--gradink:#0B2013;
    --herog:linear-gradient(135deg,#25D366 0%,#36DD80 60%,#6BE8A4 100%);--heroink:#0B2013;
    --wa:linear-gradient(135deg,#121A14,#212B22);--wat:#4FE690;--wap:#B5C4B9;
    --tagok:linear-gradient(135deg,#9BEDBD,#D2F7E1);
    --font-display:'Archivo Black',sans-serif;
    --font-body:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --r-sm:12px;--r-md:14px;--r-lg:20px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;scroll-behavior:smooth;overflow-x:hidden;}
  body{font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  a{color:inherit;text-decoration:none;}
  :focus-visible{outline:2px solid #25D366;outline-offset:2px;border-radius:6px;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 32px;}

  /* buttons — press pattern DS 5.1/5.2 */
  .btn{font-family:var(--font-body);font-weight:700;font-size:14px;cursor:pointer;border-radius:var(--r-md);display:inline-flex;align-items:center;gap:9px;transition:.12s;}
  .btn-primary{background:var(--grad);color:var(--gradink);border:2.5px solid var(--line);padding:12px 20px;box-shadow:5px 5px 0 var(--shg);}
  .btn-primary:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--shg);}
  .btn-primary:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--shg);}
  .btn-ghost{background:transparent;color:var(--ink);border:0;padding:12px 6px;font-weight:700;}
  .btn-ghost:hover .arr{transform:translateX(4px);}
  .btn-outline{background:var(--tile);color:var(--ink);border:2.5px solid var(--line);padding:12px 18px;box-shadow:3px 3px 0 var(--sh);}
  .btn-outline:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--sh);}
  .btn-block{width:100%;justify-content:center;}
  .arr{display:inline-block;transition:transform .16s;}

  /* section scaffolding */
  section{position:relative;}
  .pad{padding:94px 0;}
  .pad-sm{padding:74px 0;}
  .bg-mist{background:var(--tile2);}
  .bg-mint{background:var(--tile2);}
  .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:9px;}
  .eyebrow .dot{width:9px;height:9px;border-radius:50%;background:#25D366;border:2px solid var(--line);}
  .h2{font-family:var(--font-display);font-weight:400;color:var(--ink);font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:0;line-height:1.14;margin:14px 0 0;}
  .lead{font-size:17px;font-weight:500;color:var(--ink-soft);line-height:1.62;margin:16px 0 0;}
  .shead{max-width:660px;}
  .shead.center{margin:0 auto;text-align:center;}
  .uline{position:relative;color:var(--ink);white-space:nowrap;}
  .uline svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.34em;color:#25D366;}

  /* nav */
  header.nav{position:sticky;top:0;z-index:50;background:var(--bg);padding:14px 16px;}
  header.nav .wrap{max-width:none;padding:11px 20px;background:var(--tile);border:1.5px solid var(--line);border-radius:14px;box-shadow:3px 3px 0 var(--line);}
  .nav-in{display:flex;align-items:center;justify-content:space-between;}
  .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:400;font-size:18px;letter-spacing:0;color:var(--ink);}
  header.nav .brand{color:var(--line);}
  .brand .mark{width:32px;height:32px;border-radius:9px;background:#25D366;border:2.5px solid var(--line);box-shadow:3px 3px 0 var(--line);display:grid;place-items:center;color:#FFFFFF;line-height:1;transition:transform .12s ease-out,box-shadow .12s ease-out;}
  .brand .mark.mark-alt{background:#FFFFFF;}
  .brand .mark svg{display:block;width:20px;height:20px;}
  header.nav .brand:hover .mark{transform:translate(3px,3px);box-shadow:0 0 0 var(--line);}
  nav.links{display:flex;align-items:center;gap:28px;}
  nav.links a{font-size:13.5px;font-weight:700;color:var(--ink);transition:color .15s;}
  nav.links a:hover{color:var(--ink-soft);}
  header.nav nav.links{gap:6px;}
  header.nav nav.links a{color:#3E4A41;font-weight:600;padding:8px 13px;border-radius:9px;border:1.5px solid transparent;transition:background .14s ease,color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease;}
  header.nav nav.links a:hover{background:var(--tile2);color:var(--line);border-color:var(--line);box-shadow:2px 2px 0 var(--line);transform:translate(-1px,-1px);}
  header.nav nav.links a:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--line);}
  nav.links a.cta-mobile{display:none;}
  .nav-cta{display:flex;align-items:center;gap:18px;}
  header.nav .nav-cta .btn-primary{background:#4ADE80;color:#0B3D24;border:1.5px solid var(--line);border-radius:8px;box-shadow:3px 3px 0 var(--line);padding:9px 18px;font-weight:500;transition:transform .12s ease-out,box-shadow .12s ease-out;}
  header.nav .nav-cta .btn-primary:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--line);}
  .menu-btn{display:none;}

  /* hero */
  .hero{overflow:hidden;background:var(--bg);}
  .hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;padding:56px 0 36px;}
  .kicker{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--tile);border:2px solid var(--line);padding:7px 14px;border-radius:999px;box-shadow:2px 2px 0 var(--sh);}
  .kicker .dot{width:9px;height:9px;border-radius:50%;background:#25D366;border:2px solid var(--line);}
  h1.title{font-family:var(--font-display);font-weight:400;color:var(--ink);font-size:clamp(1.9rem,3.6vw,2.85rem);line-height:1.12;letter-spacing:0;margin:26px 0 0;}
  p.hlede{font-size:17px;font-weight:500;line-height:1.62;color:var(--ink-soft);max-width:30em;margin:24px 0 0;}
  .assurance{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:14px;font-weight:600;color:var(--ink);background:var(--tile);border:2.5px solid var(--line);border-radius:var(--r-md);padding:11px 16px;box-shadow:3px 3px 0 var(--shg);}
  .assurance .ck{flex:none;color:var(--ink);}
  .cta-row{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap;}
  .micro{margin-top:22px;font-size:13px;font-weight:500;color:var(--ink-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .micro .sep{width:5px;height:5px;border-radius:50%;background:var(--ink-faint);}

  /* phone (mock WhatsApp — cadre graphite, intérieur WhatsApp authentique) */
  .stage{position:relative;display:flex;justify-content:center;}
  .phone{position:relative;width:312px;height:632px;background:var(--wa);border:2.5px solid var(--line);border-radius:46px;padding:11px;box-shadow:7px 7px 0 var(--shg);}
  .screen{position:relative;width:100%;height:100%;background:var(--wa-bg);border-radius:36px;overflow:hidden;display:flex;flex-direction:column;}
  .notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:118px;height:26px;background:#121A14;border-radius:0 0 16px 16px;z-index:6;}
  .status{position:relative;z-index:5;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;}
  .status .right{display:flex;align-items:center;gap:5px;}
  .bars{display:flex;align-items:flex-end;gap:1.5px;height:11px;}
  .bars i{width:2.5px;background:var(--ink);border-radius:1px;}
  .bars i:nth-child(1){height:4px}.bars i:nth-child(2){height:6px}.bars i:nth-child(3){height:8px}.bars i:nth-child(4){height:11px}
  .batt{width:18px;height:10px;border:1.5px solid var(--ink);border-radius:3px;position:relative;}
  .batt::after{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:11px;background:var(--ink);border-radius:1px;}
  .wa-top{display:flex;align-items:center;gap:11px;background:var(--wa);color:#fff;padding:11px 14px;}
  .wa-top .av{width:38px;height:38px;border-radius:50%;background:var(--grad);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--font-display);font-weight:400;color:var(--gradink);font-size:16px;}
  .wa-top .who{flex:1;line-height:1.2;}
  .wa-top .who b{font-size:15px;font-weight:600;color:var(--wat);}
  .wa-top .who span{font-size:11.5px;color:var(--wap);}
  .wa-top .icons{display:flex;gap:16px;opacity:.95;}
  .thread{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:10px;overflow:hidden;}
  .row{display:flex;}
  .row.out{justify-content:flex-end;}
  .bubble{max-width:84%;border-radius:14px;padding:9px 11px;font-size:13.5px;line-height:1.45;box-shadow:2px 2px 0 rgba(26,35,28,.12);}
  .bubble.out{background:var(--wa-bubble);border-top-right-radius:4px;color:#0B2013;}
  .bubble.in{background:#fff;border-top-left-radius:4px;color:var(--ink);}
  .time{display:block;text-align:right;font-size:10.5px;color:#5e6b62;margin-top:3px;}
  .tick{color:#34B7F1;font-weight:700;}
  .pcard{margin-top:7px;border:2px solid var(--line);border-radius:12px;overflow:hidden;}
  .pcard .head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--tile2);border-bottom:2px solid var(--rowline);}
  .pcard .head b{font-size:12.5px;white-space:nowrap;}
  .badge{font-size:10px;font-weight:700;color:var(--ink);background:var(--tagok);border:2px solid var(--line);border-radius:9px;padding:3px 8px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
  .pcard .lines{padding:8px 10px;display:grid;gap:4px;}
  .pcard .lines div{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;}
  .pcard .lines .k{color:var(--ink-faint);}
  .pcard .lines .v{font-weight:600;color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .dl{display:flex;align-items:center;gap:7px;padding:9px 10px;border-top:2px solid var(--rowline);color:var(--ink);font-weight:700;font-size:12.5px;}
  .typing{display:inline-flex;gap:4px;align-items:center;background:#fff;border-radius:14px;border-top-left-radius:4px;padding:11px 13px;box-shadow:2px 2px 0 rgba(26,35,28,.12);}
  .typing i{width:7px;height:7px;border-radius:50%;background:#9fb0a6;animation:blink 1.1s infinite ease-in-out;}
  .typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
  @keyframes blink{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
  .compose{height:46px;background:#F6F6F6;display:flex;align-items:center;padding:0 12px;gap:10px;border-top:1px solid #e4e4e4;}
  .compose .field{flex:1;height:30px;background:#fff;border-radius:16px;display:flex;align-items:center;padding:0 13px;color:var(--ink-faint);font-size:12.5px;}
  .compose .mic{width:30px;height:30px;border-radius:50%;background:var(--grad);border:2px solid var(--line);display:grid;place-items:center;color:var(--gradink);}
  .pill{position:absolute;top:36px;right:-14px;z-index:20;background:var(--tile);border:2.5px solid var(--line);border-radius:16px;padding:10px 13px;box-shadow:5px 5px 0 var(--sh);display:flex;align-items:center;gap:10px;}
  .pill .ic{width:30px;height:30px;border-radius:9px;background:var(--tagok);border:2px solid var(--line);display:grid;place-items:center;color:var(--ink);}
  .pill .tx b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.2;}
  .pill .tx span{font-size:11px;font-weight:500;color:var(--ink-soft);}

  /* problem cards */
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
  .pbox{background:var(--tile);border:2.5px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:5px 5px 0 #25D366;transition:.12s;}
  .pbox:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #25D366;}
  .picon{width:46px;height:46px;border-radius:12px;background:var(--tagok);border:2px solid var(--line);display:grid;place-items:center;color:var(--ink);margin-bottom:18px;}
  .pbox h3{font-family:var(--font-display);font-weight:400;font-size:16px;letter-spacing:0;margin:0 0 8px;}
  .pbox p{font-size:14px;font-weight:500;color:var(--ink-soft);margin:0;line-height:1.55;}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:54px;position:relative;}
  .step{text-align:center;padding:0 10px;}
  .step .node{width:64px;height:64px;border-radius:16px;background:#FFFFFF;border:2.5px solid var(--line);display:grid;place-items:center;margin:0 auto 18px;color:#25D366;position:relative;z-index:2;box-shadow:3px 3px 0 #25D366;}
  .step.active .node{background:#FFFFFF;color:#25D366;box-shadow:3px 3px 0 #25D366;}
  .step .num{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);}
  .step h3{font-family:var(--font-display);font-weight:400;font-size:14.5px;margin:6px 0 7px;}
  .step p{font-size:13px;font-weight:500;color:var(--ink-soft);margin:0;line-height:1.5;}
  .steps .track{position:absolute;top:32px;left:12.5%;right:12.5%;height:2.5px;background:var(--line);z-index:1;}
  .disclaim{display:flex;gap:12px;align-items:flex-start;max-width:720px;margin:46px auto 0;background:var(--tile);border:2px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:3px 3px 0 var(--sh);}
  .disclaim svg{flex:none;color:var(--ink-soft);margin-top:2px;}
  .disclaim p{margin:0;font-size:13.5px;font-weight:500;color:var(--ink-soft);line-height:1.55;}
  .disclaim b{color:var(--ink);font-weight:700;}

  /* Ruban typographique — defilement metiers */
  .trades-ribbon{margin-top:44px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);display:flex;}
  .ribbon-track{display:flex;align-items:center;gap:28px;flex-shrink:0;padding-right:28px;animation:ribbon-scroll 70s linear infinite;}
  .ribbon-track > span{font-family:var(--font-display);font-weight:400;font-size:clamp(1.15rem,2vw,1.55rem);letter-spacing:0;color:var(--ink-soft);white-space:nowrap;line-height:1;}
  .ribbon-track .sep{font-family:var(--font-body);font-weight:400;font-size:.55em;color:#25D366;position:relative;top:-.18em;}
  @keyframes ribbon-scroll{from{transform:translateX(0);}to{transform:translateX(calc(-100% - 28px));}}
  .trades-ribbon:hover .ribbon-track{animation-play-state:paused;}

  /* dashboard showcase — app-like (point de jonction vitrine↔produit) */
  .dash-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center;}
  .checks{margin:24px 0 30px;display:grid;gap:12px;}
  .checks li{list-style:none;display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;color:var(--ink);}
  .checks .ck{width:24px;height:24px;border-radius:9px;background:var(--tagok);border:2px solid var(--line);display:grid;place-items:center;color:var(--ink);flex:none;}
  .dash{position:relative;}
  .dwin{background:var(--tile);border:2.5px solid var(--line);border-radius:var(--r-lg);box-shadow:7px 7px 0 var(--sh);overflow:hidden;}
  .dwin .bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:2px solid var(--rowline);}
  .dwin .bar .lg{font-family:var(--font-display);font-weight:400;color:var(--ink);font-size:15px;letter-spacing:0;}
  .dwin .bar .tag{font-size:10px;font-weight:700;color:var(--ink);background:var(--tile);border:2px solid var(--line);border-radius:9px;padding:3px 8px;}
  .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 18px 4px;background:var(--tile);}
  .metric{background:var(--tile2);border:2px solid var(--line);border-radius:14px;padding:12px;box-shadow:2px 2px 0 var(--sh);}
  .metric:first-child{background:var(--herog);color:var(--heroink);box-shadow:2px 2px 0 var(--shg);}
  .metric:first-child .lbl,.metric:first-child .sub{color:var(--heroink);}
  .metric .lbl{font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);}
  .metric .val{font-family:var(--font-display);font-weight:400;font-size:19px;margin:5px 0 4px;letter-spacing:0;font-variant-numeric:tabular-nums;}
  .metric .sub{font-size:10.5px;font-weight:700;display:flex;align-items:center;gap:4px;}
  .up{color:var(--gradink);}.warn{color:var(--ink-soft);}.danger{color:var(--ink-soft);}.info{color:var(--ink-soft);}
  .dtable{padding:6px 18px 16px;}
  .dtable .th,.dtable .tr{display:grid;grid-template-columns:1.2fr 1.3fr .9fr .9fr;align-items:center;font-size:12px;padding:10px 0;}
  .dtable .th{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);border-bottom:2px solid var(--rowline);}
  .dtable .tr{border-bottom:2px solid var(--rowline);}
  .dtable .tr:last-child{border-bottom:0;}
  .dtable .tr:hover{background:var(--tile2);}
  .dtable .mono{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;font-size:11.5px;letter-spacing:.01em;}
  .dtable .amt{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}
  .spill{justify-self:end;font-size:10px;font-weight:700;border:2px solid var(--line);border-radius:9px;padding:3px 8px;min-width:74px;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:var(--tile);color:var(--ink);}
  .s-paid{background:var(--tagok);}
  .s-quote{background:var(--tile);}
  .s-relance{background:var(--tile);}
  .s-emise{background:var(--tile);}
  .sdot{display:none;}
  .dfloat{position:absolute;top:-52px;right:-10px;background:var(--tile);border:2.5px solid var(--line);border-radius:16px;box-shadow:5px 5px 0 var(--sh);padding:12px 14px;z-index:5;min-width:186px;}
  .dfloat .ttl{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;margin-bottom:9px;}
  .dfloat .ttl .b{width:24px;height:24px;border-radius:8px;background:var(--tagok);border:2px solid var(--line);display:grid;place-items:center;color:var(--ink);}
  .dfloat ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;}
  .dfloat li{font-size:12px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;}
  .dfloat .pt{width:9px;height:9px;border-radius:50%;border:2px solid var(--line);}

  /* comparison */
  .cmp{margin-top:48px;border:2.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:5px 5px 0 var(--sh);background:var(--tile);}
  .cmp .crow{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.15fr;}
  .cmp .crow>div{padding:16px 20px;border-bottom:2px solid var(--rowline);font-size:13.5px;font-weight:500;}
  .cmp .crow:last-child>div{border-bottom:0;}
  .cmp .chead>div{font-weight:400;font-family:var(--font-display);font-size:13px;letter-spacing:0;background:var(--tile2);}
  .cmp .lbl{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;}
  .cmp .lbl svg{color:var(--ink-faint);}
  .cmp .muted{color:var(--ink-soft);}
  .cmp .tania{background:var(--mint);color:var(--ink);font-weight:600;}
  .cmp .chead .tania{background:var(--tagok);color:var(--ink);}
  .xicon{color:var(--ink-faint);}.vicon{color:var(--ink);}

  /* ressources */
  .res-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
  .cal{margin-top:30px;}
  .cal .cl{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;}
  .cal .item{display:flex;align-items:flex-start;gap:14px;padding:0 0 18px;position:relative;}
  .cal .item:not(:last-child)::before{content:"";position:absolute;left:8px;top:20px;bottom:0;width:2.5px;background:var(--sh);}
  .cal .ring{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);background:var(--tile);flex:none;margin-top:2px;z-index:1;}
  .cal .now .ring{background:var(--grad);}
  .cal .y{font-family:var(--font-display);font-weight:400;font-size:13.5px;width:84px;flex:none;}
  .cal .now .y{color:var(--ink);}
  .cal .txt{font-size:14px;font-weight:500;color:var(--ink-soft);}
  .testcard{background:var(--tile);border:2.5px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:7px 7px 0 var(--sh);transition:.12s;}
  .testcard:hover{transform:translate(2px,2px);box-shadow:5px 5px 0 var(--sh);}
  .testcard .pillmini{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--ink);background:var(--tagok);border:2px solid var(--line);border-radius:999px;padding:5px 12px;}
  .testcard h3{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:0;margin:16px 0 8px;}
  .testcard .qp{font-size:14px;font-weight:500;color:var(--ink-soft);margin:0 0 18px;}
  .simbox{border:2px solid var(--line);border-radius:var(--r-md);padding:16px;background:var(--tile2);}
  .simbox .tl{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--ink);letter-spacing:1.2px;text-transform:uppercase;}
  .simbox .tl .qn{color:var(--ink-faint);text-transform:none;letter-spacing:0;font-weight:500;}
  .progress{height:7px;border-radius:3px;background:var(--bar);border:1.5px solid var(--line);margin:10px 0 16px;overflow:hidden;}
  .progress i{display:block;height:100%;width:30%;background:var(--grad);}
  .simq{font-weight:700;font-size:14px;margin-bottom:12px;}
  .opt{display:flex;align-items:center;gap:10px;border:2px solid var(--line);border-radius:12px;padding:11px 14px;font-size:13.5px;font-weight:600;margin-bottom:8px;background:var(--tile);}
  .opt .o{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);}
  .opt.sel{background:var(--tagok);}
  .opt.sel .o{background:#25D366;box-shadow:inset 0 0 0 3px #fff;}
  .res-note{text-align:center;font-size:13px;font-weight:500;color:var(--ink-soft);margin-top:34px;}
  .res-note a{display:inline-block;padding:10px 0;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

  /* pricing */
  .prices{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:34px auto 0;}
  .price{background:var(--tile);border:2.5px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;box-shadow:5px 5px 0 var(--sh);position:relative;display:flex;flex-direction:column;transition:.12s;}
  .price:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--sh);}
  .price.reco{box-shadow:7px 7px 0 var(--shg);}
  .price.reco:hover{box-shadow:5px 5px 0 var(--shg);}
  .reco-tag{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--grad);color:var(--gradink);border:2px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 14px;border-radius:999px;display:inline-flex;gap:6px;align-items:center;box-shadow:2px 2px 0 var(--sh);}
  .ptier{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);font-weight:700;}
  .pprice{font-family:var(--font-display);font-weight:400;font-size:38px;letter-spacing:0;margin:14px 0 2px;font-variant-numeric:tabular-nums;}
  .pprice span{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink-faint);letter-spacing:0;}
  .pdesc{font-size:14px;font-weight:500;color:var(--ink-soft);margin:6px 0 22px;min-height:42px;}
  .pfeat{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:13px;flex:1;}
  .pfeat li{display:flex;align-items:flex-start;gap:11px;font-size:14px;font-weight:600;color:var(--ink);}
  .pfeat .ck{width:22px;height:22px;border-radius:8px;background:var(--tagok);border:2px solid var(--line);display:grid;place-items:center;color:var(--ink);flex:none;margin-top:1px;}
  .psecondary{display:block;width:100%;text-align:center;margin-top:6px;padding:12px 0;font-size:13px;font-weight:600;color:var(--ink-soft);text-decoration:none;transition:color .15s;}
  .psecondary:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
  .pnote{text-align:center;font-size:13px;font-weight:500;color:var(--ink-soft);margin-top:26px;}
  /* ── Pricing v2 : niveau 0 Réception, toggle, méta comptes/factures ── */
  .reception{display:flex;align-items:center;justify-content:space-between;gap:26px;max-width:1080px;margin:44px auto 0;background:var(--tile);border:2.5px solid var(--line);border-radius:var(--r-lg);padding:22px 26px;box-shadow:5px 5px 0 #25D366;}
  .reception-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
  .reception-head h3{font-family:var(--font-display);font-weight:400;font-size:17px;margin:0;}
  .reception-badge{background:var(--tagok);border:2px solid var(--line);border-radius:999px;padding:3px 12px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
  .reception-txt p{margin:0;font-size:14.5px;font-weight:500;color:var(--ink-soft);line-height:1.6;max-width:56ch;}
  .reception .btn{flex:none;}
  .billing{display:flex;justify-content:center;gap:8px;margin:30px auto 0;background:var(--tile);border:2px solid var(--line);border-radius:999px;padding:5px;width:max-content;box-shadow:2px 2px 0 var(--sh);}
  .billing .bopt{font-family:var(--font-body);font-size:13.5px;font-weight:700;color:var(--ink-soft);background:none;border:0;border-radius:999px;padding:8px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .14s ease,color .14s ease;}
  .billing .bopt.on{background:var(--grad);color:var(--gradink);border:2px solid var(--line);padding:6px 16px;}
  .billing .bsave{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:var(--mint);border:1.5px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--ink);}
  .pmeta{display:flex;gap:10px;margin:0 0 18px;flex-wrap:wrap;}
  .pmeta span{font-size:12.5px;font-weight:600;color:var(--ink);background:var(--tile2);border:2px solid var(--line);border-radius:999px;padding:5px 12px;}
  .pmeta b{font-weight:700;}

  /* story */
  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .story h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,3.1vw,2.45rem);letter-spacing:0;line-height:1.14;margin:16px 0 0;}
  .story .p{font-size:15.5px;font-weight:500;color:var(--ink-soft);line-height:1.6;margin:22px 0 0;max-width:26em;}
  .signature{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:22px;border-top:2px solid var(--rowline);}
  .signature .ava{width:42px;height:42px;border-radius:50%;background:var(--grad);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--font-display);font-weight:400;color:var(--gradink);}
  .signature b{display:block;font-size:14px;font-weight:700;}
  .signature span{font-size:12.5px;font-weight:500;color:var(--ink-soft);}
  .scards{display:grid;gap:14px;}
  .scard{display:flex;gap:18px;align-items:flex-start;background:var(--tile);border:2.5px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:5px 5px 0 #25D366;transition:.12s;}
  .scard:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #25D366;}
  .scard .n{font-family:var(--font-display);font-weight:400;font-size:13px;color:var(--ink);background:var(--tagok);border:2px solid var(--line);border-radius:8px;padding:2px 0;text-align:center;flex:none;width:34px;}
  .scard h3{font-family:var(--font-display);font-weight:400;font-size:15px;margin:0 0 7px;letter-spacing:0;}
  .scard p{margin:0;font-size:14px;font-weight:500;color:var(--ink-soft);line-height:1.55;}

  /* faq */
  .faq{max-width:760px;margin:46px auto 0;}
  .qa{border-top:2px solid var(--rowline);}
  .qa:last-child{border-bottom:2px solid var(--rowline);}
  .qa button{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;text-align:left;font-family:var(--font-display);font-weight:400;font-size:15px;color:var(--ink);letter-spacing:0;}
  .qa .ic{flex:none;color:#25D366;transition:transform .2s;font-size:22px;line-height:1;width:22px;text-align:center;}
  .qa[aria-expanded="true"] .ic,.qa button[aria-expanded="true"] .ic{transform:rotate(45deg);}
  .qa .ans{overflow:hidden;max-height:0;transition:max-height .28s ease;}
  .qa .ans p{margin:0;padding:0 4px 24px;font-size:14.5px;font-weight:500;color:var(--ink-soft);line-height:1.6;max-width:62ch;}

  /* final cta — tuile sombre WhatsApp (DS 5.5) */
  .cta-final{background:var(--wa);color:var(--wap);overflow:hidden;border-top:2.5px solid var(--line);border-bottom:2.5px solid var(--line);}
  .cta-inner{position:relative;max-width:560px;margin:0 auto;text-align:center;}
  .cta-final h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,3.1vw,2.4rem);letter-spacing:0;color:var(--wat);margin:0;}
  .cta-final .sub{font-size:15.5px;font-weight:500;color:var(--wap);margin:16px auto 0;max-width:42ch;line-height:1.55;}
  .formcard{background:var(--tile);border:2.5px solid var(--line);border-radius:var(--r-lg);box-shadow:7px 7px 0 var(--shg);padding:30px;margin-top:34px;text-align:left;color:var(--ink);}
  .field-label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink);margin:0 0 8px;}
  .field-label svg{color:var(--ink);}
  .inp{width:100%;height:50px;border:2.5px solid var(--line);border-radius:var(--r-md);background:var(--tile);box-shadow:3px 3px 0 var(--sh);padding:0 16px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink);margin-bottom:18px;transition:.12s;}
  .inp::placeholder{color:var(--ink-faint);}
  .inp:focus{outline:2px solid #25D366;outline-offset:2px;}
  textarea.inp{height:auto;min-height:104px;padding:12px 16px;line-height:1.5;resize:vertical;}
  .inp-error{background:var(--tile2);}
  .inp-error:focus{outline:2px solid var(--line);outline-offset:2px;}
  .field-err{display:none;margin:-12px 0 16px;font-size:12.5px;font-weight:700;color:var(--ink);}
  .success-title{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:0;margin:18px 0 8px;}
  .cta-foot{margin-top:26px;font-size:13px;font-weight:500;color:var(--wap);}
  .cta-foot a{display:inline-block;padding:8px 0;color:var(--wat);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

  /* footer — tuile sombre WhatsApp */
  footer{background:var(--wa);color:var(--wap);padding:64px 0 40px;}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;}
  .foot-brand .brand{color:#fff;margin-bottom:16px;}
  .foot-brand p{color:var(--wap);font-size:13.5px;font-weight:500;max-width:24ch;line-height:1.55;margin:0 0 16px;}
  .foot-loc{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--wap);}
  .foot-loc svg{color:var(--wat);}
  .fcol h4{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--wat);margin:0 0 16px;font-weight:700;font-family:var(--font-body);}
  .fcol a{display:block;padding:4px 0;font-size:13.5px;font-weight:500;color:var(--wap);margin-bottom:12px;transition:color .15s;}
  .fcol a:hover{color:#fff;}
  .foot-bottom{margin-top:48px;padding-top:24px;border-top:2px solid rgba(181,196,185,.25);font-size:12.5px;font-weight:500;color:var(--wap);}

  /* reveal */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);}
  .reveal.in{opacity:1;transform:none;}
  .stage .phone{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);}
  .stage.in .phone{opacity:1;transform:none;}
  .pill{opacity:0;transform:translateY(8px) scale(.96);transition:opacity .5s,transform .5s;}
  .pill.in{opacity:1;transform:none;}
  .reply{opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;}
  .reply.show{opacity:1;transform:none;}
  .typing-wrap{display:none;}
  .typing-wrap.show{display:flex;}

  @media (max-width:980px){
    header.nav{background:var(--bg);}
    header.nav nav.links.open a{color:var(--ink);}
    .hero-grid,.dash-grid,.res-grid,.story-grid{grid-template-columns:1fr;gap:46px;}
    .steps{grid-template-columns:repeat(2,1fr);gap:28px 8px;}
    .steps .track{display:none;}
    nav.links,.nav-cta .btn-primary{display:none;}
    .menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--line);border-radius:10px;background:var(--tile);box-shadow:3px 3px 0 var(--line);}
    nav.links.open{
      display:flex;flex-direction:column;align-items:stretch;gap:4px;
      position:fixed;left:0;right:0;top:96px;bottom:0;
      background:var(--bg);padding:24px 28px 32px;
      border-top:2.5px solid var(--line);
      z-index:60;overflow-y:auto;
    }
    nav.links.open a{
      font-size:17px;font-weight:700;color:var(--ink);
      padding:14px 4px;border-bottom:2px solid var(--rowline);
    }
    nav.links.open a:last-of-type{border-bottom:0;}
    nav.links a.cta-mobile{display:none;}
    nav.links.open a.cta-mobile{
      display:block;margin-top:18px;padding:14px 22px;
      background:var(--grad);color:var(--gradink);border:2.5px solid var(--line);border-radius:var(--r-md);box-shadow:3px 3px 0 var(--shg);
      text-align:center;font-weight:700;font-size:14px;border-bottom:2.5px solid var(--line);
    }
    body.nav-open{overflow:hidden;}
    .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}
    .foot-brand{grid-column:1 / -1;}
  }
  @media (max-width:768px){
    .foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
    .caps-grid{grid-template-columns:1fr;gap:36px;}
    .caps-lead .lead,.caps-input,.caps-note{max-width:none;}
  }
  @media (max-width:680px){
    .pgrid,.prices,.cmp .crow{grid-template-columns:1fr;}
    .prices .price.reco{order:-1;}
    .reception{flex-direction:column;align-items:flex-start;}
    .reception .btn{width:100%;justify-content:center;}
    .cmp .crow>div{border-bottom:2px solid var(--rowline);}
    .metrics{grid-template-columns:repeat(2,1fr);}
    .dfloat{display:none;}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .wrap{padding:0 20px;}
    .pad{padding:66px 0;}.pad-sm{padding:54px 0;}
    .brk{display:none;}
    h1.title{font-size:clamp(1.7rem,7.4vw,2.3rem);}
    .phone{width:282px;height:574px;}
    .pill{right:0;}
    .dtable .th,.dtable .tr{grid-template-columns:1.1fr 1fr .9fr;}
    .dtable .hide{display:none;}
  }
  @media (max-width:480px){
    .steps{grid-template-columns:1fr;gap:32px;}
    .foot-grid{grid-template-columns:1fr;gap:24px;}
    .foot-brand{grid-column:auto;}
  }
  @media (max-width:380px){
    .metrics{grid-template-columns:1fr;}
  }
  /* Garde-fous overflow : min-width 0 sur enfants grid/flex à risque */
  .hero-grid > *,.dash-grid > *,.res-grid > *,.story-grid > *,
  .caps-grid > *,.caps-cmds > *,.cmd,.cmd-in,.cmd-out,
  .dwin,.dtable .tr > *,.foot-grid > *,.metric{min-width:0;}
  .cmd-in,.cmd-out b,.cmd-out span{overflow-wrap:anywhere;}
  .caps-input-text{flex-wrap:wrap;min-width:0;}
  @media (prefers-reduced-motion:reduce){
    .reveal,.stage .phone,.pill,.reply{transition:none !important;opacity:1 !important;transform:none !important;}
    .typing i{animation:none;}
    .trades-track,.ribbon-track{animation:none !important;}
    html{scroll-behavior:auto;}
  }

  /* ─── Capabilities — grille asymetrique ─── */
  .caps-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start;}
  .caps-lead h2.h2{margin-top:14px;}
  .caps-lead .lead{max-width:440px;}
  .caps-input{margin-top:32px;background:var(--tile);border:2.5px solid var(--line);border-radius:var(--r-lg);box-shadow:5px 5px 0 #25D366;padding:18px 20px;max-width:420px;}
  .caps-input-lab{display:block;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;}
  .caps-input-row{display:flex;align-items:center;gap:12px;}
  .caps-input-ava{width:36px;height:36px;border-radius:50%;background:#25D366;border:2px solid var(--line);display:grid;place-items:center;flex-shrink:0;overflow:hidden;}
  .caps-input-ava svg{display:block;width:22px;height:22px;}
  .caps-input-text{font-family:var(--font-body);font-size:15px;color:var(--ink-soft);font-weight:500;display:inline-flex;align-items:center;}
  .caps-input-text .cur{display:inline-block;width:2px;height:1.05em;background:#25D366;margin-left:3px;animation:cap-blink 1.05s steps(2,start) infinite;}
  @keyframes cap-blink{to{visibility:hidden;}}
  .caps-note{margin-top:24px;font-size:13.5px;font-weight:500;color:var(--ink-soft);max-width:420px;line-height:1.55;}
  .caps-cmds{display:flex;flex-direction:column;gap:12px;}
  .cmd{background:var(--tile);border:2.5px solid var(--line);border-radius:var(--r-md);padding:16px 18px;transition:.12s;box-shadow:3px 3px 0 #25D366;}
  .cmd:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 #25D366;}
  .cmd-in{font-family:var(--font-display);font-weight:400;font-size:14px;color:var(--ink);letter-spacing:0;line-height:1.35;}
  .cmd-in .quote{color:#25D366;font-weight:400;margin:0 3px;font-size:1.05em;}
  .cmd-out{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;border-top:2px solid var(--rowline);font-size:13px;font-weight:500;color:var(--ink-soft);flex-wrap:wrap;}
  .cmd-arr{color:var(--ink);flex-shrink:0;}
  .cmd-out b{color:var(--ink);font-weight:700;font-family:var(--font-body);font-size:13px;}
  .cmd-out span{color:var(--ink-faint);}
  .cmd-out span::before{content:"·";margin:0 6px;color:var(--ink-faint);}

  @media (max-width:900px){
    .caps-grid{grid-template-columns:1fr;gap:36px;}
    .caps-lead .lead,.caps-input,.caps-note{max-width:none;}
  }
  @media (max-width:560px){
    .cmd{padding:14px 16px;}
    .cmd-in{font-size:13px;}
    .caps-input{padding:16px;}
  }
  @media (prefers-reduced-motion:reduce){
    .caps-input-text .cur{animation:none;}
  }

  /* Nav variant sans CTA #demo (pages internes) */
  header.nav .nav-cta .btn-primary[href^="/"]{display:inline-flex;}

  /* Footer reduit pour pages internes (memes classes que la home) */

  /* ══ MOTION PASS — cascade & micro-interactions (pull-up visuel) ══ */
  /* Reveals : translate/box-shadow réagissent vite au survol sans casser l'entrée .6s */
  .reveal{transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1),translate .15s ease-out,box-shadow .15s ease-out;}
  /* Press hover vif via `translate` (indépendante du transform du reveal) */
  .testcard:hover,.price:hover,.scard:hover,.pbox:hover{transform:none;translate:2px 2px;}
  /* Cascade des cartes sœurs (délais sur opacity+transform uniquement) */
  .scards .scard:nth-child(2),.pgrid .pbox:nth-child(2),.prices .price:nth-child(2){transition-delay:.12s,.12s,0s,0s;}
  .scards .scard:nth-child(3),.pgrid .pbox:nth-child(3){transition-delay:.24s,.24s,0s,0s;}
  /* Timeline : cascade interne des 4 étapes */
  .steps .step{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);}
  .steps.in .step{opacity:1;transform:none;}
  .steps.in .step:nth-of-type(1){transition-delay:.05s;}
  .steps.in .step:nth-of-type(2){transition-delay:.17s;}
  .steps.in .step:nth-of-type(3){transition-delay:.29s;}
  .steps.in .step:nth-of-type(4){transition-delay:.41s;}
  /* Pastilles d'étapes : pop au survol */
  .step .node{transition:transform .16s ease-out,box-shadow .16s ease-out;}
  .step:hover .node{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #25D366;}
  /* FAQ : le + réagit au survol */
  .qa button:hover .ic{transform:scale(1.25);}
  .qa button[aria-expanded="true"]:hover .ic{transform:rotate(45deg) scale(1.2);}
  /* Footer : liens qui glissent */
  .fcol a{transition:color .15s ease,translate .15s ease;}
  .fcol a:hover{translate:4px 0;}
  /* Points verts (kicker/eyebrow) : pulsation douce */
  @keyframes dot-pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.35);opacity:.75;}}
  .kicker .dot,.eyebrow .dot{animation:dot-pulse 2.4s ease-in-out infinite;}
  /* Tableaux & commandes : transitions douces */
  .dtable .tr{transition:background .15s ease;}
  .cmd{transition:transform .15s ease-out,box-shadow .15s ease-out;}
  @media (prefers-reduced-motion:reduce){
    .steps .step{transition:none !important;opacity:1 !important;transform:none !important;}
    .kicker .dot,.eyebrow .dot{animation:none !important;}
    .reveal{transition:none !important;}
  }

  /* Resserrage hero → première section (P3) */
  .hero + .pad{padding-top:44px;}

  /* Sélection de texte dans la DA */
  ::selection{background:#4ADE80;color:#0B2013;}