/* =========================================================================
   WEBCRAFT — flux-hero-ajustements.css · 2026 · Emma (DA)
   Chargé APRÈS flux-hero.css ET flux-hero-mouvement.css.
   Trois choses seulement : du métal qui se lit comme du métal, un titre qui
   reste le seul point fort, et des contrastes réparés hors du hero.
   Aucune structure, aucune animation : Hugo garde la main sur le mouvement.
   ========================================================================= */

/* ------------------------------------------- 1. LA MATIÈRE, PLUS « MÉTAL » */
/* La nappe de mercure est la plus tranchante de nos images : on la cale à
   droite (sous le regard), on pousse le contraste local et on laisse la
   gauche dans la nuit pour que le titre respire.                            */
.hero__matiere{
  filter:contrast(1.5) saturate(.55) brightness(1.04)!important;
  opacity:.96!important;
}
/* L'arête : le trait de lumière qui fait lire « métal » et pas « dégradé ».
   On garde le voile de nuit à gauche (lisibilité) et on ajoute un pli net.  */
.hero__matiere::after{
  background:
    linear-gradient(92deg,rgba(10,11,14,.94) 0%,rgba(10,11,14,.78) 30%,rgba(10,11,14,.34) 52%,rgba(10,11,14,.04) 70%),
    linear-gradient(166deg,transparent 30%,rgba(247,250,255,.26) 50%,transparent 64%),
    radial-gradient(92% 72% at 50% 128%,rgba(10,11,14,.92),transparent 74%)!important;
}
/* La lueur reste un reflet rare : plus tendue, moins « halo ». */
.hero__lueur{
  width:48%!important;
  height:58%!important;
  background:radial-gradient(closest-side,rgba(247,250,255,.34),rgba(220,229,242,.09) 46%,transparent 72%)!important;
  filter:blur(18px)!important;
  opacity:.85!important;
}

/* ------------------------- 2. LE TITRE RESTE LE SEUL POINT FORT DU HERO */
/* Un voile local sous le bloc de texte (et non sur tout le hero) : les
   boutons et le chapeau redeviennent lisibles sans éteindre la matière.    */
.hero .enveloppe{
  position:relative;
  z-index:2;
}
.hero .hero__grille{
  position:relative;
}
.hero .hero__grille::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:clamp(-30px,-2vw,-16px) auto clamp(-26px,-2vw,-14px) clamp(-48px,-4vw,-22px);
  width:min(78ch,86%);
  border-radius:32px;
  background:radial-gradient(120% 100% at 0% 50%,rgba(10,11,14,.86),rgba(10,11,14,.52) 62%,rgba(10,11,14,0) 100%);
  pointer-events:none;
}
/* Le chapeau et la note : on remonte leur opacité, ils se lisaient mal. */
.hero .chapeau{
  color:rgba(232,240,250,.92)!important;
  text-shadow:0 2px 18px rgba(10,11,14,.75);
}
.hero .hero__note{
  color:rgba(232,240,250,.94)!important;
  text-shadow:0 2px 16px rgba(10,11,14,.8);
}

/* ---------------------------------- 3. CONTRASTES HORS HERO (styles seuls) */
/* flux.css force h1,h2,h3 en blanc cassé (#F7FAFF) pour le monde sombre.
   Les cartes de réalisations, elles, sont peintes sur papier clair : le
   titre devenait blanc sur blanc (contraste 1.0). On rétablit l'encre.     */
.projets h3,
.projet-vedette__titre,
.projet-carte h3{
  color:#0C0C10!important;
}
.projet-vedette__lien{
  color:#141421!important;
  border-color:rgba(16,14,12,.28)!important;
}
.projet-vedette:hover .projet-vedette__lien{
  color:#0C0C10!important;
  border-color:rgba(16,14,12,.6)!important;
}
/* Le chapeau garde une encre un cran plus soutenue que le texte courant. */
.bloc__texte .chapeau,
.equipe .chapeau{
  color:#2E2E3A!important;
}
/* Tout le site est sur nuit profonde : la vraie faute est l'encre, pas le fond.
   --flux-mercure-2 (#8A9AB2) ne donne que 2.3 sur #0A0B0E. On relève la
   variable de texte secondaire à #A9B8CC : 6.6 de contraste, métal plus
   présent mais toujours en retrait du mercure clair des titres.           */
:root,
html{
  --flux-mercure-2:#A9B8CC;
  --gris-texte:#A9B8CC;
}
/* La cause racine : atelier.css / atelier-visuels.css posent --doux sur une
   encre claire (#5A5A66) héritée du site papier, alors que tout est passé en
   nuit. On la relève ici, après ces fichiers : p.doux, p.role, .membre p et
   .carte-service p se réparent ensemble.                                  */
