@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;padding:0;box-sizing:border-box}
:root{
  --orange:#FF7A00; --magenta:#FF3D7F; --violet:#8E2DE2; --blue:#1E63FF;
  --vc-orange:255,122,0; --vc-magenta:255,77,141; --vc-violet:138,77,255; --vc-blue:110,168,255;
}
body{background:#000;color:#F8F9FA;line-height:1.6;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:
  radial-gradient(ellipse 800px 600px at 20% 30%, rgba(255,123,0,.15) 0%, transparent 100%),
  radial-gradient(ellipse 700px 500px at 80% 20%, rgba(255,61,126,.15) 0%, transparent 100%),
  radial-gradient(ellipse 900px 700px at 70% 80%, rgba(141,45,226,.15) 0%, transparent 100%), #000;
z-index:-1;pointer-events:none}

.btn-primary{background:var(--orange);color:#fff;padding:16px 32px;border-radius:50px;font-weight:600;border:none;cursor:pointer;transition:.3s;text-decoration:none;display:inline-block}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,122,0,.3)}
.btn-secondary{background:var(--violet);color:#fff;padding:16px 32px;border-radius:50px;font-weight:600;border:none;cursor:pointer;transition:.3s;text-decoration:none;display:inline-block}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(142,45,226,.3)}

.card-dark{background:rgba(22,22,26,.8);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px;transition:.3s;backdrop-filter:blur(20px)}
.card-dark:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}

.nav-sticky{background:rgba(10, 10, 11, 0.048);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:50}
.nav-link{color:#9CA3AF;font-weight:500;padding:12px 20px;border-radius:12px;transition:.3s;text-decoration:none;cursor:pointer;border:none;background:transparent}
.nav-link:hover{color:#F8F9FA;background:rgba(255,255,255,.05)}
.nav-link.active{color:var(--orange);background:rgba(255,122,0,.1)}

.flex_items-center{
  display:flex;
  align-items:center;
  gap:6px;
}

.nav-brand-word{
  color:#F4F7FF;
  font-weight:900;
  letter-spacing:.12em;
  font-size:1.22rem;
  line-height:1;
  text-transform:uppercase;
  user-select:none;
  margin-left:-10px;
  transform:translateX(-4px) translateY(1px);
}

:root[data-theme="light"] .nav-brand-word{
  color:#111a2b;
}

@media (max-width:768px){
  .nav-brand-word{
    font-size:1.04rem;
    letter-spacing:.1em;
  }
}

.page{display:block!important;min-height:100vh}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section-padding{padding:120px 0}
@media (max-width:768px){.section-padding{padding:80px 0}.container{padding:0 16px}}

.admin-tab{background:transparent;border:1px solid rgba(255,255,255,.1);color:#9CA3AF;padding:12px 24px;border-radius:12px;cursor:pointer;transition:.3s}
.admin-tab.active{background:var(--orange);border-color:var(--orange);color:#fff}
.admin-tab-content{display:none}.admin-tab-content.active{display:block}
.search-input{background:rgba(22,22,26,.6);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px 24px;color:#F8F9FA;font-size:1rem;width:100%;transition:.3s}
.search-input:focus{outline:none;border-color:rgba(255,122,0,.3);background:rgba(22,22,26,.8)}
.search-input::placeholder{color:#6B7280}

.vc-card .vc-btn{align-self:flex-end}
.vc-card .emoji-white{filter:brightness(0) invert(1)}

/* === EXEMPLES DE CONTENU — COULEURS CHARTÉES === */
#metier-content-examples article.vc-card,
#metier-examples-grid   article.vc-card{
  position:relative;border-radius:18px;background:transparent!important;box-shadow:none!important;
  border:1px solid rgba(255,255,255,.12)!important;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
#metier-content-examples > *:nth-child(1) article.vc-card,
#metier-examples-grid   > *:nth-child(1) article.vc-card{ --c: var(--vc-orange); }
#metier-content-examples > *:nth-child(2) article.vc-card,
#metier-examples-grid   > *:nth-child(2) article.vc-card{ --c: var(--vc-magenta); }
#metier-content-examples > *:nth-child(3) article.vc-card,
#metier-examples-grid   > *:nth-child(3) article.vc-card{ --c: var(--vc-violet);  }
#metier-content-examples > *:nth-child(4) article.vc-card,
#metier-examples-grid   > *:nth-child(4) article.vc-card{ --c: var(--vc-blue);   }

#metier-content-examples article.vc-card::before,
#metier-examples-grid   article.vc-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(var(--c,255,255,255), .08), rgba(0,0,0,0) 65%);
  pointer-events:none;
}
#metier-content-examples article.vc-card::after,
#metier-examples-grid   article.vc-card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg, rgba(var(--c,255,255,255), .95), rgba(var(--c,255,255,255), .45));
  box-shadow:0 0 24px rgba(var(--c,255,255,255), .25);pointer-events:none;
}

#metier-content-examples article.vc-card:hover,
#metier-examples-grid   article.vc-card:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--c,255,255,255), .55)!important;
  box-shadow:0 0 34px rgba(var(--c,255,255,255), .22), 0 12px 28px rgba(0,0,0,.35)!important;
}

#metier-content-examples article.vc-card .w-11.h-11,
#metier-examples-grid   article.vc-card .w-11.h-11{
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 12px rgba(var(--c,255,255,255), .30);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}


/* === THEME TOGGLE BUTTON (global) === */
:root[data-theme="light"] { --toggle-bg: rgba(20,20,22,.85); --toggle-fg:#F5F7FA; --toggle-border: rgba(0,0,0,.30); }
:root[data-theme="dark"]  { --toggle-bg: rgba(255,255,255,.90); --toggle-fg:#0A0A0B; --toggle-border: rgba(0,0,0,.12); }
#vc-theme-toggle{
  position: static;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  height: auto;
}
#vc-theme-toggle svg{
  width: 16px;
  height: 16px;
}
#vc-theme-toggle:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.22); }
#vc-theme-toggle svg{ width:16px; height:16px; fill: currentColor; }

/* Theme switch micro-animation */
:root.theme-switching,
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after{
  transition:
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    opacity .22s ease,
    filter .22s ease !important;
}

#vc-theme-flash{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transform: scale(.82);
  background:
    radial-gradient(circle at var(--theme-x, 50%) var(--theme-y, 50%), rgba(255, 122, 0, .26), rgba(142, 45, 226, .18) 38%, rgba(30, 99, 255, .12) 62%, transparent 76%);
}

#vc-theme-flash.is-active{
  animation: vcThemeFlash .42s cubic-bezier(.22, .8, .28, 1) both;
}

@keyframes vcThemeFlash{
  0%{
    opacity: 0;
    transform: scale(.78);
    filter: blur(10px);
  }
  36%{
    opacity: .72;
  }
  100%{
    opacity: 0;
    transform: scale(1.12);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce){
  #vc-theme-flash{ display:none; }
}


/* === STATIC GLOWS (no animation) + MINIMAL BACKGROUND ================= */
:root{ --vc-o:#FF7A00; --vc-m:#FF4D8D; --vc-v:#8A4DFF; --vc-b:#6EA8FF; }
:root[data-theme="dark"] body{
  background:
    radial-gradient(1200px 800px at 50% 140%, rgba(32,39,64,.25), transparent 60%),
    #0A0B0D;
  color:#F6F7FA;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(1200px 800px at 50% 140%, rgba(88,108,168,.06), transparent 60%),
    #F6F7FA;
  color:#0E0F14;
}
:root[data-theme] body::before,
:root[data-theme] body::after{ animation:none !important; }

.hero::before, .hero::after,
.vc-bg, .bg-rotate, .bg-spin, .bg-orbit,
[class*="bg-rotate"], [class*="bg-spin"], [class*="bg-orbit"]{ animation:none !important; transform:none !important; }

/* Fireflies layer */
#vc-fireflies{ position:fixed; inset:0; z-index:0; pointer-events:none; mix-blend-mode:normal; }
:root[data-theme="dark"] #vc-fireflies{ mix-blend-mode:screen; }
#vc-fireflies .ff{ position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; opacity:.45;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.28)); will-change:transform,opacity; animation: ff-float 24s ease-in-out infinite, ff-twinkle 2.8s linear infinite; }
#vc-fireflies .ff.ff-o{ background:rgba(255,122,0,.95);   filter:drop-shadow(0 0 6px rgba(255,122,0,.40)); }
#vc-fireflies .ff.ff-m{ background:rgba(255,77,141,.95);  filter:drop-shadow(0 0 6px rgba(255,77,141,.40)); }
#vc-fireflies .ff.ff-v{ background:rgba(138,77,255,.95);  filter:drop-shadow(0 0 6px rgba(138,77,255,.40)); }
#vc-fireflies .ff.ff-b{ background:rgba(110,168,255,.95); filter:drop-shadow(0 0 6px rgba(110,168,255,.40)); }
@keyframes ff-float{ 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(var(--dx,14px),var(--dy,-14px),0)} 100%{transform:translate3d(0,0,0)} }
@keyframes ff-twinkle{ 0%,100%{opacity:.25} 50%{opacity:.9} }
@media (prefers-reduced-motion: reduce){ #vc-fireflies .ff{ animation:none !important; } }


/* === LIGHT READABILITY ================================================ */
:root[data-theme="light"]{
  --ink:#0E0F14; --text:#2B2F3A; --muted:#5A6070; --border:#E3E6EE;
}
:root[data-theme="light"] body{ color:var(--text); }
:root[data-theme="light"] h1,h2,h3,h4{ color:var(--ink) !important; text-shadow:none !important; }
:root[data-theme="light"] p, :root[data-theme="light"] li, 
:root[data-theme="light"] .text, :root[data-theme="light"] .desc{ color:var(--text) !important; }
:root[data-theme="light"] .muted, :root[data-theme="light"] .text-secondary{ color:var(--muted) !important; }
:root[data-theme="light"] .vc-card, :root[data-theme="light"] .vc-formule, :root[data-theme="light"] .pricing-card,
:root[data-theme="light"] .formula-card, :root[data-theme="light"] .realisation-card, 
:root[data-theme="light"] #services-container .relative.h-full{
  background:#fff !important; color:var(--text) !important; border:1px solid var(--border) !important;
}
:root[data-theme="light"] .vc-card h1, :root[data-theme="light"] .vc-card h2, :root[data-theme="light"] .vc-card h3,
:root[data-theme="light"] .realisation-card h2, :root[data-theme="light"] .realisation-card h3{ color:var(--ink) !important; }


/* === SEARCH CLEANUP ==================================================== */
#metier-search, #metier-search .results, .vc-search, .vc-search .results{ overflow:hidden !important; -ms-overflow-style:none; scrollbar-width:none; }
#metier-search *::-webkit-scrollbar, .vc-search *::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; }
#metier-search .result-item p, .vc-search .result-item p{ display:none !important; }


/* === LIGHT MODE PURE WHITE BACKGROUND + READABILITY =================== */
:root[data-theme="light"]{
  --ink:#0B0C10;
  --text:#1E212A;
  --muted:#4E5565;
  --border:#E6E8EE;
}

:root[data-theme="light"] body{
  background: #FFFFFF !important; /* base white */
  color: var(--text) !important;
}
/* keep subtle page glows on ::before/::after but very soft */
:root[data-theme="light"] body::before{ opacity:.14 !important; filter: blur(18px) !important; }
:root[data-theme="light"] body::after { opacity:.08 !important; filter: blur(16px) !important; }

/* Header/Nav white with subtle shadow */
:root[data-theme="light"] header,
:root[data-theme="light"] .vc-header,
:root[data-theme="light"] .vc-nav{
  background:#FFFFFF !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow: 0 4px 14px rgba(16,24,40,.06) !important;
}

/* Cards/blocks stay white & readable */
:root[data-theme="light"] .vc-card,
:root[data-theme="light"] .vc-formule,
:root[data-theme="light"] .pricing-card,
:root[data-theme="light"] .formula-card,
:root[data-theme="light"] .realisation-card,
:root[data-theme="light"] #services-container .relative.h-full{
  background:#FFFFFF !important;
  color: var(--text) !important;
  border:1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 8px 18px rgba(17,24,39,.06) !important;
}
:root[data-theme="light"] h1, 
:root[data-theme="light"] h2, 
:root[data-theme="light"] h3, 
:root[data-theme="light"] h4{ color: var(--ink) !important; }
:root[data-theme="light"] p,
:root[data-theme="light"] li,
:root[data-theme="light"] .text,
:root[data-theme="light"] .desc{ color: var(--text) !important; }
:root[data-theme="light"] .muted,
:root[data-theme="light"] .text-secondary{ color: var(--muted) !important; }

/* Divider lines visible on white */
:root[data-theme="light"] .divider,
:root[data-theme="light"] .w-full.h-px,
:root[data-theme="light"] hr{ background: var(--border) !important; border-color: var(--border) !important; }

/* Buttons: ensure label readable on gradients */


/* Services panel backdrop: softer on white */
:root[data-theme="light"] #services-container::before{
  background:
    radial-gradient(900px 420px at 12% 8%, rgba(255,122,0,.05), transparent 60%),
    radial-gradient(900px 420px at 88% 10%, rgba(255,77,141,.04), transparent 60%),
    radial-gradient(900px 420px at 15% 92%, rgba(138,77,255,.04), transparent 60%),
    radial-gradient(900px 420px at 85% 88%, rgba(110,168,255,.04), transparent 60%),
    rgba(255,255,255,.9) !important;
  box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 8px 18px rgba(17,24,39,.06) !important;
}


