:root{
  --primary:#1d4ed8;         /* bleu bouton */
  --bg1:#2342a3; --bg2:#0f2a78; --bg3:#0a1e5a;  /* dégradé fond */
  --card:#ffffff; --text:#0f172a; --muted:#64748b;
  --radius:18px; --shadow:0 10px 30px rgba(2,6,23,.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body.form-full{
  margin:0;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: radial-gradient(1100px 600px at 50% 20%, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);
  display:grid; place-items:center; padding:24px;
}

/* Carte formulaire (même “carte” que la page de succès) */
.formulaire-contact{
  width:100%; max-width:520px;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}
.formulaire-contact h2{
  margin:0 0 6px; text-align:center; color:var(--text); font-size:1.4rem;
}
.formulaire-contact p.subtitle{margin:0 0 16px; text-align:center; color:var(--muted)}

/* Champs */
.form-group{margin-bottom:14px}
label{display:block; margin:0 0 6px; font-weight:600; color:var(--text); font-size:.95rem}
input[type=text],input[type=email],input[type=tel],input[type=number],textarea{
  width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:12px;
  font:inherit; color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s;
  background:#fff;
}
textarea{min-height:110px; resize:vertical}
input:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(29,78,216,.18)}

/* Checkboxes */
.checkbox-group{
  display:grid; gap:8px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px; background:#f8fafc;
}
.checkbox-item{display:flex; gap:10px; align-items:center}

/* Bouton */
button[type=submit]{
  width:100%; border:0; border-radius:12px; padding:12px 16px; cursor:pointer;
  background:var(--primary); color:#fff; font-weight:700;
  transition:filter .15s, transform .05s;
}
button[type=submit]:hover{filter:brightness(1.05)}
button[type=submit]:active{transform:translateY(1px)}

/* Messages */
.error-message{
  background:#fee2e2; border:1px solid #fecaca; color:#991b1b;
  padding:12px 14px; border-radius:12px; margin-bottom:12px;
}

@media (max-width:480px){
  body.form-full{padding:16px}
  .formulaire-contact{padding:20px}
}
/* Fond et centrage comme la page de confirmation */
body.form-full{
  margin:0;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  padding:20px;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Carte du formulaire = même carte que la confirmation */
.formulaire-contact{
  width:90%; max-width:600px;
  background:#fff;
  padding:40px;
  border-radius:15px;
  box-shadow:0 15px 25px rgba(0,0,0,.2);
  animation: fadeIn .5s ease-out;
}
@keyframes fadeIn{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)}}

.formulaire-contact h2{
  text-align:center;
  color:#1e3c72;
  font-size:28px;
  margin:0 0 20px;
}

/* Champs */
.form-group{margin-bottom:15px}
label{display:block; margin-bottom:6px; font-weight:600; color:#1e3c72}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font:inherit;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus{
  border-color:#2a5298;
  box-shadow:0 0 0 3px rgba(42,82,152,.15);
}
textarea{min-height:110px; resize:vertical}

/* Groupe de cases */
.checkbox-group{
  display:grid; gap:8px;
  padding:12px; background:#f8f9fa; border:1px solid #e5e7eb; border-radius:10px;
}
.checkbox-item{display:flex; align-items:center; gap:10px}

/* Messages d'erreur (si utilisés) */
.error-message{
  background:#fee2e2; border:1px solid #fecaca; color:#991b1b;
  padding:12px 14px; border-radius:10px; margin-bottom:12px;
}

/* Bouton = même style que "Retour à l'accueil" */
button[type="submit"]{
  width:100%;
  border:0; border-radius:25px;
  padding:12px 30px; font-weight:600; cursor:pointer;
  color:#fff; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  transition:transform .15s, box-shadow .15s;
}
button[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(30,60,114,.3);
}

@media (max-width:480px){
  .formulaire-contact{ padding:20px }
  .formulaire-contact h2{ font-size:24px }
}