/********************style général********************/
@font-face{/*titre*/
	font-family: 'ffbold';
	src: url('/ffbold.woff2') format('woff2'), url('/ffbold.otf') format('opentype');
	font-display: swap;/*met une police de remplacement si on chargée*/
}
@font-face{/*slogan*/
	font-family: 'ffscript';
	src: url('/ffscript.woff2') format('woff2'), url('/ffscript.otf') format('opentype');
	font-display: swap;/*met une police de remplacement si on chargée*/
}
*{
	margin: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
	scrollbar-width: thin;/*ascenseur*/
	scroll-behavior: smooth;/*scroll lent*/
	font-size: calc(0.25vw + 14px);/*16px comme unité de mesure de référence*//*toujours ajouter des espace autour des opérateurs +*-/ */
	font-family: serif, sans-serif;
	letter-spacing: 0.1vw;
	line-height: 1.4;
	box-sizing: border-box;/*empeche les débordement de margin, border, padding du viewport*/
	--blef: rgba(25, 59, 83, 1);/*bleu fonce*/
	--ble3: rgba(38, 93, 111, 1);/*bleu 1/3 bouton*/
	--ble2: rgba(58, 139, 199, 1);/*bleu 1/2*/
	--blec: rgba(90, 219, 248, 1);/*bleu ciel*/
	--roug: rgba(252, 73, 45, 1);/*rouge*/
	--oran: rgba(253, 188, 26, 1);/*orange*/
	--crem: rgba(253, 227, 188, 1);/*creme*/
	--fond: rgba(255, 252, 249, 1);/*blanc*/
	/*outline: 1px solid red;/*permet de faire du diagnostique d'erreur en plus de F12*/
}
body{
	background: linear-gradient(to top, var(--blef) 20%, var(--fond), var(--blef) 80%);
	background-attachment: fixed;
}
/*********************boite bannière********************/
.bann-flex{
	position: relative;
	display: block;
	overflow: hidden;
	height: 15vw;
	width: 100%;
}
.bann-flex video{
	position: absolute;/*absolute met hors du flux et le positionne sur bann-flex*/
	top: 50%; left: 50%;
	height: auto;/*auto étend le fond à la longueur*/
	width: 100%;/*100% étend le fond à la largeur*/
	transform: translate(-50%, -50%);
	object-fit: contain;/*contain ou cover*/
	z-index: -1;/*-1 fait passer la vidéo sous le texte*/
}
.bann-flex p{
	position: relative;
	display: grid;/*grid pour centrer l'image dans le lien*/
	align-items: center;/*alignement vertical*/
	justify-content: center;/*alignement horizontal*/
	height: 100%;/*etend la zone à la hauteur*/
	width: 100%;/*étend la zone à la largeur*/
	font-size: 15vw;/*15*/
	overflow-x: auto;/*crée un ascenseur horizontal*/
	white-space: nowrap;/*empêche le retour à la ligne*/
	font-family: ffbold;
	transform: scaleX(1.5);/*3.7 gentill - 1.5 gentill avec 2 ll*/
	letter-spacing: 0vw;
	line-height: 1;/*0*/
	color: black;/*black/white depend de mix-blend-mode*/
	mix-blend-mode: screen;/*multiply pour fond noir police blanche et screen pour fond blanc police noire*/
	background-color: white;/*white/black depend de mix-blend-mode*/
	user-select: none;
	z-index: 1;
}
.bann-flex img{
	position: absolute;/*rend z-index actif*/
	top: 0; left: 0;
	height: 100%;/*etend la zone à la hauteur*/
	width: 100%;/*étend la zone à la largeur*/
	opacity: 0;/*rend l'image invisible mais présente pour le référencement car se charge vite*/
	z-index: -2;
}
/*********************boite collante contact et téléphone********************/
.nume-flex{
	position: sticky;/*sticky pour rendre collante la boite*/
	display: flex;/*block pour occuper tout l'espace - flex pour positionner l'intérieur*/
	align-items: center;/*alignement vertical*/
	justify-content: center;/*alignement horizontal*/
	top: 0;/*positionne le collage en haut de l'affichage*/
	/*overflow: hidden;*/
	height: 8vw;/*8vw valeur a reporter dans scroll-margin-top*/
	width: 100%;
	background-color: var(--blef);
	background-image: url('ani.gif');
	background-size: cover;
	z-index: 10;
}
.nume-flex img{
	display: grid;/*grid pour centrer l'image dans le lien*/
	align-items: center;/*alignement vertical*/
	justify-content: center;/*alignement horizontal*/
	height: 6vw;
	width: auto;
}
.nume-flex p{
	font-weight: bolder;
	font-size: 4.5vw;
	overflow-x: auto;/*crée un ascenseur horizontal*/
	white-space: nowrap;/*empêche le retour à la ligne*/
	color: var(--blec);
	user-select: none;
}
.nume-flex a{
	font-weight: bolder;
	font-size: 6vw;
	white-space: nowrap;
	color: var(--roug);
	text-decoration: none;
	text-shadow: 0 0 5px var(--oran);
}
/*********************clignotement de texte********************/
@keyframes clignotement{
	50% {
		opacity: 0;
	}
}
.clignot{
	animation: clignotement 1.5s infinite;
}
/*********************décalage suite a appel interne <a>********************/
#id-text, #id-menu, #id-menu-sous{
	scroll-margin-top: 7.95vw;
}

