/* Tecki Teckou - landing page. Palette reprise du jeu. */
:root{
  --bg:#5A3B2C;          /* fond du site : brun du jeu */
  --on-bg:#FFF6EC;       /* texte sur le fond brun (9.4:1) */
  --on-bg-soft:#E9D3C2;  /* texte secondaire sur le fond brun (6.9:1) */
  --on-bg-link:#F5A5C0;  /* liens sur le fond brun (5.3:1) */
  --surface:#FFFFFF;
  --tint:#4E3226;        /* brun plus profond pour alterner les sections */
  --cream:#FFF6EC;
  --text:#4A2E22;        /* brun chocolat (contraste 11.5:1) */
  --text-soft:#7A5A47;   /* brun doux (contraste 5.8:1) */
  --accent:#E8749A;      /* rose du jeu : déco uniquement */
  --accent-soft:#FBDCE6;
  --cta:#B83D67;         /* rose foncé : boutons, texte blanc 5.4:1 */
  --cta-hover:#A0325A;
  --mint:#3E8A61;
  --mint-soft:#DDF0E2;
  --border:#EBD3BC;
  --danger:#B3402F;
  --focus:#2B6CB0;
  --radius:20px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--on-bg);
  font-family:var(--font); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ line-height:1.15; text-wrap:balance; margin:0; font-weight:800; letter-spacing:-0.01em; }
h2{ font-size:clamp(1.5rem, 5.5vw, 2.1rem); text-align:center; margin-bottom:1.25rem; }
h3{ font-size:1.15rem; margin-bottom:.3rem; }
p{ margin:0; text-wrap:pretty; }
a{ color:var(--on-bg-link); }
strong{ color:var(--cta); }

:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:8px; }

