/* ============================================================
       VITRINE,styles spécifiques (s'appuient sur les tokens DS)
       ============================================================ */
    html { scroll-behavior: smooth; }
    body { background: var(--surface-page); }
    .container { width: 100%; max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--space-6); }
    img { max-width: 100%; display: block; }
    section { scroll-margin-top: 84px; }

    /* —— Header ———————————————————————————————— */
    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border-subtle);
    }
    .site-header .container { display: flex; align-items: center; gap: var(--space-6); height: 72px; }
    .brand-lockup { display: inline-flex; align-items: center; gap: 8px; }
    .brand-lockup img { height: 28px; width: auto; }
    .brand-tag { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-primary); letter-spacing: -0.01em; }
    .nav { display: flex; gap: var(--space-6); margin-left: auto; }
    .nav a { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-body); transition: color var(--duration-fast) var(--ease-standard); }
    .nav a:hover { color: var(--color-primary); }

    /* —— Buttons ——————————————————————————————— */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
      font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-sm);
      height: var(--control-h-md); padding-inline: var(--space-6);
      border-radius: var(--radius-pill); border: 0; cursor: pointer;
      transition: var(--transition-base); text-decoration: none; white-space: nowrap;
    }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
    .btn-accent { background: var(--color-accent); color: #fff; }
    .btn-accent:hover { background: var(--color-accent-hover); }
    .btn-accent:focus-visible { box-shadow: var(--ring-accent); }
    .btn-primary { background: var(--color-primary); color: #fff; }
    .btn-primary:hover { background: var(--color-primary-hover); }
    .btn-ghost { background: transparent; color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--border-default); }
    .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--color-primary); background: var(--surface-tint); }
    .btn-sm { height: var(--control-h-sm); font-size: var(--text-xs); padding-inline: var(--space-4); }
    .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

    /* —— Hero —————————————————————————————————— */
    .hero { position: relative; overflow: hidden; }
    .hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-12); align-items: center; padding-block: var(--space-20); }
    .hero-eyebrow { margin-bottom: var(--space-4); }
    .hero h1 { font-size: var(--text-4xl); font-weight: var(--weight-extra); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
    .hero h1 .grad { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .hero p.lead { font-size: var(--text-lg); color: var(--text-muted); margin: var(--space-5) 0 var(--space-8); max-width: 34ch; line-height: var(--leading-relaxed); }
    .hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
    .hero-visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
    .hero-visual img { width: 100%; height: 100%; object-fit: cover; }
    .hero-badge {
      position: absolute; left: var(--space-5); bottom: var(--space-5);
      background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
      border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
      display: flex; align-items: center; gap: var(--space-3); box-shadow: var(--shadow-sm);
    }
    .hero-badge .sq { width: 34px; height: 34px; }
    .hero-badge b { font-family: var(--font-heading); color: var(--text-strong); font-size: var(--text-sm); }
    .hero-badge span { font-size: var(--text-2xs); color: var(--text-muted); }

    /* —— Trust band ———————————————————————————— */
    .trust { background: var(--surface-invert); color: #fff; }
    .trust .container { padding-block: var(--space-8); text-align: center; }
    .trust .triad { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: #fff; }
    .trust .sub { color: var(--text-on-dark-muted); font-size: var(--text-sm); margin-top: var(--space-3); }

    /* —— Stats band ———————————————————————————— */
    .statsband { background: #fff; border-bottom: 1px solid var(--border-subtle); }
    .statsband .container { padding-block: var(--space-10); }
    .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); text-align: center; }
    .stat b { display: block; font-family: var(--font-heading); font-weight: var(--weight-extra); font-size: var(--text-3xl); background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
    .stat span { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }
    .stat:not(:last-child) { border-right: 1px solid var(--border-subtle); }
    @media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-4); } .stat { border-right: 0; } }

    /* —— Section header ————————————————————————— */
    .section { padding-block: var(--space-20); }
    .section.alt { background: var(--surface-muted); }
    .sec-head { text-align: center; max-width: 60ch; margin: 0 auto var(--space-12); }
    .sec-head .overline { margin-bottom: var(--space-3); }
    .sec-head h1, .sec-head h2 { font-size: var(--text-3xl); font-weight: var(--weight-extra); color: var(--text-strong); margin: 0; }
    .sec-head p { color: var(--text-muted); font-size: var(--text-lg); margin-top: var(--space-4); line-height: var(--leading-relaxed); }

    /* —— Tool cards (instruments) ——————————————— */
    .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: var(--space-6); }
    .tool-card {
      background: var(--surface-card); border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column;
      transition: var(--transition-base);
    }
    .tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .tool-screen {
      position: relative; aspect-ratio: 16/10; background: var(--gradient-navy);
      display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    .tool-screen .chrome { position: absolute; top: 0; left: 0; right: 0; height: 30px; background: var(--navy-950); display: flex; align-items: center; gap: 6px; padding-inline: 12px; }
    .tool-screen .chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--navy-500); display: block; }
    .tool-screen .glyph { width: 64px; height: 64px; color: var(--blue-300); }
    .tool-screen .glyph svg { width: 100%; height: 100%; }
    .tool-screen .preview-line { position: absolute; }
    .tool-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
    .tool-body .spec { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); }
    .tool-body h3 { font-size: var(--text-xl); color: var(--text-strong); font-weight: var(--weight-bold); }
    .tool-body p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); flex: 1; }
    .tool-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .chip { font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--text-brand); background: var(--surface-tint); border-radius: var(--radius-pill); padding: 3px 10px; }
    .tool-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
    .tool-actions .btn { flex: 1; }

    /* —— Method ———————————————————————————————— */
    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); counter-reset: step; }
    .step { position: relative; padding-top: var(--space-8); }
    .step::before {
      counter-increment: step; content: counter(step, decimal-leading-zero);
      font-family: var(--font-heading); font-weight: var(--weight-extra); font-size: var(--text-2xl);
      background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .step h4 { font-size: var(--text-lg); color: var(--text-strong); margin: var(--space-3) 0; }
    .step p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }
    .step:not(:last-child)::after { content: ""; position: absolute; top: 14px; right: -12px; width: 24px; height: 2px; background: var(--border-default); }
    .steps.steps-3 { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 760px) { .steps.steps-3 { grid-template-columns: 1fr; } }


    /* —— Contact CTA ———————————————————————————— */
    .cta { background: var(--gradient-navy); color: #fff; border-radius: var(--radius-xl); padding: var(--space-16); text-align: center; box-shadow: var(--shadow-app); }
    .cta h2 { color: #fff; font-size: var(--text-3xl); font-weight: var(--weight-extra); }
    .cta p { color: var(--text-on-dark-muted); font-size: var(--text-lg); margin: var(--space-4) auto var(--space-8); max-width: 50ch; }

    /* —— Footer ———————————————————————————————— */
    .site-footer { background: var(--navy-950); color: var(--text-on-dark-muted); }
    .site-footer .container { padding-block: var(--space-10); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
    .site-footer img { height: 26px; }
    .site-footer .links { display: flex; gap: var(--space-6); }
    .site-footer a { color: var(--text-on-dark-muted); font-size: var(--text-sm); }
    .site-footer a:hover { color: #fff; }
    .site-footer small { font-size: var(--text-2xs); color: var(--blue-300); opacity: .7; }

    /* ============================================================
       MODAL DÉMO
       ============================================================ */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 100; display: none;
      background: rgba(13,18,51,.55); backdrop-filter: blur(4px);
      align-items: center; justify-content: center; padding: var(--space-6);
    }
    .modal-overlay.open { display: flex; }
    .modal {
      background: var(--surface-page); border-radius: var(--radius-lg); width: 96%; max-width: 1040px;
      max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg);
      position: relative;
    }
    .modal-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
    .modal-head .ic { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--surface-tint); display: grid; place-items: center; color: var(--color-primary); }
    .modal-head .ic svg { width: 20px; height: 20px; }
    .modal-head h3 { font-size: var(--text-lg); color: var(--text-strong); }
    .modal-head .tag { font-size: var(--text-2xs); color: var(--text-muted); }
    .modal-close { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--text-muted); width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; }
    .modal-close:hover { background: var(--gray-100); color: var(--text-strong); }
    .modal-body { padding: var(--space-6); overflow-y: auto; flex: 1; position: relative; }
    .demo-note { font-size: var(--text-2xs); color: var(--text-faint); text-align: center; padding: var(--space-3); border-top: 1px solid var(--border-subtle); background: var(--surface-muted); }

    /* Mini-app surfaces inside demo */
    .app { background: var(--surface-app); border-radius: var(--radius-md); padding: var(--space-5); color: var(--text-on-dark); }
    .app-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
    .field { flex: 1; min-width: 150px; }
    .field label { display: block; font-size: var(--text-2xs); color: var(--text-on-dark-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
    .field .ctrl { background: var(--navy-700); border: 1px solid var(--navy-500); border-radius: var(--radius-sm); height: var(--control-h-sm); display: flex; align-items: center; padding-inline: var(--space-3); font-size: var(--text-sm); color: #fff; gap: 8px; }
    .field .ctrl svg { width: 14px; height: 14px; color: var(--blue-300); margin-left: auto; }

    .docrow { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
    .doc { display: flex; align-items: center; gap: 8px; background: var(--navy-700); border: 1px solid var(--navy-500); border-radius: var(--radius-pill); padding: 6px 12px; font-size: var(--text-xs); color: #fff; }
    .doc .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-300); flex: none; transition: background .3s; }
    .doc.ok .dot { background: var(--green-500); } .doc.warn .dot { background: var(--amber-500); } .doc.err .dot { background: var(--red-500); }
    .doc .spin { width: 13px; height: 13px; border: 2px solid var(--navy-500); border-top-color: var(--blue-300); border-radius: 50%; animation: spin .7s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .verdicts { display: none; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
    .verdict { display: flex; gap: var(--space-3); padding: var(--space-3); background: var(--navy-700); border-radius: var(--radius-sm); border-left: 3px solid var(--green-500); }
    .verdict.warn { border-left-color: var(--amber-500); } .verdict.err { border-left-color: var(--red-500); }
    .verdict svg { width: 18px; height: 18px; flex: none; color: var(--green-500); }
    .verdict.warn svg { color: var(--amber-500); } .verdict.err svg { color: var(--red-500); }
    .verdict b { font-size: var(--text-sm); color: #fff; } .verdict p { font-size: var(--text-xs); color: var(--text-on-dark-muted); margin: 2px 0 0; }

    .msgbox { display: none; margin-top: var(--space-4); background: var(--navy-950); border: 1px solid var(--navy-500); border-radius: var(--radius-sm); padding: var(--space-4); font-size: var(--text-xs); color: var(--blue-300); line-height: var(--leading-relaxed); white-space: pre-wrap; }

    /* results table */
    .rtable { width: 100%; border-collapse: collapse; font-size: var(--text-xs); display: none; }
    .rtable th { text-align: left; color: var(--text-on-dark-muted); font-weight: var(--weight-semibold); padding: 8px 10px; border-bottom: 1px solid var(--navy-500); text-transform: uppercase; font-size: var(--text-3xs); letter-spacing: .04em; }
    .rtable td { padding: 9px 10px; border-bottom: 1px solid var(--navy-700); color: #fff; }
    .rtable tr:hover td { background: var(--navy-700); }
    .rtable .muted { color: var(--text-on-dark-muted); }
    .rcount { display: none; font-size: var(--text-xs); color: var(--green-500); margin: var(--space-3) 0; font-weight: var(--weight-semibold); }

    /* relance */
    .dossiers { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
    .dossier { display: flex; align-items: center; gap: var(--space-3); background: var(--navy-700); border: 1px solid var(--navy-500); border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--text-xs); }
    .dossier input { accent-color: var(--blue-300); width: 16px; height: 16px; }
    .dossier .ref { font-family: var(--font-body); color: var(--blue-300); font-weight: var(--weight-bold); }
    .dossier .who { color: #fff; } .dossier .age { margin-left: auto; color: var(--amber-500); font-weight: var(--weight-semibold); }
    .mailprev { display: none; margin-top: var(--space-4); background: #fff; border-radius: var(--radius-sm); padding: var(--space-4); color: var(--text-body); font-size: var(--text-xs); line-height: var(--leading-relaxed); box-shadow: var(--shadow-sm); }
    .mailprev .mhead { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-2); margin-bottom: var(--space-3); color: var(--text-muted); }
    .mailprev .mhead b { color: var(--text-strong); }

    .demo-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); align-items: center; }
    .demo-status { font-size: var(--text-xs); color: var(--text-on-dark-muted); margin-left: auto; }

    /* lock overlay */
    .lock {
      position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column;
      align-items: center; justify-content: center; text-align: center; gap: var(--space-4);
      background: rgba(247,248,251,.86); backdrop-filter: blur(6px); padding: var(--space-8);
    }
    .lock.show { display: flex; }

    /* non-blocking CTA after a completed demo */
    .inline-cta { display: flex; align-items: center; gap: var(--space-4); justify-content: space-between; flex-wrap: wrap; margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface-tint); }
    .inline-cta span { font-size: var(--text-sm); color: var(--text-body); }
    .inline-cta b { color: var(--text-strong); }

    /* —— Mockup Cockpit (données fictives) ——————— */
    .ck { background: var(--surface-muted); border-radius: var(--radius-md); padding: var(--space-4); }
    .ck-bar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
    .ck-bar .t { font-family: var(--font-heading); font-weight: var(--weight-bold); color: var(--text-strong); }
    .ck-bar .t small { display: block; font-weight: var(--weight-regular); font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--font-body); }
    .ck-bar .pill { margin-left: auto; font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--color-success); background: var(--green-100); border-radius: var(--radius-pill); padding: 4px 12px; }
    .ck-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
    .ck-kpi { background: #fff; border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-xs); }
    .ck-kpi .lab { font-size: var(--text-2xs); color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
    .ck-kpi .lab svg { width: 13px; height: 13px; }
    .ck-kpi .val { font-family: var(--font-heading); font-weight: var(--weight-extra); color: var(--text-strong); font-size: var(--text-2xl); margin-top: 4px; line-height: 1.1; }
    .ck-kpi .val small { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-regular); }
    .ck-kpi.risk .val { color: var(--color-accent); }
    .ck-sec { font-family: var(--font-heading); font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
    .ck-pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-bottom: var(--space-5); }
    .ck-step { background: #fff; border-radius: var(--radius-sm); padding: var(--space-3); box-shadow: var(--shadow-xs); }
    .ck-step .s { font-size: var(--text-2xs); color: var(--text-muted); }
    .ck-step .n { font-family: var(--font-heading); font-weight: var(--weight-bold); color: var(--color-primary); font-size: var(--text-xl); }
    .ck-step .m { font-size: var(--text-3xs); color: var(--text-faint); }
    .ck-rows { display: flex; flex-direction: column; gap: 8px; }
    .ck-row { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); }
    .ck-row .mo { width: 70px; color: var(--text-muted); flex: none; }
    .ck-row .track { flex: 1; height: 14px; background: var(--gray-100); border-radius: var(--radius-pill); overflow: hidden; }
    .ck-row .fill { height: 100%; background: var(--green-500); border-radius: var(--radius-pill); }
    .ck-row .v { width: 130px; text-align: right; color: var(--text-body); font-weight: var(--weight-semibold); flex: none; }
    .ck-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
    .ck-panel { background: #fff; border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-xs); }
    .ck-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
    .ck-tbl th { text-align: left; font-size: var(--text-3xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: var(--weight-bold); padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); }
    .ck-tbl th.num, .ck-tbl td.num { text-align: right; }
    .ck-tbl td { padding: 8px 8px; border-bottom: 1px solid var(--border-subtle); color: var(--text-body); vertical-align: middle; }
    .ck-tbl tr:last-child td { border-bottom: 0; }
    .ck-ref { color: var(--color-primary); font-weight: var(--weight-bold); }
    .ck-ref small { display: block; color: var(--text-faint); font-weight: var(--weight-regular); font-size: var(--text-3xs); }
    .ck-badge { font-size: var(--text-3xs); font-weight: var(--weight-semibold); color: var(--red-700); background: var(--red-100); border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap; }
    .ck-j { color: var(--color-accent); font-weight: var(--weight-bold); }
    .ck-green { color: var(--color-success); font-weight: var(--weight-bold); }
    .ck-risk { color: var(--color-accent); font-weight: var(--weight-bold); }
    .ck-inst { display: flex; align-items: center; gap: 8px; }
    .ck-av { width: 24px; height: 24px; border-radius: 50%; background: var(--blue-100); color: var(--color-primary); display: grid; place-items: center; font-size: var(--text-3xs); font-weight: var(--weight-bold); flex: none; }
    .ck-stage { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: var(--text-xs); }
    .ck-stage .lbl { width: 150px; color: var(--text-body); flex: none; }
    .ck-stage .track { flex: 1; height: 12px; background: var(--gray-100); border-radius: var(--radius-pill); overflow: hidden; }
    .ck-stage .fill { height: 100%; background: var(--green-500); border-radius: var(--radius-pill); }
    .ck-stage.indigo .fill { background: var(--color-primary); }
    .ck-stage .amt { width: 72px; text-align: right; font-weight: var(--weight-bold); color: var(--text-strong); flex: none; }
    .ck-tot { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
    .ck-tot .big { font-family: var(--font-heading); font-weight: var(--weight-extra); font-size: var(--text-2xl); color: var(--text-strong); }
    .ck-docs { display: flex; gap: var(--space-5); margin-bottom: var(--space-4); }
    .ck-doc .n { font-family: var(--font-heading); font-weight: var(--weight-extra); font-size: var(--text-xl); color: var(--text-strong); line-height: 1; }
    .ck-doc.warn .n { color: var(--amber-500); }
    .ck-doc .l { font-size: var(--text-3xs); color: var(--text-muted); margin-top: 3px; }
    @media (max-width: 680px) { .ck-kpis { grid-template-columns: 1fr 1fr; } .ck-pipe { grid-template-columns: 1fr 1fr 1fr; } .ck-cols { grid-template-columns: 1fr; } }
    .lock .lockic { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-tint); display: grid; place-items: center; color: var(--color-primary); }
    .lock .lockic svg { width: 26px; height: 26px; }
    .lock h4 { font-size: var(--text-xl); color: var(--text-strong); }
    .lock p { font-size: var(--text-sm); color: var(--text-muted); max-width: 42ch; }

    /* —— Responsive ———————————————————————————— */
    @media (max-width: 900px) {
      .hero .container { grid-template-columns: 1fr; }
      .tools-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr 1fr; }
      .step:not(:last-child)::after { display: none; }
      .nav { display: none; }
    }
    @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

    /* ============================================================
       CHATBOT « ARDI »
       ============================================================ */
    .chat-launcher {
      position: fixed; right: 22px; bottom: 22px; z-index: 80;
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--color-primary); color: #fff; border: 0; cursor: pointer;
      height: 56px; padding: 0 20px 0 11px; border-radius: var(--radius-pill);
      box-shadow: var(--shadow-lg); font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-sm);
      transition: var(--transition-base);
    }
    .chat-launcher:hover { background: var(--color-primary-hover); transform: translateY(-2px); }
    .chat-launcher .ava { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
    .chat-launcher .ava img { width: 40px; height: 40px; object-fit: contain; animation: ardiBob 2.8s ease-in-out infinite; }
    .chat-launcher:hover .ava img { animation: ardiWiggle .7s ease; }
    .chat-launcher.hidden { display: none; }

    @keyframes ardiBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
    @keyframes ardiWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 60% { transform: rotate(9deg); } }
    @keyframes ardiPop { 0% { transform: scale(.55); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
    @keyframes ardiHappy { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-8px) scale(1.09); } 60% { transform: translateY(0) scale(1); } 82% { transform: translateY(-3px); } }

    .chat-window {
      position: fixed; right: 22px; bottom: 22px; z-index: 90;
      width: 384px; max-width: calc(100vw - 32px); height: 600px; max-height: calc(100vh - 44px);
      background: var(--surface-page); border-radius: var(--radius-lg); overflow: hidden;
      display: none; flex-direction: column; box-shadow: var(--shadow-lg);
    }
    .chat-window.open { display: flex; animation: chatin .25s var(--ease-out); }
    @keyframes chatin { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

    .chat-head { background: var(--gradient-navy); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
    .chat-head .av { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
    .chat-head .av img { width: 42px; height: 42px; object-fit: contain; animation: ardiBob 3.2s ease-in-out infinite; }
    .chat-head .av img.happy { animation: ardiHappy .85s ease; }
    .chat-head .who b { font-family: var(--font-heading); font-size: var(--text-base); color: #fff; display: block; line-height: 1.1; }
    .chat-head .who span { font-size: var(--text-2xs); color: var(--blue-300); display: inline-flex; align-items: center; gap: 6px; }
    .chat-head .who span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); }
    .chat-head .x { margin-left: auto; background: none; border: 0; color: #fff; cursor: pointer; opacity: .85; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); }
    .chat-head .x:hover { background: rgba(255,255,255,.14); opacity: 1; }
    .chat-head .x svg { width: 18px; height: 18px; }

    .chat-log { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-muted); }
    .msg { display: flex; gap: 8px; max-width: 86%; }
    .msg.bot { align-self: flex-start; }
    .msg.user { align-self: flex-end; flex-direction: row-reverse; }
    .msg .mav { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; box-shadow: var(--shadow-xs); align-self: flex-end; }
    .msg .mav img { width: 23px; height: 23px; object-fit: contain; animation: ardiPop .4s ease; }
    .msg .bubble { padding: 10px 13px; border-radius: 14px; font-size: var(--text-sm); line-height: var(--leading-snug); }
    .msg.bot .bubble { background: #fff; color: var(--text-body); border-bottom-left-radius: 4px; box-shadow: var(--shadow-xs); }
    .msg.user .bubble { background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }

    .typing { display: flex; gap: 4px; padding: 13px 14px; background: #fff; border-radius: 14px; border-bottom-left-radius: 4px; box-shadow: var(--shadow-xs); }
    .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-400); animation: tbounce 1.2s infinite; }
    .typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
    @keyframes tbounce { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

    .chat-foot { border-top: 1px solid var(--border-subtle); padding: 12px; background: var(--surface-page); min-height: 12px; }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip-btn { border: 1.5px solid var(--border-default); background: #fff; color: var(--color-primary); border-radius: var(--radius-pill); padding: 8px 14px; font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; transition: var(--transition-base); font-family: var(--font-body); text-decoration: none; }
    .chip-btn:hover { border-color: var(--color-primary); background: var(--surface-tint); }
    .chat-input { display: flex; gap: 8px; }
    .chat-input input { flex: 1; height: var(--control-h-md); border: 1.5px solid var(--border-default); border-radius: var(--radius-pill); padding: 0 16px; font-size: var(--text-sm); font-family: var(--font-body); color: var(--text-strong); outline: none; }
    .chat-input input:focus { border-color: var(--color-primary); box-shadow: var(--ring-focus); }
    .chat-input button { width: var(--control-h-md); height: var(--control-h-md); border-radius: 50%; border: 0; background: var(--color-accent); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; transition: var(--transition-base); }
    .chat-input button:hover { background: var(--color-accent-hover); }
    .chat-input button svg { width: 18px; height: 18px; }

    @media (max-width: 480px) {
      .chat-window { right: 0; bottom: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
      .chat-launcher { right: 16px; bottom: 16px; }
    }

    /* —— Ardila Social (2e service) ———————————————————— */
    .social { background: linear-gradient(165deg, #202449 0%, #2f337a 55%, #3b3f92 100%); color: #fff; overflow: hidden; }
    .social .overline { color: #a9acda; }
    .social .sec-head h1, .social .sec-head h2 { color: #fff; }
    .social .sec-head p { color: rgba(255,255,255,.82); }
    .social-stage { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-10); align-items: center; margin-top: var(--space-8); }
    .social-ardi { position: relative; display: flex; flex-direction: column; align-items: center; }
    .social-ardi img { width: min(260px, 72%); filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }
    @keyframes ardiFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    .ardi-bubble { background: #fff; color: var(--text-strong); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-sm); padding: 10px 16px; border-radius: 16px; box-shadow: var(--shadow-lg); margin-bottom: var(--space-4); position: relative; }
    .ardi-bubble::after { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
    .social-showcase { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: center; }
    .phone { width: 240px; background: #0e1030; border-radius: 34px; padding: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.12); flex: none; }
    .phone-screen { background: var(--surface-muted, #f4f5fb); border-radius: 24px; overflow: hidden; }
    .phone-top { background: #fff; padding: 11px 14px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #eee; }
    .phone-top .dot { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); flex: none; }
    .phone-top b { font-family: var(--font-heading); font-size: 13px; color: var(--text-strong); display: block; line-height: 1.1; }
    .phone-top small { font-size: 10px; color: var(--text-muted); }
    .phone-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
    .post { background: #fff; border-radius: 12px; padding: 8px; display: flex; gap: 8px; align-items: center; box-shadow: 0 2px 8px rgba(20,24,60,.06); }
    .post .thumb { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #a9acda, #3b3f92); flex: none; }
    .post .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .post .meta b { font-size: 11.5px; color: var(--text-strong); line-height: 1.15; }
    .post .sub { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-muted); flex-wrap: wrap; }
    .post .nets { display: flex; gap: 3px; }
    .post .nets i { width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; }
    .post .nets i svg { width: 10px; height: 10px; color: #fff; }
    .net-ig { background: #e1306c; } .net-tt { background: #111; } .net-fb { background: #1877f2; }
    .post .st { font-size: 9px; font-weight: var(--weight-bold); padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
    .st-plan { background: #eef0ff; color: var(--color-primary); }
    .st-ok { background: #e4f6ee; color: var(--color-success); }
    .social-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
    .social-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-base); color: rgba(255,255,255,.9); }
    .social-feats li svg { width: 19px; height: 19px; color: #a9acda; flex: none; margin-top: 2px; }
    .social-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); grid-column: 1 / -1; }
    .social .btn-ghost { color: #fff; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
    .social .btn-ghost:hover { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px #fff; }
    @media (max-width: 900px) {
      .social-stage { grid-template-columns: 1fr; gap: var(--space-8); }
      .social-showcase { grid-template-columns: 1fr; justify-items: center; text-align: center; }
      .social-feats li { text-align: left; }
      .phone { margin: 0 auto; }
      .social-cta { justify-content: center; }
    }

    /* —— Sur devis ———————————————————————————————— */
    .quote-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-8); max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); align-items: center; text-align: center; }
    .quote-points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); width: 100%; }
    .quote-points li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .qic { width: 46px; height: 46px; border-radius: 13px; background: var(--surface-muted, #f4f5fb); display: grid; place-items: center; color: var(--color-primary); }
    .qic svg { width: 22px; height: 22px; }
    .quote-points b { font-size: var(--text-base); color: var(--text-strong); font-family: var(--font-heading); }
    .quote-points .qd { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); }
    @media (max-width: 760px) { .quote-points { grid-template-columns: 1fr; } }

    /* —— Accueil : offres ———————————————————————— */
    .offers { max-width: 860px; margin: 0 auto; }

    /* —— À propos : récit ———————————————————————— */
    .about-lead { max-width: 720px; margin: var(--space-6) auto 0; text-align: center; color: var(--text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
    .story { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
    .story p { font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-relaxed); }
    .story p strong { color: var(--text-strong); }
    .about-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 500px; padding: 22px; border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 44%, #eef0ff 0%, #e7e9fb 52%, #dde0f6 100%); overflow: hidden; box-shadow: var(--shadow-card); }
    .about-visual::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(169,172,218,.45) 0%, rgba(169,172,218,0) 70%); }
    .about-visual img { position: relative; max-height: 456px; width: auto; max-width: 94%; filter: drop-shadow(0 18px 30px rgba(59,63,146,.26)); }
    @media (max-width: 900px) { .about-visual { min-height: 380px; } .about-visual img { max-height: 340px; } }

    /* —— À propos : hero sombre (façon Ardila Social) —— */
    .about-hero { background: linear-gradient(165deg, #202449 0%, #2f337a 55%, #3b3f92 100%); color: #fff; overflow: hidden; }
    .about-hero .hero-eyebrow, .about-hero .overline { color: #a9acda; }
    .about-hero h1 { color: #fff; }
    .about-hero h1 .grad { background: none; -webkit-text-fill-color: #a9acda; color: #a9acda; }
    .about-hero p.lead { color: rgba(255,255,255,.85); }
    .about-hero p.lead strong { color: #fff; }
    .about-hero .btn-ghost { color: #fff; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
    .about-hero .btn-ghost:hover { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px #fff; }
    .about-hero-visual { display: flex; align-items: center; justify-content: center; }
    .about-hero-visual img { width: min(90%, 430px); filter: drop-shadow(0 26px 44px rgba(0,0,0,.45)); }
    @media (max-width: 900px) { .about-hero-visual img { width: min(72%, 320px); } }

    /* —— FAQ ————————————————————————————————————— */
    .faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
    .faq details { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2px 20px; box-shadow: var(--shadow-xs); }
    .faq summary { cursor: pointer; font-family: var(--font-heading); font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-base); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--color-primary); font-weight: 400; flex: none; }
    .faq details[open] summary::after { content: "\2013"; }
    .faq p { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); padding: 0 0 18px; margin: 0; }