/*
Theme Name:     SC Peinture 2025
Theme URI:      https://sc-peinture.fr/
Description:    Thème enfant de Storefront pour refonte du site SC Peinture en 2025.
Author:         ABC Conception
Author URI:     https://abc-conception.com/
Template:       storefront
Version:        1.1.2
Text Domain:    sc-peinture-2025
*/
/*reset*/
a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus {
	outline-color: transparent;
}

/*********************************** GLOBAL */
*{
	scroll-behavior: smooth;
}
body{font-size:16px}
.col-full {
	max-width: 1500px;
	width: 100%;
	margin: 0 auto;
	padding: 0 10px;
	box-sizing: border-box;
}

.flex {
	display: flex;
}

.col-full.flex {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.col-2{width: 50%;}
.col-3{width: 30%;}

.text-center{text-align:center}
.text-right{text-align:right}
.text-left{text-align:left}


h1, h2, h3, h4, h5, h6{letter-spacing: 0;}
h1{color:#00153d; font-weight:bold}
h2 {
	font-weight: bold;
	font-size: 2.8em;
	color: #084c7f;
}

h2 {
}

h3 {
	font-size: 1.8em;
	font-weight: bold;
	margin-bottom: 0;
	color: #084c7f;
}

section{position:relative}

section:not(#the_content),
div#content {
	padding: 6em 0;
}

p.title {
	font-size: 1.3em;
}

div#top .dashicons, 
div#top .dashicons-before::before{color: #f0ac4c;}

.orange {color: #f0ac4c;}
.white {color: #FFF;}
.black{color:#444}
.blue{color:#084c7f}
.gray{color:#5c5959}

button.btn span.dashicons {
	margin-top: 3px;
	margin-left: 0px;
	transition: .4s ease;
}

button.btn:hover span.dashicons {
	margin-left: 10px;
}

.bloc {
	background: #fff;
	padding: 1em 2em;
	border-radius: 20px;
	cursor: pointer;
	transition: .3s ease;
	margin-bottom: 2em;
}

body.page-template-main-landing-pages .bloc:hover{
	transform: scale(1.1);
}

/*********************************** #TOP */
div#top {
	border-bottom: 1px solid #eeeeee;
	padding: 0.5em 0;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
}

#top > div{
	width: 100%;
}

div#top a {
	color: #7d7d7d;
	margin-right: 1em;
	position: relative;
}
div#top .dashicons, 
.dashicons-before::before {
	padding-top: 2px;
}

@media screen and (max-width: 860px){
	div#top {}
}

/*********************************** HEADER */

.site-header .site-branding img {
	max-width: 345px;
}

ul#menu-main-2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media (min-width: 768px) {
	.site-header {
		padding-top: 1em;
		padding-bottom: 0;
	}
}

.home.blog .site-header, 
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.site-header {
		padding-top: 1em;
		padding-bottom: 0;
		background: transparent;
		border-bottom: none;
	}
}

/*********************************** NAV */
nav#site-navigation ul#menu-main-2 a {
	font-weight: bold;
	font-size: 1.5em;
	text-align: center;
	color: #5c5959;
}

ul#menu-main-2 a.cta, 
ul#menu-main-2 li.cta a {
	box-shadow: 1px 1px 4px -1px #000;
	background: #f0ac4c;
	color: #fff!important;
	padding: .5em 1em !important;

}

/*********************************** #LANDING */
section#landing {
	/* padding-top: 120px; */
	/* margin-top: -120px; */
	min-height: 70vh;
	background-size: cover !important;
	background-position: center !important;
	background-blend-mode: darken;
	background-color: rgba(0, 21, 61, 70%);
	color: #fff;
}

section#landing .col-full {
	max-width: 1200px;
}

section#landing.flex {
	display: flex;
	align-items: center;
	position: relative;
}

body.home section#landing h1 {
	max-width: 530px;
}

section#landing h1 {
	color: #fff;
	font-size: 3em;
}

section#landing.flex .col-full {
	position: relative;
}

section#landing p {
	font-size: 1.2em;
}

section#landing span.block {
	padding: 0.5em 1em;
	position: relative;
}

section#landing .block span.dashicons {
	margin-top: 6px;
}

