/* Charte commune à ILYGO. */
header.site { top:var(--ilygo-env-offset,0px); background:rgb(255 255 255 / .96); backdrop-filter:blur(12px); }
.wrap { max-width:1200px; }
.nav { padding:20px 0; }
.brand img { width:36px; height:36px; object-fit:contain; }
.nav nav { gap:22px; font-size:13px; }
.brand { font-size:17px; white-space:nowrap; }
.btn-primary { background:#213150; color:white; border-color:#213150; }
.btn-primary:hover { background:#2e4470; color:white; }
.hero { padding:0; }
.hero > .wrap { display:grid; grid-template-columns: .95fr 1.05fr; gap:48px; padding-top:72px; padding-bottom:64px; align-items:center; }
.hero-inner { text-align:left; max-width:none; }
.hero h1 { font-size:clamp(34px,3.5vw,52px); line-height:1.13; letter-spacing:-.045em; text-wrap:balance; }
.hero p { margin:24px 0 0; font-size:16px; line-height:1.8; }
.hero .actions { justify-content:flex-start; flex-wrap:wrap; }
.hero .hero-note { font-size:12px; line-height:1.7; margin-top:20px; }
.hero .hero-shot { margin:0; border-radius:14px; box-shadow:0 20px 60px rgb(33 49 80 / .08); }
.hero-shot img { width:100%; aspect-ratio:16/9; object-fit:contain; height:auto; object-position:left top; }
.hero-shot .shot-bar { background:#f5f7fb; }
.hero-shot figcaption { padding:14px 16px; background:#f5f7fb; color:#53657c; font-size:11px; line-height:1.7; }
.hero-steps { background:#f5f7fb; border-bottom:1px solid var(--border); }
.hero-steps ol { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:28px 24px; max-width:1200px; margin:auto; }
.hero-steps li { display:flex; gap:16px; font-size:13px; line-height:1.7; }
.hero-steps b { color:var(--accent); font-size:12px; }
.hero-steps strong { display:block; font-size:14px; margin-bottom:4px; }
.hero-steps span { color:var(--text-2); }
section { padding:76px 0; }
.shot-bar { background:#edf3f8; }
.shot { box-shadow:0 8px 30px rgb(33 49 80 / .05); }
.card, .type-card, .price-card { border-radius:14px; }
footer.site { background:#f5f7fb; }
@media(max-width:1000px) { .nav nav { display:none; } .hero > .wrap { grid-template-columns:1fr; max-width:720px; padding-top:48px; gap:32px; } .hero h1 { max-width:18ch; font-size:44px; } }
@media(max-width:640px) { .nav { gap:12px; flex-wrap:wrap; } .nav-cta { margin-left:auto; } .nav-cta .btn { font-size:12px; padding:9px 12px; } .brand { font-size:14px; } .brand img { width:28px; height:28px; } .hero h1 { font-size:38px; } .hero > .wrap { padding:36px 22px; } .hero .actions { flex-direction:column; align-items:stretch; } .hero-steps ol { grid-template-columns:1fr; gap:20px; } section { padding:48px 0; } }