/* === INTERACTIVE ENTRY GLOWS ========================================== */
#vc-iglows{ position:fixed; inset:0; z-index:0; pointer-events:none; contain:strict; }
:root[data-theme="dark"] #vc-iglows{ mix-blend-mode:screen; }
:root[data-theme="light"] #vc-iglows{ mix-blend-mode:normal; }
#vc-iglows .g{
  position:absolute; width:clamp(280px,24vw,520px); height:clamp(280px,24vw,520px);
  border-radius:50%; opacity:.22; filter:blur(36px); transform:translate3d(0,0,0);
  background: radial-gradient(50% 50% at 50% 50%, currentColor 0%, rgba(0,0,0,0) 60%);
  transition: opacity .25s ease;
}
#vc-iglows .o{ color:rgba(255,122,0,.9); } 
#vc-iglows .m{ color:rgba(255,77,141,.85); }
#vc-iglows .v{ color:rgba(138,77,255,.85); }
#vc-iglows .b{ color:rgba(110,168,255,.85); }
body.pointer-active #vc-iglows .g{ opacity:.30; }
@media (prefers-reduced-motion: reduce){ #vc-iglows .g{ transition:none !important; filter:blur(28px); } }


/* === LIGHT MODE HEADER & TEXT COLORS (pro, readable) ================== */
:root[data-theme="light"] header,
:root[data-theme="light"] .vc-header,
:root[data-theme="light"] .vc-nav{
  background:#FFFFFF !important;
  color:#0B0C10 !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 4px 14px rgba(16,24,40,.06) !important;
}

/* Nav links & logo zone */
:root[data-theme="light"] header a,
:root[data-theme="light"] nav a,
:root[data-theme="light"] .nav a,
:root[data-theme="light"] .nav-link{
  color:#0B0C10 !important;
}

/* Titles / body text already set, but enforce for edge cases */
:root[data-theme="light"] h1, 
:root[data-theme="light"] h2, 
:root[data-theme="light"] h3, 
:root[data-theme="light"] h4{ color:#0B0C10 !important; text-shadow:none !important; }
:root[data-theme="light"] body,
:root[data-theme="light"] p,
:root[data-theme="light"] li{ color:#1E212A !important; }

/* CTA/gradient buttons keep white label in light mode */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .button,
:root[data-theme="light"] .cta,
:root[data-theme="light"] .vc-btn{
  color:#FFFFFF !important;
}


/* === LIGHT MODE: NAV WHITE + CARD TEXT DARK =========================== */
/* Header/Nav white with separation & subtle elevation */
:root[data-theme="light"] header,
:root[data-theme="light"] .vc-header,
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .vc-nav{
  background:#FFFFFF !important;
  color:#0B0C10 !important;
  border-bottom:1px solid #EEF1F6 !important;
  box-shadow: 0 6px 20px rgba(16,24,40,.07) !important;
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
}
:root[data-theme="light"] header a,
:root[data-theme="light"] .vc-header a,
:root[data-theme="light"] nav a,
:root[data-theme="light"] .nav a,
:root[data-theme="light"] .nav-link{
  color:#0B0C10 !important;
}

/* Blocks/cards: force readable text in light mode */
:root[data-theme="light"] .vc-card,
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .pricing-card,
:root[data-theme="light"] .formula-card,
:root[data-theme="light"] .realisation-card,
:root[data-theme="light"] #services-container .relative.h-full{
  background:#FFFFFF !important;
  color:#1E212A !important;
  border:1px solid #E6E8EE !important;
}

/* Titles inside cards */
:root[data-theme="light"] .vc-card h1,
:root[data-theme="light"] .vc-card h2,
:root[data-theme="light"] .vc-card h3,
:root[data-theme="light"] .vc-card h4,
:root[data-theme="light"] .realisation-card h1,
:root[data-theme="light"] .realisation-card h2,
:root[data-theme="light"] .realisation-card h3,
:root[data-theme="light"] #services-container .relative.h-full h3{
  color:#0B0C10 !important;
  text-shadow:none !important;
}

/* Body text/lists inside cards */
:root[data-theme="light"] .vc-card p,
:root[data-theme="light"] .vc-card li,
:root[data-theme="light"] .vc-card .desc,
:root[data-theme="light"] .realisation-card p,
:root[data-theme="light"] .realisation-card li,
:root[data-theme="light"] #services-container .relative.h-full p,
:root[data-theme="light"] #services-container .relative.h-full li{
  color:#2B2F3A !important;
}

/* If some utility classes forced white text, override them in light mode */
:root[data-theme="light"] .vc-card .text-white,
:root[data-theme="light"] .realisation-card .text-white,
:root[data-theme="light"] #services-container .relative.h-full .text-white{
  color:#1E212A !important;
  fill:#1E212A !important;
}

/* CTA buttons keep white label in light mode */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .button,
:root[data-theme="light"] .cta,
:root[data-theme="light"] .vc-btn,
:root[data-theme="light"] button.btn{
  color:#FFFFFF !important;
}


