/* ==============================
   1. Importation des polices
============================== */
/* Importation des polices Google Fonts : Rubik et Agrandir */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Agrandir:wght@700&display=swap');

/* ==============================
   2. Style global
============================== */
body {
  /* Police principale : Rubik */
  font-family: 'Rubik', sans-serif;
  font-size: 18px; /* Taille de base */
  font-weight: 400; /* Poids normal */
  overflow-x: hidden; /* Désactive le défilement horizontal */
  background-color: #ffffff; /* Fond blanc */
  color: #6C6D6E; /* Couleur du texte */
}

* {
  /* Réinitialise les marges, les paddings, et définit le modèle de boîte */
  font-family: 'Rubik', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  /* Animation sur tous les changements : transition douce */
  transition: all 0.3s ease;
}

a:hover, a:focus {
  /* Retire la décoration du texte au survol ou au focus */
  text-decoration: none;
}

p {
  line-height: 1.8; /* Améliore la lisibilité des paragraphes */
}

/* ==============================
   3. Classes de couleur
============================== */
.tm-primary-color, 
.tm-secondary-color {
  color: #A9A9A9; /* Définit une couleur grise */
}

/* ==============================
   4. Conteneurs principaux
============================== */
.tm-page-container {
  max-width: 600px; /* Largeur maximale */
  width: 100%; /* Prend toute la largeur disponible */
}

.tm-section {
  border-radius: 20px; /* Coins arrondis */
  margin-bottom: 155px; /* Espacement en bas */
  position: relative; /* Positionnement relatif pour des éléments internes */
}

.tm-content-container {
  border-radius: 20px; /* Coins arrondis */
  background-color: #f0f0f0; /* Fond gris clair */
}

.tm-content {
  padding: 55px; /* Espacement interne */
}

/* ==============================
   5. Navigation
============================== */
.tm-nav {
  /* Barre de navigation fixe en bas */
  display: flex; /* Affichage en flexbox */
  justify-content: center; /* Centre les éléments horizontalement */
  align-items: center; /* Centre verticalement */
  padding: 0px 0; /* Espacement vertical */
  position: fixed; /* Fixe la barre en bas de l'écran */
  bottom: 0;
  left: 0;
  width: 100%; /* Prend toute la largeur */
  background-color: #f8f9fa; /* Fond gris clair */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Ombre subtile */
}

.tm-nav > ul {
  display: flex; /* Liste horizontale */
  list-style: none; /* Retire les puces */
}

.tm-nav > ul > li {
  margin: 0 15px; /* Espacement entre les éléments */
}

.tm-nav > ul > li > a {
  display: block; /* Convertit en bloc */
  padding: 12px 15px; /* Espacement interne */
  color: #000; /* Couleur grise */
  font-size: 16px; /* Taille du texte */
  font-weight: 500; /* Poids moyen */
}

.tm-nav > ul > li.active > a,
.tm-nav > ul > li > a:hover,
.tm-nav > ul > li > a:focus {
  /* Styles appliqués au lien actif, survolé ou focus */
  color: #000; /* Texte noir */
  font-weight: bold; /* Gras */
}

/* ==============================
   6. En-têtes et titres
============================== */

.tm-title {
  font-weight: 400; /* Poids normal */
  font-size: 56px; /* Grand texte */
  color: #000; /* Noir */
}

.tm-page-title {
  font-size: 1.5rem; /* Taille intermédiaire */
  margin-bottom: 10px; /* Espacement inférieur */
  color: #000; /* Noir */
}

/* ==============================
   7. Images et overlays
============================== */
.tm-img {
  display: block; /* Bloque l'image pour gérer la mise en page */
  max-width: 100%; /* Empêche de dépasser le conteneur */
  height: auto; /* Proportions respectées */
  position: relative; /* Position relative */
  z-index: 1; /* Ordre au-dessus des éléments par défaut */
}

