:root{--ink:#15333b;--muted:#526870;--teal:#0d806f;--teal2:#0c665c;--pale:#eaf6f1;--line:#dce9e6;--bg:#f8fbf9;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--bg);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.7}a{color:var(--teal2)}a:hover{text-decoration-thickness:2px}.wrap{max-width:1050px;margin:auto;padding:0 26px}.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px;z-index:10}.top{background:rgba(255,255,255,.95);border-bottom:1px solid var(--line)}.nav{display:flex;gap:22px;align-items:center;justify-content:space-between;min-height:78px}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:800;font-size:18px}.logo{width:39px;height:39px;background:var(--teal);display:grid;place-items:center;border-radius:13px;color:#fff;font-size:24px}.links{display:flex;flex-wrap:wrap;gap:20px}.links a{font-size:14px;text-decoration:none;color:var(--muted);font-weight:700}.links a:hover{color:var(--teal)}.hero{background:linear-gradient(125deg,#e3f5ed,#fbfdfa 70%);padding:82px 0 72px;border-bottom:1px solid var(--line)}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:12px;color:var(--teal2)}h1,h2,h3{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.24}h1{font-size:clamp(36px,5vw,58px);max-width:780px;letter-spacing:-.04em;margin:12px 0 16px}h2{font-size:27px;margin:40px 0 14px}h3{font-size:19px;margin:26px 0 10px}p{margin:0 0 17px}.lead{color:var(--muted);font-size:19px;max-width:750px}.tag{display:inline-block;border:1px solid #b8ded0;background:#f1faf5;border-radius:999px;padding:3px 12px;font-size:12px;color:var(--teal2);font-weight:700}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.button{background:var(--teal);color:#fff;text-decoration:none;border-radius:10px;padding:12px 19px;font-weight:700;display:inline-block}.button:hover{background:var(--teal2)}.button.alt{background:#fff;color:var(--teal2);border:1px solid #b7dcd2}.section{padding:56px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tile{background:#fff;border:1px solid var(--line);border-radius:17px;padding:23px}.tile h3{margin:12px 0 8px}.tile p{color:var(--muted);font-size:15px}.pict{font-size:27px;color:var(--teal)}.notice{border-left:4px solid var(--teal);background:var(--pale);padding:17px 20px;border-radius:0 10px 10px 0;margin:22px 0}.doc{max-width:810px;padding:42px 0 70px}.doc h1{font-size:38px}.doc h2{border-top:1px solid var(--line);padding-top:26px;font-size:24px}.doc li{margin-bottom:8px}.toc{background:#fff;border:1px solid var(--line);padding:17px 24px;border-radius:14px;margin:25px 0}.toc ol{margin:8px 0;padding-left:20px}.toc li{margin:3px 0}.small{font-size:14px;color:var(--muted)}.foot{border-top:1px solid var(--line);padding:30px 0;background:#fff}.footflex{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.foot nav{display:flex;flex-wrap:wrap;gap:16px}.foot a{font-size:14px}.alert{padding:14px 17px;border:1px dashed #c49d56;background:#fff9eb;border-radius:9px}.steps{counter-reset:st}.step{display:flex;gap:15px;margin:24px 0}.num{flex-shrink:0;display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:var(--pale);color:var(--teal);font-weight:800}.step h3{margin:1px 0 5px}@media(max-width:700px){.nav{align-items:flex-start;flex-direction:column;padding-top:16px;padding-bottom:16px;gap:12px}.links{gap:12px}.grid{grid-template-columns:1fr}.hero{padding:54px 0}.section{padding:34px 0}.doc{padding-top:28px}h1{font-size:36px}}
/* Site V2 : vraie identité visuelle et captures Android */
.brand { display:inline-flex; align-items:center; gap:.6rem; }
.brand .brand-icon { width:42px; height:42px; object-fit:contain; border-radius:11px; flex-shrink:0; }
.hero-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(220px,.65fr); align-items:center; gap:clamp(2rem,5vw,5rem); }
.hero-copy { min-width:0; }
.hero-visual { justify-self:center; text-align:center; max-width:260px; width:100%; border:8px solid #f1f5f5; border-radius:27px; background:#f8fbfa; box-shadow:0 22px 48px rgba(9,59,55,.18); transform:rotate(2deg); overflow:hidden; }
.hero-visual img { display:block; width:100%; height:auto; max-height:390px; object-fit:cover; object-position:top; }
.visual-label { display:block; padding:10px 12px; color:#184840; font-size:.79rem; font-weight:700; background:#edf7f3; }
.showcase { background:#f2f8f6; }
.showcase-intro { max-width:720px; }
.screen-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:20px; margin-top:26px; }
.screen-card { background:white; overflow:hidden; border-radius:18px; border:1px solid #ddece8; box-shadow:0 8px 25px rgba(21,51,59,.07); display:flex; flex-direction:column; }
.screen-card img { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; object-position:top; background:#e7f1ee; }
.screen-caption { padding:16px 15px 18px; }
.screen-caption h3 { font-size:1rem; line-height:1.25; margin:0 0 8px; }
.screen-caption p { font-size:.88rem; margin:0; line-height:1.5; color:#526870; }
.screen-note { margin-top:20px; font-size:.85rem; color:#526870; }
.future-shot { background:#e9f7f2; border-left:4px solid #0d806f; padding:18px 21px; border-radius:11px; margin:25px 0; }
.future-shot p { margin:8px 0 0; }
@media(max-width:700px){.hero-layout{grid-template-columns:1fr}.hero-visual{display:none}.screen-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.screen-caption{padding:13px 11px}.screen-caption h3{font-size:.9rem}.screen-caption p{font-size:.8rem}}
@media(max-width:390px){.screen-grid{grid-template-columns:1fr 1fr}.brand .brand-icon{width:34px;height:34px}}

/* V2.1 - galerie horizontale : conserver la proportion et l'intégralité des captures */
.screen-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 18px;
  padding: 4px 4px 20px;
  margin-top: 26px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.screen-card {
  flex: 0 0 248px !important;
  width: 248px;
  min-width: 248px;
  scroll-snap-align: start;
}
.screen-card img {
  width: 100%;
  height: 470px;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  background: #edf5f1;
}
.screen-caption { flex: 1; }
@media (max-width: 640px) {
  .screen-grid { gap: 14px; }
  .screen-card { flex-basis: 220px !important; width: 220px; min-width: 220px; }
  .screen-card img { height: 435px; }
}