@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {

  --bleu: #658574;
  /*007b8a*/

  --blanc: #ffffff;
  /*ffffff*/

  --fond-gris: #f4f4f9;
  /*f4f4f9*/

  --gris: #f5f5f5;
  /*f5f5f5*/

  --gris-fonce: #333333;
  /*333333*/

  --noir: #000000;
  /*000000*/

  --jaune: #658574;
  /*ffd700*/

  --poppins: "Poppins", sans-serif;

  --green: #658574;

}

h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: var(--poppins);

  font-weight: 700;

  line-height: 1.2;

  margin: 0;

}

body {

  font-family: var(--poppins);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.5;

  color: var(--gris-fonce);

  background-color: var(--fond-gris);

  margin: 0;

}

h1 {

  font-size: 2.5rem;

}

h2 {

  font-size: 2rem;

}

h3 {

  font-size: 1.75rem;

}

h4 {

  font-size: 1.5rem;

}

h5 {

  font-size: 1.25rem;

}

h6 {

  font-size: 1rem;

}

p,

a,

li,

span,

label,

input,

button {

  font-family: var(--poppins);

  font-size: 16px;

  font-weight: 400;

}

a {

  transition: all 0.3s;

}

#scrolltotop {

  display: none;

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 1000;

  background-color: var(--gris-fonce);

  border: 1px solid var(--gris-fonce);

  color: white;

  border: none;

  border-radius: 50%;

  width: 50px;

  height: 50px;

  text-align: center;

  font-size: 24px;

  line-height: 50px;

  cursor: pointer;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

  transition: all 0.3s;

}



#scrolltotop:hover {

  background-color: var(--blanc);

  border-color: var(--gris-fonce);

  color: var(--gris-fonce);

}



.user-account {

  background-color: var(--bleu);

  height: auto;

  display: flex;

  width: fit-content;

  justify-content: center;

  align-items: center;

  padding: 8px;

  border-radius: 50%;

  transition: all 0.3s;

}

.user-account:hover {

  background-color: var(--jaune);

}



.user-account svg path {

  fill: white;

  transition: all 0.3s;

}

.user-account:hover svg path {

  fill: var(--noir);

}

.logo-header>a>img {

  transition: all 0.3s;

}

.logo-header>a:hover>img {

  scale: 1.1;

}

header {

  border-bottom: 1px solid var(--noir);

  position: sticky;

  top: 0;

  z-index: 1000;

  background-color: var(--fond-gris);

  transition: all 0.3s;

}

header>div.container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-direction: row;

}

.container {

  max-width: 1500px;

  margin: 0 auto;

}

header nav ul {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-direction: row;

  list-style: none;

  gap: 20px;

}

header nav ul li {

  display: inline;

}

header nav ul li a {

  color: var(--noir);

  text-decoration: none;

  transition: all 0.3s;

}

header nav ul li a:hover {

  color: var(--bleu);

}



.main-menu {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  gap: 15px;

  position: relative;

}



.main-menu li {

  position: relative;

}



.main-menu a {

  text-decoration: none;

  color: #000;

  padding: 10px 15px;

  display: block;

  transition: color 0.3s;

}



.main-menu a:hover {

  color: #007bff;

}



.main-menu .sub-menu {

  list-style: none;

  padding: 0;

  margin: 0;

  position: absolute;

  top: 100%;

  left: 0;

  background: #fff;

  border: 1px solid #ddd;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  display: none;

  z-index: 10;

  min-width: 200px;

}



.main-menu .sub-menu li {

  width: 100%;

}



.main-menu .sub-menu a {

  color: #000;

  padding: 10px 15px;

}



.main-menu .sub-menu a:hover {

  background: #f8f8f8;

  color: #007bff;

}



.main-menu li:hover>.sub-menu {

  display: block;

}



.main-menu li {

  position: relative;

}



.main-menu li.menu-item-has-children>a::after {

  content: "";

  position: absolute;

  top: 50%;

  right: 0;

  transform: translateY(-50%) rotate(45deg);

  border: solid #000;

  border-width: 0 2px 2px 0;

  display: inline-block;

  padding: 4px;

  transition: transform 0.3s ease;

}