/* === LIGHT MODE: FORCE LIST/FEATURE TEXT TO DARK ====================== */
:root[data-theme="light"] .vc-card ul li,
:root[data-theme="light"] .vc-card .features li,
:root[data-theme="light"] .service-card ul li,
:root[data-theme="light"] .pricing-card ul li,
:root[data-theme="light"] .formula-card ul li,
:root[data-theme="light"] .realisation-card ul li,
:root[data-theme="light"] section .features li,
:root[data-theme="light"] .vc-card .feature,
:root[data-theme="light"] .realisation-card .feature{
  color: #1E212A !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* If a span inside the li carried text-white or low opacity, fix it */
:root[data-theme="light"] .vc-card ul li span,
:root[data-theme="light"] .realisation-card ul li span,
:root[data-theme="light"] .vc-card ul li strong,
:root[data-theme="light"] .realisation-card ul li strong{
  color: #1E212A !important;
  opacity: 1 !important;
}

/* Keep the bullet/dot/icon brand-colored but not the text */
:root[data-theme="light"] .vc-card ul li .dot,
:root[data-theme="light"] .features li .dot{ opacity: 1 !important; }


/* =========================================================
   LIGHT THEME — READABILITY PASS (scoped, dark untouched)
   ======================================================= */
:root[data-theme="light"]{
  --ink:#0B0C10;        /* headings */
  --text:#1E212A;       /* body text */
  --muted:#4E5565;      /* secondary */
  --border:#E7EAF0;     /* card borders */
  --chrome:#FFFFFF;     /* header chrome */
}

/* Header: white with subtle shadow */
:root[data-theme="light"] header,
:root[data-theme="light"] .vc-header,
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .vc-nav{
  background:var(--chrome) !important;
  color:var(--ink) !important;
  border-bottom:1px solid rgba(16,24,40,.06) !important;
  box-shadow:0 8px 22px rgba(16,24,40,.05) !important;
  backdrop-filter:saturate(120%) blur(4px);
  -webkit-backdrop-filter:saturate(120%) blur(4px);
}
:root[data-theme="light"] header a,
:root[data-theme="light"] nav a,
:root[data-theme="light"] .nav-link{ color:var(--ink) !important; }

/* Cards: keep white background, strong contrast text */
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .realisation-card,
:root[data-theme="light"] .vc-card,
:root[data-theme="light"] .pricing-card,
:root[data-theme="light"] .formula-card{
  background:#FFF !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  text-shadow:none !important;
  border-radius:20px !important;
  overflow:hidden;
}
:root[data-theme="light"] .service-card h1,
:root[data-theme="light"] .service-card h2,
:root[data-theme="light"] .service-card h3,
:root[data-theme="light"] .service-card h4,
:root[data-theme="light"] .realisation-card h1,
:root[data-theme="light"] .realisation-card h2,
:root[data-theme="light"] .realisation-card h3{
  color:var(--ink) !important;
}

/* Descriptive small text under headings */
:root[data-theme="light"] .service-card .desc,
:root[data-theme="light"] .service-card p,
:root[data-theme="light"] .realisation-card .desc,
:root[data-theme="light"] .realisation-card p{
  color:var(--text) !important;
  opacity:1 !important;
  text-shadow:none !important;
}

/* Service features (bulleted lists) */
:root[data-theme="light"] .service-card ul li,
:root[data-theme="light"] .service-card ul li *,
:root[data-theme="light"] .service-card .features li,
:root[data-theme="light"] .service-card .features li *{
  color:#111 !important;
  opacity:1 !important;
  -webkit-text-fill-color:#111 !important;
  text-shadow:none !important;
  mix-blend-mode:normal !important;
}
:root[data-theme="light"] .service-card [class*="text-white"],
:root[data-theme="light"] .service-card [class*="text-gray-"],
:root[data-theme="light"] .service-card [class*="opacity-"]{
  color:#111 !important; opacity:1 !important;
}

/* Realisations features (bulleted lists) */
:root[data-theme="light"] .realisation-card ul li,
:root[data-theme="light"] .realisation-card ul li *{
  color:#111 !important;
  opacity:1 !important;
  -webkit-text-fill-color:#111 !important;
  text-shadow:none !important;
  mix-blend-mode:normal !important;
}
:root[data-theme="light"] .realisation-card [class*="text-white"],
:root[data-theme="light"] .realisation-card [class*="text-gray-"],
:root[data-theme="light"] .realisation-card [class*="opacity-"]{
  color:#111 !important; opacity:1 !important;
}

/* Pricing (formules) bullet lists */
:root[data-theme="light"] .pricing-card ul li,
:root[data-theme="light"] .pricing-card ul li *{
  color:#111 !important;
  opacity:1 !important;
  text-shadow:none !important;
}

/* Application page feature list */
:root[data-theme="light"] .app-features li,
:root[data-theme="light"] .app-features li *{ color:#111 !important; opacity:1 !important; }
:root[data-theme="light"] .app-features .desc{ color:#1E212A !important; opacity:1 !important; }

/* Keep CTA labels white on gradients */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .button,
:root[data-theme="light"] .cta,
:root[data-theme="light"] .vc-btn{ color:#FFF !important; }

/* Safety: kill blend-modes that make text vanish in light, only inside cards */
:root[data-theme="light"] .service-card [style*="mix-blend-mode"],
:root[data-theme="light"] .realisation-card [style*="mix-blend-mode"],
:root[data-theme="light"] .pricing-card [style*="mix-blend-mode"]{
  mix-blend-mode:normal !important;
}


/* ===== LIGHT MODE — HARD OVERRIDE for card text readability ===== */
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .realisation-card,
:root[data-theme="light"] .pricing-card,
:root[data-theme="light"] .formula-card,
:root[data-theme="light"] .app-features{
  color:#111 !important;
}
:root[data-theme="light"] .service-card *, 
:root[data-theme="light"] .service-card *::before, 
:root[data-theme="light"] .service-card *::after,
:root[data-theme="light"] .realisation-card *, 
:root[data-theme="light"] .realisation-card *::before, 
:root[data-theme="light"] .realisation-card *::after,
:root[data-theme="light"] .pricing-card *, 
:root[data-theme="light"] .pricing-card *::before, 
:root[data-theme="light"] .pricing-card *::after,
:root[data-theme="light"] .formula-card *, 
:root[data-theme="light"] .formula-card *::before, 
:root[data-theme="light"] .formula-card *::after,
:root[data-theme="light"] .app-features *, 
:root[data-theme="light"] .app-features *::before, 
:root[data-theme="light"] .app-features *::after{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  text-shadow:none !important;
}
/* Neutralise tailwind-ish utilities that force white/low opacity */
:root[data-theme="light"] .service-card [class^="text-white"],
:root[data-theme="light"] .service-card [class*=" text-white"],
:root[data-theme="light"] .service-card [class*="text-white/"],
:root[data-theme="light"] .service-card [class^="text-gray-"],
:root[data-theme="light"] .service-card [class*="opacity-"],
:root[data-theme="light"] .realisation-card [class^="text-white"],
:root[data-theme="light"] .realisation-card [class*=" text-white"],
:root[data-theme="light"] .realisation-card [class*="text-white/"],
:root[data-theme="light"] .realisation-card [class^="text-gray-"],
:root[data-theme="light"] .realisation-card [class*="opacity-"],
:root[data-theme="light"] .pricing-card [class^="text-white"],
:root[data-theme="light"] .pricing-card [class*=" text-white"],
:root[data-theme="light"] .pricing-card [class*="text-white/"],
:root[data-theme="light"] .pricing-card [class^="text-gray-"],
:root[data-theme="light"] .pricing-card [class*="opacity-"]{
  color:#111 !important; opacity:1 !important; -webkit-text-fill-color:#111 !important;
}
/* SVG icons follow text color */
:root[data-theme="light"] .service-card svg,
:root[data-theme="light"] .realisation-card svg,
:root[data-theme="light"] .pricing-card svg{ color:#111 !important; fill:currentColor !important; stroke:currentColor !important; }
/* Keep CTA labels white */
:root[data-theme="light"] .service-card .btn, 
:root[data-theme="light"] .service-card .button, 
:root[data-theme="light"] .service-card .vc-btn,
:root[data-theme="light"] .realisation-card .btn, 
:root[data-theme="light"] .realisation-card .button, 
:root[data-theme="light"] .realisation-card .vc-btn,
:root[data-theme="light"] .pricing-card .btn,
:root[data-theme="light"] .pricing-card .button,
:root[data-theme="light"] .pricing-card .vc-btn{ color:#fff !important; }



/* === VC LIGHT MODE CONSOLIDATED PATCH (v9) ==============================
   - Header/Nav white in LIGHT (incl. sticky variants)
   - Text dark everywhere in LIGHT except: Contact, Smart Search, CTA blocks
   - CTA buttons keep white text
==========================================================================*/

:root[data-theme="light"], html[data-theme="light"], body[data-theme="light"]{
  --ink:#0B0C10; --text:#1E212A; --muted:#4E5565; --border:#E7EAF0; --chrome:#FFFFFF;
}

/* Header/Nav default white */
:root[data-theme="light"] :where(header,.vc-header,.vc-nav){
  background:#FFFFFF !important;
  background-image:none !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 4px 14px rgba(16,24,40,.06) !important;
  color:#0B0C10 !important;
  mix-blend-mode:normal !important; filter:none !important;
}
:root[data-theme="light"] :where(header,.vc-header)::before,
:root[data-theme="light"] :where(header,.vc-header)::after{ content:none !important; background:transparent !important; opacity:0 !important; }
:root[data-theme="light"] :where(header a,.vc-header a,.vc-nav a){ color:#0B0C10 !important; text-shadow:none !important; }

/* Sticky variants also white */
:root[data-theme="light"] :where(header.nav-sticky, header.is-sticky, header.sticky, header.scrolled, header.fixed,
                                 .vc-header.nav-sticky, .vc-header.is-sticky, .vc-header.sticky, .vc-header.scrolled, .vc-header.fixed,
                                 .vc-nav.nav-sticky, .vc-nav.is-sticky, .vc-nav.sticky, .vc-nav.scrolled, .vc-nav.fixed){
  background:#FFFFFF !important; background-image:none !important; color:#0B0C10 !important;
  border-bottom:1px solid var(--border) !important; box-shadow:0 6px 16px rgba(16,24,40,.08) !important;
}
:root[data-theme="light"] :where(header.nav-sticky a, header.is-sticky a, header.sticky a, header.scrolled a, header.fixed a,
                                 .vc-header.nav-sticky a, .vc-header.is-sticky a, .vc-header.sticky a, .vc-header.scrolled a, .vc-header.fixed a,
                                 .vc-nav.nav-sticky a, .vc-nav.is-sticky a, .vc-nav.sticky a, .vc-nav.scrolled a, .vc-nav.fixed a){
  color:#0B0C10 !important; text-shadow:none !important;
}
:root[data-theme="light"] :where(header.nav-sticky, header.is-sticky, header.sticky, header.scrolled, header.fixed,
                                 .vc-header.nav-sticky, .vc-header.is-sticky, .vc-header.sticky, .vc-header.scrolled, .vc-header.fixed)::before,
:root[data-theme="light"] :where(header.nav-sticky, header.is-sticky, header.sticky, header.scrolled, header.fixed,
                                 .vc-header.nav-sticky, .vc-header.is-sticky, .vc-header.sticky, .vc-header.scrolled, .vc-header.fixed)::after{
  content:none !important; background:transparent !important; opacity:0 !important; box-shadow:none !important;
}

/* Global readable text in LIGHT */
:root[data-theme="light"] :where(h1,h2,h3){ color:var(--ink) !important; text-shadow:none !important; }
:root[data-theme="light"] :where(h4,h5,h6,p,li,span,small,blockquote,figcaption,dd,dt,a){ color:var(--text) !important; }
:root[data-theme="light"] :where(a.btn,.btn,.button,.vc-btn,button){ color:#FFFFFF !important; } /* keep CTAs */

/* CONTACT page white text */
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section)
  :where(.contact-panel,.contact-card,.contact-info,.contact-form,.contact-dark,.card-dark,.panel-dark, .vc-dark){
  color:#F5F7FA !important;
}
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section)
  :where(h1,h2,h3,h4,h5,h6,p,li,small,span,div,strong,a){ color:#F5F7FA !important; opacity:1 !important; text-shadow:none !important; }
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section)
  :where(input,textarea,select){ background:#0F1116 !important; color:#F5F7FA !important; border-color:rgba(255,255,255,.18) !important; }
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section)
  :where(input::placeholder,textarea::placeholder){ color:rgba(255,255,255,.55) !important; }

/* Smart search white text */
:root[data-theme="light"] :where(#metier-search,.vc-search) :where(input,.search-input){ color:#F5F7FA !important; }
:root[data-theme="light"] :where(#metier-search,.vc-search) .results{ background:#151820 !important; border-color:rgba(255,255,255,.12) !important; }
:root[data-theme="light"] :where(#metier-search,.vc-search) .results, 
:root[data-theme="light"] :where(#metier-search,.vc-search) .results *{ color:#F5F7FA !important; }
:root[data-theme="light"] :where(#metier-search,.vc-search) input::placeholder{ color:rgba(255,255,255,.55) !important; }

/* CTA sections white text */
:root[data-theme="light"] :where(.cta-projet,.cta-transformer,.cta-section){ color:#F5F7FA !important; }
:root[data-theme="light"] :where(.cta-projet,.cta-transformer,.cta-section) :where(h1,h2,h3,p,span,small,li,a){ color:#F5F7FA !important; }



/* === GEN LIGHT: NAVBAR WHITE + TRANSLUCENT IN LIGHT MODE ================= */
:root[data-theme="light"] .nav-sticky,
:root[data-theme="light"] nav.nav-sticky,
:root[data-theme="light"] header.nav-sticky{
  background: rgba(255,255,255,.90) !important;
  color: #0B0C10 !important;
  border-bottom: 1px solid rgba(10,10,11,.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 6px 20px rgba(16,24,40,.07) !important;
}
:root[data-theme="light"] .nav-sticky .nav-link{ color:#0E0F14 !important; }
:root[data-theme="light"] .nav-sticky .nav-link:hover{ background: rgba(0,0,0,.04) !important; color:#0B0C10 !important; }
:root[data-theme="light"] .nav-sticky .nav-link.active{ color: var(--orange) !important; background: rgba(255,122,0,.10) !important; }


/* === GEN LIGHT: SERVICE CARDS RADIUS MATCH DARK MODE ==================== */
:root[data-theme="light"] #services-container .relative.h-full,
:root[data-theme="light"] .service-card,
:root[data-theme="light"] .vc-card,
:root[data-theme="light"] .pricing-card,
:root[data-theme="light"] .formula-card,
:root[data-theme="light"] .realisation-card{
  border-radius: 16px !important;
  overflow: hidden;
}


/* === GEN LIGHT: CONTACT PAGE — WHITE TEXT & LIGHTER TRANSPARENT CARDS === */
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section){
  color:#FFFFFF !important;
}
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section) :where(h1,h2,h3,h4,h5,h6,p,span,small,li,a,strong,em,label){
  color:#FFFFFF !important;
}
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section) :where(input,textarea,select){
  color:#FFFFFF !important;
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.06) !important;
}
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section) :where(input::placeholder,textarea::placeholder){
  color: rgba(255,255,255,.60) !important;
}
/* lighter / more transparent blocks */
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section) :where(.card-dark,.contact-card,.contact-block,.relative.card-dark){
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(10,10,11,.08) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(16,24,40,.08) !important;
}


/* === GEN LIGHT: FOOTER WHITE + TRANSLUCENT ============================= */
:root[data-theme="light"] .vc-footer{
  background: rgba(255,255,255,.90) !important;
  color: #0B0C10 !important;
  border-top: 1px solid rgba(10,10,11,.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 -6px 20px rgba(16,24,40,.07) !important;
}
:root[data-theme="light"] .vc-footer :where(h1,h2,h3,h4,h5,h6,p,span,small,li,a,strong,em){
  color:#0B0C10 !important;
}


/* === GEN LIGHT: CONTACT PAGE — DARK TEXT & ICONS ======================= */
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section){
  color:#0B0C10 !important;
}
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section) :where(h1,h2,h3,h4,h5,h6,p,span,small,li,a,strong,em,label){
  color:#0B0C10 !important;
}
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section) svg{
  color:#0B0C10 !important; fill:#0B0C10 !important; stroke:#0B0C10 !important;
}
/* Inputs remain readable on white */
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section) :where(input,textarea,select){
  color:#0B0C10 !important;
  border-color: rgba(0,0,0,.18) !important;
  background: rgba(255,255,255,.85) !important;
}
:root[data-theme="light"] :where(#contact,.page-contact,.contact,.contact-section) :where(input::placeholder,textarea::placeholder){
  color: rgba(0,0,0,.55) !important;
}


/* === GEN LIGHT: SMART SEARCH — DARK INPUT TEXT ========================= */
:root[data-theme="light"] :where(#metier-search,.vc-search) :where(input,.search-input){
  color:#0B0C10 !important;
  border-color: rgba(0,0,0,.18) !important;
  background: rgba(255,255,255,.85) !important;
}
:root[data-theme="light"] :where(#metier-search,.vc-search) input::placeholder{
  color: rgba(0,0,0,.55) !important;
}
:root[data-theme="light"] :where(#metier-search,.vc-search) .results, 
:root[data-theme="light"] :where(#metier-search,.vc-search) .results *{
  color:#0B0C10 !important;
}


/* === PATCH: CONTACT INFO LINES FORCE BLACK IN LIGHT MODE =============== */
:root[data-theme="light"] #contact :where(.text-white){ color:#0B0C10 !important; }
:root[data-theme="light"] #contact :where(svg.text-white){ color:#0B0C10 !important; fill:#0B0C10 !important; stroke:#0B0C10 !important; }


/* === PATCH: HOME SMART SEARCH PLACEHOLDER/TEXT BLACK =================== */
:root[data-theme="light"] #searchInput{
  color:#0B0C10 !important;
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(0,0,0,.18) !important;
}
:root[data-theme="light"] #searchInput::placeholder{ color: rgba(0,0,0,.55) !important; }
:root[data-theme="light"] .vc-search svg, 
:root[data-theme="light"] .vc-search .text-gray-400{ color: #0B0C10 !important; }


/* === LOGOS MARQUEE (infinite horizontal scroll) ======================== */
@keyframes vc-marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Wrapper should be overflow-hidden already in HTML */
#logos-scroll{
  display:flex; align-items:center; gap:3rem;
  width:max-content;
  animation: vc-marquee-left 22s linear infinite;
  will-change: transform;
}
/* Pause on hover for UX */
#logos-scroll:hover{ animation-play-state: paused; }


/* === LIGHT MODE: CTA blocks white with dark text ======================= */
:root[data-theme="light"] :where(.cta-projet,.cta-transformer){
  background: rgba(255,255,255,.92) !important;
  color:#0B0C10 !important;
  border: 1px solid rgba(10,10,11,.08) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 8px 24px rgba(16,24,40,.08) !important;
}
:root[data-theme="light"] :where(.cta-projet,.cta-transformer) :where(h1,h2,h3,h4,h5,h6,p,span,small,li,strong,em){
  color:#0B0C10 !important;
}
/* Keep the orange CTA button style intact and readable */
:root[data-theme="light"] :where(.cta-projet,.cta-transformer) :where(.btn,.button,.cta,.vc-btn){
  color:#FFFFFF !important;
}


/* === LIGHT MODE: CTA on Portfolio & Metier -> white ==================== */
:root[data-theme="light"] #portfolio .card-dark,
:root[data-theme="light"] #metier .card-dark,
:root[data-theme="light"] #metier-page .card-dark{
  background: rgba(255,255,255,.92) !important;
  color:#0B0C10 !important;
  border:1px solid rgba(10,10,11,.08) !important;
  border-radius:16px !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 8px 24px rgba(16,24,40,.08) !important;
}
:root[data-theme="light"] #portfolio .card-dark :where(h1,h2,h3,h4,h5,h6,p,span,small,li,strong,em),
:root[data-theme="light"] #metier .card-dark :where(h1,h2,h3,h4,h5,h6,p,span,small,li,strong,em){
  color:#0B0C10 !important;
}

/* === MODERN READABILITY PASS (keeps same DA) =========================== */
:root{
  --vc-radius-lg: 24px;
  --vc-radius-md: 16px;
  --vc-text-main: #F4F6FB;
  --vc-text-soft: #C2C8D6;
  --vc-surface: rgba(16, 18, 26, .68);
  --vc-surface-border: rgba(255, 255, 255, .14);
}

body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: 1.72;
  letter-spacing: .01em;
  color: var(--vc-text-main);
}

h1, h2, h3{
  letter-spacing: -.02em;
  line-height: 1.12;
}

p, li{
  color: var(--vc-text-soft);
}

.container{
  max-width: 1240px;
}

.nav-sticky{
  background: linear-gradient(180deg, rgba(9, 10, 15, .88), rgba(9, 10, 15, .64));
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}

.nav-link{
  font-weight: 600;
  letter-spacing: .01em;
  color: #B8C0D2;
}

.nav-link:hover{
  color: #FFFFFF;
  background: rgba(255, 255, 255, .08);
}

.card-dark{
  border-radius: var(--vc-radius-lg);
  background: linear-gradient(180deg, rgba(23, 26, 36, .82), rgba(14, 16, 24, .82));
  border: 1px solid var(--vc-surface-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .30);
}

.card-dark:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .36);
}

#services-container > .relative .relative.h-full,
#realisations-container > .relative .relative.h-full{
  border-radius: var(--vc-radius-lg) !important;
  background: linear-gradient(180deg, rgba(20, 23, 32, .74), rgba(12, 14, 21, .70));
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

#services-container > .relative .relative.h-full:hover,
#realisations-container > .relative .relative.h-full:hover{
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .36);
}

