.de {
margin: 0;
  height: 100%;
  background: radial-gradient(circle at center, #39a9e6, #3918bc);
  transition: background 0.1s;
  position: absolute;
  z-index: 0;
  width: 100%;
  top:0;
  left:0;

}

#degradeDiv {
  position: relative;
}





.title span {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.title span::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 21px;
    background: #3984db;
    animation: lineAnimation 4s infinite;
    z-index: -1;
}

@keyframes lineAnimation {
    0% {
        width: 1px;
        left:-3%;
    }
    50% {
        width: 50%;
        left:-3%;
    }
    100% {
        width: 1px;
        left:103%;
    }
}




.value-display_6,
.value-display_5,
.value-display_4 {
    position: absolute;
    top: -38px;
    transform: translateX(-50%);
    z-index: -1;
    background-color: #39aae6;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 40px;
    color: #fff;
    font-family: "stitle";
    font-weight: inherit;
}

.step-4, .step-5, .step-6  {
  margin: 0 auto;
  width:80%;
}



#contents .inner h2.title,
.flex_5 .item h4.title,
.techno .techno_content h3.name,
.inner h3.subtitle,
.contain_gris h3.subtitle,
.btn_,
.swiper-slide h4 {
font-weight: inherit;
line-height: 1.2;
}

#header.sticky {

  z-index: 256;
}

body {
  font-size: 12px;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}
:root {
--swiper-theme-color: #39a9e6 !important;
}

.flex_5 { 
  display:flex;
  gap: 30px;
  justify-content: center;
}

.flex_5 .item h4.title {
  font-family: 'stitle';
  margin-bottom: 15px;
  font-size: 28px;
  color: #39aae6;
}

.flex_5 .item {
  text-align: center;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0;
}

.flex_5 img {
  width: 120px;
  margin-bottom: 1rem;
}

/* .flex_5 .item:nth-child(1) img {
  height:89px;
} */




.swiper-slide {
margin-bottom: 42px;
}

.swiper-pagination-bullet {
width: 12px !important;
height: 12px !important;
}

/* SIMULATEUR */

.ariane_ {
align-items: center !important;
justify-content: center !important;

flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin: 0 0 1rem;
display: none;
}

.ariane_.active {
  display: flex;
}

.step_ {
display: flex;
align-items: center;
}

.step_.step5 .bar {
width: 90px;
border-radius: 0 5px 5px 0;
}

.step-9 h3 {
font-size: 50px;
font-family: "stitle";
font-weight: inherit;
margin: 0 0 2rem;
}

.step-9 p {
color: #333333;
}
.step-9 h4 {
font-size: 35px;
color: #333333;
margin-top: 4rem;
font-family: "stitle";
font-weight: inherit;
}

.step-9 .col_3 {
display: flex;
font-size: 16px;
gap: 2rem;
margin: 2rem;
border: 1px solid #d1e7f2;
border-radius: 38px;
padding: 2rem;
}

.step-9 .col_3 span {
color: #39aae6;
display: block;
margin: 0 0 0.5rem;
}

.step-9 a {
  text-decoration: underline;
  color:#333333;
}

.step-9 a:hover {
  color:#39aae6;
}


.step_ .round {
width: 40px;
height: 40px;
color: #39aae6;
text-align: center;
border-radius: 40px;
margin-left: -10px;

background-color: #d1e7f2;
z-index: 2;
transition: all ease 0.5s;
line-height: 39px;
padding: 0;
font-family: "stitle";
font-weight: inherit;
}

.step_.active .round {
background: #252d57;
color: white;
}

.step_.active .bar {
background-color: #252d57;
}

.step_ .bar {
height: 16px;
width: 150px;
margin-left: -10px;
border: solid 1px #f1f8fb;
transition: all ease 0.5s;
background-color: #f1f8fb;
}

fieldset {
display: flex;
flex-wrap: wrap;
gap: 1rem;
text-align: left;
border: 1px solid #d1e7f2;
border-radius: 38px;
padding: 2rem 5rem;
width: 80%;
margin:0 auto;
}

.header_ {
width: 100%;
text-align: center;
margin: 0 0 1rem;
}

.check_ {
display: flex;
}

fieldset .champ {
flex: 1 1 0;
}

fieldset div:nth-child(4) {
flex: 100% 1 0;
}

