@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

:root {
  --max-width: 1100px;
  --border-radius: 12px;
  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;

  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;

  --primary-glow: conic-gradient(
    from 180deg at 50% 50%,
    #16abff33 0deg,
    #0885ff33 55deg,
    #54d6ff33 120deg,
    #0071ff33 160deg,
    transparent 360deg
  );
  --secondary-glow: radial-gradient(
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );

  --tile-start-rgb: 239, 245, 249;
  --tile-end-rgb: 228, 232, 233;
  --tile-border: conic-gradient(
    #00000080,
    #00000040,
    #00000030,
    #00000020,
    #00000010,
    #00000010,
    #00000080
  );

  --callout-rgb: 238, 240, 241;
  --callout-border-rgb: 172, 175, 176;
  --card-rgb: 180, 185, 188;
  --card-border-rgb: 131, 134, 135;
}


* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
}


html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  background-color: #F5F5F5;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}


a {
  color: inherit;
  text-decoration: none;
}

.section {
  background-color: #fff;
  width: 90%;
  min-height: 500px;
  margin: auto;
  margin-top: -100px;
  border-radius: 10px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  position: relative;
  padding: 10px 30px;
  margin-bottom: 60px;
}
main {
  margin-top: 30px;
  position: relative;  
}
main .title{
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: #5B2C6F;
}

main .title::after{
  content: "";
  display: block;
  border: 3px solid #5B2C6F;
  width: 5%;
  margin: auto;
  border-radius: 10px;
  margin-top: 8px;
}

swiper-container {
  width: 100%;
  height: 40vh;
  display: flex;
  margin: 0;
  padding: 10px;
  background: rgba(190, 180, 180, 0.7);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}


swiper-slide {
  text-align: center;
  font-size: 18px;
  background: transparent;
  position: relative;
 width: 31%;
  /* Center slide text vertically */
  display: flex; 
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}


swiper-slide h1, swiper-slide p{
  width: 100%;
  color: #F5F5F5;
  line-height:0.7em;
  margin:0px;
}

swiper-slide h1{
  font-size: 17px;
  margin:0;
}

swiper-slide p{
  font-size: 0.7em;
  margin:0;
}

swiper-slide img {
  display: block;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto;
  height:80%;
  width:30%;
}
img.centre {
  height:100%;
}

@media (max-width: 900px) {
  .swiper-slide {
    width: 100%;
  }
  swiper-slide img {
    height:70%;
    width:40vw;
  }
}
 #header {
    width: 100%;
    height: 90vh;
    background-image: url("../images/sousse.jpg");
    background-size: cover;
}

#header .nav {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    align-items: center;
    
}

#header .nav ul {
    display: flex;
    list-style: none;
}
/*
#header .logo {
  color: #F5F5F5;
  font-size: 50px;
  font-weight: 600;
}*/
.logo  {
margin-top: 8px;
}
#logoadacis  {
    width: 32%;
    height: 11vh;
}

#logoieee {
width: 28%;
height: 11vh;
margin-right: 20px;
margin-bottom: 6px;
}
#header .nav {
    padding: 0px;
    margin: 0;

}
#header .nav ul li {
    padding: 8px 10px;
    color: #11134be0;
    font-weight: 600;
    font-size: 1.2em;
    padding-top: 0;

}

#header .conference {
  width: 50%; /* Taille par défaut */
  height: auto; /* Ajuste la hauteur seulement si nécessaire */
  min-width: 300px; /* Taille minimale */
  min-height: 150px; /* Taille minimale */
  max-width: 90%; /* Taille maximale */
  max-height: auto; /* Permet à la hauteur de s'adapter au contenu */
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  padding: 10px;
  background: rgba(190, 180, 180, 0.6);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
   /* 
  height: 25vh;
  flex-direction: column;
    width: 50%;
    box-sizing: border-box;
    position: relative;
  margin: 0 auto;
    padding: 10px;
    /* From https://css.glass */
   /* background: rgba(190, 180, 180, 0.6);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
   border: 1px solid rgba(255, 255, 255, 0.3); */
}
#nbVisitors{
  height: 200px;
  margin: auto;
  width: 100%;
}

#header .title {
    width: 100%;
    font-size: 35px;
    color: #2c3e50;
    text-align: center;
}

#header .subtitle {
    width: 100%;
    color: #2c3e50;
    text-align: center;
}

#header .conf {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 10px;
    margin: 10px auto 10px auto;
}

#header #link, #header #dates {
    height: auto;
    box-sizing: border-box;
    background: rgba(190, 180, 180, 0.4);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: #2c3e50;
    padding: 20px;
}

