/*  Theme Name:   Rivet Theme
Theme URI:    https://guilhemdelachapelle.com 
Description:  Description de mon thème enfant 
Author:       Guilhem
Author URI:   https://guilhemdelachapelle.com 
Template:     hello-elementor  
Version:      0.1.0 */




html, body {
	--dark-green: #092510;
	--medium-green: #3B5849;
	--white: #FFFFFF;
	--main-font: "mundial", sans-serif;
	--ivy-font: "ivystyle-sans", sans-serif;
	position: relative;
	margin: 0;
	padding: 0;
	overflow-x: hidden; /* Sécurité de base */
	width: 100%;
}

.site-wrapper {
	width: 100%;
	overflow-x: hidden;
	overflow-y: clip;
	position: relative;
}


.grille-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  
  /* MODIFICATION : Opacité réglée à 0.05 */
  opacity: 0.05;

  /* MODIFICATION : Couleur changée pour %23092510 (qui correspond à #092510) dans les deux attributs 'stroke' */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 0 V100 M0 50 H100' stroke='%23092510' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3Cpath d='M50 50 L50.01 50' stroke='%23092510' stroke-width='12' stroke-linecap='square' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");

  /* Taille : 4 colonnes (25vw) et 2 rangées (50vh) - ou ajusté selon vos besoins précédents */
  background-size: 25vw 50vh; 
  background-position: center; 
  background-repeat: repeat;
}

/* Loading Animation */
/* Cachez initialement les éléments animés */
.hero-logo, 
#Groupe_143, #Groupe_144, #Groupe_145, 
.grille-overlay,
.header-container,
.hero-image-container,
.hero-content-container [data-anim] {
	visibility: hidden;
}


section {
	position: relative;
}

body h1, body h2, body h3 {
	font-family: var(--main-font);
	color: var(--dark-green);
	/* Active la césure automatique */
	/* -webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;  */
	
	/* Sécurité supplémentaire pour forcer le retour à la ligne si besoin */
	overflow-wrap: break-word;
}

body h2 {
	font-size: 40px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

body h3, body h4 {
	font-size: 40px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

body p, body li {
	font-family: var(--ivy-font);
	color: var(--dark-green);
	line-height: 2;
	text-wrap: pretty;
}


[class*="surtitre-"] {
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 2px;
	text-wrap: pretty;
	display: flex;
	align-items: center;
}

[class*="surtitre-"]::before {
	content: "";
	display: block;
	flex-shrink: 0;
	  width: 18px;
	  height: 18px;
	  margin-right: 12px; 
	  /* 3. Le carré blanc à l'intérieur */
	  
	  outline-offset: -3px;     /* Recule le trait blanc vers l'intérieur de 4px */
	  margin-top: 3px;
}
.surtitre-green::before {
	background-color: var(--dark-green); 	
	outline: 1px solid var(--white); /* L'épaisseur du trait blanc */
}

.surtitre-white::before {
	background-color: var(--white); 	
	outline: 1px solid var(--dark-green); /* L'épaisseur du trait blanc */
}

@media (max-width: 600px) {
	body h2 {
		font-size: 20px;
	}
	body h3 {
		font-size: 20px;
	}
	
	body p {
		font-size: 15px;
	}
	
	[class*="surtitre-"] {
		font-size: 16px;
	}
}

button {
	font-family: var(--main-font);
	letter-spacing: 2px;
	text-transform: uppercase;
	border-radius: 0px;
	padding: .5em .5em .5em 1em;
	display: inline-flex;
	align-items: center;
	line-break: anywhere;
	text-wrap: pretty;
	white-space: nowrap;
}

a {
	line-break: anywhere;
	text-wrap: pretty;
}

body span {
	text-wrap: pretty;
}

/* [class*="button-"]::after {
	content: "";
	background-image: url("http://localhost:8888/mcr/wp-content/themes/rivet-theme/src/svg/arrow-button.svg");
	display: inline-block;
	  
	  width: 25px;
	  height: 25px;
	  margin-left: 12px;
	  
	  background-color: var(--dark-green); 
} */

button svg {
	margin-left: 12px;
	/* padding-top: 4px; */
	transition: .2s;
}

button:hover svg {
	transform: scale(1.1) rotate(90deg);
	transition: .2s;
}

.button-white {
	color: var(--white);
	border: 1px solid var(--white);
}

.button-white svg #telecharger-arrow_4_ {
	fill: var(--dark-green); 
}
.button-white svg #Rectangle_20 {
	fill: var(--white); 
}

.button-white:hover {
	background-color: var(--white);
	color: var(--dark-green);
}

.button-white:hover svg #telecharger-arrow_4_ {
	fill: var(--white); 
	transition: .2s;
}
.button-white:hover svg #Rectangle_20 {
	fill: var(--dark-green); 
	transition: .2s;
}

.button-green {
	color: var(--dark-green);
	border: 1px solid var(--dark-green);
}

.button-green:hover {
	color: var(--white);
	background-color: var(--dark-green);
}

.button-green:hover svg #telecharger-arrow_4_ {
	fill: var(--dark-green); 
	transition: .2s;
}
.button-green:hover svg #Rectangle_20 {
	fill: var(--white); 
	transition: .2s;
}



