/* ================================================
   HEADER – LOGO, MENU, ALIGNEMENT
   ================================================ */
/* Conteneur principal du header */
.container-header {
    display: flex !important; /* Utilise Flexbox pour l'alignement */
    align-items: flex-start; /* Aligne les éléments en haut */
    justify-content: space-between; /* Espace les éléments horizontalement */
    flex-wrap: nowrap !important; /* Empêche le retour à la ligne des éléments */
    width: 100%; /* Largeur pleine */
    max-width: 1200px; /* Largeur maximale */
    margin: 0 auto; /* Centre le conteneur */
    padding: 0 30px; /* Espacement interne */
    min-height: auto; /* Hauteur minimale automatique */
    position: relative; /* Positionnement relatif */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
    gap: 190px; /* Espacement entre les éléments */
	box-shadow: none !important; /* Supprime toute ombre portée */
}

/* Conteneur du logo */
.container-header .grid-child:first-child {
    width: auto !important; /* Largeur automatique */
    max-width: none; /* Pas de largeur maximale */
    flex: 0 0 auto; /* Pas de flexibilité */
    margin-bottom: 20px; /* Marge en bas */
    margin-left: 0; /* Pas de marge à gauche */
}

/* LOGO – Version finale */
.container-header .navbar-brand,
.container-header .grid-child:first-child {
    height: auto !important; /* Hauteur automatique */
    max-height: none !important; /* Pas de hauteur maximale */
    min-height: 0 !important; /* Pas de hauteur minimale */
}

/* Style de l'image du logo */
.container-header .navbar-brand img {
    width: auto !important; /* Largeur automatique */
    height: 140px !important; /* Hauteur fixe */
    max-height: none !important; /* Pas de hauteur maximale */
    object-fit: contain !important; /* Conserve les proportions de l'image */
    display: inline-block !important; /* Affichage en ligne */
    margin-right: 20px !important; /* Marge à droite */
}

/* ================================================
   MENU – ALIGNEMENT ET STYLE
   ================================================ */
/* Conteneur du menu */
.container-header nav.mod-menu {
    margin: 0; /* Pas de marge */
    flex-shrink: 0; /* Pas de rétrécissement */
    order: 2; /* Ordre d'affichage */
    align-self: flex-start; /* Alignement en haut */
}

/* Liste du menu */
.container-header nav.mod-menu ul {
    display: flex; /* Utilise Flexbox */
    gap: 30px; /* Espacement entre les éléments */
    padding: 0; /* Pas de padding */
    margin: 0; /* Pas de marge */
    list-style: none; /* Pas de puces */
    justify-content: flex-start; /* Alignement à gauche */
}

/* Éléments de la liste du menu */
.container-header nav.mod-menu ul li {
    margin: 0; /* Pas de marge */
    padding: 0; /* Pas de padding */
}

/* Liens du menu */
.container-header .mod-menu a {
    position: relative; /* Positionnement relatif */
    padding: 15px 0; /* Padding vertical */
    text-decoration: none; /* Pas de soulignement */
    color: #555; /* Couleur du texte */
    text-transform: uppercase; /* Texte en majuscules */
    letter-spacing: 0.5px; /* Espacement des lettres */
    font-weight: 500; /* Épaisseur de la police */
    transition: all 0.3s ease; /* Transition fluide */
    font-size: 20px; /* Taille de la police */
    font-family: inherit !important; /* Héritage de la police */
}

/* Item actif et survol du menu */
.container-header .mod-menu li.current a,
.container-header .mod-menu li.active a,
.container-header .mod-menu a:hover {
    color: #1bb2b0; /* Couleur du texte */
}

/* Barre de couleur sous les items actifs et survolés */
.container-header .mod-menu li.current a::before,
.container-header .mod-menu li.active a::before,
.container-header .mod-menu a:hover::before {
    content: ""; /* Contenu vide */
    position: absolute; /* Positionnement absolu */
    top: 0; /* Position en haut */
    left: 0; /* Position à gauche */
    width: 100%; /* Largeur pleine */
    height: 15px; /* Hauteur de la barre */
    background-color: #1bb2b0; /* Couleur de fond */
}

