/* import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* Meta - Project description */
.works>.uk-grid>div>.uk-panel>.el-meta {
  color: #000000b1 !important;
  font-family: Urbanist;
  font-size: 1em;
}

/* Remove random space between pictures */
.uk-container> :last-child {
  margin-bottom: -1px;
}

/**** WORK PAGE ****/

/* Back button */
.bt-back {
  position: absolute;
  left: -40px;
  top: 40px;
}

a.works-button>svg:hover #icon {
  fill: #fff;
  stroke-width: 2;
}

a.works-button>svg:hover #bg {
  fill: #000;
  stroke-width: 2;
}

.bt-back>a svg:hover #icon {
  fill: #fff;
  stroke-width: 2;
}

.bt-back>a svg:hover #bg {
  fill: #000;
  stroke-width: 2;
}

/* Titles larger than containers */
.large-element {
  min-height: 60px;
  padding: 10px 2000px;
  margin: 0px -2000px;
  border-bottom: 1px solid #e5e9ed;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.landing-p {
  line-height: 30px;
}

.title-row {
  position: relative;
  z-index: 3 !important;
}

@media (max-width: 960px) {
  .large-element {
    min-height: 40px;
    padding: 10px 400px;
    margin: 0px -400px;
    border-bottom: 1px solid #e5e9ed;
  }
}

@media only screen and (max-width: 960px) and (min-width: 640px) {
  .landing-title-margin {
    margin-top: -100px;
  }
}

/* Mobile background video cover */
#background-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

/** ********** **/
/** Work Pages **/
/** ********** **/

/* Slide cache */

/* Section Desktop bottom paddig */
#desk-work-page {
  padding-bottom: 40px;
}

/***************************************/
/************** FACEBOOK  **************/
/***************************************/

/* Map */

.class {
  background-color: rgb(180, 248, 255);
}

.leaflet-marker-pane img {
  width: 50px !important;
  height: 82px !important;
}

/* Hover team */

.uk-marker {
  background: #0d81ff;
  color: #e1ff19;
}

/* UI design helper */
.orange-border {
  border: 1px solid orange;
}

.blue-border {
  border: 1px solid rgb(0, 115, 255);
}

.green-border {
  border: 1px solid rgb(0, 255, 98);
}

.pink-border {
  border: 1px solid pink;
}

/* Blog Style */


.img-title {
  margin: 0 10px 8px 0;
}

@media (max-width: 767px) {
  .last-image {
    width: 165px;
    height: auto;
  }
}

/* Fond texte avec BG */
.txt-green-bg {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.8em;
  font-weight: 500;
  color: #66B65D;
  background-color: #66B65D0D;
  padding: 30px 20px 30px 40px;
  border-left: 4px solid #66B65D;
}

.txt-green-bg-simple {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.8em;
  font-weight: 500;
  color: #66B65D;
  background-color: #66B65D0D;
  padding: 30px 20px 30px 40px;
  border-left: 4px solid #66B65D;
}

.txt-blue-bg {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.8em;
  font-weight: 500;
  color: #415d96;
  background-color: #66B65D0D;
  padding: 30px 20px 30px 40px;
  border-left: 4px solid #415d96;
}

.txt-gray-subtitle {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 1em;
  color: #666666;
}

/* Fond texte avec BG et border radius */
.txt-green-bg-rd {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.4em;
  font-weight: 500;
  color: #66B65D;
  background-color: #66B65D0D;
  padding: 30px 20px 30px 40px;
  border-left: 4px solid #66B65D;
  border-radius: 10px;
}


/* Blog Titles Variants */
.blog-title-white {
  font-family: 'Playfair Display', serif;
  font-size: 2em;
  font-weight: 600;
  color: #FFFFFF;
}

.blog-title-green {
  font-family: 'Playfair Display', serif;
  font-size: 2em;
  font-weight: 600;
  color: #66B65D;
}

.blog-title-blue {
  font-family: 'Playfair Display', serif;
  font-size: 2em;
  font-weight: 600;
  color: #0095C2;
}

.blog-title-orange {
  font-family: 'Playfair Display', serif;
  font-size: 2em;
  font-weight: 600;
  color: #F6AB51;
}

.blog-title-red {
  font-family: 'Playfair Display', serif;
  font-size: 2em;
  font-weight: 600;
  color: #EB4C54;
}

/* Row background */
.row-gray {
  background-color: #FAFAFA;
  border-radius: 10px;
  padding: 50px 30px 50px 10px;
}

.row-blue {
  background-color: #0095C2 !important;
  border-radius: 0 !important;
  padding: 15px 0px 15px 0px !important;
}

.row-red {
  background-color: #EB4C54 !important;
  border-radius: 0 !important;
  padding: 15px 0px 15px 0px !important;
}

.row-green {
  background-color: #F6FFF7 !important;
  border-radius: 0 !important;
  padding: 30px 20px 30px 40px !important;
}

.row-dark-gray {
  background-color: #eaeaea !important;
  border-radius: 0 !important;
  padding: 30px 20px 60px 0px !important;
}

.row-orange {
  background-color: rgba(246, 171, 81, 0.2) !important;
  border: 2px solid #F6AB51 !important;
  border-radius: 10px !important;
  padding: 40px 20px 40px 0px !important;

}

.row-gradient {
  background: #0095C2;
  background: linear-gradient(90deg, rgba(0, 149, 194, 0.1) 0%, rgba(102, 182, 93, 0.1) 100%);
  border-radius: 10px;
  padding: 45px 20px 45px 20px;

}

.row-gradient-red {
  background: rgba(235, 76, 84, 0.05);
  background: linear-gradient(90deg, rgba(235, 76, 84, 0.05) 0%, rgba(246, 171, 81, 0.05) 100%);
  border-radius: 10px;
  padding: 32px 20px 33px 20px;
}

.row-gradient .uk-text-center {
  font-family: 'Playfair Display', serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 3em !important;
  color: #0095C2 !important;
}

/* Facebook Integration */

.facebook-iframe iframe {
  /* Rendre responsive */
  width: 100%;
  height: auto;
  aspect-ratio: 267 / 476;

  /* GESTION DU CENTRAGE */
  display: block;
  /* Comportement de bloc requis pour le margin auto */
  margin: 0 auto;
  /* Centre horizontalement le bloc */
  max-width: 300px;
  /* IMPORTANT : Limite la largeur pour voir l'effet centré */
}