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

body {
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  margin: 20px;
  background-color: #F5F4F5; 
}

.big video {
  width: 100%;      
  height: auto;     
  display: block;
}

header {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 5px;
}

.grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr;
  gap: 20px;
  margin: 20px 0;
}

.cv-link {
  color: black;          
  text-decoration: none; 
  }

.cv-link:hover {
  color: black;          
  text-decoration: none;  
}


h2 {
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

p {
  margin-bottom: 10px;
  font-size: 14px;
}

.ligne {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  font-size: 13px;
  margin-bottom: 4px;
}

.categorie{
  display: grid;
  grid-template-columns: 2fr 2fr 0.5fr;
  border-top: 1px solid black;
  padding: 5px 0;
  font-size: 12px;
  margin-bottom: 20px;
}




.glitch {
  cursor: pointer;
  
}


/* ------------------------------
   PROJECTS
-------------------------------- */

.project {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 2fr 0.5fr;
  padding: 10px 0;
  border-bottom: 1px solid #000;
  cursor: pointer;
}

/* ------------------------------
   HOVER GLOBAL – DÉLAI 1s
-------------------------------- */

.hover-space {
  display: flex;
  gap: 6px;

  opacity: 0;
  max-height: 0;
  overflow: hidden;

  margin-top: 0;
  padding: 0;

  transition:0.75s;
}

.project:hover .hover-space {
  opacity: 1;
  max-height: 400px;
  margin-top: 10px;
  padding: 10px 0;
}

/* ------------------------------
   IMAGES PAR DÉFAUT
-------------------------------- */

/* ------------------------------
   VARIANTES (OPTIONNELLES)
-------------------------------- */



.project.jules-verne .preview {
  width:600px;
 
}
.project.textile .preview {
  object-fit: cover;
  width: 300px;
 
}

.project.au-fil-info .preview {
  width: 400px;

}

.project.portrait-fabrique .preview {
  width: 675px;
  height: 250px;
  object-fit: cover;
}

.project.asobi .preview {
  width: 700px;
  height: 200px;
  object-fit: cover;
}

.project.altharic .preview {
  width: 250px;
  height: 250px;
  object-fit: cover;
}

.project.dictionnaire .preview {
  width: 175px;
  height: 250px;
  object-fit: cover;
}


.project.sur-lune .preview {
  width: 600px;
  height:250px;
  object-fit: cover;
}


.project.engagementdelecture .preview {
 width:400px;
 height:275px;
}


.project-title {
  text-decoration: none;   
  color: inherit;          
  cursor: pointer;
}



.footer {
  margin-top: 150px; 
  padding: 20px;
}

.footer-hr {
  border: none;
  border-top: 1px solid #000;
  margin: 10px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr;
  gap: 60px;
  margin: 0 auto;     
}

.footer-item h3 {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px  
}

.footer-item p {
  font-size: 12px;
  margin-bottom: 6px;
}

.footer-item span {
	  text-transform: uppercase;
}

.footer-item a {
  color: black;
  text-decoration: none;
}

.footer-bottom {
  margin-top: 20px;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}



.project a {
  text-decoration: none;
  color: inherit;
}


@media (max-width: 900px) {
  .images {
    width: 100%;
  }

  .taille {
    flex-direction: column;
    align-items: center;
    margin-left: 0;
  }

  .taille img,
  .taille video,
  .single img {
    max-width: 100%;
  }
}