/* ==========================================================================
   CHARTE GRAPHIQUE BLANC LUXE, NOIR & OR CHAMPAGNE (ÉLÉGANT, LUMINEUX & SOBRE)
   ========================================================================== */

:root {
  --csp-bg-main: transparent;
  --csp-bg-card: #ffffff;
  --csp-bg-card-hover: #ffffff;
  --csp-bg-soft: #f7f7f9;
  
  --csp-black: #111115;
  --csp-black-soft: #1a1a20;
  
  --csp-gold: #c5a059;
  --csp-gold-bright: #d4af37;
  --csp-gold-dark: #9e7d3b;
  --csp-gold-subtle: rgba(197, 160, 89, 0.1);
  
  --csp-text: #111115;
  --csp-text-muted: #555562;
  --csp-text-dim: #888895;
  
  --csp-border: #e6e6ec;
  --csp-border-gold: rgba(197, 160, 89, 0.35);
  
  --csp-radius: 16px;
  --csp-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --csp-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --csp-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.09);
  --csp-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Rétro-compatibilité variables MCS */
:root {
  --mcs-primary: var(--csp-gold);
  --mcs-primary-dark: var(--csp-gold-dark);
  --mcs-bg-soft: var(--csp-bg-soft);
  --mcs-text: var(--csp-text);
  --mcs-text-light: var(--csp-text-muted);
  --mcs-border: var(--csp-border);
  --mcs-radius: var(--csp-radius);
  --mcs-font: var(--csp-font);
}

.mcs-carte-wrapper,
.csp-carte-wrapper,
.mcs-tableau-tarifs-wrapper,
.csp-tableau-tarifs-wrapper,
.mcs-page-ville-wrapper,
.csp-page-ville-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  font-family: var(--csp-font);
  color: var(--csp-text);
  background-color: transparent;
  padding: 0;
  border-radius: var(--csp-radius);
  box-sizing: border-box;
}

/* ===== CARTE INTERACTIVE LEAFLET ===== */
#carte-maquilleuse,
.csp-carte-container {
  height: 520px;
  width: 100%;
  border-radius: var(--csp-radius);
  margin-bottom: 30px;
  border: 1px solid var(--csp-border);
  box-shadow: var(--csp-shadow);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Style épuré pour les popups Leaflet */
.leaflet-container {
  font-family: var(--csp-font) !important;
}

.leaflet-popup-content-wrapper {
  background: var(--csp-black) !important;
  color: #ffffff !important;
  border: 1px solid var(--csp-gold) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

.leaflet-popup-tip {
  background: var(--csp-black) !important;
}

.leaflet-popup-content a {
  color: var(--csp-gold-bright) !important;
  text-decoration: none !important;
  font-weight: 600;
}

/* Style élégant pour l'étiquette permanente du marqueur sur mesure */
.leaflet-tooltip.csp-custom-marker-tooltip {
  background: var(--csp-black, #111111) !important;
  color: #ffffff !important;
  border: 1px solid var(--csp-gold, #c9a050) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 6px 14px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.leaflet-tooltip.csp-custom-marker-tooltip::before {
  border-top-color: var(--csp-black, #111111) !important;
}

/* ===== CALCULATEUR DE FRAIS ===== */
.mcs-calculateur,
.csp-calculateur {
  background: var(--csp-bg-soft);
  border: 1px solid var(--csp-border);
  border-radius: var(--csp-radius);
  padding: 30px 34px;
  margin-bottom: 30px;
  box-shadow: var(--csp-shadow);
  position: relative;
}

.mcs-calculateur h3,
.csp-calculateur h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--csp-black);
  letter-spacing: -0.01em;
}

.mcs-calculateur p,
.csp-calculateur p {
  color: var(--csp-text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

#select-ville-calc {
  width: 100%;
  max-width: 420px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--csp-border);
  background: #ffffff;
  font-size: 15px;
  color: var(--csp-black);
  outline: none;
  transition: var(--csp-transition);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

#select-ville-calc:focus {
  border-color: var(--csp-gold);
  box-shadow: 0 0 0 3px var(--csp-gold-subtle);
}

.mcs-resultat,
.csp-resultat {
  background: #ffffff;
  border-left: 3px solid var(--csp-gold);
  border-top: 1px solid var(--csp-border);
  border-right: 1px solid var(--csp-border);
  border-bottom: 1px solid var(--csp-border);
  padding: 20px 24px;
  border-radius: 10px;
  margin-top: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.mcs-resultat p,
.csp-resultat p {
  margin: 6px 0;
  font-size: 15px;
  color: var(--csp-black);
}

.mcs-resultat p strong,
.csp-resultat p strong {
  color: var(--csp-gold-dark);
}

.mcs-resultat small,
.csp-resultat small {
  color: var(--csp-text-dim);
  display: block;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
}

/* ===== LÉGENDE ===== */
.mcs-legende,
.csp-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 40px;
  font-size: 13.5px;
  color: var(--csp-text-muted);
  background: var(--csp-bg-card);
  padding: 16px 22px;
  border-radius: 12px;
  border: 1px solid var(--csp-border);
}

.mcs-legende span,
.csp-legende span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mcs-legende i,
.csp-legende i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ===== BLOC CONTENU SEO ===== */
.mcs-contenu-seo,
.csp-contenu-seo {
  margin-top: 40px;
}

.mcs-contenu-seo h2,
.csp-contenu-seo h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--csp-black);
  letter-spacing: -0.02em;
}

.mcs-contenu-seo h3,
.csp-contenu-seo h3 {
  margin-top: 40px;
  font-size: 18px;
  font-weight: 700;
  color: var(--csp-black);
  border-bottom: 2px solid var(--csp-gold-subtle);
  padding-bottom: 10px;
}

/* GRILLE PRINCIPALES VILLES */
.mcs-villes-principales-grid,
.csp-villes-principales-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.mcs-ville-card,
.csp-ville-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--csp-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--csp-text);
  box-shadow: var(--csp-shadow);
  transition: var(--csp-transition);
}

