body {
    display: grid;
    grid-template-areas:
        "header"
        "barre"
        "contenu";
    grid-template-columns: 1fr;
    /* Augmentation de la hauteur du header pour mieux voir l'image */
    grid-template-rows: 250px 100px auto;
    min-height: 100vh;
    margin: 0;
    font-family: sans-serif; /* Ajout d'une police de base */
}

.header-vtubbers {
    grid-area: header;
    /* Correction du chemin et ajout de propriétés pour un meilleur affichage */
    background: url('../images/vtubbers/header-image.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Amélioration de la lisibilité du titre */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Ombre portée pour le texte */
}

.header-vtubbers h1 {

    display: block;    
    color:#f0f0f0;
    border-radius: 5px;
    font-size: 3em;
    position:relative;
    z-index: 1;
    padding:10px 15px;

}

.header-vtubbers h1::before {
    content: '';
    background-color: rgba(51, 51, 51, 0.3);
    position: absolute;
    inset:0;
    z-index: -1;
    border-radius: 5px;
}

.barre-image {
    grid-area: barre;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); /* Colonnes plus flexibles */
    gap: 10px; /* Espacement fixe */
    padding: 10px; /* Un peu plus d'aeration */
    background-color: #f0f0f0; /* Fond légèrement grisé */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal si l'espace n'est pas plein */
}

/* L'ancien placeholder devient un conteneur pour l'image */
.placeholder-miniature {
    width: 150px;
    height: 85px;
    overflow: hidden; /* Masque le dépassement de l'image */
    border-radius: 5px; /* Bords arrondis */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Ombre légère */
}

/* Style pour que l'image remplisse son conteneur */
.placeholder-miniature img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que l'image couvre la zone sans se déformer */
    display: block; /* Supprime l'espace sous l'image */
}

.contenu-vtubbers {
    grid-area: contenu;
    padding: 20px;
    position: relative; /* Nécessaire pour le pseudo-élément */
    isolation: isolate; /* Crée un nouveau contexte de rendu */
    color: #333; /* Couleur de texte plus foncée pour le contraste futur */
}

/* Pseudo-élément pour l'arrière-plan avec opacité */
.contenu-vtubbers::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/vtubbers/fond-contenu.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0.3; /* Opacité réglable (ex: 0.3 pour 30%) */
    z-index: -1; /* Se place derrière le contenu */
}

.retour-accueil {
    width:300px;
    margin:auto;
}