/* RESET */
:root {
  --vh: 1vh; /* Will be set by JavaScript to fix viewport height on mobile */
}

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

body {
  font-family: "Inter", sans-serif;
  background: #632713;
  color: #fff;
  overflow-x: hidden;
}


/* NAVBAR */
.navbar {
  position: fixed; /* Keep it fixed relative to the screen */
  width: 100%;
  top: 0;
  left: 0;         /* Ensure it starts from the very left */
  padding: 24px 60px;
  background: #F8A91F;
  backdrop-filter: blur(10px);
  z-index: 9999;   /* Higher value ensures it stays above all other content */
}
.logo img {
  height: 90px;    /* Adjust this value to your liking */
  width: auto;     /* Keeps the aspect ratio intact */
  vertical-align: middle; /* Aligns it nicely with the text */
  margin-right: 10px;    /* Adds some space between the logo and "ASINT 2027" */
  cursor: wait; /* pourquoi pas */
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  height: 40px;
}

.nav-links a {
  margin-left: 40px;
  font-size: 12px;
  letter-spacing: 2px;
  text-decoration: none;
  color: white;
  transition: 0.3s;
}

.nav-links a:hover {
  opacity: 0.6;
}

/* HERO */
.hero {
  height: calc(var(--vh) * 100);
  display: flex;
  align-items: center;
  padding: 0 80px;

  background-image: url("images/clip2.jpeg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.hero-inner {
  width: 100%;
}

.hero-text h1 {
  font-size: clamp(60px, 10vw, 160px);
  line-height: 0.9;
  color: white;
}

.stroke {
  -webkit-text-stroke: 2px black;
  color: white;
}

.hero-social {
  margin-top: 60px;
}

.hero-social a {
  display: inline-block;
  margin-right: 40px;
  text-decoration: none;
  border-bottom: 1px solid white;
  padding-bottom: 6px;
  font-size: 20px;
  color: white;
}


/* SECTION TEXTE */
.about-text-section {
  padding-top: 200px; /* Augmentez cette valeur (ex: 150px ou 200px) */
  padding-bottom: 80px;
  text-align: center;  /* Centre le texte horizontalement */
  display: flex;
  justify-content: center;
}

.about-text-container {
  max-width: 800px;    /* Limite la largeur pour la lisibilité */
}

.about-text-container h2 {
  font-size: 48px;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.about-text-container p {
  font-size: 20px;
  line-height: 1.6;
  opacity: 0.9;
}


/* Style pour la séparation de l'organigramme */
.orga-full-view {
  padding: 100px 20px; /* Crée l'espace avec le Thème (haut) et le Carousel (bas) */
  background: #632713;  /* Garde la couleur de fond du site */
  display: flex;
  justify-content: center;
  align-items: center;
}

.orga-container {
  max-width: 1200px;    /* Empêche l'image d'être trop immense sur très grand écran */
  width: 100%;  
  text-align: center;
}

.orga-container img {
  width: 100%;          /* S'adapte à la largeur du conteneur */
  height: auto;
  border-radius: 15px;  /* Optionnel : petit arrondi pour le style */
  box-shadow: 0 20px 50px rgba(0,0,0,0.3); /* Donne du relief par rapport au fond */
}

/* Ajustement pour mobile */
@media (max-width: 768px) {
  .orga-full-view {
    padding: 60px 15px; /* Réduit l'espace sur mobile */
  }
}

/* Fond noir de l'overlay */
.image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999; /* Très haut pour passer devant la navbar */
  display: none; /* Changé en 'flex' par le JS */
  align-items: center;
  justify-content: center;
}

/* Image en plein écran */
.viewer-content {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

/* Croix de fermeture */
.close-viewer {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}

/* SECTION CARROUSEL */
.carousel-section {
  height: calc(var(--vh) * 80);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #632713;
  margin-top: 60px;
}

.scene {
  width: 240px;
  height: 320px;
  perspective: 1000px;
}



.carousel {
  position: absolute;
  transform-style: preserve-3d;
  width: 0; 
  height: 0;
  /* This ensures the 'axis' of rotateY(rotateY) is the center of the box */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1.2s cubic-bezier(0.25, 1.5, 0.5, 1);
}

/* Roues du carousel principal */
.carousel-wheel {
  position: absolute;
  width: 240px;
  height: 320px;
  transform-style: preserve-3d;
  cursor: crosshair;
  /* Positionné par le JS */
}

/* Sous-carousel à l'intérieur de chaque roue */
.carousel-wheel .sub-carousel {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.25, 1.5, 0.5, 1);
}

.carousel-wheel .sub-carousel img {
  position: absolute;
  width: 240px;
  height: 320px;
  object-fit: cover;
  border-radius: 10px;
  cursor: crosshair;
  /* Positionné par le JS */
}

/* EXHIBITIONS */



.exhibitions-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* This aligns the text to the beginning of the image */
}

.entete {
  padding: 20px; /* Increased padding for more space around the box */
  background-color: transparent; /* Let the section background show through */
  display: flex;
  justify-content: center;
}

