/* ═══════════════════════════════════════════
   WILSON GROUP SERVICES — SHARED STYLES
   ═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500&display=swap');

:root {
  /* ─── Wilson Group Services — Identite visuelle (logo "general") ───
     3 couleurs principales : Orange #F37121, Argente #A8A8A8, Blanc #FFFFFF.
     Les variables --dark* gardent leurs noms pour compatibilite mais
     pointent maintenant vers les surfaces claires (theme light). */

  /* Marque */
  --gold: #F37121;          /* Orange logo (W, lettrage WILSON, SERVICES) */
  --gold-light: #FF9558;
  --gold-dark: #C8500F;
  --silver: #A8A8A8;        /* Gris argente du lettrage GROUP */
  --silver-dark: #6E6E6E;

  /* Surfaces (anciennement sombres, maintenant claires) */
  --dark: #FFFFFF;          /* Fond principal du site */
  --dark2: #F7F7F7;         /* Sections alternees / page-hero */
  --dark3: #FFFFFF;         /* Cards (avec ombres et bordures discretes) */
  --dark4: #EEEEEE;         /* Hover / surfaces survolees */

  /* Texte (--white = couleur principale du texte, devenu anthracite) */
  --white: #1F1F1F;         /* Texte principal anthracite */
  --gray: #6E6E6E;          /* Texte secondaire */
  --gray-light: #9A9A9A;    /* Texte tertiaire */

  --accent: #FF6B35;
  --card-bg: #FFFFFF;
  --border: rgba(243,113,33,0.22);
  --border-white: rgba(0,0,0,0.08);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{
  font-family:'Inter',sans-serif;
  background:var(--dark); color:var(--white);
  overflow-x:hidden; line-height:1.6;
}
em, i, blockquote, q { font-style: normal; }

/* SCROLLBAR */
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--dark);}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px;}

/* GRAIN OVERLAY */
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ─── NAVIGATION ─── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(24px) saturate(1.5);
  border-bottom:1px solid var(--border);
  transition:all 0.4s;
}
nav.scrolled { background:rgba(255,255,255,0.95); }
.nav-inner {
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 60px;
  transition:padding 0.4s;
}
nav.scrolled .nav-inner { padding:12px 60px; }

.nav-logo {
  display:flex; align-items:center; gap:12px; text-decoration:none;
}
.logo-mark {
  width:42px; height:42px;
  background:var(--gold); color:#1F1F1F;
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Sans'; font-weight:800; font-size:22px;
  flex-shrink:0; transition:transform 0.3s;
}
.nav-logo:hover .logo-mark { transform:rotate(-5deg) scale(1.05); }
.logo-text { display:flex; flex-direction:column; }
.logo-main {
  font-family:'IBM Plex Sans'; font-weight:800; font-size:15px;
  letter-spacing:2px; color:var(--white); line-height:1;
}
.logo-sub {
  font-family:'IBM Plex Sans'; font-size:9px; font-weight:600;
  letter-spacing:3px; color:var(--gold); text-transform:uppercase;
  line-height:1; margin-top:3px;
}

.nav-links {
  display:flex; align-items:center; gap:6px; list-style:none;
}
.nav-links a {
  text-decoration:none; color:rgba(31,31,31,0.78);
  font-family:'IBM Plex Sans'; font-size:12px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  padding:8px 14px; border-radius:6px;
  transition:all 0.3s; position:relative;
}
.nav-links a:hover, .nav-links a.active { color:var(--white); background:rgba(0,0,0,0.06); }
.nav-links a.active { color:var(--gold); background:rgba(240,130,42,0.08); }
.nav-links .nav-cta {
  background:var(--gold)!important; color:#1F1F1F!important;
  font-weight:700!important; padding:10px 22px!important;
}
.nav-links .nav-cta:hover { background:var(--gold-light)!important; }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.hamburger span {
  width:26px; height:2px; background:var(--white);
  border-radius:2px; transition:all 0.3s; display:block;
}

