@charset "utf-8";
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::    STUDIO PUBLINOVES     :::::::::::::::::: */
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */





/* ========================================================= */
/* ==================== HAUT-PAGE hero ========================== */
/* ========================================================= */


.pbl-hero {
position: relative;
width: 100%;
overflow: hidden;
min-height: 650px;
}


.pbl-hero-image-wrapper {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}


.pbl-hero-image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: left center;
transform: scale(1);
animation: pbl-hero-zoom 7s ease-out forwards;
}


@media screen and (max-width: 1100px) {
.pbl-hero-image {
object-fit: cover;
object-position: left center;
}
}

@media screen and (max-width: 900px) {
.pbl-hero {
min-height: 550px;
}
}

@media screen and (max-width: 700px) {
.pbl-hero {
min-height: 500px;
}
}

@keyframes pbl-hero-zoom {
0% {
transform: scale(1.01);
}

100% {
transform: scale(1.04);
}
}

/* -------------------------------------  PBL-HERO - Texte  */

.pbl-hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 5;
  padding-top: 120px; 
}
@media screen and (max-width: 1100px) { .pbl-hero-text {padding-top: 90px;}}
@media screen and (max-width: 900px) { .pbl-hero-text {padding-top: 220px;width: 85%;margin-left: auto; margin-right: auto;}}

@media screen and (max-width: 768px) { .pbl-hero-text {transform: translateY(-55px);}}


.pbl-hero-text-inner {
  font-family: "Sofia Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.2;
}

.pbl-hero-title {  margin: 0;}

.pbl-hero-line-1 {
  display: block;
  font-size: 50px;
  font-weight: 900;
  color: #ffffff;
  -webkit-text-stroke: 1px #0b1c3f;
  margin-bottom: 0.15em;   /* interligne réduit */
  margin-top: -80px !important;
  text-transform: uppercase;
}

.pbl-hero-line-2 {
  display: block;
  font-size: 35px;
  font-weight: 700;
  color: #0b1c3f;
}

.pbl-hero-line-3 {
  display: inline-block;
  font-size: 34px;
  font-weight: 700;
  color: #0b1c3f;
}

.pbl-hero-line-4 {
	margin-top: 20px;
  display: block;
  font-size: 24px;
  font-weight: 300; /* Sofia Pro Light */
  font-family: "Sofia Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0b1c3f;
  opacity: 0;
  transform: translateY(10px);
  animation: pbl-line4-fade 1.2s ease-out 1.9s forwards;
}

@media screen and (max-width: 768px) {
  .pbl-hero-line-4 {
    padding-left: 55px;
    padding-right: 55px;
	font-size: 22px;
  }
}

