/* ============================================
   ESQUICE — CUSTOM DESIGN OVERRIDE
   Nouvelle identité : Navy profond + Or chaud
   ============================================ */

/* ── Fonts ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Variables ──────────────────────────────── */
:root {
  --navy:        #0d1b2a;
  --navy-light:  #162435;
  --navy-mid:    #1e3050;
  --gold:        #c8882a;
  --gold-light:  #e8a830;
  --gold-pale:   #fdf3e3;
  --white:       #ffffff;
  --off-white:   #f9f8f6;
  --gray-50:     #f7f7f7;
  --gray-100:    #ededed;
  --gray-200:    #d8d8d8;
  --gray-500:    #7a7a7a;
  --gray-700:    #3a3a3a;
  --gray-900:    #111111;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 4px 16px rgba(13,27,42,.10);
  --shadow-lg:   0 12px 40px rgba(13,27,42,.18);
}

/* ── Reset page background ───────────────────── */
body {
  background-color: var(--white) !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--gray-900) !important;
}

.min-h-screen.bg-gradient-to-br.from-slate-50.via-blue-50.to-indigo-50,
.bg-gradient-to-br.from-slate-50.via-blue-50.to-indigo-50 {
  background: var(--white) !important;
}

/* ── NAVIGATION ─────────────────────────────── */
header {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--gray-100) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.05) !important;
}

/* Logo box */
header .bg-blue-600,
header .group-hover\:bg-blue-700 {
  background-color: var(--navy) !important;
  border-radius: 8px !important;
}

/* Nav brand name */
header .text-gray-900 {
  color: var(--navy) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}

/* Tagline sous le logo */
header .text-blue-600.font-medium {
  color: var(--gold) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* Nav links */
header .text-gray-600 {
  color: #555 !important;
  font-weight: 500 !important;
}
header .text-gray-600:hover,
header .text-gray-900:hover {
  color: var(--navy) !important;
}
/* Active nav item */
header .text-blue-600:not(.font-medium) {
  color: var(--navy) !important;
  font-weight: 600 !important;
}
header .bg-blue-600.absolute {
  background-color: var(--gold) !important;
  height: 2px !important;
}

/* CTA button header */
header .btn-primary,
header a.btn-primary {
  background-color: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  padding: 9px 20px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
  transition: background 0.2s, transform 0.15s !important;
}
header .btn-primary:hover,
header a.btn-primary:hover {
  background-color: var(--navy-mid) !important;
  transform: translateY(-1px) !important;
}

/* ── HERO SECTION (accueil) ──────────────────── */
section.relative.min-h-screen.flex.items-center.justify-center,
section.min-h-screen.flex.items-center.justify-center {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, #0a2240 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Geometric overlay on hero */
section.relative.min-h-screen.flex.items-center.justify-center::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(200,136,42,.12) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(30,48,80,.4) 0%, transparent 50%) !important;
  pointer-events: none !important;
}

/* Hero page projets */
section.pt-32.pb-20.bg-gradient-to-br.from-indigo-600.via-purple-700.to-blue-800 {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #0a2240 100%) !important;
}

/* Hero pages secondaires (services, à-propos, etc.) */
section[class*="bg-gradient-to-br"][class*="from-blue-600"],
section[class*="bg-gradient-to-br"][class*="from-blue-900"],
section[class*="bg-gradient-to-r"][class*="from-blue-600"] {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
}

/* Accent jaune → or dans le hero */
.text-yellow-400 {
  color: var(--gold-light) !important;
}

/* ── SECTION : EXPERTISE (accueil) ──────────── */
section.py-20.bg-white {
  background-color: var(--white) !important;
}

/* Titres de section */
.text-gray-900.font-bold.font-poppins {
  font-family: 'Poppins', sans-serif !important;
  color: var(--navy) !important;
  letter-spacing: -0.5px !important;
}

/* Accent mot clé titre */
h2 .text-blue-600,
h1 .text-blue-600 {
  color: var(--gold) !important;
}

/* Icônes expertise */
.bg-blue-100.text-blue-600 {
  background-color: rgba(200,136,42,.1) !important;
  color: var(--gold) !important;
  border-radius: 10px !important;
}

/* Sous-titre expertise */
.text-blue-600.font-semibold {
  color: var(--gold) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* Liens "En savoir plus" */
a.text-blue-600,
a.text-blue-600.hover\:text-blue-700 {
  color: var(--navy) !important;
  font-weight: 600 !important;
}
a.text-blue-600:hover {
  color: var(--gold) !important;
}

/* Bullet points */
.bg-blue-600.rounded-full.w-2.h-2,
.w-2.h-2.bg-blue-600.rounded-full {
  background-color: var(--gold) !important;
}

/* ── SECTION CHIFFRES CLÉS ───────────────────── */
section.py-20.bg-gradient-to-br.from-blue-600.to-indigo-700,
.bg-gradient-to-br.from-blue-600.to-indigo-700 {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%) !important;
}