.skip{ position:absolute; left:12px; top:-60px; background:var(--text); color:#fff; padding:10px 14px; border-radius:12px; z-index:10; }
.skip:focus{ top:12px; }

.paw{ width:1em; height:1em; fill:currentColor; vertical-align:-.12em; }

/* ---------- HERO : "chez lui", on entre dans le salon du jeu ---------- */
.hero{
  position:relative; min-height:100svh; overflow:hidden; color:#FFF6EC;
  /* IMAGE : images/hero-piece.webp - décor plein écran (1200 px de large conseillé) */
  background:#C9A27E url("../images/hero-piece.webp") center 62% / cover no-repeat;
  display:flex; flex-direction:column;
  padding:max(12px, env(safe-area-inset-top)) 16px 16px;
}
/* Le plafond en bois devient un fond sombre et chaud pour le texte */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(58,34,24,.92) 0%, rgba(58,34,24,.78) 36%, rgba(58,34,24,0) 55%, rgba(58,34,24,0) 70%, rgba(90,59,44,.6) 100%);
}
.hero > *, .hero__text, .scene{ position:relative; }
.hero__top{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:4px 0 clamp(18px, 5svh, 44px); /* espace entre la barre du haut et le titre */
}
.brand{ font-weight:800; font-size:1rem; display:inline-flex; align-items:center; gap:6px; color:#FFF6EC; }
.brand .paw{ color:var(--accent); }
.badge{
  font-size:.75rem; font-weight:800; color:#FFF6EC; white-space:nowrap;
  background:rgba(255,246,236,.18); border:1px solid rgba(255,246,236,.35); border-radius:999px; padding:5px 10px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero h1{ font-size:clamp(1.6rem, 8vw, 3.4rem); text-shadow:0 2px 12px rgba(0,0,0,.25); }
.hero__sub{ color:#F5E1D2; font-size:.95rem; line-height:1.55; margin-top:clamp(8px, 1.8svh, 16px); }

/* La scène : le teckel dans le salon + sa bulle */
.scene{ flex:1; display:flex; justify-content:center; align-items:flex-end; min-height:90px; padding:12px 0 6px; }
.dog{ position:relative; }
.dog img{
  height:clamp(80px, calc(100svh - 505px), 230px); width:auto;
  animation:breathe 3.4s ease-in-out infinite; transform-origin:50% 100%;
  filter:drop-shadow(0 8px 6px rgba(58,34,24,.25));
}
@keyframes breathe{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(1.02,.98); } }
.bubble{
  position:absolute; left:72%; top:-6px; white-space:nowrap;
  background:#fff; color:var(--text); font-weight:800; font-size:.8rem;
  padding:6px 10px; border-radius:14px 14px 14px 4px; box-shadow:0 6px 16px -6px rgba(58,34,24,.4);
  animation:pop 4s ease-in-out infinite;
}
@keyframes pop{ 0%,8%{ opacity:0; transform:translateY(6px) scale(.8); } 16%,80%{ opacity:1; transform:none; } 90%,100%{ opacity:0; transform:translateY(-4px); } }
.heart{ position:absolute; bottom:40%; font-size:14px; opacity:0; animation:float 3.6s ease-in infinite; }
.heart:nth-of-type(1){ left:20%; animation-delay:.6s; } .heart:nth-of-type(2){ left:55%; animation-delay:1.8s; } .heart:nth-of-type(3){ left:80%; animation-delay:2.7s; }
@keyframes float{ 0%{ opacity:0; transform:translateY(20px) scale(.6); } 20%{ opacity:.9; } 100%{ opacity:0; transform:translateY(-70px) scale(1.1); } }

/* Formulaire en carte givrée, posé sur le parquet */
.glass{
  background:rgba(255,246,236,.92); color:var(--text);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:24px; padding:14px 14px 10px; box-shadow:0 18px 40px -18px rgba(58,34,24,.6);
  width:100%; max-width:440px; margin:0 auto;
}
.glass .signup{ gap:8px; }

/* ---------- FORMULAIRES ---------- */
.signup{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:440px; margin:0 auto; }
.field label, .label{ font-weight:800; font-size:.85rem; display:block; margin-bottom:4px; }
input[type=email], input[type=text], textarea{
  width:100%; font:inherit; font-size:16px; /* 16px : pas de zoom auto sur iPhone */
  color:var(--text); background:var(--surface);
  border:2px solid var(--border); border-radius:14px; padding:12px 14px; min-height:50px;
}
textarea{ min-height:96px; resize:vertical; }
input::placeholder, textarea::placeholder{ color:#9C8170; }
input:focus-visible, textarea:focus-visible{ outline:3px solid var(--focus); outline-offset:1px; border-color:var(--focus); }
input[aria-invalid=true]{ border-color:var(--danger); }

.check{ display:flex; gap:10px; align-items:flex-start; font-size:.8rem; line-height:1.35; color:var(--text-soft); cursor:pointer; }
.check input, .opt input{ flex:none; width:22px; height:22px; margin:0; accent-color:var(--cta); }
.err{ color:var(--danger); font-size:.85rem; font-weight:700; margin-top:4px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn{
  font:inherit; font-weight:800; font-size:1.05rem; color:#fff; background:var(--cta);
  border:0; border-radius:16px; min-height:54px; padding:12px 20px; cursor:pointer;
  box-shadow:0 8px 18px -10px var(--cta); transition:transform .15s, background .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
}
.btn:hover{ background:var(--cta-hover); }
.btn:active{ transform:scale(.97); }
.btn[disabled]{ opacity:.7; cursor:progress; }
.btn--ghost{ background:var(--surface); color:var(--cta); border:2px solid var(--cta); box-shadow:none; }
.btn--ghost:hover{ background:var(--accent-soft); }
.reassure{ text-align:center; font-size:.8rem; color:var(--text-soft); }
.form-status{ text-align:center; font-weight:800; padding:14px; border-radius:14px; background:var(--mint-soft); color:#235239; }
.form-status--warn{ background:#FFF0D6; color:#6B4A12; }

/* ---------- SECTIONS ---------- */
.section{ padding:48px 16px; }
.section > *{ max-width:960px; margin-left:auto; margin-right:auto; }
.section--tint{ background:var(--tint); border-radius:32px 32px 0 0; }
.section--tint + .section, .section--tint + .footer{ border-radius:0; }
.lead{ text-align:center; max-width:560px; color:var(--on-bg-soft); font-size:1.05rem; }
.caption{ text-align:center; color:var(--on-bg-soft); font-size:.85rem; margin-top:12px; }

.features{ list-style:none; margin:0 auto; padding:0; display:grid; gap:14px; }
.feature{
  background:var(--surface); border-radius:var(--radius); padding:16px;
  display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center;
  box-shadow:0 2px 0 var(--border);
}
.feature img{ width:96px; height:96px; object-fit:contain; transition:transform .25s; }
.feature:hover img{ transform:rotate(-4deg) scale(1.05); }
.feature p{ color:var(--text-soft); font-size:.95rem; }

.card{ background:var(--surface); border-radius:28px; padding:28px 18px; box-shadow:0 2px 0 var(--border); }
.card--cta{ text-align:center; max-width:560px; border:2px dashed var(--accent); }
.card--cta > p{ color:var(--text-soft); margin-bottom:18px; }
.card--cta .signup{ text-align:left; }
.already{ font-weight:800; color:#235239; background:var(--mint-soft); border-radius:14px; padding:14px; }

/* ---------- CARROUSEL ---------- */
.carousel{ max-width:440px; }
.carousel__track{
  list-style:none; margin:0; padding:0; display:flex; gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:24px;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__slide{ flex:0 0 100%; scroll-snap-align:center; }
.carousel__slide img, .carousel__slide video{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:24px; background:var(--accent-soft); }
.carousel__dots{ display:flex; justify-content:center; gap:4px; margin-top:6px; }
.carousel__dots button{
  width:32px; height:32px; border:0; background:none; cursor:pointer; padding:0;
  display:grid; place-items:center; border-radius:50%;
}
.carousel__dots button::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--border); transition:all .2s; }
.carousel__dots button[aria-current=true]::before{ background:var(--accent); width:22px; border-radius:6px; }

/* ---------- FAQ & accordéons ---------- */
.faq{ max-width:640px; display:grid; gap:10px; }
details{ background:var(--surface); border-radius:16px; box-shadow:0 2px 0 var(--border); }
summary{
  list-style:none; cursor:pointer; font-weight:800; padding:16px 48px 16px 16px; position:relative; min-height:52px;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+"; position:absolute; right:16px; top:50%; translate:0 -50%;
  width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--cta);
  display:grid; place-items:center; font-size:1.2rem; line-height:1; transition:rotate .2s;
}
details[open] > summary::after{ rotate:45deg; }
details > p{ padding:0 16px 16px; color:var(--text-soft); }

/* ---------- FORMULAIRE D'IDÉES ---------- */
.ideas{ max-width:640px; margin-top:20px; display:grid; gap:10px; }
.ideas fieldset{ border:0; margin:0; padding:0; min-width:0; }
.ideas legend{ padding:0; }
.opts{ display:grid; gap:2px; padding:0 8px 10px; }
.opt{ display:flex; gap:12px; align-items:flex-start; padding:9px 8px; border-radius:12px; cursor:pointer; font-size:.95rem; }
.opt:hover{ background:#FDEFE3; }
.opt input{ margin-top:1px; }
.opt input[type=radio]{ border-radius:50%; }
.ideas .free{ padding:0 16px 16px; }
.ideas .block{ background:var(--surface); border-radius:16px; padding:16px; box-shadow:0 2px 0 var(--border); }
.ideas .block .opts{ padding:6px 0 0; }
.optional{ font-weight:600; color:var(--text-soft); font-size:.8rem; }
.count{ font-size:.75rem; font-weight:800; color:#fff; background:var(--cta); border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:2px; }

/* ---------- FOOTER ---------- */
.footer{
  background:#3A2218; color:#F5E7DB; text-align:center; font-size:.85rem;
  padding:32px 16px calc(96px + env(safe-area-inset-bottom)); display:grid; gap:8px;
}
.footer p{ max-width:560px; margin:0 auto; }
.footer a{ color:#FFD3E0; font-weight:800; }
.footer .paw{ color:var(--accent); }

/* ---------- BOUTON COLLANT ---------- */
.sticky-cta{
  position:fixed; left:16px; right:16px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:5;
  background:var(--cta); color:#fff; font-weight:800; text-align:center; text-decoration:none;
  border-radius:16px; padding:15px; box-shadow:0 10px 24px -8px rgba(74,46,34,.5);
  transition:transform .25s, opacity .25s;
}
.sticky-cta.is-hidden{ transform:translateY(140%); opacity:0; pointer-events:none; }

/* Emplacement d'image manquante : bien visible tant que l'image n'est pas fournie */
.ph{
  display:grid; place-items:center; text-align:center; padding:8px;
  border:2px dashed var(--accent); border-radius:16px; background:var(--accent-soft);
  color:var(--cta); font-size:.75rem; font-weight:800; word-break:break-all;
}

.noscript{ position:fixed; inset:auto 0 0; background:#FFF0D6; padding:12px; text-align:center; margin:0; }

/* ---------- MERCI / PAGES SIMPLES ---------- */
.page{ max-width:640px; margin:0 auto; padding: max(16px, env(safe-area-inset-top)) 16px 48px; }
.page h1{ font-size:clamp(1.8rem, 8vw, 2.6rem); text-align:center; margin:12px 0; }
.page .lead{ margin:0 auto 20px; }
.back{ font-weight:800; text-decoration:none; display:inline-block; padding:8px 0; }
.legal h1{ text-align:left; font-size:1.8rem; }
.legal h2{ text-align:left; font-size:1.2rem; margin:28px 0 8px; }
.legal p, .legal li{ color:var(--on-bg-soft); margin-bottom:8px; }
.legal strong{ color:var(--on-bg); }
.todo{ background:#FFF0D6; color:#6B4A12; border-radius:6px; padding:0 4px; font-weight:700; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{ display:block; padding:10px 16px; border-radius:999px; border:2px solid var(--border); background:var(--surface); font-weight:700; }
.chip input:checked + span{ background:var(--accent-soft); border-color:var(--cta); color:var(--cta); }
.chip input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:2px; }
.thanks-dog{ width:200px; margin:8px auto 0; animation: bob 3.2s ease-in-out infinite; }

/* ---------- ÉCRANS PLUS LARGES ---------- */
@media (min-width:720px){
  .hero{
    padding:28px 48px 40px; background-position:center 70%;
    display:grid; grid-template-columns:minmax(0,560px) 1fr; column-gap:40px; row-gap:28px;
    grid-template-rows:auto 1fr auto auto 1fr;
    grid-template-areas:"top top" ". scene" "text scene" "form scene" ". scene";
  }
  .hero::before{ background:linear-gradient(90deg, rgba(58,34,24,.9) 0%, rgba(58,34,24,.7) 40%, rgba(58,34,24,0) 65%); }
  .hero__top{ grid-area:top; padding-bottom:0; }
  .hero__text{ grid-area:text; }
  .hero__sub{ font-size:1.1rem; }
  .scene{ grid-area:scene; align-self:end; }
  .dog img{ height:min(42vh, 320px); }
  .glass{ grid-area:form; margin:0; }
  .features{ grid-template-columns:1fr 1fr; gap:18px; }
  .feature{ grid-template-columns:1fr; text-align:center; padding:24px; }
  .feature img{ width:140px; height:140px; margin:0 auto; }
  .section{ padding:72px 24px; }
  .sticky-cta{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .bubble{ opacity:1; } .heart{ display:none; }
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ideas .block > legend{ float:left; width:100%; margin-bottom:4px; }
.ideas .block > legend + *{ clear:both; }
.form-status:focus{ outline:none; }

/* Fond brun : les blocs clairs gardent un texte foncé */
.feature, .card, details, .ideas .block, .chip span, .ph{ color:var(--text); }
.card .lead{ color:var(--text-soft); }
.card a{ color:var(--cta); }
.ideas > .err{ color:#FFB4A6; }