/* ----------------------------------------------------
   FONTS (Google Fonts : serif + sans serif)
---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap');


/* ----------------------------------------------------
   RESET
---------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #050505;
  color: #f5f5f5;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  scroll-behavior: smooth;
}

/* ----------------------------------------------------
   BOUTON LOGO FIXE (HAUT GAUCHE)
---------------------------------------------------- */
.logo-button {
  position: fixed;
  top: 29px;
  left: 29px;
  z-index: 20;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #111010;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  color: #111010;
  background: #111010;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.logo-button:hover {
  background: #111010;
  border-color: #111010;
  transform: translateY(-1px);
}

.logo-button img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* ----------------------------------------------------
   SECTION 1 : INTRO PLEIN ÉCRAN (2 IMAGES + CHARLY)
---------------------------------------------------- */
.intro-screen {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.intro-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1600px;
}

.intro-panel {
  position: relative;
  overflow: hidden;
}

.intro-panel img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.2);
  transform: scale(1.02);
  transition: transform 1.2s ease, filter 0.8s ease;
}

/* léger mouvement quand on survole l'intro */
.intro-split:hover .intro-panel img {
  transform: scale(1.05);
}

/* Logo "CHARLY" centré */
.intro-center-wordmark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Libre Bodoni", serif;
  font-size: 70px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f5f5f5;
  text-shadow: 0 18px 40px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

/* Taille contrôlée du logo CHARLY */
.intro-center-wordmark img {
  max-width: 250px;
  width: 100%;
  height: auto;
  display: block;
}


/* ----------------------------------------------------
   CONTENU APRÈS L'INTRO (PAGES 2 & 3) — HOME
---------------------------------------------------- */
main {
  background-color: #f7f7f7;
  color: #111010;
}

/* sections de la home uniquement; les autres pages ont leur propre layout */
main > section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 72px;
}

/* ----------------------------------------------------
   PAGE 2 : HERO (TEXTE CENTRÉ + 2 IMAGES)
---------------------------------------------------- */
.home-hero {
  text-align: center;
  border-bottom: none;
  padding-top: 120px;
  padding-bottom: 160px;
  background-color: #f7f7f7;
}

.home-hero-text {
  max-width: 900px;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  margin: 0 auto 56px auto;
}

.home-hero-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #9e9d9d;
  margin-bottom: 24px;
}

.home-hero h1 {
  font-family: "Libre Bodoni", serif;
  font-size: 35px;
  font-weight: 500;
  margin-bottom: 20px;
}

.menu-number,
.menu-text,
.home-hero-kicker {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
}

.home-hero-body {
  font-size: 14px;
  color: #111010;
}

/* les 2 images en dessous */
.home-hero-images {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.hero-image-card {
  max-width: 360px;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  background: #fafafa;
}

.hero-image-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: none;
  transform: scale(1.02);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.hero-image-card:hover img {
  transform: scale(1.05);
  filter: grayscale(100%) contrast(1.1);
}

/* ----------------------------------------------------
   PAGE 3 : MENU TEXTE UNIQUEMENT (01 / 02 / 03)
---------------------------------------------------- */
.home-menu {
  padding-top: 60px;
  padding-bottom: 80px;
  border-top: 1px solid #dedede;
  background-color: #f7f7f7;
}

.home-menu-links {
  border-top: 1px solid #dedede;
}

.menu-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid #dedede;
  text-decoration: none;
  color: #111;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.menu-number {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #9e9d9d;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
}

.menu-text {
  font-size: 14px;
  color: #444;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
}

.menu-row:hover {
  background-color: #f0f0f0;
  transform: translateY(-1px);
}

.menu-row:hover .menu-number {
  color: #111010;
}

/* ----------------------------------------------------
   PAGE ARCHIVE — grille 8 images, full noir
---------------------------------------------------- */

.archive-body {
  background-color: #111010;
  color: #f5f5f5;
}

.archive-body main {
  background-color: #111010;
  color: #f5f5f5;
}

.archive-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 72px 40px;  /* 40px au lieu de 96px */
  min-height: 100vh;        /* le fond #111010 prend toute la hauteur */
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  justify-items: center;
}

.archive-item {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #d5d5d5;
  overflow: hidden;
  cursor: zoom-in;
}

.archive-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.05);
  transform: scale(1.02);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.archive-item:hover img {
  transform: scale(1.07);
  filter: grayscale(90%) contrast(1.15);
}

.archive-lightbox {
  position: fixed;
  inset: 0;
  background: #111010;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.archive-lightbox.is-visible {
  display: flex;
}

.archive-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 32px;
  right: 40px;
  font-size: 32px;
  color: #f5f5f5;
  background: none;
  border: none;
  cursor: pointer;
}

