/* ================================================== */
/* Styles généraux */
/* ================================================== */


/* Variables CSS */

/* Dégradé tropical (dynamique mais doux) */
:root {
    --main-color: #FF6B6B;
    --secondary-color: #4ECDC4;
}


:root {
    --nav-color: var(--secondary-color); /* linear-gradient(0deg, var(--main-color), var(--secondary-color)); /*var(--main-color);*/
    --header-color: var(--secondary-color);
}


/* Dégradé minimaliste (neutre et élégant) */
:root {
    --main-color: #667EEA;     
    --secondary-color: #764BA2;
}

:root {
    --nav-color: var(--secondary-color); /* linear-gradient(0deg, var(--main-color), var(--secondary-color)); /*var(--secondary-color);*/
    --header-color: var(--secondary-color);
}




/* Dégradé "Sunset" (chaud et accueillant) */
/*
:root {
    --main-color: #FF7E5F;
    --secondary-color: #FEB47B;
    --nav-color: rgb(102, 181, 203);
}
*/

/* Dégradé "Ocean" (frais et apaisant) */ 
/*  
:root {
    --main-color: #00C6FF;
    --secondary-color: #0072FF;
    --nav-color: rgb(102, 181, 203);
}
*/

/* Dégradé "Forest" (naturel) */  
/* 
:root {
    --main-color: #11998E;
    --secondary-color: #38EF7D;
    --nav-color: rgb(102, 181, 203);
}
*/


.buttons-container {
    position : relative;
    display: flex; /* Utilisation de Flexbox pour aligner les boutons */
    gap: 10px; /* Espacement entre les boutons */

    /* en plus dans le taquin */
    justify-content: center; /* Centrer les boutons horizontalement */
    /* margin-top: 40px; /* Ajouter un espacement au-dessus des boutons */
    z-index: 200;
}


@media (max-width: 768px) {
    
    .buttons-container {
        flex-wrap: wrap;  /* Permet aux boutons de passer à la ligne si nécessaire */
        justify-content: center;  /* Centre les boutons horizontalement */
        gap: 15px;  /* Espacement entre les boutons */

        /* en plus dans le taquin */
        margin-top: 10px; /* Ajouter un espacement au-dessus des boutons (avec la grille) */
    }
}


html, body {
    /* height: 100%; /* Pour occuper toute la hauteur de la fenêtre */
    min-height: 100dvh; /* Utilise la hauteur dynamique pour éviter l'espace bleu foncé qui se rajoutait sur certaines pages lorsqu'on scrolle vers le bas*/
    font-family: Arial, sans-serif; /* Police de caractères par défaut */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les paddings par défaut */
    /* background: linear-gradient(to bottom, #007BFF, #f9f9f9); /* Dégradé de fond */
    background: linear-gradient(0deg, var(--main-color), var(--secondary-color));
    /*background: linear-gradient(0deg, rgb(115, 0, 223), rgb(110, 236, 207));*/
    color: #333; /* Couleur du texte par défaut */
    display: flex; /* Utilisation de Flexbox pour la mise en page */
    flex-direction: column; /* Alignement vertical des éléments */
    overflow-x: hidden; /* Désactive le scroll horizontal */
    /*overscroll-behavior-y: none; /* Désactive l'effet de rebond */

    /*overflow: hidden;*/
}


main {
    flex: 1; /* Prend l'espace disponible */
    padding: 0.8rem; /* Ajustable selon besoin */
    /*background: linear-gradient(0deg, rgb(115, 0, 223), rgb(110, 236, 207));; /* Dégradé de fond, j'ai dû rajouter cela à cause d'un fond bizarre qui s'affichait en bas du sudoku sur mobile */
    background: linear-gradient(0deg, var(--main-color), var(--secondary-color)); /* Dégradé de fond, j'ai dû rajouter cela à cause d'un fond bizarre qui s'affichait en bas du sudoku sur mobile */
    /* background: linear-gradient(to bottom, #007BFF, #f9f9f9); /* Dégradé de fond, j'ai dû rajouter cela à cause d'un fond bizarre qui s'affichait en bas du sudoku sur mobile */


    position: relative; /*attention rajoutée récemment !!!!!!!!*/ 
    

    /* display: flex; /* Aligne les éléments en ligne */
    /* flex-direction: column; /* Empile les éléments verticalement */
    /* gap: 0; /* Retire l'espacement entre les éléments */
}

/*
@media (max-width: 768px) {
    main {
        padding: 0.15rem; /* Réduire le padding pour les petits écrans */
                        
/*    }
}
*/

/* Pied de page */
footer {
    background-color: var(--main-color); /* rgb(115, 0, 223);*/
    /* background: transparent;
    /*background: rgba(255, 255, 255, 0.5); /* Blanc avec 50% d'opacité */
    /* background: linear-gradient(270deg, rgb(115, 0, 223), rgb(92, 63, 222));
    /* background-color: #4da6ff; /* Couleur de fond */
    color: white; /* Couleur du texte */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ajoute une ombre subtile */
    text-align: center; /* Centrage du texte */
    justify-content: center;
    padding: 30px 0; /* Espacement interne */
    margin-top: auto; /* Alignement en bas de la page */
    /* margin-top: 10px; /* Réduit l'espace au-dessus du footer */
    /* margin-bottom: 10px; /* 🔹 Remonte le footer en réduisant l'espace en bas */
    position: relative;
    z-index: 200; /* très important pour avoir la priorité par rapport au .virtual-touchscreen du pendu (mode mobile) */
    margin-bottom: 0; /* Évite un espace inutile sous le footer */
}

/* 📱 Adaptation pour mobile */
@media (max-width: 768px) {
    footer {
        padding: 15px 0; /* 🔹 Encore moins de padding sur mobile */
        /* margin-bottom: 10px; /* 🔹 Remonte le footer en réduisant l'espace en bas */
    }
}

/* caractéristiques du lien hypertexte en pide de page */
footer a img {
    position: relative;
    /*color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ajoute une ombre subtile */
    width: 60px; 
    height: 60px;
    /*display: block; /* Élimine l'espace sous l'image */
    display: inline-block; /* Très important : permet au texte de centrer l'image */
    object-fit: contain; /* Garde les proportions */
    z-index: 200; /* très important pour avoir la priorité par rapport au .virtual-touchscreen du pendu (mode mobile) */
}



/* Initialement, les éléments du footer sont invisibles */
footer {
    opacity: 0;
    transform: translateY(-10px); /* Optionnel: ajoute un léger effet de décalage */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quand la classe "visible" est ajoutée, les éléments deviennent visibles */
footer.visible {
    opacity: 1;
    transform: translateY(0);
}


.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px; /* ou la largeur max souhaitée */
    margin: 0 auto;
    flex-direction: row;
}

.footer-content img {
    margin-right: 15px; /* espace entre l'image et le texte */
    width: 60px; 
    height: 60px; 
    display: block; /* Élimine l'espace sous l'image */
    object-fit: contain; /* Garde les proportions */
}


html:not(:lang(ar_DZ)) .footer-content img {
    margin-right: 15px; /* espace entre l'image et le texte */
}

html[lang="ar_DZ"] .footer-content img {
    margin-left: 15px; /* espace entre l'image et le texte */
}


@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        /*gap: 10px;*/ 
    }
    
    html:not(:lang(ar_DZ)) .footer-content img {
        margin-right: 0px;
    }

    html[lang="ar_DZ"] .footer-content img {
        margin-left: 0px;
    }
}


/* Police pour l'arabe */
html[lang="ar_DZ"] {
    font-family: "Amiri", serif; /* Exemple de police adaptée à l'arabe */
    font-size: 1.1em; /* Augmente la taille de la police de 20% */
    direction: rtl; /* Texte de droite à gauche pour l'arabe */
}


/*
html, body {
    overflow-x: hidden; /* Désactive le scroll horizontal */
/*}

/* Appliquer les styles aux boutons et aux champs de formulaire */
/*
html[lang="ar_DZ"] button,
html[lang="ar_DZ"] input,
html[lang="ar_DZ"] textarea,
html[lang="ar_DZ"] select {
    font-family: "Amiri", serif;
    font-size: 0.7rem;
    direction: rtl;
}
*/

/* En-tête avec dégradé de bleu foncé
/* padding: 10px 20px : 10px en haut et en bas, 20px à gauche et à droite
----------------------------------------
|           ↑ 10px (haut)              |
|                                      |
|   ← 20px (gauche)   Texte centré → 20px (droite)  
|                                      |
|           ↓ 10px (bas)               |
----------------------------------------
*/
header {
    /* background: linear-gradient(to bottom, #007BFF, #0056b3); /* Dégradé de fond */

    /* background: linear-gradient(270deg, rgb(102, 194, 211), rgb(110, 237, 207)); */

    display: flex;
    /*border: 2px solid #007BFF; /* Bordure */
    /*background: transparent;*/
    background: var(--header-color);
    color: white; /* Couleur du texte */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ajoute une ombre subtile */
    text-align: center; /* Centrage du texte */
    padding: 10px; /* Espacement interne */
    flex-direction: column; /* Empile les éléments verticalement */
    align-items: center; /* Centre les éléments horizontalement */
    justify-content: center;  /* Centre verticalement */
    position: relative; /* position relative par rapport au menu de navigation */
    z-index: 259;

    /*box-sizing: border-box;*/
}

