scro<link href="https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Noto+Sans&family=Open+Sans&family=Playfair+Display&family=Poppins&family=Roboto&family=Source+Sans+Pro&family=Ubuntu&display=swap" rel="stylesheet">
<style>
  .main-column {
    padding-left: 0px;
  }
</style>
<style>
    .hidden {
        display: none !important;
        width: 0;
    }

    .full-width {
        flex: 1; /* Assure une largeur de 100% */
        width: 100%;
    }

    .left-column {
    width: 350px;
    transition: width 0.3s ease-in-out;
  }
    .left-column,
    .main-column {
        min-height: 80vh;
    }
   
</style>
<style>

        .main-content {
            flex: 1;
            overflow: auto;
        }

        .embed {
            border: 1px solid #ccc;
            padding: 10px;
            width: 100%;
            height: 100%;
        }
    </style>
    <style>
#formSelectColors, #formSelectGlobalColors , #formSelectNavColors, #formSelectLightColors, #formSelectDarkColors{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#formSelectColors .color-row, 
#formSelectGlobalColors .color-row,
#formSelectNavColors .color-row,
#formSelectLightColors .color-row,
#formSelectDarkColors .color-row {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
    justify-content: center;
}

#formSelectColors .color-group, 
#formSelectGlobalColors .color-group, 
#formSelectNavColors .color-group,
#formSelectLightColors .color-group,
#formSelectDarkColors .color-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#formSelectColors input[type="color"],
#formSelectGlobalColors input[type="color"],
#formSelectNavColors input[type="color"],
#formSelectLightColors input[type="color"],
#formSelectDarkColors input[type="color"]
{
    width: 40px;
    height: 40px;
    font-size: 12px;
    text-align: center;
}

#formSelectColors span,
#formSelectGlobalColors span,
#formSelectNavColors span,
#formSelectLightColors span,
#formSelectDarkColors span
{
    font-size: 14px;
    margin-bottom: 5px;
}
</style> 
<style>
.form-group label {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.form-group select {
    vertical-align: middle;
}
    </style>
<style>
#formDefaultFont, #formHeadingFont, #formNavFont {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#formDefaultFont label, #formHeadingFont label, #formNavFont label {
    margin: 0;
    white-space: nowrap;
    width: 95px;
    display: inline-block;
}
#selectDefaultFont, #selectHeadingFont, #selectNavFont {
    width: 190px;
}
</style>
<style>
        select {
            font-size: 12px;
            padding: 1px;
            width: 57px; /* Définit la largeur de la zone input */
        }
        select option {
            font-size: 12px; /* Taille du texte dans le menu déroulant */
        }
        option {
            padding: 10px;
            font-weight: bold;
        }
        /* Style pour la sélection elle-même */
        select.colored {
            color: white;
            padding: 2px 2px;
        }
        /* Appliquer un style spécifique aux <select> désactivés */
        select:disabled {
            appearance: none; /* Supprime l'icône par défaut */
            -webkit-appearance: none; /* Pour Safari */
            -moz-appearance: none; /* Pour Firefox */
            background-color: #f0f0f0; /* Fond grisé pour indiquer qu'il est désactivé */
            cursor: not-allowed; /* Change le curseur pour un état non cliquable */
        }

        /* Pour s'assurer que les dimensions restent correctes */
        select:disabled::-ms-expand {
            display: none; /* Supprime l'icône sous Internet Explorer */
        }
    </style>
 
<style>
        #selectPolice option[value="'Arial', sans-serif"] {
            font-family: Arial, sans-serif;
        }
                #selectPolice option[value="'Courier New', Courier, monospace"] {
            font-family: 'Courier New', Courier, monospace;
        }
                #selectPolice option[value="'Georgia', serif"] {
            font-family: Georgia, serif;
        }
                #selectPolice option[value="'Helvetica', sans-serif"] {
            font-family: Helvetica, sans-serif;
        }
                #selectPolice option[value="'Lato', sans-serif"] {
            font-family: Lato, sans-serif;
        }
                #selectPolice option[value="'Montserrat', sans-serif"] {
            font-family: Montserrat, sans-serif;
        }
                #selectPolice option[value="'Noto Sans', sans-serif"] {
            font-family: 'Noto Sans', sans-serif;
        }
                #selectPolice option[value="'Open Sans', sans-serif"] {
            font-family: 'Open Sans', sans-serif;
        }
                #selectPolice option[value="'Playfair Display', serif"] {
            font-family: 'Playfair Display', serif;
        }
                #selectPolice option[value="'Poppins', sans-serif"] {
            font-family: Poppins, sans-serif;
        }
                #selectPolice option[value="'Roboto', sans-serif"] {
            font-family: Roboto, sans-serif;
        }
                #selectPolice option[value="'Source Sans Pro', sans-serif"] {
            font-family: Source Sans Pro, sans-serif;
        }
                #selectPolice option[value="'Times New Roman', Times, serif"] {
            font-family: Times New Roman, Times, serif;
        }
                #selectPolice option[value="'Ubuntu', sans-serif"] {
            font-family: Ubuntu, sans-serif;
        }
                #selectPolice option[value="'Verdana', sans-serif"] {
            font-family: Verdana, sans-serif;
        }
         
</style>
<style>
        /* Style de base */
        #toggleButtonAdvancedOptions {
            cursor: pointer;
            font-size: 12px;
            background: none;
            border: none;
            color: #000;
            outline: none;
        }

        #advanced_options {
            display: none; /* Masquer par défaut */
            margin-top: 0px;
            padding: 0px;
            /*border: 1px solid #ddd;*/
            /*background-color: #f9f9f9;*/
        }
    </style>
 <style>
    .info-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .info-box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        max-width: 800px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
    }

    .visible {
        display: block;
    }

    .info-button {
        cursor: pointer;
        font-size: 24px;
        margin: 0 10px;
    }

    .loading {
        text-align: center;
        padding: 20px;
    }
</style>
<style>
 .template-container {
    display: flex;
    overflow-x: auto; /* Permet le défilement horizontal */
    scroll-snap-type: x mandatory; /* Alignement des éléments lors du défilement */
    width: 100%; /* Le conteneur occupe toute la largeur disponible */
    height: auto; /* S'adapte à la hauteur des éléments */
}

.template-card {
    flex: 0 0 100%; /* Chaque carte occupe 100% de la largeur du conteneur */
    text-align: center;
    scroll-snap-align: center; /* Centrer les cartes lors du défilement */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
    padding: 10px; /* Ajout d'un peu de padding pour le style */
}

.template-container::-webkit-scrollbar {
    height: 8px; /* Hauteur de la barre de défilement */
}

.template-container::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Couleur de la barre de défilement */
    border-radius: 4px; /* Arrondit les bords */
}

.template-container::-webkit-scrollbar-track {
    background-color: #f9f9f9; /* Couleur de l'arrière-plan de la piste */
}

.card-img-top {
    width: 100%; /* L'image occupe 100% de la largeur de la carte */
    height: auto; /* Conserve les proportions de l'image */
}

</style>
<!DOCTYPE html>
<html lang="en-US">
<head>
		<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Kinetek - Annuaire des Kinésithérapeutes et Ergothérapeutes du Luxembourg.</title>
	<meta content="" name="description">
	<meta content="" name="keywords">

	<!-- Favicons -->
	<link href="assets/img/favicon.png" rel="icon">
	<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

	<!-- Fonts -->
	<link href="https://fonts.googleapis.com" rel="preconnect">
	<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap" rel="stylesheet">

	<!-- bootstrap@5.3.0 -->	
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

	<!-- Vendor CSS Files -->
	<link href="https://belgates.be/wp-content/themes/belgates/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
	<link href="https://belgates.be/wp-content/themes/belgates/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">


	<!-- Script -->
	<script src="https://kit.fontawesome.com/49289f0b34.js" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
	<!-- Bootstrap Datepicker CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
	<!-- Bootstrap Datepicker JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

	<!-- Vendor JS Files -->
	<script src="https://belgates.be/wp-content/themes/belgates/assets/vendor/aos/aos.js"></script>
    <script src="https://belgates.be/wp-content/themes/belgates/assets/vendor/glightbox/js/glightbox.min.js"></script>
	<script src="https://belgates.be/wp-content/themes/belgates/assets/vendor/swiper/swiper-bundle.min.js"></script>

	<!-- Main CSS File -->
    <link rel="stylesheet" href="https://belgates.be/wp-content/themes/belgates/assets/css/my_style_kinetek.css" />
	<link rel="stylesheet" href="https://belgates.be/wp-content/themes/belgates/assets/css/my_form_group.css" />
	<style>
	.autocomplete-container {
    position: relative;
    height: 80px; /* Hauteur de la zone de suggestions */
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%; /* Position sous le champ de saisie */
    left: 0;
    z-index: 1000; /* Assure que les suggestions sont au-dessus de tout */
    width: 100%; /* Largeur égale au champ de saisie */
    max-height: 200px; /* Hauteur maximale des suggestions */
    overflow-y: auto; /* Défilement vertical si nécessaire */
    background-color: #ffffff; /* Fond blanc */
    /*border: 1px solid #cccccc; *//* Bordure grise */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère */
    border-radius: 4px; /* Coins arrondis */
}

.autocomplete-suggestions .autocomplete-suggestion {
    padding: 8px 12px; /* Espacement à l'intérieur des suggestions */
    cursor: pointer; /* Curseur de type pointeur */
}

.autocomplete-suggestions .autocomplete-suggestion:hover {
    background-color: #f0f0f0; /* Couleur de fond au survol */
}

</style>
	<style>
	:root { 
	--header_height: 70px;
</style>
	<style>


/* Hero Section Colors */
:root {
	--bg_login_outer:#008744;

	--my_bg_body: #ffffff;
	--my_fg_body: #000000;
  --heroSectionBGColor: #1b2d57;
  --heroSectionFGColor: #f65201;
  --heroStatsItemColor: #f65201;
  --footerSectionBGColor: #1b2d57;
  --footerSectionFGColor: #FFFFFF;
  --footerLinksTitelColor: #f65201;
  --cardBGColor: #469fe0;
  --cardFGColor: #000000;
  --header_height: 70px;
}
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #1b2d57; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #f65201; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
  --bg_header: #1b2d57;
  --text_header_color: #FFFFFF  ;	/* couleur du texte dans le header, display session_name. */

}
</style>
<style>
		:root {          
			--my_color_1: #1b2d57;
			--my_color_2: #469fe0;
			--my_color_3: #008744;
			--my_color_4: #4cbb17;
			--my_color_5: #f65201;						
			--my_colorLogo1: #f65201;
			--my_colorLogo2: #f65201;
			--my_faq_toggle_color: #4cbb17;
			--my_faq_content_color: #000000;
			--my_faq_title_color: #f65201;

			--my_pricing_color:					#1b2d57;
			--my_pricing_color_best_contrast:	#ffffff;
    }
</style>          
<style>
        .work-sans-regular {
            font-family: 'Work Sans', sans-serif;
            font-weight: 400;
        }
        .work-sans-bold {
            font-family: 'Work Sans', sans-serif;
            font-weight: 700;
        }
</style>
<style>
        .custom-div {
            width: auto; /* Largeur automatique */
            max-width: 400px; /* Largeur automatique */
            height: 60px; /* Hauteur de 80 pixels */
            background-color: transparent; /* Couleur de fond pour la visibilité */
            /*border: 2px solid blue;*/ /* Bordure pour la visibilité */
            display: flex;
            align-items: center;
        }
        .svg-container-header {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .text-container-align {
            display: flex;
            flex-direction: column; /* Empile les éléments verticalement */
            align-items: flex-start; /* Aligne les éléments à gauche */
            justify-content: center;
            text-align: left; /* Aligne le texte à gauche */
            background-color: transparent; /* Juste pour voir les limites de la div */
            width: auto; /* S'assure que la div prend seulement la largeur nécessaire */
        }
</style>
<title>K-Flex_one_page_web_builder &#8211; belgates.be</title>
<meta name='robots' content='max-image-preview:large' />
<link rel="alternate" type="application/rss+xml" title="belgates.be &raquo; Feed" href="https://belgates.be/feed/" />
<link rel="alternate" type="application/rss+xml" title="belgates.be &raquo; Comments Feed" href="https://belgates.be/comments/feed/" />
<link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://belgates.be/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fbelgates.be%2Fk-flex_one_page_web_builder%2F" />
<link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://belgates.be/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fbelgates.be%2Fk-flex_one_page_web_builder%2F&#038;format=xml" />
<style id='wp-img-auto-sizes-contain-inline-css'>
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
</style>
<style id='wp-emoji-styles-inline-css'>

	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
/*# sourceURL=wp-emoji-styles-inline-css */
</style>
<style id='wp-block-library-inline-css'>
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}