/* MOBILE OVERLAY */
.mob-overlay {
  display:none; position:fixed; inset:0; z-index:990;
  background:var(--dark2);
  flex-direction:column; justify-content:center; align-items:center;
}
.mob-overlay.open { display:flex; }
.mob-menu {
  display:flex; flex-direction:column; align-items:center; gap:28px;
}
.mob-menu a {
  font-family:'IBM Plex Sans'; font-weight:800; font-size:36px;
  letter-spacing:3px; text-transform:uppercase;
  text-decoration:none; color:rgba(31,31,31,0.78);
  transition:color 0.3s;
}
.mob-menu a:hover { color:var(--gold); }

/* ─── PAGE HERO (inner pages) ─── */
.page-hero {
  padding:180px 60px 100px;
  background:var(--dark2);
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--border);
}
.page-hero-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 80% at 0% 50%, rgba(240,130,42,0.07) 0%, transparent 60%);
}
.page-hero-lines {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(240,130,42,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,130,42,0.03) 1px, transparent 1px);
  background-size:60px 60px;
}
.page-hero-inner {
  max-width:1300px; margin:0 auto; position:relative; z-index:1;
}
.breadcrumb {
  display:flex; align-items:center; gap:10px;
  font-size:12px; color:rgba(0,0,0,0.5);
  letter-spacing:1px; margin-bottom:24px;
}
.breadcrumb a { color:var(--gold); text-decoration:none; }
.breadcrumb span { color:rgba(0,0,0,0.4); }
.page-hero-title {
  font-family:'IBM Plex Sans'; font-weight:800;
  font-size:clamp(44px,7vw,100px);
  line-height:0.9; letter-spacing:-2px;
}
.page-hero-title em {
  font-family:'IBM Plex Sans';
  color:var(--gold); font-weight:700;
}
.page-hero-sub {
  color:rgba(31,31,31,0.65); font-size:17px;
  max-width:600px; margin-top:24px; line-height:1.8; font-weight:300;
}
.page-hero-line {
  width:80px; height:3px;
  background:linear-gradient(90deg, var(--gold), transparent);
  margin-top:36px;
}

/* ─── TYPOGRAPHY HELPERS ─── */
.section-label {
  font-family:'IBM Plex Sans'; font-size:25px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.section-label::before {
  content:''; width:24px; height:2px; background:var(--gold);
}

.section-title-lg {
  font-family:'IBM Plex Sans'; font-weight:800;
  font-size:clamp(36px,5vw,60px);
  line-height:1.0; letter-spacing:-1px;
}
.section-title-lg em {
  font-family:'IBM Plex Sans';
  color:var(--gold); font-weight:700;
}

.section-title-md {
  font-family:'IBM Plex Sans'; font-weight:800;
  font-size:clamp(28px,3.5vw,44px);
  line-height:1.1; letter-spacing:-0.5px;
}

/* ─── BUTTONS ─── */
.btn-gold {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold); color:#1F1F1F;
  padding:14px 32px; border-radius:4px;
  font-family:'IBM Plex Sans'; font-size:13px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  text-decoration:none; border:none; cursor:pointer;
  transition:all 0.3s;
}
.btn-gold:hover {
  background:var(--gold-light); transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(240,130,42,0.35);
}
.btn-outline-gold {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--gold);
  padding:14px 32px; border-radius:4px;
  font-family:'IBM Plex Sans'; font-size:13px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--gold); cursor:pointer;
  transition:all 0.3s;
}
.btn-outline-gold:hover { background:rgba(240,130,42,0.08); transform:translateY(-2px); }
.btn-outline-white {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--white);
  padding:14px 32px; border-radius:4px;
  font-family:'IBM Plex Sans'; font-size:13px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  text-decoration:none; border:1px solid rgba(0,0,0,0.25); cursor:pointer;
  transition:all 0.3s;
}
.btn-outline-white:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

/* ─── REVEAL ANIMATIONS ─── */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity:0; transition:opacity 0.8s ease, transform 0.8s ease;
}
.reveal { transform:translateY(40px); }
.reveal-left { transform:translateX(-50px); }
.reveal-right { transform:translateX(50px); }
.reveal-scale { transform:scale(0.94); }
.reveal.visible,.reveal-left.visible,.reveal-right.visible,.reveal-scale.visible {
  opacity:1; transform:none;
}

