/* =========================================
   STEAMPUNK COMPTOIR — variante commerce de proximité.
   Identité : parchemin TRÈS clair + nav ardoise noire profonde.
   Look "boutique de quartier" / café-comptoir. Pour barbershops,
   bars à thème, ateliers ouverts au public, ventes directes.
   ========================================= */

:root {
    /* === Palette de base — comptoir : laiton patiné ancien + acajou/bordeaux.
       Surcharge des tokens BRUTS (sémantiques + usages directs suivent). === */
    --sp-brass:        #B38A46;   /* accent — laiton patiné ambré */
    --sp-brass-icon:   #A27D40;   /* AUDIT CONTRASTE — laiton assombri : icônes lisibles sur parchemin (>= 3.0) */
    --sp-brass-dark:   #8A6630;   /* hovers */
    --sp-brass-light:  #D2B477;   /* accents subtils / insets */
    --sp-copper:       #A86A30;   /* secondaire — cuivre chaud */
    --sp-mahogany:     #5E2018;   /* titres — acajou / bordeaux */
    --sp-ink:          #34211A;   /* texte — brun acajou */
    --sp-ink-soft:     #6A463A;   /* texte secondaire */
    --sp-tarnish:      #8A5A3C;   /* bordures — acajou */

    /* Palette body : parchemin ambré chaud */
    --sp-bg:           #FBF1D8;
    --sp-bg-alt:       #F4E8C8;
    --sp-surface:      #FBF5E5;

    --sp-section-alt-bg: #F4E8C8;

    /* NAV : ardoise noire profonde, text laiton brillant — look "façade boutique" */
    --sp-nav-bg:           #1A0F08;
    --sp-nav-bg-gradient:  linear-gradient(180deg, #2A1A0D 0%, #0F0703 100%);
    --sp-nav-text:         #D4B786;
    --sp-nav-brand:        #D4B786;
    --sp-nav-hover:        #FBF5E5;
    --sp-nav-border:       #B38A46;
    --sp-nav-border-width: 2px;
    --sp-nav-border-style: solid;

    /* CARDS fond clair, bordure fine laiton */
    --sp-card-bg:     #FBF5E5;
    --sp-card-border: #B08D57;
    --sp-card-shadow:
        0 3px 8px rgba(44, 24, 16, 0.1),
        0 0 0 1px rgba(176, 141, 87, 0.3);

    /* Images : noir & blanc viré sépia café, presque photo XIXe */
    --sp-img-filter: grayscale(0.95) sepia(0.6) saturate(0.5) hue-rotate(-15deg) contrast(1.2) brightness(0.92);

    /* Texture body : presque rien, juste très légers radiaux chauds */
    --sp-body-pattern:
        radial-gradient(circle at 10% 10%, rgba(176, 141, 87, 0.07), transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(184, 115, 51, 0.07), transparent 50%);
}

/* Nav brand italique + petit pictogramme intégré */
.sp-nav .navbar-brand {
    font-style: italic;
    font-size: 1.5rem;
}
.sp-nav { padding: 0.75rem 0; }

/* ----- Dropdowns navbar : carte laiton/sépia, pas le menu Bootstrap par défaut ----- */
.sp-nav .nav-link.dropdown-toggle { display: inline-flex; align-items: center; }
.sp-nav .dropdown-toggle::after {
    margin-left: 0.4em;
    border-top-color: var(--sp-brass);
    transition: var(--sp-transition);
}
.sp-nav .nav-item.dropdown:hover .dropdown-toggle::after,
.sp-nav .dropdown-toggle[aria-expanded="true"]::after {
    border-top-color: var(--sp-nav-hover);
}
.sp-nav .dropdown-menu {
    background-color: var(--sp-surface);
    background-image: linear-gradient(180deg, var(--sp-bone) 0%, var(--sp-parchment) 100%);
    border: 1px solid var(--sp-brass);
    border-radius: var(--sp-radius);
    box-shadow: 0 8px 22px var(--sp-shadow), 0 0 0 1px rgba(176, 141, 87, 0.25);
    padding: 0.4rem;
    margin-top: 0.5rem;
}
.sp-nav .dropdown-menu .dropdown-item {
    color: var(--sp-ink);
    font-family: var(--sp-font-body, inherit);
    border-radius: calc(var(--sp-radius) - 2px);
    padding: 0.45rem 0.85rem;
    transition: var(--sp-transition);
}
.sp-nav .dropdown-menu .dropdown-item:hover,
.sp-nav .dropdown-menu .dropdown-item:focus {
    background-color: var(--sp-brass);
    color: var(--sp-bone);
}
.sp-nav .dropdown-menu .dropdown-item:active {
    background-color: var(--sp-copper);
    color: var(--sp-bone);
}

/* ----- Liens de pied de page (rayon) ----- */
.sp-footer-links li { margin-bottom: 0.25rem; }
.sp-footer-links a {
    color: var(--sp-parchment);
    text-decoration: none;
    transition: var(--sp-transition);
    opacity: 0.85;
}
.sp-footer-links a:hover { color: var(--sp-brass); opacity: 1; padding-left: 0.2rem; }
.sp-footer-links a .bi { color: var(--sp-brass); font-size: 0.7em; }

/* Hero comptoir : carte horaires ardoise toujours visible */
.comptoir-hero {
    padding: 5rem 0 3rem;
    background: linear-gradient(180deg, #FFFFFA 0%, var(--sp-bg) 100%);
    border-bottom: 2px solid var(--sp-brass);
    position: relative;
}
.comptoir-hero::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 8px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' fill='%23B08D57'%3E%3Cpath d='M0 0 L20 8 L40 0 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 40px 8px;
    opacity: 0.35;
}
.comptoir-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    color: var(--sp-mahogany);
}