/* 📱 Adaptation pour mobile en mode portrait */
@media (max-width: 768px) {
    @media (orientation: portrait) {
        header {
            padding: 20px; /* ↑ Augmente encore l'espace sur mobile */
        }
    }
}

/* réduction de la marge du titre avec le sous-titre */
header h1 {
    /*margin-bottom: 0.1rem; /* Espacement entre le titre et le sous-titre */
    /*margin-top: 0.1rem;*/
    margin: 0;
    position: absolute;
    /*box-sizing: border-box;*/
}

/* 📱 Adaptation pour mobile en mode portrait */
@media (max-width: 768px) {
    /*@media (orientation: portrait) {*/
        header h1 {
            font-size: 28px; /* Taille de police encore plus petite sur mobile en mode portrait */
            /*margin-bottom: 1.1rem; /* Espacement entre le titre et le sous-titre */
            /*margin-top: 1.1rem;*/
        }
    /*}*/
}


/* Styles pour le sous-titre */
header .subtitle {
    font-size: 20px; /* Taille de police plus petite */
    color: #f0f0f0; /* Couleur plus claire (blanc légèrement grisé) */
    /*margin-top: 0rem; /* Espacement entre le sous-titre et le titre */
    /*margin-bottom: 0 rem;*/
    font-style: italic; /* Texte en italique */
    /* display: flex; */
    position: absolute;
    margin: 0;
    /*box-sizing: border-box;*/
}

/* 📱 Adaptation pour mobile en mode portrait */
@media (max-width: 768px) {
    @media (orientation: portrait) {
        header .subtitle {
            font-size: 15px; /* Taille de police encore plus petite sur mobile en mode portrait */
            /*margin-bottom: 0.2 rem;*/
        }
    }
}


/* === Style du logo === */
header #logo {
    position: absolute;
    /*top: 10px;*/
    left: 5px;
    z-index: 10; /* Pour passer au-dessus des autres éléments si nécessaire */
    top: 50%; /* Descend à 50% du parent */
    transform: translateY(-50%); /* Remonte de 50% de sa propre hauteur */
}
  
header #logo img {
    width: 80px; 
    height: 80px;
    display: block; /* Élimine l'espace sous l'image */
    object-fit: contain; /* Garde les proportions */
}


/* Initialement, les éléments du header sont invisibles */
header h1, header p, header .language-selector, header .chatbot-toggle, header img {
    opacity: 0;
    transform: translateY(-10px); /* Optionnel: ajoute un léger effet de décalage */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quand la classe "visible" est ajoutée, les éléments deviennent visibles */
header h1.visible, header p.visible, header .language-selector.visible, header .chatbot-toggle.visible, header img.visible {
    opacity: 1;
    transform: translateY(0);
}


/* Menu de navigation */
nav { 
    /* background: linear-gradient(270deg, rgb(106,217,209), rgb(110, 237, 207));
    /* background: linear-gradient(to bottom, #007BFF, #0056b3); /* Dégradé de fond */

    background: var(--nav-color); /*rgb(102, 181, 203);*/
    padding: 10px 0; /* Espacement interne */

    z-index: 260;
}

nav ul {
    list-style-type: none; /* Supprime les puces de la liste */
    padding: 0; /* Supprime le padding par défaut */
    display: flex; /* Utilisation de Flexbox pour aligner les éléments */
    /*justify-content: center; /* Centrage horizontal des éléments */
    /*justify-content: space-between; */
    justify-content: space-around; 
    margin: 0; /* Supprime les marges par défaut */
}

nav ul li {
    margin: 0 15px; /* Espacement entre les éléments de la liste */
    position: relative; /* Position relative pour les sous-menus */
    z-index: 240;
    text-align: center; /* Centre le texte dans chaque élément */
    flex: 1; 
}

/* 📱 Adaptation pour mobile : on réduit l'espacement entre les menus en mode portrait */
@media (max-width: 768px) {
    @media (orientation: portrait) {
        nav ul li {
            margin: 0 10px; /* Espacement entre les éléments de la liste */
            text-align: center; /* on centre l'alignement de texte des menus car certains passent à la ligne en mode portrait */
        }
    }
}


nav ul li a {
    text-decoration: none; /* Supprime le soulignement des liens */
    color: white ; /* Couleur du texte */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ajoute une ombre subtile */
    font-weight: bold; /* Texte en gras */
}

nav ul li a:hover {
    text-decoration: underline; /* Soulignement au survol */
}


/* S'assurer que le dropdown est bien au-dessus des autres éléments  mais en dessous du dropdown-menu */
nav .dropdown {
    position: relative;
    z-index: 250;
}


/* Menu déroulant */
.dropdown-menu {
    display: none; /* Masque le menu déroulant par défaut */
    position: absolute; /* Position absolue pour le positionnement */
    background-color: var(--nav-color); /*rgb(102, 181, 203); /* la même que nav */
    padding: 10px; /* Espacement interne */
    list-style: none; /* Supprime les puces de la liste */
    margin: 0; /* Supprime les marges par défaut */
    border-radius: 5px; /* Bordures arrondies */
    z-index: 260; /* ********très important******* pour s'assurer que le menu déroulant a une priorité plus importante que le sélecteur de langue qui est à 200 */
    min-width: max-content; /* S'adapte à la taille du texte */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */

    /*left: 50%; /* Centre par rapport au parent */
    /*transform: translateX(-50%); /* Compense la largeur du menu */
    /*right: auto; /* Positionne le menu à droite par défaut*/
}


.dropdown-menu.show {
    display: block;
}

html:not(:lang(ar_DZ)) .dropdown-menu {
    left: 50%; /* Centre par rapport au parent */
    transform: translateX(-50%); /* Compense la largeur du menu */
}

html[lang="ar_DZ"] .dropdown-menu {
    right: 50%; /* Centre par rapport au parent */
    transform: translateX(50%); /* Compense la largeur du menu */
}


/* Si l'écran est trop petit, ajuster le positionnement du menu déroulant (mode portrait) */
@media screen and (max-width: 768px) {

    html[lang="fr"] .dropdown-menu {
        @media (orientation: portrait) {
            transform: translateX(-55%); /* Décale 55% de sa largeur vers la gauche pour les langues latines */
        }
    }

    html[lang="en"] .dropdown-menu {
        @media (orientation: portrait) {
            transform: translateX(-60%); /* Décale 60% de sa largeur vers la gauche pour les langues latines */
        }
    }

    html[lang="pt_BR"] .dropdown-menu {
        @media (orientation: portrait) {
            transform: translateX(-50%); /* Décale 50% de sa largeur vers la gauche pour les langues latines */
        }
    }

    /* Gestion de la langue arabe */
    html[lang="ar_DZ"] .dropdown-menu {
        @media (orientation: portrait) {
            transform: translateX(50%); /* Décale 50% de sa largeur vers la droite pour l'arabe */    
        }
    }
}

/*
.dropdown:hover .dropdown-menu {
    display: block; /* Affiche le menu déroulant au survol */
/*}*/

.dropdown-menu li {
    margin: 5px 0; /* Espacement entre les éléments du menu déroulant */
}

.dropdown-menu li a {
    color: white; /* Couleur du texte */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ajoute une ombre subtile */
}



/* Initialement, les éléments du menu sont invisibles */
nav li, nav .dropdown-menu a {
    opacity: 0;
    transform: translateY(-10px); /* Optionnel: ajoute un léger effet de décalage */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quand la classe "visible" est ajoutée, les éléments deviennent visibles */
nav li.visible, nav .dropdown-menu a.visible {
    opacity: 1;
    transform: translateY(0);
}



/* Formulaire de contact */
.form-container {
    position: relative; /* Position relative pour le positionnement des éléments internes */
    /*width: 100vw; /* Prend toute la largeur disponible */
    display: flex; /* Utilisation de Flexbox pour aligner les éléments */
    /*gap: 20px; /* Espacement entre les éléments */
    justify-content: center; /* Centrage horizontal */
    /*padding: 1rem; /* Espacement interne */
    /*padding: 0 1rem 1rem;*/
    box-sizing: border-box;
}

#contact-form {
    /*position: relative;*/
    width: 600px; /* Largeur maximale du formulaire */
    /*padding: 1rem;*/
}

.form-box {
    width: 100%;
    /*position: relative;*/
    background: #f0f8ff; /* Couleur de fond */
    padding: 20px; /* Espacement interne */
    border-radius: 10px; /* Bordures arrondies */
    flex: 1; /* Prend tout l'espace disponible */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre portée */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
}


.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0,0,0,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

textarea, input {
    width: 100%; /* Largeur des champs de formulaire */
    max-width: 100%; /* Empêche de dépasser la largeur du parent */
    box-sizing: border-box; /* $$$$$$$Important$$$$$$$$$ : Inclut padding et bordure dans la largeur */
    margin-bottom: 10px; /* Espacement entre les champs */
    /*padding: 7px 0px 7px 10px; /* Espacement interne : top right down left*/
    border: 1px solid #ccc; /* Bordure des champs */
}



html:not(:lang(ar_DZ)) textarea, html:not(:lang(ar_DZ)) input {
    padding: 7px 10px 7px 10px; /* Espacement interne : top right bottom left */
}

/*
html[lang="fr"] textarea, html[lang="fr"] input,
html[lang="en"] textarea, html[lang="en"] input,
html[lang="pt_BR"] textarea, html[lang="pt_BR"] input {
    padding: 7px 0px 7px 10px; /* Espacement interne : top right bottom left */
/*}*/

html[lang="ar_DZ"] textarea, html[lang="ar_DZ"] input {
    padding: 7px 10px 7px 10px; /* Espacement interne : top right down left*/
    /*unicode-bidi: plaintext; /* Assurer un comportement naturel */
}

textarea {
    height: 150px; /* Hauteur du champ de texte */
}

/* Boîtes de dialogue */
.dialog-box {
    position: fixed;
    /*top: 50%;
    left: 50%;
    /*transform: translate(-50%, -50%) scale(0.95); */
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border-radius: 15px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    padding: 2rem;
    max-width: 90%;
    width: 500px;
    opacity: 0;
    animation: dialogEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 20000;

    overflow-x: hidden; /* Désactive le scroll horizontal */
    overflow-y: hidden; /* Désactive le scroll vertical */
    margin : 0;
}

/*
html[lang="fr"], html[lang="en"],html[lang="pt_BR"]  .dialog-box {
    transform: translate(-50%, -50%) scale(0.95); /* On ajuste le centrage pour les langues autres que arabe */
/* } */

/*
html[lang="fr"] .dialog-box,
html[lang="en"] .dialog-box,
html[lang="pt_BR"] .dialog-box {
    animation: dialogEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

html[lang="ar_DZ"] .dialog-box {
    animation: dialogEnter_arabic 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;   
}

*/

.dialog-box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #007BFF, #00b4d8);
    border-radius: 17px;
    z-index: -1;
}


