/*
Theme Name:   Idées Larges
Theme URI:    https://www.ideeslarges.com
Description:  Thème de l'agence Idées Larges
Author:       Idées Larges
Author URI:   https://www.ideeslarges.com
Template:     generatepress
Version:      1
*/


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body {
	overflow-x: hidden;
}

header {
	position: sticky !important;
	top: 0 !important;
	z-index: 999 !important;
}


.btn-devis{
	align-items: center;
	background-color: var(--bleu);
	display: inline-flex;
	line-height: 1;
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
	text-decoration: none;
	margin-left : 10px;
	width : fit-content !important;
}
.btn-devis a{
	color: #ffffff !important;
	text-transform: uppercase;
	line-height: 3 !important;
	margin-top: 3px;
}

.btn-slide mark, .btn-slide strong {
	z-index:10;
	position : relative;
}

.btn-slide::before {
	width : 500px;
	height: 500px;
	transform: rotate(-35deg);
	transform-origin : left bottom; 
	content:"";
	background-color : #FFF;
	opacity : 0.2;
	position : absolute;
	bottom : 0;
	left : 0;
	transition : 0.5s cubic-bezier(0.3, 0.8, 0.3, 1.4);
}
.btn-slide-blanc::before {
	background-color : var(--bleu);
}

.btn-slide:hover::before {
	bottom : -200px;
}

.btn-service::before {
	content: "";
	width: 30px;
	height: 70%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: var(--contrast);
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	z-index: 1;
}

@media screen and (min-width : 1025px) {
	.bloc-service::before {
		width : 100%;
		height: 80%;
		clip-path: polygon(0 0, 100% 0,100% 20%, 0 100%);
		content:"";
		background-color : var(--contrast);
		position : absolute;
		top : 0;
		right : 0px;
		z-index : 10;
		transition : 0.3s linear ; /*cubic-bezier(0.3, 0.8, 0.3, 1.4);*/
	}


	.bloc-service:hover::before {
		height : 0%;
	}

	.bloc-service::after {
		content: url("https://mymenuiserie.ideeslarges.com/wp-content/uploads/2026/05/deco-service.svg");
		position : absolute;
		transform-origin: left bottom;
		top : calc( 80% - 84px );
		left : 30px;
		z-index : 11;
		transition : 0.3s linear ; /* cubic-bezier(0.3, 0.8, 0.3, 1.4); */
	}

	.bloc-service:hover::after {
		top : -110px;
		left : calc( 100% + 60px )
	}
	.col-btn-services {
		transform : translatey(-50px);
		opacity : 0;
	}
}

.gb-accordion .gb-accordion__toggle::before {
	width: 500px;
	height: 500px;
	transform: rotate(55deg);
	content: "";
	background-color: var(--bleu);
	position: absolute;
	top: 0;
	right: -200px;
	transition : 0.5s cubic-bezier(0.3, 0.8, 0.3, 1.4);
}

@media (min-width : 1025px) {
	.effet-guillemet {
		position : relative;
	}

	.effet-guillemet::before,
	.effet-guillemet::after{
		content : "";
		width : 80px;
		position : absolute;
		aspect-ratio: 69.995 / 113.667; /* ≈ 0.616 */
		background: #166da3;
		clip-path: polygon( 100% 100%, 23.78% 100%, 23.78% 44.50%, 100% 11.64%, 85.53% 0%, 0% 36.88%, 0% 100% );
	}

	.effet-guillemet::before {
		left : -75px;
		top : -65px;
	}

	.effet-guillemet::after {
		right : -75px;
		bottom : -60px;
		transform : rotate(180deg)
	}

}

.mobile-menu-control-wrapper .menu-toggle {
	background : none !important;
}

.gb-accordion__toggle h3 {
	position : relative ;
	z-index : 10;
}

.img-realisation {
	position : relative;
}

.img-realisation::before {
	content : "";
	width : 100px;
	height : 70px;
	top : 0;
	left : 0;
	position : absolute;
	background : var(--contrast);
	clip-path : polygon(0 0, 0 100%, 100% 0)
}

.img-realisation::after {
	content : "";
	width: 240px;
	height : 170px;
	bottom : 0;
	right : 0;
	position : absolute;
	background : #FFFFFF;
	opacity : 0.6;
	clip-path : polygon(0 100%, 100% 100%, 100% 0);
}