:root{
  --color-main: #B30A15;
  --color-main2: #18698B;
  --background: #1D1D1D; 
  --radius: .75rem; 
  --text: rgba(255,255,255,.98);
  --text2: rgba(255,255,255,.8);
}

*, *:before,*:after{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

html{background-color: var(--background); font: 200 24px Inter, system-ui, Arial, sans-serif; line-height: 1.1;}
body{color: var(--text); margin:0;}

a, a span, i{-webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s;}

a:link, a:visited{color:#000; text-decoration:none;}
a:focus{outline: none;}
a:focus-visible{outline: 3px solid var(--color-main2); outline-offset: 4px;}

a{color: var(--color-main); -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s;}
a img{border: none;}

p, ul, li, hr, h1, h2, h3, h4, h5, h6, form{margin: 0; padding: 0;}

strong{color: #000; font-weight: 400}

p{font-size: .98rem; line-height: 1.5; margin-bottom: 1rem}


.fade-in{filter: brightness(.5) saturate(0); opacity: 0; transform: translateY(60px); transition: filter 1s ease, opacity 1s ease, transform 1s ease; will-change: opacity, transform, filter;}
.fade-in.visible{filter: brightness(.9) saturate(.9); opacity: 1; transform: translateY(0);}
.fade-in:hover{filter: brightness(1) saturate(1);}

.btn-primary{appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--color-main); border: none; border-radius: var(--radius); box-shadow: 0 6px 18px rgba(14,80,82,.15); color: var(--text)!important; cursor: pointer; display: inline-block; font-size: 1.1rem; font-weight: 400!important; line-height: 1.2; padding: .75rem 2rem; text-align: center; text-transform: uppercase; transition: background-color .5s, box-shadow .5s;}
.btn-primary:hover{background-color: var(--color-main2); box-shadow: 0 6px 18px rgba(14,80,82,0);}

.section-title{margin-bottom: 5rem; position: relative;}
.section-title::after{color: var(--text); content: attr(data-title); font-size: clamp(3.2rem, 8vw, 6rem); font-weight: 700; left: 3%; line-height: 1; opacity: 0; pointer-events: none; position: absolute; top: 65%; transform: translateY(-20%); transition: opacity 1.5s ease; white-space: normal; z-index: 0;}
.section-title.h3::after{font-size: clamp(3rem, 7.6vw, 5.7rem);}
.section-title.h4::after{font-size: clamp(1.8rem, 4.2vw, 3.2rem);}
.section-title.is-visible::after{opacity: .04;}
.section-title .section-surtitle{color: var(--color-main); font-size: .95rem; font-weight: 400; letter-spacing: .15em; margin-bottom: .25rem; padding-left: .05rem; text-transform: uppercase;}
.section-title.h3 .section-surtitle{font-size: .9rem;}
.section-title h2, .section-title h3, .section-title h4{color: var(--text); font-family: "Libre Baskerville", serif; font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 400; letter-spacing: .05em; line-height: 1.2; margin: 0; position: relative; text-transform: uppercase; z-index: 1;}
.section-title h3{font-size: clamp(1.8rem, 3.3vw, 2.5rem);}
.section-title h4{font-size: clamp(1.5rem, 2.7vw, 2rem);}

.text{flex: 1; order: 1;}
.text .p{padding-left: 3rem; position: relative;}
.text .p::before{background: linear-gradient(to bottom, var(--color-main2), rgba(255,255,255,0)); border-radius: var(--radius); content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transform: translateY(60px); transition: opacity 1s ease, transform 1s ease; width: 3px;}
.text .p.visible::before{opacity: 1; transform: translateY(0);}

.maincontent{margin: 0 auto; width: 85%}


header{height: 100vh; position: relative; width: 100vw;}
header .hero-overlay{background-color: rgba(0,0,0,.3); bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 3;}
header .hero-video-wrapper{bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; z-index: 1;}
header .hero-video-wrapper #hero-video{height: 100%; left: 0; object-fit: cover; opacity: 1; position: absolute; top: 0; transition: opacity 1s ease; width: 100%;}
header .hero-video-wrapper #hero-fallback{display: block; filter: grayscale(0%); height: 100%; left: 0; object-fit: cover; opacity: 0; position: fixed; top: 0; transition: opacity .6s ease, filter .4s ease; width: 100%; will-change: filter, opacity; z-index: 0;}
header nav{background-color: rgba(0, 0, 0, .2); backdrop-filter: blur(8px); left: 0; padding: .5rem 0; position: fixed; top: 0; width: 100%; z-index: 10;}
header nav .maincontent{align-items: center; display: flex; justify-content: space-between;}
header nav .logo img{filter: grayscale(100%) brightness(250%); height: auto; transition: filter .5s ease; width: 42px;}
header nav .logo img.scrolled{filter: none;}
header nav .nav-links{display: flex; font-size: 1.05rem; font-weight: 250; gap: 3rem; list-style: none; margin: 0; padding: 0;}
header nav .nav-links .responsive{display: none}
header nav .nav-links li a{text-decoration: none; color: #EEE; transition: color .5s ease;}
header nav .nav-links li a:hover{color: var(--color-main2);}
header .hero-content{bottom: 0; left: 0; position: absolute; right: 0; top: 0; transition: opacity .2s ease; z-index: 5; will-change: opacity;}
header .hero-content.fixed{position: fixed;}
header .hero-content .maincontent{align-items: center; display: flex; flex-direction: column; gap: 2rem; height: 100%; justify-content: center; position: absolute; text-align: center; top: 0; width: 100%; z-index: 5;}
header .hero-content img{height: auto; width: 200px;}
header .hero-content h1{color: var(--text); font: 400 clamp(1.8rem, 3vw, 2.5rem) "Libre Baskerville", serif; letter-spacing: .1em; line-height: 1.4; text-shadow: 1px 1px 10px rgba(0,0,0,.6);}
header .hero-content h1 span{display: block; font-size: clamp(1.2rem, 2.2vw, 1.75rem);}
header .hero-content p{color: var(--text); font-size: clamp(1rem, 1.6vw, 1.4rem); text-shadow: 1px 1px 10px rgba(0,0,0,.6);}
header .hero-content p{margin-bottom: 0;}
header .burger{background: none; border: none; cursor: pointer; display: none; flex-direction: column; height: 1.5rem; justify-content: space-between; width: 2rem;}
header .burger span{background: #AAA; border-radius: var(--radius); display: block; height: 3px; transition: transform .35s ease, background .35s ease; transform-origin: center;}
header .burger:not(.active) span{transform: none;}
@media (hover: hover) and (pointer: fine){
  header .burger:hover span:nth-child(1){transform: rotate(90deg); transition-delay: 0s;}
  header .burger:hover span:nth-child(2){transform: rotate(90deg); transition-delay: .05s;}
  header .burger:hover span:nth-child(3){transform: rotate(90deg); transition-delay: .1s;}
}


main{background-color: var(--background); position: relative; z-index: 6;}


#infos-fournier .maincontent{color: var(--text2); display: flex; font-size: .85rem; gap: 2rem; padding: 3rem 0 4rem 0;}
#infos-fournier .maincontent div{flex: 1; padding: .35rem 0; position: relative; text-align: center}
#infos-fournier .maincontent div:first-child{text-align: left}
#infos-fournier .maincontent div:last-child{text-align: right}
#infos-fournier .maincontent div:not(:last-child)::after{background: linear-gradient(to bottom, var(--color-main2), rgba(255,255,255,0)); content: ""; height: 100%; position: absolute; right: 0; top: 0; width: 1px;}
#infos-fournier .maincontent a{color: var(--text2)}
#infos-fournier .maincontent a:hover{color: var(--color-main2)}
#infos-fournier .maincontent i{color: var(--text2); font-size: .75rem; margin-right: 1rem; opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease;}
#infos-fournier .maincontent i.visible{opacity:1; transform: translateY(0);}


#presentation-fournier{margin-bottom: 4rem}
#presentation-fournier .maincontent{align-items: center; display: flex; gap: 4rem;}
#presentation-fournier .image{flex: 1; order: 2;}
#presentation-fournier .image img{border-radius: var(--radius); height: auto; max-width: 100%; object-fit: cover; width: 100%;}


#key-numbers{margin: 5rem 0;}
#key-numbers .key-numbers-grid{display: grid; gap: 4rem; grid-template-columns: repeat(4, 1fr);}
#key-numbers .key-numbers-grid .key-number{align-items: center; display: grid; gap: 1.5rem; grid-template-columns: auto 1fr;}
#key-numbers .key-numbers-grid .key-number .key-number-value{font: 700 clamp(3rem, 5vw, 4rem) "Libre Baskerville", serif; line-height: 1; white-space: normal;}
#key-numbers .key-numbers-grid .key-number .key-number-value span{font-size: clamp(1rem, 2vw, 1.5rem)}
#key-numbers .key-numbers-grid .key-number .key-number-text{display: flex; flex-direction: column; gap: .3rem;}
#key-numbers .key-numbers-grid .key-number .key-number-text span:first-child{font-size: 1rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;}
#key-numbers .key-numbers-grid .key-number .key-number-text span:last-child{color: var(--text2); font-size: .95rem; line-height: 1.4;}


#expertise{overflow: hidden; margin-bottom: 4rem; position: relative;}
#expertise .expertise-accordion{display: flex; height: 85vh; width: 100%;}
#expertise .expertise-accordion .sf-content{align-items: flex-start; bottom: 0; display: flex; flex-direction: column; gap: .5rem; justify-content: flex-start; padding: 2rem; position: absolute; top: 0; width: 100%; z-index: 3;}
#expertise .expertise-accordion .sf-item{cursor: pointer; flex: 1; overflow: hidden; position: relative; transition: flex .8s ease;}
#expertise .expertise-accordion .sf-item.active{flex: 3;}
#expertise .expertise-accordion .sf-item::after{background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); bottom: 0; content: ""; height: 75%; left: 0; position: absolute; width: 100%; z-index: 2;}
#expertise .expertise-accordion .sf-item .sf-media{height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1;}
#expertise .expertise-accordion .sf-item .sf-media img{filter: grayscale(75%) brightness(75%); height: 100%; object-fit: cover; transition: filter .5s ease, transform .5s ease; width: 100%;}
#expertise .expertise-accordion .sf-item:hover .sf-media img{filter: grayscale(0%) brightness(100%); transform: scale(1.05);}
#expertise .expertise-accordion .sf-item .sf-content .sf-number{color: var(--color-main2); font-size: clamp(3.3rem, 4.5vw, 4rem); font-weight: 400; letter-spacing: .1em; margin: 0 0 .25rem -.1rem; z-index: 3;}
#expertise .expertise-accordion .sf-item .sf-content h3{color: var(--text); font-size: clamp(1.1rem, 1.5vw, 1.6rem); font-weight: 400; margin: 0 0 2rem 0; position: relative; text-shadow: 1px 1px 10px rgba(0,0,0,.8); z-index: 2;}
#expertise .expertise-accordion .sf-item .sf-content .sf-text{color: rgba(255,255,255,.85); font-size: clamp(.95rem, 1.2vw, 1.3rem); font-weight: 350; margin: 0; max-width: 750px; opacity: 0; text-shadow: 1px 1px 10px rgba(0,0,0,.8); transition: opacity .6s ease; z-index: 3;}
#expertise .expertise-accordion .sf-item:hover .sf-content .sf-text{opacity: 1;}
#expertise .expertise-accordion .sf-item .sf-content .sf-ghost-title{color: rgba(255,255,255,.05); font-size: clamp(3rem, 6vw, 5rem); font-weight: 700; left: 1.8rem; line-height: 1; pointer-events: none; position: absolute; top: 22%; text-transform: uppercase; z-index: 2;}
#expertise .expertise-accordion .sf-item .sf-loupe{align-items: center; display: flex; justify-content: center; left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 1;}
#expertise .expertise-accordion .sf-item .sf-loupe i{color: rgba(255,255,255,.5); font-size: clamp(1.6rem, 4vw, 2.5rem); transition: transform .5s ease, color .5s ease;}
#expertise .expertise-accordion .sf-item .sf-loupe::before{background-color: rgba(255,255,255,.25); border-radius: 50%; content: ""; height: 80%; left: 50%; padding: clamp(1.5rem, 4vw, 3rem); position: absolute; top: 50%; transform: translate(-50%, -50%); transition: transform .5s ease, color .5s ease; width: 80%; z-index: 0;}
#expertise .expertise-accordion .sf-item .sf-loupe::after{background-color: rgba(255,255,255,.1); border-radius: 50%; content: ""; height: 50%; left: 50%; padding: clamp(2.2rem, 6.5vw, 5.5rem); position: absolute; top: 50%; transform: translate(-50%, -50%); transition: transform .5s ease, color .5s ease; width: 50%; z-index: 0;}
#expertise .expertise-accordion .sf-item:hover .sf-loupe i{color: rgba(255,255,255,.05); transform: scale(1.1);}
#expertise .expertise-accordion .sf-item:hover .sf-loupe::after,#expertise .expertise-accordion .sf-item:hover .sf-loupe::before{background-color: rgba(255,255,255,.05); transform: translate(-50%, -50%) scale(1.1);}


#workshop{overflow: hidden; position: relative; margin-bottom: 4rem;}
#workshop .workshop-columns{display: flex; gap: 1rem;}
#workshop .workshop-columns .workshop-column{display: flex; flex-direction: column; gap: 1rem; flex: 1;}
#workshop .workshop-columns .workshop-column .workshop-item{align-items: center; border-radius: var(--radius); display: flex; justify-content: center; overflow: hidden; position: relative; width: 100%;}
#workshop .workshop-columns .workshop-column .workshop-item.ratio-1-1{aspect-ratio: 1 / 1;}
#workshop .workshop-columns .workshop-column .workshop-item.ratio-4-3{aspect-ratio: 4 / 3;}
#workshop .workshop-columns .workshop-column .workshop-item.ratio-3-4{aspect-ratio: 3 / 4;}
#workshop .workshop-columns .workshop-column .workshop-item.ratio-16-9{aspect-ratio: 16 / 9;}
#workshop .workshop-columns .workshop-column .workshop-item.ratio-9-16{aspect-ratio:9 / 16;}
#workshop .workshop-columns .workshop-column .workshop-item.ratio-2-3{aspect-ratio:2 / 3;}
#workshop .workshop-columns .workshop-column .workshop-item img, #workshop .workshop-columns .workshop-column .workshop-item video{height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%;}
#workshop .workshop-columns .workshop-column .workshop-item video{opacity: 0;}
#workshop .workshop-columns .workshop-column .workshop-item[data-type="video"] img, #workshop .workshop-columns .workshop-column .workshop-item[data-type="video"] video{transition: opacity 2s ease;}
#workshop .workshop-columns .workshop-column .workshop-item.is-playing img{opacity: 0;}
#workshop .workshop-columns .workshop-column .workshop-item.is-playing video{opacity: 1;}


#granites-wrapper{background-color: #333; display: flex; gap: 4rem; margin-top: 3rem; position: relative;}
#granites-wrapper .granites-list{display: grid; flex: 1; gap: 2rem; grid-template-columns: repeat(4, 1fr); padding: 4rem 0 4rem 7.5%}
#granites-wrapper .granites-list .granite-item{border-radius: var(--radius); cursor: pointer; display: flex; flex-direction: column; opacity: 0; overflow: hidden; position: relative; transform: translateY(30px); transition: transform .3s ease, box-shadow .3s ease; }
#granites-wrapper .granites-list .granite-item:hover{box-shadow: 0 8px 25px rgba(0,0,0,.5); transform: translateY(-5px)!important;}
#granites-wrapper .granites-list .granite-item .granite-media{height: 0; padding-bottom: 100%; overflow: hidden; position: relative;}
#granites-wrapper .granites-list .granite-item .granite-media img{height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%;}
#granites-wrapper .granites-list .granite-item .granite-overlay{left: 1rem; position: absolute; right: 1rem; top: 1rem; z-index: 1}
#granites-wrapper .granites-list .granite-item .granite-overlay .granite-number{color: rgba(255,255,255,.55); font-size: clamp(2.6rem, 3.6vw, 3.2rem); font-weight: 400; letter-spacing: .1em; margin-bottom: .5rem}
#granites-wrapper .granites-list .granite-item .granite-overlay h4{color: #FFF; font-size: clamp(1rem, 1.35vw, 1.5rem); font-weight: 400; margin-bottom: 1.5rem; text-shadow: 1px 1px 10px rgba(0,0,0,.8); text-transform: uppercase;}
#granites-wrapper .granites-list .granite-item .granite-overlay .granite-short-desc{color: #FFF; font-size: clamp(.9rem, 1.15vw, 1.25rem); font-weight: 400; opacity: 0; text-shadow: 1px 1px 10px rgba(0,0,0,1); transition: opacity .3s ease; z-index: 2;}
#granites-wrapper .granites-list .granite-item:hover .granite-short-desc{opacity: 1;}

#granites-wrapper .granites-filter{background-color: #121212; flex: 0 0 140px; padding: 4.3rem 0;}
#granites-wrapper .granites-filter .color-filter{align-items: center; display: flex; flex-direction: column; gap: 2.5rem; list-style: none; margin: 0; padding: 0;}
#granites-wrapper .granites-filter .color-filter .color-dot{align-items: center; background: none; border: 0; cursor: pointer; display: flex; padding: 0; position: relative; transform: translateX(15px);}
#granites-wrapper .granites-filter .color-filter .color-dot::before{background-color: var(--color); border-radius: 50%; content: ""; display: block; height: 36px; opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; width: 36px;}
#granites-wrapper .granites-filter .color-filter .color-dot.visible::before{opacity: 1; transform: translateY(0);}
#granites-wrapper .granites-filter .color-filter .color-dot.active::before{box-shadow: 0 0 0 4px rgba(255,255,255,.3); transform: scale(1.1);}
#granites-wrapper .granites-filter .color-filter .color-dot.active span{opacity: 1; transform: translateX(0);}
#granites-wrapper .granites-filter .color-filter .color-dot:hover::before{box-shadow: 0 0 0 4px rgba(255,255,255,.5); transform: scale(1.15);}
#granites-wrapper .granites-filter .color-filter .color-dot span{color: var(--text2); font-size: .7rem; opacity: 0; position: absolute; right: 140%; transform: translateX(10px); transition: opacity .2s ease, transform .2s ease;}
#granites-wrapper .granites-filter .color-filter .color-dot:hover span, #granites-wrapper .granites-filter .color-filter .color-dot:focus span{opacity: 1; transform: translateX(0);}

#granite-popup{align-items: center; display: none; height: 100%; justify-content: center; left: 0; position: fixed; top: 0; width: 100%; z-index: 9999;}
#granite-popup .popup-overlay{background-color: rgba(0,0,0,.5); bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: -1;}
#granite-popup .popup-content{background-color: var(--background); border-radius: var(--radius); bottom: 2rem; display: flex; height: calc(100dvh - 4rem); opacity: 0; overflow-y: auto; padding: 2rem; position: absolute; right: 1.5rem; transform: translate(50%, 50%) scale(.8); transition: opacity .4s ease-in-out, transform 1s cubic-bezier(.25,.8,.25,1);}
#granite-popup.show .popup-content{opacity: 1; transform: translate(0,0) scale(1); width: 60vw;}
#granite-popup .popup-content .popup-inner{display: flex; flex-direction: column; gap: 1.5rem; opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease;}
#granite-popup.show .popup-content .popup-inner{opacity: 1; transform: translateY(0); transition-delay: .3s;}
#granite-popup .popup-content .popup-close{background: none; border: none; color: #FFF; cursor: pointer; font-size: 3rem; position: absolute; right: 0; top: -.5rem}
#granite-popup .popup-content .popup-image img{border-radius: var(--radius); height: auto; max-width: 40%; object-fit: cover; width: 40%;}
#granite-popup .popup-content .popup-text{color: #FFF;}
#granite-popup .popup-content .popup-text .popup-name{font: 400 clamp(1.4rem, 2.4vw, 1.8rem) "Libre Baskerville", serif; margin-bottom: 2rem; text-transform: uppercase;}
#granite-popup .popup-content .popup-text .popup-info{font-size: 1.1rem; letter-spacing: .05em; margin-bottom: 1.5rem;}
#granite-popup .popup-content .popup-text .popup-info span{font-weight: 400}
#granite-popup .popup-content .popup-text .popup-description{line-height: 1.5; margin-bottom: 1.5rem;}


#conclusion{background-color: var(--color-main); padding: 3rem 0; text-align: center; transition: background-color 1.5s ease;}
#conclusion.scrolled{background-color: var(--color-main2);}
#conclusion p{font-size: clamp(1.8rem, 2.2vw, 2.4rem); font-weight: 300; letter-spacing: .05em; line-height: 1.3; margin-bottom: 0}


footer{background-color: var(--background); font-size: .9rem; padding: 3rem 0; position: relative; z-index: 6;}
footer a{color: var(--color-main2)!important; font-size: 1.1rem; font-weight: 500; transition: .3s;}
footer .maincontent{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem;}
footer .maincontent h4{font-size: clamp(1.2rem, 1.5vw, 1.4rem); font-weight: 300; margin-bottom: 2rem;}
footer .footer-left{align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 2rem}
footer .footer-left .logo-footer{color: var(--color-main); font: 400 clamp(1.45rem, 2vw, 1.8rem) "Libre Baskerville", serif; text-transform: uppercase;}
footer .footer-left .logo-footer img{display: block; height: auto; margin-bottom: 1rem; width: 250px;}
footer .footer-left .concept{font-size: 1.35rem; font-weight: 200; letter-spacing: .05em; line-height: 1.5; margin-bottom: 0; max-width: 80%}
footer .footer-left .concept span{color: var(--color-main2); font-weight: 300;}
footer .footer-nav{flex: 1}
footer .footer-nav ul{list-style: none;}
footer .footer-nav li{font-size: 1.2rem; margin-bottom: 2.5rem;}
footer .footer-nav li:last-child{margin-bottom: 0}
footer .footer-nav .item a{color: inherit!important; cursor: pointer; font-weight: 300;}
footer .footer-nav .item a:hover{color: var(--color-main2)!important;}
footer .footer-right{display: flex; flex: 1; flex-direction: column; justify-content: space-between;}
footer .footer-right p{color: #DDD;}
footer .footer-right p.important{font-weight: 500}
footer .footer-right p.info{color: #BABABA; font-size: .95rem; font-style: italic}
footer .footer-right p.mentions{font-size: .85rem; line-height: 1.7}
footer .footer-right p:last-child{margin-bottom: 0}
footer .footer-right i{font-size: 1.2rem; margin-left: .5rem;}





@media screen and (max-width: 2560px){

  html{font-size: 22px}

	.maincontent{width: 90%}

  #expertise .expertise-accordion{height: 70vh;}
  #expertise .expertise-accordion .sf-item.active{flex: 4;}

  #granites-wrapper .granites-list{padding-left: 5%}

}

@media screen and (max-width: 2400px){

  #granites-wrapper .granites-list{grid-template-columns: repeat(3, 1fr);}

}


@media screen and (max-width: 1920px){

  html{font-size: 21px}

	.maincontent{width: 92%}

  #infos-fournier .maincontent{font-size: .8rem;}

  #expertise .expertise-accordion{height: 65vh;}
  #expertise .expertise-accordion .sf-item .sf-content .sf-text{max-width: 500px;}

  #granites-wrapper .granites-list{padding-left: 4%}
  #granite-popup .popup-content .popup-image img{max-width: 60%; width: 60%;}

  footer .maincontent{gap: 1.5rem}

}

@media screen and (max-width: 1600px){

  #granites-wrapper .granites-list{grid-template-columns: repeat(2, 1fr);}

  #granite-popup .popup-content .popup-image img{max-width: 80%; width: 80%;}

}

@media screen and (max-width: 1350px){

  #key-numbers .key-numbers-grid{grid-template-columns: repeat(2, 1fr);}

}

@media screen and (max-width: 1250px){

  html{font-size: 20px}

  #infos-fournier .maincontent{padding: 1.5rem 0}
  #infos-fournier .maincontent div{display: none}

  #presentation-fournier .maincontent{flex-direction: column; gap: 2.5rem}

  #expertise .expertise-accordion{height: 50vh;}

}

@media screen and (max-width: 1080px){

  header .burger{display: flex}
  header nav .nav-links{background-color: var(--background); display: flex; flex-direction: column; font-size: 1.3rem; gap: 2rem; height: 100vh; overflow-y: auto; padding: 5rem 10% 2rem 5%; position: fixed; right: -100%; transition: right .5s ease; -webkit-overflow-scrolling: touch; top: 0; width: 80%; z-index: 200;}
  header nav .nav-links.open{right: 0;}
  header nav .nav-links .responsive{display: block}
  header .burger{display: flex; position: relative; z-index: 210;}
  header .burger span{background: #FFF;}
  header .burger.active span:nth-child(1){transform: rotate(45deg) translate(5px, 5px);}
  header .burger.active span:nth-child(2){opacity: 0;}
  header .burger.active span:nth-child(3){transform: rotate(-45deg) translate(5px, -5px);}

  #granites-wrapper{flex-direction: column; gap: 2rem;}
  #granites-wrapper .granites-filter{display: flex; flex: 0 0 auto; justify-content: space-between; order: -1; padding: 1rem 4%; width: 100%;}
  #granites-wrapper .granites-filter .color-filter{flex-direction: row; flex-wrap: wrap; gap: 2rem; justify-content: center;}
  #granites-wrapper .granites-filter .color-filter .color-dot{transform: translateX(0);}
  #granites-wrapper .granites-filter .color-filter .color-dot span{display: none;opacity: 1; position: static; transform: none;}
  #granites-wrapper .granites-list{flex: 1 1 auto; padding: 1rem 4%; width: 100%;}

  #granite-popup .popup-content .popup-image img{max-width: 100%; width: 100%;}

  footer .maincontent{flex-direction: column; gap: 2.5rem}
  footer .maincontent h4::before{background-color: #999; content: ""; display: block; height: 1px; margin: 0 0 2.5rem 0; width: 30%;}
  footer .footer-left .concept{max-width: none;}

}

@media screen and (max-width: 767px){

  .section-title::after{left: 8%; top: 75%; white-space: normal;}

  .text .p{padding-left: 1.5rem;}

  header .hero-content img{width: 175px;}

  #key-numbers .key-numbers-grid{gap: 3rem; grid-template-columns: 1fr;}

  #expertise .expertise-accordion{flex-direction: column; height: auto;}
  #expertise .expertise-accordion .sf-item{flex: none; width: 100%;}
  #expertise .expertise-accordion .sf-item .sf-media img{filter: grayscale(30%) brightness(70%);}
  #expertise .expertise-accordion .sf-item .sf-content{padding: 2rem 4%; position: relative;}
  #expertise .expertise-accordion .sf-item .sf-content .sf-text{max-width: none; opacity: 1;}
  #expertise .expertise-accordion .sf-item .sf-loupe{display: none;}

  #workshop .workshop-columns{flex-direction: column;}
  #workshop .workshop-columns .workshop-column{flex: none;}

  #granites-wrapper .granites-list{grid-template-columns: repeat(1, 1fr);}
  #granite-popup .popup-content{bottom: .25rem; height: calc(100dvh - 1rem); left: .25rem; padding: .5rem; right: .25rem;}
  #granite-popup.show .popup-content{width: 95vw;}

  footer .footer-left .logo-footer img{width: 200px;}

}