.main-menu li.menu-item-has-children:hover>a::after,

.main-menu li.menu-item-has-children>a:focus::after {

  transform: translateY(-50%) rotate(-135deg);

}



.main-menu .sub-menu {

  display: none;

  position: absolute;

  left: 0;

  top: 100%;

  background-color: #fff;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  z-index: 1000;

}



.main-menu li.menu-item-has-children:hover .sub-menu {

  display: block;

}



.main-menu .sub-menu li a {

  padding: 10px 15px;

  color: #000;

  text-decoration: none;

  display: block;

}



.main-menu .sub-menu li a:hover {

  background-color: #f0f0f0;

}



.main-menu>li:last-of-type {

  display: flex;



  justify-content: center;

  align-items: center;

  gap: 8px;

  border-radius: 10px;

  background: #007b8a;

  transition: all 0.3s;

}

.main-menu>li:last-of-type:hover {

  background: #ffd700;

}

.main-menu>li:last-of-type a {

  color: var(--blanc);

  padding: 12px 16px;

  transition: all 0.3s;

}

.main-menu>li:last-of-type:hover a {

  color: var(--noir);

}

.btn-bleu {

  background-color: var(--bleu);

  color: var(--blanc);

  border: none;

  border-radius: 10px;

  cursor: pointer;

  transition: all 0.3s;

  display: inline-flex;

}

.btn-bleu:hover {

  background-color: var(--jaune);

  color: var(--noir);

}

.btn-bleu>a {

  color: var(--blanc);

  text-decoration: none;

  padding: 12px 16px;

}

.btn-bleu:hover>a {

  color: var(--noir);

}

.bloc-ligne {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  flex-direction: row;

}

.mt-100 {

  margin-top: 100px;

}

.my-100 {

  margin-top: 100px;

  margin-bottom: 100px;

}



.mx-550 {

  max-width: 550px;

}

.btn-jaune {

  background-color: var(--blanc);

  color: var(--noir);

  border: none;

  border-radius: 10px;

  cursor: pointer;

  transition: all 0.3s;

  display: inline-flex;

  border: 1px solid var(--blanc);

}

.btn-jaune:hover {

  background-color: var(--vert);

  color: var(--blanc);

  border: 1px solid var(--blanc);

}

.btn-jaune>a {

  color: var(--noir);

  text-decoration: none;

  padding: 12px 16px;

}

.btn-jaune:hover>a {

  color: var(--blanc);

}

.elm-diff-row {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  /*gap: 150px;*/

  gap: 17%;

  width: 100%;

}

.elm-diff {

  display: flex;

  width: 282px;

  padding: 15px;

  aspect-ratio: 1 / 1;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  border-radius: 20px;

  background: var(--blanc);

}

.elm-diff svg {

  width: 96px;

  height: 96px;

  flex-shrink: 0;

}

.elm-diff p.gros {

  font-size: 3.1rem;

  font-weight: 700;

}

.elm-diff p {

  font-size: 1rem;

  color: var(--noir);

  margin: 0;

  font-weight: 600;

  text-align: center;

}

.bg-bleu.py-120 {

  background-color: var(--bleu);

  padding: 120px 0;

}

.me-auto {

  margin-right: auto;

}

.btn-lire-suite {

  background-color: var(--gris);

  color: var(--noir);

  border: none;

  border-radius: 10px;

  cursor: pointer;

  transition: all 0.3s;

  display: inline-flex;

}

.btn-lire-suite:hover {

  background-color: var(--bleu);

  color: var(--blanc);

  text-decoration: none;

}

.text-de-ref {

  padding: 40px 0px;



  background: #007b8a;

  color: var(--blanc);

}



/* .row-cards{

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 60px;

    flex-direction: row;

    flex-wrap: wrap;

}

.card {

  background-color: var(--blanc);

  border-radius: 10px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);



  transition: all 0.3s;

  width: calc(100% / 3 - 60px);

}

.card>div{

    padding: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}

.card>div>div{

    text-align: center;

} */

.bg-bleu {

  background-color: var(--bleu);

  color: var(--blanc);

  padding: 40px 0;

}

