/* ------------------------------
   Style général
--------------------------------*/
:root {
    --font-main: "DejaVu Sans", Roboto, sans-serif;
    --color-bg: #f7f7f7;
    --color-text: #333;

--color-accent: #ffbe6f;
--color-accent-light: #fff1dd;
--color-accent-dark: #cc9859;

}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

/* ------------------------------
   En-tête
--------------------------------*/
.page-header {
    background: var(--color-accent);
    color: white;
    padding: 2rem 1.5rem;
    text-align: center;
}

.page-header h1 {
    margin: 0;
    font-size: 2rem;
}


.home-icon {
    position: absolute;
    top: 2rem;
    left: 2rem;
    display: block;
    background: none !important;
}

.home-icon:hover {
    background: none !important;
}

.home-icon img {
    width: 32px;
    height: 32px;
    filter: brightness(0) invert(1); /* rend l’icône blanche si elle est noire */
    transition: transform 0.2s ease;
}

.home-icon:hover img {
    transform: scale(1.1);
}



/* ------------------------------
   Contenu principal
--------------------------------*/
.content {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

/* Bloc de texte */
.text-block {
    margin-bottom: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Image */
.image-block {
    margin: 2rem 0;
    text-align: center;
}

.image-block img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.image-block figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

/* ------------------------------
   Liens (globaux + menu)
--------------------------------*/

/* Style global pour tous les liens */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}

a:hover {
    color: var(--color-accent-dark);
    background: var(--color-accent-light);
    border-radius: 4px;
}

/* Liste de liens */
.links ul {
    list-style: none;
    padding: 0;
}

.links li {
    margin: 0.5rem 0;
}

.links a {
    padding: 0.3rem 0.5rem;
}

/* ------------------------------
   Galerie d’images responsive
--------------------------------*/
.gallery {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
}

/* 4 colonnes sur grands écrans */
@media (min-width: 1000px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 6 colonnes sur écrans moyens */
@media (min-width: 700px) and (max-width: 999px) {
    .gallery {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* 12 colonnes sur petits écrans (1 image par ligne) */
@media (max-width: 699px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr);
    }
}

.gallery img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background: #fff;
}

/* Liens autour des images : suppression du contour bleu */
.gallery a {
    display: block;
}

.gallery a img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    outline: none;
}

/* Effet hover sur les images de la galerie */
.gallery a img {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery a:hover img {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


/* ------------------------------
   Pied de page
--------------------------------*/
.page-footer {
    text-align: center;
    padding: 1.5rem;
    margin-top: 3rem;
    background: var(--color-accent);
    color: white;
}