{% load static %}
{% if parameters.titre %}
<h2 class="doc-titre portail-parent">
    <i class="fas fa-file-alt"></i> <strong>{{ parameters.titre }}</strong>
</h2>
{% endif %}

<div class="doc-carte portail-parent">
    <a href="{{ parameters.doc1_url }}" rel="nofollow" target="_blank">
        <i class="fas fa-download"></i> {{ parameters.description }} <span class="doc-nom">"{{ parameters.doc1_nom }}"</span>
    </a>
</div>
<style>
.doc-titre {
    font-size: 1.5em;
    font-family: Arial, sans-serif;
    margin-bottom: 30px;
    color: #000;
}

.doc-titre i {
    margin-right: 10px;
}

.doc-carte {
    background-color: white;
    border-radius: 10px;
    padding: 15px 25px !important;
    width: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.doc-carte a {
    text-decoration: none;
    color: black; 
    font-size: 1.1em;
    display: inline-block;
}

.doc-carte a i {
    margin-right: 8px;
}

.doc-carte a .doc-nom {
    font-weight: bold;
}

/* .doc-carte:hover {
    background-color: #fdf2f9;
} */
</style>
<script>
(function() {
    // 1. Repérer ce script précis dans le DOM
    var scriptEnCours = document.currentScript;

    // 2. Remonter au parent direct (qui contient .doc-carte et ce script)
    var parentDirect = scriptEnCours.parentElement;

    // 3. Remonter au grand-parent (le parent du parent)
    if (parentDirect && parentDirect.parentElement) {
        var grandParent = parentDirect.parentElement;

        // 4. Ajouter les classes
        grandParent.classList.add('imio-no-shadows', 'pk-no-border', 'grid-1-2');
    }
})();
</script>