* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  /*box-shadow: 0 0 0 3px red inset;*/
  font-family: Montserrat, sans-serif;
  /*scroll-behavior: smooth;*/
}
/*******  CRÉATION DES VARIABLES  POUR LES COULEURS ******/
:root {
  --backgroundCube1: #d3d3d3;
  /* --backgroundCube2: #694087; */
  --backgroundCube2: #063c76;
  --backgroundCube3: #8e8e8e;
  --backgroundCube4: #777777;
  /* --newcolorblue: #004a99; */
}
body {
  min-height: 100vh;
  background-color: #f2f2f2;
  overflow-x: hidden;
}
header {
  width: 100%;
  height: 180px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  z-index: 99;
}
/*********      NAV BAR HEADER      *********/
nav.navbar {
  width: 100%;
  max-width: 100vw; /* Evite le debordement*/
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--backgroundCube3);
  transition: 0.8s ease-in-out;
}
.content-nav-bar {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-around;
}
/*************  CONTAINER BURGER    ********/
.container-burger {
  width: 50%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
}
.content-burger {
  width: 80px;
  height: 50px;
  position: relative;
  top: 0;
  /* left: 10px; */
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0px 5px;
  cursor: pointer;
}
.burger-content {
  width: 75px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-right: 5px;
}
.burger {
  width: 35px;
  height: 2px;
  position: relative;
  background-color: var(--backgroundCube1);
  border: none;
  transition: 0.4s ease-in-out;
}
.burger.top {
  width: 35px;
  height: 2px;
  display: block;
  border: none;
  transform: translateY(-10px);
}
.burger.middle {
  width: 35px;
  height: 2px;
  display: block;
  border: none;
}
.burger.bottom {
  width: 35px;
  height: 2px;
  display: block;
  border: none;
  transform: translateY(10px);
}
.burger.top.open {
  transform: translateY(4px) rotate(135deg);
  transition: 0.4s ease-out;
}
.burger.middle.open {
  opacity: 0;
  transition: 0.4s ease-out;
}
.burger.bottom.open {
  transform: translateY(1px) rotate(-135deg);
  transition: 0.4s ease-out;
}

.title-burger {
  width: 50px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-nav-logo {
  width: 50%;
  height: 100%;
}
.content-logo {
  width: 150px;
  height: 75px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background: url(Assets/svg/logo\ BtoYou_Entier-blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.container-home-svg {
  width: 100px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
  cursor: pointer;
  color: black;
  transition: color 1.5s ease-in-out;
}
/* .container-home-svg.hovered {
  color: var(--backgroundCube1);
} */
.icon-home {
  width: 30px;
  height: 30px;
  /* color: black; */
}
/************** NAV SIDE BAR    ***********/
.container-nav-side {
  width: 300px;
  position: absolute;
  top: 185px;
  left: -8px;
  transform: translateX(-300px);
  transition: 0.5s ease-in-out;
}
.container-nav-side.open-side {
  transform: translateX(10px);
  z-index: 1;
}
.container-nav-side > ul {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--backgroundCube2);
}
.container-nav-side > ul > li {
  width: 100%;
  height: 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 200;
}
.container-nav-side > ul > li > a {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  text-align: left;
  color: var(--backgroundCube1);
  padding-left: 5px;
  transition: 1s;
}
.container-nav-side > ul > li > a:hover {
  background-color: var(--backgroundCube3);
  /*transition: 0.4s;*/
}
/***********    PANEL TOP       ********/

.panel-top {
  width: 100%;
  max-width: 100vw; /* Evite le debordement*/
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--backgroundCube2);
  z-index: 99;
}

/***********    SEARCH CONTAINER       ********/
.search-container {
  width: 100%;
  max-width: 100vw; /* Evite le debordement*/
  height: 100px;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: var(--backgroundCube2);
}
.container-boutons {
  width: 360px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 5px;
  border: 2px solid var(--backgroundCube3);
}
/**********   STYLE BOUTON INPUT ET SELECT  ****/
.search {
  width: 150px;
  height: 28px;
  border-radius: 3px;
  /*border-color: none;*/
  border-style: none;
  padding-left: 4px;
}
.icon-search {
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--backgroundCube1);
  width: 30px;
  height: 30px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.tri-resultats {
  width: 360px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 20px;
  border-radius: 5px;
  border: 2px solid var(--backgroundCube3);
}
.title-resultats {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--backgroundCube1);
}
/*************  CONTAINER RESULTAT SEARCH   **************/
.countresultat {
  width: 20px;
  height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 3px;
}