.row-cards {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 60px;

  width: 100%;

  flex-direction: row;

  flex-wrap: wrap;

}



.g-40 {

  gap: 40px;

}

.card {

  perspective: 1000px;
  /* Permet l'effet 3D */

  background-color: unset !important;

  border: 0 solid #eee !important;

  position: relative;

}

.page-template-template-partenaire .row-cards .card {

  width: calc(100% / 3 - 60px);

}

.card-inner {

  position: relative;

  width: 100%;

  height: 600px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  transform-style: preserve-3d;
  /* Nécessaire pour l'effet flip */

  transition: all 0.6s ease;

  background-color: var(--blanc);

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  border-radius: 10px;

}

.page-template-template-partenaire .card-inner {

  height: 400px;

}

.flex-center {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

}

.card:hover .card-inner {

  transform: rotateY(180deg);

  background-color: var(--jaune);

}

.card .card-inner p,

.card .card-inner h3 {

  transition: all 0.3s;

}

.card:hover .card-inner p,

.card:hover .card-inner h3 {

  color: var(--noir);

}



.card-front,

.card-back {

  position: absolute;

  max-width: calc(100% - 40px);

  max-height: calc(100% - 40px);

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

  border-radius: 10px;

  overflow: hidden;

  color: var(--noir);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

}

.card-front img {

  width: 100%;

  height: auto;

  object-fit: cover;
  border-radius: 20px;

}

.card-back {

  color: var(--blanc);

  transform: rotateY(180deg);
  /* Cache l'arrière au départ */

}



.card-back>div {

  font-size: 14px;

  line-height: 1.5;

}



.mx-auto {

  margin: 0 auto;

}

.img-txt {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 40px;

  flex-direction: row;

}

.img-txt img {

  border-radius: 10px;

  max-height: 490px;

  width: 100%;

  object-fit: cover;

}

.img-txt h2 {

  font-size: 2rem;

}

.img-txt p {

  font-size: 1.2rem;

}

.img-txt .txt {

  max-width: 50%;

  width: 100%;

}

.img-txt .img {

  max-width: 50%;

  width: 100%;

}

.img-txt.reverse {

  flex-direction: row-reverse;

}

.gr-40 {

  row-gap: 40px;

  display: flex;

  flex-direction: column;

}

.img-txt .txt>* {

  margin-left: 4%;

}

.img-txt.reverse .txt>* {

  margin-right: 4%;

  margin-left: 0;

}

/* flip card





.card-container {

  margin: 10px;

  float: left;

  position: relative;

  perspective: 600px;

}



.card-container img {

  border-radius: 10px;

}



.card-back h2 {

  position: absolute;

}



.card-back p {

  position: absolute;

  top: 50px;

  font-size: 15px;

}



.card-front h2 {

  position: absolute;

  padding: 10px;

  top: 200px;

  color: #000;

}



.card-container > .card-front {

  transform: perspective(600px) rotateY(0deg);

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

  transition: transform 0.5s linear 0s;

}



.card-container > .card-back {

  position: absolute;

  transform: perspective(600px) rotateY(180deg);

  background: #262626;

  color: #fff;

  width: 100%;

  height: 100%;

  border-radius: 10px;

  padding: 5px;

  backface-visibility: hidden;

  transition: transform 0.5s linear 0s;

}



.card-container:hover > .card-front {

  transform: perspective(600px) rotateY(-180deg);

}



.card-container:hover > .card-back {

  transform: perspective(600px) rotateY(0deg);

}



/*fin flip card */

footer {

  padding-top: 56px;

  background-color: var(--green);

}



.ligne {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

}

.ligne-droite {

  justify-content: space-between;

  align-items: center;

}

.col-gauche {

  display: flex;

  max-width: 23%;

  width: 100%;

  flex-direction: column;

  align-items: center;

  gap: 21px;

}

.col-gauche>img {

  max-width: 91px;

  width: 100%;

  object-fit: contain;

  height: 79px;

}

.row-rs {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 19px;

}

.row-rs a {

  width: 50px;

  height: 50px;

}

.row-rs a path {

  transition: all 0.3s;

}

.row-rs a:hover path {

  fill: var(--bleu);

}

