/* === BASE RESET === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  min-height: 100vh;
  scroll-behavior: smooth;
  font-family: Arial, sans-serif;
  background-color: white;
  color: #222;
  text-align: center;
}

/* === HEADER === */
header {
  position: auto;
  width: 100%;
  padding-top: 0;
  background-repeat: repeat-x;
  background-position: top center;
  background-size: auto 100px;
  z-index: 999;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.1);
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 2em;
  gap: 1em;
}

/* Logo encodé */
.image-base64 img { 
  width: 120px;
  height:120px;
  border-radius: 5px;
  display: block;
  z-index: 0;
}
/*logo à gauche par défaut*/
.image-base64.logo {
align-self:flex-start;
margin-top:-65px;
margin-right:auto;
}

/* Titre */
.title {
  font-size: 3em;
  color: chocolate;
  flex-grow: 1;
  text-align: center;
}

/* Drapeaux encodés */
.langues {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  justify-content: center;
}
.flag img{
  height:30px;
  width:auto;
  margin: 0 4px;
}

/* Bouton hamburger */
.menu-btn {
  font-size: 1.5em;
  background: none;
 color:blue;
  border: none;
  cursor: pointer;
  position: fixed;
  top: 200px;
  left: 5px;
  z-index: 1000;
}

/* === MENU DÉROULANT === */
.menu-container {
  position: relative;
  text-align: left;
}

.menu {
  display: none;
  position: fixed;
  top: 200px;
  left: 60px;
  width: 30%;
  background: rgb(217, 228, 240);
  box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.2);
  padding: 1em;
  z-index: 999;
}

.menu ul {
  list-style: none;
}

.menu li {
  margin-bottom: 1em;
}

.menu a {
  text-decoration: none;
  color: #222;
}

/* === CONTENU PRINCIPAL === */
#content {
  max-width: 2000px;
  margin-top: 3em;
  padding: 2em 1em 4em;
}

.centercolumn {
  background-color: white;
  padding: 1em;
}

h1, h2, h3 {
  margin-bottom: 1em;
}

h2 {
  font-size: 1.6em;
  color: #444;
}

h3 {
  font-size: 1.4em;
  margin-top: 2em;
  color: #444;
}

p {
  margin-bottom: 1em;
  text-align: justify;
  font-size: 1em;
}

/* Blocs de contenu */
.contenu-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em;
  margin-top: 2em;
  flex: 1 1 45%;
  background-color: white;
  padding: 1em;
  border-radius: 8px;
  overflow:auto;
}
.ma-section{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center; /*centre horizontalement*/
  gap:20px;
}
.ma-section img{
  max-width: 400px;
  width:100%;
  height:auto;
  display: block;
  margin:auto; /*centre l'image*/
}
.block {
  flex: 1 1 45%;
  background-color: none;
  padding: 1em;
  border-radius: 8px;
  overflow:hidden;
}

.center {
  text-align: center;
}

/* === FOOTER === */
footer {
  background-color: none;  
  color: white;
  display:inline-flex;
   
}

/* === RESPONSIVE mobile === */

@media (max-width: 768px){
.ma-section {
flex-direction:column ;  
text-align: center;
}
.ma-section img {  
  max-width: 100%;
  margin: 0 auto;
}
  }
/*@media screen and (max-width: 768px) {
  .block-img{
    display: block;
    width:85%;
    max-width: 100%
  }
}*/
  .top-bar {
    flex-direction: column;
    align-items: center;
  }

  .langues {
    justify-content: center;
  }

  .title {
    font-size: 6vw;
    margin-top: 1em;
  }
  .flexbox {
    display:flex;
    justify-content: center;
    align-items: center;
  }