/* heygribou.com : couleurs et typographies de l'app Gribou */
:root {
  --bg: #F2F5FB; --card: #FFFFFF; --ink: #26304A; --muted: #5F6A86; --line: #E2E8F4;
  --accent: #EE4E2A; --accent-ink: #FFFFFF; --accent-soft: #FDE6DF; --gold: #F2B21B; --blue: #2E7DD7;
  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #131926; --card: #1C2434; --ink: #E9EDF6; --muted: #A0ABC4; --line: #2A3449; --accent: #FF7A55; --accent-ink: #1B1210; --accent-soft: #3A2622; color-scheme: dark }
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 17px/1.6 var(--body) }
a { color: var(--accent) }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px }
.wrap { max-width: 980px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)) }
header.site { padding-block: 18px }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 1.5rem var(--display) }
.brand img { width: 40px; height: 40px; border-radius: 10px }
nav.site { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 700 }
nav.site a { color: var(--ink); text-decoration: none }
nav.site a:hover { color: var(--accent) }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.15; text-wrap: balance; margin: 0 }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem) }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem) }
h3 { font-size: 1.2rem }
.hero { padding-block: 24px 56px }
.hero .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center }
.hero p.lead { font-size: 1.2rem; color: var(--muted); margin: 16px 0 24px; max-width: 34ch }
.hero .mascot { justify-self: center; width: min(280px, 70vw); height: auto }
.badges { display: flex; gap: 12px; flex-wrap: wrap }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; font: 800 1rem var(--body); text-decoration: none; background: var(--ink); color: var(--bg) }
.btn.alt { background: var(--card); color: var(--ink); border: 2px solid var(--line) }
.soon { font-size: .9rem; color: var(--muted); margin-top: 10px }
section.band { padding-block: 48px }
section.band.alt { background: var(--card); border-block: 1px solid var(--line) }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 24px }
.feature { background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 18px; min-width: 0 }
section.band.alt .feature { background: var(--bg) }
.feature p { margin: 6px 0 0; color: var(--muted) }
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 24px }
.price { background: var(--bg); border: 2px solid var(--line); border-radius: 18px; padding: 20px; text-align: center }
.price.best { border-color: var(--accent) }
.price b { display: block; font: 800 2rem var(--display) }
.price small { color: var(--muted) }
.free-note { margin-top: 18px; color: var(--muted) }
article.doc { padding-block: 16px 64px }
article.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 8px }
article.doc h2 { font-size: 1.4rem; margin-top: 32px }

article.doc .updated { color: var(--muted) }
article.doc table { border-collapse: collapse; width: 100%; font-size: .95rem }
article.doc .table { overflow-x: auto; margin-top: 12px }
article.doc th, article.doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line) }
article.doc th { font-weight: 800 }
details { background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-top: 10px }
details summary { font-weight: 800; cursor: pointer }
details p { margin: 8px 0 0 }
footer.site { border-top: 1px solid var(--line); padding-block: 28px; color: var(--muted); font-size: .95rem }
footer.site .wrap { display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between }
footer.site nav { display: flex; gap: 16px; flex-wrap: wrap }
footer.site a { color: var(--muted) }
@media (max-width: 720px) {
  .hero .wrap { grid-template-columns: 1fr }
  .hero .mascot { grid-row: 1; width: 180px }
}

/* Menu, pied de page, aperçu, formulaire de contact */
nav.site { align-items: center }
nav.site a.nav-cta { background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: 999px }
nav.site a.nav-cta:hover { color: var(--bg); opacity: .9 }
footer.site .wrap { align-items: flex-start }
footer.site .foot-brand p { margin: 6px 0 0 }
footer.site .foot-brand .brand { font-size: 1.2rem }
footer.site .brand img { width: 32px; height: 32px; border-radius: 8px }
footer.site .copy { flex-basis: 100%; margin: 8px 0 0 }
.shots-band { overflow: hidden }
.shots { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 2px 8px; margin-inline: -2px }
.shots img { flex: 0 0 auto; width: min(240px, 62vw); height: auto; border-radius: 22px; border: 2px solid var(--line); scroll-snap-align: start }
.form { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 2px solid var(--line); border-radius: 20px; padding: 22px; margin-top: 20px }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 800 }
.form input, .form select, .form textarea { font: 500 1rem var(--body); color: var(--ink); background: var(--bg); border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100% }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent) }
.form textarea { resize: vertical; min-height: 140px }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.form .btn { align-self: flex-start; border: 0; cursor: pointer }
.form .btn:disabled { opacity: .6 }
.form .small { font-size: .9rem; color: var(--muted); margin: 0 }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.form-msg { min-height: 1.6em; font-weight: 800; margin: 0 }
.form-msg.ok { color: #2F9E5B }
.form-msg.err { color: #B3261E }
@media (max-width: 720px) { .form .row2 { grid-template-columns: 1fr } nav.site { gap: 14px } }

/* Boutons des stores (mêmes que double-top.com) */
.stores { display: flex; flex-wrap: wrap; gap: 10px }
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 6px 18px 6px 14px; border-radius: 12px; background: #000; color: #fff; text-decoration: none }
.store span { display: flex; flex-direction: column; line-height: 1.05; font: 800 1.05rem var(--body) }
.store small { font-size: .7rem; font-weight: 500; opacity: .85 }
.store.soon { opacity: .8 }