/* La page d'accueil : le titre, les quatre chiffres et la place du logo animé. */

.hero{position:relative;padding:9rem 0 6rem;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}
.chip{background:color-mix(in oklab,var(--lime) 24%,var(--paper));
  color:var(--bark);padding:.4rem 1rem;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase}
.hero-title{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(3.2rem,10vw,8.2rem);line-height:.85;margin-top:1.4rem;color:var(--bark)}
.hero-title span{display:block}
/* Le mot accentué est surligné façon marqueur. La règle est portée par
   .hero-title : « .hero-title span{display:block} » l'emporterait sur un
   .hero-accent seul et le surlignage s'étirerait sur toute la colonne. Le
   line-height du titre (.85) est trop serré pour un bloc plein, l'accent fixe
   donc le sien. */
.hero-title .hero-accent{
  display:inline-block;width:auto;
  background:color-mix(in oklab,var(--orange) 58%,var(--paper));
  color:var(--bark);
  line-height:.95;padding:.1em .2em .12em;border-radius:.3em;
  margin-top:.06em;text-shadow:none;
  /* le surlignage déborde à gauche d'exactement son padding, pour que SUCCESS
     reste aligné sur le G de GROW */
  margin-left:-.16em}
.hero-lead{margin-top:1.7rem;max-width:34ch;font-size:clamp(1rem,1.2vw,1.15rem);color:var(--ink);opacity:.85;line-height:1.6}
.hero-cta{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.9rem}

/* chiffres clés */
/* Gouttière et rembourrage resserrés : les cartes gagnent la largeur qui
   manquait à « ENTREPRISES INTERNATIONALES », que overflow:hidden coupait. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin:2.5rem 0 0;padding:0;list-style:none}
.stats li{position:relative;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);border-radius:1.1rem;
  padding:1.1rem .85rem 1.15rem;transition:transform .3s var(--ease),box-shadow .3s;
  box-shadow:0 10px 26px -22px rgba(11,53,34,.4)}
.stats li:hover{transform:translateY(-4px);box-shadow:0 18px 34px -24px rgba(11,53,34,.55)}
/* une carte par couleur du feuillage : turquoise, lime, orange, forêt */
.stats li::before{content:"";position:absolute;inset:0 0 auto;height:4px;
  background:var(--accent,var(--forest))}
.stats li:nth-child(1){--accent:var(--teal)}
.stats li:nth-child(2){--accent:var(--lime)}
.stats li:nth-child(3){--accent:var(--orange)}
.stats li:nth-child(4){--accent:var(--forest)}
.stat-num{display:block;font-family:var(--font-display);font-size:1.9rem;color:var(--moss-deep)}
/* Interlettrage resserré, et taille suivant la largeur de fenêtre : le mot le
   plus long débordait à lui seul. */
.stat-lbl{font-size:clamp(.62rem,.46vw + .28rem,.72rem);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);overflow-wrap:break-word}

/* colonne droite du hero */
.hero-right{position:relative;justify-self:center;width:100%;max-width:440px;aspect-ratio:4/5}

@media (max-width:960px){
  .hero{padding-top:7rem}
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ---------- L'accueil tient dans la hauteur de l'écran ---------- */
.hero--single{display:flex;align-items:center;min-height:0;padding:calc(var(--nav-h) + 2rem) 0 2rem}
.hero--single .hero-grid{width:min(100% - 2.5rem,var(--container));align-items:center;gap:2rem}
.hero--single .hero-title{font-size:clamp(2.4rem,min(5.4vw,9vh),5.2rem);margin-top:.7rem}
/* boutons resserrés : à côté d'un titre aussi grand, la taille --lg écrase tout */
.hero--single .btn--lg{padding:.8rem 1.4rem;font-size:.95rem}
.hero--single .hero-lead{margin-top:1.1rem;font-size:clamp(.95rem,1.05vw,1.05rem)}
.hero--single .hero-cta{margin-top:1.3rem}
.hero--single .stats{margin-top:clamp(.9rem,2vh,1.6rem);gap:.7rem}
.hero--single .stats li{padding:.75rem .85rem}
.hero--single .stat-num{font-size:1.5rem}
.hero--single .hero-right{max-width:min(100%,520px,72vh);aspect-ratio:1/1}
@media (max-width:960px){
  .hero--single{min-height:auto;padding:6.5rem 0 3rem}
  .hero--single .hero-grid{gap:1.5rem}
  .hero--single .hero-right{max-width:340px}

}
/* --- accueil sur petits écrans --- */
@media (max-width:960px){
  .hero--single{min-height:0;padding:5.6rem 0 1rem;align-items:flex-start}
  .hero--single .hero-grid{gap:.4rem;grid-template-columns:minmax(0,1fr)}
  .hero--single .hero-title{font-size:clamp(2.6rem,13.5vw,4.4rem);margin-top:.3rem}
  .hero--single .hero-lead{font-size:.86rem;line-height:1.45;margin-top:.4rem;max-width:44ch}
  .hero--single .hero-cta{margin-top:.6rem;gap:.5rem}
  .hero--single .hero-cta .btn{padding:.6rem 1.05rem;font-size:.8rem}
  .hero--single .stats{margin-top:.4rem;gap:.42rem}
  .hero--single .stats li{padding:.42rem .6rem}
  .hero--single .stat-num{font-size:1.2rem}
  .hero--single .stat-lbl{font-size:.6rem}
  .hero--single .chip{font-size:.6rem;padding:.3rem .7rem;letter-spacing:.16em;margin-top:.2rem}
  .hero--single .hero-right{display:block;max-width:min(100%,68vw);margin:0 auto}

}

@media (max-width:960px) and (max-height:820px){
  .hero--single .hero-right{max-width:min(100%,54vw)}

}
/* tablettes et grands téléphones : le logo se modère, la colonne est large */
@media (min-width:521px) and (max-width:960px){
  .hero--single .hero-right{max-width:min(100%,40vw)}
}
/* téléphones très courts : on resserre, mais le logo reste — sous 961px la
   page défile, quelques pixels de déroulé valent mieux que l'illustration en moins */
@media (max-width:960px) and (max-height:760px){
  .hero--single{padding-bottom:.6rem}
  .hero--single .hero-grid{gap:0}
  .hero--single .hero-right{max-width:min(100%,52vw)}

}

@media (min-width:1400px){
  .hero--single .hero-grid{width:min(100% - 6rem,var(--container));gap:6rem}
  .hero--single .hero-title{font-size:clamp(3.4rem,5vw,6rem)}
  .hero--single .hero-lead{max-width:46ch;font-size:1.08rem}
  .hero--single .hero-right{max-width:min(100%,760px,80vh)}
  .stats li{padding:.9rem 1.15rem}
  .stat-num{font-size:1.85rem}
}
@media (min-width:1700px){
  .hero--single .hero-right{max-width:min(100%,860px,84vh)}
}
/* --- fenêtres étroites : garder les titres grands --- */
@media (min-width:961px) and (max-width:1399px){
  .hero--single .hero-title{font-size:clamp(2.6rem,5vw,4.2rem)}
}