@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-Regular.woff2") format("woff2");
  }

  @font-face {
    font-family: "SairaStencilOne-Regular";
    src: url("/fonts/SairaStencilOne-Regular.woff2") format("woff2");
  }

*, ::before, ::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {scroll-behavior: smooth;}

body {font-family: "Poppins", sans-serif;background-color:#ffffff;}

nav, ul {list-style: none;}

a {text-decoration: none;}

address {font-style: normal;}

ol {text-align: left;list-style:disc;}

p {width:100%;padding:5px 10px 0;}

.list-second {margin-left:30px;}

section {
    position: relative;
    width: 100%;
    height:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:100px 15px;
    flex-direction: column;
}

/* ---------- BUTTON -------- */

.container-btn {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin:20px 0;
}

button {   
    position: relative;
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    transition: 1s all ease;
    text-align: center;   
    margin:25px 0 10px; 
    color:white;
    border:0;
    border-radius: 5px;
}

button:hover {cursor:pointer;}

.btn2 {
    width:100%;
    background-color: #2c4765;
    padding:20px 60px 20px;
    font-size: 21px;
    margin:0 0 ; 
    border-radius: 0px;
}

.btn3 {
    width:170px;
    background-color: red;
    padding:8px 0 6px 0;
    margin:auto 0 auto 20px;
    font-size: 16px;
    vertical-align:top; 
    cursor: pointer;
}

.btn4 {
    width:260px;
    background-color: red;
    padding:10px 10px;
    font-size: 18px;
    margin:20px 30px auto 30px;
    vertical-align:top; 
    cursor: pointer;
}

.btn2:hover, .btn3:hover, .btn4:hover {background-color: orange;}

.btn-mob {display:none;}

/* ------------- SECTEURS GEO ----------- */

.secteur-geo {
    height: 60vh;
    background: no-repeat left bottom/cover url(../img/banville-vwn.webp);
    color: #f1f1f1;
}

h1 {
    font-family: "Poppins", sans-serif;
    width: 44%;
    font-size: 33px;
    text-align: center;  
    letter-spacing: 1.5px;
    line-height: 1.3;
    margin-top:-60px;
    text-transform: uppercase;
}

.txt-h1 {width:43%;text-align: center;font-size: 18px;}

h2 {
    line-height: 1.3;
    font-size: 27px;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 20px;
    padding-top:10px;
}

.htwo-centre {text-align: center;padding-top:30px;}

h3 { 
    width:100%;
    padding: 10px 10px 5px 10px;
    line-height: 1.3;
    font-size:21px;
    text-align: center;
}

.secteur-content {padding:0 0 30px 0;}

.secteur-link {padding:0 0 30px 0;}

.secteur-content2 {padding-bottom:10px;}

 .content-left {
    width: 1100px;
    max-width:100%;
    text-align: center;
}

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

.liste-prim {column-count:2;padding:0 10px;}

.creations {
    width: 100%;
    height: auto;
    padding:20px 10px 30px;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline; 
}

.bloc-creations {
    width: 500px;
    height: auto;
    display: flex;
    flex-direction: column; 
    margin:10px 20px;
    box-shadow: 8px 8px 8px 0px black;
}

.bloc-creations img {width:100%;}

.reviews {margin-top:20px;}

.txt-reviews {font-size: 19px;}

.bloc-stars img {width:170px;padding-top: 5px;}

.custom-shape-divider-bottom-1632829380 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1632829380 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.custom-shape-divider-bottom-1632829380 .shape-fill {fill: #BCC7DC;}


/* ------------- SECTEUR breadcrumb ----------- */

.container-breadcrumb {
    width: 1300px;
    max-width:100%;
    display: flex;
    margin:0;
    padding:0;
    box-sizing: border-box;
}

#breadcrumb {
    width: 1300px;
    height: 50px;
    display:flex;
    justify-content: left;
    font-family: 'Fjalla One', sans-serif;
    font-size: 15px;
    font-weight: 500;
    list-style: none;  
    padding-left:90px;  
}

#breadcrumb li .accueil{
    float:left;
    max-width:100%;
    height: 35px;
    padding: 5px 10px 5px 0;
    display: flex;
    justify-content:left;
    align-items: center;
    color: black;
    text-align:left;
    line-height: 1.2;
}

#breadcrumb li:not(:last-child)::after {
    display: flex;
    margin: 0 .25rem;
    padding-top: 6px;
    content: "➤";
    color:black;
  }

#breadcrumb li .accueil span {
    color: black;
    font-family: 'Fjalla One', sans-serif;
}

#breadcrumb li .accueil:hover{
    text-decoration: underline;
}

#breadcrumb li .menu1{
    float:left;
    height: 35px;
    padding: 0px 10px 0 5px;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2;
}

#breadcrumb li .menu1:hover{
    text-decoration: underline;
}

