/* ============================================================
   PAGE — Documentation
   Liste de cartes de docs téléchargeables, avec picto par type
   (classes docRow--{nom} où nom = nom du SVG sans extension).
   ============================================================ */

body.documentation main {
    padding: 0;
}

/* ============================================================
   Section liste
   ============================================================ */
.docList {
    padding: 30px var(--container-padding-x);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.docList__title {
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-xl);     /* 32px */
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
}

.docList__category {
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-lg);     /* 20px */
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin-top: var(--space-3);
}

.docList__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.docList__empty {
    color: var(--color-grey-1);
    font-size: var(--font-size-md);
    font-style: italic;
}

/* ============================================================
   Carte de doc (ligne)
   ============================================================ */
.docRow {
    min-height: 82px;
    padding: 10px 20px;
    background: var(--color-primary-white);
    border: 1px solid var(--color-primary-cyan);
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Picto à gauche : 24×24, posé via background-image selon la classe */
.docRow__icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Variantes de picto — 1 classe par SVG du dossier images/ */
.docRow--brochure  .docRow__icon { background-image: url("https://assets.weshare.amundi.com/xnet/2026/images/brochure.svg"); }
.docRow--bulletin  .docRow__icon { background-image: url("https://assets.weshare.amundi.com/xnet/2026/images/bulletin.svg"); }
.docRow--dic       .docRow__icon { background-image: url("https://assets.weshare.amundi.com/xnet/2026/images/dic.svg"); }
.docRow--reglement .docRow__icon { background-image: url("https://assets.weshare.amundi.com/xnet/2026/images/reglement.svg"); }

/* Bloc info : titre + meta */
.docRow__info {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.docRow__title {
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-md);     /* 16px */
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.docRow__meta {
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-base);   /* 14px */
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Boutons d'action à droite */
.docRow__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ============================================================
   Boutons Aperçu / Télécharger
   ============================================================ */
.docBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    color: var(--color-primary-white);
    font-size: var(--font-size-md);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.2;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.docBtn:hover {
    transform: translateY(-1px);
}

.docBtn:active {
    transform: translateY(0);
}

.docBtn img {
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 auto;
}

.docBtn--preview {
    background: var(--color-cyan-02);
}

.docBtn--preview:hover,
.docBtn--preview:focus-visible {
    background: var(--color-primary-cyan);
    outline: none;
}

.docBtn--download {
    background: var(--color-cyan-04);
}

.docBtn--download:hover,
.docBtn--download:focus-visible {
    background: var(--color-primary-midnightblue);
    outline: none;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1200px) {
    .docList {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media (max-width: 900px) {
    .docList {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    .docList__title {
        font-size: 24px;
    }

    /* Empilement vertical : info au-dessus, actions en bas */
    .docRow {
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }

    .docRow__info {
        flex: 1 1 100%;
        text-align: left;
    }

    .docRow__actions {
        flex: 1 1 100%;
        justify-content: flex-start;
        gap: 10px;
    }

    .docBtn {
        flex: 1 1 0;
        justify-content: center;
    }
}