#services-container h3,
#realisations-container h3{
  font-size: clamp(1.2rem, 1.2vw + .95rem, 1.62rem);
  line-height: 1.24;
}

#services-container p,
#realisations-container p,
#services-container li span,
#realisations-container li span{
  color: #D0D6E3 !important;
}

.btn-primary,
.btn-secondary{
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.btn-primary:hover,
.btn-secondary:hover{
  transform: translateY(-3px);
}

@media (max-width: 1024px){
  .container{ max-width: 100%; }
  .nav-link{ padding: 10px 14px; }
}

@media (max-width: 768px){
  body{ line-height: 1.62; }
  h1{ font-size: clamp(2rem, 8vw, 2.8rem); }
  h2{ font-size: clamp(1.6rem, 6.2vw, 2.2rem); }
  h3{ font-size: clamp(1.2rem, 4.8vw, 1.5rem); }
  .card-dark{ padding: 22px; border-radius: 18px; }
  #services-container > .relative .relative.h-full,
  #realisations-container > .relative .relative.h-full{
    border-radius: 18px !important;
    padding: 1.4rem !important;
  }
}

/* === FINAL POLISH: SOCIAL ICONS + LIGHT MODE MODERN ==================== */
.vc-footer .soc{
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  position: relative;
  overflow: hidden;
}

.vc-footer .soc::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(130deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%);
  opacity:.7;
  transition: opacity .25s ease;
}

.vc-footer .soc:hover{
  transform: translateY(-3px) scale(1.03) !important;
}

.vc-footer .soc:hover::before{
  opacity: 1;
}

.vc-footer .soc svg{
  width: 21px !important;
  height: 21px !important;
  position: relative;
  z-index: 1;
}

.vc-footer .soc.fb{ color:#8fc2ff; }
.vc-footer .soc.tt{ color:#9ff6ff; }
.vc-footer .soc.li{ color:#8ec7ff; }
.vc-footer .soc.ig{ color:#ffc29b; }

.vc-footer .soc.fb path,
.vc-footer .soc.tt path,
.vc-footer .soc.ig path{
  stroke: currentColor !important;
  fill: none !important;
}

.vc-footer .soc.li path{
  fill: currentColor !important;
  stroke: none !important;
}

:root[data-theme="light"] body{
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(255,122,0,.16), transparent 62%),
    radial-gradient(900px 520px at 92% -12%, rgba(142,45,226,.12), transparent 62%),
    linear-gradient(180deg, #fbfcff 0%, #f4f7ff 100%) !important;
  color: #1A2233 !important;
}

:root[data-theme="light"] .nav-sticky{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)) !important;
  border: 1px solid rgba(22,31,53,.10) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(23,34,58,.10) !important;
}

:root[data-theme="light"] .nav-sticky .nav-link{
  color:#1B2436 !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] .nav-sticky .nav-link:hover{
  background: rgba(27,36,54,.06) !important;
  color:#0f1727 !important;
}

:root[data-theme="light"] #services-container > .relative .relative.h-full,
:root[data-theme="light"] #realisations-container > .relative .relative.h-full,
:root[data-theme="light"] .card-dark{
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,255,.80)) !important;
  border: 1px solid rgba(27,36,54,.10) !important;
  box-shadow: 0 12px 32px rgba(23,34,58,.10) !important;
}

