/* Mise en page globale */
body {
  margin: 0; /* Supprime les marges par défaut */
  font-family: Arial, sans-serif; /* Police simple */
  font-size: 16px;
  background-color: #f5f5f5; /* Fond doux */
  align-items: center; /* Centre horizontalement tous les éléments directs de body */
  
  display: flex; /* Flexbox activé */
  flex-direction: column; /* Aligne les éléments verticalement */
  gap: 16px; /* Espace entre chaque article */
  width: 100%; /* Prend toute la largeur disponible */
}

/* @font-face {
    font-family: 'Luciole';
    src: url('fonts/Luciole-Regular.woff2') format('woff2'),
         url('fonts/Luciole-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
} */

/* Conteneur d'un titre */
.titre {
  position: fixed;
  top:0px;
  z-index: 1000; /* Assure que le titre reste au-dessus des autres éléments */
  margin-top: 0px;

  display: flex; /* Flexbox pour les éléments internes */
  flex-direction: row; /* Aligne les éléments verticalement */
  background-color: #deefff;
  border-radius: 12px; /* Arrondit les angles */
  padding: 16px; /* Espacement interne */
  gap: 16px; /* Espace entre l'image et le texte */
  align-items: flex-start; /* Aligne les contenus en haut */
  width: 90%; /* Limite la largeur maximale */

  /* Ombre légère */
  box-shadow: 8px 8px 12px #666;
  transition-property: box-shadow;
  transition-duration: 0.5s;
}

.titre:hover
{
  /* Ombre plus forte */
  transition-property: box-shadow;
  transition-duration: 0.5s;
  box-shadow: 4px 4px 8px #111;
}

/* Contenu textuel */
.titre-content {
  flex: 1; /* Permet au texte de prendre tout l'espace disponible */
}

/* Image */
.titre-image {
  max-width: 300px; /* Taille maximale de l'image */
  width: 100%; /* S'adapte à l'espace disponible */
  height: auto; /* Respecte les proportions */
  border-radius: 8px; /* Coins arrondis */
}

/* Conteneur d'un article */
.article-container {
  display: flex;
  flex-direction: column; /* Les articles sont alignés verticalement */
  align-items: center; /* Centre les articles horizontalement */
  gap: 16px; /* Espace entre les articles */
  margin-top: 10px; /* Espace entre le titre et les articles */
  margin-right: auto; /* Pour centrer */
  margin-left: auto; /* Pour centrer */
}

/* Intérieur d'un article */
.article {
  display: flex; /* Flexbox pour les éléments internes */
  flex-direction: row; /* Aligne les articles verticalement */
  background-color: #eef5f9; /* Fond bleu pastel */
  border-radius: 12px; /* Arrondit les angles */
  padding: 16px; /* Espacement interne */
  gap: 16px; /* Espace entre l'image et le texte */
  align-items: flex-start; /* Aligne les contenus en haut */
  width: 90%;

  /* Ombre légère */
  box-shadow: 8px 8px 12px #666;
  transition-property: box-shadow;
  transition-duration: 0.5s;
}

.article:hover
{
  /* Ombre plus forte */
  transition-property: box-shadow;
  transition-duration: 0.5s;
  box-shadow: 4px 4px 8px #111;
}

.contenu {
  margin-top: 200px; /* Espace pour éviter que le contenu ne soit caché sous le titre */
  width: 90%;
}

/* Contenu textuel */
.article-content {
  flex: 1; /* Permet au texte de prendre tout l'espace disponible */
}

/* Image */
.article-image {
  display: block;
  max-width: 300px; /* Taille maximale de l'image */
  width: 100%; /* S'adapte à l'espace disponible */
  height: auto; /* Respecte les proportions */
  border-radius: 8px; /* Coins arrondis */
}

.image-container {
  position: relative;
  display: inline-block;
  aspect-ratio: 1/1;
}

/* Overlay recouvrant toute l'image */
.overlay-icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1); /* fond semi-transparent */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  max-width: 200px;
  color: #FFF;
  cursor: pointer; /* indique que c'est cliquable */
  transition: background-color 0.3s;
}

/* Facultatif : au survol, n'hésitez pas à modifier l'opacité */
.overlay-icon:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Hover */

