/* =========================================================
   Truegiftcorp — feuille de style partagée
   Thème : blanc + #5b7e97 · style 2011 simple · anglais
   Titres et logo : Reality Hyper · tout le reste : JetBrains Mono
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

@font-face {
    font-family: "Reality Hyper";
    src: url("../../Reality Hyper Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --blue: #5b7e97;
    --blue-dark: #3f5b6f;
    --blue-light: #8fa9bd;
    --blue-glow: #a9cfe8;
    --white: #ffffff;
    --ink: #34495a;
    --paper: #f4f7f9;
}

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

html, body {
    width: 100%;
    height: 100%;
}

body {
    /* texte du corps / interface -> JetBrains Mono */
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* SEUL le logo utilise Reality Hyper — tout le reste est en JetBrains Mono */
.logo,
.brand {
    font-family: "Reality Hyper", "Trebuchet MS", Verdana, Geneva, sans-serif;
}

/* le logotype est d'une seule couleur — pas de teinte distincte sur "Gift" */
.logo b,
.brand b {
    color: inherit;
   /* font-weight: inherit; */
}

/* ---- verre dépoli partagé + arrière-plan paradis (portail et boutique) ---- */
.paradise-bg {
    background:
        radial-gradient(circle at 50% 0%, rgba(169,207,232,0.55) 0%, rgba(169,207,232,0) 45%),
        linear-gradient(180deg, #dff0fb 0%, #9cc2dc 38%, #5b7e97 100%);
    background-attachment: fixed;
    min-height: 100%;
}
.glass {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 10px;
    color: #15303f;
    box-shadow:
        0 16px 40px rgba(40,70,95,0.4),
        0 0 36px rgba(169,207,232,0.6),
        inset 0 1px 0 rgba(255,255,255,0.7);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
}

/* ---- lumière réaliste animée en rotation, au-dessus du dégradé (toutes les pages paradis) ---- */
.bg-light {
    position: fixed;
    top: 50%;               /* centré derrière le contenu sur chaque page */
    left: 50%;
    width: 165vmax;
    height: 165vmax;
    transform: translate(-50%, -50%);
    z-index: -1;            /* au-dessus du dégradé de couleur, derrière le contenu */
    pointer-events: none;
}
.bg-light .beams,
.bg-light .bloom { position: absolute; inset: 0; }

/* 4 rayons épais + 4 rayons fins, alternant tous les 45°, en rotation lente */
.bg-light .beams {
    background: conic-gradient(from 0deg at 50% 50%,
        rgba(255,255,255,0)     17.5deg,
        rgba(255,255,255,0.22)  22.5deg,   /* épais */
        rgba(255,255,255,0)     27.5deg,
        rgba(255,255,255,0)     65.5deg,
        rgba(255,255,255,0.11)  67.5deg,   /* fin */
        rgba(255,255,255,0)     69.5deg,
        rgba(255,255,255,0)    107.5deg,
        rgba(255,255,255,0.22) 112.5deg,   /* épais */
        rgba(255,255,255,0)    117.5deg,
        rgba(255,255,255,0)    155.5deg,
        rgba(255,255,255,0.11) 157.5deg,   /* fin */
        rgba(255,255,255,0)    159.5deg,
        rgba(255,255,255,0)    197.5deg,
        rgba(255,255,255,0.22) 202.5deg,   /* épais */
        rgba(255,255,255,0)    207.5deg,
        rgba(255,255,255,0)    245.5deg,
        rgba(255,255,255,0.11) 247.5deg,   /* fin */
        rgba(255,255,255,0)    249.5deg,
        rgba(255,255,255,0)    287.5deg,
        rgba(255,255,255,0.22) 292.5deg,   /* épais */
        rgba(255,255,255,0)    297.5deg,
        rgba(255,255,255,0)    335.5deg,
        rgba(255,255,255,0.11) 337.5deg,   /* fin */
        rgba(255,255,255,0)    339.5deg);
    -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.5) 26%, transparent 60%);
            mask: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.5) 26%, transparent 60%);
    filter: blur(7px);
    animation: bgLightSpin 42s linear infinite;
}
/* halo lumineux à la source de lumière */
.bg-light .bloom {
    background: radial-gradient(circle at 50% 50%,
        rgba(255,255,255,0.78) 0%,
        rgba(232,245,253,0.42) 9%,
        rgba(176,213,238,0.24) 22%,
        rgba(176,213,238,0.00) 48%);
    animation: bgLightPulse 6s ease-in-out infinite;
}
@keyframes bgLightSpin  { to { transform: rotate(360deg); } }
@keyframes bgLightPulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .bg-light .beams { animation: none; }
}

