/* ========================= */
/* STARLIGHT TCG — DESIGN    */
/* SYSTEM v3 — VIVID         */
/* ========================= */

:root {
    /* Backgrounds — dark mais moins plat */
    --bg:         #0e0e14;
    --bg-2:       #13131a;
    --bg-3:       #1a1a24;
    --surface:    #16161f;
    --surface-2:  #1e1e2a;
    --border:     #252535;
    --border-2:   #30304a;

    /* Texte */
    --text:       #f2f0ff;
    --text-2:     #9a96b8;
    --text-muted: #54516e;

    /* Couleurs rareté — directement extraites des cartes */
    --gold:       #e6b800;
    --gold-light: #ffd740;
    --gold-dark:  #a07c00;
    --gold-glow:  rgba(230,184,0,0.18);

    --rare:       #2a7cdb;       /* bleu carte R */
    --rare-light: #5aa3ff;
    --rare-glow:  rgba(42,124,219,0.18);

    --parallel:   #00bcd4;       /* cyan carte P */
    --parallel-light: #4dd9ea;
    --parallel-glow:  rgba(0,188,212,0.18);

    --common:     #6b6b80;       /* gris carte C */
    --common-light: #9a9ab0;

    /* Accent principal = bleu rare (dominant dans les cartes) */
    --accent:        var(--rare);
    --accent-glow:   var(--rare-glow);

    /* Radius */
    --radius-sm:  6px;
    --radius:     10px;
    --radius-lg:  16px;

    /* Typo */
    --font-display: "New Rocker", system-ui;
    --font-body:    "Outfit", sans-serif;

    /* Ombres */
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.5);
    --shadow:     0 8px 32px rgba(0,0,0,0.7);
    --shadow-lg:  0 20px 60px rgba(0,0,0,0.85);

    --transition: 0.22s ease;
}

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

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--text); margin: 0; }

/* ========================= */
/* HEADER                    */
/* ========================= */

header {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(14,14,20,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-sizing: border-box;
    width: 100%;
    height: 68px;
    min-height: 68px;
    /* Ligne colorée en bas — bleu rare */
    border-bottom: 1px solid rgba(42,124,219,0.25);
}

/* Accent line animé */
header::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rare), var(--parallel), var(--gold), transparent);
    opacity: 0.5;
}

.logo {
    width: 110px;
    height: auto;
    flex-shrink: 0;
    display: block;
    filter: invert(1);
    opacity: 0.9;
}

.menu {
    padding: 10px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.menu div {
    width: 26px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: var(--transition);
}

.menu:hover div:nth-child(1) { background: #bf327a; }
.menu:hover div:nth-child(2) { background: #bf327a; }
.menu:hover div:nth-child(3) { background: #bf327a; }

@media (min-width: 600px) {
    .logo { width: 140px; }
    header { padding: 0 32px; height: 76px; min-height: 76px; }
}

/* ========================= */
/* MENU OVERLAY              */
/* ========================= */

.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.menu-overlay.open { display: block; }

.menu-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(8,8,14,0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.menu-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1001;
}

.menu-nav ul { list-style: none; padding: 0; margin: 0; }

.menu-nav ul li {
    margin: 18px;
    opacity: 0;
    transform: translateY(24px);
    animation: fadeInUp 0.5s cubic-bezier(.22,1,.36,1) forwards;
}

.menu-nav ul li:nth-child(1) { animation-delay: 0.05s; }
.menu-nav ul li:nth-child(2) { animation-delay: 0.12s; }
.menu-nav ul li:nth-child(3) { animation-delay: 0.19s; }

@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.menu-nav ul li a {
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--text);
    letter-spacing: 0.04em;
    padding: 8px 0;
    transition: color 0.2s, text-shadow 0.2s;
    display: block;
}

/* Chaque lien menu prend la couleur d'une rareté */
.menu-nav ul li:nth-child(1) a:hover { color: var(--rare-light);     text-shadow: 0 0 40px rgba(42,124,219,0.4); }
.menu-nav ul li:nth-child(2) a:hover { color: var(--parallel-light); text-shadow: 0 0 40px rgba(0,188,212,0.4); }
.menu-nav ul li:nth-child(3) a:hover { color: var(--gold-light);     text-shadow: 0 0 40px rgba(230,184,0,0.4); }

@media (max-width: 600px) {
    .menu-nav ul li a { font-size: 2.2rem; }
    .menu-nav ul li { margin: 12px; }
}

/* ========================= */
/* SHARED TAGS               */
/* ========================= */

.product-tag, .pc-tag, .detail-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--rare);
    color: #fff;
    align-self: flex-start;
}

/* ========================= */
/* CAROUSEL PUB              */
/* ========================= */

.ad-carousel-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px 16px 0;
}

