/* 
Theme Name: OL Vintage - Thème sur mesure
Author: Stän Création
Author URI: https://stancreation.fr
Description: Thème personnalisé développé pour OL Vintage, un site dédié à l'histoire de l'Olympique Lyonnais, regroupant podcasts, interviews et chroniques. Design responsive, typographie sur mesure, mise en avant des contenus média, style rétro & moderne.
Version: 1.0
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ol-vintage-theme
*/


/* === RESET STYLES === */
body {
  font-family: 'Oswald', sans-serif;
  background-image: url('https://olvintage.fr/wp-content/uploads/2025/03/background-OLVintage.svg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

/* Conteneur pour les bandes à gauche et à droite */
.side-bands-left, .side-bands-right {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9999; /* Pour s'assurer que les bandes sont au-dessus du contenu */
  height: 100vh; /* Remplir toute la hauteur de la fenêtre */
  display: flex;
  flex-direction: row; /* Disposition horizontale */
}

/* Trois bandes à gauche */
.side-bands-left {
  left: 0;
}

.side-band-left {
  width: 0.3em; /* Largeur de chaque bande */
  height: 100%; /* Hauteur de chaque bande */
}

.side-band-left.red {
  width: 0.2em; /* Largeur de chaque bande */
  background-color: #e1071b; /* Troisième couleur (rouge) */
}

.side-band-left.blue {
  width: 0.2em; /* Largeur de chaque bande */
  background-color: #05529d; /* Deuxième couleur (bleu) */
}

.side-band-left.gold {
  background-color: #cf9c51; /* Troisième couleur (doré) */
}

/* Trois bandes à droite */
.side-bands-right {
  right: 0;
}

.side-band-right {
  width: 0.3em; /* Largeur de chaque bande */
  height: 100%; /* Hauteur de chaque bande */
}

.side-band-right.gold {
  background-color: #cf9c51; /* Première couleur (doré) */
}

.side-band-right.blue {
  width: 0.2em; /* Largeur de chaque bande */
  background-color: #05529d; /* Deuxième couleur (bleu) */
}

.side-band-right.red {
  width: 0.2em; /* Largeur de chaque bande */
  background-color: #e1071b; /* Troisième couleur (rouge) */
}



/* === TYPOGRAPHIE === */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif;
}






/* === HEADER PRINCIPAL === */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3% 10%;
}


.logo-olvintage img {
  width: 30%;
  height: auto;
}

.logo-olvintage {
  display: inline-block;
  padding: 0;
  margin: 0;
}

/* === MENU PRINCIPAL === */
.main-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.main-menu ul {
  display: flex;
  gap: 20%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-menu li {
  display: inline-block;
}

.main-menu a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  font-size: 120%;
  transition: color 0.3s;
}

.main-menu a:hover {
  color: #cf9c51;
}

/* === BOUTON MENU === */

.menu-button {
  background-color: #cf9c51;
  color: white !important;
  padding: 2% 5%;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border: 0.1vw solid transparent;
  margin-left: 50%;
}

.menu-button:hover {
  background-color: white;
  color: #cf9c51 !important;
  border: 0.1vw solid #cf9c51;
}


/* === BURGER MENU RESPONSIVE === */
.burger-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 6px;
  padding: 10px;
}

.burger-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #000;
  transition: all 0.3s ease;
}


/* Bouton contact par défaut visible */
.menu-button {
  background-color: #cf9c51;
  color: white !important;
  padding: 2% 5%;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border: 0.1vw solid transparent;
  margin-left: 50%;
}

/* Bouton "CONTACT" dans le burger (mobile) */
.menu-button-mobile {
  display: none;
  margin-left: 0;
  margin-top: 20px;
  text-align: center;
}