/* Image Blocks Design */

.image-blocs-container {
	position: relative;
	display: block;
	border: 1px solid var(--dark-green);
	--pseudo-scale: .9;
	--pseudo-opacity: 0;
	/* overflow: hidden; */
}

.image-blocs-container img {
	display: block;
}

.image-blocs-container::before {
	content: "";
	display: inline-block;
	position: absolute;
	background-color: var(--dark-green);  
	  outline: 1px solid var(--white);
	  outline-offset: -3px;  
	width: 25px;
	height: 25px;
	background-color: var(--dark-green);
	bottom: 0;
	left: 0;
	z-index: 2;
	transform: translate(-50%, 50%) scale(var(--pseudo-scale));
	opacity: var(--pseudo-opacity);
}

.image-blocs-container::after {
	content: "";
	display: inline-block;
	position: absolute;
	background-color: var(--dark-green);  
	  outline: 1px solid var(--white);
	  outline-offset: -3px;  
	width: 25px;
	height: 25px;
	background-color: var(--dark-green);
	top: 0;
	right: 0;
	z-index: 2;
	transform: translate(50%, -50%) scale(var(--pseudo-scale));
	opacity: var(--pseudo-opacity);
}

.image-bloc-border {
	width: 100%;
	height: 100%;
	border: 1px solid var(--dark-green);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
}

/* Cas particulier citation */

.section-citation .image-blocs-container::after, .section-citation .image-blocs-container::before {
	width: 40px;
	height: 40px;
}

/*  */
/*  */
/* Hero Design */

.hero-section {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	max-width: 100vw;
	min-height: 100vh;
	padding-top: 100px;
	padding-left: 1em;
	padding-right: 1em;
	position: relative;
}

.hero-content-container {
	width: 600px;
	margin: 20px;
}

.hero-image-container {
	width: 600px;
	height: 600px;
	position: relative;
	margin: 20px;
}

.portrait-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
}


@media (max-width: 1050px) {
	.hero-section {
		flex-direction: column;
		padding-top: 75px;
	}
	.hero-content-container {
		width: 100%;
	}
	.hero-image-container {
		width: 100%;
	}
}