#landing > div > div:nth-child(1) > p:nth-child(5) {
	display: flex;
	justify-content: flex-start;
	gap: 1em;
}

.subtitle {
	color: #ffa500;
	background: #02193c;
	padding: 5px 10px;
	border-bottom: 2px solid #fff;
}

#services .col-full.flex {
	justify-content: space-between;
}
#services h2,
#services h3{
	font-family: serif;
}

#services .service {
	background: #fff;
	border-radius: 15px;
	width: 30%;
	overflow: hidden;
	box-shadow: 0px 0 20px -5px #C0C0C0;
	transition: ease .4s;
}
#services .service:hover {
	transform: scale(1.01);
}

#services .service .cover{
	position: relative;
}
#services .service .cover span.blue {
	color: #fff;
	position: absolute;
	top: 10px;
	left: 15px;
	background: #1b669d;
	padding: 0px 15px;
	border-radius: 30px;
}
#services .service .cover span.dashicons.white {
	position: absolute;
	color: #fff;
	left: 15px;
	bottom: 30px;
	font-size: 2.2em;
}

#services .service img {
	border-radius: inherit;
	width: 100%;
}

#services .service > div:nth-child(2) {
	padding: 2em;
}

#services .service p{
	color: #838080;
}

#services ul {list-style: none;}
#services ul {
	list-style: none; /* On supprime la puce par défaut */
	margin: 0 0 0 1em;
	padding-left: 1.5em; /* Pour laisser de la place à l'icône */
}

#services ul li::before {
	content: '';
	display: inline-block;
	width: 20px;  /* largeur de l'icône */
	height: 20px; /* hauteur de l'icône */
	margin-left: -1.5em; /* positionne l'icône à gauche */
	margin-right: 0.5em;
	background-image: url('img/circle_check');
	background-size: contain; /* adapte taille de fond à la taille du conteneur */
	background-repeat: no-repeat;
	vertical-align: middle; /* aligne verticalement l’icône avec le texte */
}

#services ul span.dashicons{color:hsl(120 50% 45%)}/*green*/
#services .service button.btn.orange {
	width: 100%;
}

/********** #PROFESSIONNELS */

#professionnels .flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}

section#professionnels h2 {
	max-width: 50%;
}

#professionnels .block {
	background: #f1f1f163;
	padding: 1em 2em;
	margin: 0 0 1em;
	border-radius: 30px;
	width: 45%;
}

#professionnels .block h4{
	font-weight: bold;
}

#professionnels > div > p button {
	padding: 1em;
	margin-bottom: 1em;
}


/********** #CHIFFRES */
#chiffres {}
#chiffres > div > div {
	width: 25%;
}
#chiffres .chiffre {
	font-size: 2.2em;
	font-weight: bold;
}

/********** CONTACT RAPIDE */
section#landing #speed-call {
	color: #0c2f48;
	position: absolute;
	top: 0;
	right: 10px;
	max-width: 450px;
}

#wpcf7-f399-o1 > form > p:nth-child(6) {
	text-align: center;
	margin-bottom: -30px;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	max-width: 100%;
}

section#landing span.wpcf7-spinner {
	margin: 10px;
}

section#landing #speed-call h2 {
	color: #0c2f48;
	font-weight: bold;
	font-size: 1.5em;
}

section#landing #speed-call form select{
	width: 100%;
	padding: 10px 5px;
}

section#landing #speed-call form {
	padding: 2em 2em;
	border-radius: 20px;
	background: #fff;
	margin: 0;
	box-shadow: 4px 4px 8px -4px #0c2f48;
}

section#landing #speed-call form input.wpcf7-submit {
	background: #ffbe68;
	color: #ffffff;
	width: 100%;
}

/*********************************** MAIN */
/* div#content * {	background-color: #fff !important;} */

div#content .col-full {
	max-width: 1200px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.storefront-breadcrumb {
		padding: 1.41575em 0;
		margin: 0;
	}
}

body:not(.page-template-default) #page section:not(#landing):nth-child(odd) {
	background: #f5f5f5;
}

div#primary {
	margin-bottom: 0;
}

/*********************************** #peinture-thermo-isolante */
section#peinture-thermo-isolante{}
section#peinture-thermo-isolante {
	background: #03092b;
	color: #fff;
	border-bottom: 20px solid #ec9b26;
}

