@font-face {
    font-family: Staatliches;
    src: url("fonts/Staatliches-Regular.ttf");
}

@font-face {
    font-family: Roboto;
    src: url('fonts/Roboto-Regular.ttf');
}

* {
    font-family: Roboto;
    margin: 0;
    font-size: 12px;
    color: #434343;
}

/* SCROLL BAR */

::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

/* BUTTON */

.button-66 {
  background-color: #0a6bff;
  border-radius: 4px;
  border: 0;
  box-shadow: rgba(1,60,136,.5) 0 -1px 3px 0 inset,rgba(0,44,97,.1) 0 3px 6px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inherit;
  font-family: "Space Grotesk",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin: 0;
  min-height: 56px;
  min-width: 120px;
  padding: 16px 20px;
  position: relative;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  transition: all .2s cubic-bezier(.22, .61, .36, 1);
}

.button-66:hover {
  background-color: #065dd8;
  transform: translateY(-2px);
}




.button-8 {
  background-color: #e1ecf4;
  border-radius: 3px;
  border: 1px solid #7aa7c7;
  box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
  box-sizing: border-box;
  color: #39739d;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15385;
  margin: 0;
  outline: none;
  padding: 8px .8em;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  white-space: nowrap;
}

.button-8:hover,
.button-8:focus {
  background-color: #b3d3ea;
  color: #2c5777;
}

.button-8:focus {
  box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
}

.button-8:active {
  background-color: #a0c7e4;
  box-shadow: none;
  color: #2c5777;
}



header {
    width: 100%;
    background-color: #151515;
}

header div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header a{
    text-decoration: none;
}

header form{
    align-self: flex-start;
    display: flex;
    padding: 5px
}

header form label{
    color: white;
    cursor: pointer;
    margin-left: 5px;
    font-size: 14px;
}

header form label:hover{
    text-decoration: underline;
}

header form input[type=radio]:checked + label{
    text-decoration: underline;
    font-weight: bold;
}

header form input[type=radio]{
    display: none
}



header h1 {
    position: relative;
    width: 100%;
    text-align: center;
    height: 80px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Staatliches;
    font-size: 40px;

}

header nav {
    width: 100%;
    height: 350px;
    background-position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0px -200px;
    transition: filter 1s;
}

header nav:hover {
    filter: blur(4px);
}


.search {
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    padding: 20px 20px 2px 20px;
    margin-bottom: 40px;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(244, 244, 244, 1) 50%, rgba(255, 255, 255, 1) 100%);

}

.search h1 {
    margin-bottom: 20px;
    font-size: 22px;
}

.search>div {
    display: flex;
    align-items: center;
    margin: 10px 0px;
    left: 0px;

}

.search>div i {
    position: absolute;
    text-indent: 15px;
    color: grey;
    font-size: 18px;
}

.search input {
    width: 100%;
    padding: 15px;
    border: none;
    text-indent: 30px;
    border: 1px lightgrey solid;
    border-radius: 5px;
    font-size: 14px;
}

.search input::placeholder {
    font-size: 16px;
    text-indent: 30px;
}


.search span:first-child {
    font-size: 10px;
    display: flex;
}

.search span a {
    color: #434343;    
}

.search span a:hover {
    text-decoration: none
}

.search table {
    margin-top: 20px;
    margin-bottom: 20px
}

.search table thead th{
    font-size: 15px;
}

.search table tbody tr {
    cursor: pointer;    
}

.search table tbody tr td { 
    vertical-align: middle;
    font-size: 14px
}

.search table tbody tr td:last-child { 
    width: 200px
}

section h1{
    font-size: 24px
}


section {
    width: 65%;
    margin: auto;
    padding: 30px 0px;
}

.section_texte{
    padding: 10px 20px 20px 20px;
}

.section_texte h1 {
    text-align: center;
    font-size: 21px;
    margin-bottom: 20px;
    font-weight: bold;
}

.section_texte p,
.section_texte b,
.section_texte em {
    text-align: justify;
    font-size: 14px;
    margin-bottom: 40px
}

.section_title{
    font-size: 20px;
    color: #1085CA;   
}

.section_categories {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px
}

.card-1 {
    display: flex;
    flex-direction: column;
    border: 2px solid #dddddd;
    border-top: 3px solid #1085CA;
    border-bottom: 3px solid #1085CA;
    width: 23%;
}

.card-1>div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 20px;
}

.card-1>div:first-child img {
    transition: transform .5s ease;
}

.card-1>div:first-child span {
    color: #1085CA;
    font-size: 15px;
    font-weight: bold;
}

