/* ===========================================
   THEME SWITCHER - Light Mode par défaut
   =========================================== */

/* Désactiver toutes les transitions pendant le changement de thème */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

/* LIGHT MODE = Variables par défaut (style Apple) */
:root {
  --body: #FCFCFC;
  --white: #1D1D1F;
  --title: #E8E8E8;
  --mtitle: #F5F5F7;
  --pra: #6E6E73;
  --subtitle: #F5F5F7;
  --base: #6024ff;
  --hover: white;
  --bg1: #E9F0FF;
  --ftext: #6E6E73;
  --footer: #FBFBFD;
  --cusborder: #E5E5E7;
  --border1: #D2D2D7;
  --ratting: #ffa311;
  --bgsection: #F5F5F7;
  --success: #3FCA90;
  --danger: #ED5050;
  --boxes1: rgba(26, 77, 190, 0.05);
  --cborder: #D2D2D7;
  --gradient: linear-gradient(180deg, #decce2 0%, #bfe9ff 29.72972972972973%, #b28cff 53.37837837837838%, #eaafff 75.33783783783784%, #ffffff 100%);
  --holographic: linear-gradient(180deg, #601FFF 0%, #9260FF 26%, #601FFF 52%, #9260FF 82%, #601FFF 100%);
}

/* DARK MODE = Actif avec data-theme="dark" */
[data-theme="dark"] {
  --body: #171717;
  --white: #ffffff;
  --title: #181818;
  --mtitle: #000D27;
  --pra: #999999;
  --subtitle: #121212;
  --base: #6024ff;
  --hover: white;
  --bg1: #E9F0FF;
  --ftext: #818181;
  --footer: #181818;
  --cusborder: rgb(38, 37, 37);
  --border1: #414141;
  --ratting: #ffa311;
  --bgsection: #000D27;
  --success: #3FCA90;
  --danger: #ED5050;
  --boxes1: rgba(26, 77, 190, 0.05);
  --cborder: #D9D9D9;
  --gradient: linear-gradient(180deg, #decce2 0%, #bfe9ff 29.72972972972973%, #b28cff 53.37837837837838%, #eaafff 75.33783783783784%, #ffffff 100%);
  --holographic: linear-gradient(90deg, rgba(162,74,255,1) 0%, rgba(237,155,255,1) 13%, rgba(255,254,255,1) 28%, rgba(215,224,255,1) 41%, rgba(255,255,255,1) 56%, rgba(234,202,255,1) 69%, rgba(255,255,255,1) 85%, rgba(209,165,255,1) 100%);
}

/* Transition fluide pour tous les changements de couleur */
body,
.header-section,
.banner__section,
.about__section,
.project__section,
.testimonial__section,
.footer-section,
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===========================================
   STYLES DU BOUTON TOGGLE
   =========================================== */

/* Bouton Desktop dans le header */
.theme-toggle-desktop {
  display: flex;
  align-items: center;
  margin-left: 15px;
}

#theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0D0D0D;
  border: 1px solid #2A2A2A;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

#theme-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#theme-toggle i {
  font-size: 18px;
}

[data-theme="dark"] #theme-toggle {
  background: #FCFCFC;
  border: 1px solid #E5E5E7;
  color: #1D1D1F;
}

[data-theme="dark"] #theme-toggle:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Bouton Mobile flottant - Visible sur mobile ET desktop */
.theme-toggle-mobile {
  display: block;
}

#theme-toggle-mobile {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0D0D0D;
  border: 1px solid #2A2A2A;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 10000 !important; /* Au-dessus de tout, y compris Cal (9998) */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

#theme-toggle-mobile:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

#theme-toggle-mobile i {
  font-size: 24px;
}

[data-theme="dark"] #theme-toggle-mobile {
  background: #FCFCFC;
  border: 1px solid #E5E5E7;
  color: #1D1D1F;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] #theme-toggle-mobile:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

/* Responsive - Affichage mobile */
@media (max-width: 991px) {
  .theme-toggle-desktop {
    display: none;
  }
  
  .theme-toggle-mobile {
    display: block;
  }
}

/* Styles pour le bouton flottant Cal.com - Z-index inférieur au theme-toggle */
/* Cal.com crée généralement un élément avec l'attribut data-cal-namespace */
[data-cal-namespace="30min"],
button[data-cal-namespace="30min"],
div[data-cal-namespace="30min"],
iframe[data-cal-namespace="30min"],
[data-cal-namespace="30min"] iframe,
button[data-cal-link],
div[data-cal-link],
[data-cal-link="myka-design/30min"],
button[data-cal-link="myka-design/30min"],
div[data-cal-link="myka-design/30min"] {
  z-index: 9998 !important; /* Juste en dessous du bouton theme-toggle (10000) */
}

/* Cibler les iframes créées par Cal.com - avec sélecteurs très génériques */
iframe[src*="cal.com"],
iframe[src*="app.cal.com"],
iframe[data-cal-namespace],
body > iframe:last-child,
html > body > iframe {
  z-index: 9998 !important;
  max-z-index: 9998 !important;
}

/* Forcer le z-index sur tous les éléments enfants potentiels de Cal */
[data-cal-namespace="30min"] *,
button[data-cal-link] *,
div[data-cal-link] * {
  z-index: 9998 !important;
}

/* Sur mobile, positionner le bouton Cal - theme-toggle est maintenant à gauche */
@media (max-width: 991px) {
  [data-cal-namespace="30min"],
  button[data-cal-namespace="30min"],
  div[data-cal-namespace="30min"],
  .cal-floating-button,
  .cal-floating-button > button {
    bottom: 20px !important; /* Position normale car theme-toggle est à gauche */
    right: 20px !important;
    z-index: 9998 !important; /* Assurer que theme-toggle (10000) reste au-dessus */
  }
}

