/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
.dnd-section {
    border: 0px !important;
}
@media (max-width: 1139px) {
    .header__container .header__row-2 {
        padding: 0 !important;
    }
}

@media (max-width: 479px) {
    .header__close--toggle, .header__navigation--toggle {
        height: 50px !important;
        width: 50px!important;
    }
}

/* supprimer shadow logo header */
.card:hover, .description-content-wrap, .hs-image-widget {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
}

/* Coche verte remplie */
.li-default {
    background-color: transparent; /* Fond transparent */
    list-style-type: none; /* Supprime le style par défaut */
    padding-left: 25px; /* Ajoute un espace pour l'icône */
    position: relative;
}

.li-default::before {
    content: "\f058"; /* Code Unicode de l'icône Font Awesome 'check-circle' remplie */
    font-family: "Font Awesome 5 Free"; /* Assurez-vous d'avoir Font Awesome inclus */
    font-weight: 900; /* Version remplie (solid) */
    color: rgba(0, 128, 0, 1.0); /* Icône verte */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Coche blanche remplie */
.li-white-circle {
    background-color: transparent; /* Fond transparent */
    list-style-type: none; /* Supprime le style par défaut */
    padding-left: 25px; /* Ajoute un espace pour l'icône */
    position: relative;
}

.li-white-circle::before {
    content: "\f058"; /* Code Unicode de l'icône Font Awesome 'check-circle' remplie */
    font-family: "Font Awesome 5 Free"; /* Assurez-vous d'avoir Font Awesome inclus */
    font-weight: 900; /* Version remplie (solid) */
    color: rgba(255, 255, 255, 1.0); /* Icône blanche */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Coche verte remplie sur fond blanc */
.li-green-square {
    background-color: rgba(255, 255, 255, 1.0); /* Fond blanc */
    list-style-type: none; /* Supprime le style par défaut */
    padding-left: 25px; /* Ajoute un espace pour l'icône */
    position: relative;
    border-radius: 4px; /* Ajoute des coins arrondis au fond */
}

.li-green-square::before {
    content: "\f058"; /* Code Unicode de l'icône Font Awesome 'check-circle' remplie */
    font-family: "Font Awesome 5 Free"; /* Assurez-vous d'avoir Font Awesome inclus */
    font-weight: 900; /* Version remplie (solid) */
    color: rgba(0, 128, 0, 1.0); /* Icône verte */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Appliquer une ombre aux blocs spécifiques */
.card,
.description-content-wrap,
.hs-image-widget{
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Ombre douce */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Transition pour l'effet au survol */
}

.card:hover,
.description-content-wrap,
.hs-image-widget{
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée au survol */
    transform: translateY(-5px); /* Légère élévation au survol */
}

/* Couleur par défaut des icônes */
.card-icon {
    color: #4CAF50; /* Vert par défaut */
}

/* redimensionner bloc icone*/
.card-icon-wrapper {
    height: 60px;
    width: 60px;
}

/* Bloc 1 : Icône verte */
.th-card-1 .col:nth-of-type(1) .card-icon svg,
.th-card-2 .col:nth-of-type(1) .card-icon svg{
    fill: rgba(0, 128, 0, 1.0) !important; /* Icône verte */
}


/* Bloc 2 : Icône bleue */
.th-card-1 .col:nth-of-type(2) .card-icon svg,
.th-card-2 .col:nth-of-type(2) .card-icon svg{
    fill: rgba(0, 102, 204, 1.0) !important; /* Icône bleue */
}


/* Bloc 3 : Icône violette */
.th-card-1 .col:nth-of-type(3) .card-icon svg,
.th-card-2 .col:nth-of-type(3) .card-icon svg{
    fill: rgba(128, 0, 128, 1.0) !important; /* Icône violette */
}

/* Bloc 4 : Icône orange */
.th-card-1 .col:nth-of-type(4) .card-icon svg,
.th-card-2 .col:nth-of-type(4) .card-icon svg{
    fill: rgba(234, 88, 12, 1.0) !important; /* Icône orange */
}

/* Bloc 1 : Fond vert clair */
.th-card-1 .col:nth-of-type(1) .card-icon-wrapper,
.th-card-2 .col:nth-of-type(1) .card-icon-wrapper {
    background-color: rgba(220, 255, 220, 1.0) !important; /* Fond vert clair */
}

/* Bloc 2 : Fond bleu clair */
.th-card-1 .col:nth-of-type(2) .card-icon-wrapper,
.th-card-2 .col:nth-of-type(2) .card-icon-wrapper{
    background-color: rgba(220, 240, 255, 1.0) !important; /* Fond bleu clair */
}

/* Bloc 3 : Fond violet clair */
.th-card-1 .col:nth-of-type(3) .card-icon-wrapper,
.th-card-2 .col:nth-of-type(3) .card-icon-wrapper{
    background-color: rgba(240, 220, 255, 1.0) !important; /* Fond violet clair */
}

/* Bloc 4 : Fond orange clair */
.th-card-1 .col:nth-of-type(4) .card-icon-wrapper,
.th-card-2 .col:nth-of-type(4) .card-icon-wrapper{
    background-color: rgba(255, 237, 213, 1.0) !important; /* Fond orange clair */
}

/* limiter taille des logos dans bandeau outils */
.slide.slick-slide {
    max-width: 200px;
    max-height: 200px;
    overflow: hidden; /* Optionnel : pour éviter que le contenu dépasse */

}



/* custom menu */
/* gestion du menu mobile */
@media (max-width: 1139px) {


  /* Fond gris interne du menu mobile avec transparence à 5 % */
  .header__navigation ul {
    background-color: rgba(76,175, 80, 0.95) !important; /* vert avec 5 % de transparence */
    border-radius: 4px !important; /* Coins arrondis */
    box-sizing: border-box !important; /* Inclure les marges et padding */
  }

  /* Sous-menu en vue mobile */
  .header__navigation ul ul {
    width: calc(100% - 20px) !important; /* Largeur totale moins les marges */
    margin: 10px !important; /* Espacement uniforme à gauche, droite et bas */
    background-color: #ffffff !important; /* Fond blanc */
    border-radius: 4px !important; /* Coins arrondis */
    padding: 10px !important; /* Espacement interne */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* Ombre légère pour séparation visuelle */
  }

  /* Texte du menu principal */
  .header__navigation a {
    color: #ffffff !important; /* Texte blanc */
  }

  .header__navigation a:hover,
  .header__navigation a.active {
    color: #000000 !important; /* Vert du thème au survol ou si actif */
  }

  /* Texte du sous-menu */
  .header__navigation ul ul li a {
    color: #000000 !important; /* Texte noir par défaut */
  }

  .header__navigation ul ul li a:hover,
  .header__navigation ul ul li a.active {
    color: #28a745 !important; /* Vert du thème au survol ou si actif */
  }
}

  /* suppression icone toogle grise*/
@media (max-width: 1139px) {
    .submenu .menu-arrow-bg, 
    .submenu.level-1 > .has-submenu > .menu-arrow-bg, 
    .submenu > .has-submenu > .menu-arrow-bg {
        background-image: none !important;
}
}

/* Ouverture sous menu mobile au clic et flèche bas */
@media (max-width: 1139px) {
  /* Cache les sous-menus par défaut */
  .header__navigation ul ul {
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }

  /* Affiche le sous-menu lorsque le parent est "focus" ou "hover" */
  .header__navigation li:focus-within > ul,
  .header__navigation li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Rendre le texte du séparateur cliquable */
  .header__navigation a {
    cursor: pointer;
  }

/* Ajout d'un indicateur visuel uniquement pour les éléments avec sous-menus */
.header__navigation li:has(ul) > a::after {
  content: " ▼"; /* Flèche vers le bas */
  font-size: 12px;
  margin-left: 5px;
}

/* Animation de la flèche lors du survol */
.header__navigation li:has(ul):hover > a::after {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
/* gestion du menu desktop */

@media (min-width: 1139px) {
  /* Header par défaut (transparent) */
  .header {
    background-color: transparent !important; /* Fond transparent */
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Animation fluide */
  }

  .header .header__navigation a {
    color: #ffffff !important; /* Texte blanc */
    transition: color 0.3s ease-in-out; /* Transition fluide pour la couleur */
  }

  /* Header sticky (fond blanc) */
  .header.active {
    background-color: rgba(255, 255, 255, 0.95) !important; /* Fond blanc */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; /* Ombre plus marquée */
  }

  .header.active .header__navigation a {
    color: #000000 !important; /* Texte noir */
  }

  /* Effet au survol des liens principaux */
  .header .header__navigation a:hover {
    color: #28a745 !important; /* Vert du thème */
  }

  /* Sous-menu en vue desktop */
  .header__navigation ul ul {
    background-color: rgba(76, 175, 80) !important; /* Fond vert légèrement transparent */
    border-radius: 8px !important; /* Coins arrondis plus modernes */
    padding: 15px !important; /* Espacement interne plus généreux */
    box-sizing: border-box !important; /* Inclure les marges et padding */
    position: absolute !important; /* Positionnement absolu */
    left: 0 !important; /* Alignement par défaut */
    top: 100%; /* Position sous le menu principal */
    opacity: 0; /* Initialement invisible */
    visibility: hidden; /* Masqué par défaut */
    transform: translateY(10px); /* Décalage pour l'animation */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* Animation fluide */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    z-index: 1000; /* Assure que le sous-menu est au-dessus */
  }

  /* Correction de l'alignement pour éviter le dépassement */
  .header__navigation ul ul {
    right: auto !important; /* Empêche le dépassement à droite */
    left: 50%; /* Centre le sous-menu */
    transform: translateX(-50%) translateY(10px); /* Centre horizontalement */
  }

  /* Affichage du sous-menu au survol */
  .header__navigation li:hover > ul {
    opacity: 1; /* Visible */
    visibility: visible; /* Affiché */
    transform: translateX(-50%) translateY(0); /* Annule le décalage vertical */
  }

  /* Texte du sous-menu (header par défaut et header.active) */
  .header__navigation ul ul li a {
    color: #ffffff !important; /* Texte blanc */
    transition: color 0.3s ease-in-out; /* Transition fluide pour la couleur */
  }

  /* Texte actif ou au survol dans le sous-menu */
  .header__navigation ul ul li a:hover,
  .header__navigation ul ul li a.active {
    color: #28a745 !important; /* Vert du thème */
    font-weight: bold; /* Texte en gras pour un effet dynamique */
  }

  /* Effet de surbrillance au survol des liens */
  .header__navigation ul ul li a:hover {
    background-color: rgba(40, 167, 69, 0.1); /* Fond vert clair au survol */
    border-radius: 4px; /* Coins arrondis pour l'effet */
    padding: 5px 10px; /* Espacement interne pour l'effet */
  }

  /* Animation des flèches pour les sous-menus */
  .header__navigation .menu-arrow {
    transition: transform 0.3s ease; /* Animation fluide pour la rotation */
  }

  .header__navigation li:hover > .menu-arrow {
    transform: rotate(90deg); /* Rotation de la flèche au survol */
  }

  /* Sous-menu dans le header sticky (header.active) */
  .header.active .header__navigation ul ul li a {
    color: #ffffff !important; /* Texte blanc */
  }

  .header.active .header__navigation ul ul li a:hover,
  .header.active .header__navigation ul ul li a.active {
    color: #28a745 !important; /* Vert du thème */
    font-weight: bold; /* Texte en gras pour un effet dynamique */
    padding: 0 !important; /* Supprime les espacements internes des liens */
    background-color: rgba(76, 175, 80) !important; /* Assure que le fond des liens correspond au fond du sous-menu */
  }
  
  .header__navigation ul ul li a {
    padding: 0 !important; /* Supprime les espacements internes des liens */
    background-color: rgba(76, 175, 80) !important; /* Assure que le fond des liens correspond au fond du sous-menu */
}


}