/* ==========================================================================
   Theme COMMODORE 64 - Informat Systems Shop
   Skin uniquement (palette + police + boot header + faux CRT).
   Le layout HTML reste inchange - overrides ciblees via body[data-theme="c64"].
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body[data-theme="c64"] {
    /* Palette C64 VIC-II authentique */
    --c64-blue: #4040E0;          /* fond ecran */
    --c64-blue-dark: #2020A0;     /* cartes / conteneurs */
    --c64-blue-light: #7878C8;    /* border frame ecran */
    --c64-text: #A5A5FF;          /* texte prompt light blue */
    --c64-white: #FFFFFF;
    --c64-cyan: #67B6BD;
    --c64-yellow: #DFDF6C;
    --c64-red: #A85436;
    --c64-green: #67B54F;

    background: var(--c64-blue) !important;
    color: var(--c64-text) !important;
    font-family: 'VT323', 'Courier New', monospace !important;
    font-size: 18px;
    letter-spacing: 0.5px;
    /* frame CRT bleu clair */
    padding: 12px !important;
    box-sizing: border-box;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Frame ecran C64 (border epaisse light-blue) */
body[data-theme="c64"]::before {
    content: '';
    position: fixed;
    inset: 0;
    border: 14px solid var(--c64-blue-light);
    pointer-events: none;
    z-index: 9998;
    box-sizing: border-box;
}

/* Scanlines CRT subtiles */
body[data-theme="c64"]::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.06) 0px,
        rgba(0,0,0,0.06) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 9997;
    mix-blend-mode: multiply;
}

/* Boot header C64 fake */
body[data-theme="c64"] .c64-boot {
    background: var(--c64-blue);
    color: var(--c64-text);
    padding: 20px 18px 22px;
    text-align: center;
    font-family: 'VT323', monospace;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: 1.5px;
    border-bottom: 2px dashed var(--c64-blue-light);
    margin-bottom: 12px;
}
body[data-theme="c64"] .c64-boot .c64-title {
    font-weight: 700;
    letter-spacing: 3px;
}
body[data-theme="c64"] .c64-boot .c64-ready {
    text-align: left;
    max-width: 480px;
    margin: 8px auto 0;
    font-size: 18px;
}
body[data-theme="c64"] .c64-cursor {
    display: inline-block;
    width: 10px;
    height: 18px;
    background: var(--c64-text);
    vertical-align: -3px;
    animation: c64blink 0.8s steps(2) infinite;
}
@keyframes c64blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* ==== Mega menu top bar / catbar ==== */
body[data-theme="c64"] .mm-wrap {
    background: var(--c64-blue-dark) !important;
    border-bottom: 2px solid var(--c64-blue-light) !important;
    box-shadow: none !important;
}
body[data-theme="c64"] .mm-top,
body[data-theme="c64"] .mm-catbar {
    background: var(--c64-blue-dark) !important;
    color: var(--c64-text) !important;
    border: none !important;
}
body[data-theme="c64"] .mm-logo,
body[data-theme="c64"] .mm-logo-text,
body[data-theme="c64"] .mm-topnav a,
body[data-theme="c64"] .mm-cat-trigger,
body[data-theme="c64"] .mm-search input {
    color: var(--c64-text) !important;
    font-family: 'VT323', monospace !important;
    font-size: 18px !important;
    text-transform: uppercase;
}
body[data-theme="c64"] .mm-logo img { filter: brightness(1.15) hue-rotate(200deg); }
body[data-theme="c64"] .mm-search {
    background: var(--c64-blue) !important;
    border: 2px solid var(--c64-blue-light) !important;
    border-radius: 0 !important;
}
body[data-theme="c64"] .mm-search input {
    background: transparent !important;
    border: none !important;
}
body[data-theme="c64"] .mm-search input::placeholder { color: var(--c64-text); opacity: 0.7; }
body[data-theme="c64"] .mm-cta,
body[data-theme="c64"] .mm-cart {
    background: var(--c64-yellow) !important;
    color: var(--c64-blue-dark) !important;
    border: 2px solid var(--c64-white) !important;
    border-radius: 0 !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    font-weight: 700;
}

