@font-face { font-family: 'HK_grotesk';
    src: url('../fonts/hkgrotesk-semiboldlegacy-webfont.woff2.html') format('woff2'), url('../fonts/hkgrotesk-semiboldlegacy-webfont.woff') format('woff');
    font-weight: bold; font-style: normal;
}
@font-face { font-family: 'HK_grotesk';
    src: url('../fonts/hkgrotesk-mediumlegacy-webfont.woff2.html') format('woff2'), url('../fonts/hkgrotesk-mediumlegacy-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;
}

* {
    margin:0; padding:0;
    box-sizing:border-box;
    list-style:none;
    font-family: 'HK_grotesk', Verdana, Geneva, sans-serif;
}

html, body { 
    width:100%; height:100%; margin:0; padding:0; 
    position:relative; z-index:1; 
    font-size:15px;
}
body, input, textarea, button {
    font-size: 15px;
    line-height:1.5rem;
    color:#000;
}
body { 
    margin:0; padding:0; 
    background-color: #fff;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,p { 
    font-size:1rem; font-weight:normal; 
    margin-bottom:12px;
}
ul, li { list-style:none; margin:0; padding:0; }

.hidden { display:none; } .clear { clear:both; }
.abs { position:absolute; left:0; top:0; } .rel { position: relative; }
.pointer { cursor:pointer; } .left { float: left; } .right { float: right; }

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

strong { font-weight:bold; }
.petit { font-size:12px; line-height:18px; }
.big { font-size:20px; line-height:22px; }
.bigger { font-size:26px; line-height: 26px; font-weight:bold; }
.super { font-size:40px; line-height: 40px; }

main {
    flex: 1;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 0;
}

section { padding-top:150px; width:90%; max-width:1200px; margin:0 auto; text-align: center; }
section.lumette { padding:0; width:100%; max-width:none; 
    height:100vh; overflow:hidden; }
section.bougies { width:100%; margin-left:auto; margin-right:auto; }

section h1 { text-align: center; font-size:26px; line-height: 26px; font-weight:bold; margin-bottom:60px; }



/*splash screen*/
.lumette .back { background-image: url( ../img/backonly.png); 
    background-attachment: fixed;
    background-size: cover;
}
.lumette .fullsize { width: 100%; height: 100%; position: absolute; left:0; top:0; }
.lumette .scene { width: 600px; max-width: 90%; height: 400px; 
    margin: 140px auto 0 auto; }
.lumette .scene li img { opacity: 0.9; width:100%; }

/* Transparent Horizontal Banner in the middle for title */
.title-container {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-70%);
    background-color: rgba(255, 255, 255, 0.3);
    text-align: center;
    padding: 30px 0;
    color: #663b58;
    line-height: 1.5;
}

.big-title {
    font-size: 5vw; /* 2 times bigger */
    font-family: 'Noto Serif', serif !important;
}

.small-title {
    font-size: 2.5vw;
    font-family: 'Noto Serif', serif !important;
}


.subtitle-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    text-align: center;
    padding: 17px 0;
    font-family: 'Antic Didone', serif !important;
    color: #663b58;
    font-size: 2vw;
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
    .big-title {
        font-size: 8vw; /* Increase the size */
    }
    .small-title {
        font-size: 4vw; /* Increase the size */
    }
    .subtitle-container {
        font-size: 3vw;
    }
}

/* Media Query for very small screens */
@media (max-width: 480px) {
    .big-title {
        font-size: 12vw; /* Increase the size even more */
    }
    .small-title {
        font-size: 6vw; /* Increase the size even more */
    }
    .subtitle-container {
        font-size: 4vw;
    }
}