/* ================================================
   BARRE VERTE SOUS LE HEADER
   ================================================ */
/* Conteneur du header */
header.header.container-header.full-width {
    position: relative; /* Positionnement relatif */
}

/* Élément suivant le header */
header.header.container-header.full-width + * {
    position: relative; /* Positionnement relatif */
}

/* Barre verte sous le header */
header.header.container-header.full-width + *::before {
    content: ""; /* Contenu vide */
    display: block; /* Affichage en bloc */
    width: 100vw; /* Largeur pleine de la fenêtre */
    height: 15px; /* Hauteur de la barre */
    background-color: #1bb2b0; /* Couleur de fond */
    position: absolute; /* Positionnement absolu */
    left: 50%; /* Position à 50% de la largeur */
    margin-left: -50vw; /* Décalage pour centrer */
    top: -15px; /* Position au-dessus */
    z-index: 10; /* Niveau de superposition */
}

/* ================================================
   TITRE PRINCIPAL
   ================================================ */
/* Conteneur du titre principal */
.page-header {
    width: 100%; /* Largeur pleine */
    max-width: 1200px; /* Largeur maximale */
    margin: 0 auto; /* Centre le conteneur */
    padding: 0 30px; /* Espacement interne */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
}

/* Titre principal */
.page-header h1 {
    font-size: 3em !important; /* Taille de la police */
    font-weight: 300 !important; /* Épaisseur de la police */
    color: inherit !important; /* Héritage de la couleur */
    margin-bottom: 20px !important; /* Marge en bas */
    line-height: 1.2em; /* Hauteur de ligne */
    text-align: left; /* Alignement à gauche */
}

/* ================================================
   POLICE, ALIGNEMENT ET STYLE DES LIENS
   ================================================ */
/* Police et style des paragraphes, listes, cellules de tableau et liens */
[id^="mod-custom"] p,
.com-content-article__body p,
.com-content-article__body li,
.com-content-article__body td,
.com-content-article__body a {
    font-family: Verdana, Geneva, sans-serif !important; /* Police */
    font-size: 13px; /* Taille de la police */
    color: #000000 !important; /* Couleur du texte */
    text-align: left; /* Alignement à gauche */
}

/* Suppression du soulignement des liens */
.com-content-article__body a {
    text-decoration: none !important;
}

/* Spécifique pour le footer */
#mod-custom113 p {
    color: #bcbcbc !important; /* Couleur du texte */
    font-size: 16px; /* Taille de la police */
    font-weight: bold; /* Texte en gras */
}

/* ================================================
   COULEUR POUR LES LIENS E-MAIL DANS LES ARTICLES
   ================================================ */
/* Couleur des liens email */
.com-content-article__body a[href^="mailto:"] {
    color: #1bb2b0 !important; /* Couleur du texte */
    text-decoration: none !important; /* Pas de soulignement */
}

/* ================================================
   FOOTER
   ================================================ */
/* Conteneur du footer */
.container-footer.footer.full-width {
    background-color: #eaeaea !important; /* Couleur de fond */
}

/* Élément enfant du footer */
.container-footer.footer.full-width .grid-child {
    max-width: 1200px; /* Largeur maximale */
    margin: 0 auto; /* Centre le conteneur */
    padding: 40px 30px; /* Espacement interne */
}

/* ================================================
   STYLES POUR TOUS LES MODULES PERSONNALISÉS
   ================================================ */
/* Largeur des modules personnalisés */
[id^="mod-custom"] {
    width: 100%; /* Largeur pleine */
    margin: 0 auto; /* Centre le conteneur */
}

/* Style des tableaux dans les modules personnalisés */
[id^="mod-custom"] table {
    width: 100%; /* Largeur pleine */
    margin: 0 auto; /* Centre le tableau */
    border-collapse: collapse; /* Fusionne les bordures */
}

/* Style des cellules de tableau dans les modules personnalisés */
[id^="mod-custom"] table td {
    text-align: center; /* Alignement centré */
    padding: 10px; /* Espacement interne */
    width: 33.33%; /* Largeur des cellules */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
}

