/* ===== THEMES ===== */
:root{
  /* Palette générique pilotée par thème */
  --bg: #ffffff;
  --ink: #1f2937;
  --muted: #64748b;
  --card: #ffffff;
  --border: #e5e7eb;
  --nav-bg: #ffffff;
  --nav-ink: #111111;
  --brand: #14883a;          /* vert JVSI */
  --brand-dark: #0f6b2d;
  --accent: #e09b2d;         /* orange JVSI */
  --primary: var(--brand);
  --accent-2: var(--accent);

  /* utilitaires */
  --shadow: 0 10px 28px rgba(0,0,0,.08);
  --overlay-top: 96px;
}

/* === Thème coloré JVSI (non sombre) === */
html[data-theme="brand"]{
  --bg:#fbfdfb;
  --ink:#1e2b21;
  --muted:#51615a;
  --card:#ffffff;
  --border:#dfe7e2;
  --nav-bg:#ffffff;
  --nav-ink:#122015;

  --brand:#14883a;
  --brand-dark:#0f6b2d;
  --accent:#e09b2d;
  --primary:var(--brand);
  --accent-2:var(--accent);
}

/* ===== MAPPAGE des éléments clés (écrase les couleurs dures) ===== */
body{ background:var(--bg) !important; color:var(--ink) !important; }
.navbar{ background:var(--nav-bg) !important; box-shadow:var(--shadow); }
.navbar .nav-link{ color:var(--nav-ink) !important; opacity:.95; }
.navbar .nav-link:hover, .navbar .nav-link:focus{ color:var(--brand) !important; }
.navbar .nav-link.active{ color:var(--brand-dark) !important; font-weight:600; }

.dropdown-menu{ background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); }
.dropdown-item{ color:var(--nav-ink); }
.dropdown-item:hover{ background:#f6f8f9; color:var(--brand-dark); }

.card, .bg-white, .accordion-body{ background:var(--card) !important; color:var(--ink) !important; border-color:var(--border) !important; }
.bg-body-tertiary{ background:var(--card) !important; }
.text-secondary{ color:var(--muted) !important; }

.form-control, .form-select{
  background:#fff; color:var(--ink);
  border:1px solid var(--border);
}
.form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 .25rem color-mix(in srgb, var(--primary) 25%, transparent); }