@media (max-width: 900px) {
  .header-container {
    display: flex;
    justify-content: space-between;
    padding: 5% 10%;
  }

  .main-menu {
    width: 100%;
  }

  .logo-olvintage img {
    width: 50%;
    height: auto;
  }

  .main-menu ul {
    display: none;
    flex-direction: column;
    gap: 2%;
    text-align: center;
    background-color: #cf9c51;
    width: 80%;
    margin: 0 auto 0 auto;
    padding: 5% 0;
  }

  .main-menu a {
    color: white;
  }

  .main-menu a:hover {
    color: black;
  }

  .main-menu ul.active {
    display: flex;
  }

  .burger-toggle {
    display: flex;
    margin-top: 10px;
    align-self: flex-end;
  }

  .menu-button {
    display: none !important;
  }

  .menu-button-mobile {
    display: block;
    margin-top: 20px;
  }
}







/* === FOOTER === */
.footer-all {
  background-color: #000;
  padding: 2% 0 0 0;
}

.footer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: white;
}

.footer-logo img {
  width: 40%;
  height: auto;
  margin: 0 0 0 40%;
}

/* Menu du footer */
.footer-menu ul {
  display: flex;
  gap: 5%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-menu-button {
  margin: 0 5% 0 0;
}

.footer-menu li {
  display: inline-block;
}

.footer-menu a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 130%;
  transition: color 0.3s;
}

.footer-menu a:hover {
  color: #cf9c51;
}

/* === BOUTON CONTACT === */
.footer-section-button {
  margin: 5% 0 5% 0;
}

.footer-button {
  background-color: #cf9c51;
  color: white;
  padding: 2% 5%;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border: 0.1vw solid transparent;
}

.footer-button:hover {
  background-color: white;
  color: #000;
  border: 0.1vw solid #cf9c51;
}

/* === RÉSEAUX SOCIAUX === */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 2%;
  margin: 1% 0 0 0;
}

.social-icon-footer i {
  font-size: 200%;
  color: white;
  transition: color 0.3s;
}

.social-icon-footer:hover i {
  color: #cf9c51;
}

/* === COPYRIGHT === */
.footer-rights {
  text-align: center;
  font-size: 100%;
  padding: 1% 0;
  margin: 0 0 0 0;
  color: white;
}


@media (max-width: 900px) {
  .footer-container {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 5% 0;
    text-align: left;
  }

  .footer-logo {
    width: 35%;
  }

  .footer-logo img {
    width: 70%;
    margin: 0;
  }

  .footer-menu {
    width: 50%;
  }

  .footer-menu ul {
    flex-direction: column;
    gap: 15%;
    padding: 0;
    align-items: flex-start;
  }

  .footer-menu-button {
    margin: 0 0 0 0;
  }

  .footer-section-button {
    width: 100%;
    margin: 5% 0;
    text-align: left;
  }

  .footer-button {
    padding: 3% 6%;
  }

  .footer-social {
    width: 100%;
    justify-content: center;
    gap: 5%;
    margin: 4% 0;
  }

  .footer-rights {
    width: 100%;
    margin-top: 2%;
    padding-bottom: 5%;
    font-size: 90%;
    text-align: center;
  }

  .social-icon-footer i {
    font-size: 180%;
  }
}














/* === HERO SECTION === */
.texte-hero-accueil {
  text-align: center;
  font-size: 150%;
  font-weight: bold;
  margin: 0;
  padding: 0 20% 5% 20%;
  box-sizing: border-box;
}


/* === SECTION RENCONTRES === */
.rencontres-accueil {
  align-items: center;
  background-color: black;
}

.rencontres-titre h1 {
  color: white;
  padding-top: 2%;
  font-size: 300%;
  margin: 0;
  text-align: center;
  text-decoration: underline 0.08em solid #cf9c51; /* Soulignement doré et plus épais */
  text-underline-offset: 0.3em; /* Éloigne la ligne du texte */
}


.rencontres-titre-texte {
  text-align: center;
  font-size: 150%;
  padding: 0 30% 2% 30%;
  color: white;
}


/* === SECTION RENCONTRES === */
.rencontres-section {
  max-width: 70%; /* Utilise toute la largeur disponible */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
  justify-content: space-between;
}