/* Style des images dans les modules personnalisés */
[id^="mod-custom"] img {
    max-width: 100%; /* Largeur maximale */
    height: auto; /* Hauteur automatique */
    display: block; /* Affichage en bloc */
    margin: 0 auto; /* Centre l'image */
}

/* ================================================
   ALIGNEMENT DU CONTENU PRINCIPAL
   ================================================ */
/* Conteneur du contenu principal */
.com-content-article__body {
    width: 100%; /* Largeur pleine */
    max-width: 1200px; /* Largeur maximale */
    margin: 0 auto; /* Centre le conteneur */
    padding: 0 30px; /* Espacement interne */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
}

/* ================================================
   ALIGNEMENT DES IMAGES DANS LES ARTICLES
   ================================================ */
/* Style des images dans les articles */
.com-content-article__body img {
    max-width: 100%; /* Largeur maximale */
    height: auto; /* Hauteur automatique */
    display: inline-block; /* Affichage en ligne */
    vertical-align: middle; /* Alignement vertical */
}

/* ================================================
   CENTRER L'IMAGE DE LA PAGE "QUI SOMMES-NOUS ?"
   ================================================ */
/* Style de l'image centrée */
.com-content-article__body img.centerImage {
    display: block; /* Affichage en bloc */
    margin-left: auto; /* Centre l'image */
    margin-right: auto; /* Centre l'image */
    width: 40% !important; /* Largeur de l'image */
    height: auto !important; /* Hauteur automatique */
}

/* ================================================
   LIMITE LA LARGEUR DES TABLEAUX DANS LES ARTICLES
   ================================================ */
/* Style des tableaux dans les articles */
.com-content-article__body table {
    width: 100% !important; /* Largeur pleine */
    max-width: 100% !important; /* Largeur maximale */
    margin: 0; /* Pas de marge */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
}

/* ================================================
   LIMITE LA LARGEUR DES COLONNES DES TABLEAUX
   ================================================ */
/* Style des colonnes des tableaux dans les articles */
.com-content-article__body table td {
    width: auto !important; /* Largeur automatique */
    max-width: none !important; /* Pas de largeur maximale */
}

/* ================================================
   TAILLE SPÉCIFIQUE POUR LES IMAGES
   ================================================ */
/* Taille spécifique pour l'image "visuelmedecins.png" */
.com-content-article__body td img[src*="visuelmedecins.png"] {
    width: 394px !important; /* Largeur de l'image */
    height: 336px !important; /* Hauteur de l'image */
    max-width: none !important; /* Pas de largeur maximale */
}

/* Taille spécifique pour l'image "visuelassociation.png" */
.com-content-article__body td img[src*="visuelassociation.png"] {
    width: 460px !important; /* Largeur de l'image */
    height: 460px !important; /* Hauteur de l'image */
    max-width: none !important; /* Pas de largeur maximale */
}

/* Taille spécifique pour l'image "pme_pmi.png" */
.com-content-article__body td img[src*="pme_pmi.png"] {
    width: 460px !important; /* Largeur de l'image */
    height: 460px !important; /* Hauteur de l'image */
    max-width: none !important; /* Pas de largeur maximale */
}

/* Taille spécifique pour l'image "cloud10.png" */
.com-content-article__body td img[src*="cloud10.png"] {
    width: 367px !important; /* Largeur de l'image */
    height: 249px !important; /* Hauteur de l'image */
    max-width: none !important; /* Pas de largeur maximale */
}

/* Taille spécifique pour l'image "virtualisation.png" */
.com-content-article__body td img[src*="virtualisation.png"] {
    width: 382px !important; /* Largeur de l'image */
    height: 265px !important; /* Hauteur de l'image */
    max-width: none !important; /* Pas de largeur maximale */
}

/* Taille spécifique pour l'image "exchange.png" */
.com-content-article__body td img[src*="exchange.png"] {
    width: 240px !important; /* Largeur de l'image */
    height: 191px !important; /* Hauteur de l'image */
    max-width: none !important; /* Pas de largeur maximale */
}

