/* ------------------- GLOBAL ------------------- */
body {
  margin: 0;
  font-family: 'Red Hat Display', sans-serif;
  cursor: crosshair; /* curseur croix par défaut */
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

h1 {
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 500;    /* gras */
  font-size: 20px;     /* ajustable selon ton goût */
  line-height: 1;
  margin: 0 0 20px 0;  /* pas de marge en haut, marge en bas pour espacer */
  color: #000;
}

strong {
font-weight: 600; /* plutôt que 700 par défaut */
}

/* liens */
a:link, a:visited {
  text-decoration: none;
  color: #000;
}

a:hover, a:active, a:focus {
  text-decoration: none;
  color: #F00;
}

/* logo */
.logo {
  font-size: 18px;
}

.logo img {
  height: 120px;
  display: block;
}

/* ------------------- GRILLE PAGE D'ACCUEIL ------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin-top: 140px;
  gap: 10px;
  padding: 10px;
}

/* items */
.item {
  display: block;
  position: relative;
}

.item.big {
  grid-column: span 2;
}

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

/* titre au-dessus de l'image */
.title {
  display: block;
  font-size: 14px;
  color: black;
  margin-bottom: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* effet clic sur l'image */
.item:active {
  opacity: 0.5;
}

.item:hover {
  cursor: url("cursor-dot.svg") 8 8, auto;
}

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

@media (max-width:700px){
  .grid {
    grid-template-columns: repeat(2,1fr);
  }
}

/* ------------------- HEADER ------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  z-index: 6000; /* plus haut que le modal */
  background: none; 
  transition: transform 0.8s ease;
}

/* bouton + */
.menu a, .menu button {
  text-decoration: none;
  font-size: 60px;
  color: black;
  line-height: 1;
}

/* cacher le header quand scroll */
.header.hide {
  transform: translateY(-100%);
}

/* ------------------- MODAL ------------------- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;               /* caché par défaut */
  align-items: flex-start;     /* alignement en haut */
  justify-content: center;     /* centré horizontalement */
  background: white;
  padding: 40px 20px;          /* padding horizontal réduit sur mobile */
  overflow: auto;              /* scroll si texte long */
  z-index: 5000;               /* toujours au-dessus du header */
  box-sizing: border-box;
}

.modal-content {
  width: 90%;                  /* prend 90% de la largeur disponible */
  max-width: 700px;            /* ne dépasse pas 700px sur desktop */
  margin-top: 120px;           /* pour ne pas chevaucher le header */
  box-sizing: border-box;      /* inclut padding si ajouté */
}

/* petits écrans (<480px) */
@media (max-width: 480px) {
  .modal-content {
    width: 95%;                /* presque toute la largeur */
    margin-top: 80px;          /* header plus petit ou moins de décalage */
    font-size: 13px;           /* texte un peu plus petit */
    line-height: 1.4;
  }
}

/* quand modal ouvert, empêcher scroll du body */
body.modal-open {
  overflow: hidden;
}

/* ------------------- PAGES PROJET ------------------- */

.project-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 180px 20px 40px; /* padding top pour header */
}

/* Plan masse + infos : colonne 1 */
.project-plan {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project-plan img {
  width: 100%;
  display: block;
}

.plan-info {
 }

/* Texte : colonne 2 */
.project-text {
  grid-column: 2 / 3;
    padding: 0;       /* supprime tout padding par défaut */
  margin: 0;        /* supprime marges des paragraphes */
}

.project-text p:first-child {
  margin-top: 0;    /* s’assure que le premier paragraphe touche le haut */
}

/* Galerie : colonnes 3+4, 4 images par ligne */
.project-gallery {
  grid-column: 3 / 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.project-gallery img {
  width: 100%;
  cursor: pointer;
  display: block;
  transition: transform 0.2s;
}

.project-gallery img:hover {
  transform: scale(1.02);
}

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

/* 1100px → 3 colonnes */
@media (max-width: 1100px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .project-plan {
    grid-column: 1 / 2;
  }
  .project-text {
    grid-column: 2 / 4;
  }
  .project-gallery {
    grid-column: 1 / 4;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 700px → 2 colonnes */
@media (max-width: 700px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 120px 10px 20px;
  }
  .project-plan {
    grid-column: 1 / 3;
  }
  .project-text {
    grid-column: 1 / 3;
  }
  .project-gallery {
    grid-column: 1 / 3;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 480px → 1 colonne */
@media (max-width: 480px) {
  .project-grid {
    grid-template-columns: 1fr;
    padding: 100px 10px 20px;
  }
  .project-plan,
  .project-text,
  .project-gallery {
    grid-column: 1 / 2;
  }
  .project-gallery {
    grid-template-columns: 1fr;
  }
}


/* ------------------- LIGHTBOX ------------------- */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 3500; /* header reste au-dessus */
  cursor: crosshair;
}

#lightbox img {
  max-width: 80%;  /* un peu plus petites */
  max-height: 90%;
  display: block;
}