/***********   MAIN-WRAPPER MAIN SECTION & SECTIION CONTAINER JOBS       ********/
.main-wrapper {
  max-width: 1480px; /* Largeur max sur grands écrans */
  margin: 0 auto; /* Centre horizontalement */
  width: 100%; /* Pour être fluide en dessous de 1200px*/
  /*padding: 0 1rem; /*Espace sur les côtés (utile pour petits écrans) */
}
section {
  width: 100%;
  height: auto;
}
.main-section {
  width: 100%;
  min-height: 100vh;
  position: relative;
  /* top: 180px; */
  background-image: url(/Assets/laptop-3196481_1280.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow-y: scroll;
}
.container-jobs {
  width: 100%;
  min-height: 300px;
  position: relative;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  top: 185px;
  display: flex;
  overflow: hidden;
  transition: min-height 2.8s ease;
  padding: 15px 0px;
}
.container-job {
  max-width: 100vw;
  height: 100%;
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 10px;
  margin-left: 15px;
}
.container-detail-job {
  width: 100%;
  max-width: 661px; /* Limite la largeur maximal de 600px même si l'élément parent est plus large*/
  min-height: 600px; /* Hauteur minimale pour eviter l'effondrement*/
  /*margin: 15px auto; /* Centre l'element à l'horizontalement*/
  display: flex;
  flex-direction: column;
  align-items: start;
  background-color: var(--backgroundCube4);
  gap: 10px;
  overflow-y: auto;
}
/***********    On crée une Class pour Afficher les Obejt(job)**/
.dynamic-div {
  width: 615px;
  min-height: 212px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  border: 3px solid var(--backgroundCube2);
  background: url(Assets/svg/logo\ BtoYou_Entier-blue.svg);
  background-repeat: no-repeat;
  background-position: 480px -17px;
  background-size: 120px 120px;
  background-color: white;
  padding: 0px 0px 5px 5px;
}
.dynamic-div h4,
.dynamic-div h2 {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.7rem;
}

/* DIV JOB STYLISE LE MESSAGE: Aucune offre correspond à votre recherche */
.job {
  width: 580px;
  height: 240px;
  min-height: 240px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 5px;
  padding: 5px;
  background-color: var(--backgroundCube4);
  color: black;
  border: 2px solid var(--backgroundCube1);
  gap: 10px;
}
.job p {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--backgroundCube1);
}
.job-text {
  width: 560px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: start;
  justify-content: space-around;
  flex-direction: column;
}
.job-text p {
  font-size: 1.1rem;
  font-weight: 300;
}
.learn-more {
  text-decoration: none;
  color: black;
}
.learn-more p {
  font-size: 1.2rem;
  font-weight: 500;
}
.learn-more:hover {
  color: var(--backgroundCube1);
}
/* STYLE DU STICKER "AJOUTER FAVORIS" */
.btn-sticker {
  width: 70px;
  height: 70px;
  position: relative;
  top: -50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: var(--backgroundCube1);
  color: black;
  font-size: 0.8rem;
  font-weight: 300;
  padding: 5px 5px;
  margin-right: 4px;
  cursor: pointer;
  transition: 0.6s ease-in-out;
}
.btn-sticker:hover {
  background-color: rgba(159, 156, 156);
}

