/* ============================================
   A_accueil.css - Styles pour la page d'accueil
   Auteur : Laetitia Bouchereau
   Explications ligne par ligne incluses
   ============================================ */

/* ===========================
   1. POLICE PERSONNALISÉE
=========================== */
/* Déclaration de la police 'Dancing Script' */
@font-face {
  font-family: 'Dancing Script'; /* nom de la police utilisé dans le CSS */
  src: url('../police_caractere/Dancing_Script/DancingScript-VariableFont_wght.ttf') format('truetype');
  font-display: swap; /* améliore le rendu même si la police met du temps à charger */
}

/* ===========================
   2. BASE DU DOCUMENT
=========================== */
/* Styles globaux du body */
body {
  font-family: 'Dancing Script', sans-serif; /* police principale avec fallback */
  background-color: #2E1B17; /* couleur principale de fond */
  color: #FFF; /* couleur du texte par défaut */
  margin: 0; /* supprime marges par défaut */
  padding: 0; /* supprime padding par défaut */
  display: flex; /* pour centrer le conteneur principal */
  justify-content: center; /* centre horizontalement */
}

/* ===========================
   3. CONTENEUR CENTRAL
=========================== */
.main-container {
  width: 800px; /* largeur fixe sur desktop */
  min-height: 100vh; /* prend au moins toute la hauteur de la fenêtre */
  background-color: #2E1B17; /* même couleur que le body pour uniformité */
  box-shadow: 0 0 50px #1E120F inset; /* ombre intérieure pour profondeur */
  padding: 20px; /* espace intérieur */
  box-sizing: border-box; /* inclut le padding dans la largeur */
}

/* Fond pour les bandes latérales */
html {
  background-color: #1E120F; /* contraste avec le conteneur principal */
}

/* ===========================
   4. TITRES ET TEXTES
=========================== */
/* Titres centrés */
h1, h2, h3 {
  text-align: center;
  margin: 20px 0; /* marge au-dessus et en dessous */
}

/* Paragraphes de texte */
p {
  font-size: 1.1em; /* légèrement plus grand pour lecture agréable */
  text-align: center;
  line-height: 1.6; /* espacement entre lignes */
  margin: 20px 0;
}

/* ===========================
   5. ALT_POEME (SEO et accessibilité)
=========================== */
/* Texte caché pour l'affichage mais visible pour les lecteurs d'écran */
.alt_poeme {
  position: absolute;
  left: -9999px; /* en dehors de l'écran */
  width: 1px;    /* largeur minimale */
  height: 1px;   /* hauteur minimale */
  overflow: hidden; /* éviter tout débordement visible */
}

/* ===========================
   6. SIGNATURE DU POÈME
=========================== */
p.signature {
  font-size: 1.1em;          /* légèrement plus petit que le texte principal */
  font-style: italic;         /* style poétique */
  color: #FFD600;             /* doré pour contraste fort */
  text-align: center;
  text-shadow: 1px 1px 3px #1E120F; /* léger ombrage pour lisibilité */
  margin-top: 20px;
}

/* ===========================
   7. SOUS-TITRES
=========================== */
h2 {
  font-size: 1.8em;
  color: #FFD600; /* couleur dorée pour attirer l'œil */
}

/* ===========================
   8. LIENS
=========================== */
a {
  color: #9E7D57; /* couleur des liens */
  text-decoration: none; /* enlève le soulignement */
  transition: color 0.3s ease; /* transition douce */
}
a:hover, a:focus {
  color: #FFD600; /* changement de couleur au survol/focus */
}

/* ===========================
   9. BOUTON ACCÈS AUX POÈMES
=========================== */
.access-poemes {
  display: flex;           /* pour centrer le bouton */
  justify-content: center;
  padding: 0 10px;
}

.btn-access {
  display: inline-block;
  background-color: #9E7D57;
  color: #2E1B17;
  padding: 15px 5%;      /* padding horizontal fluide */
  border-radius: 8px;     /* coins arrondis */
  font-size: 1.4em;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease; /* animation douce */
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.btn-access:hover, .btn-access:focus {
  background-color: #FFD600;
  color: #2E1B17;
  transform: scale(1.05); /* effet zoom léger */
}

/* ===========================
   10. IMAGES
=========================== */
.picture-container img,
.illustration img {
  max-width: 100%; /* responsive */
  height: auto;    /* proportion conservée */
  display: block;
  margin: 20px auto; /* centré avec marge */
  border-radius: 12px; /* coins arrondis */
}

/* ===========================
   11. 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:first-child img {
  width: 200px; /* logo Facebook plus grand */
  height: auto;
}

/* ===========================
   12. ACCESSIBILITÉ
=========================== */
a:focus, .btn-access:focus {
  outline: 3px solid #FFD600;
  outline-offset: 4px;
}

/* ===========================
   13. RESPONSIVE (MOBILE)
=========================== */
@media (max-width: 850px) {
  .main-container {
    width: 95%;
    padding: 15px;
  }
  .btn-access {
    width: 100%; /* bouton pleine largeur sur mobile */
    font-size: 1.2em; /* texte un peu plus petit */
  }
}
/* 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 */
}