/* Décoration de la page */
body {
    /* image de fond de la nasa */
    background-image: url("nasa2.jpg");

}

/* --- Décoration des titres --- */
h1 {
    color: #0b3d91; /* Bleu NASA */
    text-align: center;
    border-bottom: 3px solid #fc3d21; /* Ligne rouge NASA sous le titre */
}

h2 {
    color: #2c3e50;
    margin-top: 30px;
}

/* --- Style des images --- */
img {
    border-radius: 10px;    /* Arrondit les coins des photos */
    margin-right: 25px;     /* espace entre les photos côte à côte */
    margin-bottom: 20px;    /* Espace si les photos passent à la ligne */
    transition: 0.3s;       /* Rend l'effet de survol fluide */
    border: 2px solid transparent;
}

/* --- L'effet de survol (le bonus "Originalité" n'est ce pas Mr Paisant ;-) --- */
img:hover {
    transform: scale(1.1);      /* La photo grandit un petit peu */
    border-color: #0b3d91;      /* survol */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* ombre */
}

/* --- Style des liens --- */
a {
    color: #fc3d21;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* La boîte qui contient l'image et le texte */
.boite-photo {
    position: relative;
    display: inline-block; /* Pour qu'elles restent l'une à côté de l'autre */
}

/* Le texte qu'on veut cacher au début */
.texte-cache {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    background: rgba(11, 61, 145, 0.8); /* Bleu NASA transparent */
    color: white;
    text-align: center;
    padding: 5px;
    opacity: 0; /* Rend le texte invisible */
    transition: 0.5s; /* Petit effet de fondu */
    border-radius: 0 0 10px 10px; /* Arrondi seulement le bas */
}

/* Quand la souris survole la boîte, le texte devient visible */
.boite-photo:hover .texte-cache {
    opacity: 1; /* Le texte apparaît ! */
}