/*
 * NomeosStyle — Premium Enhancements
 * Override file to be included AFTER NomeosStyle.css
 * Author: Sigmagine / Claude
 */


/* ─── PALETTE ─────────────────────────────────────────────────────────────── */

:root {
    /* Fond crème chaud au lieu du bleu froid */
    /* --secondary-bg-color : #F7F4EF; */

    /* Bleu légèrement plus profond et sophistiqué */
    --main-color         : #1E6E9A;

    /* Rayon de bordure plus généreux */
    --main-border-radius : 0px;

    /* Ombre premium */
    --shadow-soft        : 0 4px 24px rgba(38, 45, 61, 0.10);
    --shadow-card        : 0 2px 12px rgba(38, 45, 61, 0.08);
    --shadow-hover       : 0 8px 32px rgba(38, 45, 61, 0.18);
}

html, body {
    background-color: var(--secondary-bg-color);
}


/* ─── HEADER ──────────────────────────────────────────────────────────────── */

#structureFrame-header {
    background-color : var(--main-bg-color);
    box-shadow       : 0 1px 0 rgba(255,255,255,0.06), 0 2px 16px rgba(0,0,0,0.22);
    position         : sticky;
    top              : 0;
    z-index          : 100;
}

/* Ligne d'accent fine sous le header */
#structureFrame-header::after {
    content          : '';
    display          : block;
    height           : 2px;
    background       : linear-gradient(90deg, transparent, var(--main-color), transparent);
    opacity          : 0.5;
}

/* Hover plus raffiné sur les liens de nav */
#structureFrame-header a:hover {
    color: rgba(255,255,255,0.85);
}

.header-menu {
    letter-spacing: 2px;
    font-size     : 11px;
    font-weight   : 600;
    opacity       : 0.8;
    transition    : opacity 0.3s;
}

.header-menu:hover {
    opacity: 1;
}

#structureFrame-header a,
#structureFrame-header a:visited {
    color: rgba(255,255,255,0.75);
}


/* ─── LOGO ────────────────────────────────────────────────────────────────── */

/* Logo header : plus visible */
#logo img {
    filter : invert(100%) sepia(0%) saturate(0%) brightness(100%);
    opacity: 0.9;
    transition: opacity 0.3s;
}

#logo img:hover {
    filter : invert(100%) sepia(0%) saturate(0%) brightness(100%);
    opacity: 1;
}

#miniHeader-logo img {
    filter : invert(100%) sepia(0%) saturate(0%) brightness(100%);
    opacity: 0.9;
}

/* Logo home page : pleine lisibilité, sans opacity à 0.5 */
/* .homeLogo-container img {
    filter : none;
    opacity: 1;
} */

.homeLogo-container {
    width        : 35vw;
    min-width    : 260px;
    max-width    : 480px;
    margin-bottom: 40px;
}


/* ─── TYPOGRAPHIE ─────────────────────────────────────────────────────────── */

/* Animation h1 réactivée */
h1 {
    animation      : 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 h1LetterSpacing;
    letter-spacing  : 10px;
    padding-top     : 30px;
    padding-bottom  : 10px;
}

h2 {
    letter-spacing : 3px;
}

/* Tagline home plus aérée */
.tagLine {
    font-size     : clamp(9px, 1.2vw, 14px);
    letter-spacing: clamp(4px, 0.6vw, 10px);
    opacity       : 0.7;
    font-weight   : 300;
    margin-top    : 12px;
}


/* ─── SECTIONS ────────────────────────────────────────────────────────────── */

section {
    margin-top    : 60px;
    padding-top   : 40px;
    padding-bottom: 40px;
}

/* Séparateur h2 de section */
.centerContainer h2 {
    position      : relative;
    padding-bottom: 16px;
    margin-bottom : 32px;
}

.centerContainer h2::after {
    content   : '';
    display   : block;
    position  : absolute;
    bottom    : 0;
    left      : 50%;
    transform : translateX(-50%);
    width     : 40px;
    height    : 2px;
    background: var(--main-color);
    opacity   : 0.5;
}

.page-summary {
    line-height : 1.8;
    font-size   : 15px;
    color       : #4a5568;
}

@media (max-width: 800px) {

    .page-summary{
        line-height: 1.4;
    }
}


/* ─── BOUTONS ─────────────────────────────────────────────────────────────── */

button, .fineatyButton, .fineatyButton:visited {
    border        : 1px solid var(--main-color);
    letter-spacing: 1.5px;
    transition    : background-color 0.3s, color 0.3s, transform 0.2s;
    font-size     : 11px;
}

button:hover, .fineatyButton:hover {
    background: var(--main-color);
    color     : #ffffff;
    transform : translateY(-1px);
}


/* ─── CARTES CATALOG ──────────────────────────────────────────────────────── */

.card, 
.home-menu {
    border-radius: var(--main-border-radius);
    box-shadow   : var(--shadow-card);
    transition   : box-shadow 0.3s, transform 0.3s;
}

.card:hover, 
.home-menu:hover {
    box-shadow: var(--shadow-hover);
    transform : translateY(-2px);
}

.card figcaption {
    background-color: rgba(38, 45, 61, 0.72);
    backdrop-filter : blur(2px);
}

.cardTitle {
    color      : #ffffff;
    font-weight: 700;
    font-size  : 13px;
}

.cardSubtitle {
    color  : rgba(255,255,255,0.7);
}


/* ─── ROASTER ─────────────────────────────────────────────────────────────── */

.roaster-card {
    border-radius    : var(--main-border-radius);
    box-shadow       : var(--shadow-card);
    background-color : #ffffff;
    transition       : box-shadow 0.3s, transform 0.3s;
    overflow         : hidden;
}

.roaster-card:hover {
    box-shadow: var(--shadow-hover);
    transform : translateY(-4px);
}

.roasterCard-name {
    font-size     : 20px;
    font-weight   : 700;
    letter-spacing: 1.5px;
    color         : var(--main-bg-color);
}

.roasterCard-style {
    font-size     : 9px;
    letter-spacing: 2px;
    color         : var(--main-color);
    margin-top    : 4px;
}

.roasterCard-links {
    font-size : 20px;
    margin-top: 16px;
}

.roasterCard-links a {
    color     : var(--main-bg-color);
    opacity   : 0.5;
    transition: opacity 0.2s;
}

.roasterCard-links a:hover {
    opacity: 1;
}


/* ─── FOOTER ──────────────────────────────────────────────────────────────── */

#structureFrame-footer {
    background-color : var(--main-bg-color);
    color            : rgba(255,255,255,0.5);
    margin-top       : 80px;
    padding          : 32px 40px;
    height           : auto;
    border-top       : 1px solid rgba(255,255,255,0.06);
}

.footer-credits {
    font-size     : 11px;
    letter-spacing: 0.5px;
    text-align    : center;
    opacity       : 0.5;
}

#structureFrame-footer a,
#structureFrame-footer a:visited {
    color      : rgba(255,255,255,0.5);
    transition : color 0.2s;
}

#structureFrame-footer a:hover {
    color: rgba(255,255,255,0.9);
}


/* ─── POP-UP ──────────────────────────────────────────────────────────────── */

.fineatyPopUp {
    background-color: #ffffff;
    box-shadow      : var(--shadow-hover);
    border          : none;
    border-radius   : var(--main-border-radius);
}


/* ─── SCROLLBAR SUBTILE ───────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--secondary-bg-color);
}

::-webkit-scrollbar-thumb {
    background     : rgba(38, 45, 61, 0.25);
    border-radius  : 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--main-color);
}