html{color-scheme:light}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout : bandeaux pleine largeur, une colonne de lecture large ; chaque produit a sa couleur (Maya orange, Talya vert, Mediwalk bleu) */
:root{
  --bg:#F4F7FC;
  --surface:#FFFFFF;
  --ink:#13213C;
  --muted:#4A5873;
  --line:#D9E1EE;
  --blue:#1E65DA;
  --blue-soft:#E3ECFB;
  --orange:#E8701A;
  --orange-soft:#FDEBDC;
  --green:#0E8A6A;
  --green-soft:#DDF3EC;
  --on-accent:#FFFFFF;
  --band:#13213C;
  --band-ink:#EAF0FA;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, sans-serif;
  --wrap:1120px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1626;--surface:#16213A;--ink:#EAF0FA;--muted:#A9B6CE;--line:#27365A;
  --blue:#6E9DF0;--blue-soft:#1B2C52;--orange:#F59A55;--orange-soft:#3A2516;
  --green:#3CC59F;--green-soft:#123A30;--on-accent:#0E1626;--band:#0A101D;--band-ink:#EAF0FA;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1626;--surface:#16213A;--ink:#EAF0FA;--muted:#A9B6CE;--line:#27365A;
  --blue:#6E9DF0;--blue-soft:#1B2C52;--orange:#F59A55;--orange-soft:#3A2516;
  --green:#3CC59F;--green-soft:#123A30;--on-accent:#0E1626;--band:#0A101D;--band-ink:#EAF0FA;
  color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1.125rem;line-height:1.6}
h1,h2,h3{font-family:var(--f-display);line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-0.01em}
p{margin:0}
a{color:var(--blue)}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.eyebrow{font-family:var(--f-display);font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}

/* En-tête */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--surface)}
header.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand b{font-family:var(--f-display);font-size:1.35rem;font-weight:800;letter-spacing:-0.02em}
.brand small{display:block;font-size:.78rem;color:var(--muted);line-height:1}
nav.links{display:flex;gap:6px;flex-wrap:wrap}
nav.links a{text-decoration:none;color:var(--ink);font-weight:700;padding:8px 12px;border-radius:999px;font-size:1rem}
nav.links a:hover{background:var(--blue-soft)}
nav.links a.cta{background:var(--blue);color:var(--on-accent)}

/* Accroche */
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:64px 56px}
.hero h1{font-size:clamp(2.4rem, 5.4vw, 4.1rem);font-weight:800}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lead{font-size:1.3rem;color:var(--muted);margin-top:20px;max-width:34ch}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:1.1rem;text-decoration:none;padding:14px 22px;border-radius:14px;border:2px solid transparent}
.btn.primary{background:var(--blue);color:var(--on-accent)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn:hover{filter:brightness(1.06)}

/* Tablette Maya (illustration) */
.tablet{background:var(--ink);border-radius:34px;padding:14px;box-shadow:0 30px 60px -30px rgba(19,33,60,.55);max-width:100%;transform:rotate(-1.5deg)}
.screen{background:var(--surface);border-radius:22px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.screen .bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:.85rem;color:var(--muted);border-bottom:1px solid var(--line)}
.screen .bar strong{color:var(--ink);font-family:var(--f-display)}
.call{position:relative;aspect-ratio:16/10;max-width:100%;background:linear-gradient(160deg,var(--blue-soft),var(--orange-soft))}
.call svg{position:absolute;inset:0;width:100%;height:100%}
.call .pip{position:absolute;right:12px;bottom:12px;width:26%;aspect-ratio:3/4;border-radius:12px;background:var(--green-soft);border:3px solid var(--surface);overflow:hidden}
.call .name{position:absolute;left:12px;top:12px;background:var(--surface);color:var(--ink);font-weight:700;font-size:.9rem;padding:4px 10px;border-radius:999px}
.lea{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;background:var(--orange-soft)}
.lea .dot{flex:0 0 34px;height:34px;border-radius:50%;background:var(--orange);color:var(--on-accent);display:grid;place-items:center;font-family:var(--f-display);font-weight:800}
.lea p{font-size:.98rem}
.lea p b{display:block;font-size:.8rem;color:var(--orange);letter-spacing:.06em;text-transform:uppercase}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.keys span{text-align:center;font-family:var(--f-display);font-weight:700;font-size:.95rem;padding:12px 4px;border-radius:12px;background:var(--bg)}
.keys span.red{background:#C8312B;color:#fff}

/* Le trio */
.trio{background:var(--surface);border-block:1px solid var(--line)}
.trio .wrap{padding-block:56px}
.trio h2{font-size:clamp(1.8rem,3.4vw,2.5rem);max-width:24ch}
.trio .intro{color:var(--muted);margin-top:12px;max-width:62ch}
.circle{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.who{padding:24px;border-radius:20px;background:var(--bg);display:flex;flex-direction:column;gap:10px;min-width:0}
.who .tag{align-self:flex-start;font-weight:700;font-size:.85rem;padding:4px 12px;border-radius:999px}
.who h3{font-size:1.5rem}
.who p{color:var(--muted)}
.who.maya .tag{background:var(--orange-soft);color:var(--orange)}
.who.talya .tag{background:var(--green-soft);color:var(--green)}
.who.mw .tag{background:var(--blue-soft);color:var(--blue)}
.who a{font-weight:700;text-decoration:none;margin-top:auto}
.link-line{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;color:var(--muted);font-size:1rem;text-align:center;flex-wrap:wrap}

/* Sections produit */
.product .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;padding-block:80px;align-items:start}
.product.alt .wrap{grid-template-columns:1.1fr .9fr}
.product.alt .text{order:2}
.product h2{font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:800;margin-top:10px}
.product .sub{font-size:1.25rem;color:var(--muted);margin-top:14px;max-width:40ch}
.status{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:.95rem;font-weight:700;padding:6px 14px;border-radius:999px;border:1.5px solid currentColor}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.features li{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;min-width:0}
.features h3{font-size:1.15rem;margin-bottom:6px}
.features p{font-size:1rem;color:var(--muted)}
.maya .eyebrow,.maya .status{color:var(--orange)}
.maya .features h3{color:var(--orange)}
.talya .eyebrow,.talya .status{color:var(--green)}
.talya .features h3{color:var(--green)}
.mw .eyebrow,.mw .status{color:var(--blue)}
.mw .features h3{color:var(--blue)}

/* Journal Talya (illustration) */
.phone{margin-top:30px;max-width:340px;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:18px;display:flex;flex-direction:column;gap:12px}
.phone .head{display:flex;justify-content:space-between;align-items:baseline}
.phone .head b{font-family:var(--f-display);font-size:1.15rem}
.phone .head span{font-size:.85rem;color:var(--muted)}
.row{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start;font-size:.95rem}
.row time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--green)}
.row small{display:block;color:var(--muted)}
.solde{display:flex;justify-content:space-between;background:var(--green-soft);border-radius:12px;padding:10px 12px;font-size:.95rem}
.solde b{font-variant-numeric:tabular-nums}

