:root{
  --color-main: #1E7C93; 
  --color-main-bg-dark: #2CA9C8; 
  --color-main2: #93351E; 
  --color-main2-bg-dark: #ff8900;
  --color-musulman: #4CAF50; 
  --color-chretien: #2196F3; 
  --color-israelite: #FFC107; 
  --color-asiatique: #E91E63; 
  --background: #FFF; 
  --background-element: #F8F8F8;
  --background-element2: #EFF5F4;
  --background-element-bg-dark: #262626; 
  --muted: #4b4b4b; 
  --radius: 1rem; 
  --shadow: rgba(0, 0, 0, .03); 
  --text: #262626; 
}

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

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

a, i, header .header-top .top-left a, header .burger, .items #filter-button, .btn-secondary{-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{color: var(--text); font-size: 2rem; font-family: "Montserrat", sans-serif; font-weight: 800; line-height: 1.1; margin-bottom: 2rem}
h1 span{color: #C2590B;}
h2, h3{font-family: "Montserrat", sans-serif; font-size: 1.65rem; font-weight: 600; line-height: 1.1; margin-bottom: 1.5rem;}
h2 span, h3 span{color: var(--color-main); display: block!important; font-size: 1.3rem; font-weight: 400; margin-top: .2rem}
h4{font-family: "Montserrat", sans-serif; font-size: 1.3rem; font-weight: 400; line-height: 1.1; margin-bottom: 1rem;}
h4 span{color: var(--color-main); display: inline-block;}
.blue h2 span, .blue h3 span{color: #000}
.dark h3 span, .dark h4 span{color: #2CA9C8}

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: 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-family: "Montserrat", sans-serif; font-size: .9rem; font-weight: 600!important; line-height: 1; padding: .8rem 1.2rem; text-align: center; text-transform: uppercase; transition: background-color .5s, box-shadow .5s;}
.blue .btn-primary{background: #000}
.btn-primary.btn-external::after{content: "\f08e"; font-family: "Font Awesome 6 Free"; font-size: .85em; font-weight: 900; margin-left: .5rem; 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: none; color: #FFF!important}
.btn-secondary{border: 1px solid var(--color-main); border-radius: var(--radius); color: var(--color-main)!important; cursor: pointer; display: inline-block; font-family: "Montserrat", sans-serif; font-size: .9rem; font-weight:600; padding: .8rem 1.2rem; text-align: center; text-transform: uppercase;}
.btn-secondary:hover{border-color: var(--color-main2); color: var(--color-main2)!important;}

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

.blue{background: var(--color-main); color: #FFF; padding: 2rem 0;}
.blue p{color: #F5F5F5;}
.blue .cta{margin-top: 1.5rem}
.dark{background-color: #161616; color: #FAFAFA; padding: 2rem 0;}
.darktoblue{transition: background-color 2s ease, color 2s ease; padding: 2rem 0;}
.darktoblue p:last-child{margin-bottom: 0}

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


.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: "Montserrat", 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;}


header .header-top{background: color-mix(in srgb, #000 85%, var(--color-main) 15%); color: #FFF; padding: .7rem 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 .top-left a{color: #FFF; font-size: 1.2rem; font-weight: 500; letter-spacing: .05rem;}
header .header-top .top-left span{color: var(--color-main); font-weight: 700}
header .header-top .top-left a:hover{color: var(--color-main);}
header .header-top .top-left a::before{content: '\f095'; color: var(--color-main); font-family: "Font Awesome 6 Free"; margin-right: 1rem}
header .header-top .top-right{color: #DDD; font-size: .85rem; position: relative}
header .header-top .top-right span{color: var(--color-main); margin: 0 .2rem}
header .header-top .top-right img{height: auto; margin-left: .5rem; vertical-align: middle; width: 50px}
header .header-main{background: var(--background); box-shadow: 0 4px 18px rgba(0,0,0,.08); padding: .6rem 0; position: sticky; top: 0; transition: padding .3s ease; width: 100%; z-index: 80;}
header .header-main.shrink{padding: .2rem 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: 2rem; justify-content: space-between;}
header .header-main .logo img{height: auto; margin-right: 1rem; width: 50px; transition: width .22s ease;}
header .header-main.shrink .logo img{width: 40px;}
header .header-main .main-nav{display: flex; flex: 1 1 auto; gap: 2rem; justify-content: space-between; position: relative; top: 0}
header .header-main .main-nav .nav-list{align-items: center; display: flex; gap: 3.5rem; list-style: none; margin: 0; padding: 0;}
header .header-main .main-nav .nav-list .nav-item{padding: .8rem 0}
header .header-main .main-nav .nav-list .nav-item .nav-link{color: var(--text); font-weight: 600;}
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 .nav-list .nav-item .nav-link.home{display: none}
header .header-main .main-nav .header-actions{align-items: center; display: flex; gap: 1rem;}
header .header-main.shrink .main-nav .header-actions .btn-primary, header .header-main.shrink .main-nav .header-actions .btn-secondary{font-size: .85rem; padding: .7rem 1.2rem;}
header .mega-menu{background: var(--background); border-radius: 6px; box-shadow: 0 18px 60px rgba(0,0,0,.12); display: grid; gap: 1rem; grid-template-columns: repeat(4,1fr); left: 0; opacity:0; padding: 2rem; position: absolute; top: 100%; transform: translateY(1rem); transition: opacity .18s ease, transform .18s ease, visibility .18s; visibility: hidden; width: 100%; z-index: 90;}
header .has-mega:hover > .mega-menu, header .has-mega:focus-within > .mega-menu{opacity: 1; transform: translateY(0); visibility: visible;}
header .mega-menu .mega-col{position: relative;}
header .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 .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 .mega-menu .mega-col .mega-list-opener{cursor: pointer; display: none; position: absolute; right: 0; top: 0;}
header .mega-menu .mega-col .mega-list-opener i{color: var(--color-main); font-size: 1rem; transition: transform .3s ease;}
header .mega-menu .mega-col.open .mega-list-opener i{transform: rotate(180deg);}
header .mega-menu .mega-col .mega-list{list-style: none; margin: 0; padding: 0}
header .mega-menu .mega-col .mega-list .mega-item{font-size: .95rem; margin-bottom: 1rem;}
header .mega-menu .mega-col .mega-list .mega-item:last-child{margin-bottom: 0}
header .mega-menu .mega-col .mega-list .mega-item::before{content: '\f111'; color: var(--color-main); font-family: "Font Awesome 6 Free"; font-size: 5px; margin-right: .6rem; vertical-align: middle}
header .mega-menu .mega-col .mega-list .mega-item a{color: #363636; font-weight: 500; text-decoration: none;}
header .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: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;}


#page-hero{background-position: center; background-repeat: no-repeat; background-size: cover; color: #FFF; display: flex; flex-direction: column; justify-content: center; margin-bottom: 2rem; min-height: 30vh; overflow: hidden; padding: 1rem 0; position: relative;}
#page-hero::before{backdrop-filter: blur(3px); background: rgba(0,0,0,.55); content: ""; inset: 0; position: absolute; z-index: 1;}
#page-hero .hero-overlay{position: relative; z-index: 2;}
#page-hero .maincontent nav{font-size: .75rem; font-style: italic; margin-bottom: 1rem}
#page-hero .maincontent nav a{color: #FFF}
#page-hero .maincontent nav a:hover{color: var(--color-main-bg-dark)}
#page-hero .maincontent nav .separ{font-size: .6rem; margin: 0 .3rem}
#page-hero .maincontent h1{color: #FFF; font-weight: 600; margin-bottom: 0;}
#page-hero .maincontent h2{color: var(--color-main-bg-dark); font-size: 1.2rem; font-weight: 500; margin-bottom: 1rem;}
#page-hero .maincontent p{font-size: .9rem; line-height: 1.25; margin-bottom: 0; opacity: .95;}
#page-hero .maincontent nav a, #page-hero .maincontent h1, #page-hero .maincontent p{text-shadow: 0 1px 2px rgba(0, 0, 0, .8);}


#bloc-leadergranits{margin: 3rem 0;}
body#bd-catalogue.nomargefooter #bloc-leadergranits{margin-bottom: 0;}


#monument-360 .maincontent{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; margin-bottom: 3rem}
#monument-360 .maincontent .video-text{width: 45%}
#monument-360 .maincontent .video-text .cta{margin-top: 2rem}
#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%}


#bloc-points-forts .points-grid{display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem;}
#bloc-points-forts .points-grid .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;}
#bloc-points-forts .points-grid .point:hover{box-shadow: 0 10px 25px rgba(0,0,0,.07); transform: translateY(-6px);}
#bloc-points-forts .points-grid .point i{color: var(--color-main); font-size: 2.5rem;}
#bloc-points-forts .points-grid .point h4{color: #1E1E1E; font-size: 1.05rem; font-weight: 600; line-height: 1.2; margin: 1rem 0; min-height: 2.5rem;}
#bloc-points-forts .points-grid .point h4 span{color: var(--color-main);}
#bloc-points-forts .points-grid .point p{color: #555; font-size: .95rem; line-height: 1.4; margin: 0; text-align: center}


.items{position: relative}
.items #filter-button{background: #030C0F; border-radius: 10px; color: #FFF; cursor: pointer; font-size: .8rem; padding: .5rem .8rem; position: absolute; right: 0; text-transform: uppercase; top: 0; z-index: 10;}
.items #filter-button:hover{background: var(--color-main);}
.items #filter-button i{font-size: 1.25rem; margin-left: .8rem; vertical-align: middle;}
.items .items-grid{display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 2rem;}
.items .items-grid .item{background-color: #FAFAFA; border-radius: var(--radius); display: flex; flex-direction: column; padding: 2rem 1rem; transition: transform .3s ease;}
.items .items-grid .item.ajax{opacity: 0; transform: translateY(50px); transition: opacity 1s ease, transform 1s ease;}
.items .items-grid .item.ajax.visible{opacity: 1; transform: translateY(0);}
.items .items-grid .item a{align-items: center; display: flex; flex-direction: column; flex-grow: 1; transition: transform .3s ease;}
.items .items-grid .item a:hover{transform: translateY(-4px);}
.items .items-grid .item .product-image{background-color: #FFF; border-radius: var(--radius); margin-bottom: 1.5rem;}
.items .items-grid .item .product-image img{display: block; height: auto; transform: scale(.95); width: 100%; transition: transform .4s ease;}
.items .items-grid .item .product-image img:hover{transform: scale(1);}
.items .items-grid .item h4{font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; text-align: center;}
.items .items-grid .item h4 span{display: block; font-weight: 500; margin-top: .3rem;}
.items .items-grid .item p{font-size: .9rem; line-height: 1.5; flex-grow: 1; text-align: center;}
.items .items-grid .item .ref{color: #333; margin-bottom: .5rem}
.items .items-grid .item .name{color: #4A4A4A; min-height: 2.5rem}
.items .items-grid .item .product-cta{text-align: center; width: 100%}
.items .items-grid .item .product-cta .btn-primary{min-width: 80%}
.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);}}


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


#filter-overlay{background: rgba(0,0,0,.4); display: none; height: 100%; position: fixed; left: 0; top: 0; width: 100%; z-index: 100}
#filter-drawer{background: #FFF; box-shadow: -2px 0 12px rgba(0,0,0,.2); display: flex; flex-direction: column; height: 100%; max-width: 1200px; padding: 1rem; position: fixed; right: -100%; top: 0; transition: right .4s ease; width: 80%; z-index: 101}
#filter-drawer.open{right: 0}
#filter-drawer h4{font-size: 1.2rem}
#filter-drawer .drawer-content{flex: 1; overflow-y: auto}
#filter-drawer .drawer-content h4{margin-bottom: 1rem}
#filter-drawer .drawer-content .drawer-type{margin-bottom: 2rem}
#filter-drawer .drawer-content .drawer-type:last-child{margin-bottom: 0}
#filter-drawer .drawer-colors{display: grid; grid-template-columns: repeat(8, 1fr);}
#filter-drawer .drawer-colors .color-pill{align-items: center; cursor: pointer; display: flex; font-size: .8rem; transition: transform .3s ease;}
#filter-drawer .drawer-colors .color-pill:hover{transform: translateY(-4px);}
#filter-drawer .drawer-colors .color-pill .color-badge{border: 2px solid #ccc; border-radius: 50%; display: inline-block; height: 35px; margin-right: .5rem; transition: border-color .5s ease; width: 35px;}
#filter-drawer .drawer-colors .color-pill:hover .color-badge{border-color: var(--color-main);}
#filter-drawer .drawer-colors .color-pill.active .color-badge{border: 3px solid var(--color-main);}
#filter-drawer .drawer-countries{display: grid; grid-template-columns: repeat(8, 1fr);}
#filter-drawer .drawer-countries .country-pill{align-items: center; cursor: pointer; display: flex; font-size: .8rem; margin-bottom: 1rem; transition: transform .3s ease;}
#filter-drawer .drawer-countries .country-pill:hover{transform: translateY(-4px);}
#filter-drawer .drawer-countries .country-pill .country-flag{border: 2px solid #ccc; border-radius: 50%; display: inline-block; height: 35px; margin-right: .5rem; transition: border-color .5s ease; width: 35px;}
#filter-drawer .drawer-countries .country-pill:hover .country-flag{border-color: var(--color-main);}
#filter-drawer .drawer-countries .country-pill.active .country-flag{border: 3px solid var(--color-main);}
#filter-drawer .drawer-subcategories{display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(120px, auto)); justify-content: start;}
#filter-drawer .subcategory-css{background-color: #FAFAFA; border: 6px solid #FAFAFA; border-radius: var(--radius); cursor: pointer; display: block; overflow: hidden; padding: 1rem .5rem; text-align: center; transition: transform .3s ease, border-color .3s ease, background-color .3s ease, color .3s ease;}
#filter-drawer .subcategory-css:hover{transform: translateY(-4px);}
#filter-drawer .subcategory-css.active{background-color: rgba(255, 230, 200, .2); border-color: var(--color-main); color: var(--color-main);}
#filter-drawer .subcategory-css .thumb{background: #FFF; border-radius: var(--radius); margin-bottom: .5rem;}
#filter-drawer .subcategory-css .thumb img{display: block; height: auto; transform: scale(.95); transition: transform .4s ease; width: 100%;}
#filter-drawer .subcategory-css h4{color: #333; font-size: .75rem; margin-bottom: 0}
#filter-drawer .subcategory-css.active h4{color: var(--color-main); font-weight: 500}
#filter-drawer .drawer-footer{margin-top: auto; padding: 1rem 0; text-align: center;}
#filter-drawer .drawer-footer .btn-primary, #filter-drawer .drawer-footer .btn-secondary{font-size: .95rem; padding: .8rem 2rem;}
#filter-drawer .drawer-footer .btn-secondary{margin-left: .5rem}


#accueil section{margin-bottom: 4rem}
#accueil #hero{background-color: color-mix(in srgb, #FFF 90%, #262626 10%); margin-bottom: 0; padding: 1.5rem 0;}
#accueil #hero .maincontent{align-items: center; display: flex; justify-content: space-between;}
#accueil #hero .hero-text{flex: 0 0 65%; position: relative;}
#accueil #hero .hero-text .hero-logo{margin-bottom: 1rem}
#accueil #hero .hero-text .hero-logo img{height: auto; width: min(20%, 200px);}
#accueil #hero .hero-text h1{font-size: 2.2rem; font-weight: 700; letter-spacing: -1px; margin-bottom: 1rem;}
#accueil #hero .hero-text .hero-slogan{font-size: 1.31rem; font-weight: 500; line-height: 1.3;}
#accueil #hero .hero-text .hero-baseline{color: #3a3a3a; font-size: 1.165rem; font-weight: 400; line-height: 1.25;}
#accueil #hero .hero-text .hero-actions{align-items: center; display: flex; gap: 1rem; margin-top: 2rem}
#accueil #hero .hero-text .hero-badge{align-items: center; background-color: var(--color-main); border: 2px solid rgba(255,255,255.9); border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,.1); color: #FFF; display: flex; flex-direction: column; font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 500; height: 300px; justify-content: center; line-height: 1.3; position: absolute; right: -150px; top: 40%; transform: translateY(-50%) rotate(0); text-align: center; width: 300px;}
#accueil #hero .hero-text .hero-badge.animate{transform: translateY(-50%) rotate(8deg);}
#accueil #hero .hero-badge .badge-category{display: inline-block; opacity: 1; transform: translateY(0); transition: opacity .8s ease, transform .8s ease;}
#accueil #hero .hero-badge .badge-category.hide{opacity: 0; transform: translateY(-15px);}
#accueil #hero .hero-text .btn-primary, #accueil #hero .hero-text .btn-secondary{padding: 1rem 1.5rem; font-size: 1.2rem;}
#accueil #hero .hero-image{align-items: center; display: flex; flex: 0 0 35%; height: 100%; justify-content: flex-end; min-height: 600px; position: relative;}
#accueil #hero .hero-image img{height: 100%; max-width: 90%; object-fit: contain; opacity: 0; position: absolute; right: 0; top: 0; transform: scale(.95) translateX(0); transition: opacity 1.5s ease-in-out, transform 6s ease-in-out; width: auto; z-index: 1;}
#accueil #hero .hero-image img.active{opacity: 1; transform: scale(1) translateX(-10px); z-index: 2;}

#accueil #intro-hero h2{font-size: 2.5rem; line-height: 1.2; margin-bottom: 1.5rem;}
#accueil #intro-hero p{font-size: 1.2rem; line-height: 1.5;}

#accueil #categories .categories-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2rem;} 
#accueil #categories .categories-grid .categorie{background-color: var(--background-element); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 10px); 
 border-radius: var(--radius); color: #1A1A1A; display: block; min-height: 36vh; overflow: hidden; position: relative; text-decoration: none;}
#accueil #categories .categories-grid .categorie .categorie-bg{background-position: center; background-repeat: no-repeat; background-size: 50%; border-radius: var(--radius); bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top:2rem; transition: background-size .6s ease, opacity .6s ease; z-index: 1;}
#accueil #categories .categories-grid .categorie:hover .categorie-bg{background-size: 65%; opacity: .1 !important;}
#accueil #categories .categories-grid .categorie-monuments .categorie-bg{background-image: url('../images/accueil/categorie-monuments-funeraires.webp');}
#accueil #categories .categories-grid .categorie-plaques .categorie-bg{background-image: url('../images/accueil/categorie-plaques-funeraires.webp');}
#accueil #categories .categories-grid .categorie-fleurs .categorie-bg{background-image: url('../images/accueil/categorie-fleurs-artificielles.webp');}
#accueil #categories .categories-grid .categorie-accessoires .categorie-bg{background-image: url('../images/accueil/categorie-accessoires-funeraires.webp');}
#accueil #categories .categories-grid .categorie .categorie-overlay{background: linear-gradient(to top, rgba(30,124,147,.8), rgba(255,255,255,.8)); bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: opacity .4s ease;} 
#accueil #categories .categories-grid .categorie:hover .categorie-overlay{opacity: 1;} 
#accueil #categories .categories-grid .categorie .categorie-content{display: flex; flex-direction: column; height: 100%; justify-content: space-between; padding: 2rem; position: relative; transition: transform .4s ease; z-index: 2} 
#accueil #categories .categories-grid .categorie:hover .categorie-content{transform: translateY(-10px);} 
#accueil #categories .categories-grid .categorie .categorie-content h4{font-size: 1.25rem; font-weight: 500; letter-spacing: .3px; line-height: 1.2; margin-bottom: 2rem; min-height: 3rem; padding-bottom: .5rem; position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, .08);}
#accueil #categories .categories-grid .categorie .categorie-content h4::after{background-color: var(--color-main); border-radius: 2px; bottom: 0; content: ""; height: 2px; left: 0; opacity: .7; position: absolute; width: 25%;}
#accueil #categories .categories-grid .categorie .categorie-content p{font-size: .85rem; line-height: 1.3; margin-bottom: 0; opacity: 0; transform: translateY(20px); transition: opacity .4s ease, transform .4s ease;} 
#accueil #categories .categories-grid .categorie:hover .categorie-content p{opacity: 1; transform: translateY(0);} 
#accueil #categories .categories-grid .categorie .categorie-content .btn-primary{display: block; margin-top: 2rem; opacity: 0; transform: translateY(10px); transition: background-color .5s ease, opacity .4s ease, transform .4s ease;} 
#accueil #categories .categories-grid .categorie:hover .categorie-content .btn-primary{opacity: 1; transform: translateY(0);}

#accueil #modeles-monde .modeles-grid{display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); margin-top: 2rem;}
#accueil #modeles-monde .modeles-grid .modele-item{background-color: #1E1E1E; border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,.2); overflow: hidden; padding: 1.5rem; position: relative; text-align: center; transition: box-shadow .3s ease, transform .3s ease;}
#accueil #modeles-monde .modeles-grid .modele-item:hover{box-shadow: 0 8px 20px rgba(0,0,0,.3); transform: translateY(-5px);}
#accueil #modeles-monde .modeles-grid .modele-item i{color: var(--accent); font-size: 3.5rem; margin-bottom: 1.5rem; transition: color .3s ease;}
#accueil #modeles-monde .modeles-grid .modele-item h4{color: #FFF; font-size: 1.25rem; margin-bottom: 1.5rem;}
#accueil #modeles-monde .modeles-grid .modele-item p{color: #CCC; font-size: 1rem; line-height: 1.3;}
#accueil #modeles-monde .modeles-grid .modele-item .cta{margin-top: 2rem;}
#accueil #modeles-monde .modeles-grid .modele-item .cta .btn-primary{padding: .8rem 2rem;}
#accueil #modeles-monde .modeles-grid .modele-item::before{border-radius: 50%; content: ""; height: 120%; left: 50%; opacity: .2; position: absolute; top: 0; transform: translate(-50%,-50%); width: 120%; z-index: 0;}
#accueil #modeles-monde .modeles-grid .modele-item.musulman i{color: var(--color-musulman);}
#accueil #modeles-monde .modeles-grid .modele-item.musulman::before{background: radial-gradient(circle, rgba(76,175,80,.2) 0%, transparent 70%);}
#accueil #modeles-monde .modeles-grid .modele-item.chretien i{color: var(--color-chretien);}
#accueil #modeles-monde .modeles-grid .modele-item.chretien::before{background: radial-gradient(circle, rgba(33,150,243,.2) 0%, transparent 70%);}
#accueil #modeles-monde .modeles-grid .modele-item.israelite i{color: var(--color-israelite);}
#accueil #modeles-monde .modeles-grid .modele-item.israelite::before{background: radial-gradient(circle, rgba(255,193,7,.2) 0%, transparent 70%);}
#accueil #modeles-monde .modeles-grid .modele-item.asiatique i{color: var(--color-asiatique);}
#accueil #modeles-monde .modeles-grid .modele-item.asiatique::before{background: radial-gradient(circle, rgba(233,30,99,.2) 0%, transparent 70%);}

#accueil #cta-footer{font-size: 1.1rem; margin-bottom: 0}


#catalogue .not-exhaustive{background-color: var(--background-element2); border-radius: var(--radius); color: #333; font-size: .9rem; margin-bottom: 0; padding: 1rem;}
#catalogue .not-exhaustive a{color: #000; font-weight: 500}
#catalogue .not-exhaustive a:hover{color: var(--color-main)}
#catalogue .not-exhaustive i{color: var(--color-main); margin-right: 0.5rem;}
#catalogue .intro strong{font-weight: 500}
#catalogue .grid{display: grid; gap: 1rem; grid-template-columns: repeat(4,1fr); margin-top: 2rem;}
#catalogue .catalogue-card{background-color: #FAFAFA; border-radius: var(--radius); display: block; overflow: hidden; padding: 2rem 1rem; transition: transform .3s ease}
#catalogue .catalogue-card:hover, #catalogue .catalogue-card:focus{transform: translateY(-4px);}
#catalogue .catalogue-card .thumb{background: #FFF; border-radius: var(--radius); margin-bottom: 1.5rem;}
#catalogue .catalogue-card .thumb img{display: block; height: auto; transform: scale(.95); transition: transform .4s ease; width: 100%;}
#catalogue .catalogue-card:hover .thumb img, #catalogue .catalogue-card:focus .thumb img{transform: scale(1);}
#catalogue .catalogue-card h4{font-size: 1.2rem; font-weight: 600; margin-bottom: .5rem;  min-height: 3rem; text-align: center;}
#catalogue .catalogue-card p{color: #4A4A4A; font-size: .9rem; line-height: 1.2; min-height: 2.5rem; text-align: center;}
#catalogue .catalogue-card .product-cta{text-align: center; width: 100%}
#catalogue .catalogue-card .product-cta .btn-primary{min-width: 80%}
#catalogue .items-grid{margin: 2rem 0}


body#bd-produit #page-hero{margin-bottom: 0}
#product .product-container{display: flex;}
#product .product-container .product-image{background-image: linear-gradient(to right, rgba(30,124,147,.1), rgba(30,124,147,0)); color: #AAA; flex: 1; font-size: .7rem; font-style: italic; line-height: 1.3; padding: 0 2rem 1.5rem 2rem; text-align: center;}
#product .product-container .product-image .product-image-content{background-position: center; background-repeat: no-repeat; background-size: contain; height: 92%; width: 92%;}
#product .product-container .product-info{flex: 1; min-height: 600px; padding: 3rem 10% 2.5rem 4rem}
#product .product-container .product-info h4{font-size: 1.05rem; font-weight: 500; margin-bottom: .8rem}
#product .product-container .product-info .info{color: #3A3A3A;}
#product .product-container .product-info .info.ref{color: #5A5A5A; font-size: .95rem; font-style: italic;}
#product .product-container .product-info .product-granite{background-color: #FAFAFA; box-shadow: 0 2px 6px rgba(0,0,0,.05); margin-top: 1.5rem; margin-left: -1rem; padding: 1rem;}
#product .product-container .product-info .product-granite .granite-line{display: flex; flex-wrap: nowrap; gap: 3rem; margin-bottom: 1rem;}
#product .product-container .product-info .product-granite .granite-line:last-child{margin-bottom: 0;}
#product .product-container .product-info .product-granite .granite-item{align-items: center; color: #3A3A3A; display: flex; font-size: 1rem;}
#product .product-container .product-info .product-granite .granite-item strong{color: var(--color-main); font-weight: 500; margin-right: 1rem;}
#product .product-container .product-info .color-badge{border: 1px solid #ccc; border-radius: 50%; display: inline-block; height: 30px; margin-right: .5rem; vertical-align: middle; width: 30px;}
#product .product-container .product-info .country-flag{border: 1px solid #ccc; border-radius: 50%; height: 30px; margin-right: .5rem; object-fit: cover; vertical-align: middle; width: 30px;}
#product .product-container .product-info .product-dimensions{margin-top: 1.5rem}
#product .product-container .product-info .product-dimensions{background-color: var(--background-element2); box-shadow: 0 2px 6px rgba(0,0,0,.05); margin-left: -1rem; padding: 1rem;}
#product .product-container .product-info .product-dimensions .dimensions{font-size: .95rem; line-height: 1.55;}
#product .product-container .product-info .product-dimensions .dimensions p{line-height: 2}
#product .product-container .product-info .product-dimensions .dimensions p:last-child{margin-bottom: 0}
#product .product-container .product-info .product-dimensions .asterisque{color: var(--color-main); font-size: .6rem; font-weight: 700; vertical-align: super;}
#product .product-container .product-info .product-dimensions .note{color: #444; font-size: .7rem; font-style: italic; margin-top: 1rem}
#product .product-container .product-info .product-cta{border-bottom: 1px solid #F2F2F2; border-top: 1px solid #F6F6F6; margin: 1.5rem 0; padding: 1.5rem 0}
#product .product-container .product-info.nogranit .product-cta{border-top: none; padding-top: 0}
#product .product-container .product-info .product-cta .btn-primary{margin-right: .5rem}
#product .product-container .product-info .product-description .accessories-tip a{color: var(--color-main); font-size: .85rem;}
#product .product-container .product-info .product-description .accessories-tip a:hover{color: #000;}
#product .product-container .product-info .product-description .accessories-tip::before{color: var(--color-main); content: "\e4b8"; display: inline-block; font-family: "Font Awesome 6 Free"; font-size: .9rem; margin-right: .4rem}
#product .product-container .product-info .product-description .description{color: #4A4A4A; font: 400 .9rem "Lora", serif; line-height: 1.5;}
#product .product-container .product-info .product-description .description p:last-child{margin-bottom: 0}
#product .product-container .product-info .product-description .description strong{color: var(--color-main);}
body#bd-produit #accessories, body#bd-produit #estimate{margin-bottom: 3rem}
body#bd-produit.nomargefooter #estimate{margin-bottom: 0}


#granites .items-grid .item h4{min-height: 2rem}
#granites .items-grid .item .granite-item{align-items: center; display: flex; font-size: 1rem; 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;}
#granites .items-grid .item .product-cta{margin-top: 1rem}


body#bd-granit #bloc-traceability{margin: 3rem 0}
body#bd-granit #bloc-traceability.nogranites{margin-bottom: 0}
#granite .granite-container{display: flex; gap: 4rem}
#granite .granite-container .granite-image{background-color: #FFF; background-position: center; background-repeat: no-repeat; background-size: cover; flex: 1}
#granite .granite-container .granite-info{flex: 1; min-height: 750px; padding: 3rem 0}
#granite .granite-container .granite-info .granite-item{align-items: center; display: flex; margin-bottom: 1rem}
#granite .granite-container .granite-info .granite-item strong{display: inline-block; width: 120px}
#granite .granite-container .granite-info .granite-item .color-badge{border: 1px solid #ccc; border-radius: 50%; display: inline-block; height: 30px; margin-right: .5rem; width: 30px;}
#granite .granite-container .granite-info .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-container .granite-info .granite-cta{border-bottom: 1px solid #F2F2F2; border-top: 1px solid #F6F6F6; margin: 1.5rem 0; padding: 1.5rem 0}
#granite .granite-container .granite-info .description{background-color: #FAFAFA; color: #363636; font: 300 .9rem "Lora", serif; margin-left: -1rem; margin-top: 1.5rem; padding: 1rem;}


#society #society-nav{margin: 2rem 0; text-align: center;}
#society #society-nav ul{display: inline-flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; list-style: none;}
#society #society-nav ul li a{color: var(--color-main); font-size: 1.05rem; font-weight: 400;}
#society #society-nav ul li a:hover{color: var(--color-main2);}
#society #society-nav ul li + li::before{color: rgba(30,124,147,.5); content: "•"; font-weight: 400; margin: 0 1rem;}
#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 #values{margin: 3rem 0; padding: 3rem 0 1rem 0}
#society #values #val_quality{--couleurBloc: var(--color-main); --couleurCercleIcone: #145863;}
#society #values #val_delay{--couleurBloc: var(--color-main2); --couleurCercleIcone: #955c20;}
#society #values #val_customization{--couleurBloc: #274C94; --couleurCercleIcone: #142d5f;}
#society #values #val_traditions{--couleurBloc: #3A5A80; --couleurCercleIcone: #1f3450;}
#society #values #val_manufacturing{--couleurBloc: var(--color-main); --couleurCercleIcone: #145863;}
#society #values{background-color: var(--background-element)}
#society #values .bloc{background-color: #FFF; border-radius: 3rem; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 2rem; overflow: hidden;}
#society #values .bloc:last-child{margin-bottom: 0;}
#society #values .bloc .num{background-color: var(--couleurBloc); position: relative; width: 20%}
#society #values .bloc .num .numero{align-items: center; color: #FFF; display: flex; font-family: "Montserrat", sans-serif; font-size: clamp(80px, 4.5vw + 35px, 280px); font-weight: 700; height: 100%; justify-content: center; opacity: .5; width: 100%;}
#society #values .bloc .num .iconwrap{align-items: center; background-color: #fff; display: flex; border: 16px solid var(--couleurCercleIcone); border-radius: 50%; height: 120px; justify-content: center; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); width: 120px; z-index: 10;}
#society #values .bloc .num .iconwrap i{color: var(--couleurBloc); font-size: 1.8rem;}
#society #values .bloc .content{padding: 2rem 2rem 2rem 6rem; width: 80%}
#society #values .bloc .content h4{color: var(--couleurBloc);}
#society #values .bloc .content .pointforts div{margin-bottom: .3rem;}
#society #values .bloc .content .pointforts i{color: var(--couleurBloc); font-size: .4rem; margin-right: .5rem; vertical-align: middle;}
#society #workshop{color: #FFF; overflow: hidden; margin-bottom: 3rem; padding: 3rem 0; position: relative;}
#society #workshop .workshop-bg{background: linear-gradient(to bottom right, rgba(0,0,0,.9), rgba(30,124,147,.5)), url('../images/atelier-leadergranits-bg.webp?1') center/cover no-repeat; inset: 0; position: absolute; z-index: 1;}
#society #workshop .maincontent{position: relative; z-index: 2;}
#society #workshop .scale{color: var(--color-main-bg-dark)}
#society #workshop .workshop-card{animation: fadeInSlide .8s ease forwards; background: rgba(255, 255, 255, .08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(7px); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); margin: 0 auto; max-width: 70%; opacity: 0; padding: 2.5rem; transform: translateY(20px);}
@keyframes fadeInSlide{to {transform: translateY(0); opacity: 1;}}
#society #workshop p{color: rgba(255,255,255,.9); line-height: 1.65;}
#society #workshop .workshop-proofs{display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; list-style: none; margin-top: 2rem; padding: 0;}
#society #workshop .workshop-proofs li{color: rgba(255,255,255,.8); padding-left: 1rem; position: relative;}
#society #workshop .workshop-proofs li::before{background: var(--color-main); border-radius: 50%; content: ""; height: 6px; left: 0; position: absolute; top: 8px; width: 6px;}
#society #teams{margin-bottom: 3rem}
#society #teams .maincontent{align-items: start; display: grid; gap: 4rem; grid-template-columns: 1fr 750px;}
#society #teams .teams-left .teams-points{list-style: none; margin: 2rem 0 2.5rem 0}
#society #teams .teams-left .teams-points li{font-size: .95rem; margin-bottom: 1rem}
#society #teams .teams-left .teams-points li strong{color: var(--color-main); font-weight: 500; margin-right: .35rem;}
#society #teams .teams-left .teams-meta{display:flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2rem;}
#society #teams .teams-left .teams-meta .meta-item{background: var(--background-element); border-radius: var(--radius); min-width: 200px; padding: 2rem 1.5rem; text-align: center;}
#society #teams .teams-left .teams-meta .meta-num{color: var(--color-main); font-size: 1.3rem; font-weight: 600; margin-bottom: .35rem}
#society #teams .teams-left .teams-meta .meta-label{font-size: .85rem;}
#society #teams .teams-right{align-items: stretch; display: flex; flex-direction: column; gap: 1rem; justify-content: center;}
#society #teams .teams-right .teams-figure{border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.45); margin: 0;}
#society #teams .teams-right .teams-figure img{border-radius: var(--radius) var(--radius) 0 0; display:block; filter: saturate(.95) contrast(.95); height: auto; object-fit: cover; width: 100%;}
#society #teams .teams-right .teams-icons{background: var(--background-element); border-radius: var(--radius); display: flex; flex-wrap: nowrap; gap: 1.5rem; justify-content: space-between; margin-top: .5rem; padding: 1.5rem 1.2rem;}
#society #teams .teams-right .teams-icons div{align-items: center; display: flex; flex-direction: column; min-width: auto;}
#society #teams .teams-right .teams-icons i{color: var(--color-main); font-size: 1.3rem; margin-bottom: .5rem;}
#society #teams .teams-right .teams-icons span{font-size: .75rem; opacity: .8;}


#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%}


#configurator .configurator-cta{margin-top: 2rem}
#configurator .configurator-cta .micro-text{color: var(--color-main); font-size: .8rem; font-style: italic; margin-top: .4rem; padding-left: .4rem}
#configurator #configurator-steps{margin: 3rem 0}
#configurator #configurator-steps .timeline{border-left: 2px solid rgba(224,224,224,.5); margin-top: 2rem; 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-main2); border-radius: 50%; color: #FFF; display: flex; font-size: 1.3rem; 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: #DDD; font-size: 1rem; line-height: 1.4; margin-bottom: 0;}
#configurator #configurator-screenshot{margin-bottom: 3rem}
#configurator #configurator-screenshot .screenshot-container{border-radius: var(--radius); box-shadow: 0 8px 20px rgba(0,0,0,.2); margin-top: 1.5rem}
#configurator #configurator-screenshot .screenshot-container img{height: auto; width: 100%}
#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: 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;}
#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}


#sale .sale-cta{margin-top: 2rem}
#sale .sale-cta .micro-text{color: var(--color-main); font-size: .75rem; font-style: italic; margin-top: .4rem; padding-left: .2rem}
#sale .darktoblue .sale-cta .micro-text{color: var(--color-main2-bg-dark);}
#sale #plaques-process{margin: 3rem 0}
#sale #plaques-highlight{margin-bottom: 3rem}
#sale .steps .steps-points{display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); margin-top: 2.5rem;}
#sale .steps .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;}
#sale .steps .steps-points .step-point:hover{box-shadow: 0 10px 25px rgba(0,0,0,.07); transform: translateY(-6px);}
#sale .steps .steps-points .step-point i{color: var(--color-main); font-size: 2.5rem;}
#sale .steps .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;}
#sale .steps .steps-points .step-point .step-content p{color: #555; font-size: .95rem; line-height: 1.4; margin: 0; text-align: center}


.cms h4{font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem;}
.cms ul{padding-left: 2rem;}
.cms ul li{padding-left: .5rem;}


footer{background: color-mix(in srgb, #000 90%, var(--color-main) 10%); color: #E3ECEE; line-height: 1.25; margin-top: 4rem; padding: 3rem 0}
body.nomargefooter footer{margin-top: 0}
footer h4{color: var(--color-main-bg-dark); margin-bottom: 2rem}
footer a{color: #F5FAFB!important;}
footer a.important{color: var(--color-main2-bg-dark)!important;}
footer a:hover{color: var(--color-main-bg-dark)!important;}
footer a.important:hover{color: var(--color-main-bg-dark)!important;}
footer ul{list-style: none; padding: 0; margin: 0;}
footer li{margin-bottom: 1.7rem;}
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 color-mix(in srgb, #000 75%, var(--color-main-bg-dark) 25%); margin-bottom: 1.5rem; padding-bottom: 1.5rem}
footer .maincontent .bloc > div:last-child{border-bottom: 0; margin-bottom: 0; padding-bottom: 0}
footer .identite .logo img{height: auto; max-width: 273px; width: 80%}
footer .identite .coordonnees p{margin-bottom: 1.5rem;}
footer .identite .coordonnees p:last-child{margin-bottom: 0;}
footer .identite .coordonnees p i{color: var(--color-main-bg-dark); display: inline-block; font-size: .8rem; min-width: 35px; vertical-align: middle;}
footer .identite .schedules span{color: var(--color-main-bg-dark); white-space:nowrap}
footer .identite .reinsurance{font-size: .95rem; line-height: 1.4;}
footer .nav ul li.separ{border-bottom: 1px solid color-mix(in srgb, #000 75%, var(--color-main-bg-dark) 25%); margin-bottom: 1.2rem; padding-bottom: 1.2rem}
footer .infos .socials a{color: #D0DBDD!important; display: inline-block; font-size: 1.5rem; margin-right: 1rem; transition: color .3s;} 
footer .infos .socials a:last-child{margin-right: 0}
footer .infos .socials a:hover{color: var(--color-main-bg-dark)!important;}
footer .infos .copyright{color: #AAB7BA; font-size: .85rem; font-style: italic}




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

	html{font-size: 22px}

	#accueil #hero .hero-text .hero-badge{font-size: 25px; height: 240px; line-height: 1.2; right: -120px; width: 240px;}

  #accueil #categories .categories-grid .categorie .categorie-bg{background-size: 70%;}

}

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

	#accueil #hero .hero-text .hero-badge{top: 2%; transform: translateY(0) rotate(0);}
	#accueil #hero .hero-text .hero-badge.animate{transform: translateY(0) rotate(8deg);}

  #society #teams .maincontent{grid-template-columns: 1fr 600px;}

}

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

	html{font-size: 21px}

	.maincontent{width: 90%}

  #accueil #hero .hero-image{min-height: 550px;}

  #product .product-container .product-info{padding-right: 5%}
  #product .product-container .product-info .product-granite .granite-line{gap: 1.5rem}

  #society #values .bloc .num{width: 25%}
  #society #values .bloc .content{width: 75%}

}

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

  #accueil #hero .hero-text .hero-badge{font-size: 23px; height: 200px; line-height: 1.2; right: -100px; top: -1rem; width: 200px;}

}

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

  #catalogue .catalogue-card p{min-height: 3.5rem;}

  #society #teams .maincontent{display: block;}
  #society #teams .teams-left{margin-bottom: 2rem}

}

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

	#accueil #categories .categories-grid{grid-template-columns: repeat(2, 1fr);}
	#accueil #categories .categories-grid .categorie .categorie-bg{background-size: 50%;}
	#accueil #categories .categories-grid .categorie:hover .categorie-bg{background-size: 55%;}

}

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

  #product .product-container{flex-direction: column;}
  #product .product-container .product-image .product-image-content{min-height: 60vh;}
  #product .product-container .product-info{padding: 2rem 5%}

  #granite .granite-container{flex-direction: column; gap: 2rem}
  #granite .granite-container .granite-image{min-height: 50vh;}
  #granite .granite-container .granite-info{min-height: auto; padding: 0}

}

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

	html{font-size: 20px}

	.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.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: 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 .nav-link.home{display: inline-block;}
  header .mega-menu{box-shadow: none; display: block; margin: 1rem 0; opacity: inherit; padding: 0 0 0 2rem; position: static; transform: inherit; visibility: inherit;}
  header .mega-menu .mega-col .mega-title{color: inherit;}
  header .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 .mega-menu .mega-col .mega-title::after{display: none}
  header .mega-menu .mega-col .mega-title br{display: none}
  header .mega-menu .mega-col .mega-title:last-child{margin-bottom: 0}
  header .mega-menu .mega-col .mega-list-opener{display: block;}
  header .mega-menu .mega-col .mega-list{background-color: #FDFDFD; display: none; margin-bottom: 1rem; padding: 1rem 1rem 1rem 2rem}
  header .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);}

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

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

  #filter-drawer .drawer-subcategories{display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}

  #accueil #hero{padding-top: 1rem}
	#accueil #hero .maincontent{display: block;}
	#accueil #hero .hero-text .hero-logo{display: none}
	#accueil #hero .hero-text h1{font-size: 2.5rem;}
  #accueil #hero .hero-text h1 br{display: none}
	#accueil #hero .hero-text .hero-logo img{width: 70%}
	#accueil #hero .hero-text .hero-badge{display: none;}
  #accueil #hero .hero-image{margin: 0 auto; min-height: 40vh; padding-top: 3rem; width: 80%;}

  #catalogue .grid{grid-template-columns: repeat(2,1fr);}
  #catalogue .catalogue-card h4{min-height: 2rem;}
  #catalogue .catalogue-card p{min-height: 2rem;}

  #product .product-container .product-info{padding: 2rem 4%}
  #product .product-container .product-info .product-granite, #product .product-container .product-info.nogranit .product-dimensions{margin-right: -1rem;}

  #granite .granite-container .granite-info .description{margin-right: -1rem;}

  #society #values .bloc .num{width: 30%}
  #society #values .bloc .content{width: 70%}

  #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 .maincontent{display: flex; flex-direction: column;}

}

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

  #filter-drawer .drawer-colors, #filter-drawer .drawer-countries{grid-template-columns: repeat(4, 1fr);}
  #filter-drawer .drawer-colors .color-pill{margin-bottom: .8rem}

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

	#accueil #categories .categories-grid .categorie .categorie-bg{background-size: 70%;}
	#accueil #categories .categories-grid .categorie:hover .categorie-bg{background-size: 65%;}

	#accueil #modeles-monde .modeles-grid{grid-template-columns: repeat(1, 1fr);}

  #society #society-nav{display: none}
  #society #society-expertise .steps-points{grid-template-columns: repeat(2, 1fr);}
  #society #values .bloc .num{margin-bottom: 2rem; min-height: 220px; width: 100%;}
  #society #values .bloc .num .iconwrap{border-width: 12px; height: 100px; left: 50%; top: 100%; transform: translate(-50%, -50%); width: 100px;}
  #society #values .bloc .num .iconwrap i{font-size: 1.6rem;}
  #society #values .bloc .content{padding: 2rem 1.5rem; width: 100%;}
  #society #values .bloc .content .pointforts div{font-size: .9rem;}
  #society #workshop .workshop-card{max-width: 100%;}

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

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

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

}

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

  #bloc-points-forts .points-grid{grid-template-columns: 1fr;}
  #bloc-points-forts .points-grid .point h4{min-height: auto}
  #bloc-points-forts .points-grid .point{gap: 1rem}

	header .header-top .header-top-row{display: block; text-align: center}
	header .header-top .header-top-row div{margin-bottom: .5rem}
  header .header-main .logo img{width: 45px}
	header .header-main .main-nav{font-size: 1.1rem; padding: 6rem 12% 2rem 3%;}
	header .header-main .main-nav .header-actions{display: block}
	header .header-main .main-nav .header-actions a{display: block; margin-bottom: .5rem}
  header .mega-menu .mega-col .mega-title{margin-bottom: .8rem;}
  header .mega-menu .mega-col:last-child .mega-title{margin-bottom: 0; padding-bottom: 0}
  header .mega-menu, header .mega-menu .mega-col .mega-list{padding-left: 1rem;}

  .items #filter-button{display: inline-block; position: static;}
  .items .items-grid{grid-template-columns: repeat(1,1fr);}

  #filter-drawer{width: 90%;}
  #filter-drawer .drawer-subcategories{grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}

	#accueil #hero .hero-text h1, #accueil #intro-hero h2{font-size: 1.75rem;}
	#accueil #hero .hero-text .hero-slogan{font-size: 1.2rem;}
  #accueil #hero .hero-text .hero-baseline{display: none}
	#accueil #hero .hero-text .hero-actions{display: block; margin-top: 1rem}
	#accueil #hero .hero-text .hero-actions a{display: block; margin-bottom: .5rem}
  #accueil #hero .hero-text .btn-primary, #accueil #hero .hero-text .btn-secondary{font-size: .9rem; padding: .7rem 1.1rem;}
  #accueil #hero .hero-image{min-height: 35vh; padding-top: 1rem; width: 90%;}

	#accueil #categories .categories-grid{grid-template-columns: 1fr;}
	#accueil #categories .categories-grid .categorie .categorie-bg{background-size: 60%;}
	#accueil #categories .categories-grid .categorie:hover .categorie-bg{background-size: 55%;}

  #catalogue .grid{grid-template-columns: repeat(1,1fr);}
  #catalogue .catalogue-card h4, #catalogue .catalogue-card p{min-height: auto;}

  #product .product-container .product-info .product-granite .granite-line{flex-direction: column; margin-bottom: 2.5rem}
  #product .product-container .product-info .product-cta a{display: block; margin-bottom: .8rem}
  #product .product-container .product-info .product-cta .btn-secondary{margin-left: 0}

  #society #society-expertise .steps-points{grid-template-columns: repeat(1, 1fr);}
  #society #teams .teams-left .teams-meta{gap: 1rem}
  #society #teams .teams-left .teams-meta .meta-item{width: 100%}

  #contact #services .trust-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);}

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

  footer .infos .btn-primary{display: block}

}

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

  h3{font-size: 1.35rem}
  h3 span{font-size: 1.2rem}

  .darktoblue{padding: 1.5rem 0;}

  #bloc-points-forts .points-grid{margin-top: 2rem}
  #bloc-points-forts .points-grid .point{padding: 1.5rem}

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

  header .header-top{padding: .5rem 0 .2rem 0;}
  header .header-top .top-right{font-size: .7rem;}
  header .header-top .top-right span{margin: 0 .1rem;}
  header .header-top .top-right img{width: 35px;}
  header .header-main{padding: .4rem 0;}

  #filter-drawer .drawer-colors, #filter-drawer .drawer-countries{grid-template-columns: repeat(2, 1fr);}
  #filter-drawer .drawer-footer span{display: block;}
  #filter-drawer .drawer-footer{padding: 0}
  #filter-drawer .drawer-footer .btn-primary{margin-bottom: .5rem;}
  #filter-drawer .drawer-footer .btn-secondary{margin-left: 0;}

  #page-hero{margin-bottom: 1.5rem; min-height: 20vh; padding: 1.2rem 0;}
  #page-hero .maincontent h1{font-size: 1.4rem; margin-bottom: 0}
  #page-hero .maincontent h2{display: none}
  #page-hero .maincontent p{display: none}
  #page-hero .maincontent nav{font-size: .65rem; line-height: 1.5; margin-bottom: .5rem}

  #accueil section{margin-bottom: 2.5rem;}
  #accueil #hero .hero-text .hero-slogan{font-size: 1.1rem;}
  #accueil #intro-hero p{font-size: 1.1rem;}
  #accueil #categories .categories-grid .categorie .categorie-content{padding: 1.5rem;}
	#accueil #categories .categories-grid .categorie .categorie-bg{background-size: 85%;}
	#accueil #categories .categories-grid .categorie:hover .categorie-bg{background-size: 80%;}

  #catalogue .not-exhaustive{display: none}

  body#bd-produit #estimate, body#bd-produit #accessories{margin-bottom: 2rem;}
  #product .product-container .product-image{min-height: 50vh; padding: 0 1rem}
  #product .product-container .product-info .product-cta{border: none; padding: 0}
  #product .product-container .product-info .product-cta .btn-primary.btn-external::after{display: none}

  #granite .granite-container .granite-image{min-height: 40vh;}
  #granite .granite-container .granite-info .description{background-color: inherit; color: inherit; padding: 0;}

  #society #values .bloc .num{min-height: 175px;}
  #society #values .bloc .num .iconwrap{border-width: 10px; height: 80px; left: 50%; width: 80px;}
  #society #values .bloc .num .iconwrap i{color: var(--couleurBloc); font-size: 1.4rem;}
  #society #workshop .workshop-card{padding: 1rem;}
  #society #workshop .workshop-proofs{flex-direction: column;}
  #society #workshop p{font-size: .9rem}
  #society #teams .teams-right .teams-icons{display: none}
  #society #society-expertise .steps-points .step-point{padding: 1.5rem}

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

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

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

  footer .maincontent .bloc > div{margin-bottom: 1.5rem; padding-bottom: 1.55rem;}
  footer .identite .logo img{display: block; margin: 0 auto; max-width: auto; width: 100%;}

}