// GLOBAL
section{
  padding: 40px 0;
  @media (min-width: $breakpoint-sm) {
   padding: 64px 0;
 }

 &.no-padding {
   padding: 0;
 }
}

//meme espacement mais sans le background color
.sous-section:not(:last-of-type){
 margin-bottom: 40px;
 @media (min-width: $breakpoint-sm) {
   margin-bottom: 64px;
 }
}

.separateur{
 border-top: 1px solid $hq-gris-40;
}

.bloc-txt-img{
 img{
 margin-bottom: 24px;
   @media (min-width: $breakpoint-sm) {
     margin-bottom: 0;
     width: 100%;
   }
 }
 &__fond-sombre{
   color: $hq-blanc;
 }
}

.bloc-aider{
 row-gap: 24px;
   @media (min-width: $breakpoint-sm) {
     row-gap: 16px;
   }
}

.bloc-attr-contrat{
 margin-bottom: 32px;
 padding-bottom:32px;
 border-bottom: 1px solid $hq-gris-40;

 ul {
   margin-left: 0;
   list-style-type: none;

   li {
     margin: 0;
     padding: 0;

     &.attr-objet {
       font-weight: 700;
       margin-bottom: 8px;
       font-size: 1.0625rem;
     }

     span {
       font-weight: 600;
     }
   }
 }

 .fourn-detail{
   margin-left: 16px;

   p{
     margin: 0;

     &:first-child {
       margin-top: 8px;
     }
     &:last-child {
       margin-bottom: 8px;
     }
   }
 }
}

.bloc-etapes{
 ol {
   list-style: none;
   counter-reset: counter-bloc-etape;
   margin: 0;
   padding: 0;
 }
 ol li {
   margin: 0;
   counter-increment: counter-bloc-etape;
   display: flex;
   font-size: 1rem;
   background-color: $hq-bleu-10;
   padding: 24px;
   border-radius: 16px;
 }
 ol li::before {
   content: counter(counter-bloc-etape);
   font-weight: bold;
   font-size: 3.0625rem;
   margin-right: 24px;
   line-height: 0.8;
 }
}


//3 ÉTAPES
.bandeau-trois-etapes{
 padding: 0 0;
 .hq-grid{
   gap: 0;
 }
 .etape{
   padding: 16px 32px;
   display: flex;
   position: relative;
   p{
     margin-left: 16px;
   }
 }
 p, h2{
   padding-bottom: 0;
   margin-bottom: 0;
 }
 h2{
   line-height: 2rem;
 }
 .hq-bg-bleu-80, .hq-bg-bleu-50 {
   h2, p {
     color: $hq-blanc;
   }
 }
 .hq-bg-bleu-30 {
   h2, p {
     color: $hq-bleu-95;
   }
 }
 .triangle{
   width: 0;
   height: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   border-left: 15px solid $hq-bleu-80;
   rotate: 90deg;
   position: absolute;
   bottom: -20px;
   left: 30px;
   z-index: 1;
   &.bleupale{
     border-left: 15px solid $hq-bleu-50;
   }
   @media (min-width: $breakpoint-sm) {
     rotate: 0deg;
     bottom: 40px;
     left: 250px;
   }
   @media (min-width: $breakpoint-md) {
     left: 340px;
   }
 }
}

.titre-bordure-gauche{
 margin-bottom: 24px;
 h2, h3 {
   padding-left: 16px;
   padding-bottom: 0;
   &.bordure-un{
     border-left: 6px solid $hq-bleu-80;
   }
   &.bordure-deux{
     border-left: 6px solid $hq-bleu-50;
   }
   &.bordure-trois{
     border-left: 6px solid $hq-bleu-40;
   }
 }
}


//LISTE AVEC CROCHET OU X
.liste-crochet{
 .flex-container{
   margin-bottom: 24px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   p{
     line-height: 1.5;
   }
   img{
     margin: 2px 14px 0 0;
   }
 }
}

.accueil-entete{
 color: $hq-blanc;
 background-image: linear-gradient(180deg, #0F096C 0%, #1224B8 100%);
 padding: 32px 0;
 @media (min-width: $breakpoint-sm) {
   padding: 90px 0;
 }
 .bloc-img{
   margin-top: 32px;
   @media (min-width: $breakpoint-sm) {
     margin-top: 0;
   }
 }
}

.achete-tout{
 .categorie{
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 24px;
   text-align: left;
   img{
     padding-right: 16px;
   }
     @media (min-width: $breakpoint-sm) {
       flex-direction: column;
       text-align: center;
       img{
         padding-right: 0;
       }
     }
   }
 }


.titre-avis{
 display: flex;
 margin-bottom: 12px;
 img{
   margin-right: 8px;
 }
}

.accueil-entete{
  color: $hq-blanc;
  background-image: linear-gradient(180deg, #0F096C 0%, #1224B8 100%);
  padding: 32px 0;
  @media (min-width: $breakpoint-sm) {
    padding: 90px 0;
  }
  .bloc-img{
    margin-top: 32px;
    @media (min-width: $breakpoint-sm) {
      margin-top: 0;
    }
  }
}

.achete-tout{
  .categorie{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 24px;
    text-align: left;
    img{
      padding-right: 16px;
    }
      @media (min-width: $breakpoint-sm) {
        flex-direction: column;
        text-align: center;
        img{
          padding-right: 0;
        }
      }
    }
  }


.titre-avis{
  display: flex;
  margin-bottom: 12px;
  img{
    margin-right: 8px;
  }
}