/* The Menu as a White Box */
#pole-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  
  white-space: normal;
  background-color: #ffffff; /* The white box */
  color: #000000;            /* Black text for readability */
  
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  
  width: fit-content;           /* Let the box adjust to the text size */
  min-width: 260px;      /* Prevents it from being too tiny for short words */
  padding: 15px 45px 15px 25px; 
  
  border: none;
  border-radius: 4px;       /* Sharp but slightly rounded corners */
  box-shadow: 0 1px 15px #F8A91F; /* Adds depth */
  
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-overflow: visible;
}

/* Hover effect to make it feel "clickable" */
#pole-select:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  background-color: #f0f0f0; /* Slight grey on hover */
}

.exhibitions {
  padding-bottom: 200px;
}

.exhibitions-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Keep the 50/50 split */
  gap: 80px;
  max-width: 1200px;      /* Prevents the section from becoming too wide */
  margin: 0 auto;         /* Centers the entire grid on the page */
  align-items: center;    /* Vertically aligns the left and right sides */
}

.exhibit-img {
  width: 100%;       /* Takes full width of the left column */
  max-width: 450px;  /* Limits the size on large screens */
  height: auto;      /* Keeps the image proportional */
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  justify-content: center;
}

/*
.exhibit-img img {
  width: 100%;
  height: 600px;     
  object-fit: cover;
}
*/

.exhibit-title {
  font-size: 42px;
  margin-bottom: 40px;
  opacity: 0.4;
  transition: 0.4s;
}

.exhibit-title:hover {
  opacity: 1;
}

/* COLLECTIONS */
.collections {
  padding: 200px 80px;
}

.collections-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.collection-card {
  height: 400px;
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
  transition: 0.4s;
}

.collection-card:hover {
  transform: scale(1.02);
}

.collection-overlay {
  position: absolute;
  bottom: 30px;
  left: 30px;
}

.collection-overlay div {
  font-size: 14px;
  letter-spacing: 1px;
}

.collection-overlay span {
  font-size: 12px;
  opacity: 0.6;
}

/* FOOTER */
.footer {
  padding: 100px 80px;
  border-top: 1px solid #222;
  background-color: #41190c;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
}

.footer-label {
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  opacity: 0.5;
}

/* RESPONSIVE */
@media (max-width: 1000px) {

  .about-container,
  .exhibitions-container {
    grid-template-columns: 1fr;
  }

  .collections-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero {
    padding: 0 40px;
  }

}

@media (max-width: 768px) {
  /* Hero background size based only on device width (no cropping) */
  .hero {
    padding: 0 18px;
    background-size: 200% auto;
    background-position: top center;
  }

  /* Exhibitions: more readable on phone */
  .exhibitions {
    padding: 70px 16px;
  }

  .exhibitions-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .exhibit-img {
    max-width: 100%;
  }

  .entete p {
    letter-spacing: 2px;
  }

  /* Sticky photos: almost full width on phone */
@media (max-width: 768px) {
  .stack-section {
    display: flex;
    flex-direction: column; /* Force vertical flow */
    align-items: center;
    padding: 0 20px;
    height: auto !important; /* Allow the section to grow with the photos */
    margin-top: 120px;       /* Prevent navbar overlap */
    overflow: visible;      /* Crucial for sticky positioning to work */
  }

  .photo-card {
    position: sticky;        /* Re-enable sticky for the stacking effect */
    top: 100px;             /* Distance from top of screen when it 'sticks' */
    width: 90vw !important;
    height: 60vh !important; /* Give it a consistent height */
    margin-bottom: 20vh;    /* Create space for the next card to slide up */
    
    /* REMOVE THESE LINES FROM YOUR CSS: */
    /* left: 50% !important; */
    /* top: 50% !important; */
    /* transform: translate(-50%, -50%) !important; */
    
    /* Ensure cards are visible */
    display: block !important;
    opacity: 1 !important;
  }
}
  
  .card-label {
    right: 14px;
    top: 14px;
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 7px 10px;
  }
}


/* Conteneur principal */
.stack-section {
  padding: 0 80px; /* Aligné avec votre design actuel */
  background: #632713;
}

/* Chaque carte photo */
.photo-card {
  position: sticky;
  top: 100px; /* Espace pour la navbar (environ 80px) + marge */
  height: calc(var(--vh) * 80); /* Hauteur de l'image */
  margin-bottom: 100px; /* Espace entre les photos pendant le scroll */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
  background: #1a1a1a; /* Fond de secours */
}
/* Ensure the container can host absolute elements */


/* Style for the top-right text */
.card-label {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 10; /* Ensures it stays above the image */
  
  /* Styling to match your aesthetic */
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent bg for readability */
  padding: 8px 12px;
  border-radius: 4px;
  backdrop-filter: blur(5px);
}
.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Optionnel : Petit effet d'ombre pour bien voir l'empilement */
.photo-card {
  box-shadow: 0 -20px 50px rgba(0,0,0,0.5);
}