.text-center {

  text-align: center;

}

.justify-content-between {

  justify-content: space-between;

}

.ligne-droite>div.col {

  width: calc(100% / 3 - 20px);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}

.ligne-droite {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  max-width: calc(70% - 60px);

  width: 100%;

}

footer ul {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}

footer .col>p.titre-footer {

  font-weight: 700;

  font-size: 1.2rem;

  margin-bottom: 10px;

}

footer ul li a {

  color: var(--gris-fonce);

  text-decoration: none;

  transition: all 0.3s;

}

footer ul li a:hover {

  color: var(--bleu);

}

.copyright {

  margin: 20px auto;

  margin-bottom: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}

.copyright a {

  color: var(--gris-fonce);

  text-decoration: none;

  transition: all 0.3s;

}

.copyright a:hover {

  color: var(--bleu);

}

.mb-80 {

  margin-bottom: 80px;

}

.partner {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  gap: 40px;

  max-width: 200px;

  width: 100%;

}

.partner>img {

  max-width: 100%;

  width: 100%;

  height: auto;

  object-fit: contain;

  border-radius: 10px;

}

.page-template-template-partenaire .card-front img {

  max-width: 100%;

  width: 100%;

  height: auto;

  object-fit: contain;

}

/* Rend les flèches noires par exemple, si elles sont invisibles */

.swiper-button-next,

.swiper-button-prev {

  color: #ffd700;

  top: 50%;

  transform: translateX(60px);

}

.swiper-button-prev {

  transform: translateX(-60px);

}



/* Assurez-vous que le conteneur du slider est bien centré */

.mySwiper {

  width: 100%;
  /* Important pour que le slider prenne la place */

  max-width: 1500px;
  /* Exemple de largeur max, ajustez si nécessaire */

  margin: 0 auto;
  /* Centrage horizontal */

  padding: 0 0px;
  /* Espace pour les flèches de navigation si elles sont en dehors */

  position: initial;

}



/* Assurez-vous que les slides prennent bien la hauteur de leur contenu */

.swiper-slide {

  height: auto;

}

.position-relative {

  position: relative;

}

.mw-100 {

  max-width: 100%;

}

footer *,

footer ul li a,

.copyright a {

  color: var(--blanc);

}

footer svg path {

  fill: var(--blanc);

}

@media screen and (max-width: 1500px) {

  .container {

    max-width: 90%;

    margin: 0 auto;

  }

}

@media screen and (max-width: 1200px) {

  .elm-diff-row {

    gap: 100px;

  }

  .ligne {

    flex-direction: column;

  }

  .center-mobile {

    align-items: center;

    text-align: center;

    width: 100%;

    max-width: 100%;

  }

  .bloc-ligne {

    flex-direction: column;

    gap: 40px;

  }

  .mx-550 {

    max-width: 100%;

  }

  .page-template-template-partenaire .row-cards {

    gap: 40px;

  }

  .page-template-template-partenaire .row-cards .card {

    width: calc(100% / 2 - 40px);

  }

}



@media screen and (max-width: 768px) {

  .elm-diff-row {

    flex-direction: column;

    gap: 20px;

  }

  .img-txt,

  .img-txt.reverse {

    flex-direction: column;

  }

  .img-txt .txt,

  .img-txt .img,

  .img-txt.reverse .txt,

  .img-txt.reverse .img {

    max-width: 100%;

  }

  .copyright {

    flex-direction: column;

    gap: 0px;

  }

  .page-template-template-partenaire .row-cards {

    gap: 30px;

  }

  .page-template-template-partenaire .row-cards .card {

    width: calc(100% / 2 - 30px);

  }

}

@media screen and (max-width: 575px) {

  .swiper-button-next,

  .swiper-button-prev {

    display: none;

  }

  h1 {

    font-size: 2rem;

  }

  h2 {

    font-size: 1.5rem;

  }

  h3 {

    font-size: 1.25rem;

  }

  .row-cards {

    gap: 20px;

  }

  .partner {

    max-width: calc(100% / 2 - 10px);

  }

  .page-template-template-partenaire .row-cards .card {

    width: 100%;

  }

}