/* Documentation — bande unique, relevée sur la production.

   Toutes les valeurs viennent du bloc `.main__documentation` de
   https://exoshare.exosens.com/assets/css/styles.css. La prod compose en rem
   sur un `html { font-size: 62.5% }` (1rem = 10px) ; les valeurs sont reprises
   ici en pixels, à l'identique : 4.2rem → 42px, 1.6rem → 16px, 1rem → 10px.

   Les documents remontent d'eCollab et la liste peut rester vide un moment :
   l'état vide est traité en fin de fichier, il doit tenir la colonne de droite
   plutôt que laisser la rangée bancale. */

/* Dégradé relevé au pixel sur la prod : une nappe bleu profond posée en
   diagonale sur un aplat cerulean, qui laisse le coin haut-gauche s'éclaircir. */
.exo-docs {
    width: 100%;
    background:
        linear-gradient(261deg, rgba(20, 63, 77, 0) 0%, var(--exo-bleu-fonce) 84.76%),
        var(--exo-cerulean);
    color: var(--exo-blanc);
}

/* La prod ouvre la bande sur 60px / 120px de gouttières ; le millésime 2026
   bride en revanche le contenu à 1200px, comme toutes les autres bandes. */
.exo-docs__inner {
    padding: 60px 120px;
}

/* 4.2rem, graisse normale, capitales : la maquette ne met jamais de gras sur
   les titres de bande. Les 40px sous le titre sont le `gap` de la prod. */
.exo-docs__titre {
    margin: 0 0 40px;
    font-size: 42px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: var(--exo-blanc);
}

/* ----- Rangée à deux colonnes --------------------------------------------- */

.exo-docs__contenu {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
}

/* ----- Le cliché et son cadre --------------------------------------------- */

/* Le cliché déborde de 25px à gauche et sous le cadre. Sur la prod, les 120px
   de gouttière absorbent ce débord ; ici la bande est bridée à 1200px, on
   décale donc l'ensemble de 25px pour que rien ne sorte de la boîte. */
.exo-docs__photo {
    position: relative;
    flex: 0 0 auto;
    width: 480px;
    height: 401px;
    margin-left: 25px;
}

.exo-docs__cadre {
    display: block;
    position: relative;
    z-index: 1;
    width: 480px;
    height: 401px;
    border: 2px solid var(--exo-bleu-clair);
    /* Coin haut-droit vif : signature de la charte, reprise du bouton. */
    border-radius: 60px 0 60px 60px;
}

.exo-docs__cliche {
    position: absolute;
    z-index: 0;
    left: -25px;
    top: 25px;
    width: 480px;
    height: 401px;
    object-fit: cover;
    border-radius: 60px 0 60px 60px;
}

/* ----- La colonne des documents ------------------------------------------- */

.exo-docs__colonne {
    flex: 1 0 0;
    min-width: 0;
}

/* Le sprite ne sert qu'à porter le symbole référencé par <use> : masqué, il
   reste référençable. */
.exo-docs__sprite {
    display: none;
}

/* La prod n'a pas de catégories (un seul groupe, sans libellé). Le titre reste
   discret pour les pays qui en déclarent, sans casser la trame des lignes. */
.exo-docs__categorie {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--exo-blanc);
}

.exo-docs__categorie:not(:first-child) {
    margin-top: 30px;
}

.exo-docs__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ----- Une ligne de document ---------------------------------------------- */

/* Padding asymétrique de la prod : 18px à gauche pour laisser respirer le
   pictogramme, 10px partout ailleurs parce que le bouton porte déjà le sien. */
.exo-docs__ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 18px;
    border-radius: 12px;
    background: var(--exo-bleu-fonce);
    color: var(--exo-blanc);
}

/* Le survol inverse la ligne : fond blanc, texte et pictogramme bleu nuit,
   halo blanc. Le pictogramme suit par `currentColor`, une seule règle suffit. */
.exo-docs__ligne:hover {
    background: var(--exo-blanc);
    box-shadow: 0 0 20px 0 #FFF;
    color: var(--exo-bleu-nuit);
}

.exo-docs__ident {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    min-width: 0;
}

.exo-docs__picto {
    flex: 0 0 auto;
    width: 21px;
    height: 24px;
    color: inherit;
}

.exo-docs__intitule {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    min-width: 0;
}

.exo-docs__nom {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: inherit;
}

/* 1rem sur la prod, soit 10px : le format et le poids restent une mention. */
.exo-docs__poids {
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
    color: inherit;
}

/* ----- Les deux boutons ---------------------------------------------------- */

.exo-docs__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Bouton compact : 4px / 8px et un rayon de 8px, pas le rayon à coin vif des
   boutons d'appel — c'est ce que rend la prod dans la liste. */
.exo-docs__bouton {
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--exo-cerulean);
    color: var(--exo-blanc);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.exo-docs__bouton:hover,
.exo-docs__bouton:focus-visible {
    background: var(--exo-bleu-fonce);
    color: var(--exo-blanc);
}

/* Le survol de la ligne passe son fond en blanc et son texte en bleu nuit : le
   bouton, lui, garde son cerulean, il faut donc lui rendre son libellé blanc. */
.exo-docs__ligne:hover .exo-docs__bouton {
    color: var(--exo-blanc);
}

/* ----- Aucun document ------------------------------------------------------ */

/* Tant qu'eCollab n'a rien remonté, la colonne rend ce cartouche : même
   gabarit qu'une ligne (rayon de 12px, fond bleu profond) pour que la page
   reste construite, en pointillés pour dire que l'attente est normale. */
.exo-docs__vide {
    margin: 0;
    padding: 24px 18px;
    border: 1px dashed rgba(255, 254, 254, 0.45);
    border-radius: 12px;
    background: rgba(20, 63, 77, 0.55);
    color: var(--exo-blanc);
    font-size: 16px;
    line-height: 1.4;
}

/* ----- Sous 1050px --------------------------------------------------------- */

/* Rupture et valeurs de la prod : le cliché disparaît, la bande passe en
   cerulean plein, les lignes s'empilent et les boutons prennent la largeur. */
@media screen and (max-width: 1050px) {
    .exo-docs {
        background: var(--exo-cerulean);
    }

    .exo-docs__inner {
        padding: 40px 20px;
    }

    .exo-docs__titre {
        margin-bottom: 30px;
        font-size: 26px;
    }

    .exo-docs__contenu {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .exo-docs__photo {
        display: none;
    }

    .exo-docs__colonne {
        width: 100%;
    }

    .exo-docs__ligne {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .exo-docs__ident {
        width: 100%;
        flex: 0 0 auto;
    }

    .exo-docs__picto {
        width: 20px;
        height: 24px;
    }

    .exo-docs__nom {
        font-size: 14px;
    }

    .exo-docs__actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .exo-docs__bouton {
        flex: 1 1 auto;
        padding: 6px 12px;
        font-size: 14px;
    }
}