@charset "utf-8";
/* =============================== */
/* FONDU PAGE                      */
/* =============================== */

html, body {
    background: #f7f7f7;
}

body {
    opacity: 0;
    transition: opacity 0.6s ease;
}

body.visible {
    opacity: 1;
}

body.fadeout {
    opacity: 0;
}




/* =============================== */
/* POLICES INTER                   */
/* =============================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Thin.woff2') format('woff2');
  font-weight: 100;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-ExtraLight.woff2') format('woff2');
  font-weight: 200;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
}

/* =============================== */
/* BASE GÉNÉRALE                   */
/* =============================== */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

html {
  scroll-behavior: auto;
}

body {
  color: #333;
  font-family: 'Inter', sans-serif;
  background: #f7f7f7;
  position: relative;
  overflow-x: hidden;
}

/* =============================== */
/* TITRES & TEXTES                 */
/* =============================== */

h1, h2, h3, h4 {
  font-weight: 200;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.08em;
  
}

h1 {
    font-size: 46px;
    color: #398717;
}

h2 {
    font-size: 32px;
    opacity: 0.9;
	color: #398717;
	
}

main {
  margin-top: 140px;margin-bottom:80px;
	padding: 0 20px;
    box-sizing: border-box;
}

main a {
  color: #333;
  text-decoration: none;
}



p {
  font-size: 17px;
  line-height: 1.7;
  font-weight: 200;
  margin-bottom: 16px;
  color: #333;
}


/* =============================== */
/* SECTIONS ANNÉES                 */
/* =============================== */

.expo-year {
    max-width: 1540px;
    margin: 0 auto 80px auto;
}

.expo-year h2 {
    margin-bottom: 14px;
}

/* =============================== */
/* TIROIRS                         */
/* =============================== */

.expo-item {
    border-bottom: 1px solid rgba(0,0,0,0.42); /* ✔ ta bordure */
    padding: 12px 0;
}

.expo-header {
    width: 100%;
    background: none;
    border: none;
    padding: 0 0 5px 0;   /* espace sous le titre */
    margin: 0;
    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 22px;
    font-weight: 200;
    letter-spacing: 0.04em;
    

}

.expo-header:hover .expo-title {
    color: #398717;
}

.expo-header:active .expo-title {
    color: #1f4a0d;
}


.expo-title {
    font-size: 20px;
    font-weight: 200;
    letter-spacing: 0.04em;
    opacity:1;
    text-align: left;
}




.expo-toggle {
    font-size: 32px;
    font-weight: 200;
    color: #8a8682;
    display: inline-block;
    transition: transform 0.18s ease-out; /* ✔ plus rapide, plus fluide */
    will-change: transform; /* ✔ optimisation GPU */
}

/* Hover : + → X */
.expo-header:hover .expo-toggle {
    transform: rotate(45deg);
}

/* Ouvert : reste X */
.expo-item.open .expo-toggle {
    transform: rotate(45deg);
}



/* Contenu caché */
.expo-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

/* Contenu visible */
.expo-item.open .expo-content {
    max-height: 2000px; /* assez grand pour tout contenir */
    opacity: 1;
    margin-top: 14px;
}

.expo-content img {
    width: auto;
    height: auto;
    max-width: min(900px, 100%); /* largeur max comme avant, sans jamais dépasser le conteneur */
    max-height: 600px;      /* limite la hauteur */
    object-fit: contain;    /* affiche l'image entière, sans recadrage (portrait ou paysage) */
    margin: 20px auto;      /* centré horizontalement */
    display: block;
}

.expo-item.open .expo-content a {
    color:#cc3300 !important;
    position: relative;      /* ✔ nécessaire */
    display: inline-block;   /* ✔ nécessaire */
}

.expo-item.open .expo-content a:hover {
    color:#f00 !important;
}

.expo-item.open .expo-content a::after {
  content: "";
  position: absolute;
  right: -22px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0,0,0,0.5);
  border-bottom: 2px solid rgba(0,0,0,0.5);
  transform: translateY(-40%) translateY(6px) rotate(-45deg);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.expo-item.open .expo-content a:hover::after {
  opacity: 0.8;
  transform: translateY(-50%) rotate(-45deg);
}


/* =============================== */
/* Lecteur audio  */
.audio-player {
    margin-top: 20px;
}

.audio-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;margin:20px;
    gap: 6px;
    font-size: 1.1rem;
    color: rgba(0,0,0,0.65);
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.15); /* fine bordure gris clair */
    padding: 0.55rem 1.6rem;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.audio-nav:hover {
    background: rgba(255,255,255,1);
    color: #c40000; /* rouge */
    border-color: #c40000;
}