@keyframes dialogEnter {
    to {
        opacity: 1;
        /*transform: translate(-50%, -50%) scale(1);*/
        transform: scale(1);
    }
}

/*
@keyframes dialogEnter_arabic {
    to {
        opacity: 1;
        transform: translate(0%, -50%) scale(1);  /* déplacement différent pour l'arabe fait sur la base des tests sur mobile */
/*    }
}*/

.dialog-box p {
    font-size: 1.5rem;
    color: #0056b3;
    margin-bottom: 1.5rem;
    position: relative;
    /*padding-left: 32px;*/
    /*word-break: break-all; /* Pour retour à la ligne notamment pour les chemins absolus de répertoire */
    overflow-wrap: break-word; /* Pour retour à la ligne notamment pour les chemins absolus de répertoire */
}

.confidentiality p,
.cookie p {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

html[lang="fr"] .dialog-box p,
html[lang="en"] .dialog-box p,
html[lang="pt_BR"] .dialog-box p {
    padding-left: 40px;
}

html[lang="ar_DZ"] .dialog-box p {
    padding-right: 40px;   
}

.confidentiality h3,
.cookie h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.confidentiality ul,
.cookie ul {
    margin-top: 0.5rem;
}

.dialog-box p::before {
    content: '💬';
    position: absolute;
    /*left: 0;*/
    top: -2px;
    font-size: 1.2em;
}

html[lang="fr"] .dialog-box p::before,
html[lang="en"] .dialog-box p::before,
html[lang="pt_BR"] .dialog-box p::before {
    left: 0;
}

html[lang="ar_DZ"] .dialog-box p::before {
    right: 0;
}


.dialog-content {
    line-height: 1.6;
    color: #495057;
    margin-bottom: 2rem;
}

.dialog-buttons {
    display: flex;
    justify-content: center;  /* Centrer les boutons horizontalement */
    gap: 10px; /* Espacement entre les boutons */
}

.dialog-buttons button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #FFFFFF;;  /* Exemple de couleur */
    color: black;
    border-radius: 5px;
    z-index: 20002;
}

.dialog-buttons button:hover {
    background-color: #FFFFFF;  /* Exemple de couleur */
}


/*
.confidentiality h3 {
  font-size: 2rem;
}
.confidentiality p {
  font-size: 1.5rem;
}
.confidentiality ul li {
  margin-bottom: 5px;
  font-size: 1.3rem;
}
*/

html[lang="fr"] .confidentiality ul li {
    font-size: 1.35rem;
}

.confidentiality a {
    position: relative;
    z-index: 20002;
}


/* Adaptations pour les écrans mobiles */
@media (max-width: 768px) {

    .dialog-box {
        width: 90%;  /* La boîte prend 90% de la largeur de l'écran */
        max-width: 500px;  /* Garder une largeur maximale pour ne pas être trop grande */
        /*top: 10%;  /* Positionner un peu plus haut sur l'écran pour plus de visibilité */
        /*transform: translate(-50%, 0);  /* Ne plus décaler verticalement de moitié de la hauteur */        
        padding: 1.5rem;  /* Réduire l'espace à l'intérieur */
    }

    @media (orientation: portrait) {
        .dialog-box {
            max-width: 300px;  /* Garder une largeur maximale pour ne pas être trop grande */
            padding: 1.5rem;  /* Réduire l'espace à l'intérieur */
        }
    }

    .dialog-box.cookie-confidentialite {
        max-width: 500px;  /* Garder une largeur maximale pour ne pas être trop grande */
        padding: 0rem 1rem 1.5rem 1rem;	/*Haut, droite, bas, gauche (sens horaire) */
    }

    .dialog-box p {
        font-size: 1.2rem;  /* Réduire la taille du texte pour les petits écrans */
    }

    .dialog-box.cookie-confidentialite p {
        font-size: 1rem;  /* Réduire la taille du texte pour les petits écrans */
    }

    .dialog-box.cookie-confidentialite p::before {
        font-size: 0.8rem;
        top: calc(-4px + 0.5rem);
    }

    
    .dialog-content {
        font-size: 1rem;  /* Réduire également la taille du contenu pour plus d'espace */
    }


    .dialog-box.cookie-confidentialite .dialog-buttons button {
        padding: 5px 10px;
        font-size: 1rem;  /* Réduire également la taille des boutons */
    }

    .confidentiality h3 {
        font-size: 1.3rem;
        margin-top: 0rem;
        margin-bottom: 0rem;

    }

    /*
    .confidentiality p {
        font-size: 1.1rem;
    }
    */
    .confidentiality p::before,
    .cookie p::before {
        top: calc(-4px + 0.5rem); /* Ajuster la position de l'icône pour les petits écrans */
    }
    
    html[lang="ar_DZ"] .confidentiality p,
    html[lang="ar_DZ"] .cookie p {
        font-size: 0.9rem;  /* Réduire la taille du texte pour les petits écrans encore plus pour l'arabe */    
    }

    .confidentiality ul li {
        margin-bottom: 5px;
    }

    html[lang="fr"] .confidentiality ul li {
        font-size: 0.83rem;
    }

    html[lang="pt_BR"] .confidentiality ul li,
    html[lang="en"] .confidentiality ul li {
        font-size: 0.9rem;
    }    
    html[lang="ar_DZ"] .confidentiality ul li {
        font-size: 0.75rem; /* Réduire encore plus pour l'arabe */
    }

    .cookie ul li {
        font-size: 0.9rem;
    }

}



.dragDialogHandle {
    position: absolute;
    width: 100%;
    height: 100%;
    /*left: -40px;*/
    top: 0;
    right: 0;
    cursor: move;
    pointer-events: auto;
    z-index: 20001;
}

/* Boutons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #7300ff, #00b4d8);
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ajoute une ombre subtile */
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.1);
    position: relative;
    overflow: hidden;
    pointer-events: auto;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: 0.5s;
}

.btn:hover {
    background: linear-gradient(135deg, #6200d9, #0096c7);
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.2);
    transform: translateY(-1px);
}

.btn:hover::before {
    left: 100%;
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}


/* 📱 Adaptation pour mobile */
@media (max-width: 768px) {
    .btn {
        padding: 10px 18px;  /* 🔹 Réduit légèrement le padding */
        font-size: 14px;  /* 🔹 Diminue la taille du texte */
        border-radius: 6px;  /* 🔹 Coins un peu moins arrondis */
        gap: 5px;  /* 🔹 Réduit l’espacement interne */
    }

    .btn:hover {
        transform: none;  /* 🔹 Supprime le léger "saut" pour éviter les glitchs sur mobile */
    }

    .btn:active {
        transform: scale(0.98);  /* 🔹 Effet d’appui plus naturel */
    }
}


