/*!
Theme Name: STARTEO Starter Theme
Author: Starteo
Author URI: https://www.starteo.pro
Description: 
Version: 1.0
Requires at least: 5.0
Tested up to: 5.7
Requires PHP: 7.2
Text Domain: gbdi-starter
*/

/* Don't overwrite this file. Compile "/assets/main.(less|scss)" to "/assets/css/main.css" */

/* INFOS */
/*--- EFFET LUMINOSITE D'ADOBE XD ---*/
.proma-luminosity img{
	mix-blend-mode: luminosity;
}
/*--- EFFET LUMINOSITE D'ADOBE XD ---*/
/* INFOS */

/* From http://codex.wordpress.org/CSS */

/* GENERAL */
@font-face {
	font-family: "Znikomit";
	src: url(assets/_fonts/Znikomit.otf) format("opentype");
}

body{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
}

.back-to-top{
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 10px; /* Place the button at the bottom of the page */
	right: 10px; /* Place the button 30px from the right */
	z-index: 999; /* Make sure it does not overlap */
	outline: none; /* Remove outline */
	cursor: pointer; /* Add a mouse pointer on hover */
	font-size: 20px; /* Increase font size */
	color: #FFFFFF;
	background: #D9D9D9;
	border: solid 1px #D9D9D9;
	padding: 14px 16px;
	transition: background-color .3s, opacity .5s, visibility .5s;
	opacity: 0;
	visibility: hidden;
}

.back-to-top.show {
	opacity: 1;
	visibility: visible;
}

.back-to-top:hover{
	background-color: #CA4F62;
}

.proma-gray{
	color: #D9D9D9 !important;
	border-color: #D9D9D9 !important;
}

.proma-dark{
	color: #1F2F2D !important;
	border-color: #1F2F2D !important;
}

.proma-white{
	color: #FFFFFF !important;
	border-color: #FFFFFF !important;
}

.proma-red{
	color: #CA4F62 !important;
	border-color: #CA4F62 !important;
}

.proma-orange{
	color: #BD8200 !important;
	border-color: #BD8200 !important;
}

.proma-hover-gray:hover{
	color: #D9D9D9 !important;
	border-color: #D9D9D9 !important;
}

.proma-hover-dark:hover{
	color: #1F2F2D !important;
	border-color: #1F2F2D !important;
}

.proma-hover-white:hover{
	color: #FFFFFF !important;
	border-color: #FFFFFF !important;
}

.proma-hover-red:hover{
	color: #CA4F62 !important;
	border-color: #CA4F62 !important;
}

.proma-hover-orange:hover{
	color: #BD8200 !important;
	border-color: #BD8200 !important;
}

.proma-bg-gray{
	background-color: #D9D9D9;
}

.proma-bg-dark{
	background-color: #1F2F2D;
}

.proma-bg-white{
	background-color: #FFFFFF;
}

.proma-bg-red{
	background-color: #CA4F62;
}

.proma-bg-orange{
	background-color: #BD8200;
}

.proma-hr{
	height: 2px;
	width: 100%;
	transition: all .5s;
}

.proma-vh{
	height: 100vh;
	min-height: 900px;
	position: relative;
}

.proma-lines-white, .proma-lines-gray, .proma-lines-dark, .proma-lines-connect, .proma-lines-home{
	background-size: 100% auto;
	background-position: center top;
	background-repeat: repeat-y;
}

.proma-lines-white{
	background-image: url(assets/images/PROMA-Lines-White.svg);
}

.proma-lines-gray{
	background-image: url(assets/images/PROMA-Lines-Gray.svg);
}

.proma-lines-dark{
	background-image: url(assets/images/PROMA-Lines-Dark.svg);
}

.proma-lines-home{
	background-image: url(assets/images/PROMA-Lines-Home.svg);
}

.proma-lines-connect{
	background-image: url(assets/images/PROMA-Lines-Connect.svg);
}

.proma-title{
	font-family: 'Znikomit';
	font-size: 80px;
	line-height: 108px;
	-webkit-text-stroke: 1px;
	transform: rotate(-3deg);
}

.proma-title-medium{
	font-family: 'Znikomit';
	font-size: 60px;
	line-height: 80px;
	-webkit-text-stroke: 1px;
}

.proma-title-normal{
	font-size: 45px;
	line-height: 45px;
	letter-spacing: 2.25px;
	text-transform: uppercase;
	font-weight: 800;
}

