html { scroll-behavior: smooth; }


video::-webkit-media-controls {
  display: none !important;
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}

.header{
    position: relative;
    height: 100vh;
}

.employe .row > h1{
	color: var(--color3);
}

video{
    object-fit: cover;
    position: relative;
    z-index: -1;
    height: 100vh;
    width: 100%;
    filter: brightness(0.5);
}

.header .text{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.header .text p{
	color: var(--color1);
}

.intro{
    padding: 5vw 10vw;
    background-color: var(--color1);
	position: relative;
}

/*
.equipe svg{
	position: absolute;
    left: 0;
    top: -27vw;
    width: 42vw;	
}
*/

section#contact svg{
/*	width: fit-content;*/
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
	width: 45vw;
}

.intro .titre{
	width: 35%;
    margin: 0 auto;
    padding-bottom: 5vw;	
}

.intro_contenu > div:nth-child(2){
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid;
    margin: 0 18vw;
    padding: 75px 100px;
    flex-direction: column;
    /* background-color: var(--color1); */
    position: relative;
    z-index: 3;
}

div.intro_contenu{
	text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	position: relative;
}

.ligne {
    background: black;
    height: 250px;
    display: block;
    width: 2px;
    z-index: 3;	
}

span.ligne::after {
    content: "";
    background: black;
    width: 15px;
    height: 15px;
    display: block;
    position: relative;
    left: -7px;
    border-radius: 100%;
    top: -15px;
}

.intro_contenu img{
	border-radius: 100%;
    position: absolute;
    right: 0;
    top: 10vw;
    max-height: 435px;
    object-fit: cover;
    z-index: 2;
    width: 23vw;
    height: 23vw;
    max-width: 435px;;
    min-width: 260px;
    min-height: 260px;	
}

.flexcontent img{
    max-width: 540px;
    max-height: 845px;
    object-fit: cover;
    border-radius: 9999px;
    width: 29vw;
    height: 44vw;
    min-height: 475px;
    min-width: 275px;	
}

.flexcontent > .row{
	
	background-color: var(--color1);
}

.slider_temoinagne{
	position: relative;
}

.contenu_temoignage{
    padding: 5vw;
    background: var(--color1);
    border-radius: 9999px;
	
}

.temoignage{
	position: relative;
    padding: 10vw 20vw 10vw 5vw;
}

.temoignage img{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.3);	
}

.titre_temoignage{
	text-align: right;
	
}
.titre_temoignage p{
	color: white;
}

.slider_temoinagne .splide__arrow {
    top: auto;
    bottom: 0;
}

.slider_temoinagne .splide__arrow--next{
	right: -15vw;
}

.slider_temoinagne .splide__arrow--prev {
    left: auto;
	right: -10vw;	
}

section.temoignage > h1{
	z-index: 3;
    position: relative;
    padding-bottom: 3vw;
}

section#contact .colonne_01{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 10vw;	
}

section#contact .colonne_02{
	width: 50%;
}

section#contact {
    display: flex;
    flex-wrap: wrap;
    padding: 5vw 10vw;
	position: relative;
    overflow: hidden;	
}

section#contact .colonne_02 *{
	font-family: var(--main-font);
}

section#contact .colonne_02 input, section#contact .colonne_02 select, section#contact .colonne_02 option, section#contact .colonne_02 textarea{
	border-radius: 20px;
	background-color:  var(--color1);
}

#gform_submit_button_1{
	background-color: var(--color1);
    color: var(--color3);
    padding: 15px 40px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    font-size: 80%;
    font-family: var(--main-font);
    border-radius: 25px;
    box-shadow: none;
}

#contact > img:first-child{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.3);
}
	
#contact > img:last-child{
    position: absolute;
    bottom: -5vw;
    right: 0;
    z-index: -1;
    opacity: 0.9;
    width: 27vw;	
}
	

footer{
	display: none;
}

.copy{
	display: none;
}

#contact .colonne_01 *{
	color: var(--color1);
}

