.polaroids {
    text-align: center;
    top:500px;
}
.polaroids a {
    background: white;
    display: inline-block;
    text-decoration: none;
    font-size: 18px;
    padding: 10px 10px 25px 10px;
    margin: 0 0 27px 30px;
    width: 200px;
    color: #8B8B8B;
 
    -moz-box-shadow: 0px 1px 5px 0px #656565;
    -webkit-box-shadow: 0px 1px 5px 0px #656565;
    -o-box-shadow: 0px 1px 5px 0px #656565;
    box-shadow: 0px 1px 5px 0px #656565;
 
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    tranform: rotate(-1deg);
 
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
 
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=85);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
    filter:alpha(opacity=85);
}
.polaroids a:hover {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter:alpha(opacity=100);
}
.polaroids a:nth-child(odd) {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    tranform: rotate(1deg); 
}
.polaroids a:after {
    content: attr(title);
}
.polaroids img {
    border: 1px solid #C9C9C9;
}

.polaroids {
    text-align: center;
    
    /* AJOUTE ÇA : Plus le chiffre est grand, plus ça descend */
    margin-top: 100px; 
    
    /* Optionnel : Si tu veux aussi les décaler un peu si ils touchent le bas */
    padding-bottom: 50px; 
}

.polaroids img {
    /* 1. Force l'image à prendre toute la largeur du cadre blanc */
    width: 100%; 
    
    /* 2. Définit une HAUTEUR FIXE. 
       Mets la valeur que tu veux (ex: 200px) pour qu'ils soient tous identiques */
    height: 200px; 
    
    /* 3. LA MAGIE : Coupe l'image proprement si elle dépasse, sans la déformer */
    object-fit: cover; 
    
    /* Tes bordures existantes */
    border: 1px solid #C9C9C9;
    
    /* Petit bonus : enlève l'espace vide parfois visible sous les images */
    display: block; 
}

main {
    flex: 1; /* Le contenu pousse le footer */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* Ton dégradé actuel */
    background: linear-gradient(to bottom, #a0d8ef 0%, #ffffff 100%);
    
    /* 1. Empêche la répétition (mosaïque) */
    background-repeat: no-repeat;
    
    /* 2. Fixe le fond à l'écran (le ciel ne bouge pas quand on scroll) */
    background-attachment: fixed;
    
    /* 3. S'assure qu'il prend au moins toute la hauteur visible */
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    font-family: 'Patrick Hand', cursive; /* Si tu veux appliquer la police partout */
}

.clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.pixelart-to-css-nuage {
    position: absolute;
    left: -300px;
    animation-name: bouge-nuage;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#nuage1 {
    top: 50px;
    animation-duration: 25s; 
}

#nuage2 {
    top: 150px;
    animation-duration: 40s; 
    animation-delay: -10s;
    transform: scale(0.8);
}

@keyframes bouge-nuage {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(100vw + 300px));
    }
}

.accueil-header { 
    text-align: center;
    top: 80px;
    margin-bottom: 50px; 
    position: relative; 
    z-index: 10; 
    max-width: 800px; 
    margin-left: auto; 
    margin-right: auto;
    border-color: #342797;
    border-style: dotted;
}
.accueil-header h1 { 
    font-family: var(--pixel-font); 
    font-size: 4rem; 
    margin-bottom: 5px; 
    color: #342797; 
    line-height: 1;
} 

.accueil-header h2 {
    font-family: var(--pixel-font);
    font-size: 2rem; color: #555;
    margin-bottom: 20px; }

#s1 {
    position: fixed;
    bottom: 500px;
    right: 300px;
    width: 10px;
    height: 10px;
}

#s2 {
    position: fixed;
    bottom: 400px;
    width: 10px;
    height: 10px;
}   

.speech-bubble {
	position: relative;
	background: #ffffff;
	border-radius: .4em;
}

.speech-bubble:after {
	content: 'gefr';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #ffffff;
	border-bottom: 0;
	border-left: 0;
	margin-left: -10px;
	margin-bottom: -20px;
}

#Basil {
    position: fixed;
    bottom: 700px;
    left: 50px;
    z-index: 10; 
    animation: wave 2s infinite;
}

/* Le conteneur pour positionner la bulle par rapport à Basil */
.basil-container {
    position: relative;
    display: inline-block; /* S'adapte à la taille du contenu */
    margin-top: 50px; /* Espace pour la bulle au dessus */
    /* Tu devras peut-être ajuster le placement général ici selon ta page */
}

/* La bulle elle-même */
.speech-bubble {
    position: absolute;
    bottom: 100%; /* Place la bulle juste au-dessus du conteneur */
    left: 220px;
    transform: translateX(-50%); /* Centre la bulle horizontalement */
    
    background: #ffffff;
    border: 2px solid #000; /* Bordure noire style dessin */
    border-radius: 15px; /* Coins arrondis */
    padding: 15px 20px;
    
    font-family: 'Patrick Hand', cursive; /* Police style Omori */
    font-size: 1.2rem;
    color: #000;
    white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes si possible */
    
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1); /* Petite ombre rétro */
    z-index: 10; /* S'assure que le texte est devant tout */
    margin-bottom: -150px; /* Espace entre la bulle et la tête de Basil */
}

/* Le petit triangle (la queue de la bulle) */
.speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%; /* En bas de la bulle */
    left: 50%;
    margin-left: -10px; /* Centre le triangle */
    
    /* Création du triangle en CSS */
    border-width: 10px;
    border-style: solid;
    border-color: #000 transparent transparent transparent; /* Seul le haut est coloré */
}

/* Une astuce pour faire un triangle blanc par dessus le noir (effet contour) */
.speech-bubble::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    z-index: 1;
}