@import url('https://fonts.googleapis.com/css2?family=Lavishly+Yours&family=IBM+Plex+Sans+JP:wght@400;500;700&family=Zen+Loop:ital@0;1&display=swap');

:root {
    --couleur-accent: #c1874f;
    --couleur-fond: #f7f3ee;
    --couleur-texte: #333;
    --couleur-hero: #320b2e;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
}
header.site-entete {
    padding: 1.8rem 1rem 1.2rem;
    text-align: center;
}
header.site-entete h1 {
    margin: 0;
    font-size: 1.7rem;
    letter-spacing: 0.02em;
}
header.site-entete p {
    margin: 0.3rem 0 0;
    color: #777;
    font-size: 0.95rem;
}
.signature {
    font-family: "suave-script-pro", cursive;
    font-size: 1.6rem !important;
    color: var(--couleur-accent) !important;
    margin-top: 0.2rem !important;
}
main {
    width: 100%;
}
/* Page d'une galerie (galerie.php) : elle garde le conteneur centré classique,
   contrairement à la page d'accueil dont les rubriques touchent les bords. */
.page-galerie {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 1rem;
}
h2 {
    font-family: "Lavishly Yours", cursive;
    font-weight: 400;
    font-size: 2.6rem;
    margin: 0 0 1.2rem;
    color: var(--couleur-accent);
}
h3 {
    font-family: "Zen Loop", cursive;
    font-weight: 800;
    font-style: normal;
    font-size: 1.8rem;
    margin: 0 0 0.8rem;
    color: #721684;
}
h3 i, h3 em {
    font-style: italic; /* variante italique de Zen Loop, dispo si besoin dans tes textes */
}
body {
    font-family: "IBM Plex Sans JP", sans-serif;
}

/* ============================================================
   Page d'accueil "une page" du site public — sections empilées,
   pensées mobile d'abord (on scrolle simplement de haut en bas).
   ============================================================ */