@keyframes pbl-line4-fade {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.pbl-hero-dot {
  display: inline-block;
  font-size: 1.7em;
  line-height: 0.8;
  margin-left: 0.1em;
  color: #f28b42;
}

/* -------------------------------------  PBL-HERO - Texte - Anim point  */

.pbl-hero-dot {
  display: inline-block;
  font-size: 1.7em;
  line-height: 0.8;
  margin-left: 0.1em;
  color: #f28b42;

  transform-origin: center bottom;
  transform: translateY(0) scale(1);
  opacity: 1;

  /* Chute + rebond */
  animation: pbl-dot-fall-bounce 1.9s ease-out 0.7s forwards;
}

@keyframes pbl-dot-fall-bounce {

  0% {    transform: translateY(-260px) scale(0.8);  opacity: 0;}
  20% {    transform: translateY(-200px) scale(0.85); opacity: 0.4;}
  40% {    transform: translateY(-100px) scale(0.9); opacity: 1;}
  60% {    transform: translateY(0) scale(1); opacity: 1;}


  75% {    transform: translateY(20px) scale(0.95);  }
  88% { transform: translateY(-12px) scale(1.06);   }
  95% {   transform: translateY(5px) scale(0.99);   }

  /* FIN : le point RESTE en place, bien visible */
  100% {    transform: translateY(0) scale(1); opacity: 1; }
}


/*---------------------------------------------*/
/*----------- Responsive ----------------------*/
/*---------------------------------------------*/

@media screen and (max-width: 768px) {
  .pbl-hero-line-1 {
    font-size: 32px;
  }

  .pbl-hero-line-2,
  .pbl-hero-line-3 {
    font-size: 22px;
  }

  .pbl-hero-underline {
    width: 180px;
    height: 60px;
    bottom: -1.6em;
  }
	
	
}@media screen and (max-width: 520px) {
  .pbl-hero-dot {
    animation: none !important; 
	 transform: none; 
    opacity: 1 !important; 
  }
}

/*---------------------------------------------*/
/*------------ BANDEAU LOGOS index ------------*/
/*---------------------------------------------*/


.pbl-client-slider {
  width: 100%;
  overflow: hidden;
 background-color: var(--theme-bleu-marine-fonce);
  padding: 20px 0;
}

.pbl-client-track {
  display: flex;
  gap: 60px;
  animation: slide-left 32s linear infinite 0.2s;
}

@media screen and (max-width: 520px) {
  .pbl-client-track {
     animation: slide-left 13s linear infinite;
  }
}


.pbl-client-track img {
  height: 120px; 
  width: auto;
  transition: opacity 0.3s ease;
}

.pbl-client-track img:hover {
  opacity: 1;
}

 /*Animation droite → gauche */
@keyframes slide-left {
  0% {
    transform: translateX(100vw);    }
  100% {    transform: translateX(calc(-100% - 100vw));   }
}

/*---------------------------------------------*/
/*------------ INDEX PRESTATIONS ------------*/
/*---------------------------------------------*/

.page-index-prestation {
--couleur-prestation: var(--theme-beige);

display: grid;
grid-template-columns: 50% 50%;
width: 100%;
min-height: 560px;
background: #ffffff;
margin-bottom: 2px;
}
.page-index-prestation:last-of-type {
margin-bottom: 0;
}

@media screen and (max-width: 1100px) {
.page-index-prestation {
min-height: 520px;
}
}

@media screen and (max-width: 900px) {
.page-index-prestation {
grid-template-columns: 1fr;
min-height: auto;
}
}

@media screen and (max-width: 700px) {
.page-index-prestation {
grid-template-columns: 1fr;
}
}

/*  -------------------------------------  INDEX - Prestation - Visuel  */

.page-index-prestation-visuel {
position: relative;
width: 100%;
min-height: 560px;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);

}

.page-index-prestation-visuel-biais-haut {
clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
margin-top: -22px;
}

.page-index-prestation-visuel-fin {
clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
margin-top: -22px;
}

@media screen and (max-width: 1100px) {
.page-index-prestation-visuel {
min-height: 520px;
}
}

@media screen and (max-width: 900px) {
.page-index-prestation-visuel {
min-height: 420px;
}
}

@media screen and (max-width: 700px) {
.page-index-prestation-visuel {
min-height: 300px;
}
}

@media screen and (max-width: 900px) {

.page-index-prestation-visuel,
.page-index-prestation-visuel-biais-haut,
.page-index-prestation-visuel-fin {
clip-path: none;
margin-top: 0;
}

.page-index-prestation {
margin-bottom: 0;
}

}



/*  -------------------------------------  INDEX - Prestation - Image  */

.page-index-prestation-image {
display: block;
width: 100%;
height: 100%;
}

.page-index-prestation-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

@media screen and (max-width: 900px) {
.page-index-prestation-image img {
height: 420px;
}
}

@media screen and (max-width: 700px) {
.page-index-prestation-image img {
height: 300px;
}
}

/*  -------------------------------------  INDEX - Prestation - Contenu  */

.page-index-prestation-contenu {
display: flex;
flex-direction: column;
justify-content: center;
width: 78%;
padding: 70px 0 70px 9%;
box-sizing: border-box;
color: #5d514b;
}

@media screen and (max-width: 1100px) {
.page-index-prestation-contenu {
width: 84%;
padding: 60px 0 60px 8%;
}
}

@media screen and (max-width: 900px) {
.page-index-prestation-contenu {
width: 86%;
padding: 55px 7%;
}
}