.mention {
    color: #919191;
    font-size: 14px;
    display: flex;
    line-height: 1.2;
    align-content: center;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
}
.pb-1 {
  padding-bottom: 1rem !important;
}
.my-2 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mx-2 {
margin-left: 0rem;
margin-right: 1rem;
}

#_sim input:not(#recevoir_email):not(.form-range) {
width: 100%;
border: 1px solid #919191;
border-radius: 30px;
color: #919191;
font-size: 17px;
padding: 0.5rem 2rem;
}

#_sim input:focus-visible {
outline: none;
text-shadow: none;
}


#_sim #_env_form, #_sim ._env_form {
padding: 12px 30px;
color: #ffffff;
background-color: #3f55fd;
border: 1px solid #3f55fd;
border-radius: 35px;
font-size: 28px;
font-weight: inherit;
line-height: 1;
text-decoration: none;
transition: all 0.2s;
width: 173px;
justify-content: center;
}

#_sim #_env_form:hover, #_sim ._env_form:hover {
background-color: #ffffff;
border: 1px solid #3f55fd;
color: #3f55fd;
}

#_sim h2 {
font-size: 35px;
font-family: "stitle";
font-weight: inherit;
margin: 0 auto 10px;
}

.step h3 {
font-weight: 300;
font-size: 35px;
padding: 0 4rem;
}
.step {
display: none;
}
.step.active {
display: flex;
}

.step-2 {
display: none;
}

.nav_ {
display: flex;
padding: 2rem 0 0 0;
align-items: center;
min-height: 86px;
}

.container__ { margin:2rem 0; }

.nav_ div:nth-child(2) {
color: #39aae6;
font-size: 10px;
text-align: center;
flex-grow: 2;
padding: 0 6rem;
line-height: 1.2;
}

.container__2 {
width: 1000px;
position: relative;
z-index: 23;
margin: 0 auto;
background-color: white;
padding: 2rem;
}

.step {
min-height: 390px;
justify-content: center;
flex-direction: column;
}

.step .choix_content {
display: flex;
gap: 30px;
flex-wrap: wrap;
align-items: center;
}

.step.step-1 .choix_:nth-child(4) {
flex-basis: 100%;
}

.step.step-1 .choix_:nth-child(4) label {
height: 70px;
min-height: inherit;
}

.step.step-1 .choix_:nth-child(4) {
height: 70px;
min-height: inherit;
}

.step.step-1 .choix_:nth-child(4) div {
flex-basis: 100%;
height: 70px;
min-height: inherit;
padding: 1rem;
display: block;

text-align: center;
text-decoration: underline;
font-size: 28px;
}

.step.ouinon .choix_content {
justify-content: center;
margin-top: 3rem;
}

.step.ouinon .choix_ {
position: relative;
display: flex;
border-radius: 28px;
}

.step:not(.ouinon) .choix_ {
flex: 1 1 0;
height: 300px;
position: relative;
border-radius: 28px;
overflow: hidden;
}

.choix_ img {
position: absolute;
bottom: 0;
}

img.milieu {
left: 60px;
}

img.left {
left: 0;
}
img.right {
right: 0;
}

.step-2 img.left {
left: 16px;
}
.step-2 img.right {
right: 16px;
}

img.w100 {
width: 200px;
}
img.w80 {
width: 160px;
}

.choix_ input {
opacity: 0;
position: absolute;
margin: 0 !important;
top: 0;
}

.choix_ div {
color: #fff;
display: flex;
width: 100%;
padding: 2rem;

font-size: 36px;
cursor: pointer;
line-height: 1.3;
position: relative;
text-align: left;
color: #39aae6;
font-family: "stitle";
font-weight: inherit;
height: 300px;
position: absolute;
top: 0;
left: 0;
}

.step .choix_ label {
cursor: pointer;
}

.ouinon label {
border-radius: 28px;
padding: 1.5rem 3rem;
}

.step:not(.ouinon) .choix_ label {
width: 100%;
height: 300px;
position: relative;
z-index: 11;
display: block;
}

input[type="radio"]:checked ~ div,
.ouinon input[type="radio"]:checked ~ label {
color: #ffffff;
background-color: #39aae6;
}

input[type="radio"]:checked ~ img {
filter: brightness(0) invert(1);
}



.intro_ {
display: flex;
flex-direction: column;
min-height: 70vh;
justify-content: space-around;
}



#nextBtn.active,
#prevBtn.active,
#_env_form.active, ._env_form.active  {
display: inline-flex;
}
#nextBtn,
#prevBtn,
#_env_form,
._env_form {
display: none;
}