/* Sur desktop, positionner normalement */
@media (min-width: 992px) {
  [data-cal-namespace="30min"],
  button[data-cal-namespace="30min"],
  div[data-cal-namespace="30min"],
  .cal-floating-button,
  .cal-floating-button > button {
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9998 !important;
  }
}

/* Assurer que le theme-toggle-mobile reste toujours au-dessus de tout */
#theme-toggle-mobile,
.theme-toggle-mobile,
.theme-toggle-mobile button {
  z-index: 10000 !important; /* Au-dessus de Cal (9998) et de tous les autres éléments */
  position: fixed !important;
}

/* Forcer le z-index sur mobile de manière absolue */
@media (max-width: 991px) {
  #theme-toggle-mobile,
  .theme-toggle-mobile,
  .theme-toggle-mobile button {
    z-index: 10000 !important;
    position: fixed !important;
    left: 20px !important;
    right: auto !important;
    bottom: 20px !important;
  }
  
  /* Forcer Cal en dessous */
  [data-cal-namespace],
  [data-cal-link],
  iframe[src*="cal.com"],
  iframe[src*="app.cal.com"],
  button[data-cal-link],
  div[data-cal-link] {
    z-index: 9998 !important;
  }
}

/* Styles pour forcer la couleur du texte Cal en dark mode */
[data-theme="dark"] [data-cal-namespace="30min"] button,
[data-theme="dark"] button[data-cal-link],
[data-theme="dark"] [data-cal-link="myka-design/30min"] {
  color: #000000 !important;
}

[data-theme="dark"] [data-cal-namespace="30min"] button span,
[data-theme="dark"] [data-cal-namespace="30min"] button *,
[data-theme="dark"] button[data-cal-link] * {
  color: #000000 !important;
}

/* ===========================================
   STYLES SPÉCIFIQUES LIGHT MODE
   =========================================== */

/* Fond du bloc services-card en LIGHT MODE uniquement (quand pas d'attribut data-theme) */
html:not([data-theme="dark"]) .services-card {
  background: #F8F8F8 !important;
  border: 2px solid #F4F4F4 !important;
  box-shadow: none !important;
}

/* Style du texte dans services-card en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .services-card .services-title,
html:not([data-theme="dark"]) .services-card .services-subtitle,
html:not([data-theme="dark"]) .services-card .service-item-title,
html:not([data-theme="dark"]) .services-card .service-item-description {
  color: #1D1D1F !important;
}

/* Style des 3 cartes internes en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .services-card .service-item {
  background: #ffffff !important;
  border: 2px solid #EFEFEF !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

/* Logo SVG en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .services-card .token-logo img {
  filter: brightness(0) !important;
}

/* Texte blanc sous les stats en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .services-card .stat-description {
  color: #1D1D1F !important;
}

/* Icônes des 3 cards en noir et bloc carré en gris très clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .services-card .service-icon {
  background: #F5F5F7 !important;
}

html:not([data-theme="dark"]) .services-card .service-icon svg {
  color: #1D1D1F !important;
  stroke: #1D1D1F !important;
}

/* Section brands en blanc en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .brands-section {
  background: #FCFCFC !important;
}

/* Texte de la section brands en gris foncé en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .brands-section .brands-title,
html:not([data-theme="dark"]) .brands-section p,
html:not([data-theme="dark"]) .brands-section span {
  color: #6E6E73 !important;
}

/* Fond du carrousel en blanc en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .brands-section .carousel-container,
html:not([data-theme="dark"]) .brands-section .carousel {
  background: #FCFCFC !important;
}

/* Dégradés (masques) latéraux en blanc en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .brands-section .gradient-mask.left {
  background: linear-gradient(90deg, 
              #FCFCFC 0%, 
              #FCFCFC 30%, 
              rgba(252, 252, 252, 0.8) 70%, 
              rgba(252, 252, 252, 0) 100%) !important;
}

html:not([data-theme="dark"]) .brands-section .gradient-mask.right {
  background: linear-gradient(270deg, 
              #FCFCFC 0%, 
              #FCFCFC 30%, 
              rgba(252, 252, 252, 0.8) 70%, 
              rgba(252, 252, 252, 0) 100%) !important;
}

/* Logos en noir au hover en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .logo-carousel:hover img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important;
}

/* Section bento-grid-container avec le même style que services-card en LIGHT MODE uniquement */
/* Supprimé: ne pas appliquer de fond/contour au conteneur du bento en light */