/* Carte horaires : ardoise noire avec liseré laiton (signature comptoir) */
.comptoir-hours {
    background-color: #0F0703;
    background-image: linear-gradient(180deg, #1A0F08 0%, #0A0502 100%);
    color: #D4B786;
    border: 3px solid #B08D57;
    border-radius: var(--sp-radius-lg);
    padding: 1.5rem;
    font-family: var(--sp-font-display);
    box-shadow:
        inset 0 0 0 4px #0F0703,
        inset 0 0 0 5px #8A6E40,
        0 10px 24px rgba(44, 24, 16, 0.3);
}
.comptoir-hours h5 {
    color: #D4B786;
    border-bottom: 1px dashed #8A6E40;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
}
.comptoir-hours .hours-row {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    border-bottom: 1px dotted rgba(176, 141, 87, 0.2);
}
.comptoir-hours .hours-row:last-child { border-bottom: none; }
.comptoir-hours .hours-row .day { color: #FBF5E5; }
.comptoir-hours .hours-row .time { color: #D4B786; }
.comptoir-hours .hours-row.closed .time { color: #6B5234; font-style: italic; }

/* Section title : trait fin sous le titre au lieu d'engrenages massifs */
.section-title h2,
.sp-section-title h2 {
    padding: 0;
    border-bottom: 2px solid var(--sp-brass);
    display: inline-block;
    padding-bottom: 0.5rem;
}
.section-title h2::before,
.section-title h2::after,
.sp-section-title h2::before,
.sp-section-title h2::after {
    display: none;
}

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

/* ----- Mode nuit : héros parchemin clair en dur -> ardoise sombre -----
   (la carte horaires .comptoir-hours est déjà sombre, on la laisse) */
html[data-bs-theme="dark"] .comptoir-hero {
    background: linear-gradient(180deg, #1E160D 0%, var(--sp-bg) 100%);
    border-bottom-color: var(--sp-brass);
}
html[data-bs-theme="dark"] .comptoir-hero h1 { color: var(--sp-heading); }

/* === Identité NUIT — canvas sombre commun ; ambiance cabaret à la bougie :
   laiton ambré + titres ambre-rougeoyant (écho acajou). (0,1,1), après la base. === */
html[data-bs-theme="dark"] {
    --sp-brass:        #CBA05A;   /* accent — laiton ambré */
    --sp-brass-dark:   #8A6630;
    --sp-brass-light:  #E6C88A;   /* liens */
    --sp-heading:      #E3B488;   /* titres — ambre rougeoyant */
}