:root[data-theme="light"] #services-container h3,
:root[data-theme="light"] #realisations-container h3,
:root[data-theme="light"] .card-dark h1,
:root[data-theme="light"] .card-dark h2,
:root[data-theme="light"] .card-dark h3{
  color:#111a2b !important;
}

:root[data-theme="light"] #services-container p,
:root[data-theme="light"] #realisations-container p,
:root[data-theme="light"] #services-container li span,
:root[data-theme="light"] #realisations-container li span,
:root[data-theme="light"] .card-dark p,
:root[data-theme="light"] .card-dark li{
  color:#344157 !important;
}

:root[data-theme="light"] .vc-footer{
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(246,249,255,.86)) !important;
  border-top: 1px solid rgba(27,36,54,.10) !important;
  box-shadow: 0 -8px 24px rgba(23,34,58,.08) !important;
}

:root[data-theme="light"] .vc-footer .soc{
  border: 1px solid rgba(27,36,54,.14) !important;
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(239,244,255,.88)) !important;
  box-shadow: 0 8px 20px rgba(23,34,58,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* === OVERRIDE: SIMPLE SOCIAL ICONS IN VC DA ============================ */
.vc-footer .soc{
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.vc-footer .soc::before{
  content: none !important;
}

.vc-footer .soc svg{
  width: 20px !important;
  height: 20px !important;
}

.vc-footer .soc.fb{ color: var(--orange) !important; }
.vc-footer .soc.tt{ color: var(--magenta) !important; }
.vc-footer .soc.ig{ color: var(--violet) !important; }
.vc-footer .soc.li{ color: var(--blue) !important; }

.vc-footer .soc path{
  stroke: currentColor !important;
}

.vc-footer .soc.li path{
  fill: currentColor !important;
  stroke: none !important;
}

.vc-footer .soc:hover{
  border-color: currentColor !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 0 0 1px currentColor !important;
  transform: translateY(-1px) !important;
}

:root[data-theme="light"] .vc-footer .soc{
  border-color: rgba(27,36,54,.22) !important;
  background: transparent !important;
}

/* === OVERRIDE: METIER PAGE READABILITY + CONVERSION ==================== */
#metier-page .text-2xl.text-gray-300{
  color: #CDD5E4 !important;
  max-width: 900px;
}

#metier-page .text-4xl.font-black{
  letter-spacing: -.02em;
}

#metier-page .list-none > span{
  border: 1px solid rgba(255,255,255,.22);
  line-height: 1.45;
}

#metier-page button[class*="CHOISIR"],
#metier-page .mt-auto button{
  letter-spacing: .02em;
}

:root[data-theme="light"] #metier-page{
  color: #1C2538 !important;
}

:root[data-theme="light"] #metier-page .text-2xl.text-gray-300{
  color: #2D3A52 !important;
}

:root[data-theme="light"] #metier-page .relative.h-full.bg-transparent.backdrop-blur-xl{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,255,.86)) !important;
  border: 1px solid rgba(27,36,54,.11) !important;
  box-shadow: 0 14px 34px rgba(23,34,58,.10) !important;
}

:root[data-theme="light"] #metier-page .relative.group.h-full > .absolute.inset-0.rounded-3xl{
  opacity: .08 !important;
  filter: blur(10px) !important;
}

:root[data-theme="light"] #metier-page h3,
:root[data-theme="light"] #metier-page h4{
  color: #101a2d !important;
  -webkit-text-fill-color: #101a2d !important;
  background: none !important;
}

:root[data-theme="light"] #metier-page .text-gray-200,
:root[data-theme="light"] #metier-page .text-gray-300,
:root[data-theme="light"] #metier-page .text-gray-400{
  color: #34435e !important;
}

:root[data-theme="light"] #metier-page ul.space-y-4 li span{
  color: #2e3b55 !important;
}

:root[data-theme="light"] #metier-page .list-none > span{
  color: #13203a !important;
  border-color: rgba(27,36,54,.18) !important;
}

:root[data-theme="light"] #metier-content-examples .relative.h-full,
:root[data-theme="light"] #metier-complementary-services .relative.h-full,
:root[data-theme="light"] #metier-services-wrap .relative.h-full{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,255,.86)) !important;
  border: 1px solid rgba(27,36,54,.11) !important;
  box-shadow: 0 12px 28px rgba(23,34,58,.09) !important;
}

:root[data-theme="light"] #metier-page :where(#metier-complementary-services,#metier-services-wrap) .relative.h-full.bg-transparent.backdrop-blur-xl{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.90)) !important;
  border-color: rgba(24,36,58,.14) !important;
  box-shadow: 0 14px 28px rgba(23,34,58,.10), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

:root[data-theme="light"] #metier-page :where(#metier-complementary-services,#metier-services-wrap) .text-gray-300,
:root[data-theme="light"] #metier-page :where(#metier-complementary-services,#metier-services-wrap) .text-gray-200{
  color:#31415F !important;
}

/* === LEGAL LINKS + COOKIE BANNER ======================================= */
.vc-legal-links{
  margin-left: auto;
  font-size: .82rem;
  color: rgba(255,255,255,.72);
}

.vc-legal-links a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}

.vc-legal-links a:hover{
  border-bottom-color: currentColor;
}

.vc-cookie-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
}

.vc-cookie-card{
  max-width: 960px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(11,13,18,.90);
  backdrop-filter: blur(10px);
  padding: 14px 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,.30);
}

.vc-cookie-title{
  color: #fff;
  font-weight: 700;
  margin: 0 0 6px;
}

.vc-cookie-text{
  margin: 0;
  color: #cfd6e4;
  font-size: .92rem;
}

.vc-cookie-actions{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.vc-cookie-btn{
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}

.vc-cookie-btn.vc-cookie-accept{
  border-color: rgba(255,122,0,.9);
  background: rgba(255,122,0,.2);
}

.vc-cookie-link{
  color: #cfd6e4;
  text-decoration: underline;
  text-underline-offset: 2px;
}

:root[data-theme="light"] .vc-legal-links{
  color: rgba(20,28,44,.78);
}

:root[data-theme="light"] .vc-cookie-card{
  border: 1px solid rgba(27,36,54,.14);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 26px rgba(23,34,58,.12);
}

:root[data-theme="light"] .vc-cookie-title{ color: #111a2b; }
:root[data-theme="light"] .vc-cookie-text{ color: #33425e; }
:root[data-theme="light"] .vc-cookie-btn{
  color: #1b2640;
  border-color: rgba(27,36,54,.22);
  background: rgba(27,36,54,.04);
}
:root[data-theme="light"] .vc-cookie-btn.vc-cookie-accept{
  color: #fff;
  background: #FF7A00;
  border-color: #FF7A00;
}
:root[data-theme="light"] .vc-cookie-link{ color: #24324e; }

/* === GLOBAL SCALE TUNING (reduce "zoom" feeling) ======================= */
html{
  font-size: 15.5px;
}

.text-6xl{ font-size: clamp(2.25rem, 3.6vw, 3.15rem) !important; }
.text-5xl{ font-size: clamp(2rem, 3.1vw, 2.75rem) !important; }
.text-4xl{ font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important; }
.text-3xl{ font-size: clamp(1.35rem, 2vw, 1.85rem) !important; }

.group:hover .group-hover\:scale-105{
  transform: scale(1.015) !important;
}

.group:hover .group-hover\:-translate-y-2{
  transform: translateY(-4px) !important;
}

@media (max-width: 768px){
  html{ font-size: 15px; }
  .text-6xl{ font-size: clamp(1.95rem, 8vw, 2.45rem) !important; }
  .text-5xl{ font-size: clamp(1.8rem, 7vw, 2.2rem) !important; }
}

/* === JOURNEY/UI ALIGNMENT POLISH ======================================= */
#mainNavActions{
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#accueil .card-dark{
  border-radius: 20px;
  padding: 22px;
}

#services .card-dark{
  border-radius: 20px;
  min-height: 220px;
}

#services .card-dark h3{
  line-height: 1.22;
}

#services .card-dark p{
  line-height: 1.58;
}

@media (max-width: 1024px){
  #mainNavActions{ gap: .35rem !important; }
  #services .card-dark{ min-height: 0; }
}

/* === HOME LOGO 3D ======================================================= */
#logo3d-home-wrap{
  perspective: 1000px;
}

#logo3d-home{
  width: min(640px, 85vw);
  transition: transform .18s ease-out, filter .2s ease-out;
  transform-style: preserve-3d;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.32));
}

#logo3d-home img{
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* === SERVICES DROPDOWN ================================================== */
.services-dropdown{
  position: relative;
  z-index: 120;
}

