:root {
  --bg: #fff7f5;          /* beige rosé très doux */
  --card: #ffffff;
  --ink: #473c3c;         /* brun doux, lisible */
  --muted: #7c6f6f;
  --accent: #f4978e;      /* pêche rosé */
  --accent-2: #c8b6ff;    /* lavande claire */
  --accent-light: #fcd5ce;
  --radius: 18px;
  --ring: 4px rgba(244, 151, 142, 0.25);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% 0%, #ffe5e0 0%, transparent 60%),
    radial-gradient(1000px 500px at 90% -10%, #e8e1ff 0%, transparent 60%),
    var(--bg);
  line-height: 1.6;
}

/* HERO */
.hero {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1.2fr .8fr;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  align-items: center;
}
.hero__text h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin: 0 0 .2rem;
}
.eyebrow {
  font-weight: 700;
  color: var(--accent);
  margin: .2rem 0 1rem;
}
.badges {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.badges li, .btn, .btn-ghost {
  border-radius: 999px;
  padding: .5rem .9rem;
  display: inline-block;
}
.badges li {
  background: var(--accent-light);
  border: 1px solid #f6c7bf;
  font-size: .95rem;
}

.hero__media img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(0,0,0,.06);
  display: block;
  margin-left: auto;
}

/* LAYOUT */
main { padding: 0 clamp(1rem, 4vw, 2rem) 3rem; }
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.3vw, 2rem);
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
  border: 1px solid #f2e9e7;
  max-width: 960px; margin: 1rem auto 0;
}

/* === FORM: MOBILE-FIRST (label au-dessus, champ dessous) === */
.grid {
  display: grid;
  grid-template-columns: 1fr;   /* 1 colonne (mobile) */
  gap: 1rem;
}
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } /* 2 colonnes dès 720px */
}

.field { margin-bottom: 1rem; display: block; }
label { font-weight: 700; display: block; margin-bottom: .55rem; line-height: 1.3; }

input[type=text], input[type=email], input[type=tel], textarea {
  display: block;
  width: 100%;
  border: 1px solid #eed6d3;
  border-radius: 14px;
  padding: .85rem 1rem;
  font: inherit; background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .05s;
  font-size: 16px; /* évite le zoom iOS */
}
input:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 var(--ring);
}
textarea { resize: vertical; min-height: 120px; }

fieldset.field > legend { display:block; font-weight: 800; margin-bottom: .45rem; }
fieldset.field label {
  display: flex;             /* radio + texte */
  align-items: center;
  gap: .55rem;
  margin: .4rem 0;           /* empilement vertical par défaut */
}
@media (min-width: 720px) {
  fieldset.field label {
    display: inline-flex;    /* côte à côte dès 720px */
    margin: .2rem 1rem .2rem 0;
  }
}

.checkbox label { font-weight: 600; }

.req { color: #d9534f; }
.error { color: #b02a37; font-size: .9rem; margin: .35rem 0 0; }
.hp { position: absolute; left: -9999px; height: 1px; width: 1px; overflow: hidden; }

.count { text-align: right; font-size: .85rem; color: var(--muted); margin-top: .25rem; }

/* BUTTONS */
.btn {
  background: linear-gradient(180deg, var(--accent) 0%, #f28482 100%);
  color: #fff; border: none; cursor: pointer; font-weight: 800;
  transition: transform .08s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(.98); }
.btn:focus { outline: none; box-shadow: 0 0 0 var(--ring); }

.btn-ghost {
  background: #fff; border: 1px solid #e8dff0; color: #6b5ca5; text-decoration: none;
}
.btn-ghost:hover { background: #faf7ff; }

/* TABLE (admin) */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%; border-collapse: collapse; font-size: .95rem;
}
.table th, .table td {
  padding: .6rem .7rem; border-bottom: 1px solid #f0e9e7; text-align: left;
}
.table th { background: #fff3f1; }

/* ALERTS */
.alert {
  border-radius: 14px; padding: .9rem 1rem; margin: .5rem 0 1rem; font-weight: 700;
}
.alert-success { background: #eaf7ef; color: #245c37; border: 1px solid #d5f0dd; }
.alert-error { background: #fdecea; color: #7a271a; border: 1px solid #f9ddd9; }

/* FOOTER */
.sitefoot { text-align: center; padding: 2rem 1rem 3rem; color: var(--muted); }

/* LINKS */
a { color: #6b5ca5; }

/* reCAPTCHA container */
.recaptcha-wrap { display: inline-block; transform-origin: left top; }
/* Ajuste pour très petits écrans si besoin */
@media (max-width: 360px) {
  .recaptcha-wrap { transform: scale(0.90); }
}