/*!
Theme Name: Hello Elementor Child
Theme URI: https://crocoblock.com/
Author: Crocoblock
Author URI: https://www.erlem-technologies.com/
Description: Child theme for Hello Elementor with all CrocoBlock features compatibility.
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor-child
*/

/* DÉBUT du menu latéral */
/* Supprime le fond noir du off-canvas */
#off-canvas-4cc076f .e-off-canvas__overlay {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Cacher les deux boutons par défaut */
#menu-on,
#menu-off {
  display: none !important;
}

/* Sur mobile : burger par défaut */
@media (max-width: 1024px) {
  #menu-on {
    display: inline-block !important;
  }
  #menu-off {
    display: none !important;
  }

  /* Quand le menu est ouvert : on affiche le bouton croix */
  body.offcanvas-opened #menu-on {
    display: none !important;
  }

  body.offcanvas-opened #menu-off {
    display: inline-block !important;
  }
}
/* FIN du menu latéral */

:root {
  --eb-global-background-color: #ffffff; /* Blanc - couleur de base (fond, surfaces principales) */
  --eb-global-background-color-grey: #8888890F; /* Gris très pâle (avec transparence) - variante de fond ou overlay */
  --eb-global-title-color: #111013; /* Noir très foncé - utilisé pour les titres */
  --eb-global-text-color: #111013; /* Noir très foncé - utilisé pour les texte */
  --eb-global-accent-color: #D90A2C; /* Rouge - utilisé pour l'accentuation principal */
	
	
	
  --base-color: #ffffff; /* Blanc - couleur de base (fond, surfaces principales) */
  --base-variant: #8888890F; /* Gris très pâle (avec transparence) - variante de fond ou overlay */
  --text-title-color: #161518; /* Noir très foncé - utilisé pour les titres */
  --text-color: #161518; /* Noir très foncé - utilisé pour le texte principal */
	
	
  --secondary-text: #a4a5b8;
  --primary-color: #3a435d;
  --accent-color: #0071ff;

}

.darkmode{
  --eb-global-background-color: #111013; /* Noir - couleur de base (fond, surfaces principales) */
  --eb-global-background-color-grey: #8888890F; /* Gris très pâle (avec transparence) - variante de fond ou overlay */
  --eb-global-title-color: #FFFFFF; /* Blanc - utilisé pour les titres */
  --eb-global-text-color: #FFFFFF; /* Blanc - utilisé pour les texte */
  --eb-global-accent-color: #D90A2C; /* Rouge - utilisé pour l'accentuation principal */
	
	
	
	
	
	
	
  --base-color: #111013;
  --base-variant: #8888890F;
  --text-title-color: #fff;
  --text-color: #ffffffbf;
	
	
	
	
  --secondary-text: #a4a5b8;
  --primary-color: #3a435d;
  --accent-color: #0071ff;

}

body{
  background-color: var(--eb-global-background-color);
  color: var(--eb-global-text-color)!important;
}

/* === Theme Switch Button Styles === */

/* Base styling for the theme toggle button */
#theme-switch {
  height: 50px;
  width: 50px;
  padding: 0;
  border-radius: 50%; /* Makes the button circular */
  background-color: var(--base-variant); /* Uses a CSS variable for background color */
  display: flex;
  justify-content: center;
  align-items: center; /* Centers the icon inside the button */
}

/* Set the fill color of all SVG icons inside the button */
#theme-switch svg {
  fill: var(--primary-color); /* Icon color from CSS variable */
}

/* By default, hide the second (dark mode) icon */
#theme-switch svg:last-child {
  display: none;
}

/* When dark mode is active: hide the first (light mode) icon */
.darkmode #theme-switch svg:first-child {
  display: none;
}

/* When dark mode is active: show the second (dark mode) icon */
.darkmode #theme-switch svg:last-child {
  display: block;
}

/* === Footer === */

#footer {
  background-color: var(--base-variant);
}

#footer h3 {
  color: var(--text-title-color)!important;
  font-size: 16px;
}

.eb-grey {
	background-color: var(--eb-global-background-color-grey)!important;
  	color: var(--eb-global-text-color)!important;
}
.eb-grey h2 {
  color: var(--eb-global-title-color)!important;
}