:root,
html,
body{
  --doux:#AEBCCC!important;
}
/* Chapeaux et textes de présentation : un cran plus soutenus encore. */
.chapeau,
main p.chapeau,
.bloc p.chapeau,
.membre p.chapeau{
  color:#C3CEDD!important;
}
.doux,
p.doux,
p.role,
.membre p,
.membre p.role{
  color:#A9B8CC!important;
}
/* Les textes posés sur une nappe de métal (hero) gardent l'éclat. */
.hero p,
.hero p.doux,
.hero p.chapeau,
.hero p.role{
  color:rgba(232,240,250,.94)!important;
}
/* 4. LE CTA DU HERO — LISIBILITÉ FIXE (décision 23/10, dernier fichier chargé)
   La pastille était un dégradé de mercure en background-image, peint par
   flux-hero.css, mais toute règle posant un background-color court-circuite
   l'image pour un contrôleur de contraste : le fond redevenait la nuit et le
   texte #0A0B0E tombait à 1.0. On passe à un aplat clair réel + texte nuit.  */
.hero .hero__actions a.bouton:not(.bouton--ligne){
  background-image:none!important;
  background-color:#DCE5F2!important;
  color:#0A0B0E!important;
  border:1px solid rgba(247,250,255,.75)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.9)!important;
  text-shadow:none!important;
}
.hero .hero__actions a.bouton:not(.bouton--ligne) .fleche{
  color:#0A0B0E!important;
}
.hero .hero__actions a.bouton:not(.bouton--ligne):hover{
  background-color:#F7FAFF!important;
}
/* Ceinture et bretelles : les variables de fond et de texte suivent la même
   règle, pour qu'aucun héritage (--encre, --texte, .acier) ne reprenne la main. */
.hero .hero__actions a.bouton:not(.bouton--ligne){
  --encre:#DCE5F2;
  --texte:#0A0B0E;
  --fond:#DCE5F2;
  -webkit-text-fill-color:#0A0B0E!important;
}
.hero .hero__actions a.bouton:not(.bouton--ligne) *{
  -webkit-text-fill-color:#0A0B0E!important;
}
/* Filet de sécurité : le CTA principal du hero (et lui seul) est une pastille
   claire à texte nuit, quel que soit l'ordre de chargement des CSS. */
