.hero{
  position:relative;
  z-index:2;               /* passe devant l'anneau (.orbit-stage, z-index:1) */
  padding:64px 48px 72px;  /* la nav ne fait plus partie de cette section : on redonne de l'air en haut */
  min-height:744px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* La carte produit ayant été retirée, la section n'a plus qu'une colonne de
   texte. On la borne en largeur (pas 100% du .wrap) pour qu'elle ne vienne
   pas se glisser sous le demi-anneau ancré à droite (css/orbit.css).
   Le bloc est centré verticalement dans le bandeau, dont la hauteur est
   imposée par le diamètre de l'anneau (css/nav.css .banner). */
.hero-copy{ max-width:800px; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px 8px 8px;
  background:var(--red-soft);
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--red-dark);
  margin-bottom:26px;
}
.eyebrow .dot{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  flex-shrink:0;
}

.hero h1{
  font-size:52px;
  line-height:1.13;
  font-weight:700;
  letter-spacing:-0.025em;
  color:var(--ink);
}
/* accent sur sa propre ligne : le titre se lit en deux temps, sans césure au hasard */
.hero h1 .accent{ display:block; color:var(--red); }

.hero h2{
  margin-top:26px;
  font-family:'Inter', sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:620px; /* ~75 caractères par ligne : confortable à lire */
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:36px;
}

.trust-row{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:44px;
}
.trust-row .avatars{ display:flex; }
.trust-row .avatars span{
  width:36px; height:36px;
  border-radius:50%;
  border:2.5px solid var(--white);
  margin-left:-11px;
  background:var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; color:var(--ink-soft);
}
.trust-row .avatars span:first-child{ margin-left:0; }
.trust-text{ font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.trust-text strong{ font-size:16px; color:var(--ink); }

@media (max-width:1180px){
  /* Le demi-anneau occupe ~40vw à droite (2 × --orbit-r, soit 2 × 20vw) +
     le débord des pastilles : le texte s'arrête avant, quelle que soit la
     largeur (auparavant 200px de marge à gauche faisaient passer le texte
     sous l'anneau vers 1000px). */
  .hero{ padding:52px 28px 60px; min-height:654px; }
  .hero h1{ font-size:clamp(36px, 3.9vw, 44px); }
  .hero-copy{ max-width:min(540px, calc(60vw - 130px)); }
}

@media (max-width:900px){
  /* l'anneau disparaît (css/orbit.css) : le texte peut prendre toute la largeur */
  /* plus de débord de l'anneau à réserver à droite : marges latérales du .wrap */
  .hero{ min-height:0; padding:40px 28px 36px; }
  .hero-copy{ max-width:640px; }
  .hero h1{ font-size:40px; }
  .hero h2{ margin-top:20px; }
  .hero-actions{ margin-top:28px; flex-wrap:wrap; }
  .trust-row{ margin-top:32px; }
}

@media (max-width:520px){
  .hero{ padding:32px 20px 32px; }
  .hero h1{ font-size:clamp(27px, 8.2vw, 31px); }
  .hero h2{ font-size:15px; line-height:1.65; }
  .eyebrow{ font-size:11px; margin-bottom:20px; }
  .hero-actions{ gap:10px; }
  .trust-row{ gap:14px; }
  .trust-text{ font-size:13.5px; }
  .trust-text strong{ font-size:15px; }
}