/* Cartes bento en blanc avec contour en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .bento-card {
  background: #F6F1FF !important;
  border: none !important;
}

/* Texte des cartes bento en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .bento-title,
html:not([data-theme="dark"]) .bento-description {
  color: #1D1D1F !important;
}

/* Container des cartes bento en blanc en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .bento-text-container {
  background: #F6F1FF !important;
}

/* Boutons tabs en gris clair avec texte noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .singletab .tablinks li button {
  background: #F5F5F7 !important;
  color: #1D1D1F !important;
}

/* Bouton tab actif différencié en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .singletab .tablinks li.active button {
  background: #E8E8EB !important;
  color: #1D1D1F !important;
  border: 2px solid #D2D2D7 !important;
}

/* Blocs about__v1wrap avec le même style que les autres sections en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .about__v1wrap {
  background: #F8F8F8 !important;
  border: 2px solid #F4F4F4 !important;
  box-shadow: none !important;
}

/* Textes des blocs about en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .about__onecontent h2,
html:not([data-theme="dark"]) .about__onecontent p,
html:not([data-theme="dark"]) .about__onecontent span {
  color: #1D1D1F !important;
}

/* Cartes abox dans about__v1wrap en blanc avec contour en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .about__onecontent .about__contactwrap .abox {
  background: #ffffff !important;
  border: 2px solid #EFEFEF !important;
}

html:not([data-theme="dark"]) .about__onecontent .about__contactwrap .abox a {
  color: #1D1D1F !important;
}

/* Cartes dans about__v1wrap en blanc avec contour en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .about__v1wrap .abox {
  background: #ffffff !important;
  border: 2px solid #EFEFEF !important;
}

/* Texte dans les cartes about en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .about__v1wrap .abox a,
html:not([data-theme="dark"]) .about__v1wrap .abox span {
  color: #1D1D1F !important;
}

/* Texte des études en gris clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .exprience__box .exri__item .expri__cont h4,
html:not([data-theme="dark"]) .exprience__box .exri__item .expri__cont p {
  color: #505050 !important;
}

/* Bandeaux défilants en violet en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .marquee-wrapper {
  background: #9866FF !important;
}

/* Section skills: outer-card en gris clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .outer-card {
  background: #F5F5F7 !important;
  border: 2px solid #F4F4F4 !important;
  box-shadow: none !important;
}

/* Section skills: inner-card en blanc en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .inner-card {
  background: #ffffff !important;
  border: 2px solid #EFEFEF !important;
  box-shadow: none !important;
}

/* Cartes expertise en gris clair avec contour en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .expertise-card {
  background: #F5F5F7 !important;
  border: 2px solid #EFEFEF !important;
}

/* Titres et bullet points des cartes expertise en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .expertise-card .card-title,
html:not([data-theme="dark"]) .expertise-card .card-list li {
  color: #1D1D1F !important;
}

/* Description des cartes expertise en gris clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .expertise-card .card-description {
  color: #6E6E73 !important;
}

/* Description des cartes expertise en gris clair en DARK MODE également */
[data-theme="dark"] .expertise-card .card-description {
  color: #b0b0b0 !important;
}

/* Bullet points des cartes expertise en blanc en DARK MODE */
[data-theme="dark"] .expertise-card .card-list li {
  color: white !important;
}

/* Texte cta-subtext plus foncé en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .cta-subtext,
html:not([data-theme="dark"]) .info-line {
  color: #505050 !important;
}

/* Texte cta-subtext en noir pour skills-section en LIGHT MODE */
html:not([data-theme="dark"]) .skills-section .cta-subtext {
  color: #1D1D1F !important;
}

/* Texte cta-subtext en blanc pour skills-section en DARK MODE */
[data-theme="dark"] .skills-section .cta-subtext {
  color: white !important;
}

/* Texte cta-subtext en noir pour pricing-cta-section en LIGHT MODE */
html:not([data-theme="dark"]) .pricing-cta-section .cta-subtext {
  color: #1D1D1F !important;
}

/* Texte cta-subtext en blanc pour pricing-cta-section en DARK MODE */
[data-theme="dark"] .pricing-cta-section .cta-subtext {
  color: white !important;
}

/* Texte cta-subtext en noir pour testimonial__section en LIGHT MODE */
html:not([data-theme="dark"]) .testimonial__section .cta-subtext {
  color: #1D1D1F !important;
}

/* Texte cta-subtext en blanc pour testimonial__section en DARK MODE */
[data-theme="dark"] .testimonial__section .cta-subtext {
  color: white !important;
}


/* Section Cal Embed en gris clair pour LIGHT MODE */
html:not([data-theme="dark"]) .cal-embed-section {
  background: #F8F8F8 !important;
}



