html{
  /*background:black;*/
  /*background:#16183e;*/
  background-color:#1f235a;
  background-image: url("cie2026.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  color:white;
  font-size:1.2em;
  font-family: Helvetica;
  }
  html,body{
    margin:0;
    padding:0;
  }

  .flex {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
  }


  header{
    border-bottom : 1px solid white;
    /*display: grid;
    grid-template-columns: repeat(50, auto);
    grid-template-rows: repeat(2, auto);
    gap: 8px;*/
   
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  background: linear-gradient(to right, #32388f, #000000, #9f73af);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #00000;
  position: sticky;
  top: 0;
  width:100%;
  }
  header a{
    text-decoration: none;
  }

  .menu{
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding-left:30px;
    margin-top: 23px;
    cursor: pointer;
  }
  .menu li {
    display : inline-block;
    overflow: hidden;
    margin-right:30px;
  }

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

@media (max-width: 759px) {
  .menu-button-container {
    display: flex;
    position: absolute;
    right: 30px;
  }
  .menu {
    position: absolute;
    top: 0;
    margin-top: 77px;
    padding-left:0px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #menu-toggle:checked ~ .menu li {
    border: 1px solid #333;
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    background-color: #584061;
  }
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }
}


#logo{
    grid-row: 1 / 2;
    grid-column: 1 / 1;
    align-self: center;
  }
  #logo img{
    height:70px;
    padding-left: 15px;
  }
 #title{
     /*grid-row: 2 / 1;
     grid-column: 2 / 40;*/
     display:none;
  }

  nav a svg{
    fill:white;
  }


  main{
     padding:0 5% 50px 5%; 
     margin:auto;
     min-height: 100vh;
     width:90%;
     max-width:800px;
     text-align:center;
     /*background-color: rgba(000, 0, 0, 0.9);*/
     /*background-color: rgba(22,24,62, 0.9);*/
     background-color: rgba(31, 35, 90, 0.9);

  }
  main ul{
    padding:0;
  }
  ul li{
    list-style: none;
  }
  h1{
    color:#ffff48;
    font-size: 2.5rem;
  }
  h2{
    font-size: 2rem;
  }
  h3{
    font-size:1.5rem;
  }
  main img{
    width:100%;
  }
  section{
    text-align: center;
  }
  footer{
    text-align: center;
    border-top : 1px solid white;
    padding:10px 10px 0 10px;
    bottom:0;
  }
  a{
    color: white;
    font-weight: bold;
  }
main{ 
    h1,h2,h3,p,ul,li,a{
    padding:10px 0; 
  }
}


a.button{
  background-color:#ffff48;
  color : black;
  border-radius: 9999px;
  font-weight: weight;
  padding:1rem 2rem;  
  text-decoration:none;
  margin-bottom:5px;
    display:inline-block;
}


footer{
  background: linear-gradient(to left, #32388f, #000000, #9f73af);
}

#partenaires img{
  height : 30px;
  padding:10px;
}

iframe{
  width:100%;
  height:350px;
}