@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/oswald-v57-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/work-sans-v24-latin-regular.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/work-sans-v24-latin-700.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/material-symbols-outlined-v325-latin-regular.woff2') format('woff2'); 
}


/* ==================== VARIABLES ====================*/
:root {
	--color1: #c2715b;		/*orange*/
	--color1_50: rgba(194, 113, 91, 0.5);
	--color1_70: rgba(194, 113, 91, 0.7);
	--color1_80: rgba(194, 113, 91, 0.8);
	--color1_90: rgba(194, 113, 91, 0.9);
	--color2: #717c92;  /* #6F7B93 */
	--color2_05: rgba(113, 124, 146, 0.05);
	--color2_10: rgba(113, 124, 146, 0.1);
	--color2_20: rgba(113, 124, 146, 0.2);
	--color2_30: rgba(113, 124, 146, 0.3);
	--color2_50: rgba(113, 124, 146, 0.5);
	--color2_80: rgba(113, 124, 146, 0.8);
	--color3: #563838;
	--color3_50: rgba(86, 56, 56, 0.5);
	--color3_80: rgba(86, 56, 56, 0.8);
	--color4: #5fa4ba;		/*bleu turquoise*/
	--color4_30: rgba(95, 164, 186, 0.3);
	--color4_50: rgba(95, 164, 186, 0.5);
	--color4_80: rgba(95, 164, 186, 0.8);
	--color5: #1e90ff; /* bleu vif */
	--color5_50: rgba(30,144,255, 0.5);
	--color5_80: rgba(30,144,255, 0.8);
	--color6: #25d366; /* vert */
	--color6_50: rgba(37,211,102, 0.5);
	--color6_80: rgba(37,211,102, 0.8);
	--color1v0: #AF836A;	/*marron*/
	--color1v0_50: rgba(175, 131, 106, 0.5);
	--color1v0_70: rgba(175, 131, 106, 0.7);
	--blue: #115cfa;
	--gray: #343233;
	--gray_80: rgba(52, 50, 51, 0.8);
	--orangeInit: #ff8f1f;
	--light: #f3f6fc;
	--light_50:  rgba(243, 246, 252, 0.5);
	--dark: #333;
	--radius: 12px;
	--text-opacity:1;
	--yellow: #ffcc00;
	--greenoweb: #658402;
	--green: #339900;
	--red: #ff0000;
}