.card-1>div:last-child {
    background: linear-gradient(#F6F6F6, white, #F6F6F6);
    height: 100%;
    padding: 10px 10px 0px 10px;
}

.card-1>div:last-child span {
    display: flex;
    justify-content: center;
}

.card-1>div:last-child ul {
    padding-left: 0;
}

.card-1>div:last-child li {
    list-style: none;
    width: 100%;
    line-height: 2;
}

.card-1>div:last-child li a {
    text-decoration: none;
    font-size: 13px;
    color: black;
}

.card-1:hover{
    border: 3px #F1E121 solid;
}

.card-1:hover >div:first-child{
    justify-content: center;
    filter: blur(0.5px);
}

.card-1:hover >div:first-child span{
    display: none;
}

.card-1:hover >div:first-child img{
    transform: scale(1.2);
}

.card-1:hover >div:last-child li:hover{
    text-decoration: underline;
}

.section_exemples{
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;
    margin-bottom: 60px;
}

.section_exemples a{
    padding: 0px 5px 0px 15px;
    background: linear-gradient( #F6F6F6,white,#F6F6F6);
    width: 22%;
    height: 130px;
    border-top: 3px solid #1085CA;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    text-decoration: none;
}

.section_exemples a span{
    font-weight: bold;
    color: #1085CA;
    font-size: 15px;
}

.section_exemples a:hover{
    box-shadow: 0px 5px 5px lightgrey;
}

.section_modeles div:first-child{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.section_modeles div:last-child div{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

/* PAGE ARTCICLE */

section .article_title{
    width: 100%;
    background-color: #FFFEFD;
    position: relative;
    top : -50px;
    height: 100px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;    
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    padding: 0px 30px
}

section .article_title span{
    font-size: 20px;
}

section .article_menu{
    position:relative;
    top:-20px;
}

section .article_table{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

section .article_table .table{
    width: 45%
}

section .article_table ul{
    padding: 0;
    margin: 0;
}


section .article_table ul li{
    display: flex; align-items: center;
    list-style: none;
    height: 40px; 
    border-bottom: 1px lightgrey solid;
    font-size: 15px;
}

section .article_table ul b {
    font-size: 15px;
    width: 200px
}


section .article_table .img{
    width: 470px;
    height: auto;

}

section .article_table .img img{
    position: absolute;
    width: 470px;

}

section .article_table .img >div{
	display: flex;
	flex-direction: column;
}

section .article_table .img >div span{
    position: relative;
	z-index: 1;
	left: 0;
	top: 0;
}

section .article_table .img .reference {

font-size: 30px;
font-weight: bold;
color: black;
left: 87px;
top: 82px;
}

section .article_table .img .description {

font-size: 22px;
color: #151515;
left: 87px;
top: 72px;
}

section .article_table .img .quantite {

font-size: 28px;
color: #151515;
left: 60px;
top: 130px;
font-weight: bold;

}



section .article_exemples div{
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 40px;
}

section .article_exemples{
    margin-bottom: 60px;
}

section .categorie{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;    
}

section .categorie h3{
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 18px;
}

section .categorie_contact h4{
padding: 10px;
margin: 20px 0px;
border: 2px red solid;
color: red;
font-size: 22px;
text-align: center
}

section .categorie_contact b{
font-size: 18px;
text-align: center
}

section .categorie_contact p{
margin: 20px 0px 30px 0px;
text-align: justify;
line-height: 24px;
font-size: 16px
}

section .categorie_contact a{
align-self: center;

}



section .categorie_contact,section .categorie_table{
    width: 48%;
    padding: 30px;
    border: 1px #f5f5f5 solid;
}

section .categorie_contact{
    background-color : #f5f5f5;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: flex;
    flex-direction: column
}

section .categorie_table b {
    font-size: 15px;
    margin-bottom:15px;
} 


section .categorie_table p {
    font-size: 14px;
    margin-bottom:15px;
}

section .categorie_table table{
    max-height: 500px;
    overflow-y: scroll;
    display: block;
    margin-top: 5px;
    
}

section .categorie_table td{
    font-size: 14px;
    height: 40px    
}

footer{
    width: 100%;
    background-color: #151515;
    padding: 20px;  
    margin-top: 50px
}

footer > div{
    max-width: 1100px;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;    
}

footer > div div{
    color: white;
    width: 28%;
    text-align: justify;
    font-size: 11px;
}

footer > div div h5{
    font-weight: bold;
    font-size: 13px;
}

/* MEDIA QUERIES */

/* Style pour les écrans de moins de 600px de large */
@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;        
    }

    /* Vos autres styles pour les petits écrans vont ici */
}

/* IPHONE */
@media only screen and (max-width: 768px) {
    body {
        font-size: 16px;
        width: 100%;
        box-sizing: content-box;
    }

    html{
        width: 100%;
    }


    header {
        height: 200px;
        width: 100%;
    }

    header div{
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0px 10px 0px 20px;
        height: 70px;
    }

    header nav{
        background-position: -85px -200px;
	background-size: 185%;
        height: 150px;
    }

    header div a {
        display: flex;
        align-items: center;       
    }

    header div div:first-child{
        display: none;
    }

    header div h1{
        font-size: 26px;
        height: auto;
    }

    section{
        width: 90%;
    }

    section .chemin,section .chemin a{
        font-size: 15px;
    }

    section .search span:first-child{
        display: flex;
        align-items: center;
    }

    section .search h1{
        font-size: 18px;
        height: auto;
        margin: 0
    }

    section .search input::placeholder{
        font-size: 14px;
    }

    section .search span,section .search span a{
        font-size: 11px;
    }

    section .search table thead th{
        font-size: 10px;
        text-align: center;
    }

    section .search table tbody td{
        font-size: 10px;
    }

    section .search table thead th:last-child{
        width: 82px;
        text-align: center
    }

    section .search table tbody td:last-child{
        width: 82px;
    }

    section .search table tbody td button{
        font-size: 10px;
        padding: 2px 3px;
    }

    section .search table thead th:nth-child(3){
        width: 60px;
    }

    section .search table tbody td:nth-child(3){
        width: 60px;
    }

    section .search table thead th:nth-child(1){
        width: 75px;
    }

    section .search table tbody td:nth-child(1){
        width: 75px;
    }

    section .search table thead th:nth-child(2){
        width: 120px;
    }

    section .search table tbody td:nth-child(2){
        width: 120px;
    }

    section .section_texte h1{
        font-size: 20px
    }

    section .section_texte h4{
        font-size: 16px
    }

    section .section_texte p,section .section_texte b,section .section_texte em{
        font-size: 12px;
    }

    section .section_texte{
        padding: 0px 10px;

    }

    section .section_categories{
        flex-wrap:wrap;
    }

    section .section_categories .card-1{
        width: 48%;
        margin: auto;
        margin-bottom: 5px;
        height: 320px;
    }

    section .section_categories .card-1 div:first-child{
        height: 80px;
        padding: 0px 5px 0px 10px;
    }

    section .section_categories .card-1 div:first-child span{
        font-size: 14px
    }

    section .section_categories .card-1 li{
        line-height: 1.5;
    }

    section .section_categories .card-1 li a{
        font-size: 11px;
    }

    section .section_categories .card-1 div img{
        width: 60px;
    }

    section .section_title{
        font-size: 20px;
    }

    section .section_exemples{
        flex-wrap: wrap;
    }

    section .section_exemples a{
        width: 45%;
    }

    section .section_exemples a span{
        font-size: 13px;
    }

    section .section_exemples a img{
        width: 70px;
    }

    section .section_modeles div:first-child{
        flex-wrap: wrap;
    }

    section .section_modeles div:first-child img{
        width: 150px;
    }

    section .section_modeles div:last-child{
        display: flex;
        justify-content: space-between;
    }

    section .section_modeles div:last-child div{
        flex-wrap: wrap;
        flex-direction: column;
        margin-top: 10px;
    }


    section .categorie{
        flex-direction: column;
    }
    section .categorie div{
        width: 100%;
        margin-top: 15px;
        margin-bottom: 15px
    }

    section .categorie h3{
        font-size: 16px;
    }

    
   

    section .categorie .categorie_table{
        padding: 20px;
    }

    section .categorie .categorie_table b{
        font-size: 12px
    }

    section .categorie .categorie_table p{
        font-size: 12px;
        text-align: justify;
    }

    section .categorie .categorie_table td{
        font-size: 10px;
    }
    
    section .categorie .categorie_table td:first-child{
        width: 200px
    }

    section .article_title{
        padding: 5px;
        display: none;
        top : 200px;
    }

    section .article_menu{
        position: unset;
    }

    section .article_table{
        flex-direction: column-reverse;
        padding: 0px;
        margin-bottom: 20px
    }

    section .article_table .img{
        width: 100%;
	box-sizing: border-box;
	height: 270px;
	margin-top: 20px;

    }

    section .article_table .img img{
	width: 90%;
    }

    section .article_table .img .reference{
	top: 75px;
    }

   section .article_table .img .description{
	top: 68px;
    }
   
    section .article_table .img .quantite{
	top: 62px;
	left: 80px;
    }



    section .article_table .table {
        width: 100%;
        margin-top: 0px;
    }

    section .article_table .table li,section .article_table .table li b {
        font-size: 14px;        
    }

    section .article_table .table li b{
        width: 160px
    }

    section .article_exemples{
        margin-bottom: 30px;
    }

    section .article_exemples div{
        flex-wrap: wrap;
        margin-bottom: 0px;
    }

    section .article_exemples div a{
        margin-bottom: 5px
    }

    
    
 
    /* Vos autres styles pour les écrans moyens vont ici */
}

/* Style pour les écrans de plus de 768px de large */
@media only screen and (min-width: 769px) {
    body {
        font-size: 18px;
    }
    
    /* Vos autres styles pour les grands écrans vont ici */
}