body {
    font-family: "Futura PT", "Arial", sans-serif; 
  font-weight: 400;    /* Medium */
  font-style: Book;  
  padding-bottom: 150px; /* 👈 espace réservé pour le sommaire */
  box-sizing: border-box;
}



header.grille {
  display: flex;
  justify-content: space-between; /* espace entre texte et bouton */
  align-items: center;            /* 🔥 centre verticalement */
  padding: 40px 30px;
  box-sizing: border-box;
  padding: 0px 32px 40px 30px;
}




/* ---- HEADER ---- */
.grille {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 0px 40px 40px 40px;
}


.grille_contact {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  padding: 0px 40px 40px 40px;
  column-gap: 50px;

}

/* ---- Texte ---- */
.texte p {
  font-weight: 200px;
  font-size: 18px;
  margin: 0;
  line-height: 1.2;
  
}

.titre {
  font-weight: demi;
  font-size: 15px;
  font-weight: 400;
  color: black;
}



/* ---- Bouton Contact ---- */
.contact {
  text-align: right;
   padding-top: 15px;
}

.contact a {
  display: inline-block;       /* ensures margin works properly */
  margin-top: 10px;            /* adjust this value to align vertically */
  font-size: 15px;
  text-decoration: none;
  color: #222;

}


/* ---- SECTION IMAGES ---- */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  
  gap: 30px;               /* espace entre les images */
  padding: 50px 30px;      /* marge en haut/bas et sur les bords gauche/droite */
  box-sizing: border-box;  /* évite que le padding casse la grille */
}

.galerie figure {
  margin: 0;
  text-align: left;
}

.galerie img {
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  margin-top: -80px;
}


.galerie video:hover {
  transform: scale(1.03);
}

.galerie video {
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  margin-top: -80px;
}


.galerie img:hover {
  transform: scale(1.03);
}


.galerie2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 30px;
  padding: 50px 30px;
  box-sizing: border-box;
  margin-top: -40px; /* réduit l'espace avec galerie1 */
}

.galerie2 figure {
  margin: 0;
  text-align: left;
}

.galerie2 img {
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.galerie2 video:hover {
  transform: scale(1.03);
}

.galerie2 video {
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
 
}
.sommaire {
    font-size: 10px;
    margin: 10px 0 0 0;  /* small top margin, no left margin */
    text-align: right;    /* aligns text to the right under Contact link */
    line-height: 1.4;     /* nice spacing between lines */
 
}



/* ---- PAGE INTERIEURE (2 colonnes) ---- */


.page-interieure {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
  gap: 40px;
  padding: 60px;
  align-items: start;
}

.texte-gauche {
  font-size: 13px;
  line-height: 1.6;
  color: #333;

  position: sticky; /* keeps it in place while scrolling */
  top: 40px;        /* distance from the top of the viewport */
}
.texte-gauche h2 {
  margin-top: 0;
  font-size: 28px;
  font-weight: 600;
}

.images-droite img {
   width: 110%; /* slightly bigger than the column */
  margin-bottom: 70px;
  margin-top: -60px;
  border-radius: 00px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transform: translateX(-10%); /* moves images a bit to the left */
  transition: transform 0.3s ease;
}

.images-droite .video-projet {
  width: 110%; /* même que les images */
  height: auto;
  margin-bottom: 70px; /* même que les images */
  margin-top: -60px; /* même que les images */
  border-radius: 0px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* même que les images */
  transform: translateX(-10%); /* même décalage à gauche que les images */
  object-fit: cover;
}

.highlight {
    font-weight: bold;
    font-size: 13px;
    border-bottom: 2px solid black; /* black line under the text */
    display: inline-block;          /* keeps the line tight under text */
    padding-bottom: 2px;            /* space between text and line */
}
/* Align only the Contact button with Alejandra Gonzalez */
.contact {
  display: flex;
  flex-direction: column;  /* keep sommaire below button */
  justify-content: flex-start;  /* top-align the button with header text */
  text-align: right;
}

.contact-button {
  margin-top: 8; /* ensures button aligns with top */
  font-size: 15px;
  text-decoration: none;
  color: #222;
}

.sommaire {
  margin-top: 10px; /* optional spacing below button */
  font-size: 10px;
  text-align: right;
}

/* ---- HOME LINK (Alejandra Gonzalez clickable) ---- */
.home-link {
  text-decoration: none;
  color: inherit;
  display: inline; /* ✅ keeps it behaving like normal text */
}

.home-link:visited {
  color: inherit;
}

.home-link:hover {
  opacity: 0.7;
}

  /* ---- Align project title and description under Alejandra Gonzalez ---- */
.page-interieure {
  display: grid;
  grid-template-columns: 1fr 1fr; /* keep 2 columns */
  gap: 40px;
  padding: 60px 30px; /* reduce horizontal padding to move text left */
  align-items: start;
}

.texte-gauche {
  font-size: 12px;
  line-height: 1.6;
  color: #333;
  justify-self: start;      /* aligns text to the left inside its grid cell */
  max-width: 500px;         /* optional, keeps text from being too wide */
  margin-top: -80px;
}

.texte-gauche p:first-child {
  font-weight: bold;        /* optional, make "Shortfilm Duende" stand out */


/* Header grid - your existing header styles */
.grille {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* adjust based on your original layout */
  align-items: center;
  padding: 20px;
}

/* Contact - colonnes */
main.grille {
  padding: 40px;
  padding-top: 0px;
  margin-top: -80px;
  position: relative;
}

.colonne-gauche,
.colonne-droite,
.colonne-extreme-droite {
  font-size: 10px !important; 
  line-height: 1.5;
  margin-top: -100px;
}

.colonne-gauche p,
.colonne-droite p,
.colonne-extreme-droite p {
  margin: 0;
  padding-right: 10px;
}

.linkedin-link {
  font-size: 10px !important;
  color: #222 !important; 
  text-decoration: none;
  font-style: italic;
}

.linkedin-link:visited {
  color: #222 !important; /* ✅ removes purple after clicking */
}

.linkedin-link:hover {
  opacity: 0.7;
  color: #222 !important; /* ✅ keeps dark color on hover */
}