.tm-img-overlay-wrap {
  position: relative; /* Positionnement relatif pour les superpositions */
  width: 100%; /* Largeur complète */
}

.tm-img-overlay {
  position: absolute; /* Position absolue */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent noir */
  z-index: 1; /* Placé sous le texte */
}

.tm-img-overlay-text, 
.tm-img-overlay-text-left {
  /* Texte dans l'image superposée */
  position: absolute;
  color: #fff; /* Blanc */
  font-size: 1.2rem; /* Texte lisible */
  line-height: 1.5; /* Hauteur de ligne */
  padding: 10px; /* Marges internes */
  z-index: 2; /* Au-dessus de l'overlay */
}

.tm-img-overlay-text {
  top: 50%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Alignement exact au centre */
  text-align: center; /* Centre le texte */
}

.tm-img-overlay-text-left {
  top: 50%;
  left: 10px; /* Aligne à gauche */
  transform: translateY(-50%);
  text-align: left;
}

/* ==============================
   8. Styles pour le menu
============================== */

/* Bouton hamburger */
#menu-toggle {
  background-color: #ffffff; /* Fond blanc */
  border: 1px solid #ddd; /* Bord gris clair */
  border-radius: 50%; /* Forme circulaire */
  width: 50px;
  height: 50px;
  display: none; /* Caché par défaut */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre douce */
  cursor: pointer; /* Curseur pointeur */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Animation fluide */
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 1001; /* Par-dessus la majorité des éléments */
}


#menu-toggle i {
  font-size: 24px;
  color: #6C6D6E;
}

/* Fenêtre modale */
.menu-modal {
  position: fixed;
  bottom: -80px; /* Position initiale au-dessus du bouton hamburger */
  right: 10px;
  width: 40%;
  height: 0; /* Hauteur initiale pour créer l'effet déroulant */
  overflow: hidden; /* Cache le contenu pendant l'animation */
  z-index: 3000; /* Au-dessus des autres éléments */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Contenu aligné en haut */
  align-items: center;
  transition: height 0.3s ease; /* Animation fluide pour la hauteur */
}


.menu-modal.active {
  height: 60%; /* La modale occupe toute la hauteur de l'écran */
}

/* Contenu de la modale */
.menu-modal-content {
  background-color: #fff;
  width: 90%; /* Largeur du contenu */
  padding: 20px;
  border-radius: 8px;
  box-shadow: none;
  text-align: center;
  overflow-y: auto; /* Permet un défilement si le contenu est trop long */
}

.menu-modal-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-modal-content ul li {
  margin: 15px 0;
}

/* Lien dans la modale */
.menu-modal-content ul li a {
  font-size: 20px;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.menu-modal-content ul li a:hover {
  color: #000;
  font-weight: bold;
}

/* Responsive : cacher le menu desktop sur mobile */
@media (max-width: 767px) {
  .tm-nav {
    display: none;
  }

  #menu-toggle {
    display: flex; /* Montrer le bouton hamburger */
  }
}

/* ==============================
   9. Langue (switcher)
============================== */
.language-switcher {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: transparent;
  border: 1px solid #6C6D6E;
  border-radius: 5px;
  color: #6C6D6E;
  padding: 5px 10px;
  text-align: center;
  transition: all 0.3s ease;
}

.language-switcher:hover {
  color: #000;
  border-color: #000;
  background-color: #f0f0f0;
}

.lang-buttons {
  display: flex;
  justify-content: flex-end;
  margin: 15px;
}

.lang-buttons a {
  margin: 0 5px;
}

.lang-buttons img {
  width: 30px;
  height: 20px;
  cursor: pointer;
}

/* Par défaut, tous les éléments de langue sont masqués */
[data-lang] {
  display: none;
}

/* Affiche uniquement les éléments marqués comme visibles */
.lang-visible {
  display: block; /* Ou flex/inline-block selon votre design */
}

/* Cache explicitement les éléments marqués comme masqués */
.lang-hidden {
  display: none !important;
}