.mcs-ville-card:hover,
.csp-ville-card:hover {
  border-color: var(--csp-gold);
  transform: translateY(-4px);
  box-shadow: var(--csp-shadow-hover);
}

.csp-ville-card-img-wrap {
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: var(--csp-bg-soft);
  position: relative;
}

.csp-ville-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.csp-ville-card:hover .csp-ville-card-img-wrap img {
  transform: scale(1.06);
}

.csp-ville-card-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #111115 0%, #222228 100%);
  color: #ffffff;
  padding: 16px;
  text-align: center;
}

.csp-ville-card-icon {
  font-size: 26px;
  margin-bottom: 4px;
}

.csp-ville-card-name-placeholder {
  font-size: 14px;
  font-weight: 600;
  color: var(--csp-gold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.csp-ville-card-body {
  padding: 18px 20px;
}

.csp-ville-card-body h4 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--csp-black);
}

.csp-ville-card-body p {
  margin: 0;
  font-size: 13.5px;
  color: var(--csp-gold-dark);
  font-weight: 600;
}

/* LISTE GLOBALE TOUTES VILLES */
.mcs-liste-villes,
.csp-liste-villes {
  columns: 3;
  column-gap: 32px;
  list-style: none;
  padding: 0;
  margin-top: 24px;
}

.mcs-liste-villes li,
.csp-liste-villes li {
  break-inside: avoid;
  margin-bottom: 12px;
  font-size: 14px;
}

.mcs-liste-villes a,
.csp-liste-villes a {
  color: var(--csp-text-muted);
  text-decoration: none;
  transition: var(--csp-transition);
}

.mcs-liste-villes a:hover,
.csp-liste-villes a:hover {
  color: var(--csp-gold-dark);
  font-weight: 600;
}

@media (max-width: 768px) {
  .mcs-liste-villes, .csp-liste-villes { columns: 2; }
}
@media (max-width: 480px) {
  .mcs-liste-villes, .csp-liste-villes { columns: 1; }
}


/* ==========================================================================
   TABLEAU / GRILLE DES TARIFS ET PRESTATIONS
   ========================================================================== */

.mcs-filtres-tarifs,
.csp-filtres-tarifs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

.mcs-filtre-separateur,
.csp-filtre-separateur {
  width: 1px;
  height: 24px;
  background: var(--csp-border);
  margin: 0 6px;
}

.mcs-filtre-btn,
.csp-filtre-btn {
  border: 1px solid var(--csp-border);
  background: #ffffff;
  color: var(--csp-text-muted);
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--csp-transition);
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.mcs-filtre-btn:hover,
.csp-filtre-btn:hover {
  border-color: var(--csp-black);
  color: var(--csp-black);
}

.mcs-filtre-btn.active,
.csp-filtre-btn.active {
  background: var(--csp-black);
  border-color: var(--csp-black);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.mcs-tarifs-grid,
.csp-tarifs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}

.mcs-tarif-card,
.csp-tarif-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--csp-border);
  border-radius: var(--csp-radius);
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--csp-shadow);
  transition: var(--csp-transition);
}

.mcs-tarif-card:hover,
.csp-tarif-card:hover {
  border-color: var(--csp-gold);
  box-shadow: var(--csp-shadow-hover);
  transform: translateY(-6px);
}

.mcs-tarif-avant,
.csp-tarif-avant {
  border-color: var(--csp-gold);
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%);
}

.mcs-badge-avant,
.csp-badge-avant {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--csp-black);
  color: var(--csp-gold);
  border: 1px solid var(--csp-gold);
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.mcs-tarif-image,
.csp-tarif-image {
  width: 100%;
  height: 165px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
}

.mcs-tarif-card h3,
.csp-tarif-card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--csp-black);
  letter-spacing: -0.01em;
}

