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

  /* Kawaii palette */
  --bg: #fff6fb;
  /* very pale pink */
  --primary: #caa3ff;
  /* kawaii violet */
  --secondary: #ffbdd6;
  /* pale pink accent */
  --card-bg: #fff9ff;
  /* ultra pale card background */
  --text: #3a0d3a;
  /* deep purple text for contrast */
  --muted-text: rgba(58, 13, 58, 0.85);
  --nav-link-on-primary: #ffffff;
  --footer-bg: #efd9ff;
}

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

body {
  font-family: "Inter", sans-serif;
  background: var(--bg);
  color: var(--text);
  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: var(--primary);
  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: var(--nav-link-on-primary);
  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.webp");
  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: var(--primary);
}

.stroke {
  -webkit-text-stroke: 2px var(--text);
  color: var(--primary);
}

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

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


/* 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;
  color: var(--muted-text);
}


/* 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: var(--bg);
  /* 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(58, 13, 58, 0.12);
  /* 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(58, 13, 58, 0.92);
  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(58, 13, 58, 0.12);
}

/* Croix de fermeture */
.close-viewer {
  position: absolute;
  top: 20px;
  right: 30px;
  color: var(--nav-link-on-primary);
  font-size: 40px;
  cursor: pointer;
}

/* SECTION CARROUSEL */
.carousel-section {
  height: calc(var(--vh) * 100);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg);
  margin-top: 60px;
  position: relative;
  overflow: hidden;
  /* Constrain 3D content */
}

.scene {
  width: 240px;
  height: 320px;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel {
  position: absolute;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  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: var(--card-bg);
  /* The white/pale box */
  color: var(--text);
  /* Dark purple 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 rgba(202, 163, 255, 0.25);
  /* 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: var(--card-bg);
  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 rgba(58, 13, 58, 0.08);
  background-color: var(--footer-bg);
}

.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: var(--bg);
}

/* 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: var(--card-bg);
  /* Fond pale pour kawaii */
}

/* 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;
  cursor: pointer;
}

/* Clickable / interactive images */
#main-member-img,
.exhibit-img img,
.thumbnail-grid img,
.stack-section img,
.viewer-content,
#clickable-orga {
  cursor: pointer;
}

/* Ensure main member image sizing when inline styles are removed */
#main-member-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Clickable orga image full width and rounded corners moved to CSS */
#clickable-orga {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* 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: var(--bg);
  /* Pale pink background */
}

.section-title {
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 60px;
  color: var(--primary);
}

.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(202, 163, 255, 0.06);
  /* Soft violet hover */
}

/* 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: var(--secondary);
  /* Pale pink highlight */
}

/* 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;
  color: var(--muted-text);
  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 */
  }
}