/* STRUCTURE GLOBALE : permet de gérer un layout vertical (header + contenu) */
body {
    display: flex;
    flex-direction: column;
}

/* HEADER : organisation en grille (bouton gauche, titre centré, espace droite) */
.header-page {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background: rgb(122, 122, 122);
    margin-top: 0;
    border: 1px solid #222;
    height: 5rem;
}

/* POSITION DU BOUTON RETOUR DANS LA GRILLE */
.back-btn {
    grid-column: 1;
    margin: 0.3rem 1rem;

}

/* Surcharge base.html, on  PLUS PRONONCÉ */
.back-btn:hover {
    border-color: #0c0c0c;
}


/* TITRE CENTRÉ DANS LA GRILLE */
.header-page h2 {
    grid-column: 2;
    justify-self: center;
    margin: 0;
    color: #fcfcfc;
    text-decoration: underline;
    font-size: 1.5rem;
}

/* LISTE DES PDF :
   - flex en colonne
   - largeur limitée pour éviter un affichage trop large sur desktop
   - centrage automatique avec margin: auto */
.pdf-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 900px; 
    margin: 0 auto;
    padding: 1.25rem;
}

/* PDF RESPONSIVE :
   - width: 100% → s'adapte à la largeur écran
   - height: 70vh → s'adapte à la hauteur écran
   - min-height → garantit lisibilité sur mobile */
.pdf-item iframe {
    width: 100%;
    height: 70vh;
    min-height: 400px;
    border: none;
}

/* LIEN POUR OUVRIR LE PDF EN GRAND */
.pdf-item a {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.9rem;
}

/* RESPONSIVE MOBILE :
   - passage du header en colonne
   - amélioration de la lisibilité et des espacements */
@media (max-width: 770px) {
    .header-page {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
        height: auto;
        /* gris plus clair sur mobile */
        background: rgb(147, 146, 146);
    }

    .header-page h2 {
        font-size: 1rem;
        margin: 0;
    }

    .back-btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.4rem;
        margin: 0;
        
    }
    .pdf-item iframe {
        display: none;
    }

    /* Sur mobile, on transforme le lien en bouton plus visible et on supprime l'iframe qui ne fonctionne pas */
    .pdf-item a {
        display: block;
        text-align: center;
        padding: 0.7rem;
        background: #2739fa;
        color: white;
        border-radius: 6px;
        font-weight: 600;
    }
}