/* =========================================================================
   WEBCRAFT — flux.css · 2026
   Direction artistique « Le flux » : le métal liquide (mercure).
   Nuit profonde, mercure clair, acier, éclat rare. Une couleur par pôle,
   gardée seulement pour la lisibilité, le métal reste le sujet.
   Écrit par Emma (DA). Hugo anime : voir le compte rendu pour les classes
   et les sélecteurs. Aucune animation ici — prefers-reduced-motion = Hugo.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. JETONS */
:root{
  /* Nuit et métal */
  --flux-nuit:#0A0B0E;            /* fond principal, nuit profonde         */
  --flux-nuit-2:#0E1014;          /* nuit légèrement relevée               */
  --flux-nuit-3:#141821;          /* panneaux, cartes                      */
  --flux-mercure:#DCE5F2;         /* mercure clair : texte fort, métal     */
  --flux-mercure-2:#8A9AB2;       /* mercure froid, secondaire             */
  --flux-acier:#5A6779;           /* acier : filets, texte discret         */
  --flux-eclat:#F7FAFF;           /* éclat : ne sert qu'au reflet, rare    */

  /* Pôles (lisibilité uniquement) */
  --flux-pole-creation:#3D6BFF;   /* création de site, bleu acier          */
  --flux-pole-marketing:#78FFB2;  /* marketing / SEO, menthe sourde        */
  --flux-pole-studio:#AF26FA;     /* studio / branding, violet             */

  /* Métal en dégradé */
  --flux-metal:linear-gradient(112deg,#7F8CA1 0%,#DCE5F2 18%,#F7FAFF 30%,#AEBBCE 44%,#6E7B90 58%,#C9D5E5 72%,#F7FAFF 80%,#8A9AB2 100%);
  --flux-metal-sombre:linear-gradient(120deg,#3A4351 0%,#8A9AB2 26%,#DCE5F2 46%,#5A6779 62%,#ADB9CA 82%,#3A4351 100%);
  --flux-metal-plat:linear-gradient(96deg,#B9C6D8 0%,#F7FAFF 24%,#A6B4C7 46%,#DCE5F2 68%,#8A9AB2 100%);
  --flux-veine:linear-gradient(90deg,transparent 0%,rgba(220,229,242,.55) 22%,rgba(247,250,255,.95) 50%,rgba(220,229,242,.55) 78%,transparent 100%);
  --flux-voile:linear-gradient(180deg,rgba(10,11,14,0) 0%,rgba(10,11,14,.55) 55%,rgba(10,11,14,.94) 100%);
  --flux-brume:radial-gradient(120% 90% at 12% -10%,rgba(138,154,178,.30) 0%,rgba(138,154,178,0) 58%),
               radial-gradient(90% 80% at 96% 8%,rgba(220,229,242,.16) 0%,rgba(220,229,242,0) 62%),
               radial-gradient(120% 120% at 50% 120%,rgba(90,103,121,.24) 0%,rgba(90,103,121,0) 60%);

  /* Filets */
  --flux-filets:rgba(220,229,242,.14);
  --flux-filets-forts:rgba(220,229,242,.30);
  --flux-ombre:0 30px 80px rgba(0,0,0,.62);

  /* Accès rapide */
  --flux-texte:#DCE5F2;
  --flux-texte-doux:#8A9AB2;

  /* Réglages du reflet (Hugo anime --flux-reflet-x et --flux-reflet-opacite) */
  --flux-reflet-x:38%;            /* position du reflet, en %              */
  --flux-reflet-opacite:0;        /* 0 = reflet absent, 1 = pleine lumière */

  /* Conversion des anciens jetons : tout ce qui les utilise passe en métal */
  --noir:var(--flux-nuit);
  --encre:var(--flux-eclat);
  --gris-texte:var(--flux-mercure-2);
  --gris-ligne:rgba(220,229,242,.16);
  --surface:rgba(220,229,242,.05);
  --surface-haute:rgba(220,229,242,.09);
  --degrade:var(--flux-metal);
  --degrade-texte:var(--flux-metal);
}

/* ------------------------------------------------- 2. CORPS ET SURFACES */
html{background:var(--flux-nuit)}
body{
  background:var(--flux-nuit);
  color:var(--flux-mercure);
}
::selection{background:rgba(220,229,242,.92);color:#0A0B0E}

/* Les CSS historiques peignent du papier clair (#FFF, #F6F4EF) :
   on repasse tout l'écran en nuit, y compris les blocs sans classe connue. */
.plan,
.plan section,
.plan article,
.plan > *,
body > .plan{background-color:transparent}
.rail,
main{background-color:var(--flux-nuit)}

/* Le bandeau clients reste une respiration : nuit relevée + brume de métal. */
.confiance{
  background-color:var(--flux-nuit-2)!important;
  background-image:var(--flux-brume)!important;
  background-repeat:no-repeat;
  border-block:1px solid var(--flux-filets);
}

/* Filet de métal en tête de section (élément posé par Hugo : .flux-filet) */
.flux-filet{
  display:block;
  height:1px;
  width:100%;
  border:0;
  background-image:var(--flux-veine);
  opacity:.55;
}

/* Nappe de métal au changement de page (Hugo la fait passer :
   il crée l'élément .flux-nappe et anime --flux-reflet-opacite) */
.flux-nappe{
  position:fixed;
  inset:0;
  z-index:120;
  pointer-events:none;
  background-image:var(--flux-metal);
  background-size:220% 100%;
  background-position:var(--flux-reflet-x) 50%;
  opacity:var(--flux-reflet-opacite);
  mix-blend-mode:screen;
}
.flux-nappe::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--flux-brume);
  mix-blend-mode:multiply;
}

/* --------------------------------------------------------- 3. TYPOGRAPHIE */
h1,h2,h3,h4,.hero__titre,.titre{color:var(--flux-eclat)!important}
.chapeau,p,.carte p,.carte-service p{color:var(--flux-mercure-2)}
/* Titres déjà peints en foncé par refonte.css (--wc-encre) : on rattrape".". */
h1,h2,h3,h4{color:var(--flux-eclat)!important}

/* Titre en mercure : le dégradé est découpé dans les lettres.
   Hugo peut animer --flux-reflet-x sur .titre-mercure pour faire glisser
   le reflet dans le mot (background-position suit la variable). */
.titre-mercure,
.flux-metal-texte,
.flux-titre-metal{
  background-image:var(--flux-metal);
  background-size:260% 100%;
  background-position:var(--flux-reflet-x) 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
/* Repli lisibilité : si le dégradé n'est pas supporté, le texte reste clair. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .titre-mercure,.flux-metal-texte,.flux-titre-metal{color:var(--flux-eclat)!important;-webkit-text-fill-color:currentColor}
}

/* Filet métal qui souligne un titre */
.titre-filets{
  display:inline-block;
  padding-bottom:.22em;
  background-image:var(--flux-veine);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 2px;
}

/* Le mot en italique du héros (em) reçoit le métal, pas une couleur criarde */
.hero__titre em,
.titre-heros em{
  font-style:normal;
  background-image:var(--flux-metal);
  background-size:260% 100%;
  background-position:var(--flux-reflet-x) 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
}

/* Pastilles et mentions */
.pastille{
  color:var(--flux-mercure);
  border:1px solid var(--flux-filets-forts);
  background:rgba(220,229,242,.045);
}

/* --------------------------------------------------------------- 4. BOUTONS */
/* Primaire : pastille de mercure, texte nuit — contraste AA garanti.
   Cible : les boutons du héros et le CTA du rail (classes existantes). */
.flux-cta,
.hero__actions a:first-child,
a.rail__cta,
.rail__cta,
.bandeau__bouton{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.92em 1.6em;
  border-radius:999px;
  border:1px solid rgba(247,250,255,.55);
  background-image:var(--flux-metal);
  background-size:220% 100%;
  background-position:var(--flux-reflet-x) 50%;
  background-color:#DCE5F2;
  color:#0A0B0E!important;
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(247,250,255,.7);
}
/* Reflet qui passe : une bande claire qui traverse le bouton au survol.
   Hugo peut aussi la piloter au scroll avec .flux-reflet. */
.flux-cta::after,
.bouton--primaire::after,
.rail__cta::after{
  content:"";
  position:absolute;
  top:-40%;
  bottom:-40%;
  left:calc(var(--flux-reflet-x) - 18%);
  width:36%;
  background-image:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg);
  opacity:calc(.12 + var(--flux-reflet-opacite) * .55);
  pointer-events:none;
}
/* Secondaire : contour de métal sur nuit */
.flux-cta--secondaire,
.flux-cta--secondaire,
.bouton--secondaire{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.9em 1.55em;
  border-radius:999px;
  border:1px solid var(--flux-filets-forts);
  background:rgba(220,229,242,.03);
  color:var(--flux-eclat)!important;
  font-weight:600;
  box-shadow:inset 0 1px 0 rgba(247,250,255,.10);
}
.bouton--fantome{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.9em 1.55em;
  border-radius:999px;
  border:1px solid var(--flux-filets-forts);
  background:rgba(220,229,242,.03);
  color:var(--flux-eclat)!important;
  font-weight:600;
  box-shadow:inset 0 1px 0 rgba(247,250,255,.10);
}
/* Lien texte : soulignement de métal */
.flux-lien{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  color:var(--flux-eclat)!important;
  font-weight:600;
  padding-bottom:2px;
  background-image:var(--flux-veine);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
}

/* ---------------------------------------------- 5. CARTES ET SURFACES MÉTAL */
.carte,
.carte-service,
.carte-projet,
.valeur,
.bloc-carte,
.carte--verre{
  position:relative;
  background-color:rgba(20,24,33,.86);
  background-image:
    linear-gradient(180deg,rgba(220,229,242,.07),rgba(220,229,242,0) 46%),
    var(--flux-brume);
  border:1px solid var(--flux-filets);
  border-radius:var(--rayon,22px);
  box-shadow:var(--flux-ombre);
}
/* Arête de métal : le liseré supérieur des cartes */
.carte::before,
.carte-service::before,
.carte-projet::before,
.valeur::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  border-radius:inherit;
  background-image:var(--flux-veine);
  opacity:.75;
  pointer-events:none;
}
/* Goutte de mercure : petit volume posé sur une carte (à animer par Hugo) */
.flux-goutte{
  display:block;
  width:56%;
  max-width:220px;
  aspect-ratio:2.4/1;
  margin:-.6em auto -.4em;
  border-radius:50% 50% 46% 54% / 62% 58% 42% 38%;
  background-image:var(--flux-metal);
  background-size:200% 200%;
  background-position:var(--flux-reflet-x) 40%;
  box-shadow:
    inset 0 -10px 22px rgba(10,11,14,.55),
    inset 0 8px 18px rgba(247,250,255,.55),
    0 24px 48px rgba(0,0,0,.55);
  opacity:.92;
}

/* Icônes de service : plus de dégradé violet → bleu → menthe, du métal. */
.carte-service__icone,
.valeur__icone{
  background-image:var(--flux-metal-sombre)!important;
  border:1px solid rgba(247,250,255,.35);
  box-shadow:0 14px 26px rgba(0,0,0,.55),inset 0 1px 0 rgba(247,250,255,.55);
  color:#0A0B0E!important;
}
.carte-service__icone svg,
.valeur__icone svg{stroke:#0A0B0E;color:#0A0B0E}

/* --------------------------------------------------------------- 6. RAIL */
.rail{
  background-color:var(--flux-nuit)!important;
  background-image:
    linear-gradient(180deg,rgba(220,229,242,.05) 0%,rgba(220,229,242,0) 30%),
    radial-gradient(90% 60% at 0% 0%,rgba(138,154,178,.18),transparent 70%),
    none!important;
  border-right:1px solid var(--flux-filets)!important;
}
.rail a,.rail button,.rail small,.rail span{color:var(--flux-mercure)}
.rail a:hover,.rail a:focus-visible{color:var(--flux-eclat)}
.rail__lieu,.rail small{color:var(--flux-mercure-2)!important}
.rail__cta{border-radius:999px}

/* Bandeau mobile */
.bandeau{
  background-color:rgba(10,11,14,.92)!important;
  border-bottom:1px solid var(--flux-filets);
  backdrop-filter:blur(14px);
}

/* -------------------------------------------------------- 7. LOGO MERCURE */
/* Le logo garde sa forme : on n'utilise que mask-image + background.
   --flux-logo : chemin du PNG blanc (masque). Change la source pour
   passer du logo blanc au logo noir selon le fond. */
.flux-logo{
  display:inline-block;
  width:var(--flux-logo-largeur,188px);
  aspect-ratio:898/138;
  background-image:var(--flux-metal);
  background-size:260% 100%;
  background-position:var(--flux-reflet-x) 50%;
  -webkit-mask-image:var(--flux-logo);
  mask-image:var(--flux-logo);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  filter:drop-shadow(0 0 18px rgba(220,229,242,.16));
}
/* Variante logo noir sur fond clair (si Hugo en a besoin) */
.flux-logo--sombre{background-image:var(--flux-metal-sombre)}

/* Le SVG animé livré (reflet déjà en mouvement, géré par son propre SMIL/CSS) */
.flux-logo-anime{
  display:block;
  width:var(--flux-logo-largeur,188px);
  height:auto;
}

/* Voile de reflet par-dessus le logo : Hugo le fait passer au changement de page */
.flux-logo-reflet{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(105deg,transparent 30%,rgba(247,250,255,.85) 50%,transparent 70%);
  background-size:260% 100%;
  background-position:var(--flux-reflet-x) 50%;
  opacity:var(--flux-reflet-opacite);
  mix-blend-mode:screen;
}

/* --------------------------------------------------- 8. IMAGES ET CADRES */
/* Toute image de projet : posée sur nuit, liseré de métal, ombre profonde. */
.flux-cadre{
  position:relative;
  border-radius:calc(var(--rayon,22px) + 6px);
  padding:10px;
  background-image:linear-gradient(160deg,rgba(220,229,242,.16),rgba(220,229,242,.03) 40%,rgba(10,11,14,.9));
  border:1px solid var(--flux-filets);
  box-shadow:var(--flux-ombre);
  overflow:hidden;
}
.flux-cadre img{
  display:block;
  width:100%;
  height:auto;
  border-radius:calc(var(--rayon,22px) + 2px);
  background:var(--flux-nuit-3);
}
/* Reflet de métal qui glisse sur le cadre (Hugo anime l'opacité) */
.flux-cadre::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(118deg,transparent 38%,rgba(247,250,255,.20) 50%,transparent 62%);
  background-size:220% 100%;
  background-position:var(--flux-reflet-x) 50%;
  opacity:var(--flux-reflet-opacite);
  pointer-events:none;
}

/* LES CADRES D'ÉCRAN : fenêtre d'ordinateur + téléphone, sur fond sombre.
   Structure posée par Hugo :
   <div class="flux-ecran">
     <div class="flux-ecran__ordi"><span class="flux-ecran__barre"></span><img …></div>
     <div class="flux-ecran__mobile"><img …></div>
     <span class="flux-ecran__client"><img … alt="logo client"></span>
   </div> */
.flux-ecran{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(10px,1.6vw,26px);
  padding:clamp(22px,3vw,46px) clamp(14px,2.4vw,38px) clamp(14px,2vw,30px);
  border-radius:calc(var(--rayon,22px) + 10px);
  background-color:var(--flux-nuit);
  background-image:
    radial-gradient(80% 60% at 50% 0%,rgba(138,154,178,.22),rgba(138,154,178,0) 62%),
    radial-gradient(60% 50% at 82% 88%,rgba(220,229,242,.14),transparent 60%),
    linear-gradient(180deg,#101319 0%,#0A0B0E 72%);
  border:1px solid var(--flux-filets);
  box-shadow:var(--flux-ombre);
  overflow:hidden;
}
/* nappe de métal discrète sous les écrans */
.flux-ecran::before{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-38%;
  height:62%;
  border-radius:50% 50% 0 0 / 60% 60% 0 0;
  background-image:linear-gradient(180deg,rgba(220,229,242,.22),rgba(220,229,242,.02) 60%,transparent 100%);
  filter:blur(2px);
  pointer-events:none;
}
.flux-ecran__ordi{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-width:0;
  border-radius:12px;
  padding:10px 10px 22px;
  background-image:linear-gradient(180deg,#232A35 0%,#141821 58%,#0E1014 100%);
  border:1px solid rgba(220,229,242,.28);
  box-shadow:0 26px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(247,250,255,.32);
}
.flux-ecran__ordi img{border-radius:6px;display:block;width:100%;height:auto}
.flux-ecran__barre{
  display:block;
  height:14px;
  margin-bottom:8px;
  border-radius:99px;
  background-image:radial-gradient(circle at 8px 50%,rgba(220,229,242,.55) 0 2.5px,transparent 3px),
                   radial-gradient(circle at 20px 50%,rgba(220,229,242,.40) 0 2.5px,transparent 3px),
                   radial-gradient(circle at 32px 50%,rgba(220,229,242,.28) 0 2.5px,transparent 3px),
                   linear-gradient(90deg,rgba(220,229,242,.10),rgba(220,229,242,.03));
  background-repeat:no-repeat;
}
.flux-ecran__mobile{
  position:relative;
  z-index:2;
  flex:0 0 clamp(84px,11vw,150px);
  margin-left:clamp(-46px,-4vw,-18px);
  margin-bottom:clamp(-6px,-.5vw,0px);
  border-radius:clamp(16px,1.6vw,26px);
  padding:6px;
  background-image:linear-gradient(165deg,#2C3441 0%,#12161D 46%,#0A0B0E 100%);
  border:1px solid rgba(220,229,242,.34);
  box-shadow:0 22px 50px rgba(0,0,0,.75),inset 0 1px 0 rgba(247,250,255,.4);
}
.flux-ecran__mobile img{
  border-radius:clamp(12px,1.2vw,20px);
  display:block;
  width:100%;
  height:auto;
}
/* Pastille du logo client sur le cadre */
.flux-ecran__client{
  position:absolute;
  z-index:3;
  top:clamp(10px,1.2vw,18px);
  left:clamp(10px,1.2vw,18px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background-color:rgba(10,11,14,.86);
  border:1px solid var(--flux-filets-forts);
  backdrop-filter:blur(8px);
}
.flux-ecran__client img{height:16px;width:auto;display:block}

/* Bandeau de logos clients : métal monochrome, jamais des couleurs criardes */
.bandeau-logos__piste img,
.confiance img{
  filter:grayscale(1) brightness(0) invert(.86)!important;
  opacity:.62!important;
  transition:opacity .35s ease,filter .35s ease;
}
.bandeau-logos__piste img:hover,
.confiance img:hover{opacity:.95!important}

/* ------------------------------------------------------ 9. PÔLES COULEUR */
/* Une couleur par pôle, uniquement en liseré/soulignement : la couleur
   ne porte jamais l'information seule, le libellé reste écrit. */
.flux-pole{padding-left:.7em;border-left:2px solid var(--flux-acier)}
.flux-pole--creation{border-left-color:var(--flux-pole-creation)}
.flux-pole--marketing{border-left-color:var(--flux-pole-marketing)}
.flux-pole--studio{border-left-color:var(--flux-pole-studio)}

/* ---------------------------------------------------- 10. FORMULAIRES */
input,textarea,select{
  background-color:rgba(220,229,242,.04);
  border:1px solid var(--flux-filets-forts);
  color:var(--flux-eclat);
  border-radius:12px;
}
input::placeholder,textarea::placeholder{color:rgba(138,154,178,.9)}
label{color:var(--flux-mercure)}

/* Pied de page : nappe de métal très sourde, texte en mercure */
footer,.pied,.pied-de-page{
  background-color:var(--flux-nuit-2);
  background-image:linear-gradient(180deg,transparent,rgba(220,229,242,.06));
  border-top:1px solid var(--flux-filets);
}