/* =====================================================================
   PAGE ACCUEIL — index.html
   ---------------------------------------------------------------------
     .hero        : le grand titre en deux lignes pivotées, l'aplat rouge
                    en biais posé derrière, l'accroche (aussi utilisé
                    par 404.html)
     .stack-list  : les technologies principales sous l'accroche
     .more-link   : le lien « Tous les projets » sous la sélection
   Les boutons et les cartes .mini-project 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;
}
/* Éclat blanc qui dépasse sous l'aplat rouge : superposition blanc /
   rouge / noir typique des écrans P5 */
.hero .hero-title::after{
  content:"";
  position:absolute;z-index:-2;
  left:-12px;top:52%;
  width:min(440px,72%);height:30%;
  background:var(--text-primary);
  clip-path:var(--cut-jag-alt);
  transform:rotate(3deg);
}
/* 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-secondary);
  max-width:620px;margin-bottom:26px;
}

/* ---------- Stack principale : étiquettes noires à bord blanc ---------- */
.stack-list{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:38px;
}
.stack-list li{
  background:var(--ink);
  border:3px solid var(--border);
  padding:6px 14px;
  font-family:var(--font-head);font-weight:700;
  font-size:16px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-primary);
  box-shadow:4px 4px 0 var(--red);
}
.stack-list li:nth-child(odd){transform:rotate(-1.5deg);}
.stack-list li:nth-child(even){transform:rotate(1.5deg);}

/* ---------- Lien vers tous les projets ---------- */
.more-link{margin-top:44px;}
.more-link a{
  font-family:var(--font-head);font-weight:700;
  font-size:19px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-primary);
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-decoration-thickness:3px;
  text-underline-offset:5px;
  transition:color .13s var(--ease-snap);
}
.more-link a:hover{color:var(--red);}


/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .hero{padding-top:100px;}   /* dégage la barre mobile fixe (~72px) */
  /* 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);}
}