/* Chaque rencontre dans la section */
.rencontres-item {
  width: 100%; /* Utilise toute la largeur disponible */
  background-color: white;
  padding: 2%;
  display: flex; /* Affichage en ligne */
  border: 0.15rem solid #cf9c51;
  margin-bottom: 3%;
}

/* Image de la rencontre */
.rencontres-thumbnail {
  max-width: 100%; /* Limite la largeur de l'image */
}

.rencontres-thumbnail img {
  width: 300px;
  height: 300px;
  object-fit: cover; /* Permet de remplir le cadre sans déformer l'image */
}


/* Conteneur du texte */
.rencontres-content {
  flex: 2; /* Le texte prend plus d’espace */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Titre de la rencontre */
.rencontres-title {
  font-size: 2rem;
  margin-bottom: 2%;
  margin-left: 5%;
  text-align: left;
}

.rencontres-title a {
  color: black;
  text-decoration: none;
}

.rencontres-title a:hover {
  color: #cf9c51;
}

/* Extrait */
.rencontres-excerpt {
  font-size: 1.2rem;
  margin-bottom: 2%;
  margin-left: 5%;
  text-align: left;
}

/* Bouton */
.rencontres-read-more-button {
  display: inline-block;
  background-color: #cf9c51;
  color: white;
  padding: 1% 3%;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border: 0.1rem solid #cf9c51;
  width: auto;
  margin-left: 5%;
  text-align: center;
}

.rencontres-read-more-button:hover {
  background-color: white;
  color: #cf9c51;
}

/* Conteneur du bouton */
.button-container {
  text-align: center; /* Centre le bouton */
  margin-top: 1%; /* Ajoute un espace avant le bouton */
}

/* Style du bouton "Toutes les rencontres" */
.btn-all-rencontres {
  background-color: #cf9c51;
  color: #000;
  border: 0.1rem solid #cf9c51;
  padding: 1% 2%;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  margin-bottom: 5%;
}

.btn-all-rencontres:hover {
  background-color: white;
  color: #cf9c51;
  border: 0.1rem solid #cf9c51;
}

@media (max-width: 900px) {
  .rencontres-item {
    display: block; /* Affichage en ligne */
  }

  .rencontres-titre h1 {
    padding-top: 5%;
  }

  .rencontres-titre-texte {
    padding: 0 15% 2% 15%;
  }

    .rencontres-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  
    .rencontres-thumbnail img {
      width: 95%;
      height: auto;
      margin-top: 1%;
      margin-bottom: 1%;
    }
  
    .rencontres-title {
      font-size: 1.6rem;
      margin: 3% 0 2% 0;
      text-align: center;
    }
  
    .rencontres-excerpt {
      font-size: 1rem;
    }
  
    .rencontres-excerpt {
      margin-left: 5%;
      margin-right: 5%;
    }
    
    .rencontres-excerpt p {
      margin: 0 0 5% 0;
      text-align: center;
    }

    .rencontres-read-more-button {
      margin: 2% auto 3% auto;
    }  

  }






/* === CHRONIQUES (même style que ARTICLES SIMILAIRES) === */

.chroniques-titre h1 {
  color: black;
  padding-top: 2%;
  font-size: 300%;
  margin: 0;
  text-align: center;
  text-decoration: underline 0.08em solid #cf9c51; /* Soulignement doré et plus épais */
  text-underline-offset: 0.3em; /* Éloigne la ligne du texte */
}

.chroniques-titre-texte {
  text-align: center;
  font-size: 150%;
  padding: 0 30% 2% 30%;
  color: black;
}

.chroniques-section {
  display: flex;
  gap: 3%;
  justify-content: space-between;
  max-width: 80%;
  margin: 0 auto 2% auto;
  padding: 0 2%;
}

.chroniques-item {
  width: 30%;
  background-color: rgba(255, 255, 255, 0.5); /* Fond blanc avec 50% d'opacité */
  padding: 1%;
  text-align: center;
  border: 0.15rem solid #cf9c51;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chroniques-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 75%; /* Ratio 16:9 (9/16 = 0.5625 = 56.25%) */
  overflow: hidden;
}

.chroniques-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.chroniques-title {
  font-size: 1.5rem;
  margin: 2% 0;
}

.chroniques-title a {
  color: black;
  text-decoration: none;
}

.chroniques-title a:hover {
  color: #cf9c51;
}

.chroniques-excerpt {
  font-size: 1rem;
  color: #333;
  margin-bottom: 15px;
  flex-grow: 1;
}

.chroniques-read-more-button {
  display: inline-block;
  background-color: #cf9c51;
  color: white;
  padding: 2% 5%;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border: 0.1rem solid #cf9c51;
  width: auto;
  margin-left: 20%;
  margin-right: 20%;
  text-align: center;
}

.chroniques-read-more-button:hover {
  background-color: white;
  border: 0.1rem solid #cf9c51;
  color: #cf9c51;
}

/* === BUTTON CONTENEUR === */
.btn-all-chroniques {
  background-color: white;
  color: #000;
  border: 0.1rem solid #cf9c51;
  padding: 1% 2%;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  margin-bottom: 3%;
}

.btn-all-chroniques:hover {
  background-color: #cf9c51;
  color: white;
  border: 0.1rem solid #cf9c51;
}


@media (max-width: 900px) {

  .chroniques-titre-texte {
    padding: 0 7% 0% 7%;
  }

    .chroniques-section {
      flex-direction: column;
      align-items: center;
    }
  
    .chroniques-item {
      width: 90%;
      margin-bottom: 5%;
    }
  
    .chroniques-titre-texte {
      padding: 0 10% 2% 10%;
    }
  
  
  .chroniques-titre h1 {
    padding-top: 5%;
  }
  
  .chroniques-read-more-button {
    margin-bottom: 3%;
  }
}














/* === SECTION SUIVEZ MON ACTUALITÉ (Spotify + Réseaux Sociaux) === */

.reseaux-accueil {
  background-color: white;
  padding: 3% 0;
  text-align: center;
}

.reseaux-titre h1 {
  color: black;
  padding-top: 0;
  font-size: 300%;
  margin: 0 0 2% 0;
  text-align: center;
  text-decoration: underline 0.08em solid #cf9c51; /* Soulignement doré et plus épais */
  text-underline-offset: 0.3em; /* Éloigne la ligne du texte */
}


.reseaux-titre-texte {
  text-align: center;
  font-size: 150%;
  padding: 0 30% 0% 30%;
  color: black;
  margin: 0 0 2% 0;
}


.spotify-block-accueil {
  position: relative;
  width: 80%;
  max-width: 100%;
  padding-bottom: 15%; /* Ratio 16:9 */
  height: 0;
  overflow: hidden;
  margin: 0 auto;
}

.spotify-block-accueil iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.reseaux-icons {
  display: flex;
  justify-content: center;
  gap: 2%;
  margin: 1% 0 0 0;
}


.reseaux-icons i {
  font-size: 300%;
  color: #cf9c51;
  transition: color 0.3s;
}

.social-icon:hover i {
  color: black;
}



@media (max-width: 900px) {

  .reseaux-accueil {
    padding: 5% 0;
  }
  
  .reseaux-titre h1 {
    margin: 0% 20% 5% 20%;
    font-size: 200%;
}

.reseaux-titre-texte {
  padding: 5% 10% 5% 10%;
}

.reseaux-icons {
  gap: 10%;
  padding-bottom: 5%;
}

.spotify-block-accueil {
  padding-bottom: 33%; /* Ratio 16:9 */
}


}





/* === SECTION ACTUS EN TIMELINE VERTICALE === */

.actus-accueil {
  background-color: transparent;
  padding: 3% 0;
  text-align: center;
}

.actus-titre h1 {
  color: black;
  padding-top: 0;
  font-size: 300%;
  margin: 0 0 2% 0;
  text-align: center;
  text-decoration: underline 0.08em solid #cf9c51; /* Soulignement doré et plus épais */
  text-underline-offset: 0.3em; /* Éloigne la ligne du texte */
}

.actus-titre-texte {
  text-align: center;
  font-size: 150%;
  padding: 0 30% 0% 30%;
  color: black;
  margin: 0 0 3% 0;
}


.actus-timeline {
  position: relative;
  margin: 0 auto; /* Centre horizontalement */
  width: 45%; /* Largeur relative à l’écran */
  max-width: 100%; /* Évite de dépasser sur les petits écrans */
  padding-left: 2%; /* Espace pour la frise à gauche */
  border-left: 0.2em solid #cf9c51; /* Frise verticale dorée */
}

.actus-timeline-item {
  position: relative;
  margin-bottom: 40px;
  text-align: left;
}


.actus-date {
  font-size: 0.9rem;
  font-style: italic;
  color: #666;
  margin-bottom: 1%;
}

.actus-title a {
  font-size: 1.3rem;
  font-weight: bold;
  color: black;
  text-decoration: none;
}

.actus-title a:hover {
  color: #cf9c51;
}

.actus-excerpt {
  margin: 10px 0;
  color: #333;
  font-size: 1rem;
}

.actus-timeline .read-more-button {
  display: inline-block;
  background-color: #cf9c51;
  color: white;
  padding: 1% 2%;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border: 0.1rem solid #cf9c51;
  width: auto;
  text-align: center;
  margin: 0;
}

.actus-timeline .read-more-button:hover {
  background-color: white;
  border: 0.1rem solid #cf9c51;
  color: #cf9c51;
}

.actus-content-with-img {
  display: flex;
  align-items: center;
  gap: 5%;
}

.actus-thumbnail {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
}

.actus-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0.15rem solid #cf9c51;
}