/*# sourceURL=wp-block-library-inline-css */
</style>
<style id='classic-theme-styles-inline-css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */
</style>
<link rel='stylesheet' id='style-css' href='https://belgates.be/wp-content/themes/belgates/style.css?ver=3.5.4' media='all' />
<link rel='stylesheet' id='main-css' href='https://belgates.be/wp-content/themes/belgates/build/main.css?ver=3.5.4' media='all' />
<link rel="https://api.w.org/" href="https://belgates.be/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://belgates.be/wp-json/wp/v2/pages/617" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://belgates.be/xmlrpc.php?rsd" />
<meta name="generator" content="WordPress 6.9.3" />
<link rel="canonical" href="https://belgates.be/k-flex_one_page_web_builder/" />
<link rel='shortlink' href='https://belgates.be/?p=617' />

</head>


<body class="wp-singular page-template page-template-kinetek_container_with_left_sidebar page-template-kinetek_container_with_left_sidebar-php page page-id-617 wp-theme-belgates">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>


<a href="#main" class="visually-hidden-focusable">Skip to main content</a>
<style>

.sitename{
	color:#000000;	
}	

</style>
<style>

/* Définition des variables CSS pour les couleurs du menu */
:root {
  --color-text-header-menu: #f65201  ;	/* couleur du texte nav menu. */
  --color-text: #000000;	/* couleur du texte par défaut. */
  --color-text-hover: #f65201 ; /* couleur du texte au survol. */
  --color-bg-hover: #F8F9FA ; /*couleur de fond au survol. */
  --color-bg-menu: #F8F9FA;	/* couleur de fond au survol. */
  --color-border-menu: #FFF; /*couleur de la bordure du menu déroulant. */
  --color-bg-collapse-hover: transparent; /*couleur de fond au survol des liens de sous-menu. */
  --color-text-collapse-hover: #f65201; /* couleur du texte au survol des liens de sous-menu. */
  --color-bg-active: #0056b3; /* couleur de fond de l'élément actif. */
  --color-text-active: #fff; /* couleur du texte de l'élément actif */
  --color-col-megamenu-title:#f65201; /* couleur du texte du titre de la colonne de sous-menu */
}

/* Style principal pour la classe mymenu */
.mymenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.mymenu .nav-item {
  position: relative;
}

.mymenu .nav-link {
  color: var(--color-text-header-menu);
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

.mymenu .nav-link:hover,
.mymenu .nav-link:focus {
  color: var(--color-text-hover)!important;
  background-color: var(--color-bg-hover)!important;
  border-radius: 5px;
}

.mymenu .nav-item.dropdown:hover .dropdown-menu,
.mymenu .nav-item.dropdown:focus .dropdown-menu {
  display: block;
}

.mymenu .dropdown-menu {
  position: absolute;
  display: none;
  left: 0;
  z-index: 1000;
  color: var(--color-col-megamenu-title) !important; 
  background-color: var(--color-bg-menu);
  border: 1px solid var(--color-border-menu);
  padding: 1rem;
}

.mymenu .col-megamenu {
  padding: 1rem;
}

.mymenu .col-megamenu h6.title {
  font-weight: bold;
  margin-bottom: 1rem;
}

.mymenu .nav-link-collapse {
  color: var(--color-text);
  text-decoration: none;
  display: block;
  padding: 5px 0;
}

.mymenu .nav-link-collapse:hover,
.mymenu .nav-link-collapse:focus {
  color: var(--color-text-collapse-hover);
  background-color: var(--color-bg-collapse-hover);
}
*/
/* État actif */

.mymenu .nav-link.active,
.mymenu .nav-link-collapse.active {
  color: var(--color-text-active);
  background-color: var(--color-bg-active);
}

</style>
<!--
https://bootstrap-menu.com/detail-megamenu.html
https://bootstrap-menu.com/demos/megamenu.html#
-->
<style>
	.navbar .megamenu{ padding: 1rem; }

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

  .navbar .has-megamenu{position:static!important;}
  .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }

}	
/* ============ desktop view .end// ============ */

