/* ============================================
   La Plume Végétale — Custom Styles
   ============================================ */

/* --- Self-hosted fonts (eliminates render-blocking external requests) --- */
@font-face {
    font-family: 'Pompiere';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/pompiere-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lifelogo Easy';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/lifelogo-easy.woff') format('woff');
}

/* --- CSS Variables --- */
:root {
    --terre-cuite: #d7a17f;
    --rose-mauve: #d0a9af;
    --rose-hover: #79687f;
    --beige-rose: #f5e8e5;
    --creme: #ffe9d0;
    --text: #485a73;
    --text-dark: #2f4858;
}

/* --- Smooth scroll --- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

/* --- Header scroll state --- */
#header.scrolled {
    background: rgba(215, 161, 127, 0.95);
    box-shadow: 0 1px 12px rgba(47, 72, 88, 0.15);
}

/* --- Burger animation --- */
#burger.active .burger-line:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

#burger.active .burger-line:nth-child(2) {
    opacity: 0;
}

#burger.active .burger-line:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
}

/* --- Mobile menu open --- */
#mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
}

/* --- Fade-in animations --- */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Gallery masonry fix --- */
.gallery-item {
    break-inside: avoid;
}

/* --- Floating phone button --- */
#floating-phone.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Selection color --- */
::selection {
    background: var(--beige-rose);
    color: var(--text-dark);
}

/* --- Focus visible for accessibility --- */
:focus-visible {
    outline: 2px solid var(--rose-mauve);
    outline-offset: 2px;
}

/* --- Tarteaucitron (cookie banner) --- */
#tarteaucitronRoot #tarteaucitronAlertBig {
    background: var(--beige-rose) !important;
    color: var(--text) !important;
}

#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronRoot .tarteaucitronAllow {
    background: var(--terre-cuite) !important;
    color: #fff !important;
}

#tarteaucitronRoot .tarteaucitronDeny {
    background: var(--rose-mauve) !important;
    color: #fff !important;
}

#tarteaucitronRoot #tarteaucitronIcon {
    bottom: 70px !important;
}

/* --- GLightbox custom overlay --- */
.goverlay {
    background: rgba(47, 72, 88, 0.9) !important;
}