/* =========================================================
   A_aff_poeme.css - Version harmonisée et 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: 1000px;
  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:2.5em; line-height:1.2; }
h2 { text-align:center; color:#FFD600; margin:10px 0; font-size:2em; line-height:1.2; }
h3 { text-align:center; color:#FFD600; margin:10px 0; font-size:1.8em; }

/* ===========================
   NUMÉRO ET DATE
=========================== */
.poeme-meta {
  font-size: 0.8em;
  color: #FFC107;
  margin-bottom: 15px;
  text-align: center;
}

/*.meta-line {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.95rem;
    color: #FFD600;
}

.poeme-category {
    margin-top: 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #FFC107;
    text-transform: capitalize;
}

.poeme-theme {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: #FFF;
    opacity: 0.9;
}*/

/* ===========================
   NUMÉRO ET DATE
=========================== */
.meta-line {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.85rem; /* réduire un peu la taille pour N° et date */
    color: #FFD600;
}

.numero-date {
    font-size: 0.75rem; /* plus petit que la catégorie */
    color: #FFD600;
    text-align: center;
    margin-bottom: 5px;
}

.poeme-category {
    font-size: 1.2rem;  /* plus grand que le numéro/date */
    font-weight: 600;
    color: #FFC107;
    text-align: center;
    margin-bottom: 10px;
}

.poeme-theme {
    margin-top: 0.25rem;
    font-size: 0.95rem;     /* légèrement plus petit que catégorie mais plus lisible que avant */
    color: #FFF;
    opacity: 0.9;
}

/* ===========================
   ALT POEME (accessibilité)
=========================== */
.alt_poeme {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===========================
   MEDIA
=========================== */
.picture-container { 
  display: flex; 
  flex-direction: column; /* empile verticalement l'image et le texte */
  align-items: center;    /* centre horizontalement */
  margin: 15px 0; 
  width: 100%; 
}

#media-toggle { 
  width: 80%;            /* occupe 80% du conteneur */
  height: auto;          /* conserve les proportions */
  object-fit: contain; 
  margin: 0 auto 10px;   /* centre horizontalement + espace en bas */
  border-radius: 12px; 
  cursor: pointer; 
}

.video { 
  width: 80%;            /* limite la vidéo à 80% */
  height: auto;          /* conserve les proportions */
  border-radius: 10px; 
  margin: 15px auto;     /* centre horizontalement */
}

audio { 
  display: block; 
  margin: 10px auto; 
  width: 60%;            /* limite aussi l’audio à 80% */
  max-width: 400px;      /* garde une limite raisonnable */
  /*height: 30px; */
  height: auto;          /* conserve les proportions */
}

.click-indication {
  text-align: center;
  font-size: 0.9em;
  color: #FF6FAF; /* un rose harmonieux */
  margin-top: 5px;
  font-style: italic;
}

/* ===========================
   DESCRIPTION ET EXPPLICATION
=========================== */
p { text-align:center; margin:10px 0; line-height:1.5; font-size:1.1em; }
#explication { background-color:#3B1F1B; padding:15px; margin:10px 0; border-radius:10px; color:#FFD600; font-size:1em; }

/* ===========================
   BOUTONS
=========================== */
.access-poemes { text-align:center; margin:15px 0; }
.access-poemes1 { margin:20px 0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }

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

/* ===========================
   PAGINATION
=========================== */
.pagination { margin:20px 0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.pagination a { color:#FFD600; text-decoration:none; padding:5px 10px; border:1px solid #FFD600; border-radius:5px; }
.pagination span { color:#FFF; padding:5px 10px; }

/* ===========================
   SIGNATURE
=========================== */
.signature { text-align:center; margin-top:20px; 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) {
  h1{font-size:2em;} h2{font-size:1.7em;} h3{font-size:1.5em;}
  .poeme-meta{font-size:0.7em;} #explication{font-size:0.95em;}
  audio{height:25px;}
}

@media (max-width:500px){
  .main-container{width:95%; padding:10px;}
  h1{font-size:1.8em;} h2{font-size:1.5em;} h3{font-size:1.3em;}
  .poeme-meta{font-size:0.6em;} audio{height:20px;}
  #media-toggle{max-width:100%;}
}

/* Sceau poétique dans le footer */
.legal-poetic {
  max-width: 800px;
  margin: 0.5rem auto 0;
  padding: 0 1rem;
  color: #e6e6e6;
  font-style: italic;
  letter-spacing: 0.2px;
}

.legal-poetic::before {
  content: "";
  display: block;
  width: 90px;
  height: 1px;
  margin: 0.75rem auto 0.75rem;
  background: linear-gradient(to right, transparent, #e6e6e6, transparent);
}

/* 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 */
}