html{
    scroll-behavior: smooth;
  }
*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    list-style: none;
    scroll-behavior: smooth;
  }
body { 
    margin:0;
    padding:0;
    left:0;
    background-color: #F1F1F1;
    color: #171616;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    overflow-x: hidden;
	min-height: 100vh;
}
/* mise en page*/
.c_1, .b_1{color:#f1f1f1;}
.c_2, .b_2{color:#cd0808;}
.c_3, .b_3{color:#ff1616}
.c_4, .b_4{color:#d6d5d5}
.c_5, .b_5{color:#a09e9e;}
.c_6, .b_6{color:#3c3b3b;}
.c_7, .b_7{color:black}
.c_8, .b_8{color:white}
.c_9{color:#d4cbcb}
.c_10{color:#18191d;}

.bg_1{ background-color: #f1f1f1;}
.bg_2{ background-color: #cd0808;}
.bg_3{ background-color: #ff1616;}
.bg_4{ background-color: #d6d5d5;}
.bg_5{ background-color: #a09e9e;}
.bg_6{ background-color: #3c3b3b;}
.bg_7{ background-color: black}
.bg_8{ background-color: white}
.bg_9{ background-color: #d4cbcb;}
.bg_10{background-color: #18191d}

.tr {text-align: right; }
.tl {text-align: left;}
.tc {text-align: center;}

.mg{ margin:2%;}
.pd {  padding: 3%;
       box-sizing: border-box;}
.pd_l{ padding-left: 3%;
       box-sizing: border-box;}
.pd_r{ padding-right: 3%;
       box-sizing: border-box;}
.pd_b{ padding-bottom: 3%;
       box-sizing: border-box;}
.pd_t{ padding-top: 3%;
       box-sizing: border-box;}

.row::after {
    content: "";
    clear: both;
    display: table;
}
	
[class*="col-"] {
    float:left;
    width: 100%;
}
  
  @media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
  }
  @media only screen and (min-width: 968px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
  }

/*titres*/
h1 { font-family: "DM Sans";
      margin-block-start: 0;
      font-weight: 600;
      letter-spacing: 2px ;
      font-style: normal;
      font-size:45px;
      white-space: nowrap;
  }

h2 {  font-family: "Poppins", sans-serif;
      font-size: 18px;
      letter-spacing: 2px ;
      text-transform: uppercase;
      font-weight: 300 ;   
  }
  
h3{ font-family: "DM Sans";
    font-size: 14px;
    font-weight: 300;
  }
  
h4{ font-family: "DM Sans";
    font-size: 12px;
    font-weight: 300;
  }

a { color: #f1f1f1;
    text-decoration: none;
}

a:hover { color: #cd0808;
          text-decoration: none;
}

/*bouton*/
.boutonensavoirplus{
  position:relative;
  max-width: 250px;
  margin: 0 auto;
  flex: 20%;
}
button{
  font-family: "Poppins", sans-serif;
  min-width: 250px;
  height:80px;
  position:relative;
  background:rgba(255, 255, 255, .27);
  text-transform:uppercase;
  color:white;
  letter-spacing:1.4px;
  outline:none;
  cursor: pointer;
}

.border{
  position:absolute;
  background:none;
  transition:all .5s ease-in-out;
}
.boutonensavoirplus>.border:nth-of-type(1){
  top:0;
  left:0;
  width:0;
  height:0;
  border-top:1px solid white;
}

.boutonensavoirplus>.border:nth-of-type(2){
  top:0;
  right:0;
  width:10px;
  height:0;
  border-right:1px solid white;
}

.boutonensavoirplus>.border:nth-of-type(3){
  bottom:0;
  right:0;
  width:0;
  height:0;
  border-bottom:1px solid white;
}

.boutonensavoirplus>.border:nth-of-type(4){
  bottom:0;
  left:0;
  width:0;
  height:0;
  border-left:1px solid white;
}

.boutonensavoirplus:hover .border:nth-of-type(1){width:100%;}
.boutonensavoirplus:hover .border:nth-of-type(2){height:80px;}
.boutonensavoirplus:hover .border:nth-of-type(3){width:100%;}
.boutonensavoirplus:hover .border:nth-of-type(4){height:80px;}