/* Fond de page en blanc en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .process__section,
html:not([data-theme="dark"]) body {
  background: #FCFCFC !important;
}

/* Hero section - texte "scale votre business" en gris clair sans shadow en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .designers {
  background: #E8E8EB !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) .designers::before {
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Carrousel de projets - carte en gris clair avec contour en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project-carousel__card {
  background: #F8F8F8 !important;
  border: 2px solid #F4F4F4 !important;
  box-shadow: none !important;
}

/* Textes du carrousel en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project-carousel__title,
html:not([data-theme="dark"]) .project-carousel__description {
  color: #1D1D1F !important;
}

/* Tags du carrousel en blanc avec contour en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project-carousel__tag {
  background: #ffffff !important;
  color: #1D1D1F !important;
  border: 2px solid #EFEFEF !important;
}

/* Bouton du carrousel avec lueur violette en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project-carousel__button {
  box-shadow:
    inset 0 -2px 0.5px rgba(107, 50, 222, 0.3),
    inset 0 2px 0.5px rgba(195, 165, 255, 0.5),
    0 0 40px rgba(99, 36, 255, 0.15),
    0 15px 50px rgba(99, 36, 255, 0.1) !important;
}

html:not([data-theme="dark"]) .project-carousel__button:hover {
  box-shadow:
    inset 0 -2px 0.5px rgba(107, 50, 222, 0.5),
    inset 0 2px 0.5px rgba(195, 165, 255, 0.5),
    0 0 50px rgba(99, 36, 255, 0.2),
    0 20px 60px rgba(99, 36, 255, 0.15) !important;
}

/* Flèches de navigation en fond blanc avec flèche noire et contour gris clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project-carousel__arrow {
  background: #ffffff !important;
  border: 2px solid #EFEFEF !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

html:not([data-theme="dark"]) .project-carousel__arrow i {
  color: #1D1D1F !important;
}

html:not([data-theme="dark"]) .project-carousel__arrow:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

/* Shadow de l'image preview moins diffuse et plus claire en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project-carousel__image-container {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

/* Bullet points (indicateurs) en gris clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .indicator {
  background-color: #E8E8EB !important;
}

html:not([data-theme="dark"]) .indicator.active {
  background-color: #6024ff !important;
}

/* Toggle pricing en gris clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .pricing-toggle {
  background: #E8E8EB !important;
  box-shadow: none !important;
  border: 2px solid #D2D2D7 !important;
}

/* Carte Design Partner en gris clair avec contour en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .card-pricing.vitrine {
  background: #F8F8F8 !important;
  border: 2px solid #F4F4F4 !important;
  box-shadow: none !important;
}

/* Textes blancs de la carte en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .design-partner-title-section .title-pricing,
html:not([data-theme="dark"]) .design-partner-left .features-pricing li span,
html:not([data-theme="dark"]) .design-partner-left .amount-pricing {
  color: #1D1D1F !important;
}

/* Titre "Partenaire design dédié" en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .pricing-section-title {
  color: #1D1D1F !important;
}

/* Bouton toggle actif avec dégradé violet holographique en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .toggle-option.active {
  background: linear-gradient(135deg, #601FFF 0%, #9260FF 26%, #601FFF 52%, #9260FF 82%, #601FFF 100%) !important;
  border: 2px solid rgba(96, 31, 255, 0.5) !important;
  color: white !important;
}

/* Subtitle de la carte Design Partner en gris en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .card-pricing.vitrine .subtitle-card-pricing {
  color: #6E6E73 !important;
}

/* Bouton CTA avec lueur violette et contour fin en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .design-partner-cta-button {
  border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    inset 0 -2px 0.5px rgba(107, 50, 222, 0.3),
    inset 0 2px 0.5px rgba(195, 165, 255, 0.5),
    0 0 40px rgba(99, 36, 255, 0.15),
    0 15px 50px rgba(99, 36, 255, 0.1) !important;
}

html:not([data-theme="dark"]) .design-partner-cta-button:hover {
  border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    inset 0 -2px 0.5px rgba(107, 50, 222, 0.5),
    inset 0 2px 0.5px rgba(195, 165, 255, 0.5),
    0 0 50px rgba(99, 36, 255, 0.2),
    0 20px 60px rgba(99, 36, 255, 0.15) !important;
}

/* Checkbox en dégradé noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .design-partner-left .features-pricing li i {
  background: linear-gradient(180deg, #000000 0%, #474747 26%, #060606 52%, #474747 82%, #000000 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Cartes testimonial en gris clair avec contour en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .testimonial-card {
  background: #F2F2F2 !important;
  border: 2px solid #E6E6E6 !important;
  box-shadow: none !important;
}

/* Textes blancs des cartes en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .testimonial-card p {
  color: #1D1D1F !important;
}

/* Les textes violets restent violets (pas de modification) */

/* Le texte "Partenaire Communication..." reste déjà en gris (pas de modification) */

/* ===== NOUVELLE GRILLE DE TÉMOIGNAGES - LIGHT MODE ===== */
/* Cartes de témoignages en gris clair avec contour en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .testimonial-grid-card {
  background: #F2F2F2 !important;
  border: 2px solid #E6E6E6 !important;
  box-shadow: none !important;
}

/* Textes blancs des cards témoignages en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .testimonial-grid-text,
html:not([data-theme="dark"]) .testimonial-grid-card .author-name {
  color: #1D1D1F !important;
}

/* Titre de l'auteur en gris foncé en LIGHT MODE */
html:not([data-theme="dark"]) .testimonial-grid-card .author-title {
  color: #505050 !important;
}

/* Border top de l'auteur plus discret en LIGHT MODE */
html:not([data-theme="dark"]) .testimonial-grid-author {
  border-top: 1px solid #E8E8EB !important;
}

/* CTA Card en gris clair avec contour en LIGHT MODE */
html:not([data-theme="dark"]) .testimonial-grid-cta {
  background: #F8F8F8 !important;
  border: 1px solid rgba(152, 102, 255, 0.15) !important;
  box-shadow: 0 0 20px rgba(152, 102, 255, 0.08), inset 0 0 20px rgba(152, 102, 255, 0.04) !important;
}

/* Titre CTA en noir en LIGHT MODE */
html:not([data-theme="dark"]) .cta-title {
  color: #1D1D1F !important;
}

/* Disponibilité en gris foncé en LIGHT MODE */
html:not([data-theme="dark"]) .cta-availability {
  color: #505050 !important;
}

/* Étoiles CTA en violet en LIGHT MODE */
html:not([data-theme="dark"]) .cta-stars i {
  color: #6024FF !important;
}

