@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700&family=Urbanist:wght@400;500&display=swap');

* {
    --bleu-clair: #e6f0ff;
    --bleu-moyen: #3a8dff;
    --bleu-fonce: #1b3b6f;
    --gris-clair: #f9f9f9;
    --gris: #ccc;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

body {
    margin: 0;
    font-family: 'Urbanist', sans-serif;
    background-color: var(--gris-clair);
    color: #222;
}

body:before {
    content: "";
    display: block;
    height: 70px;
}

/*  HEADER  */

.header-container{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

header {
    background-color: var(--bleu-fonce);
    padding: 16px 32px;
    color: white;
}


nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

nav img {
    height: 50px;
    border-radius: 100%;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 16px;
    font-weight: 500;

}

nav a:hover {
    color: var(--bleu-moyen);
    transition: color 0.3s;
}

nav input[type="search"] {
    padding: 8px;
    border-radius: 20px;
    border: none;
    outline: none;
    width: 200px;
}




/* footer */
.foot{
  display : flex;
  flex-direction : row;
  justify-content : space-evenly;
  width : 100%;
  background : var(--bleu-fonce);
  color: white;
  align-items : center;
  flex-wrap : wrap;
}

footer a{
  text-decoration : none;
  color: white;
}


iframe{
  width: 100%;
  height : 90%;
  margin-top : 5px;
}

footer img{
  height : 30px;
  width : 30px;
  border-radius : 5px;
}

footer img:hover{
  opacity : 0.5;
  transition : 0.3s;
}

.footer-container{
    display : block;
}

.reseaux{
    display : flex;
    justify-content : space-evenly;
    gap : 10px;
    flex-wrap : wrap;
    list-style-type: none;
}

.centre{
    text-align : center;
}

footer a:hover{
    color: var(--bleu-moyen);
    transition: color 0.3s;
}

.bottom{
    padding-top: 20px;
    padding-bottom: 20px;
}