:root {
  --navy: #0E2438;
  --blue: #2E97E6;
  --blue-light: #5BC0F0;
  --link: #185FA5;
  --ink: #1a1a1a;
  --bg: #ffffff;
  --soft: #eef4fa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #dbe6ef 0%, #c9d9e6 100%);
  min-height: 100vh;
  min-height: 100dvh;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid #e1e8ee;
  box-shadow: 0 2px 10px rgba(14, 36, 56, 0.05);
}

.logo {
  height: 48px;
  border-radius: 8px;
}

.logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.2px;
}

main {
  position: relative;
  max-width: 640px;
  margin: 32px auto 64px;
  padding: 44px 32px 40px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(14, 36, 56, 0.14);
  overflow: hidden;
}

main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--navy), var(--blue), var(--blue-light));
}

.screen[hidden] { display: none; }

h1, h2 {
  color: var(--navy);
}

h1 { font-size: 2rem; }

.promesse {
  color: #48586a;
  font-size: 1.05rem;
  line-height: 1.5;
}

button {
  background: linear-gradient(135deg, var(--navy), var(--link));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 24px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(46, 151, 230, 0.35);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

button:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(46, 151, 230, 0.45);
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--blue);
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(46, 151, 230, 0.25);
}

.icon svg {
  width: 18px;
  height: 18px;
}

.question-bloc {
  margin: 24px 0;
  padding: 16px;
  background: var(--soft);
  border-radius: 12px;
}

.question-bloc label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}

.question-bloc input {
  width: 100%;
  padding: 10px;
  border: 1px solid #c3d0da;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
}

.barre-ligne {
  margin: 14px 0;
}

.barre-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 6px;
  font-weight: 600;
}

.barre-label-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.barre-fond {
  background: var(--soft);
  border-radius: 6px;
  overflow: hidden;
  height: 14px;
}

.barre-remplie {
  background: var(--blue);
  height: 100%;
  border-radius: 6px;
}

.encart-argent {
  background: var(--soft);
  border-left: 3px solid var(--blue);
  padding: 18px 20px;
  border-radius: 10px;
  margin: 24px 0;
}

.encart-argent input {
  width: 120px;
  padding: 8px;
  border: 1px solid #9aa4ad;
  border-radius: 6px;
  margin-left: 8px;
}

#valeur-annuelle {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: 10px;
}

/* Champ piège anti-robot : hors écran, jamais vu ni atteint par un humain. */
.champ-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Ce formulaire n'avait AUCUN style jusqu'au 6 septembre 2026 : libellés et champs
   restaient en affichage inline et s'entassaient sur une seule ligne, le bouton collé
   au dernier champ. Personne ne s'en était aperçu parce que cette page n'avait jamais
   été ouverte dans un navigateur. */
#form-contact {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
}

/* Sans cette règle, le display:flex ci-dessus l'emporte sur l'attribut [hidden]
   que pose app.js après un envoi réussi, et le formulaire resterait réutilisable :
   la personne renverrait, et créerait un doublon dans le CRM. Le même garde-fou
   existe déjà pour .screen[hidden]. */
#form-contact[hidden] {
  display: none;
}

#form-contact label {
  font-weight: 600;
  color: var(--navy);
  margin: 0.9rem 0 0.35rem;
}

#form-contact label:first-of-type {
  margin-top: 0;
}

/* TOUS les champs du formulaire, quel que soit leur type. Un selecteur par type
   (text, email) avait laisse le champ telephone sans aucun style le jour de son ajout :
   il tombait sur l'apparence par defaut du navigateur, visiblement plus fine que les
   autres. Un selecteur large evite que cela se reproduise au prochain champ ajoute.
   Le champ piege anti-robot n'est pas concerne : c'est son conteneur .champ-piege qui
   le sort de l'ecran, pas son style. */
#form-contact input {
  width: 100%;
  padding: 10px;
  border: 1px solid #c3d0da;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
  box-sizing: border-box;
}

#form-contact button {
  margin-top: 1.3rem;
  align-self: flex-start;
}

a { color: var(--link); }

#contact-statut[data-etat="erreur"] { color: #a02b1e; font-weight: 600; }
#contact-statut[data-etat="succes"] { color: #1a7a44; font-weight: 600; }

@media (max-width: 640px) {
  .site-header {
    padding: 12px 16px;
  }

  .logo {
    height: 38px;
  }

  .logo-text {
    font-size: 0.95rem;
  }

  main {
    margin: 16px 12px 32px;
    padding: 28px 18px 24px;
    border-radius: 14px;
  }

  h1 {
    font-size: 1.5rem;
  }

  .promesse {
    font-size: 0.95rem;
  }

  button {
    width: 100%;
    justify-content: center;
  }

  .question-bloc {
    padding: 14px;
    margin: 16px 0;
  }

  .question-bloc label {
    font-size: 0.95rem;
  }

  .barre-label {
    font-size: 0.82rem;
  }

  .icon {
    width: 28px;
    height: 28px;
  }

  .icon svg {
    width: 15px;
    height: 15px;
  }

  .encart-argent {
    padding: 14px 16px;
  }

  .encart-argent input {
    width: 100px;
  }

  #valeur-annuelle {
    font-size: 1.2rem;
  }
}

/* Le « (facultatif) » doit se lire sans concurrencer le libellé du champ. */
.facultatif {
  font-weight: 400;
  opacity: 0.7;
  font-size: 0.9em;
}