/* Responsive archive */
@media (max-width: 1100px) {
  .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile / tablette : carrousel horizontal, cartes centrées */
@media (max-width: 800px) {

  .archive-wrapper {
    padding: 80px 0 40px;
    display: flex;
    align-items: center;      /* centre la rangée d’images verticalement */
  }

  .archive-grid {
    display: flex;
    flex-direction: row;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 20px;
    scroll-snap-type: x mandatory;
    justify-content: center;
    align-items: center;
  }

  .archive-item {
    flex: 0 0 70vw;           /* largeur de la carte */
    aspect-ratio: 3 / 4;      /* format vertical identique pour toutes */
    scroll-snap-align: center;
  }
}

@media (max-width: 500px) {
  .archive-item {
    flex-basis: 80vw;         /* un peu plus large sur très petits écrans */
  }
}

/* ----------------------------------------------------
   PAGE PROJETS — fond anthracite, liste + preview
---------------------------------------------------- */

.projects-body {
  background-color: #111010;
  color: #f5f5f5;
}

.projects-body main {
  background-color: #111010;
  color: #f5f5f5;
}

/* conteneur principal de la page projets */
.projects-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 72px 96px;
}

/* 2 colonnes : gauche = liste projets, droite = carré preview */
.projects-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 96px;
  align-items: flex-start;
}

/* Colonne gauche : liste */
.projects-list {
  display: flex;
  flex-direction: column;
}

/* Chaque projet */
.project-row {
  border-top: 1px solid #3f3f3f;
  text-decoration: none;
  color: inherit;
  padding: 24px 0;
  cursor: pointer;
}

.project-row:last-of-type {
  border-bottom: 1px solid #3f3f3f;
}

.project-row-inner {
  max-width: 620px;
}

/* Nom du projet */
.project-name {
  font-family: "Libre Bodoni", serif;
  font-size: 24px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Description */
.project-description {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #c0c0c0;
}

/* Colonne droite : preview carré */
.projects-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}

.projects-preview-card {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  background-color: #111010;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.projects-preview-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.05);
  transform: scale(1.02);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.6s ease, filter 0.6s ease;
}

/* classe ajoutée en JS pour afficher l'image */
.projects-preview-card.is-visible img {
  opacity: 1;
}