/* Section Numerily - bloc en gris clair avec contour en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .numerily__card {
  background: #F8F8F8 !important;
  border: 2px solid #F4F4F4 !important;
  box-shadow: none !important;
}

/* Textes blancs de la section Numerily en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .numerily__title {
  color: #1D1D1F !important;
}

/* Texte gris de Numerily plus foncé en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .numerily__subtitle {
  color: #505050 !important;
}

/* Adoucissement de l'ombre du logo Numerily en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .numerily__logo-placeholder {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  border: none !important;
}

/* Section award - remplacer image de fond par gris clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .awoard__section {
  background: #F8F8F8 !important;
  background-image: none !important;
}

/* Textes blancs de la section award en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .award__wraper .table tbody tr td {
  color: #1D1D1F !important;
}

/* Textes gris de la section award plus foncé en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .award__wraper .table tbody tr td[style*="color: grey"],
html:not([data-theme="dark"]) .award__wraper .table tbody tr td.cusnoe {
  color: #505050 !important;
}

/* SVG logo en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .awoard__section svg {
  filter: brightness(0) invert(0) !important;
}

/* Étoiles animées en noir sans shadow en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .awoard__section #star-animation svg {
  filter: brightness(0) !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) .awoard__section #star-animation {
  box-shadow: none !important;
}

/* Cercles animés en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .awoard__section circle {
  fill: #1D1D1F !important;
  stroke: #1D1D1F !important;
}

/* Section project__metting - remplacer image de fond par gris clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project__metting {
  background: #F8F8F8 !important;
  background-image: none !important;
}

/* Textes blancs de la section project__metting en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .pro__metting__content h2,
html:not([data-theme="dark"]) .pro__metting__content p {
  color: #1D1D1F !important;
}

/* SVG logo de la section project__metting en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project__metting svg {
  filter: brightness(0) invert(0) !important;
}

/* Étoiles animées de la section project__metting en noir sans shadow en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project__metting .token-logo-container svg,
html:not([data-theme="dark"]) .project__metting .token-logo-container img {
  filter: brightness(0) !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) .project__metting .token-logo-container {
  box-shadow: none !important;
}

/* Animation des étoiles .star-1, .star-2, .star-3 en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project__metting .star-1,
html:not([data-theme="dark"]) .project__metting .star-2,
html:not([data-theme="dark"]) .project__metting .star-3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 0L13.5 9L22.5 12L13.5 15L12 24L10.5 15L1.5 12L10.5 9z'/%3E%3C/svg%3E") !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Cercles animés (ondes concentriques) de la section project__metting en gris en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project__metting .token-logo::before,
html:not([data-theme="dark"]) .project__metting .token-logo::after,
html:not([data-theme="dark"]) .project__metting .token-logo-container::before {
  border-color: rgba(29, 29, 31, 0.3) !important;
}

/* SVG logo de la section services-card en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .services-card .token-logo-container svg,
html:not([data-theme="dark"]) .services-card .token-logo-container img {
  filter: brightness(0) !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) .services-card .token-logo-container {
  box-shadow: none !important;
}

/* Animation des étoiles .star-1, .star-2, .star-3 dans services-card en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .services-card .star-1,
html:not([data-theme="dark"]) .services-card .star-2,
html:not([data-theme="dark"]) .services-card .star-3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 0L13.5 9L22.5 12L13.5 15L12 24L10.5 15L1.5 12L10.5 9z'/%3E%3C/svg%3E") !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Cercles animés (ondes concentriques) de la section services-card en gris en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .services-card .token-logo::before,
html:not([data-theme="dark"]) .services-card .token-logo::after,
html:not([data-theme="dark"]) .services-card .token-logo-container::before {
  border-color: rgba(29, 29, 31, 0.3) !important;
}

/* Bouton copier email en gris en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .copy-btn {
  background-color: #E8E8EB !important;
  border: 1px solid #D2D2D7 !important;
}

html:not([data-theme="dark"]) .copy-btn:hover {
  background-color: #D2D2D7 !important;
}

/* SVG du bouton copier email en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .copy-btn svg {
  filter: brightness(0) !important;
}

html:not([data-theme="dark"]) .copy-btn svg rect,
html:not([data-theme="dark"]) .copy-btn svg path {
  stroke: #1D1D1F !important;
}

/* Cartes à la carte en gris clair avec contour en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .pricing-card-a-la-carte {
  background: #F8F8F8 !important;
  border: 2px solid #F4F4F4 !important;
  box-shadow: none !important;
}

/* Textes blancs des cartes à la carte en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .pricing-card-a-la-carte .title-pricing,
html:not([data-theme="dark"]) .pricing-card-a-la-carte .subtitle-card-pricing,
html:not([data-theme="dark"]) .pricing-card-a-la-carte .description-pricing,
html:not([data-theme="dark"]) .pricing-card-a-la-carte .description-pricing-purple,
html:not([data-theme="dark"]) .pricing-card-a-la-carte .amount-pricing,
html:not([data-theme="dark"]) .pricing-card-a-la-carte .features-pricing li span {
  color: #1D1D1F !important;
}

/* Les textes gris restent gris (pas de modification) */

/* Hero section - image de fond blanche en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .banner__section--homepage {
  background-image: url(../img/banner/banner7-bgbiswhite.webp) !important;
}

html:not([data-theme="dark"]) .banner__section--homepage {
  background: url(../img/banner/banner7-bgbiswhite.webp) no-repeat center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Page contact - pas d'image de fond en light mode */
html:not([data-theme="dark"]) .banner__section--contact {
  background: none !important;
  background-image: none !important;
}

/* Texte animé en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .span-creative {
  color: #1D1D1F !important;
}

/* Lueur violette moins diffuse, plus claire et légère en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .span-title-holographic {
  background: linear-gradient(180deg, #601FFF 0%, #9260FF 26%, #601FFF 52%, #9260FF 82%, #601FFF 100%);
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: opacity(1) !important;
}

/* Badge "Disponible pour" avec fond plus clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .bn__currently {
  color: #1D1D1F !important; /* Couleur noire au lieu de gris */
  font-weight: 500 !important; /* Poids de police augmenté légèrement à 500 */
  background-color: #F5F5F5 !important; /* Fond éclairci */
  border: 1px solid rgba(210, 210, 215, 0.5) !important;
}