@media (min-width: 600px) { .ad-carousel-wrapper { padding: 24px 28px 0; } }

.ad-carousel {
    width: 100%;
    max-width: 1060px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius);
    border: 1px solid var(--border-2);
    background: var(--bg-2);
    box-shadow: 0 8px 40px rgba(42,124,219,0.12);
}

.ad-track {
    display: flex;
    height: 100%;
    transition: transform 1.8s cubic-bezier(0.76,0,0.24,1);
}

.ad-slide {
    min-width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #fff;
}

.ad-slide img { width: 100%; height: 100%; object-fit: contain; }

/* ========================= */
/* TITLES                    */
/* ========================= */

h2 {
    margin-left: 5%;
    margin-top: 48px;
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 0.02em;
}

@media (max-width: 600px) { h2 { font-size: 1.4rem; margin-top: 32px; } }

/* ========================= */
/* CARD CAROUSEL             */
/* ========================= */

.cards-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    overflow: hidden;
}

.cards-description { display: none; }

.carousel {
    position: relative;
    width: 100%;
    height: 52vw;
    max-height: 480px;
    min-height: 240px;
    perspective: 1200px;
    display: flex;
    justify-content: center;
}

.card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28vw;
    max-width: 260px;
    min-width: 120px;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.32,0.72,0,1), opacity 0.7s ease;
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.card-front, .card-back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-front { display: block; }

.card-back {
    position: absolute;
    top: 0; left: 0;
    transform: rotateY(180deg);
}

.card-front img, .card-back img {
    width: 100%;
    border-radius: 11px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(42,124,219,0.12);
}

.card.flipped .card-inner { transform: rotateY(180deg); }

.left {
    transform: translate(-50%, -50%) translateX(-22vw) scale(0.72) rotateY(35deg);
    opacity: 0.35;
    z-index: 1;
}

.center {
    transform: translate(-50%, -50%) translateX(0) scale(1) rotateY(0deg);
    opacity: 1;
    z-index: 3;
    filter: drop-shadow(0 0 28px rgba(42,124,219,0.25));
}

.right {
    transform: translate(-50%, -50%) translateX(22vw) scale(0.72) rotateY(-35deg);
    opacity: 0.35;
    z-index: 1;
}

.carousel-hint {
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (min-width: 700px) {
    .left  { transform: translate(-50%, -50%) translateX(-160px) scale(0.75) rotateY(35deg); }
    .right { transform: translate(-50%, -50%) translateX(160px)  scale(0.75) rotateY(-35deg); }
    .card  { width: 220px; }
    .carousel { height: 420px; max-height: 420px; }
}

/* ========================= */
/* PREORDER PANEL            */
/* ========================= */

.preorder-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 500;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.preorder-overlay.open { display: block; }

.preorder-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 600;
    background: var(--bg-2);
    border-radius: 20px 20px 0 0;
    padding: 0 20px 32px;
    box-shadow: 0 -12px 60px rgba(0,0,0,0.7);
    border-top: 2px solid var(--rare);
    transform: translateY(100%);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
}
@media (min-width: 600px) { .preorder-panel { padding: 0 28px 36px; border-radius: 24px 24px 0 0; } }
.preorder-panel.open { transform: translateY(0); }

.preorder-handle {
    width: 36px; height: 3px;
    background: var(--border-2); border-radius: 2px;
    margin: 14px auto 0;
}

.preorder-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 0 10px;
}

.preorder-step-label {
    margin: 0 0 4px;
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--rare-light);
}

.preorder-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem; color: var(--text);
}
@media (min-width: 600px) { .preorder-title { font-size: 1.4rem; } }

