@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans Condensed', sans-serif;
  background-color: #fff; /* Fond général clair */
  background: linear-gradient(180deg, rgba(0,0,0,1) 35%, rgba(74, 20, 140) 100%);
  transition: background-color 0.3s, color 0.3s;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Assure que la page prend toujours au moins la hauteur de l'écran */
}

body.dark-mode {
  background-color: #1f2123; /* Fond général sombre */
  color: #a770eb; /* Couleur du texte en violet en mode sombre */
}

header {
  background: #4A148C;
  padding: 10px 0;
}

header.dark-mode {
  background-color: #333; /* Fond de l'en-tête en mode sombre */
}
/* Menu */
.menu {
  padding: 20px;
  text-align: center;
  background: #4A148C;
  transition: background-color 0.3s;
}

.menu.dark-mode {
  background-color: #333;
}

/* Structure des éléments du menu */
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
  margin: 0 15px;
  position: relative;
}

.menu a {
  font-size: 22px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  display: block;
  padding: 4px 0;
  transition: color 0.3s;
}

.menu.dark-mode a {
  color: #a770eb; /* Couleur en mode sombre */
}

/* Animation des liens du menu */
.menu a::before {
  content: "";
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #E91E63;
  transition: transform 0.5s ease;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.menu a:hover::before {
  transform: scaleX(1);
}

/* Menu déroulant */
.dropdown {
  display: inline-block;
  position: relative;
}

.dropbtn {
  cursor: pointer;
  font-size: 22px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 4px 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #4A148C;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  top: 100%;
  left: 0;
}

.dropdown-content a {
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #6A1B9A;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Responsive - adaptions pour mobile */
@media screen and (max-width: 768px) {
  .menu {
    padding: 15px; /* Ajuste l'espacement du menu sur mobile */
  }

  .menu li {
    display: block; /* Menu en colonne sur mobile */
    margin: 5px 0;
  }

  .menu a {
    font-size: 18px; /* Taille de texte réduite sur mobile */
  }

  /* Gérer les boutons déroulants */
  .dropdown-content {
    position: static; /* Liste déroulante en mode mobile */
    box-shadow: none;
  }
}


.dropdown-content a {
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #6A1B9A;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.menu-icon {
  width: 24px;
  height: auto;
}

#toggle-theme {
  background: transparent;
  border: none;
  color: #a770eb;
  font-size: 24px;
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

/* Styles pour le tableau */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background-color: #fff; /* Fond du tableau en mode clair */
  color: #1f2123; /* Couleur du texte en mode clair */
}

body.dark-mode table {
  background-color: #1f2123; /* Fond du tableau en mode sombre */
  color: #a770eb; /* Couleur du texte du tableau en violet en mode sombre */
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #4A148C;
  color: #fff;
}

/* Positionnement de la flamme sous le lien */
.flame-container {
  position: relative;
  display: inline-block;
}

.flame-gif {
  position: absolute;
  align-items: left;
  left: -10px;
  transform: translateX(-50%);
  bottom: -13px ; /* Ajuste la hauteur pour placer la flamme juste en dessous */
  width: 150px ; /* Largeur de la flamme */
  height: 20px; /* Hauteur de la flamme */
}

.dropdown-content a:hover .flame-gif {
  display: block; /* Affiche la flamme au survol */
}

/* Styles pour le drapeau qui tourne */
.flag-icon {
  width: 30px ; /* Taille du drapeau */
  height: auto;
  margin-left: 5px; /* Espace entre le texte "Mon CV" et le drapeau */
  animation: spin 2s linear infinite; /* Animation de rotation */
}

/* Animation de rotation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


body {
  font-family: 'Open Sans Condensed', sans-serif;
  background-color: #f0f4f8; /* Fond clair amélioré */
  color: #333;
}

body.dark-mode {
  background-color: #1f1f1f;
  color: #a7a7a7;
}


.flag-icon {
  animation: spin 2s linear infinite;
  margin-left: 5px;
}

footer {
  position:fixed;
  bottom:0;
  text-align: center;
  padding: 5px;
  background-color: #4a148cb2;
  color: #FFFF;
}


main {
  flex: 1; /* Permet au contenu principal de prendre tout l'espace disponible */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 20px; /* Espace entre le flux Twitter et le bas de la page */
}

/* Styles par défaut pour les grands écrans (mode PC) */
.twitter-timeline {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 25vw; /* 1/4 de l'écran */
  height: calc(100vh - 200px); /* Ajuste la hauteur de la timeline pour qu'elle se situe entre le bas de la page et le menu */
  overflow: auto;
  display: block; /* Visible par défaut */
}

#twitter-toggle {
  display: none;
}

/* Mode mobile (max-width: 768px) */
@media (max-width: 768px) {
  .twitter-timeline {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100vw; /* Prend toute la largeur */
    height: 100vh; /* Prend toute la hauteur */
    display: none; /* Cachée par défaut en mode mobile */
    z-index: 9999; /* Priorité sur les autres éléments */
    background-color: white; /* Fond blanc si besoin */
  }

  /* Bouton visible en mode mobile */
  #twitter-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #1da1f2; /* Couleur Twitter */
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Priorité sur les autres éléments */
    cursor: pointer;
  }

  /* Masquer le flux Twitter en mode mobile */
  @media (max-width: 768px) {
    .twitter-timeline {
      display: none !important; /* Assurez-vous que la timeline est masquée sur mobile */
    }
  }

    /* Positionner le texte en bas de l'écran en mode mobile */
  @media (max-width: 768px) {
    main p {
      position: relative;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;  /* Centre le texte */
      padding: 10px 0;
      background-color:linear-gradient(180deg, rgba(0,0,0,1) 35%, rgba(74, 20, 140) 100%);;  /* Ajoute un fond blanc pour le contraste */
      margin: 0;  /* Évite les marges supplémentaires */
    }
  }

/* Par défaut, cacher le menu sur les petits écrans */
@media (max-width: 768px) {
  .menu ul {
    display: none; /* Cache le menu sur mobile */
  }

  /* Afficher le menu lorsque le bouton hamburger est cliqué */
  .menu ul.active {
    display: block;
  }

  /* Afficher et positionner le bouton hamburger en haut à gauche */
  #hamburger {
    display: block;
    position: fixed;
    top: 10px;  /* Ajuster la position du bouton en haut */
    left: 10px; /* Ajuster la position du bouton à gauche */
    z-index: 1000; /* Assure que le bouton reste au-dessus des autres éléments */
  }
}

/* Masquer le bouton hamburger sur les grands écrans (mode PC) */
@media (min-width: 769px) {
  #hamburger {
    display: none;  /* Masque le bouton hamburger sur les écrans larges */
  }

  /* Afficher le menu normalement sur PC */
  .menu ul {
    display: block; /* Affiche le menu sur les écrans de bureau */
  }
}
}