/* ============ mobile view ============ */
@media(max-width: 991px){
  .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
    overflow-y: auto;
      max-height: 90vh;
      margin-top:10px;
  }
}
/* ============ mobile view .end// ============ */
</style>
<div id="wrapper">
	<!--<header class="bg-white header d-flex align-items-center fixed-top mt-3" >-->
	<header class="header d-flex align-items-center fixed-top" style="background-color: var(--bg_header);">		
		<div class="container">
			<nav class="navbar navbar-expand-lg navbar-light " style="background-color: var(--bg_header);">
				<div class="container-fluid">
					<a href="/" class="navbar-brand d-flex align-items-center me-auto">
						<div class="custom-div">
							<div class="svg-container-header">
								<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 224 211" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
									<g><path style="opacity:1" fill="var(--my_colorLogo1)" fill-opacity="1" d="M 98.5,5.5 C 147.571,1.60933 183.405,21.276 206,64.5C 222.513,108.604 214.346,147.437 181.5,181C 178.64,183.36 175.64,185.527 172.5,187.5C 169.815,184.81 167.482,181.81 165.5,178.5C 197.072,151.951 207.905,118.617 198,78.5C 183.379,40.7708 155.879,20.4375 115.5,17.5C 105.334,17.7824 95.3344,19.1157 85.5,21.5C 85.954,24.1398 87.1207,26.4732 89,28.5C 109,53.8333 129,79.1667 149,104.5C 149.5,88.8369 149.667,73.1702 149.5,57.5C 157.833,57.5 166.167,57.5 174.5,57.5C 174.762,58.9778 174.429,60.3112 173.5,61.5C 169.858,63.9749 166.358,66.6415 163,69.5C 162.333,93.8333 162.333,118.167 163,142.5C 166.358,145.358 169.858,148.025 173.5,150.5C 174.429,151.689 174.762,153.022 174.5,154.5C 166.167,154.5 157.833,154.5 149.5,154.5C 149.667,138.83 149.5,123.163 149,107.5C 142.713,116.122 136.047,124.455 129,132.5C 126.308,129.308 123.808,125.975 121.5,122.5C 125.954,117.091 130.287,111.591 134.5,106C 111.38,76.9242 88.3795,47.7575 65.5,18.5C 69.6861,15.2383 74.3528,12.7383 79.5,11C 85.9108,8.98534 92.2442,7.15201 98.5,5.5 Z"/></g>
									<g><path style="opacity:1" fill="var(--my_colorLogo2)" d="M 77.5,154.5 C 69.5,154.5 61.5,154.5 53.5,154.5C 53.5,153.5 53.5,152.5 53.5,151.5C 56.5012,148.507 59.8346,145.841 63.5,143.5C 64.8333,118.5 64.8333,93.5 63.5,68.5C 59.8346,66.1593 56.5012,63.4926 53.5,60.5C 53.5,59.5 53.5,58.5 53.5,57.5C 61.5,57.5 69.5,57.5 77.5,57.5C 77.3334,73.1702 77.5001,88.8369 78,104.5C 84.8439,96.1271 91.6772,87.7938 98.5,79.5C 101.205,82.4172 103.538,85.5839 105.5,89C 102.282,94.595 98.4482,99.7616 94,104.5C 93.3333,105.5 93.3333,106.5 94,107.5C 116.833,136.333 139.667,165.167 162.5,194C 133.965,208.782 104.632,210.449 74.5,199C 29.6583,176.775 9.49159,140.608 14,90.5C 18.594,62.9685 32.094,40.9685 54.5,24.5C 57.3918,27.271 60.0584,30.271 62.5,33.5C 34.7906,54.5994 22.6239,82.5994 26,117.5C 33.7254,157.485 57.2254,182.652 96.5,193C 112.242,195.738 127.576,194.405 142.5,189C 121.12,161.742 99.6204,134.576 78,107.5C 77.5001,123.163 77.3334,138.83 77.5,154.5 Z"/></g>
								</svg>
							</div>
							<div class="p-2">
								<div class="text-container-align">
									<div class="work-sans-bold m-0 p-0" ><span class="notranslate" style="font-size:50px; color: var(--my_colorLogo2);">KINE</span><span class="notranslate" style="font-size:50px; color: var(--my_colorLogo1);">TEK</span></div>
								</div>
							</div>
						</div>
					</a>
					<button class="navbar-toggler" id="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
					<i class="fa-solid fa-burger" style="border-color:#1b2d57; color:#1b2d57; font-size:28px;"></i>
					</button>
					
					<div class="collapse navbar-collapse" id="main_nav">
						<ul class="navbar-nav" style="color: var(--text_header_color);">
						&nbsp;<b> </b><br>							<!--
							<li class="nav-item"><a class="nav-link nav-link-collapse" href="#about"> About </a></li>
							<li class="nav-item"><a class="nav-link nav-link-collapse" href="#"> Services </a></li>
						-->	
						</ul>
						<ul class="navbar-nav ms-auto mymenu">
						<li class="nav-item"><a class="nav-link" href="/#about">A propos</a></li><li class="nav-item"><a class="nav-link" href="/#faq">FAQ</a></li><li class="nav-item"><a class="nav-link" href="/#contact">Contact</a></li><li class="nav-item dropdown has-megamenu"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Zone Kinés</a><div class="dropdown-menu megamenu" role="menu"><div class="row g-3"><div class="col-lg-3 col-6"><div class="col-megamenu"><h6 class="title">Acceuil</h6><ul class="list-unstyled"><li><a class="nav-link-collapse" href="https://belgates.be/kinetec_introduction/"><i class="fa-solid fa-circle-info"></i> Introduction</a></li><li><a class="nav-link-collapse" href="https://belgates.be/registration_kinetek/"><i class="fa-solid fa-file-circle-plus"></i> Inscription</a></li><li><a class="nav-link-collapse" href="https://belgates.be/password_recovery/"><i class="fa-solid fa-key"></i> Mot de passe ?</a></li><li><a class="nav-link-collapse" href="https://belgates.be/therapists_list/"><i class="fa-solid fa-user-nurse"></i> Thérapeutes</a></li><li><a class="nav-link-collapse" href="https://belgates.be/cabinets_mgmt/"><i class="fa-solid fa-people-group"></i> Les centres de soins</a></li></ul></div></div><div class="col-lg-3 col-6"><div class="col-megamenu"><h6 class="title">One Page Web</h6><ul class="list-unstyled"><li><a class="nav-link-collapse" href="https://belgates.be/one_page_web/"><i class="fa-brands fa-wordpress-simple"></i> Présentation</a></li><li><a class="nav-link-collapse" href="https://belgates.be/one_page_web_exemple/"><i class="fa-brands fa-artstation"></i> Examples</a></li></ul></div></div><div class="col-lg-3 col-6"><div class="col-megamenu"><h6 class="title">Services Internet</h6><ul class="list-unstyled"><li><a class="nav-link-collapse" href="https://belgates.be/web_hosting/"><i class="fa-solid fa-pepper-hot"></i> Hébergement Web</a></li><li><a class="nav-link-collapse" href="https://belgates.be/service_de_messagerie/"><i class="fa-solid fa-at"></i> Service Email</a></li><li><a class="nav-link-collapse" href="https://belgates.be/domains_prices/"><i class="fa-solid fa-tags"></i> Prix noms de domaine</a></li><li><a class="nav-link-collapse" href="https://belgates.be/selection_domain_availability/"><i class="fa-solid fa-globe"></i> Sélection noms de domaine</a></li><li><a class="nav-link-collapse" href="https://belgates.be/your_domains/"><i class="fa-solid fa-circle-dot"></i> Votre nom de domain</a></li></ul></div></div></div></div></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"><i class="fa-solid fa-user"></i> Profil</a><ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item nav-link-collapse" href="/login_form/?input_action=login_form"><i class="fa-solid fa-right-to-bracket"></i> Connexion</a></li><li><a class="dropdown-item nav-link-collapse" href="https://belgates.be/registration_kinetek/"><i class="fa-solid fa-file-circle-plus"></i> Inscription</a></li></ul></li>						<style>

						</style>	
						<li class="nav-item" >
							<div class="gtranslate-item gtranslate_wrapper">
								<div class="gtranslate_wrapper" id="gt-wrapper-81020392"></div>							</div>
						</li>
						</ul>
					</div> <!-- navbar-collapse.// -->

				</div> <!-- container-fluid.// -->
			</nav>
		</div><!-- container //  -->
	</header>
	<main id="main" class="container-fluid">
		<div class="container-fluid" style="margin: 0px; padding: 0px;">
    <div class="container-fluid rounded" style="background-color: white; display: flex;  min-height: 80vh; margin: 0px; margin-top: 100px; padding: 0px;">
    <div class="left-column rounded" id="leftColumn" style="background-color: white;  padding: 0px;">
        <!-- Contenu de la colonne left -->
        <div class="accordion" id="accordionPanelsStayOpenExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="panelsStayOpen-heading1">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse1" aria-expanded="true" aria-controls="panelsStayOpen-collapse1">
                    <b>Couleurs</b>
                </button>
                </h2>
 
                <div id="panelsStayOpen-collapse1" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-heading1">
                    <div class="accordion-body" style="display: flex; flex-direction: column;">
                        <div style="display: flex; justify-content: space-between; align-items: center;" class="mb-3">
                            <!-- Contenu principal sur la première ligne -->
                            <div><strong>Palette de couleurs :</strong></div>
                            <!-- Bouton d'information aligné à droite -->
                            <i class="fas fa-info-circle info-button" 
                            data-info-id="info1" 
                            data-post-id="625" 
                            data-title="Sélection de couleurs"></i>
                        </div>
                        <div>
                            <!-- Autres contenus , Contenu supplémentaire de l'accordéon (ligne suivante).-->
                        <form id="formSelectColors">
                            <INPUT type="HIDDEN" name="inputCustomer"  value="LDefoix">
                            <!-- Ligne de Color Pickers -->
                            <div class="color-row">
                                <div class="color-group">
                                    <span style="font-size: 8px;">Background</span>
                                    <input type="color" id="colorInputBG" name="colorInputBG" value="#ffffff">
                                </div>
                                <div class="color-group">
                                    <span style="font-size: 8px;">Foreground</span>
                                    <input type="color" id="colorInputFG" name="colorInputFB" value="#000000">
                                </div>
                                <div class="color-group">
                                    <span style="font-size: 8px;">Color 1</span>
                                    <input type="color" id="colorInput1" name="colorInput1" value="#8c1c13">
                                </div>
                                <div class="color-group">
                                <span style="font-size: 8px;">Color 2</span>
                                    <input type="color" id="colorInput2" name="colorInput2" value="#bf4342">
                                </div>
                                <div class="color-group">
                                    <span style="font-size: 8px;">Color 3</span>
                                    <input type="color" id="colorInput3" name="colorInput3" value="#f2e8cf">
                                </div>
                                <div class="color-group">
                                    <span style="font-size: 8px;">Color 4</span>
                                    <input type="color" id="colorInput4" name="colorInput4" value="#a7b5a9">
                                </div>
                                <div class="color-group">
                                    <span style="font-size: 8px;">Color 5</span>
                                    <input type="color" id="colorInput5" name="colorInput5" value="#f7941d">
                                </div>

                            </div>                   
                        </form>
                        
                        <div style="display: flex; justify-content: space-between; align-items: center;" class="mb-3">
                            <!-- Contenu principal sur la première ligne -->
                            <div><strong>Assignation des couleurs<br></strong></div>
                            <!-- Bouton d'information aligné à droite -->
                            <i class="fas fa-info-circle info-button" 
                            data-info-id="info2" 
                            data-post-id="636" 
                            data-title="Assignation des couleurs"></i>
                        </div>
                        <form id="formSelectGlobalColors">
                            <INPUT type="HIDDEN" name="inputCustomer"  value="LDefoix">
                            <!-- Ligne de Color Pickers -->
                            <div class="color-row">
                                <div class="color-group">
                                    <span style="font-size: 8px;">Background</span>
                                    <select class="colored" name="inputBackgroundCode" >
                                        <option style="background-color: #ffffff; color: #000000;" selected value="BG" data-color="#ffffff">BG</option>
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Default</span>
                                    <select class="colored" name="inputDefaultCode" >
                                        <option style="background-color: #000000; color: #ffffff;" selected value="FG" data-color="#000000">FB</option>
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Heading</span>
                                    <select class="colored" name="inputHeadingCode" >
                                        <option style="background-color: #8c1c13; color: #FFFFFF;" selected value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Accent</span>
                                    <select class="colored" name="inputAccentCode" >
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;" selected value="C5" data-color="#f7941d">C5</option>
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Surface</span>
                                    <select class="colored" name="inputSurfaceCode" >
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;" selected value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Contrast</span>
                                    <select class="colored" name="inputContrastCode" >
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;" selected value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                    </select>
                                </div>
                            </div>                   
                        </form>
                        <strong style="font-size: 12px;">Couleurs du Menu de Navigation :</strong>
                        <form id="formSelectNavColors">
                            <INPUT type="HIDDEN" name="inputCustomer"  value="LDefoix">
                            <!-- Ligne de Color Pickers -->
                            <div class="color-row">
                                <div class="color-group">
                                    <span style="font-size: 8px;">Nav</span>
                                    <select class="colored" name="inputNavCode" >
                                                                                    <option style="background-color: #ffffff; color: #000000;" 
                                                 
                                                value="BG" 
                                                data-color="#ffffff">BG</option>
                                                                                            <option style="background-color: #000000; color: #FFFFFF;" 
                                                selected 
                                                value="FG" 
                                                data-color="#000000">FG</option>
                                                                                            <option style="background-color: #8c1c13; color: #FFFFFF;" 
                                                 
                                                value="C1" 
                                                data-color="#8c1c13">C1</option>
                                                                                            <option style="background-color: #bf4342; color: #FFFFFF;" 
                                                 
                                                value="C2" 
                                                data-color="#bf4342">C2</option>
                                                                                            <option style="background-color: #f2e8cf; color: #000000;" 
                                                 
                                                value="C3" 
                                                data-color="#f2e8cf">C3</option>
                                                                                            <option style="background-color: #a7b5a9; color: #000000;" 
                                                 
                                                value="C4" 
                                                data-color="#a7b5a9">C4</option>
                                                                                            <option style="background-color: #f7941d; color: #000000;" 
                                                 
                                                value="C5" 
                                                data-color="#f7941d">C5</option>
                                                                                            <option style="background-color: #e13224; color: #FFFFFF;" 
                                                 
                                                value="LIC1" 
                                                data-color="#e13224">LIC1</option>
                                                                                            <option style="background-color: #d98f8e; color: #000000;" 
                                                 
                                                value="LIC2" 
                                                data-color="#d98f8e">LIC2</option>
                                                                                            <option style="background-color: #ffffff; color: #000000;" 
                                                 
                                                value="LIC3" 
                                                data-color="#ffffff">LIC3</option>
                                                                                            <option style="background-color: #dee4df; color: #000000;" 
                                                 
                                                value="LIC4" 
                                                data-color="#dee4df">LIC4</option>
                                                                                            <option style="background-color: #fac380; color: #000000;" 
                                                 
                                                value="LIC5" 
                                                data-color="#fac380">LIC5</option>
                                                                                            <option style="background-color: #320a07; color: #FFFFFF;" 
                                                 
                                                value="DAC1" 
                                                data-color="#320a07">DAC1</option>
                                                                                            <option style="background-color: #742827; color: #FFFFFF;" 
                                                 
                                                value="DAC2" 
                                                data-color="#742827">DAC2</option>
                                                                                            <option style="background-color: #dcc27f; color: #000000;" 
                                                 
                                                value="DAC3" 
                                                data-color="#dcc27f">DAC3</option>
                                                                                            <option style="background-color: #708673; color: #000000;" 
                                                 
                                                value="DAC4" 
                                                data-color="#708673">DAC4</option>
                                                                                            <option style="background-color: #a85e06; color: #FFFFFF;" 
                                                 
                                                value="DAC5" 
                                                data-color="#a85e06">DAC5</option>
                                                                                </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Nav Hov</span>
                                    <select class="colored" name="inputNavHoverCode" >
                                                                                    <option style="background-color: #ffffff; color: #000000;" 
                                                 
                                                value="BG" 
                                                data-color="#ffffff">BG</option>
                                                                                            <option style="background-color: #000000; color: #FFFFFF;" 
                                                 
                                                value="FG" 
                                                data-color="#000000">FG</option>
                                                                                            <option style="background-color: #8c1c13; color: #FFFFFF;" 
                                                 
                                                value="C1" 
                                                data-color="#8c1c13">C1</option>
                                                                                            <option style="background-color: #bf4342; color: #FFFFFF;" 
                                                 
                                                value="C2" 
                                                data-color="#bf4342">C2</option>
                                                                                            <option style="background-color: #f2e8cf; color: #000000;" 
                                                 
                                                value="C3" 
                                                data-color="#f2e8cf">C3</option>
                                                                                            <option style="background-color: #a7b5a9; color: #000000;" 
                                                 
                                                value="C4" 
                                                data-color="#a7b5a9">C4</option>
                                                                                            <option style="background-color: #f7941d; color: #000000;" 
                                                selected 
                                                value="C5" 
                                                data-color="#f7941d">C5</option>
                                                                                            <option style="background-color: #e13224; color: #FFFFFF;" 
                                                 
                                                value="LIC1" 
                                                data-color="#e13224">LIC1</option>
                                                                                            <option style="background-color: #d98f8e; color: #000000;" 
                                                 
                                                value="LIC2" 
                                                data-color="#d98f8e">LIC2</option>
                                                                                            <option style="background-color: #ffffff; color: #000000;" 
                                                 
                                                value="LIC3" 
                                                data-color="#ffffff">LIC3</option>
                                                                                            <option style="background-color: #dee4df; color: #000000;" 
                                                 
                                                value="LIC4" 
                                                data-color="#dee4df">LIC4</option>
                                                                                            <option style="background-color: #fac380; color: #000000;" 
                                                 
                                                value="LIC5" 
                                                data-color="#fac380">LIC5</option>
                                                                                            <option style="background-color: #320a07; color: #FFFFFF;" 
                                                 
                                                value="DAC1" 
                                                data-color="#320a07">DAC1</option>
                                                                                            <option style="background-color: #742827; color: #FFFFFF;" 
                                                 
                                                value="DAC2" 
                                                data-color="#742827">DAC2</option>
                                                                                            <option style="background-color: #dcc27f; color: #000000;" 
                                                 
                                                value="DAC3" 
                                                data-color="#dcc27f">DAC3</option>
                                                                                            <option style="background-color: #708673; color: #000000;" 
                                                 
                                                value="DAC4" 
                                                data-color="#708673">DAC4</option>
                                                                                            <option style="background-color: #a85e06; color: #FFFFFF;" 
                                                 
                                                value="DAC5" 
                                                data-color="#a85e06">DAC5</option>
                                                                                </select>
                                </div>

                                <div class="color-group">
                                    <span  style="font-size: 8px;">Mob BG</span>
                                    <select class="colored" name="inputNavMobileBackgroundCode" >
                                                                                        <option style="background-color: #ffffff; color: #000000;" 
                                                selected 
                                                value="BG" 
                                                data-color="#ffffff">BG</option>
                                                                                            <option style="background-color: #000000; color: #FFFFFF;" 
                                                 
                                                value="FG" 
                                                data-color="#000000">FG</option>
                                                                                            <option style="background-color: #8c1c13; color: #FFFFFF;" 
                                                 
                                                value="C1" 
                                                data-color="#8c1c13">C1</option>
                                                                                            <option style="background-color: #bf4342; color: #FFFFFF;" 
                                                 
                                                value="C2" 
                                                data-color="#bf4342">C2</option>
                                                                                            <option style="background-color: #f2e8cf; color: #000000;" 
                                                 
                                                value="C3" 
                                                data-color="#f2e8cf">C3</option>
                                                                                            <option style="background-color: #a7b5a9; color: #000000;" 
                                                 
                                                value="C4" 
                                                data-color="#a7b5a9">C4</option>
                                                                                            <option style="background-color: #f7941d; color: #000000;" 
                                                 
                                                value="C5" 
                                                data-color="#f7941d">C5</option>
                                                                                            <option style="background-color: #e13224; color: #FFFFFF;" 
                                                 
                                                value="LIC1" 
                                                data-color="#e13224">LIC1</option>
                                                                                            <option style="background-color: #d98f8e; color: #000000;" 
                                                 
                                                value="LIC2" 
                                                data-color="#d98f8e">LIC2</option>
                                                                                            <option style="background-color: #ffffff; color: #000000;" 
                                                 
                                                value="LIC3" 
                                                data-color="#ffffff">LIC3</option>
                                                                                            <option style="background-color: #dee4df; color: #000000;" 
                                                 
                                                value="LIC4" 
                                                data-color="#dee4df">LIC4</option>
                                                                                            <option style="background-color: #fac380; color: #000000;" 
                                                 
                                                value="LIC5" 
                                                data-color="#fac380">LIC5</option>
                                                                                            <option style="background-color: #320a07; color: #FFFFFF;" 
                                                 
                                                value="DAC1" 
                                                data-color="#320a07">DAC1</option>
                                                                                            <option style="background-color: #742827; color: #FFFFFF;" 
                                                 
                                                value="DAC2" 
                                                data-color="#742827">DAC2</option>
                                                                                            <option style="background-color: #dcc27f; color: #000000;" 
                                                 
                                                value="DAC3" 
                                                data-color="#dcc27f">DAC3</option>
                                                                                            <option style="background-color: #708673; color: #000000;" 
                                                 
                                                value="DAC4" 
                                                data-color="#708673">DAC4</option>
                                                                                            <option style="background-color: #a85e06; color: #FFFFFF;" 
                                                 
                                                value="DAC5" 
                                                data-color="#a85e06">DAC5</option>
                                                                                </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Drop BG</span>
                                    <select class="colored" name="inputNavDropdownBackgroundCode" >
                                                                                    <option style="background-color: #ffffff; color: #000000;" 
                                                selected 
                                                value="BG" 
                                                data-color="#ffffff">BG</option>
                                                                                            <option style="background-color: #000000; color: #FFFFFF;" 
                                                 
                                                value="FG" 
                                                data-color="#000000">FG</option>
                                                                                            <option style="background-color: #8c1c13; color: #FFFFFF;" 
                                                 
                                                value="C1" 
                                                data-color="#8c1c13">C1</option>
                                                                                            <option style="background-color: #bf4342; color: #FFFFFF;" 
                                                 
                                                value="C2" 
                                                data-color="#bf4342">C2</option>
                                                                                            <option style="background-color: #f2e8cf; color: #000000;" 
                                                 
                                                value="C3" 
                                                data-color="#f2e8cf">C3</option>
                                                                                            <option style="background-color: #a7b5a9; color: #000000;" 
                                                 
                                                value="C4" 
                                                data-color="#a7b5a9">C4</option>
                                                                                            <option style="background-color: #f7941d; color: #000000;" 
                                                 
                                                value="C5" 
                                                data-color="#f7941d">C5</option>
                                                                                            <option style="background-color: #e13224; color: #FFFFFF;" 
                                                 
                                                value="LIC1" 
                                                data-color="#e13224">LIC1</option>
                                                                                            <option style="background-color: #d98f8e; color: #000000;" 
                                                 
                                                value="LIC2" 
                                                data-color="#d98f8e">LIC2</option>
                                                                                            <option style="background-color: #ffffff; color: #000000;" 
                                                 
                                                value="LIC3" 
                                                data-color="#ffffff">LIC3</option>
                                                                                            <option style="background-color: #dee4df; color: #000000;" 
                                                 
                                                value="LIC4" 
                                                data-color="#dee4df">LIC4</option>
                                                                                            <option style="background-color: #fac380; color: #000000;" 
                                                 
                                                value="LIC5" 
                                                data-color="#fac380">LIC5</option>
                                                                                            <option style="background-color: #320a07; color: #FFFFFF;" 
                                                 
                                                value="DAC1" 
                                                data-color="#320a07">DAC1</option>
                                                                                            <option style="background-color: #742827; color: #FFFFFF;" 
                                                 
                                                value="DAC2" 
                                                data-color="#742827">DAC2</option>
                                                                                            <option style="background-color: #dcc27f; color: #000000;" 
                                                 
                                                value="DAC3" 
                                                data-color="#dcc27f">DAC3</option>
                                                                                            <option style="background-color: #708673; color: #000000;" 
                                                 
                                                value="DAC4" 
                                                data-color="#708673">DAC4</option>
                                                                                            <option style="background-color: #a85e06; color: #FFFFFF;" 
                                                 
                                                value="DAC5" 
                                                data-color="#a85e06">DAC5</option>
                                                                                </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Drop Nav</span>
                                    <select class="colored" name="inputNavDropdownCode" >
                                                                                    <option style="background-color: #ffffff; color: #000000;" 
                                                 
                                                value="BG" 
                                                data-color="#ffffff">BG</option>
                                                                                            <option style="background-color: #000000; color: #FFFFFF;" 
                                                selected 
                                                value="FG" 
                                                data-color="#000000">FG</option>
                                                                                            <option style="background-color: #8c1c13; color: #FFFFFF;" 
                                                 
                                                value="C1" 
                                                data-color="#8c1c13">C1</option>
                                                                                            <option style="background-color: #bf4342; color: #FFFFFF;" 
                                                 
                                                value="C2" 
                                                data-color="#bf4342">C2</option>
                                                                                            <option style="background-color: #f2e8cf; color: #000000;" 
                                                 
                                                value="C3" 
                                                data-color="#f2e8cf">C3</option>
                                                                                            <option style="background-color: #a7b5a9; color: #000000;" 
                                                 
                                                value="C4" 
                                                data-color="#a7b5a9">C4</option>
                                                                                            <option style="background-color: #f7941d; color: #000000;" 
                                                 
                                                value="C5" 
                                                data-color="#f7941d">C5</option>
                                                                                            <option style="background-color: #e13224; color: #FFFFFF;" 
                                                 
                                                value="LIC1" 
                                                data-color="#e13224">LIC1</option>
                                                                                            <option style="background-color: #d98f8e; color: #000000;" 
                                                 
                                                value="LIC2" 
                                                data-color="#d98f8e">LIC2</option>
                                                                                            <option style="background-color: #ffffff; color: #000000;" 
                                                 
                                                value="LIC3" 
                                                data-color="#ffffff">LIC3</option>
                                                                                            <option style="background-color: #dee4df; color: #000000;" 
                                                 
                                                value="LIC4" 
                                                data-color="#dee4df">LIC4</option>
                                                                                            <option style="background-color: #fac380; color: #000000;" 
                                                 
                                                value="LIC5" 
                                                data-color="#fac380">LIC5</option>
                                                                                            <option style="background-color: #320a07; color: #FFFFFF;" 
                                                 
                                                value="DAC1" 
                                                data-color="#320a07">DAC1</option>
                                                                                            <option style="background-color: #742827; color: #FFFFFF;" 
                                                 
                                                value="DAC2" 
                                                data-color="#742827">DAC2</option>
                                                                                            <option style="background-color: #dcc27f; color: #000000;" 
                                                 
                                                value="DAC3" 
                                                data-color="#dcc27f">DAC3</option>
                                                                                            <option style="background-color: #708673; color: #000000;" 
                                                 
                                                value="DAC4" 
                                                data-color="#708673">DAC4</option>
                                                                                            <option style="background-color: #a85e06; color: #FFFFFF;" 
                                                 
                                                value="DAC5" 
                                                data-color="#a85e06">DAC5</option>
                                                                               
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Drop Hov</span>
                                    <select class="colored" name="inputNavDropdownHoverCode" >
                                                                                    <option style="background-color: #ffffff; color: #000000;" 
                                                 
                                                value="BG" 
                                                data-color="#ffffff">BG</option>
                                                                                            <option style="background-color: #000000; color: #FFFFFF;" 
                                                 
                                                value="FG" 
                                                data-color="#000000">FG</option>
                                                                                            <option style="background-color: #8c1c13; color: #FFFFFF;" 
                                                selected 
                                                value="C1" 
                                                data-color="#8c1c13">C1</option>
                                                                                            <option style="background-color: #bf4342; color: #FFFFFF;" 
                                                 
                                                value="C2" 
                                                data-color="#bf4342">C2</option>
                                                                                            <option style="background-color: #f2e8cf; color: #000000;" 
                                                 
                                                value="C3" 
                                                data-color="#f2e8cf">C3</option>
                                                                                            <option style="background-color: #a7b5a9; color: #000000;" 
                                                 
                                                value="C4" 
                                                data-color="#a7b5a9">C4</option>
                                                                                            <option style="background-color: #f7941d; color: #000000;" 
                                                 
                                                value="C5" 
                                                data-color="#f7941d">C5</option>
                                                                                            <option style="background-color: #e13224; color: #FFFFFF;" 
                                                 
                                                value="LIC1" 
                                                data-color="#e13224">LIC1</option>
                                                                                            <option style="background-color: #d98f8e; color: #000000;" 
                                                 
                                                value="LIC2" 
                                                data-color="#d98f8e">LIC2</option>
                                                                                            <option style="background-color: #ffffff; color: #000000;" 
                                                 
                                                value="LIC3" 
                                                data-color="#ffffff">LIC3</option>
                                                                                            <option style="background-color: #dee4df; color: #000000;" 
                                                 
                                                value="LIC4" 
                                                data-color="#dee4df">LIC4</option>
                                                                                            <option style="background-color: #fac380; color: #000000;" 
                                                 
                                                value="LIC5" 
                                                data-color="#fac380">LIC5</option>
                                                                                            <option style="background-color: #320a07; color: #FFFFFF;" 
                                                 
                                                value="DAC1" 
                                                data-color="#320a07">DAC1</option>
                                                                                            <option style="background-color: #742827; color: #FFFFFF;" 
                                                 
                                                value="DAC2" 
                                                data-color="#742827">DAC2</option>
                                                                                            <option style="background-color: #dcc27f; color: #000000;" 
                                                 
                                                value="DAC3" 
                                                data-color="#dcc27f">DAC3</option>
                                                                                            <option style="background-color: #708673; color: #000000;" 
                                                 
                                                value="DAC4" 
                                                data-color="#708673">DAC4</option>
                                                                                            <option style="background-color: #a85e06; color: #FFFFFF;" 
                                                 
                                                value="DAC5" 
                                                data-color="#a85e06">DAC5</option>
                                             
                                    </select>
                                </div>								
                            </div>                   
                        </form>
                        <div>
                            <!-- Bouton toggle -->
                            <button id="toggleButtonAdvancedOptions">
                                <i class="fas fa-chevron-down"></i> Personalisation des Options Supplémentaires <!-- Icône de toggle -->
                            </button>
                        </div>
                        <!-- Contenu avancé -->
                        <div id="advanced_options">
                        <strong style="font-size: 12px;">Style .light-backgound</strong>
                        <form id="formSelectLightColors">
                            <INPUT type="HIDDEN" name="inputCustomer"  value="LDefoix">
                            <!-- Ligne de Color Pickers -->
                            <div class="color-row">
                                <div class="color-group">
                                    <span style="font-size: 8px;">Background</span>
                                    <select class="colored" name="input_lightbg_backgroundcode" >
                                        <option style="background-color: #ffffff; color: #000000;"  value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;"  value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #e13224; color: #FFFFFF;"  value="LIC1" data-color="#e13224">LIC1</option>
                                        <option style="background-color: #d98f8e; color: #FFFFFF;"  value="LIC2" data-color="#d98f8e">LIC2</option>
                                        <option style="background-color: #ffffff; color: #000000;"  value="LIC3" data-color="#ffffff">LIC3</option>
                                        <option style="background-color: #dee4df; color: #000000;"  value="LIC4" data-color="#dee4df">LIC4</option>
                                        <option style="background-color: #fac380; color: #000000;"  value="LIC5" data-color="#fac380">LIC5</option>
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Default</span>
                                    <select class="colored"  disabled >
                                        <option style="background-color: #ffffff; color: #000000;"  value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;" selected value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                    </select>
                                </div>

                                <div class="color-group">
                                    <span  style="font-size: 8px;">Heading</span>
                                    <select class="colored"  disabled>
                                        <option style="background-color: #ffffff; color: #000000;"  value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;"  value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #e13224; color: #FFFFFF;"  value="LIC1" data-color="#e13224">LIC1</option>
                                        <option style="background-color: #d98f8e; color: #FFFFFF;"  value="LIC2" data-color="#d98f8e">LIC2</option>
                                        <option style="background-color: #ffffff; color: #000000;"  value="LIC3" data-color="#ffffff">LIC3</option>
                                        <option style="background-color: #dee4df; color: #000000;"  value="LIC4" data-color="#dee4df">LIC4</option>
                                        <option style="background-color: #fac380; color: #000000;"  value="LIC5" data-color="#fac380">LIC5</option>
                                        <option style="background-color: #8c1c13; color: #FFFFFF;" selected value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Accent</span>
                                    <select class="colored" disabled >
                                        <option style="background-color: #ffffff; color: #000000;"  value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;"  value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #e13224; color: #FFFFFF;"  value="LIC1" data-color="#e13224">LIC1</option>
                                        <option style="background-color: #d98f8e; color: #FFFFFF;"  value="LIC2" data-color="#d98f8e">LIC2</option>
                                        <option style="background-color: #ffffff; color: #000000;"  value="LIC3" data-color="#ffffff">LIC3</option>
                                        <option style="background-color: #dee4df; color: #000000;"  value="LIC4" data-color="#dee4df">LIC4</option>
                                        <option style="background-color: #fac380; color: #000000;"  value="LIC5" data-color="#fac380">LIC5</option>
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;" selected value="C5" data-color="#f7941d">C5</option>

                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Surface</span>
                                    <select class="colored" name="input_lightbg_surfacecode" >
                                        <option style="background-color: #ffffff; color: #000000;" selected value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;"  value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #e13224; color: #FFFFFF;"  value="LIC1" data-color="#e13224">LIC1</option>
                                        <option style="background-color: #d98f8e; color: #FFFFFF;"  value="LIC2" data-color="#d98f8e">LIC2</option>
                                        <option style="background-color: #ffffff; color: #000000;"  value="LIC3" data-color="#ffffff">LIC3</option>
                                        <option style="background-color: #dee4df; color: #000000;"  value="LIC4" data-color="#dee4df">LIC4</option>
                                        <option style="background-color: #fac380; color: #000000;"  value="LIC5" data-color="#fac380">LIC5</option>
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Contrast</span>
                                    <select class="colored" disabled >
                                        <option style="background-color: #ffffff; color: #000000;"  value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;"  value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;" selected value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                        <option style="background-color: #320a07; color: #FFFFFF;"  value="DAC1" data-color="#320a07">DAC1</option>
                                        <option style="background-color: #742827; color: #FFFFFF;"  value="DAC2" data-color="#742827">DAC2</option>
                                        <option style="background-color: #dcc27f; color: #000000;"  value="DAC3" data-color="#dcc27f">DAC3</option>
                                        <option style="background-color: #708673; color: #000000;"  value="DAC4" data-color="#708673">DAC4</option>
                                        <option style="background-color: #a85e06; color: #000000;"  value="DAC5" data-color="#a85e06">DAC5</option>

                                    </select>
                                </div>						
                            </div>                   
                        </form>
 
                        <strong style="font-size: 12px;">Style .dark-backgound</strong>
                        <form id="formSelectDarkColors">
                            <INPUT type="HIDDEN" name="inputCustomer"  value="LDefoix">
                            <!-- Ligne de Color Pickers -->
                            <div class="color-row">
                                <div class="color-group">
                                    <span style="font-size: 8px;">Background</span>
                                    <select class="colored" name="input_darkbg_backgroundcode" >
                                        <option style="background-color: #ffffff; color: #000000;"  value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;"  value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #8c1c13; color: #FFFFFF;" selected value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                        <option style="background-color: #320a07; color: #FFFFFF;"  value="DAC1" data-color="#320a07">DAC1</option>
                                        <option style="background-color: #742827; color: #FFFFFF;"  value="DAC2" data-color="#742827">DAC2</option>
                                        <option style="background-color: #dcc27f; color: #000000;"  value="DAC3" data-color="#dcc27f">DAC3</option>
                                        <option style="background-color: #708673; color: #000000;"  value="DAC4" data-color="#708673">DAC4</option>
                                        <option style="background-color: #a85e06; color: #000000;"  value="DAC5" data-color="#a85e06">DAC5</option>
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Default</span>
                                    <select class="colored" name="input_darkbg_defaultcode" >
                                        <option style="background-color: #ffffff; color: #000000;" selected value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;"  value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                    </select>
                                </div>

                                <div class="color-group">
                                    <span  style="font-size: 8px;">Heading</span>
                                    <select class="colored" name="input_darkbg_headingcode" >
                                        <option style="background-color: #ffffff; color: #000000;" selected value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;"  value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #e13224; color: #FFFFFF;"  value="LIC1" data-color="#e13224">LIC1</option>
                                        <option style="background-color: #d98f8e; color: #FFFFFF;"  value="LIC2" data-color="#d98f8e">LIC2</option>
                                        <option style="background-color: #ffffff; color: #000000;"  value="LIC3" data-color="#ffffff">LIC3</option>
                                        <option style="background-color: #dee4df; color: #000000;"  value="LIC4" data-color="#dee4df">LIC4</option>
                                        <option style="background-color: #fac380; color: #000000;"  value="LIC5" data-color="#fac380">LIC5</option>
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Accent</span>
                                    <select class="colored" disabled >
                                        <option style="background-color: #ffffff; color: #000000;"  value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;"  value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #e13224; color: #FFFFFF;"  value="LIC1" data-color="#e13224">LIC1</option>
                                        <option style="background-color: #d98f8e; color: #FFFFFF;"  value="LIC2" data-color="#d98f8e">LIC2</option>
                                        <option style="background-color: #ffffff; color: #000000;"  value="LIC3" data-color="#ffffff">LIC3</option>
                                        <option style="background-color: #dee4df; color: #000000;"  value="LIC4" data-color="#dee4df">LIC4</option>
                                        <option style="background-color: #fac380; color: #000000;"  value="LIC5" data-color="#fac380">LIC5</option>
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;" selected value="C5" data-color="#f7941d">C5</option>

                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Surface</span>
                                    <select class="colored" name="input_darkbg_surfacecode" >
                                        <option style="background-color: #ffffff; color: #000000;"  value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;"  value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #e13224; color: #FFFFFF;"  value="LIC1" data-color="#e13224">LIC1</option>
                                        <option style="background-color: #d98f8e; color: #FFFFFF;"  value="LIC2" data-color="#d98f8e">LIC2</option>
                                        <option style="background-color: #ffffff; color: #000000;"  value="LIC3" data-color="#ffffff">LIC3</option>
                                        <option style="background-color: #dee4df; color: #000000;"  value="LIC4" data-color="#dee4df">LIC4</option>
                                        <option style="background-color: #fac380; color: #000000;"  value="LIC5" data-color="#fac380">LIC5</option>
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;" selected value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                    </select>
                                </div>
                                <div class="color-group">
                                    <span  style="font-size: 8px;">Contrast</span>
                                    <select class="colored" name="input_darkbg_contrastcode" >
                                        <option style="background-color: #ffffff; color: #000000;" selected value="BG" data-color="#ffffff">BG</option>
                                        <option style="background-color: #000000; color: #ffffff;"  value="FG" data-color="#000000">FG</option>
                                        <option style="background-color: #8c1c13; color: #FFFFFF;"  value="C1" data-color="#8c1c13">C1</option>
                                        <option style="background-color: #bf4342; color: #FFFFFF;"  value="C2" data-color="#bf4342">C2</option>
                                        <option style="background-color: #f2e8cf; color: #000000;"  value="C3" data-color="#f2e8cf">C3</option>
                                        <option style="background-color: #a7b5a9; color: #000000;"  value="C4" data-color="#a7b5a9">C4</option>
                                        <option style="background-color: #f7941d; color: #000000;"  value="C5" data-color="#f7941d">C5</option>
                                        <option style="background-color: #320a07; color: #FFFFFF;"  value="DAC1" data-color="#320a07">DAC1</option>
                                        <option style="background-color: #742827; color: #FFFFFF;"  value="DAC2" data-color="#742827">DAC2</option>
                                        <option style="background-color: #dcc27f; color: #000000;"  value="DAC3" data-color="#dcc27f">DAC3</option>
                                        <option style="background-color: #708673; color: #000000;"  value="DAC4" data-color="#708673">DAC4</option>
                                        <option style="background-color: #a85e06; color: #000000;"  value="DAC5" data-color="#a85e06">DAC5</option>

                                    </select>
                                </div>						
                            </div>                   
                        </form>
                        </div><!-- Contenu avancé -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
            <h2 class="accordion-header" id="panelsStayOpen-heading2">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse2" aria-expanded="false" aria-controls="panelsStayOpen-collapse2">
                    <b>Polices de Caractères</b>
                </button>
            </h2>
            <div id="panelsStayOpen-collapse2" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-heading2">
                <div class="accordion-body">
                    <form id="formDefaultFont">
                        <INPUT type="HIDDEN" name="inputCustomer"  value="LDefoix">
                        <label for="default_font"><span class="notranslate">Default:</span></label>
                        <select class="form-select" name="inputDefaultFont" id="selectDefaultFont">
                                                            <option  
                                        value="Arial" 
                                        style="font-family: Arial, sans-serif">
                                    Arial                                </option>
                                                            <option  
                                        value="Courier New" 
                                        style="font-family: 'Courier New', Courier, monospace">
                                    Courier New                                </option>
                                                            <option  
                                        value="Georgia" 
                                        style="font-family: Georgia, serif">
                                    Georgia                                </option>
                                                            <option  
                                        value="Helvetica" 
                                        style="font-family: Helvetica, sans-serif">
                                    Helvetica                                </option>
                                                            <option  
                                        value="Lato" 
                                        style="font-family: Lato, sans-serif">
                                    Lato                                </option>
                                                            <option  
                                        value="Montserrat" 
                                        style="font-family: Montserrat, sans-serif">
                                    Montserrat                                </option>
                                                            <option  
                                        value="Noto Sans" 
                                        style="font-family: 'Noto Sans', sans-serif">
                                    Noto Sans                                </option>
                                                            <option  
                                        value="Open Sans" 
                                        style="font-family: 'Open Sans', sans-serif">
                                    Open Sans                                </option>
                                                            <option  
                                        value="Playfair Display" 
                                        style="font-family: 'Playfair Display', serif">
                                    Playfair Display                                </option>
                                                            <option  
                                        value="Poppins" 
                                        style="font-family: Poppins, sans-serif">
                                    Poppins                                </option>
                                                            <option selected 
                                        value="Roboto" 
                                        style="font-family: Roboto, sans-serif">
                                    Roboto                                </option>
                                                            <option  
                                        value="Source Sans Pro" 
                                        style="font-family: Source Sans Pro, sans-serif">
                                    Source Sans Pro                                </option>
                                                            <option  
                                        value="Times New Roman" 
                                        style="font-family: Times New Roman, Times, serif">
                                    Times New Roman                                </option>
                                                            <option  
                                        value="Ubuntu" 
                                        style="font-family: Ubuntu, sans-serif">
                                    Ubuntu                                </option>
                                                            <option  
                                        value="Verdana" 
                                        style="font-family: Verdana, sans-serif">
                                    Verdana                                </option>
                                                    </select>
                    </form>
                    <form id="formHeadingFont">
                        <INPUT type="HIDDEN" name="inputCustomer"  value="LDefoix">
                        <label for="heading_font"><span class="notranslate">Heading:</span></label>
                        <select class="form-select" name="inputHeadingFont" id="selectHeadingFont">
                                                            <option  
                                        value="Arial" 
                                        style="font-family: Arial, sans-serif">
                                    Arial                                </option>
                                                            <option  
                                        value="Courier New" 
                                        style="font-family: 'Courier New', Courier, monospace">
                                    Courier New                                </option>
                                                            <option  
                                        value="Georgia" 
                                        style="font-family: Georgia, serif">
                                    Georgia                                </option>
                                                            <option  
                                        value="Helvetica" 
                                        style="font-family: Helvetica, sans-serif">
                                    Helvetica                                </option>
                                                            <option  
                                        value="Lato" 
                                        style="font-family: Lato, sans-serif">
                                    Lato                                </option>
                                                            <option  
                                        value="Montserrat" 
                                        style="font-family: Montserrat, sans-serif">
                                    Montserrat                                </option>
                                                            <option  
                                        value="Noto Sans" 
                                        style="font-family: 'Noto Sans', sans-serif">
                                    Noto Sans                                </option>
                                                            <option  
                                        value="Open Sans" 
                                        style="font-family: 'Open Sans', sans-serif">
                                    Open Sans                                </option>
                                                            <option  
                                        value="Playfair Display" 
                                        style="font-family: 'Playfair Display', serif">
                                    Playfair Display                                </option>
                                                            <option  
                                        value="Poppins" 
                                        style="font-family: Poppins, sans-serif">
                                    Poppins                                </option>
                                                            <option  
                                        value="Roboto" 
                                        style="font-family: Roboto, sans-serif">
                                    Roboto                                </option>
                                                            <option  
                                        value="Source Sans Pro" 
                                        style="font-family: Source Sans Pro, sans-serif">
                                    Source Sans Pro                                </option>
                                                            <option  
                                        value="Times New Roman" 
                                        style="font-family: Times New Roman, Times, serif">
                                    Times New Roman                                </option>
                                                            <option  
                                        value="Ubuntu" 
                                        style="font-family: Ubuntu, sans-serif">
                                    Ubuntu                                </option>
                                                            <option  
                                        value="Verdana" 
                                        style="font-family: Verdana, sans-serif">
                                    Verdana                                </option>
                                                    </select>
                    </form>                                       
                    <form id="formNavFont">
                        <INPUT type="HIDDEN" name="inputCustomer"  value="LDefoix">
                        <label for="nav_font"><span class="notranslate">Nav:</span></label>
                        <select class="form-select" name="inputNavFont" id="selectNavFont">
                                                            <option  
                                        value="Arial" 
                                        style="font-family: Arial, sans-serif">
                                    Arial                                </option>
                                                            <option  
                                        value="Courier New" 
                                        style="font-family: 'Courier New', Courier, monospace">
                                    Courier New                                </option>
                                                            <option  
                                        value="Georgia" 
                                        style="font-family: Georgia, serif">
                                    Georgia                                </option>
                                                            <option  
                                        value="Helvetica" 
                                        style="font-family: Helvetica, sans-serif">
                                    Helvetica                                </option>
                                                            <option  
                                        value="Lato" 
                                        style="font-family: Lato, sans-serif">
                                    Lato                                </option>
                                                            <option  
                                        value="Montserrat" 
                                        style="font-family: Montserrat, sans-serif">
                                    Montserrat                                </option>
                                                            <option  
                                        value="Noto Sans" 
                                        style="font-family: 'Noto Sans', sans-serif">
                                    Noto Sans                                </option>
                                                            <option  
                                        value="Open Sans" 
                                        style="font-family: 'Open Sans', sans-serif">
                                    Open Sans                                </option>
                                                            <option  
                                        value="Playfair Display" 
                                        style="font-family: 'Playfair Display', serif">
                                    Playfair Display                                </option>
                                                            <option selected 
                                        value="Poppins" 
                                        style="font-family: Poppins, sans-serif">
                                    Poppins                                </option>
                                                            <option  
                                        value="Roboto" 
                                        style="font-family: Roboto, sans-serif">
                                    Roboto                                </option>
                                                            <option  
                                        value="Source Sans Pro" 
                                        style="font-family: Source Sans Pro, sans-serif">
                                    Source Sans Pro                                </option>
                                                            <option  
                                        value="Times New Roman" 
                                        style="font-family: Times New Roman, Times, serif">
                                    Times New Roman                                </option>
                                                            <option  
                                        value="Ubuntu" 
                                        style="font-family: Ubuntu, sans-serif">
                                    Ubuntu                                </option>
                                                            <option  
                                        value="Verdana" 
                                        style="font-family: Verdana, sans-serif">
                                    Verdana                                </option>
                                                    </select>
                    </form>  
                      
                </div>
            </div>
        </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="panelsStayOpen-heading3">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse3" aria-expanded="false" aria-controls="panelsStayOpen-collapse3">
                    <b>Sections</b>
                </button>
                </h2>
                <div id="panelsStayOpen-collapse3" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-heading3">
                    <div class="accordion-body">
                        <form id="formheroSection" class="mt-5">
        <input type="hidden" name="inputCustomer" value="LDefoix">
        <label for="hero_section">
            <span class="notranslate">hero:</span>
        </label>

        <select 
            class="form-select" 
            name="inputheroSection" 
            id="selectheroSection"
            onchange="updateSelectedFromDropdown(this)">
                            <option 
                    value="1" 
                    data-template-name="NewBiz"
                    >
                    NewBiz                </option>
                            <option 
                    value="2" 
                    data-template-name="moderna"
                    >
                    moderna                </option>
                            <option 
                    value="34" 
                    data-template-name="HeroCut"
                    >
                    HeroCut                </option>
                            <option 
                    value="35" 
                    data-template-name="MastHead"
                    selected>
                    MastHead                </option>
                    </select>
    </form>
    <!-- Affichage du modèle sélectionné -->
    <p class="mt-3" style="display: block">
        Modèle sélectionné: <b><span id="selected-template-name-hero">MastHead</span></b>
    </p>
    <!-- Conteneur des images -->
    <div style="position: relative;">
        <button onclick="scroll2Left('template-container-hero')" style="position: absolute; left: 0; z-index: 1;">⬅</button>
        <button onclick="scroll2Right('template-container-hero')" style="position: absolute; right: 0; z-index: 1;">➡</button>

        <div id="template-container-hero" class="template-container">
                            <div class="template-card" data-value="1" data-template-name="NewBiz">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/hero/hero_newbiz_300x200.png"
                        alt="NewBiz" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('1', 'NewBiz', 'selected-template-name-hero', document.getElementById('selectheroSection'))">
                    <div class="card-body">
                        <p class="card-text">NewBiz</p>
                    </div>
                </div>
                            <div class="template-card" data-value="2" data-template-name="moderna">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/hero/hero_moderna_300x200.png"
                        alt="moderna" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('2', 'moderna', 'selected-template-name-hero', document.getElementById('selectheroSection'))">
                    <div class="card-body">
                        <p class="card-text">moderna</p>
                    </div>
                </div>
                            <div class="template-card" data-value="34" data-template-name="HeroCut">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/hero/hero_newbiz_300x200.png"
                        alt="HeroCut" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('34', 'HeroCut', 'selected-template-name-hero', document.getElementById('selectheroSection'))">
                    <div class="card-body">
                        <p class="card-text">HeroCut</p>
                    </div>
                </div>
                            <div class="template-card" data-value="35" data-template-name="MastHead">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/hero/hero_masthead_300x200.png"
                        alt="MastHead" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('35', 'MastHead', 'selected-template-name-hero', document.getElementById('selectheroSection'))">
                    <div class="card-body">
                        <p class="card-text">MastHead</p>
                    </div>
                </div>
                    </div>
    </div>
    <form id="formaboutSection" class="mt-5">
        <input type="hidden" name="inputCustomer" value="LDefoix">
        <label for="about_section">
            <span class="notranslate">about:</span>
        </label>

        <select 
            class="form-select" 
            name="inputaboutSection" 
            id="selectaboutSection"
            onchange="updateSelectedFromDropdown(this)">
                            <option 
                    value="8" 
                    data-template-name="About001"
                    selected>
                    About001                </option>
                            <option 
                    value="25" 
                    data-template-name="About002"
                    >
                    About002                </option>
                            <option 
                    value="26" 
                    data-template-name="About003"
                    >
                    About003                </option>
                            <option 
                    value="27" 
                    data-template-name="About004"
                    >
                    About004                </option>
                    </select>
    </form>
    <!-- Affichage du modèle sélectionné -->
    <p class="mt-3" style="display: block">
        Modèle sélectionné: <b><span id="selected-template-name-about">About001</span></b>
    </p>
    <!-- Conteneur des images -->
    <div style="position: relative;">
        <button onclick="scroll2Left('template-container-about')" style="position: absolute; left: 0; z-index: 1;">⬅</button>
        <button onclick="scroll2Right('template-container-about')" style="position: absolute; right: 0; z-index: 1;">➡</button>

        <div id="template-container-about" class="template-container">
                            <div class="template-card" data-value="8" data-template-name="About001">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/about/about_iportfolio_300x200.png"
                        alt="About001" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('8', 'About001', 'selected-template-name-about', document.getElementById('selectaboutSection'))">
                    <div class="card-body">
                        <p class="card-text">About001</p>
                    </div>
                </div>
                            <div class="template-card" data-value="25" data-template-name="About002">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/about/about_moderna_300x200.png"
                        alt="About002" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('25', 'About002', 'selected-template-name-about', document.getElementById('selectaboutSection'))">
                    <div class="card-body">
                        <p class="card-text">About002</p>
                    </div>
                </div>
                            <div class="template-card" data-value="26" data-template-name="About003">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/about/about_newbiz_300x200.png"
                        alt="About003" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('26', 'About003', 'selected-template-name-about', document.getElementById('selectaboutSection'))">
                    <div class="card-body">
                        <p class="card-text">About003</p>
                    </div>
                </div>
                            <div class="template-card" data-value="27" data-template-name="About004">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/about/about_gp_300x200.png"
                        alt="About004" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('27', 'About004', 'selected-template-name-about', document.getElementById('selectaboutSection'))">
                    <div class="card-body">
                        <p class="card-text">About004</p>
                    </div>
                </div>
                    </div>
    </div>
    <form id="formresumeSection" class="mt-5">
        <input type="hidden" name="inputCustomer" value="LDefoix">
        <label for="resume_section">
            <span class="notranslate">resume:</span>
        </label>

        <select 
            class="form-select" 
            name="inputresumeSection" 
            id="selectresumeSection"
            onchange="updateSelectedFromDropdown(this)">
                            <option 
                    value="19" 
                    data-template-name="Resume 1"
                    >
                    Resume 1                </option>
                            <option 
                    value="28" 
                    data-template-name="Resume 2"
                    >
                    Resume 2                </option>
                            <option 
                    value="29" 
                    data-template-name="Resume 3"
                    selected>
                    Resume 3                </option>
                    </select>
    </form>
    <!-- Affichage du modèle sélectionné -->
    <p class="mt-3" style="display: block">
        Modèle sélectionné: <b><span id="selected-template-name-resume">Resume 3</span></b>
    </p>
    <!-- Conteneur des images -->
    <div style="position: relative;">
        <button onclick="scroll2Left('template-container-resume')" style="position: absolute; left: 0; z-index: 1;">⬅</button>
        <button onclick="scroll2Right('template-container-resume')" style="position: absolute; right: 0; z-index: 1;">➡</button>

        <div id="template-container-resume" class="template-container">
                            <div class="template-card" data-value="19" data-template-name="Resume 1">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/resume/resume_resume001.png"
                        alt="Resume 1" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('19', 'Resume 1', 'selected-template-name-resume', document.getElementById('selectresumeSection'))">
                    <div class="card-body">
                        <p class="card-text">Resume 1</p>
                    </div>
                </div>
                            <div class="template-card" data-value="28" data-template-name="Resume 2">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/resume/resume_resume002.png"
                        alt="Resume 2" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('28', 'Resume 2', 'selected-template-name-resume', document.getElementById('selectresumeSection'))">
                    <div class="card-body">
                        <p class="card-text">Resume 2</p>
                    </div>
                </div>
                            <div class="template-card" data-value="29" data-template-name="Resume 3">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/resume/resume_resume003.png"
                        alt="Resume 3" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('29', 'Resume 3', 'selected-template-name-resume', document.getElementById('selectresumeSection'))">
                    <div class="card-body">
                        <p class="card-text">Resume 3</p>
                    </div>
                </div>
                    </div>
    </div>
    <form id="formcontactSection" class="mt-5">
        <input type="hidden" name="inputCustomer" value="LDefoix">
        <label for="contact_section">
            <span class="notranslate">contact:</span>
        </label>

        <select 
            class="form-select" 
            name="inputcontactSection" 
            id="selectcontactSection"
            onchange="updateSelectedFromDropdown(this)">
                            <option 
                    value="23" 
                    data-template-name="Contact001"
                    >
                    Contact001                </option>
                            <option 
                    value="30" 
                    data-template-name="Contact002"
                    >
                    Contact002                </option>
                            <option 
                    value="31" 
                    data-template-name="Contact003"
                    >
                    Contact003                </option>
                            <option 
                    value="32" 
                    data-template-name="Contact004"
                    >
                    Contact004                </option>
                            <option 
                    value="33" 
                    data-template-name="Contact005"
                    selected>
                    Contact005                </option>
                    </select>
    </form>
    <!-- Affichage du modèle sélectionné -->
    <p class="mt-3" style="display: block">
        Modèle sélectionné: <b><span id="selected-template-name-contact">Contact005</span></b>
    </p>
    <!-- Conteneur des images -->
    <div style="position: relative;">
        <button onclick="scroll2Left('template-container-contact')" style="position: absolute; left: 0; z-index: 1;">⬅</button>
        <button onclick="scroll2Right('template-container-contact')" style="position: absolute; right: 0; z-index: 1;">➡</button>

        <div id="template-container-contact" class="template-container">
                            <div class="template-card" data-value="23" data-template-name="Contact001">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/contact/contact_contact001.png"
                        alt="Contact001" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('23', 'Contact001', 'selected-template-name-contact', document.getElementById('selectcontactSection'))">
                    <div class="card-body">
                        <p class="card-text">Contact001</p>
                    </div>
                </div>
                            <div class="template-card" data-value="30" data-template-name="Contact002">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/contact/contact_contact002.png"
                        alt="Contact002" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('30', 'Contact002', 'selected-template-name-contact', document.getElementById('selectcontactSection'))">
                    <div class="card-body">
                        <p class="card-text">Contact002</p>
                    </div>
                </div>
                            <div class="template-card" data-value="31" data-template-name="Contact003">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/contact/contact_contact003.png"
                        alt="Contact003" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('31', 'Contact003', 'selected-template-name-contact', document.getElementById('selectcontactSection'))">
                    <div class="card-body">
                        <p class="card-text">Contact003</p>
                    </div>
                </div>
                            <div class="template-card" data-value="32" data-template-name="Contact004">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/contact/contact_contact004.png"
                        alt="Contact004" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('32', 'Contact004', 'selected-template-name-contact', document.getElementById('selectcontactSection'))">
                    <div class="card-body">
                        <p class="card-text">Contact004</p>
                    </div>
                </div>
                            <div class="template-card" data-value="33" data-template-name="Contact005">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/contact/contact_contact005.png"
                        alt="Contact005" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('33', 'Contact005', 'selected-template-name-contact', document.getElementById('selectcontactSection'))">
                    <div class="card-body">
                        <p class="card-text">Contact005</p>
                    </div>
                </div>
                    </div>
    </div>
    <form id="formfeatured-servicesSection" class="mt-5">
        <input type="hidden" name="inputCustomer" value="LDefoix">
        <label for="featured-services_section">
            <span class="notranslate">featured-services:</span>
        </label>

        <select 
            class="form-select" 
            name="inputfeatured-servicesSection" 
            id="selectfeatured-servicesSection"
            onchange="updateSelectedFromDropdown(this)">
                            <option 
                    value="20" 
                    data-template-name="Featured-Services001"
                    >
                    Featured-Services001                </option>
                    </select>
    </form>
    <!-- Affichage du modèle sélectionné -->
    <p class="mt-3" style="display: block">
        Modèle sélectionné: <b><span id="selected-template-name-featured-services"></span></b>
    </p>
    <!-- Conteneur des images -->
    <div style="position: relative;">
        <button onclick="scroll2Left('template-container-featured-services')" style="position: absolute; left: 0; z-index: 1;">⬅</button>
        <button onclick="scroll2Right('template-container-featured-services')" style="position: absolute; right: 0; z-index: 1;">➡</button>

        <div id="template-container-featured-services" class="template-container">
                            <div class="template-card" data-value="20" data-template-name="Featured-Services001">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/featured-services/"
                        alt="Featured-Services001" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('20', 'Featured-Services001', 'selected-template-name-featured-services', document.getElementById('selectfeatured-servicesSection'))">
                    <div class="card-body">
                        <p class="card-text">Featured-Services001</p>
                    </div>
                </div>
                    </div>
    </div>
    <form id="formpostsSection" class="mt-5">
        <input type="hidden" name="inputCustomer" value="LDefoix">
        <label for="posts_section">
            <span class="notranslate">posts:</span>
        </label>

        <select 
            class="form-select" 
            name="inputpostsSection" 
            id="selectpostsSection"
            onchange="updateSelectedFromDropdown(this)">
                            <option 
                    value="24" 
                    data-template-name="Posts001"
                    selected>
                    Posts001                </option>
                    </select>
    </form>
    <!-- Affichage du modèle sélectionné -->
    <p class="mt-3" style="display: block">
        Modèle sélectionné: <b><span id="selected-template-name-posts">Posts001</span></b>
    </p>
    <!-- Conteneur des images -->
    <div style="position: relative;">
        <button onclick="scroll2Left('template-container-posts')" style="position: absolute; left: 0; z-index: 1;">⬅</button>
        <button onclick="scroll2Right('template-container-posts')" style="position: absolute; right: 0; z-index: 1;">➡</button>

        <div id="template-container-posts" class="template-container">
                            <div class="template-card" data-value="24" data-template-name="Posts001">
                    <img src="https://belgates.be/wp-content/themes/belgates/templates/assets/img/k_flex/screenshots/posts/"
                        alt="Posts001" 
                        class="card-img-top template-image"
                        onclick="updateSelectedTemplate('24', 'Posts001', 'selected-template-name-posts', document.getElementById('selectpostsSection'))">
                    <div class="card-body">
                        <p class="card-text">Posts001</p>
                    </div>
                </div>
                    </div>
    </div>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="panelsStayOpen-heading4">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse4" aria-expanded="false" aria-controls="panelsStayOpen-collapse4">
                    Options
                </button>
                </h2>
                <div id="panelsStayOpen-collapse4" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-heading3">
                <div class="accordion-body">
                    <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                </div>
                </div>
            </div>            
        </div>
    </div>
    <div class="main-column full-width rounded" id="mainColumn" style="background-color: white; padding-left: 10px; padding: 0px;">
    <!-- Contenu de la colonne main -->
        <div style="background-color: white; padding-left: 5px; padding: 0px; margin-left: 20px;">
            <button id="toggleButton" class="btn btn-primary">
                <i class="fa-solid fa-gear"></i>
            </button>
            <button id="reloadButton" class="btn btn-secondary">
                <i class="fa-solid fa-rotate"></i>
            </button>
            <div class="main-content">
                <div id="embedDiv" class="embed">
                    <iframe 
                        id="iframeContent"
                        src="https://kinetek.be/mywebsite/?tempaccess=LDefoix&amp;template=test_k-flex" 
                        width="100%" 
                        height="100%" 
                        frameborder="0" 
                        sandbox="allow-scripts allow-same-origin">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
    <!-- Overlay d'information -->
    <div id="infoOverlay" class="info-overlay">
        <div class="info-box">
            <h2 id="infoTitle"></h2>
            <div id="infoContent"></div>
            <button id="closeButton" class="btn">Fermer</button>
        </div>
    </div>