/* poles */

.thumb {
  opacity: 0.6;
  transition: 0.3s;
  border: 2px solid transparent;
}

.thumb:hover {
  opacity: 1;
  border-color: white;
}

#description-container {
  transition: opacity 0.3s ease-in-out;
}

.description-container, .main-img {
  transition: opacity 0.3s ease-in-out;
}

.member-text {
  white-space: pre-line; /* Ensures your \n breaks work */
}

/* Fullscreen image overlay */
.image-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2000;
}

.image-overlay.open {
  display: flex;
}

.image-overlay-inner img {
  max-width: min(90vw, 900px);
  max-height: calc(var(--vh) * 90);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}










/* Container for the whole events section */
.events-list-section {
  padding-top: 40px;
  padding-bottom: 200px;
  background: #632713; /* Matches your body background */
}

.section-title {
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 60px;
  color: #F8A91F; /* Matches your navbar color */
}

.events-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* Flexbox row for date and description */
.event-row {
  display: flex;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease;
}

.event-row:hover {
  background: rgba(255, 255, 255, 0.03); /* Subtle hover effect */
}

/* Left side: Date */
.event-date {
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.event-date .day {
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.event-date .month {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #F8A91F; /* Highlight the month */
}

/* Right side: Description */
.event-info {
  margin-left: 60px;
}

.event-info h3 {
  font-size: 24px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.event-info p {
  font-size: 16px;
  opacity: 0.7;
  line-height: 1.5;
}

/* Style for past events */
.event-row.past {
  opacity: 0.4; /* Makes the text and date look faded */
  filter: grayscale(80%); /* Optional: removes color for a more "gone by" feel */
  pointer-events: none; /* Optional: makes them unclickable if they were links */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .events-list-section {
    padding: 60px 20px;
  }
  
  .event-info {
    margin-left: 30px;
  }
}










/*pour telephone*/
@media (max-width: 768px) {
  .navbar {
    padding: 15px 20px; /* Reduce padding on mobile */
  }
  
  .nav-container {
    flex-direction: column; /* Stack logo and links vertically */
    height: auto;
  }

  .nav-links a {
    margin: 5px 10px; /* Smaller margins for links */
    font-size: 10px;
  }
  
  .logo img {
    height: 50px; /* Shrink logo for small screens */
  }
}
@media (max-width: 768px) {
  .exhibitions-container {
    flex-direction: column; /* Stack image and description */
  }

  .exhibitions-left, .exhibitions-right {
    width: 100%; /* Take full width */
  }

  #pole-select {
    max-width: 100%; /* Let the white box fill the screen */
  }

  .thumbnail-grid {
    justify-content: center; /* Center the member circles */
  }
}
@media (max-width: 480px) {
  .event-row {
    flex-direction: column; /* Stack date above text */
    align-items: flex-start;
  }

  .event-info {
    margin-left: 0; /* Remove side margin */
    margin-top: 15px;
  }
  
  .event-date {
    min-width: auto; /* Remove fixed width */
  }
}
/* --- GLOBAL RESPONSIVE OVERRIDE --- */
@media (max-width: 1024px) {
    .navbar { padding: 20px 40px; }
    .nav-links a { margin-left: 20px; }
    .footer { padding: 80px 40px; }
}

@media (max-width: 768px) {
    /* Navbar: Stack or Simplify */
    .nav-container {
        flex-direction: column;
        height: auto;
        gap: 10px;
    }
    .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .nav-links a {
        margin-left: 0;
        font-size: 10px;
    }
    .logo img { height: 60px; }

    /* Main Content Spacing */
    main { padding-top: 140px; } /* Prevent navbar overlap */

    /* Footer: Stack Inner Items */
    .footer-inner {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
}
@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 15vw; /* Scales with screen width */
        line-height: 1;
    }
    .about-text-container h2 {
        font-size: 2rem;
    }
    .hero-social {
        bottom: 20px;
        right: 20px;
        flex-direction: column;
        align-items: flex-end;
    }
}
@media (max-width: 768px) {
    .exhibitions-container {
        flex-direction: column; /* Stacks the pôle content */
    }
    .exhibitions-left, .exhibitions-right {
        width: 100%;
    }
    .exhibitions-right {
        padding-top: 30px;
    }
    #pole-select {
        max-width: 100%; /* White box fills the screen */
    }
    .thumbnail-grid {
        justify-content: center; /* Center member circles on mobile */
    }
    .thumbnail-grid img {
        width: 70px !important; /* Smaller thumbnails for mobile */
        height: 70px !important;
    }
}
@media (max-width: 600px) {
    .event-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0;
    }
    .event-info {
        margin-left: 0;
        margin-top: 15px;
    }
    .event-date {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }
    .event-date .day { font-size: 30px; }
}
@media (max-width: 768px) {
    #clickable-orga {
        width: 100% !important;
        height: auto !important;
    }
    #full-image {
        width: 95vw; /* Ensure full-screen view doesn't clip */
    }
}