/* ─── SERVICE FEATURE (image + content split) ─── */
.primary-services { margin-top:50px; }
.service-feature {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--border-white); border-radius:16px;
  overflow:hidden; margin-bottom:28px;
  transition:border-color 0.4s;
  background:var(--card-bg);
  box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
}
.service-feature:hover { border-color:var(--border); }
.service-feature.reverse { direction:rtl; }
.service-feature.reverse > * { direction:ltr; }
.sf-img { height:380px; overflow:hidden; position:relative; }
.sf-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s; }
.service-feature:hover .sf-img img { transform:scale(1.05); }
.sf-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,0,0,0.45) 0%, transparent 60%);
}
.sf-badge {
  position:absolute; top:24px; left:24px;
  background:var(--gold); color:#1F1F1F;
  padding:6px 16px; border-radius:4px;
  font-family:'IBM Plex Sans'; font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
}
.sf-content {
  padding:52px 48px;
  display:flex; flex-direction:column; justify-content:center;
}
.sf-num {
  font-family:'IBM Plex Sans'; font-weight:800; font-size:72px;
  color:rgba(240,130,42,0.08); line-height:1; margin-bottom:-20px;
}
.sf-content h3 {
  font-family:'IBM Plex Sans'; font-weight:800;
  font-size:clamp(22px,3vw,32px); margin-bottom:20px;
  color:var(--white); line-height:1.2;
}
.sf-content h3 span { color:var(--gold); display:block; }
.sf-content p {
  color:rgba(31,31,31,0.78); line-height:1.8;
  font-size:15px; font-weight:300; margin-bottom:16px;
}
.sf-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.sf-tag {
  background:rgba(240,130,42,0.08); border:1px solid rgba(240,130,42,0.2);
  color:var(--gold); padding:5px 14px; border-radius:50px;
  font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
}
@media(max-width:1024px){
  .service-feature { grid-template-columns:1fr; }
  .service-feature.reverse { direction:ltr; }
  .sf-img { height:280px; }
  .sf-content { padding:40px 36px; }
}

/* ─── SEC-CARD (grilles de services / prestations) ─── */
.sec-card {
  background:var(--card-bg); border:1px solid var(--border-white);
  border-radius:14px; padding:44px 36px; position:relative;
  overflow:hidden; transition:all 0.4s;
  text-decoration:none; color:inherit; display:block;
}
.sec-card:hover {
  border-color:var(--border); background:rgba(0,0,0,0.04);
  transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,0.11);
}
.sec-card:hover h3 { color:var(--gold); }
.sec-card:hover .sec-card-arrow { transform:translateX(4px); color:var(--gold); }
.sec-card-icon { font-size:44px; margin-bottom:24px; display:block; }
.sec-card h3 {
  font-family:'IBM Plex Sans'; font-size:18px; font-weight:700;
  margin-bottom:16px; color:var(--white); transition:color 0.3s;
}
.sec-card p { font-size:14px; color:var(--gray); line-height:1.7; min-height:48px; }
.sec-card-arrow {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:18px; font-family:'IBM Plex Sans'; font-size:11px;
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gray); transition:all 0.3s;
}
.sec-card-num {
  position:absolute; bottom:-20px; right:10px;
  font-family:'IBM Plex Sans'; font-weight:800; font-size:100px;
  color:rgba(0,0,0,0.06); line-height:1; pointer-events:none;
}
/* Variante compacte pour grilles 4 colonnes (8+ items) */
.sec-card.compact { padding:32px 26px; }
.sec-card.compact .sec-card-icon { font-size:36px; margin-bottom:18px; }
.sec-card.compact h3 { font-size:16px; margin-bottom:12px; }
.sec-card.compact p { font-size:13px; line-height:1.6; min-height:0; }
.sec-card.compact .sec-card-num { font-size:72px; bottom:-12px; }

/* ─── CARD ─── */
.wgs-card {
  background:var(--card-bg); border:1px solid var(--border-white);
  border-radius:12px; padding:40px 36px;
  transition:all 0.4s; position:relative; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
}
.wgs-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--accent));
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.4s;
}
.wgs-card:hover::before { transform:scaleX(1); }
.wgs-card:hover {
  border-color:var(--border);
  box-shadow:0 4px 12px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.08);
  transform:translateY(-2px);
}

