/* =========================================================================
   WEBCRAFT — verrou final du hero · 23/10/2026
   UN SEUL fichier pour : le mot « sur-mesure » et la bille du logo.
   Il est chargé EN DERNIER : il gagne sur rail-align-surmesure.css,
   sur-mesure-reset.css, sur-mesure-blanc.css, bille-point-exact.css et
   logo-net.css, qui restent en place mais ne décident plus rien.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) « sur-mesure » — blanc plein, lisible immédiatement.
   Le mot est testé en lisibilité : couleur pleine, PAS de background-clip
   sur le mot, PAS de text-shadow sombre (c'est l'ombre qui le noyait).
   Seule fantaisie : un calque ::after avec le même texte exactement
   superposé, découpé dans un dégradé qui glisse de -100 % à 200 %.
   ------------------------------------------------------------------------- */
.hero .hero__titre .flux-mot{
  position:relative!important;
  display:inline-block!important;
  background:none!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  filter:none!important;
  text-shadow:none!important;
  box-shadow:none!important;
  animation:none!important;
  /* lueur douce DERRIÈRE le mot, jamais d'ombre sombre */
  isolation:isolate;
  /* Une seule typographie pour tout le titre (Raphaël, 23/10) : même police, graisse et approche que la ligne 1. */
  font-family:inherit!important;
  font-weight:inherit!important;
  font-size:inherit!important;
  letter-spacing:inherit!important;
  font-style:normal!important;
}

/* lueur claire, portée par le mot mais sans effet sur son remplissage */
.hero .hero__titre .flux-mot::before{
  content:""!important;
  position:absolute!important;
  inset:-14% -6%!important;
  z-index:-1!important;
  border-radius:50%!important;
  background:radial-gradient(60% 70% at 50% 55%, rgba(220,229,242,.28), rgba(220,229,242,.06) 62%, transparent 78%)!important;
  filter:blur(10px)!important;
  pointer-events:none!important;
}

/* l'éclat : MÊME texte, superposé, découpé dans le dégradé */
.hero .hero__titre .flux-mot::after{
  content:attr(data-texte)!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  z-index:1!important;
  pointer-events:none!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,.92) 50%,
    rgba(255,255,255,0) 58%,
    rgba(255,255,255,0) 100%)!important;
  background-size:260% 100%!important;
  background-repeat:no-repeat!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  animation:hero-eclat-mot 5.4s cubic-bezier(.4,0,.3,1) infinite!important;
}

@keyframes hero-eclat-mot{
  0%   {background-position:180% 0}
  62%  {background-position:180% 0}
  100% {background-position:-80% 0}
}

@media (prefers-reduced-motion:reduce){
  .hero .hero__titre .flux-mot::after{display:none!important}
}

/* -------------------------------------------------------------------------
   1 bis) RAIL : tout part du même bord gauche, au pixel.
   Le pied (adresse, téléphone) portait un padding propre et « Poitiers »
   un retrait ; les liens sont calés sur la même ligne de base.
   ------------------------------------------------------------------------- */
aside.rail,
.rail{padding-left:var(--rail-pad, 26px)!important}

aside.rail .rail__pied,
.rail .rail__pied,
aside.rail .rail__pied > *,
.rail .rail__pied > *,
aside.rail .rail__logo-alt,
.rail .rail__logo-alt,
aside.rail .rail__lieu,
.rail .rail__lieu{
  padding-left:0!important;
  margin-left:0!important;
  text-indent:0!important;
  border-left:0!important;
  box-sizing:border-box!important;
}

/* Le rail gauche : un seul bord de départ pour TOUT (logo, liens, pied).
   Le nom d'agence et le téléphone étaient en retrait de 8 px : on les remet
   sur le bord, en les sortant de tout retrait hérité (padding, marges, indent). */
aside.rail .rail__marque,
.rail .rail__marque,
aside.rail .rail__logo-alt,
.rail .rail__logo-alt,
aside.rail .rail__pied a,
.rail .rail__pied a,
aside.rail .rail__pied > a[href^="tel"],
.rail .rail__pied > a[href^="tel"]{
  margin-left:0!important;
  padding-left:0!important;
  border-left:0!important;
  text-indent:0!important;
}

/* le nom d'agence (masqué visuellement) ne doit plus rien peser dans le flux */
aside.rail .rail__logo-alt,
.rail .rail__logo-alt{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}

/* Le lien actif ne se décale plus : il se distingue par la lumière. */
aside.rail .rail__lien[aria-current],
.rail .rail__lien[aria-current],
aside.rail .rail__lien.est-actif,
.rail .rail__lien.est-actif,
aside.rail .rail__nav .rail__lien:first-child,
.rail .rail__nav .rail__lien:first-child{
  transform:none!important;
  padding-left:0!important;
}

/* -------------------------------------------------------------------------
   2) LA BILLE — exactement sur le point rond de droite du symbole.
   Logo logo-webcraft-mono-plat.png : 898 × 138 px, affiché 190 × 29 px.
   Le point rond mesuré sur les pixels du PNG : 41 à 53 px en largeur
   (soit 8,7 % à 11,2 % des 190 px) et 1 à 14 px en hauteur (soit 3,4 % à
   48 % des 29 px). Centre = 47 px / 7,5 px = 24,7 % de la largeur et
   26 % de la hauteur de l'image. Diamètre 13 px : il recouvre le point
   exactement, sans déborder.
   ------------------------------------------------------------------------- */
aside.rail .rail__logo,
.rail .rail__logo{
  position:relative!important;
  display:block!important;
  width:190px!important;
  height:29px!important;
  line-height:0!important;
  overflow:visible!important;
}

aside.rail .rail__logo-plat,
.rail .rail__logo-plat{
  display:block!important;
  width:136px!important;        /* réduit à la demande de Raphaël (23/10) : 190 → 136 px, proportions gardées */
  height:20.9px!important;
  max-width:none!important;
  filter:none!important;
  opacity:1!important;
}

aside.rail .rail__logo-bille,
.rail .rail__logo-bille{
  position:absolute!important;
  display:block!important;
  background-image:url("images/bille-point-chrome.png")!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  /* Centre du point rond, mesuré sur les pixels du logo (47 px et 7,5 px pour 190 px de large),
     ramené à 136 px de large : 33,6 px et 5,4 px depuis le coin du logo. */
  left:33.6px!important;
  top:5.4px!important;
  width:9.3px!important;        /* suit le logo : 13 px × 136/190 */
  height:9.3px!important;
  overflow:visible!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  transform:translate(-50%,-50%)!important;
  border:0!important;
  border-radius:50%!important;
  background:none!important;
  padding:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  object-fit:cover!important;
  opacity:1!important;
  filter:none!important;
  pointer-events:none!important;
  z-index:3!important;
  animation:none!important;
}

/* léger reflet qui tourne sur la bille : un halo clair qui pivote */
aside.rail .rail__logo-bille::after,
.rail .rail__logo-bille::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 46%)!important;
  mix-blend-mode:screen!important;
  animation:bille-reflet-final 9s linear infinite!important;
  pointer-events:none!important;
}

@keyframes bille-reflet-final{
  0%   {transform:rotate(0deg)}
  100% {transform:rotate(360deg)}
}

@media (prefers-reduced-motion:reduce){
  aside.rail .rail__logo-bille::after,
  .rail .rail__logo-bille::after{animation:none!important}
}

/* -------------------------------------------------------------------------
   3) Titre du hero : le mot porte son propre texte pour le calque d'éclat.
   ------------------------------------------------------------------------- */