/* Badge "Disponible pour" avec fond plus opaque en DARK MODE */
[data-theme="dark"] .bn__currently {
  background-color: rgba(38, 38, 38, 0.8) !important; /* Fond plus opaque */
  border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Bordure légèrement plus visible */
}

/* Fond blanc derrière le hero et le header en LIGHT MODE uniquement */
html:not([data-theme="dark"]) body {
  background: #FCFCFC !important;
  background-color: #FCFCFC !important;
}

html:not([data-theme="dark"]) .banner__section--homepage {
  background-color: #FFFFFF !important;
}

/* Container du header en gris un peu plus foncé en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .header-container {
  background: #FFFFFF !important;
  border: 1px solid rgba(240, 240, 242, 0.8) !important;
  box-shadow: rgba(70, 71, 74, 0.01) 0px 1px 1px -0.5px, rgba(69, 70, 74, 0.015) 0px 2px 2px -1px, rgba(66, 68, 71, 0.015) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.01) 0px 5px 5px -2.5px, rgba(62, 64, 66, 0.01) 0px 10px 10px -5px, rgba(58, 59, 61, 0.01) 0px 24px 20px -8px !important;
}

/* Logo SVG conserve sa couleur originale en LIGHT MODE */
/* Filtre supprimé pour conserver la couleur de base */

/* Logo desktop - afficher le bon selon le thème */
/* Par défaut, masquer le logo dark */
.header-wrapper .main__logo .logo .logo-desktop-dark {
  display: none;
}

/* En dark mode : masquer light, afficher dark */
html[data-theme="dark"] .main__logo .logo .logo-desktop-light,
html:not([data-theme]) .main__logo .logo .logo-desktop-light {
  display: none !important;
}

html[data-theme="dark"] .main__logo .logo .logo-desktop-dark,
html:not([data-theme]) .main__logo .logo .logo-desktop-dark {
  display: block !important;
}

/* En light mode : afficher light, masquer dark */
html:not([data-theme="dark"]) .main__logo .logo .logo-desktop-light {
  display: block !important;
}

html:not([data-theme="dark"]) .main__logo .logo .logo-desktop-dark {
  display: none !important;
}

/* Masquer les logos desktop et afficher le logo mobile en dessous de 500px */
@media (max-width: 500px) {
  .header-wrapper .main__logo .logo .logo-desktop,
  .header-wrapper .main__logo .logo .logo-desktop-light,
  .header-wrapper .main__logo .logo .logo-desktop-dark,
  html[data-theme="dark"] .main__logo .logo .logo-desktop-dark,
  html:not([data-theme]) .main__logo .logo .logo-desktop-dark,
  html:not([data-theme="dark"]) .main__logo .logo .logo-desktop-light {
    display: none !important;
  }
  
  .header-wrapper .main__logo .logo .logo-mobile {
    display: block !important;
  }
}

/* Logo mobile en noir en LIGHT MODE */
html:not([data-theme="dark"]) .main__logo .logo .logo-mobile {
  filter: brightness(0) !important;
}

/* Logo mobile en blanc en DARK MODE */
html[data-theme="dark"] .main__logo .logo .logo-mobile {
  filter: brightness(0) invert(1) !important;
}

/* Lueur violette pour le bouton "Call avec Myka" en LIGHT MODE - Inner shadows uniquement (sans lueur externe) */
html:not([data-theme="dark"]) .custom-gradient-morph-button {
  box-shadow: 
    inset 0 -2px 0.5px rgba(107, 50, 222, 0.3),
    inset 0 2px 0.5px rgba(195, 165, 255, 0.5) !important;
}

html:not([data-theme="dark"]) .custom-gradient-morph-button:hover {
  transform: translateY(-2px);
  box-shadow: 
    inset 0 -2px 0.5px rgba(107, 50, 222, 0.5),
    inset 0 2px 0.5px rgba(195, 165, 255, 0.5),
    0 0 25px rgba(96, 36, 255, 0.4),
    0 0 50px rgba(96, 36, 255, 0.2) !important;
}

html:not([data-theme="dark"]) .custom-gradient-burger-button {
  background: rgba(232, 232, 235, 0.95) !important;
  border-color: rgba(210, 210, 215, 0.6) !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) .custom-gradient-burger-button:hover {
  background: rgba(232, 232, 235, 1) !important;
  border-color: rgba(210, 210, 215, 0.8) !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) .custom-gradient-burger-button i {
  color: #505050 !important;
}

/* Supprimer toutes les shadows du bouton burger pour les deux modes */
.custom-gradient-burger-button,
.custom-gradient-burger-button:hover {
  box-shadow: none !important;
}

