/* ============================================
   TEXT REGLEMENT PAGE - Styles spécifiques
   Les styles communs sont dans index.css
   ============================================ */

.content {
    margin: 50px;
}


.hero-banner {
    background: linear-gradient(rgba(0, 85, 150, 0.75),
            rgba(0, 85, 150, 0.75)),
        url('../images/reglement-banner-img.jpg');
    /* Image avec le pick-up blanc */
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    /* Hauteur de la bannière (ajuste si tu veux plus ou moins) */
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    border-radius: 5px;
    background-color: var(--primary-blue);
}

.hero-banner h1 {
    font-size: 56px;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: 'Sansation';
    font-weight: 700;
}


/* =================================
   CONTENEUR PRINCIPAL
================================= */
.reglement-container {
    margin: var(--section-margin);
    padding: 0;
}

/* =================================
   LAYOUT DEUX COLONNES
================================= */
.reglement-layout {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 4rem;
    align-items: start;
    /* padding: 40px; */
}

/* =================================
   CONTENU PRINCIPAL
================================= */
.reglement-content {
    min-width: 0;
}

/* =================================
   EN-TÊTE (première ligne avec bullet)
================================= */
.entete-reglement ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.entete-reglement ul li {
    padding-left: 1.5rem;
    position: relative;
    color: #333;
    line-height: 1.6;
    font-size: 0.95rem;

}

.entete-reglement ul li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: #007bff;
    font-weight: bold;
    font-size: 1.2rem;
}


/* Titre des sections (I. Règlements nationaux, II. Règlements communautaires) */
.section-titre {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 0;
}

/* =================================
   LISTE DES RÈGLEMENTS
================================= */

.liste-reglements li a {
    color: #007bff !important;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.liste-reglements li a:hover {
    text-decoration: underline;
}


.liste-reglements {
    list-style: none;
    padding: 0;
    margin: 0;
}

.liste-reglements li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #333;
    line-height: 1.7;
    font-size: 0.95rem;
}

.liste-reglements li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: #007bff;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Liens dans les règlements (en bleu) */
.liste-reglements li a,
.liste-reglements li span[style*="color"] {
    color: #007bff !important;
    text-decoration: none;
    font-weight: 500;
}

.liste-reglements li a:hover {
    text-decoration: underline;
}

/* Texte normal après les liens */
.liste-reglements li {
    font-weight: 400;
}

/* =================================
   TITRES SPÉCIAUX (RANT 09, etc.)
================================= */
.reglement-section h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.reglement-section>p {
    color: #666;
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    text-align: justify;
}

/* =================================
   IMAGE DÉCORATIVE (marteau)
================================= */
.reglement-image {
    position: sticky;
    top: 2rem;
    background: #c8c8c8;
    border-radius: 16px;
    overflow: hidden;
    height: 550px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.reglement-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =================================
   RESPONSIVE
================================= */
@media (max-width: 992px) {
    .reglement-layout {
        grid-template-columns: 1fr 350px;
        gap: 3rem;
    }

    .reglement-image {
        height: 450px;
    }
}

@media (max-width: 992px) {
    .reglement-layout {
        grid-template-columns: 1fr;
    }

    .reglement-image {
        display: none;
    }
}

@media (max-width: 768px) {
    .reglement-container {
        padding: 0 1rem;
        margin: 10px;
    }

    .section-titre {
        font-size: 1.25rem;
    }

    .liste-reglements li {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .reglement-container {
        padding: 1.5rem 1rem;
    }

    .section-titre {
        font-size: 1.125rem;
    }

    .liste-reglements li,
    .entete-reglement ul li {
        font-size: 0.875rem;
        padding-left: 1.25rem;
    }
}

/* =================================
   IMPRESSION
================================= */
@media print {
    .reglement-image {
        display: none;
    }

    .reglement-layout {
        grid-template-columns: 1fr;
    }

    .reglement-section {
        page-break-inside: avoid;
    }
}