/* bloc */
.section-base-documentaire{
    margin-top: 50px
}
.bloc-base-documentaire{
    margin-top: 50px;
    margin-bottom: 70px
}
.bloc-base-documentaire{
    width: 100%
}
/* titre de la rubrique, au-dessus des cartes */
.bloc-base-documentaire h2{
    margin: 50px 0 25px;
    font-weight: 700;
    color: var(--sec-color)
}
.bloc-base-documentaire ul li{
    list-style: none
}
/* grille de cartes : 2 par ligne */
.bloc-base-documentaire ul.categorie{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    padding: 0
}
@media (max-width: 991px){
    .bloc-base-documentaire ul.categorie{
        grid-template-columns: 1fr
    }
}
/* carte document : couverture à gauche, texte à droite */
.bloc-base-documentaire .doc-card{
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin: 0;
    padding: 30px;
    background: #f4f4f4
}
.doc-card__cover{
    flex: 0 0 42%;
    max-width: 42%
}
.doc-card__img{
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 8px 22px rgba(0,0,0,.25)
}
.doc-card__body{
    flex: 1;
    min-width: 0;
    align-self: stretch; /* occupe toute la hauteur de la carte */
    display: flex;
    flex-direction: column
}
/* bouton de téléchargement ferré en bas de la carte, quelle que soit la hauteur du texte */
.doc-card__body > .btn-doc-telecharger,
.doc-card__body > .doc-card__download{
    margin-top: auto;
    align-self: flex-start
}
.bloc-base-documentaire .doc-card__title{
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--sec-color)
}
.doc-card__subtitle{
    margin: 4px 0 0;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.2;
    color: var(--sec-color)
}
.h2__sep{
    width: 60px;
    height: 5px;
    margin: -12px 0 20px;
    background: var(--fifth-color)
}
.doc-card__sep{
    width: 40px;
    height: 2px;
    margin: 18px 0;
    background: var(--sec-color)
}
.doc-card__text{
    margin-bottom: 25px;
    color: #666;
    line-height: 1.55
}
.doc-card__text > *:last-child{
    margin-bottom: 0
}
/* bouton Télécharger (fichier unique ou menu déroulant) */
.btn-doc-telecharger{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border: 2px solid var(--sec-color);
    border-radius: 6px;
    background: transparent;
    color: var(--sec-color);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s
}
.btn-doc-telecharger:hover,
.btn-doc-telecharger:focus-visible{
    background: var(--sec-color);
    color: #FFF
}
.btn-doc-telecharger .doc-card__icon{
    flex: none;
    color: var(--fifth-color)
}
.btn-doc-telecharger .doc-card__chevron{
    flex: none;
    margin-left: auto
}
.btn-doc-telecharger.dropdown-toggle::after{
    display: none
}
@media (max-width: 575px){
    .bloc-base-documentaire .doc-card{
        flex-direction: column;
        padding: 20px
    }
    .doc-card__cover{
        flex: none;
        max-width: 100%;
        width: 100%
    }
}
#fileModal .modal-dialog{
    max-width: 80%;
    height: 100% !important;
    border: none;
    padding: 0
}
#fileModal .modal-body iframe {
    border: none;
    width: 100%;
    height: 65vh;      /* 100% ne s'appliquait pas : le corps de la modale n'a pas de hauteur définie */
    min-height: 50vh;  /* au moins la moitié de la hauteur de la fenêtre */
}
#fileModal .modal-title{
    font-weight: 500;
    color: var(--fifth-color) !important;
}

/* barre de langues */
.section-base-documentaire [hidden]{
    display: none !important
}
.barre-langues-doc{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--light-grey, #ddd)
}
.btn-langue-doc{
    padding: 8px 22px;
    border: 1px solid var(--sec-color);
    border-radius: 0;
    background: transparent;
    color: var(--sec-color);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s, color .2s
}
/* bouton drapeau : l'image occupe toute la surface du bouton */
.btn-langue-doc.has-drapeau{
    padding: 0;
    border: 0;
    line-height: 0;
    background: transparent;
    opacity: .45;
    transition: opacity .2s
}

.btn-langue-doc.has-drapeau .drapeau-langue-doc{
    display: block;
    height: 25px;
    width: auto;
    max-width: none
}
.btn-langue-doc.has-drapeau:hover,
.btn-langue-doc.has-drapeau:focus-visible,
.btn-langue-doc.has-drapeau.active{
    background: transparent;
    opacity: 1
}
.btn-langue-doc.has-drapeau.active{
    outline: 1px solid var(--fourth-color);
    outline-offset: 2px
}
.btn-langue-doc:hover,
.btn-langue-doc:focus-visible,
.btn-langue-doc.active{
    background: var(--sec-color);
    color: #FFF
}