/* */
header { position: fixed; top:0; left:0; z-index:999; width:100%; padding:10px 0; text-align: center;
    background-color: #fff; }
header li { display:inline-block; vertical-align: middle; padding:0 30px; }
header li a { text-decoration: none; padding-bottom:2px; border-bottom:solid 2px #fff; }
header li a:hover, header li.active a, header li a.active { text-decoration: none; border-bottom:solid 2px #000; }
header li a.index:hover { border-bottom:solid 2px #fff; }
header .index img { height:50px; }

.onepage header { position: absolute; top:100vh; }
.onepage #sticky-wrapper.is-sticky { position: relative; z-index: 999; }

.bougies, .inprogress { position: relative; z-index:1; }
.bougies article, .inprogress article { float:left; z-index:2; text-align:left; } /* la marge ... */
.bougies article .content, .inprogress article .content { position: relative; }
.bougies article a { color:#000; }
.bougies article a:hover { text-decoration: none; /* color:#999; */ }
.bougies article a:hover .titre { text-decoration: underline; }
.bougies article .thumb, .inprogress article .thumb { margin-bottom:15px; }
.bougies article .thumb img, .inprogress article .thumb img { width:100%; display:block; }
.bougies article .titre {}
.bougies article .soustitre {}
.bougies article .annee { text-align:right; margin: 15px 0 10px 0; }
.bougies article .prix {  position: absolute; right:0; bottom:0; margin:0; }

/* taille de la bougies */
/* 300 +2*60 de marge = 360, 720, 1080, 1440 */
section.bougies, section.inprogress { width:100%; max-width:1440px; }
.bougies article, .inprogress article { width:300px; margin:30px; }

@media screen and (max-width: 1440px){
    section.bougies, section.inprogress { max-width:1080px; }
}
@media screen and (max-width: 1080px){
    section.bougies, section.inprogress { max-width:720px; }
}
@media screen and (max-width: 720px){
    section.bougies, section.inprogress { max-width:360px; }
    /* Media Query */
@media (max-width: 768px) {
    .title-container, .subtitle-container {
        font-size: 1.5em;
    }
}

}
@media screen and (max-width: 360px){
    section.bougies, section.inprogress { max-width:none; }
    .bougies article, .inprogress article { width:80%; }
    .bougies article .annee {margin-bottom: 5px;}
}

.atelier article { text-align: center; display: inline-block; width:90%; max-width:500px; }
.atelier article .texte { text-align:left; }
.atelier article.split { max-width:700px; }
.atelier article.split .texte { width:45%; float:left; } 
.atelier article .photo { width:45%; margin-left:10%; float:left; }
.atelier article .photo img { width:100%; }

.points_de_vente article { text-align: center; display: inline-block; width:90%; max-width:500px; }
.points_de_vente article .texte { text-align:left;}
.points_de_vente article.split { max-width:700px; }
.points_de_vente article.split .texte { width:45%; float:right; } 
.points_de_vente article.split .texte   .horizontal-list {
    list-style-type: none;
    padding: 0;
  }

  .horizontal-list li {
    margin-bottom: 10px;
    border-bottom: 1px solid #000; /* Add a black horizontal line under each list item */
    padding-bottom: 10px;
  }
.points_de_vente article .photo { width:45%; margin-right:10%; float:right; }
.points_de_vente article .photo img { width:100%; }

.pj { margin-top:60px; padding-left: 40px; text-decoration: underline; }

.contact article { text-align: center; }
.contact article .texte { width:90%; max-width:500px; display: inline-block; }
.contact .form { margin:40px auto 0 auto; width:90%; max-width:400px; }
.contact .form div { margin-bottom: 1rem; }
.contact article .texte a { text-decoration: underline; }

.contact input {}
.contact input.textfield, .contact textarea { font-size: 13px; padding: 1px 5px; width: 100%; }
.contact textarea { line-height:1.5em; height:120px; }
.contact button { text-transform: uppercase; background-color:#C6C6C6; color:#fff; 
    font-size:12px; padding: 2px 8px;
    cursor:pointer; border:none; transition-duration: .3s; }
.contact button:hover { background:#000; transition-duration: .3s; }
.contact article .social {}
.contact article .social li { margin-top:10px; }
.contact article .social a { text-decoration: none; }
.contact article .social a:hover { text-decoration: underline; }
.contact article .social img { width:33px; height:33px; vertical-align: middle; }

footer {
    text-align: left;
    padding: 4rem 0 1rem 0;
    /* background-color: #fff; */
    width: 100%;
    position: relative;
    bottom: 0;
    margin-top: auto;
    z-index: 1;
}
/* */
#projet article { position: relative; }
#projet section h1 { margin-bottom:0; }
#projet .textes { width:25%; float:right; padding-left:20px; text-align:left; }
#projet .photos { width:60%; }
#projet .photos img.photo { max-width:100%; margin-bottom:30px; }
#projet .titre { text-align: left; margin:0 0 3rem 0; position: relative; left:-1rem; }
#projet .soustitre {}
#projet .tech {}
#projet .annee {}
#projet .creation {}
#projet .prix { padding:15px 0 0 24px; /* text-decoration: underline; */ }
#projet .lien { display:block; margin-top:10px; }
#projet .texte, #projet .texte p { font-size:12px; line-height:18px; }
#projet .texte { margin-top:3rem; }
#projet .nav { margin-top:3rem; position: relative; left:-1rem; }
#projet .textes a { text-decoration: underline; }
#projet .nav a { text-decoration: none; }
#projet .nav a:hover { text-decoration: underline; }
#projet .nav p { /*float:right;*/ display:inline-block; }
#projet .nav .next { /*float:right;*/ margin-left:24px; }

/* le texte du projet qui reste en place au scroll */
#projet .textes { position: fixed; width:90%; max-width: 1200px; padding:0; 
    top:0; height: calc(100% - 100px);
}
#projet .textes li {    font-size: 14px;
    margin-left: 10px;
    list-style-type: circle;}
#projet .textes .content { width:30%; float:right; padding-left:20px; 
    height:100%; overflow:auto; padding-top:150px;
}


#actualites {}
#actualites section {}
#actualites h1 {}
#actualites article { width:96%; max-width:800px; margin: 0 auto 50px auto; }
#actualites article.no-img {}
#actualites .left-col { float:right; width:33%; margin-left:5%; text-align: left; }
#actualites .right-col { float:left; width:62%; }
#actualites .titre { margin-bottom:1.5rem; position: relative; left:0rem; }
#actualites .texte {}
#actualites .texte p {}
#actualites .texte a { text-decoration: underline; }
#actualites .images {}
#actualites .images img { width:100%; display:block; margin-bottom:10px; }

#actualites article.no-img .left-col { float:none; width:100%; max-width:600px; margin:0 auto; }
#actualites article.no-img .titre { left:-1rem; }

#projet .photos, .bougies article { opacity:0; }


@media screen and (max-width: 960px){
    header li:first-child { display:block; margin-bottom:10px; }
    #projet .textes { height:auto;
        position: static; float:none; width:100%; max-width:400px; margin:0 auto 40px auto; }
    #projet .textes .content { float:none; width:100%; padding-top:0; height:auto;}

    #projet .photos { width:100%; max-width:600px; margin-left:auto; margin-right:auto; }

    section { padding-top: 170px; }
}
@media screen and (max-width: 650px){
    #actualites .left-col, #actualites .right-col { float:none; width:100%; }
    #actualites article { margin-bottom:6rem; }
    #actualites article.no-img .left-col { width:90%; margin-left:5%; }
    #actualites article .titre { left:-1rem; }


    .atelier article.split .texte, .atelier article .photo { width:100%; margin-left:0; float:none; }
    .atelier article .photo { margin-top:4rem; }
    .points_de_vente article.split .texte, .points_de_vente article .photo { width:100%; margin-right:0; float:none; }
    .points_de_vente article .photo { margin-top:4rem; }
}