/* =========================================================
   Truegiftcorp — THÈME TERMINAL ROUGE (Halloween)
   ---------------------------------------------------------
   Couche de thème posée PAR-DESSUS style.css et les styles
   propres à chaque page. Chargée par term.php (inclus dans
   txhead.php + gate.php), active via la classe html.tgc-term.

   Toutes les règles sont en !important : la feuille est chargée
   AVANT les <style> internes des pages et doit pourtant gagner.
   Pour retirer le thème : vider term.php (rien d'autre à toucher).
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");

:root {
    --t-bg: #050003;
    --t-panel: rgba(12, 1, 5, 0.88);
    --t-red: #ff2a3d;
    --t-mid: #c41a2c;
    --t-dim: #8a2a35;
    --t-line: #5a0a12;
    --t-glow: 0 0 6px rgba(255, 0, 40, 0.7);
    --t-mono: "Share Tech Mono", "Consolas", "Courier New", monospace;
}

/* ---------- base : fond noir, texte rouge, police terminal ---------- */
html.tgc-term,
html.tgc-term body,
html.tgc-term .paradise-bg,
html.tgc-term body.paradise-bg {
    background: var(--t-bg) !important;
    color: var(--t-red) !important;
}

html.tgc-term body,
html.tgc-term body *:not(svg *) {
    font-family: var(--t-mono) !important;
    color: var(--t-red) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html.tgc-term ::selection { background: var(--t-red); color: #000; }

/* les ombres sont retirées partout : on garde un repère de focus clavier visible */
html.tgc-term body :focus-visible { outline: 1px solid var(--t-red) !important; outline-offset: 2px !important; }

html.tgc-term { scrollbar-color: var(--t-line) var(--t-bg); }
html.tgc-term ::-webkit-scrollbar { width: 10px; background: var(--t-bg); }
html.tgc-term ::-webkit-scrollbar-thumb { background: var(--t-line); }

/* la lumière tournante et les dégradés "paradis" disparaissent */
html.tgc-term .bg-light { display: none !important; }

/* ---------- textes secondaires : rouge sombre ---------- */
html.tgc-term body .k,
html.tgc-term body .lbl,
html.tgc-term body .meta,
html.tgc-term body .note,
html.tgc-term body .cnote,
html.tgc-term body .shop-sub,
html.tgc-term body .choose-sub,
html.tgc-term body .gate-sub,
html.tgc-term body .crew-role,
html.tgc-term body .pp-note,
html.tgc-term body .terms-meta,
html.tgc-term body .terms-ack,
html.tgc-term body .note-hint,
html.tgc-term body .sum-items .it,
html.tgc-term body .ok-items .it,
html.tgc-term body .ok-wrap .sub,
html.tgc-term body .frow label,
html.tgc-term body .site-footer,
html.tgc-term body .site-footer *,
html.tgc-term body .world-card .hint,
html.tgc-term body .back-links,
html.tgc-term body .lnk {
    color: var(--t-dim) !important;
}

/* ---------- liens ---------- */
html.tgc-term body a:hover,
html.tgc-term body .site-footer a:hover,
html.tgc-term body .lnk:hover,
html.tgc-term body .back-links a:hover {
    color: var(--t-red) !important;
    text-shadow: var(--t-glow) !important;
}

/* ---------- titres : invite de commande + curseur clignotant ---------- */
html.tgc-term body .shop-title,
html.tgc-term body .cart-title,
html.tgc-term body .co-title,
html.tgc-term body .choose-title,
html.tgc-term body .ok-wrap h1,
html.tgc-term body .rt-wrap h1,
html.tgc-term body .terms-card h1,
html.tgc-term body .model-nametop h3 {
    color: var(--t-red) !important;
    text-shadow: var(--t-glow) !important;
    font-weight: normal !important;
}
html.tgc-term body .shop-title::before,
html.tgc-term body .cart-title::before,
html.tgc-term body .co-title::before,
html.tgc-term body .choose-title::before,
html.tgc-term body .ok-wrap h1::before,
html.tgc-term body .rt-wrap h1::before,
html.tgc-term body .terms-card h1::before { content: "> "; }
html.tgc-term body .shop-title::after,
html.tgc-term body .cart-title::after,
html.tgc-term body .co-title::after,
html.tgc-term body .choose-title::after,
html.tgc-term body .ok-wrap h1::after,
html.tgc-term body .rt-wrap h1::after,
html.tgc-term body .terms-card h1::after {
    content: "\2588";
    margin-left: 4px;
    font-size: .8em;
    animation: tgcTermBlink 1s steps(1) infinite !important;
}
@keyframes tgcTermBlink { 50% { opacity: 0; } }

/* sous-titres d'encart */
html.tgc-term body .terms-card h2,
html.tgc-term body .co-form h2,
html.tgc-term body .co-summary h2 { color: var(--t-mid) !important; }
html.tgc-term body .terms-card h2::before,
html.tgc-term body .co-form h2::before,
html.tgc-term body .co-summary h2::before { content: "// "; color: var(--t-dim) !important; }

/* ---------- navigation ---------- */
html.tgc-term body .site-nav {
    background: rgba(5, 0, 3, 0.94) !important;
    border-bottom: 1px solid var(--t-line) !important;
}
/* le logo du header garde sa police d'origine (Reality Hyper), en rouge */
html.tgc-term body .site-nav .logo {
    font-family: "Reality Hyper", "Trebuchet MS", Verdana, Geneva, sans-serif !important;
    text-shadow: var(--t-glow) !important;
}

html.tgc-term body .site-menu {
    background: transparent !important;
    border-bottom: 1px dashed var(--t-line) !important;
    gap: 2px !important;
}
html.tgc-term body .site-menu a {
    background: transparent !important;
    border: 0 !important;
    color: var(--t-dim) !important;
    transform: none !important;
}
html.tgc-term body .site-menu a::before { content: "["; margin-right: 2px; }
html.tgc-term body .site-menu a::after  { content: "]"; margin-left: 2px; }
html.tgc-term body .site-menu a:hover { color: var(--t-red) !important; text-shadow: var(--t-glow) !important; }

/* ---------- encarts (ex-verre dépoli) ---------- */
html.tgc-term body .glass {
    background: var(--t-panel) !important;
    border: 1px solid var(--t-line) !important;
}
html.tgc-term body .glass h1,
html.tgc-term body .glass h3 {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px dashed var(--t-line) !important;
    color: var(--t-red) !important;
    text-shadow: var(--t-glow) !important;
}
html.tgc-term body .model-nametop h3,
html.tgc-term body .model-box h3 { border-bottom: 0 !important; }
html.tgc-term body .row,
html.tgc-term body .t-row,
html.tgc-term body .sum-line,
html.tgc-term body .ok-line,
html.tgc-term body .sum-items,
html.tgc-term body .ok-items { border-color: var(--t-line) !important; }

/* ---------- boutons : [ texte ] rouge, inversés au survol ---------- */
html.tgc-term body .btn,
html.tgc-term body .more,
html.tgc-term body .pay-btn,
html.tgc-term body .add-btn,
html.tgc-term body .crew-ig,
html.tgc-term body .rt-btn,
html.tgc-term body .ok-btn,
html.tgc-term body .update-btn,
html.tgc-term body .world-card,
html.tgc-term body .world-toggle,
html.tgc-term body .qty button,
html.tgc-term body .sizes label {
    background: transparent !important;
    border: 1px solid var(--t-red) !important;
    color: var(--t-red) !important;
    transform: none !important;
    transition: background .12s, color .12s !important;
}
html.tgc-term body .btn::before,
html.tgc-term body .more::before,
html.tgc-term body .pay-btn::before,
html.tgc-term body .crew-ig::before,
html.tgc-term body .rt-btn::before,
html.tgc-term body .ok-btn::before,
html.tgc-term body .update-btn::before { content: "[ "; }
html.tgc-term body .btn::after,
html.tgc-term body .more::after,
html.tgc-term body .pay-btn::after,
html.tgc-term body .crew-ig::after,
html.tgc-term body .rt-btn::after,
html.tgc-term body .ok-btn::after,
html.tgc-term body .update-btn::after { content: " ]"; }

html.tgc-term body .btn:hover,
html.tgc-term body .more:hover,
html.tgc-term body .pay-btn:hover,
html.tgc-term body .add-btn:hover,
html.tgc-term body .crew-ig:hover,
html.tgc-term body .rt-btn:hover,
html.tgc-term body .ok-btn:hover,
html.tgc-term body .update-btn:hover,
html.tgc-term body .world-card:hover,
html.tgc-term body .world-toggle:hover,
html.tgc-term body .qty button:hover,
html.tgc-term body .sizes label:hover,
html.tgc-term body .sizes label.sel {
    background: var(--t-red) !important;
    color: #000 !important;
}
html.tgc-term body .add-btn:hover *,
html.tgc-term body .sizes label:hover *,
html.tgc-term body .sizes label.sel *,
html.tgc-term body .world-card:hover * { color: #000 !important; }

/* boutons secondaires (vider le panier, retour) : rouge sombre */
html.tgc-term body .clear-btn,
html.tgc-term body .rt-btn.ghost { border-color: var(--t-dim) !important; color: var(--t-dim) !important; }
html.tgc-term body .clear-btn:hover,
html.tgc-term body .rt-btn.ghost:hover { background: var(--t-dim) !important; color: #000 !important; }

html.tgc-term body button:disabled { opacity: .4 !important; cursor: not-allowed !important; }

/* ---------- champs de formulaire ---------- */
html.tgc-term body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.tgc-term body select,
html.tgc-term body textarea {
    background: #0a0104 !important;
    border: 1px solid var(--t-line) !important;
    color: var(--t-red) !important;
    caret-color: var(--t-red) !important;
    outline: none !important;
}
html.tgc-term body input:focus,
html.tgc-term body select:focus,
html.tgc-term body textarea:focus { border-color: var(--t-red) !important; }
html.tgc-term body input::placeholder,
html.tgc-term body textarea::placeholder { color: var(--t-dim) !important; opacity: 1 !important; }
html.tgc-term body option { background: var(--t-bg) !important; color: var(--t-red) !important; }
html.tgc-term body input[type="checkbox"],
html.tgc-term body input[type="radio"] { accent-color: var(--t-red) !important; }
html.tgc-term body .note-hint.ok { color: var(--t-red) !important; }

/* ---------- messages d'erreur ---------- */
html.tgc-term body .err,
html.tgc-term body .gate-err,
html.tgc-term body .prod-notice {
    background: rgba(255, 0, 40, 0.08) !important;
    border: 1px solid var(--t-red) !important;
    color: var(--t-red) !important;
}
html.tgc-term body .err::before,
html.tgc-term body .gate-err::before { content: "ERR: "; }

/* ---------- images : cadre rouge, couleurs d'origine conservées ---------- */
html.tgc-term body .ph,
html.tgc-term body .model-photo,
html.tgc-term body .cart-line .thumb {
    border: 1px solid var(--t-line) !important;
    background: #000 !important;
}
html.tgc-term body .ph-fallback { background: #0a0104 !important; }

/* shop + fiche produit : lueur rouge rayonnante qui tourne lentement DANS le fond du cadre photo
   (les images produit sont des PNG transparents -> la lueur se voit derrière le t-shirt) */
html.tgc-term body .product > .ph,
html.tgc-term body .product-view > .ph {
    isolation: isolate;                 /* la lueur (z-index -1) reste dans le cadre, sous les images */
}
html.tgc-term body .product > .ph::before,
html.tgc-term body .product > .ph::after,
html.tgc-term body .product-view > .ph::before,
html.tgc-term body .product-view > .ph::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;                        /* plus grand que le cadre : les rayons tournent sans coin vide */
    height: 150%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}
/* rayons : 4 épais + 4 fins, en rotation */
html.tgc-term body .product > .ph::before,
html.tgc-term body .product-view > .ph::before {
    background: conic-gradient(from 0deg,
        transparent 0deg, rgba(255, 30, 60, .55) 10deg, transparent 22deg,
        transparent 40deg, rgba(255, 30, 60, .25) 45deg, transparent 50deg,
        transparent 90deg, rgba(255, 30, 60, .55) 100deg, transparent 112deg,
        transparent 130deg, rgba(255, 30, 60, .25) 135deg, transparent 140deg,
        transparent 180deg, rgba(255, 30, 60, .55) 190deg, transparent 202deg,
        transparent 220deg, rgba(255, 30, 60, .25) 225deg, transparent 230deg,
        transparent 270deg, rgba(255, 30, 60, .55) 280deg, transparent 292deg,
        transparent 310deg, rgba(255, 30, 60, .25) 315deg, transparent 320deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, #000 20%, rgba(0, 0, 0, .5) 40%, transparent 70%);
            mask: radial-gradient(circle, #000 20%, rgba(0, 0, 0, .5) 40%, transparent 70%);
    filter: blur(6px);
    animation: tgcGlowSpin 30s linear infinite !important;
}
/* halo central qui pulse doucement */
html.tgc-term body .product > .ph::after,
html.tgc-term body .product-view > .ph::after {
    background: radial-gradient(circle, rgba(255, 20, 50, .55) 0%, rgba(180, 0, 25, .25) 25%, transparent 55%);
    animation: tgcGlowPulse 4s ease-in-out infinite !important;
}
@keyframes tgcGlowSpin  { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes tgcGlowPulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* diaporama : aucune animation, l'image change d'un coup (ni fondu ni flash lumineux) */
html.tgc-term body .ph .slide,
html.tgc-term body .ph .slide.on { transition: none !important; }
html.tgc-term body .ph .slide.bright { animation: none !important; }
html.tgc-term body .flag-badge { border-color: var(--t-red) !important; }
html.tgc-term body .suit-badge { color: var(--t-red) !important; text-shadow: var(--t-glow) !important; }

/* ---------- chargement : barre de carrés rouges qui se remplit ---------- */
html.tgc-term body .tgc-spinner,
html.tgc-term body .w-loader::before {
    width: 116px !important;
    height: 8px !important;
    border: 0 !important;
    background:
        repeating-linear-gradient(90deg, var(--t-red) 0 8px, transparent 8px 12px) left center / 0 100% no-repeat,
        repeating-linear-gradient(90deg, var(--t-line) 0 8px, transparent 8px 12px) !important;
    animation: tgcTermBar 1.6s steps(11, jump-none) infinite !important;
}
/* 0 -> 120px par pas de 12px : un carré de plus à chaque pas */
@keyframes tgcTermBar {
    from { background-size: 0 100%, auto; }
    to   { background-size: 120px 100%, auto; }
}
html.tgc-term body .w-loader { color: var(--t-red) !important; }
html.tgc-term body #pp-loading { background: rgba(5, 0, 3, 0.94) !important; }

/* ---------- page de choix du monde ---------- */
html.tgc-term body .worlds { background: var(--t-panel) !important; border: 1px solid var(--t-line) !important; }

/* ---------- transitions de page : voile noir ---------- */
html.tgc-term.tgc-exit::before,
html.tgc-term.tgc-enter::before,
html.tgc-term.tgc-enter-back::before { background: var(--t-bg) !important; }

/* ---------- accessibilité : moins d'animations ---------- */
@media (prefers-reduced-motion: reduce) {
    html.tgc-term body *::after,
    html.tgc-term body .tgc-spinner,
    html.tgc-term body .w-loader::before,
    html.tgc-term body .product > .ph::before,
    html.tgc-term body .product > .ph::after,
    html.tgc-term body .product-view > .ph::before,
    html.tgc-term body .product-view > .ph::after { animation: none !important; }
    html.tgc-term body .tgc-spinner,
    html.tgc-term body .w-loader::before { background-size: 116px 100%, auto !important; }
}