/ * style pour le header */
.header-osmodev {
   font-family: sans-serif;
   background: white;
   border-bottom: 1px solid #24a3dc;
}

.header-top {
   width: 100%;
   top: 0;
   position: fixed;
   background: #F7F7F7;
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
   z-index: 200;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.header-top a {
   padding-right: 15px;
}

.header-left,
.header-nav,
.header-contact {
   display: flex;
   align-items: center;
   gap: 1em;
}

.header-nav a {
   font-weight: bold;
   text-decoration: none;
   color: #000;
}

.header-contact {
   border-left: 1px solid #ccc;
   padding-left: 1em;
}

/* Logo Osmodev */
#header-logo {
   transition: opacity 0.3s ease;
}

#header-logo.hidden {
   opacity: 0;
   visibility: hidden;
   height: 0;
   overflow: hidden;
}

.header-logo {
   position: relative;
   margin-top: 5em;
   margin-bottom: 1.5em;
   text-align: center;
}

.header-logo img {
   max-width: 620px;
   width: 90%;
   height: auto;
   display: block;
   margin: 0 auto;
}

#mini-logo {
   height: 40px;
   transition: opacity 0.3s ease;
}

#mini-logo.hidden {
   opacity: 0;
   visibility: hidden;
}

#main-nav {
   background: #f9f9f9;
   border-top: 1px solid #e0e0e0;
   padding: 0.5rem 0;
   text-align: center;
}

#main-nav.hidden {
   opacity: 0;
   visibility: hidden;
}

#header-nav {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   gap: 2.5rem;
}

#header-nav.hidden {
   opacity: 0;
   visibility: hidden;
}

.header-nav li a {
   text-decoration: none;
   color: #246090;
   font-weight: 500;
   transition: color 0.2s ease;
}

.header-nav li a:hover {
   color: #ff5722;
}

/* Titre */
.header-title-block {
   text-align: center;
   margin-bottom: 2em;
}

.header-title {
   font-size: 2.6em;
   color: #003366;
   margin-bottom: 0.5em;
}

.header-intro {
   font-size: 1.1em;
   color: #333;
   margin: 0 auto 1.5em;
   max-width: 720px;
}

/* style pour les infos de contact */
.contact-infos {
   list-style: none;
   margin: 10px 0;
   font-size: 1.5rem;
   line-height: 1.6;
   max-width: 600px;
   margin: 0 auto;
   color: #231f20;
}

.contact-infos li {
   align-items: center;
   display: flex;
   line-height: 1.5;
   margin: 8px 0;
   display: flex;
}

.contact-infos i {
   margin-right: 10px;
   margin-top: 3px;
   color: #24a3dc;
   min-width: 20px;
   text-align: center;
}



/* */
.right-side {
  display: flex;
  align-items: center;
  gap: 15px;
}

.language-switch a {
   margin-left: 5px;
   font-size: 1.2em;
   text-decoration: none;
}

.burger {
   display: none;
   background: none;
   font-size: 1.8em;
   border: none;
   cursor: pointer;
}

.main-nav {
   background-color: #f0f8ff;
}

.nav-links {
   list-style: none;
   display: flex;
   justify-content: center;
   gap: 30px;
   margin: 0;
   padding: 10px 0;
}

.nav-links a {
   text-decoration: none;
   color: #231f20;
   font-weight: 600;
}

.nav-links a:hover {
   color: #24a3dc;
}

/* Navigation pour mobile */
@media (max-width: 768px) {
   .nav-links {
      display: none;
      flex-direction: column;
      text-align: center;
      gap: 15px;
      padding: 10px 0;
   }

   .nav-links.open {
      display: flex;
   }

   .burger {
      display: block;
   }

   .right-side {
      gap: 10px;
   }
}

.header-secondary {
   display: none;
   justify-content: center;
   gap: 20px;
   padding: 5px 0;
   background: #f9f9f9;
   font-size: 0.9em;
}

@media (min-width: 768px) and (max-width: 1024px) {
   .header-secondary {
      display: flex;
   }

   .header-osmodev .header-contact {
      display: none; /* masqué en tablette, déplacé en dessous */
   }
}