/* ---- navigation supérieure partagée (header.php) — inspirée de shop.php ---- */
.site-nav {
    position: fixed;           /* toujours visible, ne se cache jamais au défilement */
    top: 0; left: 0; right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;   /* titre truegiftcorp centré */
    height: 58px;
    padding: 0 26px;
    background: rgba(255,255,255,0.28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.6);
}
/* réserve la hauteur de la nav fixe dans le flux pour que le contenu commence en dessous */
/* flex-shrink:0 -> jamais compressé sur les pages en flex-column (ex. member.php avec
   une grande image), sinon le menu remonterait derrière la nav fixe */
.site-nav-spacer { height: 58px; flex-shrink: 0; }
.site-nav .logo {
    font-size: 22px;
    color: #5b7e97;
}

.site-nav .logo:hover { color: #3f5b6f; }
.site-nav nav a {
    margin-left: 18px;
    color: #3f5b6f;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.site-nav nav a:hover { color: #5b7e97; }

/* menu secondaire sous la nav supérieure — même style dépoli, liens-boutons + enseignes */
.site-menu {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;            /* jamais compressé dans un body en flex-column */
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.55);
}
.site-menu a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 6px;
    background: rgba(91,126,151,0.18);
    color: #3f5b6f;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 0 14px rgba(169,207,232,0.45);
    transition: transform .15s, background .2s, box-shadow .2s, color .2s;
}
.site-menu a:hover {
    background: rgba(91,126,151,0.42);
    color: #1f3a4d;
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(169,207,232,0.85);
}
.site-menu .suit { font-size: 13px; line-height: 1; color: #5b7e97; }
@media (max-width: 600px) {
    .site-menu { gap: 5px; padding: 5px 7px; }
    .site-menu a { padding: 4px 7px; font-size: 12px; letter-spacing: 1px; }
}
/* téléphone en paysage (hauteur réduite) : on compacte les barres fixes du haut
   pour ne pas dévorer la faible hauteur de l'écran */
@media (orientation: landscape) and (max-height: 500px) {
    .site-nav { height: 36px; padding: 0 16px; }       /* nav plus basse */
    .site-nav-spacer { height: 36px; }                 /* le spacer suit la nav */
    .site-nav .logo { font-size: 15px; }               /* logo réduit */
    .site-menu { padding: 4px 10px; gap: 5px; }         /* menu compact */
    .site-menu a { padding: 4px 9px; font-size: 12px; letter-spacing: 1px; }
    .site-menu .suit { font-size: 11px; }
}

/* ---- pied de page partagé (footer.php) — inspiré de shop.php ---- */
.site-footer {
    text-align: center;
    color: #eaf6ff;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 11px;
    padding: 36px 20px 5px;
}
.site-footer a { color: #eaf6ff; }
.site-footer a:hover { color: #ffffff; }
.site-footer .footer-credit {
    display: block;
    margin-top: 14px;
    font-family: "JetBrains Mono", "Consolas", monospace;
    text-transform: none;
    letter-spacing: 1px;
    font-size: 10px;
    color: rgba(234,246,255,0.6);
}

/* ---- indicateur de chargement partagé ---- */
@keyframes tgc-spin { to { transform: rotate(360deg); } }
.tgc-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(91,126,151,0.25);
    border-top-color: #5b7e97;
    border-radius: 50%;
    animation: tgc-spin 0.8s linear infinite;
    box-shadow: 0 0 14px rgba(169,207,232,0.6);
}

/* chargeur du visualiseur 3D : l'indicateur est AU-DESSUS du texte "chargement 3D" */
.w-loader { flex-direction: column; gap: 14px; }
.w-loader::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 3px solid rgba(91,126,151,0.25);
    border-top-color: #5b7e97;
    border-radius: 50%;
    animation: tgc-spin 0.8s linear infinite;
    box-shadow: 0 0 14px rgba(169,207,232,0.6);
}

/* apparition en zoom avant lorsqu'un modèle 3D termine son chargement */
@keyframes modelZoomIn {
    0%   { opacity: 0; transform: scale(0.55); }
    100% { opacity: 1; transform: scale(1); }
}
.ph3d.model-in canvas { animation: modelZoomIn 0.9s cubic-bezier(.2,.75,.25,1) both; }

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    color: var(--blue-dark);
}