</div>
<script>
jQuery(document).ready(function ($) {
    $('#selectDefaultFont').on('change', function () {
        var ajax_url = "https://belgates.be/wp-admin/admin-ajax.php";
        // Récupérer les valeurs du formulaire
        var fontValue = $(this).val();
        var customerId = $('input[name="inputCustomer"]').val();

        // Préparer les données pour la requête AJAX
        var data = {
            action: 'update_font', // Nom de l'action AJAX
            fontUsage: 'default_font',
            fontValue: fontValue,
            inputCustomer: customerId
        };
        //alert(JSON.stringify(data, null, 2));
        // Envoyer la requête AJAX
        $.ajax({
            url: ajax_url,
            type: 'POST',
            data: data,
            success: function (response) {
                if (response.success) {
                    //alert('Police mise à jour avec succès : ' + response.data.message);
                } else {
                    //alert('Erreur : ' + response.data.message);
                }
            },
            error: function (xhr, status, error) {
                console.error('Erreur AJAX :', status, error);
                console.log(xhr.responseText);
            }
        });
    });
});
jQuery(document).ready(function ($) {
    $('#selectHeadingFont').on('change', function () {
        var ajax_url = "https://belgates.be/wp-admin/admin-ajax.php";
        // Récupérer les valeurs du formulaire
        var fontValue = $(this).val();
        var customerId = $('input[name="inputCustomer"]').val();

        // Préparer les données pour la requête AJAX
        var data = {
            action: 'update_font', // Nom de l'action AJAX
            fontUsage: 'heading_font',
            fontValue: fontValue,
            inputCustomer: customerId
        };
        //alert(JSON.stringify(data, null, 2));
        // Envoyer la requête AJAX
        $.ajax({
            url: ajax_url,
            type: 'POST',
            data: data,
            success: function (response) {
                if (response.success) {
                    //alert('Police mise à jour avec succès : ' + response.data.message);
                } else {
                    //alert('Erreur : ' + response.data.message);
                }
            },
            error: function (xhr, status, error) {
                console.error('Erreur AJAX :', status, error);
                console.log(xhr.responseText);
            }
        });
    });
});
jQuery(document).ready(function ($) {
    $('#selectNavFont').on('change', function () {
        var ajax_url = "https://belgates.be/wp-admin/admin-ajax.php";
        // Récupérer les valeurs du formulaire
        var fontValue = $(this).val();
        var customerId = $('input[name="inputCustomer"]').val();

        // Préparer les données pour la requête AJAX
        var data = {
            action: 'update_font', // Nom de l'action AJAX
            fontUsage: 'nav_font',
            fontValue: fontValue,
            inputCustomer: customerId
        };
        //alert(JSON.stringify(data, null, 2));
        // Envoyer la requête AJAX
        $.ajax({
            url: ajax_url,
            type: 'POST',
            data: data,
            success: function (response) {
                if (response.success) {
                    //alert('Police mise à jour avec succès : ' + response.data.message);
                } else {
                    //alert('Erreur : ' + response.data.message);
                }
            },
            error: function (xhr, status, error) {
                console.error('Erreur AJAX :', status, error);
                console.log(xhr.responseText);
            }
        });
    });
});
$('#formSelectColors input[type="color"]').on('change', function() {
    const colorId = $(this).attr('id');
    const codeId = colorId.replace('color', 'code');
    const value = $(this).val();
    $('#' + codeId).val(value);
    
    const colorName = colorId.replace('colorInput', '');
    //alert("F1, colorName="+colorName+", colorId="+colorId+", codeId="+codeId);
    submitTemplateColor(colorName, value);
});



