:root{
  --color-main: #1E5A53;
  --color-main-hover: #D6D6D6;
  --color-main2: #5A1E25;
  --background: #F9FAFA; 
  --background-element: linear-gradient(to bottom, rgba(233, 238, 236, .9), rgba(233, 238, 236, .5));
  --muted: #4b4b4b; 
  --radius: .5rem; 
  --text: #1A1A1A;
  --text2: #5E6462;
}

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

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

a, a span, i, header .header-top .top-left a, header .burger{-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: 0;}

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;}

h1{font-size: 1.75rem; font-family: "Cinzel", serif; font-weight: 500; letter-spacing: .1em; line-height: 1.2; margin-bottom: 1rem}
h2, h3{font-family: "Cinzel", serif; font-size: 1.7rem; font-weight: 500; letter-spacing: .1em; line-height: 1.2; margin-bottom: 1.5rem;}
h2::after, h3::after{background-color: var(--color-main); content: ""; display: block; height: 1px; margin: 1rem 0 0 0; width: 20%;}
h4{font-family: "Cinzel", serif; font-size: 1.2rem; font-weight: 400; line-height: 1.1; margin-bottom: 1rem;}

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

p{line-height: 1.4; margin-bottom: 1rem}

.anim{opacity: .1; transition: opacity .8s ease-out;}
.translate{opacity: 0; transform: translateX(-20em); transition: transform 1s ease-out, opacity 1s ease-out;}
.translate.animate{opacity: 1; transform: translateX(0);}
.scale{ display: inline-block; opacity: 0; transform: scale(0); transform-origin: left; transition: transform 1.2s ease-out, opacity 1.2s ease-out;}
.scale.animate{opacity: 1; transform: scale(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(--background)!important; cursor: pointer; display: inline-block; font-size: .9rem; font-weight: 500!important; line-height: 1.2; padding: .75rem 1rem; text-align: center; text-transform: uppercase; transition: background-color .5s, box-shadow .5s;}
.btn-primary.btn-external::after{content: "\f08e"; font-family: "Font Awesome 6 Free"; font-size: .85em; font-weight: 900; margin-left: .75rem; vertical-align: middle;}
.btn-primary.btn-wide{font-size: 1.05rem; padding: 1rem 1.5rem}
.btn-primary:hover{background-color: var(--color-main2); box-shadow: 0 6px 18px rgba(14,80,82,0);}
.btn-secondary{background-color: var(--color-main2); border-radius: var(--radius); color: var(--background)!important; cursor: pointer; display: inline-block; font-size: .9rem; font-weight: 500; padding: .75rem 1rem; text-align: center; text-transform: uppercase; transition: background-color .5s;}
.btn-secondary:hover{background-color: #000;}

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

figure{margin: 0}
figcaption{color: #9A9A9A; font-size: .8rem; font-style: italic; padding: .75rem 1rem .75rem 0; text-align: right}

button{font-family: Inter, system-ui, Arial, sans-serif; font-weight: 300}
.form .form-grid{display: grid; gap: 1rem;}
.form .form-field{position: relative;}
.form .form-field input, .form .form-field select, .form .form-field textarea{background-color: #FFF; border: 1px solid #DDD; border-radius: .5rem; font-family: Inter, system-ui, Arial, sans-serif; font-size: .85rem; font-weight: 400!important; padding: .8rem 1rem; transition: border-color .3s; width: 100%;}
.form .form-field input[type="checkbox"]{width: auto}
.form .form-field input[type="file"]{font-size: .7rem; font-style: italic;}
.form .form-field select option{font-weight: 300!important;}
.form .form-field textarea{min-height: 150px; resize: vertical;}
.form .form-field label{background-color: #FFF; color: #AAA; font-size: .8rem; left: 12px; padding: .1rem .5rem; pointer-events: none; position: absolute; top: .75rem; transition: all .2s ease;}
.form .form-field input:focus + label, .form .form-field select:focus + label, .form .form-field textarea:focus + label, .form .form-field input:not(:placeholder-shown) + label, .form .form-field textarea:not(:placeholder-shown) + label, .form .form-field select:not([value=""]) + label{color: var(--color-main); font-size: .6rem; top: -8px;}
.form .form-field input:focus, .form .form-field select:focus, .form .form-field textarea:focus{border-color: var(--color-main); outline: none;}


section p.action{margin-top: 1.5rem}
section.green{background-color: var(--color-main); color: #FFF; padding: 2rem 0}
section.green h3{color: #000;}
section.green h3::after{background-color: #000}
section.green .btn-primary{background-color: var(--color-main2);}
section.green .btn-primary:hover{background-color: #000}
section.light{background: var(--background-element); padding: 2rem 0}


header .header-top{background-color: var(--color-main); color: #FFF; padding: .5rem 0; transition: transform .28s ease, opacity .28s ease;}
header .header-top .header-top-row{align-items: center; display: flex; justify-content: space-between;}
header .header-top .header-top-row .top-left a{color: #FAFAFA; font-size: .85rem;}
header .header-top .header-top-row .top-left span{color: #FFF; font-size: 1rem; font-weight: 600; letter-spacing: .07rem; margin-left: .2rem;}
header .header-top .header-top-row .top-left a:hover, header .header-top .header-top-row .top-left a:hover span{color: var(--color-main-hover);}
header .header-top .top-right{color: #FAFAFA; font-size: .85rem; position: relative}
header .header-top .top-right img{height: auto; margin-left: .5rem; vertical-align: middle; width: 50px}
header .header-main{background: var(--background-element); box-shadow: 0 2px 15px rgba(0,0,0,.05); padding: .4rem 0; position: sticky; top: 0; transition: background-color .5s ease,padding .5s ease, box-shadow .5s ease; width: 100%; z-index: 80;}
header .header-main.shrink{background: var(--color-main); box-shadow: 0 4px 18px rgba(0,0,0,.25); padding: .25rem 0;}
header .header-main.sticky{position: fixed; top: 0; width: 100%; z-index: 90;}
header .header-main .header-row{align-items: center; display: flex; gap: 1rem; justify-content: space-between;}
header .header-main .logo img{height: auto; margin-right: 1rem; width: 120px; transition: width .22s ease;}
header .header-main.shrink .logo img{width: 80px;}
header .header-main .main-nav{font-size: .95rem; position: relative; top: 0}
header .header-main.shrink .main-nav{font-size: .9rem;}
header .header-main .main-nav .nav-list{align-items: center; display: flex; gap: 5rem; list-style: none; margin: 0; padding: 0;}
header .header-main .main-nav .nav-list .nav-item{line-height: .95; padding: .5rem 0; text-align: center;}
header .header-main .main-nav .nav-list .nav-item span{font-size: .75rem}
header .header-main.shrink .main-nav .nav-list .nav-item{padding: 0}
header .header-main .main-nav .nav-list .nav-item .nav-link{color: var(--text); font-weight: 500;}
header .header-main .main-nav .nav-list .nav-item .nav-link.active{color: var(--color-main);}
header .header-main.shrink .main-nav .nav-list .nav-item .nav-link.active{color: #000;}
header .header-main .main-nav .nav-list .nav-item .nav-link:hover{color: var(--color-main)}
header .header-main.shrink .main-nav .nav-list .nav-item .nav-link{color: #F5F7F6;}
header .header-main.shrink .main-nav .nav-list .nav-item .nav-link:hover{color: #000;}
header .header-main .main-nav .nav-list .nav-item .nav-link.home{display: none}
header .header-main .main-nav .nav-list .nav-item .nav-link.active{color: var(--color-main);}
header .header-main .main-nav .nav-list .nav-item .nav-link:hover{color: var(--color-main);}
header .header-main .main-nav .header-actions{align-items: center; display: flex; gap: 1rem;}
header .mega-menu{background-color: var(--background); border-radius: 6px; box-shadow: 0 15px 30px rgba(0,0,0,.06); display: grid; gap: 1rem; grid-template-columns: repeat(1,1fr); left: -.5rem; opacity:0; padding: 1.5rem; position: absolute; text-align: left; top: 100%; transform: translateY(1rem); transition: opacity .18s ease, transform .18s ease, visibility .18s; visibility: hidden; width: 40%; z-index: 90;}
header .header-main .has-mega:hover > .mega-menu, header .header-main .has-mega:focus-within > .mega-menu{opacity: 1; transform: translateY(0); visibility: visible;}
header .header-main.sticky .has-mega:hover > .mega-menu, header .header-main.sticky .has-mega:focus-within > .mega-menu{transform: translateY(10px);}
header .header-main .mega-menu .mega-col{position: relative;}
header .header-main .mega-menu .mega-col .mega-title{color: var(--color-main); display: inline-block; font-weight: 500; line-height: 1.2; margin-bottom: 1rem; padding-bottom: 1rem; position: relative}
header .header-main .mega-menu .mega-col .mega-title::after{background-color: var(--color-main); border-radius: 2px; bottom: 0; content: ""; height: 2px; left: 0; opacity: .7; position: absolute; width: 25%;}
header .header-main .mega-menu .mega-col .mega-list-opener{cursor: pointer; display: none; position: absolute; right: 0; top: 0;}
header .header-main .mega-menu .mega-col .mega-list-opener i{color: var(--color-main); font-size: 1rem; transition: transform .3s ease;}
header .header-main .mega-menu .mega-col.open .mega-list-opener i{transform: rotate(180deg);}
header .header-main .mega-menu .mega-col .mega-list{list-style: none; margin: 0; padding: 0}
header .header-main .mega-menu .mega-col .mega-list .mega-item{font-size: .9rem; margin-bottom: 1rem;}
header .header-main .mega-menu .mega-col .mega-list .mega-item:last-child{margin-bottom: 0}
header .header-main .mega-menu .mega-col .mega-list .mega-item a{color: #363636; display: block; font-weight: 500; text-decoration: none; width: 100%}
header .header-main .mega-menu .mega-col .mega-list .mega-item a:hover{color: var(--color-main2)}
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: #333; 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;}
}


#hero .hero-inner{background: linear-gradient(to left, #1E5A53 38%, rgba(30,90,83,0) 100%); display:flex; margin-bottom: 2.5rem;}
body#bd-produit #hero .hero-inner{min-height: 50vh}
#hero .hero-inner .hero-media{align-items: center; display: flex; flex: 0 0 62%; justify-content: center; padding-left: 5%; position: relative;}
#hero .hero-inner .hero-media .ha-animation{align-items: center; bottom: 0; display: flex; font-family: "Cinzel", serif; font-size: clamp(3rem, 3.6vw, 3.5rem); justify-content: center; left: 10%; position: absolute; right: 0; top: 0;}
#hero .hero-inner .hero-media .ha-animation .ha-item{align-items: center; bottom: 0; display: flex; justify-content: center; left: 0; opacity: 0; position: absolute; right: 0; text-align: center; top: 0; transition: opacity 1s ease, transform 1s ease; white-space: nowrap;}
#hero .hero-inner .hero-media .ha-animation .ha-slogan{font-size: clamp(2rem, 2.6vw, 2.5rem); text-align: center}
#hero .hero-inner .hero-media .ha-animation .ha-slogan .signature{color: var(--color-main); font-family: Inter, system-ui, Arial, sans-serif; font-size: clamp(.8rem, 1.2vw, 1.1rem); font-style: italic; margin-top: 1rem}
#hero .hero-inner .hero-media .ha-animation .ha-logo{font-size: clamp(2.3rem, 2.9vw, 2.8rem); margin-top: 0;}
#hero .hero-inner .hero-media .ha-animation .ha-logo img{height: auto; margin-right: 2rem; width: 250px;}
#hero .hero-inner .hero-media .ha-animation .ha-hide{opacity: 0!important; transform: translateY(-10px)!important;}
#hero .hero-inner .hero-media .ha-animation .ha-show{opacity: 1!important; transform: translateY(0)!important;}
#hero .hero-inner .hero-media .ha-animation .ha-logo.ha-slide-left{transform: translate(-25%, 0)!important;}
#hero .hero-inner .hero-media .hero-image{inset: 0; position: absolute; z-index: 2;}
#hero .hero-inner .hero-media .hero-image .hero-slide{display: flex; height: 100%; justify-content: center; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity 1.5s ease; width: 100%;}
#hero .hero-inner .hero-media .hero-image .hero-slide.is-active{opacity: 1;}
#hero .hero-inner .hero-media .hero-image .hero-slide img{height: 100%; object-fit: contain; transform: scale(.9); width: 100%;}
#hero .hero-inner .hero-media .hero-image .hero-slide[data-big]::after{align-items: center; background: #183330; border-radius: 50%; bottom: -1.5rem; box-shadow: 0 0 4px rgba(0,0,0,0.3); color: #FFF; content: "\f002"; display: flex; font-family: "Font Awesome 6 Free"; font-size: clamp(1.4rem, 3.2vw, 2.4rem); height: clamp(3.5rem, 7vw, 5rem); justify-content: center; pointer-events: none; position: absolute; right: clamp(.1rem, 6vw, 4.5rem); transition: transform 0.3s ease, background 0.3s ease; width: clamp(3.5rem, 7vw, 5rem); z-index: 5;}
#hero .hero-inner .hero-media .hero-image .hero-slide[data-big]:hover::after{background: #111F1D; transform: scale(1.05);}
#hero .hero-inner .hero-media .hero-dots{bottom: .75rem; display: flex; gap: 1rem; justify-content: center; left: 50%; position: absolute; transform: translateX(-50%); z-index: 999;}
#hero .hero-inner .hero-media .hero-dots .hero-dot{background-color: #EEE; border: 1px solid #464646; border-radius: 50%; cursor: pointer; display: block; height: 1.1rem; transition: background-color .5s ease; width: 1.1rem;}
#hero .hero-inner .hero-media .hero-dots .hero-dot.is-active{background-color: var(--color-main2);}
#hero .hero-inner .hero-media .hero-pattern{background-image: linear-gradient(90deg, rgba(30,90,83,.06) 20px, transparent 10px), linear-gradient(rgba(30,90,83,.06) 20px, transparent 10px); background-size: 24px 24px; inset: 0; opacity: .4; pointer-events: none; position: absolute; z-index: 1;}
#hero .hero-inner .hero-content{align-items: flex-start; color: #FFFFFF; display: flex; flex: 0 0 38%; flex-direction: column; justify-content: center; padding: 2.5rem 7.5% 2rem 0;}
body#bd-produit #hero .hero-inner .hero-content{background-color: var(--color-main);}
#hero .hero-inner .hero-content h1{color: #000; font-size: clamp(1.5rem, 2.1vw, 2rem); margin-bottom:1.5rem}
#hero .hero-inner .hero-content p{color: #F1F1F1; font-size: .95rem; line-height: 1.6; margin-bottom: 0}
#hero .hero-inner .hero-content nav{color: #F2F2F2; font-size: .7rem; font-style: italic; margin-bottom: 1.5rem}
#hero .hero-inner .hero-content nav a{color: #DDD}
#hero .hero-inner .hero-content nav a:hover{color: var(--color-main-bg-dark)}
#hero .hero-inner .hero-content nav .separ{font-size: .6rem; margin: 0 .3rem}
#hero .hero-inner .hero-content h1{color: #000; font-size: clamp(1.5rem, 2.1vw, 2rem); margin-bottom: 1rem;}
#hero .hero-inner .hero-content p{color: #F1F1F1; font-size: .95rem; line-height: 1.6; margin-bottom: 0}
#hero .hero-inner .hero-content .protection{color: #AAA; font-size: .75rem; font-style: italic; margin-top: 1rem}
.hero-lightbox{align-items: center; background-color: rgba(0,0,0,.9); display: none; justify-content: center; inset: 0; position: fixed; z-index: 1000;}
.hero-lightbox img{max-height: 90%; max-width: 90%;}
.hero-lightbox.show{display: flex;}


.items{position: relative}
.items .items-grid{display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 2rem;}
.items .items-grid .item.pill{background: var(--background-element); border-radius: var(--radius); display: flex; flex-direction: column; padding: 1rem; position: relative; transition: transform .3s ease;}
.items .items-grid .item.pill:hover{transform: translateY(-4px);}
.items .items-grid .item.pill.ajax{opacity: 0; transform: translateY(50px); transition: opacity 1s ease, transform 1s ease;}
.items .items-grid .item.pill.ajax.visible{opacity: 1; transform: translateY(0);}
.items .items-grid .item.pill .product-image{background-color: #FFF; border-radius: var(--radius); margin-bottom: 1.5rem; padding-top: .5rem}
.items .items-grid .item.pill .product-image img{display: block; height: auto; margin: 0 auto; transform: scale(.85); width: 85%; transition: transform .4s ease;}
.items .items-grid .item.pill:hover .product-image img, .items .items-grid .item .product-image img:hover{transform: scale(.92);}
.items .items-grid .item.pill h4{font-size: 1rem; font-weight: 500; margin-bottom: .5rem; text-align: center;}
.items .items-grid .item.pill h4 span{color: inherit; display: inline; white-space: nowrap;}
.items .items-grid .item.pill p{font-size: .9rem; line-height: 1.5; flex-grow: 1; text-align: center;}
.items .items-grid .item.pill .display_name{color: var(--color-main); font-size: 1rem; margin-bottom: 0; text-transform: uppercase;}
.items .items-grid .item.pill .product-cta{margin-top: 1rem; text-align: center; width: 100%}
.items .items-grid .item.pill .product-cta .btn-primary{padding: .6rem 1rem; width: 100%}
.items .items-grid .item.pill .price{align-items: center; background-color: var(--color-main); border-radius: var(--radius); color: #FFF; display: flex; font-size: .6rem; padding: .15rem .5rem; position: absolute; right: .35rem; top: .35rem;}
.items .items-grid .item.pill .price span{font-size: .95rem; font-weight: 500; margin-left: .5rem}
.items .items-grid .item.title-col{display: flex; flex-direction: column; justify-content: center; padding: 0 1rem 0 0; text-align: left;}
.items .items-grid .item.title-col p{font-size: .85rem}
.items .items-grid .item.title-col div{color: var(--color-main); font-size: 1.8rem; padding-right: .5rem; text-align: right; width: 90%}
.items .items-grid .items-empty{font-style: italic; grid-column: 1 / -1;}
.items .loader{align-items: center; display: flex; justify-content: center; margin: 1rem 0 4rem 0; opacity: 1; transform: translateY(0) scale(1); transition: all .5s ease; width: 100%;}
.items .loader:after{animation: spin 1s linear infinite; content: ""; border: 5px solid #CCC; border-radius: 50%; border-top-color: var(--color-main); height: 80px; width: 80px;}
.items .loader.fade-out{opacity: 0; transform: translateY(-20px) scale(.8);}
@keyframes spin{0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}


#features-pills::before, #features-pills::after{background-color: #EFEFEF; content: ""; display: block; height: 2px; left: 50%; margin-left: -25%; position: relative; width: 50%;}
#features-pills::before{margin-bottom: 2.5rem;}
#features-pills::after{margin-top: 2.5rem;}
#features-pills .features-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; grid-auto-rows: auto; width: 100%;}
#features-pills .features-grid .feature-col{align-items: center; display: flex; flex-direction: column; justify-content: center; text-align: center;}
#features-pills .features-grid .feature-col.title-col{display: flex; flex-direction: column; justify-content: center; padding: 0 1rem 0 0; text-align: left;}
#features-pills .features-grid .feature-col.title-col div{color: var(--color-main); font-size: 1.8rem; padding-right: .5rem; text-align: right; width: 100%}
#features-pills .features-grid .feature-col.pill{background-color: #FFF; border-radius: var(--radius); box-shadow: 0 10px 25px rgba(0,0,0,.1); padding: 3rem;}
#features-pills .features-grid .feature-col.pill i{color: var(--color-main); font-size: 2.8rem; margin-bottom: 1.5rem;}
#features-pills .features-grid .feature-col.pill p{color: var(--text2); font-size: .9rem; line-height: 1.3rem; margin: 0;}

#monument-360 .maincontent{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem;}
#monument-360 .maincontent .video-text{width: 45%}
#monument-360 .maincontent .video-text .arrow{color: var(--color-main); font-size: 1.8rem; margin-top: 2rem; padding-right: .5rem; text-align: right; width: 100%;}
#monument-360 .maincontent .video-wrapper{background-color: #FFF; border-radius: var(--radius); box-shadow: 0 10px 25px rgba(0,0,0,.1); padding: .5rem 0; width: 49.4%}
#monument-360 .maincontent .video-wrapper video{width: 100%}


.back-to-list{font-size: .95rem; margin-bottom: 2rem;}
.back-to-list a{color: var(--color-main); font-weight: 400}
.back-to-list a:hover{color: var(--color-main2)}
.back-to-list i{margin-right: .5rem}


#faq .faq-item{border-bottom: 1px solid #D3DAD7; margin: 0; padding: 1rem 0;}
#faq .faq-item button{background: none; border: none; cursor: pointer; display: block; font-size: 1.45rem; padding: .3rem 2rem .3rem 0; position: relative; text-align: left; width: 100%;}
#faq .faq-item button i{color: var(--color-main); display: inline-block; font-size: .85rem; margin-right: 1.2rem;}
#faq .faq-item button:focus{outline: 1px solid var(--color-main); outline-offset: 2px;}
#faq .faq-item button::after{content: '+'; font-size: 2rem; font-weight: 500; position: absolute; right: 0; top: 0}
#faq .faq-item button[aria-expanded="true"]::after{content: '−';}
#faq .faq-item .faq-answer{background: var(--background-element); display: none; font-size: 1rem; line-height: 1.4; margin: 1.2rem 0; padding: 1.5rem 2rem;}


#accueil section{margin-bottom: 3rem}
#accueil #categories{display: flex; flex-wrap: wrap; margin-bottom: 0}
#accueil #categories .categories-text{background-color: rgba(30,90,83,.03); padding: 2rem 3rem 2rem 7.5%; width: 30%}
#accueil #categories .categories-text h3::after{background-color: var(--text);}
#accueil #categories .categories-text p{color: #333; font-size: .95rem; line-height: 1.3rem}
#accueil #categories .categories-items{background-color: rgba(30,90,83,.05); display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); padding: 0 7.5% 0 0; width: 70%}
#accueil #categories .categories-items .item{background-color: #FFF; cursor: pointer; height: 100%; overflow: hidden; position: relative;}
#accueil #categories .categories-items .item img{display: block; height: auto; margin: 0 auto 3.5rem auto; transform: scale(.75); transition: transform .5s ease; width: 90%;}
#accueil #categories .categories-items .item:hover img{opacity: .25!important; transform: scale(.85);}
#accueil #categories .categories-items .item .overlay{background: linear-gradient(to top, rgba(30,90,83,.15), rgba(255,255,255,0) 40%); bottom: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 2;}
#accueil #categories .categories-items .item:hover .overlay{background: linear-gradient(to top, rgba(54,54,54,.95), rgba(54,54,54,.4));}
#accueil #categories .categories-items .item .overlay h4{bottom: 0; font-size: 1.15rem; left: 0; margin: 0; min-height: 75px; padding: 0 1rem; position: absolute; transition: transform .3s ease;}
#accueil #categories .categories-items .item:hover .overlay h4{color: #FFF; transform: translateY(-10%);}
#accueil #categories .categories-items .item .overlay .details{bottom: 0; color: #FFF; display: flex; flex-direction: column; justify-content: flex-end; left: 0; opacity: 0; padding: 1rem; position: absolute; transition: opacity .3s ease, transform .3s ease; width: 100%;}
#accueil #categories .categories-items .item:hover .overlay .details{opacity: 1; transform: translateY(-75%);}
#accueil #categories .categories-items .item .overlay .details p{font-size: .8rem; margin: 0; transform: translateY(10px); transition: transform .3s ease;}
#accueil #categories .categories-items .item:hover .overlay .details p{transform: translateY(0);}
#accueil #categories .categories-items .item .overlay .details .arrow{align-items: center; border: 1px solid #FFF; border-radius: 50%; display: flex; height: 2rem; justify-content: center; margin-top: .5rem; opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .3s ease; width: 2rem; box-sizing: border-box;}
#accueil #categories .categories-items .item:hover .overlay .details .arrow{opacity: 1; transform: translateY(0);}
#accueil #categories .categories-items .item .overlay .details .arrow span{display: block; font-size: 1rem; line-height: 1; text-align: center; width: 100%;}
#accueil #categories .categories-items .noitem{background-color: rgba(30,90,83,.03); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: 1rem}
#accueil #categories .categories-items .noitem h4{margin-bottom: 0}
#accueil #categories .categories-items .noitem p{font-size: .9rem; line-height: 1.3; margin-bottom: 0}
#accueil #categories .categories-items .noitem .btn-primary{font-size: .85rem}
#accueil #offer-overview{background-color: var(--color-main); color: #F1F1F1; font-size: 1.5rem; line-height: 1.5; padding: 2rem 0; text-align: center;}
#accueil #offer-overview .simon{color: #D6D6D6; font-size: .9rem; font-style: italic; margin-bottom: 0}


#catalog .maincontent{position: relative;}
#catalog #monuments-pills .monuments-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; grid-auto-rows: auto; margin: 2rem 0; width: 100%;}
#catalog #monuments-pills .monuments-grid .monument-col{align-items: center; display: flex; flex-direction: column; justify-content: center; text-align: center;}
#catalog #monuments-pills .monuments-grid .monument-col.title-col{align-items: flex-start; display: flex; flex-direction: column; justify-content: center; padding: 0 1rem 0 0; text-align: left;}
#catalog #monuments-pills .monuments-grid .monument-col.title-col p{font-size: .85rem}
#catalog #monuments-pills .monuments-grid .monument-col.title-col div{color: var(--color-main); font-size: 1.8rem; padding-right: .5rem; text-align: right; width: 90%}
#catalog #monuments-pills .monuments-grid .monument-col.pill{background-color: #FFF; box-shadow: 0 10px 25px rgba(0,0,0,.1); padding: 1.5rem; transition: box-shadow .5s ease;}
#catalog #monuments-pills .monuments-grid .monument-col.pill:hover{box-shadow: 0 15px 30px rgba(0,0,0,.15);}
#catalog #monuments-pills .monuments-grid .monument-col.pill img{display: block; height: auto; margin: 0 auto 2rem auto; transform: scale(.9); transition: transform .5s ease; width: 100%;}
#catalog #monuments-pills .monuments-grid .monument-col.pill:hover img{transform: scale(1);}
#catalog #monuments-pills .monuments-grid .monument-col.pill h4{margin-bottom: 0; min-height: 60px; transition: font-weight .5s ease-in-out;}
#catalog #monuments-pills .monuments-grid .monument-col.pill:hover h4{font-weight: 500;}
#catalog #granites{margin: 4rem 0 3rem 0;}


#product #product-info{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 3rem}
#product #product-info .product-left{flex: 0 0 58%}
#product #product-info.granites-0 .product-left{flex: 0 0 100%}
#product #product-info.granites-2 .product-left{flex: 0 0 42%}
#product #product-info .product-left h3{font-size: 1.2rem; font-weight: 400; line-height: 1.1; margin-bottom: 1rem;}
#product #product-info .product-left h3::after{display: none}
#product #product-info .product-left .price{font-size: .75rem; margin: 2rem 0;}
#product #product-info .product-left .price span{color: var(--color-main); font-size: 1.5rem; font-weight: 500; margin-left: .5rem}
#product #product-info .product-left .price i{color: var(--color-main); font-size: 1rem; margin-right: .5rem;}
#product #product-info .product-left .description{font-size: .9rem}
#product #product-info .product-left .product-cta{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1.5rem;}
#product #product-info .product-left .product-cta a:first-child{flex: 0 0 calc(55% - .5rem)}
#product #product-info .product-left .product-cta a:nth-child(2){flex: 0 0 calc(42% - .5rem)}
#product #product-info .product-right{display: flex; flex: 0 0 36.7%; flex-wrap: wrap; justify-content: space-between;}
#product #product-info.granites-2 .product-right{flex: 0 0 53%;}
#product #product-info .product-right .bloc{background-color: #FFF; box-shadow: 0 10px 25px rgba(0,0,0,.1); display: flex; flex: 0 0 100%; flex-direction: column; gap: 2rem; justify-content: center; padding: 2rem; text-align: center}
#product #product-info.granites-2 .product-right .bloc{flex: 0 0 48%;}
#product #product-info .product-right .bloc h4 a{display: block; font-weight: 500; margin-top: .2rem}
#product #product-info .product-right .bloc .granite-item .text{border-bottom: 1px solid #F3F3F3; font-size: 1.1rem; margin-bottom: .75rem; padding-bottom: .75rem}
#product #product-info .product-right .bloc .granite-item .color-badge{border: 1px solid #CCC; border-radius: 50%; display: inline-block; height: 25px; margin-right: .5rem;  vertical-align: middle; width: 25px;}
#product #product-info .product-right .bloc .granite-item .country-flag{border: 1px solid #CCC; border-radius: 50%; height: 25px; margin-right: .5rem; object-fit: cover; vertical-align: middle; width: 25px;}
#product #product-info .product-right .bloc .granite-description{color: #464646; font-size: .9rem; font-style: italic;}
#product .product-dimensions{background-color: #F2F5F5; margin-bottom: 3rem; padding: 2rem 0}
#product .product-dimensions h3{font-size: 1.2rem}
#product .product-dimensions p{line-height: 1.8;}
#product .product-dimensions .asterisque{color: var(--color-main)}
#product .product-dimensions .note{color: #464646; font-size: .75rem; font-style: italic; margin: 2rem 0 0 0;}


#granites .granite-col.title-col{display: flex; flex-direction: column; justify-content: center; padding: 0 1rem 0 0; text-align: left;}
#granites .items-grid .granite-col.title-col div{color: var(--color-main); font-size: 1.8rem; padding-right: .5rem; text-align: right; width: 100%}
#granites .items-grid .item h4{min-height: 2rem}
#granites .items-grid .item .granite-item{align-items: center; display: flex; font-size: 1rem; justify-content: center; margin-bottom: .5rem;}
#granites .items-grid .item strong{font-weight: 400; margin-right: 1rem;}
#granites .items-grid .item .color-badge{border: 1px solid #CCC; border-radius: 50%; display: inline-block; height: 30px; margin-right: .5rem; width: 30px;}
#granites .items-grid .item .country-flag{border: 1px solid #CCC; border-radius: 50%; height: 30px; margin-right: .5rem; object-fit: cover; vertical-align: middle; width: 30px;}


body#bd-granit section.green{margin: 3rem 0}
#granite #granite-info{display: flex; flex-wrap: wrap; justify-content: space-between;}
#granite #granite-info .granite-left{flex: 0 0 58%}
#granite #granite-info .granite-left .description{font-size: .9rem;}
#granite #granite-info .granite-left .granite-cta{margin: 2rem 0}
#granite #granite-info .granite-left .granite-items{background-color: #F2F5F5; padding: 2rem}
#granite #granite-info .granite-left .granite-items .granite-item{align-items: center; display: flex;}
#granite #granite-info .granite-left .granite-items .granite-item:first-child{margin-bottom: 1rem}
#granite #granite-info .granite-left .granite-items .granite-item strong{display: inline-block; width: 120px}
#granite #granite-info .granite-left .granite-items .granite-item .color-badge{border: 1px solid #CCC; border-radius: 50%; display: inline-block; height: 30px; margin-right: .5rem; width: 30px;}
#granite #granite-info .granite-left .granite-items .granite-item .country-flag{border: 1px solid #CCC; border-radius: 50%; height: 30px; margin-right: .5rem; object-fit: cover; vertical-align: middle; width: 30px;}
#granite #granite-info .granite-right{flex: 0 0 38%;}
#granite #granite-info .granite-right img{height: auto; width: 100%}


#society #society-expertise{margin-bottom: 3rem}
#society #society-expertise .steps-points{display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); margin-top: 2.5rem;}
#society #society-expertise .steps-points .step-point{align-items: center; background-color: var(--background-element); border: 1px solid #EEE; border-radius: var(--radius); display: flex; flex-direction: column; padding: 2rem; text-align: center; transition: transform .3s ease, box-shadow .3s ease;}
#society #society-expertise .steps-points .step-point:hover{box-shadow: 0 10px 25px rgba(0,0,0,.07); transform: translateY(-6px);}
#society #society-expertise .steps-points .step-point i{color: var(--color-main); font-size: 2.5rem;}
#society #society-expertise .steps-points .step-point .step-content h4{color: #1E1E1E; font-size: 1.1rem; font-weight: 600; line-height: 1.2; margin: 1rem 0; min-height: 2rem;}
#society #society-expertise .steps-points .step-point .step-content p{color: #555; font-size: .95rem; line-height: 1.4; margin: 0; text-align: center}
#society #mission{margin: 3rem 0}


#configurator .configurator-cta{margin-top: 2rem}
#configurator .configurator-cta .micro-text{color: var(--color-main); font-size: .75rem; font-style: italic; margin-top: .5rem; padding-left: .4rem}
#configurator #configurator-steps{margin: 3rem 0}
#configurator #configurator-steps .timeline{border-left: 2px solid rgba(224,224,224,.5); margin-top: 3rem; padding-left: 4.5rem; position: relative;}
#configurator #configurator-steps .timeline-step{margin-bottom: 3rem; position: relative;}
#configurator #configurator-steps .timeline-step:last-child{margin-bottom: 0;}
#configurator #configurator-steps .timeline-step .bubble{align-items: center; background-color: var(--color-main); border-radius: 50%; color: #FFF; display: flex; font-size: 1.2rem; font-weight: 600; height: 70px; justify-content: center; left: -6.1rem; position: absolute; top: -.5rem; transition: all .3s ease; width: 70px;}
#configurator #configurator-steps .timeline-step .bubble:hover{box-shadow: 0 8px 20px rgba(0,0,0,.25); transform: scale(1.1);}
#configurator #configurator-steps .timeline-step .content h4{font-size: 1.3rem; font-weight: 500; margin-bottom: .5rem;}
#configurator #configurator-steps .timeline-step .content p{color: #464646; font-size: 1rem; line-height: 1.4; margin-bottom: 0;}
#configurator #monument-360{margin-bottom: 3rem}
#configurator #configurator-trust .trust-points{display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); margin-top: 2.5rem;}
#configurator #configurator-trust .trust-points .trust-point{align-items: center; background-color: #FFF; border: 1px solid #EEE; border-radius: var(--radius); box-shadow: 0 10px 25px rgba(0,0,0,.1); display: flex; flex-direction: column; padding: 3rem; text-align: center; transition: transform .3s ease, box-shadow .3s ease;}
#configurator #configurator-trust .trust-points .trust-point:hover{box-shadow: 0 10px 25px rgba(0,0,0,.07); transform: translateY(-6px);}
#configurator #configurator-trust .trust-points .trust-point i{color: var(--color-main); font-size: 2.5rem;}
#configurator #configurator-trust .trust-points .trust-point .trust-content h4{color: #1E1E1E; font-size: 1.1rem; font-weight: 600; line-height: 1.2; margin: 1rem 0; min-height: 2rem;}
#configurator #configurator-trust .trust-points .trust-point .trust-content p{color: #555; font-size: .95rem; line-height: 1.4; margin: 0; text-align: center}


#contact #contact-block{background-color: var(--background-element); margin: 2rem 0 3rem 0; padding: 2.5rem 0}
#contact #contact-block .contact-grid{display: grid; gap: 2rem; grid-template-columns: 1fr 1fr;}
#contact #contact-block .contact-info h4{color: var(--color-main); font-size: 1.5rem; margin-bottom: 1.5rem;}
#contact #contact-block .contact-info .logo{margin-bottom: 1rem}
#contact #contact-block .contact-info .logo img{height: auto; width: min(25%, 250px);}
#contact #contact-block .contact-info > div{border-bottom: 1px solid #EEE; margin-bottom: 1.5rem; padding-bottom: 1.5rem}
#contact #contact-block .contact-info > div:last-child{border-bottom: 0; margin-bottom: 0; padding-bottom: 0}
#contact #contact-block .contact-info .coordonees{font-size: 1.15rem;}
#contact #contact-block .contact-info .schedules span{color: var(--color-main);}
#contact #contact-block .contact-info .reinsurance{font-size: .9rem}
#contact #contact-block .contact-info a{color: inherit;}
#contact #contact-block .contact-info a:hover{color: var(--color-main);}
#contact #contact-block .contact-info p:last-child{margin-bottom: 0}
#contact #contact-block .contact-info p i{color: var(--color-main); display: inline-block; font-size: .8rem; min-width: 35px; vertical-align: middle;}
#contact #contact-block .contact-form .honeypot{display: none}
#contact #contact-block .contact-form .form-response{border-radius: var(--radius); display: none; font-size: .9rem; margin-top: 1rem; padding: .8rem 1rem;}
#contact #contact-block .contact-form .form-response.success{background: #CFE7ED; border: 1px solid #9FCBD6; color: var(--color-main); display: block;}
#contact #contact-block .contact-form .form-response.error{background: #FDEAEA; border: 1px solid #F3BCBC; color: #B92C2C; display: block;}
#contact #inspiration{margin-bottom: 3rem;}
#contact #services{margin-bottom: 3rem;}
#contact #services .trust-points{display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); margin-top: 2.5rem;}
#contact #services .trust-points .trust-point{align-items: center; background-color: var(--background-element); border: 1px solid #D6D6D6; border-radius: var(--radius); display: flex; flex-direction: column; padding: 2rem; text-align: center; transition: transform .3s ease, box-shadow .3s ease;}
#contact #services .trust-points .trust-point:hover{box-shadow: 0 10px 25px rgba(0,0,0,.07); transform: translateY(-6px);}
#contact #services .trust-points .trust-point i{color: var(--color-main); font-size: 2.5rem;}
#contact #services .trust-points .trust-point .trust-content h4{color: #1E1E1E; font-size: 1.1rem; font-weight: 600; line-height: 1.2; margin: 1rem 0; min-height: 2rem;}
#contact #services .trust-points .trust-point .trust-content p{color: #555; font-size: .95rem; line-height: 1.4; margin: 0; text-align: center}
#contact #map #map_content{height: 50vh; width: 100%}


.cms h2, .cms h3{font-size: 1.4rem; margin-top: 2rem}
.cms ul{padding-left: 2rem;}
.cms ul li{padding-left: .5rem;}


footer{background: var(--background-element); line-height: 1.25; margin-top: 4rem; padding: 3rem 0 0 0}
footer h4{border-bottom: 1px solid var(--color-main2); color: var(--color-main2); font-size: 1.3rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem}
footer a{color: var(--text)!important;}
footer a:hover{color: var(--color-main)!important;}
footer ul{list-style: none; padding: 0; margin: 0;}
footer li{margin-bottom: 1.75rem;}
footer p{line-height: 1.25}
footer .maincontent{display: flex; flex-wrap: wrap; gap: 3rem; justify-content: space-between;}
footer .maincontent .bloc{flex: 1}
footer .maincontent .bloc > div{border-bottom: 1px solid #DADADA; margin-bottom: 1.75rem; padding-bottom: 1.75rem}
footer .maincontent .bloc > div:last-child{border-bottom: 0; margin-bottom: 0; padding-bottom: 0}
footer .identite .logo img{height: auto; max-width: 250px; width: 70%}
footer .identite .coordonnees div{display: flex; gap: 1rem; line-height: 1.4; margin-bottom: 1.5rem;}
footer .identite .coordonnees div:last-child{margin-bottom: 0;}
footer .identite .coordonnees div i{color: var(--color-main); display: inline-block; font-size: .95rem; margin-top: .2rem; vertical-align: middle; width: 35px}
footer .identite .schedules span{color: var(--color-main2); white-space:nowrap}
footer .identite .socials a{color: var(--color-main)!important; display: inline-block; font-size: 1.25rem; margin-left: 1rem; transition: color .3s;} 
footer .identite .socials a:hover{color: var(--text)!important;}
footer .nav ul li.separ{border-bottom: 1px solid #DADADA; margin-bottom: 1.6rem; padding-bottom: 1.6rem}
footer .copyright{background-color: var(--color-main); margin-top: 2rem; padding: .75rem 0;}
footer .copyright .maincontent{color: #E6E6E6; display: block; font-size: .75rem; text-align: center}


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

	html{font-size: 22px}

  .maincontent{width: 90%}

	header .header-main .main-nav .nav-list{gap: 3rem;}

  #hero .hero-inner .hero-media .ha-animation{left: 5%;}
  #hero .hero-inner .hero-media .ha-animation .ha-logo.ha-slide-left{transform: translateX(-22%)!important;}
  #hero .hero-inner .hero-content{padding-right: 5%}

  #accueil #categories .categories-text{padding-left: 5%}
  #accueil #categories .categories-items{padding-right: 5%}

}

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

  #hero .hero-inner .hero-media .ha-animation .ha-logo.ha-slide-left{transform: translateX(-19%)!important;}

}

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

	html{font-size: 21px}

  #hero .hero-inner .hero-media .ha-animation .ha-logo.ha-slide-left{transform: translateX(-16%)!important;}

  #faq .faq-item button{font-size: 1.35rem;}

}

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

	header .header-main .main-nav .nav-list{gap: 2rem;}

  #accueil #categories{flex-direction: column;}
  #accueil #categories .categories-text, #accueil #categories .categories-items{padding-left: 5%; padding-right: 5%; width: 100%}
  #accueil #categories .categories-items .item:hover .overlay .details{transform: translateY(-80%);}
  #accueil #categories .categories-items .noitem{padding-right: 20%}
  #accueil #offer-overview{font-size: 1.3rem;}

  #catalog #monuments-pills .monuments-grid{grid-template-columns: repeat(3, 1fr);}

}

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

	header .header-main .main-nav .nav-list{gap: 1.5rem;}

  #hero .hero-inner .hero-media .ha-animation .ha-logo.ha-slide-left{transform: translateX(-10%)!important;}

}

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

	html{font-size: 20px}

  h1{font-size: 1.5rem;}
  h2, h3{font-size: 1.5rem;}

	.maincontent{width: 92%}

	body.menu-open{overflow: hidden;}
	header .burger{display: flex}
	header .header-main .header-row{justify-content: space-between;}
	header .header-main .main-nav{background-color: var(--background); display: flex; flex-direction: column; font-size: 1.25rem; 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: 100%; z-index: 200;}
	header .header-main .main-nav.open{right: 0;}
	header .header-main .main-nav .nav-list{display: block}
  header .header-main .main-nav .nav-list .nav-item{padding: .7rem 0; text-align: left;}
  header .header-main .main-nav .nav-list .nav-item br{display: none;}  
  header .header-main .main-nav .nav-list .nav-item .nav-link.home{display: inline-block;}
	header .header-main .mega-menu{box-shadow: none; display: block; margin: 1rem 0; opacity: inherit; padding: 0 0 0 2rem; position: static; transform: inherit; visibility: inherit; width: 100%}
  header .header-main .mega-menu .mega-col .mega-title{color: inherit;}
  header .header-main .mega-menu .mega-col .mega-title::before{content: '\f111'; color: var(--color-main); font-family: "Font Awesome 6 Free"; font-size: 5px; margin-right: .6rem; vertical-align: middle}
  header .header-main .mega-menu .mega-col .mega-title::after{display: none}
  header .header-main .mega-menu .mega-col .mega-title br{display: none}
  header .header-main .mega-menu .mega-col .mega-title:last-child{margin-bottom: 0}
  header .header-main .mega-menu .mega-col .mega-list-opener{display: block;}
  header .header-main .mega-menu .mega-col .mega-list{background-color: inherit; margin-bottom: 1rem; padding: 1rem 1rem 1rem 0}
  header .header-main .mega-menu .mega-col .mega-list .mega-item{font-size: 1.15rem; margin-bottom: 1.2rem}
  header .header-main .mega-menu .mega-col.open .mega-list{display: block;}
	header .header-main .burger{display: flex; z-index: 210;}
	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);}

  #hero .hero-inner{background: linear-gradient(to left, rgba(30, 90, 83, .6) 0, rgba(30,90,83,0) 100%); flex-direction: column; min-height: auto}
  #hero .hero-inner .hero-media{min-height: 15vh; width: 100%}
  body#bd-produit #hero .hero-inner .hero-media{min-height: 50vh;}
  #hero .hero-inner .hero-content{background-color: var(--color-main); padding: 1.5rem 4% 1.5rem 4%; width: 100%}
  #hero .hero-inner .hero-content nav{margin-bottom: 1rem;}
  #hero .hero-inner .hero-content h1{margin-bottom: 1rem;}

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

  #features-pills .features-grid{grid-template-columns: repeat(3, 1fr);}

  #monument-360 .maincontent{flex-direction: column;}
  #monument-360 .maincontent .video-text{width: 100%}
  #monument-360 .maincontent .video-wrapper{width: 100%}
  #monument-360 .maincontent .video-text .arrow{display: none}

  #accueil section{margin-bottom: 2rem}
  #accueil #categories .categories-items{grid-template-columns: repeat(3, 1fr);}
  #accueil #categories .categories-text, #accueil #categories .categories-items{padding-left: 4%; padding-right: 4%;}

  #catalog #monuments-pills .monuments-grid{grid-template-columns: repeat(2, 1fr);}

  #product #product-info{flex-direction: column;}
  #product #product-info .product-left, #product #product-info.granites-2 .product-left, #product #product-info .product-right, #product #product-info.granites-2 .product-right{flex: 0 0 100%}
  #product #product-info .product-left .product-cta{margin-bottom: 2rem}

  #granite #granite-info{flex-direction: column; gap: 2rem}
  #granite #granite-info .granite-left{flex: 0 0 100%;}
  #granite #granite-info .granite-right{flex: 0 0 100%;}

  #society #society-expertise .steps-points{grid-template-columns: repeat(2, 1fr);}

  #contact #contact-block .contact-grid{grid-template-columns: 1fr;}
  #contact #contact-block .contact-info .logo{display: none;}
  #contact #contact-block .contact-form{margin-top: 2rem}

	footer h4{margin-bottom: 1rem; padding-bottom: 1rem}
	footer li{margin-bottom: 1.25rem;}
	footer .maincontent{display: flex; flex-direction: column; gap: 2rem;}
	footer .copyright{margin-top: 1rem}
	footer .copyright .maincontent{text-align: left}

}

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

  #configurator #configurator-trust .trust-points{grid-template-columns: repeat(2, 1fr);}

  #contact #services .trust-points{grid-template-columns: repeat(2, 1fr);}

}

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

	header .header-top .header-top-row{display: block; text-align: center}

  #hero .hero-inner .hero-media .hero-image .hero-slide[data-big]::after{bottom: -.75rem;}

	.items .items-grid{grid-template-columns: repeat(1,1fr);}
	.items .items-grid .item h4{margin-bottom: 1rem; min-height: auto;}

  #features-pills .features-grid{grid-template-columns: repeat(2, 1fr);}
  #features-pills .features-grid .feature-col.pill{padding: 2rem 1.5rem;}
  #features-pills .features-grid .feature-col.pill i{font-size: 2.3rem;}

  #accueil #categories .categories-items{grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr);}
  #accueil #categories .categories-items .item img{margin-bottom: 2.5rem;}
  #accueil #categories .categories-items .item .overlay h4{font-size: .8rem; min-height: 48px;}

  #catalog #monuments-pills .monuments-grid{grid-template-columns: repeat(1, 1fr);}

  #society #society-expertise .steps-points{grid-template-columns: repeat(1, 1fr);}

  #configurator #configurator-steps .timeline{border-left: none; margin-top: 1.5rem; padding-left: 0; position: relative;}
  #configurator #configurator-steps .timeline-step{margin-bottom: 2rem; padding-left: 0; position: relative;}
  #configurator #configurator-steps .timeline-step:last-child{margin-bottom: 0;}
  #configurator #configurator-steps .timeline-step .bubble{font-size: 1.2rem; left: 0; margin-bottom: .8rem; position: relative; top: auto; transform: translateX(0); transition: all .3s ease;}
  #configurator #configurator-steps .timeline-step .content p{font-size: 1rem;}
  #configurator #configurator-trust .trust-points{grid-template-columns: repeat(1, 1fr);}

  #contact #services .trust-points{grid-template-columns: repeat(1, 1fr);}

}

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

  .items .items-grid .title-col{display: none!important}

}

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

  h2, h3{font-size: 1.4rem;}

  header .header-top .header-top-row .top-left a{font-size: .8rem;}
	header .header-top .top-right{display: none}
	header .header-main .logo img{width: 90px}

  #hero .hero-inner .hero-media{display: none}
  body#bd-produit #hero .hero-inner .hero-media{display: block;}
  #hero .hero-inner .hero-content h1{font-size: 1.4rem;}

  .items .items-grid .item{padding: 1.5rem 1rem;}

  #features-pills::before{margin-bottom: 1rem;}
  #features-pills::after{margin-top: 1rem;}
  #features-pills .features-grid{grid-template-columns: repeat(1, 1fr);}
  #features-pills .features-grid .feature-col.pill{padding: 2.5rem 2rem;}
  #features-pills .features-grid .feature-col.title-col div{display: none}

  #faq .faq-item button{font-size: 1.05rem;}
  #faq .faq-item .faq-answer{padding: 1rem;}

  #accueil #categories .categories-items{grid-template-columns: repeat(1, 1fr);}
  #accueil #categories .categories-items .item .overlay h4{font-size: 1.15rem;}
  #accueil #categories .categories-items .noitem{display: none}

  #product #product-info.granites-2 .product-right .bloc{flex: 0 0 100%; margin-bottom: 2rem}
  #product #product-info.granites-2 .product-right .bloc:last-child{margin-bottom: 0}
  #product #product-info .product-left .product-cta a:first-child, #product #product-info .product-left .product-cta a:nth-child(2){flex: 0 0 100%}

  #society #society-expertise .steps-points .step-point{padding: 1.5rem}

  #configurator #configurator-trust .trust-points .trust-point{padding: 1.5rem}

  #contact #services .trust-points{margin-top: 2rem;}
  #contact #services .trust-points .trust-point{padding: 1.5rem}

  footer{font-size: .95rem}
  footer .identite .coordonnees div{gap: 0}

}