/* web/styles.css */
:root{
  --cream:#FDFBF6; --cream2:#FBFBFA; --ink:#272521; --ink2:#333333;
  --olive:#4C5F44; --olive-d:#3c4d36; --sage:#D3DFD8; --gray:#5B5C5E;
  --radius:14px; --maxform:480px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Hanken Grotesk',system-ui,Arial,sans-serif;color:var(--ink);background:var(--ink)}
img{max-width:100%;display:block}

/* FOND VIDÉO PLEIN ÉCRAN (derrière toute la page) */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.bg__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg__overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(39,37,33,.85) 0%,rgba(39,37,33,.55) 48%,rgba(39,37,33,.62) 100%)}

.split{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;min-height:100vh;align-items:center}

/* HERO (texte par-dessus la vidéo) */
.hero{display:flex;align-items:center;justify-content:center;padding:48px;color:#fff}
.hero__content{max-width:520px}
.hero__logo{margin-bottom:28px;width:min(380px,72%)}
.hero__title{font-size:clamp(28px,3.2vw,44px);line-height:1.08;font-weight:700;margin:0 0 14px;text-shadow:0 2px 16px rgba(0,0,0,.25)}
.hero__subtitle{font-size:clamp(16px,1.4vw,20px);line-height:1.5;color:#f0ece3;margin:0 0 24px}
.hero__points{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.hero__points li{display:flex;align-items:center;gap:10px;font-size:16px;line-height:1.4;color:#f4f1ea}
.hero__points li::before{content:"🔔";flex:0 0 auto;font-size:18px;line-height:1}
.hero__cta{display:inline-block;margin-top:24px;padding:12px 22px;border:1.5px solid rgba(255,255,255,.7);border-radius:10px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;transition:background .2s,color .2s,border-color .2s}
.hero__cta:hover{background:#fff;color:var(--ink);border-color:#fff}
.nowrap{white-space:nowrap}

/* FORM (carte translucide posée sur la vidéo) */
.formside{display:flex;align-items:center;justify-content:center;padding:24px 32px}
.card{width:100%;max-width:var(--maxform);background:rgba(255,255,255,.90);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:24px 28px;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.40);border:1px solid rgba(255,255,255,.5)}
.card__title{font-size:26px;font-weight:700;margin:0 0 4px}
.card__lead{color:var(--gray);font-size:14px;margin:0 0 14px}
form{display:grid;gap:11px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:4px}
label{font-size:13px;font-weight:500}
input,select{font:inherit;padding:9px 12px;border:1px solid #ddd6c8;border-radius:10px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus{outline:3px solid rgba(76,95,68,.25);border-color:var(--olive)}
.check label{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:13px;color:var(--ink2)}
.check input{width:auto;margin-top:2px}
.btn{background:var(--olive);color:#fff;border:0;border-radius:10px;padding:13px 18px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--olive-d)}
.btn[disabled]{opacity:.6;cursor:progress}
.legal{font-size:11.5px;color:var(--gray);margin:0;line-height:1.4}
.legal a{color:var(--olive)}
.status{font-size:14px;padding:0;margin:0}
.status.ok{color:var(--olive);font-weight:600}
.status.err{color:#b3261e;font-weight:600}
.field input:invalid.touched,.field select:invalid.touched{border-color:#b3261e}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.turnstile{min-height:0}

/* RESPONSIVE */
@media (max-width:1023px){
  .split{grid-template-columns:1fr;align-items:stretch}
  .hero{padding:40px 24px 16px}
  .formside{padding:8px 18px 32px}
}
@media (max-width:560px){
  .row{grid-template-columns:1fr}
  .card__title{font-size:23px}
  .card{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  .bg__video{display:none}
}