/* =============================================
   VARIABLES GLOBALES & RESET
   ============================================= */

:root {
  --vh: 1vh;          /* Valeur par défaut, recalculée en JS pour corriger le bug iOS */
  --bg: #6b2b00;      /* Couleur de fond principale (marron/brun foncé) */
  --primary: #ffd000; /* Couleur : jaune  */
  --secondary: #e92f22; /* Couleur secondaire : rouge */
  --card-bg: #fff9ff; /* Fond des cartes (blanc cassé légèrement rose) */
  --text: #ffffff;    /* Couleur de texte principale : blanc */
  --muted-text: rgba(255, 255, 255, 0.85); /* Texte atténué, légèrement transparent */
  --nav-link-on-primary: #000000; /* Couleur des liens sur fond jaune (noir pour contraste) */
  --footer-bg: #ffbb00; /* Fond du footer : jaune légèrement plus foncé */
}

/* Reset universel : supprime les marges/paddings par défaut du navigateur
   et utilise border-box pour que padding/border soient inclus dans la taille des éléments */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif; /* Police principale (Google Fonts) */
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden; /* Empêche le scroll horizontal non voulu */
}



/* =============================================
   NAVBAR
   ============================================= */


   .navbar__container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    background: var(--primary);
    z-index: 1000;
    width: 100%;
    margin: 0 auto; /*first : top and bottom, 2nd : left and right */
    padding: 0 50px;
    position: fixed;
}


.navbar__menu{
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
}

.navbar__item {
    height: 80px;
}

.navbar__links {
    color: #fff;
    text-decoration: none;
    height: 100%;
    padding: 0 1rem;
    display: flex;
    align-items: center;
}

.navbar__links:hover {
    color: #74554181;
    transition: all 0.3s ease;
}

.navbar__btn {
    display: flex;
    align-items: center;
}

.navbar__btn.mobile {
    display: none;
}

.navbar__btn.desktop {
    display: flex;
}

.button {
    display: flex;
    align-items: center;
    background: #582400;
    padding: 10px 20px ;
    border: none;
    border-radius: 4px;
    color:#fff;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.button:hover{
    background-color: #582400;
    transition: all 0.3s ease;
}

.navbar__toggle{
    display: none;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.logo img {
  height: 50px;
  margin-right: 10px;
}

@media screen and (max-width : 768px){
    .navbar__toggle{
        display: block;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color:#fff;
        z-index: 10;
        font-size:  1.5rem;
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
    }

    .navbar__menu{
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100% - 80px); /*pour ne pas être masqué par la navbar*/
        opacity: 0;
        transition: all 0.5s ease;
        background: var(--bg);
        z-index: 10;
        margin: 0 ;
    }

    .navbar__menu.active{
        left: 0;
        opacity: 1;
    }


    .navbar__links{
        text-align: center;
        padding: 1rem;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .navbar__item{
        width: 100%;
        display: flex;
        justify-content: center;
    } 

    /* Petit déjeuner bouton*/
    .navbar__btn.desktop {
        display: none;
    }

    .navbar__btn.mobile{
        display: flex;
        justify-content: center;
        padding-bottom: 2rem;
        width: 100%;
    }

    .button{
        width: 80%;
        height: 60px;
        justify-content: center;
    }
}



/* =============================================
   SECTION TEXTE "À PROPOS / THÈME"
   ============================================= */

.about-text-section {
  padding-top: 150px;   /* Grand espace en haut pour ne pas être caché par la navbar */
  padding-bottom: 50px;
  text-align: center;
  display: flex;
  justify-content: center; /* Centre le bloc de texte horizontalement */
}

.about-text-container {
  max-width: 800px; /* Limite la largeur pour une meilleure 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); /* Légèrement transparent pour hiérarchie visuelle */
}

/* =============================================
   FOOTER
   ============================================= */

.footer {
  background: var(--primary);
  padding: 40px 20px;
}

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

.footer-label {
  font-size: 12px;
  opacity: 0.6;
}

/* =============================================
   RESPONSIVE GLOBAL — TABLETTES
   ============================================= */

@media (max-width: 1000px) {
  
  .footer  { padding: 80px 40px; }  

  /* Passe les grilles 2 colonnes en 1 colonne */
  .about-container,

  /* La grille de 4 passe à 2 colonnes */
  .collections-grid {
    grid-template-columns: 1fr 1fr;
  }

}


  /* --- Effet "stack" de photos sur mobile --- */
  @media (max-width: 768px) { /* Note: media query imbriquée = redondante, peut être nettoyée */
    .stack-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 20px;
      height: auto !important;    /* Laisse la section grandir avec son contenu */
      margin-top: 120px;
      overflow: visible;          /* Indispensable pour que sticky fonctionne */
    }

    .photo-card {
      position: sticky;
      top: 100px;                 /* Colle sous la navbar lors du scroll */
      width: 90vw !important;
      height: 60vh !important;
      margin-bottom: 20vh;        /* Espace pour que la carte suivante glisse par dessous */
      display: block !important;
      opacity: 1 !important;
    }
  

  .card-label {
    right: 14px;
    top: 14px;
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 7px 10px;
  }
}




/* =============================================
   CURSEURS CLIQUABLES (éléments interactifs)
   ============================================= */

/* Tous ces éléments déclenchent l'overlay ou une action JS */
#main-member-img,
.exhibit-img img,
.thumbnail-grid img,
.stack-section img,
.viewer-content,
#clickable-orga {
  cursor: pointer;
}

/* Image principale d'un membre (dans la section pôles) */
#main-member-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}





/* =============================================
   RESPONSIVE GLOBAL — MOBILES (max 768px)
   ============================================= */

@media (max-width: 768px) {

  .about-text-section {
    padding: 15px 15px; /* Réduit l'espace sur mobile */
  } 

  .about-text-container p {
  font-size: 16px;
  line-height: 1.4; /*interligne*/
  color: var(--muted-text); /* Légèrement transparent pour hiérarchie visuelle */
}


  .logo img { height: 60px; }

  main {
    padding-top: 140px; /* Espace pour éviter que le contenu passe sous la navbar fixe */
  }

  /* Footer : colonnes empilées */

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 5px;
  }

  .about-text-container h2 { font-size: 25px; }

  #full-image {
    width: 95vw; /* Évite le débordement dans l'overlay */
  }
}