.preorder-close {
    background: var(--surface-2); border: 1px solid var(--border-2);
    width: 36px; height: 36px; border-radius: 50%;
    font-size: 13px; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2);
    transition: background var(--transition), border-color var(--transition);
}
.preorder-close:hover { background: var(--border-2); border-color: var(--rare); color: var(--rare-light); }

.preorder-progress {
    height: 3px; background: var(--border);
    border-radius: 2px; margin-bottom: 22px; overflow: hidden;
}
.preorder-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--rare), var(--parallel));
    border-radius: 2px; transition: width 0.4s ease; width: 25%;
}

.preorder-step { display: none; }
.preorder-step.active { display: block; }

.preorder-product-recap {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 20px; padding: 14px 16px;
    background: var(--surface); border-radius: var(--radius-sm);
    border: 1px solid rgba(42,124,219,0.2);
}
.preorder-product-name { font-weight: 600; font-size: 0.9rem; color: var(--text); min-width: 0; flex: 1; }
.preorder-unit-price   { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }

.qty-selector {
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; width: fit-content;
    border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden;
    background: var(--surface);
}
.qty-btn {
    width: 60px; height: 60px; background: transparent; border: none;
    font-size: 1.6rem; cursor: pointer; font-family: var(--font-body); color: var(--text);
    transition: background var(--transition), color var(--transition);
}
.qty-btn:hover { background: rgba(42,124,219,0.1); color: var(--rare-light); }
.qty-btn:active { background: var(--border); }
.qty-value {
    width: 68px; text-align: center; font-size: 1.3rem;
    font-weight: 700; color: var(--text);
    border-left: 1px solid var(--border-2); border-right: 1px solid var(--border-2);
    line-height: 60px;
}

.preorder-summary-lines { display: flex; flex-direction: column; }
.summary-line {
    display: flex; justify-content: space-between;
    font-size: 0.9rem; color: var(--text-2);
    padding: 13px 0; border-bottom: 1px solid var(--border);
}
.preorder-summary-total {
    display: flex; justify-content: space-between;
    font-weight: 800; font-size: 1.05rem; color: var(--text);
    padding: 16px 0 10px; border-top: 2px solid var(--rare); margin-top: 4px;
}

.preorder-form { display: flex; flex-direction: column; gap: 10px; }
.form-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 480px) { .form-row { flex-direction: row; } }

.form-input {
    flex: 1; padding: 14px;
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 1rem;
    outline: none; transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box; min-width: 0;
    background: var(--surface); color: var(--text); -webkit-appearance: none;
}
.form-input.full { width: 100%; }
.form-input:focus { border-color: var(--rare); box-shadow: 0 0 0 3px rgba(42,124,219,0.12); }
.form-input::placeholder { color: var(--text-muted); }

.payment-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.payment-option {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; border: 1px solid var(--border-2);
    border-radius: var(--radius-sm); cursor: pointer;
    font-size: 0.92rem; font-weight: 600; color: var(--text);
    transition: border-color var(--transition), background var(--transition);
    background: var(--surface);
}
.payment-option:has(input:checked) { border-color: var(--rare); background: rgba(42,124,219,0.08); }
.payment-option input { display: none; }
.payment-icon { font-size: 1.4rem; flex-shrink: 0; }
.payment-label { flex: 1; }
.payment-label small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--text-muted); margin-top: 2px; }

.preorder-note { font-size: 0.75rem; color: var(--text-muted); line-height: 1.6; margin: 10px 0 0; }

.preorder-footer { display: flex; gap: 10px; margin-top: 24px; }

.preorder-btn-back {
    padding: 16px 18px; background: transparent;
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 0.88rem;
    font-weight: 600; cursor: pointer; color: var(--text-muted);
    transition: border-color var(--transition), color var(--transition); white-space: nowrap;
}
.preorder-btn-back:hover { border-color: var(--text-2); color: var(--text); }