/* ================================================
   CORRECTION DE LA BARRE DE DÉFILEMENT HORIZONTALE
   ================================================ */
/* Empêche le défilement horizontal */
body {
    overflow-x: hidden;
}

/* Largeur du footer */
.container-footer.footer.full-width {
    width: 100%; /* Largeur pleine */
    max-width: 100%; /* Largeur maximale */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
}

/* Style du module personnalisé 113 */
#mod-custom113 {
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
}

/* ================================================
   PAGE CONTACT
   ================================================ */
/* Conteneur de la page de contact */
.contact-page-wrapper {
    max-width: 1100px; /* Largeur maximale */
    margin: 0 auto; /* Centre le conteneur */
}

/* En-tête de la page de contact */
.page_header {
    margin-bottom: 20px; /* Marge en bas */
}

/* Titre de la page de contact */
.page_header h3 {
    font-size: 28px; /* Taille de la police */
}

/* Carte de la page de contact */
.contact_map {
    margin-bottom: 25px; /* Marge en bas */
    width: 100%; /* Largeur pleine */
}

/* Iframe de la carte */
.contact_map iframe {
    width: 100%; /* Largeur pleine */
    height: 350px; /* Hauteur de la carte */
}

/* Ligne fluide */
.row-fluid {
    width: 100%; /* Largeur pleine */
    margin-left: 0; /* Pas de marge à gauche */
    margin-right: 0; /* Pas de marge à droite */
}

/* Détails de contact */
.contact_details {
    display: flex; /* Utilise Flexbox */
    flex-wrap: wrap; /* Retour à la ligne */
    margin-bottom: 20px; /* Marge en bas */
}

/* Élément des détails de contact */
.contact_details_item {
    flex: 0 0 33.3333%; /* Largeur flexible */
    max-width: 33.3333%; /* Largeur maximale */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
    padding: 0 15px; /* Espacement interne */
}

/* Titre des détails de contact */
.contact_details_item h3 {
    font-size: 30px; /* Taille de la police */
    margin-bottom: 10px; /* Marge en bas */
}

/* Icône des détails de contact */
.contact_details_item i {
    margin-right: 10px; /* Marge à droite */
}

/* ================================================
   FORMULAIRE DE CONTACT
   ================================================ */
/* Groupe de contrôle du formulaire */
.form-validate.form-horizontal .control-group {
    margin-bottom: 15px; /* Marge en bas */
    overflow: hidden; /* Cache le contenu débordant */
}

/* Libellé du formulaire */
.form-validate.form-horizontal .control-label {
    width: 200px; /* Largeur fixe */
    float: left; /* Flottement à gauche */
    text-align: left; /* Alignement à gauche */
}

/* Libellé dans le label */
.form-validate.form-horizontal .control-label label {
    display: block; /* Affichage en bloc */
    font-weight: bold; /* Texte en gras */
}

/* Champs de texte, email et textarea du formulaire */
.form-validate.form-horizontal .controls input[type="text"],
.form-validate.form-horizontal .controls input[type="email"],
.form-validate.form-horizontal .controls textarea {
    width: 100%; /* Largeur pleine */
    padding: 8px; /* Espacement interne */
    margin-bottom: 10px; /* Marge en bas */
}

/* Bouton du formulaire */
.contact_form button {
    background-color: #d9534f; /* Couleur de fond */
    color: white; /* Couleur du texte */
    padding: 10px 20px; /* Espacement interne */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur de type pointeur */
}

/* Bouton du formulaire au survol */
.contact_form button:hover {
    background-color: #c9302c; /* Couleur de fond */
}

/* ===================================================
   BOUTONS DE TELECHARGEMENT – PAGE ASSISTANCE
   =================================================== */

/* Style général des boutons */

.com-content-article__body a[href*="AssistanceLogiciellerie.exe"],
.com-content-article__body a[href*="AssistanceLogiciellerie.dmg"] {

    display: flex;
    align-items: center;
    justify-content: center;

    width: 320px;
    max-width: 100%;

    padding: 14px 20px;
    margin: 12px auto;

    background: transparent;
    border: 2px solid #1bb2b0;
    border-radius: 8px;

    color: #1bb2b0 !important;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none !important;
	text-align: center;

    transition: all 0.25s ease;

    gap: 12px;
}