/* Bouton social LinkedIn à droite en gris avec icône noire en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .banner__soci li a {
  background-color: #E8E8EB !important;
}

html:not([data-theme="dark"]) .banner__soci li a i {
  color: #1D1D1F !important;
  transition: color 0.3s ease !important;
}

html:not([data-theme="dark"]) .banner__soci li a:hover i {
  color: #6024ff !important;
}

/* Contour du bouton "Booker un call" en gris au survol en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .custom-button:hover {
  border-color: #D2D2D7 !important;
  border-width: 2px !important;
}

/* Bouton burger de la même couleur que le header en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .header-bar span {
  background: #505050 !important;
}

html:not([data-theme="dark"]) .header-bar span:first-child,
html:not([data-theme="dark"]) .header-bar span:nth-child(2),
html:not([data-theme="dark"]) .header-bar span:last-child {
  background: #505050 !important;
}

/* Footer - image de fond blanche en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .footer__section {
  background-image: url(../img/banner/banner5-bgwhite.png) !important;
}

html:not([data-theme="dark"]) .footer__section {
  background: url(../img/banner/banner5-bgwhite.png) no-repeat center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Texte "Recommandé par nos clients" en gris en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .review-text {
  color: #6E6E73 !important;
}

/* Contour des avatars en gris au lieu de noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .avatar-circle {
  border: 2px solid #D2D2D7 !important;
}

/* Bloc "Infos Projet" - Pas de fond, texte noir en LIGHT MODE */
/* Fond du bloc infos projet en LIGHT MODE - blanc */
html:not([data-theme="dark"]) .prot__detail__contact {
  background-color: #FFFFFF !important;
}

/* Fond du bloc infos projet en DARK MODE - noir */
[data-theme="dark"] .prot__detail__contact {
  background-color: #121212 !important;
}

html:not([data-theme="dark"]) .prot__detail__contact h3,
html:not([data-theme="dark"]) .prot__detail__contact .prot__itembox .prot__left .items h5 {
  color: #1D1D1F !important;
}

html:not([data-theme="dark"]) .prot__detail__contact .prot__itembox .prot__left .items p {
  color: #6E6E73 !important;
}

/* Section "Mes autres projets" - Fond gris clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .protfolidetails__section {
  background: #F8F8F8 !important;
  background-image: none !important;
}

/* Bouton avec flèche en bloc gris avec flèche noire en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .project__item .common__icon {
  background-color: #E8E8EB !important;
}

html:not([data-theme="dark"]) .project__item .common__icon i {
  color: #1D1D1F !important;
}

html:not([data-theme="dark"]) .project__item:hover .common__icon {
  background-color: rgb(29, 29, 29) !important;
  box-shadow: none !important;
  border: none !important;
}

html:not([data-theme="dark"]) .project__item:hover .common__icon i {
  color: #ffffff !important;
}

/* Section Contact - Bloc de droite et cartes en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .contact__rightside {
  background: #ffffff !important;
  background-image: none !important;
}

html:not([data-theme="dark"]) .contact__item {
  background-color: #F8F8F8 !important;
}

html:not([data-theme="dark"]) .contact__item .he1 {
  color: #6E6E73 !important;
}

html:not([data-theme="dark"]) .contact__item a {
  color: #1D1D1F !important;
}

html:not([data-theme="dark"]) .contact__item .address {
  color: #1D1D1F !important;
}

html:not([data-theme="dark"]) .contact__rightside h4 {
  color: #1D1D1F !important;
}

/* Titre page Contact - Réduire taille et mettre "votre projet..." en gris clair (tous modes) */
.breadcrumnd__wrap h1 {
  font-size: 42px !important;
}

.breadcrumnd__wrap h1 .text-muted-light {
  color: #6E6E73 !important;
}

[data-theme="dark"] .breadcrumnd__wrap h1 .text-muted-light {
  color: #999999 !important;
}

/* Étoiles animées page Contact - Logo et étoiles en noir, ronds en gris (LIGHT MODE uniquement) */
/* Boutons "Book a call" - Adoucir les shadows en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .book-call-button {
  box-shadow: 0px 2px 8px 0px rgba(96, 31, 255, 0.15) inset !important;
}

html:not([data-theme="dark"]) .book-call-button::before {
  background: radial-gradient(circle, rgba(96, 31, 255, 0.1) 0%, rgba(96, 31, 255, 0) 70%) !important;
}

html:not([data-theme="dark"]) .book-call-button:hover {
  box-shadow: 0px 8px 20px 0px rgba(96, 31, 255, 0.2), /* Lueur externe plus douce */
              0px 3px 10px 0px rgba(255, 255, 255, 0.15) inset !important; /* Lueur interne plus douce */
}

/* Boutons "custom-gradient-morph-button" - Inner shadows uniquement (sans lueur externe) en LIGHT MODE */
html:not([data-theme="dark"]) .custom-gradient-morph-button {
  box-shadow: 
    inset 0 -2px 0.5px rgba(107, 50, 222, 0.3),
    inset 0 2px 0.5px rgba(195, 165, 255, 0.5) !important;
}

html:not([data-theme="dark"]) .custom-gradient-morph-button:hover {
  transform: translateY(-2px);
  box-shadow: 
    inset 0 -2px 0.5px rgba(107, 50, 222, 0.5),
    inset 0 2px 0.5px rgba(195, 165, 255, 0.5),
    0 0 18px rgba(96, 36, 255, 0.2),
    0 0 35px rgba(96, 36, 255, 0.1) !important;
}

/* Cacher la vidéo hero section en dessous de 1352px (tous modes) */
@media (max-width: 1352px) {
  .video-container-home {
    display: none !important;
  }
  
  .banner__thumb {
    display: none !important;
  }
}

/* Rendre le header plus compact en dessous de 1352px (tous modes) */
@media (max-width: 1352px) {
  .header-wrapper .main-menu {
    gap: 0 3px !important;
  }
  
  .header-wrapper .main-menu li a {
    padding: 10px 8px !important;
    font-size: 14px !important;
  }
  
  .header-wrapper .main__logo .logo {
    margin-right: 12px !important;
  }
  
  .header-wrapper .menu__components {
    gap: 8px !important;
  }
  
  .header-wrapper .menu__right__components {
    gap: 8px !important;
  }
}

