/* =========================================
   STEAMPUNK ATELIER — variante artisan visuel, boutique chaleureuse.
   Identité : palette laiton miel + bois clair. Nav claire dorée.
   Cards plates avec ombre douce. Pour ébénistes, luthiers, maroquiniers.
   ========================================= */

:root {
    /* === Palette de base — différencie cette variante des autres steampunk.
       On surcharge les tokens BRUTS : les sémantiques de steampunk-base.css
       (--sp-accent = var(--sp-brass), etc.) ET les usages directs
       (.text-primary, .bg-primary, liens…) suivent alors automatiquement. === */
    --sp-brass:        #C69A3E;   /* accent — laiton doré poli */
    --sp-brass-icon:   #92722E;   /* AUDIT CONTRASTE — laiton assombri : icônes lisibles sur parchemin (>= 3.0) */
    --sp-brass-dark:   #9C7526;   /* hovers */
    --sp-brass-light:  #E0C079;   /* accents subtils / insets */
    --sp-copper:       #BE7E37;   /* secondaire — cuivre chaud */
    --sp-mahogany:     #6E3B1E;   /* titres — chêne / châtaigne */
    --sp-ink:          #3A2415;   /* texte — brun chaud */
    --sp-ink-soft:     #6B5238;   /* texte secondaire */
    --sp-tarnish:      #C0995A;   /* bordures — laiton clair */

    /* Palette body : miel + parchemin chaud */
    --sp-bg:           #F3E7C9;
    --sp-bg-alt:       #E3D2A8;
    --sp-surface:      #FBF5E5;

    /* Section alternée plus douce */
    --sp-section-alt-bg: #E3D2A8;

    /* NAV : laiton clair, doré, "menu de boutique" */
    --sp-nav-bg:           #D4B786;
    --sp-nav-bg-gradient:  linear-gradient(180deg, #DBC397 0%, #C9A872 100%);
    --sp-nav-text:         #2C1810;
    --sp-nav-brand:        #6E3B1E;       /* chêne foncé sur fond clair */
    --sp-nav-hover:        #9C7526;
    --sp-nav-border:       #9C7526;
    --sp-nav-border-width: 4px;
    --sp-nav-border-style: solid;

    /* CARDS plates, ombre douce, pas de cadre intérieur */
    --sp-card-bg:     #FBF5E5;
    --sp-card-border: #C9A872;
    --sp-card-shadow:
        0 6px 16px rgba(44, 24, 16, 0.12),
        0 1px 0 rgba(176, 141, 87, 0.4) inset;

    /* Images : sépia chaud type "carte postale colorisée", domine le gold */
    --sp-img-filter: grayscale(0.4) sepia(0.85) saturate(1.15) hue-rotate(-12deg) brightness(1.05);

    /* Texture body : grain bois horizontal */
    --sp-body-pattern:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(139, 69, 19, 0.045) 3px,
            rgba(139, 69, 19, 0.045) 4px
        ),
        radial-gradient(ellipse at 30% 10%, rgba(184, 115, 51, 0.14), transparent 60%),
        radial-gradient(ellipse at 70% 90%, rgba(139, 69, 19, 0.09), transparent 60%);
}

/* Nav brand en italique pour signer la boutique */
.sp-nav .navbar-brand { font-style: italic; }

/* Hero atelier : grand visuel + cadre bois clair */
.atelier-hero {
    padding: 7rem 0 5rem;
    background:
        linear-gradient(135deg, rgba(251,245,229,0.92), rgba(227,210,168,0.85)),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 4px,
            rgba(139, 69, 19, 0.06) 4px,
            rgba(139, 69, 19, 0.06) 5px
        );
    border-bottom: 2px solid #C9A872;
}
.atelier-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1.05;
    margin-bottom: 1.25rem;
    color: #4A2308;
}
.atelier-hero .atelier-craft-img {
    border: 8px solid var(--sp-bone);
    box-shadow:
        0 0 0 1px #C9A872,
        0 16px 36px rgba(44, 24, 16, 0.22);
    border-radius: var(--sp-radius);
    max-width: 100%;
}

/* Cards portfolio : pas de bordure dorée surchargée, juste l'ombre */
.atelier-hero ~ * .card,
section .card {
    border-width: 0 !important;
    border-top: 3px solid #C9A872 !important;
}

/* Section titles en italique pour le côté "carnet d'atelier" */
.section-title h2,
.sp-section-title h2 { font-style: italic; }

