html, body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f8f9fa;
    color: #212529;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Structure principale */
.body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
}

/* Header */
.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.page-title .logo img {
    height: 80px;
    width: auto;
    display: block;
}

.page-title .title {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #343a40;
}

/* Bandeau de section */
.question-title {
    background-color: #0154a2;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    text-align: center;
}

/* Contenu */
.content {
    flex: 1;
    text-align: center;
    padding: 2.5rem 1rem;
    font-size: 1.05rem;
    background: linear-gradient(135deg, #0091ff, #003e77);
    color: #fff;
}

.content.bgimg {
    background: url(fond-accueil.jpg) no-repeat center center fixed;
    background-size: cover;
}

/* Score */
#score {
    display: block !important;
    margin: 2rem auto;
    width: 150px !important;
    height: 150px !important;
}

.result_subtitle {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1.5rem 0;
}

/* Corrections : texte direct sur le fond, logo au début */
.correction {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;       /* espace entre logo et texte */
    margin: 1rem auto;
    max-width: 70%;
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    background: none;   /* pas de fond blanc */
    color: inherit;     /* garde la couleur de .content */
    box-shadow: none;   /* pas d’ombre */
    padding: 0;         /* pas de padding supplémentaire */
}

.correction object {
    flex-shrink: 0;
    width: 40px;        /* logo légèrement plus grand */
    height: 40px;
    display: block;
    margin-top: 0.25rem;
}

.correction .cleaner {
    display: none; /* plus utile avec flex */
}

/* Boutons */
input[type="button"] {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: #007bff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    margin: 0.5rem;
    min-width: 6rem;
}

input[type="button"]:hover {
    background: #0056b3;
}

input[type="button"]:active {
    background: #003d80;
}

/* Footer */
.footer {
    background: #fff;
    border-top: 1px solid #dee2e6;
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
    padding: 1rem;
}

/* Responsive */
@media (max-width: 576px) {
    .page-title {
        flex-direction: column;
        text-align: center;
    }

    .page-title .title {
        margin-top: 0.5rem;
        font-size: 1rem;
        line-height: 1.4;
    }

    .content {
        padding: 2rem 1rem;
        font-size: 1rem;
    }

    .correction {
        flex-direction: column;
        text-align: center;
        max-width: 100%;
    }

    .correction object {
        margin: 0 auto 0.5rem auto;
    }

    input[type="button"] {
        width: 100%;
    }
}

/* Logo dans les questions (affiché pendant le test) */
.content > .col > object {
    display: block;
    margin: 1rem auto;
    max-width: 120px;   /* taille max */
    width: 100%;
    height: auto;
}

/* Logo au début des corrections (résultats finaux) */
.correction object {
    flex-shrink: 0;
    width: 40px;        /* taille réduite, comme une icône */
    height: 40px;
    display: block;
    margin-top: 0.25rem;
}


/* ========================= */
/* Animations sympa          */
/* ========================= */

/* Corrections : apparition en fade + slide */
.correction {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeSlideIn 0.6s ease forwards;
}
@keyframes fadeSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Score : pulsation douce */
#score {
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Boutons : hover/active avec mouvement */
input[type="button"] {
    transition: transform 0.2s ease, background 0.2s ease;
}
input[type="button"]:hover {
    transform: translateY(-2px) scale(1.05);
}
input[type="button"]:active {
    transform: translateY(0) scale(0.95);
}

/* Logos du questionnaire : effet bounce à l’apparition */
.content > .col > object {
    animation: bounceIn 0.8s ease;
}
@keyframes bounceIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    60% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}