function submitTemplateColor(colorName, value) {
    var ajax_url = "https://belgates.be/wp-admin/admin-ajax.php";
    var inputCustomer = $('input[name="inputCustomer"]').val();
    
    var data = {
        'action': 'save_template_color',
        'colorName': colorName,
        'colorValue': value,
        'inputCustomer': inputCustomer
    };
    //alert(JSON.stringify(data, null, 2));
    $.ajax({
        url: ajax_url,
        type: 'post',
        data: data,
        success: function(response) {
            //console.log('Couleur sauvegardée');
        },
        error: function(response) {
            console.log(response);
        }
    });
}
</script>
<script>
    document.getElementById('toggleButton').addEventListener('click', function () {
        var leftColumn = document.getElementById('leftColumn');
        var mainColumn = document.getElementById('mainColumn');
        leftColumn.classList.toggle('hidden');
    });
</script>
<script>
    // Gestionnaire pour recharger l'iframe
    document.getElementById('reloadButton').addEventListener('click', function () {
        var iframe = document.getElementById('iframeContent');
        iframe.src = iframe.src; // Recharge en réassignant la valeur de `src`
    });
</script>
<script>
        // Fonction de synchronisation entre color pickers et codes couleur
        function syncColorAndCode(colorInputId, codeInputId) {
            const colorInput = document.getElementById(colorInputId);
            const codeInput = document.getElementById(codeInputId);

            // Synchronise le champ texte lorsque la couleur est choisie
            colorInput.addEventListener('input', () => {
                const color = colorInput.value;
                codeInput.value = color;
            });

            // Synchronise le color picker lorsque le code couleur est saisi
            codeInput.addEventListener('input', () => {
                const color = codeInput.value;
                if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
                    colorInput.value = color;
                }
            });
        }

        // Synchronisation des 5 paires
        syncColorAndCode('colorInput1', 'codeInput1');
        syncColorAndCode('colorInput2', 'codeInput2');
        syncColorAndCode('colorInput3', 'codeInput3');
        syncColorAndCode('colorInput4', 'codeInput4');
        syncColorAndCode('colorInput5', 'codeInput5');
        syncColorAndCode('colorInputBG', 'codeInputBG');
        syncColorAndCode('colorInputFG', 'codeInputFG');
