/* =========================================================================
   WEBCRAFT — flux-hero.css · 2026 · refonte du HERO seul (Emma, DA)
   « Le flux » : une seule matière, un seul regard.
   Ordre de lecture imposé : LA MATIÈRE (le pli de mercure) → LE TITRE → le CTA.
   Aucune animation ici : Hugo anime. Les classes et variables prévues pour
   lui sont listées en fin de fichier (section 9).
   Nuit #0A0B0E · mercure #DCE5F2 · mercure froid #8A9AB2 · éclat #F7FAFF
   ========================================================================= */

/* ---------------------------------------------------------- 1. CADRE DU HERO */
/* Le hero prend la hauteur de l'écran sous le bandeau, sans jamais déborder.
   dvh = la vraie hauteur sur mobile (barre d'URL comprise). */
.hero{
  --hero-h:clamp(620px,calc(100svh - var(--h-bandeau,88px)),1080px);
  position:relative;
  isolation:isolate;
  min-height:var(--hero-h);
  display:grid;
  align-items:center;
  padding:clamp(56px,7vh,96px) 0 clamp(48px,6vh,88px);
  background:var(--flux-nuit,#0A0B0E);
  overflow:hidden;
  /* Le hero est la seule zone de la page où l'on voit la matière nue. */
  background-image:none!important;
}

/* ------------------------------------------------------ 2. LA MATIÈRE (fond) */
/* Une macro de chrome réel, cadrée large, posée en plein fond. Elle est
   dégradée sur ses bords pour se fondre dans la nuit : on ne doit jamais
   voir de « bord d'image », seulement du métal qui sort du noir.            */
.hero__matiere{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:var(--flux-nuit,#0A0B0E);
  background-image:url("images/ia-mercure-nappe-liquide.png");
  background-size:cover;
  background-position:74% 50%;
  /* La matière occupe TOUT le cadre (aucun bord d'image) : elle sort du noir,
     elle n'est jamais posée dessus. Seul le bas se fond dans la nuit.       */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,rgba(0,0,0,.55) 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 72%,rgba(0,0,0,.55) 88%,transparent 100%);
  filter:contrast(1.22) saturate(.8) brightness(1.02);
  opacity:.95;
}
/* Voile de nuit : garantit la lisibilité du titre quoi qu'il arrive sous lui. */
.hero__matiere::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(92deg,rgba(10,11,14,.88) 0%,rgba(10,11,14,.62) 26%,rgba(10,11,14,.22) 48%,rgba(10,11,14,0) 66%),
    radial-gradient(90% 70% at 50% 125%,rgba(10,11,14,.9),transparent 72%);
}
/* Reflet rare : une lueur froide qui frôle la crête du métal (éclat #F7FAFF).
   Hugo : translate selon la souris / le scroll → voir section 9. */
.hero__lueur{
  position:absolute;
  z-index:0;
  top:-14%;
  right:-10%;
  width:62%;
  height:78%;
  pointer-events:none;
  background:radial-gradient(closest-side,rgba(247,250,255,.20),rgba(220,229,242,.07) 46%,transparent 72%);
  filter:blur(28px);
  opacity:.85;
  transform:translate3d(var(--flux-lueur-x,0px),var(--flux-lueur-y,0px),0);
}
/* Filet de métal : la couture entre le hero et la section suivante. */
.hero__couture{
  position:absolute;
  z-index:3;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(220,229,242,.05) 12%,rgba(247,250,255,.55) 50%,rgba(220,229,242,.05) 88%,transparent);
}
/* La goutte : accrochée à la couture, elle tombe dans la section suivante.
   Hugo anime sa chute ; ici, on la dessine juste, crédible : chrome + reflet. */