@media (max-width: 900px) {

  .actus-titre-texte {
    padding: 0 10% 2% 10%;
  }

  .actus-timeline {
    width: 80%; /* Largeur relative à l’écran */
    border-left: none; /* Supprime la frise dorée */
    padding-left: 0; /* Supprime l’espace prévu pour la frise */
  }

  .actus-content-with-img {
    display: block;
    text-align: center;
  }

  .actus-thumbnail {
    margin: 0 auto 15px auto; /* Centre l’image avec un espace en bas */
  }

  .actus-date {
    text-align: center;
  }

  .actus-title,
  .actus-title a,
  .actus-excerpt,
  .actus-timeline .read-more-button {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .actus-timeline .read-more-button {
    display: inline-block;
    background-color: #cf9c51;
    color: white;
    padding: 2% 5%;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border: 0.1rem solid #cf9c51;
    width: fit-content; /* réduit à la taille du contenu */
    max-width: 100%;
    font-size: 0.9rem;
    margin: 1% auto 0 auto;
  }
  
}




.header-fullwidth-banner {
  width: 100vw;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.header-fullwidth-banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: top; /* Affiche le haut de l’image */
  display: block;
}


/* === ARTICLE === */
.single-post-container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3%;
  max-width: 80%;
}

.article-rencontres {
  width: 150%;
  display: flex;
  justify-content: center;
}

