/* ======================================================
   RESET & GLOBAL STYLES
====================================================== */
html, body {
  background-color: #1E1E1E;
  color: white;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Manrope', sans-serif;
}



.podcast-info-right .podcast-links-platforms {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px  !important;
  flex-wrap: wrap;
	margin: 20px 20px 20px 0   !important;
}

.podcast-links {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 20px;
}

/* ======================================================
   CONTAINERS & WRAPPERS
====================================================== */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 40px 40px;
  box-sizing: border-box;
}

.content-wrapper {
  width: 60%;
  margin: 0 auto 40px auto;
}

.has-spacing {
  margin: 40px 0;
}
.no-margin-bottom {
  margin-bottom: 0;
}

/* ======================================================
   HEADER
====================================================== */
.site-header {
  margin-top: 40px;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

.site-title a {
  text-transform: uppercase;
  font-size: 2.6rem;
  text-decoration: none;
  color: var(--text-color, #ffffff); /* couleur du texte */
  line-height: 1.1;
  display: inline-block;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.main-nav a {
  color: var(--text-color, #ffffff); /* couleur du texte */
  text-decoration: none;
}
.main-nav a:hover {
  color: var(--main-color);
}

.btn-outline {
  border: 1px solid white;
  border-radius: 10px;
  padding: 8px 16px;
  color: var(--text-color, #ffffff); /* couleur du texte */
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.btn-outline:hover {
  background: transparent;
  color: var(--main-color);
  border-color: var(--main-color);
}

.logo-wrapper img {
  max-height: 60px;
  height: auto;
  width: auto;
}

.site-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: bold;
}

.site-slogan {
  margin: 0;
  font-size: 1rem;
  color: #cccccc;
}

/* ======================================================
   HERO SECTION (Épisode à la une)
====================================================== */
.hero-episode-full {
  position: relative;
  overflow: hidden;
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 40px;
  width: 100%;
  padding-top: 40px;
}

.hero-episode-background {
  position: absolute;
  top: 0;
  left: 30%;
  width: calc(100% - 30%);
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(12px);
  opacity: 0.6;
  z-index: 0;
  animation: heroZoom 10s infinite alternate;
  pointer-events: none;
}

.hero-episode-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(30,30,30,0.8) 10%, transparent 80%);
  z-index: 1;
  pointer-events: none;
}

.hero-episode-content {
  position: relative;
  z-index: 2;
  padding-bottom: 40px;
  width: 100%;
  box-sizing: border-box;
}

.hero-episode-inner {
  display: grid;
  grid-template-columns: 30% 50% 20%;
  gap: 2rem;
  align-items: end;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.hero-episode-inner .episode-details a,
.hero-episode-inner .episode-details a:visited {
  color: #acbde2 !important;
  text-decoration: none !important;
}
.hero-episode-inner .episode-details a:hover,
.hero-episode-inner .episode-details a:focus {
  color: white !important;
}
.hero-episode-inner .episode-details h1 a,
.hero-episode-inner .episode-details h2 a {
  color: white !important;
  text-decoration: none !important;
}

/* ======================================================
   VISUELS
====================================================== */
.episode-image img,
.episode-secondaire-left img,
.podcast-info-left img,
.podcast-block .podcast-thumbnail img,
.thumbnail-square {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.episode-image {
  position: relative;
  width: 30%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  align-self: flex-end;
}

/* ======================================================
   AUDIO PLAYER
====================================================== */

.custom-audio-wrapper .player-and-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.custom-audio-wrapper audio {
  width: 100%;
  max-width: 400px;
  background-color: transparent;
  color-scheme: dark;
  border-radius: 8px;
  border: none;
}
.custom-audio-wrapper-inline audio {
  width: 100%;
  max-width: 400px;
  background-color: transparent;
  color-scheme: dark;
  border-radius: 8px;
  border: none;
}

.custom-audio-wrapper-inline .player-and-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.gpt-share-actions-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}





.gpt-like-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.gpt-heart-icon {
  width: 28px;
  height: 28px;
  fill: transparent;
  stroke: var(--text-color);
  stroke-width: 1.2;
  padding: 2px;
  box-sizing: content-box;
  overflow: visible;
}

.gpt-like-button.liked .gpt-heart-icon {
  fill: var(--text-color);
  stroke: var(--text-color);
}

/* Boutons partagés (copier / WhatsApp) */
.gpt-share-button:hover {
  background-color: #1E1E1E;
}

/* Icône du cœur (état normal) */
.gpt-heart-icon {
  width: 28px;
  height: 28px;
  fill: transparent;
  stroke: var(--text-color);
  stroke-width: 1.2;
  padding: 2px;
  box-sizing: content-box;
  transition: all 0.2s ease;
}

/* Icône du cœur (liké) */
.gpt-like-button.liked .gpt-heart-icon {
  fill: var(--text-color);
  stroke: var(--text-color);
  stroke-width: 1.4;
}

/* Icône du cœur au hover (plus épais) */
.gpt-like-button:hover .gpt-heart-icon {
  stroke-width: 1.8;
}

/* ======================================================
   BLOC PODCAST
====================================================== */
.podcast-block {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.podcast-title {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--text-color);
}

.episode-date {
  margin-top: 0px;
  font-size: 0.85rem;
  color: #cccccc;
}

.podcast-block.podcast-block--thematic .podcast-title {
  color: var(--text-color);
}
.podcast-block.podcast-block--thematic .podcast-thumbnail img {
  border-radius: 0;
}
.align-left {
  text-align: left;
}

/* ======================================================
   GRILLES
====================================================== */
.grid-top5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.grid-podcast {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.grid-podcasts,
.grid-random-episodes,
.grid-thematiques,
.grid-podcasts-thematiques {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.tri-podcasts {
  margin-top: 1rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tri-podcasts label {
  font-weight: 500;
  color: #333;
}

.tri-podcasts select {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: white;
  font-family: inherit;
  font-size: 0.95rem;
  appearance: none;
  cursor: pointer;
}

.tri-podcasts select:hover {
  border-color: #888;
}

/* ======================================================
   SECTIONS & HEADERS
====================================================== */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
	margin-bottom: 20px;
}
.section-header .btn-link {
  margin-left: auto;
  font-size: 0.9rem;
  white-space: nowrap;
}

.section-header .tri-podcasts {
  margin-top: 0;
}

.section-header .tri-podcasts select {
  background: transparent;
  border: 1px solid white;
  border-radius: 10px;
  color: var(--text-color);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  appearance: none;
  cursor: pointer;
}

/* Optionnel : au survol */
.section-header .tri-podcasts select:hover {
  border-color: #ccc;
}

/* Pour la flèche (certains navigateurs) */
.section-header .tri-podcasts select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}

/* ======================================================
   FOOTER
====================================================== */


.site-footer .container {
  display: flex;
  justify-content: center;
}
.site-footer ul {
  display: inline-flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer a {
  color: var(--text-color);
  text-decoration: none;
	font-size: 12px;
	color: #cccccc;
}
.site-footer a:hover {
  color: var(--main-color);
}

/* ======================================================
   SEARCH FORM IN HEADER
   - Centré, en ligne, avec champ et bouton stylés
====================================================== */

/* Conteneur du champ (centré horizontalement) */
.search-section {
  margin: 0;
  text-align: center;
  display: flex;
  align-items: center;
  height: 100%;
}

/* Formulaire en ligne */
.custom-search-form {
  display: inline-flex;
  align-items: center;
}

/* Champ de recherche */
.custom-search-input {
  height: 52px;
  min-width: 300px;
  background-color: #333333;
  border: 1px solid #ffffff;
  border-radius: 10px 0 0 10px;
  color: white;
  padding: 0 16px;
  font-size: 1.1rem;
  outline: none;
}

/* Bouton de recherche */
.custom-search-button {
  height: 52px;
  background-color: #1E1E1E;
  border: 1px solid #ffffff;
  border-left: none;
  border-radius: 0 10px 10px 0;
  color: white;
  padding: 0 16px;
  cursor: pointer;
  font-size: 1rem;
}

/* Hover du bouton */
.custom-search-button:hover {
  background-color: #444444;
}

/* Liens dans le menu principal (header) */
.header-inner a,
.site-header a,
.main-nav a {
  color: var(--text-color);
  text-decoration: none;
}

/* Liens visités dans le header : restent blancs */
.header-inner a:visited,
.site-header a:visited,
.main-nav a:visited {
  color: var(--text-color);
}

/* Hover : deviennent bleu clair */
.header-inner a:hover,
.site-header a:hover,
.main-nav a:hover {
  color: var(--main-color);
}

/* Liens dans le footer */
.site-footer a {
  color: white;
  text-decoration: none;
}

/* Liens visités dans le footer : restent blancs */
.site-footer a:visited {
  color: var(--text-color);
}

/* Hover dans le footer : deviennent bleu clair */
.site-footer a:hover {
  color: var(--main-color);
}

.container.section-secondaire {
  margin: 40px auto;
}

/* =====================================
   Liens généraux : bleu clair → blanc
===================================== */

a {
  color: var(--main-color, #00BFFF);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--text-color, #ffffff); /* couleur du texte */
}

/* =====================================
   Liens dans les titres (h1 à h4)
   Toujours blancs, sauf au hover
===================================== */
/* Titres avec lien */
h1 a,
h2 a,
h3 a,
h4 a {
  color: var(--text-color, #ffffff); /* couleur du texte */
  text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover {
  color: var(--main-color, #00BFFF);
}

h1 a:focus,
h2 a:focus,
h3 a:focus,
h4 a:focus,
h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited {
  color: var(--text-color, #ffffff); /* couleur du texte */
}

.podcast-info-wrapper {
  margin: 0 0 80px 0;
}

.section-hero h1 a,
.section-hero h2 a {
  color: var(--text-color, #ffffff)  !important; /* couleur du texte */
  text-decoration: none !important;
}

.section-hero h1 a:visited,
.section-hero h2 a:visited,
.section-hero h1 a:focus,
.section-hero h1 a:focus {
  color: var(--text-color, #ffffff)  !important; /* couleur du texte */
}

.section-hero h1 a:hover,
.section-hero h2 a:hover {
  color: var(--main-color);
}

/* === Wrapper global des épisodes secondaires === */
.episode-secondaire-wrapper {
  display: flex;
  gap: 40px; /* espace entre les colonnes */
  margin-top: 40px;
  align-items: flex-start;
  box-sizing: border-box;
  flex-wrap: wrap; /* en cas d'étroitesse sur petits écrans */
}

/* === Colonne gauche (visuel) === */
.episode-secondaire-left {
  flex: 0 0 30%;
  max-width: 30%;
  box-sizing: border-box;
}

/* Image dans la colonne gauche */
.episode-thumbnail-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* === Colonne droite (texte) === */
.episode-secondaire-right {
  flex: 1; /* prend le reste soit ~70% */
  max-width: 70%;
  box-sizing: border-box;
}

/* === Typo et mise en forme complémentaire (optionnel) === */
.episode-secondaire-name {
  margin-top: 0;
}

.episode-secondaire-date {
  color: #ccc;
  font-size: 0.9rem;
}

.episode-secondaire-description,
.episode-secondaire-link {
  margin-top: 1rem;
}

.episode-see-link {
  color: #acbde2;
  text-decoration: none;
}

.audio-warning {
  color: red;
  margin-top: 1rem;
}
.episode-thumbnail-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 80px;
}

.pagination-previous a,
.pagination-next a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.pagination-previous a:hover,
.pagination-next a:hover {
  color: #acbde2; /* bleu clair */
}

.pagination-previous a:visited,
.pagination-next a:visited {
  color: white;
}

.hero-episode-title {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
}

.hero-episode-title a {
  color: white;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hero-episode-title a:hover {
  color: #acbde2; /* bleu clair */
}

.hero-episode-title a:visited {
  color: white;
}

.description-podcast {
  width: 100%;
  max-width: 800px;
  margin: 80px auto 80px 0; /* aligné à gauche, espace bas */
  padding: 0;
  text-align: left;
}

.description-podcast p,
.description-podcast a,
.description-podcast ul,
.description-podcast ol {
  color: white;
  line-height: 1.6;
  font-size: 1rem;
}

.description-podcast .podcast-site {
  margin-top: 20px;
  font-size: 0.95rem;
}

/* Section secondaire avec espacement */
.container.section-secondaire {
  margin: 40px auto 0 auto;
  padding: 0 40px;
  max-width: 1400px;
  box-sizing: border-box;
}

/* Contenu principal */
.content-wrapper#article-content {
  width: 100%;
  max-width: 800px;
  margin: 80px 0 80px 0;
}

/* Bloc d'infos podcast */
.podcast-info-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  box-sizing: border-box;
}

/* Colonne gauche (visuel) */
.podcast-info-left {
  flex: 0 0 30%;
  max-width: 30%;
}
.podcast-info-left img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  display: block;
}

/* Colonne droite (infos) */
.podcast-info-right {
  flex: 1;
  width: 70%;
}
.podcast-info-right > * {
  margin-top: 0;
  padding-top: 0;
}

/* Lien titre du podcast */
.podcast-name a {
  color: white;
  text-decoration: none;
}
.podcast-name a:hover {
  color: #acbde2;
}
.podcast-name a:visited {
  color: white;
}

/* Structure principale */
.hero-episode-full {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hero-episode-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.hero-episode-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.hero-episode-content {
  position: relative;
  z-index: 3;
  padding: 60px 0;
}

.hero-episode-wrapper {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-end; /* Alignement en bas */
}

.hero-episode-inner {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 40px;
  align-items: flex-end; /* Alignement en bas */
}

.episode-details {
  width: 70%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Aligne le texte en bas */
  color: white;
}

/* Liens */
.episode-details a {
  color: white;
  text-decoration: none;
}

.episode-details a:hover {
  color: #acbde2;
}

.episode-details a:visited {
  color: white;
}

/* Titres */
.episode-details h1 a,
.episode-details h2 a {
  font-size: 2rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

.episode-details h1 a:hover,
.episode-details h2 a:hover {
  color: #acbde2;
}

.episode-details h1 a:visited,
.episode-details h2 a:visited {
  color: white;
}

/* Audio */
.custom-audio-wrapper {
  margin-top: 1rem;
}

/* Message d’erreur audio */
.episode-details .audio-warning {
  color: red;
  margin-top: 1rem;
}



.footer-nav {
  margin-top: 20px;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  display: inline-block;
  margin: 0 15px;
}

.footer-menu a {
  color: white;
  text-decoration: none;
}

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

.footer-menu a:visited {
  color: white;
}

.badge-audiopictura {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.badge-audiopictura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.podcast-thumbnail {
  position: relative;
}

/* Badge Audio Pictura commun (fonctionne pour podcast & épisode) */
.podcast-thumbnail,
.episode-thumbnail {
  position: relative;
}

.audio-pictura-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.thumbnail-square {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}


.podcast-block .podcast-thumbnail {
  position: relative;
}

.podcast-block .podcast-thumbnail .audiopictura-badge {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  width: 24px !important;
  height: 24px !important;
  z-index: 10 !important;
  display: block !important;
}

.podcast-block .podcast-thumbnail 

.episode-secondaire-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.hero-episode-full {
  width: 100%;
}



.episode-thumbnail {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.audiopictura-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  z-index: 10;
}



/* Infos */
.episode-details {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
}

.podcast-name {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.podcast-name a {
  color: white;
  text-decoration: none;
}

.podcast-author,
.podcast-description {
  margin: 0 0 1rem;
  color: #ccc;
}

.podcast-link {
  margin: 0 0 1rem;
}

.podcast-link a {
  color: #acbde2;
  text-decoration: underline;
}

.latest-episode-label {
  font-weight: bold;
  margin: 1.5rem 0 0.5rem;
  color: white;
}

.no-audio-warning {
  color: red;
  margin-top: 1rem;
}

/* Image responsive */
.episode-thumbnail-img {
  width: 100%;
  height: auto;
  display: block;
}

/* S'assure que l'image prend toute la largeur de son conteneur */
.podcast-info-left img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* optionnel, pour l'esthétique */
}

/* ======================================================
   ANIMATIONS
====================================================== */
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

/* ======================================================
   RESPONSIVE
====================================================== */

/* Responsive mobile */

/* Grille par défaut : 6 colonnes */
.grid-podcasts-thematiques {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

/* Responsive mobile : 2 colonnes */

/* Grille responsive pour mobile : 2 colonnes, 3 lignes */

/* Responsive mobile : visuel au-dessus, infos en dessous */

/* ✅ Affichage mobile : empile visuel + texte */

/* ✅ Sur mobile : on réduit la marge à 10px */

/* Mobile : empiler à 100% */

/* Responsive : empilement mobile */

a:hover img:not(.audiopictura-badge img):not(.badge-audiopictura img):not(.badge-audiopictura > img) {
  outline: 2px solid var(--main-color, #00BFFF);
  outline-offset: -2px;
  border-radius: 8px;
  transition: outline 0.2s ease;
}
/* ======================================================
   PODCAST – SECTIONS AVEC ONGLET & SAISONS
====================================================== */

/* Onglets en haut */
.podcast-tabs {
  display: flex;
  gap: 30px;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid #666;
}

.podcast-tab {
  color: white;
  text-decoration: none;
  padding: 10px 0;
  position: relative;
}
.podcast-tab:hover {
  color: #acbde2;
}
.podcast-tab--active {
  color: white;
  font-weight: 700;
}
.podcast-tab--active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: white;
}

/* Grille globale */
.podcast-content-area {
  display: flex;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* Colonne de gauche : saisons */
.podcast-sidebar {
  flex: 0 0 15%;
	min-width: 150px;
}
.season-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.season-item {
  color: #bbb;
  font-size: 1rem;
  margin-bottom: 10px;
  cursor: pointer;
}
.season-item:hover {
  color: white;
}
.season-active {
  color: white;
  font-weight: bold;
  font-size: 1.1rem;
}

/* Colonne de droite */
.podcast-episodes,
.podcast-description-area {
  flex: 1;
  max-width: 85%;
}

/* Description du podcast */
.podcast-description-area {
  display: none;
}
.tab-content--active {
  display: block;
}

/* Ajustement de l'espacement dans l'onglet "Description du podcast" */
.tab-content--description .description-podcast {
  margin-top: 0px;
}

.tab-content--description .description-podcast > *:first-child {
  margin-top: 0;
}

/* Ligne de séparation entre les onglets et le contenu */
.tab-separator {
  margin-bottom: 80px; /* Ajuste ici la marge sous la ligne */
}

/* Suggestions : disposition correcte */
.podcast-content-area {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* Sidebar toujours à gauche */
.podcast-sidebar {
  flex: 0 0 15%;
  min-width: 150px;
}

/* Contenu principal (onglets) */
.podcast-episodes,
.podcast-description-area,
.podcast-suggestions {
  flex: 1;
  width: 100%;
}

/* Grille suggestions bien alignée à droite */
.podcast-suggestions .grid-top5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.single #article-content {
  margin-top: 0;
}

.podcast-content-area[data-tab-active="podcast"] .podcast-sidebar,
.podcast-content-area[data-tab-active="suggestions"] .podcast-sidebar {
  display: none;
}
/* Supprime toute marge supérieure du contenu natif de l'article */
#article-content > *:first-child {
  margin-top: 0 !important;
}

/* Supprime la marge au-dessus des infos épisode (colonne gauche) */
.episode-meta > *:first-child {
  margin-top: 0 !important;
}

/* Supprime la marge au-dessus des sections Suggestions */
.tab-content--suggestions {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Élimine toute marge sur les sections de suggestions */
.tab-content--suggestions .grille-secondaire {
  margin: 0 !important;
  padding: 0 !important;
}

/* Supprime la marge au-dessus du titre de section */
.tab-content--suggestions .section-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Supprime les marges internes de la grille */
.tab-content--suggestions .grid-top5,
.tab-content--suggestions .grid-top6 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.tab-content--suggestions h2:first-child,
.tab-content--suggestions p:first-child,
.tab-content--suggestions section:first-child {
  margin-top: 0 !important;
}

.podcast-block {
  position: relative;
}

.podcast-rank-badge {
  position: absolute;
  top: -25px;
  left: -10px;
  z-index: 20;
  color: #666666;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.top5-highlight {
  position: relative;
  padding: 2rem 0;
  background: linear-gradient(
  to right,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 0.6) 50%,
  rgba(0, 0, 0, 0) 100%
);
  z-index: 1;
}

.top5-highlight::before,
.top5-highlight::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
  to right,
  rgba(102, 102, 102, 0) 0%,
  rgba(102, 102, 102, 0.6) 50%,
  rgba(102, 102, 102, 0) 100%
);
  z-index: 2;
}

.top5-highlight::before {
  top: 0;
}

.top5-highlight::after {
  bottom: 0;
}

/* === FUSIONS NETTOYÉES === */

.site-footer {
  color: white;
  font-size: 0.8rem;
  padding: 40px 0;
  text-align: center;
}

.gpt-share-button {
  background: transparent
  border-radius: 10px
  border: 1px solid white
  color: white
  cursor: pointer
  font-family: inherit
  font-size: 12px
  font-size: 16px
  font-weight: 300
  padding: 5px 10px;
}

.episode-image {
  align-items: flex-end
  align-self: flex-end
  display: flex
  justify-content: flex-start
  position: relative
  width: 30%;
}

.audiopictura-badge img {
  /* optionnel si tu veux un badge parfaitement rond */
  border-radius: 50%
  display: block
  height: auto
  width: 100%;
}
.gpt-share-button {
  background-color: transparent;
  border: 1px solid var(--text-color, #ffffff);   /* ← couleur personnalisée de typo */
  color: var(--text-color, #ffffff);              /* ← idem pour le texte */
  padding: 0.4rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  white-space: nowrap;
}