:root {
  --text-nav-color: #6D6D6D;
  --bg-color: #000000;
  --text-nav-color-hover: #FFFFFF;
  --bs-btn-primary: #C81EFA;
  --bs-btn-border-primary: #C81EFA;
  --separator-color-fill: #C81EFA;
}

@font-face {
  font-family: 'Lexend Deca';
  src: url('/assets/fonts/Lexend_Deca/static/LexendDeca-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Lexend Deca Light';
  src: url('/assets/fonts/Lexend_Deca/static/LexendDeca-Light.ttf') format('truetype');
  font-style: normal;
}

@font-face {
  font-family: 'Lexend Deca Extra Light';
  src: url('/assets/fonts/Lexend_Deca/static/LexendDeca-ExtraLight.ttf') format('truetype');
  font-style: normal;
}

@font-face {
  font-family: 'Lexend Deca Bold';
  src: url('/assets/fonts/Lexend_Deca/static/LexendDeca-Bold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Newake';
  src: url('/assets/fonts/Font_Pagecran_Newake/Newake-Font-Regular.eot');
  src: url('/assets/fonts/Font_Pagecran_Newake/Newake-Font-Regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('/assets/fonts/Font_Pagecran_Newake/Newake-Font-Regular.woff2') format('woff2'),
    /* Super modern browsers */
    url('/assets/fonts/Font_Pagecran_Newake/Newake-Font-Regular.woff') format('woff'),
    /* Modern browsers */
    url('/assets/fonts/Font_Pagecran_Newake/Newake-Font-Regular.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('/assets/fonts/Font_Pagecran_Newake/Newake-Font-Regular.otf') format('opentype');
  /* Optional */
  font-weight: 400;
  font-style: normal;
}

body,
html {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  font-family: 'Lexend Deca', sans-serif;
  color: #FFFFFF;
  background: #000;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;

  background:
    radial-gradient(
      1200px 1200px at -200px -200px,
      rgba(221, 225, 251, 0.1) 0%,
      rgba(100, 122, 254, 0.1) 20%,
      rgba(104, 125, 244, 0.1) 10%,
      rgba(97, 121, 254, 0.1) 60%,
      transparent 100%
    );

  mix-blend-mode: screen;
}

/*
html::before {
  content: "";
  position: fixed;
  inset: 0;

  background:
    url('/assets/video/home/Gradient_SitePagecran.png') no-repeat top left / cover,
    #000000;

  z-index: -1;
  pointer-events: none;
}*/

label {
  font-family: 'Lexend Deca', sans-serif;
}

/*nav.navbar {
  background: linear-gradient(to right, #243b55, #000000);
}*/
.font-newake {
  font-family: 'Newake', sans-serif;
  letter-spacing: 0.08em;
}

.font-lexend-light {
  font-family: 'Lexend Deca Light', sans-serif;
}


.size-64 {
  font-size: 64px;
}

.size-55 {
  font-size: 55px;
}

.size-50 {
  font-size: 50px;
}

.size-45 {
  font-size: 45px;
}

.size-40 {
  font-size: 40px;
}

.size-32 {
  font-size: 32px;
}

.size-24 {
  font-size: 24px;
}

.size-20 {
  font-size: 20px;
}

.size-16 {
  font-size: 16px;
}

.size-15 {
  font-size: 15px;
}

.size-12 {
  font-size: 12px;
}
.size-28 {
  font-size: 28px;
}
.size-26 {
  font-size: 26px;
}


.line-height-100 {
  line-height: 100%;
}

.line-height-120 {
  line-height: 120%;
}

.letter-space-1 {
  letter-spacing: 1px;
}


.transform-upercase {
  text-transform: uppercase;
}


.navbar-nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

a.nav-link {
  font-size: 16px;
  text-transform: uppercase;
  color: var(--text-nav-color);
}

a.nav-link:hover {
  color: var(--text-nav-color-hover);
}

a.active {
  color: var(--text-nav-color-hover);
}
/*
.video-container { width: 100%; overflow: hidden; margin: 0; padding: 0; }
.video-container video { display: block; width: 100%; height: auto; }
.video-container .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; }
*/

/* ============================================
   FIX UNIVERSEL : Conteneur vidéo + logo
   Compatible Firefox, Chrome, Edge, Safari
   ============================================ */
.video-container_showreel {
  width: 100%;
  height: clamp(400px, 78vh, 840px);
  position: relative;
  overflow: hidden;
}

.video-container_showreel video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}

.video-container_showreel .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  
  width: clamp(180px, 25vw, 550px);
  height: auto;
  z-index: 10;
  pointer-events: none;
  
  /* Force le rendu GPU pour éviter les décalages */
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}
/* ============================================ */
  

a.btn,
button.btn {
  border-radius: 30px;
  background-color: var(--bs-btn-primary);
  border-color: var(--bs-btn-border-primary);
  text-transform: uppercase;
  padding: 10px 20px 10px 20px;
}

/*.section {
    margin-top: 75px;
  }*/
.section__content_text {
  margin-top: 3rem;
}

.section__1 .section__content_text,
.pe_kIL09 {
  width: 70%;
  margin: auto;
  margin-top: 3rem;
}

.card-img-bottom {
  height: 20rem;
  object-fit: cover;
  width: 100%;
}

.card_home.card {
  background-color: #000000;
  border-color: #FFFFFF;
  color: #FFFFFF;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.section__card_home {
  margin-top: 9rem;
}

.section__project_words span,
.section__project_words button {
  text-transform: uppercase;
}

.dot {
  width: 6px;
  height: 6px;
  background-color: #C81EFA;
  border-radius: 50%;
  display: inline-block;
}

.section__team {
  background-color: #000000;
  padding: 40px 0;
  color: white;
  margin-top: 9rem;
}

.team-wrapper {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 40px 30px 30px;
  margin: 0 auto;
  max-width: 1200px;
  overflow: visible;
  /*  Permet le dpassement */
  background-color: #000000;
}

.team-title {
  margin-top: -20px;
}

.team-content {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  height: 20rem;
}

.team-left {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 20px;
  height: 20rem;
}

.team-description {
  font-size: 16px;
  line-height: 1.6;
}

.btn-team {
  width: fit-content;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-container img {
  max-height: 50px;
  /* limite la hauteur pour uniformiser */
  object-fit: contain;
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*.section__video, .section__see_show, .section__footer, .section__1 {
  margin-top: 15rem;
}*/
/*.section__1 {
  margin-top: 15rem;
}*/

.section__see_show {
  margin-top: 0rem;
}

.section__footer {
  margin-top: 7rem;
  margin-bottom: 15rem;
}

.section__chevron {
  margin-top: 4rem;
}

.section.section__content_caption {
  margin-top: 5rem;
}

.section__1 .section__content_caption {
  margin-top: 7rem;
}

.section__project_words,
.section__see_projects {
  margin-top: 4rem;
}

.section__logos {
  margin-top: 9rem;
}

.section__2,
.section__3,
.section__4 {
  margin-top: 5rem;
}

.section__2 {
  margin-bottom: 6rem;
}

/** PROJETS **/

.grid {
  display: flex;
  padding: 2em;
}

.card_project {
  width: 400px;
  height: auto;
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 0;
}

.card_project.card {
  /*margin: 0.5rem;*/
}

.card_project img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.pe_kdh6s {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  color: white;
  padding: 0.3rem 0.6rem;
}

p.pe_kdj85 {
  background: none;
  border: none;
  color: #FFF;
  text-transform: uppercase;
  margin-bottom: 0;
  margin-right: 7px;
  margin-left: 7px;
  line-height: 1.8rem;
}

.pe_bsE37 {
  font-size: 13px;
}


/*
.wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start; 
  padding: 2rem;
}


.section___mosaic {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: calc((18rem * 4) + (0.5rem * 2 * 4));
}


.card_project.card {
  width: 18rem;
  height: 18rem;
  overflow: hidden;
  position: relative;
  margin: 0.5rem; 
  border: none;
  border-radius: 0;
}
.card_project.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.element-item {
  margin: 0.5rem; 
}
.pe_ieH6h {
  text-transform: uppercase;
}
.pe_bsE37 {
font-size: 13px;
  text-transform: uppercase;
}
.pe_kdj85 {
  background: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;
}
    */
/** ./PROJETS **/


/*
.card_team.card {
  width: calc(20% - 1rem); 
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background-color: #000000;
}

.card_team.card img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  display: block;
}

.card_team.card-info {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1rem 0.5rem;
  background: linear-gradient(to top, #8A00B3, #0070B5, transparent);
  color: white;
  text-align: center;
}

.card_team.card-info .name {
  font-weight: bold;
  margin: 0;
}

.card_team.card-info .role {
  margin: 0;
  font-size: 0.9rem;
}
  */

/* Responsive */
@media (max-width: 1200px) {
  .card_team.card {
    width: calc(25% - 1rem);
  }
}

@media (max-width: 992px) {
  .card_team.card {
    width: calc(33.33% - 1rem);
  }
}

@media (max-width: 768px) {
  .card_team.card {
    width: calc(50% - 1rem);
  }
}

@media (max-width: 480px) {
  .card_team.card {
    width: 100%;
  }
}

.btn-outline-primary {
  border-color: #FFFFFF;
  border-radius: 30px;
  padding: 10px 20px 10px 20px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.section__content_category {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.section__2.temp_project {
  width: 70%;
  margin: auto;
}

.section__cover__img img {
  display: block;
  /* enlve l'espace blanc en dessous de l'image */
  width: 100%;
  /* prend toute la largeur du parent */
  height: auto;
  /* garde les proportions originales */
  object-fit: cover;
  /* utile si tu fixes une hauteur, sinon optionnel */
}

.section__mt-4 {
  margin-top: 1.1rem;
}

.section_img__text {
  display: flex;
  flex-direction: row;
  align-items: center;
  /*padding: 0 40px;*/
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  /* facultatif mais utile */
}

.section_img__text img {
  width: 30%;
  height: auto;
}

.section_img__text>div {
  flex: 1;
}

@media screen and (max-width: 768px) {
  .section_img__text {
    flex-direction: column;
    text-align: center;
    padding: 0 20px;
  }

  .section_img__text img {
    width: 100%;
    max-width: 300px;
  }

  .section_img__text>div {
    width: 100%;
  }
}

.social_network {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 2rem;
}

.social_network img {
  width: 20px;
  /* ou autre taille souhaite */
  height: auto;
}

.pe_ldk84 {
  margin-bottom: 2rem;
}

.contact_us {
  margin-bottom: 2rem;
}

.section__text {
  width: 60%;
}

.section__text_center {
  width: 60%;
  margin: auto;
}

.section__img_left_right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2%;
  /* optionnel, pour un petit espace entre les images */
}

.section__img_left_right img,
.section__img_left_right video {
  width: 49%;
  height: auto;
}

/* Responsive pour les petits crans */
@media (max-width: 768px) {
  .section__img_left_right {
    flex-direction: column;
    align-items: center;
  }

  .section__img_left_right img {
    width: 100%;
    margin-bottom: 1rem;
    /* petit espace entre les images */
  }
}

.section_text__img {
  display: flex;
  align-items: center;
  /*padding: 0 40px;*/
  justify-content: space-between;
  /*gap: 20px;
  flex-wrap: wrap; /* facultatif mais utile */
}



@media screen and (max-width: 768px) {
  .section_text__img {
    flex-direction: column;
    text-align: center;
    padding: 0 20px;
  }

  .section_text__img img {
    width: 100%;
    max-width: 300px;
  }

  .section_text__img>div {
    width: 100%;
  }
}

.section__img_left_right_no_pad {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
}

.section__img_left_right_no_pad img {
  width: 50%;
  padding: 0;
  margin: 0;
  display: block;
}

@media (max-width: 768px) {
  .section__img_left_right_no_pad {
    flex-direction: column;
  }

  .section__img_left_right_no_pad img {
    width: 100%;
    margin: 0;
  }
}



/** ANIMATION LOGO **/
#logo {
  transition: transform 0.2s ease-out;
  /* transition plus douce */
  will-change: transform;
}

/* Logo toujours visible */
.navbar-brand {
  /*position: fixed;*/
  top: 10px;
  left: 10px;
  z-index: 999;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: #FFFFFF;
}

/*.section__content_caption > p {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}*/

li.nav-item {
  margin-right: 10px;
}

.section_one_img img {
  width: 100%;
}


.element-item.hidden {
  display: none;
}

.grid {
  margin: 0 auto;
}

.caption_card {
  letter-spacing: 0.1em;
  font-size: 20px;
}

.title-card {
  text-transform: uppercase;
}

.filter-card {
  font-size: 15px;
  text-transform: uppercase;
}

.section__mt_3_int {
  margin-top: 2rem;
}



/** TEAM CARDS **/
.section__team {
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 95%;
  margin: auto;
  position: relative;
  padding-bottom: 25px;
  margin-top: 9rem;
}


.swiper.team_home {
  position: relative;
  /*margin-top: -75px;*/
}

.team_profile {
  position: relative;
  z-index: 1;
}

.gradient_blue {
  height: 12rem;
  position: relative;
  margin-top: -192px;
  background: linear-gradient(to bottom, #0070B5, #8A00B3);
}

.swiper-slide>div:first-child {
  display: flex;
  flex-direction: column;
  /* empile image et texte */
  align-items: center;
  /* centre horizontalement */
  text-align: center;
  /* centre le texte */
  position: relative;
}

.info {
  position: absolute;
  bottom: 0px;
  line-height: 5px;
}

/** ./TEAM CARDS **/

/** TEAM **/
.section__team_team {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* cartes alignes  gauche */
  gap: 1rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 5rem auto;
  /* centre le bloc global */
}

.team-card {
  flex: 0 0 calc(25% - 1rem);
  /* 4 colonnes */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centre image et texte dans la carte */
  text-align: center;
  position: relative;
}

@media (max-width: 1200px) {
  .team-card {
    flex: 0 0 calc(33.33% - 1rem);
  }
}

@media (max-width: 992px) {
  .team-card {
    flex: 0 0 calc(50% - 1rem);
  }
}

@media (max-width: 576px) {
  .team-card {
    flex: 0 0 100%;
  }
}

.team_team_profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centre l'image et le texte */
  text-align: center;
  z-index: 1;
}

.team_team_gradient_blue {
  height: 12rem;
  position: relative;
  margin-top: -192px;
  background: linear-gradient(to bottom, #3a02c8, #bd1ef6);
  width: 100%;
}

.team_team_gradient_jdlm {
  height: 12rem;
  position: relative;
  margin-top: -192px;
  background: linear-gradient(to bottom, #3903c8, #1f78f7);
  width: 100%;
}

.team_team_gradient_green {
  height: 12rem;
  position: relative;
  margin-top: -192px;
  background: linear-gradient(to bottom, #02c7a6, #5023f7);
  width: 100%;
}

.team_team_gradient_jdlhd {
  height: 12rem;
  position: relative;
  margin-top: -192px;
  background: linear-gradient(to bottom, #3903c8, #961df7);
  width: 100%;
}

/** ./TEAM **/
.tkt-deca-xtraLight {
  font-family: 'Lexend Deca Extra Light', sans-serif;
}

/* Conteneur parent : centr et avec une largeur maximale */
.section__mosaic_container {
  width: 100%;
  max-width: 1300px;
  /* Ajustez selon vos besoins */
  margin: 0 auto;
  /* Centre le conteneur */
  padding: 0 5px;
  box-sizing: border-box;
}

/* Grille des cartes : alignes  gauche */
.section___mosaic {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* Aligne les cartes  gauche */
  gap: 5px;
  /* Espacement entre les cartes */
}

.section__keyWords {
  margin-top: 3rem;
  margin-bottom: 5rem;
}

.section__content_caption p.PE_regThsl {
  margin-bottom: 5px;
  line-height: 100%;
  font-size: 40px;
  text-align: center;
  font-family: 'Lexend Deca Extra Light', sans-serif;
  text-transform: uppercase;
}

.section__content_subcaption p.PE_yfhUjdu {
  text-align: center;
  font-size: 55px;
  line-height: 120%;
  font-family: 'Newake', sans-serif;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}

.section_text__img img.udliK8jh {
  width: 60%;
}

.section_text__img img.tehJ9ol {
  width: 48%;
}

.section_text__img img.tebNku {
  width: 80%;
}

.section__img_left_right.three_img img {
  width: 32%;
}

.section_text__img img.PE_regThsl {
  width: 100%;
  margin-top: 30px;
}

.gdkG8J7 {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 2rem;
}

.gdkG8J6 {
  padding: 2rem;
  background: linear-gradient(to bottom, #4d0dd3, #961df8);
}

.irkJ8_contact {
  margin-top: 5rem;
}

.etgUj8 {
  line-height: 5px;
}

.social_network_contact a {
  padding-right: 8px
}

.social_network_contact img {
  width: 20px;
  /* ou autre taille souhaite */
  height: auto;
}

/** === POSTER VIDEO === **/
.video-container {
  position: relative;
  /*display: inline-block;*/
  cursor: pointer;
}

.video-thumbnail {
  display: block;
  width: 100%;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.play-button::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 22px;
  border-style: solid;
  border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent white;
}

.section_pkfj8yd {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.container_PE {
  margin-left: 100px;
  margin-right: 100px;
}


.sec_ldm9ik p {
  max-width: 1500px;
  /*  limite la largeur du texte */
  word-wrap: break-word;
  /*font-size: clamp(1rem, 2vw, 3rem);*/
}

/* Option : centrer verticalement sur grand cran */
@media (min-width: 992px) {
  .section_text__img .col-md-6:first-child {
    display: flex;
    align-items: center;
  }
}

.section_pkfj8yd .col-md-6:last-child img {
  width: 100%;
  height: 100%;
  /* prend toute la hauteur de la colonne */
  object-fit: cover;
  /* remplissage complet, recadre si besoin */
}

.ufkKi9 {
  padding-left: 5rem;
  padding-right: 5rem;
}

.ydefk8 p {
  padding-left: 5rem;
  padding-right: 5rem;
  /*font-size: clamp(1rem, 2vw, 3rem);*/
}

.jdn8jdk {
  padding-left: 5rem;
  padding-right: 5rem;
}


/** IMAGE GAUCHE + VIDEO DROITE **/
/*.section_pkfj8yd.row {
    margin: 0;
}

.video-wrapper,
.video-container {
    width: 100%;
    height: 100%;
}

.video-thumbnail,
.video-wrapper video {
    display: block;
    object-fit: cover;
}*/
/** ./IMAGE GAUCHE + VIDEO DROITE **/
.lxd-bold {
  font-family: 'Lexend Deca Bold', sans-serif;
}
.jd0odk {
  margin-bottom: 8rem;
}
.txt-lexend-deca {
  font-family: 'Lexend Deca', sans-serif;
}

/** LOGOG **/
.main_logos {
  margin-top: 100px;
  margin-bottom: 50px;
}
        .logo-scroll-container {
            width: 100%;
            overflow: hidden;
            padding: 20px 0;
            position: relative;
        }

        .logo-scroll-container::before,
        .logo-scroll-container::after {
            content: '';
            position: absolute;
            top: 0;
            width: 200px;
            height: 100%;
            z-index: 2;
        }

        .logo-scroll-container::before {
            left: 0;
            /*background: linear-gradient(to right, #1a1a1a, transparent);*/
        }

        .logo-scroll-container::after {
            right: 0;
            /*background: linear-gradient(to left, #1a1a1a, transparent);*/
        }

        .logo-track {
            display: flex;
            animation: scroll 50s linear infinite;
            width: fit-content;
        }

        .logo-track-reverse {
            animation: scrollReverse 30s linear infinite;
        }

        .logo-track-fast {
            animation: scrollReverse 18s linear infinite;
        }

        .logo-track:hover {
            animation-play-state: paused;
        }

        .logo-item {
            flex-shrink: 0;
            padding: 0 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-item img {
            height: 50px;
            width: auto;
            object-fit: contain;
            /*filter: grayscale(100%) brightness(0.8);
            transition: all 0.3s ease;*/
        }

        .logo-item:hover img {
            /*filter: grayscale(0%) brightness(1);
            transform: scale(1.1);*/
        }

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

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

        /* Responsive */
        @media (max-width: 768px) {
            .logo-item {
                padding: 0 30px;
            }

            .logo-item img {
                height: 40px;
            }
        }


        .swiper-button-prev, .swiper-button-next {
          color: white !important;
              /*width: calc(var(--swiper-navigation-size) / 44 * 27);*/
              transform: scale(0.6);
        }
.navbar-toggler {
  color: #FFF;
  background-color: #FFF;
}
.ufjjKi {
  margin-top: 50px
}
        @media (max-width: 768px) {
            .ufjjKi {
  margin-top: 0px
}
        }



/** MENU **/
header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
}


.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
  position: relative;
}

.navbar a {
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-nav-color);
}

.navbar a.active {
  color: #FFF;
}

/* ------------------
   DESKTOP MENU
------------------- */

.nav-center {
  display: flex;
  gap: 40px;
}

.nav-right {
  position: absolute;
  right: 20px;
  display: flex;
  gap: 15px;
}

/* ------------------
   BURGER MOBILE
------------------- */
.burger {
  display: none;
  position: absolute;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
  z-index: 2000;
}

/* ------------------
   MOBILE SLIDE MENU
------------------- */

.mobile-slide {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;                /* largeur du menu mobile */
  height: 100vh;               /* pleine hauteur */
  background: rgba(0, 0, 0, 0.85); /* noir semi-transparent */
  backdrop-filter: blur(6px);       /* flou subtil */

  transform: translateX(-100%);  /* cach  gauche */
  transition: transform 0.35s ease;

  z-index: 3000;
  display: flex;
  flex-direction: column;
  padding: 25px;
}

.mobile-slide.open {
  transform: translateX(0);
}

.mobile-slide a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  padding: 12px 0;
  display: block;
}

.mobile-slide hr {
  margin: 15px 0;
  border: none;
  border-bottom: 1px solid #ddd;
}

/* ------------------
   RESPONSIVE
------------------- */

@media (max-width: 900px) {
  .nav-center,
  .nav-right {
    display: none;
  }

  .burger {
    display: block;
  }
}


/* BOUTON BURGER */
.burger {
  width: 30px;
  height: 22px;
  display: none; /* sera visible seulement en mobile */
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: absolute;
  right: 20px;
  z-index: 3001;
}

.burger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--text-nav-color);
  border-radius: 4px;
  transition: 0.35s ease;
}

/* Animation burger -> croix */
.burger.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.burger.open span:nth-child(2) {
  opacity: 0;
}
.burger.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* RESPONSIVE : montrer le burger */
@media (max-width: 900px) {
  .burger {
    display: flex !important; /* <<< IMPORTANT */
  }
}



.nav-right-links a {
  padding: 10px;
}

.navbar.nav_oekI {
  justify-content: space-between;
  padding: 0;
}


@media (max-width: 900px) {
 .nav-right-links {
    display: none;
  }

 
}
/** ./MENU **/

.swiper-button-prev, .swiper-button-next {
  opacity: 0.5;
}


/** PROJET **/

/* Grille responsive pour les projets */
.section___mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

/* Tablettes (iPad) */
@media (min-width: 768px) and (max-width: 1024px) {
  .section___mosaic {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur iPad */
    gap: 1.5rem;
  }
  
  .card_project {
    width: 100%;
  }
  
  .card_project img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .section___mosaic {
    grid-template-columns: 1fr; /* 1 colonne sur mobile */
    gap: 1rem;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .section___mosaic {
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes sur desktop */
    gap: 2rem;
  }
}

/* Style de base pour les cartes */
.element-item {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card_project {
  width: 100%;
  transition: transform 0.3s ease;
}

.card_project:hover {
  transform: translateY(-5px);
}

.card_project img {
  width: 100%;
  height: auto;
  display: block;
}

/** ./PROJET **/

/** CONTACT **/

/* iPad portrait et paysage */

/** ./CONTACT **/








.iekcoK {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}
.idkJd8 a, .iekcoK a {
  font-family: 'Lexend Deca Extra Light';
  color: #525258;
  font-size: 12pt;
  text-transform: uppercase;
  text-decoration: none;
}
.idkJd8 {
  display: flex;
  justify-content: end;
  margin-top: 2rem;
}