/* ============================================================================
   Documentation — portage de 2024/assets/css/styles.css:775-874 (`.container_doc`).

   Un cadre beige a coins 16, et dedans une ligne gris fonce par document :
   pictogramme, nom + format/poids, puis les deux boutons. Les pictogrammes
   d'apercu et de telechargement existent en deux etats sur le S3 ; 2024 les
   posait en `background-image` avec l'URL du bucket en dur, ce qui n'est pas
   possible ici (domaine porte par une variable d'environnement) : les deux
   fichiers sont charges et l'affichage bascule en CSS.
   ============================================================================ */

.sy-docs {
    display: block;
    margin-bottom: 32px;
    padding: 32px;
    border-radius: 16px;
    background: var(--sy-beige);
}

.sy-docs__categorie {
    margin-bottom: 16px;
}

.sy-docs__liste {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sy-docs__ligne {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 16px;
    border-radius: 16px;
    background: var(--sy-gris-fonce);
}

.sy-docs__ident {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sy-docs__picto {
    margin-inline-end: 16px;
}

.sy-docs__nom {
    display: block;
    color: var(--sy-blanc);
    font-size: 20px;
    font-weight: 700;
}

.sy-docs__meta {
    display: block;
    color: var(--sy-blanc);
    font-size: 13px;
    font-weight: 300;
}

.sy-docs__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-width: 250px;
}

/* ----- Bouton d'apercu ---------------------------------------------------- */

.sy-docs__apercu {
    display: block;
    width: 60px;
    height: 50px;
    margin-inline-end: 16px;
}

.sy-docs__apercu-actif {
    display: none;
}

.sy-docs__apercu:hover .sy-docs__apercu-repos,
.sy-docs__apercu:focus-visible .sy-docs__apercu-repos {
    display: none;
}

.sy-docs__apercu:hover .sy-docs__apercu-actif,
.sy-docs__apercu:focus-visible .sy-docs__apercu-actif {
    display: block;
}

/* ----- Bouton de telechargement ------------------------------------------- */

.sy-docs__telecharger {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 8px;
    background: var(--sy-blanc);
    text-decoration: none;
    transition: background-color 0.3s;
}

.sy-docs__telecharger img {
    width: 18px;
    height: 18px;
    margin-inline-end: 16px;
}

.sy-docs__telecharger-actif {
    display: none;
}

.sy-docs__telecharger span {
    position: relative;
    top: 2px;
    color: var(--sy-noir);
    font-size: 16px;
    font-weight: 700;
}

.sy-docs__telecharger:hover,
.sy-docs__telecharger:focus-visible {
    background: var(--sy-orange);
}

.sy-docs__telecharger:hover .sy-docs__telecharger-repos,
.sy-docs__telecharger:focus-visible .sy-docs__telecharger-repos {
    display: none;
}

.sy-docs__telecharger:hover .sy-docs__telecharger-actif,
.sy-docs__telecharger:focus-visible .sy-docs__telecharger-actif {
    display: block;
}

.sy-docs__telecharger:hover span,
.sy-docs__telecharger:focus-visible span {
    color: var(--sy-blanc);
}

/* ----- Responsive (2024 : styles_responsive.css, palier 650) -------------- */

@media screen and (max-width: 650px) {
    .sy-docs__ligne {
        flex-direction: column;
        text-align: center;
    }

    .sy-docs__picto,
    .sy-docs__apercu {
        display: none;
    }

    .sy-docs__actions {
        min-width: auto;
    }
}