/* font */
@font-face {
  font-family: 'Inter';
  src: url('Polices/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Couleur de fond globale du site */
body {
  background-color: #ECECEC;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}





/* NAVIGATION BAR */

.navbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px; /* 0 en haut/bas, garde l'espacement gauche/droite */
  background-color: #EDEDED;
}

.navlinks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav_group_right {
  display: flex;
  align-items: center;
  gap: 25px;
}

.nav_center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.navlinks a {
  text-decoration: none;
  color: #464646;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: uppercase;
  transition: color 0.3s ease;
  -webkit-text-stroke: 4px #CCCCCC;
  paint-order: stroke fill;
  white-space: nowrap;
  
  /* Arrondit les coins et les extrémités du contour */
  stroke-linejoin: round;
  stroke-linecap: round;
}

.navlinks a:hover {
  color: #1a1a1a;
  cursor: pointer;
}

/* --- EFFET DE SOULIGNEMENT SUR LES LIENS --- */
.navlinks a {
  position: relative;
  text-decoration: none;
}

/* Trait masqué par défaut */
.navlinks a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Épaisseur du trait */
  background-color: #FF88B1; /* Couleur du trait */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Affiche le trait depuis le centre au survol */
.navlinks a:hover::before {
  transform: scaleX(1);
}





.hero_section {
  width: 100%;
  background-color: #EDEDED;
}








/* ---------------------- LE HERO EN CROIX -------------------------- */
.plus_wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 60px;
  padding-left: 50px;
  padding-bottom: 40px;
}

.plus_box {
  width: 280px;
  display: flex;
  flex-direction: column;
}

.plus_part {
  width: 150px;
  margin: 0 auto;
  padding: 0;
  text-align: justify;
  text-justify: inter-word;
}

.plus_part.top {
  margin-bottom: 4px;
}

.plus_part.bottom {
  margin-top: 4px;
}

.middle_row {
  width: 100%;
  padding: 0;
  text-align: justify;
  text-justify: inter-word;
}

.plus_part p,
.middle_row p {
  font-size: 12px;
  line-height: 1.5;
  color: #444;
  margin: 0;
}

/* ------------------------------- JAVASCRIPT SOURIS -------------------------*/

/* Style pour les éléments de la traînée */
.trail-image {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  
  /* Taille ajustée */
  width: 32px;
  height: auto;
  object-fit: contain;

  /* Animation */
  opacity: 1;
  scale: 1;
  transition: opacity 0.7s ease-out, scale 0.7s ease-out;
}

/* --- SECTION PROJETS --- */
.projects_section {
  width: 100%;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 30px; /* Espace vertical entre les projets */
}

/* Alignement : colonne de gauche (texte) / colonne de droite (image) */
.project_row {
  display: flex;
  width: 100%;
  align-items: flex-start;
}

/* Colonne de gauche pour le texte */
.project_info {
  width: 30%; /* Largeur de la colonne texte */
  display: flex;
  gap: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  line-height: 1.4;
  text-transform: uppercase;
  color: #464646;
  font-weight: 400;
  margin-top: -3px; /* Alignement optique parfait avec l'arête horizontale supérieure de la photo */
}

.tag {
  font-weight: 400;
}

/* Colonne de droite pour l'image */
.project_media {
  width: 70%; /* L'image prend le reste de la largeur */
}

.project_media img {
  width: 100%;
  height: 550px; /* Force l'image à être plus haute en pixels */
  object-fit: cover; /* L'image remplit tout l'espace sans se déformer */
  display: block;
}







/* -------------------------------------- PAGE ABOUT --------------- */


/* -------------------------------------- PAGE ABOUT -------------------------------------- */

/* -------------------------------------- PAGE ABOUT -------------------------------------- */

.about_container {
  display: flex;
  justify-content: space-between;
  padding: 40px 25px 60px 25px;
  gap: 40px;
  box-sizing: border-box;
}

/* Colonne Gauche */
.about_left {
  width: 52%;
  display: flex;
  flex-direction: column;
}

/* Grand titre aligné en largeur avec la colonne de texte */
.about_title {
  font-family: 'Inter', sans-serif;
  font-size: 58px;
  font-weight: 800;
  line-height: 0.90;
  letter-spacing: 2px;
  color: #464646;
  margin: 0 0 50px 0;
  max-width: 480px; /* Limite la largeur du titre */
  -webkit-text-stroke: 13px #CCCCCC;
  paint-order: stroke fill;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Blocs de texte compacts et TOUT en gras */
.about_block {
  display: flex;
  margin-bottom: 22px;
  font-size: 11px;
  line-height: 1.35;
  color: #000000;
  font-weight: bold; /* Passe l'ensemble du contenu en gras */
}

.block_label {
  width: 130px;
  flex-shrink: 0;
  font-weight: bold;
}

.block_content {
  flex-grow: 1;
  max-width: 350px; /* Limite la largeur pour que le paragraphe s'arrête sous les titres */
}

.block_content p {
  margin: 0;
}

.exp_item {
  margin-bottom: 14px;
}

.exp_item:last-child {
  margin-bottom: 0;
}

.exp_item strong {
  display: block;
  margin-bottom: 2px;
  font-weight: bold;
}

.exp_item p {
  color: #000000;
  margin: 0;
  font-weight: bold;
}

/* Colonne Droite : Image unique */
.about_right {
  width: 44%;
  display: flex;
  justify-content: flex-end;
}

.photo_single_frame {
  background-color: #ffffff;
  padding: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  height: fit-content;
  width: 100%;
  max-width: 520px;
}

.photo_single_frame img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
  opacity: 0.7;
}

/* Footer */
.site_footer {
  display: flex;
  justify-content: space-between;
  padding: 20px 25px;
  font-size: 11px;
  color: #464646;
  font-weight: bold;
  font-family: 'Inter', sans-serif;
}












/* ===================================================
   CARROUSEL SUR MESURE
   =================================================== */

/* Conteneur principal sans bordures de séparation */
.carousel-container {
  display: flex;
  width: 100%;
  height: 80vh;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border: none; /* Supprime toutes les lignes de délimitation */

  /* Cacher la barre de scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-container::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
}
.project_media img {
  width: 100%;
  height: auto;
  display: block;
}
/* ---------------------------------------------------
   PARTIE GAUCHE (Image plein conteneur)
   --------------------------------------------------- */
.slide-left {
  width: 50%;
  height: 100%;
  position: relative;
  padding: 0; /* Supprime l'espace autour de l'image */
  border: none; /* Supprime la ligne de séparation verticale */
  background-color: transparent;
}

.slide-left img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* L'image remplit 100% de la largeur et de la hauteur */
  display: block;
}

/* ---------------------------------------------------
   PARTIE DROITE (Deuxième image & Bouton NEXT)
   --------------------------------------------------- */
.slide-right {
  width: 50%;
  height: 100%;
  position: relative;
  padding: 0;
  border: none;
  background-color: transparent;
}

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

/* ---------------------------------------------------
   LÉGENDE / TEXTE SUR LES PHOTOS DU CARROUSEL
   --------------------------------------------------- */
.slide-caption {
  position: absolute;
  bottom: 25px;
  left: 25px;
  z-index: 10;
  pointer-events: none;
  text-align: left;
}

.slide-medium {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #FF88B1; /* Rose des pattes de chien */
  margin: 0 0 6px 0;
  letter-spacing: 0.5px;
  text-align: left;
}

.slide-theme {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #FF88B1; /* Rose des pattes de chien */
  margin: 0;
  text-align: left;
}

/* ---------------------------------------------------
   BOUTON NEXT (Même style que les liens du header)
   --------------------------------------------------- */
.btn-next {
  position: absolute;
  bottom: 25px;
  right: 25px;
  z-index: 10;
  text-decoration: none;
  color: #464646;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: uppercase;
  transition: color 0.3s ease;
  -webkit-text-stroke: 4px #CCCCCC;
  paint-order: stroke fill;
  stroke-linejoin: round;
  stroke-linecap: round;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
}

.btn-next:hover {
  color: #1a1a1a;
}

/* Trait masqué par défaut */
.btn-next::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #FF88B1;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Affiche le trait depuis le centre au survol */
.btn-next:hover::before {
  transform: scaleX(1);
}

/* ===================================================
   RESPONSIVE DESIGN (TABLETTE & SMARTPHONE)
   =================================================== */



/* Tablette et Mobile (écrans <= 768px) */
@media (max-width: 768px) {
  /* Navigation */
  .navbar {
    padding: 0 12px;
  }

  .navlinks a {
    font-size: 13px;
    -webkit-text-stroke: 3px #CCCCCC;
  }

  .nav_group_right {
    gap: 15px;
  }

  /* Section Hero (texte en croix) */
  .plus_wrapper {
    padding: 40px 15px 30px 15px;
    justify-content: center;
  }

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

  /* Section Projets */
  .projects_section {
    padding: 25px 0;
    gap: 30px;
  }

  .project_row {
    flex-direction: column;
    gap: 12px;
  }

  .project_info {
    width: 100%;
    padding: 0 15px;
    margin-top: 0;
  }

  .project_media {
    width: 100%;
  }

  .project_media img {
    height: 380px;
  }

  .titre {
    font-size: 36px;
    -webkit-text-stroke: 8px #fff;
    margin: 25px 0 15px 0;
  }

  /* Carrousel */
  .carousel-container {
    height: auto;
    min-height: 480px;
  }

  .carousel-slide {
    flex-direction: column;
    height: auto;
    min-height: 480px;
  }

  .slide-left,
  .slide-right {
    width: 100%;
    height: 280px;
    padding: 0;
  }

  .btn-next {
    bottom: 15px;
    right: 15px;
    font-size: 13px;
    -webkit-text-stroke: 3px #CCCCCC;
    padding: 0;
  }

  .slide-caption {
    bottom: 15px;
    left: 15px;
  }

  .slide-medium {
    font-size: 12px;
  }

  .slide-theme {
    font-size: 11px;
  }

  /* Page About */
  .about_container {
    flex-direction: column;
    padding: 25px 15px 40px 15px;
    gap: 35px;
  }

  .about_left {
    width: 100%;
  }

  .about_title {
    font-size: 40px;
    -webkit-text-stroke: 8px #CCCCCC;
    letter-spacing: 1px;
    margin-bottom: 30px;
    max-width: 100%;
  }

  .about_block {
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
  }

  .block_label {
    width: 100%;
  }

  .block_content {
    max-width: 100%;
  }

  .about_right {
    width: 100%;
    justify-content: center;
  }

  .photo_single_frame {
    max-width: 100%;
  }

  /* Footer */
  .site_footer {
    padding: 15px;
  }
}

@media (max-width: 600px) {
  .nav_center {
    position: static;
    transform: none;
  }
}

/* Petits smartphones (écrans <= 480px) */
@media (max-width: 480px) {
  .navbar {
    padding: 0 10px;
  }

  .navlinks a,
  .btn-next {
    font-size: 11px;
    -webkit-text-stroke: 2px #CCCCCC;
  }

  .nav_group_right {
    gap: 10px;
  }

  .project_media img {
    height: 260px;
  }

  .slide-left,
  .slide-right {
    height: 220px;
  }

  .slide-caption {
    bottom: 12px;
    left: 12px;
  }

  .slide-medium {
    font-size: 11px;
    margin-bottom: 3px;
  }

  .slide-theme {
    font-size: 10px;
  }

  .about_title {
    font-size: 30px;
    -webkit-text-stroke: 6px #CCCCCC;
    line-height: 0.95;
  }

  .titre {
    font-size: 24px;
    -webkit-text-stroke: 5px #fff;
    margin: 20px 0 10px 0;
  }

  .site_footer {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    align-items: center;
  }
}







:root {
  --marge: 20px;   /* même marge à gauche (20px) que .project_info */
}

.titre {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 1.2;
  letter-spacing: -0.06em;
  color: #464646;
  margin: 35px 0 20px 0;
  padding: 0 var(--marge);      /* même marge à gauche que le texte du dessus */
  overflow-wrap: break-word;

  /* contour blanc arrondi autour des lettres */
  -webkit-text-stroke: 14px #fff;
  paint-order: stroke fill;     /* le contour passe derrière la lettre */
  stroke-linejoin: round;       /* coins arrondis */
}