</script>
<script>
        const selectPolice = document.getElementById('selectPolice');
        const policeDisplay = document.getElementById('policeDisplay');

        // Met à jour la police d'affichage selon la sélection
        selectPolice.addEventListener('change', () => {
            const selectedFont = selectPolice.value;
            policeDisplay.style.fontFamily = selectedFont;
            policeDisplay.textContent = `Exemple de texte en ${selectPolice.options[selectPolice.selectedIndex].text}`;
        });

        // Initialisation avec la police par défaut
        const defaultFont = selectPolice.value;
        policeDisplay.style.fontFamily = defaultFont;
        policeDisplay.textContent = `Exemple de texte en ${selectPolice.options[selectPolice.selectedIndex].text}`;
    </script>
    <script>
function updateSelectColor(select) {
    const selectedOption = select.options[select.selectedIndex];
    const backgroundColor = selectedOption.dataset.color; // Couleur en hexadécimal (#ffffff)

    // Fonction pour convertir une couleur hexadécimale en RGB
    function hexToRgb(hex) {
        const bigint = parseInt(hex.slice(1), 16);
        const r = (bigint >> 16) & 255;
        const g = (bigint >> 8) & 255;
        const b = bigint & 255;
        return { r, g, b };
    }

    // Calculer la luminance relative (formule standard WCAG)
    function getLuminance({ r, g, b }) {
        const a = [r, g, b].map((v) => {
            v /= 255;
            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
        });
        return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
    }

    // Déterminer la couleur du texte en fonction de la luminance
    const rgbColor = hexToRgb(backgroundColor);
    const luminance = getLuminance(rgbColor);
    const textColor = luminance > 0.5 ? 'black' : 'white'; // Luminance > 0.5 -> texte noir, sinon texte blanc

    // Appliquer les styles
    select.style.backgroundColor = backgroundColor;
    select.style.color = textColor;
}