.post-thumbnail img {
  width: 500px;
  height: 500px;
  object-fit: cover; /* Permet de remplir le cadre sans déformer l'image */
}

.post-title {
  font-size: 250%;
  margin: 5% 0 3% 0;
}

.post-content {
  font-size: 120%;
}

.post-content p {
  margin: 0;
}

.spotify-block {
  position: relative;
  width: 100%;
  padding-bottom: 25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 5% 0 0 0;
}

.spotify-block iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* === ARTICLES SIMILAIRES === */

.rencontres-titre-article {
  color: black;
  padding-top: 1%;
  font-size: 200%;
  text-align: center;
  text-decoration: underline 0.08em solid #cf9c51; /* Soulignement doré et plus épais */
  text-underline-offset: 0.3em; /* Éloigne la ligne du texte */
}

.related-posts-container {
  display: flex;
  gap: 3%;
  justify-content: space-between;
  max-width: 60%;
  margin: 0 auto 2% auto;
  padding: 0 2%;
}

.related-post-item {
  width: 30%;
  background-color: transparent;
  padding: 1%;
  text-align: center;
  border: 0.15rem solid #cf9c51;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.related-post-thumbnail img {
  width: 100%;
  height: auto;
}

.related-post-title {
  font-size: 1.5rem;
  margin: 2% 0;
}