/*********************boite de texte********************/
.text-flex{
	position: relative;
	display: block;
	margin-top: 0vw;/*ajoute un espace vide avant la boite 2vw*/
	border: 0.5vw solid var(--blec);
	border-radius: 5vw;
	padding: 6vw 12vw;/*vertical horizontal, ajuster le gap*/
	height: auto;
	width: 100%;
	color: var(--blef);
	background-color: var(--fond);
	box-shadow: inset -2px 2px 3px rgba(0, 0, 0, 0.6);
	user-select: none;
}
.text-flex.dcal{
	margin-top: 2vw;/*ajoute un espace vide avant la boite 2vw*/
}
.text-flex a,
.text-flex span{
	color: var(--roug);
	font-weight: bold;
	text-shadow: 0 0 5px var(--oran);
	text-decoration: none;
}
.text-flex .titri a{/*mettre des liens dans les titres*/
	font-size: 1.5rem;/*multiplie par Xrem la font-size en vw*/
	letter-spacing: 0.4vw;
	color: var(--fond);
	text-align: center;
	text-shadow: 1px 1px 2px var(--blec), 0 0 5px var(--blec), 0 0 25px var(--blec);
}
.text-flex .titri{/*ex H1 - mise en page pour les titres d'images transparentes*/
	height: auto;
	width: 100%;
	border-bottom: none;/*pour annnuler h2*/
	border-left: none;/*pour annuler h2*/
	border-radius: 5vw;
	padding: 2vw 4vw;
	font-size: 1.5rem;/*multiplie par Xrem la font-size en vw*/
	letter-spacing: 0.4vw;
	color: var(--fond);
	text-align: center;
	text-shadow: 1px 1px 2px var(--blec), 0 0 5px var(--blec), 0 0 25px var(--blec);
	box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.5);
}
.text-flex .titre{/*ex H2*/
	border-bottom: 2px solid var(--blec);
	border-left: 2px solid var(--blec);
	border-radius: 5vw;
	padding: 1.5vw 3vw;
	font-size: 1.2rem;/*multiplie par Xrem la font-size en vw*/
	letter-spacing: 0.3vw;
	text-align: left;
	text-shadow: 1px 1px 2px var(--blec), 0 0 5px var(--blec), 0 0 25px var(--blec);
	box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.5);
}
.text-flex li{
	margin: 0 0 1rem 1rem;
	list-style-image: url('ok.png');
}
table{
	margin: auto;
	border-collapse: collapse;
	border: 2px solid var(--blec);
	border-radius: 2.5vw;
	width: 50vw;
}
table input[type="number"]{
	width: 3rem;
}
.text-flex th,
.text-flex td{
	border: 1px solid var(--blec);
	height: 2rem;
	width: 25vw;
	text-align: center;
}
.text-flex th{
	color: var(--blec);
	background-color: var(--blef);
}
.text-flex strong{
	letter-spacing: 0.2vw;
	text-shadow: 0.05px 0 0 var(--blef);/**/
}
/*********************mise en page des phrases********************/
.text-flex p{
	animation: 2s gliss;
}
@keyframes gliss{
	from{transform: translateY(2vh);}
	to{transform: translateY(0);}
}
@media (orientation: portrait){
	.text-flex p{
		column-count: 1;
		text-align: center;
	}
	.idefil{
		background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1) 20%), var(--img) 50% / auto 100%;/*centré (slash) largeur hauteur*/
	}
}
@media (orientation: landscape){
	.text-flex p{
		column-count: 2;
		column-gap: 12vw;/*espace entre les colonnes, ajuster le padding horizontal*/
		text-align: justify;
	}
	.idefil{
		background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1) 20%), var(--img) 50% / 100% auto;/*centré (slash) largeur hauteur*/
	}
}
.text-flex p.colctr{/*ex H5 - laisse un <p> en 1 ligne sans le fractionner, empèche column-count*/
	column-count: 1;
	text-align: center;
	font-weight: normal;/*afin d'avoir la police d'un <p>*/
	animation: none;
}
.text-flex p.colgo{/*ex H6 - laisse un <p> en 1 ligne sans le fractioner, empèche column-count*/
	column-count: 1;
	text-align: left;
	font-weight: normal;/*afin d'avoir la police d'un <p>*/
	animation: none;
}
/*********************défilement d'images sous les titres********************/
.idefil{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5vw;
	padding: 2vw 4vw;
	height: auto;
	width: auto;
	font-size: 3rem;/*multiplie par Xrem la font-size en vw*/
	letter-spacing: 0.4vw;
	color: white;
	text-align: left;
	text-shadow: 1px 1px 2px var(--blec), 0 0 5px var(--blec), 0 0 25px var(--blec);
	box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.6);
	background-attachment: fixed;
	background-blend-mode: multiply;
	&:nth-of-type(1) {--img: url(/tuyaux-cuivre+.jpg);}
	&:nth-of-type(2) {--img: url(/chaufferie+.jpg);}
	&:nth-of-type(3) {--img: url(/robinet-atelier+.jpg);}
	&:nth-of-type(4) {--img: url(/renovation-electrique+.jpg);}
	&:nth-of-type(5) {--img: url(/renovation-baignoire+.jpg);}
	&:nth-of-type(6) {--img: url(/renovation-lavabo+.jpg);}
	&:nth-of-type(7) {--img: url(/wc+.jpg);}
}
.text-pop{
	position: relative;
	display: block;/*sort du flux de text-flex*/
	margin: 0 auto;/*auto = centrer*/
	height: auto;
	width: 30%;
	box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px var(--blec);
	cursor: pointer;
}
/*********************vidéos********************/
.text-flex video{
	position: relative;
	height: auto;/*auto étend le fond à la longueur*/
	width: 100%;/*100% étend le fond à la largeur*/
	object-fit: contain;/*contain ou cover*/
	box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px var(--blec);
}
/*********************image popup********************/
.popup{
	position: fixed;
	display: none;/*Masqué par défaut*/
	align-items: center;
	justify-content: center;
	top: 0; left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 15;
}
.img-pop,
.vid-pop{
	max-height: 90vh;
	max-width: 90vw;
	box-shadow: 0 0 0 2px var(--blec);
	animation: rotate 0.3s forwards;
	height: auto;
	width: auto;
	object-fit: contain;
}
.img-pop{
	aspect-ratio: attr(width) / attr(height);
}
@keyframes rotate {
	from {transform: rotate(0deg) scale(0); }
	to {transform: rotate(360deg) scale(1);}
}
.popup:target{
	display: flex;
	box-shadow: 0 0 0 2px var(--blec);
}
/*********************menu h2 qui se développe********************/
.cache{
	display: none;
}
.cache:target{
	display: block;
}
a.toggle{
	color: var(--blef);
}
.toggle{/*lien de bascule*/
	display: flex;
	border-bottom: 2px solid var(--blec);
	border-left: 2px solid var(--blec);
	border-radius: 5vw;
	padding: 1.5vw 3vw;/*comme h2 sans #a*/
	text-decoration: none;
	box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.5);
}
.toggle .titre{
	width: 95vw;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.toggle small{
	line-height: 2rem;
	text-shadow: 1px 1px 2px var(--blec), 0 0 5px var(--blec), 0 0 25px var(--blec);
}
/*********************décalage suite a appel interne <a> toggle********************/
#id1, #id2, #id3, #id4, #id5, #id6, #id7, #id8, #id9{
	scroll-margin-top: 35vw;
}
/*********************boite menu & sous-menus********************/
.menu-flex{
	position: relative;
	display: grid;
	gap : 2vw;/*entre*/
	grid-template-columns: repeat(auto-fit, minmax(calc(1.1vw + 128px), 1fr));/*1.1vw + 128px*/
	padding: 2vw;/*autour*/
	width: 100%;
	text-align: center;
}
.menu,
.menu-sous{
	position: relative;
	border: 2px solid var(--blec);
	/*overflow: hidden;/*ne pas mettre sinon bug dans edge44*/
	box-shadow: inset -2px 2px 3px rgba(0, 0, 0, 0.6);
}
.menu#prof{
	border: 2px solid var(--crem);
}
.menu{
	border-radius: 5vw;
	padding-top: 25%;/*100% crée un carré par rapport à width*/
	background-color: var(--fond);
}
.menu-sous{
	border-radius: calc(1.1vw + 16px);
	padding-top: 125%;/*100% crée un carré par rapport à width : 100 + top*2 + height de menu-sous a*/
	
}
.menu a:hover{/*survol*/
	border-radius: 5vw;
	color: var(--fond);
	background-color: var(--blef);
	box-shadow: inset -2px 2px 3px rgba(255, 255, 255, 0.6);
}
.menu a:active{/*sélection*/
	background-color: var(--ble3);
}
.menu a,
.menu-sous a{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0; right: 0; bottom: 0; left: 0;/*redéfinit l'espace perdu par padding-top*/
	font-size: 0.85rem;/*multiplie par Xrem la font-size en vw*/
	color: var(--blef);
	font-weight: bold;
	text-shadow: 1px 1px 2px var(--blec), 0 0 5px var(--blec), 0 0 25px var(--blec);
	text-decoration: none;
}
.menu-sous a{
	align-items: start;
	top: 5%; right: 5%; left: 5%;/*redéfinit l'espace perdu par padding-top*/
	height: 95%;
	width: 90%;/*100 - left - right*/
	z-index: 2;
}
.menu-sous img{
	position: absolute;/*absolute met hors du flux et le position sur bann-flex*/
	display: flex;
	top: 20%;/*top + 15 de menu-sous a*/
	height: auto;
	width: 100%;/*100% étend le fond à la largeur*/
}
/*********************boite pied de page & infos utiles********************/
.pied-flex{
	position: relative;
	display: block;
	/*overflow: hidden;/*ne pas mettre sinon bug dans edge44*/
	margin-bottom: 2vw;/*ajoute un espace vide sous la boite*/
	border: 0.5vw solid var(--blec);
	border-radius: 5vw;
	padding: 5vw;
	height: auto;
	width: 100%;
	font-style: normal;
	text-align: center;
	color: var(--blef);
	background-color: var(--fond);
	box-shadow: inset -2px 2px 3px rgba(0, 0, 0, 0.6);
	user-select: none;
}
.pied-flex p.slog{/*ex H3*/
	font-family: ffscript;
	font-size: 7vw;
	font-weight: normal;/*afin d'avoir la police d'un <p>*/
	color: var(--blef);
	animation: slogan 9s linear infinite;
}
@keyframes slogan{
	0%{transform: translate(-.26vw,-.96vw);}
	33%{transform: translate(-.7vw,.7vw);}
	66%{transform: translate(.96vw,.26vw);}
	100%{transform: translate(-.26vw,-.96vw);}
}
.pied-flex p.label{/*ex H4*/
	font-size: 1.5rem;/*multiplie par Xrem la font-size en vw*/
	font-weight: normal;/*afin d'avoir la police d'un <p>*/
	letter-spacing: 0.3vw;
	text-shadow: 0 0 5px var(--blec), 0 0 25px var(--blec);
}
.pied-flex a,
.pied-flex span{
	color: var(--roug);
	width: 100%;
	text-shadow: 0 0 5px var(--oran);
	text-decoration: none;
}
.code-flex{
	display: flex;/*sort du flux de pied-flex*/
	justify-content: space-between;
	align-items: center;
}
.code-pop{
	height: auto;
	width: 50%;
	box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px var(--blec);
}
.pied-pop,
.pied-pop-mini{
	position: relative;
	display: block;/*sort du flux de text-flex*/
	margin: 0 auto;/*auto = centrer*/
	height: auto;
	box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px var(--blec);
	cursor: pointer;
}
.pied-pop{
	width: 70%;
}
.pied-pop-mini{
	width: 20%;
}
.pied-pop.prop{
	aspect-ratio: 1.33;/*iframe google maps*/
}
/********************les boutons********************/
.bout-text{
	position: relative;
	display: flex;
	justify-content: center;
}
.bout{
	border-radius: 5vw;
	padding: 0.5rem 1rem;
	text-align: center;
	color: var(--blec);
	background-color: var(--blef);
	box-shadow: inset -2px 2px 3px rgba(255, 255, 255, 0.6), -2px 5px 8px 0 rgba(0, 0, 0, 0.6);
	cursor: pointer;
}
.bout:hover{
	color: var(--blef);
	font-weight: bold;
	text-shadow: 1px 1px 2px var(--blec), 0 0 5px var(--blec), 0 0 25px var(--blec);
	background-color: var(--fond);/*survol*/
	box-shadow: inset -2px 2px 3px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--blec);
}
.bout:active{
	color: var(--fond);
	background-color: var(--ble3);/*sélection*/
}