/* ==== Cartes produits shop (universelles) ==== */
body[data-theme="c64"] .product-card,
body[data-theme="c64"] .card,
body[data-theme="c64"] .prod-card {
    background: var(--c64-blue-dark) !important;
    border: 2px solid var(--c64-blue-light) !important;
    border-radius: 0 !important;
    color: var(--c64-text) !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35) !important;
    transition: none !important;
}
body[data-theme="c64"] .product-card:hover,
body[data-theme="c64"] .card:hover,
body[data-theme="c64"] .prod-card:hover {
    transform: none !important;
    background: var(--c64-blue) !important;
    border-color: var(--c64-yellow) !important;
}
body[data-theme="c64"] .product-card h3,
body[data-theme="c64"] .product-card .name,
body[data-theme="c64"] .product-card .title,
body[data-theme="c64"] .card h2,
body[data-theme="c64"] .card h3 {
    color: var(--c64-white) !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}
body[data-theme="c64"] .price,
body[data-theme="c64"] .product-price {
    color: var(--c64-yellow) !important;
    font-family: 'VT323', monospace !important;
    font-weight: 700;
    font-size: 22px;
}
body[data-theme="c64"] .brand,
body[data-theme="c64"] .product-brand { color: var(--c64-cyan) !important; }

/* ==== Boutons ==== */
body[data-theme="c64"] button,
body[data-theme="c64"] .btn,
body[data-theme="c64"] .btn-primary,
body[data-theme="c64"] .btn-secondary,
body[data-theme="c64"] .btn-cta {
    background: var(--c64-yellow) !important;
    color: var(--c64-blue-dark) !important;
    border: 2px solid var(--c64-white) !important;
    border-radius: 0 !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.35) !important;
    transition: none !important;
}
body[data-theme="c64"] button:hover,
body[data-theme="c64"] .btn:hover {
    background: var(--c64-white) !important;
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.35) !important;
}

/* ==== Liens et texte generaux ==== */
body[data-theme="c64"] a { color: var(--c64-cyan); text-decoration: underline; }
body[data-theme="c64"] h1, body[data-theme="c64"] h2, body[data-theme="c64"] h3 {
    color: var(--c64-white);
    font-family: 'VT323', monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ==========================================================================
   PANIER + CHECKOUT (headers sticky, cartes, formulaires, resume, boutons)
   ========================================================================== */

/* Fond page (override background gray des 2 pages) */
body[data-theme="c64"] { background: var(--c64-blue) !important; }

/* Header sticky bleu des 2 pages -> header C64 noir sur bleu */
body[data-theme="c64"] .header {
    background: var(--c64-blue-dark) !important;
    border-bottom: 2px solid var(--c64-blue-light) !important;
    box-shadow: none !important;
    color: var(--c64-text) !important;
}
body[data-theme="c64"] .header .logo,
body[data-theme="c64"] .header .logo-text,
body[data-theme="c64"] .header .logo-subtitle,
body[data-theme="c64"] .header .back-link {
    color: var(--c64-text) !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}
body[data-theme="c64"] .header .logo-text { color: var(--c64-white) !important; font-size: 20px !important; }

/* Titre page */
body[data-theme="c64"] .page-title {
    color: var(--c64-white) !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 26px !important;
}
body[data-theme="c64"] .page-title small { color: var(--c64-cyan) !important; }

/* Blocs blancs -> conteneurs bleu fonce style C64 */
body[data-theme="c64"] .cart-items,
body[data-theme="c64"] .cart-summary,
body[data-theme="c64"] .cart-empty,
body[data-theme="c64"] .card {
    background: var(--c64-blue-dark) !important;
    border: 2px solid var(--c64-blue-light) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35) !important;
    color: var(--c64-text) !important;
}
body[data-theme="c64"] .cart-summary h2,
body[data-theme="c64"] .card h2,
body[data-theme="c64"] .card h3 {
    color: var(--c64-white) !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 2px dashed var(--c64-blue-light) !important;
}