@media (max-width: 767.98px) {
    .atelier-hero { padding: 4rem 0 3rem; }
}

/* ----- Mode nuit : héros clair en dur -> bois sombre ----- */
html[data-bs-theme="dark"] .atelier-hero {
    background:
        linear-gradient(135deg, rgba(36, 27, 16, 0.92), rgba(18, 13, 8, 0.95)),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 4px,
            rgba(176, 141, 87, 0.05) 4px,
            rgba(176, 141, 87, 0.05) 5px
        );
    border-bottom-color: #5A4427;
}
html[data-bs-theme="dark"] .atelier-hero h1 { color: var(--sp-heading); }

/* === Identité NUIT — le canvas sombre est commun (steampunk-base.css) ; on
   ne ré-injecte que l'accent + les titres pour que l'Atelier reste "or chaud"
   la nuit. Spécificité (0,1,1) + chargé après la base => gagne. === */
html[data-bs-theme="dark"] {
    --sp-brass:        #D8B45E;   /* accent — or chaud éclairé */
    --sp-brass-dark:   #B8923F;
    --sp-brass-light:  #ECD49A;   /* liens */
    --sp-heading:      #E6C886;   /* titres — or clair */
}

/* =========================================
   NAVBAR — dropdowns "tiroirs d'atelier"
   La nav Atelier est CLAIRE (laiton miel) : le dropdown Bootstrap par défaut
   (blanc, bleuté) jurerait. On le redessine en panneau acajou/laiton, texte
   parchemin, pour qu'il prolonge le bandeau doré comme un vrai tiroir d'établi.
   ========================================= */
.sp-nav .nav-item.dropdown .dropdown-toggle::after {
    border-top-color: var(--sp-nav-text);
    margin-left: 0.4em;
    vertical-align: 0.1em;
    transition: transform 0.18s ease;
}
.sp-nav .nav-item.dropdown:hover .dropdown-toggle::after,
.sp-nav .nav-item.dropdown .dropdown-toggle[aria-expanded="true"]::after {
    border-top-color: var(--sp-nav-hover);
    transform: rotate(180deg);
}

.sp-nav .dropdown-menu {
    --bs-dropdown-bg: var(--sp-mahogany);
    background-color: var(--sp-mahogany);
    background-image: linear-gradient(180deg, #6E3B1E 0%, #4A2308 100%);
    border: 2px solid var(--sp-brass);
    border-radius: var(--sp-radius, 4px);
    box-shadow:
        0 10px 26px rgba(44, 24, 16, 0.45),
        0 0 0 1px rgba(224, 192, 121, 0.25) inset;
    padding: 0.4rem 0.35rem;
    margin-top: 0.5rem;
}

.sp-nav .dropdown-menu .dropdown-item {
    color: var(--sp-parchment, #F4E4BC);
    font-weight: 500;
    border-radius: 3px;
    padding: 0.4rem 0.85rem;
    transition: background-color 0.16s ease, color 0.16s ease, padding-left 0.16s ease;
}
.sp-nav .dropdown-menu .dropdown-item:hover,
.sp-nav .dropdown-menu .dropdown-item:focus {
    background-color: rgba(198, 154, 62, 0.22);
    color: var(--sp-brass-light, #E0C079);
    padding-left: 1.05rem;
}
.sp-nav .dropdown-menu .dropdown-item:active {
    background-color: var(--sp-brass);
    color: #2C1810;
}
.sp-nav .dropdown-menu .dropdown-divider {
    border-top-color: rgba(224, 192, 121, 0.3);
}

/* Mode nuit : le dropdown reste cohérent mais plus profond que le bois sombre */
html[data-bs-theme="dark"] .sp-nav .dropdown-menu {
    background-image: linear-gradient(180deg, #1E160D 0%, #0E0A05 100%);
    border-color: var(--sp-brass);
}

/* =========================================
   FOOTER — colonne de liens "établi"
   ========================================= */
.sp-footer .sp-footer-links li { margin-bottom: 0.3rem; }
.sp-footer .sp-footer-links .footer-link {
    color: var(--sp-brass-light) !important;
    transition: color 0.16s ease, padding-left 0.16s ease;
}
.sp-footer .sp-footer-links .footer-link::before {
    content: "\203A";   /* › chevron laiton */
    color: var(--sp-brass);
    margin-right: 0.45rem;
    opacity: 0.7;
}
.sp-footer .sp-footer-links .footer-link:hover {
    color: var(--sp-brass) !important;
    padding-left: 0.25rem;
}