@media screen and (max-width: 700px) {
.page-index-prestation-contenu {
width: 100%;
padding: 45px 20px;
}
}

/*  -------------------------------------  INDEX - Prestation - Entête  */

.page-index-prestation-entete {
display: flex;
align-items: center;
gap: 25px;
margin-bottom: 28px;
}

.page-index-prestation-entete h2 {
margin: 0;
font-size: 36px;
font-weight: 400;
line-height: 1.2;
text-transform: uppercase;
color: var(--couleur-prestation);
}

@media screen and (max-width: 1100px) {
.page-index-prestation-entete h2 {
font-size: 35px;
}
}

@media screen and (max-width: 900px) {
.page-index-prestation-entete h2 {
font-size: 31px;
}
}

@media screen and (max-width: 700px) {
.page-index-prestation-entete {
gap: 16px;
}

.page-index-prestation-entete h2 {
font-size: 27px;
}
}

/*  -------------------------------------  INDEX - Prestation - Icône  */

.page-index-prestation-icone {
display: block;
width: 65px;
height: auto;
}

@media screen and (max-width: 700px) {
.page-index-prestation-icone {
width: 55px;
}
}

.page-index-prestation-icone-plume {
width: 52px;
}

/*  -------------------------------------  INDEX - Prestation - Texte  */

.page-index-prestation-texte {
margin: 0 0 28px 0;
font-size: 19px;
font-style: italic;
font-weight: 300;
line-height: 1.6;
color: var(--typo-anthracite);
}

.page-index-prestation-texte a {
color: inherit;
text-decoration: underline;
}

@media screen and (max-width: 1100px) {
.page-index-prestation-texte {
font-size: 19px;
}
}

@media screen and (max-width: 900px) {
.page-index-prestation-texte {
font-size: 18px;
}
}

@media screen and (max-width: 700px) {
.page-index-prestation-texte {
font-size: 17px;
}
}

/*  -------------------------------------  INDEX - Prestation - Liste  */

.page-index-prestation-liste {
margin: 0 0 42px 0;
padding: 0;
list-style: none;
font-size: 19px;
line-height: 1.7;
font-weight: 300;
color: var(--typo-anthracite);
}

.page-index-prestation-liste li::before {
content: "• ";
margin-right: 4px;
}

@media screen and (max-width: 700px) {
.page-index-prestation-liste {
font-size: 16px;
}
}

.page-index-prestation-liste a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}

.page-index-prestation-liste a:hover {
color: var(--theme-bronze);
}

/*---------------------------------------------*/
/*------------ INDEX PRESENTATION ------------*/
/*---------------------------------------------*/



.liste-trois-boutons {
display: flex;
justify-content: center;
gap: 18px;
margin: 45px 0 0 0;
padding: 0;
list-style: none;width: 100%;
box-sizing: border-box;
padding: 0 8px;
}

.liste-trois-boutons a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 9px 26px;
border: 1px solid var(--theme-bleu-marine);
background: transparent;
font-size: 17px;
font-style: italic;
font-weight: 400;
text-decoration: none;
color: var(--theme-bleu-marine);
transition: all 0.3s ease;
}

.liste-trois-boutons a:hover {
background: var(--theme-bleu-marine);
color: #ffffff;
}

.liste-trois-boutons-contact {
border-color: var(--theme-bleu-marine) !important;
background: var(--theme-bleu-marine) !important;
color: #ffffff !important;
}

.liste-trois-boutons-contact:hover {
background: transparent !important;
color: var(--theme-bleu-marine) !important;
}

@media screen and (max-width: 700px) {

.liste-trois-boutons {
gap: 12px;
padding: 0 10px;
}

.liste-trois-boutons li {
flex: 1;
	display: flex;
}

.liste-trois-boutons a {

width: 100%;
min-width: 0;
min-height: 58px;
padding: 10px 12px;
box-sizing: border-box;
text-align: center;
}
}

.hauteur-identique-2 {
	display:block;
	min-height:270px;
	margin-bottom:40px;
}

.hauteur-identique-2 ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.hauteur-identique-2 li{
  line-height: 1.4; 
  margin-bottom: 0.65em;
}