.rubrique {
    width: 100%;
}
.rubrique-interieur {
    padding: 2rem 1.2rem;
    max-width: 1024px;
    margin: 0 auto;
}
.rubrique-alt { background: #efe6d9; }

/* --- Hero : logo + "Artiste peintre" --- */
.hero {
    background: var(--couleur-hero) url('../img/header.jpg') center center / cover no-repeat;
    background-attachment: fixed;
    padding: 3.5rem 1.2rem 3rem;
    text-align: center;
}
/* Sur mobile, le "background-attachment: fixed" qui crée l'effet parallax
   se comporte mal (voire pas du tout) sur beaucoup de navigateurs :
   on repasse en défilement normal en dessous de 700px. */
@media (max-width: 700px) {
    .hero { background-attachment: scroll; }
}
.hero .logo-carolinart {
    max-width: 420px;
    width: 85%;
    height: auto;
}
.hero h1 {
    color: #fff;
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-size: 0.95rem;
    margin: 1rem 0 0;
}
.reseaux-sociaux {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    margin-top: 1.3rem;
}
.reseaux-sociaux a {
    color: #fff;
    opacity: 0.85;
    display: flex;
    transition: opacity 0.15s ease;
}
.reseaux-sociaux a:hover {
    opacity: 1;
}

/* --- Les ateliers : 4 mises en page possibles, choisies par atelier
   dans l'admin. Le point commun : plus de "vide" sous une photo plus
   courte que le texte — la photo remplit toute la hauteur disponible
   (object-fit: cover) au lieu de garder ses proportions d'origine. --- */
.bloc-atelier {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.bloc-atelier:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.atelier-texte {
    line-height: 1.7;
    text-align: left;
}
.atelier-texte h3:first-child {
    margin-top: 0;
}

/* Photo à gauche ou à droite : grille 2 colonnes sur desktop,
   la photo occupe toute la hauteur de la ligne (pas de vide dessous). */
.bloc-atelier-image_gauche,
.bloc-atelier-image_droite {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.atelier-photo-cote {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
.atelier-photo-cote img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    display: block;
}
@media (min-width: 700px) {
    .bloc-atelier-image_gauche,
    .bloc-atelier-image_droite {
        display: grid;
        align-items: stretch;
        gap: 2rem;
    }
    .bloc-atelier-image_gauche {
        grid-template-columns: 35% 1fr;
    }
    .bloc-atelier-image_droite {
        grid-template-columns: 1fr 35%;
    }
    .bloc-atelier-image_droite .atelier-photo-cote { order: 2; }
    .bloc-atelier-image_droite .atelier-texte { order: 1; }
}

/* Photo en pleine largeur au-dessus, texte dessous */
.atelier-photo-dessus {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}

/* Texte au-dessus, photo en pleine largeur dessous */
.atelier-photo-dessous {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 16px;
    margin-top: 1.5rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}

/* Petit encart "jours, horaires, lieu" sur chaque atelier */
.encart-horaires {
    background: #f7f3ee;
    border: 2px solid #721684;
    border-radius: 12px;
    padding: 0.8rem 1.1rem;
    margin: 0.8rem 0 1.2rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--couleur-accent);
    font-weight: 600;
    display: inline-block;
}

/* Texte au-dessus, plusieurs photos en galerie dessous (ex : ateliers enfants) */
.atelier-galerie-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.atelier-galerie-photos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* --- Qui suis-je : photo collée au header (pas de coin arrondi, pas de
   marge au-dessus), texte en dessous avec plus d'air en bas pour la lecture. --- */
.conteneur-photo-qui-suis-je {
    max-width: 1024px;
    margin: 0 auto;
}
.photo-qui-suis-je {
    display: block;
    width: 100%;
    max-height: 600px;
    object-fit: cover;
}
.rubrique-qui-suis-je-texte {
    padding-top: 2rem;
    padding-bottom: 5rem;
}
.rubrique-qui-suis-je-texte div {
    line-height: 1.7;
    text-align: left;
}

/* --- Actualités --- */
.grille-actualites {
    display: grid;
    gap: 1.3rem;
}
.carte-actualite-publique {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.carte-actualite-publique img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.carte-actualite-publique .contenu { padding: 1.1rem 1.3rem; }
.carte-actualite-publique .date-actu { font-size: 0.78rem; color: #999; margin-bottom: 0.3rem; }
.carte-actualite-publique h4 { margin: 0 0 0.4rem; font-size: 1.05rem; }

/* --- Expositions --- */
.liste-expositions { display: flex; flex-direction: column; gap: 1.5rem; }
.carte-exposition {
    display: flex;
    gap: 1.2rem;
    background: #fff;
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    align-items: flex-start;
}
.carte-exposition img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.carte-exposition .meta-expo { font-size: 0.82rem; color: #999; margin-bottom: 0.3rem; }
.carte-exposition h4 { margin: 0 0 0.3rem; }

/* --- Contact (footer) --- */
.pied-contact {
    background: var(--couleur-hero);
    color: #fff;
    padding: 3rem 1.2rem 2.5rem;
    text-align: center;
}
.pied-contact h2 { color: #fff; }
.formulaire-contact {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.formulaire-contact input,
.formulaire-contact textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
}
.formulaire-contact textarea { min-height: 120px; resize: vertical; }
.formulaire-contact button {
    background: var(--couleur-accent);
    color: #fff;
    border: none;
    padding: 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}
.pied-contact .message-envoi {
    background: rgba(255,255,255,0.12);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.pied-mentions {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-top: 2.5rem;
}
.pied-mentions a {
    color: rgba(255,255,255,0.75);
}

/* Grille des galeries (icônes), sur l'accueil.
   auto-fill + minmax : le nombre de colonnes s'adapte tout seul
   à la largeur de l'écran, sans media query à écrire. */
.grille-galeries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1.1rem;
}
.icone-galerie {
    text-decoration: none;
    color: inherit;
    text-align: center;
    display: block;
}
.icone-galerie .vignette {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    background: #e7ded2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.icone-galerie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.icone-galerie .placeholder {
    font-size: 2rem;
}
.icone-galerie .nom {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Grille des œuvres, sur la page d'une galerie */
.grille-oeuvres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.1rem;
}
.carte-oeuvre {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.carte-oeuvre img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}
.carte-oeuvre .infos {
    padding: 0.65rem 0.75rem;
}
.titre-oeuvre {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
}
.details-oeuvre {
    font-size: 0.78rem;
    color: #777;
    margin: 0;
}
.badge-statut {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    margin-top: 0.35rem;
}
.badge-disponible { background: #eaf6ec; color: #1a7f37; }
.badge-reservee { background: #fff4e0; color: #b3691e; }
.badge-vendue { background: #fdecea; color: #b3261e; }
.badge-hors_commerce { background: #eee; color: #777; }

.description-oeuvre {
    font-size: 0.8rem;
    color: #666;
    margin: 0.4rem 0 0;
    line-height: 1.5;
}
.ligne-statut-prix {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.ligne-statut-prix .badge-statut {
    margin-top: 0;
}
.prix-oeuvre {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--couleur-accent);
}

.lien-retour {
    display: inline-block;
    margin-bottom: 1.2rem;
    color: var(--couleur-accent);
    text-decoration: none;
    font-size: 0.9rem;
}

.filtre-technique {
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
}
.filtre-technique.actif {
    background: var(--couleur-accent);
    border-color: var(--couleur-accent);
    color: #fff;
}

/* Visionneuse de galerie (GLightbox) : par défaut, les flèches
   précédent/suivant sont masquées sur petit écran (l'outil compte alors
   uniquement sur le glissé du doigt). On les affiche aussi sur mobile,
   en plus du glissé, pour une navigation plus fiable au clic/au tap. */
.gprev, .gnext {
    top: 45% !important;
    width: 44px;
    height: 60px;
    background-color: rgba(0,0,0,0.4) !important;
    border-radius: 10px;
}