/* Style pour les liens sociaux */
.audio-download a,
.social-links a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

/* Style pour le span (tooltip) */
.audio-download a span ,
.social-links a span {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.7); /* Fond transparent à 70% */
    color: #fff;
    text-align: center;
    border-radius: 10px; /* Bords arrondis */
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%; /* Position au-dessus du lien */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 16px;
    font-weight: normal; /* Assure que le texte n'est pas en gras */
}

/* Afficher le span (tooltip) au survol */
.audio-download a:hover span ,
.social-links a:hover span {
    visibility: visible;
    opacity: 1;
}

/* Flèche du tooltip */
.audio-download a span::after ,
.social-links a span::after {
    content: '';
    position: absolute;
    top: 100%; /* Position en bas du tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent; /* Flèche avec fond transparent */
}

/* Gestion des styles de texte */
h1 {
  font-size: 1.6rem; /* Taille du titre */
  margin: 0 0 8px; /* Espacement juste en bas */
  text-align: center; /* centrer le texte */
}

h2 {
  font-size: 1.4rem; /* Taille du titre */
  margin: 0 0 2px; /* Espacement juste en bas */
}

.meta-info {
  font-size: 0.9rem; /* Taille des métadonnées */
  color: #333; /* Couleur gris foncé */
  margin: 0; /* Espacement en bas */
}

.description {
  margin: 0; /* Supprime les marges par défaut */
  margin-top: 10px;
  font-size: 1rem; /* Taille du texte */
  color: #555; /* Couleur gris moyen */
  white-space: pre-wrap; /* Respecte les retours à la ligne */
}

.audio-download {
  text-align: center; /* centrer le texte */
  font-size: 120%;
}

button {
  background-color: #cdd;   /* Pastel rosé */
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #bcb;   /* Légère variation au survol */
}

/* Social link */
.social-links {
    display: flex;
    gap: 10px;
}
.social-links a {
    text-decoration: none;
    color: #333;
    font-size: 24px;
}

.logo {
    transition: transform 0.3s ease; /* Durée de la transition et courbe d'accélération */
}

.logo.youtube {
    /* filter: brightness(0) saturate(100%) invert(24%) sepia(94%) saturate(7461%) hue-rotate(337deg) brightness(101%) contrast(116%); */
}

.logo.spotify {
    /* filter: brightness(0) saturate(100%) invert(34%) sepia(100%) saturate(378%) hue-rotate(93deg) brightness(103%) contrast(101%); */
}

.logo.apple-podcast {
    /* filter: brightness(0) saturate(100%) invert(74%) sepia(10%) saturate(7487%) hue-rotate(176deg) brightness(107%) contrast(96%); */
}

.logo.facebook {
    /* filter: brightness(0) saturate(100%) invert(38%) sepia(83%) saturate(2093%) hue-rotate(192deg) brightness(94%) contrast(96%); */
}

.logo.email {
    /* filter: grayscale(100%) brightness(0) contrast(100%); */
}

.logo.newsletter {
    /* filter: brightness(0) saturate(100%) invert(33%) sepia(98%) saturate(1800%) hue-rotate(190deg) brightness(90%) contrast(94%); */
}

.logo.audio-download {
    /* filter: brightness(0) saturate(100%) invert(30%) sepia(86%) saturate(5354%) hue-rotate(250deg) brightness(100%) contrast(106%); */
}
.logo.image-table {
    /* filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(4000%) hue-rotate(150deg) brightness(100%) contrast(100%); */
}
.logo:hover {
    transform: scale(1.5); /* Grossissement de 150% */
}

/* Responsive : écran étroit */
@media (max-width: 700px), (max-height: 500px) {
  .titre {
    position: relative;
    flex-direction: column; /* Empile texte et image verticalement */
    align-items: stretch; /* S'adapte à la largeur complète */
    width: 90%;
    margin-top: 0px;
  }

  .article-container {
    width: 100%;
  }

  .article {
    flex-direction: column; /* Empile texte et image verticalement */
    align-items: center; /* S'adapte à la largeur complète */
  }

  .image-container {
    max-width: 100%;
  }

  .titre-image {
    align-self: center; /* Centre l'image sur mobile */
  }
  
  .social-links {
      display: block;
  }
}