@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('fonts/NHG-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Haas Grotesk Regular';
  src: url('fonts/NHG-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

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

body {
    font-family: 'Neue Haas Grotesk', sans-serif;
    font-size: 20px;
    background-color: white;
    color: #333;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    overflow-y: scroll;
}

::-webkit-scrollbar {
  display: none !important;
}

.wip {
    position:absolute;
    top:45vh;
    width:100%;
    text-align: center;
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 10;
}

.header-container {
    max-width: 100%;
    padding: 12px 24px 12px 24px;
    transition: all 0.2s ease;
}

#title {
    transition: all 0.2s ease;
}

#title:hover{
    opacity: 30%;
}

header h1 {
    display: inline;
    font-size:inherit;
    font-weight:inherit;
}

nav {
    float: right;
}

nav a {
    color: #333;
    float:right;
    text-decoration: none;
    cursor:crosshair;
}

header a {
    text-decoration:none;
    color:#333;
    cursor:crosshair;
}

#goBack {
    position:absolute;
    right:120px;
    transition: all 0.2s ease;
}

#goBack:hover {
    opacity:30%;
}

.h-filet {
    height: 5px; /* Épaisseur de la ligne */
    background-image: radial-gradient(circle, #333 1.5px, transparent 1.5px);
    background-size: 8px 8px; /* Largeur d'un point et espace entre eux */
    background-repeat: repeat-x;
    margin-bottom:12px;
    margin-left:24px;
    margin-right:24px;
}

/* Grille des projets */
main {
    margin-top: 54px; /* Décale le contenu sous le header fixe */
    padding-bottom: 60px; /* Espace pour ne pas que le footer recouvre le contenu */
}

.projects-feed {
    padding:0px 24px 0px 24px;
    position:relative;
    column-count:3;
    gap:12px;
}

.project-card {
    background-color: #f4f4f4;
    margin-bottom:12px;
}

.project-card img {
  width: 100%;
  height: auto;
  display: block;
}

.project-card:hover {
}

/* Footer fixé en bas de la page */
.footer-container {
    max-width: 100%;
    padding: 12px 24px 20px 24px;
}

.f-filet {
    height: 5px; /* Épaisseur de la ligne */
    background-image: radial-gradient(circle, #333 1.5px, transparent 1.5px);
    background-size: 8px 8px; /* Largeur d'un point et espace entre eux */
    background-repeat: repeat-x;
    margin-top:12px;
    margin-left:24px;
    margin-right:24px;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    color: #333;
    z-index: 10;
}

#mailto {
    text-decoration: none;
    color:#333;
    transition: all 0.2s ease;
}

#mailto:hover {
    opacity: 30% !important;
    cursor:crosshair;
}

.logo {
    position: absolute;
    text-align: right;
    right:24px;
    z-index:-20;
}

.logo img {
    width:5.5%;
}

footer p {
    float:left;
}

#num{
    padding-left:64px;
}

/* Page Projet */

/* Carousel */
.carousel-container{
    padding:0;
}

.carousel {
    position: absolute;
    top: 56px;
    bottom:0;
    width: 100%;
    height: calc(100vh - 112px);
}

.carousel-cell {
  width: auto;
  margin-right:12px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-cell img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* Flickity Buttons */
.flickity-button {
    background: transparent !important;
    opacity:0;
}

.flickity-button:hover:active {
    background: transparent !important;
    opacity:0;
}

.flickity-prev-next-button {
    width: 50% !important;
    height: 100% !important;
    background-color:aqua;
    opacity:0;
}

.flickity-prev-next-button:hover:active {
    opacity:0;
}

.flickity-prev-next-button.next {
    cursor:e-resize !important;
}

.flickity-prev-next-button.previous {
    cursor:w-resize !important;
}

/*footer*/
#index-footer {
    position: fixed;
    width: 100%;
    height: 69px;
    background: #fff;
    transition: transform 0.5s ease;
    z-index: 10;
}