/* ========================================================== */
/* ✅ Positionnement du sélecteur de langue et bouton chatbot */
/* ========================================================= */
/* positionnement du sélecteur */
.language-selector {
    position: absolute;
    /* top: calc(100% + 10px); /* Place sous le menu */
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 200; /* très important pour avoir la priorité par rapport au .virtual-touchscreen du pendu (mode mobile) */
    /*box-sizing: border-box; /* Le padding et la bordure sont inclus dans la largeur/hauteur */
}

/* 🌍 Icône */
.language-selector label {
    font-size: 18px;
    /*cursor: pointer;*/
}

/* Sélecteur stylisé */
.language-selector select {
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    /*box-sizing: border-box; /* Le padding et la bordure sont inclus dans la largeur/hauteur */
}

/* Effet au survol */
.language-selector select:hover {
    background-color: #f0f0f0;
}

/* Ajout d'un effet à la sélection */
.language-selector select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}



/* Bouton chatbot '>>>' */
.chatbot-toggle {
    position: absolute;
    bottom: 5px;
    right: 5px;
    /*z-index: 9999;*/
    z-index: 259; /* en dessous du dropdown-menu qui est à 260 */
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    /*margin-top: 30px;*/
    cursor: pointer;
    /*font-weight: bold;*/
    /*transition: 0.3s;*/
    /*display: flex;
    /*gap: 5px;*/
    /*box-sizing: border-box; /* Le padding et la bordure sont inclus dans la largeur/hauteur */
    
}  


header .chatbot-container img {
    position: absolute;
    /*bottom: 20px;
    right: 120px;
    width: 30px;
    height: 30px;*/
    /*transition: 0.3s;*/
    box-sizing: border-box;
}

/*
.chatbot-container {
    box-sizing: border-box; /* Le padding et la bordure sont inclus dans la largeur/hauteur */
/*}*/


/***** classe de messages communes à tous les jeux ******/
.message-info {
    background-color: #e2e3e5; /* Couleur de fond */
    color: #383d41; /* Couleur du texte */
    border: 1px solid #d6d8db; /* Bordure */
}

.message-success {
    background-color: #d4edda; /* Couleur de fond */
    color: #155724; /* Couleur du texte */
    border: 1px solid #c3e6cb; /* Bordure */
}

.message-error {
    background-color: #f8d7da; /* Couleur de fond */
    color: #721c24; /* Couleur du texte */
    border: 1px solid #f5c6cb; /* Bordure */
}



/* ================================================== */
/* Styles pour le jeu du Morpion */
/* ================================================== */
.board {
    display: grid; /* Utilisation de CSS Grid pour la grille */
    grid-template-columns: repeat(3, 100px); /* 3 colonnes de 100px */
    gap: 5px; /* Espacement entre les cellules */
    margin: 20px auto; /* Centrage de la grille */
    justify-content: center; /* Centrage horizontal */
}

@media screen and (max-width: 768px) {
    .board {
        transform: scale(0.8); /* Réduit la taille de 80% */
        transform-origin: center;
        margin: 0px auto;
    }
}


.board .cell {
    width: 100px; /* Largeur des cellules */
    height: 100px; /* Hauteur des cellules */
    display: flex; /* Utilisation de Flexbox pour centrer le contenu */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    border: 1px solid #000; /* Bordure des cellules */
    font-size: 24px; /* Taille de police */
    cursor: pointer; /* Curseur pointer au survol */
    background-color: #e0d7ff; /* Couleur de fond */
}

.board .cell.winning-cell {
    background-color: #aaffaa; /* Couleur de surbrillance pour les cellules gagnantes */
}

.board .cell.computer-winning-cell {
    /*background-color: #ffaaaa; /* rouge clair, doux */
    background-color: #ffbbbb;

}


.morpion .buttons-container {
    margin-top: 40px; /* Espacement entre la grille et les boutons */    
}

.morpion .message-container {
    text-align: center; /* Centrage du texte */
    margin-top: 20px; /* Espacement entre le message et les boutons */
    display: flex; /* Utilisation de Flexbox pour aligner les éléments */
    flex-direction: column; /* Alignement vertical */
    align-items: center; /* Centrage horizontal */
}

#status {
    font-size: 18px; /* Taille de police */
    font-weight: bold; /* Texte en gras */
    margin-top: 10px; /* Espacement supérieur */
    padding: 10px; /* Espacement interne */
    border-radius: 5px; /* Bordures arrondies */
    display: block; /* Affichage en bloc */
    text-align: center; /* Centrage du texte */
    /* margin-bottom: 40px; /* Espacement inférieur avec le footer */
}


/*
.btn-container {
    display: flex;
    justify-content: center; /* Centre horizontalement */
/*    align-items: center; /* Centre verticalement (optionnel) */
/*    width: 100%; /* Assurez-vous que le conteneur prend toute la largeur */
/*}




/* Initialement, les éléments du jeu sont invisibles */
.morpion div, .morpion .message-container, .morpion .buttons-container {
    opacity: 0;
    transform: translateY(-10px); /* Optionnel: ajoute un léger effet de décalage */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quand la classe "visible" est ajoutée, les éléments deviennent visibles */
.morpion div.visible, .morpion .message-container.visible, .morpion .buttons-container.visible {
    opacity: 1;
    transform: translateY(0);
}


/*
.morpion #changer-difficulte:disabled,
.morpion #changer-difficulte.disabled {
    opacity: 0; /* Rend le bouton invisible */
/*    pointer-events: none; /* Désactive les interactions */
/*    display: none; /* Supprime complètement l'élément */
/*    transition: opacity 0.3s ease; /* Optionnel pour un effet progressif */
/*}*/


.morpion #changer-difficulte:not(:disabled):not(.disabled) {
    opacity: 1;
    pointer-events: auto;
    display: inline-flex; /* Affiche le bouton */
}



.morpion #changer-difficulte:disabled {
    opacity: 0.5; /* grisé */
    pointer-events: none;
    cursor: not-allowed;
    display: inline-flex; /* Important : garder visible même désactivé */
}

.morpion #changer-difficulte.disabled {
    opacity: 0;
    pointer-events: none;
    display: none; /* cacher uniquement si la classe 'disabled' est présente */
}






/* ================================================== */
/* Styles pour le jeu du Sudoku */
/* ================================================== */
.sudoku-grid {
    display: grid; /* Utilisation de CSS Grid pour la grille */
    grid-template-columns: repeat(9, 1fr); /* 9 colonnes de taille égale */
    grid-template-rows: repeat(9, 1fr); /* 9 lignes de taille égale */
    gap: 0; /* Pas d'espacement entre les cellules */
    margin: 10px auto 20px; /* Centrage de la grille */
    width: 360px; /* Largeur de la grille */
    height: 360px; /* Hauteur de la grille */
    justify-content: center; /* Centrage horizontal */
    border-collapse: collapse; /* Fusion des bordures */
}


@media screen and (max-width: 768px) {
    @media (orientation: portrait) {
        .sudoku-grid {
            width: 99%; /* Largeur dynamique (ajustée pour mobile) */
            height: 99%;
            /* max-width: 360px; /* Largeur max de 360px */
            /*height: auto; /* Hauteur automatique */    
            /*transform: scale(0.85); /* Réduit la taille de 85% */
            /*transform-origin: center;
            margin: 0; /* Assure que la grille est bien centrée sur mobile */
            /*padding-left: 20px;
            /*padding-right: 60px;*/
            /*margin-left: 5px;*/
        }
    }
}


.sudoku-cell {
    width: 40px; /* Largeur des cellules */
    height: 40px; /* Hauteur des cellules */
    display: flex; /* Utilisation de Flexbox pour centrer le contenu */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    text-align: center; /* Centrage du texte */
    line-height: 40px; /* Hauteur de ligne */
    font-size: 18px; /* Taille de police */
    border: 1px solid #000; /* Bordure fine par défaut */
    background-color: #e0d7ff; /* Couleur de fond */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les paddings par défaut */
    -webkit-appearance: none; /* Désactive l'apparence par défaut de Safari */
    appearance: none; /* Désactive l'apparence par défaut des autres navigateurs */
}


@media screen and (max-width: 768px) {
    @media (orientation: portrait) {
        .sudoku-cell {
            width: 99%; /* Largeur dynamique (ajustée pour mobile) */
            height: 99%;

            line-height: 95%; /* Hauteur de ligne */
            font-size: 95%; /* Taille de police */
            /* max-width: 360px; /* Largeur max de 360px */
            /*height: auto; /* Hauteur automatique */    
            /*transform: scale(0.85); /* Réduit la taille de 85% */
            /*transform-origin: center;
            margin: 0; /* Assure que la grille est bien centrée sur mobile */
            /*padding-left: 20px;
            /*padding-right: 60px;*/
            /*margin-left: 5px;*/
        }
    }
}


/* Masquer les flèches de sélection dans les input de type number */
.sudoku-cell::-webkit-inner-spin-button,
.sudoku-cell::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Masque les flèches dans WebKit (Safari, Chrome) */
    appearance: none; /* Masque les flèches dans les autres navigateurs */
    margin: 0; /* Supprime les marges par défaut */
}


