/* Ce code change l'apparence générale de la page */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa; /* Un petit gris très clair et moderne */
    color: #333333; /* Gris foncé pour le texte, plus doux que le noir */
    text-align: center;
    margin: 0;
    padding: 20px;
}

/* Ce code change l'apparence du gros titre */
h1 {
    color: #2c3e50;
    font-size: 3em;
}

/* Le style de la barre de navigation */
.barre-haut {
    background-color: #6ea7df; /* Un bleu-gris foncé */
    padding: 15px;
    display: flex; /* Permet d'aligner les éléments horizontalement */
    justify-content: center; /* Centre les liens */
    gap: 20px; /* Met de l'espace entre les liens */
}

/* Le style des liens dans la barre */
.barre-haut a {
    color: white;
    text-decoration: none; /* Enlève le souligné moche */
    font-weight: bold;
    font-size: 1.1em;
}

/* L'effet quand on passe la souris dessus */
.barre-haut a:hover {
    color: #f1c40f; /* Le texte devient jaune au survol */
}



/* 1. La boîte globale qui contient tout ton formulaire */
form {
    display: flex;
    flex-direction: column;
    border: 5px solid;
    border-color: rgb(114, 114, 114);
    border-radius:5px ;
    margin:auto;
    padding:10px;
    width: 500px;


}
/* 2. Les cases où on tape le texte (email, mot de passe...) */
input {
    padding:10px;
    margin-bottom: 15px;
    font-size:  10px;
    background-color: #e7e7e7;
}

#aide {
    display: inline-block; /* Super important : permet au lien d'accepter des dimensions et des marges comme une vraie "boîte" */
    background-color: #ff5e5b; /* Une belle couleur chaleureuse (rouge/corail) */
    color: white; /* Texte en blanc */
    text-decoration: none; /* Enlève la ligne moche en dessous du lien */
    padding: 12px 24px; /* L'espace à l'intérieur : 12px en haut/bas, 24px sur les côtés */
    border-radius: 8px; /* Arrondit les coins pour un effet moderne */
    font-weight: bold; /* Met le texte en gras */
    font-size: 1.1em; /* Grossit un tout petit peu le texte */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ajoute une petite ombre légère en dessous */
    transition: all 0.3s ease; /* Prépare une animation fluide pour quand on passera la souris */
}

/* L'effet magique quand la souris passe au-dessus du bouton */
#aide:hover {
    background-color: #ff3b38; /* Assombrit un peu la couleur */
    transform: translateY(-3px); /* Fait "remonter" le bouton de 3 pixels vers le haut */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Agrandit l'ombre pour accentuer l'effet de soulèvement */
}

#champ_connexion {
    display: inline-block; /* Super important : permet au lien d'accepter des dimensions et des marges comme une vraie "boîte" */
    background-color: #ff5e5b; /* Une belle couleur chaleureuse (rouge/corail) */
    color: white; /* Texte en blanc */
    text-decoration: none; /* Enlève la ligne moche en dessous du lien */
    padding: 12px 24px; /* L'espace à l'intérieur : 12px en haut/bas, 24px sur les côtés */
    border-radius: 8px; /* Arrondit les coins pour un effet moderne */
    font-weight: bold; /* Met le texte en gras */
    font-size: 1.1em; /* Grossit un tout petit peu le texte */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ajoute une petite ombre légère en dessous */
    transition: all 0.3s ease; /* Prépare une animation fluide pour quand on passera la souris */
}

/* L'effet magique quand la souris passe au-dessus du bouton */
#champ_creer_son_compte:hover {
    background-color: #ff3b38; /* Assombrit un peu la couleur */
    transform: translateY(-3px); /* Fait "remonter" le bouton de 3 pixels vers le haut */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Agrandit l'ombre pour accentuer l'effet de soulèvement */
}

#champ_creer_son_compte {
    display: inline-block; /* Super important : permet au lien d'accepter des dimensions et des marges comme une vraie "boîte" */
    background-color: #ff5e5b; /* Une belle couleur chaleureuse (rouge/corail) */
    color: white; /* Texte en blanc */
    text-decoration: none; /* Enlève la ligne moche en dessous du lien */
    padding: 12px 24px; /* L'espace à l'intérieur : 12px en haut/bas, 24px sur les côtés */
    border-radius: 8px; /* Arrondit les coins pour un effet moderne */
    font-weight: bold; /* Met le texte en gras */
    font-size: 1.1em; /* Grossit un tout petit peu le texte */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ajoute une petite ombre légère en dessous */
    transition: all 0.3s ease; /* Prépare une animation fluide pour quand on passera la souris */
}

/* L'effet magique quand la souris passe au-dessus du bouton */
#champ_connexion:hover {
    background-color: #ff3b38; /* Assombrit un peu la couleur */
    transform: translateY(-3px); /* Fait "remonter" le bouton de 3 pixels vers le haut */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Agrandit l'ombre pour accentuer l'effet de soulèvement */
}

/* 1. On décore la grosse boîte de l'album */
.album-teaser {
    background-color: white;
    padding: 20px;
    margin-bottom: 40px; /* Pour l'écarter du prochain album en dessous */
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Une petite ombre douce */
}

/* 2. On met les photos côte à côte */
.vitrine-photos {
    display: flex; /* La commande magique pour aligner à l'horizontale */
    gap: 15px; /* L'espace entre chaque photo */
    margin: 20px 0; /* De l'espace au-dessus et en dessous de la rangée de photos */
}

/* 3. Le secret absolu des photographes web */
.vitrine-photos img {
    flex: 1; 
    height: 800px; 
    object-fit: cover; 
    border-radius: 8px;
}

/* 4. On enlève le souligné bleu moche du titre cliquable */
.lien-titre {
    text-decoration: none;
    color: #333;
}

.bouton-galerie{
    text-decoration: none;
    color:#ffffff;
    display: inline-block;
    background-color: #333;
    padding:12px 24px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1em;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease
}

.bouton-galerie:hover{
    background-color:#333333 ;
    transform: translateY(-3px); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* --- STYLE POUR LES ALBUMS COMPLETS (ex: capbreton.php) --- */
.grille-galerie {
    display: grid;
    /* La ligne magique : crée des colonnes de 300px minimum et s'adapte à l'écran */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto; /* Centre la galerie sur la page */
}

.grille-galerie img {
    width: 100%;
    height: 300px; /* Donne une hauteur uniforme pour un rendu très propre */
    object-fit: cover; /* Recadre joliment sans déformer les images */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Petite ombre douce */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Prépare l'animation */
}

/* L'effet au survol de la souris */
.grille-galerie img:hover {
    transform: scale(1.03); /* Léger zoom */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée */
}