:root{
  --white:#FFFFFF;
  --paper:#F7F8FA;
  --gray-100:#EEF1F4;
  --gray-200:#E1E5EA;
  --gray-300:#C7CED8;
  --ink:#16202B;
  --ink-soft:#54606F;
  --red:#E01B3D;
  --red-dark:#AE1030;
  --red-soft:#FCE7EA;
  --radius-lg:28px;

  /* Rayon du parcours des logos partenaires. Fluide : l'anneau rétrécit avec
     la fenêtre pour ne jamais chevaucher la carte produit (voir css/orbit.css). */
  --orbit-r:clamp(178px, 20vw, 300px);

  /* Longueur des deux segments droits de l'anneau (voir css/orbit.css) :
     transforme le cercle en stade/ovale allongé verticalement. */
  --orbit-s:calc(var(--orbit-r) * 2);
}

*{ box-sizing:border-box; margin:0; padding:0; }

/* min-height et non height sur body : avec height:100%, le body ne mesurait
   qu'un écran et la topbar sticky (Header/nav.css) quittait l'écran dès
   qu'on avait défilé plus d'une hauteur de fenêtre */
html{ height:100%; }
body{ min-height:100%; }
html,body{
  width:100%;
  background:var(--paper);
  font-family:'Inter', sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

h1,h2,.display{ font-family:'Sora', sans-serif; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* conteneur centré, réutilisé par nav et hero */
.wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 48px;
  position:relative;
}

/* ===== bouton — composant partagé entre la nav et le hero ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:14px;
  padding:12px 24px;
  border-radius:999px;
  white-space:nowrap;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
  background:var(--red);
  color:var(--white);
  box-shadow:0 8px 20px -8px rgba(224,27,61,0.55);
}
.btn-primary:hover{ background:var(--red-dark); transform:translateY(-1px); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--gray-300);
}
.btn-ghost:hover{ border-color:var(--ink); }
.btn-outline-light{
  background:var(--white);
  color:var(--ink);
  border-color:var(--gray-200);
}

@media (max-width:1080px){
  .wrap{ padding:0 28px; }
}
/* Écrans tactiles : un champ en dessous de 16px déclenche le zoom
   automatique de Safari iPhone au moment où on le touche. */
@media (max-width:900px){
  input, select, textarea{ font-size:16px !important; }
}

@media (max-width:520px){
  .wrap{ padding:0 20px; }
  .btn{ padding:10px 18px; font-size:13px; }
}