/* =====================================================================
   PAGE ACCUEIL — index.html
   ---------------------------------------------------------------------
   Uniquement le bloc d'en-tête (hero) : le grand titre en deux lignes
   pivotées, l'aplat rouge en biais posé derrière, et le paragraphe
   d'accroche. Les boutons viennent de components.css.
   ===================================================================== */

/* ---------- Accueil / Hero ---------- */
.hero{padding-top:56px;}
.hero .hero-title{position:relative;margin-bottom:40px;}
/* Grand aplat rouge en biais posé DERRIERE le titre (collage) */
.hero .hero-title::before{
  content:"";
  position:absolute;z-index:-1;
  left:-40px;top:14%;
  width:min(560px,86%);height:38%;
  background:var(--red);
  transform:rotate(-4deg) skewX(-12deg);
  opacity:.9;
}
/* Le nom est UN SEUL <h1> coupé en deux lignes par des <span> : deux
   <h1> côte a côte donnaient deux titres de niveau 1 pour un seul titre
   de page. Le rendu, lui, est strictement identique. */
.hero .hero-name{
  font-size:clamp(54px,9vw,132px);
  line-height:.92;
}
.hero .hero-name .line{
  display:block;
  text-shadow:8px 8px 0 var(--ink);
}
/* Deux lignes légèrement décalées et pivotées en sens inverse */
.hero .hero-name .line-1{transform:rotate(-3deg);transform-origin:left center;}
.hero .hero-name .line-2{
  color:var(--red);
  -webkit-text-stroke:3px var(--text-primary);
  margin-left:.1em;
  transform:rotate(1.5deg);
  transform-origin:left center;
}
.hero p.lead{
  font-size:21px;color:var(--text-muted);
  max-width:600px;margin-bottom:36px;
}


/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .hero{padding-top:36px;}
  /* Le titre suit la largeur de l'écran plutôt qu'une taille fixe */
  .hero .hero-name{font-size:14vw;}
  .hero .hero-name .line{text-shadow:5px 5px 0 var(--ink);}
  .hero .hero-name .line-2{-webkit-text-stroke:2px var(--text-primary);}
}