.hero__goutte{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:-1px;
  width:14px;
  height:22px;
  margin-left:-7px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:
    radial-gradient(60% 46% at 38% 30%,#FFFFFF 0,rgba(255,255,255,.9) 14%,rgba(220,229,242,.65) 32%,rgba(138,154,178,.35) 58%,rgba(10,11,14,.9) 100%);
  box-shadow:0 0 12px rgba(247,250,255,.5),0 6px 18px rgba(0,0,0,.8);
  transform:translateY(var(--flux-goutte-y,0px));
}

/* ------------------------------------------------------------- 3. LA GRILLE */
.hero > .enveloppe{
  position:relative;
  z-index:2;
  width:100%;
}
/* Composition asymétrique assumée : le titre part de la gauche, déborde vers
   la matière, et le bloc d'appui descend à droite comme une légende de photo. */
/* RECOMPOSITION 23/10 (Emma) — le bandeau de spécialités et le titre étaient
   posés sur la MÊME grid-area, tous deux en align-self:end : ils se
   chevauchaient à l'écran. Trois rangées réelles désormais, chacune à sa
   hauteur, dans l'ordre de lecture : SPÉCIALITÉS → TITRE → CHAPEAU → CTA.
   Une seule chose forte à regarder : le titre dans la matière.            */
.hero .hero__grille{
  display:grid!important;
  grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)!important;
  grid-template-rows:auto auto auto auto;
  grid-template-areas:
    "spe appui"
    "titre appui"
    "chapeau appui"
    "actions appui";
  align-items:start;
  gap:0 clamp(30px,4vw,80px)!important;
}
.hero .hero__texte{display:contents!important}
/* Le bandeau de spécialités : petit, froid, haut de composition, jamais
   collé au titre (marge basse explicite). */
.hero .pastille{
  grid-area:spe!important;
  align-self:end;
  margin:0 0 clamp(22px,3.2vh,44px)!important;
  /* Surtitre sur une ligne, sans cadre : un filet court centré sur le texte (23/10, Raphaël). */
  display:inline-flex!important;align-items:center!important;gap:14px!important;
  border:0!important;background:none!important;padding:0!important;
  white-space:nowrap!important;
  font-size:12px!important;letter-spacing:.14em!important;
}
.hero .pastille::before{
  width:28px!important;height:1px!important;flex:none!important;
  margin:0!important;border-radius:0!important;
  background:#DCE5F2!important;
}
.hero .hero__titre{
  grid-area:auto!important;
  grid-row:2!important;
  align-self:start;
  margin:0!important;
}
.hero .chapeau{
  grid-area:auto!important;
  grid-row:3!important;
  align-self:start;
  /* marge : voir la seconde règle .hero .chapeau plus bas (une seule valeur fait foi) */
}
.hero .hero__actions{
  grid-area:auto!important;
  grid-row:4!important;
  margin:clamp(26px,3.4vh,42px) 0 0!important;
  align-self:start;
}
.hero .hero__note{
  grid-area:appui!important;
  align-self:end;
  margin:0!important;
}

/* --------------------------------------------------------- 4. LE TITRE HÉROS */
/* Échelle démesurée, interlignage serré, lettrage resserré : c'est le titre
   qui tient le rôle de l'image. Il est calé sur la gauche du cadre, et son
   dernier mot, en mercure, monte dans la matière.                           */
/* Les deux lignes animables posées par Hugo : bloc franc, interlignage
   hérité du h1 (0,84), et surtout aucune découpe de fond parasite qui
   viendrait casser le dégradé du mot métal porté par l'<em> à l'intérieur. */
.hero .hero__titre .hero__ligne{
  display:block!important;
  /* Un interlignage RÉEL (>1) : à 0,84 les lignes animées se touchaient et
     les descendantes venaient sous la ligne suivante. Le titre reste dense
     (0,96) sans jamais déborder de sa boîte. */
  line-height:0.96!important;
  letter-spacing:inherit!important;
  background:none!important;
  -webkit-text-fill-color:currentColor;
}
/* Le fil du texte ne doit pas passer à la ligne au milieu de « coulé
   sur-mesure » : chaque span est une ligne, le balance du h1 n'a plus lieu d'être. */