/* Bordures épaisses pour les côtés gauches (droites pour l'arabe) des colonnes 0, 3 et 6 */
html:not(:lang(ar_DZ)) .sudoku-cell[data-colonne="0"],
html:not(:lang(ar_DZ)) .sudoku-cell[data-colonne="3"],
html:not(:lang(ar_DZ)) .sudoku-cell[data-colonne="6"] {
    border-left: 3px solid #000; /* Bordure épaisse à gauche */
}

html[lang="ar_DZ"] .sudoku-cell[data-colonne="0"],
html[lang="ar_DZ"] .sudoku-cell[data-colonne="3"],
html[lang="ar_DZ"] .sudoku-cell[data-colonne="6"] {
    border-right: 3px solid #000; /* Bordure épaisse à droite pour l'arabe */
}


/* Bordure épaisse pour le côté droit (gauche pour l'arabe) la colonne 8 */
html:not(:lang(ar_DZ)) .sudoku-cell[data-colonne="8"] {
    border-right: 3px solid #000; /* Bordure épaisse à droite */
}

html[lang="ar_DZ"] .sudoku-cell[data-colonne="8"] {
    border-left: 3px solid #000; /* Bordure épaisse à gauche pour l'arabe */
}


/* Bordures épaisses pour les côtés supérieurs des lignes 0, 3 et 6 */
.sudoku-cell[data-ligne="0"],
.sudoku-cell[data-ligne="3"],
.sudoku-cell[data-ligne="6"] {
    border-top: 3px solid #000; /* Bordure épaisse en haut */
}

/* Bordure épaisse pour le côté inférieur de la ligne 8 */
.sudoku-cell[data-ligne="8"] {
    border-bottom: 3px solid #000; /* Bordure épaisse en bas */
}

.sudoku-cell:focus {
    outline: none; /* Supprime l'outline par défaut */
    background-color: #c5b9ff; /* Changement de couleur au focus */
}

.sudoku-cell[readonly] {
    background-color: #f0f0f0; /* Couleur de fond pour les cellules en lecture seule */
}

/* couleurs pour les chiffres en mode assitance */
.sudoku-cell.correct {
    color: green; /* Couleur du texte (chiffre) pour les réponses correctes */
}

.sudoku-cell.incorrect {
    color: red; /* Couleur du texte (chiffre) pour les réponses incorrectes */
}

/* [ Grille Sudoku ]
       |
       | 30px (margin-top)
       v
[ Boutons (Nouvelle partie, Difficulté, Assistance) ]
[ Bouton Valider ]
[ Message (#result) ]
       |
       | 20px (margin-bottom)
       v
[ Élément suivant (pied de page, etc.) ]
*/

.sudoku-game-info {
    text-align: center; /* Centrage du texte */
    margin-top: 40px; /* Espacement entre le bas de la grille et le haut des boutons */
    /* margin-bottom: 20px; /* Espacement entre le bas du message (#result) et l'élément suivant (pied de page, etc.) */
    display: flex; /* Utilisation de Flexbox pour aligner les éléments */
    flex-direction: column; /* Alignement vertical */
    align-items: center; /* Centrage horizontal */
    gap: 20px; /* Espacement entre les éléments */
}

/* Styles pour les boutons (Nouvelle partie, Difficulté, Assistance) : alignement et espacement */
/*
.sudoku-game-info .buttons-container {
    display: flex; /* Utilisation de Flexbox pour aligner les boutons */
/*    gap: 10px; /* Espacement entre les boutons */
/*}

/* 📱 Adaptation pour mobile */
@media (max-width: 768px) {

    .sudoku-game-info {
        margin-top: 10px; /* Espacement entre le bas de la grille et le haut des boutons */
        /* margin-bottom: 20px; /* Espacement entre le bas du message (#result) et l'élément suivant (pied de page, etc.) */
        display: flex; /* Utilisation de Flexbox pour aligner les éléments */
        flex-direction: column; /* Alignement vertical */
        align-items: center; /* Centrage horizontal */
        gap: 10px; /* Espacement entre les éléments */
    }
} 

/* 
[ Boutons (Nouvelle partie, Difficulté, Assistance) ]
        |
        | margin-top par défaut ?
        v
[ Bouton Valider ]
        |
        | margin-bottom par défaut ?
        v
[ Message (#result) ]
*/

/* Styles pour le bouton Valider : on réduit l'espacement avec les autres boutons */
.sudoku-game-info .valider-container {
    margin-top: 0px; /* Espacement par rapport aux autres boutons : on remonte le bouton Valider car il est trop bas */
}

/* 
[ Bouton Valider ]
        |
        | margin-top par défaut ?
        v
[ Message (#result) ]
        |
        | margin-bottom par défaut ?
        v
[ Élément suivant (pied de page, etc.) ]
*/

.sudoku-game-info .message-container {
    text-align: center; /* Centrage du texte */
    /* margin-top: -30px; /* Espacement entre le bouton valider et le message */
    /* margin-bottom: -30px; /* Espacement entre le message et le pied de page */
}

.sudoku-game-info #result {
    font-size: 18px; /* Taille de police */
    font-weight: bold; /* Texte en gras */
    padding: 10px; /* Espacement interne */
    border-radius: 5px; /* Bordures arrondies */
    display: block; /* Affichage en bloc */
    text-align: center; /* Centrage du texte */
}


/* Initialement, les éléments du jeu sont invisibles */
.sudoku div, .sudoku .message-container, .sudoku .buttons-container, .sudoku .btn, .sudoku input {
    opacity: 0;
    transform: translateY(-10px); /* Optionnel: ajoute un léger effet de décalage */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quand la classe "visible" est ajoutée, les éléments deviennent visibles */
.sudoku div.visible, .sudoku .message-container.visible, .sudoku .buttons-container.visible, .sudoku .btn.visible, .sudoku input.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ================================================== */
/* Styles pour le jeu du Pendu */
/* ================================================== */
.game-info-pendu {
    position : relative;
    justify-content: center; /* Centre horizontalement */
    text-align: center;
    align-items: center; /* Centrage horizontal */
    z-index: 200;
}

.game-info-pendu .mot-masque {
    position: relative;
    font-size: 2em;
    text-align: center; /* Centrage du texte */
    letter-spacing: 0.2em;
    z-index: 50;
    color: white;
}

.game-info-pendu .message-container {
    position: relative;
    margin-top: auto; 
    font-size: 1.2em;
    padding: 10px;
    border-radius: 5px;
    z-index: 50;
}


/*
.game-info-pendu .btn-container {
    display: flex;
    justify-content: center; /* Centre horizontalement */
/*    align-items: center; /* Centre verticalement (optionnel) */
/*    width: 100%; /* Assurez-vous que le conteneur prend toute la largeur */
/*}*/

/* Pour gérer les priorités par rapport au clavier virtuel */
/* Cible le bouton "Nouvelle partie" dans une page .pendu */
.game-info-pendu .btn { /* classe .btn pour le bouton nouvelle partie */
    position: relative;
    z-index: 200;
}

.game-info-pendu img, .game-info-pendu .lettres-proposees {
    position : relative;
    z-index: 50;
    color: white;
}

/*
.game-info-pendu img {
    width: auto; /* Prend la largeur définie en Python */
/*    height: auto; /* Respecte le ratio */
/*    max-width: 100%; /* Empêche l’agrandissement au-delà du parent */
/*    display: block;
    margin: 0 auto;
    direction: rtl;
    overflow-x: hidden; /* Désactive le scroll horizontal */
/*}

/* Clavier virtuel pour le device mobile */
.virtual-touchscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 100;
    cursor: pointer;
    /*pointer-events: none;*/
}


/* Initialement, les éléments du jeu sont invisibles */
.pendu div, .pendu .message-container, .pendu .buttons-container, .pendu img {
    opacity: 0;
    transform: translateY(-10px); /* Optionnel: ajoute un léger effet de décalage */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quand la classe "visible" est ajoutée, les éléments deviennent visibles */
.pendu div.visible, .pendu .message-container.visible, .pendu .buttons-container.visible, .pendu img.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ================================================== */
/* Styles pour le jeu du Taquin */
/* ================================================== */
#taquin-container {
    display: grid;
    grid-template-columns: repeat(4, 60px); /* Grille 4x4 */
    grid-template-rows: repeat(4, 60px);
    gap: 0px; /* Espace entre les cases */
    margin: 20px auto;
    justify-content: center;
}

#taquin-container .case {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    font-size: 24px;
    cursor: pointer;
    background-color: #e0d7ff; /* Couleur de fond des cases */
}

#taquin-container .case.empty {
    background-color: transparent; /* Case vide */
    border: 1px dashed #ccc;
}


