/* -------------------- VARIABLES -------------------- */
:root {
	--blue: #115cfa;
	--gray: #343233;
	--gray_10: rgba(52,50,51,0.1);
	--gray_25: rgba(52,50,51,0.25);
	--gray_50: rgba(52,50,51,0.5);
	--orange: #e45128;
	--orange_15: rgba(228,81,40,0.15);
	--orange_25: rgba(228,81,40,0.25);
	--orangeInit: #ff8f1f;
	--light: #f3f6fc;
	--dark: #333;
	--radius: 12px;
	--radiusmobile: 6px;
	--text-opacity:1;
	--yellow: #ffcc00;
	--greenoweb: #658402;
	--green: #339900;
	--red: #ff0000;
	--white:#fff;
}

/* -------------------- 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 {text-decoration: none; color:rgba(228, 81, 40, 0.9); font-weight:500; transition: all 0.3s ease; border-bottom:1px solid rgba(228, 81, 40, 0);}
section { padding: 80px 20px; max-width: 1200px; margin: auto; }
section>div:not(:last-child) {margin-bottom:30px !important;}

section.o-full {max-width: 100%;}
section.o-full>div {max-width: 1200px; margin: auto;}
section.o-full>div>div:not(:last-child) {margin-bottom:30px !important;}

section p {line-height:1.5;}

.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}
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;}
ul {margin:0; padding-left: 25px;}
ul.list-check {list-style: "✔"; padding-left:25px;}
ul.list-check li {padding-left:10px; line-height: 1.3; margin-bottom:5px;}
dd { margin-left: 0;}
dd:before { content: "-"; margin-right: 10px;}

.btn {display: inline-block; padding: 10px 15px; }
.btn-1 { color: #fff; background: var(--orange); border-radius: var(--radius);  }
.btn-2 { color: #fff; background: var(--gray); border-radius: var(--radius);  }
.btn-3 { color: var(--dark); padding: 5px 15px; }
.btn-4 { color: var(--gray); background: var(--light); border-radius: var(--radius);  }

.u-text-justify {text-align:justify;}
.u-text-center {text-align:center;}
.u-mb-2 {margin-bottom:2em;}
.u-strong-600 {font-weight: 600;}
.u-bg-light {background: var(--light);}
.u-bg-white {background: var(--white);}
.u-bg-white .service-card {background: var(--gray_10) !important; border: 1px solid rgba(52, 50, 51, 0.5);}
.u-bg-gray {background:var(--gray); color:var(--white);}

.u-div--bw2cgr6 {border: 2px solid var(--gray);  border-radius: 6px;  padding: 20px;}
.u-div--bw2clr6 {border:2px solid var(--light); border-radius:6px; padding:20px;}

.u-maxw-768 {max-width:768px !important;}
.u-maxw-768.u-text-center {margin: 0 auto;}
.u-maxw-768 h2.h-highlight {padding-left: 0;}
.u-maxw-768 h2.h-highlight:before {display:none;}

.c-btncontact {display:flex; gap: 10px;}




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

/* -------------------- ICONS -------------------- */
.iconL { position: relative; padding-left: 38px;}
.iconL:before {content: ""; font-family: 'Material Icons'; position: absolute; left: 10px; font-size: 20px; font-weight: normal;}

.iconR { position: relative; display: inline-block; padding-right: 38px;}
.iconR:before {content: ""; font-family: 'Material Icons'; position: absolute; right: 10px; font-size: 20px; font-weight: normal; color: var(--orange);}

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


/* -------------------- NAVBAR -------------------- */

#main-nav { background: white; padding: 15px 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); transition: opacity 0.3s ease; opacity: 1;}
#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: 150px;  top: -15px;}
#main-nav ul { display: flex; gap: 25px; list-style: none; }
#main-nav ul li a { color: var(--dark); text-decoration: none; font-weight: 500; }
#main-nav ul li a.active { color: var(--orange); color: #ff6600; font-weight: bold; /*transition: all 0.6s ease;*/}

/* -------------------- HERO PARALLAX -------------------- */
header.style-hero1 { background: url('image-hero.jpg') center/cover no-repeat fixed; height: 50vh; display: flex; justify-content: center; align-items: center; text-align: center; color: white; padding: 80px 20px; position: relative; display:none;}
header.style-hero1::after { content: ""; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.45);}
header.style-hero1 .hero-content { position: relative; z-index: 2;}

header.style-hero2 { padding: 50px 20px 20px; max-width: 1200px; margin: auto;}

header .hero-texte {max-width: 700px;}


