/* Réinitialisation et variables */
* { 
  box-sizing: border-box; 
}

:root {
  --color-primary-bg: #ADB8AB;
  --color-dark-bg: #4A5348;
  --color-text-light: #FFFFFF;
  --color-text-dark: #000000;
  --color-accent: #FF0000;
}

body { 
  background-color: var(--color-primary-bg); 
  color: var(--color-text-light); 
  font-family: Verdana, sans-serif; 
  margin: 0; 
  padding: 10px; 
  display: flex; 
  justify-content: center; 
}

a:link, a:visited { 
  text-decoration: none; 
  color: var(--color-text-light); 
}

a:hover { 
  text-decoration: none; 
  color: var(--color-accent); 
}

.container { 
  width: 100%; 
  max-width: 872px; 
  display: flex; 
  flex-direction: column; 
  gap: 5px; 
}

/* Utilitaires de couleurs */
.bg-light { 
  background-color: var(--color-primary-bg); 
  color: var(--color-text-dark); 
}

.bg-dark { 
  background-color: var(--color-dark-bg); 
  color: var(--color-text-light); 
  border-radius: 4px; 
}

/* Structure de base globale */
.row-layout { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
}

.side-space {
  width: 100%; 
}

/* En-tête */
.title-box {
  padding-left: 0;
  margin-left: 0;
}

.main-title { 
  font-size: 1.25em; 
  font-weight: bold;
  display: block;  
}

.sci-name { 
  font-size: 0.70em; 
  font-style: italic;
  font-weight: bold; 
  display: block; 
  margin-left: 0px;
  margin-top: 4px;  
}

.desc-box { 
  font-size: 0.85em; 
  line-height: 1.4; 
  padding: 6px 15px; 
  height: max-content; 
}

/* Barre d'informations & Navigation */
.info-bar { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 10px; 
  font-size: 0.85em; 
  text-align: center; 
  padding: 5px 15px; 
}

.info-text { 
  flex-grow: 1; 
  font-weight: bold; 
}

.valeur-normale { 
  font-weight: normal; 
}

.nav-bar { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  color: var(--color-text-dark); 
  padding: 10px 0; 
  font-size: 1em; 
}

.nav-bar img { 
  vertical-align: middle; 
}

/* ==========================================================================
   Contenu principal (Galerie & Médias) - CORRIGÉ POUR SMARTPHONE
   ========================================================================== */
.image-section {
  display: flex;
  flex-direction: column;  /* Force l'empilement vertical sur smartphone */
  gap: 20px;               
}

.main-image { 
  width: 100%;             /* Permet au conteneur de s'étirer sur tout l'écran */
  overflow: hidden; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.img-cadre { 
  border-radius: 4px; 
}

img.responsive-img { 
  width: 100%;             /* L'image occupe tout l'espace disponible du smartphone */
  max-width: 100%; 
  height: auto; 
  display: block; 
  margin: 0 auto; 
  border: 0; 
}

/* Zone des miniatures et audio */
.thumbnails { 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  align-items: center;
  gap: 15px; 
  flex-wrap: wrap; 
}

.thumbnails img.responsive-img { 
  width: 200px;
  height: 150px;
  object-fit: cover;
  display: block; 
  margin: 0 auto; 
  border: 0; 
  border-radius: 4px;
}

/* Ajustement spécifique pour la miniature verticale (vache_5_) */
.thumbnails img.responsive-img[src*="vache_5_"] {
  width: 150px;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

.thumbnail-audio-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px; 
}

.audio-short {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.audio-short audio {
  width: 150px; 
}

/* Pied de page */
.footer-section { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  text-align: center; 
  font-size: 0.85em; 
  color: var(--color-text-dark); 
  padding-top: 15px; 
}

.author-box { 
  text-align: center; 
}

.copyright-box { 
  text-align: center; 
  border-top: 6px solid var(--color-dark-bg); 
  padding-top: 15px; 
}

/* ==========================================================================
   VERSION RESPONSIVE : Écrans intermédiaires et ordinateurs (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .row-layout { 
    flex-direction: row-reverse; 
    gap: 30px; 
    align-items: center; 
  }
  .side-space { 
    width: 200px; 
    max-width: 100%; /* Ligne de sécurité */
    flex-shrink: 0; 
  }
  .content-space { 
    flex-grow: 1; 
    /* width: 0; <-- SUPPRIMÉ pour éviter l'écrasement sur mobile */
  }
  
  /* Rétablit l'affichage côte à côte sur ordinateur */
  .image-section { 
    flex-direction: row; 
    gap: 30px; 
    align-items: flex-start;
  } 
  
  .main-image {
    flex-grow: 1;
    width: auto;
  }

  .thumbnails { 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center;
    flex-wrap: nowrap;
  } 
  
  .footer-section { 
    flex-direction: row-reverse; 
    text-align: left; 
    gap: 30px; 
  } 
  .author-box { 
    width: 200px; 
    flex-shrink: 0; 
    padding-top: 18px; 
    text-align: center; 
  } 
  .copyright-box { 
    flex-grow: 1; 
  } 
}