/* ==================== GLOBAL ====================*/
html {
  scroll-behavior: smooth;
}
body { margin: 0; font-family: "Inter", sans-serif; font-family: "Work Sans", sans-serif; background: var(--light); color: var(--dark); overflow-x: hidden; /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #f3f6fc); background-size: 400% 400%; animation: bggradient 15s ease infinite;*/}


body.ow-lightbox {overflow: hidden;}
a {color: var(--color1); font-weight:500; transition: all 0.3s ease; border-bottom:1px solid rgba(228, 81, 40, 0);}
p { text-align: justify;}
.ow_css_txt_center, .ow_css_txt_center p {text-align: center;}
.ow_css_mt {margin-top:20px;}
section:not(.o-full), section.o-full>div { padding: 100px 20px; max-width: 1200px; margin: auto; }

.flex-container { display: flex; gap: 20px;}
.flex-column { flex: 1;}
.flex-aligncenter { align-items: center;}

@media (max-width: 768px) {
	.flex-container { flex-direction: column; }
}


/* ==================== TITRES ====================*/
h1, h2 { font-size: 2.4em; font-size:28px; color: var(--color3); margin: 0 0 0.2em; line-height: 1.2em;}
h3 { margin: 1em 0 0.3em;}
.u-h--subheader span:first-child {color: var(--color1); font-weight:400; font-size:0.6em; display:block; text-transform:uppercase;}

.h-highlight {position:relative; padding-left:20px; padding-left:20px;}
.h-highlight:before {position:absolute; left:0; content:""; width:10px; height:100%;background: var(--color1_50); z-index:-1; }
.h-highlight { padding-left:0;}
.h-highlight:before {bottom:1px; width:125px; height:8px; }
span.h-highlight:before {width:100%;}
/* -------------------- RESPONSIVE --------------------*/
@media (max-width: 768px) {
	h1, h2 {font-size:26px;}
	h2 { margin-bottom:20px; }
	.u-h--subheader span:first-child { font-size:14px; }
}


/* ==================== CTA FIXED BOTTOM ====================*/
.c-cta {  position: fixed;  bottom: 10px;  left: 50%;    transform: translate(-50%, 100%);  max-width: 400px;	width: max-content;border-radius: 14px;  display: flex;  gap: 10px;  padding: 8px;  background: var(--color3_50);  backdrop-filter: saturate(180%) blur(5px);  box-shadow: 0 -5px 20px rgba(0,0,0,0.08);  z-index: 1000;	transition: transform 0.3s ease, opacity 0.3s ease;  animation: slideUp 0.5s ease forwards;
}
.c-cta .btn {padding: 5px 10px;}
.c-cta.is-hidden {  transform: translateY(100%);  opacity: 0;  pointer-events: none; }
.c-cta__link strong {display:block; font-weight:400; font-size:0.8em; text-transform:uppercase;}
.c-cta__link {  font-weight: 500;  text-decoration: none;  transition: all 0.25s ease;  box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
.c-cta__link:hover {  transform: translateY(-2px);  box-shadow: 0 6px 14px rgba(0,0,0,0.15);}
.c-cta__link:active {  transform: scale(0.97);}
@media (max-width: 500px) {
	.c-cta__link {    padding: 5px 10px 5px 30px;}
	.c-cta__link:before {left: 8px; font-size: 16px;}
}


@keyframes slideUp {
  to {    transform: translate(-50%, 0);  }
}





/* ==================== CSS GENERIC ====================*/
.rounded-full { border-radius: 9999px;}
.sr-only {  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}
.object-cover { -o-object-fit: cover;  object-fit: cover;}
.ow-show-m {display:none;}
.text-2xl { font-size: 1.5rem; line-height: 2rem}
.text-3xl { font-size: 1.875rem; line-height: 2.25rem}
.text-4xl { font-size: 2.25rem; line-height: 2.5rem}
.text-base { font-size: 1rem; line-height: 1.5rem}
.text-sm { font-size: .875rem; line-height: 1.25rem}
.text-xs { font-size: .75rem; line-height: 1rem}
.u-bold {font-weight:600;}
a.text-hide>span {display:none;}
.flex { display: flex;}
.wrap {flex-wrap: wrap;}
.items-center {  align-items: center; }
.justify-center { justify-content: center;}
.gap30 {gap:30px;}
.gap15 {gap:15px;}
.gap5 {gap:5px;}
ul li {line-height: 1.5em;}
p {line-height: 1.35em;}
ul {margin:0; padding-left: 25px;}
ul.list-check {list-style: "✔"; padding-left:25px;}
ul.list-check li {padding-left:10px;}
dd { margin-left: 0;}
dd:before { content: "-"; margin-right: 10px;}
.c-btn {    display: flex; justify-content: center;margin: 20px 0; gap: 20px;}
.btn {display: inline-block; padding: 10px 15px; background: var(--light); color: var(--gray); border-radius: var(--radius); text-decoration: none;}
.btn:hover { background: var(--color2_30);}
.btn-1 { color: #fff; background: var(--color1); }
.btn-1:hover {background: var(--color1_80); }
.btn-2 { color: #fff; background: var(--gray); }
.btn-2:hover {background: var(--gray_80);}
.btn-3 { color: #fff; background: var(--color3); }
.btn-3:hover { background: var(--color3_80); }
.btn-4 { color: #fff; background: var(--color4); }
.btn-4:hover { background: var(--color4_80); }
.btn-5 { color: #fff; background: var(--color5); }
.btn-5:hover { background: var(--color5_80); }
.btn-6 { color: #fff; background: var(--color6); }
.btn-6:hover { background: var(--color6_80); }

.btn-border-left {border-left:1px solid #e4e4e7;}

.bg-carrelage {background-image: linear-gradient(to right, var(--color2_10) 1px, transparent 1px), linear-gradient(to bottom, var(--color2_10) 1px, transparent 1px);
 background-size: 4.94vw 4.94vw;
background-position: center;}
.bg-white {background:white;}

strong.u-txt-sbcarrelage { color: var(--color4); font-weight: 600;}

.u-maxw-768 {max-width:768px !important;}
.u-maxw-768.ow_css_txt_center {margin: 0 auto;}

.ow_css_txt_center ul.list-check { display: inline-block;}

.c-card--border { border: 2px solid var(--color2);  border-radius: 10px;  padding: 20px;  background: #fff;}

.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade.visible {
  opacity: 1;
  transform: translateY(0);
}


@media (max-width: 768px) {
	.bg-carrelage {background-size: 15vw 15vw;}
}


/* ==================== ICONS ==================== 'Material Icons' */
.iconL { position: relative; padding-left: 38px !important;}
.iconR { position: relative; padding-right: 38px !important; display: inline-block;}
.iconL:before, .iconR:before {content: ""; font-family: 'Material Symbols Outlined'; font-size: 20px; font-weight: normal; position: absolute; left: 10px; top: 50%; transform: translate(0, -50%);}

.iconR:before {left: inherit; right: 10px; color: var(--color1);}

.icon-roller:before {content: "\e9b4";}
.icon-phone:before {content: "\e0b0";  }
.icon-premium:before {content: "\e8d0";}
.icon-clock:before {content: "\e8b5";}
.icon-waterdrop:before {content: "\e798";}
.icon-house:before {content: "\ea44";}
.icon-highlight:before {content: "\e25f";}
.icon-grain:before {content: "\e3ea";}
.icon-handyman:before {content: "\f10b";}
.icon-brush:before {content: "\e3ae";}
.icon-bank:before {content: "\eb6f";}
.icon-mail:before {content: "\e158";}
.icon-close:before {content: "\e5cd";}
.icon-contact:before {content: "\e887";}
.icon-arrow-up:before {content: "\e316";}
.icon-check:before {content: "\e5ca";}
.icon-services:before {content: "\f10a";}
.icon-contact2:before {content: "\f22e";}
.icon-question:before {content: "\e887 ";}
.icon-link:before {content: "\eac9 ";}
.icon-tree:before {content: "\e406 ";}
.icon-sun:before {content: "\e81a ";}
.icon-pool:before {content: "\eb48 ";}
.icon-tree:before {content: "\e406 ";}


/* ==================== HEADER NAVBAR ====================*/
body.nav-static {margin-top:49px;}
body.nav-static.nav-scrolled { margin-top: 5px;}
#main-nav { background: var(--light); padding: 0 5%; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 90%; top: 0; left: 0; z-index: 999; box-shadow: 0 2px 10px rgba(0,0,0,0.08); box-shadow: 0 2px 5px var(--color2_50); transition: opacity 0.3s ease; opacity: 1;}
body:not(.nav-static) #main-nav.hidden { opacity: 0; pointer-events: none;}
#main-nav .logo { font-size: 1.4em; font-weight: bold; color: var(--dark); }
#main-nav .logo img { position: absolute;  width: 200px;  top: 0;}
#main-nav>ul { display: flex; gap: 25px; list-style: none; }
#main-nav ul li {position: relative;}
#main-nav ul li a:not(.btn) { color: var(--dark); text-decoration: none; font-weight: 500; padding:15px; display: block; transition: all 0.2s ease; position: relative;}
#main-nav ul li a:not(.btn):hover { background: #f2f2f2; color: var(--color1);}
#main-nav ul li a:not(.btn):after {content: "";    width: 0;    height: 0;    position: absolute;    top: 0;    left: 50%; transform: translateX(-50%);    border-left: 7px solid transparent;    border-right: 7px solid transparent;    border-top: 7px solid var(--color1); visibility:hidden;}
#main-nav ul li a.active:not(.btn) { color: var(--color1);}
/*#main-nav ul li a.active:after { content: ""; background: var(--light); width: 10px; height: 10px; position: absolute; bottom: -9px; left: 50%; transform: rotate(45deg) translate(-50%, 0);}*/
#main-nav ul li a.active:not(.btn):after { visibility:visible;}

.nav-toggle, .logo-mob { display: none;}
#main-nav ul li a.icon-house {}
#main-nav ul li a.icon-house span {font-size:0;}
#main-nav ul li a.icon-house:hover {background:inherit;}
#main-nav ul li a.icon-house:before {left:50%; transform:translate(-50%, -50%);}
#main-nav ul li a.icon-house:after {display:none;}
#main-nav ul li a.btn { margin-top: 5px;}
#main-nav ul li a.btn.active:after {display:none; }

/* Sous-menu caché par défaut */
.submenu ul { position: absolute; top: 100%; left: 0; background: #ffffff; background: var(--light); min-width: 220px; padding: 10px 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; box-shadow: 0 5px 10px rgba(0,0,0,0.1); border-radius: 0 0 6px 6px; z-index: 1000;	display:flex; flex-direction:column;}
.submenu ul li { width: 100%;}
.submenu ul li a { font-size: 14px;}
nav ul li.submenu:hover >  ul { opacity: 1; visibility: visible; transform: translateY(0);}


body.nav-static.nav-scrolled #header-nav #main-nav {transform: translate(0, -100px); transition: transform 0.5s ease-in-out;}


/* -------------------- RESPONSIVE --------------------*/
 @media (max-width: 1024px) {
	#main-nav .logo img {width: 200px;}
 }
 
@media (max-width: 768px) {
	 body.nav-static { margin-top: 0;}
	#main-nav .logo img {position:relative; width: 250px;}
	 body.no-scroll { overflow: hidden; position: fixed; width: 100%;}
	 .logo-mob { display: block; position: fixed; width: 180px; top: 8px; left: 20px; z-index: 99; cursor: pointer;}
	 .logo-mob img {max-width:100%;}
	 .nav-toggle { display: block; position: fixed; top: 15px; right: 20px; font-size: 28px; background: none; border: none; color: var(--color3); background: var(--light); box-shadow: 0 2px 2px var(--color2_50); border-radius:5px; z-index: 99999;
	 cursor: pointer; }

	 #main-nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 0; transform: translateX(-100%); transition: transform 0.3s ease; z-index: 99998; }

	#main-nav>ul { flex-direction: column; align-items: center; gap: 0; padding-left:0; }
	#main-nav>ul>li { width: 100%; display: flex; border-bottom: 1px solid var(--color2_30)}*
	#main-nav>ul>li:last-child, #main-nav>ul>li.nobordermob {border:none;}
	#main-nav>ul>li:last-child {margin-top: 15px;}
	#main-nav>ul>li>a {font-size: 20px; text-transform: uppercase; font-weight: 400; padding: 10px 0; width: 100%; display: block; text-align:center;}
	
	 /* Menu ouvert via JS */
	 #main-nav.is-open { transform: translateX(0); opacity:1; pointer-events: inherit; }
	 
	.submenu {flex-direction:column;}
	.submenu ul { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; background: transparent; padding-left: 15px; display: block; padding:0; margin-top: -10px;   }
	.submenu ul li a {text-align:center;   padding: 3px 8px !important;}

	body.nav-static.nav-scrolled #header-nav #main-nav {transform: translate(-100%, 0);}
	body.nav-static.nav-scrolled #header-nav #main-nav.is-open {transform: translate(0, 0);}
 }
 
@media (min-width: 769px) {
	body.nav-static.nav-scrolled #header-nav.scrolled #main-nav { transform: none;}
	body.nav-static.nav-scrolled #header-nav.scrolled #main-nav .logo img {width: 200px;}
}

/* ==================== FOOTER ====================*/
footer {position: relative; text-align: center; padding: 10px 20px; background: #1e1e1e; background: var(--color2); color: #ccc;}
footer a {color: var(--light);}
footer a.icon-arrow-up {position:absolute; right: 5px; top: -50px; }
footer a.icon-arrow-up:before {background: var(--color2); color: white; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); padding: 8px; border-radius: 20px;}

/* Cookie */
#cookieNotice { box-sizing: border-box; position: fixed; left: 10px; bottom: 10px; max-width: 395px; padding: 10px; border-radius: 10px; box-shadow: 0 6px 6px rgb(0 0 0 / 25%); background-color: #fff; color: #393d4d; font-family: inherit; z-index: 999997;}
#cookieNotice #closeIcon { cursor: pointer; color: #bfb9b9; opacity: .85; z-index: 999999; position: absolute; top: 15px; right: 20px;}
#cookieNotice .title-wrap { display: flex;  align-items: center;  margin-bottom: 10px;  background: url(assets/picto-cookie.png) 0 0 / 20px 20px no-repeat;  padding-left: 35px;  height: 20px;}
#cookieNotice h4 {font-size: 15px; margin:0;}
#cookieNotice p { color: #393d4d; font-size: 13px; margin: 10px 0; text-align: justify; line-height: 1.5em;}
#cookieNotice a {color: var(--blue);}
#cookieNotice .btn-wrap { display: flex; flex-direction: row;  font-weight: 700; justify-content: center;  margin: 0 -5px 0 -5px;  flex-wrap: wrap;}
#cookieNotice .btn-wrap button { flex-grow: 1; margin: 0 5px 10px 5px; cursor: pointer;  white-space: nowrap;  min-width: 130px;}



/* ==================== HERO ====================*/
.ow_hero { min-height: 300px; background: var(--color2_50); display: flex; justify-content: center; align-items: center; color: white; position: relative;}
.ow_hero.ow_css_bgimg {height: 70vh;}
.ow_hero.ow_css_bg_filter:after { content: ""; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5);}

.ow_hero .ow_css_titlelarge { margin:0; font-size: 10vw; font-family: "Oswald", sans-serif; color: transparent; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); font-weight: normal;}
.ow_hero .ow_css_titlelarge.ow_css_style2 { position: absolute !important; bottom: -2.75vw; left:0; width: 100%; text-align: center;}

.ow_css_hero_logo {content: ""; position: absolute !important; left: 50%; top: 37%; transform:translate(-50%, -50%); width: 10vw; height: 10vw; background: url(sb-carrelage-icon.png) no-repeat; background-size: contain; z-index: 5 !important;}

.overlay-grid {  position: absolute !important;  inset: 0; opacity:0.2; background-position: bottom left; background-size: 4.94vw 4.94vw; pointer-events: none;
 background-image: linear-gradient(to right, rgba(255,255,255,0.9) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.9) 1px, transparent 1px);
 mask-image: linear-gradient(to right, transparent 0%, black 100%);
 -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
}

.overlay-grid.ow_css_style2 {background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.15) 75%,   rgba(255,255,255,0.15) ); }

/* -------------------- RESPONSIVE --------------------*/
@media (max-width: 1024px) {

}
 
@media (max-width: 768px) {
	header h1, .hero-texte .p1, .hero-texte .p2, .hero-texte ul, .hero-texte div { }
	header ul li {min-width:110px;}
	header p {font-size: inherit;}
	
	.ow_hero {min-height: 250px;}
	.ow_hero.ow_css_bgimg {height: 60vh;}
	.ow_css_hero_logo {width: 80px;  height: 100px; opacity: 0.7;}
	.ow_hero .ow_css_titlelarge {font-size: 15vw; line-height: 1; padding: 0 10px;}
	.ow_hero .ow_css_titlelarge.ow_css_style2 {text-align: left; bottom: 5px; font-size: 23vw;}
	.ow_hero.ow_style1 .ow_css_titlelarge.ow_css_style2 {font-size: 12vw; text-align: center;  padding: 0;}
	
	.overlay-grid { background-size: 15vw 15vw;}
}

@media (max-width: 500px) {
	
	
	.hero-texte .p1, .hero-texte .p2, .hero-texte ul, .hero-texte div { margin-left: 0; }
	.hero-texte .p1 { margin-top: 180px;}
	.hero-texte .p2 {}
	.hero-texte div {  }
	.hero-texte ul {gap:5px;}
	header ul li {  min-width: auto; padding: 5px; font-size: 12px !important;   }
	.hero-texte div { gap:5px;}
	.hero-texte div :nth-child(2) {margin-right: 50%;}
	
}


/* ==================== HERO ow_hero.ow_style1 */
.ow_hero.ow_style1 {background:none;}
.ow_hero.ow_style1 .flex {z-index:50; position:relative; }

.ow_hero.ow_style1 .hero-texte {max-width: 700px; margin: 0 auto; background: rgba(0, 0, 0, 0.5); padding: 20px; backdrop-filter: saturate(180%) blur(5px); box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5); border: 1px solid white;}
.ow_hero.ow_style1 .hero-texte:after { content: "";  position: absolute; background: rgba(0, 0, 0, 0.5); top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); z-index: -1;}

.ow_hero.ow_style1 h1 { position:relative; text-transform: uppercase; padding-left:90px;}
.ow_hero.ow_style1 h1:before {content:""; position:absolute; left:0; top: -8px; width:80px; height:80px;background: url(sb-carrelage-icon.png) no-repeat; background-size: contain; display:none; } 
.ow_hero.ow_style1 h1>strong {font-size: 0.8em; font-weight: 500;  text-transform: none;  color: white; background: var(--color1); padding: 0 5px;}
.ow_hero.ow_style1 h1>span:last-child {display:block; opacity: .8; font-size: 0.6em; font-weight: 500;  text-transform: none;}

.ow_hero.ow_style1 .hero-texte.ow-light {background: rgba(255, 255, 255, 0.2);}
.ow_hero.ow_style1 .hero-texte.ow-light:after {background: rgba(255, 255, 255, 0.5);}
.ow_hero.ow_style1 .hero-texte.ow-light h1 { color: var(--color3);}
.ow_hero.ow_style1 .hero-texte.ow-light p { color: var(--dark);}

.ow_hero.ow_style1 .grid { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; gap: 5px; background: color: var(--light); padding: 0 5px 5px; box-sizing: border-box;}
.ow_hero.ow_style1 .grid .cell { position: relative; display: flex; align-items: center; justify-content: center; }
.ow_hero.ow_style1 .grid .cell::after { content: ""; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.25);}



.ow_hero--1 {margin: 0 5px;}
.ow_hero--1>div.flex {min-width: 25%; background: var(--light);}
.ow_hero--1:after { rgba(255, 255, 255, .8); box-shadow: 0 4px 15px rgba(0, 0, 0, .08);}

.grid--1 {display: grid; grid-template-columns: repeat(3, 1fr); gap:5px;}
.grid--1>div {position:relative; aspect-ratio: 1 / 1;}

.grid--1 .cell--title {display:flex; align-items: center; justify-content: center; flex-direction: column; background: white !important; border: 1px solid var(--color4_30);}
.grid--1 .h1 {font-size: 40px; font-size: clamp(26px, 2vw, 40px); width: 96%; max-width: 500px; text-align: center;}
.grid--1 .h1--logo {display: block; margin-bottom: 10px;}
.grid--1 .h1--logo strong { color: var(--color4); letter-spacing: 0.43em; padding-left: 0.43em; position: relative; text-transform: uppercase; font-weight: 500; font-size: 0.875em;}
.grid--1 .h1--logo:after {content: ""; background-image: url(assets/stephane-bellec-carreleur-sb-carrelage-logo.png); background-size: contain; width: 3vw; min-width: 40px; height: 3vw; min-height: 40px; display: block; margin: 5px auto;}
.grid--1 .h1--local {display: block; font-weight: 100; font-size: 0.79em; line-height: 1.2; margin-bottom: 15px;}
.grid--1 .h1--local strong {display: block; margin-top: 5px; font-size: 0.71em; color: var(--color1);}
.grid--1 .h1--local strong span {display: block; font-size: 1.3em; text-transform: uppercase; letter-spacing: 0.31em;  margin-top: 9px;   padding-left: 9px; font-weight: 600;}
.grid--1 .cell--title p { font-size: 16px; letter-spacing: 3px; color: var(--color4_80); font-style: italic; width: 96%; max-width: 500px; text-align: center; margin: 0;}

/* Fondu alterné 2 couches */
.ow_grid2 .cell::before, .ow_grid2 .cell::after { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; animation: zoom 12s ease-in-out infinite alternate; transition: opacity 1.8s ease-in-out;}
.ow_grid2 .cell::before { animation-name: zoom, fadeA; animation-duration: 12s, 12s; animation-iteration-count: infinite;}
.ow_grid2 .cell::after { animation-name: zoom, fadeB; animation-duration: 12s, 12s; animation-iteration-count: infinite;}
.ow_grid2 .cell {background:none;}

/*.ow_grid2 .cell:nth-child(1)::before { background: url('assets/hero/image-hero1.webp') center/cover no-repeat !important; }
.ow_grid2 .cell:nth-child(1)::after  { background: url('assets/hero/image-hero1-2.webp') center/cover no-repeat !important; }
.ow_grid2 .cell:nth-child(2)::before { background: url('assets/hero/image-hero2.webp') center/cover no-repeat !important; animation-delay: 2s;}
.ow_grid2 .cell:nth-child(2)::after  { background: url('assets/hero/image-hero2-2.webp') center/cover no-repeat !important; animation-delay: 2s;}
.ow_grid2 .cell:nth-child(3)::before { background: url('assets/hero/image-hero3.webp') center/cover no-repeat !important; animation-delay: 4s;}
.ow_grid2 .cell:nth-child(3)::after  { background: url('assets/hero/image-hero3-2.webp') center/cover no-repeat !important; animation-delay: 4s;}
.ow_grid2 .cell:nth-child(4)::before { background: url('assets/hero/image-hero4.webp') center/cover no-repeat !important; animation-delay: 6s;}
.ow_grid2 .cell:nth-child(4)::after  { background: url('assets/hero/image-hero4-2.webp') center/cover no-repeat !important; animation-delay: 6s;}*/

.ow_grid2 .cell:nth-child(1)::before { background: url('assets/hero/image-hero1.webp') center/cover no-repeat !important; }
.ow_grid2 .cell:nth-child(1)::after  { background: url('assets/hero/image-hero1-2.webp') center/cover no-repeat !important; }
.ow_grid2 .cell:nth-child(2)::before { display:none; }
.ow_grid2 .cell:nth-child(2)::after  { display:none; }
.ow_grid2 .cell:nth-child(3)::before { background: url('assets/hero/image-hero2.webp') center/cover no-repeat !important; animation-delay: 2s;}
.ow_grid2 .cell:nth-child(3)::after  { background: url('assets/hero/image-hero2-2.webp') center/cover no-repeat !important; animation-delay: 2s;}
.ow_grid2 .cell:nth-child(4)::before { background: url('assets/hero/image-hero3.webp') center/cover no-repeat !important; animation-delay: 4s;}
.ow_grid2 .cell:nth-child(4)::after  { background: url('assets/hero/image-hero3-2.webp') center/cover no-repeat !important; animation-delay: 4s;}
.ow_grid2 .cell:nth-child(5)::before { background: url('assets/hero/image-hero4.webp') center/cover no-repeat !important; animation-delay: 6s;}
.ow_grid2 .cell:nth-child(5)::after  { background: url('assets/hero/image-hero4-2.webp') center/cover no-repeat !important; animation-delay: 6s;}
.ow_grid2 .cell:nth-child(6)::before { background: url('assets/hero/image-hero1-2.webp') center/cover no-repeat !important;}
.ow_grid2 .cell:nth-child(6)::after  { background: url('assets/hero/image-hero1.webp') center/cover no-repeat !important;}

.h1--icon i:nth-child(1) {background: #c2715b;}
.h1--icon i:nth-child(2) {background: #5fa4ba;}
.h1--icon i:nth-child(3) {background: #563838;}
.h1--icon i:nth-child(4) {background: white;}
.h1--icon1 {--size: 25px; --gap: 2px; width: var(--size); aspect-ratio: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); transform: rotate(45deg); position: absolute; left: 6px; top: 8px;}
.h1--icon1 i { display: block; border-radius: 2px;  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);}
.h1--icon2 { width: 38px; aspect-ratio: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;}
.h1--icon3 {background: #e5e5e5; padding: 2px; border-radius: 4px; width: 40px; aspect-ratio: 1; display: grid; grid-template-columns: repeat(2, 1fr);}
.h1--icon3 i {position: relative; overflow: hidden;}
.h1--icon3 i::after{content:""; position:absolute; inset:0; background: linear-gradient( 135deg, rgba(255,255,255,.35), transparent 60%);}

@keyframes fadeA {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

@keyframes fadeB {
  0%, 45% { opacity: 0; }
  55%, 100% { opacity: 1; }
}

.ow_logo_anim { position: absolute; top: 12px; left: 20px; width: 80px; height: 80px; margin: auto;}
.ow_logo_anim .logo1 { opacity: 0; display:block; width: 100%; height: 100%; background: url("assets/sb-carrelage-logo_2.png") center / cover no-repeat; }
.ow_logo_anim .logo2 { opacity: 0;   position: absolute; top:0; left:0; width: 100%; height: 100%; background: url("assets/sb-carrelage-logo_1.png") center / cover no-repeat;  display: block;   }

/* Classes déclenchées par JS */
.animate .logo1 {animation: arriveeRotationL 3s ease-out forwards;}
.animate .logo2 {animation: arriveeRotationR 3s ease-out forwards; animation-delay: 0.5s;}

/* -------------------- RESPONSIVE --------------------*/
@media (max-width: 1024px) {
	.ow_hero.ow_style1 .grid {grid-template-columns: repeat(3, 1fr);}
	.ow_hero.ow_style1 .grid .cell:nth-child(4) {display:none;}
	.grid--1 {grid-template-columns: repeat(2, 1fr);}
	.ow_grid2 .cell:nth-child(1), .ow_grid2 .cell:nth-child(1)::before, .ow_grid2 .cell:nth-child(1)::after {display:none;}
	.ow_grid2 .cell:nth-child(5), .ow_grid2 .cell:nth-child(5)::before, .ow_grid2 .cell:nth-child(5)::after {display:none;}
	.ow_grid2 .cell:nth-child(3)::before { background: url('assets/hero/image-hero1.webp') center/cover no-repeat !important; }
	.ow_grid2 .cell:nth-child(3)::after  { background: url('assets/hero/image-hero1-2.webp') center/cover no-repeat !important; }
	.ow_grid2 .cell:nth-child(4)::before { background: url('assets/hero/image-hero3.webp') center/cover no-repeat !important; animation-delay: 2s;}
	.ow_grid2 .cell:nth-child(4)::after  { background: url('assets/hero/image-hero3-2.webp') center/cover no-repeat !important; animation-delay: 2s;}
	.ow_grid2 .cell:nth-child(6)::before { background: url('assets/hero/image-hero2.webp') center/cover no-repeat !important; animation-delay: 4s;}
	.ow_grid2 .cell:nth-child(6)::after  { background: url('assets/hero/image-hero4-2.webp') center/cover no-repeat !important; animation-delay: 4s;}
}
 
@media (max-width: 768px) {
	.ow_hero.ow_style1 .hero-texte {max-width: 80%;}
	.ow_hero.ow_style1 h1>strong {display:inline-block;}
	.ow_hero.ow_style1 .grid {grid-template-columns: repeat(2, 1fr); padding: 5px;}
	.page-accueil .ow_hero.ow_style1 .grid .cell:nth-child(2) {display:none;}	
}

@media (max-width: 680px) {
	.ow_grid2 .cell:nth-child(3) {order: 1; aspect-ratio: auto; min-height: calc(100vh / 2);}
	.ow_grid2 .cell:nth-child(4) {order: 2; aspect-ratio: auto; min-height: calc(100vh / 2);}
	.ow_grid2 .cell:nth-child(6), .ow_grid2 .cell:nth-child(6)::before, .ow_grid2 .cell:nth-child(6)::after {display:none;}
	.ow_grid2 .cell:nth-child(3)::before { background: url('assets/hero/image-hero1.webp') center/cover no-repeat !important; }
	.ow_grid2 .cell:nth-child(3)::after  { background: url('assets/hero/image-hero1-2.webp') center/cover no-repeat !important; }
	.ow_grid2 .cell:nth-child(4)::before { background: url('assets/hero/image-hero3.webp') center/cover no-repeat !important; animation-delay: 2s;}
	.ow_grid2 .cell:nth-child(4)::after  { background: url('assets/hero/image-hero2.webp') center/cover no-repeat !important; animation-delay: 2s;}
	.grid--1 .cell.cell--title {order: 3; grid-column: span 2; aspect-ratio: inherit; min-height: 300px;}
}

@media (max-width: 500px) {
	.ow_hero.ow_style1 .hero-texte {padding: 10px;}
	.ow_logo_anim {left: 10px;}
}



/* ==================== HERO Ken Burns --------------------*/
/* Effet Ken Burns - le contenu reste au dessu / autre effet possible : UI Glass (old school) */
.ow_css_kenburns { position: relative; overflow: hidden;}
.ow_css_kenburns > * { position: relative; z-index: 1;}

/* Image animée */
.ow_css_kenburns:before { content: ""; position: absolute; inset: 0; background: url("assets/pose-carrelage-interieur.jpg") center / cover no-repeat; transform: scale(1); animation: kenburns 20s ease-in-out infinite alternate; transform: scale(1.04); animation: kenburns 25s ease-in-out infinite alternate; transform: scale(1.12); animation: kenburns 18s ease-in-out infinite alternate; will-change: transform;}

/* Overlay sombre animé */
.ow_css_kenburns:after {content: ""; position: absolute; inset: 0; pointer-events: none;
 background: linear-gradient( 180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35) );
 background: linear-gradient( 135deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.25) 100% );
 animation: overlayFade 16s ease-in-out infinite alternate;
 /*background: linear-gradient(180deg, rgba(22, 77, 56, 0.55), rgba(18, 65, 48, 0.45) );
 animation: overlayColor 22s ease-in-out infinite alternate;*/}

@keyframes kenburns { from {transform: scale(1); } to {transform: scale(1.08); } }
@keyframes overlayFade { from {opacity: 0.85; } to {opacity: 1; } }
@keyframes overlayColor { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(6deg); } }

@media (prefers-reduced-motion: reduce) { /* Désactiver l’animation pour les utilisateurs sensibles */
 #hero::before, #hero::after { animation: none;}
}

/* ==================== COMPOSANT ====================*/
.c-intro>div {max-width:768px; margin: -120px auto 40px auto; background: var(--light); z-index: 1; position: relative; text-align: center; box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, 0.08); padding: 20px 20px 40px;}
.c-intro h1 {font-weight: 400; font-size: 40px;  line-height: 1.3;}

 @media (max-width: 768px) {
	.c-intro>div {padding: 20px 10px; margin-bottom: 0;}
	.c-intro h1 {font-size: 32px; font-weight: 500; line-height: 1.15;}
 }


/* ==================== BLOC ====================*/
.ow-taxonomy {list-style: none; margin: 1em auto; padding: 0;}
.ow-taxonomy li {}
.ow-taxonomy li a {background:var(--color2); color:var(--light); border-radius:2px; padding: 10px; min-width:50px; display: flex; align-items: center; text-align: center; text-decoration: none; aspect-ratio: 1 / 1;}
.ow-taxonomy li:nth-child(2) a {background: var(--color1);}
.ow-taxonomy li:nth-child(3) a {background: var(--color4);}
.ow-taxonomy li:nth-child(4) a {background: var(--color3);}
.ow-taxonomy li a:hover {background:var(--color2_80); transform: scale(1.05);}
.ow-taxonomy li:nth-child(2) a:hover {background: var(--color1_80);}
.ow-taxonomy li:nth-child(3) a:hover {background: var(--color4_80);}
.ow-taxonomy li:nth-child(4) a:hover {background: var(--color3_80);}

 @media (max-width: 768px) {
	.ow-taxonomy {gap:2px;}
 }
 
 
 /* ==================== REVIEWS ====================*/
.s-reviews h2 {text-align:center; margin-bottom:30px;}
.s-reviews h2::after { content: ""; display: block; width: 72px; height: 4px; margin: 20px auto 0; border-radius: 999px; background: #f5b301; text-align:center;}
.c-reviews {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.c-review {padding: 28px; background: #fff; border: 1px solid #e8e8e8; border-radius: 20px; box-shadow:0 4px 20px rgba(0,0,0,0.04); transition:transform 0.25s ease, box-shadow 0.25s ease;}
.c-review:hover {transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08);}
.c-review--header {  display: flex;  align-items: center;  justify-content: space-between;  gap: 16px;  margin-bottom: 20px;}
.c-review--header strong {  font-size: 1rem;  font-weight: 600;  color: #111;}
.c-review--header span {  color: #f5b301;  letter-spacing: 2px;  flex-shrink: 0;}

.c-review p {  margin: 0;  font-size: 0.96rem;  line-height: 1.75;  color: #444;}


@media (max-width: 980px) {
	.c-reviews {    display: flex;    gap: 16px;    overflow-x: auto;    padding: 48px 20px;   scroll-snap-type: x mandatory;    -webkit-overflow-scrolling: touch;    scrollbar-width: none;  }
	.c-reviews::-webkit-scrollbar {    display: none;  }
	
	.c-review {    flex: 0 0 85%;    scroll-snap-align: start;  }
}


@media (max-width: 680px) {
	.s-reviews h2 {    width: 100%;    flex: 0 0 100%;    margin-bottom: 8px;  }

	

}
 
 
 

/* ==================== PAGES ====================*/
.page-isle-sur-la-Sorgue .ow_hero.ow_css_kenburns:before {background: url(assets/carreleur-lisle-sur-la-sorgue-4043796.webp) center / cover no-repeat;}

.page-luberon .ow_hero.ow_css_kenburns:before {background: url(assets/luberon-gildaix-town-8038169_1920.jpg) center / cover no-repeat;}
.page-exterieur .ow_hero.ow_css_kenburns:before {background: url(assets/pose-carrelage-interieur.jpg) center / cover no-repeat; }
.page-exterieur .ow_hero.ow_css_kenburns:before { background: url(assets/pose-carrelage-exterieur.jpg) center / cover no-repeat;}
.page-special .ow_hero.ow_css_kenburns:before { background: url(assets/carrelage-mosaique-piscine.jpg) center / cover no-repeat;}


/*.page-carpentras .ow_hero.ow_css_kenburns:before {background: url(assets/carpentras-ventoux-ben_kerckx-vineyard-1411325_1920.jpg) center / cover no-repeat;}*/

.page-carpentras .ow_hero.ow_style1 .grid {grid-template-columns: repeat(2, 1fr);}
.page-carpentras .ow_grid2 .cell::before, .page-carpentras .ow_grid2 .cell::after  {animation:none; display:none;}
.page-carpentras .ow_grid2 .cell:first-child {background: url(assets/carpentras-sb-carrelage-exterieur-terrasse-carreleur-153902.jpg) center / cover no-repeat !important;}
.page-carpentras .ow_grid2 .cell:last-child {background: url(assets/carpentras-ventoux-ben_kerckx-vineyard-1411325_1000_1-1.jpg) center / cover no-repeat !important;}

.navhidemob div#header-nav:after, .navhidemob div#header-nav .logo-mob {opacity:0; transition:0.3s ease;}
.navhidemob div#header-nav.scrolled:after, .navhidemob div#header-nav.scrolled .logo-mob {opacity:1;}

/* ==================== SECTION ====================*/
.ow_s_services .service-card .btn {margin-top:30px;}
.ow_s_portfolio {padding-top: 20px;}

.ow_s_infos {}

.ow_s_with_map #map {height: 400px;  width: 100%;}
.ow_s_with_map img { width: 100%;}
.ow_s_with_map .map-responsive {position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px;}
.ow_s_with_map .map-responsive iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0;}
/* -------------------- RESPONSIVE --------------------*/
 @media (max-width: 1024px) {
	.ow_s_with_map .map-responsive {aspect-ratio: 1 / 1; }
 }
 
 @media (max-width: 768px) {
	.ow_s_infos .service-card {width:calc(100% - 20px);}
 }



/* ==================== SECTION > about ====================*/
.a-propos-flex { display: flex; gap: 30px; align-items: center;}
.a-propos-introduction {width:66%; }
.a-propos-me-choisir .icon-premium:before {color: var(--yellow)}
.a-propos-me-choisir .icon-clock:before {color: var(--blue)}
.a-propos-me-choisir .icon-bank:before {color: var(--greenoweb)}

/* ==================== CTA ====================*/ 

.ow_s_cta div, .ow_s_cta2 {background:var(--color2); color:#fff; padding:20px; text-align:center; border-radius:6px; max-width: 640px;  margin: 0 auto;}
.ow_s_cta2 {border:2px solid var(--color2); margin-top: 60px;}
.ow_s_cta .btn:first-child, .ow_s_cta2 .btn:first-child {margin-right:10px;}
.ow_s_cta .btn:last-child, .ow_s_cta2 .btn:last-child {margin-left:10px;}

 @media (max-width: 768px) {
	.ow_s_cta p:last-child, .ow_s_cta2 p:last-child { display: flex; flex-direction: column; align-items: center;}
	.ow_s_cta .btn:first-child, .ow_s_cta2 .btn:first-child {margin:0 0 10px;}
	.ow_s_cta .btn:last-child, .ow_s_cta2 .btn:last-child  {margin:10px 0 0;}
 }


/* ==================== SECTION > services ====================*/
#services .ow_css_h2 {text-align:center;}
#services h2 {display: inline-block; margin-bottom: 50px; font-size: 45px; color: var(--dark);}
#services h2.h-highlight:before { background: var(--color1); bottom: 5px;}
#services .flex-container { align-items: center; margin-bottom:30px;}
#services .flex-container .flex-column:last-child {position: relative; padding: 20px;}
#services .flex-container .flex-column:last-child:after { content: ""; width: 80%; height: 80%; background: var(--color4); position: absolute; left:0; top: 0; z-index: -1;}
#services .flex-container:nth-child(2n) .flex-column:last-child:after {left: inherit; right:0;  background: var(--color1);}
 
#services .flex-container:nth-child(2n) .flex-column:last-child {text-align: right;}

#services .flex-container:nth-child(2n+1) .flex-column:first-child {order:2;}

#services img { max-width: 85%;  box-shadow: 0 4px 15px rgba(0,0,0,0.08); box-shadow: -4px -4px 15px rgba(255, 255, 255, 0.5); border-radius: var(--radius);}

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-template-columns: auto auto auto; gap: 30px;}
.service-card { background: #fff; padding: 25px; border-radius: var(--radius); box-shadow: 0 4px 15px rgba(0,0,0,0.08); opacity: 0; transform: translateY(40px); transition: 0.6s ease;}
.service-card.visible { opacity: 1; transform: translateY(0);
}
.service-card h3 { color: var(--dark); }
.service-card>h3:first-child {margin-top:0;}

#services.s_services--2 {background: var(--color4_30); background: radial-gradient(circle, rgba(113, 124, 146, 0.31) 0%, rgba(95, 164, 186, 0.5) 104%);}
#services.s_services--2 .flex-container { margin-bottom: 50px; gap: 0;}
#services.s_services--2 .flex-column:after {display:none;}
#services.s_services--2 .flex-column:last-child {padding:0;}
#services.s_services--2 img { max-width: 100%; border-radius: 0; box-shadow:none;}

#services.s_services--2 .service-card { border-radius: 0; padding:0; z-index: 1; }
#services.s_services--2 .service-card>div {position: relative; background: white; padding: 25px; margin-right: -50px;}
#services.s_services--2 .flex-container:nth-child(2n+1) .service-card>div {margin-right: 0; margin-left: -50px;}}
/* -------------------- RESPONSIVE --------------------*/
 @media (max-width: 1024px) {
	
 }
 
 @media (max-width: 768px) {
	#services .flex-container {gap:0 ;}
	#services .service-card { border-radius:5px 5px  0 0 ;}
	#services .flex-container .flex-column:last-child { text-align: center !important; order: 2; padding: 0;}
	#services img {max-width: 100%; border-radius: 0 0 5px 5px;}
	#services .flex-container .flex-column:last-child:after { z-index: 1; top:-25px; left:50% !important; transform:translate(-50%,0); width:50px; height:50px; background: var(--color2);}
	#services .flex-container:nth-child(2n) .flex-column:last-child:after {background: var(--color1);}
	.ow_s_services .service-card .btn {margin-bottom: 20px;}
	.service-card {padding: 20px 10px;}
 
	#services.s_services--2 .service-card>div { margin-right: 0;}
	#services.s_services--2 .flex-container:nth-child(2n+1) .service-card>div {margin-left:0;}
	#services.s_services--2 .flex-column:last-child {padding: 0 10px;}
 }
 
 
 .ow_s_faq { max-width: 700px; margin: 0 auto;  }
.ow_s_faq h2 { margin-bottom: 20px;  }
.faq-item { background: #fff; border: 1px solid #ddd; margin-bottom: 10px; border-radius: 5px; overflow: hidden;  }
.faq-item h3 { margin: 0; padding: 15px; cursor: pointer; position: relative; font-size: 1.1em;  }
.faq-item h3::after { content: '+'; position: absolute; right: 20px; font-size: 1.2em; transition: transform 0.3s;  }
.faq-item.active h3::after { transform: rotate(45deg);  }
.faq-item p { padding: 0 15px 15px; margin: 0; display: none;  }


/* ==================== SECTION > contact ====================*/
#contact { position:relative; background: rgba(0, 0, 0, 0.7) url(assets/gradient-squares.png); color: white; border-radius: var(--radius); border: 2px solid var(--gray); border:none; padding: 70px 20px 40px; margin: 0 auto 80px auto;}
#contact h2 {color: var(--light);}
#contact .btn-primary { background: white; color: var(--gray);}
#contact p a.btn {border:1px solid rgba(255,255,255,0.2);}

#contact>div {position:relative; max-width:500px; margin: 0 auto;}
#contact form  {max-width:500px; margin:auto; display:flex; flex-direction:column; gap:15px; }
#contact input, #contact textarea, #contact button { padding:10px; border-radius:8px; border:1px solid #ccc; font-family: "Work Sans", sans-serif;}
#contact textarea {height:100px;}
#contact button { border:none; cursor:pointer; font-size: 15px;}

#contact #resultat>div {background: rgba(255, 255, 255, 0.1); border-radius: var(--radius); padding: 10px;  margin-top: 20px;}
#contact #resultat { background: var(--light); border-radius: var(--radius);}
#contact #resultat .response_msg_success {color: var(--green);}
#contact #resultat .response_msg_success span {display:block; font-size:1.3em;}
#contact #resultat .response_msg_error {color: var(--red);}


/* ==================== SECTION > mentions legales ====================*/
.page-mentions-legales h2 { font-size: 1.5em; margin: 20px 0 5px;}
.page-mentions-legales .service-card {opacity:1; transform:none; padding: 15px;}
.page-mentions-legales section>:last-child {margin-top:20px;}
.page-mentions-legales .service-card>p:first-child {margin-top:0;}
.page-mentions-legales .service-card>p:last-child {margin-bottom:0;}


/* ==================== SECTION > galerie responsive + lightbox ====================*/
.portfolio-filters {padding-top:10px ; margin-bottom: 20px;  text-align: center;}
.filter-btn {
 padding: 8px 16px;
 margin: 0 5px 10px;
 border-radius: 50px;
 border: none;
 cursor: pointer;
 background: #ddd;
 transition: 0.3s ease;
}
.filter-btn.active,
.filter-btn:hover {
 background: #333;
 color: #fff;
}

.portfolio {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-template-columns: auto auto auto auto;
 gap: 10px;
}

.portfolio.withfilter_true {grid-template-columns: auto auto auto auto auto;}

.portfolio-item {
 aspect-ratio: 4 / 3;   /* format uniforme */
 overflow: hidden;
  opacity: 1;
 transition: opacity 0.3s ease, transform 0.3s ease;
 cursor: pointer;
 border-radius:5px;
}

.portfolio-item img {
 width: 100%;
 height: 100%;
 object-fit: cover; /* remplit sans déformer */
 display: block; transition: transform 0.4s ease;
}

.portfolio-item:hover img {
 transform: scale(1.05);
}

/* hidden pour fade-out */
.portfolio-item.hidden {
 opacity: 0; 
 transform: scale(0.95);
 pointer-events: none;
}



.lazy-image {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.6s ease, transform 0.6s ease;
}

.lazy-image.loaded {
 opacity: 1;
 transform: translateY(0);
}

#lightbox {
 position: fixed;
 top:0; left:0;
 width:100%; height:100%;
 background: rgba(0,0,0,0.9);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s;
 z-index:1000;
 padding: 20px;
 box-sizing: border-box;
 text-align: center;
}

#lightbox img {
 max-width: 90%;
 max-height: 90%;
 box-shadow: 0 0 20px #000;
 margin-bottom: 10px;
}

#lightbox h3 {
 color: #fff;
 margin: 0 0 5px;
}

#lightbox p {
 color: #ddd;
 margin: 0;
}

#lb-prev, #lb-next {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 font-size: 40px;
 color: #fff;
 background: rgba(0,0,0,0.5);
 border: none;
 padding: 10px 15px;
 cursor: pointer;
 z-index: 1001;
}

#lb-prev { left: 20px; }
#lb-next { right: 20px; }

#lb-prev:hover, #lb-next:hover {
 background: rgba(0,0,0,0.8);
}

#lb-counter {
 position: absolute;
 bottom: 10px;
 color: #fff;
 font-size: 16px;
 z-index: 1001;
}

/* -------------------- RESPONSIVE --------------------*/
 @media (max-width: 1024px) {
 .portfolio { grid-template-columns: auto auto auto;}
 .portfolio.withfilter_true  { grid-template-columns: auto auto auto auto;}
 }
 
 @media (max-width: 768px) {
	 .portfolio-filters { display: grid; grid-template-columns: auto auto auto auto; gap:8px;}
	 .portfolio-filters button { margin: 0;}
 .portfolio, .portfolio.withfilter_true { grid-template-columns: auto auto;}
 }


/* LIGHTBOX 
#lightbox { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.85); display: none; justify-content: center; align-items: center; z-index: 2000;}
#lightbox>div {display:flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;}
#lightbox img { max-width: 90%; max-height: 90%; border-radius: 10px;}
#lightbox span.close { position: absolute; top: 5px; right: 0; color: white; cursor: pointer;}

.lightbox-title {  color: white;  text-align: center;  margin-top: 10px;  font-size: 18px;}
*/







/* ==================== TABLET ====================*/
@media(max-width: 1240px){
 #contact {margin: 0 20px 80px;}
}


@media(max-width: 1024px){

 #contact {margin: 40px 20px;}
 .scroller__inner img {width:400px;}
 .scroller__inner .img-caption {font-size: 2.3vw;}
 .a-propos-flex {flex-wrap:wrap; justify-content: center;}
 .a-propos-introduction {width:100%;}
 .services-grid {grid-template-columns: auto auto;}
 
}


/* ==================== MOBILE ====================*/
@media(max-width: 768px){
	section:not(.o-full), section.o-full>div { padding: 50px 15px;}
	.ow-hide-m {display:none;}
	.ow-show-m {display:block;}

	.scroller__inner img {width:300px;}
	.scroller__inner .img-caption {font-size: 2.3vw;}
	 
	.services-grid { grid-template-columns: auto; gap: 15px;}
	 
	/*.gallery {grid-template-columns: auto auto auto; grid-template-columns: repeat(3, 1fr);  gap: 5px;}
	 .custom-tooltip {display:none;} */
	 
	#contact p a.btn:first-child {   margin-bottom: 5px;}

}

@media(max-width: 500px){
	section:not(.o-full), section.o-full>div { padding: 40px 10px;}
	#contact {margin: 40px 10px; padding-top: 70px; }
}



/* ==================== ANIMATION ====================*/
.anim-bounce,.anim-bounce-icon .elementor-icon,.anim-bounce-btn-icon .elementor-button-icon {
 animation: bounce 3s ease-out infinite
}

@-webkit-keyframes bounce {
 0%,20%,50%,80%,100% {   -webkit-transform: translateY(0) }
 40% {   -webkit-transform: translateY(-8px) }
 60% {   -webkit-transform: translateY(-4px) }
}

@-moz-keyframes bounce {
 0%,20%,50%,80%,100% {   -moz-transform: translateY(0) }
 40% {   -moz-transform: translateY(-8px) }
 60% {   -moz-transform: translateY(-4px) }
}

@-o-keyframes bounce {
 0%,20%,50%,80%,100% { -o-transform: translateY(0) }
 40% {   -o-transform: translateY(-8px) }
 60% {   -o-transform: translateY(-4px) }
}

@keyframes bounce {
 0%,20%,50%,80%,100% {   transform: translateY(0) }
 40% {   transform: translateY(-8px) }
 60% {   transform: translateY(-4px) }
}


.anim-float-img2 {
 transform: translatey(0);
 animation: floatY5px 6s ease-in-out infinite
}

.animBI-1500ms-floatY5:before {animation: floatY5px 1.5s ease-out infinite;}


@keyframes floatY5px {
 0% {
   transform: translatey(-10px)
 }

 50% {
   transform: translatey(-15px)
 }

 100% {
   transform: translatey(-10px)
 }
}


@keyframes floatX4px {
 from { transform: translate(0px, 0); }
 65%  { transform: translate(4px, 0); }
 to   { transform: translate(-0px, 0); } 
}

@keyframes bggradient {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}

@keyframes arriveeRotationL {
 0% {
  transform: translateX(-120vw) rotate(-360deg);
  opacity: 0;
 }

 20% {
  opacity: 1;
 }

 40% {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
 }

 100% {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
 }
}
@keyframes arriveeRotationR {
 0% {
  transform: translateX(120vw) rotate(-360deg);
  opacity: 0;
 }

 20% {
  opacity: 1;
 }

 40% {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
 }

 100% {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
 }
}


/* Zoom premium 
@keyframes zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}*/