/* =========================================================================
   WEBCRAFT — flux-hero-nappe.css · 2026 · Emma (DA) / Hugo (code)
   Chargé EN DERNIER. Une seule mission : la nappe de mercure doit se lire
   comme un seul morceau de métal continu qui couvre tout le hero.
   - plus de cadre, plus de voile à arêtes nettes : uniquement des fondus
     progressifs qui partent des bords ;
   - l'image est agrandie et recentrée pour qu'aucun bord d'image ne tombe
     dans le cadre (le fameux rectangle clair à droite de « sur-mesure ») ;
   - le titre passe au-dessus, sans découpe autour de lui.
   ========================================================================= */

/* ---------------------------------------------- 1. LA MATIÈRE, D'UN SEUL BLOC */
.hero__matiere{
  /* On déborde du cadre : le métal sort du noir, il n'est jamais posé dessus. */
  inset:-8% -6%!important;
  background-size:cover!important;
  background-position:62% 46%!important;
  background-repeat:no-repeat!important;
  filter:contrast(1.42) saturate(.5) brightness(1.05)!important;
  opacity:1!important;
  /* Un seul fondu, sur les quatre bords, large et progressif. Aucune arête. */
  -webkit-mask-image:
    radial-gradient(135% 120% at 70% 48%,#000 34%,rgba(0,0,0,.92) 55%,rgba(0,0,0,.5) 76%,transparent 100%);
  mask-image:
    radial-gradient(135% 120% at 70% 48%,#000 34%,rgba(0,0,0,.92) 55%,rgba(0,0,0,.5) 76%,transparent 100%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

/* ------------------- 2. LE VOILE DE LISIBILITÉ, SANS AUCUNE LIGNE DROITE */
/* Avant : deux dégradés superposés + un pli net à 166deg → arêtes visibles
   derrière le texte. Maintenant : un seul dégradé qui part du bord gauche et
   s'éteint avant le milieu, plus une respiration basse. Rien de linéaire.  */
.hero__matiere::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(118% 96% at -6% 52%,rgba(10,11,14,.96) 0%,rgba(10,11,14,.82) 24%,rgba(10,11,14,.44) 46%,rgba(10,11,14,.12) 62%,rgba(10,11,14,0) 74%),
    radial-gradient(120% 70% at 50% 118%,rgba(10,11,14,.9) 0%,rgba(10,11,14,.36) 42%,rgba(10,11,14,0) 70%)!important;
  /* le voile lui-même se fond : pas de bord de calque */
  -webkit-mask-image:radial-gradient(120% 110% at 40% 50%,#000 0%,#000 72%,transparent 100%);
  mask-image:radial-gradient(120% 110% at 40% 50%,#000 0%,#000 72%,transparent 100%);
}

/* ------- 3. L'ARÊTE DE LUMIÈRE : une lumière de surface, jamais un pli net */
.hero__matiere::before{
  background:linear-gradient(118deg,
    transparent 30%,
    rgba(220,229,242,.04) 42%,
    rgba(247,250,255,.13) 50%,
    rgba(220,229,242,.04) 58%,
    transparent 70%)!important;
  mix-blend-mode:screen!important;
  inset:-20% -40%!important;
}

/* ------------------------------------------------- 4. LE TITRE PASSE-DESSUS */
/* Aucun fond, aucun cadre, aucune découpe : le mot « sur-mesure » est pris
   dans le métal (dégradé dans les lettres), le reste du titre en mercure
   clair. La lisibilité tient par le voile dégradé, pas par un aplat.        */
.hero__grille{position:relative;z-index:2}
.hero__titre{position:relative;z-index:2}

/* ------------------------------------------------ 5. LE LOGO EST BLANC, DÉJÀ */
/* logo-webcraft-blanc.png : symbole + mot Webcraft en blanc sur fond
   transparent. Rien à recolorer, la forme est exacte.                       */
.rail__marque img,
.bandeau .rail__marque img{
  filter:drop-shadow(0 1px 12px rgba(10,11,14,.55));
}