/* ============================================================
   Refonte page d'accueil — reprend l'UX des pages
   « Création site web » et « Contact » :
   fond dégradé vert → doré plein écran, cartes glass,
   coins carrés, texte clair.

   Couche d'habillage : elle surcharge styles.css ET les
   blocs <style> injectés par les composants React (qui
   arrivent après ce fichier dans le DOM) — d'où !important.
   ============================================================ */

/* ---------- Fond dégradé partagé (identique à contact.html) ---------- */
body {
  --hero-a: #2f3b3a;
  --hero-b: #cbac76;
  color: var(--bg) !important;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 10px),
    radial-gradient(70% 20% at 22% 12%, rgba(246,242,236,0.30) 0%, rgba(246,242,236,0) 50%),
    radial-gradient(64% 18% at 88% 30%, rgba(248,244,236,0.28) 0%, rgba(248,244,236,0) 50%),
    radial-gradient(72% 20% at 18% 56%, rgba(246,242,236,0.24) 0%, rgba(246,242,236,0) 52%),
    radial-gradient(66% 18% at 82% 78%, rgba(250,246,238,0.26) 0%, rgba(250,246,238,0) 50%),
    radial-gradient(120% 30% at 84% 6%, rgba(58,72,62,0.55) 0%, rgba(58,72,62,0) 46%),
    radial-gradient(95% 24% at 12% 26%, rgba(120,113,76,0.42) 0%, rgba(120,113,76,0) 44%),
    radial-gradient(120% 26% at 90% 48%, rgba(203,172,118,0.46) 0%, rgba(203,172,118,0) 46%),
    radial-gradient(110% 24% at 8% 68%, rgba(47,59,58,0.5) 0%, rgba(47,59,58,0) 44%),
    radial-gradient(130% 30% at 78% 88%, rgba(74,96,80,0.55) 0%, rgba(74,96,80,0) 48%),
    radial-gradient(120% 22% at 30% 99%, rgba(58,82,74,0.65) 0%, rgba(58,82,74,0) 52%),
    linear-gradient(160deg, #2f3b3a 0%, #3a443e 12%, #4e5744 26%, #6f6a4d 42%, #8a7c54 58%, #84845a 72%, #5d6a50 86%, #3f4d47 100%) no-repeat !important;
  background-attachment: scroll !important;
}

/* ---------- Typographie claire globale ---------- */
main h1, main h2, main h3, main h4 { color: var(--bg) !important; }
main .italic-accent { color: var(--tan-soft) !important; }
main .lead { color: rgba(246,242,236,0.82) !important; }
main .eyebrow { color: rgba(246,242,236,0.82) !important; }
main .eyebrow-dot::before { background: var(--tan-soft) !important; }

/* ---------- Masquer les petits titres de section (eyebrows) ---------- */
main .eyebrow, main .sector-eyebrow { display: none !important; }

/* Liens par défaut (habillage clair) */
main a.fa-link, main a.real-filter { }
main a:not(.btn):not(.fa-mini) { color: var(--tan-soft); }
main a:not(.btn):not(.fa-mini):hover { color: var(--bg); }

/* ---------- Boutons — coins carrés, ghost clair ---------- */
main .btn, .nav-alt .btn { border-radius: 0 !important; }
main .btn-ghost, .nav-alt .btn-ghost {
  background: rgba(255,255,255,0.08) !important;
  color: var(--bg) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
main .btn-ghost:hover, .nav-alt .btn-ghost:hover {
  background: rgba(255,255,255,0.17) !important;
  border-color: rgba(255,255,255,0.48) !important;
  color: var(--bg) !important;
}

/* ============================================================
   NAV — transparente sur le hero, verre foncé au scroll
   ============================================================ */
.nav-alt .brand { color: var(--bg) !important; }
.nav-alt .nav-links > a,
.nav-alt .nav-links > .menu-trigger { color: rgba(246,242,236,0.82) !important; }
.nav-alt .nav-links > a:hover,
.nav-alt .nav-links > .menu-trigger:hover,
.nav-alt .nav-links > .menu-trigger.open {
  background: rgba(255,255,255,0.10) !important;
  color: var(--bg) !important;
}
.nav-alt.scrolled {
  background: rgba(22,28,24,0.74) !important;
  -webkit-backdrop-filter: saturate(140%) blur(16px) !important;
  backdrop-filter: saturate(140%) blur(16px) !important;
  border-bottom-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 34px -20px rgba(6,10,8,0.7) !important;
}
.nav-alt.at-top .lang-switch,
.nav-alt .lang-switch { background: rgba(255,255,255,0.10) !important; }
.nav-alt .lang-switch button { color: rgba(246,242,236,0.72) !important; }
.nav-alt .lang-switch button.active {
  background: rgba(255,255,255,0.18) !important;
  color: var(--bg) !important;
  box-shadow: none !important;
}
.nav-alt .nav-burger {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.24) !important;
}
.nav-alt .nav-burger:hover { background: rgba(255,255,255,0.16) !important; }
.nav-alt .nav-burger i { background: var(--bg) !important; }

/* ============================================================
   HERO (hero-alt) — teinte foncée, texte clair
   ============================================================ */
