:root {
	--black: #000000;
	--dark-gray: #383838;
	--white: #FFFFFF;
	
	--red: #FFD0D6;
	--dark-red: #FF5C61;
	
	--turquoise: #CCFFFC;
	--dark-turquoise: #00B0AD;
	
	--blue: #B7DFFF;
	--dark-blue: #334FF1; 
		
	--orange: #FFD9B4;
	--dark-orange: #FD6600;

	--purple: #CCCCFF;
	--dark-purple: #333399;
		
	--green: #D2FFD0;
	--dark-green: #189852;
	
	/* ESPACEMENTS - Pour revenir en arrière, restaurer les anciennes valeurs commentées ci-dessous */
	/* ANCIENNES VALEURS (avant optimisation):
	   --spacing-xs: 8px    -> maintenant 6px
	   --spacing-sm: 16px   -> maintenant 12px
	   --spacing-md: 24px   -> maintenant 16px
	   --spacing-lg: 32px   -> maintenant 20px
	   --spacing-xl: 48px   -> maintenant 32px
	   --spacing-2xl: 64px  -> maintenant 40px
	   --spacing-3xl: 96px  -> maintenant 64px
	   --spacing-4xl: 128px -> maintenant 80px
	*/
	/* NOUVELLES VALEURS (harmonisées et réduites) */
	--spacing-xs: 6px;
	--spacing-sm: 12px;
	--spacing-md: 16px;
	--spacing-lg: 20px;
	--spacing-xl: 32px;
	--spacing-2xl: 40px;
	--spacing-3xl: 64px;
	--spacing-4xl: 80px;
}

html {
    font-size: 62.5%; /* équivalence "10px" sur l'élément racine */
}

body {
    font-size: 1.4em; /* taille de base pour tous les éléments équivalent 14px */
    font-family: "Open Sans", sans-serif;
    position: relative;
	line-height: 1.5;
}

a:hover{
	text-decoration: underline;
}

h1, h2{
	color: var(--dark-gray);
	line-height: 1.1;
}

h3{
	color: var(--dark-gray);
	line-height: 1.5;
}

/* Global */
.global-gap{
    padding-left: 5%;
    padding-right: 5%;
    position: relative;
}

/* Header */
header{
    position: absolute;
    z-index: 100;
}

header nav{
    display: flex;
    position: fixed!important;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    padding-top: 24px;
    padding-bottom: 24px;
    /*transition: all 0.2s ease-in-out;*/
}

header nav.scrolled{
    background-color: var(--white);
}

header nav ul{
    display: flex;
    font-size: 1.6rem;
    font-weight: bold;
    gap: var(--spacing-md);
    align-items: center;
}

header nav a img{
    height: 4rem;
    width: auto;
}

.rotate-90{
    transform: rotate(90deg);
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

.mobile-nav{
    display: none;
}

.mobile-nav.scrolled{
    background-color: white;
}

.mobile-nav-burger{
    cursor: pointer;
    z-index: 1000;
}

.mobile-nav-burger-line{
    width: 32px;
    height: 2px;
    background-color: var(--black);
    transition: all 0.2s ease-in-out;
}

.mobile-nav-burger.active .mobile-nav-burger-line {
    background-color: var(--white);
}

.mobile-nav-links{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--black);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: all 0.2s ease-in-out;
    transform: translateY(-100%);
	overflow-y: auto;
	padding: 48px 0;
}

.mobile-nav-links.active {
    transform: translateY(0);
    display: flex;
}

.mobile-nav-links ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	gap: 0;
    padding: 0;
    width: 95%;
}

.mobile-nav-links li{
    color: var(--white);
    font-size: 2.8rem;
	line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
	padding: 16px 0;
	width: 100%;
}

.mobile-nav-links li:not(:last-child){
	border-bottom: 1px solid var(--white);
}

.mobile-nav-links a:hover{
    text-decoration: underline;
}

.mobile-nav-links a.active-link{
    text-decoration: underline;
}

.mobile-nav-links a.contact-us-link{
    background-color: var(--black);
    padding: 8px 16px;
    color: var(--white);
}

.mobile-nav-links a.contact-us-link:hover{
    background-color: var(--white);
    color: var(--black);
}

.active-link{
    text-decoration: underline;
}

.contact-us-link{
    background-color: var(--black);
    padding: 8px 16px;
    color: var(--white);
	border: 1px solid transparent;
	box-sizing: border-box;
}