/* Effet au survol */

.com-content-article__body a[href*="AssistanceLogiciellerie.exe"]:hover,
.com-content-article__body a[href*="AssistanceLogiciellerie.dmg"]:hover {

    background: #1bb2b0;
    color: white !important;
}

/* Icône Windows */

.com-content-article__body a[href*="AssistanceLogiciellerie.exe"]::before {

    content: "";

    width: 22px;
    height: 22px;

    background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Windows_logo_-_2012.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    display: inline-block;
}

/* Icône Apple / Mac */

.com-content-article__body a[href*="AssistanceLogiciellerie.dmg"]::before {

    content: "";

    width: 22px;
    height: 22px;

    background-image: url("https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    display: inline-block;
}

/* Lien du certificat Qualiopi */
.com-content-article__body a[href*="Certificat_QUALIOPI.pdf"] {
    color: #1bb2b0 !important;
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */
/* Les règles suivantes s'appliquent uniquement pour les écrans de 768px ou moins */
@media (max-width: 768px) {
    /* Alignement du header en mobile : empile les éléments verticalement et réduit l'espacement */
    .container-header {
        flex-direction: column; /* Empile les éléments verticalement */
        gap: 0; /* Supprime l'espacement entre les éléments */
        padding: 0 20px; /* Réduit l'espacement interne */
    }

    /* Logo en mobile : centre le logo et enlève la marge en bas */
    .container-header .grid-child:first-child {
        margin-bottom: 0; /* Enlève la marge en bas */
        width: 100%; /* Largeur pleine */
        text-align: center; /* Centre le contenu */
    }

    /* Image du logo en mobile : réduit la hauteur et enlève la marge à droite */
    .container-header .navbar-brand img {
        height: 100px; /* Réduit la hauteur */
        margin-right: 0; /* Enlève la marge à droite */
    }

    /* Masquer le menu principal : le menu principal est masqué pour être remplacé par le menu burger */
    .container-header nav.mod-menu ul {
        display: none; /* Masque le menu principal */
    }

    /* Conteneur principal en mobile : réduit l'espacement interne */
    .com-content-article__body,
    .container-footer.footer.full-width .grid-child,
    .page-header,
    .contact-page-wrapper {
        padding: 0 20px; /* Réduit l'espacement interne */
    }

    /* Détails de contact en mobile : chaque élément prend toute la largeur */
    .contact_details_item {
        flex: 0 0 100%; /* Largeur pleine */
        max-width: 100%; /* Largeur maximale */
        margin-bottom: 20px; /* Ajoute une marge en bas */
    }

    /* Formulaire de contact en mobile : ajustement des groupes de contrôle */
    .form-validate.form-horizontal .control-group {
        margin-bottom: 15px; /* Marge en bas */
        overflow: hidden; /* Cache le contenu débordant */
    }

    /* Formulaire de contact en mobile : les libellés et les contrôles prennent toute la largeur */
    .form-validate.form-horizontal .control-label,
    .form-validate.form-horizontal .controls {
        width: 100%; /* Largeur pleine */
        float: none; /* Désactive le flottement */
        margin-left: 0; /* Enlève la marge à gauche */
        text-align: left; /* Alignement à gauche */
    }

    /* Champs du formulaire en mobile : les champs prennent toute la largeur */
    .form-validate.form-horizontal .controls input[type="text"],
    .form-validate.form-horizontal .controls input[type="email"],
    .form-validate.form-horizontal .controls textarea {
        width: 100%; /* Largeur pleine */
        padding: 8px; /* Espacement interne */
        margin-bottom: 10px; /* Marge en bas */
    }

    /* Bouton du formulaire en mobile : le bouton prend toute la largeur */
    .contact_form button {
        width: 100%; /* Largeur pleine */
    }

    /* Images responsives : les images s'adaptent à la largeur de l'écran */
    .com-content-article__body img,
    #mod-custom img {
        max-width: 100%; /* Largeur maximale */
        height: auto; /* Hauteur automatique pour conserver les proportions */
    }

    /* Tailles spécifiques des images en mobile : les images spécifiques prennent toute la largeur */
    .com-content-article__body td img[src*="visuelmedecins.png"],
    .com-content-article__body td img[src*="visuelassociation.png"],
    .com-content-article__body td img[src*="pme_pmi.png"],
    .com-content-article__body td img[src*="cloud10.png"],
    .com-content-article__body td img[src*="virtualisation.png"],
    .com-content-article__body td img[src*="exchange.png"] {
        width: 100% !important; /* Largeur pleine */
        height: auto !important; /* Hauteur automatique pour conserver les proportions */
    }
}

/* ================================================
   SWITCH MODE CLAIR / SOMBRE
   ================================================ */

/* Conteneur du switch avec symboles */
.theme-switch-container {
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    align-items: center; /* Centre les éléments verticalement */
    gap: 8px; /* Espacement entre les éléments */
}

/* Style du switch */
.theme-switch {
    position: relative; /* Positionnement relatif */
    width: 46px; /* Largeur du switch */
    height: 24px; /* Hauteur du switch */
}

/* Cache l'input checkbox */
.theme-switch input {
    display: none; /* Masque l'input */
}

/* Style du label du switch */
.theme-switch label {
    display: block; /* Affichage en bloc */
    width: 100%; /* Largeur pleine */
    height: 100%; /* Hauteur pleine */
    background: #ccc; /* Couleur de fond */
    border-radius: 30px; /* Bordure arrondie */
    cursor: pointer; /* Curseur de type pointeur */
    transition: background 0.3s ease; /* Transition fluide pour le fond */
    position: relative; /* Positionnement relatif */
}

/* Style du curseur du switch */
.theme-switch label::after {
    content: ""; /* Contenu vide */
    position: absolute; /* Positionnement absolu */
    top: 2px; /* Position en haut */
    left: 2px; /* Position à gauche */
    width: 20px; /* Largeur du curseur */
    height: 20px; /* Hauteur du curseur */
    background: #fff; /* Couleur de fond */
    border-radius: 50%; /* Bordure circulaire */
    transition: transform 0.3s ease; /* Transition fluide pour le déplacement */
}

/* Style du switch en mode activé */
.theme-switch input:checked + label {
    background: #1bb2b0; /* Couleur de fond en mode activé */
}

/* Déplacement du curseur en mode activé */
.theme-switch input:checked + label::after {
    transform: translateX(22px); /* Déplace le curseur vers la droite */
}

/* Style des symboles soleil et lune */
.sun-symbol, .moon-symbol {
    font-size: 18px; /* Taille des symboles */
}

/* Style du symbole lune */
.moon-symbol {
    color: #ccc; /* Couleur du symbole lune */
}

/* Style du symbole lune en mode sombre */
.theme-switch input:checked ~ .moon-symbol {
    color: #fff; /* Couleur du symbole lune en mode sombre */
}

/* Style du symbole soleil en mode clair */
.theme-switch input:not(:checked) ~ .sun-symbol {
    color: #fff; /* Couleur du symbole soleil en mode clair */
}

/* Style du symbole soleil en mode sombre */
.theme-switch input:checked ~ .sun-symbol {
    color: #ccc; /* Couleur du symbole soleil en mode sombre */
}

/* ===================================================
   THEME SOMBRE COMPLET (soft)
   =================================================== */

/* Style du body en mode sombre */
body.theme-dark {
    background-color: #1a1c1e !important; /* Couleur de fond */
    color: #dcdcdc !important; /* Couleur du texte */
}

/* Style des conteneurs principaux en mode sombre */
body.theme-dark header,
body.theme-dark nav,
body.theme-dark main,
body.theme-dark footer,
body.theme-dark .container,
body.theme-dark .wrapper,
body.theme-dark .site,
body.theme-dark .content,
body.theme-dark .page,
body.theme-dark section,
body.theme-dark article {
    background-color: #1a1c1e !important; /* Couleur de fond */
    color: #dcdcdc !important; /* Couleur du texte */
}

body.theme-dark .card,
body.theme-dark .module {
    background-color: #222427 !important; /* Couleur de fond */
    color: #dcdcdc !important; /* Couleur du texte */
}

/* Style des textes en mode sombre */
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6,
body.theme-dark p,
body.theme-dark span,
body.theme-dark li,
body.theme-dark label {
    color: #d6d6d6 !important; /* Couleur du texte */
}

/* Style des liens en mode sombre */
body.theme-dark a {
    color: #4fd1c5 !important; /* Couleur des liens */
}

/* Style des liens au survol en mode sombre */
body.theme-dark a:hover {
    color: #81e6d9 !important; /* Couleur des liens au survol */
}

/* Style du menu en mode sombre */
body.theme-dark nav a,
body.theme-dark .menu a {
    color: #dcdcdc !important; /* Couleur du texte */
}

/* Style des éléments de menu au survol en mode sombre */
body.theme-dark .menu a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Couleur de fond au survol */
}