body .hero-alt { --hero-tint: #26332e; background: transparent !important; }
.hero-alt .hero-trust { color: rgba(246,242,236,0.78) !important; }
.hero-alt .hero-stars { color: var(--tan-soft) !important; }
.hero-alt .avatar-stack > * { border-color: rgba(38,51,46,0.9) !important; }
/* Hero centré, comme celui de la page création */
.hero-alt .hero-alt-inner {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.hero-alt .hero-eyebrow-row,
.hero-alt .hero-cta-row,
.hero-alt .hero-trust { justify-content: center !important; }
.hero-alt .lead { margin-left: auto !important; margin-right: auto !important; }
/* Hero posé directement sur le dégradé : plus de vidéo, de voile ni de montagne */
body .hero-alt-video,
body .hero-alt-scrim,
body .hero-alt-mountain { display: none !important; }

/* ============================================================
   FEATURES (features-alt) — cartes glass, texte clair
   ============================================================ */
.features-alt { background: transparent !important; }
.features-alt .fa-visual { border-radius: 0 !important; }
.features-alt .fa-featured {
  background: rgba(16,22,18,0.42) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  backdrop-filter: blur(8px) saturate(125%);
  box-shadow: 0 30px 60px -30px rgba(8,12,9,0.75) !important;
}
.features-alt .fa-feat-title,
.features-alt .fa-title { color: var(--bg) !important; }
.features-alt .fa-feat-desc,
.features-alt .fa-desc { color: rgba(246,242,236,0.82) !important; }
.features-alt .fa-feat-name,
.features-alt .fa-name { color: rgba(246,242,236,0.6) !important; }
.features-alt .fa-num { color: var(--tan-soft) !important; }
.features-alt .fa-feat-badge {
  color: var(--tan-soft) !important;
  background: rgba(203,172,118,0.16) !important;
}
.features-alt .fa-bullets li { color: rgba(246,242,236,0.88) !important; }
.features-alt .fa-bullets svg { color: var(--tan-soft) !important; }
.features-alt .fa-link {
  color: var(--bg) !important;
  border-color: rgba(255,255,255,0.5) !important;
}
.features-alt .fa-link:hover { color: var(--tan-soft) !important; border-color: var(--tan-soft) !important; }
.features-alt .fa-sec-head { border-bottom-color: rgba(255,255,255,0.14) !important; }
.features-alt .fa-sec-head h3 { color: var(--bg) !important; }
.features-alt .fa-sec-head p { color: rgba(246,242,236,0.7) !important; }
.features-alt .fa-mini {
  background: rgba(16,22,18,0.42) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  backdrop-filter: blur(8px) saturate(125%);
}
.features-alt .fa-mini:hover {
  border-color: rgba(255,255,255,0.24) !important;
  box-shadow: 0 24px 50px -28px rgba(8,12,9,0.75) !important;
}
.features-alt .fa-mini-ic {
  background: rgba(203,172,118,0.16) !important;
  color: var(--tan-soft) !important;
  border-radius: 0 !important;
}
.features-alt .fa-mini-name { color: var(--bg) !important; }
.features-alt .fa-mini-desc { color: rgba(246,242,236,0.74) !important; }
.features-alt .fa-mini-link { color: var(--tan-soft) !important; }

/* ============================================================
   KEY STATS — transparent (fond dégradé), texte déjà clair
   ============================================================ */
.keystats { background: transparent !important; }
.keystats .ks-head {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   RÉALISATIONS — transparent, filtres + cartes glass
   ============================================================ */
.realisations { background: transparent !important; }
.real-head {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.real-head p { margin-left: auto !important; margin-right: auto !important; }
.real-filters { justify-content: center !important; }
.real-head h2 { color: var(--bg) !important; }
.real-head h2 em { color: var(--tan-soft) !important; }
.real-head p { color: rgba(246,242,236,0.82) !important; }
.real-filter {
  color: rgba(246,242,236,0.72) !important;
  background: rgba(16,22,18,0.32) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.real-filter:hover { border-color: rgba(255,255,255,0.42) !important; color: var(--bg) !important; }
.real-filter.active { background: var(--tan) !important; border-color: var(--tan) !important; color: #1f1813 !important; }
.real-card {
  background: rgba(16,22,18,0.42) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  backdrop-filter: blur(8px) saturate(125%);
  box-shadow: 0 24px 50px -28px rgba(8,12,9,0.7) !important;
}
.real-card:hover { box-shadow: 0 30px 60px -28px rgba(8,12,9,0.8) !important; }
.real-thumb {
  background: linear-gradient(135deg, rgba(58,72,62,0.62), rgba(203,172,118,0.32)) !important;
}
.real-thumb span {
  color: rgba(246,242,236,0.78) !important;
  border-color: rgba(255,255,255,0.28) !important;
  background: rgba(16,22,18,0.34) !important;
}
.real-body h3 { color: var(--bg) !important; }
.real-body p { color: rgba(246,242,236,0.74) !important; }
.real-client { color: var(--tan-soft) !important; }
.real-tags span {
  color: rgba(246,242,236,0.85) !important;
  background: rgba(16,22,18,0.4) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* ============================================================
   TÉMOIGNAGES — transparent, cartes glass carrées
   ============================================================ */
.testimonials { background: transparent !important; }
.testimonials .section-head {
  align-items: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.carousel-card {
  background: rgba(16,22,18,0.42) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  backdrop-filter: blur(8px) saturate(125%);
}

/* ============================================================
   CTA FINAL — texte clair sur le dégradé
   ============================================================ */
.cta-final .meta { color: rgba(246,242,236,0.6) !important; }

/* ============================================================
   FOOTER — voile foncé translucide au lieu du bloc plein
   ============================================================ */
.footer {
  background: rgba(13,17,14,0.46) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-top: 1px solid rgba(255,255,255,0.10) !important;
}

/* ============================================================
   BANDE MARQUEE LOGOS — bande translucide accordée au dégradé
   (au lieu du bloc --ink plein)
   ============================================================ */
.logo-marquee {
  background: rgba(15,19,16,0.28) !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}
.logo-marquee-label { color: rgba(246,242,236,0.6) !important; }
.logo-marquee-row span { color: var(--bg) !important; }