.proma-title-small{
	font-size: 30px;
	line-height: 33px;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
}

.proma-title-extra-small{
	font-size: 20px;
	line-height: 28px;
	font-weight: 800;
	text-transform: uppercase;
}

.proma-introduction{
	font-size: 20px;
	line-height: 30px;
}

.proma-content{
	font-size: 15px;
	line-height: 20px;
}

.proma-quotation .proma-content{
	font-size: 20px;
	line-height: 28px;
}

.proma-introduction strong, .proma-content strong{
	font-weight: 800;
}

.proma-page-std{
	padding-top: 180px;
	padding-bottom: 100px;
}

.proma-page-content{
	padding: 110px 160px;
}

.proma-title-separator{
	width: 100%;
	border-bottom: dotted 8px;
}

.proma-page-banner{
	width: 100%;
	position: relative;
}

.proma-page-banner img{
	width: 100%;
	height: auto;
	display: block;
	mix-blend-mode: luminosity;
}

.proma-page-banner:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.proma-page-banner.proma-bg-dark:after{
	background: linear-gradient(0deg,rgba(31, 47, 45, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.proma-page-banner.proma-bg-red:after{
	background: linear-gradient(0deg,rgba(202, 79, 98, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.proma-page-banner.proma-bg-gray:after{
	background: linear-gradient(0deg,rgba(217, 217, 217, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.proma-description, .proma-details{
	padding: 150px;
	aspect-ratio: 1/0.9;
}

.proma-description-sub{
	padding-left: 25%;
}

.proma-details-element button{
	font-size: 25px !important;
	line-height: 28px !important;
	font-weight: 800;
	text-transform: uppercase;
	border: none;
	outline: none !important;
	box-shadow: none !important;
	background-color: transparent !important;
	border-bottom: solid 3px !important;
	border-radius: 0 !important;
	padding: 30px 0;
}

.proma-details-element:first-child button{
	border-top: solid 3px !important;
}

.proma-details-element.accordion-item{
	border: none !important;
	background-color: transparent !important;
	border-radius: 0 !important;
}

.proma-details-element .accordion-button:after{
	content: '+';
	background: none !important;
	font-size: 25px;
	line-height: 1px;
	font-weight: 800;
	transform-origin: center center;
	height: auto;
	top: 50%;
	position: absolute;
	right: 0;
	color: #1F2F2D;
}

.proma-expertise .proma-details-element .accordion-button:after{
	color: #CA4F62;
}

.proma-details-element .accordion-button:not(.collapsed):after{
	content: '-';
}
/* GENERAL */

/* HEADER */
.proma-header{
	box-shadow: 0px 2.5px 2.5px #00000026;
	z-index: 999;
	top: 0;
}

.proma-header-link{
	display: inline-block;
}

.proma-sticky-header{
	position: fixed;

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.proma-sticky-header.is-sticky {
	opacity: 1;
	pointer-events: auto;
}

.proma-fixed-header{
	position: fixed;
}

.proma-header-link img{
	max-height: 36px;
}

.proma-header .navbar{
	padding-top: 0;
	padding-bottom: 0;
}

.proma-header .navbar-expand-md .navbar-nav{
	display: flex;
	column-gap: 24px;
}

.proma-header .navbar-expand-md .navbar-nav .nav-link{
	font-size: 20px;
	line-height: 24px;
	font-weight: 800;
	text-transform: uppercase;
	color: #D9D9D9 !important;
	border-top: solid 5px transparent;
	padding: 22px 28px 27px 28px;
}

.proma-header .navbar-expand-md .navbar-nav .nav-link:hover, .proma-header .navbar-expand-md .navbar-nav .active .nav-link{
	color: #CA4F62 !important;
	border-color: #CA4F62 !important;
}
/* HEADER */

/* FOOTER */
.proma-footer-element{
	padding-top: 200px;
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.proma-footer-element.proma-bg-white{
	background-image: url(assets/images/PROMA-Footer-Trame-Gray.svg);
}

.proma-footer-element.proma-bg-gray{
	background-image: url(assets/images/PROMA-Footer-Trame-White.svg);
}

.proma-footer-element-image{
	height: 165px;
	max-height: 165px;
	margin-bottom: 65px;
}

.proma-footer-element-image img{
	max-height: 100%;
}

.proma-footer-element-baseline{
	font-family: 'Znikomit';
	font-size: 40px;
	line-height: 54px;
	-webkit-text-stroke: 1px;
	margin-bottom: 50px;
}

.proma-socials{
	display: flex;
	column-gap: 16px;
	justify-content: center;
}

.proma-socials a{
	width: 49px;
	height: 49px;

	mask-repeat: no-repeat;
	mask-size: contain;

	/* compatibilité WebKit */
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;

	transition: all .5s;
}

.proma-linkedin{
	mask-image: url("assets/images/PROMA-Linkedin.svg");
	/* compatibilité WebKit */
	-webkit-mask-image: url("assets/images/PROMA-Linkedin.svg");
}

.proma-facebook{
	mask-image: url("assets/images/PROMA-Facebook.svg");
	/* compatibilité WebKit */
	-webkit-mask-image: url("assets/images/PROMA-Facebook.svg");
}

.proma-instagram{
	mask-image: url("assets/images/PROMA-Instagram.svg");
	/* compatibilité WebKit */
	-webkit-mask-image: url("assets/images/PROMA-Instagram.svg");
}

.proma-youtube{
	mask-image: url("assets/images/PROMA-Youtube.svg");
	/* compatibilité WebKit */
	-webkit-mask-image: url("assets/images/PROMA-Youtube.svg");
}

.proma-mail{
	mask-image: url("assets/images/PROMA-Mail.svg");
	/* compatibilité WebKit */
	-webkit-mask-image: url("assets/images/PROMA-Mail.svg");
}

.proma-socials-sport a{
	background-color: #CA4F62;
}

.proma-socials-speak a{
	background-color: #BD8200;
}

.proma-socials a:hover{
	background-color: #1F2F2D;
}

.proma-footer-element-link{
	padding-top: 98px;
	padding-bottom: 130px;
	padding-left: 170px;
	padding-right: 170px;
}

.proma-footer-element-link a span{
	font-size: 30px;
	line-height: 37px;
	font-weight: 800;
	text-transform: uppercase;
	white-space: nowrap;
	padding-right: 40px;
	transition: all .5s;
}

.proma-footer-element-link a{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: end;
}

.proma-footer-element-link a:hover .proma-hr{
	width: 94px;
}

.proma-footer-links{
	font-size: 14px;
	line-height: 18px;
	padding-top: 110px;
	padding-bottom: 90px;
}
/* FOOTER */

/* HOME */
.proma-home-banner{
	max-height: 100%;
	overflow: hidden;
}

.proma-home-banner-logo{
	display: inline-block;
	width: 100%;
	padding-top: 75px;
	padding-bottom: 65px;
	text-align: center;
}

.proma-home-banner-logo img{
	max-width: 255px;
}

.proma-home-banner-menu .navbar-nav{
	display: flex;
	flex-direction: row;
	justify-content: end;
	column-gap: 24px;
	position: relative;
	width: fit-content;
	margin-right: 35px;
}

.proma-home-banner-menu .navbar-nav:before{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	height: 56px;
	background-color: #D9D9D9;
	width: 100%;
	z-index: 0;
}

.proma-home-banner-menu .navbar-nav .nav-link{
	font-size: 20px;
	line-height: 24px;
	font-weight: 800;
	text-transform: uppercase;
	padding: 94px 28px 16px 28px;
	color: #FFFFFF !important;
	position: relative;
	z-index: 500;
	/*background: linear-gradient(0deg,rgba(217, 217, 217, 1) 0%, rgba(217, 217, 217, 1) 56px, transparent 56px, transparent 100%);*/
}

.proma-home-banner-menu .navbar-nav .nav-link:hover{
	background-color: #CA4F62;
}

.proma-home-banner-bottom{
	margin-top: -100px;
	padding-bottom: 100px;
	overflow: hidden;
}

.proma-home-banner-video{
	padding-right: 35px;
	padding-bottom: 35px;
	position: relative;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	min-height: 0;
	width: 100%;
}

.proma-video{
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 500;
	aspect-ratio: 16 / 9;
}

.proma-home-banner-video:before{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #CA4F62;
	height: 35%;
	width: 70%;
	z-index: 0;
}

.proma-video-sound{
	position: absolute;
	right: 55px;
	bottom: 55px;
	width: 31.49px;
	height: 30.52px;
	background-image: url(assets/images/PROMA-Sound-OFF.svg);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 600;
	background-color: transparent;
	border: none;
}

.proma-video-sound.active{
	background-image: url(assets/images/PROMA-Sound-ON.svg);
}

.proma-home-banner-title{
	font-size: 30px;
	line-height: 37px;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 10px;
	display: contents;
}

.proma-home-banner-title p{
	background-color: #FFFFFF;
	margin-bottom: 10px;
	padding: 25px 35px;
	display: inline-block;
	text-align: right;
}

.proma-home-banner-baseline{
	font-size: 30px;
	line-height: 37px;
	padding: 25px 35px 25px 55px;
	margin-bottom: 125px;
}

.proma-home-banner-baseline p{
	margin-bottom: 0;
}

.proma-home-banner-baseline strong{
	font-weight: 800;
}

.proma-breathe-container{
	position: absolute;
	width: 450px;
	height: 450px;
	bottom: -203px;
	left: 5px;
	z-index: 600;
}

.proma-breathe-circles, .proma-breathe-chevron{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.proma-breathe-chevron{
	cursor: pointer;
}

.proma-breathe-circles{
	width: 100%;
	height: 100%;
}

.proma-breathe-circles img{
	animation: breathe 2s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100%{
  	transform: scale(1.0);
  }
  50%{
  	transform: scale(0.5);
  }
}

.proma-home-agency{
	padding-top: 175px;
	padding-bottom: 150px;
	background-image: url(assets/images/PROMA-Trame-White.svg);
	background-size: 100% auto;
	background-position: center top;
	background-repeat: repeat-y;
}

.proma-home-agency-container{
	position: relative;
	padding: 128px 162px 130px 103px;
	z-index: 100;
}

.proma-home-agency-container .proma-title-medium{
	margin-bottom: 38px;
	transform: rotate(-3deg);
}

.proma-home-agency .proma-introduction, .proma-home-agency .proma-content{
	padding-left: 50px;
}

.proma-home-agency-container:before{
	content: '';
	position: absolute;
	top: 38px;
	right: 38px;
	width: 30%;
	height: 60%;
	border-top: solid 3px #CA4F62;
	border-right: solid 3px #CA4F62;
}

.proma-home-agency-links{
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	display: inline-flex;
	column-gap: 0;
	align-items: center;
	justify-content: center;
}

.proma-home-agency-links a{
	font-size: 20px;
	line-height: 30px;
	font-weight: 800;
	text-transform: uppercase;
	padding: 5px 60px;
	transform: rotate(0deg);
	transition: all .5s;
}

.proma-home-agency-links a:nth-child(odd):hover{
	transform: rotate(-4deg);
}

.proma-home-agency-links a:nth-child(even):hover{
	transform: rotate(4deg);
}

.proma-home-agency-image{
	position: relative;
}

.proma-home-agency-image-container{
	transform: rotate(4deg);
	overflow: visible;
	width: 175%;
	position: relative;
	left: -75%; /* décale vers la gauche du dépassement */
	z-index: 0;
}

.proma-home-agency-image-container img{
	mix-blend-mode: luminosity;
}

.proma-home-agency-link{
	display: flex;
	width: 127px;
	height: 127px;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 0;
	right: 4px;
	transform: translateY(50%);
}

.proma-home-agency-link img{
	transform: translateX(0px);
	transition: all .5s;
}

.proma-home-agency-link:hover img{
	transform: translateX(30px);
}

.proma-home-expertises-elements-container{
	position: relative;
}

.proma-home-expertises-title{
	padding: 25px 55px;
	font-size: 120px;
	line-height: 140px;
	letter-spacing: 6px;
	font-weight: 800;
	text-transform: uppercase;
	position: absolute;
	left: 50%;
	-webkit-text-stroke: 6px #DEDEDE;
	paint-order: stroke fill; /* Le stroke passe derrière */
	color: #FFFFFF;
	z-index: 0;
}

.proma-home-expertises-title-top{
	top: 0;
	transform: translate(-50%, -50%);
}

.proma-home-expertises-title-bottom{
	bottom: 0;
	transform: translate(-50%, 50%);
}

.proma-home-expertises{
	padding-top: 161px;
	padding-bottom: 160px;
}

.proma-home-expertises-elements{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0;
}

.proma-home-expertises-element{
	position: relative;
	z-index: 100;
	height: 655px;
	max-height: 655px;
	padding: 65px 92px;
}

.proma-home-expertises-element .proma-title-medium{
	margin-bottom: 30px;
	transform: rotate(-3deg);
	transition: all .5s;
	opacity: 1;
	z-index: 100;
	position: relative;
}

.proma-home-expertises-element .proma-introduction{
	font-weight: 800;
	margin-bottom: 20px;
	transition: all .5s;
	opacity: 1;
	z-index: 100;
	position: relative;
}

.proma-home-expertises-element .proma-content{
	transition: all .5s;
	opacity: 1;
	z-index: 100;
	position: relative;
}

.proma-introduction:has(~ .proma-home-expertises-element-link:hover),
.proma-content:has(~ .proma-home-expertises-element-link:hover){
	opacity: 0;
}

.proma-title-medium:has(~ .proma-home-expertises-element-link:hover){
	transform: rotate(0deg);
}

.proma-home-expertises-element-link{
	position: absolute;
	bottom: 33px;
	right: 33px;
	width: 69px;
	height: 69px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
}

.proma-home-expertises-element-link img{
	transform: translateX(0px);
	transition: all .5s;
}

.proma-home-expertises-element-link:hover img{
	transform: translateX(20px);
}

.proma-home-expertise-image{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 313px;
	transition: all .5s;
}

.proma-home-expertise-image:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.proma-bg-dark .proma-home-expertise-image:after{
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(31, 47, 45, 1) 100%);
}

.proma-bg-red .proma-home-expertise-image:after{
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(202, 79, 98, 1) 100%);
}

.proma-bg-gray .proma-home-expertise-image:after{
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(217, 217, 217, 1) 100%);
}

.proma-home-expertise-image img{
	object-position: center center;
	object-fit: cover;
	height: 100%;
	max-height: 100%;
	width: 100%;
	mix-blend-mode: luminosity;
}

.proma-home-expertise-image:has(~ .proma-home-expertises-element-link:hover){
	height: 100%;
}

.proma-home-partners{
	padding-top: 120px;
	padding-bottom: 90px;
}

.proma-home-partners .proma-title-normal{
	padding-bottom: 50px;
}

.proma-home-partners-elements{
	padding: 95px 115px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 20px;
}

.proma-home-partners-element{
	padding: 20px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.proma-home-partners-element img{
	max-height: 100%;
	filter: grayscale();
}
/* HOME */

/* MASONRY */
#proma-home-gallery {
  display: grid;
  gap: 4px;
  width: 100%;

  /* Mobile par défaut */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 110px);
  padding: 4px;
}

#proma-home-gallery > div {
  overflow: hidden;
}

#proma-home-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#proma-home-gallery img{
	filter: grayscale();
	transition: all .5s;
}

#proma-home-gallery img:hover{
	filter: initial;
}

/* Desktop */
@media (min-width: 768px) {
  #proma-home-gallery {
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(3, 90px);
  }
}

@media (min-width: 1330px) {
  #proma-home-gallery {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 90px);
  }
}
/* MASONRY */

/* CONTACT */
.proma-contact{
	padding-bottom: 0;
}

.proma-contact .wpcf7-spinner{
	display: none;
}

.proma-contact input, .proma-contact textarea{
	width: 100%;
	max-width: 100%;
	border: none;
	background-color: transparent;
	font-size: 15px;
	line-height: 15px;
	font-weight: 800;
	color: #1F2F2D;
	text-transform: uppercase;
	border-bottom: solid 3px;
	padding: 0px 0px 10px 0px;
	outline: none;
	resize: none;
}

.proma-contact p{
	margin-bottom: 50px;
}

.proma-contact input::placeholder, .proma-contact textarea::placeholder{
  color: #1F2F2D;
  opacity: 1; /* Firefox */
}

.proma-contact input::-ms-input-placeholder, .proma-contact textarea::-ms-input-placeholder { /* Edge 12 -18 */
  color: #1F2F2D;
}

.proma-contact input[type="submit"]{
	font-size: 26px;
	line-height: 26px;
	color: #FFFFFF;
	background-color: #CA4F62;
	padding: 10px 70px;
	width: auto;
	transition: all .5s;
	transform: rotate(0deg) translateY(50%);
	border: none;
}

.proma-contact input[type="submit"]:hover{
	background-color: #1F2F2D;
	transform: rotate(-4deg) translateY(50%);
}

.proma-contact textarea{
	line-height: 35px;
	background: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 32px, /* espace avant la ligne */
		#1F2F2D 32px,        /* début de la ligne */
		#1F2F2D 35px,        /* épaisseur de la ligne */
		transparent 33px,
		transparent 35px
	);
	border-bottom: none;
	height: 140px;
}

.proma-contact .proma-contact-submit{
	text-align: center;
}
/* CONTACT */

/* AGENCE */
.proma-agency{
	padding-top: 145px;
	padding-bottom: 205px;
	background-image: url(assets/images/PROMA-Trame-Gray.svg);
	background-size: 100% auto;
	background-position: center top;
	background-repeat: repeat-y;
	margin-top: -200px;
	position: relative;
}

.proma-agency .proma-title{
	font-size: 100px;
	line-height: 135px;
}

.proma-agency-container{
	position: relative;
	padding-top: 60px;
	z-index: 100;
}

.proma-agency-links{
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	display: inline-flex;
	column-gap: 0;
	align-items: center;
	justify-content: center;
}

.proma-agency-links a{
	font-size: 20px;
	line-height: 30px;
	font-weight : 800;
	text-transform: uppercase;
	padding: 5px 90px;
	transform: rotate(0deg);
	transition: all .5s;
}

.proma-agency-links a:nth-child(odd):hover{
	transform: rotate(-4deg);
}

.proma-agency-links a:nth-child(even):hover{
	transform: rotate(4deg);
}

.proma-team {
    padding-top: 184px;
    padding-bottom: 184px;
}

.proma-team-slider {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scroll-behavior: auto;
    will-change: scroll-position;
    padding-left: 160px;
    padding-top: 50px;
    padding-bottom: 50px;
    transition: padding-left 0.4s ease;
}
.proma-team-slider.active {
    cursor: grabbing;
}
.proma-team-slider::-webkit-scrollbar {
    display: none;
}

.proma-team-slide {
    flex: 0 0 calc(100% / 3.5);
    scroll-snap-align: start;
    user-select: none;
    padding: 0 17.5px;
    position: relative; /* contexte pour le panneau */
    /* pas de overflow:hidden ici — le panneau doit pouvoir déborder */
}

.proma-team-slide-image-wrapper {
    transition: transform .5s;
    transform: rotate(0deg);
}

.proma-team-slide-image-wrapper.active{
    transform: rotate(8deg);
}

.proma-team-slide-image-wrapper.active .proma-team-slide-name{
	background-color: transparent;
}

.proma-team-slide-image-wrapper.active .proma-team-slide-name span{
	opacity: 0;
}

.proma-team-slide-image-container {
    aspect-ratio: 1/1.2;
    position: relative;
    overflow: hidden; /* clip l'image dans son cadre, mais le wrapper lui peut déborder */
}

.proma-team-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale();
    /* plus de transform ici */
}

/* ─── Bloc nom ─── */
.proma-team-slide-name {
    position: absolute;
    top: 40px;
    bottom: 40px;
    right: 0;
    width: 125px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 1;
    transition: all .5s;
}

/* ─── Cercle décoratif ─── */
.proma-team-slide-name-dot {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 22px solid #fff;
    background: #000;
    position: absolute;
    top: 50%;
    right: 71px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 3;
    transition: all .5s;
}

.proma-team-slide-image-wrapper.active + .proma-team-slide-name-dot {
    z-index: 100;
}

/* ─── Texte vertical ─── */
.proma-team-slide-name span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-family: 'Znikomit';
    -webkit-text-stroke: 1px;
    font-size: 40px;
    line-height: 40px;
}