._degrade { position: relative;}

._degrade h1 {
font-family: "stitle";
font-size: 58px;
color: #fff;
font-weight: inherit;
margin-bottom: 3rem;
padding: 0 1rem;
}

.txt-white {
color: #ffffff;
}

._degrade h1 span {
font-family: "s4";
font-size: 58px;
color: #fff;
font-weight: inherit;
}

.new-content .intro_ p {
  font-size: 12px;
  padding:0 1.5rem;
  text-decoration: none;
}

.new-content .intro_ p a {
  text-decoration: none;
}


.inner #simulateur_ h3.subtitle {
margin: 1rem;
}



#simulateur_ p,
#simulateur_ span {
user-select: none;
}
#simulateur_ {
width: 1000px;
margin: 0 auto;
}
/* Style pour le track du slider */
input[type="range"] {
-webkit-appearance: none; /* Supprime le style par défaut */
width: 100%; /* Largeur du slider */
height: 8px; /* Hauteur du track */
background: transparent; /* Couleur du track */

outline: none; /* Supprime le contour */
}

input[type="range"]::-webkit-slider-runnable-track {
width: 100%; /* Largeur du slider */
height: 8px;
cursor: pointer;
background: transparent;
}

input[type="range"]::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
background: transparent;
border: none;
}

input[type="range"]::-ms-track {
width: 100%;
height: 8px;
cursor: pointer;
background: transparent; /* Nécessaire pour Edge */
border-color: transparent;
color: transparent;
border: none;
}

/* Style pour le thumb du slider */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; /* Supprime le style par défaut */
width: 100px;
height: 100px;
background: transparent; /* Couleur du thumb */
border-radius: 50%; /* Coins arrondis */
cursor: pointer; /* Curseur pointer */
box-shadow: none; /* Ombre */
border: none;

margin-top: -46px; /* Ajuste la position verticale */
}

input[type="range"]::-moz-range-thumb {
width: 100px;
height: 100px;
background: transparent;
border-radius: 50%;
cursor: pointer;
box-shadow: none;
border: none;
}

input[type="range"]::-ms-thumb {
width: 100px;
height: 100px;
background: transparent;
border-radius: 50%;
cursor: pointer;
box-shadow: none;
border: none;
}

#simulateur_ hr {
position: absolute;
width: 100%;
height: 18px;
background-color: #e4eff5;
border: none;
top: -6px;
z-index: -2;
border-radius: 38px;
}

.content_range {
position: relative;
width: 100%;
margin: 4rem auto 2rem;
}



#contents .fullscreen .inner  {
  padding: 0 !important;
}

.step-4 .content_range::before {
content: "<20";
position: absolute;
left: -48px;
font-family: "stitle";
font-size: 28px;
top: -2px;
}

.step-4 .content_range::after {
content: ">50";
position: absolute;
right: -68px;
font-family: "stitle";
font-size: 28px;
top: -2px;
}

.step-5 .content_range::before {
content: "0%";
position: absolute;
left: -48px;
font-family: "stitle";
font-size: 28px;
top: -2px;
}

.step-5 .content_range::after {
content: "100%";
position: absolute;
right: -68px;
font-family: "stitle";
font-size: 28px;
top: -2px;
}



.step-6 .content_range::before {
content: "5";
position: absolute;
left: -48px;
font-family: "stitle";
font-size: 28px;
top: -2px;
}

.step-6 .content_range::after {
content: ">50";
position: absolute;
right: -48px;
font-family: "stitle";
font-size: 28px;
top: -2px;
}

/* Nouveau contenu (caché par défaut) */
.new-content {
display: none;
margin-top: 20px;
font-size: 16px;
}

.fullscreen_intro .new-content {
display: block; /* Affiche le contenu lorsque fullscreen est activé */
}
.fullscreen_intro .content {
display: none; /* Affiche le contenu lorsque fullscreen est activé */
}

.fullscreen_intro .new-content .container__ {
display: none;
}

.fullscreen_intro.fullscreen .new-content .container__ {
display: block;
}


.fullscreen_intro.fullscreen .new-content .intro_ {
display: none;
}

.fullscreen_intro {
min-height: calc( 100vh - 88px);
/* min-height: 100vh; */
background-image: url("../images/FOND_simulateur.jpg") !important;
background-size: cover !important;
display: flex;
align-items: center;
}




@media (max-width: 1023px) {
  .fullscreen_intro {
    min-height: calc( 100vh - 56px);
  }
}