.preorder-btn-next {
    flex: 1; padding: 16px 14px;
    background: var(--rare); color: #fff;
    border: 1px solid var(--rare); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 0.95rem;
    font-weight: 800; letter-spacing: 0.04em; cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preorder-btn-next:hover { background: var(--rare-light); border-color: var(--rare-light); color: #0e0e14; }
.preorder-btn-next.success { background: #2a9d5c; border-color: #2a9d5c; color: #fff; }

/* ========================= */
/* FOOTER                    */
/* ========================= */

.site-footer {
    border-top: 1px solid var(--border-2);
    padding: 40px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 60px;
    /* Subtle gradient top border coloré */
    position: relative;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: -1px; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, var(--rare), var(--parallel), var(--gold));
    opacity: 0.5;
    border-radius: 1px;
}

.footer-logo { width: 90px; filter: invert(1); opacity: 0.25; }

.footer-social { display: flex; gap: 12px; }
.footer-social a {
    width: 36px; height: 36px;
    border: 1px solid var(--border-2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); text-decoration: none;
    font-size: 0.75rem; font-weight: 700;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.footer-social a:nth-child(1):hover { border-color: var(--parallel); color: var(--parallel); background: rgba(0,188,212,0.08); }
.footer-social a:nth-child(2):hover { border-color: var(--rare-light); color: var(--rare-light); background: rgba(42,124,219,0.08); }

.footer-links {
    display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
}
.footer-links a {
    font-size: 0.72rem; color: var(--text-muted); text-decoration: none;
    letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
    transition: color var(--transition);
}
.footer-links a:hover { color: var(--rare-light); }

.footer-copy { font-size: 0.68rem; color: var(--text-muted); text-align: center; line-height: 1.7; }

/* ========================= */
/* STARS BACKGROUND          */
/* ========================= */

.stars-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.star {
    position: absolute;
    opacity: 0;
    animation: floatStar 7s ease-in-out infinite;
    font-size: 1rem;
    user-select: none;
}

/* Chaque étoile prend la couleur d'une rareté en cyclant */
.star:nth-child(1),  .star:nth-child(5),  .star:nth-child(9)  { color: var(--rare); }
.star:nth-child(2),  .star:nth-child(6),  .star:nth-child(10) { color: var(--parallel); }
.star:nth-child(3),  .star:nth-child(7),  .star:nth-child(11) { color: var(--gold); }
.star:nth-child(4),  .star:nth-child(8),  .star:nth-child(12) { color: var(--common-light); }

/* 12 étoiles, positions et timings variés */
.star:nth-child(1)  { left: 4%;   top: 8%;  animation-delay: 0s;    font-size: 1.3rem; animation-duration: 8s;  }
.star:nth-child(2)  { left: 16%;  top: 72%; animation-delay: 1.2s;  font-size: 0.65rem; animation-duration: 6s; }
.star:nth-child(3)  { left: 29%;  top: 18%; animation-delay: 2.1s;  font-size: 0.85rem; animation-duration: 9s; }
.star:nth-child(4)  { left: 44%;  top: 83%; animation-delay: 0.5s;  font-size: 1.1rem;  animation-duration: 7s; }
.star:nth-child(5)  { left: 58%;  top: 6%;  animation-delay: 3.0s;  font-size: 0.6rem;  animation-duration: 6.5s;}
.star:nth-child(6)  { left: 71%;  top: 60%; animation-delay: 0.8s;  font-size: 1.2rem;  animation-duration: 8.5s;}
.star:nth-child(7)  { left: 85%;  top: 22%; animation-delay: 1.7s;  font-size: 0.75rem; animation-duration: 7.5s;}
.star:nth-child(8)  { left: 93%;  top: 78%; animation-delay: 2.6s;  font-size: 0.9rem;  animation-duration: 6s; }
.star:nth-child(9)  { left: 9%;   top: 45%; animation-delay: 3.4s;  font-size: 1.4rem;  animation-duration: 9.5s;}
.star:nth-child(10) { left: 38%;  top: 52%; animation-delay: 0.3s;  font-size: 0.7rem;  animation-duration: 7s; }
.star:nth-child(11) { left: 62%;  top: 35%; animation-delay: 1.9s;  font-size: 0.55rem; animation-duration: 8s; }
.star:nth-child(12) { left: 78%;  top: 90%; animation-delay: 4.1s;  font-size: 1.0rem;  animation-duration: 6.5s;}

@keyframes floatStar {
    0%   { opacity: 0;    transform: translateY(0) rotate(0deg); }
    20%  { opacity: 0.28; }
    50%  { opacity: 0.14; transform: translateY(-20px) rotate(22deg); }
    80%  { opacity: 0.28; }
    100% { opacity: 0;    transform: translateY(0) rotate(0deg); }
}