/* ─── Panneau info — positionné par rapport à .proma-team-slide ─── */
.proma-team-slide-panel {
    position: absolute;
    /* calé verticalement sur l'image en tenant compte du padding du slide */
    top: 40px;
    bottom: 40px;
    right: 71px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 4; /* au-dessus de tout, y compris les slides voisines */
    transform: translate(calc(100% - 71px));

    opacity: 0;
    pointer-events: none;
    transition: all .5s;

    padding: 100px 130px;
    width: 775px;
}

.proma-team-slide-panel:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #CA4F62;
	transform-origin: center center;
	transform: rotate(-6deg);
	z-index: -1;
}

.proma-team-slide-panel.visible {
    opacity: 1;
}

.proma-team-slide-panel-name {
		font-family: 'Znikomit';
		-webkit-text-stroke: 1px;
    font-size: 50px;
    line-height: 70px;
    margin: 0;
}
.proma-team-slide-panel-role {
    font-size: 20px;
    line-height: 30px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}
.proma-team-slide-panel-description {
    font-size: 15px;
    line-height: 20px;
    margin: 0;
}
/* AGENCE */

/* TALENTS */
.proma-talents{
	padding-top: 0;
}

.proma-talents-container{
	position: relative;
	margin-top: -235px;
	padding-top: 80px;
}