section#peinture-thermo-isolante h2{color:#fff}
section#peinture-thermo-isolante img{width:100%}

/*********************************** #CUSTOM-GALLERY*/
#custom-gallery {
	column-count: 3;
	column-gap: 24px;
	margin: 2em 0;
	padding: 0 2em;
	cursor:pointer
}

#custom-gallery img {
	width: 100%;
	display: block;
	margin-bottom: 24px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	break-inside: avoid;
	transition: transform 0.2s, box-shadow 0.2s;
}

#custom-gallery img:hover {
	transform: scale(1.04);
	box-shadow: 0 4px 20px rgba(0,0,0,0.14);
}

@media screen and (max-width: 900px) {
	#custom-gallery { column-count: 2; }
}
/*********************************** HOMEPAGE - SERVICES */
section#services {}
section#services.col-full.flex{

}
/*********************************** HOMEPAGE - PARTENAIRES */
#partenaires{text-align: center}
#partenaires img{
	margin: 0 auto;
}

/***************** GALERIE */
body:not(.home) section#gallery {
	padding-top: 2em;
}

section#gallery img {
	border-radius: 30px;
}


/*********************************** main-landing-pages Template */
body.page-template-main-landing-pages{}

body.page-template-main-landing-pages section{
	position: relative;
}
body.page-template-main-landing-pages main.flex {
	display: flex;
	justify-content: space-around;
	align-items: top;
}
body.page-template-main-landing-pages div#content {
	background: #f6f6f6;
}

body.page-template-main-landing-pages blockquote {
	padding: 2em 2em;
	border-radius: 20px;
	background: #fff;
	margin: 0;
	box-shadow: 4px 4px 8px -4px #0c2f48;
}
body.page-template-main-landing-pages #the_content ul li::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: -1.5em;
	margin-right: 0.5em;
	background-image: url('img/circle_check');
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}

body.page-template-main-landing-pages div#the_form {
	width: 40%;
	padding: 2em 2em;
}
body.page-template-main-landing-pages div#the_form form{
	padding: 2em 2em;
	border-radius: 20px;
	background: #fff;
	margin: 0;
	box-shadow: 4px 4px 8px -4px #0c2f48;
}

body.page-template-main-landing-pages div#the_form input.data-bloc-hn {
	font-weight: bold;
	text-transform: uppercase;
	max-width: 100%;
}

body.page-template-main-landing-pages #gallery {
	background: #fff !important;
}


/*********************************** homepage #review */
#review div.col-full.flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
}

#review img {
	width: 100%;
	border-radius: none;
}

div#review {
	padding: 5em 0 0;
}

/*********************************** #dynamic-contact-form */
#dynamic-contact-form{
	position: relative;
}

div#dynamic-contact-form h3 {
	background: #f0ac4c;
	color: #fff;
	padding: 10px 20px;
	border-radius: 20px 20px 0 0;
}

body.page-template-main-landing-pages div#the_form form {
	padding: 2em 2em;
	border-radius: 0 0 20px 20px;
	background: #fff;
	margin: 0;
	box-shadow: 4px 4px 8px -4px #0c2f48;
}

#dynamic-contact-form input[type=submit] {
	background: #41a241;
	color: #fff;
}

/*********************************** FOOTER */


footer#colophon{
	background-color: #1e2c48;
	color: #fff;
	padding: 3em 0 1em;
}

footer#colophon div.col-full{
	padding: 2em 10px;
	border-bottom: 1px solid #f1f1f129;
}

footer#colophon div.col-full.flex {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 20px;
}

footer#colophon.site-footer a{
	color: #fff;
	margin: 0 10px;
}

footer#colophon h3{
	color: #fff;
}
footer#colophon iframe {
	border-radius: 30px;
}

footer#colophon img.custom-logo {
	max-width: 360px;
	background: #fff;
	padding: 1em 2em 2em 1em;
	border-radius: 30px;
}

footer#colophon div#zone-intervention {
	columns: 4;
}

/*********************************** RESPONSIVE */
@media screen and (min-width: 768px) {
	.woocommerce-active .site-header .main-navigation {
		margin-right: 0;
	}
}/*min-width: 768px*/

