/* =========================================================================
   ACCUEIL — sections sous le hero · 23/10/2026
   Une seule typographie (Plus Jakarta Sans), une seule matière (le mercure, teinté selon la section),
   des rappels de marque (bande « Webcraft », signature en pied de page). Les animations au défilement
   sont dans defilement.js ; sans JavaScript ou en mouvement réduit, tout est visible et immobile.
   ========================================================================= */

/* ---------- 1. Une seule typographie ---------- */
.mot-fort{font-family:inherit!important;font-style:normal!important;font-weight:inherit!important;color:#DCE5F2}
.citation{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;
  font-size:clamp(18px,1.5vw,22px)!important;font-weight:500;line-height:1.5!important;
  color:#F7FAFF!important;
}

/* ---------- 3. Bande de marque ---------- */
.marque-bande{
  position:relative;overflow:hidden;
  padding:clamp(56px,6vw,96px) 0;display:flex;flex-direction:column;gap:28px;
  border-top:1px solid rgba(220,229,242,.08);border-bottom:1px solid rgba(220,229,242,.08);
}
.marque-bande__piste{display:flex;align-items:center;gap:clamp(20px,2.2vw,40px);width:max-content;will-change:transform}
.marque-bande__mot{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:clamp(40px,4.6vw,84px);font-weight:300;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;
  color:rgba(220,229,242,.5);
}
/* Seul le nom de la marque est coulé dans le mercure : une matière régulière, qui glisse lentement. */
.marque-bande__mot--matiere{
  font-weight:600;
  background:none;
  -webkit-text-fill-color:currentColor;color:var(--w-mercure-clair,#DCE5F2);
  animation:none;
}
@keyframes marque-matiere{from{background-position:30% 45%}to{background-position:70% 55%}}
.marque-bande__point{flex:none;width:7px;height:7px;border-radius:50%;background:rgba(220,229,242,.55)}
.marque-bande__piste--petite{gap:24px;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(138,154,178,.9);white-space:nowrap}
.marque-bande__tiret{flex:none;width:28px;height:1px;background:rgba(220,229,242,.3)}

/* ---------- 4. Appel final dans la matière du hero (rappel de l'arrivée sur le site) ---------- */
.appel--matiere{
  position:relative!important;overflow:hidden!important;isolation:isolate;
  background:#0A0B0E!important;background-image:none!important;
  border:1px solid rgba(220,229,242,.10)!important;border-radius:28px!important;
  box-shadow:none!important;
}
.appel--matiere::before,.appel--matiere::after{content:none!important;display:none!important} /* halos de l'ancienne DA */
.appel--matiere .appel__matiere{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  filter:brightness(.62) contrast(1.15);
  /* la matière s'efface côté texte : lisibilité au pixel, sans voile posé par-dessus */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 70%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 70%);
}
.appel--matiere h2{max-width:14ch}

/* ---------- 6. Pied de page ---------- */
.pied__logo{display:inline-block;margin-bottom:16px}
.pied__logo img{display:block;width:136px;height:auto;filter:brightness(0) invert(1)}
.pied__signature{
  margin:clamp(32px,5vw,72px) 0 clamp(16px,2vw,24px);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:clamp(64px,13.2vw,232px);font-weight:800;letter-spacing:-.025em;line-height:.82;white-space:nowrap;
  background:none;
  -webkit-text-fill-color:currentColor;color:var(--w-mercure-clair,#DCE5F2);
  user-select:none;
}

/* ---------- Mouvement réduit : rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
  .marque-bande__mot--matiere{animation:none}
}

/* ---------- Défilement : GSAP prend la main sous le hero (l'ancien système .mv ne doit pas se superposer) ---------- */
.defilement-actif main section:not(.hero) .mv,
.defilement-actif main .appel.mv{opacity:1!important;transform:none!important;transition:none!important;animation:none!important;filter:none!important}
.defilement-actif .ligne{will-change:transform}

/* ---------- Purge de l'ancienne DA (violet / menthe) encore visible sur l'accueil ---------- */
section.solutions.flux-section{background-image:none!important}
.fleche,.fleche::before,.fleche::after{color:currentColor!important;background-image:none!important;box-shadow:none!important}
.projet-vedette::after{background-image:none!important;box-shadow:none!important}
.projet-vedette__num{color:#0A0B0E!important;background:rgba(10,11,14,.06)!important;border-color:rgba(10,11,14,.14)!important}
/* Cartes projet sur fond blanc : textes secondaires assez foncés (WCAG 4,5:1). */
.projet-vedette__secteur,.projet-carte__secteur{color:rgba(10,11,14,.74)!important}
.hero__note span::before{box-shadow:none!important}

/* ---------- Pied de page : liens lisibles sur la nuit ---------- */
.pied__col a{color:var(--w-gris,#a6b0c2)!important}
.pied__col a:hover,.pied__col a:focus-visible{color:#FFFFFF!important}
.pied__titre{margin:0 0 16px!important;font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;font-size:11px!important;font-weight:600!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--w-gris,#a6b0c2)!important}
.pied__col{display:flex;flex-direction:column;gap:10px;font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.pied__col a{font-size:14px!important;line-height:1.5}
.pied__col .pied__titre[style]{margin-top:24px!important}
.appel__actions{display:flex;flex-wrap:wrap;gap:12px}
.appel__actions .w-bouton{margin-top:0}
.pied__col .doux,.pied__bas{color:rgba(138,154,178,.9)!important}

/* ---------- Pied de page compact (24/10) : une rangée de pôles, l'agence sur une ligne, signature mesurée ---------- */
.pied{padding-block:clamp(48px,5vw,80px) 24px!important}
.pied__haut{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:clamp(28px,3vw,40px);border-bottom:1px solid rgba(220,229,242,.10)}
.pied__haut .pied__logo{margin-bottom:12px}
.pied__adresse{margin:0;font-size:14px;line-height:1.6;color:rgba(138,154,178,.95)}
.pied__adresse a{color:rgba(220,229,242,.85);text-decoration:none;white-space:nowrap}
.pied__adresse a:hover,.pied__adresse a:focus-visible{color:#FFFFFF}
.pied__agence{display:flex;gap:28px;flex-wrap:wrap;font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.pied__agence a{font-size:14px;font-weight:500;color:rgba(220,229,242,.85);text-decoration:none;transition:color .25s}
.pied__agence a:hover,.pied__agence a:focus-visible{color:#FFFFFF}
.pied__grille--poles{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:clamp(20px,2.4vw,40px)!important;padding-top:clamp(28px,3vw,40px)}
.pied__grille--poles .pied__titre{margin-bottom:8px!important}
.pied__grille--poles .pied__col{gap:8px!important}
.pied__signature{font-size:clamp(56px,8.4vw,150px)!important;margin:clamp(28px,3.4vw,52px) 0 clamp(12px,1.4vw,20px)!important}
@media (max-width:1100px){.pied__grille--poles{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:640px){.pied__grille--poles{grid-template-columns:repeat(2,minmax(0,1fr))!important}}