/* =====================================================================
   Jarvis Business — feuille de style du site vitrine (jarvisbusiness.fr).
   Sobre, contraste eleve, lisible sur telephone en premier.
   ===================================================================== */

:root{
  --fond:#0b1020; --fond2:#111a30; --carte:#16203a; --bord:#25314f;
  --texte:#eaf0fb; --gris:#9aa8c7; --bleu:#4f8cff; --vert:#22c55e;
  --large:1180px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--fond); color:var(--texte);
  font:16px/1.65 -apple-system,"Segoe UI",Roboto,system-ui,sans-serif;}
h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
a{color:var(--bleu); text-decoration:none}
a:hover{text-decoration:underline}
p{margin:.5rem 0}

/* ---------- En-tete ---------- */
.entete{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.4rem; max-width:var(--large); margin:0 auto; flex-wrap:wrap;
}
.logo{font-weight:800; font-size:1.2rem; color:var(--texte); letter-spacing:-.4px}
.logo span{color:var(--bleu)}
.entete nav{display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap}
.entete nav a{color:var(--gris)}
.entete nav a:hover{color:var(--texte)}

.bouton{
  background:var(--bleu); color:#fff !important; padding:.6rem 1.1rem;
  border-radius:10px; font-weight:600; display:inline-block; border:0; cursor:pointer;
}
.bouton:hover{filter:brightness(1.1); text-decoration:none}
.bouton.clair{background:#ffffff14; color:var(--texte) !important}
.bouton.gros{padding:.85rem 1.5rem; font-size:1.02rem}

/* ---------- Hero ---------- */
.hero{
  padding:4rem 1.4rem 3.5rem; max-width:var(--large); margin:0 auto;
  background:radial-gradient(900px 500px at 15% -20%,#1c2e57,transparent);
}
.surtitre{color:var(--bleu); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; font-weight:700; margin:0}
.hero h1{font-size:clamp(1.9rem,4.6vw,3.2rem); letter-spacing:-.02em; margin:.6rem 0 1rem}
.accroche{font-size:1.1rem; color:var(--gris); max-width:62ch}
.actions{display:flex; gap:.8rem; flex-wrap:wrap; margin:1.6rem 0 1rem}
.preuve{color:var(--gris); font-size:.92rem; border-left:3px solid var(--vert); padding-left:.9rem; max-width:60ch}

/* ---------- Sections ---------- */
.section{max-width:var(--large); margin:0 auto; padding:3.5rem 1.4rem}
.section.sombre{background:var(--fond2); max-width:none}
.section.sombre > *{max-width:var(--large); margin-left:auto; margin-right:auto}
.section h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.sous-titre{color:var(--gris); margin-bottom:2rem; max-width:62ch}

.grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.2rem}
.grille.deux{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.carte{background:var(--carte); border:1px solid var(--bord); border-radius:14px; padding:1.4rem}
.carte h3{font-size:1.08rem}
.carte p{color:var(--gris); margin:0}
.icone{font-size:1.7rem; margin-bottom:.5rem}

.etapes{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.2rem}
.etape{border-top:2px solid var(--bleu); padding-top:1rem}
.etape .numero{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; background:var(--bleu); color:#fff; font-weight:700; margin-bottom:.5rem;
}
.etape p{color:var(--gris)}

/* ---------- Formulaire ---------- */
.formulaire{display:flex; flex-direction:column; gap:.9rem; max-width:720px}
.formulaire .ligne{display:flex; gap:.9rem; flex-wrap:wrap}
.formulaire .ligne label{flex:1; min-width:210px}
label{display:flex; flex-direction:column; gap:.3rem; color:var(--gris); font-size:.9rem}
input,select,textarea{
  background:#0c1424; color:var(--texte); border:1px solid var(--bord);
  border-radius:10px; padding:.7rem .8rem; font:inherit; width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--bleu); outline-offset:-1px}
textarea{resize:vertical}
.formulaire button{
  background:var(--bleu); color:#fff; border:0; border-radius:10px;
  padding:.8rem 1.4rem; font:inherit; font-weight:600; cursor:pointer; align-self:flex-start;
}
.mentions{color:var(--gris); font-size:.82rem}
.erreurs{background:#3a1a1c; border:1px solid #ef4444; color:#fecaca; padding:.7rem 1rem; border-radius:10px}
.erreurs p{margin:.15rem 0}
.succes{border-color:var(--vert)}
/* Le champ piege ne doit pas etre visible ni atteignable au clavier. */
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- Pied ---------- */
.pied{
  border-top:1px solid var(--bord); padding:2rem 1.4rem; max-width:var(--large);
  margin:0 auto; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color:var(--gris); font-size:.9rem;
}
.pied .liens{display:flex; gap:1.2rem; flex-wrap:wrap}