/* Page « pile des réalisations » : DA Linear (style.css), pile de serveurs (composant/serveur-pile.*).
   Tokens repris de style.css uniquement : --fond, --texte, --accent, --filet, --courbe… */

/* ---------- Premier écran : texte court à gauche, baie en figure principale ---------- */
.baie-hero{position:relative;overflow-x:clip;padding:clamp(28px,4vw,56px) 0 clamp(64px,7vw,104px)} /* la lueur ne doit pas élargir la page */
.baie-hero .enveloppe{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 56px;align-items:center}
.baie-tete{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.baie-tete h1{font-size:clamp(40px,4.6vw,68px)}

/* ---------- Pile de serveurs : composant/serveur-pile.css ; ici seulement la figure ---------- */
.hero__serveur{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;margin:0}
.serveur__legende{display:flex;align-items:center;min-height:38px;font-size:13.5px;color:var(--texte-3)}

@media (max-width:960px){
  .baie-hero .enveloppe{grid-template-columns:1fr}
}