/* ============================================================
   MedAssist — feuille de style du site (Direction « Clinique claire »)
   S'appuie sur assets/base.css pour les tokens, le logo, les boutons.
   ============================================================ */

:root {
  --font-display: "Rubik", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --bg: #ffffff;
  --ink: #182f49;
  --ink-soft: #54657a;
  --navy: #182f49;
  --accent: #0e9aab;
  --accent-strong: #007e96;
  --accent-ink: #ffffff;
  --accent-shadow: rgba(14,154,171,.55);
  --tint: #f1f8f9;
  --tint-2: #eef4f7;
  --hairline: rgba(24,47,73,.12);
  --logo-ink: #182f49;
}

body { background: var(--bg); }

/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 50; transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1rem; }
.nav.scrolled { background: rgba(255,255,255,.82); backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 var(--hairline), 0 12px 30px -24px rgba(24,47,73,.5); }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a { font-size: .96rem; font-weight: 500; color: var(--ink-soft); transition: color .15s; white-space: nowrap; }
.nav-links a:hover { color: var(--accent-strong); }
.nav-cta { display: flex; align-items: center; gap: 1rem; }
.nav-cta .btn { padding: .7em 1.25em; font-size: .95rem; }
.burger { display: none; }
.menu { display: none; }

/* sélecteur de langue */
.lang { display: inline-flex; align-items: center; border: 1.5px solid var(--hairline); border-radius: 999px; overflow: hidden; font-family: var(--font-body); }
.lang button { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .82rem; color: var(--ink-soft); padding: .42em .72em; transition: background .15s, color .15s; }
.lang button.on { background: var(--navy); color: #fff; }
.lang button:not(.on):hover { color: var(--accent-strong); }

/* ---------- HERO ---------- */
.hero { padding: clamp(2.5rem, 1rem + 6vw, 5.5rem) 0 clamp(3rem, 1rem + 6vw, 6rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.hero h1 { margin: 1.1rem 0 0; }
.hero .lead { margin: 1.4rem 0 0; max-width: 32ch; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.1rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 2.4rem; color: var(--ink-soft); }
.hero-meta .item { display: flex; align-items: center; gap: .6rem; font-size: .92rem; font-weight: 500; }

.hero-visual { position: relative; }
.hero-visual::before { content: ""; position: absolute; inset: -12% -8% -8% -2%; background: radial-gradient(60% 60% at 70% 35%, rgba(14,154,171,.16), transparent 70%); z-index: 0; }

/* ---------- MOCKUP PRODUIT (CSS) ---------- */
.app { position: relative; z-index: 1; background: #fff; border: 1px solid var(--hairline); border-radius: 18px; box-shadow: 0 40px 80px -40px rgba(24,47,73,.45), 0 8px 24px -16px rgba(24,47,73,.3); overflow: hidden; font-size: 13px; }
.app-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--hairline); background: #fbfdfd; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.app-body { display: grid; grid-template-columns: 168px 1fr; min-height: 360px; }
.app-side { background: #fafcfc; border-right: 1px solid var(--hairline); padding: .85rem .7rem; display: flex; flex-direction: column; gap: .2rem; }
.app-side .logo { font-size: .98rem; margin: .1rem .3rem 1rem; }
.app-side .logo-mark { width: 1.8em; height: 1.8em; }
.navi { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 9px; color: var(--ink-soft); font-weight: 500; }
.navi .gi { width: 16px; height: 16px; opacity: .8; }
.navi.active { background: var(--tint); color: var(--accent-strong); }
.navi.active .gi { opacity: 1; }
.app-main { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.pat { display: flex; align-items: center; gap: .8rem; }
.pat-photo { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(140deg,#dcebee,#bcdbe2); flex: none; display:grid; place-items:center; color: var(--accent-strong); font-weight:700; font-family: var(--font-display); }
.pat-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.pat-sub { color: var(--ink-soft); font-size: .8rem; }
.pat-tags { margin-left: auto; display: flex; gap: .4rem; }
.tag { font-size: .68rem; font-weight: 600; padding: .3em .6em; border-radius: 999px; letter-spacing: .02em; }
.tag.blood { background: #eef4f7; color: var(--navy); }
.tag.all { background: #fdecec; color: #c0392b; }
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--hairline); margin-top: .2rem; }
.tabs span { padding: .45rem .2rem; margin-right: .9rem; font-weight: 500; color: var(--ink-soft); font-size: .82rem; border-bottom: 2px solid transparent; }
.tabs span.on { color: var(--accent-strong); border-color: var(--accent); }
.soap { display: grid; gap: .5rem; }
.soap-row { display: grid; grid-template-columns: 22px 1fr; gap: .55rem; align-items: start; }
.soap-k { width: 22px; height: 22px; border-radius: 6px; background: var(--tint); color: var(--accent-strong); font-weight: 700; display: grid; place-items: center; font-size: .72rem; }
.soap-line { height: 7px; border-radius: 4px; background: #eaf0f2; }
.soap-line.s2 { width: 82%; margin-top: 5px; }
.soap-line.s3 { width: 64%; margin-top: 5px; }
.vitals { display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; margin-top: .2rem; }
.vital { background: #fbfdfd; border: 1px solid var(--hairline); border-radius: 10px; padding: .55rem .6rem; }
.vital .vk { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.vital .vv { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); margin-top: 2px; }
.vital .vv small { font-size: .6rem; color: var(--ink-soft); font-weight: 500; }
.signed { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .4rem; color: #1f8a5b; font-weight: 600; font-size: .78rem; }
.signed .lock { width: 14px; height: 14px; }

.float { position: absolute; z-index: 2; background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: .7rem .85rem; box-shadow: 0 24px 50px -24px rgba(24,47,73,.5); display: flex; align-items: center; gap: .65rem; font-size: 13px; }
.float .fi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.float .ft { font-weight: 600; color: var(--ink); font-family: var(--font-display); }
.float .fs { color: var(--ink-soft); font-size: .76rem; }
.float.audit { right: -10px; bottom: 26px; }
.float.audit .fi { background: #eef9ee; color: #1f8a5b; }
.float.search { left: -22px; top: 30px; }
.float.search .fi { background: var(--tint); color: var(--accent-strong); }

/* ---------- bandeau confiance ---------- */
.trust { padding: 1.4rem 0 0; }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; padding: 1.3rem clamp(1.5rem,3vw,2.4rem); background: var(--tint); border-radius: 18px; }
.trust-row .lab { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.trust-row .pts { display: flex; flex-wrap: wrap; gap: .9rem 1.8rem; margin-left: auto; }
.trust-row .pt { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--navy); font-size: .95rem; }

/* ---------- section générique ---------- */
.sec { padding: clamp(4rem, 2rem + 6vw, 7.5rem) 0; }
.sec-head { max-width: 62ch; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { margin: 1rem 0 0; }
.sec-head p { margin: 1.1rem 0 0; color: var(--ink-soft); }
.sec.tinted { background: var(--tint); }

/* problème */
.prob-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 3rem; }
.prob { background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 1.6rem 1.5rem; position: relative; }
.prob .n { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 1.1rem; }
.prob h3 { margin: .8rem 0 .5rem; font-size: 1.2rem; }
.prob p { color: var(--ink-soft); font-size: .98rem; }

/* comment ça marche */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; margin-top: 3.4rem; }
.step { position: relative; }
.step .num { width: 46px; height: 46px; border-radius: 13px; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.step h3 { margin: 1.1rem 0 .55rem; font-size: 1.3rem; }
.step p { color: var(--ink-soft); }
.step::after { content: ""; position: absolute; top: 23px; left: 60px; right: -.8rem; height: 2px; background: repeating-linear-gradient(90deg, var(--hairline) 0 6px, transparent 6px 12px); }
.steps .step:last-child::after { display: none; }

/* fonctionnalités */
.feat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; margin-top: 3.2rem; }
.feat { background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 1.7rem 1.6rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.feat:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -34px rgba(24,47,73,.5); border-color: rgba(14,154,171,.4); }
.feat .fic { width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--accent-strong); display: grid; place-items: center; }
.feat .fic svg { width: 22px; height: 22px; }
.feat h3 { margin: 1.05rem 0 .5rem; font-size: 1.22rem; }
.feat p { color: var(--ink-soft); font-size: .98rem; }
.feat .pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.feat .pill { font-size: .76rem; font-weight: 600; color: var(--accent-strong); background: var(--tint); padding: .35em .7em; border-radius: 999px; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-12 { grid-column: span 12; }

/* feature large (dossier patient) */
.feat-wide { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; }
.feat-wide .bullets { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.feat-wide .b { display: grid; grid-template-columns: auto 1fr; gap: .8rem; }
.feat-wide .b .tick { margin-top: .45rem; }
.feat-wide .b b { font-family: var(--font-display); font-weight: 600; color: var(--ink); display: block; margin-bottom: .15rem; }
.feat-wide .b span { color: var(--ink-soft); font-size: .97rem; }

/* ---------- aperçus produit (captures réelles via image-slot) ---------- */
.shots { display: grid; grid-template-columns: repeat(12,1fr); gap: 1.2rem; margin-top: 3.2rem; }
.shot { border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; background: var(--tint); box-shadow: 0 24px 50px -36px rgba(24,47,73,.45); }
.shot image-slot { width: 100%; display: block; }
.shot .cap { display: flex; align-items: center; gap: .55rem; padding: .85rem 1.1rem; background: #fff; border-top: 1px solid var(--hairline); font-size: .9rem; font-weight: 600; color: var(--navy); }
.shot .cap .tick { width: 8px; height: 8px; }
.shot.big { grid-column: span 7; }
.shot.small { grid-column: span 5; }
.shot { position: relative; }
.shot image-slot { background: #fff; }

/* bouton agrandir (apparaît quand une capture est présente) */
.shot .zoom {
  position: absolute; top: .7rem; right: .7rem; z-index: 4;
  width: 38px; height: 38px; border-radius: 10px; border: 0; cursor: zoom-in;
  display: none; place-items: center;
  background: rgba(24,47,73,.62); color: #fff; backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -8px rgba(24,47,73,.6); transition: background .15s, transform .15s;
}
.shot .zoom svg { width: 18px; height: 18px; }
.shot.filled .zoom { display: grid; }
.shot.filled image-slot { cursor: zoom-in; }
.shot .zoom:hover { background: var(--accent-strong); transform: translateY(-1px); }

/* lightbox plein écran */
.lightbox { position: fixed; inset: 0; z-index: 120; display: none; }
.lightbox.open { display: block; }
.lb-veil { position: absolute; inset: 0; background: rgba(10,22,33,.86); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s ease; }
.lightbox.open .lb-veil { opacity: 1; }
.lb-fig { position: absolute; inset: clamp(1rem,4vw,3rem); margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; opacity: 0; transform: scale(.97); transition: opacity .22s ease, transform .22s ease; }
.lightbox.open .lb-fig { opacity: 1; transform: none; }
.lb-fig img { max-width: 100%; max-height: calc(100% - 3rem); object-fit: contain; border-radius: 12px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.7); background: #fff; }
.lb-fig figcaption { color: #dceaf0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: .55rem; }
.lb-fig figcaption .tick { width: 8px; height: 8px; }
.lb-close { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.lb-close:hover { background: rgba(255,255,255,.2); }

/* sécurité */
.sec-secure { background: var(--navy); color: #fff; }
.sec-secure .eyebrow { color: #5fd0dd; }
.sec-secure .sec-head p { color: #aebccb; }
.sec-secure h2 { color: #fff; }
.secure-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; margin-top: 3rem; }
.scard { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 1.5rem 1.4rem; }
.scard .sic { width: 42px; height: 42px; border-radius: 12px; background: rgba(95,208,221,.16); color: #6fd9e6; display: grid; place-items: center; }
.scard .sic svg { width: 21px; height: 21px; }
.scard h3 { color: #fff; margin: 1rem 0 .5rem; font-size: 1.12rem; }
.scard p { color: #aebccb; font-size: .92rem; }
.roles { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.4rem; }
.role { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: #d7e2ec; border: 1px solid rgba(255,255,255,.18); padding: .5em .9em; border-radius: 999px; }
.role b { color: #6fd9e6; }

/* ---------- équipe / histoire ---------- */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: center; margin-top: 3rem; }
.story p { color: var(--ink-soft); margin-top: 1.1rem; }
.story p + p { margin-top: 1rem; }
.story .signoff { display: flex; align-items: center; gap: .8rem; margin-top: 1.8rem; }
.story .signoff .av { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(140deg,#dcebee,#bcdbe2); display: grid; place-items: center; color: var(--accent-strong); font-weight: 700; font-family: var(--font-display); }
.story .signoff b { font-family: var(--font-display); color: var(--ink); display: block; }
.story .signoff span { color: var(--ink-soft); font-size: .9rem; }
.values { display: grid; gap: 1rem; }
.value { display: grid; grid-template-columns: auto 1fr; gap: 1rem; background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 1.3rem 1.4rem; }
.value .vic { width: 42px; height: 42px; border-radius: 12px; background: var(--tint); color: var(--accent-strong); display: grid; place-items: center; flex: none; }
.value .vic svg { width: 21px; height: 21px; }
.value b { font-family: var(--font-display); color: var(--ink); display: block; margin-bottom: .2rem; }
.value span { color: var(--ink-soft); font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 3rem auto 0; }
.qa { border-bottom: 1px solid var(--hairline); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.4rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { margin-left: auto; width: 24px; height: 24px; flex: none; position: relative; transition: transform .25s ease; color: var(--accent-strong); }
.qa summary .pm::before, .qa summary .pm::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.qa summary .pm::before { top: 11px; left: 3px; right: 3px; height: 2px; }
.qa summary .pm::after { left: 11px; top: 3px; bottom: 3px; width: 2px; transition: transform .25s ease; }
.qa[open] summary .pm::after { transform: scaleY(0); }
.qa .ans { padding: 0 0 1.4rem; color: var(--ink-soft); max-width: 70ch; }
.qa .ans p + p { margin-top: .8rem; }

/* ---------- CTA / Demo ---------- */
.cta { text-align: center; }
.cta-card { background: linear-gradient(135deg, var(--accent-strong), var(--accent)); border-radius: 28px; padding: clamp(2.5rem, 1rem + 5vw, 5rem) 2rem; color: #fff; position: relative; overflow: hidden; }
.cta-card::after { content:""; position:absolute; inset:0; background: radial-gradient(70% 120% at 80% -10%, rgba(255,255,255,.22), transparent 60%); }
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { color: #fff; }
.cta-card p { color: rgba(255,255,255,.9); margin: 1.1rem auto 0; max-width: 52ch; }
.cta-card .hero-actions { justify-content: center; }
.btn-light { background: #fff; color: var(--accent-strong); }
.btn-light:hover { background: #f0fbfc; transform: translateY(-2px); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); transform: translateY(-2px); }
.cta .note { margin-top: 1.4rem; font-size: .9rem; color: rgba(255,255,255,.85); }

/* ---------- footer ---------- */
footer { padding: 3.5rem 0 2.5rem; border-top: 1px solid var(--hairline); }
.foot { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; }
.foot p { color: var(--ink-soft); font-size: .92rem; max-width: 34ch; margin-top: 1rem; }
.foot-links { display: flex; gap: 3rem; flex-wrap: wrap; }
.foot-col h4 { font-family: var(--font-display); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); font-weight: 600; }
.foot-col a { display: block; margin-top: .7rem; color: var(--ink); font-size: .95rem; }
.foot-col a:hover { color: var(--accent-strong); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--hairline); color: var(--ink-soft); font-size: .86rem; }

/* ---------- MODAL : formulaire de démo ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.open { display: block; }
.modal-veil { position: absolute; inset: 0; background: rgba(13,28,40,.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s ease; }
.modal.open .modal-veil { opacity: 1; }
.modal-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
  background: #fff; border-radius: 22px; padding: clamp(1.5rem,4vw,2.4rem);
  box-shadow: 0 50px 100px -40px rgba(24,47,73,.6); opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.modal.open .modal-card { opacity: 1; transform: translate(-50%, -50%); }
.modal-card h3 { font-size: 1.6rem; }
.modal-card .sub { color: var(--ink-soft); margin: .6rem 0 1.4rem; }
.modal-close { position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hairline); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink-soft); transition: background .15s, color .15s; }
.modal-close:hover { background: var(--tint); color: var(--accent-strong); }
.field { display: grid; gap: .4rem; margin-bottom: 1rem; }
.field label { font-weight: 600; font-size: .9rem; color: var(--navy); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; color: var(--ink);
  padding: .8em .9em; border: 1.5px solid var(--hairline); border-radius: 12px; background: #fcfdfe;
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14,154,171,.16); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: .4rem; }
.form-actions .btn { flex: 1; min-width: 160px; }
.form-note { font-size: .82rem; color: var(--ink-soft); margin-top: 1rem; text-align: center; }
.form-ok { display: none; text-align: center; padding: 1rem 0; }
.form-ok .check { width: 60px; height: 60px; margin: 0 auto 1rem; border-radius: 50%; background: #eaf7ef; color: #1f8a5b; display: grid; place-items: center; }
.form-ok .check svg { width: 30px; height: 30px; }
.form-ok h3 { color: var(--ink); }
.form-ok p { color: var(--ink-soft); margin-top: .6rem; }
body.modal-lock { overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { max-width: 520px; }
  .prob-grid, .steps, .secure-grid { grid-template-columns: 1fr 1fr; }
  .step::after { display: none; }
  .feat-wide, .story-grid { grid-template-columns: 1fr; gap: 2rem; }
  .col-6, .col-4 { grid-column: span 6; }
  .shot.big, .shot.small { grid-column: span 12; }
}
@media (max-width: 960px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-cta .burger { display: inline-flex; }
  .menu { position: fixed; inset: 76px 0 auto; background: #fff; border-bottom: 1px solid var(--hairline); padding: 1rem clamp(1.25rem,4vw,3rem) 1.6rem; flex-direction: column; gap: .2rem; display: none; box-shadow: 0 20px 40px -24px rgba(24,47,73,.4); }
  .menu.open { display: flex; }
  .menu a { padding: .8rem 0; font-weight: 500; border-bottom: 1px solid var(--hairline); }
  .menu .btn { margin-top: .8rem; }
}
@media (max-width: 720px) {
  .prob-grid, .steps, .secure-grid, .feat-grid { grid-template-columns: 1fr; }
  .col-6, .col-4, .col-12 { grid-column: 1 / -1; }
  .vitals { grid-template-columns: repeat(2,1fr); }
  .float { display: none; }
  .trust-row .pts { margin-left: 0; }
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- téléphones (≤600px) ---------- */
@media (max-width: 600px) {
  /* garde-fou : aucun débordement horizontal */
  html, body { overflow-x: hidden; }

  /* NAV : logo + langue + burger seulement ; le CTA vit dans le menu */
  .nav-inner { height: 64px; gap: .6rem; }
  .nav-cta { gap: .55rem; }
  .nav-cta > .btn-primary { display: none; }       /* "Réserver une démo" → dans le menu */
  .logo { font-size: 1.18rem; }
  .lang button { padding: .5em .7em; font-size: .8rem; }   /* cibles tactiles confortables */
  .menu { inset: 64px 0 auto; }

  /* HERO : tailles maîtrisées, actions pleine largeur */
  .hero { padding: 2rem 0 3rem; }
  .hero .display { font-size: clamp(2.3rem, 8vw, 3rem); }
  .hero .lead { max-width: none; margin-top: 1.1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: .7rem; }
  .hero-actions .btn { width: 100%; }
  .hero-meta { gap: .8rem; margin-top: 1.8rem; }
  .hero-meta .item { font-size: .9rem; }

  /* mockup produit : barre latérale repliée en bandeau, contenu lisible */
  .app-body { grid-template-columns: 1fr; }
  .app-side { flex-direction: row; align-items: center; gap: .35rem; border-right: 0; border-bottom: 1px solid var(--hairline); padding: .5rem .6rem; overflow-x: auto; }
  .app-side .logo { margin: 0 .4rem 0 .1rem; }
  .navi { padding: .4rem .5rem; white-space: nowrap; }
  .navi span { display: none; }                      /* icônes seules dans le bandeau */
  .navi.active span { display: inline; }             /* sauf l'onglet actif */

  /* titres de section + corps */
  .sec { padding: 3.2rem 0; }
  .sec-head .h1 { font-size: clamp(1.9rem, 7.4vw, 2.4rem); }
  .display, .h1 { letter-spacing: -0.02em; }

  /* bandeau confiance : empilé proprement */
  .trust-row { gap: .8rem 1.4rem; padding: 1.1rem 1.2rem; }
  .trust-row .pts { gap: .6rem 1.2rem; }

  /* étapes : numéro au-dessus, plus aéré */
  .steps { gap: 1.8rem; }

  /* captures produit : hauteur réduite */
  .shot image-slot { height: 280px !important; }
  .shot .cap { font-size: .85rem; padding: .75rem .9rem; }

  /* sécurité / rôles */
  .roles { gap: .5rem; }

  /* histoire */
  .story-grid { gap: 1.6rem; }

  /* FAQ : un peu plus compact */
  .qa summary { font-size: 1.05rem; padding: 1.15rem 0; gap: .7rem; }

  /* CTA : actions pleine largeur */
  .cta-card { padding: 2.4rem 1.4rem; border-radius: 22px; }
  .cta-card .hero-actions { flex-direction: column; }
  .cta-card .hero-actions .btn { width: 100%; }

  /* footer : colonnes plus serrées */
  .foot-links { gap: 1.8rem 2.4rem; }

  /* modale démo : plein écran confortable */
  .modal-card { border-radius: 18px; padding: 1.4rem 1.2rem; width: calc(100vw - 1.4rem); }
  .modal-card h3 { font-size: 1.35rem; }
  .form-actions .btn { width: 100%; flex: none; }

  /* boutons : cibles tactiles ≥ 48px */
  .btn { padding: .95em 1.4em; }
}

/* très petits écrans (≤380px) */
@media (max-width: 380px) {
  .hero .display { font-size: clamp(2.05rem, 9vw, 2.3rem); }
  .vitals { grid-template-columns: repeat(2,1fr); }
  .lang button { padding: .45em .6em; }
}