#sliding-footer {
    position: fixed;
    bottom: -100px;
    width: 100%;
    height: 169px;
    background: #fff;
    transition: transform 0.5s ease;
    z-index: 10;
}

#sliding-footer.open {
    transform: translateY(-100px);
}

.footer-projet {
    padding: 12px 24px 20px 24px;
}

.hidden-info {
    margin-top: 24px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

#sliding-footer.open .hidden-info {
    opacity: 1;
    max-height: 130px;
}

#toggle-info{
    float:left;
    width:30%;
    text-align:left;
    z-index:-10;
    cursor:crosshair;
    transition: all 0.2s ease;
}

#toggle-info:hover{
    opacity: 30%;
}

.sliding-footer img{
    position:absolute;
    padding-right:24px;
}

.hidden-info {
    width:100%;
    margin-top:8px;
    padding:0 24px 20px 24px;
    text-align: center;
}

.col-1 {
    float:left;
    width:25%;
    padding-right:5%;
    text-align:left;
}

.col-2 {
    float:left;
    width:45%;
    padding-right:5%;
    text-align:left;
    z-index:-10;
}

.col-3 {
    float:right;
    width:30%;
    text-align:left;
    z-index:-10;
}

#credits {
    margin-top:9px;
    padding-left:12px;
}

.small {
    font-size:14px;
    line-height:1.2;
}

.regular {
    font-family: 'Neue Haas Grotesk Regular', sans-serif;
}



/*about*/

.page.about {
    position: fixed;
    top: 0;
    right:-100%;
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #000;
    transition: right 0.5s;
    padding: 48px 0;
    box-sizing: border-box;
    overflow-y: auto;
}

.page.about.open {
    right: 0;
}

.about.open {
    transform: translateX(0);
}

.intro {
    font-family: 'Neue Haas Grotesk Regular', sans-serif;
    font-size:40px;
    padding:24px 24px 0px 24px;
    margin-bottom:24px;
}

.about-info {
    padding:12px 24px 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.info-col {
    border-top: solid 1px;
    break-inside: avoid;
}

.regular {
    margin-top:4px;
}

.info-title {
    margin-top:8px;
    margin-bottom:8px;
}

/* About Toggle Button */
#about-toggle {
    position: relative;
    transition: all 0.2s ease;
    z-index:1000;
}

#about-toggle.open {
}

#about-toggle:hover {
    opacity:30%;
}

/* Transition adjustments for About */
.page.about.open {
    right: 0;
}


#about-overlay {
    position: fixed;
    top: 0;
    left: -100%; /* Caché hors de l'écran */
    width: 100%;
    height: 100%;
    background: white;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease-in-out;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

#about-overlay.active {
    transform: translateX(-100%); /* Glissement fluide */
}

#iframe-container {
    flex: 1;
    overflow-y: auto;
}

#about-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#close-about {
    position: absolute;
    top: 12px;
    right: 24px;
    font-size: 20px;
    font-family: 'Neue Haas Grotesk', sans-serif;
    color: #333;
    background: none;
    border: none;
    cursor: crosshair; /* Même curseur que "About" */
    transition: all 0.2s ease;
}

#close-about:hover {
    opacity: 30%;
}
    
    
/* MOBILE */
    
@media(max-width:850px){
    .projects-feed {
        column-count:1;
    }
    
    body {
    font-size:18px;
    }
    
    .logo {
    position: absolute;
    text-align: right;
    right:24px;
    z-index:-20;
    }
    
    .logo img {
    width:10%;
    }
    
    .carousel-cell {
    width: 100%;
    padding:0 16px 0 16px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    
    .col-2 {
    display:none;
    }
    
    .intro {
    font-size:28px;
    }
    
    .about-info {
    display:inline-block;
    width:100%;
    }
    
    .info-col {
    padding-bottom:32px;
    }
    
}