/* Style des formulaires en mode sombre */
body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select {
    background-color: #2a2d31 !important; /* Couleur de fond */
    color: #eaeaea !important; /* Couleur du texte */
    border: 1px solid #3a3d42 !important; /* Bordure */
}

/* Style des boutons en mode sombre */
body.theme-dark button,
body.theme-dark .btn {
    background-color: #1bb2b0 !important; /* Couleur de fond */
    color: #fff !important; /* Couleur du texte */
    border: none !important; /* Pas de bordure */
}

/* Style des boutons au survol en mode sombre */
body.theme-dark button:hover,
body.theme-dark .btn:hover {
    background-color: #149a98 !important; /* Couleur de fond au survol */
}

/* Style des séparateurs en mode sombre */
body.theme-dark hr {
    border-color: #2f3237 !important; /* Couleur de la bordure */
}

/* Style du footer en mode sombre */
body.theme-dark .container-footer.footer.full-width {
    background-color: #202225 !important; /* Couleur de fond */
    color: #eaeaea !important; /* Couleur du texte */
}

/* Style des éléments enfants du footer en mode sombre */
body.theme-dark .container-footer.footer.full-width .grid-child {
    background-color: #202225 !important; /* Couleur de fond */
    color: #eaeaea !important; /* Couleur du texte */
}