.mcs-tarif-description,
.csp-tarif-description {
  font-size: 14px;
  color: var(--csp-text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.mcs-tarif-meta,
.csp-tarif-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.mcs-tag-mode, .csp-tag-mode,
.mcs-tag-duree, .csp-tag-duree {
  font-size: 12px;
  background: var(--csp-bg-soft);
  color: var(--csp-text-muted);
  border: 1px solid var(--csp-border);
  padding: 5px 14px;
  border-radius: 20px;
}

.mcs-tarif-prix,
.csp-tarif-prix {
  font-size: 32px;
  font-weight: 700;
  color: var(--csp-black);
  margin-bottom: 22px;
}

.mcs-tarif-unite,
.csp-tarif-unite {
  font-size: 14px;
  font-weight: 400;
  color: var(--csp-text-muted);
}

.mcs-btn-reserver,
.csp-btn-reserver {
  display: inline-block;
  text-align: center;
  background: var(--csp-black);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 12.5px;
  transition: var(--csp-transition);
}

.mcs-btn-reserver:hover,
.csp-btn-reserver:hover {
  background: var(--csp-gold-dark);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.3);
}

.mcs-note-tarifs,
.csp-note-tarifs {
  margin-top: 36px;
  font-size: 13px;
  color: var(--csp-text-dim);
  text-align: center;
}

.mcs-note-tarifs a,
.csp-note-tarifs a {
  color: var(--csp-gold-dark);
  text-decoration: none;
  font-weight: 600;
}

.mcs-note-tarifs a:hover,
.csp-note-tarifs a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   TEMPLATE PAGE VILLE BRICKS BUILDER (ÉLÉGANT, DYNAMIQUE & SEO)
   ========================================================================== */

.mcs-page-ville-wrapper,
.csp-page-ville-wrapper {
  padding-top: 30px;
  padding-bottom: 40px;
}

.csp-ville-hero,
.csp-prestation-hero {
  text-align: center;
  margin-bottom: 44px;
  padding: 20px 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.csp-ville-image-hero {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 26px;
}

.csp-ville-hero h1 {
  font-size: 34px;
  font-weight: 800;
  color: var(--csp-black);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.csp-ville-distance-info {
  color: var(--csp-gold-dark);
  font-size: 15px;
  font-weight: 600;
}

.mcs-ville-section,
.csp-ville-section {
  margin-bottom: 40px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.csp-ville-section h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--csp-black);
  border-bottom: 2px solid var(--csp-gold-subtle);
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.csp-btn-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 13px 28px;
  background: var(--csp-black);
  color: #ffffff;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  transition: var(--csp-transition);
}

.csp-btn-cta:hover {
  background: var(--csp-gold-dark);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.3);
}

.csp-btn-cta-principal {
  display: inline-block;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 30px;
  background: var(--csp-black);
  color: #ffffff;
  border: 1px solid var(--csp-black);
  transition: var(--csp-transition);
}

.csp-btn-cta-principal:hover {
  background: var(--csp-gold-dark);
  border-color: var(--csp-gold-dark);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.25);
}

/* SECTION FAQ ACCORDÉON SEO */
.csp-faq-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.csp-faq-item {
  border: 1px solid var(--csp-border);
  border-radius: 12px;
  padding: 18px 22px;
  background: var(--csp-bg-soft);
}

.csp-faq-question {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--csp-black);
}

.csp-faq-answer {
  margin: 0;
  font-size: 14.5px;
  color: var(--csp-text-muted);
  line-height: 1.6;
}

/* ÉTAPES PROCESSUS */
.csp-process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.csp-step-card {
  background: var(--csp-bg-soft);
  border: 1px solid var(--csp-border);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
}

.csp-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--csp-black);
  color: var(--csp-gold);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.csp-step-card h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--csp-black);
}

.csp-step-card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--csp-text-muted);
}

/* ==========================================================================
   PORTFOLIO SLIDESHOW CAROUSEL
   ========================================================================== */