// Initialiser la couleur au chargement pour tous les éléments <select> avec la classe "colored"
window.onload = function() {
    const selects = document.querySelectorAll('select.colored');
    selects.forEach(updateSelectColor); // Appliquer la fonction à chaque <select>
};
    </script>
<script>
    // Fonction pour mettre à jour la couleur d'un élément <select>
    function updateSelectColor(selectElement) {
    // Récupère la valeur de l'option sélectionnée
    const selectedOption = selectElement.options[selectElement.selectedIndex];
    const backgroundColor = selectedOption.style.backgroundColor;
    const textColor = selectedOption.style.color;

    // Applique les couleurs à l'élément <select>
    selectElement.style.backgroundColor = backgroundColor || 'transparent';
    selectElement.style.color = textColor || 'inherit';
} 

// Détecte les changements dans les sélecteurs avec la classe "colored"
$(document).on('change', 'select.colored', function() {
    // Récupère le nom de la variable (attribut "name")
    var colorName = $(this).attr('name');

    // Récupère la valeur sélectionnée
    var colorValue = $(this).val();

    // Met à jour la couleur de l'élément
    updateSelectColor(this);

    // Appelle la fonction pour envoyer les données via AJAX
    submitUpdateColorAssignation(colorName, colorValue);
});

// Fonction d'envoi AJAX
function submitUpdateColorAssignation(colorName, value) {
    var ajax_url = "https://belgates.be/wp-admin/admin-ajax.php";
    var inputCustomer = $('input[name="inputCustomer"]').val();
    
    var data = {
        'action': 'update_color_assignation',
        'colorName': colorName,
        'colorValue': value,
        'inputCustomer': inputCustomer
    };
    //alert(JSON.stringify(data, null, 2));
    $.ajax({
        url: ajax_url,
        type: 'POST',
        data: data,
        success: function(response) {
            console.log('Couleur sauvegardée :', response);
        },
        error: function(response) {
            console.error('Erreur lors de l\'envoi AJAX :', response);
        }
    });
}
</script>
<script>
        // Script pour le toggle
        document.getElementById('toggleButtonAdvancedOptions').addEventListener('click', function () {
            const advancedOptions = document.getElementById('advanced_options');
            const icon = this.querySelector('i');

            if (advancedOptions.style.display === 'none' || advancedOptions.style.display === '') {
                advancedOptions.style.display = 'block'; // Afficher le contenu
                icon.classList.remove('fa-chevron-down'); // Changer l'icône
                icon.classList.add('fa-chevron-up');
            } else {
                advancedOptions.style.display = 'none'; // Masquer le contenu
                icon.classList.remove('fa-chevron-up'); // Revenir à l'icône originale
                icon.classList.add('fa-chevron-down');
            }
        });
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const infoButtons = document.querySelectorAll('.info-button');
    const infoOverlay = document.getElementById('infoOverlay');
    const infoTitle = document.getElementById('infoTitle');
    const infoContent = document.getElementById('infoContent');
    const closeButton = document.getElementById('closeButton');

    // Fonction pour charger le contenu WordPress
    async function loadWpContent(postId) {
        infoContent.innerHTML = '<div class="loading">Chargement...</div>';
        
        try {
            // Utilisation de l'API REST WordPress
            const response = await fetch(`https://belgates.be/wp-json/wp/v2/posts/${postId}?_embed`);
            if (!response.ok) {
                throw new Error(`Erreur HTTP: ${response.status}`);
            }
            const post = await response.json();
            
            // Afficher le contenu du post
            infoContent.innerHTML = `
                <div class="post-content">
                    ${post.content.rendered}
                </div>
            `;
        } catch (error) {
            infoContent.innerHTML = `<div class="error">Erreur de chargement: ${error.message}</div>`;
        }
    }

    // Alternative : charger via AJAX vers un fichier PHP
    function loadWpContentPhp(postId) {
        infoContent.innerHTML = '<div class="loading">Chargement...</div>';
        
        fetch(`https://belgates.be/wp-admin/admin-ajax.php`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `action=get_post_content&post_id=${postId}&security=f205880fd1`
        })
        .then(response => response.text())
        .then(content => {
            infoContent.innerHTML = content;
        })
        .catch(error => {
            infoContent.innerHTML = `<div class="error">Erreur de chargement: ${error.message}</div>`;
        });
    }

    // Ajouter les écouteurs d'événements à chaque bouton
    infoButtons.forEach(button => {
        button.addEventListener('click', () => {
            const title = button.getAttribute('data-title');
            const postId = button.getAttribute('data-post-id');
            
            infoTitle.textContent = title;
            loadWpContentPhp(postId); // ou loadWpContent(postId) pour utiliser l'API REST
            
            infoOverlay.classList.add('visible');
        });
    });

    // Fermer l'overlay
    closeButton.addEventListener('click', () => {
        infoOverlay.classList.remove('visible');
    });

    // Fermer l'overlay en cliquant en dehors de la boîte
    infoOverlay.addEventListener('click', (e) => {
        if (e.target === infoOverlay) {
            infoOverlay.classList.remove('visible');
        }
    });
});
</script>
<script>
    function scroll2Left(containerId) {
        const container = document.getElementById(containerId);
        if (container) {
            container.scrollLeft -= container.clientWidth; // Défile vers la gauche
        }
    }

    function scroll2Right(containerId) {
        const container = document.getElementById(containerId);
        if (container) {
            container.scrollLeft += container.clientWidth; // Défile vers la droite
        }
    }