.contain_gris .form .consent {
padding-top: 60px;
font-size: 12px;
text-align: left;
margin: 0 auto;
max-width: 880px;
line-height: 1.4;
}

._reseau h2 {
margin-bottom: 50px !important;
}

.swiper {
width: 100%;
height: 100%;
position: relative;
}

.swiper-button-next,
.swiper-button-prev {
  z-index: 234 !important;
}

.swiper-wrapper {
align-items: flex-end;
}


@media (min-width: 1024px) {
.swiper { overflow: visible !important; }
.swiper-button-next, .swiper-button-prev {
  top: -120px !important;
}

.swiper-button-prev {
  left: 110px !important;
}

.swiper-button-next {
  right: 110px !important;
}
}


@media screen and (min-width: 1024px) and (max-width: 1150px) {
  .swiper-button-prev { left: 20px !important; }
  .swiper-button-next { right: 20px !important; }
}





@media (min-width: 779px) {

.swiper::before {
content: "";
width: 8%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(
90deg,
rgb(244, 244, 244, 1) 0%,
rgba(255, 255, 255, 0) 100%
);
z-index: 12;
}

.swiper::after {
content: "";
width: 8%;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(
90deg,
rgb(255, 255, 255, 0) 0%,
rgba(244, 244, 244, 1) 100%
);
z-index: 12;
}

}

.swiper-slide img {
width: 100%;
}
.swiper-slide h4 {
font-family: "stitle";
font-size: 22px;
margin: 0 auto 30px;
color: #333;
width: 100%;
line-height: 1.3;
}

.swiper-slide .container {
text-align: center;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
}

.swiper-slide h4 span {color: #39aae6;}

p.btn {
padding: 9px 17px;
color: #fff;
background-color: transparent;
border-radius: 35px;
font-family: "stitle";
font-size: 18px;
display: inline-block;
font-weight: inherit;
line-height: 1;
border: 1px solid #fff;
margin: 20px auto 0;
transition: all 0.3s;
}

.contain_gris .form {
border-top: none;
}

#nextBtn {
padding: 12px 30px;
color: #ffffff;
background-color: #47e2b6;
border: 1px solid #47e2b6;
border-radius: 35px;
font-size: 28px;
font-weight: inherit;
line-height: 1;
text-decoration: none;
transition: all 0.2s;
width: 173px;
justify-content: center;
}

#nextBtn:hover {
  padding: 12px 30px;
  color: #47e2b6;
  background-color: #ffffff;
  border: 1px solid #47e2b6;
  
}

#nextBtn:hover img {
  display: none;
}

#nextBtn img {
margin: 4px 0 0 4px;
}


#btn_intro {
  padding: 12px 30px;
  color: #ffffff;
  background-color: #47e2b6;
  border-radius: 35px;
  font-size: 28px;
  font-weight: inherit;
  line-height: 0.8;
  text-decoration: none;
  display: inline-flex;
  width:227px;
  height:52px;
  justify-content: center;
  transition: all 0.2s;
  align-items: center;
  }
  
  #btn_intro:hover {
    padding: 12px 30px;
    color: #47e2b6;
    background-color: transparent;
    border: 1px solid #47e2b6;
    line-height: 0.8;
  }
  #btn_intro:hover img {
    display: none;
  }
  
  
  #btn_intro img {
    margin: 2px 0 0 4px;
  }



#prevBtn {
padding: 8px 16px;

background-color: transparent;
border-radius: 35px;
color: #333;
border: 1px solid #333;
font-size: 18px;
font-weight: inherit;
line-height: 1;
text-decoration: none;
justify-content: center;
width:104px;
height:38px;
transition: all 0.2s;
}

#prevBtn:hover {
  color: #000000;
  border: 1px solid #000000;
}


#prevBtn:hover img {
display:none
}

#prevBtn img {
margin: 1px 4px 0 0;
width: 18px;
}


.btn_ {
padding: 12px 30px;
color: #333;
background-color: #ffffff;
border-radius: 35px;
font-family: "stitle";
font-size: 28px;
display: inline-block;
font-weight: inherit;
line-height: 1;
text-decoration: none;
}

.contain_gris .form .consent button {
border: 2px solid #000000;
font-family: "stitle";
letter-spacing: 0;
transition: 0.2s all;
padding: 12px 30px;
color: #fff;
border-radius: 35px;
font-size: 18px;
font-weight: inherit;
line-height: 1;
width: 173px;
justify-content: center;
}