/* Style spécifique pour le module 113 en mode sombre */
body.theme-dark #mod-custom113 p {
    color: #bcbcbc !important; /* Couleur du texte */
}

/* Style des tableaux en mode sombre */
body.theme-dark table,
body.theme-dark th,
body.theme-dark td {
    border-color: #2f3237 !important; /* Couleur de la bordure */
    color: #dcdcdc !important; /* Couleur du texte */
}

/* Style des images en mode sombre */
body.theme-dark img {
    opacity: 0.95; /* Opacité */
    transition: opacity 0.3s ease; /* Transition fluide */
}

body.theme-dark img:hover {
    opacity: 1; /* Opacité au survol */
}

/* Style de la barre verte sous le header en mode sombre */
body.theme-dark header.header.container-header.full-width + *::before {
    background-color: #1bb2b0 !important; /* Couleur de fond */
}

/* Style des icônes en mode sombre */
body.theme-dark i {
    color: #eaeaea !important; /* Couleur du texte */
}

/* Style des listes en mode sombre */
body.theme-dark ul,
body.theme-dark ol {
    color: #eaeaea !important; /* Couleur du texte */
}

/* Transition douce entre les modes clair et sombre */
body,
body * {
    transition:
        background-color 0.35s ease, /* Transition des fonds */
        color 0.35s ease,            /* Transition du texte */
        border-color 0.35s ease;     /* Transition des bordures */
}

/* Position flottante pour le module Mode sombre */
#mod-custom118 {
    position: fixed; /* Position fixe */
    bottom: 20px; /* Position en bas */
    left: 20px; /* Position à gauche */
    z-index: 1000; /* Niveau de superposition */
    margin: 0; /* Pas de marge */
    width: auto; /* Largeur automatique */
}