/* Définition de base pour la page */
.page {
    font-family: Marianne, sans-serif;
    max-width: 100%;
    width: 90vw;
    height: auto;
    min-height: 100vh;
    margin: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #515E93 !important;
    box-sizing: border-box !important;
}

.A4 {
    font-family: Marianne, sans-serif !important;
    max-width: 210mm !important;
    

    margin: auto !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    border: 1px solid #515E93 !important;
    box-sizing: border-box !important;
}

/* 🏷️ HEADER : Logo à gauche, titre centré, logo à droite */
.header {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0px 0px !important;
    box-sizing: border-box !important;
}

.logo {
    max-height: 120px !important;
    max-width: 120px !important;
    object-fit: contain !important;
}

.title.custom-title {
    flex-grow: 1 !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
}

/* Titres personnalisés */
.custom-h1 {
    font-size: 1.2rem !important;
    margin: 10px 0 !important;
}

.custom-h2 {
    font-size: 1.1rem !important;
    margin: 0px 0 !important;
}

.custom-h3 {
    font-size: 1rem !important;
    margin: 10px 0 !important;
}

.custom-h4 {
    font-size: 0.9rem !important;
    padding-top: 0px; !important;
    margin: 0px 0 !important;
}

/* Paragraphes personnalisés */
.custom-p {
    font-size: 0.8rem !important;
    margin: 0px 0 !important;
    line-height: 1.6 !important;
}

/* 🎯 Contenu principal */
.content {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0px !important;
}

.box {
    padding: 1mm !important;
    margin: 2mm !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 4px !important;
    border-radius: 2mm !important;
    font-size: 0.8rem !important;
    background-color: #eeeeee !important;
}

.chrono {
    text-align: center !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    color: #000 !important;
}

/* ✍ Texte de la section info */
.info {
    background-color: #B4C7FF !important;
    padding: 4mm !important;
    margin: 2mm !important;
    border-radius: 2mm !important;
    color: #000 !important;
    text-align: justify !important;
    box-sizing: border-box !important;
    font-size: 0.8rem !important;
}

/* ✍ Texte de la section info 
.objectif {
    background-color: #FA9293 !important;
    font-weight: bold !important;
    padding: 1.6mm !important;
    margin: 2mm !important;
    border-radius: 2mm !important;
    color: #000 !important;
    text-align: justify !important;
    box-sizing: border-box !important;
    font-size: 0.8rem !important;
} */

/* ✍ Texte de la section info 
.cibleettemps {
    background-color: #EEEEEE !important;
    padding: 4mm !important;
    margin: 2mm !important;
    border-radius: 2mm !important;
    color: #000 !important;
    text-align: justify !important;
    box-sizing: border-box !important;
    font-size: 0.8rem !important;
}*/

/* 🖼️ Image dans la section info 
.info img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}*/



/* 🏷️ SECONDARY : Public ciblé et Temps nécessaire */
.secondary {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    flex-wrap: wrap !important; /* Permet de passer à une nouvelle ligne si nécessaire */
    margin: 0px 0 !important;
}

.secondary {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    flex-wrap: wrap !important; /* Permet de passer à une nouvelle ligne si nécessaire */
    margin: 0px 0 !important;
}


.box.flex-7 {
    flex: 7 !important;
}

.box.flex-3 {
    flex: 3 !important;
}

/* 📱 Responsive pour petits écrans (max 768px) */
@media screen and (max-width: 768px) {
    .page {
        width: 95vw !important;
        padding: 5px !important;
    }

    /* 🏷️ HEADER */
    .header {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .logo {
        max-height: 40px !important;
        margin-bottom: 5px !important;
    }

    .title.custom-title {
        font-size: 1rem !important;
    }

    /* 🎯 Contenu principal */
    .content {
        width: 90vw !important;
        padding: 10px !important;
    }

    /* ✍ Texte de la section info */
    .info {
        padding: 4vw !important;
        margin: 4vw !important;
    }

    /* 🖼️ Image responsive dans la section info */
    .info img {
        max-width: 80% !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* 🔢 Liste */
    ul, ol {
        padding-left: 15px !important;
    }

    li {
        font-size: 0.7rem !important;
    }

    /* 🏷️ SECONDARY : Public ciblé et Temps nécessaire sur petits écrans */
    .secondary {
        flex-direction: column !important; /* Les blocs seront empilés */
    }

    .box.flex-7, .box.flex-3 {
        flex: 100% !important; /* Chaque box prend 100% de la largeur */
        margin-bottom: 15px !important; /* Ajoute un espacement entre les boxes */
    }
}