.txt-center {
text-align: center;
}

.techno {
position: relative;
overflow: hidden;
}
.techno:hover .img_ {
transform: scale(1.1);
}
.techno:not(.t1):hover p.btn {
  background-color: #ffffff;
  color: #333333;
}


a .btn {
  margin-left:0.5rem;
  margin-right: 0.5rem;
}
a .btn:hover {
  background-color: #ffffff;
  color: #333333;
}

.techno .techno_content a.btn {
position: absolute;
top: 0;
left: 0;
z-index: 11;
width: 100%;
height: 100%;
border: none;
margin: 0;
}

.techno .techno_content a.btn:hover {
background-color: transparent;
}

.techno.t1 {
background: none;
}

.techno .techno_content h3.name,
.techno .techno_content p {
position: relative;
z-index: 10;
}
a.view {
    display: inline-block;
    padding: 0 10px;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
    background: #333;
    margin-left: 20px;
    cursor: pointer;
}
.img_ {
width: 100%;
height: 300px;
position: absolute;
top: 0;
left: 0;
z-index: 0;
object-fit: cover;
transition: all 600ms;
}

#contents ._degrade .inner h2.title {
color: #ffffff;
font-size: 40px;
position: relative;
  z-index: 1;

}


._degrade:hover .je_teste {
  transition: all 300ms;
 box-shadow: 12px 12px 2px 1px rgba(30, 30, 121, 0.2);
 color:rgb(30, 30, 121, 0.8);
}

.je_teste { position: relative; z-index: 1;}
.all_ovver { position: absolute; top:0; left:0; width:100%; height:100%; z-index: 1;}

#contents .fullscreen .inner h2.title {
text-align: left;
}

._degrade {
background: #39aae6;
background: linear-gradient(
90deg,
rgba(57, 170, 230, 1) 0%,
rgba(57, 24, 188, 1) 100%
);
text-align: center;
}

#contents ._degrade .inner {
background-color: transparent !important;
}
@media (min-width: 1025px) {

.flex_5 .item:first-child {
  width: 316px;
}
.flex_5 .item {
  width: 250px;
}
.flex_5 img {
  width: auto;
  height:89px;
  }
}
sup {
top: -0.7em;
font-size: 60%;
}




.grid_2 {
  grid-column-gap:30px;
}





@media (min-width: 1440px) {
#contents .inner {
width: 1440px;
}
}

@media (min-width: 1024px) {
#header .gnbWrap .menu .depth_01 {
color: #fff;
}

}
@media screen and (min-width: 768px) and (max-width: 1440px) {
  #contents .inner {
    width: 94%;
  }
}

.step.step-2 {
  justify-content: flex-start;
}

.mention label {
  cursor: pointer;
}

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

  .choix_:hover {
    background-color: #e1f4ff;
    }

    #simulateur_ {
      width:90%;
    }

    .container__2 { width:100%; }

    .step:not(.ouinon) .choix_ label, .choix_ div, .step:not(.ouinon) .choix_  {
      min-height: 195px;
      height: auto;
    }
    .choix_ div {       font-size: 28px;      }

    img.w100, img.w80 { width: 117px; }
    .step-2 .choix_:nth-child(3) img { width: 154px; }


    .fullscreen .inner h3.subtitle {
      font-size: 30px;
    }

    #contents ._degrade.fullscreen .inner h2.title {
      color: #ffffff;
      font-size: 34px;
    }

    img.left {
      left: auto;
      right:10px;
    }

    .ariane_ {
      margin: 0 0 1rem;
    }

    .step {
      min-height: 364px;
    }
    .inner #simulateur_ h3.subtitle {
      margin: 1rem;
    }

    .my-2 { margin-top: 1rem;
      margin-bottom: 1rem; 
    }

}


  @media (max-width: 1140px) {
    .hide_on_mobile {
      display: none !important;
      }

    

  }


@media (max-width: 1264px) {
 .flex_5 { flex-wrap: wrap;
  justify-content: center;
}
.flex_5 .item { width: 300px; }

.flex_5 .item h4.title { padding:0 1rem; }

}

@media (max-width: 1024px) {

  .flex_5 .item { width: 228px; }

  #simulateur_ {
    width: 100%;
  }
  ._degrade h1, ._degrade h1 span {
    font-size: 28px;
    margin-bottom: 1.5rem;
  }

 

}