.related-post-title a {
  color: black;
  text-decoration: none;
}

.related-post-title a:hover {
  color: #cf9c51;
}

.related-post-excerpt {
  font-size: 1rem;
  color: #333;
  margin-bottom: 15px;
  flex-grow: 1;
}

.read-more-button {
  display: inline-block;
  background-color: #cf9c51;
  color: white;
  padding: 2% 5%;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border: 0.1rem solid #cf9c51;
  width: auto;
  margin-left: 20%;
  margin-right: 20%;
  text-align: center;
}

.read-more-button:hover {
  background-color: white;
  border: 0.1rem solid #cf9c51;
  color: #cf9c51;
}

@media (max-width: 900px) {
  .related-posts-container {
    flex-direction: column;
    align-items: center;
    gap: 5%;
    width: 90%;
    margin: 0 auto;
  }

  .related-post-item {
    width: 120%;
    margin-bottom: 5%;
    padding: 10%;
  }

  .related-post-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .read-more-button {
    margin: 0 auto 0 auto;
  }
}





/* === BUTTON CONTENEUR === */
.button-container {
  text-align: center;
}

.btn-all-rencontres {
  background-color: white;
  color: #000;
  border: 0.1rem solid #cf9c51;
  padding: 1% 2%;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  margin-bottom: 3%;
}

.btn-all-rencontres:hover {
  background-color: #cf9c51;
  color: white;
  border: 0.1rem solid #cf9c51;
}


/* === CHRONIQUES - SINGLE POST === */
.article-chroniques {
  background-color: #000;
  color: white;
  width: 100%;
  padding: 5% 0;
  box-sizing: border-box;
}

.chroniques-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80%;
  margin: 0 auto;
  gap: 2rem;
}

.chroniques-thumbnail-single {
  width: 80%;            /* Réduit la largeur totale */
  margin: 0 auto 2% auto; /* Centre le bloc + ajoute un petit espace en bas */
  aspect-ratio: 4 / 1;   /* Ratio type "bandeau" (tu peux tester 5 / 1 si tu veux encore plus fin) */
  overflow: hidden;
  border: 0.2rem solid #cf9c51; /* Optionnel : un contour doré */
}

.chroniques-thumbnail-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%; /* centre horizontalement, décale verticalement */
  display: block;
}



.chroniques-content {
  text-align: center;
  padding: 0 10%;
}

.chroniques-content .post-title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: #cf9c51;
  text-transform: uppercase;
}

.chroniques-content .post-content {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* Spotify intégré sous le contenu */
.chroniques-content .spotify-block {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  padding-bottom: 20%;
}

.chroniques-content .spotify-block iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.chroniques-social-icons {
  display: flex;
  justify-content: center;
  gap: 5%;
}

.social-icon-single i {
  font-size: 300%;
  color: #cf9c51;
  transition: color 0.3s ease;
}

.social-icon-single:hover i {
  color: white;
}

@media (max-width: 900px) {
  .chroniques-content {
    text-align: center;
  padding: 30% 10%;
  }
}

.rencontres-single-wrapper {
  background-color: white;
  padding: 5%;
  justify-content: center;
  border: 0.15rem solid #cf9c51;
}

.rencontres-single-container {
  display: flex;
  gap: 5%;
  flex-wrap: wrap;
}

.rencontres-single-image {
  width: 45%;
}

.rencontres-single-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.rencontres-single-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rencontres-single-title {
  font-size: 2rem;
  margin-bottom: 2%;
}

.rencontres-single-text {
  font-size: 1.1rem;
  margin-bottom: 2%;
}

.rencontres-single-spotify {
  margin-top: 2%;
}


/* Responsive */
@media (max-width: 900px) {
  .rencontres-single-container {
    flex-direction: column;
    align-items: center;
  }

  .rencontres-single-image,
  .rencontres-single-content {
    width: 100%;
  }

  .rencontres-single-content {
    text-align: center;
  }

  .rencontres-single-title {
    font-size: 1.8rem;
  }
}





.rencontres-single-social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3%;
  margin-top: 3%;
  flex-wrap: wrap;
}