header h1 {text-transform: uppercase;}
header h1>strong {font-weight: 500; color: white;}
header h1>strong span {background: var(--orange);}
header h1 span.u-style-iss {font-size:0.6em; display: block; margin: 10px 0;}
header h1>span:last-child {display:block; opacity: .8; font-size: 0.6em; font-weight: 500;  text-transform: none;}
header p { font-size: 1.1em; opacity: .8; line-height: 1.5; text-align: justify;}
header .logo-img {position:relative; margin: 0 80px 80px 0;}
header .logo-img:after {content:""; position:absolute; background:url('assets/Tony-Hulman-logo.png') center/contain no-repeat; width: 200px; height: 147px; bottom: -50px; right: -50px;}
header .logo-img img {border: 2px solid #343233; box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.28); width:300px; height:auto;}

header ul {list-style: none; margin: 0; padding: 0;}
header ul li {background:white; border-radius:var(--radius); padding: 5px 10px; border: 1px solid var(--orange);}

/* -------------------- TITRES -------------------- */
h2 { font-size: 2.4em; color: var(--dark);}
h3 { margin: 1em 0 0.3em;}

.h-highlight {position:relative; padding-left:20px; }
.h-highlight:before {position:absolute; left:0; content:""; width:10px; height:100%;background: var(--orange); }

h2.h-highlight span {color: var(--orange);}
h2.h-highlight span.u-style-iss { display: inline-block; font-size: 0.8em; background: white; padding: 0 10px; border: 1px solid var(--orange_15);}

/* -------------------- 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)}

/* -------------------- SERVICES -------------------- */
.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;}