.proma-collabs{
	padding-top: 135px;
	padding-bottom: 135px;
	background-image: url(assets/images/PROMA-Trame-White-Big.svg);
}

.proma-collabs .proma-title-normal{
	display: inline-block;
}

.proma-collabs-elements{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 35px;
}

.proma-collabs-element{
	aspect-ratio: 1/1;
}

.proma-collabs-element img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* TALENTS */

/* MARQUES */
.proma-brands{
	padding-top: 0;
}

.proma-brands-container{
	position: relative;
	margin-top: -235px;
	padding-top: 80px;
}

.proma-brands-collab{
	height: 307px;
	display: flex;
	position: relative;
	width: fit-content;
}

.proma-brands-collab:after{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 39px;
	height: 39px;
	border-radius: 50px;
	background-color: #CA4F62;
}

.proma-brands-collabs-brand, .proma-brands-collabs-people{
	aspect-ratio: 1/1;
	max-height: 100%;
}

.proma-brands-collabs-brand img, .proma-brands-collabs-people img{
	max-height: 100% !important;
	max-width: 100% !important;
}

.proma-brands-collabs-people{
	position: relative;
}

.proma-brands-collabs-people-name{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all .5s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	line-height: 35px;
	font-weight: 800;
	text-align: center;
}

.proma-brands-collab:hover .proma-brands-collabs-people-name{
	opacity: 1;
}

