@charset "utf-8";
/* ===================================================== */
/* STYLE-INDEX-FONDS-CLAIRS.CSS — page d'accueil,         */
/* TABLETTE ET MOBILE (≤ 1024 px)                         */
/* Sections 2, 3 et 4 : un même fond clair et lumineux,   */
/* la petite texture « papier d'aquarelle »               */
/* images/bg-mobile-tablette.jpg répétée (repeat).        */
/* La section 1 ne change pas. Titres, textes, menu,      */
/* repères et chevrons repassent en sombre.               */
/* Chargé EN DERNIER (après les autres CSS de l'accueil) :*/
/* sélecteurs renforcés + !important pour passer devant   */
/* les fonds sombres et images définis ailleurs.          */
/* L'ordinateur (≥ 1025 px) n'est pas concerné.           */
/* Ne touche NI aux chevrons (position), NI au GSAP.      */
/* ===================================================== */

@media (max-width: 1024px) {

    /* ---------- FOND : texture répétée ---------- */
    html body section#s2,
    html body section#s3,
    html body section#s4 {
        background: #efefe8 url("../images/bg-mobile-tablette.jpg") repeat !important;
        background-size: auto !important;
        --fond-clair: 1;                 /* lu par le script du menu : menu sombre */
    }
    /* Section 2 (mobile) : plus d'aquarelle zoomée ni de voile du bas */
    html body section#s2::before,
    html body section#s2.s2-zoom::before {
        background: none !important;
        animation: none !important;
        transform: none !important;
    }
    html body section#s2::after,
    html body section#s3::after {
        background: none !important;
    }

    /* ---------- CHEVRONS sombres (couleur seulement) ---------- */
    html body #s2 .next-arrow .chevron-dark,
    html body #s3 .next-arrow .chevron-dark,
    html body #s4 .next-arrow .chevron-dark  { display: block !important; }
    html body #s2 .next-arrow .chevron-light,
    html body #s3 .next-arrow .chevron-light,
    html body #s4 .next-arrow .chevron-light { display: none !important; }

    /* ---------- SECTION 2 : LES GALERIES ---------- */
    html body #s2 .gal-titre {
        color: rgba(0, 0, 0, 0.8) !important;
    }
    .gal-carte { opacity: 0.8; }
    .gal-carte.active { opacity: 1; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2); }
    /* Repères (tablette) en sombre */
    .gal-repere {
        border-color: rgba(0, 0, 0, 0.55);
        background: rgba(0, 0, 0, 0.55);
    }
    .gal-repere.active {
        background: transparent;
        border-color: rgba(0, 0, 0, 0.7);
    }

    /* ---------- SECTION 3 : À PROPOS ---------- */
    html body #s3 .ap3-texte h2 { color: rgba(0, 0, 0, 0.8) !important; }
    html body #s3 .ap3-texte h3 { color: rgba(0, 0, 0, 0.5) !important; }
    html body #s3 .ap3-texte p  { color: rgba(0, 0, 0, 0.75); }
    html body #s3 .inner .ap3-photo img { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2) !important; }
    .ap3-lien {
        color: #333;
        background: rgba(0, 0, 0, 0.04);
        border-color: rgba(0, 0, 0, 0.4);
    }

    /* ---------- SECTION 4 : DERNIÈRE PUBLICATION ---------- */
    html body #s4 .section-title,
    html body #s4 .section-title h1,
    html body #s4 .section-title h2,
    html body #s4 .section-title h3 {
        color: rgba(0, 0, 0, 0.8) !important;
    }
}

/* Tablette (769 – 1024 px) : le titre « Dernière publication » y est
   petit ; le bloc (vignette + texte), calé sur sa largeur, était trop
   étroit. On élargit la zone du titre pour donner de l'air au texte. */
@media (min-width: 769px) and (max-width: 1024px) {
    html body #s4 .section-title {
        width: min(560px, 80vw);
        max-width: none;
    }
}