/* Lignes panier */
body[data-theme="c64"] .cart-item {
    border-bottom: 1px dashed var(--c64-blue-light) !important;
    color: var(--c64-text) !important;
}
body[data-theme="c64"] .item-image {
    background: var(--c64-blue) !important;
    border: 1px solid var(--c64-blue-light) !important;
    border-radius: 0 !important;
}
body[data-theme="c64"] .item-info h3,
body[data-theme="c64"] .item-info .name {
    color: var(--c64-white) !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 18px !important;
}
body[data-theme="c64"] .item-meta { color: var(--c64-cyan) !important; }
body[data-theme="c64"] .item-unit-price { color: var(--c64-text) !important; }
body[data-theme="c64"] .item-total {
    color: var(--c64-yellow) !important;
    font-family: 'VT323', monospace !important;
    font-size: 22px !important;
    font-weight: 700;
}

/* Controles quantite (- N +) */
body[data-theme="c64"] .qty-controls {
    border: 2px solid var(--c64-blue-light) !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: var(--c64-blue) !important;
}
body[data-theme="c64"] .qty-btn {
    background: var(--c64-yellow) !important;
    color: var(--c64-blue-dark) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'VT323', monospace !important;
    font-size: 20px !important;
    font-weight: 700;
}
body[data-theme="c64"] .qty-btn:hover { background: var(--c64-white) !important; }
body[data-theme="c64"] .qty-value {
    background: var(--c64-blue) !important;
    color: var(--c64-white) !important;
    border-left: 2px solid var(--c64-blue-light) !important;
    border-right: 2px solid var(--c64-blue-light) !important;
    border-top: none !important;
    border-bottom: none !important;
    font-family: 'VT323', monospace !important;
    font-size: 18px !important;
}
body[data-theme="c64"] .item-remove {
    color: var(--c64-red) !important;
    font-family: 'VT323', monospace !important;
}

/* Resume (Sous-total / Frais / Remise / TOTAL) */
body[data-theme="c64"] .summary-row {
    color: var(--c64-text) !important;
    font-family: 'VT323', monospace !important;
    font-size: 17px !important;
    border-bottom: 1px dashed rgba(120,120,200,0.35);
    padding: 0.5rem 0 !important;
}
body[data-theme="c64"] .summary-row.total {
    color: var(--c64-yellow) !important;
    font-size: 22px !important;
    border-top: 2px solid var(--c64-blue-light) !important;
    border-bottom: none !important;
}
body[data-theme="c64"] .summary-info {
    background: var(--c64-blue) !important;
    color: var(--c64-yellow) !important;
    border: 2px solid var(--c64-yellow) !important;
    border-radius: 0 !important;
    font-family: 'VT323', monospace !important;
    font-size: 16px !important;
}

/* Trust (garanties) */
body[data-theme="c64"] .trust {
    background: var(--c64-blue) !important;
    color: var(--c64-cyan) !important;
    border: 1px solid var(--c64-blue-light) !important;
    border-radius: 0 !important;
    font-family: 'VT323', monospace !important;
}
body[data-theme="c64"] .trust div::before { color: var(--c64-green) !important; }

/* Bloc promo + shipping */
body[data-theme="c64"] .promo-block,
body[data-theme="c64"] .shipping-block { border-top: 1px dashed var(--c64-blue-light) !important; }
body[data-theme="c64"] .promo-block label,
body[data-theme="c64"] .shipping-block label {
    color: var(--c64-cyan) !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    font-size: 15px !important;
}