.hero-logo-container {
	position: absolute;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.hero-logo {
	
	/* top: 50%;
	left: 50%; */
	/* transform: translate(-50%, -50%); */
	width: 500px;
	pointer-events: none;
	z-index: 2;
}

.hero-logo svg {
	width: 100%;
}

@media(max-width: 600px) {
	.hero-logo {
		width: 80vw;
	}
}

.hero-logo .custom-logo {
	width: 100%;
}

/*  */
/*  */
/* Section 2 */

.section-2 {
	width: 100vw;
	min-height: 100vh;
	display: flex;
}

.section-2 .grid-bg-container {
	z-index: 1;
}

.section-2-left {
	background-color: var(--medium-green);
	width: 75vw;
	min-height: 100vh;
	padding: 5em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
}

.section-2 h2, .section-2 h3, .section-2 p {
	color: var(--white);
}

.section-2-right {
	background-color: var(--dark-green);
	width: 25vw;
	height: 100vh;
}

.review-container {
	width: 100%;
	height: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.review-container img {
	width: 100%;
	height: 100%;
}

.section-2-image-container {
	height: 50%;
	width: 100%;
	background-size: cover;
}

@media (max-width: 900px) {
	.section-2 {
		flex-direction: column;
	}
	.section-2-left {
		width: 100vw;
		padding: 1em;
	}
	.section-2-right {
		width: 100vw;
		display: flex;
		height: 50vh;
	}
	.review-container {
		width: 50%;
		height: 100%;
	}
	.section-2-image-container {
		width: 50%;
		height: 100%;
	}
}

@media (max-width: 550px) {
	.section-2-left {
		padding: 2em;
	}
	.section-2-right {
		flex-direction: column;
	}
	.review-container {
		width: 100%;
		height: 50%;
	}
	.section-2-image-container {
		width: 100%;
		height: 50%;
	}
}

/*  */
/*  */
/* Sommaire */

.section-sommaire {
	position: relative;
	display: flex;
	width: 100vw;
	min-height: 100vh;
}

.sommaire-left-container {
	width: 75vw;
}

.sommaire-right-container {
	width: 25vw;
	background-size: cover;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sommaire-image-bg {
	background-color: var(--dark-green);
	position: absolute;
	height: 100%;
	width: 100%;
	opacity: .55;
	top: 0;
}

.gros-titre {
	font-size: 120px;
	font-family: var(--main-font);
	color: var(--white);
	text-transform: uppercase;
	letter-spacing: 2px;
	z-index: 2;
	display: inline-block; /* Important pour que la transformation fonctionne */
	writing-mode: vertical-lr; 
	  
	  /* 2. Indispensable pour tourner les lettres dans le bon sens (si besoin) */
	  text-orientation: mixed; 
	
	  /* 3. LA CLÉ : Mettre la hauteur de ligne à 1 ou moins */
	  line-height: 1; 
	  /* Parfois, 0.9 ou 0.8 est nécessaire selon la police pour "manger" la marge */
	
	  /* 4. Faire en sorte que la boîte ne prenne que la place du contenu */
	  display: inline-block; 
	  vertical-align: text-top; /* Colle le haut du flux au bord */
	  
	  /* 5. Si vous voulez vraiment forcer le collage à gauche */
	  margin-left: -0.1em; /* Ajustement négatif léger si la police a une marge naturelle */
}

.sommaire-title-container {
	min-height: 50vh;
	width: 100%;
	background-color: var(--dark-green);
	padding: 4em;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sommaire-title-container h2, .sommaire-title-container h3 {
	color: var(--white);
}

.sommaire-container {
	padding: 2.5em;
	/* margin-top: 5em; */
}

.sommaire-item {
	border-bottom: 1px solid var(--dark-green);
	padding-bottom: 5em;
	padding-top: 5em;
	padding-left: 2em;
	
}

.sommaire-item h3 {
	font-size: 30px;
	text-wrap: balance;
}

.sommaire-item:hover {
	background-color: var(--dark-green);
	cursor: pointer;
	transition: .5s ease-out;
}

.sommaire-item:hover h3 {
	color: var(--white);
}

/* Compétences Item Design */
/* Container global de la section */
/* --- Base (Impair : 1, 3, 5...) --- */
.section-competence {
	padding: 40px 0;
	margin-top: 5em;
	max-width: 100vw;
}

.section-competence .container {
	display: flex;
	flex-direction: row; /* Texte à gauche, Image à droite */
	align-items: center;
	justify-content: space-between;
	max-width: 1500px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 0 40px;
	gap: 80px;
}

.section-competence .bloc-texte {
	flex: 1;
}

.section-competence .bloc-image {
	flex: 0 0 45%;
	height: 100vh;
}

.section-competence .bloc-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* --- ALTERNANCE AUTOMATIQUE (Pair : 2, 4, 6...) --- */

/* 1. On inverse l'ordre visuel (Image à gauche, Texte à droite) */
.section-competence:nth-child(odd) .container {
	flex-direction: row-reverse;
}

@media (max-width: 1050px) {
	.section-competence .container {
		flex-direction: column;
		justify-content: flex-start;
		min-height: 600px;
		gap: 20px;
	}
	/* Correction du Row Reverse sur Desktop */
	.section-competence:nth-child(odd) .container {
		flex-direction: column;
	}
	.section-competence .bloc-texte {
		flex: 0;
	}
	.section-competence:nth-child(odd) .bloc-texte {
		padding-right: 0px;
		padding-left: 0px;
	}
	.section-competence .bloc-image {
		width: 100%;
		height: 400px;
	}
	.section-competence .bloc-image img {
		height: 400px;
	}
}

@media (max-width: 900px) {
	.section-competence .container {
		padding: 0 1em;
	}
	.section-sommaire {
		flex-direction: column-reverse;
	}
	.sommaire-right-container {
		width: 100%;
		height: 25vh;
		align-items: center;
	}
	.sommaire-title-container {
		padding: 1em;
	}
	.sommaire-container {
		padding: 1em;
	}
	
	.gros-titre {
		font-size: 10vw;
		writing-mode: horizontal-tb;
	}
	
	.sommaire-left-container {
		width: 100%;
	}
	.sommaire-item {
		text-align: center;
		padding-left: 0px;
	}
}

/* Citation Design */

.section-citation {
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background-color: var(--white); */
	padding-top: 10em;
	padding-bottom: 20em;
	padding-right: 20px;
	padding-left: 20px;
}

.citation-container {
	background-color: var(--medium-green);
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3em;
	text-align: center;
	position: relative;
}

.citation-container p {
	color: var(--white);
	font-size: 40px;
	text-transform: uppercase;
	font-family: var(--main-font);
}

.square {
	position: absolute;
	width: 40px;
	height: 40px;
	background-color: var(--dark-green);
	z-index: 1; /* Assure que les carrés sont au-dessus */
}

.top-left {
	top: -10px;
	left: -10px;
}

.top-right {
	top: -10px;
	right: -10px;
}

.bottom-left {
	bottom: -10px;
	left: -10px;
}

.bottom-right {
	bottom: -10px;
	right: -10px;
}

@media (max-width: 1050px) {
	.square {
		width: 30px;
		height: 30px;
	}
	.citation-container p {
		font-size: 30px;
	}
}

@media (max-width: 700px) {
	.citation-container {
		padding: 2em;
		width: 95%;
	}
}

/* Bandeau Défilant Design */

/* Conteneur principal du bandeau */
.marquee-section {
	padding: 60px 0;
	overflow: hidden; /* Masque ce qui dépasse */
	display: flex;
	flex-direction: column;
	gap: 10px; /* Espace entre les deux lignes */
}

/* Le style du texte (Contour uniquement) */
.marquee-text {
	font-size: 150px; /* Taille imposante */
	font-weight: 900; /* Très gras pour que le contour soit lisible */
	font-style: italic; /* Italique comme sur l'image */
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap; /* Force le texte sur une seule ligne */
	
	/* L'astuce pour le texte transparent avec contour */
	color: transparent;
	-webkit-text-stroke: 1px var(--dark-green);
}

/* Animation du défilement */
.marquee-track {
	display: flex;
	gap: 40px; /* Espace entre la répétition du texte */
	width: max-content;
	animation: scroll 20s linear infinite;
}

/* Pour inverser le sens de la deuxième ligne si désiré */
.marquee-track.reverse {
	animation-direction: reverse;
}

/* Définition de l'animation */
@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Responsive : plus petit sur mobile */
@media (max-width: 768px) {
	.marquee-text {
		font-size: 3rem;
	}
}

/* Presentation Avocat */

/* --- LA GRILLE PRINCIPALE --- */
.grid-layout {
	display: grid;
	/* 4 colonnes de 25% de la largeur de l'écran */
	grid-template-columns: repeat(4, 25vw);
	/* 3 rangées de 33.33% de la hauteur de l'écran */
	grid-template-rows: repeat(5, 40vh);
	width: 100vw;
	height: 160vh;
	background-color: var(--white);
}

/* Style de la grille de fond */

.grid-layout .grille-overlay {
	background-size: 25vw 60vh;
}

/* --- STYLES GÉNÉRAUX DES CELLULES --- */
.grid-item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- POSITIONNEMENT ET CONTENU --- */

/* 1. NOM (Coin haut gauche) */
.area-name {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	padding: 40px;
	background-color: white; /* Ou transparent selon le besoin */
	z-index: 10; /* Pour passer au-dessus de la photo si besoin */
	align-items: flex-start;
}

.avocat-name-container {
	width: 100%;
	position: absolute;
	padding: 2em;
	z-index: 2;
	top: 0;
	left: 0;
	transform: translateY(-50%);
}

.name-title {
	font-size: 120px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
	
}

/* 2. PHOTO (Zone centrale gauche) */
/* La photo semble occuper les colonnes 1 et 2, sur les rangées 1 et 2 */
.area-photo {
	grid-column: 1 / 4;
	grid-row: 1 / 3;
	background-color: transparent;
	z-index: 1;
	display: flex;
	align-items: flex-end; /* Aligner la photo en bas de la zone */
	justify-content: center;
	overflow: hidden;
}

/* Fond gris décoratif en haut à droite de la photo (Col 3, Row 1) */
/* .area-gray-deco {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	background-color: var(--light-gray);
} */

/* Simulation de la photo */
.photo-img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: 100% 60%;
}

/* 3. 7 ANS DE PRATIQUE (Haut droite) */
.area-years {
	grid-column: 4 / 5;
	grid-row: 1 / 2;
	background-color: white;
	align-items: center;
	text-align: center;
}

.years-number {
	font-size: 50px;
	color: var(--dark-green);
	font-family: var(--main-font);
}
.years-text {
	font-size: 20px;
	letter-spacing: 2px;
	font-family: var(--main-font);
	color: var(--dark-green);
	text-transform: uppercase;
	margin-top: 5px;
}

/* 4. BLOC TEXTE VERT (Milieu Droite - s'étend sur 2 colonnes) */
.area-text-block {
	grid-column: 1 / 4;
	grid-row: 3 / 5;
	background-color: var(--dark-green);
	padding: 2em;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 1em;
	line-height: 1.6;
	z-index: 1;
}

.area-text-block p, .area-text-block li {
	margin-bottom: 15px;
	color: white;
}

.area-text-block strong {
	font-weight: bold;
	color: #fff;
}

/* 5. EXPERTISE (Bas Gauche) */
.area-expertise {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
	background-color: var(--white);
	align-items: center;
	justify-content: center;
	z-index: 1;
}

/* 6. DILIGENCE (Bas Milieu) */
.area-diligence {
	grid-column: 4 / 5;
	grid-row: 3 / 5;
	align-items: center;
	justify-content: center;
}

/* 7. PERSÉVÉRANCE (Bas Droite - Col 3) */
.area-perseverance {
	grid-column: 4 / 5;
	grid-row: 2 / 3;
	background-color: var(--dark-green);
	align-items: center;
	justify-content: center;
}

/* STYLES DES MOTS CLÉS DU BAS */
.keyword {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 500;
}

.text-white { color: white; }
.text-green { color: var(--dark-green); }

@media (max-width: 1200px) {
	.keyword {
		font-size: 25px;
	}
	.name-title {
		font-size: 80px;
	}
}
@media (max-width: 1024px) {
	.grid-layout {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		height: auto;
	}
	.avocat-name-container {
		width: 100%;
	}
	.name-title {
		font-size: 12vw;
		text-align: center;
	}
	
	/* Réinitialisation des hauteurs pour le mobile */
	.grid-template-rows { height: auto; }
	
	.area-name, .area-photo, .area-text-block, 
	 {
		width: 100%;
		height: auto;
		min-height: 300px; /* Hauteur minimale pour chaque bloc */
		padding: 40px;
		box-sizing: border-box;
	}
	
	.area-photo {
		height: 80vh;
		width: 100%;
	}
	.area-expertise, .area-diligence, .area-perseverance, .area-years {
		width: 50%;
		min-height: 300px;
	}
	.area-years {
		order: 4;
	}
	.area-expertise {
		order: 5;
		background-color: var(--dark-green);
	}
	.area-expertise .keyword {
		color: var(--white);
	}
	.area-perseverance {
		order: 7;
	}
	.area-diligence {
		order: 6;
	}
}

@media (max-width: 700px) {
	.area-photo {
		height: 60vh;
	}
}

@media (max-width: 500px) {
	.area-expertise, .area-diligence, .area-perseverance, .area-years {
		width: 100%;
	}
	.area-perseverance {
		order: 7;
	}
	.area-diligence {
		order: 6;
	}
}

/* 
* 
Process Design
*
*
*
 */

 
 /* --- SECTION PROCESS --- */
 .process-section {
	 background-color: var(--dark-green); /* Ton vert foncé #092510 */
	 color: var(--white);
	 padding: 80px 40px; /* Marges internes */
	 position: relative;
 }
 
 .process-section h2, .process-section span, .process-section p, .process-section h3 {
	  color: var(--white)!important;
  }
 
 /* --- HEADER --- */
 .process-header-container {
	 max-width: 1500px;
	 margin: 0 15vw 100px 5vw;
 }

 
 /* --- GRILLE & DÉCALAGE (Le cœur du design) --- */
 .process-grid-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 10%;
	row-gap: 0;
	max-width: 1500px;
	margin: 0 auto;
	align-items: start;
 }
 
 .etape-item {
	 margin-bottom: 0px;
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
 }
 
 /* ASTUCE DU DÉCALAGE : On pousse toute la colonne de droite vers le bas */
 /* Tous les éléments pairs (2, 4, 6, 8) sont décalés vers le bas */
 .process-grid-wrapper .etape-item:nth-child(even) {
	 margin-top: 200px; /* Le décalage visible sur la capture */
 }
 
 /* --- DESIGN DE L'ITEM --- */
 
 /* 1. Numéro et Titre */
 .etape-header {
	position: absolute;
	z-index: 2;
	bottom: 150px;
	left: 0px;
	width: 70%;
 }
 
 .etape-number {
	 display: block;
	 font-family: var(--main-font);
	 font-size: 40px;
	 margin-bottom: 10px;
	 opacity: 0.9;
 }
 
 /* 2. Image Box */
 .etape-image-box {
	 border: 1px solid rgba(255, 255, 255, 0.3); /* Le trait fin autour de l'image */
	 padding: 15px; /* L'espace entre le trait et l'image */
	 margin-bottom: 25px;
	 display: block;
	 width: 80%;
	 position: relative;
	 overflow: hidden;
 }
 
 .etape-image-box img {
	 display: block;
	 width: 100%;
	 aspect-ratio: 1 / 1; /* Force l'image en carré comme sur la capture */
	 object-fit: cover;
	 will-change: transform;
 }
 
 .etape-image-box-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: var(--dark-green);
	opacity: .4;
	top: 0;
 }
 
 /* 3. Description */
 .etape-description {
	 width: 80%;
 }
 
 .etape-description p {
	 margin: 0;
	 color: var(--white);
 }
 
 /* --- FOOTER --- */
 .process-footer {
	 text-align: center;
	 margin-top: 100px;
	 padding-bottom: 40px;
 }
 
 @media (max-width: 1200px) {
	 .process-grid-wrapper {
		 column-gap: 0px;
	 }
 }
 
 @media (max-width: 1050px) {
	 .etape-number, .etape-title {
		 font-size: 30px;
	 }
 }
 
 @media (max-width: 750px) {
	 .process-header-container {
		 margin: 0px;
	 }
	 .process-grid-wrapper {
		 grid-template-columns: 1fr;
	 }
	 .process-grid-wrapper .etape-item {
		 margin-top: 5em!important;
	 }
 }
 @media (max-width: 550px) {
	  .etape-number, .etape-title {
		   font-size: 25px;
	   }
  }
 
 
 /* Honoraire Section */
 .honoraires-section {
	 display: flex;
	 overflow: hidden;
	 background-color: var(--white);
	 height: 120vh;
 }
 
 .honoraires-section .grille-overlay {
	 background-position: center 20vh;
	 background-size: 25vw 40vh;
 }
 
 .honoraires-left-container, .honoraires-right-container {
	 width: 50%;
	 height: 100%;
 }
 
 .honoraires-left-container {
	 display: grid;
	 grid-template-columns: repeat(2, 25vw);
	 grid-template-rows: repeat(3, 40vh);
 }
 
 /* --- AJOUT : La magie de l'image unique --- */
 
 .h-visual-block {
	 width: 100%;
	 height: 100%;
	 /* On récupère l'image définie dans le style inline PHP */
	 background-image: var(--bg-img);
	 background-repeat: no-repeat;
	 
	 /* CALCUL DE LA TAILLE DE L'IMAGE :
		Largeur totale de la grille = 2 colonnes de 25vw = 50vw
		Hauteur totale de la grille = 3 rangées de 50vh = 150vh
		Cela force l'image à avoir la taille exacte du conteneur parent global.
	 */
	 background-size: 50vw 150vh;
 }
 
 /* Positionnement des blocs et décalage de l'image */
 
 /* 1. Haut Droite */
 .block-pos-1 {
	 grid-column: 2;
	 grid-row: 1;
	 /* On décale l'image de 1 colonne vers la gauche (-25vw) */
	 background-position: -25vw 0;
	 position: relative;
 }
 
 /* 2. Milieu Gauche */
 .block-pos-2 {
	 grid-column: 1;
	 grid-row: 2;
	 /* On décale l'image de 1 rangée vers le haut (-50vh) */
	 background-position: 0 -50vh;
	 position: relative;
 }
 
 /* 3. Bas Droite */
 .block-pos-3 {
	 grid-column: 2;
	 grid-row: 3;
	 /* On décale de 1 colonne à gauche ET 2 rangées vers le haut (-100vh) */
	 background-position: -25vw -100vh;
	 position: relative;
 }
 
 .block-pos-1::before {
	 background-color: var(--dark-green);
	 outline: 1px solid var(--white);
	 content: "";
	 display: inline-block;
	 width: 25px;
	 height: 25px;
	 outline-offset: -3px;
	 position: absolute;
	 left: 0;
	 bottom:0;
	 transform: translate(-50%, 50%);
	 z-index: 5;
 }
 
 .block-pos-3::before {
	 background-color: var(--dark-green);
	 outline: 1px solid var(--white);
	 content: "";
	 display: inline-block;
	 width: 25px;
	 height: 25px;
	 outline-offset: -3px;
	 position: absolute;
	 left: 0;
	 top:0;
	 transform: translate(-50%, -50%);
	 z-index: 5;
 }

 
 .honoraires-right-container {
	 padding: 5em;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 
 }
 
 .honoraires-args-div {
	 margin-bottom: 2em;
 }
 
 .honoraire-arg-container {
	 display: flex;
	 margin-bottom: 1em;
	 align-items: center;
 }
 
 .honoraire-number {
	 background-color: var(--dark-green);
	 color: var(--white);
	 width: 40px;
	 height: 40px;
	 margin-right: 1em;
	 font-family: var(--main-font);
	 display: flex;
	 align-items: center;
	 justify-content: center;
 }
 
 .honoraire-arg {
	 font-family: var(--main-font);
	 text-transform: uppercase;
	 letter-spacing: 2px;
	 font-size: 15px;
 }
 
 /* Responsive Mobile (Optionnel mais conseillé) */
  @media (max-width: 1050px) {
	  .honoraires-section {
		  flex-direction: column-reverse;
		  height: auto;
	  }
	  .honoraires-left-container {
		  display: none;
	  }
	  .honoraires-right-container {
		  width: 100%;
		  padding: 2em;
	  }
  }
 
 /* Header */
 
 .main-head {
	 /* padding-right: 2em;
	 padding-left: 2em; */
	 height: 100px;
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100vw;
	 z-index: 1000;
	 background-color: transparent;
	 -webkit-transition: background-color 0.4s ease, box-shadow 0.4s ease;
	 -moz-transition: background-color 0.4s ease, box-shadow 0.4s ease;
	 -o-transition: background-color 0.4s ease, box-shadow 0.4s ease;
	 transition: background-color 0.4s ease, box-shadow 0.4s ease;
 }
 
 .header-active {
	 background-color: #ffffff !important;
	 -webkit-box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	 -moz-box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	 box-shadow: 0 4px 20px rgba(0,0,0,0.1);
 }
 
 .header-active .header-container {
	 border-bottom: none;
	 background-color: var(--white);
	 -webkit-transition: border-bottom 0.4s ease;
	 -moz-transition: border-bottom 0.4s ease;
	 -o-transition: border-bottom 0.4s ease;
	 transition: border-bottom 0.4s ease;
 }
 
 .header-container {
	 display: flex;
	 display: -webkit-flex;
	 justify-content: space-between;
	 -webkit-justify-content: space-between;
	 align-items: center;
	 -webkit-align-items: center;
	 width: 100%;
	 padding-top: 1em;
	 padding-bottom: 1em;
	 -webkit-transition: border-bottom 0.4s ease;
	 -moz-transition: border-bottom 0.4s ease;
	 -o-transition: border-bottom 0.4s ease;
	 transition: border-bottom 0.4s ease;
	 height: 100%;
	 visibility: hidden;
	 transform: translateY(-20px);
	padding-right: 2em;
	padding-left: 2em;
 }
 
 .menu-desktop-container {
	 display: flex;
	 flex-direction: row;
	 align-items: center;
 }
 
 .menu-desktop-container #menu-principal {
	 margin-right: 2em;
 }
 
 .custom-logo {
	 width: 200px;
	 z-index: 10;
	 position: relative;
 }
 
 #menu-principal {
	 display: flex;
	 display: -webkit-flex;
	 list-style-type: none;
	 align-items: center;
	 -webkit-align-items: center;
 }
 
 .main-head #menu-principal li {
	 margin-left: 2em;
	 font-family: var(--sans-serif);
	 text-transform: uppercase;
	 letter-spacing: 4px;
	 margin-bottom: 0px;
	 font-weight: bold;
	 font-size: 13px;
 }
 
 .main-head #menu-principal a {
	 color: var(--dark-green);
 }
 
 .main-head #menu-principal a:hover {
	 color: var(--medium-green);
 }
 
 .mobile-nav-container {
	 display: none;
 }
 
 .hamburger-button-container {
	 width: 50px;
	 height: 50px;
	 background-color: var(--medium-green);
	 z-index: 10;
	 position: relative;
 }
 
 .mobile-menu-container {
	 display: none;
 }


 
 @media (max-width: 1250px) {
	 .menu-desktop-container {
		 display: none;
	 }
	 .mobile-nav-container {
		 display: block;
	 }
	 .mobile-menu-container {
		 height: 0px;
		 width: 100vw;
		 position: fixed;
		 display: flex;
		 display: -webkit-flex;
		 flex-direction: column;
		 align-items: center;
		 -webkit-align-items: center;
		 justify-content: center;
		 -webkit-justify-content: center;
		 visibility: hidden;
		 left: 0;
		 top: 0px;
		 padding: 2em;
	 }
	 
	 .mobile-menu-container-active {
		 position: fixed;
		 visibility: visible;		
		 background-color: var(--dark-green);
		 height: 100vh;
		 z-index: 1;
		 -webkit-transition: .5s;
		 -moz-transition: .5s;
		 -o-transition: .5s;
		 transition: .5s;
	 }
	 
	 .mobile-menu-container-active a {
		 color: var(--white);
		 font-family: var(--main-font);
		 letter-spacing: 2px;
		 text-transform: uppercase;
	 }
	 
	 #menu-mobile {
		 list-style-type: none;
		 text-align: center;
		 padding-inline-start: 0px;
		 margin-bottom: 1em;
	 }
	 .mobile-menu-container .menu-principal-container li {
		 text-align: center;
		 font-size: 1.3em;
		 font-family: var(--serif);
		 letter-spacing: 2px;
		 text-transform: uppercase;
	 }
 }
 
 @media (max-width: 800px) {
	 .header-container {
		 padding-right: .5em;
		 padding-left: .5em;
	 }
 }
 
 /* * FAQ SECTION
 *
 *
 * */
 
 .section-faq {
	 display: flex;
	 display: -webkit-flex;
	 flex-direction: column;
	 -webkit-flex-direction: column;
	 -ms-flex-direction: column;
	 align-items: center;
	 -webkit-align-items: center;
	 padding-top: 5em;
	 padding-bottom: 5em;
	 position: relative;
 }
 
 .section-faq h2, .section-faq h3 {
	 text-align: center;
 }
 
 .faq-title-description-container {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
 }
 
 .faq-container {
	 width: 60%;
	 margin-top: 2em;
 }
 
 .faq-question-answer-container {
	 width: 100%;
	 cursor: pointer;
	 padding: 2em;
	 border-bottom: 1px solid var(--dark-green);
 }
 
 .faq-question-title-container {
	 width: 100%;
	 display: flex;
	 display: -webkit-flex;
	 justify-content: space-between;
	 -webkit-justify-content: space-between;
	 align-items: center;
	 -webkit-align-items: center;
 }
 
 .faq-question-title-container img {
	 width: 26px;
	 height: 26px;
	 object-fit: contain;
	 -o-object-fit: contain;
	 -webkit-transition: transform 0.2s;
	 -moz-transition: transform 0.2s;
	 -o-transition: transform 0.2s;
	 transition: transform 0.2s;
 }
 
 .faq-question-title {
	 font-weight: 500;
	 text-align: left!important;
	 font-size: 1em;
 }
 
 .faq-question-title h3 {
	 text-align: left;
 }
 
 .faq-answer-container {
	 max-height: 0px;
	 overflow: hidden;
	 -webkit-transition: 0.5s var(--cubic-beziers-va);
	 -moz-transition: 0.5s var(--cubic-beziers-va);
	 -o-transition: 0.5s var(--cubic-beziers-va);
	 transition: 0.5s var(--cubic-beziers-va);
	 opacity: 0;
 }
 
 
 .faq-answer-container li {
	 padding-left: 2em;
 }
 
 .faq-question-answer-container.active .faq-answer-container {
	 max-height: fit-content;
	 opacity: 1;
	 -webkit-transition: 0.5s var(--cubic-beziers-va);
	 -moz-transition: 0.5s var(--cubic-beziers-va);
	 -o-transition: 0.5s var(--cubic-beziers-va);
	 transition: 0.5s var(--cubic-beziers-va);
 }
 
 .faq-question-answer-container.active:after {
	 bottom: 0;
	 right: 0;
	 -webkit-transition: 0.2s var(--cubic-beziers-va);
	 -moz-transition: 0.2s var(--cubic-beziers-va);
	 -o-transition: 0.2s var(--cubic-beziers-va);
	 transition: 0.2s var(--cubic-beziers-va);
 }
 
 .faq-question-answer-container.active .faq-question-title-container img {
	 -webkit-transform: rotate(180deg);
	 -moz-transform: rotate(180deg);
	 -ms-transform: rotate(180deg);
	 -o-transform: rotate(180deg);
	 transform: rotate(180deg);
 }
 
 @media (max-width: 1199px) {
	 .faq-title-description-container {
		 width: 90%;
		 align-items: flex-start;
	 }
	 .section-faq h2, .section-faq h3 {
		  text-align: left;
	  }
	  
	 .faq-container {
		 width: 90%;
	 }
 }
 @media (max-width: 600px) {
	 .faq-container {
		 width: 95%;
		 padding: .7em;
	 }
	 .faq-question-answer-container {
		 padding: 0.5em 0.7em 0.5em 0.7em;
	 }
	 .faq-q-a-bg-rectangles:after {
		 bottom: -.5em;
		 right: -.5em;
	 }
 }

 /* 
 
 Footer Design
 
 
 
 
  */
  
  .footer-section {
	  position: relative;
	  min-height: 100vh;
	  padding: 5em 5em 0px 5em;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
  }
  
  .footer-section h2 {
	  color: var(--white);
  }
  
  .footer-section span, .footer-section a, .footer-section li {
		color: var(--white);
		font-family: var(--main-font);
		text-transform: uppercase;
		letter-spacing: 2px;
		font-size: 15px;
		line-break: anywhere;
		margin-bottom: 1em;
	} 
	