/******** PANEL RIGHT ***********/
.panel-right {
  /* max-width: 100vw; */
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: start;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  margin-right: 15px;
}
.container-favoris {
  min-width: 280px;
  height: 390px;
  top: 100px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--backgroundCube3);
  margin-top: 150px;
}
.content-favoris {
  width: 100%;
  height: 390px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content-list-favoris {
  width: 100%;
  height: 390px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.title-favoris {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 2px solid var(--backgroundCube2);
}
.title-favoris h2 {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.7rem;
}
.dating,
.services h2 {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.7rem;
}
.dating h2 {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.7rem;
}
.div-matrice-favoris {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--backgroundCube2);
  padding: 0px 5px;
}
.div-favoris {
  width: 345px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.div-favoris h6 {
  font-size: 0.6rem;
  font-weight: 500;
}
a.openjob {
  width: 20px;
  height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  margin-left: 5px;
}
a.openjob::after {
  content: "\f06e";
  width: 25px;
  height: 25px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0px;
  left: 0px;
  border-radius: 50%;
  font-family: "Font Awesome 6 Free";
  font-size: 0.8rem;
  font-weight: 600;
  background-color: var(--backgroundCube1);
  color: black;
}
button.remove-favoris {
  width: 24px;
  height: 24px;
  position: relative;
  background-image: url(Assets/svg/trash-2.svg);
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  cursor: pointer;
  margin-left: 5px;
}

.box-container {
  width: 300px;
  height: 240px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
  flex-direction: column;
  padding: 5px 5px;
  background-color: white;
}
.line-box-decoration {
  width: 280px;
  display: block;
  position: relative;
  border: 2px solid white;
}

/************ CUSTOM FENETRE ALERTE FAVORIS  */
.custom-alerte {
  position: fixed;
  width: 400px;
  height: 300px;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  background-color: var(--backgroundCube3);
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  display: none;
  /* display: block; */
  z-index: 1200;
  animation: fadeInOut 4s forwards;
}
.custom-alerte::after {
  width: 100%;
  height: 100%;
  position: relative;
  content: "Cette offre est déjà dans votre liste";
  text-align: center;
  transform: translate(0%, 50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--backgroundCube1);
}
/* Pour afficher et masquer l'animation */
@keyframes fadeInout {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  10%,
  90% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}
/* CONTAINER FAVORIS */
.box-container.favoris {
  width: 375px;
  height: 390px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 5px;
  border: 3px solid var(--backgroundCube2);
}
/* CONTAINER PRISE RDV TELEPHONIQUE */
.box-container.dating {
  width: 375px;
  height: 390px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.container-input-dating {
  width: 100%;
  height: 295px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.content-input-dating {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

input.style-input-rdv {
  width: 180px;
  height: 30px;
  border: none;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
}

label.stylelabeldate {
  color: var(--backgroundCube1);
}

.container-btn-confirmation {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.btnRdv {
  all: unset; /* Réinitialise le btn pour Safari)*/
  appearance: none;
  -webkit-appearance: none;
  width: 75px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  margin: 5px;
}
.content-obligatoire {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: start;
  justify-content: left;
  margin-top: 10px;
  color: var(--backgroundCube1);
  font-size: 1rem;
  font-weight: 300;
}
/* CONTAINER INFOS SERVICES */
.box-container.services {
  width: 375px;
  height: 700px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  border-radius: 5px;
  border: 3px solid var(--backgroundCube2);
}
.container-service {
  width: 150px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  /* background-color: var(--backgroundCube1); */
}
ul.content-service {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}
li.body-service {
  width: 150px;
  height: 150px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px solid var(--backgroundCube2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.body-service a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px solid var(--backgroundCube1);
  text-decoration: none;
  color: black;
}
.header-service {
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}
.lettre-cv {
  background-image: url(Assets/Icons/letter.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.entretien-job {
  background-image: url(Assets/Icons/entretien.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.labor-market {
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
  background-image: url(Assets/Icons/jobs.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.cpf-account {
  background-image: url(Assets/Icons/cpf.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.text-service {
  width: 100%;
  height: 65px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px;
  background-color: var(--backgroundCube1);
}
/************   FOOTER - INJECTÉ AVEC FETCH (fichier css footer-btoYou.css     *********/

.container-fiche-job {
  width: 100%;
  height: 750px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* .container-btn{
  width: 300px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
} */
.line-decoration {
  width: 95%;
  display: block;
  position: relative;
  border: 1px solid white;
}
.container-main-fiche {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--backgroundCube1);
  /*box-shadow: 0 0 0 3px red inset;*/
}
.content-main-fiche {
  width: 75%;
  height: 600px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-around;
  background-color: var(--backgroundCube3);
  margin-right: 2px;
}
.head-fiche {
  width: 100%;
  height: 150px;
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: start;
  justify-content: center;
  background-color: var(--backgroundCube2);
}
.body-fiche {
  width: 100%;
  height: 450px;
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: start;
  justify-content: center;
  background-color: var(--backgroundCube4);
}
.terms-contrat {
  width: 25%;
  height: 600px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: var(--backgroundCube3);
}

/**************     STYLE DES BOUTONS BANNER      *****/
.btn.postuler {
  width: 160px;
  height: 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  transition: 0.6s;
  cursor: pointer;
}
.btn.postuler::before {
  content: "\f138";
  font-family: "Font Awesome 6 Free";
  width: 60px;
  height: 60px;
  position: absolute;
  top: 15px;
  left: -5px;
  font-size: 1.5rem;
  font-weight: 600;
  /*border-width: 1px;*/
  transition: 0.6s;
  cursor: pointer;
}
.btn {
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  /*border-width: 1px;*/
  transition: 0.6s;
  cursor: pointer;
}
.btn:hover {
  background-color: var(--backgroundCube3);
  border-width: 0px;
}
.btn a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: black;
}
.btn.for-friend::after {
  content: "Envoyer à un Ami";
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -1px;
  display: none;
  align-items: center;
  justify-content: space-around;
  background-color: var(--backgroundCube3);
  padding: 4px;
  cursor: pointer;
  transition-delay: 0.5s;
  transition: 0.6s;
}
.btn.for-friend:hover::after {
  display: flex;
  /*transform: translateX(85px);*/
}
.btn.favoris::after {
  content: "Ajouter à ma liste";
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -1px;
  display: none;
  align-items: center;
  justify-content: space-around;
  background-color: var(--backgroundCube3);
  padding: 4px;
  cursor: pointer;
}
.btn.favoris:hover::after {
  display: flex;
}
.btn.closed-modale {
  font-size: 1rem;
  font-weight: 600;
}

/************   FOOTER INJECTE PAR FETCH(Fichier cookieManager.js)*********/

/* === MOBILE PORTRAIT (0 → 480px) === */
@media screen and (max-width: 480px) {
  /*  Container Job*/
  .container-jobs {
    flex-direction: column;
    height: auto;
    align-items: center;
    margin: 0;
  }
  .container-job {
    margin-left: 0;
  }
  .dynamic-div {
    width: 400px;
    background-position: 287px -16px;
  }
  .panel-right {
    height: auto;
    margin-bottom: 30px;
  }
}
/* === MOBILE PAYSAGE / PETITE TABLETTE (481 → 600px) === */

@media screen and (min-width: 481px) and (max-width: 600px) {
  .container-jobs {
    flex-direction: column;
    align-items: center;
    height: auto;
  }
  .container-job {
    width: 100%;
    margin-left: 0;
  }
  .panel-right {
    width: 100%;
    height: auto;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .dynamic-div {
    width: 420px;
    background-position: 287px -16px;
  }
}
/* ===  PETITE TABLETTE (601 px -> 768 px) ===*/
@media screen and (min-width: 601px) and (max-width: 768px) {
  .container-jobs {
    flex-direction: column;
    align-items: center;
    height: auto;
  }
  .dynamic-div {
    width: 485px;
    background-position: 363px -16px;
  }
}
/* === TABLETTE (769 → 900px) === */
@media screen and (min-width: 770px) and (max-width: 900px) {
  .container-jobs {
    flex-direction: column;
    align-items: center;
    height: auto;
  }
  .dynamic-div {
    width: 525px;
    background-position: 363px -16px;
  }
}

/* === TABLETTE (901 → 1024px) === */
@media screen and (min-width: 901px) and (max-width: 1024px) {
  .main-title-parallax-2.show-title {
    transform: translateY(210px);
  }
  /* Mets ici les styles tablette spécifiques */
}

/* === DESKTOP (1025 → 1440px) === */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  /* Mets ici les styles desktop standard */
  .container-jobs {
    flex: 1;
  }
}

/* === GRAND DESKTOP (>1440px) === */
@media screen and (min-width: 1441px) and (max-width: 1480px) {
  nav.navbar {
    width: 100%;
    display: flex;
  }
}

/****** FOOTER RESPONSIVE ******/

/************   FOOTER INJECTE PAR FETCH(Fichier cookieManager.js)*********/