.taquin-game-info {
    text-align: center; /* Centrage du texte */
    margin-top: 40px; /* Espacement entre le bas de la grille et le haut des boutons : espacement négatif pour faire remonter les boutons */
    display: flex; /* Utilisation de Flexbox pour aligner les éléments */
    flex-direction: column; /* Alignement vertical */
    align-items: center; /* Centrage horizontal */
    gap: 20px; /* Espacement entre les éléments */
    
}

/* 📱 Adaptation pour mobile */
@media (max-width: 768px) {

    .sudoku-game-info {
        margin-top: 10px; /* Espacement entre le bas de la grille et le haut des boutons */
        gap: 10px; /* Espacement entre les éléments */
    }
} 

/* Styles pour les boutons (Réinitialiser, Niveau, Assistance) : alignement et espacement */

/*
.taquin-game-info .buttons-container {
    display: flex; /* Utilisation de Flexbox pour aligner les boutons */
/*    gap: 10px; /* Espacement entre les boutons */
/*    justify-content: center; /* Centrer les boutons horizontalement */
/*    margin-top: 40px; /* Ajouter un espacement au-dessus des boutons */
/*}

/* 📱 Adaptation pour mobile */
@media (max-width: 768px) {
    #taquin-container {
        margin: 15px auto;
    }
    
/*
    .taquin-game-info .buttons-container {
        flex-wrap: wrap;  /* Permet aux boutons de passer à la ligne si nécessaire */
/*        justify-content: center;  /* Centre les boutons horizontalement */
/*        gap: 15px;  /* Espacement entre les boutons */
/*        margin-top: 10px; /* Ajouter un espacement au-dessus des boutons (avec la grille) */
/*    }

    /*.taquin-game-info .buttons-container .btn {
    /*    width: 45%;  /* Réduit la largeur des boutons pour les ajuster */
    /*    max-width: 200px;  /* Limite la largeur des boutons */
   /*     padding: 12px;  /* Ajuste le padding pour de meilleures proportions */
    /*    font-size: 14px;  /* Réduit légèrement la taille du texte */
        
    /*    display: flex;  /* Active le mode Flexbox pour les boutons */
    /*    justify-content: center;  /* Centre le texte horizontalement */
    /*    align-items: center;  /* Centre le texte verticalement */
    /*    margin-top: 15px; /* Ajouter un espacement au-dessus des boutons */
        /*margin-top: 0.1rem; /* Ajouter un espacement au-dessus des boutons */
        /*margin-bottom: 0.1rem; */
    /*} */
}




.taquin-game-info .message-container {
    text-align: center; /* Centrage du texte */
    margin: 0px auto; /* Espacement entre les boutons et le message */
}


/* 📱 Adaptation pour mobile */
@media (max-width: 768px) {
    .taquin-game-info .message-container
     {
        margin: 0px auto;
    }
}

.taquin-game-info #message {
    font-size: 18px; /* Taille de police */
    font-weight: bold; /* Texte en gras */
    margin-top: 10px; /* Espacement supérieur */
    padding: 10px; /* Espacement interne */
    border-radius: 5px; /* Bordures arrondies */
    display: block; /* Affichage en bloc */
    text-align: center; /* Centrage du texte */
    /* margin-bottom: 40px; /* Espacement inférieur avec le footer */
}

/* Initialement, les éléments du jeu sont invisibles */
.taquin div, .taquin .message-container, .taquin .buttons-container, .taquin .btn {
    opacity: 0;
    transform: translateY(-10px); /* Optionnel: ajoute un léger effet de décalage */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quand la classe "visible" est ajoutée, les éléments deviennent visibles */
.taquin div.visible, .taquin .message-container.visible, .taquin .buttons-container.visible, .taquin .btn.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ================================================== */
/* Styles pour les pages services, index et about */
/* ================================================== */
.animated-list {
    list-style: none; /* Supprime les puces par défaut */
    padding: 0;
}

/* Effet d'apparition pour le <h2> */
.fade-in-title {
    opacity: 0; /* Caché au départ */
    transform: translateY(-10px); /* Déplacement initial vers le haut */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    /* transition-delay: 0.5s; /* ⏳ Délai avant apparition du h2 */
}

/* Quand le h2 devient visible */
.fade-in-title.visible {
    opacity: 1;
    transform: translateY(0);
}


.fade-in-title {
  display: flex;
  align-items: center;       /* Aligne verticalement au centre */
  /*justify-content: center;   /* Centre horizontalement */
  flex-wrap: wrap;           /* Permet les retours à la ligne si besoin */
}

.fade-in-title.services {
    /* Justification spécifique pour la page services */
    justify-content: center; /* Centre le titre horizontalement */
}

/* Effet d'apparition pour les bullet points */
.fade-in {
    opacity: 0; /* Caché au départ */
    transform: translateY(10px); /* Déplacement initial vers le bas */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Quand les bullet points deviennent visibles */
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}



.text-section {
    position:relative;
    /* display: block; /* Assure que l'élément prend toute la largeur */
    /* text-align: center;
    /* justify-content: center; */
    /* width: 60%; */
    /* margin-top: 150px; /* Espace après .circle-container */
    clear: both; /* IMPORTANT : Évite les chevauchements */
    margin-left: 20px; /* marge à gauche */
    margin-right: 20px; /* marge à droite */
}

/* texte à centrer uniquement pour services.html */
.services .text-section {
    text-align: center;
}

/* texte à aligner à droite et à gauche  uniquement pour index.html */
.index .text-section, 
.about .text-section {
    text-align: justify;    
}

/* 📱 Adaptation pour mobile */
@media (max-width: 768px) {
    .text-section h2
     {
        font-size: 20px;
        /* margin-top: 0px; /* Espace après .circle-container */
    }
}

.text-section h2 {
    font-size: 25px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ajoute une ombre subtile */
}

/* 📱 Adaptation pour mobile */
@media (max-width: 768px) {
    .text-section h2
     {
        font-size: 20px;
    }
}

.text-section ul {
    font-size: 18px;
    line-height: 1.6;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ajoute une ombre subtile */
}

/* 📱 Adaptation pour mobile */
@media (max-width: 768px) {
    .text-section ul
     {
        font-size: 15px;
    }
}


/***************** spécifique à la page services ****************/
.circle-container {
    position: relative; /* Le conteneur est le repère des cercles */
    width: 100%;  /* Ajuste selon la taille du demi-cercle */
    height: 100%; /* Hauteur réduite pour former un arc */
    flex-grow: 1; /* Prend tout l'espace disponible dans main */
    /* margin: auto; /* Centre horizontalement */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Aligner les cercles vers le bas */
}


.circle {
    position: relative; /* Chaque cercle est positionné par rapport au container */
    width: calc(70%/5);
    aspect-ratio: 1 / 1; /* Force la hauteur à être égale à la largeur */
    /* height: 180px; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: lightblue; */
    /*background: linear-gradient(to bottom right, #6a7e92, #74c8e7);*/
    background: linear-gradient(to bottom right, var(--main-color), var(--secondary-color));

    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ajoute une ombre subtile */
    font-weight: bold;
    text-align: center; /* Centre le texte à l'intérieur */
    padding : 15px ;

    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

}

/* 📱 Adaptation pour mobile */
@media (max-width: 768px) {
    
    @media (orientation: portrait) {

        .circle
        {
            width: calc(80%/5);
            aspect-ratio: 1 / 1; /* Force la hauteur à être égale à la largeur */
            font-size: 8.5px;
            padding : 8.5px ;
            /* border:10px; */
        }
    }
}

/* Positionnement des cercles en arc */
.circle1 { transform: translateY(150%) } /* On descend le premier cecle de 2 fois sa taille vers le bas */
.circle2 { transform: translateY(75%) } /* On descend le 2ème cercle d'une fois sa taille vers le bas */
.circle3 { transform: translateY(0); }
.circle4 { transform: translateY(75%) } /* On descend le 2ème cercle d'une fois sa taille vers le bas */
.circle5 { transform: translateY(150%) } /* On descend le premier cecle de 2 fois sa taille vers le bas */



.circle.visible {
    opacity: 1;
    /* transform: translateY(0); */
}


/***************** spécifique à la page index ****************/
/* Style de base pour le lien */
.clickable-section {
    text-decoration: none; /* Supprime le soulignement par défaut des liens */
    color: inherit; /* Hérite de la couleur du texte parent */
    display: block; /* Permet de cliquer sur toute la zone */
    position: relative; /* Pour positionner l'icône */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ajoute une transition douce */
    border: 2px solid transparent; /* Bordure invisible par défaut */
    cursor: pointer;
}


/* Effet au survol */
.clickable-section:hover {
    transform: scale(1.05); /* Agrandit légèrement l'élément */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajoute une ombre */
    border-color: #007BFF; /* Couleur de la bordure au survol */
}

/* Style pour l'icône de lien */
/*.link-icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 1.5em;
    color: #007BFF; /* Couleur de l'icône */
/*}

/* Style pour l'icône de lien */
.link-icon {
    /*margin-left: 8px; /* Espace entre le titre et l'icône */
    /*margin-left: 0.5em; /* Espace entre le titre et l'icône */
    font-size: 1.2em; /* Taille de l'icône */
    color: #007BFF; /* Couleur de l'icône */
    vertical-align: middle; /* Aligne verticalement l'icône avec le texte */
}

html:not(:lang(ar_DZ)) .link-icon {
    margin-left: 0.5em; /* Espace entre le titre et l'icône */
}

html[lang="ar_DZ"] .link-icon {
    margin-right: 0.5em; /* Espace entre le titre et l'icône */
}

/***************** spécifique à la page contact ****************/
#contact-form .form-box,
#contact-form label,
#contact-form input,
#contact-form textarea,
#contact-form select,
#contact-form .buttons-container,
#contact-form .placeholder,
#contact-form .btn,
#contact-form .select2-container {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}


/* Rendre les éléments visibles */
#contact-form .form-box.visible,
#contact-form .visible,
#contact-form .select2-container--visible {
    opacity: 1;
    transform: translateY(0);
}