/* Étoile section brands - Mettre en violet en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .brands-section img[alt="star"],
html:not([data-theme="dark"]) .brands-section .personal__head img {
  filter: brightness(0) saturate(100%) invert(38%) sepia(100%) saturate(5000%) hue-rotate(250deg) brightness(0.95) contrast(1.1) !important;
}

html:not([data-theme="dark"]) .token-logo img {
  filter: brightness(0) !important;
}

html:not([data-theme="dark"]) .star-1,
html:not([data-theme="dark"]) .star-2,
html:not([data-theme="dark"]) .star-3 {
  filter: brightness(0) !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) .token-logo::before,
html:not([data-theme="dark"]) .token-logo::after,
html:not([data-theme="dark"]) .token-logo-container::before,
html:not([data-theme="dark"]) .token-logo-container::after {
  border-color: rgba(110, 110, 115, 0.3) !important;
}

/* Alignement vertical des étoiles et du texte "Recommandé par nos clients" en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .client-reviews {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

html:not([data-theme="dark"]) .rating {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}

html:not([data-theme="dark"]) .client-avatars {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}

/* Side menu en gris clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .subside__barmenu {
  background: #E8E8EB !important;
}

/* Logo SVG du side menu en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .subside__barmenu .side-logo img {
  filter: brightness(0) !important;
}

/* Texte blanc du side menu en noir en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .subside__barmenu .sub__contact__wrapper p,
html:not([data-theme="dark"]) .subside__barmenu .sub__contact__wrapper span {
  color: #1D1D1F !important;
}

/* Texte des boutons CTA du side menu en blanc en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .subside__barmenu .custom-gradient-morph-button span {
  color: white !important;
}

/* Footer - Texte blanc en light mode, noir en dark mode */
html:not([data-theme="dark"]) .footer__top .get__content p,
html:not([data-theme="dark"]) .footer__top .get__content a,
html:not([data-theme="dark"]) .footer__top .contact-info,
html:not([data-theme="dark"]) .footer__top .email-link {
  color: #ffffff !important;
}

[data-theme="dark"] .footer__top .get__content p,
[data-theme="dark"] .footer__top .get__content a,
[data-theme="dark"] .footer__top .contact-info,
[data-theme="dark"] .footer__top .email-link {
  color: #000000 !important;
}

/* Copyright - Texte blanc sur fond sombre en light mode, noir sur fond clair en dark mode */
html:not([data-theme="dark"]) .footer__bottom .copyright p,
html:not([data-theme="dark"]) .footer__bottom .copyright .white,
html:not([data-theme="dark"]) .footer__bottom .copyright a {
  color: #ffffff !important;
}

[data-theme="dark"] .footer__bottom .copyright p,
[data-theme="dark"] .footer__bottom .copyright .white,
[data-theme="dark"] .footer__bottom .copyright a {
  color: #000000 !important;
}

html:not([data-theme="dark"]) .subside__barmenu .custom-button span {
  color: white !important;
}

/* Bloc copyright en gris clair en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .footer__bottom {
  background: rgba(33, 33, 33, 0.95) !important;
}

/* ===========================================
   CARROUSEL DE PROJETS - LIGHT MODE
   =========================================== */

/* Section carrousel de projets en blanc en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .projects-carousel-section {
  background: #FCFCFC !important;
}

/* Container du carrousel en blanc en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .projects-carousel-container {
  background: #FCFCFC !important;
}

/* Dégradés (masques) latéraux en blanc en LIGHT MODE uniquement */
html:not([data-theme="dark"]) .projects-gradient-mask {
  width: 160px !important;
}

html:not([data-theme="dark"]) .projects-gradient-mask.left {
  background: linear-gradient(90deg, 
              #FCFCFC 0%, 
              #FCFCFC 20%, 
              rgba(252, 252, 252, 0.95) 40%,
              rgba(252, 252, 252, 0.85) 55%,
              rgba(252, 252, 252, 0.65) 70%,
              rgba(252, 252, 252, 0.4) 82%,
              rgba(252, 252, 252, 0.2) 90%,
              rgba(252, 252, 252, 0) 100%) !important;
}

html:not([data-theme="dark"]) .projects-gradient-mask.right {
  background: linear-gradient(270deg, 
              #FCFCFC 0%, 
              #FCFCFC 20%, 
              rgba(252, 252, 252, 0.95) 40%,
              rgba(252, 252, 252, 0.85) 55%,
              rgba(252, 252, 252, 0.65) 70%,
              rgba(252, 252, 252, 0.4) 82%,
              rgba(252, 252, 252, 0.2) 90%,
              rgba(252, 252, 252, 0) 100%) !important;
}

/* Contour des vignettes de projets à 20% d'opacité en DARK MODE */
[data-theme="dark"] .project-vignette {
  border-color: rgba(220, 220, 220, 0.2) !important;
}

/* ===========================================
   CONTOURS DES AVATARS - THÈME ADAPTATIF
   =========================================== */

/* Light Mode - Contour blanc */
html:not([data-theme="dark"]) .avatar-stacked {
  border-color: #FFFFFF !important;
}

/* Dark Mode - Contour noir */
[data-theme="dark"] .avatar-stacked {
  border-color: #000000 !important;
}

/* ===========================================
   TEXTE DE LA NOTE - THÈME ADAPTATIF
   =========================================== */

/* Light Mode - Texte noir */
html:not([data-theme="dark"]) .review-text-new {
  color: #000000 !important;
}

/* Dark Mode - Texte blanc pour la lisibilité */
[data-theme="dark"] .review-text-new {
  color: #FFFFFF !important;
}