/* =========================================================================
   WEBCRAFT — flux-hero-final.css · 2026 · Emma (DA) / Hugo (code)
   Chargé EN DERNIER. Trois corrections demandées par Raphaël, rien d'autre.
   1. Plus aucun panneau derrière le texte : le titre est POSÉ sur le métal.
   2. La matière va d'un bord à l'autre, d'un seul tenant (fondu progressif seul).
   3. Le logo du rail est sculpté en relief (outil matiere), forme intacte.
   ========================================================================= */

/* ---------------- 1. LE PANNEAU FANTÔME DERRIÈRE LE TITRE : SUPPRIMÉ ----- */
/* C'était .hero__grille::before : un rectangle à coins arrondis, large de
   min(78ch,86%), en radial-gradient clair. C'est LUI le bord net à 160 px. */
/* La règle d'origine (.hero .hero__grille::before, flux-hero-ajustements.css
   ligne 44) pose position/inset/width/border-radius : il faut donc l'annuler
   champ par champ, sinon le display:none seul laisse passer le rectangle. */
.hero .hero__grille::before,
.hero .hero__grille::after,
.hero .hero__texte::before,
.hero .hero__texte::after{
  content:none!important;
  display:none!important;
  position:static!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Le texte se pose directement sur le métal : lisibilité par fondu large,
   sans calque, sans arête, sans découpe autour du titre. */
.hero__texte{
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-radius:0!important;
}

/* Une seule ombre très douce sur le titre : le métal reste visible sous les
   lettres, la lecture gagne sans qu'on voie un fond. */
.hero__titre{
  text-shadow:0 1px 26px rgba(10,11,14,.55), 0 1px 3px rgba(10,11,14,.35)!important;
}
.hero__texte .pastille,
.hero__texte .chapeau{
  text-shadow:0 1px 14px rgba(10,11,14,.6)!important;
}

/* ---------------- 2. LA MATIÈRE, D'UN SEUL TENANT ------------------------- */
/* L'image déborde largement : aucun bord d'image ne tombe dans le hero.
   Fondu radial très large : la matière sort du noir, elle n'est pas posée. */
.hero__matiere{
  inset:-14% -10%!important;
  background-size:cover!important;
  background-position:58% 48%!important;
  background-repeat:no-repeat!important;
  filter:contrast(1.34) saturate(.52) brightness(1.06)!important;
  opacity:1!important;
  -webkit-mask-image:
    radial-gradient(150% 132% at 68% 48%,#000 0%,#000 46%,rgba(0,0,0,.86) 66%,rgba(0,0,0,.42) 84%,transparent 100%)!important;
  mask-image:
    radial-gradient(150% 132% at 68% 48%,#000 0%,#000 46%,rgba(0,0,0,.86) 66%,rgba(0,0,0,.42) 84%,transparent 100%)!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
}

/* Voile de lisibilité : deux fondus radiaux qui s'éteignent loin des bords.
   Aucun dégradé linéaire (c'est le linéaire qui créait le pli net). */
.hero__matiere::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(150% 120% at -10% 50%,rgba(10,11,14,.94) 0%,rgba(10,11,14,.74) 30%,rgba(10,11,14,.34) 52%,rgba(10,11,14,.06) 70%,rgba(10,11,14,0) 82%),
    radial-gradient(140% 90% at 50% 122%,rgba(10,11,14,.7) 0%,rgba(10,11,14,.2) 46%,rgba(10,11,14,0) 74%)!important;
  -webkit-mask-image:radial-gradient(135% 125% at 45% 50%,#000 0%,#000 78%,transparent 100%)!important;
  mask-image:radial-gradient(135% 125% at 45% 50%,#000 0%,#000 78%,transparent 100%)!important;
}

/* Le filet de séparation du bas du hero : présent mais jamais en trait dur. */
.hero::after{
  background:radial-gradient(120% 100% at 50% 50%,rgba(220,229,242,.18) 0%,rgba(220,229,242,.06) 55%,transparent 100%)!important;
  opacity:.55!important;
}

/* ---------------- 3. LE LOGO DU RAIL, SCULPTÉ ---------------------------- */
/* relief blanc/argent sur fond nuit : la forme du logo de la charte, intacte. */
.rail__marque > img{
  width:auto!important;
  height:clamp(30px,2.9vw,40px)!important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))!important;
  transition:filter .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1)!important;
}
.rail__marque:hover > img{
  filter:drop-shadow(0 2px 10px rgba(220,229,242,.32)) brightness(1.12)!important;
  transform:translateY(-1px)!important;
}
.rail__lieu{
  color:#8A9AB2!important;
  letter-spacing:.34em!important;
  font-size:9.5px!important;
  text-transform:uppercase!important;
}

/* Version animée : le reflet qui passe sur le logo sculpté (mix-blend screen). */
.rail__marque{position:relative!important;display:inline-block!important}
.rail__marque .marque-vive{
  position:absolute!important;
  left:0!important;top:0!important;
  height:clamp(30px,2.9vw,40px)!important;
  width:auto!important;
  opacity:.9!important;
  pointer-events:none!important;
  mix-blend-mode:screen!important;
}

/* ---------------- 4. LE MENU DU RAIL, STYLE « LE FLUX » ------------------ */
.rail__nav{gap:2px!important}

.rail__lien{
  position:relative!important;
  padding:9px 12px 9px 0!important;
  font-family:"Instrument Sans",system-ui,sans-serif!important;
  font-size:14px!important;
  font-weight:500!important;
  letter-spacing:.015em!important;
  color:rgba(220,229,242,.74)!important;
  border-radius:8px!important;
  transition:color .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1)!important;
  isolation:isolate;
}
/* Le métal qui coule sous le lien : liseré liquide qui s'étire au survol. */
.rail__lien::before{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:6px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(220,229,242,0),rgba(220,229,242,.85) 35%,#F7FAFF 52%,rgba(138,154,178,.6) 72%,rgba(220,229,242,0))!important;
  transform:scaleX(0)!important;
  transform-origin:left center!important;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease!important;
  opacity:.9!important;
  z-index:-1;
}
.rail__lien:hover,
.rail__lien:focus-visible,
.rail__lien[aria-current="page"]{
  color:#F7FAFF!important;
  /* Plus de translateX : le bord gauche du menu reste au pixel. Le lien actif
     se distingue par la lumière et le liseré, pas par un décalage. */
  transform:none!important;
}
.rail__lien:hover::before,
.rail__lien:focus-visible::before,
.rail__lien[aria-current="page"]::before{
  transform:scaleX(1)!important;
}
.rail__lien .fleche{
  opacity:0!important;
  transform:translateX(-6px)!important;
  transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1)!important;
  color:#DCE5F2!important;
}
.rail__lien:hover .fleche,
.rail__lien:focus-visible .fleche{opacity:1!important;transform:translateX(0)!important}