#phone-container-mobile {
    width : 100%
}

.phone-input {
    position: relative;
    display: flex;
    align-items: center; /* Centre l'input */
}

.phone-input input {
    width: 100%;
    /*padding-right: 50px; /* Espace pour le placeholder */
    height: 100%; /* Assure une hauteur uniforme */
}

html:not(:lang(ar_DZ)) .phone-input input {
    padding-right: 100px; /* Espace pour le placeholder */
}

html[lang="ar_DZ"] .phone-input input {
    padding-left: 100px; /* Espace pour le placeholder */
}

html:not(:lang(ar_DZ)) input[type="tel"], input.number-input {
    direction: ltr; /* Force la direction LTR */
    text-align: left; /* Alignement visuel */
}

/* forcer la direction ltr pour les numéros de téléphone en langue arabe */
html[lang="ar_DZ"] input[type="tel"], input.number-input {
    direction: ltr; /* Force la direction LTR */
    text-align: right; /* Alignement visuel */
}



/* forcer la direction ltr pour les emails en langue arabe */

html:not(:lang(ar_DZ)) input[name="email"] {
    direction: ltr; /* Force la direction LTR */
    text-align: left; /* Alignement visuel */
}

html[lang="ar_DZ"] input[name="email"] {
    direction: ltr; /* Force la direction LTR */
    text-align: right; /* Alignement visuel */
}


.phone-input .placeholder {
    position: absolute;
    /*right: 10px; /* Ajuste l'espace avec le bord droit */
    top: 50%;
    transform: translateY(-80%) !important; /* Centre parfaitement, le important est très important sinon ce translate est perturbé par l'animation ! */
    color: gray;
    pointer-events: none;
    white-space: nowrap;
    font-size: 80%;
}

html:not(:lang(ar_DZ)) .phone-input .placeholder {
    right: 10px; /* Ajuste l'espace avec le bord droit */
}

html[lang="ar_DZ"] .phone-input .placeholder {
    left: 10px; /* Ajuste l'espace avec le bord gauche */
    direction: ltr; /* Force la direction LTR */
    text-align: right; /* Alignement visuel */
}


.select2-container {
    width: 100% !important; /* Force la largeur */
}


html[lang="ar_DZ"] .select2-container {
    direction:rtl !important; /* Force la direction rtl pour la langue arabe */
}

html[lang="ar_DZ"] .select2-dropdown {
    direction: rtl !important;  /* Applique rtl sur la dropdown */
}

html[lang="ar_DZ"] .select2-results {
    direction: rtl !important;  /* Applique rtl aux résultats de la recherche dans la dropdown */
}

/* Ajoute un encadré bleu lors du focus */
.select2-selection:focus {
    border: 2px solid #007bff !important; /* Change #007bff pour la couleur de ton choix */
    outline: none; /* Pour ne pas laisser le contour par défaut */
}

.select2-selection--single {
    transition: border 0.3s ease;
}

/* Classe "invalid" pour les erreurs (rouge) */
.select2-selection.invalid:focus {
    border: 2px solid #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important;
    outline: none; /* Pour ne pas laisser le contour par défaut */
}


/* Styles pour l'ouverture du chatbot à partir de la page index.html (voire toutes les pages) */
/* Version finale basée sur votre code original avec ajustements */
/*
#chatbot-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*width: 40vw;
    height: 100vh;*/
    /*background: rgba(0,0,0,0.5);*/
/*    z-index: 10000;
}*/

/*
.chat-window {
    position: fixed;
    top: 0;
    right: 0;
    width: 40vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    /*z-index: 10000;*/
/*}

#chatbot-iframe {
    position: relative;
    top: 0;
    right: 0;
    width: 40vw;
    height: 100vh;
    background: white;
    /*box-shadow: -2px 0 15px rgba(0,0,0,0.1);*/
/*    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10001;
/*}*/


.chat-window {
    position: fixed;
    /*top: 0;
    /*right: 0;*/
    /*width: 40vw;
    height: 100vh;
    /*height: calc(100vh - 4px);*/
    /*width: 40%;
    height: 100%;*/
    margin: 0;
    padding: 0;
    overflow: hidden; /* Cache tout débordement */
    /*background: transparent; /* Supprime le fond inutile */
    z-index: 10001;
    /*border: 2px solid gainsboro; /* Épaisseur | Style | Couleur */
    box-sizing: border-box; /* Pour ne pas perturber les dimensions de l'élément */
}

/*
html:not(:lang(ar_DZ)) .chat-window {
    right: 0;
}

html[lang="ar_DZ"] .chat-window {
    left: 0;
}
*/

/* 📱 Adaptation pour mobile */
/*
@media (max-width: 768px) {
    .chat-window {
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        border: none;
    }
}
*/

#chatbot-iframe {
    position: absolute; /* Positionnement ABSOLU dans le parent */
    /*width: 40vw;*/
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    width: 100%; /* Prend 100% de la largeur du parent */
    height: 100%; /* Prend 100% de la hauteur du parent */
    border: none;
    display: block; /* Supprime l'espace résiduel des iframes */
    overflow: hidden;
    z-index: 9999; /* Doit être inférieur à .chat-controls */
    overscroll-behavior: contain; /* Contient le scroll à l'intérieur */

}


/* Pour gérer les redimensionnements souris */
/*#chatbot-iframe {
    transition: left 0.1s, top 0.1s; /* Animation fluide */
/*    left: calc(100% - 40vw); /* Position initiale */
/*}

/* Boutons et dragHandle de contrôle */
.chat-controls {
    position: relative;
    /*width: 100%;
    height: 100%;
    /*right:45px;*/
    /*width: 40vw; /* Position à droite de l'iframe */
    /*top: 110vh; /* pour compenser l'effet "overflow: hidden;" de hat-window, qui cache tout débordement */
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10001; /* Au-dessus de l'iframe */
    
}

.dragHandle {
    position: absolute;
    width: 100%;
    /*height: 100%;*/
    height: 10vh;
    /*left: -40px;*/
    top: 0;
    right: 0;
    /*cursor: move;*/
    z-index: 10000; /* Au-dessus de l'iframe */
}

/* Boutons flèche oblique et fermeture chatbot */
.fullscreen-toggle, .close-chatbot {
    position: absolute;
    /*right: calc(40vh + 45px); /* Place à l'extérieur de la fenêtre */
    /*z-index: 10002;*/
    background: white;
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 5px 10px;
    /*pointer-events: auto; /* Rend cliquable */
    /*z-index: 10003;*/
}


/* Tooltip */
.tooltip-text {
    position: absolute;
    top: 100%; /* Place le tooltip en bas du bouton */
    background: #34a165;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    margin-bottom: 5px; /* Espace entre le bouton et le tooltip */
    z-index: 10002; /* Au-dessus de close-chatbot */
}
  
.close-chatbot:hover .tooltip-text {
    opacity: 1;
}

.fullscreen-toggle:hover .tooltip-text {
    opacity: 1;
}

.upload-chat:hover .tooltip-text, .download-chat:hover .tooltip-text {
    opacity: 1;
}

html:not(:lang(ar_DZ)) .tooltip-text {
    left:0;
}

html[lang="ar_DZ"] .tooltip-text {
    right: 0;
}

/* 📱 Adaptation pour mobile */
/*
@media (max-width: 768px) {

    /* Ce bouton n'a pas de sens dans le contexte mobile */
/*    .fullscreen-toggle {
        opacity: 0;
        pointer-events: none;
    }
}
*/

/*
.fullscreen-toggle {
    top: 10px;
}
*/

.close-chatbot {
    /*top: 30px;*/
    pointer-events: auto; /* Rend cliquable */
    /*right : -10px;*/
}

/* 📱 Adaptation pour mobile */
/*
@media (max-width: 768px) {
    .close-chatbot {
        top: 0px;
    }
}
*/

.chat_list {
    position: absolute;
    top:0;
    cursor: pointer;
    padding: 5px;

    border: 1px solid #ccc;
    
    /*z-index: 10003;*/
    text-align: center;

}