.adresse{
	padding-top: 5vw;
	background-color: var(--color1);
	position: relative;
}

.adresse > div{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 5vw;	
}

.adresse > div > div{
   position: relative;
    z-index: 3;
    text-align: center;
    padding: 3vw;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30vw;
    border-radius: 100%;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); /* Safari */
    border: 1px solid var(--color3);
}

.adresse > div > img{
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    object-fit: cover;
}

.adresse > h1{
	text-align: center;
	color: var(--color3);
	margin: 0;
	padding-bottom: 3vw;
}

.adresse h3{
	color: var(--color3);
	font-weight: normal;
}




section.equipe{
    display: flex;
    flex-wrap: wrap;
    padding: 5vw 10vw;
    align-items: center;
	position: relative;
}

section.equipe .colonne_01{
    width: 50%;
	text-align: center;
}

section.equipe .colonne_01 img{
    max-width: 540px;
    max-height: 845px;
    object-fit: cover;
    border-radius: 9999px;
    width: 29vw;
    height: 44vw;
    min-height: 475px;
    min-width: 275px;	
}

section.equipe .colonne_02{
    width: 50%;
    padding-left: 5vw;	
}

.squircle-img {
  	max-width: 1600px;
  	max-height: 800px;
    width: 84vw;
    height: 42vw;	
  	border-radius: 9999px; 
    position: relative;
    z-index: 2;
}

.banniere{
	background-color: var(--color1);
	text-align: center;
	padding: 7vw 0vw 3vw 0;
}

.equipe{
		background-color: var(--color1);
}

.employe .row{
	padding: 5vw 0 5vw 10vw;
	background-color: var(--color1);
}

.employe .row > div:first-child{
	border-top: 1px solid;	
}

.equipe > img{
	    position: absolute;
    left: 0;
    top: -15vw;
    width: 33vw;
    z-index: 0;
}

.employe .row > div{
    padding: 5px;
    position: relative;
    display: flex;
    gap: 10%;
}

p.equipe-title {
    min-width: 200px;
}