.csp-portfolio-carousel-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto 30px;
  background: var(--csp-bg-soft, #f9f9f9);
  border: 1px solid var(--csp-border, #e5e5e5);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.csp-portfolio-track {
  position: relative;
  width: 100%;
  min-height: 380px;
}

.csp-portfolio-slide {
  display: none;
  width: 100%;
  animation: cspFadeIn 0.4s ease-in-out;
}

.csp-portfolio-slide.active {
  display: block;
}

@keyframes cspFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.csp-slide-media-wrap {
  width: 100%;
  max-height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  overflow: hidden;
}

.csp-slide-img {
  width: 100%;
  max-height: 550px;
  object-fit: contain;
  display: block;
}

.csp-slide-video-container {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.csp-slide-video-container iframe,
.csp-slide-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.csp-slide-caption {
  padding: 16px 22px;
  background: #ffffff;
  border-top: 1px solid var(--csp-border, #e5e5e5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.csp-slide-explication {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--csp-black, #111111);
  font-weight: 500;
}

.csp-slide-copyright {
  font-size: 12.5px;
  color: var(--csp-gold-dark, #a38035);
  font-weight: 600;
}

.csp-carousel-btn {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  color: #111111;
  border: 1px solid var(--csp-border, #e5e5e5);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.csp-carousel-btn:hover {
  background: #ffffff;
  color: var(--csp-gold-dark, #a38035);
  transform: translateY(-50%) scale(1.08);
}

.csp-prev { left: 16px; }
.csp-next { right: 16px; }

.csp-carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  background: #ffffff;
}

.csp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cccccc;
  cursor: pointer;
  transition: all 0.3s ease;
}

.csp-dot.active {
  background: var(--csp-gold-dark, #a38035);
  transform: scale(1.3);
}

/* ==========================================================================
   SUPPORT AUTOMATIQUE DU THÈME SOMBRE (DARKLUP, WP DARK MODE & PREFERS-COLOR-SCHEME)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --csp-bg-main: transparent;
    --csp-bg-card: #1c1c22;
    --csp-bg-card-hover: #24242c;
    --csp-bg-soft: #25252d;
    --csp-black: #ffffff;
    --csp-black-soft: #f0f0f5;
    --csp-text: #f0f0f5;
    --csp-text-muted: #a0a0b0;
    --csp-text-dim: #777788;
    --csp-border: #33333c;
    --csp-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    --csp-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.6);
  }
}

html[data-darklup-theme],
html.dark,
body.dark,
body.dark-mode,
body.darklup-dark-mode,
body[data-darklup-theme],
[data-theme="dark"],
.darklup-dark-mode {
  --csp-bg-main: transparent !important;
  --csp-bg-card: #1c1c22 !important;
  --csp-bg-card-hover: #24242c !important;
  --csp-bg-soft: #25252d !important;
  --csp-black: #ffffff !important;
  --csp-black-soft: #f0f0f5 !important;
  --csp-text: #f0f0f5 !important;
  --csp-text-muted: #a0a0b0 !important;
  --csp-text-dim: #777788 !important;
  --csp-border: #33333c !important;
  --csp-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  --csp-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
}

/* Annulation des conteneurs gris inutiles sous thème sombre */
html[data-darklup-theme] .csp-carte-wrapper,
html[data-darklup-theme] .csp-tableau-tarifs-wrapper,
html[data-darklup-theme] .csp-page-ville-wrapper,
body.darklup-dark-mode .csp-carte-wrapper,
body.darklup-dark-mode .csp-tableau-tarifs-wrapper,
body.darklup-dark-mode .csp-page-ville-wrapper,
.darklup-dark-mode .csp-carte-wrapper,
.darklup-dark-mode .csp-tableau-tarifs-wrapper,
.darklup-dark-mode .csp-page-ville-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Adaptations des cartes, avis, grilles et formulaires pour le mode sombre */
html[data-darklup-theme] .csp-tarif-card,
html[data-darklup-theme] .csp-ville-card,
html[data-darklup-theme] .csp-ville-section,
html[data-darklup-theme] .csp-avis-card,
html[data-darklup-theme] .csp-avis-summary-box,
html[data-darklup-theme] .csp-avis-form-wrapper,
html[data-darklup-theme] .csp-social-callout-box,
html[data-darklup-theme] .csp-avis-invitation-box,
html[data-darklup-theme] .csp-estimation-box,
html[data-darklup-theme] .csp-grid-item,
html[data-darklup-theme] .csp-contact-success-notice,
html[data-darklup-theme] .csp-avis-success-notice,
body.darklup-dark-mode .csp-tarif-card,
body.darklup-dark-mode .csp-ville-card,
body.darklup-dark-mode .csp-ville-section,
body.darklup-dark-mode .csp-avis-card,
body.darklup-dark-mode .csp-avis-summary-box,
body.darklup-dark-mode .csp-avis-form-wrapper,
body.darklup-dark-mode .csp-social-callout-box,
body.darklup-dark-mode .csp-avis-invitation-box,
body.darklup-dark-mode .csp-estimation-box,
body.darklup-dark-mode .csp-grid-item,
body.darklup-dark-mode .csp-contact-success-notice,
body.darklup-dark-mode .csp-avis-success-notice,
.darklup-dark-mode .csp-tarif-card,
.darklup-dark-mode .csp-ville-card,
.darklup-dark-mode .csp-ville-section,
.darklup-dark-mode .csp-avis-card,
.darklup-dark-mode .csp-avis-summary-box,
.darklup-dark-mode .csp-avis-form-wrapper,
.darklup-dark-mode .csp-social-callout-box,
.darklup-dark-mode .csp-avis-invitation-box,
.darklup-dark-mode .csp-estimation-box,
.darklup-dark-mode .csp-grid-item,
.darklup-dark-mode .csp-contact-success-notice,
.darklup-dark-mode .csp-avis-success-notice,
.csp-contact-success-notice.darklup_bg,
.csp-contact-success-notice.darklup_bg_0,
.csp-avis-success-notice.darklup_bg,
.csp-avis-success-notice.darklup_bg_0 {
  background: var(--csp-bg-card, #1c1c22) !important;
  color: var(--csp-text, #f0f0f5) !important;
  border-color: var(--csp-border, #33333c) !important;
}

html[data-darklup-theme] .csp-contact-success-notice *,
html[data-darklup-theme] .csp-avis-success-notice *,
body.darklup-dark-mode .csp-contact-success-notice *,
body.darklup-dark-mode .csp-avis-success-notice *,
.darklup-dark-mode .csp-contact-success-notice *,
.darklup-dark-mode .csp-avis-success-notice *,
.csp-contact-success-notice.darklup_bg *,
.csp-contact-success-notice.darklup_bg_0 *,
.csp-avis-success-notice.darklup_bg *,
.csp-avis-success-notice.darklup_bg_0 * {
  color: #f0f0f5 !important;
}

/* STYLES HARMONISÉS DE TOUS LES CHAMPS (ALIGNÉS SUR client_prenom) */
.csp-form-input,
.csp-contact-form-wrapper input,
.csp-contact-form-wrapper select,
.csp-contact-form-wrapper textarea,
.csp-avis-form-wrapper input,
.csp-avis-form-wrapper select,
.csp-avis-form-wrapper textarea,
.csp-tableau-tarifs-wrapper input,
.csp-tableau-tarifs-wrapper select,
#csp-dynamic-custom-fields input,
#csp-dynamic-custom-fields select,
#csp-dynamic-custom-fields textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid var(--csp-border, #cccccc) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  background-color: var(--csp-bg-soft, #ffffff) !important;
  color: var(--csp-text, #111115) !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.csp-form-input:focus,
.csp-contact-form-wrapper input:focus,
.csp-contact-form-wrapper select:focus,
.csp-contact-form-wrapper textarea:focus,
.csp-avis-form-wrapper input:focus,
.csp-avis-form-wrapper select:focus,
.csp-avis-form-wrapper textarea:focus,
#csp-dynamic-custom-fields input:focus,
#csp-dynamic-custom-fields select:focus,
#csp-dynamic-custom-fields textarea:focus {
  border-color: var(--csp-gold, #c5a059) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2) !important;
}

.csp-contact-form-wrapper label,
.csp-avis-form-wrapper label,
#csp-dynamic-custom-fields label {
  display: block !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  color: var(--csp-text, #111115) !important;
  font-size: 14px !important;
}

/* Adaptations Thème Sombre & Darklup (FORCAGE DU TEXTE BLANC ET FOND SOMBRE IDENTIQUE À client_prenom) */
html[data-darklup-theme] .csp-form-input,
html[data-darklup-theme] .csp-form-input.darklup_bg_1,
html[data-darklup-theme] .csp-contact-form-wrapper input,
html[data-darklup-theme] .csp-contact-form-wrapper select,
html[data-darklup-theme] .csp-contact-form-wrapper textarea,
html[data-darklup-theme] .csp-avis-form-wrapper input,
html[data-darklup-theme] .csp-avis-form-wrapper select,
html[data-darklup-theme] .csp-avis-form-wrapper textarea,
html[data-darklup-theme] #csp-dynamic-custom-fields input,
html[data-darklup-theme] #csp-dynamic-custom-fields input.darklup_bg_1,
html[data-darklup-theme] #csp-dynamic-custom-fields select,
html[data-darklup-theme] #csp-dynamic-custom-fields select.darklup_bg_1,
html[data-darklup-theme] #csp-dynamic-custom-fields textarea,
html[data-darklup-theme] #csp-dynamic-custom-fields textarea.darklup_bg_1,
body.darklup-dark-mode .csp-form-input,
body.darklup-dark-mode .csp-form-input.darklup_bg_1,
body.darklup-dark-mode .csp-contact-form-wrapper input,
body.darklup-dark-mode .csp-contact-form-wrapper select,
body.darklup-dark-mode .csp-contact-form-wrapper textarea,
body.darklup-dark-mode .csp-avis-form-wrapper input,
body.darklup-dark-mode .csp-avis-form-wrapper select,
body.darklup-dark-mode .csp-avis-form-wrapper textarea,
body.darklup-dark-mode #csp-dynamic-custom-fields input,
body.darklup-dark-mode #csp-dynamic-custom-fields input.darklup_bg_1,
body.darklup-dark-mode #csp-dynamic-custom-fields select,
body.darklup-dark-mode #csp-dynamic-custom-fields select.darklup_bg_1,
body.darklup-dark-mode #csp-dynamic-custom-fields textarea,
body.darklup-dark-mode #csp-dynamic-custom-fields textarea.darklup_bg_1,
.darklup-dark-mode .csp-form-input,
.darklup-dark-mode .csp-form-input.darklup_bg_1,
.darklup-dark-mode .csp-contact-form-wrapper input,
.darklup-dark-mode .csp-contact-form-wrapper select,
.darklup-dark-mode .csp-contact-form-wrapper textarea,
.darklup-dark-mode #csp-dynamic-custom-fields input,
.darklup-dark-mode #csp-dynamic-custom-fields input.darklup_bg_1,
.darklup-dark-mode #csp-dynamic-custom-fields select,
.darklup-dark-mode #csp-dynamic-custom-fields select.darklup_bg_1,
.darklup-dark-mode #csp-dynamic-custom-fields textarea,
.darklup-dark-mode #csp-dynamic-custom-fields textarea.darklup_bg_1,
[data-theme="dark"] .csp-form-input,
[data-theme="dark"] #csp-dynamic-custom-fields input,
[data-theme="dark"] #csp-dynamic-custom-fields select,
[data-theme="dark"] #csp-dynamic-custom-fields textarea {
  color: #ffffff !important;
  background-color: #313243 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html[data-darklup-theme] .csp-contact-form-wrapper label,
html[data-darklup-theme] .csp-avis-form-wrapper label,
html[data-darklup-theme] #csp-dynamic-custom-fields label,
html[data-darklup-theme] #csp-dynamic-custom-fields label.darklup--observed,
body.darklup-dark-mode .csp-contact-form-wrapper label,
body.darklup-dark-mode .csp-avis-form-wrapper label,
body.darklup-dark-mode #csp-dynamic-custom-fields label,
body.darklup-dark-mode #csp-dynamic-custom-fields label.darklup--observed,
.darklup-dark-mode #csp-dynamic-custom-fields label,
.darklup-dark-mode #csp-dynamic-custom-fields label.darklup--observed,
[data-theme="dark"] #csp-dynamic-custom-fields label {
  color: #ffffff !important;
}

html[data-darklup-theme] input::placeholder,
html[data-darklup-theme] textarea::placeholder,
body.darklup-dark-mode input::placeholder,
body.darklup-dark-mode textarea::placeholder,
.darklup-dark-mode input::placeholder,
.darklup-dark-mode textarea::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

option,
html[data-darklup-theme] option,
body.darklup-dark-mode option,
.darklup-dark-mode option {
  color: #111115 !important;
  background-color: #ffffff !important;
}

.csp-loc-autocomplete-wrap div,
.csp-loc-suggestions-box div {
  color: #111115 !important;
  background-color: #ffffff !important;
}

html[data-darklup-theme] .csp-loc-autocomplete-wrap div,
html[data-darklup-theme] .csp-loc-autocomplete-wrap div.darklup_bg_2,
html[data-darklup-theme] .csp-loc-autocomplete-wrap div.darklup_bg,
html[data-darklup-theme] .csp-loc-autocomplete-wrap div.darklup--observed,
body.darklup-dark-mode .csp-loc-autocomplete-wrap div,
body.darklup-dark-mode .csp-loc-autocomplete-wrap div.darklup_bg_2,
body.darklup-dark-mode .csp-loc-autocomplete-wrap div.darklup_bg,
body.darklup-dark-mode .csp-loc-autocomplete-wrap div.darklup--observed,
.darklup-dark-mode .csp-loc-autocomplete-wrap div.darklup_bg_2,
[data-theme="dark"] .csp-loc-autocomplete-wrap div {
  color: #ffffff !important;
  background-color: #313243 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-darklup-theme] .csp-avis-nav-btn,
body.darklup-dark-mode .csp-avis-nav-btn,
.darklup-dark-mode .csp-avis-nav-btn {
  background: var(--csp-bg-card, #1c1c22) !important;
  color: var(--csp-text, #f0f0f5) !important;
  border-color: var(--csp-border, #33333c) !important;
}

/* ==========================================================================
   STYLES UNIFIÉS HARMONISÉS (IDENTIQUES À .csp-legende)
   ========================================================================== */

.csp-social-callout-box,
.csp-estimation-box,
.csp-contact-form-wrapper,
.csp-avis-form-wrapper,
.csp-avis-invitation-box,
.csp-contact-success-notice,
.csp-avis-success-notice {
  background: var(--csp-bg-card, #ffffff) !important;
  color: var(--csp-text, #111115) !important;
  border: 1px solid var(--csp-border, #ceead6) !important;
  border-radius: 14px !important;
  padding: 28px 32px !important;
  box-shadow: var(--csp-shadow, 0 8px 24px rgba(0,0,0,0.06)) !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

.csp-contact-success-notice *,
.csp-avis-success-notice * {
  color: inherit !important;
}

.csp-social-callout-box,
.csp-estimation-box {
  padding: 18px 24px !important;
  border-radius: 12px !important;
}

.csp-estimation-box {
  border-left: 4px solid var(--csp-gold) !important;
}

/* Particularité csp-avis-invitation-box : Bordure pointillée dorée */
.csp-avis-invitation-box {
  border: 1px dashed var(--csp-gold, #c5a059) !important;
}

/* Particularité csp-avis-summary-box : Sans cadre & centré */
.csp-avis-summary-box {
  text-align: center !important;
  padding: 10px 0 20px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.csp-avis-summary-box * {
  color: var(--csp-text) !important;
}

/* Particularité csp-avis-card : Carte d'avis avec survol dynamique */
.csp-avis-card {
  background: var(--csp-bg-card) !important;
  color: var(--csp-text) !important;
  border: 1px solid var(--csp-border) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: var(--csp-shadow) !important;
  transition: all 0.3s ease !important;
}

.csp-avis-card:hover {
  border-color: var(--csp-gold) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--csp-shadow-hover) !important;
}

.csp-avis-card p,
.csp-avis-card span,
.csp-avis-card strong,
.csp-avis-card div {
  color: var(--csp-text) !important;
}

/* Particularités des div de réalisations portfolio (csp-portfolio-carousel-container & csp-grid-item) */
.csp-portfolio-carousel-container {
  background: var(--csp-bg-card) !important;
  border: 1px solid var(--csp-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--csp-shadow) !important;
  overflow: hidden !important;
}

.csp-portfolio-carousel-container .csp-slide-caption {
  background: var(--csp-bg-card) !important;
  border-top: 1px solid var(--csp-border) !important;
  color: var(--csp-text) !important;
}

.csp-portfolio-carousel-container .csp-slide-explication {
  color: var(--csp-text) !important;
}

.csp-portfolio-carousel-container .csp-slide-copyright {
  color: var(--csp-gold, #c5a059) !important;
}

.csp-portfolio-carousel-container .csp-carousel-indicators {
  background: var(--csp-bg-card) !important;
  border-top: 1px solid var(--csp-border) !important;
}

.csp-grid-item {
  background: var(--csp-bg-card) !important;
  color: var(--csp-text) !important;
  border: 1px solid var(--csp-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--csp-shadow) !important;
  transition: all 0.3s ease !important;
}

.csp-grid-item:hover {
  border-color: var(--csp-gold) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--csp-shadow-hover) !important;
}

/* 1. Cartes de réalisations dans les fiches prestations (.csp-prestation-realisation-card) */
.csp-prestation-realisation-card {
  background: var(--csp-bg-card) !important;
  color: var(--csp-text) !important;
  border: 1px solid var(--csp-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: var(--csp-shadow) !important;
  transition: all 0.3s ease !important;
}

.csp-prestation-realisation-card:hover {
  border-color: var(--csp-gold) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--csp-shadow-hover) !important;
}

.csp-realisation-img-wrap {
  display: block !important;
  height: 180px !important;
  overflow: hidden !important;
  background: var(--csp-bg-soft) !important;
}

.csp-realisation-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

.csp-prestation-realisation-card:hover .csp-realisation-img-wrap img {
  transform: scale(1.06) !important;
}

.csp-realisation-card-content {
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: space-between !important;
  background: var(--csp-bg-card) !important;
  color: var(--csp-text) !important;
}

.csp-realisation-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--csp-gold, #c5a059) !important;
  letter-spacing: 0.5px !important;
}

.csp-realisation-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 6px 0 14px !important;
}

.csp-realisation-title a {
  color: var(--csp-text) !important;
  text-decoration: none !important;
}

.csp-realisation-link-btn {
  display: inline-block !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 14px !important;
  background: var(--csp-bg-soft) !important;
  color: var(--csp-text) !important;
  border: 1px solid var(--csp-border) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.csp-realisation-link-btn:hover {
  background: var(--csp-gold) !important;
  color: #ffffff !important;
  border-color: var(--csp-gold) !important;
}

/* 2. Boutons de navigation du slider d'avis (.csp-avis-nav-btn) */
.csp-avis-nav-btn {
  background: var(--csp-bg-card) !important;
  color: var(--csp-text) !important;
  border: 1px solid var(--csp-border) !important;
  box-shadow: var(--csp-shadow) !important;
  transition: all 0.3s ease !important;
}

.csp-avis-nav-btn:hover {
  background: var(--csp-gold) !important;
  color: #ffffff !important;
  border-color: var(--csp-gold) !important;
}

/* 3. Badge des prestations dans les cartes d'avis (.csp-avis-prest-badge) */
.csp-avis-prest-badge {
  font-size: 11px !important;
  background: var(--csp-bg-soft) !important;
  color: var(--csp-text-muted) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border: 1px solid var(--csp-border) !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
}

.csp-avis-prest-badge:hover {
  background: var(--csp-bg-card-hover) !important;
  color: var(--csp-text) !important;
  border-color: var(--csp-gold) !important;
}

/* Surcharges Thème Sombre & Darklup */
html[data-darklup-theme] .csp-prestation-realisation-card,
html[data-darklup-theme] .csp-realisation-card-content,
body.darklup-dark-mode .csp-prestation-realisation-card,
body.darklup-dark-mode .csp-realisation-card-content,
.darklup-dark-mode .csp-prestation-realisation-card,
.darklup-dark-mode .csp-realisation-card-content {
  background: #1c1c22 !important;
  color: #f0f0f5 !important;
  border-color: #33333c !important;
}

html[data-darklup-theme] .csp-realisation-link-btn,
html[data-darklup-theme] .csp-avis-prest-badge,
body.darklup-dark-mode .csp-realisation-link-btn,
body.darklup-dark-mode .csp-avis-prest-badge,
.darklup-dark-mode .csp-realisation-link-btn,
.darklup-dark-mode .csp-avis-prest-badge {
  background: #25252d !important;
  color: #a0a0b0 !important;
  border-color: #33333c !important;
}

/* ==========================================================================
   STYLE HARMONISÉ IDENTIQUE DU BOUTON DE SOUMISSION (.csp-avis-submit-btn & .mcs-btn-submit.csp-btn-submit)
   ========================================================================== */

.csp-avis-submit-btn,
.mcs-btn-submit.csp-btn-submit,
.csp-contact-form .csp-btn-submit {
  display: inline-block !important;
  background: var(--csp-black, #111115) !important;
  color: #ffffff !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  text-decoration: none !important;
  text-align: center !important;
}

.csp-avis-submit-btn:hover,
.mcs-btn-submit.csp-btn-submit:hover,
.csp-contact-form .csp-btn-submit:hover {
  background: var(--csp-gold, #c9a050) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(197, 160, 89, 0.35) !important;
}

.csp-avis-submit-btn:disabled,
.mcs-btn-submit.csp-btn-submit:disabled,
.csp-contact-form .csp-btn-submit:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

html[data-darklup-theme] .csp-avis-submit-btn:hover,
html[data-darklup-theme] .mcs-btn-submit.csp-btn-submit:hover,
body.darklup-dark-mode .csp-avis-submit-btn:hover,
body.darklup-dark-mode .mcs-btn-submit.csp-btn-submit:hover,
.darklup-dark-mode .csp-avis-submit-btn:hover,
.darklup-dark-mode .mcs-btn-submit.csp-btn-submit:hover {
  background: var(--csp-gold, #c9a050) !important;
  color: #ffffff !important;
  border-color: var(--csp-gold, #c9a050) !important;
}
/* ===== MULTI-STEP FORM STYLES ===== */
@keyframes cspFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.csp-hidden-accessible {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.csp-btn-prev {
  background: var(--csp-bg-soft, #f7f7f9) !important;
  color: var(--csp-text-muted, #666) !important;
  border: 1px solid var(--csp-border, #ccc) !important;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 0 0 auto;
}
.csp-btn-prev:hover {
  background: #e6e6ec !important;
  color: var(--csp-text, #111) !important;
}

/* Dark mode pour Précédent (via attributs communs ou WP Dark Mode) */
html[data-darklup-theme] .csp-btn-prev,
body.darklup-dark-mode .csp-btn-prev,
[data-theme="dark"] .csp-btn-prev {
  background: #313243 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
html[data-darklup-theme] .csp-btn-prev:hover,
body.darklup-dark-mode .csp-btn-prev:hover,
[data-theme="dark"] .csp-btn-prev:hover {
  background: #3d3e52 !important;
  color: #ffffff !important;
}

#csp-step-2 .mcs-btn-submit {
  flex: 1 1 auto;
}

#csp-btn-next {
  width: auto;
  min-width: 200px;
}

/* ===== PORTFOLIO GALERIE RESPONSIVE MOBILE (2 par ligne) ===== */
@media (max-width: 768px) {
  .csp-portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin: 15px 0 25px !important;
  }
  .csp-portfolio-grid .csp-grid-item > div:not([style*="aspect-ratio"]) {
    height: 145px !important;
  }
}

/* ===== NANOGALLERY2 LIGHTBOX (Titre & Explications réduits) ===== */
.title.nGEvent,
.nifty .title,
.nifty .title.nGEvent,
.nanogallery2 .title,
.ngy2 .title,
div.nifty .title {
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  padding: 4px 0 !important;
}

.nifty .description,
div.nifty .description {
  font-size: 12px !important;
  line-height: 1.3 !important;
  opacity: 0.85 !important;
}

/* ===== ANIMATION LIEN DETAILS ====== */
.csp-lien-details:hover {
  color: var(--csp-gold) !important;
}
.csp-lien-details:hover .csp-arrow-anim {
  transform: translateX(4px);
}