.mobile-nav-burger{
	width: 32px;
	height: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.mobile-nav-burger.active{
	justify-content: center;
}

/* Animation pour le burger menu */
.mobile-nav-burger.active .mobile-nav-burger-line:nth-child(1) {
	position: absolute;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
	margin: 0 auto;
}

.mobile-nav-burger.active .mobile-nav-burger-line:nth-child(2) {
    opacity: 0;
}

.mobile-nav-burger.active .mobile-nav-burger-line:nth-child(3) {
    position: absolute;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
	margin: 0 auto;
}

.mobile-nav-expertises-list{
    gap: var(--spacing-md);
    margin-bottom: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.mobile-nav-expertises-list.active{
    max-height: fit-content;
    opacity: 1;
}

.mobile-nav-links .mobile-nav-expertises-list li{
	border-bottom: none!important; 
	padding: var(--spacing-sm) 0;
}

.mobile-nav-expertises-list li a{
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: underline;
}

.rotate-90.active{
    transform: rotate(-90deg);
    transition: all 0.2s ease-in-out;
}

.clickable{
    cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Thank You Page */
.thank-you-message {
    text-align: center;
    padding: 48px 0;
}

.thank-you-message h2 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    color: var(--black);
}

.thank-you-message p {
    font-size: 1.6rem;
    margin-bottom: var(--spacing-sm);
    color: #333;
}

.thank-you-actions {
    margin-top: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.thank-you-actions .submit-btn {
    text-decoration: none;
    display: inline-block;
}

.thank-you-actions .submit-btn.secondary {
    background-color: transparent;
    border: 2px solid var(--black);
    color: var(--black);
}

.thank-you-actions .submit-btn.secondary:hover {
    background-color: var(--black);
    color: var(--white);
}
/* Footer */

footer{
    background-color: var(--black);
    color: var(--white);
    padding-top: 32px;
	padding-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-left{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-weight: 300;
    font-size: 1.6rem;
}


.footer-right{
    font-weight: 300;
}

.footer-right p:not(:last-of-type){
    margin-bottom: var(--spacing-sm);
}

.footer-right strong{
    font-weight: 700;
}

.footer-right p a{
	display: inline-block;
	background-color: var(--white);
	color: var(--black);
	padding: 0 4px;
	box-sizing: border-box;
}

.footer-right p a:hover{
	text-decoration: none;
	background-color: var(--dark-red);
	color: var(--white);
}

/* Header main content */

.header-content{
    height: clamp(600px, 100vh, 1000px);
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 15vw;
    position: relative;
} 

.homepage.header-content{
    background-color: var(--red);
} 

.notre-approche.header-content{
    background-color: var(--orange);
} 

.nos-expertises.header-content{
    background-color: var(--turquoise);
} 

.notre-vision.header-content {
    background-color: var(--blue);
} 

.nos-engagements.header-content{
    background-color: var(--purple);
}

.blog.header-content{
    background-color: var(--green);
}

.contact.header-content{
    background-color: var(--red);
}

.hub-realisations.header-content{
    background-color: var(--turquoise);
}

.header-content-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content-top-left p{
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-sm);
    display: inline-block;
    border-radius: 12px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.homepage .header-content-top-left,
.notre-vision .header-content-top-left,
.notre-approche .header-content-top-left,
.nos-engagements .header-content-top-left,
.blog .header-content-top-left,
.contact .header-content-top-left,
.hub-realisations .header-content-top-left{
    width: 75%;
}

.nos-expertises .header-content-top-left,
.sites-web-applications .header-content-top-left{
	width: 55%;
}

.homepage .header-content-top-left p,
.contact .header-content-top-left p{
    background-color: var(--dark-red);
}

.notre-vision .header-content-top-left p{
    background-color: var(--dark-blue);
}

.notre-approche .header-content-top-left p{
    background-color: var(--dark-orange);
}

.nos-expertises .header-content-top-left p,
.hub-realisations .header-content-top-left p{
    background-color: var(--dark-turquoise);
}

.nos-engagements .header-content-top-left p{
    background-color: var(--dark-purple);
}

.blog .header-content-top-left p{
    background-color: var(--dark-green);
}

.hub-realisations .header-content-top-left p{
    color: #383838;
}

.header-content-top-left h1{
    font-weight: 800;
	font-size: 6rem;
    margin-bottom: var(--spacing-xl);
}

.header-content-top-left h1 span{
    font-weight: 200;
}

.header-content-top-left a{
    background-color: var(--black);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    transition: all 0.2s ease-in-out;
	margin-bottom: var(--spacing-lg);
}

.header-content-top-left a:hover,
.contact-us-link:hover{
    background-color: var(--white);
    color: var(--black);
	text-decoration: none;
}

.contact-us-link:hover{
	border: 1px solid var(--black);
}

.contact-us-link a:hover{
	text-decoration: none;
}

.header-content-top-right{
    display: flex;
    flex-direction: column;
}

.homepage .header-content-top-right a,
.notre-vision .header-content-top-right a,
.notre-approche .header-content-top-right a,
.nos-engagements .header-content-top-right a,
.blog .header-content-top-right a,
.contact .header-content-top-right a{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.homepage .header-content-top-right a:hover, 
.notre-vision .header-content-top-right a:hover, 
.notre-approche .header-content-top-right a:hover, 
.nos-engagements .header-content-top-right a:hover, 
.blog .header-content-top-right a:hover, 
.contact .header-content-top-right a:hover{
	text-decoration: none;
}

.homepage .header-content-top-right p,
.notre-vision .header-content-top-right p,
.notre-approche .header-content-top-right p,
.nos-engagements .header-content-top-right p,
.blog .header-content-top-right p,
.contact .header-content-top-right p{
    text-align: center;
    font-size: 1.2rem;
    margin-top: 4px;
    font-weight: bold;
}

.homepage .header-content-top-right a:hover p{
    color: var(--dark-red);
}

.notre-vision .header-content-top-right a:hover p{
    color: var(--dark-blue);
}

.notre-approche .header-content-top-right a:hover p{
    color: var(--dark-orange);
}

.nos-engagements .header-content-top-right a:hover p{
    color: var(--dark-purple);
}

.blog .header-content-top-right a:hover p{
    color: var(--dark-green)
}

.contact .header-content-top-right a:hover p{
    color: var(--dark-red);
}

.homepage .header-content-top-right,
.contact .header-content-top-right,
.notre-vision .header-content-top-right,
.notre-approche .header-content-top-right,
.nos-engagements .header-content-top-right,
.blog .header-content-top-right{
    gap: var(--spacing-lg);
}

.nos-expertises .header-content-top-right{
    /*position: absolute;*/
    width: 30%;
}

.header-content-top-right-single{
    padding-bottom: 16px;
    margin-bottom: 16px;
    position: relative;
}

.header-content-top-right-single{
    color: var(--dark-gray);
}

.no-image.header-content-top-right-single{
    color: var(--black);
}

.nos-expertises .header-content-top-right-single{
    display: flex;
    justify-content: space-between;
}

.nos-expertises .header-content-top-right-single:not(:last-of-type)::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 76%;
    border-bottom: 1px solid black; /* Adjust thickness and color */
}

.nos-expertises .header-content-top-right-single-left{
    margin-right: 64px;
}

.nos-expertises .header-content-top-right-single-left h3{ 
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.header-content-bottom{
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-xl);
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.header-fil-arianne{
    position: absolute;
    bottom: 0;
    z-index: 2;
    left: 5%;
    color: var(--black);
}

.header-fil-arianne b{
    color: var(--black);
    text-decoration: underline;
}

/* Bloc 1 */

.bloc-1{
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

.notre-vision.black.bloc-1{
    background-color: var(--black);
    color: var(--white);
}

.notre-vision.black.bloc-1 .bloc-1-right-title h3{
	color: var(--white);
	line-height: 1.5;
}

.notre-vision.grey.bloc-1{
    background-color: #EEEEEE;
    color: var(--black);
}

.bloc-1::before{
    content: "";
    position: absolute;
    top: -64px;
    left: 0;
    width: 60%;
    height: 64px;
    background-color: var(--white);
}

.notre-vision.black.bloc-1::before{
    background-color: var(--black);
}

.notre-vision.grey.bloc-1::before{
    background-color: #EEEEEE;
}

.bloc-1-left{
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.notre-approche .bloc-1-left{
    font-size: 2.4rem;
}

.notre-approche .bloc-1-left p:not(:last-of-type){
    margin-bottom: var(--spacing-lg);
}

.notre-approche.bloc-1{
    margin-bottom: var(--spacing-3xl);
} 

.bloc-1-right{
    width: 40%;
}

.notre-vision.bloc-1{
    padding-bottom: 112px;
}

.bloc-1-left-top{
    font-weight: 800;
}

.bloc-1-left-top p{
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
}

.bloc-1-left-top h2,
.bloc-footer-1-left h2{
    font-size: 4rem;
    font-weight: 800;
}

.nos-expertises .bloc-1-left-content h2,
.notre-approche .bloc-2-left-sm-text,
.bloc-footer-1-left p{
    font-weight: 800;
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.nos-expertises.black .bloc-1-left-content h2{
	color: var(--white);
}

.nos-expertises .bloc-1-left-content p{
    font-weight: 800;
    font-size: 4rem;
	line-height: 1.1;
}

.nos-expertises .bloc-1-left-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    grid-column-gap: 10%;
    grid-row-gap: var(--spacing-lg);
    align-items: start;
}

.bloc-1-right-single:not(:last-of-type){
    padding-bottom: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.bloc-1-right-single h3{
    font-weight: 800;
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.nos-expertises .bloc-1-left-single h3{
    font-weight: 800;
}

.nos-expertises .bloc-1-left-single p{
    font-size: 1.4rem;
}

.nos-expertises .bloc-1-right-text bold{
    font-weight: 700;
}

.bloc-1-right-single:not(:last-of-type)::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 78%;
    border-bottom: 1px solid black; /* Adjust thickness and color */
}

.bloc-1-right-single:last-of-type {
    margin-bottom: var(--spacing-xl);
}

.bloc-1-right a{
    background-color: var(--black);
    font-size: 1.2rem;
    font-weight: 700;
    padding: 4px 8px;
    color: var(--white);
    text-transform: uppercase;
    display: inline-block;
    transition: all 0.2s ease-in-out;
	border: 1px solid transparent;
	box-sizing: border-box;
}

.bloc-1-right a:hover{
    background-color: var(--white);
    color: var(--black);
	text-decoration: none;
	border: 1px solid var(--black);
}

.nos-expertises .bloc-1-right-title{
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: var(--spacing-md);
}

.notre-vision.grey.bloc-1 .bloc-1-right-title h3{
	color: var(--dark-gray);
}

.bloc-1-right-single p,
.nos-expertises .bloc-1-right-title h3
.nos-expertises .bloc-1-right-text,
.bloc-2-right-single-text p,
.bloc-3-right-text p,
.bloc-blog-articles-left p,
.notre-approche .bloc-2-left-single p,
.notre-approche .bloc-2-left-content-responsive h3,
.notre-approche .bloc-2-left-content-responsive p{
    font-size: 2rem;
}

.nos-expertises .bloc-1-right-text p:not(:last-of-type){
    margin-bottom: var(--spacing-xl);
}

.bloc-1-3 .bloc-1-right{
    margin-bottom: 0;
}
/* Bloc 2 */

.bloc-2{
    position: relative;
}

.bloc-2::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 64px;
    background-color: var(--white);
}

.nos-expertises.bloc-2::before{
    display: none;
}

.bloc-2-container{
    display: flex;
    justify-content: space-between;
}

.bloc-2-left{
    width: 40%;
    background-color: var(--black);
    color: var(--white);
    padding: var(--spacing-4xl) 5% 0 5%;
    display: flex;
    flex-direction: column;
}

.nos-expertises .bloc-2-left{
    background-color: #EEEEEE;
    color: var(--black);
}

.nos-expertises .bloc-2-left::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 64px;
    background-color: #EEEEEE;
}

.homepage .bloc-2-left{
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: var(--spacing-2xl);
}

.notre-approche .bloc-2-left-single{
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding-left: 8px;
    padding-right: 8px;
}

.notre-approche .bloc-2-left-single:hover{
    background-color: var(--white);
    color: var(--black);
    border: none;
	text-decoration: none;
}

.notre-approche .bloc-2-left-single:hover::after {
    display: none;
}

.notre-approche .bloc-2-left-single-container{
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);
}

.notre-approche .bloc-2-left-content-responsive{
    display: none;
    flex-direction: column;
}

.notre-approche .bloc-2-left-single:not(:last-of-type){
    padding-bottom: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-bottom: 1px var(--white) solid;
}

.notre-approche .bloc-2-left-single:last-of-type{
    padding-top: var(--spacing-md);
}

.notre-approche .bloc-2-left-single h3{
    font-weight: 800;
    font-size: 4rem;
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
	color: var(--white);
}

.notre-approche .bloc-2-left-single:hover h3{
	color: var(--dark-gray);
}

.notre-approche .bloc-2-left-single-left {
    flex: 0 1 calc(100% - 64px);
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.notre-approche .bloc-2-left-single-right {
    flex: 0 0 auto;
    width: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bloc-2-left-single-right img {
    transition: all 0.2s ease-in-out;
}

.bloc-2-right{
    width: 60%;
    background-color: var(--turquoise);
    color: var(--black);
    padding-bottom: var(--spacing-4xl);
    padding-top: var(--spacing-4xl);
    display: flex;
    flex-direction: column;
}

.homepage .bloc-2-right{
    width: 60%;
    background-color: var(--turquoise);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.notre-approche .bloc-2-right{
    width: 60%;
    background-color: #EEEEEE;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nos-expertises .bloc-2-right{
    padding-bottom: 0;
    padding-top: 64px;
    background-color: #EEEEEE;
}

.nos-expertises .bloc-2-right::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 64px;
    background-color: var(--white);
}

.homepage .bloc-2-left-top p{
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xs);
}

.homepage .bloc-2-left-top h2{
    font-weight: 800;
    font-size: 4rem;
	color: var(--white)
}

.nos-expertises .bloc-2-left-container-custon-title h3{
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.nos-expertises .bloc-2-left-container-custon-title p{
    font-size: 4rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.nos-expertises .bloc-2-left-container-custon-content-utility > p {
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.nos-expertises .bloc-2-left-container-custon-content-utility-container-single{
    display: flex;
}

.bloc-2-left-container-custon-content-utility-container{
    display: flex;
    gap: var(--spacing-md);
}

.notre-approche .bloc-2-right-content{
    padding: var(--spacing-md) 0;
    margin:0 var(--spacing-3xl);
    border-top: 1px var(--black) solid;
    border-bottom: 1px var(--black) solid;
}

.notre-approche .bloc-2-right-content h3{
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.6rem;
    margin-bottom: var(--spacing-sm);
}

.notre-approche .bloc-2-right-content p:not(:last-of-type){
    margin-bottom: var(--spacing-md);
}

.nos-expertises .bloc-2-left-container-custon-content-utility-container-single span {
    position: relative;
    border: 1px var(--black) solid;
    width: 21px;
    height: 21px;
    border-radius: 24px;
    margin-right: 4px;
}

.nos-expertises .bloc-2-left-container-custon-content-utility-container-single span::before {
    width: 15px;
    height: 15px;
    background-color: var(--black);
    content: "";
    display: block;
    border-radius: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: -1px;
}

.nos-expertises .bloc-2-left-container-custon-content-utility-container-single:not(:first-of-type) span::before {
    display: none;
}

.nos-expertises .bloc-2-left-container-custon-content-utility{
    margin-bottom: var(--spacing-md);
}

.nos-expertises .bloc-2-left-container-custon-content-progress > p{
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.bloc-2-left-container-custon-content-progress-container{
    display: flex;
    align-items: center;
}

.nos-expertises .bloc-2-left-container-custon-content-progress-container span{
    display: block;
    position: relative;
    width: 48%;
    height: 24px;
    border: 1px var(--black) solid;
    border-radius: 24px;
    margin-right: 24px;
}

.nos-expertises .bloc-2-left-container-custon-content-progress-container span::before{
    display: block;
    content: "";
    width: 95%;
    height: 18px;
    background-color: var(--black);
    border-radius: 24px;
    position: absolute;
    top: 2px;
    left: 3px;
}

.diagnostic.bloc-2-left-container-custon-content-progress-container span::before {
    width: 82.3%;
}

.identite-visuelle.bloc-2-left-container-custon-content-progress-container span::before {
    width: 85%;
}

.nos-expertises .bloc-2-left-container-custon-content .bloc-2-left-container-custon-content-progress:nth-of-type(3) .bloc-2-left-container-custon-content-progress-container span::before {
    width: 85%;
}

.sites-web-applications.bloc-2-left-container-custon-content-progress-container span::before {
    width: 63%;
}

.bloc-2-left-container-custon-content-progress:nth-of-type(1) .communication-responsable.bloc-2-left-container-custon-content-progress-container span::before {
    width: 95%;
}

.bloc-2-left-container-custon-content-progress:nth-of-type(2) .communication-responsable.bloc-2-left-container-custon-content-progress-container span::before {
    width: 84%;
}

.nos-expertises
.bloc-2-left-container-custon-content 
  .bloc-2-left-container-custon-content-progress{
    margin-bottom: var(--spacing-md);
  }

.bloc-2-left-container-custon-content-timing {
    margin-bottom: var(--spacing-md);
}

.bloc-2-left-container-custon-content-timing > p{
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.bloc-2-left-container-custon-content-timing-container{
    display: flex;
    align-items: center;
}

.bloc-2-left-container-custon-content-timing-container img{
    margin-right: 4px;
}

.bloc-2-left-container-custon-content-link{
    font-size: 1.6rem;
    font-weight: 800;
}

.bloc-2-left-container-custon-content-link a{
    text-decoration: underline;
}
.bloc-2-right-single:not(:last-of-type){
    padding-bottom: var(--spacing-md);
    padding-top: var(--spacing-md);
    position: relative;
}

.bloc-2-right-single:not(:last-of-type)::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 76%;
    border-bottom: 1px solid black; /* Adjust thickness and color */
}

.bloc-2-right-single:last-of-type {
    padding-bottom: var(--spacing-md);
    padding-top: var(--spacing-md);
}



.bloc-2-right-single{
    display: flex;
    justify-content: space-between;
    transition: all 0.2s ease-in-out;
    padding-left: 8px;
    padding-right: 8px;
	align-items: center;
}

.bloc-2-right-single:hover{
    background-color: var(--black);
    color: var(--turquoise);
    border: none;
	text-decoration: none;
}

.bloc-2-right-single:hover h3{
	color: var(--turquoise);
}

/* Hide the ::after border of the previous sibling when hovering over any .bloc-2-right-single */
/* Since CSS cannot select previous siblings, we use a different approach */
/* When hovering over any element, hide the ::after of the element immediately before it */
.bloc-2-right-single:nth-child(1):has(+ .bloc-2-right-single:hover)::after,
.bloc-2-right-single:nth-child(2):has(+ .bloc-2-right-single:hover)::after,
.bloc-2-right-single:nth-child(3):has(+ .bloc-2-right-single:hover)::after,
.bloc-2-right-single:nth-child(4):has(+ .bloc-2-right-single:hover)::after {
    display: none;
}

.bloc-2-right-single-text{
    margin-right: 40px;
	width: 80%;
}

.bloc-2-right-single-text h3{
    font-size: 4rem;
    font-weight: 800;
    text-transform: uppercase;
}

.bloc-2-footer{
    height: 64px;
    width: 100%;
    background-color: var(--black);
}

.nos-expertises .bloc-2-footer{
    background-color: #EEEEEE;
}

/* Bloc 3 */
.bloc-3{
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

.bloc-3::before{
    content: "";
    position: absolute;
    top: -64px;
    left: 0;
    width: 42%;
    height: 64px;
    background-color: var(--white);
}

.bloc-3-left{
    width: 42%;
    padding-right: 64px;
}

.bloc-3-right{
    width: 58%;
}

.bloc-3-left h2{
    font-size: 1.6rem;
    font-weight: 800;
    width: 76%;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.bloc-3-left p{
    font-weight: 800;
    font-size: 4rem;
    margin-bottom: var(--spacing-xl);
	line-height: 1.1;
}

.bloc-3-right-text{
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px var(--black) solid;
    padding-bottom: var(--spacing-lg);
}


.bloc-3-right-text p:not(:last-of-type){
    margin-bottom: var(--spacing-lg);
}

.bloc-3-right-card-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 11%;
    grid-row-gap: var(--spacing-lg);
}

.bloc-3-right-card-single h3{
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
}

.bloc-3-right-card-single small{
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    display: block;
}

.bloc-3-right-card-single p{
    font-weight: 500;
}
/* Bloc 4 */
.bloc-4 {
    display: flex;
    justify-content: space-between;
}

.bloc-4-left {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    width: 56%;
    background-color: #CCCCFF;
}

.bloc-4-left-text h2{
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.bloc-4-left-text p{
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
}

.bloc-4-left-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg) 5%;
}

.bloc-4-left-card-single {
    position: relative;
    padding-bottom: var(--spacing-md);
    flex: 0 0 47.5%;
    min-width: 0;
    height: fit-content;
}

.bloc-4-left-card-single::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 1px;
    background-color: var(--black);
}

.bloc-4-left-card-single p{
    font-size: 1.6rem;
}

.bloc-4-left-card-single bold{
    font-weight: 700;
}

.bloc-4-right{
    width: 44%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Bloc footer custom */

.bloc-footer-1{
    display: flex;
    justify-content: space-between;
    position: relative;
    background-color: #B7DFFF;
    padding-top: var(--spacing-4xl);
    color: var(--black);
    padding-bottom: var(--spacing-2xl);
    align-items: start;
}

.bloc-footer-1::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 64px;
    background-color: var(--black);
}

.notre-vision.bloc-footer-1::before,
.sensibilisation.bloc-footer-1::before,
.communication.bloc-footer-1::before,
.sensibilisation.bloc-footer-1::before,
.blog.bloc-footer-1::before{
    background-color: var(--white);
}

.nos-expertises.bloc-footer-1::before,
.diagnostic.bloc-footer-1::before,
.identite-visuelle.bloc-footer-1::before{
    background-color: #EEEEEE;
}

.bloc-footer-1-right{
    width: 50%;
}

.bloc-footer-1-right-4-rows{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 2%;
    grid-row-gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.bloc-footer-1-right-3-rows{
    display: flex;
    margin-bottom: var(--spacing-xl);
    gap: var(--spacing-2xl);
}

.bloc-footer-1-right.idendite-visuelle .bloc-footer-1-right-3-rows img:nth-of-type(3){
    margin-top: var(--spacing-md);
}

.bloc-footer-1-right-3-rows img,
.bloc-footer-1-right-4-rows img{
    display: flex;
    justify-self: center;
    align-self: center;
}
/* Bloc Contact Us */

.bloc-footer-contact-us{
    background-color: var(--red);
    padding: var(--spacing-2xl) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.bloc-footer-contact-us h2{
    font-size: 4rem;
    font-weight: 800;
    color: var(--dark-red);
}

.bloc-footer-contact-us form{
    width: 28%;
}

.bloc-footer-contact-us input{
    padding: 32px;
    border: 2px var(--dark-red) solid;
    border-radius: 48px;
    width: 100%;
}

.bloc-footer-contact-us input::placeholder{
    font-style: italic;
}

.bloc-footer-contact-us .cta-button{
    background-color: var(--black);
    padding: 12px 20px;
    color: var(--white);
    font-weight: 800;
}


/* Bloc Blog */
.bloc-blog-articles {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-xl);
}

.bloc-blog-articles::before{
    content: "";
    position: absolute;
    top: -64px;
    left: 0;
    width: 58%;
    height: 64px;
    background-color: var(--white);
}

.bloc-blog-articles a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px var(--black) solid;
    padding-top: 22px;
    padding-bottom: 22px;
}

.bloc-blog-articles a:hover{
    background-color: var(--black);
    color: var(--white);
	text-decoration: none;
}

.bloc-blog-articles ul li:first-of-type a{
    border-top: 1px var(--black) solid;
    padding-top: 22px;
    margin-top: 22px;
}

.bloc-blog-articles-left{
	width: calc(100% - 62px);
}

.bloc-blog-articles-left h2{
    font-size: 1.6em;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.bloc-blog-articles a:hover h2{
	color: var(--white);
}

.bloc-blog-articles-left time{
    font-size: 1.4rem;
    margin-right: 8px;
}

.bloc-blog-articles-left p{
    font-size: 1.4rem;
}

.bloc-blog-articles-left-bottom{
    display: flex;
}

/* Bloc Blog Article */
.bloc-blog-article-container{
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-2xl);
}

.bloc-blog-article-container::before{
    content: "";
    position: absolute;
    top: -64px;
    left: 0;
    width: 58%;
    height: 64px;
    background-color: var(--white);
}

.bloc-blog-article-container-data{
    display: flex;
    font-size: 2rem;
    border-bottom: 1px var(--black) solid;
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.bloc-blog-article-container-data time{
    margin-right: 8px;
}

.bloc-blog-article-container-content-single{
    font-size: 1.6rem;
    margin-bottom: var(--spacing-xl);
}

.bloc-blog-article-container-content-single h2{
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
}

.bloc-blog-article-container-content-single p{
    margin-bottom: var(--spacing-md);
}

.bloc-blog-article-container-content-single ul,
.bloc-blog-article-container-content-single ul li{
    list-style: disc;
	list-style-position: outside;
    
}

.bloc-blog-article-container-content-single ul{
	margin-left: 17px;
}

.bloc-blog-article-container-content-single ul li:not(:last-child){
	margin-bottom: var(--spacing-sm);
}

/* Bloc FAQ */
.bloc-faq::before{
    content: "";
    position: absolute;
    top: -64px;
    left: 0;
    width: 58%;
    height: 64px;
    background-color: var(--white);
}

.faq-container{
    padding-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.faq-item button{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.faq-item{
    border-bottom: 1px var(--black) solid;
    padding-bottom: var(--spacing-md);
    padding-top: var(--spacing-md);
    padding-inline: var(--spacing-xs);
}

.faq-item:hover{
    background-color: var(--black);
    color: var(--white);
	text-decoration: none;
}

.faq-item:hover h2{
	color: var(--white);
}

.faq-item button:hover .faq-toggle{
    background-color: var(--black);
    color: var(--white);
	text-decoration: none;
}

.faq-item:first-of-type{
    border-top: 1px var(--black) solid;
    padding-top: 22px;
    margin-top: 22px;
}

.faq-item h2{
    font-size: 1.6em;
    font-weight: 800;
    text-transform: uppercase;
	width: 80%;
}

.faq-item span{
    font-size: 1.4em;
}

.faq-answer-content{
	margin-top: var(--spacing-lg);
    font-size: 1.8rem;
}

/* Mentions légales */

.mentions-legales-wysiwyg::before{
    content: "";
    position: absolute;
    top: -64px;
    left: 0;
    width: 58%;
    height: 64px;
    background-color: var(--white);
}
.mentions-legales-wysiwyg{
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

.mentions-legales-wysiwyg h2{
    font-size: 4rem;
    margin-bottom: var(--spacing-sm);
    font-weight: 800;
}

.mentions-legales-wysiwyg p{
    font-size: 1.6rem;
    margin-bottom: var(--spacing-md);
}

.mentions-legales-wysiwyg ul{
    font-size: 1.6rem;
    margin-bottom: var(--spacing-md);
	list-style-type: disc;
	margin-left: var(--spacing-md);
}

.mentions-legales-wysiwyg ul li:not(:last-child){
    margin-bottom: var(--spacing-sm);
}

/* Contact Form Styles */
.header-content.contact{
    min-height: max(45rem, 75vh);
}

.contact-form-section {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}


.contact-form-section::before {
    content: "";
    position: absolute;
    top: -64px;
    left: 0;
    width: 58%;
    height: 64px;
    background-color: var(--white);
  }

.contact-form-intro {
    margin-bottom: var(--spacing-2xl);
}

.contact-form-intro p {
    font-size: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.form-field {
    margin-bottom: var(--spacing-md);
}

.form-field label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: #333;
    font-size: 1.6rem;
}

.required {
    color: #e74c3c;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    font-size: 1.6rem;
    font-family: "Open Sans", sans-serif;
    transition: all 0.2s ease-in-out;
    background-color: #f9f9f9;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--black);
    background-color: var(--white);
}

.form-field textarea {
    min-height: 120px;
    resize: vertical;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.checkbox-column {
    grid-template-columns: 1fr;
}

.checkbox-label {
    display: flex !important;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-weight: 400;
}

.checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

.checkbox-text {
    font-size: 1.6rem;
}

.policy-checkbox {
    align-items: flex-start;
    margin-top: var(--spacing-md);
}

.policy-checkbox .checkbox-text {
    font-size: 1.6rem;
}

.policy-checkbox a {
    color: var(--black);
    text-decoration: underline;
}

.submit-btn {
    background-color: var(--black);
    color: var(--white);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: var(--spacing-md);
}

.submit-btn:hover {
    background-color: #333;
	text-decoration: none;
}

.field-error {
    display: block;
    color: #e74c3c;
    font-size: 1.6rem;
    margin-top: 4px;
}

.alert {
    padding: var(--spacing-md);
    border-radius: 4px;
    margin-bottom: var(--spacing-md);
    font-size: 1.6rem;
}

.alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    text-align: center;
    padding: var(--spacing-lg);
    font-size: 1.6rem;
}

.alert.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Honeypot styling */
.honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.hero-realisation{
    display: flex;
    padding-top: 117px;
}

.hero-realisation-left{
    width: 50%;
}

.hero-realisation-right{
    width: 50%;
    background-color: #EEEEEE;
}

.hero-realisation-logo{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 74px 24px;
    margin-top: 70px;
}

.hero-realisation-logo::after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 114px;
    height: 78px;
    background-color: var(--white);
}

.hero-realisation-right{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.hero-realisation-right::after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 78px;
    background-color: var(--white);
}


.hero-realisation-right h1{
    margin-left: 64px;
    font-size: 4rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 21px;
}

.hero-realisation-tags{
    margin-left: 64px;
    display: flex;
    gap: 10px;
}

.hero-realisation-tags span{
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--black);
    text-transform: uppercase;
    background-color: #CCFFFC;
    padding: 5px 10px;
}

.realisation-content-left{
    background-color: var(--black);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

/* Realisation Content Section */
.realisation-content-container {
    display: flex;
    gap: 60px;
}

.realisation-content-left {
    width: 44%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 78px 43px;
}

.realisation-content-right {
    width: 50%;
    position: relative;
    margin-bottom: 80px;
}

.content-tab {
    width: 100%;
    font-size: 4rem;
    font-weight: 800;
    cursor: pointer;
    color: var(--white);
    transition: opacity 0.3s;
    text-transform: uppercase;
    padding-bottom: 15px;
    padding-top: 15px;
    border-bottom: 1px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-tab:hover {
    background-color: var(--white);
    color: var(--black);
}

.content-tab.active {
    opacity: 1;
}

.content-panel {
    display: none;
}

.content-panel.active {
    display: block;
}

.content-text {
    border-top: 1px solid var(--black);
    padding-top: 21px;
    margin-top: 10px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--black);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--black);
}

.content-text p:not(:last-of-type){
    margin-bottom: 12px;
}

.realisation-content-mobile {
    display: none;
}

/* WYSIWYG Content Styles */
.content-text h1,
.content-text h2,
.content-text h3,
.content-text h4,
.content-text h5,
.content-text h6 {
    font-weight: 800;
    color: var(--black);
    margin-bottom: 12px;
    line-height: 1.2;
}

.content-text h1 {
    font-size: 4rem;
}

.content-text h2 {
    font-size: 3.5rem;
}

.content-text h3 {
    font-size: 3rem;
}

.content-text h4 {
    font-size: 2.5rem;
}

.content-text h5 {
    font-size: 2rem;
}

.content-text h6 {
    font-size: 2rem;
}

.content-text p {
    font-size: 2rem;
}

.content-text ul,
.content-text ol {
    padding-left: 2rem;
}

.content-text ul {
    list-style-type: disc;
    font-size: 2rem;
}

.content-text ol {
    list-style-type: decimal;
}

.content-text li {
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.content-text ul ul,
.content-text ol ol,
.content-text ul ol,
.content-text ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.content-text a {
    color: var(--black);
    text-decoration: underline;
    transition: opacity 0.3s;
}

.content-text a:hover {
    opacity: 0.7;
}

.content-text strong,
.content-text b {
    font-weight: 800;
}

.content-text em,
.content-text i {
    font-style: italic;
}

.content-text blockquote {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
    border-left: 3px solid var(--black);
    font-style: italic;
}

.content-text img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
}

.content-text hr {
    border: none;
    border-top: 1px solid var(--black);
    margin: 2rem 0;
}

.content-text code {
    background-color: #f5f5f5;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}

.content-text pre {
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 3px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.content-text pre code {
    background-color: transparent;
    padding: 0;
}

.content-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.content-text th,
.content-text td {
    padding: 0.75rem;
    border: 1px solid var(--black);
    text-align: left;
}

.content-text th {
    font-weight: 800;
    background-color: #f5f5f5;
}

.realisation-image img{
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 50px;
}

.realisation-cta {
    background-color: #fff;
    padding: 40px 0 90px 0;
    display: flex;
    justify-content: center;
}

.realisation-cta-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.realisation-cta-video {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.realisation-cta-video video {
    width: 100%;
    height: auto;
    display: block;
}

.realisation-image-btn {
    background-color: #000;
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 5px 23px;
    border: 1px solid transparent;
    display: inline-block;
}

.realisation-image-btn:hover {
    text-decoration: none;
    background-color: #fff;
    border: 1px #000 solid;
    color: #000;
}

.realisation-contact{
    background-color: #CCFFFC;
    padding: 67px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.realisation-contact-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.realisation-contact-container h2{
    color: #00B0AD;
    margin-bottom: 32px;
    font-size: 4rem;
    font-weight: 800;
}

.realisation-contact-container .btn-contact{
    background-color: #000;
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 5px 23px;
    border: 1px solid transparent;
}

.realisation-contact-container .btn-contact:hover{
    text-decoration: none;
    background-color: #fff;
    border: 1px #000 solid;
    color: #000;
}

.hub-realisations-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 88px;
}

.realisation-card-logo img{
    width: 100%;
}

.realisation-card-content{
    background-color: #EEEEEE;
}

.realisation-card-content h2{
    padding: 30px 30px 0 30px;
    font-size: 2.7rem;
    color: #000;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 14px;
}

.realisation-card-tags{
    padding: 0 30px 22px 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.realisation-card-tags span{
    background-color: #CCFFFC;
    color: #000;
    padding: 5px 10px;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pagination-numbers{
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-bottom: 64px;
}

.pagination-numbers a{
    padding: 8px 12px;
    font-size: 16px;
}

.pagination-current{
    background-color: #2C2C2C;
    color: #fff;
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 12px;    
}

.hub-filtres-container{
    position: relative;
    display: flex;
    gap: 18px;
    margin-top: -90px;
    margin-bottom: 73px;
    flex-wrap: wrap;
    background-color: #fff;
    padding-bottom: 40px;
    padding-top: 42px;
    padding-inline: 5%;
}

.hub-filtres-container::after{
    content: "";
    background-color: var(--turquoise);
    width: 20%;
    height: 78px;
    right: 0;
    position: absolute;
    top: 0;
    right: 0;
}

.filtre-btn {
    padding: 5px 20px;
    font-size: 1.6rem;
    font-weight: 800;
    border: 1px solid #000;
    text-transform: uppercase;
}

.filtre-btn.active {
    background-color: #00B0AD;
    border: none;
}

.filtre-wrapper {
    display: contents;
}

.filtre-toggle {
    display: none;
}

@media (max-width: 1180px) {
    .mobile-nav{
        display: flex;
    }
    
    .desktop-nav{
        display: none;
    }

    .bloc-1 {
        flex-direction: column;
    }

    .bloc-1-left{
        width: 100%;
        margin-bottom: var(--spacing-xl);
    }

    .bloc-1-right{
        width: 100%;
    }

    .bloc-1-right-single{
        width: 100%;
    }
    
    .bloc-1-left-top h2{
        width: 100% ;
    }

    .bloc-1-left-top p{
        width: 100%;
    }

    .bloc-1-left-bottom{
        text-align: right;
    }

    .bloc-1-left-bottom p{
        width: 100%;
    }
    
    .bloc-2-container {
        flex-direction: column;
    }

    .bloc-2-left{
        width: 100%;
    }

    .homepage .bloc-2-right{
        width: 100%;
    }

    .homepage .bloc-2-left-bottom {
        width: 100%;
    }

    .homepage .bloc-2-footer,
	.homepage.bloc-footer-1::before{
        background-color: var(--turquoise);
    }
    
    .bloc-footer-1 {
        flex-direction: column;
    }

    .bloc-footer-1-left{
        width: 100%;
        margin-bottom: var(--spacing-xl);
    }

    .bloc-footer-1-right{
        width: 100%;
    }

    .bloc-footer-contact-us{
        flex-direction: column;
    }

    .bloc-footer-contact-us h2{
        margin-bottom: var(--spacing-lg);
    }

    .bloc-footer-contact-us form{
        width: 90%;
    }
    
    footer{
        flex-direction: column;
    }

    .footer-left{
        width: 100%;
        margin-bottom: var(--spacing-lg);
    }

    .footer-right{
        width: 100%;
    }

    .notre-approche .bloc-2-left{
        padding-bottom: var(--spacing-2xl);
    }

    .notre-approche .bloc-2-right{
        display: none;
        width: 100%;
    }
    
    .notre-approche.bloc-2-footer {
        display: none;
        background-color: #EEEEEE;
    }

    .notre-approche.bloc-footer-1::before {
        background-color: var(--black);
    }

    .nos-expertises .header-content-top-right{
        position: initial;
    }

    .bloc-2-right{
        width: 100%;
    }

    .contact-us-link{
        padding: 0;
    }

    .hub-realisations-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .hub-filtres {
        background-color: #fff;
        padding: 16px 5%;
    }

    .filtre-wrapper {
        display: inline-block;
        position: relative;
    }

    .filtre-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #00B0AD;
        padding: 10px;
        border: none;
        cursor: pointer;
    }

    .hub-filtres-container {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        flex-direction: column;
        gap: 22px;
        padding: 19px 12px;
        background-color: #fff;
        z-index: 100;
        margin-top: 0;
        margin-bottom: 0;
        flex-wrap: nowrap;
    }

    .hub-filtres-container.open {
        display: flex;
    }

    .hub-filtres-container::after {
        display: none;
    }

    .hub-realisations::after{
        content: '';
        position: absolute;
        width: 55%;
        height: 50px;
        background-color: #fff;
        bottom: 0;
        left: 0;
    }
}



@media (max-width: 768px) {
    .header-fil-arianne{
        bottom: -10%;
		left: 2.5%;
    }
	
	.global-gap{
		padding-left: 2.5%;
    	padding-right: 2.5%;
	}
	
	.homepage .header-content-top-left, .notre-vision .header-content-top-left, .notre-approche .header-content-top-left, .nos-engagements .header-content-top-left, .blog .header-content-top-left, .contact .header-content-top-left {
    	width: 100%;
	}
	
	/********/
	
	.bloc-faq::before,
	.bloc-1::before,
	.contact-form-section::before,
	.bloc-3::before,
	.bloc-blog-articles::before,
	.bloc-blog-article-container::before{
		top: -48px;
		height: 48px;
		width: 50%;
	}
	
	.bloc-2::before,
	.bloc-footer-1::before{
		width: 50%;
    	height: 48px;
	}
	
	.bloc-1{
		padding-top: var(--spacing-xl);
    	padding-bottom: var(--spacing-xl);
	}
	
    .bloc-3{
        padding-bottom: var(--spacing-xl);
    }
	
	.bloc-1-right{
		margin-left: 0;
	}
	
	.homepage .bloc-2-left{
		padding-bottom: var(--spacing-xl);
	}
	
	.bloc-2-left{
		padding: var(--spacing-3xl) 2.5% 0 2.55%;
	}
	   
    .homepage .bloc-2-left-top h2{
        margin-bottom: var(--spacing-xl);
    }
	
	.bloc-2-right-container{
		width: 100%;
		padding-left: 2.5%;
		padding-right: 2.5%;
	}
	
	.bloc-2-right{
		padding-bottom: var(--spacing-xl);
    	padding-top: var(--spacing-xl);
	}
	
	.bloc-2-footer{
		display: none;
	}
	
	.bloc-footer-1{
		padding-bottom: var(--spacing-xl);
    	padding-top: var(--spacing-3xl);
	}
	
	/********/
	
    .nos-engagements .header-content-top-left,
	.homepage .header-content-top-left, 
	.notre-vision .header-content-top-left, 
	.notre-approche .header-content-top-left, 
	.nos-engagements .header-content-top-left, 
	.blog .header-content-top-left, 
	.contact .header-content-top-left{
		width: 100%;
	}

	/********/
    .header-content {
        padding-left: 5%;
    }
	
	.nos-expertises .bloc-1-left-content p{
		margin-bottom: 0;
	}
	
    .header-content-top-right{
        flex-direction: row;
    }
    
    .bloc-2-right-single-text h3,
	.nos-expertises .bloc-1-left-content p{
        font-size: 3rem;
    }

    .bloc-footer-contact-us h2{
        padding: 0 5%;
    }

	.homepage .header-content-top-left,
	.notre-vision .header-content-top-left,
    .notre-vision .bloc-1-left-content p,
    .bloc-3-left h2,
	.bloc-3-right,
	.bloc-4-left{
        width: 100%;
    }

    .nos-expertises .bloc-1-left{
        padding-right: 0;
    }
	
    .notre-approche .bloc-2-right-content{
        margin: 0;
    }

    .nos-engagements .header-content-top-left h1 {
        font-size: 4.2rem;
    }

    .bloc-3-left{
        width: 100%;
        margin-bottom: var(--spacing-lg);
    }

    .bloc-3-right-card-container{
        grid-template-columns: repeat(1, 1fr);
    }

    .bloc-4-right{
        margin-top: var(--spacing-2xl);
        margin-bottom: var(--spacing-2xl);
        width: 100%;
    }

	.header-content-top,
    .bloc-3,
	.bloc-4,
    .bloc-4-left-cards-container,
	.nos-expertises .header-content-top,
	.nos-expertises .header-content-top-right{
        flex-direction: column;
    }

	.nos-expertises .header-content-top-left,
	.nos-expertises .header-content-top-right,
	.nos-expertises .bloc-2-left-container-custon-content-progress-container span{
        width: 100%;
    }

    .nos-expertises .header-content-top-right{
        display: none;
    }

    /*.contact-form {
        margin: 0 16px;
    }*/
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
	.contact-form-intro{
		margin-bottom: var(--spacing-xl);
	}
	
    .contact-form-intro p {
        font-size: 1.6rem;
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .homepage .header-content-top-left h1{
        font-size: 4.2rem;
    }

    .homepage .header-content-top-left h1{
        margin-bottom: var(--spacing-2xl);
    }
    
    .header-content-top-left h1{
        margin-bottom: var(--spacing-2xl);
    }

    .header-content-top-left p{
        margin-bottom: var(--spacing-lg);
    }

    .bloc-4-left-card-single::after {
        width: 100%;
    }

    .bloc-2-right-single:not(:last-of-type)::after {
        width: 96%;
    }

    .header-content{
        height: clamp(740px, 100vh, 100vh);
    }

    .hero-realisation-left{
        width: 36%;
    }

    .hero-realisation-right{
        width: 64%;
    }

    .hero-realisation-logo::after {
        display: none;
    }

    .hero-realisation-right::after {
        display: none;
    }

    .hero-realisation-right h1{
        font-size: 2rem;
    }

    .hero-realisation-tags{
        flex-direction: column;
    }

    .hero-realisation-tags span{
        width: fit-content;
    }

    /* Realisation Content Responsive */
    .realisation-content-container {
        display: none !important;
        visibility: hidden !important;
    }

    .realisation-content-container .content-panel,
    .realisation-content-container .content-text {
        display: none !important;
        visibility: hidden !important;
    }

    .realisation-content-mobile {
        display: block !important;
        padding: 2.5%;
        visibility: visible !important;
        opacity: 1 !important;
        background-color: #000;
    }

    .content-mobile-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .content-mobile-item:last-child {
        margin-bottom: 0;
    }

    .content-mobile-title {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--white);
        text-transform: uppercase;
        margin-bottom: 12px;
        padding-bottom: 12px;
        padding-top: 12px;
        transition: opacity 0.3s;
        border-bottom: 1px solid var(--white);
    }

    .content-mobile-text {
        display: none;
        padding-top: 21px;
        margin-top: 10px;
        font-size: 1rem;
        line-height: 1.6;
        color: var(--black);
        padding-bottom: 16px;
        border-bottom: 1px solid var(--black);
        animation: slideDown 0.3s ease-out;
    }

    .content-mobile-text p:not(:last-child){
        margin-bottom: 12px;
    }

    .content-mobile-text.active {
        display: block;
    }

    .content-mobile-text p{
        color: var(--white);
    }

    .content-mobile-text ul {
        color: var(--white);
        list-style-type: disc;
    }

    .content-mobile-text LI {
        color: var(--white);
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* WYSIWYG styles pour les textes mobiles */
    .content-mobile-text h1,
    .content-mobile-text h2,
    .content-mobile-text h3,
    .content-mobile-text h4,
    .content-mobile-text h5,
    .content-mobile-text h6 {
        font-weight: 800;
        color: var(--black);
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .content-mobile-text h1 { font-size: 4rem; }
    .content-mobile-text h2 { font-size: 3.5rem; }
    .content-mobile-text h3 { font-size: 3rem; }
    .content-mobile-text h4 { font-size: 2.5rem; }
    .content-mobile-text h5 { font-size: 2rem; }
    .content-mobile-text h6 { font-size: 2rem; }
    .content-mobile-text p { font-size: 1.2rem; }
    .content-mobile-text ul,
    .content-mobile-text ol {
        padding-left: 2rem;
        font-size: 1.2rem;
    }
    .content-mobile-text li {
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
    }
    .content-mobile-text a {
        color: var(--black);
        text-decoration: underline;
    }
    .content-mobile-text strong,
    .content-mobile-text b {
        font-weight: 800;
    }
    .content-mobile-text em,
    .content-mobile-text i {
        font-style: italic;
    }

    .realisation-image img{
        margin-bottom: 0;
    }

    .realisation-contact-container h2{
        text-align: center;
        margin-bottom: 18px;
    }
}

@media (max-width: 480px) {
	header nav a img{
		height: 3.5rem;
	}
	
	.header-fil-arianne{
		position: static;
	}
	
	.header-content-top-left h1,
	.bloc-1-left-top h2, .bloc-footer-1-left h2{
        font-size: 3.2rem
    }

    .nos-expertises .bloc-1-left-content p,
	.bloc-3-left p{
        font-size: 2.6rem;
		margin-bottom: 0;
    }

    .bloc-1-right{
        margin-left: 0;
        padding-right: 5%;
        margin-bottom: var(--spacing-xl);
    }

    .notre-approche .bloc-2-left-single,
	.bloc-footer-1-right-3-rows{
        flex-direction: column;
    }

    .bloc-2-left-single-left{
        margin-bottom: var(--spacing-xs);
    }

    .notre-approche .bloc-2-left-single {
        align-items: start;
    }

    .nos-expertises.header-content{
        height: initial;
    }

    .nos-expertises .bloc-1-left-container{
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .not-displayed{
        display: none;
    }

    .header-content{
        /*height: auto;*/
        padding-top: 15vh;
        padding-bottom: 15vh;
    }
		
	.homepage.header-content{
		justify-content: flex-start;
	}

    .bloc-footer-contact-us h2{
        font-size: 2.4rem;
    }

    .notre-approche.bloc-1,
	.bloc-footer-1-right-3-rows{
        margin-bottom: 0;
    }


    .bloc-3-right-card-container {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .bloc-blog-articles-left h2 {
        font-size: 1.2em;
    }

    .bloc-blog-articles-left time{
        font-size: 1.2rem;
    }

    .bloc-blog-articles-left p {
        font-size: 1.2rem;
    }
    
    .bloc-blog-articles a{
        align-items: start;
        justify-content: space-between;
    }

    .bloc-blog-articles-right{
        display: flex;
        margin-top: var(--spacing-xs);
    }

    .submit-btn {
        width: fit-content;
        padding: var(--spacing-md);
    }
	
    .faq-item h2{
        font-size: 1.2em;
    }

    .faq-item span{
        font-size: 0.8em;
    }

    .faq-item button{
        font-size: 1.2em;
    }

    .faq-answer-content{
        font-size: 1.2em;
    }

    .faq-question{
        /*flex-direction: column;*/
        align-items: center!important;
    }
	
    .faq-toggle{
        margin-bottom: var(--spacing-xs);
    }

    .bloc-1-left.sensibilisation .bloc-1-left-container .bloc-1-left-single:nth-of-type(2){
        display: none;
    }

    .header-content-top-right{
        width: 100%;
        justify-content: space-between;
    }

    .header-content-top{
        align-items: start;
    }

    .header-content-bottom{
        width: 100%;
        right: 0;
        padding: 0 5%;
        align-items: center;
		justify-content: center;
        bottom: var(--spacing-xl);
    }

    .header-content-bottom img{
        width: 54px;
        height: auto;
    }

    .contact .header-content-top-right{
        gap: var(--spacing-lg);
    }

    .notre-approche .bloc-2-left-single h3{
        font-size: 2.4rem;
    }

    .nos-expertises .bloc-1-right-text{
        margin-bottom: var(--spacing-xl);
    }
	
	.notre-vision.bloc-1{
		padding-bottom: var(--spacing-3xl);
	}
	
	.nos-expertises .bloc-1-right-text{
		margin-bottom: 0;
	}
	    
    .bloc-footer-1-right-4-rows{
        grid-template-columns: repeat(2, 1fr);
    }

    .hub-realisations-grid{
        grid-template-columns: repeat(1, 1fr);
    }

    .hero-realisation-logo{
          padding: 38px 24px;
    }

    .hero-realisation-right h1,
    .hero-realisation-tags{
        margin-left: 23px;
    }

    .hero-realisation-logo{
        margin-top: 32px;
    }

    .hero-realisation-right{
        padding: 32px 21px 14px 0;
    }

    .hero-realisation-left{
        display: flex;
        justify-content: flex-end;
    }
}