.social-icon-single-rencontres {
  font-size: 0; /* Évite les petits espaces blancs */
}

.social-icon-single-rencontres i {
  font-size: 3rem; /* Taille des logos */
  color: #cf9c51 !important;
  transition: color 0.3s ease;
}

.social-icon-single-rencontres:hover i {
  color: black !important;
}

@media (max-width: 900px) {
  .rencontres-single-social-icons {
    gap: 10%;
    margin-top: 5%;
  }

  .social-icon-single-rencontres i {
    font-size: 2.5rem;
  }
}





/* === ACTUS - SINGLE POST === */

.article-actus {
  background-color: transparent;
  padding: 5%;
  border: 0.15rem solid #cf9c51;
  max-width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
}

.article-actus .post-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  margin-bottom: 3%;
  border: 0.15rem solid #cf9c51;
}

.article-actus .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.article-actus .post-title {
  font-size: 2.5rem;
  text-align: center;
  margin: 3% 0 2% 0;
  color: black;
  text-transform: uppercase;
  text-decoration: underline 0.08em solid #cf9c51;
  text-underline-offset: 0.3em;
}

.article-actus .post-content {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #000;
  padding: 0 5%;
}

.article-actus .post-content p {
  margin: 0 0 1.5em 0;
}


@media (max-width: 900px) {
  .article-actus {
    max-width: 100%;
  }

}




.page-contact-title {
  text-align: center;
}

.page-contact-subtitle {
  text-align: center;
  font-size: 145%;
  margin: 0 0 2% 0;
}

.contact-form-container {
  text-align: center;
}

.contact-form-container input[type="text"],
.contact-form-container input[type="email"],
.contact-form-container textarea,
.contact-form-container input[type="tel"],
.contact-form-container select {
  width: 100%;
  max-width: 40%;
  padding: 0.8rem;
  border: 0.15rem solid #cf9c51;
  margin-bottom: 1rem;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
  margin: 1% 0 0 0;
}

.contact-form-container textarea {
  min-height: 20%;
  resize: vertical;
}

.contact-form-container input[type="submit"] {
  font-family: 'Oswald', sans-serif;
  background-color: #cf9c51;
  color: white;
  font-weight: bold;
  border: 0.15rem solid #cf9c51;
  padding: 0.8rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 5%;
  max-width: 40%;
  display: block;
  margin: 2% auto 0 auto; /* Centre le bouton */
}

.contact-form-container input[type="submit"]:hover {
  background-color: white;
  color: #cf9c51;
  border: 0.15rem solid #cf9c51;
}

@media (max-width: 900px) {
  .contact-form-container input[type="text"],
  .contact-form-container input[type="email"],
  .contact-form-container input[type="tel"],
  .contact-form-container textarea,
  .contact-form-container select {
    max-width: 90%;
    width: 100%;
    margin: 3% auto;
    font-size: 1rem;
  }

  .contact-form-container input[type="submit"] {
    max-width: 30%;
    width: 50%;
  }
  .contact-form-container input[type="submit"] {
    padding: 1rem;
  }

  .page-contact-subtitle {
    padding: 0 8% 2% 8%;
  }
}