@charset "UTF-8";


@font-face {
  font-family: "RomainduRoiMono-06-03-Regular";
  src: url("../fonts/RomainduRoiMono-06-03-Regular.otf") format("opentype");
}



body {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 0;
    background-color: #ffffff; 
    overflow-x: hidden;
  }
  
  p {
    font-family: "RomainduRoiMono-06-03-Regular";
    color: #000000;
    font-size: 0.75rem; 
    margin: 0; /* Remove default margins */

  }

  a {
    text-decoration: none; /* Remove the default underline */
    color: inherit; /* Inherit the text color from the parent element */
 font-size: 1rem;
 
  }
  
  a:hover {
    color: rgb(255, 92, 206);
  }

  header {
    font-family: "RomainduRoiMono-06-03-Regular";
    font-size: 1rem;
    padding: 10px 10px;
    color: #000000;
  }

  
  /* même grille que les box : 4 colonnes égales */
  .header-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    align-items: start; 
  }
  .header-container .column:nth-child(1) {
    text-align: left;    /* "Caroline Romão" ferré à gauche */
  }
  
  .header-container .column:nth-child(2) {
    text-align: left;    /* vide ou autre contenu, aligné à gauche si tu en mets */
  }
  
  .header-container .column:nth-child(3) {
    text-align: left;    /* "Work" aligné à gauche de la 3e colonne */
  }
  
  .header-container .column:nth-child(4) {
    text-align: right;   /* "About" ferré à droite */
  }

  .about-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    align-items: start; 
  }
  .about-container .column:nth-child(1) {
    text-align: left;    /* "Caroline Romão" ferré à gauche */
  }
  
  .about-container .column:nth-child(2) {
    text-align: left;    /* vide ou autre contenu, aligné à gauche si tu en mets */
  }
  
  .about-container .column:nth-child(3) {
    text-align: left;    /* "Work" aligné à gauche de la 3e colonne */
  }
  
  .about-container .column:nth-child(4) {
    text-align: left;   /* "About" ferré à droite */
  }

.column {
  text-align: center;
}


main {
  position: relative;
}

.box-container {
  column-count: 4;      
  column-gap: 10px;     /* espace entre colonnes */
}


.box {
  break-inside: avoid;   /* empêche la coupure dans la colonne */
  margin-bottom: 15px;   /* espace vertical entre projets */
}

.box:hover .box-title {
  color: #ff5cce;
}


.box img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}
.box img:hover {
  transform: scale(1.03);
  transition: transform 0.5s ease;
}

.box-title {
  margin: 0; /* Remove default margins */
  margin-top: 5px; /* Use a negative margin to reduce the space */
}

.break {
  break-before: column;  /* force l’élément suivant à commencer dans la colonne suivante */
  width: 100%;
  height: 0;
}

body.Couleurs-page {
  background-color: #ffffff; 
}


.image-box {
  width: 100%; /* Set the width to 100% of the container */
  height: auto; /* Maintain a 4:3 aspect ratio */
  overflow: hidden;
  margin-bottom: 10px;
}

.image-box img {
  width: 100%; /* Make the image fill the box width */
  height: 100%; /* Make the image fill the box height */
  object-fit: cover; /* Ensure the image covers the box without distortion */
}
.image-box video {
  width: 100%; /* Make the image fill the box width */
  height: 100%; /* Make the image fill the box height */
  object-fit: cover; /* Ensure the image covers the box without distortion */
  
}

.vertical-video video {
  width: auto;          
  max-width: 50vw;      
  max-height: 85vh;     
  object-fit: contain;  
  display: block;
  margin: 40px auto;    /* 40px en haut et en bas, centré horizontalement */
}

.project-info 
{
  margin-top: 10px;
  text-align: justify;        /* texte ferré à gauche */
  max-width:48.5% ;      
  line-height: 0.9em;      
}

.about-info 
{
  margin-top: 10px;
  text-align: justify;        /* texte ferré à gauche */
  max-width:48.5% ;    
  margin-left: 10px;
  margin-right: 10px;   
  line-height: 0.9em;   
}

p1 {
  font-family: "RomainduRoiMono-06-03-Regular";
  font-size: 0.75rem;
  line-height: 0.9em;   

}

.go-up-container {
  display: flex;
  justify-content: space-between; /* gauche / droite */
  align-items: center;
  margin-top: 20px;
}

/* flèche retour menu (gauche) */
.go-up-back {
  font-family: "RomainduRoiMono-06-03-Regular";
  font-size: 1rem;
}

/* flèche vers le haut (droite) */
.go-up {
  font-family: "RomainduRoiMono-06-03-Regular";
  font-size: 1rem;
}

::selection {
  background: #ff5cce;  /* même rose que le hover */
  color: #ffffff;       /* texte blanc lisible sur le rose */
}

/* Pour Safari / anciens WebKit */

::-moz-selection {
  background: #ff5cce;
  color: #ffffff;
}

/* Voile flou pour la transition entre pages */
.page-overlay {
  position: fixed;
  inset: 0;               
  background-color: #ffffff;  /* top:0; right:0; bottom:0; left:0; *//* léger voile blanc, ajuste si tu veux */
  backdrop-filter: blur(10px);          /* flou de ce qui est derrière */
  -webkit-backdrop-filter: blur(10px);  /* Safari */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;       /* durée de la transition */
  z-index: 9999;
}
html {
  scroll-behavior: smooth;
}
/* état actif : voile visible et flouté */
.page-overlay.active {
  opacity: 1;
}

@media (max-width: 1200px) {
  .break-full {
    display: none;
  }
  

  .box-container {
    column-count: 2;     
  }

}
@media (max-width: 850px) {

  body {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 15px;
    margin-right: 15px;
  }
  
  .about-container {
    display:contents;
    grid-template-columns: repeat(1);
  }
.project-info 
{
  max-width:100% ;    
  line-height: 0.75em; 
}
.about-info 
{
  max-width:100% ; 
  line-height: 0.75em; 
}
.header-container {

  font-size:  0.75rem; 
}

a {
  font-size: 0.75rem;  
}
p {
  font-size: 0.65rem; 
}
p1 {
  font-size: 0.65rem; 
}
.image-box {
  margin-bottom: 5px;
}
  .vertical-video video {
    width: 100%;      /* pleine largeur du viewport / du conteneur */
    max-width: 100vw; /* au cas où */  
    margin: 0px auto; 
  }
}