#breadcrumb li .menu2{
    float:left;
    height: 35px;
    padding: 0px 10px 0 5px;
    color: black;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
}

#breadcrumb li .menu2:hover{
    text-decoration: underline;
}


/* -------------- Création site -------------- */


.secteur-creation {background: #BCC7DC;}

.container-creation {
    position: relative;
    width: 100%;
    max-width: 1100px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    margin:30px 0px;
}

.bloc {
    position: relative;
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:10px 20px;  
}

.block-image {
    width:100%;
    max-width: 500px;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;  
    margin:20px;
    box-shadow: 8px 8px 8px 0px black;
}

.block-image img {width: 100%;}

.block-creation {width: 100%;}

.hthree {text-align: left;padding-top:15px;}

.list-details {padding-left:20px;}


/* -------------- Ask -------------- */

.section-ask {
    text-align: left;
    color: #1c1c1e;
    background: #BCC7DC;
    padding:100px 5px 60px;
}

.container-ask {width:1100px;max-width:100%;}

.block-ask {Margin:10px 0;}

.h3-ask {padding-bottom:8px;text-align: left;}


/* -------------- FOOTER -------------- */

footer {
    flex-shrink: 0;
    width:100%;
    background-color: #201E20;
    color: #ffffff;  
    padding-bottom:110px;
}

.container-footer {
    width: 100%;
    display : flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 0px 20px 0px;  
    font-size: 15px;
}

.address {text-align: left;width:100%}

.address a {color: #f1f1f1;transition: all 0.4s ease-in;}

.address a:hover {color:aqua}

.logo-footer img {width:120px;}

.block {width:230px;margin: 20px 20px;}

.liens {color: #f1f1f1;transition: all 0.4s ease-in;}

.liens:hover {color:aqua;}

.titre-liste {padding-bottom: 15px;font-size: 20px;}

.horaires {list-style-type: none;}

.block p {  letter-spacing: 1.9;}

.ban-reseaux {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;  
}

.reseaux {margin-left:0px;}

.ban-reseaux a {padding: 0 10px;}

.social-footer {width: 35px;transition: all 0.4s ease-in;}

.social-footer:hover {transform: scale(1.2);}

.copy {
    width:100%;
    text-align: center;
    padding-bottom: 10px;
    font-size: 15px;
    color: #f1f1f1;
}

.copy a{ color: #ddc3a5;transition: all 0.4s ease-in;}

.copy a:hover{color: #e0a96d;transform: scale(1);}

.maj {
    width:100%;
    text-align: center;
    padding-bottom:7px;
    font-size: 15px;
}

.maj a {color: #f1f1f1;transition: all 0.4s ease-in;}

.maj a:hover {color:aqua;}

.francenum a img {width:40%;padding-top:10px;}

ul li ul.dropdown-footer li {
    display:block;
}

ul li ul.dropdown-footer {
    width:270px;
    padding:10px 0 5px;
    background:#1c1c1e;
    position:absolute;
    z-index:999;
    display:none;
    margin-top:-5px;
    margin-left:-31px;
    text-align: center;
}

ul li:hover ul.dropdown-footer {
    display:block;
}

/* ------------- MEDIA QUERIES ------------- */

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

    .secteur-geo {color: #f1f1f1;}
}

@media all and (max-width:1050px) {
    h1 {font-size: 30px;}

    .secteur-geo {height:70vh;}
}

@media all and (max-width:900px) {

    .container {margin-top: -2px;}

    .secteur-geo {height: 60vh;}

    h1 {width: 100%;font-size: 23px;padding:0 15px;}

    .txt-h1 {width:83%;font-size: 18px;}

    h2 {font-size:25px;padding-bottom:10px;padding-top:10px;}

    h3 {font-size: 18px;}

    .secteur-content {flex-direction: column;}

    .block-creation {width: 100%;}

    .content-left, ol {width:100%;padding:0px 0px;}

    .block-image {width: 100%;}

    .block-image img {width:100%;}

    .a-buthon {width: 270px;}

    .buthon-index {font-size: 16px;}

    .copy, .maj {font-size: 14px;}

    .a-btn {margin:20px auto 25px auto;width:260px;}

    .btn3 {display:none;}
}

@media all and (max-width:425px) {

    .liste-prim {column-count:1;padding:0 10px;}

    .btn2 {padding:15px 15px 15px;}

    .list-details {padding:0 15px 0 5px; font-size:18px;}
}

@media all and (max-width:380px) {

    .container-creation {width:300px;margin:auto;}
    
    .bloc {width:300px;height: auto;}
    
    .block-image {width:290px;height: auto;margin:20px 0px;}
    
    .block-image img {width:290px;height: auto;}    

    .secteur-geo {height: 94vh;padding-top:120px;}

}