/* ✅ Code validé – index.css – 11/12/2025
   Rôle : mise en forme de la page d’accueil CareNova.
   Dépendances : style.css (socle global, variables CSS).
   Points de vigilance : responsive mobile, cohérence des boutons avec style.css.
*/

/* Centrage du contenu principal */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    background-color: var(--color-light);
}

/* Logo d’accueil */
.logo-index {
    max-height: 220px;
    margin-bottom: 25px;
}

@media (max-width: 480px) {
    .logo-index {
        max-height: 130px;
    }
}

/* Boîte centrale */
.page-box {
    background-color: #fff;
    padding: 30px;       /* équilibré avec le logo */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 500px;    /* proportionné au bouton */
    margin: auto;
}

/* Titre */
.page-box h1 {
    font-size: 1.6em;    /* cohérent avec le logo */
    margin-bottom: 10px;
    color: var(--color-primary);
}

/* Texte d’accueil */
.page-box p {
    font-size: 1em;
    color: var(--color-dark);
    margin-bottom: 20px;
}

/* Bouton principal */
.page-box a.btn-primary {
    display: inline-block;
    margin-top: 15px;
    font-size: 1.1em;    /* équilibré avec le logo */
    padding: 12px 24px;  /* bouton généreux */
}

/* Animation fade-in */
.fade-in {
    animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}