.hero .hero__titre{text-wrap:nowrap!important}

.hero .hero__titre{
  margin:0!important;
  position:relative;
  z-index:2;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;
  font-weight:800!important;
  font-size:clamp(46px,5.6vw,100px)!important;   /* réduit (Raphaël, 23/10) : titre moins massif */
  line-height:1!important;
  letter-spacing:-.022em!important;   /* -0,045 em collait le r et le t (Raphaël, 23/10) */
  color:var(--flux-eclat,#F7FAFF)!important;
  text-shadow:0 18px 60px rgba(0,0,0,.55);
}
/* Le mot « flux » : c'est LUI qui est pris dans le métal, pas une italique. */
.hero .hero__titre em,
.hero .hero__titre .flux-mot{
  font-style:normal!important;
  display:inline-block;
  background-image:linear-gradient(96deg,#C7D3E4 0%,#F7FAFF 18%,#FFFFFF 32%,#DCE5F2 48%,#9FB0C7 64%,#F7FAFF 82%,#B6C4D8 100%);
  /* Découpe peinte DANS le mot : le passage en <span> (Hugo) ne la touche pas,
     le reflet continue de glisser via --flux-reflet-x. */
  background-size:220% 100%;
  background-position:var(--flux-reflet-x,30%) 50%;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  filter:drop-shadow(0 6px 34px rgba(247,250,255,.22));
}
/* Le reflet doit se VOIR glisser sur le métal : on lui redonne de la course
   et un éclat plus affirmé (Hugo l'anime de 30 % à 70 %). */
.hero .hero__titre .flux-mot{
  background-size:300% 100%!important;
  background-position:var(--flux-reflet-x,30%) 50%!important;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero .hero__titre em,.hero .hero__titre .flux-mot{-webkit-text-fill-color:currentColor;color:var(--flux-mercure,#DCE5F2)!important}
}

/* ------------------------------------------------------------ 5. LE CHAPEAU */
.hero .chapeau{
  align-self:end;
  max-width:34ch!important;
  margin:32px 0 0!important;   /* respiration sous le titre (grille de 8 px) */
  font-size:clamp(15px,1.02vw,17.5px)!important;
  line-height:1.55!important;
  color:rgba(232,240,250,.94)!important;
  border-left:1px solid rgba(220,229,242,.28);
  padding-left:clamp(14px,1.1vw,20px);
  text-shadow:0 8px 30px rgba(0,0,0,.7);
}
/* La ligne d'identité passe sous le chapeau, en petites capitales de métal. */
.hero .hero__note{
  grid-area:appui;
  align-self:start;
  display:flex;
  flex-wrap:wrap;
  gap:.4em .9em;
  margin:0!important;
  font-size:12px!important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(138,154,178,.95)!important;
}
/* Mentions posées sur la vidéo : pastille sombre floutée, lisible même sur le mercure le plus clair
   (NN/g, texte sur image : fond semi-opaque + flou ; WCAG 4,5:1). */
.hero .hero__note span{
  display:inline-flex;align-items:center;gap:.55em;
  padding:6px 12px!important;border-radius:999px;
  background:rgba(8,9,12,.62)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid rgba(220,229,242,.12);
  color:#DCE5F2!important;
}
.hero .hero__note span::before{
  content:"";
  width:5px;height:5px;border-radius:50%;
  background:#DCE5F2;
}

/* ---------------------------------------------------------- 6. LES ACTIONS */
.hero .hero__actions{gap:12px!important;flex-wrap:wrap}
/* CTA principal : une pastille de métal, pas un aplat de couleur. */
.hero .bouton{
  border-radius:999px!important;
  padding:1em 1.7em!important;
  font-size:15px!important;
  font-weight:700!important;
  letter-spacing:-.01em;
  border:1px solid rgba(247,250,255,.65)!important;
  background-image:linear-gradient(100deg,#8A9AB2 0%,#DCE5F2 26%,#F7FAFF 46%,#C7D3E4 66%,#8A9AB2 100%)!important;
  background-size:200% 100%!important;
  background-position:var(--flux-reflet-x,20%) 50%!important;
  color:#0A0B0E!important;
  box-shadow:0 18px 44px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
.hero .bouton--ligne{
  background-image:none!important;
  background-color:rgba(220,229,242,.05)!important;
  color:var(--flux-eclat,#F7FAFF)!important;
  border:1px solid rgba(220,229,242,.34)!important;
  box-shadow:inset 0 1px 0 rgba(247,250,255,.12)!important;
  backdrop-filter:blur(6px);
}

/* --------------------------------------------- 7. SORTIES ÉCARTÉES DU HERO */
/* Les deux captures de sites et la tache ne sont plus dans le hero : ce sont
   deux « choses à regarder », et elles volaient le regard au titre. On les
   neutralise ici au cas où le balisage serait rétabli.                      */
.hero__scene,.hero__tache{display:none!important}

/* --------------------------------------------------------- 8. RESPONSIVE */
/* (Design à 1728 px ; on garde seulement le hero sur deux colonnes jusqu'à
   une largeur raisonnable, Hugo affine la suite en recette.) */
@media (max-width:1080px){
  /* Une seule colonne : on garde le MÊME ordre vertical qu'en grand écran,
     sinon le bandeau retombait sur la case du titre (chevauchement). */
  .hero .hero__grille{
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
    grid-template-areas:none!important;
    gap:0!important;
  }
  .hero .pastille{grid-area:auto!important;margin:0 0 clamp(16px,2.4vh,26px)!important}
  .hero .hero__titre{grid-row:auto!important}
  /* Sous 1080 px, « coulé sur-mesure » ne tient plus d'un seul trait : le
     nowrap hérité du grand écran faisait déborder le titre de 154 px. Le
     titre se centre dans la colonne et garde son interlignage réel. */
  .hero .hero__titre{text-wrap:balance!important;font-size:clamp(38px,9.4vw,84px)!important}
  /* max-width en ch, et jamais plus large que la colonne : à 390 px le 34ch
     du grand écran dépassait de 33 px. */
  .hero .chapeau{
    grid-area:auto!important;grid-row:auto!important;align-self:start!important;
    max-width:min(52ch,100%)!important;margin-top:clamp(18px,2.4vh,30px)!important;
  }
  .hero .hero__note{
    grid-area:auto!important;grid-row:auto!important;align-self:start!important;
    max-width:100%!important;margin-top:clamp(18px,2.4vh,28px)!important;
    overflow-wrap:anywhere;
  }
  .hero .hero__actions{grid-area:auto!important;grid-row:auto!important;max-width:100%!important}
  .hero__matiere{background-position:70% 30%;opacity:.7}
  .hero__lueur{width:90%;right:-25%;opacity:.6}
}
@media (prefers-reduced-motion:reduce){
  .hero__lueur{transform:none}
}

/* =========================================================================
   9. POUR HUGO — CE QUE JE PRÉPARE, CE QU'IL ANIME
   -------------------------------------------------------------------------
   Variables pilotables en JS / au scroll (elles sont toutes lues en CSS) :
     --flux-reflet-x    : position du reflet dans le mot « flux » (0% → 100%)
     --flux-lueur-x/y   : déplacement de la lueur froide (px)
     --flux-goutte-y    : chute de la goutte sous la couture (px)
   Classes disponibles, sans effet tant qu'Hugo n'ajoute pas de JS :
     .hero__matiere   (fond) — à translater très lentement au scroll (parallaxe
                       de 4 à 6 %, pas plus : c'est un fond, pas un carrousel)
     .hero__lueur     (reflet) — suivre la souris avec une inertie de ~0,08
     .hero__goutte    (goutte) — au premier scroll : translateY(0 → 42px) en
                       620 ms cubic-bezier(.34,1.4,.64,1), puis fondu.
   Le balisage attendu est dans index.html (section « HERO »).
   ========================================================================= */