/* Styles généraux (inchangés) */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Pour que le footer reste en bas */
}

header {
    background-color: #34495e;
    color: white;
    width: 100%;
    padding: 2rem 0;
    text-align: center;
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card {
    background: white;
    padding: 20px;
    margin: 30px auto; /* "auto" centre la carte horizontalement */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-width: 80%; /* Prend 80% de la largeur sur grand écran */
    width: 500px;
	text-align: center;
}

div {
    text-align: center;
	margin-top: auto; /* C'est cette ligne qui pousse la div tout en bas */
    padding-bottom: 40px; /* Petit espace pour ne pas coller au footer */
	border-top: 1px solid #ddd; /* Ajoute une ligne fine grise en haut du bloc */
    color: #666; /* Rend le texte un peu moins noir, plus doux à lire */
}

div h2 {
    font-size: 1.2rem; /* Réduit la taille pour que ce soit plus discret */
    color: #2c3e50;    /* Ici, on peut mettre la même couleur que votre nouveau header */
    margin-bottom: 10px;
}

.responsive-img {
    display: block;
    margin: 30px auto;   /* Centre l'image et ajoute de l'espace */
    
    /* TAILLE POUR L'ORDI */
    width: 100%;         /* Elle peut rétrécir si besoin... */
    max-width: 450px;    /* ...mais elle ne dépassera JAMAIS 450px de large */
    
    height: auto;        /* Garde les proportions */
    border-radius: 15px; /* Coins arrondis élégants */
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* Ombre pour le relief */
}

/* AJUSTEMENT POUR MOBILE */
@media (max-width: 600px) {
    .responsive-img {
        max-width: 80%;  /* Sur votre Pixel, elle sera un peu plus petite que la largeur de l'écran */
        margin: 20px auto;
    }
}

/* Personnalisation de la mention hébergeur */
.mention--hebergeur {
    font-family: inherit;
    font-size: 0.9rem;    /* Taille cohérente avec ton footer actuel */
    color: #666;          /* Gris doux identique à tes autres textes de bas de page */
    margin-top: 15px;
    text-align: center;
}

.mention--hebergeur a {
    color: #3498db;       /* Un bleu propre qui ressort bien sur ton fond gris/blanc */
    text-decoration: underline;
    font-weight: bold;
}

footer {
    margin-top: auto;
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #777;
}

/* --- SECTION RESPONSIVE (MOBILE) --- */

/* Si l'écran fait moins de 600px (comme un smartphone) */

@media (max-width: 600px) {
    header h1 {
        font-size: 1.5rem; /* Réduit la taille du titre */
        padding: 0 10px;
    }

    .card {
        width: 90%; /* La carte prend plus de place sur petit écran */
        margin: 20px auto;
        padding: 15px;
    }
}