/* ─── FOOTER (dark soft) ─── */
.footer {
  position:relative; isolation:isolate;
  background:#22262E;
  background:linear-gradient(180deg, #2A2F38 0%, #21252C 60%, #1E2128 100%);
  color:#BFC5CD;
  padding:88px 0 0;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
/* soft warm hairline at the top — pas de trait franc */
.footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(243,113,33,0.4) 35%, rgba(255,149,88,0.5) 50%, rgba(243,113,33,0.4) 65%, transparent);
}
/* halo orange tres doux, diffus */
.footer::after {
  content:''; position:absolute; top:-220px; left:50%; transform:translateX(-50%);
  width:1100px; height:440px; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(243,113,33,0.08), transparent 72%);
}
.footer-inner {
  position:relative; z-index:1; max-width:1400px; margin:0 auto; padding:0 60px;
}
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:60px;
  padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,0.07);
}
.footer-brand .footer-logo {
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.footer-brand .logo-main { color:#F1F2F4; }
.footer-brand p {
  color:#9CA2AA; font-size:14px; line-height:1.85;
  max-width:320px; margin-bottom:14px;
}
.footer-email a {
  color:var(--gold-light); text-decoration:none; font-size:14px; font-weight:500;
  transition:color 0.25s;
}
.footer-email a:hover { color:#F1F2F4; }
.footer-address {
  color:#828892; font-size:13px; line-height:1.7; margin-top:8px;
}

/* Reseaux sociaux footer */
.footer-socials {
  display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;
}
.footer-social {
  width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.09);
  display:inline-flex; align-items:center; justify-content:center;
  color:#AEB4BC; cursor:pointer;
  transition:all 0.3s ease; text-decoration:none;
}
.footer-social:hover {
  background:rgba(243,113,33,0.12);
  border-color:rgba(243,113,33,0.45);
  color:var(--gold-light); transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,0.22);
}
.footer-social svg { width:18px; height:18px; display:block; }
.footer-nav-col h5 {
  font-family:'IBM Plex Sans'; font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:#E2E4E8; margin-bottom:22px; padding-bottom:12px; position:relative;
}
.footer-nav-col h5::after {
  content:''; position:absolute; left:0; bottom:0; width:28px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.footer-nav-col ul { list-style:none; }
.footer-nav-col li { margin-bottom:11px; }
.footer-nav-col a {
  text-decoration:none; color:#9CA2AA; font-size:13.5px;
  transition:color 0.25s ease, transform 0.25s ease; line-height:1.5; display:inline-block;
}
.footer-nav-col a:hover { color:#E2E4E8; transform:translateX(3px); }
.footer-bottom {
  display:flex; align-items:center; justify-content:center; gap:6px;
  flex-wrap:wrap; padding:26px 0; text-align:center;
}
.footer-bottom p {
  font-size:12px; color:rgba(255,255,255,0.36); letter-spacing:0.3px;
  margin-bottom:0;
}
.footer-bottom a { color:var(--gold-light); text-decoration:none; transition:color 0.25s; }
.footer-bottom a:hover { color:#F1F2F4; }

/* ─── FAB ─── */
.fab {
  position:fixed; bottom:32px; right:32px; z-index:800;
  width:56px; height:56px; border-radius:50%;
  background:var(--gold); color:#1F1F1F;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; text-decoration:none;
  box-shadow:0 8px 30px rgba(240,130,42,0.45);
  transition:all 0.3s; border:none; cursor:pointer;
}
.fab:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 16px 50px rgba(240,130,42,0.6); }

/* ─── DIVIDER ─── */
.gold-divider {
  width:60px; height:3px;
  background:linear-gradient(90deg, var(--gold), transparent);
  margin:20px 0;
}

/* ─── RESPONSIVE ─── */
@media(max-width:1200px){
  .nav-inner { padding:16px 40px; }
  nav.scrolled .nav-inner { padding:12px 40px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
}
@media(max-width:1024px){
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-inner { padding:16px 24px; }
  nav.scrolled .nav-inner { padding:12px 24px; }
  .page-hero { padding:140px 32px 80px; }
  .footer-inner { padding:0 32px; }
}
@media(max-width:768px){
  .footer { padding-top:64px; }
  .footer-top { grid-template-columns:1fr; gap:32px; padding-bottom:40px; }
  .page-hero { padding:130px 20px 60px; }
  .footer-inner { padding:0 20px; }
  .footer-bottom p { font-size:11.5px; }
}