/* Responsive page projets */
@media (max-width: 960px) {
  .projects-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .projects-main {
    padding: 64px 20px 80px;
  }

  .projects-preview {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .project-row {
    padding: 18px 0;
  }

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

/* ----------------------------------------------------
   PAGES PROJETS DÉTAIL (BlockMotor / FURI)
---------------------------------------------------- */

.project-body {
  background-color: #f5f5f5;
  color: #111010;
}

.project-body main {
  background-color: #f5f5f5;
  color: #111010;
}

/* Conteneur principal de la page projet détaillée */
.project-body .project-main {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 50px 20px 40px;
}

/* En-tête projet (tag + titre + sous-titre) */
.project-header {
  margin-bottom: 6px;
}

.project-tag {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #111010;
  margin-bottom: 2px;
}

.project-title {
  font-family: "Libre Bodoni", serif;
  font-size: 25px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.project-subtitle {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  color: #555;
}

/* ----------------------------------------------------
   BLOC IMAGES — Composition BlockMotor
---------------------------------------------------- */

/* reset des figure pour enlever les marges par défaut */
.project-gallery figure,
.project-gallery .project-img {
  margin: 0;
  padding: 0;
  display: block;
}

.project-gallery {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  margin-top: 0;
  margin-bottom: 0;
  /* léger décalage pour coller un peu plus à gauche */
  margin-left: -80px;
}

/* Grande verticale à gauche */
.project-img.project-img-large {
  flex: 0 0 310px;
  height: 410px;
  background: #111010;
  overflow: hidden;
}

/* Petite verticale au centre */
.project-img.project-img-small {
  flex: 0 0 200px;
  height: 300px;
  background: #111010;
  overflow: hidden;
}

/* Horizontale à droite avec grand blanc à gauche */
.project-img.project-img-wide {
  flex: 0 0 500px;
  height: 280px;
  margin-left: 160px;   /* blanc éditorial à gauche */
  background: #111010;
  overflow: hidden;
}

/* Style commun aux images */
.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
  transform: scale(1.02);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.project-img:hover img {
  transform: scale(1.05);
  filter: grayscale(90%) contrast(1.15);
}

/* ----------------------------------------------------
   TEXTE DE DESCRIPTION EN BAS DU PROJET
---------------------------------------------------- */

.project-info {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0;
  padding-top: 0;
  margin-left: -80px;
  margin-top: -30px;
}

.project-meta {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  font-size: 10px;
  line-height: 1.4;
}

.project-meta p {
  margin-bottom: 0;
}

.project-text {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.9;
  color: #111010;
  margin-left: 110px;
  margin-top: -10px;
}

/* ----------------------------------------------------
   RESPONSIVE PROJET DÉTAILLÉ
---------------------------------------------------- */

@media (max-width: 1100px) {

  .project-body .project-main {
    padding: 48px 40px 40px 30px;
  }

  .project-gallery {
    gap: 40px;
    margin-left: -6px;
  }

  .project-img.project-img-large {
    flex-basis: 280px;
    height: 380px;
  }

  .project-img.project-img-small {
    flex-basis: 200px;
    height: 300px;
  }

  .project-img.project-img-wide {
    flex-basis: 440px;
    height: 230px;
    margin-left: 100px;
  }
}

@media (max-width: 840px) {

  .project-gallery {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
  }

  /* ➜ sur mobile/tablette : images en colonne, non coupées */
  .project-img.project-img-large,
  .project-img.project-img-small,
  .project-img.project-img-wide {
    flex: 0 0 auto;
    width: 100%;
    max-width: 520px;
    height: auto;
  }

  .project-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .project-img.project-img-wide {
    margin-left: 0;
  }

  .project-info {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-left: 0;
    margin-top: 10px;
  }

  .project-text {
    margin-left: 0;
  }

  /* ➜ plus de chevauchement avec le logo fixe */
  .project-body .project-main {
    padding: 80px 20px 40px;
  }
}

@media (max-width: 600px) {

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

  .project-tag {
    font-size: 12px;
  }

  .project-text {
    font-size: 13px;
  }
}

/* ----------------------------------------------------
   PAGE CONTACT — fond sombre + minimalisme éditorial
---------------------------------------------------- */

.contact-body {
  background-color: #111010;
  color: #f5f5f5;
}

.contact-body main {
  background-color: #111010;
  color: #f5f5f5;
}

/* Conteneur global de la page contact */
.contact-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 40px 40px;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* haut = infos / bas = bio */
  align-items: center;
  text-align: center;
}

/* Bloc du haut : nom + coordonnées */
.contact-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;                        /* espace entre titre et infos */
}

/* Nom (titre principal) */
.contact-title {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 20px;
  letter-spacing: 0.03em;
  text-transform: lowercase;
}

/* Bloc des infos (email, tel, insta) */
.contact-infos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.contact-line {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.contact-line a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.contact-line a:hover {
  border-color: #f5f5f5;
}

/* Texte descriptif en bas de page */
.contact-bio {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 12px;
  line-height: 1.7;
  color: #e0e0e0;

  max-width: 760px;                 /* plus large que le bloc du haut */
  margin-bottom: 10px;              /* léger respir */
}

/* Responsive */
@media (max-width: 640px) {
  .contact-main {
    padding: 40px 20px 24px;
  }

  .contact-title {
    font-size: 22px;
  }

  .contact-line {
    font-size: 14px;
  }

  .contact-bio {
    font-size: 11px;
    max-width: 100%;
  }
}

/* ----------------------------------------------------
   FOOTER
---------------------------------------------------- */
.site-footer {
  background-color: #f7f7f7;
  border-top: 1px solid #dedede;
  text-align: center;
  padding: 24px 20px 40px;
  font-size: 11px;
  color: #777;
}

/* ----------------------------------------------------
   RESPONSIVE GLOBAL
---------------------------------------------------- */
@media (max-width: 900px) {
  /* ➜ intro : une seule image (gauche) + logo adapté */
  .intro-split {
    grid-template-columns: 1fr;
  }

  .intro-right {
    display: none;
  }

   /* >>> NOUVELLE VERSION <<< */
   .intro-panel img {
    width: 100%;
    height: auto;
    max-height: 100vh;
    object-fit: contain;   /* l’image s’adapte, n’est plus coupée */
    display: block;
  }

  .intro-center-wordmark {
    font-size: 40px;
  }

  main > section {
    padding: 56px 20px;
  }

  .home-hero-images {
    flex-direction: column;
    align-items: center;
  }

  .menu-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ----------------------------------------------------
   HERO MOBILE — 1 seule image pleine hauteur
---------------------------------------------------- */
@media (max-width: 900px) {

  /* On force une seule image */
  .intro-split {
    grid-template-columns: 1fr;
  }

  /* On masque l’image de droite */
  .intro-right {
    display: none;
  }

  /* Image mobile = plein écran, ratio auto, aucun vide */
  .intro-panel img {
    width: 100%;
    height: 100vh;
    object-fit: cover !important;
    object-position: center;

  }

  /* Logo centré repositionné */
  .intro-center-wordmark {
    font-size: 38px;
  }
}