.services-toggle{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.services-caret{
  font-size: .78rem;
  transition: transform .2s ease;
}

.services-dropdown.open .services-caret{
  transform: rotate(180deg);
}

.services-menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 286px;
  background: rgba(12,14,20,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: all .2s ease;
  z-index: 140;
}

.services-dropdown.open .services-menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.services-item{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #D7DEEB;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
}

.services-item:hover{
  color: #fff;
  background: rgba(255,255,255,.08);
}

:root[data-theme="light"] .services-menu{
  background: rgba(255,255,255,.96);
  border-color: rgba(20,30,48,.12);
  box-shadow: 0 12px 24px rgba(16,24,40,.12);
}

:root[data-theme="light"] .services-item{
  color: #1B2436;
}

:root[data-theme="light"] .services-item:hover{
  color: #0d1527;
  background: rgba(27,36,54,.08);
}

/* === METIER FORMULAS: NO PRICE + CLEAN ALIGNMENT ======================= */
#metier-page .text-4xl.font-black,
#metier-page .text-sm.text-gray-400{
  display: none !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full{
  display: flex;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full > .relative.h-full.bg-transparent.backdrop-blur-xl{
  width: 100%;
  display: flex;
  flex-direction: column;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10{
  flex: 1;
}

/* === FORMULAS SCALE (metier + gestion reseaux) ========================== */
#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full > .relative.h-full.bg-transparent.backdrop-blur-xl,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full > .relative.h-full.bg-transparent.backdrop-blur-xl{
  padding: 1.55rem !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .w-20.h-20,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .w-20.h-20{
  width: 4rem !important;
  height: 4rem !important;
  margin-bottom: .95rem !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .w-20.h-20 svg,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .w-20.h-20 svg{
  width: 1.55rem !important;
  height: 1.55rem !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-3xl.font-black,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-3xl.font-black{
  font-size: 1.62rem !important;
  line-height: 1.2 !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-base.leading-relaxed,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-base.leading-relaxed{
  font-size: .9rem !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .space-y-4,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .space-y-4{
  gap: .62rem !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .space-y-4 span.text-gray-200,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .space-y-4 span.text-gray-200{
  font-size: .82rem !important;
  line-height: 1.5 !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 button.relative.w-full,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 button.relative.w-full{
  padding: .92rem 1rem !important;
  font-size: .92rem !important;
}

/* === GLOBAL FOOTER LAYOUT (uniform on all pages) ======================= */
.vc-footer{
  position: relative !important;
  padding: 40px 0 22px !important;
  color: #EAEAF0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .55)) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(6px) !important;
  overflow: hidden;
  isolation: isolate;
}

.vcf-wrap{
  width: min(1200px, 92vw);
  margin: 0 auto 14px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.vcf-col{ min-width: 0; }
.vcf-tag{ color: #A7ADBA; margin-top: 6px; font-size: .95rem; }

.vcf-contact{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vcf-contact li{
  display: flex;
  gap: 10px;
  align-items: center;
  color: #EAEAF0;
}

.vcf-contact a{
  color: #EAEAF0;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}

.vcf-social{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.vcf-bottom{
  width: min(1200px, 92vw);
  margin: 10px auto 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #A7ADBA;
  font-size: .9rem;
}

@media (max-width: 920px){
  .vcf-wrap{ flex-direction: column; }
  .vcf-social{ justify-content: flex-start; }
  .vcf-bottom{ flex-direction: column; align-items: flex-start; }
}

/* Hard override: dropdown text must be black in light mode */
:root[data-theme="light"] .services-menu .services-item{
  color: #0B0C10 !important;
}

:root[data-theme="light"] .services-menu .services-item:hover{
  color: #0B0C10 !important;
  background: rgba(0,0,0,.06) !important;
}

/* === FOOTER ICONS CONSISTENCY (all pages) =============================== */
.vcf-social .soc{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
  border-radius: 12px !important;
}

.vcf-social .soc svg{
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: block !important;
}

.vcf-social .soc.fb path,
.vcf-social .soc.tt path,
.vcf-social .soc.ig path{
  stroke: currentColor !important;
  fill: none !important;
}

.vcf-social .soc.li path{
  fill: currentColor !important;
  stroke: none !important;
}

/* === LIGHT MODE: keep colored CTA labels white ========================== */
:root[data-theme="light"] #services-container button[style*="linear-gradient"],
:root[data-theme="light"] #realisations-container button[style*="linear-gradient"],
:root[data-theme="light"] #metier-page button[style*="linear-gradient"],
:root[data-theme="light"] #metier button[style*="linear-gradient"]{
  color:#FFFFFF !important;
}

:root[data-theme="light"] #services-container button[style*="linear-gradient"] *,
:root[data-theme="light"] #realisations-container button[style*="linear-gradient"] *,
:root[data-theme="light"] #metier-page button[style*="linear-gradient"] *,
:root[data-theme="light"] #metier button[style*="linear-gradient"] *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.24) !important;
}

:root[data-theme="light"] :where(#metier,#metier-page,#portfolio) .vc-btn,
:root[data-theme="light"] :where(#metier,#metier-page,#portfolio) .vc-btn *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* === NAVBAR REFINEMENT =================================================== */
.nav-sticky{
  position: sticky;
  top: 14px;
  isolation: isolate;
  overflow: visible;
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(135deg, rgba(10,14,24,.78), rgba(10,14,24,.56)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.20) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.nav-sticky::before,
.nav-sticky::after{
  content:none !important;
  display:none !important;
}

.nav-sticky .container{
  position: relative;
  z-index: 1;
}

.nav-sticky .nav-link{
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 650;
  letter-spacing: .01em;
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.nav-sticky .nav-link:hover{
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.18) !important;
  transform: translateY(-1px);
}

.nav-sticky .nav-link.active{
  color: #ff9d40 !important;
  background: rgba(255,122,0,.18) !important;
  border-color: rgba(255,122,0,.34) !important;
  box-shadow: 0 8px 18px rgba(255,122,0,.22);
}

:root[data-theme="light"] .nav-sticky{
  border-color: rgba(26,37,60,.14) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(247,250,255,.66)) !important;
  box-shadow: 0 16px 34px rgba(23,34,58,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

:root[data-theme="light"] .nav-sticky::before,
:root[data-theme="light"] .nav-sticky::after{
  content:none !important;
  display:none !important;
}

:root[data-theme="light"] .nav-sticky .nav-link{
  color: #182338 !important;
}

:root[data-theme="light"] .nav-sticky .nav-link:hover{
  color: #0f1829 !important;
  background: rgba(25,37,60,.08) !important;
  border-color: rgba(25,37,60,.14) !important;
}

:root[data-theme="light"] .nav-sticky .nav-link.active{
  color: #e17300 !important;
  background: rgba(255,122,0,.14) !important;
  border-color: rgba(255,122,0,.28) !important;
  box-shadow: 0 8px 18px rgba(255,122,0,.18);
}

@media (max-width: 768px){
  .nav-sticky{
    top: 10px;
    border-radius: 20px !important;
  }

  .nav-sticky .nav-link{
    padding: 10px 14px;
  }
}

/* === METIER: keep formula titles brand-colored in light mode ============ */
:root[data-theme="light"] #metier-page .grid.grid-cols-1.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full:nth-child(1) .text-center.mb-8 > h3{
  color:#1E63FF !important;
  -webkit-text-fill-color:#1E63FF !important;
  background:none !important;
}

:root[data-theme="light"] #metier-page .grid.grid-cols-1.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full:nth-child(2) .text-center.mb-8 > h3{
  color:#FF7A00 !important;
  -webkit-text-fill-color:#FF7A00 !important;
  background:none !important;
}

:root[data-theme="light"] #metier-page .grid.grid-cols-1.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full:nth-child(3) .text-center.mb-8 > h3{
  color:#8E2DE2 !important;
  -webkit-text-fill-color:#8E2DE2 !important;
  background:none !important;
}

/* === METIER EXAMPLES (4 cards) — definitive light mode fix ============== */
:root[data-theme="light"] :where(#metier-content-examples,#metier-examples-grid) .vc-ex-card{
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(24,36,58,.14) !important;
  box-shadow: 0 12px 24px rgba(22,34,56,.08) !important;
}

:root[data-theme="light"] :where(#metier-content-examples,#metier-examples-grid) .vc-ex-card::before{
  background: radial-gradient(140px 110px at -8% 100%, rgba(var(--vc-rgb,255,255,255),.16), transparent 70%) !important;
  opacity: 1 !important;
}

:root[data-theme="light"] :where(#metier-content-examples,#metier-examples-grid) .vc-ex-card::after{
  height:2px !important;
  background: linear-gradient(90deg, rgba(var(--vc-rgb,255,255,255),.72), rgba(var(--vc-rgb,255,255,255),.16) 54%, transparent) !important;
  opacity: .78 !important;
}

:root[data-theme="light"] :where(#metier-content-examples,#metier-examples-grid) .vc-ex-card .vc-ex-title{
  color:#13203A !important;
  -webkit-text-fill-color:#13203A !important;
}

:root[data-theme="light"] :where(#metier-content-examples,#metier-examples-grid) .vc-ex-card .vc-ex-desc{
  color:#2E3D59 !important;
  -webkit-text-fill-color:#2E3D59 !important;
}

:root[data-theme="light"] :where(#metier-content-examples,#metier-examples-grid) .vc-ex-card .vc-ex-axis{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border-color: rgba(var(--vc-rgb,255,255,255), .46) !important;
  background: linear-gradient(135deg, rgba(var(--vc-rgb,255,255,255), .85), rgba(var(--vc-rgb,255,255,255), .58)) !important;
  box-shadow: 0 6px 14px rgba(var(--vc-rgb,255,255,255), .22) !important;
}

:root[data-theme="light"] :where(#metier-content-examples,#metier-examples-grid) .vc-ex-card .vc-ex-icon{
  border-color: rgba(var(--vc-rgb,255,255,255), .44) !important;
  background: linear-gradient(180deg, rgba(var(--vc-rgb,255,255,255), .82), rgba(var(--vc-rgb,255,255,255), .52)) !important;
  box-shadow: 0 8px 16px rgba(var(--vc-rgb,255,255,255), .20) !important;
}

:root[data-theme="light"] :where(#metier-content-examples,#metier-examples-grid) .vc-ex-card .vc-ex-icon svg{
  stroke:#FFFFFF !important;
}

:root[data-theme="light"] :where(#metier-content-examples,#metier-examples-grid) .vc-ex-card .vc-shape-violet,
:root[data-theme="light"] :where(#metier-content-examples,#metier-examples-grid) .vc-ex-card .vc-shape-orange,
:root[data-theme="light"] :where(#metier-content-examples,#metier-examples-grid) .vc-ex-card .vc-shape-blue{
  opacity:.10 !important;
  box-shadow:none !important;
}

/* === PATCH FINAL: services, metier, gestion reseaux, footer ============ */
.vcf-brand{
  display: inline-block;
  font-weight: 900;
  letter-spacing: .3px;
  font-size: clamp(18px, 2.1vw, 22px);
  background: linear-gradient(90deg, #FF7A00 0%, #FF3D7F 35%, #8E2DE2 65%, #1E63FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

#services-container .svc-icon{
  color: #FFFFFF;
  stroke: currentColor;
  transition: color .22s ease, transform .22s ease;
}

:root[data-theme="light"] #services-container .svc-icon{
  color: var(--svc-color, #1E63FF) !important;
  stroke: currentColor !important;
}

:root[data-theme="light"] #services-container .w-16.h-16{
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 10px 18px rgba(23,34,58,.11) !important;
}

:root[data-theme="light"] #services-container .w-16.h-16 svg{
  width: 2rem !important;
  height: 2rem !important;
}

:root[data-theme="light"] #metier-page :where(#metier-content-examples,#metier-examples-grid,.gr-examples-grid) .vc-ex-card,
:root[data-theme="light"] #metier-page :where(#metier-services-wrap,#metier-complementary-services) .relative.h-full.bg-transparent,
:root[data-theme="light"] #metier-page :where(#metier-services-wrap,#metier-complementary-services) .relative.h-full.bg-transparent.backdrop-blur-xl{
  border-radius: 30px !important;
  overflow: hidden !important;
  isolation: isolate;
  background: #FFFFFF !important;
  background-clip: padding-box !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(circle at center, #fff 99%, transparent 100%);
}

:root[data-theme="light"] #metier-page :where(#metier-services-wrap,#metier-complementary-services) .relative.h-full.bg-transparent.backdrop-blur-xl{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:root[data-theme="light"] #metier-page :where(#metier-content-examples,#metier-examples-grid,.gr-examples-grid) .vc-ex-card::before,
:root[data-theme="light"] #metier-page :where(#metier-content-examples,#metier-examples-grid,.gr-examples-grid) .vc-ex-card::after{
  content: none !important;
  display: none !important;
}

:root[data-theme="light"] #metier-page :where(#metier-content-examples,#metier-examples-grid,.gr-examples-grid) .vc-ex-card .vc-ex-shape{
  display: none !important;
}

:root[data-theme="light"] #metier-page :where(#metier-content-examples,#metier-examples-grid,.gr-examples-grid) .vc-ex-card .vc-shape-violet{
  width: 96px;
  height: 24px;
  right: 16px;
  top: 10px;
  border-radius: 999px !important;
}

:root[data-theme="light"] #metier-page :where(#metier-content-examples,#metier-examples-grid,.gr-examples-grid) .vc-ex-card .vc-shape-orange{
  width: 78px;
  height: 78px;
  left: -20px;
  bottom: -18px;
  clip-path: none !important;
  border-radius: 999px !important;
  transform: rotate(-14deg);
}

:root[data-theme="light"] #metier-page :where(#metier-content-examples,#metier-examples-grid,.gr-examples-grid) .vc-ex-card .vc-shape-blue{
  width: 92px;
  height: 92px;
  right: -24px;
  bottom: -20px;
  clip-path: none !important;
  border-radius: 999px !important;
  transform: rotate(12deg);
}

#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .w-20.h-20{
  width: 4.85rem !important;
  height: 4.85rem !important;
  border-radius: 1.35rem !important;
}

#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .w-20.h-20 svg{
  width: 2.05rem !important;
  height: 2.05rem !important;
}

#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-3xl.font-black{
  font-size: 1.95rem !important;
  line-height: 1.08 !important;
}

#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-base.leading-relaxed{
  font-size: 1.02rem !important;
  line-height: 1.55 !important;
}

@media (max-width: 820px){
  #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .w-20.h-20{
    width: 4.3rem !important;
    height: 4.3rem !important;
  }

  #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-3xl.font-black{
    font-size: 1.78rem !important;
  }

  #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-base.leading-relaxed{
    font-size: .98rem !important;
  }
}

/* === MOBILE UX PASS (phone-first comfort) =============================== */
@media (max-width: 1024px){
  .nav-sticky{
    width: min(1180px, 94vw) !important;
    margin: 12px auto 16px !important;
  }
}

.vc-mobile-toggle,
.vc-mobile-menu{
  display: none;
}

.vc-mobile-menu[hidden]{
  display: none !important;
}

@media (max-width: 767px){
  :root{
    --vc-mobile-tap: 46px;
  }

  body.vc-menu-open{
    overflow: hidden;
  }

  .nav-sticky{
    top: 8px;
    border-radius: 18px !important;
  }

  .nav-sticky .container{
    padding: 0 12px !important;
  }

  .nav-sticky .flex.justify-between.items-center.py-6{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    gap: 10px;
  }

  #mainNavActions{
    display: none !important;
  }

  .flex_items-center{
    margin: 0 !important;
    height: auto !important;
    min-height: 52px;
    gap: 4px;
  }

  .flex_items-center img{
    height: 58px !important;
    margin: 0 !important;
  }

  .flex_items-center .nav-brand-word{
    margin-left: -8px !important;
    font-size: .98rem !important;
    letter-spacing: .1em !important;
  }

  .vc-mobile-toggle{
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .vc-mobile-toggle span{
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
  }

  .nav-sticky.is-mobile-open .vc-mobile-toggle span:nth-child(1){
    transform: translateY(6px) rotate(45deg);
  }

  .nav-sticky.is-mobile-open .vc-mobile-toggle span:nth-child(2){
    opacity: 0;
  }

  .nav-sticky.is-mobile-open .vc-mobile-toggle span:nth-child(3){
    transform: translateY(-6px) rotate(-45deg);
  }

  .vc-mobile-menu{
    display: block;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    overflow: hidden;
    pointer-events: none;
    border-top: 1px solid rgba(255,255,255,.12);
    transition: max-height .2s ease, opacity .2s ease, transform .2s ease, margin-top .2s ease, padding .2s ease;
  }

  .nav-sticky.is-mobile-open .vc-mobile-menu{
    max-height: 80vh;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin-top: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .vc-mobile-links{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .vc-mobile-link,
  .vc-mobile-sublink,
  .vc-mobile-theme{
    width: 100%;
    min-height: var(--vc-mobile-tap);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: #e9eefb;
    font-weight: 650;
    font-size: .95rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .vc-mobile-link.active{
    color: #ff9d40;
    border-color: rgba(255,122,0,.35);
    background: rgba(255,122,0,.14);
  }

  .vc-mobile-services{
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    overflow: hidden;
  }

  .vc-mobile-summary{
    list-style: none;
    cursor: pointer;
    border: 0;
    background: transparent;
  }

  .vc-mobile-summary::-webkit-details-marker{
    display: none;
  }

  .vc-mobile-services[open] .vc-mobile-summary{
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
  }

  .vc-mobile-submenu{
    display: grid;
    gap: 6px;
    padding: 8px;
  }

  .vc-mobile-sublink{
    font-size: .92rem;
    border-radius: 10px;
    background: rgba(255,255,255,.03);
  }

  .vc-mobile-theme{
    margin-top: 8px;
  }

  :root[data-theme="light"] .vc-mobile-toggle{
    color: #1b2436;
    border-color: rgba(27,36,54,.2);
    background: rgba(27,36,54,.05);
  }

  :root[data-theme="light"] .vc-mobile-menu{
    border-top-color: rgba(27,36,54,.12);
  }

  :root[data-theme="light"] .vc-mobile-link,
  :root[data-theme="light"] .vc-mobile-sublink,
  :root[data-theme="light"] .vc-mobile-theme,
  :root[data-theme="light"] .vc-mobile-services{
    color: #1b2436;
    border-color: rgba(27,36,54,.16);
    background: rgba(255,255,255,.82);
  }

  :root[data-theme="light"] .vc-mobile-link.active{
    color: #d96a00;
    border-color: rgba(255,122,0,.3);
    background: rgba(255,122,0,.12);
  }

  .btn-primary,
  .btn-secondary{
    min-height: var(--vc-mobile-tap);
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: .95rem !important;
    line-height: 1.2;
    text-align: center;
  }

  #accueil .home-cta-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #accueil .home-cta-row .btn-primary,
  #accueil .home-cta-row .btn-secondary{
    width: 100%;
  }

  #accueil .service-pillars-grid{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  #accueil .pillar-card{
    max-width: none !important;
    width: 100%;
  }

  #accueil .home-title{
    font-size: clamp(1.9rem, 10vw, 2.5rem) !important;
    line-height: 1.03;
  }

  #accueil .home-sub{
    font-size: .97rem !important;
    line-height: 1.6 !important;
  }

  #accueil .sector-search-input{
    padding: 16px 14px !important;
  }

  #accueil .sector-search-hint{
    font-size: .8rem !important;
    line-height: 1.45;
  }

  #homeSectorResults{
    max-height: 56vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .vcf-wrap,
  .vcf-bottom{
    width: min(1200px, 94vw);
  }

  .vcf-contact li{
    align-items: flex-start;
  }
}