footer.footer-jvsi{ background:#f8fafb; border-top:1px solid var(--border); color:var(--ink); }
.footer-links a{ color:var(--ink); }
.footer-links a:hover{ color:var(--brand-dark); }

/* boutons et puces */
.btn-gradient{ background:linear-gradient(135deg, var(--primary), var(--accent-2)); border:0; color:#061019; }
.feature-icon{ background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), color-mix(in srgb, var(--accent-2) 18%, #fff)); }

/* HÉRO — overlay doux pour lisibilité sur photo */
#heroCarousel .carousel-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  z-index:1;
}

/* Pastille de recherche */
#hero > .hero-overlay .search-pill{
  background:#fff; border-radius:999px; padding:.45rem .6rem;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* Transitions douces au switch */
*{ transition: background-color .2s ease, color .2s ease, border-color .2s ease; }







/* --- DARK THEME (scopé) --- */
html[data-theme="dark"] body{ background:#0a0f1a; color:#e6eef6; }
html[data-theme="dark"] .feature-card{
  background:#0e1624; border:1px solid rgba(255,255,255,.06); border-radius:18px;
}
html[data-theme="dark"] .feature-card:hover{
  transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
html[data-theme="dark"] .feature-icon{
  background:linear-gradient(135deg, rgba(14,165,233,.18), rgba(34,197,94,.18));
}
html[data-theme="dark"] .accordion-button{ background:#0e1624; color:#e6eef6; border:1px solid rgba(255,255,255,.06); }
html[data-theme="dark"] .accordion-button:not(.collapsed){
  color:#0a0f1a; background: linear-gradient(135deg, var(--primary), var(--accent));
}
html[data-theme="dark"] .accordion-body{ background:#0e1624; border:1px solid rgba(255,255,255,.06); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{ background:#0e1624; color:#e6eef6; border:1px solid rgba(255,255,255,.12); }
html[data-theme="dark"] .form-control:focus{ border-color: var(--primary); box-shadow: 0 0 0 .25rem rgba(14,165,233,.25); }
html[data-theme="dark"] .bg-body-tertiary{ background:#0f1624 !important; }
html[data-theme="dark"] .card, 
html[data-theme="dark"] .bg-white{ background:#111b2a !important; color:#e6eef6 !important; }
html[data-theme="dark"] .text-secondary{ color:#8aa0b6 !important; }
html[data-theme="dark"] footer{ background:#0b1220; }

/* etc. → tous les styles avec couleurs sombres en dur */


/*
:root{
      --primary:#0ea5e9;      
      --accent:#22c55e;       
      --dark:#0b1220;         
      --muted:#8aa0b6;        
      --gradient: radial-gradient(1200px 600px at 10% 10%, rgba(14,165,233,.25), transparent 40%),
                  radial-gradient(900px 500px at 90% 30%, rgba(34,197,94,.25), transparent 40%),
                  conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,0));
    }

    html, body{ height:100%; }
    body{ background:#0a0f1a; color:#e6eef6; scroll-behavior:smooth; }
	*/

    /* NAVBAR (translucide -> scrolled) */
    .navbar{ transition: background-color .3s ease, box-shadow .3s ease; }
    .navbar.translucent{ background:rgba(10,15,26,.35); backdrop-filter: blur(8px); }
    .navbar.scrolled{ background:rgba(10,15,26,.9); box-shadow:0 10px 30px rgba(0,0,0,.25); }
    .nav-link{ color:#e6eef6!important; opacity:.9; }
    .nav-link.active, .nav-link:hover{ color:var(--primary)!important; opacity:1; }

   

    .glass-card{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); border-radius:20px; box-shadow: 0 10px 40px rgba(0,0,0,.35); backdrop-filter: blur(10px); }
    .btn-gradient{ background: linear-gradient(135deg, var(--primary), var(--accent)); border:0; color:#061019; }
    .btn-gradient:hover{ filter:brightness(1.05); transform: translateY(-1px); }

    /* SECTION */
    section{ padding:80px 0; position:relative; }
    .section-title .line{ width:70px; height:4px; border-radius:2px; background:linear-gradient(90deg, var(--primary), var(--accent)); display:inline-block; }
    .lead-muted{ color:var(--muted); }

    /* SERVICES / cards */
    .feature-card{ background:#0e1624; border:1px solid rgba(255,255,255,.06); border-radius:18px; transition: transform .25s ease, box-shadow .25s ease; }
    .feature-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
    .feature-icon{ width:54px; height:54px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg, rgba(14,165,233,.18), rgba(34,197,94,.18)); }

    /* TIMELINE */
    .timeline{ position:relative; }
    .timeline::before{ content:""; position:absolute; left:20px; top:0; bottom:0; width:2px; background:linear-gradient(var(--primary), var(--accent)); opacity:.4; }
    .timeline-item{ position:relative; padding-left:60px; margin-bottom:28px; }
    .timeline-item::before{ content:""; position:absolute; left:12px; top:6px; width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--accent)); box-shadow:0 0 0 5px rgba(255,255,255,.05); }

    /* PORTFOLIO */
    .filter-btns .btn{ border:1px solid rgba(255,255,255,.12); }
    .portfolio-item{ transition: transform .25s ease, opacity .25s ease; }
    .portfolio-item:hover{ transform: translateY(-4px); }

    /* FAQ */
    .accordion-button{ background:#0e1624; color:#e6eef6; border:1px solid rgba(255,255,255,.06); }
    .accordion-button:not(.collapsed){ color:#0a0f1a; background: linear-gradient(135deg, var(--primary), var(--accent)); }
    .accordion-body{ background:#0e1624; border:1px solid rgba(255,255,255,.06); }

    /* CONTACT */
    .form-control, .form-select{ background:#0e1624; color:#e6eef6; border:1px solid rgba(255,255,255,.12); }
    .form-control:focus{ border-color: var(--primary); box-shadow: 0 0 0 .25rem rgba(14,165,233,.25); }

    /* Footer */
    footer{ background:#0b1220; }

    /* Back to top */
    #toTop{ position:fixed; bottom:24px; right:24px; opacity:0; visibility:hidden; transition: .25s ease; z-index:999; }
    #toTop.show{ opacity:1; visibility:visible; }

    /* Preloader */
    #preloader{ position: fixed; inset:0; display:grid; place-items:center; background:#0a0f1a; z-index: 2000; }
    #preloader .spinner{ width:52px; height:52px; border-radius:50%; border:3px solid rgba(255,255,255,.15); border-top-color: var(--primary); animation: spin 1s linear infinite; }
    @keyframes spin{ to{ transform: rotate(360deg);} }

    .text-gradient{ background:linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
	
	
	/* ===== MENU – correctifs / cohérence light JVSI ===== */
	:root{
	  --brand:#14883a; --brand-dark:#0f6b2d; --accent:#e09b2d; --ink:#1f2937;
	}
	.navbar{transition:background-color .28s ease, box-shadow .28s ease;}
	.navbar.translucent{background:rgba(255,255,255,.7);backdrop-filter:blur(8px);}
	.navbar.scrolled{background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.08);}
	.navbar .nav-link{color:#111;opacity:.9;}
	.navbar .nav-link:hover, .navbar .nav-link:focus{color:var(--brand);}
	.navbar .nav-link.active{color:var(--brand-dark);font-weight:600;}
	.navbar .dropdown-toggle::after{vertical-align:.175em;}
	/* 2e niveau : petite élévation + animation */
	.navbar .dropdown .dropdown-menu{
	  display:block; opacity:0; visibility:hidden; transform:translateY(8px);
	  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
	  margin-top:.25rem; border:1px solid rgba(0,0,0,.08); box-shadow:0 14px 28px rgba(0,0,0,.08);
	  z-index:1201 !important;
	}
	.navbar .dropdown .dropdown-menu.show{opacity:1;visibility:visible;transform:none;}
	/* Mega menu */
	.dropdown-mega{position:static}
	.dropdown-menu-mega{
	  width:100%; left:0; right:0; border:none; border-radius:0;
	  padding:2rem 1.25rem; box-shadow:0 18px 40px rgba(0,0,0,.12);
	  transform:translateY(10px); opacity:0; visibility:hidden;
	  transition:opacity .24s ease, transform .24s ease; z-index:1200 !important;
	  background:#fff;
	}
	.dropdown-menu-mega.show{transform:none;opacity:1;visibility:visible;}
	.dropdown-menu-mega .section-title{border-left:4px solid var(--brand); padding-left:.6rem; margin-bottom:.5rem; font-weight:700; color:#2b3b2f;}
	.dropdown-menu-mega a{color:#1f2937; text-decoration:none}
	.dropdown-menu-mega a:hover{color:var(--brand-dark);}

	/* Overlay assombrissant derrière les menus */
	.site-dim{position:fixed; inset:0; background:rgba(0,0,0,.45);
	  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:1000;}
	.site-dim.show{opacity:1; visibility:visible;}
	/* Assure superposition : menus > dim */
	.dropdown-menu, .dropdown-menu-mega{z-index:1102 !important}
	.navbar{z-index:1103; position:relative}

	/* ===== FOOTER – styles harmonisés JVSI ===== */
	footer.footer-jvsi{background:#f8fafb; border-top:1px solid #e5e7eb; color:#374151;}
	.footer-title{font-weight:700; margin-bottom:.5rem; border-left:4px solid var(--brand); padding-left:.6rem; color:#2b3b2f;}
	.footer-links{list-style:none; padding:0; margin:0;}
	.footer-links li+li{margin-top:.25rem;}
	.footer-links a{color:#374151; text-decoration:none;}
	.footer-links a:hover{color:var(--brand-dark); text-decoration:underline;}
	.footer-social .btn{border-color:#d1d5db;}
	.footer-social .btn:hover{border-color:#9ca3af;}

	/* Petits écrans : aération */
	@media (max-width: 575.98px){
	  .dropdown-menu-mega{padding:1.25rem .75rem;}
	  .footer-cols .col-6{width:100%; flex:0 0 100%;}
	}
	
	
	/* === NAVBAR lisible sur fond clair === */
	#siteHeader .navbar, .navbar{
	  background:#fff;                 /* force le fond clair par défaut */
	}
	.navbar.translucent{               /* évite l'effet translucide trop pâle */
	  background:#fff !important;
	  backdrop-filter:none !important;
	}
	.navbar.scrolled{
	  background:#fff;
	  box-shadow:0 10px 28px rgba(0,0,0,.08);
	}

	/* Liens du menu bien contrastés */
	.navbar .nav-link{ color:#111 !important; opacity:.95; }
	.navbar .nav-link:hover,
	.navbar .nav-link:focus{ color:var(--brand) !important; opacity:1; }
	.navbar .nav-link.active{ color:var(--brand-dark) !important; font-weight:600; }

	/* Dropdowns (1er & 2e niveaux) */
	.navbar .dropdown-menu{
	  background:#fff;
	  border:1px solid rgba(0,0,0,.08);
	  box-shadow:0 14px 28px rgba(0,0,0,.08);
	}
	.navbar .dropdown-item{ color:#111; }
	.navbar .dropdown-item:hover{ color:var(--brand-dark); background:#f6f8f9; }

	/* Mega menu (si utilisé) */
	.dropdown-menu-mega{
	  background:#fff;
	  border:none;
	  box-shadow:0 18px 40px rgba(0,0,0,.12);
	}

	/* Overlay derrière les menus (restera derrière) */
	.site-dim{ z-index:1000; }
	.dropdown-menu, .dropdown-menu-mega{ z-index:1102 !important; }
	.navbar{ z-index:1103; position:relative; }
	
	
	/* Menu lisible (au cas où) */
	.navbar{ background:#fff; }
	.navbar .nav-link{ color:#111 !important; }
	.navbar .nav-link:hover{ color:#14883a !important; }
	
	
	/* --- NAVBAR lisible (déjà OK, on laisse) --- */
	.navbar{ background:#fff; }
	.navbar .nav-link{ color:#111 !important; }
	.navbar .nav-link:hover{ color:#14883a !important; }

	/* contrôles visibles sur fond photo */
	.carousel-control-prev-icon,
	.carousel-control-next-icon{ filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
	
	
	/* ===== JVSI – PATCH NAV + FOOTER + HERO ===== */
	:root{
	  --brand:#14883a; --brand-dark:#0f6b2d; --accent:#e09b2d; --ink:#1f2937;
	}

	/* --- NAVBAR lisible sur fond clair --- */
	#siteHeader .navbar, .navbar{
	  background:#fff;                 /* fond clair */
	  transition:background-color .28s ease, box-shadow .28s ease;
	}
	.navbar.translucent{               /* neutralise l’effet translucide du thème IT */
	  background:#fff !important; backdrop-filter:none !important;
	}
	.navbar.scrolled{ background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.08); }
	.navbar .nav-link{ color:#111 !important; opacity:.95; }
	.navbar .nav-link:hover, .navbar .nav-link:focus{ color:var(--brand) !important; opacity:1; }
	.navbar .nav-link.active{ color:var(--brand-dark) !important; font-weight:600; }

	/* Dropdowns */
	.navbar .dropdown-menu{
	  background:#fff; border:1px solid rgba(0,0,0,.08);
	  box-shadow:0 14px 28px rgba(0,0,0,.08);
	  z-index:1201 !important;
	}
	.navbar .dropdown-item{ color:#111; }
	.navbar .dropdown-item:hover{ color:var(--brand-dark); background:#f6f8f9; }

	/* Mega menu (si présent) */
	.dropdown-mega{position:static}
	.dropdown-menu-mega{
	  width:100%; left:0; right:0; background:#fff; border:none;
	  box-shadow:0 18px 40px rgba(0,0,0,.12);
	  padding:2rem 1.25rem; transform:translateY(10px);
	  opacity:0; visibility:hidden; transition:opacity .24s ease, transform .24s ease;
	  z-index:1200 !important;
	}
	.dropdown-menu-mega.show{ transform:none; opacity:1; visibility:visible; }
	.dropdown-menu-mega .section-title{
	  border-left:4px solid var(--brand); padding-left:.6rem; margin-bottom:.5rem;
	  font-weight:700; color:#2b3b2f;
	}

	/* Overlay assombrissant (reste derrière les menus) */
	.site-dim{ position:fixed; inset:0; background:rgba(0,0,0,.45);
	  opacity:0; visibility:hidden; transition:.25s; z-index:1000; }
	.site-dim.show{ opacity:1; visibility:visible; }
	.dropdown-menu,.dropdown-menu-mega{ z-index:1102 !important }
	.navbar{ z-index:1103; position:relative }

	/* --- FOOTER sobre et lisible --- */
	footer.footer-jvsi{ background:#f8fafb; border-top:1px solid #e5e7eb; color:#374151; }
	.footer-title{ font-weight:700; margin-bottom:.5rem; border-left:4px solid var(--brand); padding-left:.6rem; color:#2b3b2f; }
	.footer-links{ list-style:none; padding:0; margin:0; }
	.footer-links li+li{ margin-top:.25rem; }
	.footer-links a{ color:#374151; text-decoration:none; }
	.footer-links a:hover{ color:var(--brand-dark); text-decoration:underline; }

	/* --- HERO : retire l’énorme overlay du thème IT et force le <img> --- */
	#hero::before{ content:none !important; }
	#hero, #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item{ min-height:72vh; }
	#heroCarousel .carousel-item{ position:relative; background:#000; }
	#heroCarousel .carousel-item>img{
	  position:absolute; inset:0; width:100%; height:100%;
	  object-fit:cover; object-position:center;
	}
	#heroCarousel .carousel-item::after{
	  content:""; position:absolute; inset:0;
	  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25));
	  z-index:1;
	}
	#heroCarousel .carousel-caption{ z-index:2; bottom:18%; }

	
	
	
	.hero-overlay{ background:transparent !important; pointer-events:none; z-index:1 !important; }
	
	
	/* === HERO: taille fiable quand on utilise .hero-bg en background === */
	.hero-carousel,
	#hero,
	#hero .carousel-inner,
	#hero .carousel-item{
	  min-height: 72vh;           /* donne de la hauteur au slide */
	}

	#hero .carousel-item{
	  position: relative;          /* nécessaire pour positionner .hero-bg */
	}

	#hero .hero-bg{
	  position: absolute;
	  inset: 0;
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	  z-index: 1;                  /* image sous les textes */
	}

	#hero .carousel-caption{
	  z-index: 3;                  /* au-dessus de l’image et de l’overlay */
	  bottom: 18%;
	}

	/* Overlay global au-dessus de l’image mais sous les captions */
	.hero-overlay{
	  position: absolute;
	  inset: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.20));
	  z-index: 2;
	  pointer-events: none;        /* pour ne pas bloquer les flèches/indicateurs */
	}

	.hero-overlay .search-pill{
	  pointer-events: auto;        /* on réactive les clics dans la pill */
	}
	
	
	
	
	
	







	#hero{ position:relative; }

	/* overlay centrée au-dessus du slider */
	#hero > .hero-overlay{
	  position:absolute;
	  left:50%; transform:translateX(-50%);
	  width:min(880px,92vw);
	  display:flex; justify-content:center; align-items:center;
	  z-index:9999 !important;     /* au-dessus de l’image & des captions */
	  pointer-events:none;          /* ne bloque pas les flèches du carousel */
	  background:transparent;
	}
	#hero > .hero-overlay .search-pill{
	  pointer-events:auto;          /* on réactive les clics dans la pill */
	  background:#fff; border-radius:999px;
	  padding:.45rem .6rem;
	  box-shadow:0 10px 24px rgba(0,0,0,.25);
	}

	/* position sous la navbar */
	#hero > .hero-overlay.pos-under-nav{
	  top: var(--overlay-top, 96px);
	  bottom:auto;
	}

	/* option: si tu préfères en bas du hero
	#hero > .hero-overlay.pos-bottom{ bottom:12%; top:auto; }
	*/

	@media (max-width:576px){
	  #hero > .hero-overlay .search-pill{ width:95vw; }
	}



	#hero > .hero-overlay .overlay-inner{
	  display:flex;
	  justify-content:center;   /* centre horizontalement */
	}
	#hero > .hero-overlay .search-pill{
	  margin: 0 auto;           /* filet de sécurité */
	}








	/* arrondi des 3 boutons du hero */
#hero .carousel-caption .btn{
  border-radius: 999px;
}

/* fluide quand on repositionne l'overlay */
#hero > .hero-overlay.pos-under-nav{
  transition: top .25s ease;
}




/* === THEME SOMBRE — scoping fort par [data-theme="dark"] === */
html[data-theme="dark"]{
  --bg:#0a0f1a; --ink:#e6eef6; --muted:#8aa0b6; --card:#0e1624; --border:rgba(255,255,255,.12);
  --nav-bg:rgba(10,15,26,.9); --nav-ink:#e6eef6;
  --brand:#14883a; --brand-dark:#10a34a; --accent:#e09b2d; --primary:var(--brand);
}
/* corps & blocs */
html[data-theme="dark"] body{ background:var(--bg)!important; color:var(--ink)!important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .accordion-body{ background:var(--card)!important; color:var(--ink)!important; border-color:var(--border)!important; }
html[data-theme="dark"] .text-secondary{ color:var(--muted)!important; }
/* NAVBAR sombre lisible */
html[data-theme="dark"] #siteHeader .navbar{
  background:var(--nav-bg)!important; box-shadow:0 10px 28px rgba(0,0,0,.25);
  border-bottom:0;
}
html[data-theme="dark"] #siteHeader .nav-link{ color:var(--nav-ink)!important; opacity:.95; }
html[data-theme="dark"] #siteHeader .nav-link:hover{ color:var(--primary)!important; }
/* Utility bar déjà sombre, on harmonise */
html[data-theme="dark"] .utility-bar{ background:#0b1220; color:#cbd5e1; }
/* Inputs */
html[data-theme="dark"] .form-control, 
html[data-theme="dark"] .form-select{
  background:#0e1624; color:#e6eef6; border:1px solid var(--border);
}
html[data-theme="dark"] .form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 .25rem rgba(20,136,58,.25); }
/* Héro overlay un peu plus marqué en sombre */
html[data-theme="dark"] #heroCarousel .carousel-item::after{
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28));
}