</script>

<script>
function updateSelectedTemplate(templateId, templateName, spanId, dropdownElement) {
    // Met à jour le texte "Modèle sélectionné"
    const selectedTemplateNameElement = document.getElementById(spanId);
    if (selectedTemplateNameElement) {
        selectedTemplateNameElement.textContent = templateName;
    }

    // Met à jour la valeur sélectionnée dans la liste déroulante
    dropdownElement.value = templateId;

    // Optionnel : Soumettre automatiquement le formulaire
    // dropdownElement.form.submit();
}


function updateSelectedFromDropdown(dropdownElement) {
    //alert("updateSelectedFromDropdown()");

    // Récupère l'option sélectionnée dans la liste déroulante
    const selectedOption = dropdownElement.options[dropdownElement.selectedIndex];

    // Identifie la section à partir de l'ID du dropdown
    const sectionName = dropdownElement.id.replace('select', '').replace('Section', ''); // Ex: "Hero" ou "Footer"

    // Met à jour le texte "Modèle sélectionné" pour la bonne section
    const selectedTemplateNameElement = document.getElementById(`selected-template-name-${sectionName}`);
    if (selectedTemplateNameElement) {
        selectedTemplateNameElement.textContent = selectedOption.textContent;
    }

    // Prépare les données pour l'envoi AJAX
    const variableName = dropdownElement.name; // Nom de la variable
    const variableValue = selectedOption.value; // Valeur sélectionnée
    const inputCustomer = document.querySelector('input[name="inputCustomer"]').value; // Input hidden

    //alert("variableName=" + variableName);

    // Envoi des données via AJAX
    submitVariableUpdate(variableName, variableValue, inputCustomer);
}


function submitVariableUpdate(variableName, variableValue, inputCustomer) {
    const ajax_url = "https://belgates.be/wp-admin/admin-ajax.php";  
    const data = {
        'action': 'update_onepageweb_k_flex',
        'variableName': variableName,
        'variableValue': variableValue,
        'inputCustomer': inputCustomer
    };
    //alert(JSON.stringify(data, null, 2));
    $.ajax({
        url: ajax_url,
        type: 'POST',
        data: data,
        success: function(response) {
            console.log('Donnée sauvegardée :', response);
        },
        error: function(response) {
            console.error('Erreur lors de l\'envoi AJAX :', response);
        }
    });
}

</script>