/* =========================================================
   A_tous_poemes.css - Version harmonisée, responsive
========================================================= */

/* ===========================
   POLICE PRINCIPALE
=========================== */
@font-face {
  font-family: 'Dancing Script';
  src: url('../police_caractere/Dancing_Script/DancingScript-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}

/* ===========================
   BASE DU DOCUMENT
=========================== */
body {
  font-family: 'Dancing Script', sans-serif;
  background-color: #2E1B17;
  color: #FFF;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.main-container {
  width: 90%;
  max-width: 1200px;
  min-height: 100vh;
  background-color: #2E1B17;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===========================
   TITRES
=========================== */
h1 { text-align:center; color:#FFD600; margin:10px 0; font-size:2em; line-height:1.2; }
h2 { text-align:center; color:#FFD600; margin:10px 0; font-size:1.7em; line-height:1.2; }
h3 { text-align:center; color:#FFD600; margin:10px 0; font-size:1.5em; }

/* ===========================
   POEME ITEM
=========================== */
.poeme-item {
  width: 100%;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poeme-title {
  font-size: 1.8em;
  color: #FFD600;
  text-align: center;
  margin-bottom: 5px;
}

.poeme-meta.small {
  font-size: 0.8em;
  color: #FFC107;
  margin-bottom: 10px;
  text-align: center;
}

.poeme-theme {
  font-size: 1em;
  color: #FFF;
  opacity: 0.9;
  text-align: center;
  margin-bottom: 10px;
}

/* ===========================
   MEDIA (poème + illustration)
=========================== */
.poeme-media {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 900px;
  margin-bottom: 10px;
}

.poeme-media-item {
  flex: 1 1 45%;
  max-width: 400px;
  text-align: center;
}

.poeme-media-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.caption {
  color: #FFC107;
  font-size: 0.85em;
  margin-top: 5px;
}

/* ===========================
   DESCRIPTION & EXPPLICATION
=========================== */
.description, .explication {
  text-align: center;
  font-size: 1em;
  line-height: 1.5;
  margin: 10px 0;
}

.explication {
  background-color: #3B1F1B;
  padding: 15px;
  border-radius: 10px;
  color: #FFD600;
  display: none;
}

/* ===========================
   BOUTONS
=========================== */
.access-poemes { text-align:center; margin:15px 0; }
.btn-explication, .btn-accueil {
  display:inline-block;
  padding:8px 15px;
  background-color:#FFD600;
  color:#2E1B17;
  text-decoration:none;
  border-radius:5px;
  font-weight:bold;
  margin:5px;
  transition: background-color 0.3s ease;
  cursor:pointer;
}
.btn-explication:hover, .btn-accueil:hover { background-color:#FFC107; }

/* ===========================
   AUDIO
=========================== */
audio {
  display:block;
  margin:10px auto;
  width:100%;
  max-width:400px;
  height:30px;
}

/* ===========================
   PAGINATION
=========================== */
.pagination {
  margin:20px 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
}

.pagination a.nav-btn {
  color:#FFD600;
  text-decoration:none;
  padding:5px 10px;
  border:1px solid #FFD600;
  border-radius:5px;
  display:inline-block;
}

.pagination form {
  display:flex;
  align-items:center;
  gap:5px;
}

.pagination input[type=number] {
  width:60px;
  padding:3px 5px;
  border-radius:5px;
  border:1px solid #FFD600;
  text-align:center;
}

.pages-count { color:#FFF; }

/* ===========================
   SIGNATURE
=========================== */
.signature { text-align:center; margin-top:10px; font-size:0.9em; color:#FFD600; }

/* ===========================
   FOOTER
=========================== */
footer { margin-top:40px; text-align:center; font-size:0.9em; border-top:1px solid #9E7D57; padding-top:10px; }
footer img { max-width:100%; height:auto; transition:opacity 0.3s; }
footer img:hover { opacity:0.8; }
footer a img { max-width:200px; height:auto; }

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 800px) {
  .poeme-media-item { flex:1 1 100%; max-width:100%; }
  .poeme-title { font-size:1.5em; }
  .poeme-meta.small { font-size:0.7em; }
  .description, .explication { font-size:0.95em; }
  audio { height:25px; }
}

@media (max-width: 500px) {
  .main-container { width:95%; padding:10px; }
  .poeme-title { font-size:1.3em; }
  .poeme-meta.small { font-size:0.6em; }
  .poeme-media-item img { width:95%; }
  audio { height:20px; }
}

/* last-update.css ou directement dans ton CSS principal */
.last-update {
    display: inline-block;      /* s'adapte à la longueur du texte */
    color: #ffffff;             /* texte blanc */
    font-size: 0.8em;           /* petite écriture */
    font-weight: bold;           /* rigide / gras */
    text-align: center;          /* centré si tu veux */
    border-top: 2px solid #ffffff;   /* trait au-dessus */
    border-bottom: 2px solid #ffffff;/* trait en dessous */
    padding: 2px 4px;            /* espace autour du texte */
    margin: 8px 0;               /* espace vertical par rapport aux autres éléments */
    line-height: 1.2;            /* hauteur de ligne compacte */
}