.new-chat, .delete-chat {
    position: absolute;
    /*right:0;*/
    cursor: pointer;
    /*padding: 5px 5px;
    /*z-index: 10003;*/

    pointer-events: auto; /* Rend cliquable */

    border: 1px solid #ccc;

    background: white;

    text-align: center;

}

.new-chat {
    top: 30px;
}

.delete-chat {
    top: 60px;
}


html:not(:lang(fr)) .delete-chat,
html:not(:lang(fr)) .new-chat {
    padding: 7px;
}

html[lang="fr"] .delete-chat,
html[lang="fr"] .new-chat {
    padding: 5px;
}


.load-buttons {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px; /* espace entre les boutons */
  pointer-events: auto;
}

/* Style des boutons */
.load-buttons button {
  cursor: pointer;
  border: 1px solid #ccc;
  background: white;
  padding: 1px 3px;
  /*padding: 6px 12px;*/
}

/*
.fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    left: 0 !important;
    top: 0 !important;
    resize: none !important;
}


.resize-handle {
    position: absolute;
    background: #ddd;
    z-index: 10002;
}



/* Adaptation mobile */
/*
@media (max-width: 768px) {
    .fullscreen-toggle, .close-chatbot {
        right: 10px !important;
        left: auto !important;
    }
}



.fullscreen .chat-controls {
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
}

.fullscreen .fullscreen-toggle {
    left: 20px !important;
    top: 20px !important;
}

.fullscreen .close-chatbot {
    left: 20px !important;
    top: 50px !important;
}



/*
.resize-cursor-ew {
    cursor: ew-resize;
  }
*/

/*
.chatBordure {
    position:relative;
    top:0;
    /*top: 100vh; /* pour compenser l'effet "overflow: hidden;" de hat-window, qui cache tout débordement */
    /*width: 100%;
    height: 100%;*/
/*    z-index: 10002; /* Contexte global pour toutes les bordures */  
/*}*/

.chatBordureTop {
    position: absolute;
    width: 100%;
    height: 8px;
    top:0;
    cursor: ns-resize; /* cureseur vertical */
    z-index: 10002; /* Juste en dessous des coins */
}
  
.chatBordureBottom {
    position: absolute;
    width: 100%;
    height: 8px;
    bottom: 0;
    /*top:calc(100% - height);*/
    
    cursor: ns-resize; /* cureseur vertical */
    z-index: 10002; /* Juste en dessous des coins */
}


.chatBordureLeft {
    position: absolute;
    width: 8px;
    height: 100%;
    left:0;
    cursor: ew-resize; /* cureseur horizontal */
    z-index: 10002; /* Juste en dessous des coins */
}
  
.chatBordureRight {
    position: absolute;
    width: 8px;
    height: 100%;
    right: 0;
    cursor: ew-resize; /* cureseur horizontal */
    z-index: 10002; /* Juste en dessous des coins */
}


.chatBordureNW {
    position: absolute;
    width: 8px;
    height: 8px;
    left: 0;
    top: 0;
    cursor: nwse-resize; /* cureseur nord-ouest / sud-est */
    z-index: 10003; /* Le plus élevé */
}

.chatBordureNE {
    position: absolute;
    width: 8px;
    height: 8px;
    right: 0;
    top: 0;
    cursor: nesw-resize; /* curseur nord-est / sud-ouest */
    z-index: 10003; /* Le plus élevé */
}

.chatBordureSW {
    position: absolute;
    width: 8px;
    height: 8px;
    left: 0;
    bottom: 0;
    cursor: nesw-resize; /* curseur nord-est / sud-ouest */
    z-index: 10003; /* Le plus élevé */
    color: transparent;
    background: transparent;
}

.chatBordureSE {
    position: absolute;
    width: 8px;
    height: 8px;
    right: 0;
    bottom: 0;
    cursor: nwse-resize; /* cureseur nord-ouest / sud-est */
    z-index: 10003; /* Le plus élevé */
}

/*
.resize-cursor-nwse {
    cursor: nwse-resize;
}
  
.resize-cursor-nesw {
    cursor: nesw-resize;
}
*/



.social-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 0;
    background-color: var(--secondary-color);
    /*margin-bottom: 1rem;*/
}

.social-icons.contact {
    background-color: transparent; /* Fond transparent pour les icônes en ligne */
    /*margin-left: 0.75em;       /* Espace entre le globe et les icônes */
    display: inline-flex;      /* Met les <a> en ligne avec un flex interne */
    align-items: center;
}

html:not(:lang(ar_DZ)) .social-icons.contact {
    margin-left: 0.75em;       /* Espace entre le globe et les icônes */
}

html[lang="ar_DZ"] .social-icons.contact {
    margin-right: 0.75em;       /* Espace entre le globe et les icônes */
}

.social-icons.page-contact {
    padding-top : 3rem; /* Espace entre le titre et les icônes */
    padding-bottom: 0; /* Espace entre les icônes et le formulaire */
    /*margin-top: 1rem; /* Espace entre le titre et les icônes */
}

.social-icons a {
    color: white; /* Couleur du texte */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ajoute une ombre subtile */
    /*color: #555; /* Couleur de base */
    transition: all 0.3s ease;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.social-icons.contact a {
  /*margin-left: 0.5em;        /* Espace entre chaque icône */
  text-decoration: none;
}

html:not(:lang(ar_DZ)) .social-icons.contact a {
    margin-left: 0.5em;       /* Espace entre chaque icône */
}

html[lang="ar_DZ"] .social-icons.contact a {
    margin-right: 0.5em;       /* Espace entre chaque icône */
}

/* 📱 Adaptation pour mobile */
@media (max-width: 768px) {
    .social-icons.contact {
        /*flex-direction: column; /* Colonne pour les petits écrans */
        align-items: center; /* Centre les icônes */
        gap: 0.5rem; /* Espace entre les icônes */
    }
    
    html:not(:lang(ar_DZ)) .social-icons.contact a {
        margin-left: 0.2em;        /* Espace entre chaque icône */
    }

    html[lang="ar_DZ"] .social-icons.contact a {
    margin-right: 0.2em;       /* Espace entre chaque icône */
}

}

.social-icons.page-contact i {
    font-size: 2rem;
}


.social-icons a:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Couleurs spécifiques pour chaque réseau */
.social-icons a:nth-child(1):hover { color: #0a66c2; background-color: #0a66c210; } /* Mail */
.social-icons a:nth-child(2):hover { color: #0a66c2; background-color: #0a66c210; } /* LinkedIn */
.social-icons a:nth-child(3):hover { color: #e4405f; background-color: #e4405f10; } /* Instagram */
.social-icons a:nth-child(4):hover { color: #000; background-color: #00000010; } /* TikTok */
.social-icons a:nth-child(5):hover { color: #000; background-color: #00000010; } /* X/Twitter */

/* Couleurs spécifiques pour chaque réseau pour la page contact*/
.social-icons.page-contact a:nth-child(1):hover { color: #0a66c2; background-color: #0a66c210; } /* LinkedIn */
.social-icons.page-contact a:nth-child(2):hover { color: #e4405f; background-color: #e4405f10; } /* Instagram */
.social-icons.page-contact a:nth-child(3):hover { color: #000; background-color: #00000010; } /* TikTok */
.social-icons.page-contact a:nth-child(4):hover { color: #000; background-color: #00000010; } /* X/Twitter */


/* Initialement, les icones sont invisibles */
.social-icons a {
    opacity: 0;
    transform: translateY(-10px); /* Optionnel: ajoute un léger effet de décalage */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quand la classe "visible" est ajoutée, les éléments deviennent visibles */
.social-icons a.visible {
    opacity: 1;
    transform: translateY(0);
}


.policy-notice {
    font-size: 0.8em;
    margin-top: 10px;
}

.policy-notice a {
    color: #FFFFFF;
    text-decoration: underline;
    opacity: 0.9;
    transition: all 0.2s ease;
}
.policy-notice a:hover {
    opacity: 1;
    text-decoration: none;
}


.modal {
  position: fixed;
  z-index: 20000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(0,0,0,0.5);*/
}
.modal-content {
  background: linear-gradient(45deg, #007BFF, #00b4d8);
  /*background: white;*/
  margin: 10% auto;
  padding: 20px;
  width: 60%;
  color: white;
}

.breadcrumb { margin-bottom: 10px; }

.dirList {
    border: 1px solid #ddd;
    height: 300px; /* Fixe la hauteur */
    overflow-y: auto; /* Active le scroll vertical */
    display: flex;
    flex-direction: column;
    gap: 5px; /* Espace entre les éléments */
}

.dirItem {
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    flex-shrink: 0; /* Empêche la réduction des éléments */
}

.dirItem:hover {
    background-color: #f5f5f5;
}

.modal-content .dialog-buttons {
    margin-top: 20px;
}


@keyframes clignoter {
  0%   { border-color: red; }
  50%  { border-color: transparent; }
  100% { border-color: red; }
}

.bordure-clignotante {
  border: 2px solid red;
  animation: clignoter 1s infinite;
  border-radius: 4px; /* Facultatif : rend le bouton plus joli */
}