/* =====================================
   RESET
===================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =====================================
   BODY
===================================== */

body {
    min-height: 100vh;
    font-family: Georgia, "Times New Roman", serif;
    color: #eee4da;
    background: radial-gradient(circle at 50% 10%, #562a33 0%, #3b1b22 35%, #291218 65%, #18090d 100%);
    background-attachment: fixed;
}

/* =====================================
   HEADER
===================================== */
.header { height:85px; display:flex; align-items:center; justify-content:space-between; padding:0 5%; border-bottom:1px solid rgba(215,180,105,.15); }
.logo { font-size:14px; letter-spacing:4px; color:#d5c7b6; }
nav { display:flex; gap:42px; }
nav a { color:#bcae9f; text-decoration:none; text-transform:uppercase; font-size:11px; letter-spacing:2px; transition:color .3s ease,opacity .3s ease; }
nav a:hover { color:#d7b66c; }

/* =====================================
   INTRO
===================================== */
.intro { text-align:center; padding:80px 20px 90px; }
.intro-small { color:#c39a57; font-size:10px; letter-spacing:5px; margin-bottom:18px; }
.intro h1 { font-weight:normal; font-size:clamp(45px,6vw,78px); letter-spacing:2px; }
.intro-text { margin-top:18px; font-size:15px; font-style:italic; color:#aa9894; }

/* =====================================
   GALERIE
===================================== */
.gallery { width:min(1450px,94%); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:90px 45px; padding-bottom:140px; }
.model { position:relative; width:100%; display:flex; justify-content:center; }
.painting { position:relative; width:100%; max-width:430px; aspect-ratio:1024/1218; cursor:pointer; transition:transform .35s ease,filter .35s ease; }
.model-photo { position:absolute; top:14.5%; left:13.5%; width:73%; height:73%; object-fit:cover; object-position:center; z-index:1; background:#111; }
.frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; pointer-events:none; user-select:none; }
.model-name { position:absolute; top:89.1%; left:50%; transform:translate(-50%,-50%); width:30%; text-align:center; z-index:3; color:#2b1909; font-family:Georgia,"Times New Roman",serif; font-size:clamp(9px,.95vw,14px); font-weight:bold; letter-spacing:1.8px; line-height:1; text-transform:uppercase; white-space:nowrap; pointer-events:none; text-shadow:0 1px 0 rgba(255,235,180,.35); }
.painting:hover { transform:translateY(-8px) scale(1.015); filter:drop-shadow(0 25px 25px rgba(0,0,0,.45)); }
.model::before { content:""; position:absolute; top:15%; left:50%; transform:translateX(-50%); width:280px; height:280px; background:radial-gradient(circle,rgba(255,220,150,.07),transparent 70%); pointer-events:none; }
footer { padding:45px; text-align:center; border-top:1px solid rgba(215,180,105,.12); color:#795d60; font-size:10px; letter-spacing:4px; text-transform:uppercase; }
@media (max-width:1000px){ .gallery{grid-template-columns:repeat(2,1fr);gap:70px 40px;} }
@media (max-width:650px){ .header{height:70px;padding:0 25px;} nav{display:none;} .intro{padding:60px 20px 70px;} .intro h1{font-size:46px;} .gallery{width:90%;grid-template-columns:1fr;gap:60px;padding-bottom:90px;} .painting{max-width:400px;} footer{padding:35px 20px;} }
.signin-link { display:inline-block; margin-left:0; padding:0; border:none; color:inherit; background:none; font:inherit; line-height:inherit; text-decoration:none; text-transform:inherit; letter-spacing:inherit; cursor:pointer; transition:color .2s ease; }
.signin-link:hover { color:#d8b66f; text-decoration:none; }


/* =====================================
   STYLES SPECIFIQUES GALLERY (ancien <style> Twig)
===================================== */
        /* =====================================
           HEADER
        ====================================== */

        .header {
            position: sticky;
            top: 0;
            z-index: 1000;

            background:
                linear-gradient(
                    180deg,
                    #222122 0%,
                    #191819 100%
                );

            border-bottom:
                1px solid
                rgba(198, 156, 89, 0.18);

            box-shadow:
                0 12px 30px
                rgba(0, 0, 0, 0.20);
        }


        .logo {
            color: #eee4da;
        }


        /* =====================================
           MENU CATEGORIES
        ====================================== */

        .gallery-menu {
            position: relative;
        }


        .gallery-menu-button {
            display: flex;
            align-items: center;
            gap: 7px;

            padding: 0;
            border: none;

            color: inherit;
            background: none;

            font: inherit;

            cursor: pointer;
        }


        .gallery-menu-arrow {
            font-size: 8px;

            transition:
                transform 0.25s ease;
        }


        .gallery-menu.open
        .gallery-menu-arrow {
            transform:
                rotate(180deg);
        }


        /* =====================================
           DROPDOWN
        ====================================== */

        .gallery-dropdown {
            position: absolute;

            top: calc(100% + 18px);
            left: 50%;

            z-index: 100;

            display: none;

            min-width: 210px;

            padding:
                8px
                0;

            transform:
                translateX(-50%);

            border:
                1px solid
                rgba(198, 156, 89, 0.28);

            background:
                #1d1c1d;

            box-shadow:
                0 20px 40px
                rgba(0, 0, 0, 0.45);
        }


        .gallery-menu.open
        .gallery-dropdown {
            display: block;
        }


        /* =====================================
           CATEGORY BUTTON
        ====================================== */

        .gallery-category {
            display: block;

            width: 100%;

            padding:
                12px
                18px;

            border: none;

            color: #a98c75;
            background: none;

            font-family:
                Georgia,
                "Times New Roman",
                serif;

            font-size: 9px;

            letter-spacing: 2px;

            text-align: left;

            text-transform: uppercase;

            cursor: pointer;

            transition:
                color 0.2s ease,
                background 0.2s ease;
        }


        .gallery-category:hover,
        .gallery-category.active {
            color: #d8b66f;

            background:
                rgba(198, 156, 89, 0.08);
        }


        /* =====================================
           ALL
        ====================================== */

        .gallery-category-all {
            margin-bottom: 6px;

            padding-bottom: 14px;
        }


        /* =====================================
           FAVORITES
        ====================================== */

        .gallery-category-favorites {
            position: relative;

            margin-bottom: 7px;

            padding-top: 13px;
            padding-bottom: 15px;

            color: #d394a1;

            border-top:
                1px solid
                rgba(198, 156, 89, 0.10);

            border-bottom:
                1px solid
                rgba(198, 156, 89, 0.14);
        }


        .gallery-category-favorites:hover {
            color: #efb4c0;

            background:
                rgba(151, 72, 89, 0.16);
        }


        .gallery-category-favorites.active {
            color: #f0c2cb;

            background:
                rgba(151, 72, 89, 0.22);
        }


        .favorite-menu-heart {
            display: inline-block;

            margin-right: 7px;

            color: #df8fa0;

            font-size: 12px;

            line-height: 1;
        }


        .gallery-category-favorites:hover
        .favorite-menu-heart,
        .gallery-category-favorites.active
        .favorite-menu-heart {
            color: #efa3b3;
        }


        /* =====================================
           SEARCH
        ====================================== */

        .search-menu {
            position: relative;

            margin-left: 0;
        }


        .search-button {
            padding: 0;

            border: none;

            color: inherit;
            background: none;

            font: inherit;

            cursor: pointer;

            transition:
                color 0.2s ease;
        }


        .search-button:hover,
        .search-menu.open
        .search-button {
            color: #d8b66f;
        }


        /* =====================================
           SEARCH PANEL
        ====================================== */

        .search-panel {
            position: absolute;

            top: calc(100% + 18px);
            right: 0;

            z-index: 100;

            display: none;

            width: 280px;

            padding:
                18px
                20px;

            border:
                1px solid
                rgba(198, 156, 89, 0.28);

            background:
                #1d1c1d;

            box-shadow:
                0 20px 40px
                rgba(0, 0, 0, 0.45);
        }


        .search-menu.open
        .search-panel {
            display: block;
        }


        .search-label {
            display: block;

            margin-bottom: 12px;

            color: #b78d52;

            font-size: 8px;

            letter-spacing: 3px;

            text-transform: uppercase;
        }


        .search-input-wrapper {
            position: relative;
        }


        .search-input {
            display: block;

            width: 100%;

            padding:
                9px
                26px
                9px
                0;

            border: none;

            border-bottom:
                1px solid
                rgba(198, 156, 89, 0.38);

            outline: none;

            color: #eee4da;

            background: transparent;

            font-family:
                Georgia,
                "Times New Roman",
                serif;

            font-size: 13px;

            letter-spacing: 1px;

            transition:
                border-color 0.2s ease;
        }


        .search-input::placeholder {
            color: #706568;

            font-style: italic;
        }


        .search-input:focus {
            border-color:
                rgba(216, 182, 111, 0.85);
        }


        .search-clear {
            position: absolute;

            top: 50%;
            right: 0;

            display: none;

            padding: 3px;

            transform:
                translateY(-50%);

            border: none;

            color: #8d7977;

            background: none;

            font-size: 15px;

            cursor: pointer;

            transition:
                color 0.2s ease;
        }


        .search-clear.visible {
            display: block;
        }


        .search-clear:hover {
            color: #d8b66f;
        }


        /* =====================================
           INTRO
        ====================================== */

        .intro-small {
            color: #b78d52;

            letter-spacing: 5px;
        }


        .intro h1 {
            color: #eee4da;
        }


        /* =====================================
           COUNT + DESCRIPTION
        ====================================== */

        .intro-meta {
            display: flex;

            align-items: baseline;

            justify-content: center;

            gap: 7px;

            color: #a9958d;

            font-size: inherit;

            line-height: inherit;

            letter-spacing: 2px;
        }


        .portrait-count {
            color: #c09a5c;

            font-family:
                Georgia,
                "Times New Roman",
                serif;

            font-size: 16px;

            font-weight: normal;

            line-height: inherit;

            letter-spacing: 2px;
        }


        .intro-text {
            margin: 0;

            color: #a9958d;

            font-size: 12px;

            line-height: inherit;

            letter-spacing: 2px;
        }


        /* =====================================
           MODE FAVORITES
        ====================================== */

        body.favorites-mode
        .portrait-count {
            color: #df8fa0;
        }


        body.favorites-mode
        .intro-small {
            color: #c88a97;
        }


        /* =====================================
           EMPTY
        ====================================== */

        .gallery-empty {
            display: none;

            width: 100%;

            padding:
                80px
                0;

            color: #8d7977;

            font-style: italic;

            text-align: center;
        }


        /* =====================================
           MOBILE
        ====================================== */

        @media (max-width: 650px) {

            .gallery-dropdown {
                left: 0;

                transform: none;
            }


            .intro-meta {
                gap: 6px;
            }


            .search-menu {
                margin-left: 18px;
            }


            .search-panel {
                position: fixed;

                top: 72px;
                left: 20px;
                right: 20px;

                width: auto;
            }

        }

/* =====================================
   HEADER — SIMPLE NAVIGATION LINK
   THEATRE
===================================== */

.header-menu-link {
    display: inline-block;

    margin: 0;
    padding: 0;

    border: none;

    color: inherit;
    background: none;

    font: inherit;
    line-height: inherit;

    text-decoration: none;
    text-transform: inherit;
    letter-spacing: inherit;

    cursor: pointer;

    transition:
        color 0.2s ease;
}

.header-menu-link:hover {
    color: #d8b66f;
    text-decoration: none;
}