.employe .row > div::after{
    content: "";
    height: 1px;
    width: 100%;
    background-color: var(--color3);
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.employe .row > div:hover {
    transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
    background-color: var(--color3);
    z-index: 10;
}

.info_membre_equipe{
    position: absolute;
    text-align: center;
    left: 10%;
    right: 10%;
    bottom: 5vw;
}

.bg_equipe{
	    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(to bottom, #ffffff00, #000000ab);
    border-radius: 99999999px;
}

.info_membre_equipe *{
	color: white;
}

.employe .row > div:hover{
	transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
	transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
	background-color: var(--color3);
}

.employe .row > div:hover .equipe-poste,
.employe .row > div:hover .equipe-title{
	   color: var(--color2);
}

.equipe-thumbnail{
	position: absolute;
    right: 0;
    transform: translate(-50%, -50%);
    top: 50%;
	z-index: 9;
}

.equipe-thumbnail img{
    border-radius: 9999px;
    height: 33vw;
    object-fit: cover;
    width: 23vw;
/*
    min-width: 350px;
    min-height: 480px;
*/
    max-width: 500px;
    max-height: 765px;	
}

.equipe-thumbnail{
	z-index: 9;
}

.info_membre_equipe p{
    font-size: 14px;	
}


/* Les deux SVG sont positionnés en absolu comme avant */
section.equipe .forme-equipe {
    position: absolute;
    left: 0;
    top: -24vw;
    width: 42vw;
    z-index: 1; /* fill derrière */
}

section.equipe .forme-equipe.svg-stroke {
    z-index: 3; /* stroke devant */
    pointer-events: none;
}

/* L'image entre les deux */
section.equipe .colonne_01 img {
    position: relative;
    z-index: 6;
}

/* ============================================
   POSITIONNEMENT DU CONTAINER SVG
   ============================================ */

.container_svg{
    position: absolute;
    left: -41vw;
    top: 40.6vw;
    transform: rotate(90deg);
    width: 100vw;
}

/* ============================================
   ANIMATION KEYFRAMES
   ============================================ */

@keyframes blink {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 1; }
}

@keyframes trace-path {
    to { stroke-dashoffset: 0; }
}

/* ============================================
   SVG DOUBLE COUCHE — styles de base et couches
   ============================================ */

/* Règle de base — neutre, pas de fill ni stroke ici */
.container_svg svg .cls-1 {
    transition: fill 0.8s ease;
}

/* Couche FILL — derrière l'image (z-index: 1) */
.container_svg.svg-fill {
    z-index: 0;
}

.container_svg.svg-fill svg .cls-1 {
    fill: transparent; /* transparent au départ, le JS anime puis remplit */
    stroke: var(--color2);
    stroke-width: 0.5px;
}

/* Couche STROKE — devant l'image (z-index: 3) */
.container_svg.svg-stroke {
    z-index: 3;
    pointer-events: none;
}

.container_svg.svg-stroke svg .cls-1 {
    fill: transparent;
    stroke: var(--color2);
    stroke-width: 0.2px;
}

/* L'image .intro_contenu img reste entre les deux (z-index: 2 — déjà défini plus haut) */

@media screen and (max-width:1129px){
	.flexcontent > .row:nth-of-type(2n+2) > div:nth-of-type(1){
	    order: 1!important;	
	}
	
	div.flexcontent > .row > div {
		min-width: auto;
	}	
	
	.flexcontent .row .lightbox{
		padding-bottom: 30px;
	}
}

@media screen and (max-width:1024px){
	section.equipe .colonne_01 {
		width: 100%;
		text-align: center;
		padding-bottom: 5vw;
	}
	
	section.equipe .colonne_02 {
		width: 100%;
		padding-left: 0vw;
	}
	
	section.equipe .forme-equipe {
	
		left: 0vw;
		top: -52vw;
		width: 61vw;

	}
}

@media screen and (max-width:860px){
	.intro_contenu > div:nth-child(2) {
		padding: 5vw;
		margin: 0 20vw;
	}	
	
	
	.info_membre_equipe {

		bottom: 8vw;
	}
	
	.equipe-thumbnail {

    	right: -18vw;

	}
	
		section#contact svg{
	/*	width: fit-content;*/
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: -1;
		width: 70vw;
	}
	
	p.equipe-title {
    	min-width: 130px;
	}
	
    section.equipe .forme-equipe {
        left: 0vw;
        top: -63vw;
        width: 61vw;
    }	
	
	.intro .titre{
		width: 50%;
	}
	
	section#contact .colonne_01{
		width: 100%;
		padding-bottom: 5vw;
	}
	
	section#contact .colonne_02 {
    	width: 100%;
	}
	
	.adresse > div > div {

		width: 40vw;

	}
	
}

@media screen and (max-width: 760px) {
	.intro .titre{
		width: 60%;
	}
}



@media screen and (max-width: 640px) {
    .intro_contenu > div:nth-child(2) {
        margin: 0 15vw;
    }
	
	section.equipe .forme-equipe {
        left: 0;
        top: -78vw;
        width: 58vw;
    }
	
	.adresse > div > div {
		width: 50vw;
	}
	
	.intro_contenu img {

		
		min-width: 235px;
		min-height: 235px;
	}	
	
	.equipe-thumbnail img {

        min-width: 250px;
        min-height: 330px;
	}
}

@media screen and (max-width: 550px) {
    .intro_contenu > div:nth-child(2) {
        padding: 15vw;
        margin: 0;
    }
	
	    .equipe-thumbnail {
        right: -35vw;
    }
	
	.info_membre_equipe p {
    	font-size: 11px;
	}
	
	.info_membre_equipe {
        bottom: 12vw;
     
    }

}

@media screen and (max-width:500px){
	    section.equipe .forme-equipe {
        left: 0;
        top: -90vw;
        width: 60vw;
	}
	
	    .equipe-thumbnail {
        right: -24vw;
    }
}