/* ============================================================
   index-page.css — Overrides paysage spécifiques à index.html
   ============================================================ */

@media (max-height: 500px) and (orientation: landscape) {
    header h1 {
        font-size: 2.2rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.1 !important;
    }

    header p {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }

    header p.brush-accent {
        font-size: 1.2rem !important;
        margin-bottom: 0.25rem !important;
    }

    header .flex.flex-col {
        margin-bottom: 1rem !important;
        flex-direction: row !important;
        gap: 1rem !important;
        justify-content: center !important;
    }

    header .flex.flex-col a {
        padding: 0.5rem 1rem !important;
        font-size: 0.8rem !important;
    }

    header .animate-bounce {
        bottom: 1rem !important;
        display: flex !important;
        color: white !important;
    }

    header .animate-bounce:hover {
        color: #FEC107 !important;
    }

    header svg {
        height: 60px !important;
    }

    header {
        padding-bottom: 120px !important;
    }

    #soins,
    #pourquoi-consulter,
    #pourquoi-consulter + section {
        padding-bottom: 100px !important;
    }
}