/* ---- Barre supérieure simple façon 2011 ---- */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background: var(--white);
    border-bottom: 2px solid var(--blue);
    box-shadow: 0 1px 4px rgba(91, 126, 151, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    z-index: 50;
}

.topbar .brand {
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--blue);
    text-transform: uppercase;
}

.topbar .brand b {
    color: inherit;
}

.topbar nav a {
    margin-left: 18px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
}

.topbar nav a:hover {
    color: var(--blue);
}

/* ---- Conteneur centré générique ---- */
.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- Bouton à l'ancienne ---- */
.btn {
    display: inline-block;
    padding: 9px 20px;
    background: var(--blue);
    color: var(--white);
    border: 1px solid var(--blue-dark);
    border-radius: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 13px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 3px rgba(0,0,0,0.12);
    transition: background .2s, transform .1s;
}

.btn:hover {
    background: var(--blue-dark);
    color: var(--white);
}

.btn:active {
    transform: translateY(1px);
}

/* crédit discret présent sur tout le site (chaque page) */
.site-credit {
    position: fixed;
    right: 12px;
    bottom: 10px;
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    z-index: 60;
    pointer-events: none;
    user-select: none;
}

/* pied de page */
.site-foot {
    text-align: center;
    font-size: 12px;
    color: var(--blue-light);
    letter-spacing: 1px;
    padding: 26px 0;
}

/* =========================================================
   Bouton BOUTIQUE carré — bande blanche en haut
   ========================================================= */
.shop-square {
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: 120px;
    height: 120px;
    background: var(--blue);
    border: 2px solid var(--white);
    border-radius: 6px;
    box-shadow: 0 6px 22px rgba(91,126,151,0.55), 0 0 30px rgba(169,207,232,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    z-index: 40;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.shop-square:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 10px 30px rgba(91,126,151,0.7), 0 0 44px rgba(169,207,232,0.7);
}

/* la bande blanche en haut */
.shop-square .band {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.shop-square .label {
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 20px;
    padding-bottom: 22px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

@media (max-width: 600px) {
    .shop-square { width: 92px; height: 92px; right: 16px; bottom: 16px; }
    .shop-square .label { font-size: 15px; letter-spacing: 2px; padding-bottom: 16px; }
    .shop-square .band { height: 20px; }
}

/* =========================================================
   Transition de page universelle
   Un long panneau blanc (plus haut que la fenêtre, aux bords
   flous et doux) balaie l'écran vers le BAS pendant qu'un symbole
   défile en son centre. EXIT recouvre, ENTER révèle — un seul
   passage continu et doux vers le bas, sans pause. Utilisé sur
   chaque page.
   ========================================================= */
:root { --tgc-tx-dur: .75s; }

/* le panneau blanc lui-même (CSS pur pour qu'il recouvre avant l'exécution du JS) */
html.tgc-exit::before,
html.tgc-enter::before,
html.tgc-enter-back::before {
    content: "";
    position: fixed;
    left: 0; right: 0;             /* pleine largeur, côtés nets -> ne déclenche jamais de barre de défilement */
    top: -18vh; height: 136vh;     /* plus haut que la fenêtre */
    background: #fff;
    /* bords HAUT et BAS flous / doux uniquement (gauche et droite restent nets) */
    -webkit-mask: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    z-index: 99998;
    pointer-events: none;
}
html.tgc-exit::before  { animation: tgcTxCover  var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1) forwards; }
html.tgc-enter::before { animation: tgcTxReveal var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1) forwards; }
html.tgc-enter-back::before { animation: tgcTxRevealUp var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1) forwards; } /* RETOUR : le panneau sort par le HAUT */