#header #link {
    background: rgba(190, 180, 180, 0.1);
    box-shadow: rgba(255, 255, 255, 0.35) 0px 5px 15px;
}

#header #link p {
    text-align: center;
}

#header #dates h2 {
    font-size: 18px;
    width: 100%;
    text-align: left;
}

@media (max-width: 900px) {
    #header {
        height: auto;
        padding-bottom: 100px;
        margin-bottom: 10px;
    }

    #header .nav {
        flex-direction: column;
        justify-content: center;
        padding: 10px; 
    }

    #header .logo {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    #header .nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    #header .conf {
        flex-direction: column;
        margin: 0;
    }
    #header .conference {
      width: auto; /* Permet l'adaptation à la taille par défaut */
      max-width: 90%; /* Limite la largeur sur petits écrans */
      height: auto; /* Ajuste la hauteur seulement si nécessaire */
      margin: 8px auto; /* Centrer l'élément */
      padding: 10px;
      flex-direction: column;
  }
    /*
    #header .conference {
      width: 100%;
      height: auto;
      margin: 8px;
      padding: 10px;
      flex-direction: column;
  }
*/
    #header #link, #header #dates {
        width: 90%;
        padding: 5px 10px;
        margin: 8px;
    }

    #header #link {
       /* margin-bottom: 40px;*/
        background: rgba(190, 180, 180, 0.4);

    }


    #header .theme {
        width: 100%;
    }

    #header .title {
        font-size: 35px;
        width: 100%;
        text-align: center;
    }

    #header .location {
        margin-top: 30px;
        width: 100%;
        text-align: center;
    }

    #header #dates {
        justify-content: start;
    }

    #header #dates h2, #header #dates p {
        font-size: 16px;
        width: auto !important;
        text-align: left;
        padding: 2px;
    }
    
    
    #header .subtitle {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
  #header .conference {
    width: auto; /* Permet l'adaptation à la taille par défaut */
    max-width: 60%; /* Limite la largeur sur petits écrans */
    height: auto; /* Ajuste la hauteur seulement si nécessaire */
    margin: 8px auto; /* Centrer l'élément */
    padding: 10px;
  }
}







#footer{
  width: 100%;
  background-color: #5B2C6F;
  display: flex;
  justify-content: space-between;
  padding: 40px 30px;
  align-items: center;
  color: #F5F5F5;
}

#footer h1{
  font-size: 40px;
  width: 20%;
}
#footer .countdown{
  font-size: 40px;
  width: 60%;
  text-align: center;
}
#footer .location {
  width: 20%;
  display: flex;
  font-size: 40px;
}

@media (max-width: 900px) {
  #footer{
      flex-direction: column;
  }
  #footer h1{
      font-size: 30px;
      width: 100%;
      text-align: center;
  }
  #footer .countdown{
      font-size: 30px;
      width: 100%;
      margin: 20px 0;
  }
  #footer .location {
      width: 100%;
      font-size: 30px;
      justify-content: center;
  }
}


@media (max-width: 500px) {


  #honorees .items .item {
      width: 80%;
      margin: 10px 2.5%;
  }


}
/***************************************************************/
/* Style du menu principal */
.dropdown-toggle {
    transition: all 0.3s ease;
    color: #2c3e50; /* Couleur de texte visible sur fond clair */
    padding: 10px 15px;
    border-radius: 4px;
}

/* Effet de survol sur l'élément principal */
.dropdown:hover .dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.2); /* Blanc très transparent */
    color: #000; /* Texte blanc au survol */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Léger glow */
}

/* Style du sous-menu */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.50); /* Blanc semi-transparent */
    backdrop-filter: blur(5px); /* Effet de flou pour le verre dépoli */
    min-width: 220px;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

/* Éléments du sous-menu */
.dropdown-content a {
    padding: 12px 16px;
    color: #2c3e50;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Dernier élément sans bordure */
.dropdown-content a:last-child {
    border-bottom: none;
}

/* Effet de survol sur les éléments */
.dropdown-content a:hover {
    background-color: rgba(91, 44, 111, 0.7); /* Violet transparent (couleur thème) */
    color: white;
    transform: translateX(5px); /* Léger déplacement */
}

/* Animation d'ouverture */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

/* Adaptation mobile */
@media (max-width: 900px) {
    .dropdown-content {
        position: static;
        background-color: rgba(255, 255, 255, 0.95); /* Moins transparent sur mobile */
        box-shadow: none;
        width: 100%;
    }
    
    .dropdown.active .dropdown-content {
        display: block;
    }
}