@media (max-width: 768px) {

  .col_3 {
    flex-direction: column;
    margin: 2rem 0 !important;
    padding: 1rem !important;
  }

  .step-9 h4, .step h3  {
    font-size: 22px;
    padding: 0 1rem;
  }

  .step-9 h4 {
    margin-top: 2rem;
  }

  .step-4 .content_range::before, .step-5 .content_range::before {
    left: -32px;
    font-size: 16px;
    top: 1px;
  }

  .step-5 .content_range::after {
    right: -32px;
  }

  .step-4 .content_range::after, .step-5 .content_range::after {
    position: absolute;
    right: -41px;
    font-size: 16px;
    top: -1px;
  }

 



  .content_range {
    margin: 4rem auto 3rem;
  }


  .step:not(.ouinon) .choix_ label, .choix_ div, .step:not(.ouinon) .choix_ {
    min-height: 124px;
  }

  .step-1 .choix_:nth-child(3) img {
    width: 107px;
  }

  .step {
    min-height: auto;
  }

  .step.ouinon .choix_content {
  
    margin-top: 1rem;
  }



  .inner h3.subtitle, .contain_gris h3.subtitle, .propos .item_propos h3.name {
    font-size: 22px;
  }
  .contain_gris h3.subtitle {
    margin:0;
  }

  .flex_5 .item h4.title {
    font-size: 22px;
  }

  .container__2 {
    width: 100%;
    padding: 2rem 1rem;
  }
  .choix_ div {
    font-size: 22px;
    height: auto;
    padding: 1rem 4rem 0 1.5rem;
  }
  .step.step-1 .choix_:nth-child(4) div {


    font-size: 22px;
    text-align: left;
  }

  .step:not(.ouinon) .choix_ {
    flex:auto;
    height: auto;
    min-width: 70%;
    width: 70%;
  }

  .step .choix_content {
    flex-direction: column;
  }

 .step.step-7 .choix_content {
    flex-direction: row;
    gap: 0.5rem;
  }

  .step-7 .choix_content p {
    width:100%;
  }


  .step-3 .choix_content {
    flex-direction: row;
  }

  .step:not(.ouinon) .choix_ label {
    height: auto;
  }

  .step_ .bar {
    width: 60px;
  }

  .nav_ {
    flex-direction: column;
  }

  .nav_ div { flex-basis: 100%;
    width: 100%;}

  .nav_ div:nth-child(1) {
    order: 2;
    margin-top:1rem
  }

  .nav_ div:nth-child(2) {
    order: 3;
  }

  .nav_ div:nth-child(3) {
    order: 1;
  }


  .nav_ div:nth-child(2) {
    padding: 2rem 1rem 0;
  }

 


  img.left, img.right, img.milieu, .step-2 img.left {
    left: inherit;
    right: 10px;
  }

  img.w100, img.w80 {
    width: 112px;
  }



}

@media (max-width: 508px) {

  .flex_5 .item {
    width: 100%;
  }

  .flex_5 {
    gap:  45px;
  }


  #recevoir_email {
    margin: 0 1rem 0 0 !important;
  }

  .mx-2 { margin-left: 0 !important; margin-right: 0 !important;}
  #_sim h2 {
    font-size: 22px;
  }
  fieldset {
    display: flex;
    flex-wrap: wrap;
    gap:  1rem;
    padding: 1.5rem;
    margin: 0;
    width: 100%;
  }

  fieldset .champ {
    flex:  auto;
  }


  .step_ .bar {
    width: 55px;
  }

  #nextBtn, #prevBtn { width:100%}

  .step h3 {
    font-weight: 300;
    font-size: 22px;
    padding: 0;
    margin: 0 1rem 1rem;
  }

}



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




#contents ._degrade .inner h2.title {
  font-size: 22px;
  margin: 1rem;
}
.btn_ {
  font-size: 22px;
}
#contents .inner h2.title {
  font-size: 22px;
}
.swiper-slide h4 {
  font-size: 16px;
  padding: 0 1rem;
  margin: 0 0 1rem;
}
.flex_5 img {
  width: 86px;
}

.flex_5 .item:nth-child(4) img {
  width: 64px;
}

.flex_5 .item:nth-child(5) img {
  width: 62px;
}

}


@media (max-width: 400px) {
   .step:not(.ouinon) .choix_ {
    flex:auto;
    height: auto;
    min-width: 100%;
    width: 100%;
  }

  #_sim #_env_form {
    width: 100%;
  }

}

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

.step_ .bar {
  width: 35px;
}

}