/* le symbole défilant, centré dans le panneau et NON flou.
   inset:0 le lie à la VRAIE fenêtre, ainsi le symbole est centré aussi sur mobile
   (une hauteur basée sur vh le décentre car le vh mobile ignore la barre d'URL). */
#tgc-tx-sym {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 99999;
    pointer-events: none;
}
html.tgc-exit #tgc-tx-sym,
html.tgc-enter #tgc-tx-sym,
html.tgc-enter-back #tgc-tx-sym { display: block; }
html.tgc-exit #tgc-tx-sym  { animation: tgcTxCover  var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1) forwards; }
html.tgc-enter #tgc-tx-sym { animation: tgcTxReveal var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1) forwards; }
html.tgc-enter-back #tgc-tx-sym { animation: tgcTxRevealUp var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1) forwards; }
/* tous les symboles empilés au centre ; seul celui en .on est opaque -> bascule instantanée */
#tgc-tx-sym img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(46vw, 280px);
    height: auto;
    opacity: 0;
}
#tgc-tx-sym img.on { opacity: 1; }

/* tout le CONTENU de la page glisse avec le panneau ; l'en-tête reste en place
   (il effectue une contre-translation pour ne jamais bouger). */
html.tgc-exit body  { animation: tgcBodyExit  var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1) forwards; }
html.tgc-enter body { animation: tgcBodyEnter var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1); }
html.tgc-exit .site-nav,  html.tgc-exit .v-top  { animation: tgcHeadExit  var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1) forwards; }
html.tgc-enter .site-nav, html.tgc-enter .v-top { animation: tgcHeadEnter var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1); }
html.tgc-enter-back body { animation: tgcBodyEnterUp var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1); } /* RETOUR : la page entre par le bas */
html.tgc-enter-back .site-nav, html.tgc-enter-back .v-top { animation: tgcHeadEnterUp var(--tgc-tx-dur) cubic-bezier(.55, 0, .2, 1); }

@keyframes tgcTxCover  { from { transform: translateY(-136vh); } to { transform: translateY(0); } }
@keyframes tgcTxReveal { from { transform: translateY(0); }      to { transform: translateY(136vh); } }
@keyframes tgcBodyExit  { from { transform: translateY(0); }      to { transform: translateY(136vh); } }
@keyframes tgcBodyEnter { from { transform: translateY(-136vh); } to { transform: translateY(0); } }
/* contre-mouvement de l'en-tête = exact opposé du corps, pour qu'il paraisse immobile */
@keyframes tgcHeadExit  { from { transform: translateY(0); }      to { transform: translateY(-136vh); } }
@keyframes tgcHeadEnter { from { transform: translateY(136vh); }  to { transform: translateY(0); } }
/* --- variantes INVERSES (retour navigateur) : tout balaie vers le HAUT --- */
@keyframes tgcTxRevealUp  { from { transform: translateY(0); }      to { transform: translateY(-136vh); } }
@keyframes tgcBodyEnterUp { from { transform: translateY(136vh); }  to { transform: translateY(0); } }
@keyframes tgcHeadEnterUp { from { transform: translateY(-136vh); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    html.tgc-exit::before, html.tgc-enter::before, html.tgc-enter-back::before,
    html.tgc-exit #tgc-tx-sym, html.tgc-enter #tgc-tx-sym, html.tgc-enter-back #tgc-tx-sym,
    html.tgc-exit body, html.tgc-enter body, html.tgc-enter-back body,
    html.tgc-exit .site-nav, html.tgc-enter .site-nav, html.tgc-enter-back .site-nav,
    html.tgc-exit .v-top, html.tgc-enter .v-top, html.tgc-enter-back .v-top { animation-duration: .01s; }
}