@media screen and (max-width: 1200px) {
	section#landing #speed-call {
		position: fixed;
		top: 30%;
		right: -440px;
		transition: .5s ease;
		z-index: 12;
		width: 100%;
	}

	section#landing #speed-call.active {
		right: 1em;
	}

	section#landing #speed-call h2 {
		position: absolute;
		left: -118px;
		transform: rotate(-90deg);
		bottom: 50%;
		padding: 10px 20px;
		background: #f0ac4c;
		border-radius: 15px 15px 0 0;
		color: #ffffff;
		cursor: pointer;
	}

	#landing > div > div:nth-child(1) > p:nth-child(3) {
		max-width: 780px;
	}
	.col-2 {
		width: 100%;
		margin: 0 auto;
	}

	footer#colophon div.col-full.flex {
		flex-direction: column;
		gap: 20px;
	}
	footer#colophon div.col-full.flex .col-3{
		width: 100%;
	}
}/*max-width: 1200px*/

@media screen and (max-width: 990px){
	header#masthead {
		z-index: 10;
	}

	#site-navigation-menu-toggle {
		margin-right: 5px;
	}
	
	#dynamic-contact-form > h3 {
		position: absolute;
		left: -136px;
		transform: rotate(-90deg);
		bottom: 150px;
		padding: 0 15px;
		background: #f0ac4c;
		border-radius: 20px 20px 0 0;
		color: #ffffff;
		cursor: pointer;
	}

	body.page-template-main-landing-pages div#the_form {
		position: fixed;
		max-width: 440px;
		width: 100%;
		padding: 2em 2em;
		right: calc(-440px + 2em);
		transition: .5s ease;
		bottom: 0;
		z-index: 12;
	}
	body.page-template-main-landing-pages div#the_form form {
		border-radius: 20px;
	}

	section#gallery {
		position: relative;
		z-index: 10;
	}

	div#the_content.col-2 {
		width: 100%;
		max-width: 520px;
	}

	body.page-template-main-landing-pages div#the_form.active {
		right: 0;
	}

	body.page-template-main-landing-pages .site-header {
		z-index: 10;
	}
	#services > div.col-full.flex{flex-direction: column;}

	#services > div.col-full.flex div.service {
		width: 100%;
		margin-bottom: 4em;
		max-width: 560px;
	}

	section#peinture-thermo-isolante div.flex {
		flex-direction: column;
	}
	#peinture-thermo-isolante > div > div:nth-child(1) > a{display:none}

	section#professionnels h2 {
		max-width: 100%;
	}
}/*max-width: 990px*/

@media screen and (max-width:690px){
	footer#colophon div#zone-intervention {
		columns: 3;
	}
	#professionnels .flex {flex-direction: column;}
	#professionnels .block {width:100%}

}/*max-width:690px*/

@media screen and (min-width: 768px) and (max-width: 1100px) {
	/* Styles à appliquer entre 768px et 1100px de largeur */
	#masthead > div.col-full.flex {
		display: flex;
		flex-direction: column;
	}
	#masthead nav#site-navigation {
		width: 100%;
	}
}/* 768px et 1100px */

@media screen and (max-width:768px){
	div#top {
/* 		min-width: 850px;
		overflow: scroll; */
		display: none;
	}

	/*Menu Mobile*/
	nav#site-navigation {
		background: #ffffff;
		width: 100%;
		text-align: center;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		padding-top: 40px;
	}

	.site-branding {
		position: relative;
		z-index: 12;
	}

	#menu-main-3 {
		padding: 4em 0 2em;
	}

}/*max-width:768px*/


@media screen and (max-width:500px){
	.responsive{
		display: block;
		width: 100%;
	}
	footer#colophon div#zone-intervention {
		columns: 2;
	}

	#landing > div > div:nth-child(1) > p:nth-child(6) {
		text-align: center;
	}
	section#landing button {
		margin-bottom: 1em;
		min-width: 320px;
	}

	section#landing #speed-call {
		right: -300px;
		width: calc(100% - 70px);
		max-width: 300px;
	}
	body.page-template-main-landing-pages div#the_form, section#landing #speed-call {
		right: -280px;
		width: calc(100% - 70px);
		max-width: 300px;
	}
}/*max-width:500px*/

div#shadow{
	background: #000000ba;
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}