@charset "utf-8";
/* ===================================================== */
/* HEADER-CHAUD.CSS — menu accordé au fond chaud         */
/* (#fffdf1) des pages Carnets et des galeries.          */
/* - au repos : rien ne change (menu de l'accueil) ;     */
/* - au survol : bandeau crème lumineux au lieu du voile */
/*   sombre, texte qui reste sombre, lien survolé vert ; */
/* - sous-menus : panneaux crème, fin liseré vert en     */
/*   haut, ombre légère et chaude, au lieu des pavés     */
/*   gris foncé.                                         */
/* Chargé APRÈS style-header-divise.css et               */
/* style-menu-portefolio-mobile.css.                     */
/* Pour revenir à l'ancien menu : retirer le lien vers   */
/* ce fichier dans la page.                              */
/* ===================================================== */

/* ---------- Bandeau au survol ---------- */
html body #header-desktop.theme-home:hover::before {
    background: rgba(255, 253, 241, 0.97);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 0 rgba(90, 70, 40, 0.10);   /* filet très fin sous le menu */
}
html body #header-mobile-v2.theme-home:hover::before {
    background: rgba(255, 253, 241, 0.97);
}

/* Logo et liens : restent sombres, passent au vert au survol */
html body #header-desktop.theme-home #logo-desktop a:hover {
    color: #337147;
}
html body #header-desktop.theme-home #menu-desktop > a:hover,
html body #header-desktop.theme-home #menu-desktop > div > a:hover {
    color: #337147;
    background: rgba(51, 113, 71, 0.07);
}

/* ---------- Panneaux des sous-menus ---------- */
html body #header-desktop #desktop-apropos-panel,
html body #header-desktop #desktop-japon-panel,
html body #header-desktop #desktop-dentelles-panel,
html body #header-desktop .desktop-submenu-panel {
    top: var(--menu-height);                         /* collé au bandeau */
    background: rgba(255, 253, 241, 0.97);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(90, 70, 40, 0.08);
    border-top: 2px solid rgba(51, 113, 71, 0.45);  /* fin liseré vert */
    border-radius: 0 0 4px 4px;
    box-shadow: 0 14px 30px rgba(70, 55, 30, 0.10);
}
/* la petite zone « pont » au-dessus du panneau n'est plus utile */
html body #header-desktop #desktop-apropos-panel::before,
html body #header-desktop #desktop-japon-panel::before,
html body #header-desktop #desktop-dentelles-panel::before,
html body #header-desktop .desktop-submenu-panel::before {
    display: none;
}

/* Liens des sous-menus : texte sombre, vert au survol */
html body #header-desktop #desktop-apropos-panel a,
html body #header-desktop #desktop-japon-panel a,
html body #header-desktop #desktop-dentelles-panel a,
html body #header-desktop .desktop-submenu-panel a {
    color: #444;
    font-weight: 300;
}
html body #header-desktop #desktop-apropos-panel a:hover,
html body #header-desktop #desktop-japon-panel a:hover,
html body #header-desktop #desktop-dentelles-panel a:hover,
html body #header-desktop .desktop-submenu-panel a:hover {
    color: #337147;
    background: rgba(51, 113, 71, 0.07);
}

/* =============================== */
/* PAGE D'ACCUEIL                  */
/* Sur une section sombre, le menu */
/* est écrit en blanc (classe      */
/* « menu-clair », posée par       */
/* scripts/index-galeries.js). Au  */
/* survol, le bandeau devient      */
/* crème : le texte repasse donc   */
/* en sombre pour rester lisible.  */
/* =============================== */

html body #header-desktop.theme-home:hover #logo-desktop a,
html body #header-desktop.theme-home:hover #menu-desktop > a,
html body #header-desktop.theme-home:hover #menu-desktop > div > a {
    color: rgba(0, 0, 0, 0.85);
}
html body #header-desktop.theme-home:hover #logo-desktop a:hover,
html body #header-desktop.theme-home:hover #menu-desktop > a:hover,
html body #header-desktop.theme-home:hover #menu-desktop > div > a:hover {
    color: #337147;
}
html body #header-mobile-v2.theme-home:hover #logo-mobile-v2 a {
    color: rgba(0, 0, 0, 0.85);
}
/* le burger reste blanc quand le menu mobile (noir) est ouvert */
html body #header-mobile-v2.theme-home:hover #burger-mobile-v2:not(.active) span {
    background: rgba(0, 0, 0, 0.85);
}

/* =============================== */
/* PAGES À PARTIE HAUTE SOMBRE     */
/* (À propos, Contact,             */
/* Témoignages : header-sombre.css */
/* et .js). Le menu garde son      */
/* bandeau vert sombre au-dessus   */
/* de la partie sombre ; les       */
/* sous-menus prennent le même     */
/* vert, avec un fin liseré vert   */
/* pâle, au lieu des pavés gris.   */
/* Au-dessus des parties claires   */
/* (formulaire, pied de page) :    */
/* menu et sous-menus crème, comme */
/* sur les autres pages.           */
/* =============================== */

/* ---------- Partie sombre ---------- */
html.header-sombre body #header-desktop #desktop-apropos-panel,
html.header-sombre body #header-desktop #desktop-japon-panel,
html.header-sombre body #header-desktop #desktop-dentelles-panel,
html.header-sombre body #header-desktop .desktop-submenu-panel {
    background: rgba(31, 43, 38, 0.94);
    border-color: rgba(255, 255, 255, 0.06);
    border-top: 2px solid rgba(185, 217, 194, 0.45);   /* liseré vert pâle */
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}
html.header-sombre body #header-desktop #desktop-apropos-panel a,
html.header-sombre body #header-desktop #desktop-japon-panel a,
html.header-sombre body #header-desktop #desktop-dentelles-panel a,
html.header-sombre body #header-desktop .desktop-submenu-panel a {
    color: rgba(255, 255, 255, 0.85);
}
html.header-sombre body #header-desktop #desktop-apropos-panel a:hover,
html.header-sombre body #header-desktop #desktop-japon-panel a:hover,
html.header-sombre body #header-desktop #desktop-dentelles-panel a:hover,
html.header-sombre body #header-desktop .desktop-submenu-panel a:hover {
    color: #cfe5d5;
    background: rgba(185, 217, 194, 0.10);
}
/* liens du bandeau : vert pâle au survol */
html.header-sombre body #header-desktop #logo-desktop a:hover,
html.header-sombre body #header-desktop #menu-desktop > a:hover,
html.header-sombre body #header-desktop #menu-desktop > div > a:hover {
    color: #cfe5d5;
    background: rgba(185, 217, 194, 0.10);
}

/* ---------- Parties claires ---------- */
html:not(.header-sombre) body #header-desktop:not(.theme-home) {
    background: rgba(255, 253, 241, 0.88);
}
html:not(.header-sombre) body #header-desktop:not(.theme-home):hover {
    background: rgba(255, 253, 241, 0.97);
    box-shadow: 0 1px 0 rgba(90, 70, 40, 0.10);
}
html:not(.header-sombre) body #header-mobile-v2:not(.theme-home)::before {
    background: rgba(255, 253, 241, 0.88);
}
html:not(.header-sombre) body #header-desktop:not(.theme-home) #logo-desktop a:hover,
html:not(.header-sombre) body #header-desktop:not(.theme-home) #menu-desktop > a:hover,
html:not(.header-sombre) body #header-desktop:not(.theme-home) #menu-desktop > div > a:hover {
    color: #337147;
    background: rgba(51, 113, 71, 0.07);
}