.footer-section ul {
	list-style: none;
	padding-inline-start: 0px;
}
  
  .contact-container, .footer-logo-container, .footer-copyright {
	  z-index: 1;
	  position: relative;
  }
  
  .contact-container {
	  display: flex;
	  border: 1px solid var(--white);
	  padding: 7em 3em 7em 3em;
	  align-items: center;
  }
  
  .contact-left-container, .contact-right-container {
	  width: 50%;
  }
  
  .footer-logo-container {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  padding-top: 2em;
  }
  
  .footer-logo {
	  width: 300px;
	  margin-bottom: 2em;
  }
  
  .footer-lkd {
	  width: 40px;
  }
  
  .menu-mentions-legales-container li {
	  text-align: center;
  }
  
  .footer-bg-green {
	  background-color: var(--dark-green);
	  opacity: 0.88;
	  width:  100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
  }
  
  .footer-copyright {
	  border-top: 1px solid var(--white);
	  display: flex;
	  justify-content: space-between;
	  padding-top: 1em;
	  padding-bottom: 1em;
	  margin-top: 2em;
  }
  
  
  /* Formulaire elementor Overwrite */
  
  .footer-section .elementor-button {
	  color: var(--dark-green)!important;
	  background-color: var(--white);
	  margin-top: 2em;
  }
  .footer-section .elementor-button span {
	  color: var(--dark-green)!important;
	  margin-bottom: 0px;
  }
  
  .footer-section .elementor-button:hover {
	  color: var(--white)!important;
	  background-color: var(--medium-green)!important;
  }
  .footer-section .elementor-button:hover span {
	  color: var(--white)!important;
  }
  
  @media (max-width: 1100px) {
	  .contact-container {
		  flex-direction: column;
	  }
	  .contact-left-container, .contact-right-container {
		  width: 100%;
		  text-align: center;
	  }
  }
  
  @media (max-width: 900px) {
	  .footer-copyright {
		  flex-direction: column;
		  align-items: center;
	  }
	  .footer-copyright span {
		  margin-top: 1em;
		  text-align: center;
	  }
  }
  
  @media (max-width: 650px) {
	  .footer-section {
		  padding: 5em 2em 0px 2em;
	  }
	  .contact-container {
		  padding: 3em;
	  }
  }
  
  
  /* Modèle Politique condifentialité */
  
  /* --- Styles spécifiques au template de page --- */
  
  .site-main {
	  padding-top: 120px; /* Espace pour le header fixe de 100px */
	  min-height: 80vh;
  }
  
  .custom-page-header {
	  padding: 60px 0;
	  text-align: center;
	  position: relative;
	  z-index: 1;
  }
  
  .custom-page-header h1 {
	  font-family: var(--main-font);
	  color: var(--dark-green);
	  text-transform: uppercase;
	  font-size: clamp(30px, 5vw, 60px);
	  letter-spacing: 2px;
  }
  
  .content-inner {
	  max-width: 1200px;
	  margin: 0 auto;
	  padding: 0 2em 10em 2em;
	  position: relative;
	  z-index: 1;
  }
  
  /* Assurer que le contenu Elementor respecte les styles de base du thème */
  .entry-content p {
	  margin-bottom: 1.5em;
	  font-family: var(--ivy-font);
	  line-height: 2;
  }
  
  /* Style spécifique pour les mentions légales (souvent des listes) */
  .entry-content ul {
	  margin-bottom: 2em;
	  list-style: square;
	  padding-left: 20px;
  }
  
  .entry-content li {
	  font-family: var(--ivy-font);
	  color: var(--dark-green);
	  margin-bottom: 0.5em;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
	  .site-main {
		  padding-top: 100px;
	  }
	  .content-inner {
		  padding: 0 1.5em 5em 1.5em;
	  }
  }