.proma-brands-collabs {
	overflow: hidden;
	width: 100%;
}

.proma-brands-collabs-track{
	display: flex;
	gap: 35px;
	width: max-content;
	animation: scroll-left 30s linear infinite;
}

.proma-brands-collabs-rtl .proma-brands-collabs-track{
	animation: scroll-right 30s linear infinite;
}

.proma-brands-collabs-rtl{
	margin-top: 35px;
}

@keyframes scroll-left {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
	0%   { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}

.proma-brands-collabs:hover .proma-brands-collabs-track {
	animation-play-state: paused;
}
/* MARQUES */

/* EVENTS */
.proma-page-banner-video{
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 0;
	aspect-ratio: 16 / 9;
}

.proma-page-banner-video-sound{
	position: absolute;
	right: 55px;
	bottom: 105px;
	width: 31.49px;
	height: 30.52px;
	background-image: url(assets/images/PROMA-Sound-OFF.svg);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 600;
	background-color: transparent;
	border: none;
}

.proma-page-banner-video-sound.active{
	background-image: url(assets/images/PROMA-Sound-ON.svg);
}

.proma-formats{
	padding-top: 135px;
	padding-bottom: 135px;
	background-image: url(assets/images/PROMA-Footer-Trame-Gray.svg);
}

.proma-formats .proma-title-normal{
	display: inline-block;
}

.proma-formats-elements{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 115px;
}

.proma-formats-element-title{
	font-family: 'Znikomit';
	-webkit-text-stroke: 1px;
	font-size: 35px;
	line-height: 40px;
	padding: 24.5px;
	text-align: center;
}

.proma-formats-element-content{
	position: relative;
	aspect-ratio: 1/1.1;
	padding: 25px 40px;
	text-align: center;
	font-size: 16px;
	line-height: 21px;
}

.proma-formats-element-text{
	position: relative;
	z-index: 300;
}

.proma-formats-element-image{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	max-height: 100%;
	mix-blend-mode: luminosity;
	overflow: hidden;
}

.proma-formats-element-image:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.proma-bg-dark .proma-formats-element-image:after{
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(31, 47, 45, 1) 100%);
}

.proma-bg-red .proma-formats-element-image:after{
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(202, 79, 98, 1) 100%);
}

.proma-bg-gray .proma-formats-element-image:after{
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(217, 217, 217, 1) 100%);
}

.proma-quotation{
	padding-top: 115px;
	padding-bottom: 115px;
}
/* EVENTS */