/* Valeurs chiffres */
section .text-yellow-400 span.counter,
section .text-4xl.font-bold.text-yellow-400 {
  color: var(--gold-light) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
}

/* Labels chiffres */
.text-blue-100 {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}

/* Glass cards chiffres */
.glass-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px) !important;
}

/* ── SECTION VALEURS ─────────────────────────── */
section.py-20.bg-gradient-to-b.from-gray-50.to-white,
.bg-gradient-to-b.from-gray-50.to-white {
  background: var(--off-white) !important;
}

/* Cards valeurs */
.bg-white.p-8.rounded-2xl.shadow-sm {
  background: var(--white) !important;
  border: 1px solid var(--gray-100) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.3s, transform 0.3s !important;
}
.bg-white.p-8.rounded-2xl.shadow-sm:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px) !important;
}

/* Icon valeurs — Excellence */
.bg-gradient-to-br.from-blue-500.to-blue-600 {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid)) !important;
}

/* Icon valeurs — Innovation */
.bg-gradient-to-br.from-yellow-500.to-orange-500 {
  background: linear-gradient(135deg, #c8882a, #e8a830) !important;
}

/* Icon valeurs — Intégrité */
.bg-gradient-to-br.from-green-500.to-emerald-600 {
  background: linear-gradient(135deg, #1a4a3a, #2d7a5a) !important;
}

/* Icon valeurs — Esprit d'équipe */
.bg-gradient-to-br.from-purple-500.to-indigo-600 {
  background: linear-gradient(135deg, var(--navy-mid), #0d2846) !important;
}

/* Titre card hover */
.group:hover h3.text-gray-900 {
  color: var(--navy) !important;
}

/* ── SECTION PROJETS ─────────────────────────── */
/* Cards projets */
.group.bg-white.rounded-2xl.overflow-hidden {
  border-radius: 14px !important;
  border: 1px solid var(--gray-100) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.3s, transform 0.3s !important;
}
.group.bg-white.rounded-2xl.overflow-hidden:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
}

/* Badge catégorie */
.bg-blue-600.text-white.text-xs.font-semibold.px-3.py-1.rounded-full {
  background-color: var(--navy) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}

/* Tags projets */
.bg-blue-50.text-blue-600.px-2.py-1.rounded-full,
.text-xs.bg-blue-50.text-blue-600 {
  background-color: var(--gold-pale) !important;
  color: var(--gold) !important;
  font-weight: 500 !important;
}

/* Lien projet */
a.text-blue-600.font-semibold.text-sm {
  color: var(--navy) !important;
}
a.text-blue-600.font-semibold.text-sm:hover {
  color: var(--gold) !important;
}

/* ── SECTION CARRIÈRES ───────────────────────── */
section.py-20.bg-gradient-to-br.from-blue-50.via-indigo-50.to-purple-50,
.bg-gradient-to-br.from-blue-50.via-indigo-50.to-purple-50 {
  background: var(--off-white) !important;
}

/* Mini-cards carrières */
.bg-white\/70.backdrop-blur-sm.rounded-lg {
  background: var(--white) !important;
  border: 1px solid var(--gray-100) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Icons mini-cards */
.bg-blue-100.text-blue-600.rounded-lg {
  background-color: rgba(200,136,42,.1) !important;
  color: var(--gold) !important;
}

/* Cercles décoratifs photo */
.w-24.h-24.bg-yellow-400.rounded-full {
  background-color: rgba(200,136,42,0.15) !important;
}
.w-32.h-32.bg-blue-600.rounded-full {
  background-color: rgba(13,27,42,0.07) !important;
}

/* ── SECTION CTA FINALE ──────────────────────── */
section.py-20.bg-gradient-to-r.from-blue-600.to-indigo-700,
.bg-gradient-to-r.from-blue-600.to-indigo-700 {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
  position: relative !important;
}

/* Bouton principal CTA */
a.inline-flex.items-center.bg-yellow-400,
.bg-yellow-400.hover\:bg-yellow-500 {
  background-color: var(--gold) !important;
  color: var(--white) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
}
a.inline-flex.items-center.bg-yellow-400:hover,
.bg-yellow-400:hover {
  background-color: var(--gold-light) !important;
}

/* Cercles déco CTA */
section .absolute.inset-0 .absolute.bg-white.rounded-full,
section .absolute.inset-0 .absolute.bg-yellow-400.rounded-full {
  opacity: 0.04 !important;
}

/* Icons CTA section */
.w-12.h-12.bg-white\/20.rounded-full {
  background: rgba(255,255,255,0.1) !important;
}

/* ── BOUTONS GLOBAUX ─────────────────────────── */
.btn-primary,
a.btn-primary {
  background-color: var(--navy) !important;
  color: var(--white) !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 7px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.2px !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 8px rgba(13,27,42,.2) !important;
}
.btn-primary:hover,
a.btn-primary:hover {
  background-color: var(--navy-mid) !important;
  box-shadow: 0 6px 20px rgba(13,27,42,.3) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary,
a.btn-secondary {
  background: transparent !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
  padding: 11px 28px !important;
  border-radius: 7px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
}
.btn-secondary:hover,
a.btn-secondary:hover {
  background-color: var(--navy) !important;
  color: var(--white) !important;
}

/* ── FOOTER ──────────────────────────────────── */
footer.bg-gray-900 {
  background-color: #0a0f16 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

footer .text-blue-400 {
  color: var(--gold) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

footer .bg-blue-600 {
  background-color: var(--navy-mid) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

footer .text-blue-400.font-medium {
  color: rgba(200,136,42,0.8) !important;
}

/* ── IMAGES ──────────────────────────────────── */
/* Rounded project images */
.relative.aspect-\[4\/3\].rounded-2xl.overflow-hidden,
.relative.aspect-\[3\/2\].overflow-hidden {
  border-radius: 12px !important;
}

img.object-cover {
  transition: transform 0.5s ease !important;
}
.group:hover img.object-cover {
  transform: scale(1.04) !important;
}

/* ── SCROLL ANIMATIONS ───────────────────────── */
/* Subtle fade-in tweak */
[style*="opacity:0"] {
  transition: opacity 0.6s ease, transform 0.6s ease !important;
}

/* ── HERO PAGES INTÉRIEURES ───────────────────── */
/* Services, À propos etc hero banners */
section.pt-32.pb-20[class*="bg-gradient"],
section.pt-24[class*="bg-gradient"],
section.pt-20[class*="bg-gradient"] {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
}

/* ── FORMS & INPUTS ──────────────────────────── */
input, textarea, select {
  border-color: var(--gray-200) !important;
  border-radius: 7px !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(13,27,42,.1) !important;
  outline: none !important;
}

/* ── SCROLLBAR ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb {
  background: var(--navy-mid);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--navy); }

/* ── MISC POLISH ─────────────────────────────── */
/* Images arrondies dans services */
.rounded-2xl { border-radius: 14px !important; }
.rounded-xl  { border-radius: 10px !important; }

/* Séparateur footer */
.border-t.border-gray-800 {
  border-color: rgba(255,255,255,0.07) !important;
}

/* Hover sur lien de nav footer */
footer a:hover { color: var(--gold) !important; }

/* Active underline nav */
.h-0\.5.bg-blue-600.absolute {
  background-color: var(--gold) !important;
}

/* Text highlight dans les pages */
.text-indigo-100, .text-blue-100 {
  color: rgba(255,255,255,0.72) !important;
}

/* Page projets — hero stats icons */
.w-16.h-16.bg-white\/20.rounded-xl {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
}

/* Page services — feature pills */
.bg-blue-600.text-white.rounded-full {
  background-color: var(--navy) !important;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  header {
    background: rgba(255,255,255,0.99) !important;
  }
}

/* ── Logo SVG via CSS ────────────────────────── */
/* Cache l'icône bleue et le texte "Esquice" */
header a.group > div:first-child,
header a.group > div.hidden {
  display: none !important;
}

/* Affiche le vrai logo SVG */
header a.group {
  display: block !important;
  background-image: url('/esquice_logo.svg') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: left center !important;
  width: 180px !important;
  height: 70px !important;
  min-width: 180px !important;
}

/* ── Fix hero ────────────────────────────────── */
/* Cache le "Découvrez plus" scroll indicator */
.animate-bounce,
[class*="scroll"],
a[href*="#"]:not(nav a) {
  display: none !important;
}

/* Compense la navbar fixe pour que le hero ne soit pas tronqué */
section.relative.min-h-screen.flex.items-center.justify-center,
section.min-h-screen.flex.items-center {
  padding-top: 80px !important;
}

/* ── Fond filigrane pages intérieures ────────── */

/* Image commune : ingénieurs sur chantier */
section.pt-32,
section.pt-24,
section.pt-20 {
  background-image: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1600&q=80') !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
}

/* Overlay sombre par-dessus pour que le texte reste lisible */
section.pt-32::before,
section.pt-24::before,
section.pt-20::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(13,27,42,0.88) 0%, rgba(30,48,80,0.80) 100%) !important;
  z-index: 0 !important;
}

/* Le contenu passe au-dessus de l'overlay */
section.pt-32 > *,
section.pt-24 > *,
section.pt-20 > * {
  position: relative !important;
  z-index: 1 !important;
}