/* Mediwalk */
.mwband{background:var(--band);color:var(--band-ink)}
.mwband .wrap{padding-block:80px}
.mwband .eyebrow{color:#9DBDF5}
.mwband h2{font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:800;margin-top:10px;max-width:22ch}
.mwband .sub{font-size:1.25rem;opacity:.85;margin-top:14px;max-width:56ch}
.devices{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.device{border:1px solid rgba(234,240,250,.18);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:10px;min-width:0}
.device h3{font-size:1.6rem}
.device p{opacity:.85}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(234,240,250,.18)}
.facts div{min-width:0}
.facts b{display:block;font-family:var(--f-display);font-size:1.25rem}
.facts span{font-size:1rem;opacity:.8}
.mwband a{color:#9DBDF5;font-weight:700}

/* Pros */
.pros .wrap{padding-block:80px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pros h2{font-size:clamp(2rem,4vw,2.8rem);font-weight:800}
.pros .sub{color:var(--muted);margin-top:14px;font-size:1.2rem}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;counter-reset:s}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-family:var(--f-display);font-weight:800;font-size:1.3rem}
.steps h3{font-size:1.2rem}
.steps p{color:var(--muted);font-size:1rem}

/* Contact */
.contact{background:var(--blue);color:var(--on-accent)}
.contact .wrap{padding-block:64px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.contact h2{font-size:clamp(2rem,4vw,2.8rem);font-weight:800}
.contact p{margin-top:12px;font-size:1.2rem;opacity:.92}
.card{background:var(--surface);color:var(--ink);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:16px}
.card .line{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card .line span{font-size:.9rem;color:var(--muted)}
.card .line a,.card .line b{font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none;user-select:all;overflow-wrap:anywhere}
.copy{font:inherit;font-size:.9rem;font-weight:700;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);padding:6px 12px;border-radius:10px;cursor:pointer}

footer{border-top:1px solid var(--line)}
footer .wrap{padding-block:32px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.95rem;color:var(--muted)}
footer a{color:var(--muted)}

@media (max-width: 900px){
  .hero .wrap,.product .wrap,.product.alt .wrap,.pros .wrap,.contact .wrap{grid-template-columns:1fr;gap:36px}
  .product.alt .text{order:0}
  .circle{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .tablet{transform:none}
}
@media (max-width: 560px){
  .features,.devices{grid-template-columns:1fr}
  nav.links a:not(.cta){display:none}
  .hero .wrap{padding-block:40px}
  .product .wrap,.mwband .wrap,.pros .wrap{padding-block:56px}
}