/* ============================================================
   main.css — Styles globaux 2Shop
   Les couleurs viennent de theme.php (CSS Custom Properties)
   ============================================================ */

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

body {
    font-family:      var(--font-body);
    font-size:        var(--font-size-base);
    background-color: var(--color-bg);
    color:            var(--color-text);
    min-height:       100vh;
    position:         relative;
    overflow-x:       hidden;
}

/* Image de fond globale */
body::before {
    content:    '';
    position:   fixed;
    inset:      0;
    background-image:    var(--bg-image);
    background-size:     var(--bg-image-size, cover);
    background-position: center;
    background-repeat:   no-repeat;
    opacity:    var(--bg-image-opacity, 0.15);
    z-index:    -1;
    pointer-events: none;
}

/* ── Navigation ── */
.nav {
    background: var(--color-nav);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
}
.nav__logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    text-decoration: none;
    letter-spacing: -0.5px;
}
.nav__logo span { color: var(--color-secondary); }

/* ── Layout conteneur ── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.section    { padding: 4rem 0; }

/* ── Titres ── */
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; }
h1 { font-size: var(--font-size-h1); font-weight: 800; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 600; }

/* ── Bouton principal ── */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .5rem;
    padding:         .75rem 1.75rem;
    background:      var(--color-primary);
    color:           var(--color-btn-text);
    border:          none;
    border-radius:   var(--border-radius);
    font-family:     var(--font-body);
    font-weight:     600;
    font-size:       1rem;
    cursor:          pointer;
    text-decoration: none;
    transition:      filter .2s, transform .2s;
}
.btn:hover { filter: brightness(1.15); transform: translateY(-2px); }
.btn--secondary {
    background: transparent;
    border: 2px solid var(--color-primary);
    color:  var(--color-primary);
}

/* ── Cartes produit ── */
.product-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow:      hidden;
    box-shadow:    var(--shadow);
    transition:    transform .25s, box-shadow .25s;
    position:      relative;
}
.product-card:hover {
    transform:  translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.product-card__img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
}
.product-card__body  { padding: 1.25rem; }
.product-card__name  { font-weight: 600; margin-bottom: .4rem; }
.product-card__desc  { color: var(--color-text-muted); font-size: .9rem; line-height: 1.5; }
.product-card__price { margin-top: .75rem; font-weight: 700; color: var(--color-accent); font-size: 1.1rem; }
.product-card__badge {
    position:      absolute;
    top:           .75rem;
    right:         .75rem;
    padding:       .25rem .75rem;
    border-radius: 99px;
    font-size:     .75rem;
    font-weight:   700;
    color:         #fff;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Grilles ── */
.grid-1 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.grid-masonry { columns: 3; gap: 1.5rem; }
.grid-masonry .product-card { break-inside: avoid; margin-bottom: 1.5rem; }
.grid-list { display: flex; flex-direction: column; gap: 1rem; }
.grid-list .product-card { display: flex; flex-direction: row; }
.grid-list .product-card__img { width: 180px; flex-shrink: 0; }

@media (max-width: 900px) {
    .grid-3, .grid-4, .grid-masonry { grid-template-columns: repeat(2,1fr); columns: 2; }
}
@media (max-width: 600px) {
    .grid-2, .grid-3, .grid-4, .grid-masonry { grid-template-columns: 1fr; columns: 1; }
    .grid-list .product-card { flex-direction: column; }
    .grid-list .product-card__img { width: 100%; }
}

/* ── Section Hero ── */
.hero {
    min-height: 70vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 5rem 1.5rem;
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
}
.hero__title   { margin-bottom: 1rem; }
.hero__title em { color: var(--color-primary); font-style: normal; }
.hero__sub     { color: var(--color-text-muted); font-size: 1.2rem; margin-bottom: 2rem; max-width: 560px; }
.hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Section Promo ── */
.promo-banner {
    padding: 1rem 2rem;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
}

/* ── Section Discord ── */
.discord-section {
    text-align: center;
    background: var(--color-surface);
    border-radius: var(--border-radius);
    padding: 3rem;
    border: 1px solid var(--color-border);
    max-width: 700px; margin: 0 auto;
}
.discord-icon { font-size: 3rem; margin-bottom: 1rem; }

/* ── Animations keyframes ── */
@keyframes fade-in    { from { opacity:0 }                            to { opacity:1 } }
@keyframes slide-up   { from { opacity:0; transform:translateY(40px) } to { opacity:1; transform:none } }
@keyframes slide-down { from { opacity:0; transform:translateY(-40px)} to { opacity:1; transform:none } }
@keyframes slide-right{ from { opacity:0; transform:translateX(-40px)} to { opacity:1; transform:none } }
@keyframes slide-left { from { opacity:0; transform:translateX(40px) } to { opacity:1; transform:none } }
@keyframes zoom       { from { opacity:0; transform:scale(.85) }       to { opacity:1; transform:none } }
@keyframes flip       { from { opacity:0; transform:rotateY(-90deg) }  to { opacity:1; transform:none } }

/* Classe appliquée par animations.js quand l'élément est visible */
.anim-ready {
    animation-name:            var(--anim-name, fade-in);
    animation-duration:        var(--anim-duration, 0.6s);
    animation-delay:           var(--anim-delay, 0s);
    animation-timing-function: var(--anim-easing, ease-out);
    animation-fill-mode:       both;
}

/* Sections animées au scroll : cachées avant d'être visibles */
[data-section]:not([data-anim-trigger="load"]) { opacity: 0; }
[data-section].anim-ready                       { opacity: 1; }