/* Grains d'Ici — funnel — styles de marque partagés (nature chic bohème) */
:root{
  --cream:#F0E9E3; --cream-2:#F5EEE8; --terracotta:#CC7D5D; --terra-dark:#b86b4c;
  --olive:#727D5D; --olive-dark:#5f6a4c;
  --ink:#4a463f; --muted:#8a8275; --line:#e4dccf;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost", -apple-system, "Segoe UI", sans-serif;
  --radius:18px; --pill:46px;
  --shadow:0 10px 30px rgba(120,90,60,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:540px;margin:0 auto;padding:0 22px 56px}
.center{text-align:center}

/* Logo wordmark (img SVG, déjà en terracotta) */
.brand{display:flex;justify-content:center;margin:30px 0 6px}
.brand img{width:min(74%,300px);height:auto}
.tagline{text-align:center;color:var(--muted);font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;margin:2px 0 20px}

/* Titres */
h1,h2{font-family:var(--serif);font-weight:500;line-height:1.1;color:var(--olive)}
h1{font-size:clamp(2rem,7vw,2.6rem);text-align:center;margin:.2em 0 .1em}
h2{font-size:clamp(1.5rem,5vw,2rem);margin:0 0 .4em}
.sub{text-align:center;color:var(--muted);font-size:1.05rem;margin:0 0 22px}

/* Photo en arche */
.arch{margin:24px auto 0;max-width:400px;aspect-ratio:400/430;
  border-radius:200px 200px 18px 18px;overflow:hidden;box-shadow:var(--shadow);
  background:#e9ddca center/cover no-repeat}

/* Boutons — chic, branding Grains d'Ici, micro-animations */
.btn{position:relative;overflow:hidden;display:block;width:100%;text-decoration:none;text-align:center;
  cursor:pointer;border:0;color:#fff;
  font-family:var(--sans);font-weight:600;font-size:1.12rem;letter-spacing:.015em;
  text-shadow:0 1px 2px rgba(74,40,20,.28);
  padding:18px 22px;margin:0 0 15px;border-radius:var(--pill);
  box-shadow:0 8px 22px rgba(204,125,93,.26);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), filter .25s;
  will-change:transform}
.btn small{display:block;font-family:var(--sans);font-weight:400;font-size:.82rem;opacity:.96;margin-top:2px;
  text-shadow:0 1px 1px rgba(74,40,20,.22)}
/* reflet qui balaie au survol */
.btn::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);transition:left .6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(204,125,93,.34);filter:brightness(1.03)}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(-1px) scale(.99);box-shadow:0 8px 18px rgba(204,125,93,.28);transition-duration:.08s}
.btn-terra{background:linear-gradient(135deg,#d4895f,#c2734e)}
.btn-olive{background:linear-gradient(135deg,#7c875f,#67724d);border-radius:12px;
  box-shadow:0 8px 22px rgba(114,125,93,.26)}
.btn-olive:hover{box-shadow:0 16px 34px rgba(114,125,93,.34)}
.btn-olive:active{box-shadow:0 8px 18px rgba(114,125,93,.28)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn[disabled]::after{display:none}
.btn-ghost{background:transparent;color:var(--muted);box-shadow:none;font-family:var(--sans);
  font-size:.95rem;padding:10px;border-radius:8px}
.btn-ghost::after{display:none}
.btn-ghost:hover{transform:none;background:rgba(114,125,93,.08);filter:none}
/* entrée douce des boutons empilés */
@keyframes btnIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.btn-terra,.btn-olive{animation:btnIn .5s cubic-bezier(.22,1,.36,1) both}
.btn-terra:nth-of-type(1),.btn-olive:nth-of-type(1){animation-delay:.04s}
.btn-terra:nth-of-type(2),.btn-olive:nth-of-type(2){animation-delay:.12s}
.btn-terra:nth-of-type(3),.btn-olive:nth-of-type(3){animation-delay:.20s}

/* Carte / formulaire */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow)}
label{display:block;font-size:.85rem;color:var(--muted);margin:0 0 6px;letter-spacing:.02em}
input,select,textarea{width:100%;font:inherit;font-size:1.05rem;padding:14px;border:1px solid var(--line);
  border-radius:10px;background:#fff;margin-bottom:14px;color:var(--ink)}
input:focus,select,textarea:focus{outline:2px solid var(--terracotta);border-color:transparent}
.choices{display:grid;gap:10px}
.choice{display:block;border:1.5px solid var(--line);border-radius:12px;padding:15px 16px;cursor:pointer;
  background:#fff;font-size:1.05rem;transition:border-color .12s,background .12s}
.choice:hover{border-color:var(--terracotta)}
.choice input{position:absolute;opacity:0;width:0;height:0;margin:0}
.choice.sel,.choice:has(input:checked){border-color:var(--terracotta);background:#fbf3ee}

/* Étapes (multi-step) */
.progress{height:6px;background:var(--line);border-radius:99px;margin:0 0 22px;overflow:hidden}
.progress>i{display:block;height:100%;background:var(--terracotta);transition:width .25s ease;border-radius:99px}
.stepmeta{text-align:center;color:var(--muted);font-size:.8rem;letter-spacing:.05em;margin:0 0 14px}
.step{display:none}.step.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.row{display:flex;gap:18px;justify-content:space-between;margin-top:8px}
.form-msg{margin-top:10px;font-size:.95rem}.form-msg.ok{color:var(--olive)}.form-msg.err{color:#b3261e}

.foot{text-align:center;color:var(--muted);font-size:.7rem;margin-top:26px;line-height:1.7}
.foot a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}