/*
  ZeService — Dark Theme Override + Lightbox Galerie
  ====================================================
  Ce fichier surcharge le thème clair par défaut.
  Il est chargé en dernier dans index.html.
*/

/* ─── 1. FOND GÉNÉRAL ───────────────────────────────── */
html, body {
  background-color: #0f1117 !important;
  color: #c8ccd6 !important;
}

/* ─── 2. PRÉ-HEADER (barre du haut) ────────────────── */
.pre-header {
  background-image: none !important;
  background-color: #080b10 !important;
}

/* ─── SUPPRESSION DE TOUTES LES IMAGES DE DÉCORATION ── */
.main-banner:before,
.main-banner:after,
.services:before,
.services:after,
.our-portfolio:before,
.our-portfolio:after,
.blog:before,
.free-quote,
footer {
  background-image: none !important;
}

.main-banner {
  background-image: none !important;
}

/* Footer fond uni */
footer {
  background-color: #080b10 !important;
  background-image: none !important;
}

/* Sections décoratives neutralisées */
.pricing-item-regular:before,
.pricing-item-regular:after,
.pricing-item-pro:before,
.pricing-item-pro:after {
  background-image: none !important;
}

form#contact:before,
form#contact:after {
  background-image: none !important;
}

/* ─── 3. HEADER / NAVIGATION ───────────────────────── */
.header-area {
  background-color: #13161f !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
}

.background-header {
  background-color: #13161f !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
}

.header-area .main-nav .nav li a {
  color: #c8ccd6 !important;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active,
.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #4da6e7 !important;
}

/* Menu mobile */
@media (max-width: 767px) {
  .header-area .main-nav .nav li {
    background: #1a1d28 !important;
    border-bottom: 1px solid #2a2d3a !important;
  }
  .header-area .main-nav .nav li a {
    background: #1a1d28 !important;
    color: #c8ccd6 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #252836 !important;
    color: #4da6e7 !important;
  }
}

/* ─── 4. PRÉLOADER ──────────────────────────────────── */
.js-preloader {
  background-color: #0f1117 !important;
}
.preloader-inner {
  background: #0f1117 !important;
}

/* ─── 5. BANNIÈRE PRINCIPALE ────────────────────────── */
.main-banner {
  background-color: #13161f !important;
}

.main-banner .left-content h2 {
  color: #e2e5ee !important;
}

.main-banner .left-content p {
  color: #a0a4b0 !important;
}

/* ─── 6. SECTION À PROPOS ───────────────────────────── */
#about {
  background-color: #0f1117 !important;
}

#about p {
  color: #a0a4b0 !important;
}

.section-heading h4 {
  color: #e2e5ee !important;
}

.progress .progress-value {
  color: #e2e5ee !important;
}

.progress:after {
  border-color: #2a2d3a !important;
}

/* ─── 7. SECTION SERVICES ───────────────────────────── */
.services {
  background-color: #0f1117 !important;
}

.services .naccs .menu div .thumb {
  background-color: #1a1d28 !important;
  color: #c8ccd6 !important;
  border: 1px solid #2a2d3a;
  transition: background 0.3s;
}

.services .naccs .menu div.active .thumb,
.services .naccs .menu div:hover .thumb {
  background-color: #252836 !important;
  box-shadow: 0 0 18px rgba(77,166,231,0.18) !important;
}

.services ul.nacc li.active {
  background-color: #1a1d28 !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.4) !important;
}

.services .nacc .thumb h4 {
  color: #e2e5ee !important;
}

.services .nacc .thumb p {
  color: #a0a4b0 !important;
}

/* ─── 8. PACKS / PRICING ────────────────────────────── */
.pricing-tables {
  background-color: #0f1117 !important;
}

.pricing-item-regular,
.pricing-item-pro {
  background-color: #1a1d28 !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.4) !important;
}

.pricing-item-regular h4,
.pricing-item-pro h4 {
  color: #e2e5ee !important;
}

/* ─── 9. GALERIE / PROJETS ──────────────────────────── */
.our-portfolio {
  background-color: #0f1117 !important;
}

.portfolio-item {
  background-color: #1a1d28 !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.4) !important;
  cursor: zoom-in;
  transition: transform 0.25s, box-shadow 0.25s;
}

.portfolio-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(77,166,231,0.2) !important;
}

.portfolio-item .down-content {
  background-color: #1a1d28 !important;
}

.portfolio-item .down-content h4 {
  color: #e2e5ee !important;
}

.portfolio-item .down-content span {
  color: #7a7f90 !important;
}

.portfolio-item:hover .down-content h4,
.portfolio-item:hover .down-content span {
  color: #4da6e7 !important;
}

/* ─── 10. PARTENAIRES ───────────────────────────────── */
#portfolio {
  background-color: #0f1117 !important;
}

/* ─── 11. ACTUALITÉS / BLOG ─────────────────────────── */
.blog {
  background-color: #0f1117 !important;
}

.blog-post {
  box-shadow: 0 0 20px rgba(0,0,0,0.4) !important;
}

.blog-post .down-content {
  background-color: #1a1d28 !important;
}

.blog-post .down-content h4 {
  color: #e2e5ee !important;
}

.blog-post .down-content p {
  color: #a0a4b0 !important;
}

.blog-post .down-content span.author {
  color: #c8ccd6 !important;
}

.post-item .right-content h4 a {
  color: #c8ccd6 !important;
}

.post-item .right-content h4 a:hover {
  color: #4da6e7 !important;
}