/* -------------------- GALERIE RESPONSIVE -------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-template-columns: repeat(4, 1fr); /* Toujours 4 colonnes */ gap: 15px; align-items: center;}
.gallery img { width: 100%; border-radius: var(--radius); cursor: pointer; opacity: 1; display: block; transition: transform 0.3s ease, opacity 0.01s ease;}
.gallery img:hover { transform: scale(1.03);}
.gallery img.no-transition { transition: none !important;  /* désactive temporairement la transition */}
.gallery img.fading-out {  opacity: 0;} /* etape 1 */
.gallery img.hidden {  display: none; } /* etape 2 */
.filters {display: flex; max-width: 768px; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 auto; padding: 5px; border-radius: var(--radius); border: 1px solid var(--gray_25);}
.filters button {  padding: 8px 15px;  border: none;  background: #eee;  cursor: pointer;  transition: background 0.2s ease;}
.filters button.active {  background: #333;  color: white;}
.filters label {  cursor: pointer;}
.custom-tooltip {  position: absolute;  background: rgba(0, 0, 0, 0.85);  color: #fff;  padding: 6px 10px;  border-radius: 4px;  font-size: 14px;  pointer-events: none;  opacity: 0;  transform: translateY(-6px);  transition: opacity 0.15s ease, transform 0.15s ease;  white-space: nowrap;  z-index: 9999;}

.scroller__inner>div { position: relative;}
.scroller__inner .img-caption {position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px);}
.scroller__inner .img-caption.txt-dark {color: var(--dark);}
.scroller__inner .img-caption ul {list-style:none; display:flex; flex-direction:row; flex-wrap: wrap; gap: 10px; padding: 0; justify-content: center;}
.scroller__inner .img-caption li {padding: 2px 5px; background: var(--light); font-size: 0.95em; border-radius: 20px; font-weight: 500;}
.scroller__inner .img-caption.u-style-orange li { background: var(--orange); color: var(--light); }
.scroller__inner .img-caption.u-style-gray li { background: var(--gray); color: var(--light); }

/* -------------------- SCROLLER -------------------- */
.scroller {  max-width: 100%;  max-height: 675px;}
.scroller__inner img{  width: 500px;  height: auto;}
.scroller__inner {  padding-block: 1rem;  display: flex;  flex-wrap: wrap;  gap: 1rem;  
					display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-columns: repeat(16, minmax(0, 1fr)); place-items: center; gap: 1rem; }
.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient( 90deg, transparent, white 20%, white 80%, transparent  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
 var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
 transform: translate(calc(-50% - 0.5rem));
  }
}



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


/* -------------------- ZONE INTERVENTION -------------------- */
.o-geo__title {max-width: 768px;  margin: 0 auto;}
.o-geo__list {display: grid; gap: 30px;  grid-template-columns: auto auto;}


/* -------------------- CONTACT -------------------- */
#contact { position:relative; background: var(--gray); background: rgba(52, 50, 51, 0.7); background: url(assets/img-france-2239995.webp) top; background-size: cover; color: white; border-radius: var(--radius); border: 2px solid var(--gray); border:none; padding: 20px 20px 40px; margin: 0 auto 80px auto;}
#contact:before {content: ""; background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: var(--radius);}
#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 button { border:none; cursor:pointer; font-size: 15px;}
#contact textarea { height: 100px;}

#contact #resultat>div {background: rgba(255, 255, 255, 0.1); border-radius: var(--radius); padding: 10px;  margin-top: 20px;}
#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);}

/* -------------------- FOOTER -------------------- */
footer {position: relative; text-align: center; padding: 20px; background: #1e1e1e; color: #ccc;}
footer a.icon-arrow-up {position:absolute; right: 5px; top: -50px; }
footer a.icon-arrow-up:before {background: rgba(228, 81, 40, 0.9); 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;}



/* MENTIONS LEGALES */
.page-mentions-legales header { padding: 10px 20px; max-width: 1200px; margin: auto; }
.page-mentions-legales header .logo-img {position:relative; display:inline-block;  margin: 0 50px 50px 0;}
.page-mentions-legales header .logo-img:after {width: 80px;  height: 59px; top: 100px;}
.page-mentions-legales header .logo-img img {width:120px;}
.page-mentions-legales section {padding-top:0;}
.page-mentions-legales h1 { font-size: 2.4em;}
.page-mentions-legales h2 { font-size: 1.5em;}
.page-mentions-legales .service-card {opacity:1; transform:none; padding: 15px;}
.page-mentions-legales .service-card>p:first-child {margin-top:0;}
.page-mentions-legales .service-card>p:last-child {margin-bottom:0;}

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


@media(max-width: 1024px){
	header .logo-img {margin: 0 80px 80px 0;}
	header .logo-img:after {width: 150px;  height: 111px; bottom: inherit; top: 150px;}
	header .logo-img img {width:200px;}
	header h1>strong {display:block; margin: -2px 0 5px;}
	section {padding: 40px 20px;}
	#contact {margin: 40px 20px;}
	.scroller__inner img {width:400px;}
	.scroller__inner .img-caption li {}
	.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){
	.ow-hide-m {display:none;}
	.ow-show-m {display:block;}
	h2 { font-size: 28px; }
	h2.h-highlight span.u-style-iss {display: inline; border: none; background: none; font-size: inherit; padding: 0;}
	
	.u-div--bw2cgr6, .u-div--bw2clr6 {padding: 10px 15px;}
	
	
	#main-nav .logo img {width: 100px;}
	header.style-hero2 {padding: 20px;}
	header .logo-img {margin: 0; position: absolute;}
	header .logo-img:after {width: 100px;  height: 74px; top: 120px; right: inherit; left: 0;}
	header .logo-img img {width:150px;}
	header h1, .hero-texte .p1, .hero-texte .p2, .hero-texte ul, .hero-texte div { margin-left: 170px; }
	header ul li {min-width:110px;}
	header p {font-size: inherit;}
 
	.service-card {padding: 10px 15px;}
	
	.scroller__inner img {width:300px;}
	.scroller__inner .img-caption ul {gap: 5px;}
	.scroller__inner .img-caption li { font-size: 13px; font-weight: normal;}
	
	.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;}
	
	.filters {gap: 5px 10px;}
	.filters label {flex: 1; min-width: 150px;}
	
	.o-geo__list {grid-template-columns: auto;}
	
	#contact p a.btn:first-child {   margin-bottom: 5px;}

}

@media(max-width: 500px){
	
	#main-nav ul {gap: 10px}
	#main-nav ul li a {font-size: 14px;}
	#main-nav ul li a.active {font-weight: normal;}
	section, #contact {padding: 40px 10px;}
	#contact {margin: 40px 10px; }
	header.style-hero2 {padding: 20px 10px;}
	header .logo-img:after {width: 80px;  height: 59px; top: 100px;}
	header .logo-img img {width:120px;}
	header h1 {position:absolute !important; margin: 12px 0 0 134px; font-size: 25px; font-size: 7.4vw; }
	header h1 span.u-style-iss {font-size:0.6em; margin: 10px 0; text-transform:none;}
	header h1>span:last-child {}
	.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 ul {gap:5px; justify-content: center; align-items: stretch; display:none;}
	header ul li {  min-width: auto; padding: 5px; font-size: 12px !important; max-width: 80px; display: flex; align-items: center;}
	.hero-texte div { gap:5px 15px; justify-content: center;}
	.hero-texte div .iconL {padding: 10px; padding-left: 30px;}
	.hero-texte div .iconL:before {font-size: 16px; left: 8px; top: 12px;}
	.hero-texte div :nth-child(2) {}
	
	.gallery {grid-template-columns: repeat(2, 1fr);}
	.gallery img {border-radius: var(--radiusmobile);}
	
	.c-btncontact .iconL {padding: 10px; padding-left: 30px; font-size: 15px;}
	.c-btncontact .iconL:before {font-size: 16px; left: 8px; top: 12px;}
	
}



/* -------------------- 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(0)
 }

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

 100% {
  transform: translatey(0)
 }
}


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