@charset "utf-8";
/* ===================================================== */
/* STYLE-CARNETS-CLAIR.CSS — pages de présentation des    */
/* carnets (carnets-africains / europe / amerique / asie) */
/* Fond lumineux et chaud (#fffdf1), comme la page        */
/* d'accueil ; textes sombres ; menu de l'accueil         */
/* (<site-header-divise theme="home">).                   */
/* Vignettes grises, en couleur au survol (ordinateur) ou */
/* au milieu de l'écran (mobile : carnets-vignettes.js).  */
/* Chargé APRÈS style-grande-gallerie.css.                */
/* Pour revenir au fond sombre : remplacer le lien vers   */
/* ce fichier par style-carnets-sombre.css.               */
/* ===================================================== */

/* Fond (le !important passe devant le style écrit
   directement sur <html> et <body> dans la page) */
html,
body {
    background: #fffdf1 !important;
}
body {
    color: #333;
}

.intro-galerie {
    background: transparent;
}

/* Titre de la page : sombre, comme le titre de l'accueil */
h1,
.grant-titre .inner h1 {
    color: rgba(0, 0, 0, 0.8);
}

/* Titres des carnets (liens) */
.intro-galerie h2,
.intro-title a,
main a {
    color: #333;
}
.intro-title a:hover,
h2 a:hover {
    color: #337147;   /* vert du site */
    opacity: 1;
}

/* Textes et citations */
.intro-left p,
.grant-titre .inner p {
    color: #444;
}

/* Filets de séparation entre les carnets : ton chaud */
.intro-container,
.intro-container[class] {
    border-bottom-color: rgba(90, 70, 40, 0.14) !important;
}

/* Vignettes : ombre légère et chaude */
.intro-image-link {
    box-shadow: 0 14px 34px rgba(70, 55, 30, 0.18);
}

/* =============================== */
/* MENU : celui de l'accueil       */
/* (texte sombre, s'assombrit au   */
/* survol). Comme la page défile   */
/* sous le menu, on lui donne un   */
/* voile de la couleur du fond,    */
/* invisible en haut de page, qui  */
/* évite que les textes passent    */
/* sous les liens.                 */
/* =============================== */

html body #header-desktop.theme-home::before,
html body #header-mobile-v2.theme-home::before {
    background: rgba(255, 253, 241, 0.88);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* =============================== */
/* VIGNETTES : DÉSATURÉES PAR      */
/* DÉFAUT, EN COULEUR AU SURVOL    */
/* =============================== */

.intro-image-link img {
    filter: grayscale(100%);
    opacity: 0.92;
    transition: filter 0.6s ease, opacity 0.6s ease;
}

/* Ordinateur : couleur au survol de la souris */
@media (hover: hover) {
    .intro-image-link:hover img {
        filter: none;
        opacity: 1;
    }
}

/* Mobile / tablette : couleur quand la vignette passe au milieu
   de l'écran (classe ajoutée par scripts/carnets-vignettes.js) */
.intro-image-link.vignette-active img {
    filter: none;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .intro-image-link img {
        transition: none;
    }
}