@media (max-width: 420px){
  #accueil #logo3d-home{
    --home-logo-scale: .94 !important;
  }

  #accueil .sector-panel-inner,
  #accueil .service-pillars-inner{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* === NAV EXPERIENCE UPGRADE (desktop + tablet + mobile) ================ */
.nav-sticky .nav-link{
  position: relative;
  overflow: hidden;
}

.nav-sticky .nav-link::after{
  content: none !important;
  display: none !important;
}

.nav-sticky .nav-link:hover::after,
.nav-sticky .nav-link.active::after{
  transform: none;
}

@media (min-width: 768px) and (max-width: 1100px){
  .nav-sticky .flex.justify-between.items-center.py-6{
    gap: 12px;
    align-items: flex-start;
  }

  #mainNavActions{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px !important;
    max-width: calc(100vw - 230px);
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #mainNavActions::-webkit-scrollbar{
    display: none;
  }

  .nav-sticky .nav-link{
    white-space: nowrap;
    padding: 10px 13px !important;
    font-size: .88rem;
  }

  #vc-theme-toggle .hidden.lg\:inline{
    display: none !important;
  }
}

@media (max-width: 767px){
  .vc-mobile-kicker{
    margin: 0 0 8px;
    color: #9fb0d1;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .vc-mobile-quick{
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .vc-mobile-chip{
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #e8edf9;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
  }

  :root[data-theme="light"] .vc-mobile-kicker{
    color: #4c5f82;
  }

  :root[data-theme="light"] .vc-mobile-chip{
    color: #1b2436;
    border-color: rgba(27,36,54,.16);
    background: rgba(255,255,255,.82);
  }
}

/* === FORMULAS READABILITY + TABLET LAYOUT =============================== */
#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20{
  align-items: stretch;
  gap: 20px !important;
}

