/* ==========================================================================
   PAGE DOCUMENTATION (contenu_pages/documentation.php du site 2023)
   Cartes jaunes de 320 x 250, centrées et renvoyées à la ligne (styles_site.css
   du legacy : #content_doc). Le trait bleu du bas, qui monte en fond au survol,
   est celui des liens de .ct-page (components/contenu_page.css).
   ========================================================================== */

.listeDocs ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Le legacy tirait ses 4,4rem au-dessus des cartes de sa marge (2,5rem) et de la
   ligne vide de son ::before ; même écart ici, sans la puce des listes. */
.ct-page .listeDocs li {
    margin: 4.4rem 0 0 2.5rem;
}

.ct-page .listeDocs li::before {
    content: none;
}

/* Libellé blanc sur le jaune, comme en 2023 (choix du client, contraste RGAA 3.2
   non atteint, assumé). */
.ct-page .carteDoc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 250px;
    background-color: var(--color-primary-yellow);
    color: var(--color-primary-white);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 2rem;
    text-align: center;
    text-transform: uppercase;
}

/* 0,8rem de marge dans le legacy, plus l'espace sous la ligne de l'image, que
   suivait un <br> : 1,5rem en tout entre le picto et le libellé. */
.carteDoc img {
    height: auto;
    margin-bottom: 1.5rem;
}

/* Le clavier reçoit le même fond que la souris ; contour bleu, le jaune du
   focus commun se perdant contre la carte. */
.ct-page .carteDoc:focus-visible {
    color: var(--color-primary-white);
    outline-color: var(--color-primary-blue);
}

.ct-page .carteDoc:focus-visible::after {
    height: 100%;
}

/* Petits téléphones (320px, RGAA 10.11) : la carte de 320px et sa marge
   gauche débordaient du cadre et faisaient défiler la page de côté. La carte
   prend la largeur du cadre (écran moins ses 2 x 2,5rem de marge). */
@media screen and (max-width: 380px) {
    .ct-page .listeDocs li {
        margin-left: 0;
    }

    .ct-page .carteDoc {
        width: min(320px, calc(100vw - 5rem));
        overflow-wrap: anywhere;
    }
}