/* static.css - Pages statiques (mentions légales, CGV, etc.) */

:root {
    --color1: #009cda;
    --color2: #ffffff;
    --color3: #da00da;
    --color4: #868686;
    --color5: #d6f3ff;
    --color6: yellowgreen;
}

html {
    scroll-behavior: smooth;
}

/* Container principal de la page statique */
.static-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* En-tête de la page avec fond color1 */
.static-header {
    background-color: var(--color1);
    color: var(--color2);
    padding: 60px 20px;
    text-align: center;
    margin-bottom: 40px;
}

/* Logo dans l'en-tête */
.static-header-logo {
    max-width: 300px;
    height: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Titre principal H1 */
.static-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 20px 0 15px 0;
    color: var(--color2);
    line-height: 1.2;
}

/* Texte d'explication sous le titre */
.static-header-intro {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    color: var(--color2);
    opacity: 0.95;
}

/* Contenu principal */
.static-content {
    background-color: var(--color2);
    padding: 40px 30px;
    line-height: 1.8;
    color: #333;
}

/* Chapitres - H4 */
.static-content h4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color1);
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--color5);
}

/* Premier chapitre sans marge supérieure */
.static-content h4:first-of-type {
    margin-top: 0;
}

/* Sous-chapitres - H5 */
.static-content h5 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color4);
    margin-top: 30px;
    margin-bottom: 15px;
    padding-left: 15px;
    border-left: 4px solid var(--color1);
}

/* Paragraphes */
.static-content p {
    margin-bottom: 15px;
    text-align: justify;
}

/* Listes */
.static-content ul,
.static-content ol {
    margin: 15px 0 15px 30px;
    padding-left: 20px;
}

.static-content li {
    margin-bottom: 8px;
}

/* Liens */
.static-content a {
    color: var(--color1);
    text-decoration: none;
    font-weight: 500;
}

.static-content a:hover {
    text-decoration: underline;
    color: var(--color3);
}

/* Mise en évidence */
.static-content strong {
    color: var(--color1);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .static-header {
        padding: 40px 15px;
    }
    
    .static-header h1 {
        font-size: 1.8rem;
    }
    
    .static-header-intro {
        font-size: 1rem;
    }
    
    .static-content {
        padding: 30px 20px;
    }
    
    .static-content h4 {
        font-size: 1.3rem;
    }
    
    .static-content h5 {
        font-size: 1.1rem;
    }
}