/* Sous-menus : même écriture, plus discrète, liseré qui glisse aussi. */
.rail__services summary{
  font-family:"Instrument Sans",system-ui,sans-serif!important;
  font-size:12.5px!important;
  font-weight:600!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  color:rgba(220,229,242,.62)!important;
  padding:9px 0 6px!important;
  transition:color .45s ease!important;
  /* « + » calé sur le bord droit de la colonne, quelle que soit la longueur de l'intitulé. */
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
}
.rail__services summary:hover,
.rail__services[open] summary{color:#F7FAFF!important}
.rail__services summary::after{color:#8A9AB2!important;margin-left:auto!important}
.rail__services{
  border-top:1px solid rgba(138,154,178,.14)!important;
  margin-top:6px!important;
  padding-top:2px!important;
}
.rail__services .rail__lien{
  font-size:13px!important;
  padding:5px 10px 5px 8px!important;
  color:rgba(220,229,242,.56)!important;
}
.rail__services .rail__lien:hover{color:#F7FAFF!important}

/* Bouton « Nous contacter » assorti : pastille de mercure, lueur au survol. */
.rail__cta,
a.rail__cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-top:14px!important;
  padding:11px 14px!important;
  background:linear-gradient(150deg,#F7FAFF 0%,#DCE5F2 46%,#8A9AB2 100%)!important;
  color:#0A0B0E!important;
  font-family:"Instrument Sans",system-ui,sans-serif!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
  border:0!important;
  border-radius:999px!important;
  text-decoration:none!important;
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7)!important;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, filter .5s ease!important;
  position:relative!important;
}
.rail__cta:hover,
a.rail__cta:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.06)!important;
  box-shadow:0 10px 26px rgba(220,229,242,.22), inset 0 1px 0 rgba(255,255,255,.85)!important;
}
.rail__cta .fleche{color:#0A0B0E!important;opacity:1!important;transform:none!important}

/* Pied du rail : coordonnées au ton mercure froid. */
.rail__pied{
  font-family:"Instrument Sans",system-ui,sans-serif!important;
  font-size:11.5px!important;
  line-height:1.7!important;
  color:rgba(138,154,178,.8)!important;
}
.rail__pied a{color:rgba(220,229,242,.8)!important;text-decoration:none!important}
.rail__pied a:hover{color:#F7FAFF!important}

@media (prefers-reduced-motion:reduce){
  .rail__lien,
  .rail__lien::before,
  .rail__lien .fleche,
  .rail__cta{transition:none!important}
  .rail__lien:hover{transform:none!important}
}