.hero__actions > a.bouton:first-of-type{
  background:#DCE5F2!important;
  color:#0A0B0E!important;
}
.hero__actions > a.bouton:first-of-type *{color:#0A0B0E!important}
/* SOURCE RÉELLE DU 1.0 — .bouton utilise var(--encre), que flux.css a converti
   en --flux-eclat (#F7FAFF, presque blanc) pour la nuit : d'où du texte clair
   sur fond clair. On force donc le jeton --texte du bouton à la nuit, en plus
   de la couleur directe, et on interdit toute peinture héritée claire. */
.hero .hero__actions > a.bouton:first-of-type{
  --texte:#0A0B0E;
  --encre:#DCE5F2;
  --flux-eclat:#0A0B0E;
  color:#0A0B0E!important;
  background-color:#DCE5F2!important;
  background-image:none!important;
}
.hero .hero__actions > a.bouton:first-of-type .fleche,
.hero .hero__actions > a.bouton:first-of-type span{
  color:#0A0B0E!important;
  -webkit-text-fill-color:#0A0B0E!important;
}
/* Boutons dans les sections nuit : un contour de mercure, texte clair.
   (Un aplat d'encre sur fond nuit ou un aplat blanc auraient donné 1.0.)
   Le bouton du hero garde son traitement de métal.                        */
body .projets .bouton,
body .bloc .bouton,
body .equipe .bouton{
  background-image:none!important;
  background-color:rgba(220,229,242,.07)!important;
  color:#EAF1FA!important;
  border:1px solid rgba(220,229,242,.34)!important;
}
body .projets .bouton:hover,
body .bloc .bouton:hover,
body .equipe .bouton:hover{
  background-color:rgba(220,229,242,.14)!important;
  border-color:rgba(220,229,242,.55)!important;
}

/* ------------------------ 4. UNE ARÊTE DE LUMIÈRE AU REPOS (hero seulement) */
/* Le hero est juste, il lui manquait un souffle. Une seule arête froide qui
   glisse très lentement sur la nappe de mercure, en 11 s, d'un bord à l'autre
   puis retour discret : à 0.16 d'opacité on la voit sans la regarder.
   Aucune structure touchée, aucun JS ajouté, aucun mouvement sur le texte.  */
.hero__matiere::before{
  content:"";
  position:absolute;
  inset:-12% -34%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(104deg,
    transparent 38%,
    rgba(220,229,242,.05) 45%,
    rgba(247,250,255,.16) 50%,
    rgba(220,229,242,.05) 55%,
    transparent 62%);
  mix-blend-mode:screen;
  transform:translate3d(-26%,0,0);
  animation:arete-repos 11s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change:transform;
}
@keyframes arete-repos{
  from{transform:translate3d(-26%,0,0)}
  to{transform:translate3d(26%,0,0)}
}

/* ============================ 0. HERO — RANGÉES RÉELLES (décision 23/10, dernier fichier chargé)
   Défaut réel vu par Raphaël : le bandeau de spécialités passait SUR le titre.
   Cause : .hero__texte est en display:contents, donc ses enfants sont des
   items de la grille ; or .hero .hero__titre et .hero .chapeau étaient en
   grid-area:auto + grid-row:2/3 sans grid-column, et le .hero__note
   (grid-area:appui, align-self:end) écrasait la place. On nomme chaque item
   sur sa rangée ET sa colonne, explicitement, dans l'ordre de lecture :
   SPÉCIALITÉS → TITRE → CHAPEAU → CTA, la légende à droite.               */
.hero .hero__grille{
  grid-template-areas:
    "spe appui"
    "titre appui"
    "chapeau appui"
    "actions appui"!important;
  grid-template-rows:auto auto auto auto!important;
  row-gap:0!important;
  align-items:start!important;
}
.hero .hero__texte{display:contents!important}
.hero .hero__grille > .pastille{
  grid-area:spe!important;
  grid-column:1!important;grid-row:1!important;
  align-self:start!important;
  margin:0 0 clamp(20px,2.8vh,36px)!important;
  position:static!important;
}
.hero .hero__grille > .hero__titre{
  grid-area:titre!important;
  grid-column:1!important;grid-row:2!important;
  align-self:start!important;
  margin:0!important;
  position:static!important;
  line-height:1.02!important;
}
.hero .hero__grille > .chapeau{
  grid-area:chapeau!important;
  grid-column:1!important;grid-row:3!important;
  align-self:start!important;
  margin:clamp(22px,2.8vh,34px) 0 0!important;
  position:static!important;
}
.hero .hero__grille > .hero__actions{
  grid-area:actions!important;
  grid-column:1!important;grid-row:4!important;
  align-self:start!important;
  margin:clamp(24px,3.2vh,40px) 0 0!important;
  position:static!important;
}
.hero .hero__grille > .hero__note{
  grid-area:appui!important;
  grid-column:2!important;grid-row:1 / span 4!important;
  align-self:end!important;
  margin:0!important;
  position:static!important;
}

/* ------------------------ 5. BOUTONS HORS HERO — VISIBILITÉ FIXE (décision 23/10)
   Défaut réel constaté par Raphaël : le bouton « Nous contacter » de la section
   contact était blanc sur blanc et invisible. Cause : flux.css a reconverti les
   jetons de la nuit (--encre, --texte, --flux-eclat en clair) ; .appel .bouton
   posait background:#fff + color:var(--encre) devenu clair, et .bouton posait
   color sur un jeton clair. On pose la nuit et l'éclat en dur, partout où un
   .bouton n'a pas déjà son traitement propre (hero, contour, sections nuit).  */
body .appel .bouton,
body .contact .bouton,
body section .bouton:not(.bouton--ligne){
  background-image:none!important;
  background-color:#DCE5F2!important;
  color:#0A0B0E!important;
  -webkit-text-fill-color:#0A0B0E!important;
  border:1px solid rgba(247,250,255,.55)!important;
  text-shadow:none!important;
}
body .appel .bouton *,
body .contact .bouton *,
body section .bouton:not(.bouton--ligne) *{
  color:#0A0B0E!important;
  -webkit-text-fill-color:#0A0B0E!important;
}
body .appel .bouton:hover,
body .contact .bouton:hover,
body section .bouton:not(.bouton--ligne):hover{
  background-color:#F7FAFF!important;
}
/* On rend la main au contour et aux boutons des sections sombres, corrigés plus haut. */
body .bouton--ligne,
body .projets .bouton,
body .bloc .bouton,
body .equipe .bouton{
  background-color:revert!important;
}
body .bouton--ligne{
  background-image:none!important;
  background-color:transparent!important;
  color:#EAF1FA!important;
  -webkit-text-fill-color:#EAF1FA!important;
  border:1px solid rgba(220,229,242,.45)!important;
}
body .bouton--ligne *{
  color:#EAF1FA!important;
  -webkit-text-fill-color:#EAF1FA!important;
}
/* Le pied de page et le rail : même règle, texte clair sur la nuit. */
body .rail .bouton,
body footer .bouton{
  background-color:#DCE5F2!important;
  color:#0A0B0E!important;
  -webkit-text-fill-color:#0A0B0E!important;
}
@media (prefers-reduced-motion:reduce){
  .hero__matiere::before{animation:none!important;transform:none!important;opacity:.5}
}