.post-item .right-content p {
  color: #a0a4b0 !important;
}

/* ─── 12. MENTIONS LÉGALES ──────────────────────────── */
.the-clients {
  background-color: #0f1117 !important;
}

.the-clients .section-heading h4 {
  color: #e2e5ee !important;
}

.the-clients p, .the-clients br + * {
  color: #a0a4b0 !important;
}

/* ─── 13. FORMULAIRE DE CONTACT ─────────────────────── */
#contact.contact-us {
  background: #13161f !important;
}

#contact-form-wrap {
  background: #1a1d28 !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5) !important;
  border: 1px solid #2a2d3a !important;
}

#contact-form-wrap .form-control {
  background-color: #252836 !important;
  border-color: #3a3d4e !important;
  color: #e2e5ee !important;
}

#contact-form-wrap .form-control::placeholder {
  color: #6a6e7e !important;
}

#contact-form-wrap label {
  color: #a0a4b0 !important;
}

#contact-form-wrap select option {
  background: #252836;
  color: #e2e5ee;
}

/* Captcha bloc */
#contact-form-wrap > div[id="contact-form-inner"] div[style*="background:#f8f9fa"] {
  background: #252836 !important;
  border-color: #3a3d4e !important;
}

/* ─── 14. FOOTER ────────────────────────────────────── */
footer {
  background-color: #080b10 !important;
  background-image: none !important;
  border-top: 1px solid #1e2130;
}

footer p {
  color: #7a7f90 !important;
}

/* ─── 15. TEXTES GÉNÉRAUX ───────────────────────────── */
p {
  color: #a0a4b0 !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #e2e5ee;
}

/* ─── 16. LIGHTBOX (zoom galerie) ───────────────────── */

/* Overlay sombre */
#zs-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: zs-fadein 0.2s ease;
}

#zs-lightbox-overlay.active {
  display: flex;
}

@keyframes zs-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Image agrandie */
#zs-lightbox-img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 60px rgba(0,0,0,0.8);
  cursor: default;
  animation: zs-zoomin 0.2s ease;
}

@keyframes zs-zoomin {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Légende */
#zs-lightbox-caption {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: #e2e5ee;
  font-size: 15px;
  font-family: 'Poppins', sans-serif;
  background: rgba(15,17,23,0.8);
  padding: 8px 22px;
  border-radius: 30px;
  pointer-events: none;
  text-align: center;
}

/* Bouton fermer */
#zs-lightbox-close {
  position: fixed;
  top: 22px;
  right: 30px;
  color: #fff;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  z-index: 100000;
  transition: color 0.2s;
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
}

#zs-lightbox-close:hover {
  color: #4da6e7;
}

/* Flèches navigation */
#zs-lightbox-prev,
#zs-lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 42px;
  font-weight: 200;
  cursor: pointer;
  z-index: 100000;
  background: rgba(77,166,231,0.15);
  border: none;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  font-family: 'Poppins', sans-serif;
}

#zs-lightbox-prev { left: 20px; }
#zs-lightbox-next { right: 20px; }

#zs-lightbox-prev:hover,
#zs-lightbox-next:hover {
  background: rgba(77,166,231,0.4);
}

/* Indicateur zoom au survol des photos */
.portfolio-item .thumb::after {
  content: '🔍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 36px;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.portfolio-item .thumb {
  position: relative;
  overflow: hidden;
}

.portfolio-item:hover .thumb::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.portfolio-item .thumb img {
  transition: transform 0.35s ease;
}

.portfolio-item:hover .thumb img {
  transform: scale(1.06);
}

/* ================================================
   SUPPRESSION DES FONDS BLANCS — THEME DARK
   ================================================ */

/* Onglets services : fond blanc -> dark */
.services .naccs .menu div .thumb {
  background-color: #1a1d28 !important;
  border: 1px solid #2a2d3a;
}
.services .naccs .menu div.active .thumb,
.services .naccs .menu div:hover .thumb {
  background-color: #252836 !important;
}

/* Contenu actif des services */
.services ul.nacc li.active {
  background-color: #1a1d28 !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
}

/* Blog post */
.blog-post .down-content {
  background-color: #1a1d28 !important;
}

/* Packs pricing */
.pricing-item-regular,
.pricing-item-pro {
  background-color: #1a1d28 !important;
}

/* Formulaire contact */
form#contact {
  background-color: #1a1d28 !important;
}

/* Fond bas des cartes galerie */
.portfolio-item .down-content {
  background-color: #1a1d28 !important;
}

/* -----------------------------------------------
   Images PNG/WEBP avec fond blanc
   mix-blend-mode: multiply supprime le blanc
   en le rendant transparent sur fond sombre
   ----------------------------------------------- */

/* Icones de services (PNG fond blanc) */
.services .naccs .menu div .thumb img,
.services .icon img {
  mix-blend-mode: screen;
  filter: brightness(1.1);
}

/* Image droite dans les onglets services */
.services ul.nacc li .right-image img {
  border-radius: 12px;
}

/* Icones packs (PNG fond blanc) */
.pricing-item-regular .icon img,
.pricing-item-pro .icon img {
  mix-blend-mode: screen;
  filter: brightness(1.1);
}

/* Image gauche section A propos */
.about-left-image img {
  mix-blend-mode: luminosity;
  filter: brightness(0.85) contrast(1.1);
  border-radius: 12px;
}

/* Vignettes blog */
.post-item .thumb img {
  border-radius: 12px;
}