@media (max-width: 1200px){
  #metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full > .absolute.inset-0.rounded-3xl,
  #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full > .absolute.inset-0.rounded-3xl{
    display: none !important;
  }
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full > .relative.h-full.bg-transparent.backdrop-blur-xl,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full > .relative.h-full.bg-transparent.backdrop-blur-xl{
  border-radius: 22px !important;
  border-color: rgba(255,255,255,.14) !important;
  background: linear-gradient(165deg, rgba(15,19,30,.9), rgba(10,13,21,.84)) !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.32) !important;
  padding: 1.3rem !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-center.mb-8,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-center.mb-8{
  margin-bottom: 1rem !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-3xl.font-black,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .text-3xl.font-black{
  font-size: 1.5rem !important;
  line-height: 1.15 !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10{
  margin-bottom: 1rem !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4{
  gap: 8px !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4 > li:not(.list-none),
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4 > li:not(.list-none){
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4 > li:not(.list-none) .mr-4,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4 > li:not(.list-none) .mr-4{
  margin-right: 8px !important;
  margin-top: .38rem !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4 > li:not(.list-none) span,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4 > li:not(.list-none) span{
  display: block;
  font-size: .88rem !important;
  line-height: 1.45 !important;
  color: #dce4f3 !important;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .list-none > span,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .list-none > span{
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-size: .8rem !important;
  font-weight: 760;
}

#metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 button.relative.w-full,
#gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 button.relative.w-full{
  min-height: 46px;
  padding: .82rem 1rem !important;
  border-radius: 12px !important;
  font-size: .88rem !important;
  letter-spacing: .01em;
}

@media (min-width: 768px) and (max-width: 1200px){
  #metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20,
  #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full:nth-child(3),
  #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full:nth-child(3){
    grid-column: 1 / -1;
    width: min(760px, 100%);
    margin: 0 auto;
  }

  #metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10,
  #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10{
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
  }
}

@media (max-width: 767px){
  #metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20,
  #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10,
  #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10{
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

:root[data-theme="light"] #metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full > .relative.h-full.bg-transparent.backdrop-blur-xl,
:root[data-theme="light"] #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 > .relative.group.h-full > .relative.h-full.bg-transparent.backdrop-blur-xl{
  background: #fff !important;
  border-color: rgba(24,36,58,.14) !important;
  box-shadow: 0 12px 24px rgba(23,34,58,.1) !important;
}

:root[data-theme="light"] #metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4 > li:not(.list-none),
:root[data-theme="light"] #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4 > li:not(.list-none){
  background: rgba(24,36,58,.03) !important;
  border-color: rgba(24,36,58,.12) !important;
}

:root[data-theme="light"] #metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4 > li:not(.list-none) span,
:root[data-theme="light"] #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10 > .space-y-4 > li:not(.list-none) span{
  color: #2f3d57 !important;
}

/* === TABLET-FIRST NAV PANEL (up to 1100px) ============================= */
@media (max-width: 1100px){
  body.vc-menu-open{
    overflow: hidden;
  }

  #mainNavActions{
    display: none !important;
  }

  .vc-mobile-toggle{
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .vc-mobile-toggle span{
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
  }

  .nav-sticky.is-mobile-open .vc-mobile-toggle span:nth-child(1){
    transform: translateY(6px) rotate(45deg);
  }

  .nav-sticky.is-mobile-open .vc-mobile-toggle span:nth-child(2){
    opacity: 0;
  }

  .nav-sticky.is-mobile-open .vc-mobile-toggle span:nth-child(3){
    transform: translateY(-6px) rotate(-45deg);
  }

  .vc-mobile-menu{
    display: block;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    overflow: hidden;
    pointer-events: none;
    border-top: 1px solid rgba(255,255,255,.12);
    transition: max-height .2s ease, opacity .2s ease, transform .2s ease, margin-top .2s ease, padding .2s ease;
  }

  .nav-sticky.is-mobile-open .vc-mobile-menu{
    max-height: 80vh;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin-top: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .vc-mobile-links{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .vc-mobile-kicker{
    margin: 0 0 8px;
    color: #9fb0d1;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .vc-mobile-quick{
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .vc-mobile-chip{
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #e8edf9;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
  }

  .vc-mobile-services{
    grid-column: 1 / -1;
  }

  .vc-mobile-link,
  .vc-mobile-sublink,
  .vc-mobile-theme{
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: #e9eefb;
    font-weight: 650;
    font-size: .92rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .vc-mobile-summary{
    list-style: none;
    cursor: pointer;
    border: 0;
    background: transparent;
  }

  .vc-mobile-summary::-webkit-details-marker{
    display: none;
  }

  .vc-mobile-services[open] .vc-mobile-summary{
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
  }

  .vc-mobile-submenu{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
  }

  .vc-mobile-theme{
    margin-top: 8px;
  }

  :root[data-theme="light"] .vc-mobile-toggle{
    color: #1b2436;
    border-color: rgba(27,36,54,.2);
    background: rgba(27,36,54,.05);
  }

  :root[data-theme="light"] .vc-mobile-menu{
    border-top-color: rgba(27,36,54,.12);
  }

  :root[data-theme="light"] .vc-mobile-link,
  :root[data-theme="light"] .vc-mobile-sublink,
  :root[data-theme="light"] .vc-mobile-theme,
  :root[data-theme="light"] .vc-mobile-services,
  :root[data-theme="light"] .vc-mobile-chip{
    color: #1b2436;
    border-color: rgba(27,36,54,.16);
    background: rgba(255,255,255,.88);
  }

  :root[data-theme="light"] .vc-mobile-kicker{
    color: #4c5f82;
  }
}

/* === FORMULAS: PROGRESSIVE DISCLOSURE ================================== */
.vc-formula-toggle{
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: #e2e9f8;
  border-radius: 10px;
  min-height: 38px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
}

.vc-formula-toggle:hover{
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.09);
}

.vc-formula-toggle.is-open{
  color: #ffaf61;
  border-color: rgba(255,122,0,.42);
  background: rgba(255,122,0,.12);
}

:root[data-theme="light"] .vc-formula-toggle{
  color: #22324d;
  border-color: rgba(24,36,58,.18);
  background: rgba(24,36,58,.04);
}

:root[data-theme="light"] .vc-formula-toggle.is-open{
  color: #d96a00;
  border-color: rgba(255,122,0,.32);
  background: rgba(255,122,0,.1);
}

/* === HOME BLOCK ADAPTATION: decision-first on tablet/mobile ============= */
@media (max-width: 1100px){
  #accueil .brand-flow-marquee::before,
  #accueil .brand-flow-marquee::after{
    display: none;
  }

  #accueil .brand-flow-marquee{
    overflow: visible;
  }

  #accueil .brand-flow-track{
    animation: none !important;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  #accueil .trust-marquee{
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  #accueil .trust-track{
    animation: none !important;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 767px){
  .vc-mobile-links{
    grid-template-columns: 1fr;
  }

  .vc-mobile-submenu{
    grid-template-columns: 1fr;
  }

  .vc-mobile-quick{
    grid-template-columns: 1fr;
  }
}

/* === MOBILE/TABLET STABILITY LAYER ===================================== */
@media (max-width: 1100px){
  html,
  body{
    overflow-x: hidden !important;
  }

  .container{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  input,
  select,
  textarea,
  .search-input,
  .sector-search-input,
  #homeSectorInput,
  #socialExampleSearch{
    font-size: 16px !important;
  }

  /* remove heavy ambient effects that hurt clarity/perf on tablet/phone */
  #vc-fireflies,
  #vc-iglows,
  .vc-flow,
  .vc-particles,
  .vc-orbs,
  .vc-glow{
    display: none !important;
  }

  #accueil .home-shell{
    padding-top: 14px !important;
    min-height: auto !important;
  }

  #accueil .home-hero-grid{
    gap: 16px !important;
  }

  #accueil .service-pillars-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #accueil .brand-flow-item{
    width: 112px !important;
    height: 66px !important;
  }

  #accueil .trust-pill{
    font-size: .78rem !important;
    padding: 7px 10px !important;
  }

  #metier-page .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10,
  #gestion-reseaux .grid.grid-cols-1.lg\:grid-cols-3.gap-8.max-w-7xl.mx-auto.mb-20 .mb-10{
    display: block !important;
  }

  #metier-page .vc-formula-shell,
  #gestion-reseaux .vc-formula-shell{
    padding: 1rem !important;
  }

  #metier-page .vc-formula-list,
  #gestion-reseaux .vc-formula-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #metier-page .vc-formula-toggle,
  #gestion-reseaux .vc-formula-toggle{
    min-height: 42px;
    font-size: .84rem;
  }
}

@media (max-width: 767px){
  #accueil .service-pillars-grid{
    grid-template-columns: 1fr !important;
  }
}

/* === RESPONSIVE QUALITY LAYER (tablet + phone only) ===================== */
@media (max-width: 1100px){
  /* Menu mobile: compact, clear, no duplicate actions */
  .nav-sticky .vc-mobile-kicker,
  .nav-sticky .vc-mobile-quick,
  .nav-sticky .vc-mobile-chip{
    display: none !important;
  }

  .nav-sticky .vc-mobile-menu{
    max-height: 0;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .nav-sticky.is-mobile-open .vc-mobile-menu{
    max-height: min(68vh, 540px) !important;
    margin-top: 6px !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }

  .nav-sticky .vc-mobile-links{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .nav-sticky .vc-mobile-link,
  .nav-sticky .vc-mobile-sublink,
  .nav-sticky .vc-mobile-summary,
  .nav-sticky .vc-mobile-theme{
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: .93rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  .nav-sticky .vc-mobile-submenu{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  .nav-sticky .flex_items-center img{
    height: 50px !important;
  }

  .nav-sticky .flex_items-center .nav-brand-word{
    font-size: 1rem !important;
    letter-spacing: .12em !important;
  }

  /* Home hero: prevent logo crop and preserve breathing space */
  #accueil .home-shell{
    overflow: visible !important;
  }

  #accueil .home-hero-grid{
    align-items: start !important;
    gap: 14px !important;
  }

  #accueil .home-stage{
    min-height: auto !important;
    overflow: visible !important;
    padding: 8px 0 0 !important;
  }

  #accueil #logo3d-home-wrap{
    max-width: min(300px, 82vw) !important;
    margin: 8px auto 0 !important;
  }

  #accueil #logo3d-home{
    --home-logo-scale: .74 !important;
    max-width: 100% !important;
  }

  #accueil #logo3d-home .logo-base{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Réalisations logos row: no side clipping */
  #realisations .reals-brand-marquee{
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  #realisations .reals-brand-marquee::before,
  #realisations .reals-brand-marquee::after{
    display: none !important;
  }

  #realisations .reals-brand-track{
    animation: none !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  #realisations .reals-brand-item{
    width: min(160px, 44vw) !important;
    max-width: 160px !important;
    height: 78px !important;
  }

  /* Contact: no truncation for email / hours / address */
  #contact .contact-stage{
    overflow: visible !important;
  }

  #contact .contact-panel{
    overflow: visible !important;
  }

  #contact .contact-info-card{
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  #contact .contact-info-card > div:first-child{
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    margin-right: 0 !important;
    border-radius: 14px !important;
  }

  #contact .contact-info-card > div:last-child{
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #contact .contact-info-card .text-base,
  #contact .contact-info-card .text-sm,
  #contact .contact-info-card a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #contact .contact-hours-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  #contact .contact-hours-row > span:last-child{
    font-size: 1rem !important;
  }

  /* Dynamic media blocks: avoid hard crop on tablet/phone */
  #portfolio #portfolio-content img.object-cover,
  #portfolio #portfolio-content video.object-cover,
  #realisations #realisations-container img.object-cover,
  #realisations #realisations-container video.object-cover{
    object-fit: contain !important;
    background: rgba(8, 12, 20, .62) !important;
  }

  #portfolio #portfolio-content [class*="min-h-[300px]"],
  #portfolio #portfolio-content [class*="min-h-[400px]"]{
    min-height: 220px !important;
  }

  /* Application phone mockup: scale down */
  #application .w-\[300px\].h-\[600px\]{
    width: min(250px, 78vw) !important;
    height: min(500px, 136vw) !important;
  }
}

@media (max-width: 767px){
  #accueil .home-title{
    font-size: clamp(2.05rem, 11.6vw, 2.7rem) !important;
    line-height: 1.04 !important;
  }

  #accueil .home-sub{
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
  }

  #contact .contact-hero-title{
    font-size: clamp(1.9rem, 9.2vw, 2.3rem) !important;
    line-height: 1.08 !important;
  }

  #realisations .reals-brand-item{
    width: min(146px, 46vw) !important;
    height: 72px !important;
  }
}