/* Cyclisme & Dopage - Feuille de style
// Création     : 22/04/2026
// Maj          : 23/05/2026
// Purpose      : feuille de style pour les pages ICCD
// Usage        : ICCD_Html.xlsm
*/

#div-encadre,
.div-encadre  {
    background-color: RGB(192, 192, 192); /* Couleur de fond spécifique */
    padding: 10px; /* Ajoute un peu d'espace autour du texte pour le démarquer */
    font-style: italic; /* Met le texte en italique */
    border-radius: 10px; /* Arrondit les coins */
    margin-left: 10px;
    margin-top: 20px; /* Espace au-dessus */
    margin-bottom: 20px; /* Espace au-dessous */
}
#div-encadre-maj {
    background-color: RGB(180, 84, 125); /* Couleur de fond spécifique */
    padding: 10px; /* Ajoute un peu d'espace autour du texte pour le démarquer */
    font-style: italic; /* Met le texte en italique */
    border-radius: 10px; /* Arrondit les coins */
    margin-left: 10px;  
}

/* Style pour les cartons jaune */
#div-carton-jaune {
  display: flex;
  align-items: flex-start; /* pour aligner le haut de l'image avec le haut du texte */
  gap: 10px; /* espace entre les colonnes */
  align-items: stretch; /* les deux colonnes auront la même hauteur */    
}

.colonne-carton-jaune-gauche {
  width: 10%;
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement si besoin */   
  
}

.colonne-carton-jaune-droite {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center; /* centre verticalement */
}


/* Style pour les années */
.menu_annees {
}
.menu_annees ul {
    margin: 0 0 15px 0;
    text-align: center;
    line-height: 25px;
}
.menu_annees ul li {
    margin: 0;
    padding: 0;
    display: inline;
}
.menu_annees ul li a {
    margin: 0 -1px;
    padding: 3px 15px;
    background: #B4547D;
    color: #DCDCDC;
    text-decoration: none;
    border-radius: 10px;
}

/* Style pour les cartes ICCD */

/* Conteneur des images */
.image-container {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne suivante si nécessaire */
    justify-content: center;
    gap: 10px; /* Espacement entre les images */
    padding: 10px; /* Espacement interne */
}

/* Images réactives */
.responsive-image {
    width: auto;
    max-width: 100vw; /* Ne dépasse pas la largeur de l'écran */
    height: auto; /* Maintient les proportions de l'image */
    border: 0; /* Supprime les bordures */
    max-height: 150px; /* Limite la hauteur maximale */
}

/* Media query pour ajuster les images sur les écrans plus petits */
@media (max-width: 600px) {
    .responsive-image {
        max-width: 90vw; /* Ne dépasse pas 90% de la largeur de l'écran */
        max-height: 100px; /* Limite la hauteur pour les petits écrans */
    }
}

/* Media query pour ajuster les images sur les écrans de taille moyenne */
@media (min-width: 601px) and (max-width: 1024px) {
    .responsive-image {
        max-width: 45vw; /* Ne dépasse pas 45% de la largeur de l'écran */
        max-height: 120px; /* Limite la hauteur */
    }
}

/* Media query pour ajuster les images sur les grands écrans */
@media (min-width: 1025px) {
    .responsive-image {
        max-width: 30vw; /* Ne dépasse pas 30% de la largeur de l'écran */
        max-height: 150px; /* Limite la hauteur */
    }
}

      /* Style pour les tweets embedded */
.twitter-tweet {
  margin-left: auto !important;
  margin-right: auto !important;
}