.audio-nav .arrow {
    font-size: 1.4rem;
    line-height: 1;
}

.audio-nav .label {
    font-size: 0.95rem;
    letter-spacing: 0.4px;
}

.img-mentions-legales img {
    display: block;
    margin: 40px auto;
}

/* =============================== */
/* TABLETTE 601–1400px             */
/* Même zone dédiée que sur les    */
/* autres pages du site, pour      */
/* harmoniser les points de rupture. */
/* =============================== */

@media (max-width: 1400px) and (min-width: 601px) {

  /* même logique que mobile : padding sur les sections */
  .expo-year {
      padding: 0 40px;
      box-sizing: border-box;
  }

  /* titres d'année */
  .expo-year h2 {
      font-size: 28px;
      margin-bottom: 12px; /* réduit par rapport au desktop */
  }

  /* header du tiroir */
  .expo-header {
      font-size: 20px;
      padding-bottom: 6px; /* réduit */
  }

  /* titre de l'expo */
  .expo-title {
      font-size: 18px;
  }

  /* croix */
  .expo-toggle {
      font-size: 26px;
  }

  /* espacement entre items */
  .expo-item {
      padding: 12px 0; /* réduit */
  }

  /* contenu */
  .expo-content {
      margin-top: 10px; /* réduit */
  }

  .expo-content p {
      font-size: 17px;
      line-height: 1.6;
  }
}




/* =============================== */
/* MOBILE ≤600px                   */
/* Même seuil que sur les autres   */
/* pages du site.                  */
/* =============================== */

@media (max-width: 600px) {

  /* On enlève le padding du main */
  main {
      padding: 0;
  }

  /* On met le padding sur chaque section */
  .expo-year {
      padding: 0 20px;
      box-sizing: border-box;
  }

  h1 {
      font-size: 36px;
  }

  .expo-year h2 {
      font-size: 24px;
      margin-bottom: 8px;
  }

  .expo-header {
      font-size: 18px;
      padding-bottom: 0px;
  }

  .expo-title {
      font-size: 20px;
  }

  .expo-toggle {
      font-size: 22px;
  }

  .expo-item {
      padding: 8px 0;
  }

  .expo-content {
      margin-top: 8px;
  }
	.expo-content p {
      font-size: 16px;line-height: 1.6;text-align: justify;
  }

  /* .expo-content img hérite de la règle générale (width:auto, object-fit:contain) :
     max-width: min(900px, 100%) suffit à la contraindre sur mobile, sans recadrage. */
}

/* =============================== */
/* DESKTOP >1400px                 */
/* Sous le titre : image(s) à      */
/* gauche, texte (+ lecteur audio  */
/* le cas échéant) à droite.       */
/* Tablette et mobile restent      */
/* inchangés (empilés, gérés       */
/* ci-dessus). Le placement par    */
/* colonne explicite (plutôt que   */
/* "order") gère aussi bien un     */
/* item à une seule image          */
/* (expositions) qu'un item à      */
/* plusieurs images + lecteur      */
/* audio (interviews) : toutes les */
/* images s'empilent en colonne 1, */
/* tout le reste en colonne 2.     */
/* =============================== */

@media (min-width: 1401px) {

    .expo-item.open .expo-content {
        display: grid;
        grid-template-columns: minmax(240px, 380px) 1fr;
        column-gap: 50px;
        align-items: start;
    }

    .expo-content img {
        margin: 0 0 16px 0;    /* espacement entre images empilées en colonne 1 */
        max-height: 520px;
    }

    /* Positionnement explicite (colonne ET ligne) pour la première image et le
       premier paragraphe : ça les aligne en haut l'un de l'autre quel que soit
       leur ordre dans le HTML (le texte précède l'image dans le code de cette
       page). Les éléments suivants (2e image, paragraphes suivants, lecteur
       audio) restent en placement automatique : ils s'empilent normalement
       dans leur colonne, sous le premier élément. */
    .expo-content img:first-of-type {
        grid-column: 1;
        grid-row: 1;
    }

    .expo-content img:nth-of-type(n+2) {
        grid-column: 1;
    }

    .expo-content p:first-of-type {
        grid-column: 2;
        grid-row: 1;
    }

    .expo-content p:nth-of-type(n+2),
    .expo-content .audio-player {
        grid-column: 2;
    }

    .expo-content p {
        margin-top: 0;
    }
}
@media (max-width: 1400px) {
    .img-mentions-legales {
        display: none !important;
    }
}