/* Inputs et textareas globaux (panier + checkout) */
body[data-theme="c64"] input[type="text"],
body[data-theme="c64"] input[type="email"],
body[data-theme="c64"] input[type="tel"],
body[data-theme="c64"] input[type="number"],
body[data-theme="c64"] textarea,
body[data-theme="c64"] select {
    background: var(--c64-blue) !important;
    color: var(--c64-white) !important;
    border: 2px solid var(--c64-blue-light) !important;
    border-radius: 0 !important;
    font-family: 'VT323', monospace !important;
    font-size: 18px !important;
    padding: 8px 10px !important;
    caret-color: var(--c64-yellow);
}
body[data-theme="c64"] input:focus,
body[data-theme="c64"] textarea:focus,
body[data-theme="c64"] select:focus {
    outline: 2px solid var(--c64-yellow) !important;
    outline-offset: 0 !important;
    border-color: var(--c64-yellow) !important;
}
body[data-theme="c64"] label {
    color: var(--c64-cyan) !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Cartes checkout */
body[data-theme="c64"] .form-row,
body[data-theme="c64"] .form-field { color: var(--c64-text) !important; }

/* Payment options (radio cards CB / Alma / Devis) */
body[data-theme="c64"] .payment-option {
    background: var(--c64-blue) !important;
    border: 2px solid var(--c64-blue-light) !important;
    border-radius: 0 !important;
    color: var(--c64-text) !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    font-size: 16px !important;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.35) !important;
}
body[data-theme="c64"] .payment-option:has(input:checked),
body[data-theme="c64"] .payment-option.selected {
    background: var(--c64-blue-dark) !important;
    border-color: var(--c64-yellow) !important;
}
body[data-theme="c64"] .payment-option strong,
body[data-theme="c64"] .payment-option b { color: var(--c64-white) !important; }

/* Alma plan pills 2x/3x/4x/10x */
body[data-theme="c64"] .alma-plan-pill {
    background: var(--c64-blue-dark) !important;
    color: var(--c64-cyan) !important;
    border: 2px solid var(--c64-blue-light) !important;
    border-radius: 0 !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
}
body[data-theme="c64"] .alma-plan-pill.active,
body[data-theme="c64"] .alma-plan-pill[aria-pressed="true"] {
    background: var(--c64-yellow) !important;
    color: var(--c64-blue-dark) !important;
    border-color: var(--c64-white) !important;
}

/* Success card (apres devis envoye) */
body[data-theme="c64"] .success-card {
    background: var(--c64-blue-dark) !important;
    border: 2px solid var(--c64-green) !important;
    color: var(--c64-text) !important;
}
body[data-theme="c64"] .success-icon { filter: hue-rotate(220deg) saturate(1.5); }
body[data-theme="c64"] .ref-box {
    background: var(--c64-blue) !important;
    color: var(--c64-yellow) !important;
    border: 2px solid var(--c64-yellow) !important;
    border-radius: 0 !important;
    font-family: 'VT323', monospace !important;
    letter-spacing: 3px !important;
}

/* Erreurs */
body[data-theme="c64"] .errors {
    background: var(--c64-blue) !important;
    color: var(--c64-red) !important;
    border: 2px solid var(--c64-red) !important;
    border-radius: 0 !important;
    font-family: 'VT323', monospace !important;
}

/* Etat panier vide */
body[data-theme="c64"] .cart-empty h2 { color: var(--c64-white) !important; }
body[data-theme="c64"] .cart-empty p { color: var(--c64-cyan) !important; }

/* Toggle button (dans top bar) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: inherit;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}
.theme-toggle:hover { background: rgba(255,255,255,0.08); }
body[data-theme="c64"] .theme-toggle {
    background: var(--c64-blue) !important;
    color: var(--c64-text) !important;
    border: 2px solid var(--c64-blue-light) !important;
    border-radius: 0 !important;
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
}