/* ==========================================================================
PASO 80 · Tebex Webstore Theme
Style néon synthwave 80s — Frontière Mexique/Californie
========================================================================== */
/* ============== TOKENS ============== */
:root {
/* Palette */
--paso-bg: #07030f;
--paso-bg-2: #0f0620;
--paso-bg-3: #160a30;
--paso-surface: rgba(15, 6, 32, 0.65);
--paso-surface-hover: rgba(15, 6, 32, 0.92);
--paso-surface-strong: rgba(7, 3, 15, 0.95);
--paso-text: #f3eaff;
--paso-text-dim: #b9a8d4;
--paso-text-mute: #6e5d8e;
--paso-text-white: #ffffff;
--paso-magenta: #FF1B9E;
--paso-pink: #FF3DA1;
--paso-cyan: #00E5FF;
--paso-orange: #FF7A1A;
--paso-gold: #FFB300;
--paso-blood: #C2185B;
--paso-purple: #6A1B9A;
--paso-border: rgba(255, 255, 255, 0.08);
--paso-border-strong: rgba(255, 255, 255, 0.18);
--paso-border-active: var(--paso-magenta);
/* Typo */
--paso-font-display: 'Audiowide', sans-serif;
--paso-font-heading: 'Bebas Neue', sans-serif;
--paso-font-body: 'Inter', system-ui, -apple-system, sans-serif;
--paso-font-mono: 'Special Elite', 'Courier New', monospace;
/* Layout */
--paso-container: 1280px;
--paso-container-wide: 1440px;
--paso-container-narrow: 880px;
--paso-radius: 0px;
--paso-radius-sm: 0px;
--paso-pad: 24px;
--paso-section-pad: clamp(60px, 8vw, 120px);
--paso-gutter: 5%;
/* Effets */
--paso-blur: blur(14px);
--paso-glow-magenta: 0 0 24px rgba(255, 27, 158, 0.5);
--paso-glow-cyan: 0 0 24px rgba(0, 229, 255, 0.5);
--paso-glow-soft: 0 16px 40px rgba(0, 0, 0, 0.55);
--paso-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--paso-transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
/* === Mapping Tebex (override) === */
--color-text: var(--paso-text);
--color-text-darker: var(--paso-text-white);
--color-text-secondary: var(--paso-text-dim);
--color-text-dark: var(--paso-text-white);
--color-bg: var(--paso-bg);
--color-brighter-bg: var(--paso-surface);
--color-input-bg: rgba(255, 255, 255, 0.06);
--color-popup-bg: rgba(7, 3, 15, 0.92);
--color-primary: var(--paso-magenta);
--color-primary-hover: var(--paso-text-white);
--color-primary-text: var(--paso-text-white);
--color-primary-text-hover: var(--paso-bg);
--color-secondary: rgba(255, 255, 255, 0.10);
--color-secondary-hover: rgba(255, 255, 255, 0.16);
--color-secondary-text: var(--paso-text-white);
--color-secondary-text-hover: var(--paso-text-white);
--color-tertiary: transparent;
--color-tertiary-hover: rgba(0, 229, 255, 0.10);
--color-tertiary-text: var(--paso-text);
--color-tertiary-text-hover: var(--paso-cyan);
--color-removed: #ff5252;
--header-height: 80px;
--tebex-footer-height: 40px;
--layout-gap: 0;
--widget-padding: 22px;
--content-padding: 24px;
--content-inner-width: 1280px;
--content-width: calc((var(--content-padding) * 2) + var(--content-inner-width));
--sidebar-width: 300px;
--products-gap: 28px;
--btn-size: 48px;
--btn-size-small: 40px;
--btn-size-xsmall: 34px;
--btn-icon-size: 18px;
--bg-blur: var(--paso-blur);
--page-transition-duration: 0.35s;
--tebex-legal-footer-max-width: var(--paso-container);
--tebex-legal-footer-background-color: rgba(7, 3, 15, 0.95);
--tebex-legal-footer-border-color: var(--paso-border);
--tebex-legal-footer-text-color: var(--paso-text-mute);
}
/* ============== RESET ============== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: 0;
color: inherit;
background: transparent;
font: inherit;
letter-spacing: inherit;
}
strong, b { font-weight: 700; }
em, i:not([class*="fa-"]) { font-style: italic; }
input, textarea, button, select { font-family: inherit; }
input[type=submit], button { appearance: none; cursor: pointer; text-align: left; }
textarea { resize: none; }
svg, img { display: block; max-width: 100%; }
li { display: block; }
button { display: block; }
a { color: inherit; text-decoration: none; }
:root *[hidden] { display: none !important; }
:focus { outline: 0; }
:focus-visible { outline: 2px solid var(--paso-cyan); outline-offset: 2px; }
::placeholder { color: var(--paso-text-mute); opacity: 1; }
html { scroll-behavior: smooth; color-scheme: dark; }
html, body { min-height: 100vh; min-height: 100svh; max-width: 100%; }
html { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--paso-magenta) var(--paso-bg); }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--paso-bg); }
html::-webkit-scrollbar-thumb { background: var(--paso-magenta); border-radius: 0; }
html::-webkit-scrollbar-thumb:hover { background: var(--paso-pink); }
body {
position: relative;
width: 100%;
font-family: var(--paso-font-body);
font-size: 16px;
font-weight: 400;
line-height: 1.65;
color: var(--paso-text);
background: var(--paso-bg);
background-image:
radial-gradient(ellipse at 20% 0%, rgba(255, 27, 158, 0.14), transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(0, 229, 255, 0.10), transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(255, 122, 26, 0.06), transparent 70%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
accent-color: var(--paso-magenta);
}
::selection { background: var(--paso-magenta); color: #fff; text-shadow: none; }
select option { color: var(--paso-text); background: var(--paso-bg-2); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--paso-font-display);
font-weight: 400;
letter-spacing: 0.03em;
color: var(--paso-text-white);
line-height: 1.15;
}
/* ============== EFFETS GLOBAUX (Scanlines + VHS Noise) ============== */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
background: repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.02) 0px,
rgba(255, 255, 255, 0.02) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: overlay;
opacity: 0.55;
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
opacity: 0.035;
background-image: url("data:image/svg+xml;utf8,");
}
/* ============== UTILS ============== */
.paso-desktop-only { display: initial; }
.paso-mobile-only { display: none; }
@media (max-width: 980px) {
.paso-desktop-only { display: none !important; }
.paso-mobile-only { display: initial !important; }
}
.paso-container {
width: 100%;
max-width: var(--paso-container);
margin: 0 auto;
padding: 0 var(--paso-pad);
}
.paso-container-narrow { max-width: var(--paso-container-narrow); }
.paso-container-wide { max-width: var(--paso-container-wide); }
/* ============== SITE WRAPPER (layout.html) ============== */
.site {
position: relative;
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--tebex-footer-height));
min-height: calc(100svh - var(--tebex-footer-height));
}
.site-main {
flex: 1 1 auto;
width: 100%;
}
/* ============== HEADER + TOPBAR ============== */
.paso-header {
position: sticky;
top: 0;
z-index: 500;
width: 100%;
}
.paso-topbar {
background: rgba(7, 3, 15, 0.85);
backdrop-filter: var(--paso-blur);
-webkit-backdrop-filter: var(--paso-blur);
border-bottom: 1px solid var(--paso-border);
transition: background var(--paso-transition), border-color var(--paso-transition);
}
.is-home .paso-topbar { background: rgba(7, 3, 15, 0.55); }
.paso-topbar-inner {
display: flex;
align-items: center;
gap: 20px;
max-width: var(--paso-container-wide);
margin: 0 auto;
padding: 12px var(--paso-pad);
min-height: var(--header-height);
}
/* Brand */
.paso-brand {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
transition: opacity var(--paso-transition);
}
.paso-brand:hover { opacity: 0.85; }
.paso-brand-logo {
height: 46px;
width: auto;
filter: drop-shadow(0 0 12px rgba(255, 27, 158, 0.45));
transition: transform var(--paso-transition);
}
.paso-brand:hover .paso-brand-logo { transform: scale(1.05); }
.paso-brand-text strong {
display: block;
font-family: var(--paso-font-display);
font-size: 16px;
letter-spacing: 0.16em;
color: var(--paso-text-white);
line-height: 1;
}
.paso-brand-text span {
display: block;
margin-top: 4px;
font-family: var(--paso-font-mono);
font-size: 10px;
letter-spacing: 0.25em;
color: var(--paso-text-mute);
text-transform: uppercase;
}
/* ============== NAVIGATION (.site-navigation Tebex) ============== */
/* Desktop : nav inline dans la topbar */
@media (min-width: 981px) {
.site-navigation,
.paso-nav {
flex: 1;
display: flex;
justify-content: center;
}
.site-navigation .menu,
.paso-nav .menu {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
}
.site-navigation .menu-item,
.paso-nav .menu-item { position: relative; }
.site-navigation .menu-link,
.paso-nav .menu-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
font-family: var(--paso-font-heading);
font-size: 14px;
letter-spacing: 0.20em;
color: var(--paso-text-dim);
text-transform: uppercase;
position: relative;
transition: color var(--paso-transition);
white-space: nowrap;
}
.site-navigation .paso-menu-icon { display: none; } /* Icônes cachées en desktop */
.site-navigation .menu-link::after {
content: '';
position: absolute;
left: 14px;
right: 14px;
bottom: 4px;
height: 1px;
background: var(--paso-cyan);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--paso-transition);
}
.site-navigation .menu-link:hover { color: var(--paso-text-white); }
.site-navigation .menu-link:hover::after { transform: scaleX(1); }
.site-navigation .menu-link.link-active {
color: var(--paso-text-white);
}
.site-navigation .menu-link.link-active::after { transform: scaleX(1); background: var(--paso-magenta); }
/* Dropdown desktop */
.site-navigation .has-children { position: relative; }
.site-navigation .has-children .toggle {
position: absolute;
inset: 0;
background: transparent;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.site-navigation .menu-sub {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 240px;
padding: 8px 0;
background: var(--paso-surface-strong);
border: 1px solid var(--paso-border-strong);
border-top: 2px solid var(--paso-magenta);
backdrop-filter: var(--paso-blur);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
list-style: none;
opacity: 0;
visibility: hidden;
transition: all var(--paso-transition);
z-index: 100;
}
.site-navigation .has-children:hover > .menu-sub,
.site-navigation .has-children:focus-within > .menu-sub,
.site-navigation .has-children.expanded > .menu-sub {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.site-navigation .menu-sub .menu-link {
display: block;
padding: 10px 20px;
font-family: var(--paso-font-heading);
font-size: 13px;
letter-spacing: 0.18em;
color: var(--paso-text-dim);
text-transform: uppercase;
transition: all var(--paso-transition);
}
.site-navigation .menu-sub .menu-link::after { display: none; }
.site-navigation .menu-sub .menu-link:hover,
.site-navigation .menu-sub .menu-link.link-active {
color: var(--paso-text-white);
background: rgba(255, 27, 158, 0.15);
padding-left: 24px;
}
.site-navigation .menu-sub .menu-sub {
position: static;
transform: none;
opacity: 1;
visibility: visible;
border: 0;
border-left: 1px solid var(--paso-border);
margin-left: 16px;
background: transparent;
box-shadow: none;
padding-left: 8px;
}
.paso-drawer-brand, .paso-drawer-cta { display: none !important; }
.popup-close { display: none !important; }
}
/* Mobile : drawer */
@media (max-width: 980px) {
.site-navigation {
--fade-duration: 280ms;
position: fixed;
inset: 0;
z-index: 1000;
padding: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
transition: opacity var(--fade-duration) ease, display var(--fade-duration) allow-discrete;
}
body:not(.show-navigation) .site-navigation {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
body.show-navigation .site-navigation { opacity: 1; visibility: visible; pointer-events: auto; }
.site-navigation .menu {
display: flex;
flex-direction: column;
align-items: stretch;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: min(360px, 86vw);
padding: 26px 24px 36px;
background: var(--paso-surface-strong);
border-right: 1px solid var(--paso-border-strong);
list-style: none;
overflow-y: auto;
box-shadow: 30px 0 60px rgba(0, 0, 0, 0.6);
transform: translateX(-100%);
transition: transform var(--fade-duration) ease;
scrollbar-width: thin;
scrollbar-color: var(--paso-magenta) transparent;
}
body.show-navigation .site-navigation .menu { transform: translateX(0); }
body:not(.show-navigation) .site-navigation .menu { transform: translateX(-100%); }
.paso-drawer-brand {
padding-bottom: 24px;
margin-bottom: 12px;
border-bottom: 1px solid var(--paso-border);
}
.paso-drawer-brand .paso-brand { display: flex; align-items: center; gap: 12px; }
.paso-drawer-brand img { height: 42px; }
.paso-drawer-brand strong {
display: block;
font-family: var(--paso-font-display);
font-size: 15px;
color: #fff;
letter-spacing: 0.16em;
}
.paso-drawer-brand span {
font-family: var(--paso-font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--paso-text-mute);
text-transform: uppercase;
}
.site-navigation .menu-item { position: relative; }
.site-navigation .menu-link {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 12px;
font-family: var(--paso-font-heading);
font-size: 17px;
letter-spacing: 0.18em;
color: var(--paso-text);
text-transform: uppercase;
transition: all var(--paso-transition);
border-left: 2px solid transparent;
}
.paso-menu-icon {
width: 20px;
text-align: center;
color: var(--paso-cyan);
font-size: 14px;
}
.site-navigation .menu-link:hover {
color: var(--paso-cyan);
background: rgba(0, 229, 255, 0.06);
padding-left: 14px;
border-left-color: var(--paso-cyan);
}
.site-navigation .menu-link.link-active {
color: var(--paso-magenta);
background: rgba(255, 27, 158, 0.08);
border-left-color: var(--paso-magenta);
padding-left: 14px;
}
.site-navigation .menu-link.link-active .paso-menu-icon { color: var(--paso-magenta); }
.site-navigation .has-children {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.site-navigation .has-children > .menu-link {
flex: 1;
}
.site-navigation .toggle {
--btn-size: 38px;
--btn-icon: url("https://template-assets.tebex.io/images/chevron.svg");
flex: none;
}
.site-navigation .toggle::before { transition: rotate var(--paso-transition); }
.site-navigation .has-children.expanded > .toggle::before { rotate: 180deg; }
.site-navigation .has-children:not(.expanded) > .menu-sub { display: none; }
.site-navigation .menu-sub {
width: 100%;
list-style: none;
padding: 4px 0 4px 28px;
border-left: 1px solid var(--paso-border);
margin-left: 18px;
}
.site-navigation .menu-sub .menu-link {
padding: 10px 12px;
font-size: 14px;
letter-spacing: 0.14em;
}
.paso-drawer-cta { margin-top: auto; padding-top: 24px; }
.paso-drawer-cta .paso-cta-rejoindre { width: 100%; justify-content: center; }
/* Close button mobile (croix en haut à droite du drawer) */
.popup-close {
--btn-icon: url("https://template-assets.tebex.io/images/close.svg");
position: absolute;
top: 16px;
right: 16px;
width: 38px;
height: 38px;
background: transparent;
border: 1px solid var(--paso-border-strong);
color: transparent;
font-size: 0;
z-index: 10;
transition: border-color var(--paso-transition);
}
.popup-close::before {
content: "";
display: block;
position: absolute;
inset: 0;
margin: auto;
width: 16px;
height: 16px;
background-color: var(--paso-text);
mask: var(--btn-icon) center / contain no-repeat;
}
.popup-close:hover { border-color: var(--paso-magenta); }
.popup-close:hover::before { background-color: var(--paso-magenta); }
}
/* Actions droite */
.paso-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.paso-action {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
font-family: var(--paso-font-heading);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--paso-text-dim);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--paso-border);
transition: all var(--paso-transition);
white-space: nowrap;
cursor: pointer;
position: relative;
}
.paso-action:hover {
color: var(--paso-text-white);
background: rgba(255, 255, 255, 0.08);
border-color: var(--paso-border-strong);
}
.paso-action i { font-size: 13px; }
.paso-action-basket:hover {
border-color: var(--paso-magenta);
background: rgba(255, 27, 158, 0.12);
color: var(--paso-text-white);
}
.paso-basket-count {
position: absolute;
top: -6px;
right: -6px;
background: var(--paso-magenta);
color: #fff;
font-family: var(--paso-font-mono);
font-size: 10px;
letter-spacing: 0;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 12px rgba(255, 27, 158, 0.7);
}
.paso-action-label { display: inline; }
@media (max-width: 1200px) {
.paso-action-label { display: none; }
.paso-action { padding: 9px 11px; }
}
.paso-cta-rejoindre {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
font-family: var(--paso-font-heading);
font-size: 13px;
letter-spacing: 0.22em;
background: var(--paso-magenta);
color: #fff;
border: 1px solid var(--paso-magenta);
box-shadow: var(--paso-glow-magenta);
transition: all var(--paso-transition);
text-transform: uppercase;
}
.paso-cta-rejoindre:hover {
background: #fff;
color: var(--paso-bg);
border-color: #fff;
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(255, 27, 158, 0.85), 0 0 60px rgba(255, 27, 158, 0.3);
}
/* Burger mobile — caché en desktop */
.paso-burger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 38px;
height: 38px;
padding: 0;
background: transparent;
border: 1px solid var(--paso-border-strong);
cursor: pointer;
transition: border-color var(--paso-transition);
}
@media (max-width: 980px) {
.paso-burger { display: flex; }
}
.paso-burger:hover { border-color: var(--paso-magenta); }
.paso-burger span {
display: block;
width: 18px;
height: 1.5px;
background: var(--paso-text-white);
transition: all var(--paso-transition);
}
body.paso-menu-open .paso-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.paso-menu-open .paso-burger span:nth-child(2) { opacity: 0; }
body.paso-menu-open .paso-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Mobile drawer */
.paso-mobile-drawer {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 360px;
height: 100vh;
height: 100dvh;
padding: 80px 28px 32px;
background: var(--paso-surface-strong);
border-right: 1px solid var(--paso-border-strong);
backdrop-filter: var(--paso-blur);
z-index: 1000;
transform: translateX(-100%);
transition: transform var(--paso-transition);
overflow-y: auto;
}
body.paso-menu-open .paso-mobile-drawer {
transform: translateX(0);
box-shadow: 30px 0 60px rgba(0, 0, 0, 0.6);
}
.paso-drawer-close {
position: absolute;
top: 18px;
right: 18px;
width: 38px;
height: 38px;
background: transparent;
border: 1px solid var(--paso-border-strong);
color: var(--paso-text);
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color var(--paso-transition), color var(--paso-transition);
}
.paso-drawer-close:hover { border-color: var(--paso-magenta); color: var(--paso-magenta); }
.paso-mobile-drawer .paso-menu {
flex-direction: column;
align-items: stretch;
gap: 4px;
}
.paso-mobile-drawer .paso-menu-link {
display: block;
padding: 14px 8px;
font-size: 18px;
letter-spacing: 0.18em;
}
.paso-mobile-drawer .paso-menu-link::after { display: none; }
.paso-mobile-drawer .paso-menu-link.is-active {
color: var(--paso-magenta);
background: rgba(255, 27, 158, 0.08);
padding-left: 14px;
border-left: 2px solid var(--paso-magenta);
}
.paso-mobile-drawer .paso-dropdown {
position: static;
transform: none;
opacity: 1;
visibility: visible;
background: transparent;
border: 0;
box-shadow: none;
padding: 4px 0 4px 18px;
min-width: 0;
border-left: 1px solid var(--paso-border);
}
.paso-cta-mobile {
display: flex;
justify-content: center;
margin-top: 30px;
padding: 14px;
}
.paso-mobile-drawer::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -1;
opacity: 0;
pointer-events: none;
transition: opacity var(--paso-transition);
}
body.paso-menu-open .paso-mobile-drawer::before { opacity: 1; pointer-events: auto; left: 100%; width: 100vw; }
/* Cacher le burger en desktop */
@media (min-width: 981px) {
.paso-mobile-drawer { display: none !important; }
}
/* ============== HERO ============== */
.paso-hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: clamp(60px, 8vw, 120px) var(--paso-gutter) clamp(40px, 6vw, 80px);
overflow: hidden;
margin-top: -1px;
}
.paso-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.paso-hero-sun {
position: absolute;
left: 50%;
bottom: 18%;
transform: translateX(-50%);
width: min(680px, 80vw);
height: min(680px, 80vw);
border-radius: 50%;
background: linear-gradient(180deg, #ffd000 0%, var(--paso-orange) 35%, var(--paso-magenta) 70%, var(--paso-purple) 100%);
box-shadow:
0 0 60px rgba(255, 27, 158, 0.55),
0 0 140px rgba(255, 122, 26, 0.4),
0 0 240px rgba(106, 27, 154, 0.45);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}
.paso-hero-sun::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 22px,
rgba(7, 3, 15, 0.95) 22px,
rgba(7, 3, 15, 0.95) 26px
);
-webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 70%);
mask-image: linear-gradient(180deg, transparent 50%, #000 70%);
}
.paso-hero-grid {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
background-image:
linear-gradient(to right, rgba(0, 229, 255, 0.3) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 27, 158, 0.2) 1px, transparent 1px);
background-size: 70px 70px;
transform: perspective(500px) rotateX(60deg);
transform-origin: center top;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
animation: paso-grid-move 14s linear infinite;
}
@keyframes paso-grid-move {
from { background-position: 0 0, 0 0; }
to { background-position: 0 70px, 0 70px; }
}
.paso-hero-mountains {
position: absolute;
left: 0;
right: 0;
bottom: 42%;
height: 130px;
background:
linear-gradient(180deg, transparent, rgba(7, 3, 15, 0.95)),
url("data:image/svg+xml;utf8,") center bottom / cover no-repeat;
}
.paso-hero-content {
position: relative;
z-index: 5;
max-width: 940px;
width: 100%;
}
.paso-hero-kicker {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--paso-font-mono);
font-size: 13px;
letter-spacing: 0.45em;
color: var(--paso-cyan);
text-shadow: 0 0 12px rgba(0, 229, 255, 0.7);
margin-bottom: 28px;
text-transform: uppercase;
}
.paso-hero-kicker-dot {
width: 6px;
height: 6px;
background: var(--paso-cyan);
border-radius: 50%;
box-shadow: 0 0 10px var(--paso-cyan);
animation: paso-pulse 2s ease-in-out infinite;
}
@keyframes paso-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
.paso-hero-title {
font-family: var(--paso-font-display);
font-size: clamp(60px, 12vw, 168px);
line-height: 0.92;
margin: 0 0 24px;
letter-spacing: 0.04em;
background: linear-gradient(180deg, #fff 0%, #f5d6ff 40%, var(--paso-pink) 75%, var(--paso-orange) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 60px rgba(255, 27, 158, 0.45);
}
.paso-hero-title span {
background: linear-gradient(180deg, var(--paso-orange), var(--paso-magenta));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.paso-hero-sub {
font-family: var(--paso-font-heading);
font-size: clamp(18px, 2.3vw, 28px);
letter-spacing: 0.35em;
color: var(--paso-text-white);
margin: 0 0 24px;
text-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
text-transform: uppercase;
}
.paso-hero-desc {
font-family: var(--paso-font-body);
font-size: 17px;
color: var(--paso-text-dim);
max-width: 640px;
margin: 0 auto 40px;
line-height: 1.7;
}
.paso-hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
/* Stamps vintage */
.paso-stamp {
position: absolute;
display: inline-block;
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
text-align: center;
padding: 8px 14px;
border: 2px solid;
line-height: 1.3;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(3px);
z-index: 6;
pointer-events: none;
user-select: none;
}
.paso-stamp em {
display: block;
font-style: normal;
font-family: var(--paso-font-display);
font-size: 16px;
letter-spacing: 0.1em;
}
.paso-stamp-est {
top: 14%;
right: 6%;
color: var(--paso-magenta);
border-color: var(--paso-magenta);
box-shadow: 0 0 14px rgba(255, 27, 158, 0.3);
transform: rotate(8deg);
}
.paso-stamp-rp {
bottom: 14%;
left: 6%;
color: var(--paso-cyan);
border-color: var(--paso-cyan);
box-shadow: 0 0 14px rgba(0, 229, 255, 0.3);
transform: rotate(-9deg);
font-size: 10px;
}
@media (max-width: 820px) {
.paso-stamp { display: none; }
}
/* Scroll indicator */
.paso-scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 6;
width: 24px;
height: 40px;
border: 1.5px solid var(--paso-cyan);
border-radius: 12px;
display: flex;
justify-content: center;
padding-top: 8px;
}
.paso-scroll-indicator span {
width: 3px;
height: 8px;
background: var(--paso-cyan);
border-radius: 2px;
box-shadow: 0 0 8px var(--paso-cyan);
animation: paso-scroll 1.6s ease-in-out infinite;
}
@keyframes paso-scroll {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(16px); opacity: 0; }
}
/* ============== MARQUEE ============== */
.paso-marquee {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, var(--paso-bg-2), var(--paso-bg));
border-top: 1px solid var(--paso-border);
border-bottom: 1px solid var(--paso-border);
padding: 16px 0;
}
.paso-marquee::before,
.paso-marquee::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 90px;
z-index: 2;
pointer-events: none;
}
.paso-marquee::before { left: 0; background: linear-gradient(to right, var(--paso-bg), transparent); }
.paso-marquee::after { right: 0; background: linear-gradient(to left, var(--paso-bg), transparent); }
.paso-marquee-track {
display: flex;
align-items: center;
gap: 32px;
white-space: nowrap;
animation: paso-marquee-scroll 32s linear infinite;
width: max-content;
}
.paso-marquee-word {
font-family: var(--paso-font-display);
font-size: clamp(20px, 3vw, 30px);
letter-spacing: 0.15em;
background: linear-gradient(180deg, #fff, var(--paso-pink));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.paso-marquee-star {
color: var(--paso-cyan);
text-shadow: 0 0 14px var(--paso-cyan), 0 0 4px var(--paso-cyan);
font-size: 22px;
}
@keyframes paso-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ============== SECTIONS ============== */
.paso-section {
position: relative;
padding: var(--paso-section-pad) var(--paso-gutter);
overflow: hidden;
}
.paso-section + .paso-section { border-top: 1px solid var(--paso-border); }
.paso-section > * { position: relative; z-index: 1; }
/* Watermark — gros chiffre/symbole en filigrane derrière chaque section */
.paso-section[data-bg]::before {
content: attr(data-bg);
position: absolute;
top: -10px;
right: -2vw;
font-family: var(--paso-font-display);
font-size: clamp(180px, 26vw, 360px);
font-weight: 400;
color: transparent;
-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.05);
letter-spacing: -0.04em;
line-height: 0.78;
pointer-events: none;
z-index: 0;
user-select: none;
white-space: nowrap;
}
.paso-section--bg-left[data-bg]::before {
right: auto;
left: -2vw;
}
.paso-section--bg-bottom[data-bg]::before {
top: auto;
bottom: -40px;
}
/* Stripe diagonal décoratif (optionnel sur certaines sections) */
.paso-section--stripe::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: linear-gradient(180deg, transparent, var(--paso-magenta) 40%, var(--paso-cyan) 60%, transparent);
opacity: 0.25;
z-index: 0;
pointer-events: none;
}
.paso-section--stripe-left::after { left: 8%; }
.paso-section--stripe-right::after { right: 8%; }
.paso-section-head {
text-align: center;
margin-bottom: clamp(40px, 6vw, 70px);
}
/* Variantes d'alignement pour casser le rythme centré */
.paso-section-head--left {
text-align: left;
max-width: 760px;
margin-left: 0;
margin-right: auto;
}
.paso-section-head--right {
text-align: right;
max-width: 760px;
margin-left: auto;
margin-right: 0;
}
.paso-section-head--left .paso-section-num,
.paso-section-head--right .paso-section-num {
align-self: flex-start;
}
.paso-section-head--left .paso-section-num::before { display: none; }
.paso-section-head--right .paso-section-num::after { display: none; }
/* Tag vertical sur le côté (décoratif, mode "magazine") */
.paso-section-tag {
position: absolute;
top: 50%;
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.5em;
color: var(--paso-text-mute);
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
z-index: 1;
}
.paso-section-tag--left {
left: 18px;
transform: rotate(-90deg) translateX(50%);
transform-origin: left center;
}
.paso-section-tag--right {
right: 18px;
transform: rotate(90deg) translateX(-50%);
transform-origin: right center;
}
.paso-section-tag::before {
content: '— ';
color: var(--paso-cyan);
}
@media (max-width: 980px) {
.paso-section-tag { display: none; }
.paso-section[data-bg]::before { font-size: clamp(120px, 30vw, 220px); opacity: 0.6; }
}
.paso-section-num {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--paso-font-mono);
font-size: 12px;
letter-spacing: 0.5em;
color: var(--paso-cyan);
text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
margin-bottom: 14px;
text-transform: uppercase;
}
.paso-section-num::before,
.paso-section-num::after {
content: '';
width: 30px;
height: 1px;
background: var(--paso-cyan);
box-shadow: 0 0 8px var(--paso-cyan);
}
.paso-section-head h2 {
font-family: var(--paso-font-display);
font-size: clamp(32px, 5vw, 58px);
letter-spacing: 0.04em;
margin: 0 0 14px;
line-height: 1;
background: linear-gradient(180deg, #fff 30%, var(--paso-pink) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.paso-section-kicker {
font-family: var(--paso-font-body);
font-style: italic;
font-size: 17px;
color: var(--paso-text-dim);
margin: 0;
}
/* ============== BUTTONS (paso + tebex) ============== */
.paso-btn,
.btn-primary,
.btn-secondary,
.btn-tertiary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: var(--btn-size);
padding: 0 26px;
font-family: var(--paso-font-heading);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
border: 1px solid transparent;
cursor: pointer;
transition: all var(--paso-transition);
white-space: nowrap;
border-radius: var(--paso-radius);
text-align: center;
position: relative;
overflow: hidden;
}
.paso-btn-primary,
.btn-primary {
background: var(--paso-magenta);
border-color: var(--paso-magenta);
color: #fff;
box-shadow: var(--paso-glow-magenta);
isolation: isolate;
}
.paso-btn-primary::before,
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--paso-orange), var(--paso-magenta));
opacity: 0;
transition: opacity var(--paso-transition);
z-index: -1;
}
.paso-btn-primary:hover,
.paso-btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(255, 27, 158, 0.8), 0 0 60px rgba(255, 27, 158, 0.3);
border-color: #fff;
}
.paso-btn-primary:hover::before,
.btn-primary:hover::before { opacity: 1; }
.paso-btn-ghost,
.paso-btn-secondary,
.btn-secondary {
background: rgba(0, 229, 255, 0.08);
border-color: var(--paso-cyan);
color: var(--paso-cyan);
text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}
.paso-btn-ghost:hover,
.paso-btn-secondary:hover,
.btn-secondary:hover,
.paso-btn-ghost:focus,
.paso-btn-secondary:focus,
.btn-secondary:focus {
background: var(--paso-cyan);
color: var(--paso-bg);
text-shadow: none;
box-shadow: 0 0 28px rgba(0, 229, 255, 0.7);
transform: translateY(-2px);
}
.btn-tertiary {
background: transparent;
color: var(--paso-text);
}
.btn-tertiary:hover, .btn-tertiary:focus {
color: var(--paso-cyan);
background: rgba(0, 229, 255, 0.08);
}
.btn-small,
.paso-btn-small {
height: var(--btn-size-small);
padding: 0 18px;
font-size: 12px;
letter-spacing: 0.18em;
}
.btn-xsmall {
height: var(--btn-size-xsmall);
padding: 0 12px;
font-size: 11px;
letter-spacing: 0.16em;
}
.btn-large {
height: 58px;
padding: 0 38px;
font-size: 16px;
letter-spacing: 0.26em;
}
.paso-btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-tertiary:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none !important;
}
/* Btn glyph (tebex icones) */
.btn-icon, .btn-icon-text, .btn-glyph, .btn-glyph-text {
--btn-icon: url("https://template-assets.tebex.io/images/check.svg");
}
.btn-icon {
position: relative;
width: var(--btn-size);
height: var(--btn-size);
padding: 0;
background-image: var(--btn-icon);
background-position: center;
background-size: var(--btn-icon-size);
background-repeat: no-repeat;
}
:root .btn-icon { line-height: 0; font-size: 0; color: transparent; }
.btn-icon-text { display: inline-flex; align-items: center; }
.btn-icon-text::before {
content: "";
display: block;
margin-right: 8px;
width: var(--btn-icon-size);
height: var(--btn-icon-size);
background: var(--btn-icon) center / contain no-repeat;
}
.btn-glyph::before, .btn-glyph-text::before {
content: "";
display: block;
width: var(--btn-icon-size);
height: var(--btn-icon-size);
background-color: currentColor;
mask: var(--btn-icon) center / contain no-repeat;
}
.btn-glyph {
position: relative;
width: var(--btn-size);
height: var(--btn-size);
}
:root .btn-glyph { padding: 0; line-height: 0; font-size: 0; color: transparent; }
.btn-glyph::before { position: absolute; inset: 0; margin: auto; }
.btn-glyph-text { display: inline-flex; align-items: center; }
.btn-glyph-text::before { margin-right: 8px; }
.link-text {
color: var(--paso-cyan);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--paso-transition);
}
.link-text:hover { color: #fff; text-shadow: 0 0 10px var(--paso-cyan); }
/* ============== WORLDS (Mexique / USA) ============== */
.paso-worlds-section {
padding: var(--paso-section-pad) var(--paso-gutter);
background:
radial-gradient(ellipse at 30% 0%, rgba(255, 122, 26, 0.12), transparent 50%),
radial-gradient(ellipse at 70% 100%, rgba(0, 229, 255, 0.10), transparent 50%);
border-top: 1px solid var(--paso-border);
}
.paso-worlds-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
max-width: 1200px;
margin: 0 auto 50px;
}
@media (max-width: 820px) { .paso-worlds-grid { grid-template-columns: 1fr; } }
.paso-world {
position: relative;
overflow: hidden;
border: 1px solid var(--paso-border);
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: flex-end;
transition: transform var(--paso-transition-slow), box-shadow var(--paso-transition-slow), border-color var(--paso-transition-slow);
}
.paso-world.is-mx { transform: translateY(20px) rotate(-1.2deg); }
.paso-world.is-us { transform: translateY(-20px) rotate(1.2deg); }
@media (max-width: 820px) {
.paso-world.is-mx, .paso-world.is-us { transform: none; }
}
.paso-world:hover {
transform: translateY(-12px) rotate(0deg);
}
.paso-world.is-mx:hover {
border-color: var(--paso-orange);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 50px rgba(255, 122, 26, 0.3);
}
.paso-world.is-us:hover {
border-color: var(--paso-cyan);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 50px rgba(0, 229, 255, 0.3);
}
.paso-world-bg {
position: absolute;
inset: 0;
z-index: 0;
transition: transform 0.8s ease;
}
.paso-world:hover .paso-world-bg { transform: scale(1.08); }
.paso-world.is-mx .paso-world-bg {
background:
radial-gradient(ellipse at 50% 30%, rgba(255, 179, 0, 0.65), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 69, 0, 0.35), transparent 50%),
linear-gradient(180deg, #4a1e08 0%, #8b3a14 40%, #C2410C 70%, #FFB300 100%);
}
.paso-world.is-us .paso-world-bg {
background:
radial-gradient(ellipse at 50% 30%, rgba(255, 20, 147, 0.6), transparent 55%),
radial-gradient(ellipse at 50% 70%, rgba(0, 191, 255, 0.4), transparent 60%),
linear-gradient(180deg, #1a0a3a 0%, #5d1a80 35%, #ff1493 65%, #ff7a1a 100%);
}
.paso-world-stamp {
position: absolute;
z-index: 5;
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.25em;
text-align: center;
padding: 10px 14px;
border: 2px solid;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
pointer-events: none;
}
.paso-world-stamp em {
font-style: normal;
font-family: var(--paso-font-display);
font-size: 13px;
letter-spacing: 0.15em;
display: block;
margin-top: 4px;
}
.paso-world.is-mx .paso-world-stamp {
top: 18px;
right: 18px;
color: var(--paso-gold);
border-color: var(--paso-gold);
transform: rotate(7deg);
box-shadow: 0 0 14px rgba(255, 179, 0, 0.2);
}
.paso-world.is-us .paso-world-stamp {
top: 18px;
left: 18px;
color: var(--paso-cyan);
border-color: var(--paso-cyan);
transform: rotate(-7deg);
box-shadow: 0 0 14px rgba(0, 229, 255, 0.2);
}
.paso-world-content {
position: relative;
z-index: 2;
padding: 36px 32px 30px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.96) 100%);
}
.paso-world-flag {
display: inline-block;
width: 36px;
height: auto;
vertical-align: middle;
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
border-radius: 2px;
}
/* Drapeau inline (footer, liens) */
.paso-flag-inline {
display: inline-block;
width: 16px;
height: auto;
vertical-align: -0.15em;
margin-left: 4px;
border-radius: 2px;
}
/* Drapeau dans le banner CMS (cercle néon — drapeau qui remplit tout) */
.paso-cms-banner-icon--flag {
padding: 0 !important;
background: transparent !important;
overflow: hidden;
}
.paso-cms-banner-icon--flag img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.paso-world-tag {
display: inline-block;
margin-left: 12px;
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.35em;
color: #fff;
padding: 4px 10px;
background: rgba(0, 0, 0, 0.55);
border-left: 2px solid;
vertical-align: middle;
text-transform: uppercase;
}
.paso-world.is-mx .paso-world-tag { border-color: var(--paso-orange); }
.paso-world.is-us .paso-world-tag { border-color: var(--paso-cyan); }
.paso-world-content h3 {
font-family: var(--paso-font-display);
font-size: clamp(34px, 4.8vw, 50px);
margin: 18px 0 14px;
letter-spacing: 0.03em;
line-height: 1;
color: #fff;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}
.paso-world-desc {
font-size: 15px;
color: rgba(255, 255, 255, 0.88);
margin: 0 0 22px;
line-height: 1.7;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.paso-world-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--paso-font-heading);
letter-spacing: 0.22em;
font-size: 14px;
color: #fff;
padding-bottom: 4px;
border-bottom: 1px solid;
transition: padding-right var(--paso-transition), gap var(--paso-transition);
text-transform: uppercase;
}
.paso-world.is-mx .paso-world-cta { color: var(--paso-gold); }
.paso-world.is-us .paso-world-cta { color: var(--paso-cyan); }
.paso-world:hover .paso-world-cta { gap: 14px; }
.paso-bridge-note {
max-width: 900px;
margin: 0 auto;
padding: 24px 28px;
background: rgba(15, 6, 32, 0.6);
border: 1px solid var(--paso-border);
border-left: 3px solid var(--paso-cyan);
display: flex;
align-items: center;
gap: 22px;
}
.paso-bridge-note i {
font-size: 38px;
color: var(--paso-cyan);
text-shadow: 0 0 18px rgba(0, 229, 255, 0.7);
flex-shrink: 0;
}
.paso-bridge-note strong {
display: block;
font-family: var(--paso-font-display);
font-size: 20px;
color: #fff;
margin-bottom: 6px;
letter-spacing: 0.04em;
}
.paso-bridge-note p {
font-size: 14px;
color: var(--paso-text-dim);
margin: 0;
line-height: 1.65;
}
@media (max-width: 600px) {
.paso-bridge-note { flex-direction: column; text-align: center; }
}
/* ============== ABOUT — Bento asymétrique (casse la symétrie) ============== */
.paso-about-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(170px, auto);
gap: 16px;
max-width: var(--paso-container-wide);
margin: 0 auto;
}
.paso-about-item {
padding: 28px 26px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
position: relative;
transition: all var(--paso-transition);
overflow: hidden;
isolation: isolate;
}
.paso-about-item::before {
content: attr(data-num);
position: absolute;
top: 14px;
right: 14px;
padding: 3px 8px;
background: rgba(0, 229, 255, 0.08);
border: 1px solid rgba(0, 229, 255, 0.3);
font-family: var(--paso-font-mono);
font-size: 10px;
letter-spacing: 0.25em;
color: var(--paso-cyan);
text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
z-index: 2;
}
/* Watermark numéro géant en arrière-plan */
.paso-about-item::after {
content: attr(data-num);
position: absolute;
right: -15px;
bottom: -50px;
font-family: var(--paso-font-display);
font-size: 180px;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);
letter-spacing: -0.06em;
pointer-events: none;
z-index: -1;
user-select: none;
transition: all 0.6s ease;
}
.paso-about-item:hover {
border-color: var(--paso-magenta);
background: var(--paso-surface-hover);
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(255, 27, 158, 0.2);
}
.paso-about-item:hover::after {
-webkit-text-stroke-color: rgba(255, 27, 158, 0.15);
transform: scale(1.1) rotate(-3deg);
}
.paso-about-item i {
font-size: 28px;
color: var(--paso-magenta);
margin-bottom: 14px;
text-shadow: 0 0 14px rgba(255, 27, 158, 0.55);
display: block;
}
.paso-about-item h3 {
font-family: var(--paso-font-display);
font-size: 20px;
letter-spacing: 0.04em;
margin-bottom: 10px;
color: #fff;
}
.paso-about-item p {
font-size: 14px;
color: var(--paso-text-dim);
line-height: 1.65;
margin: 0;
}
/* === Bento layout — sizes variés === */
/* Card 1 : grosse vedette (4 col x 2 rows) */
.paso-about-item:nth-child(1) {
grid-column: span 4;
grid-row: span 2;
padding: 44px 40px;
background:
radial-gradient(ellipse at top right, rgba(255, 27, 158, 0.12), transparent 50%),
var(--paso-surface);
}
.paso-about-item:nth-child(1) i {
font-size: 48px;
margin-bottom: 20px;
}
.paso-about-item:nth-child(1) h3 {
font-size: 34px;
margin-bottom: 16px;
}
.paso-about-item:nth-child(1) p {
font-size: 16px;
max-width: 480px;
}
.paso-about-item:nth-child(1)::after {
font-size: 280px;
right: -30px;
bottom: -90px;
}
/* Card 2 : étroite (2 col x 1 row) */
.paso-about-item:nth-child(2) {
grid-column: span 2;
grid-row: span 1;
}
.paso-about-item:nth-child(2) i { color: var(--paso-cyan); text-shadow: 0 0 14px rgba(0, 229, 255, 0.55); }
/* Card 3 : vertical (2 col x 2 rows) */
.paso-about-item:nth-child(3) {
grid-column: span 2;
grid-row: span 2;
padding: 36px 28px;
background:
radial-gradient(ellipse at bottom left, rgba(0, 229, 255, 0.1), transparent 55%),
var(--paso-surface);
}
.paso-about-item:nth-child(3) i {
font-size: 36px;
color: var(--paso-gold);
text-shadow: 0 0 14px rgba(255, 179, 0, 0.5);
}
.paso-about-item:nth-child(3) h3 { font-size: 24px; }
/* Card 4 : horizontale (4 col x 1 row, layout en ligne) */
.paso-about-item:nth-child(4) {
grid-column: span 4;
grid-row: span 1;
display: flex;
align-items: center;
gap: 24px;
padding: 24px 32px;
}
.paso-about-item:nth-child(4) i {
font-size: 38px;
flex-shrink: 0;
margin: 0;
}
.paso-about-item:nth-child(4) > *:not(i) {
flex: 1;
}
.paso-about-item:nth-child(4) h3 { margin-bottom: 6px; }
/* Responsive bento */
@media (max-width: 980px) {
.paso-about-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto;
}
.paso-about-item:nth-child(1) {
grid-column: span 2;
grid-row: span 1;
padding: 32px 28px;
}
.paso-about-item:nth-child(1) i { font-size: 36px; }
.paso-about-item:nth-child(1) h3 { font-size: 26px; }
.paso-about-item:nth-child(1) p { font-size: 15px; }
.paso-about-item:nth-child(1)::after { font-size: 200px; }
.paso-about-item:nth-child(2) { grid-column: span 1; }
.paso-about-item:nth-child(3) {
grid-column: span 1;
grid-row: span 1;
padding: 28px 24px;
}
.paso-about-item:nth-child(4) {
grid-column: span 2;
flex-direction: row;
gap: 18px;
padding: 22px 24px;
}
}
@media (max-width: 600px) {
.paso-about-grid { grid-template-columns: 1fr; gap: 12px; }
.paso-about-item,
.paso-about-item:nth-child(1),
.paso-about-item:nth-child(2),
.paso-about-item:nth-child(3),
.paso-about-item:nth-child(4) {
grid-column: span 1 !important;
grid-row: span 1 !important;
padding: 24px 22px !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.paso-about-item h3 { font-size: 20px !important; }
.paso-about-item p { font-size: 14px !important; }
.paso-about-item i { font-size: 28px !important; margin: 0 0 14px !important; }
}
/* ============== CONTEXTE (timeline) — grille 4 colonnes ============== */
.paso-timeline {
max-width: var(--paso-container-wide);
margin: 0 auto;
padding: 20px 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.paso-ct-step {
position: relative;
padding: 26px 24px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
border-top: 3px solid var(--paso-cyan);
transition: all var(--paso-transition);
}
.paso-ct-step:hover {
background: var(--paso-surface-hover);
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 18px rgba(0, 229, 255, 0.15);
}
.paso-ct-step.is-up,
.paso-ct-step.is-down {
margin: 0;
max-width: none;
}
.paso-ct-step.is-down { border-top-color: var(--paso-magenta); }
.paso-ct-step.is-down:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 27, 158, 0.2); }
.paso-ct-step.is-final {
border-top-color: var(--paso-gold);
background: var(--paso-surface-hover);
box-shadow: 0 0 30px rgba(255, 179, 0, 0.15);
}
.paso-ct-step.is-final:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 22px rgba(255, 179, 0, 0.3); }
@media (max-width: 980px) {
.paso-timeline { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 540px) {
.paso-timeline { grid-template-columns: 1fr; }
}
.paso-ct-year {
display: inline-block;
font-family: var(--paso-font-display);
font-size: 30px;
color: var(--paso-cyan);
letter-spacing: 0.06em;
margin-bottom: 8px;
text-shadow: 0 0 14px rgba(0, 229, 255, 0.45);
}
.paso-ct-step.is-down .paso-ct-year { color: var(--paso-magenta); text-shadow: 0 0 14px rgba(255, 27, 158, 0.45); }
.paso-ct-step.is-final .paso-ct-year { color: var(--paso-gold); text-shadow: 0 0 14px rgba(255, 179, 0, 0.55); }
.paso-ct-step h3 {
font-family: var(--paso-font-display);
font-size: 22px;
letter-spacing: 0.03em;
margin-bottom: 8px;
color: #fff;
}
.paso-ct-step p {
font-size: 14px;
color: var(--paso-text-dim);
line-height: 1.7;
margin: 0;
}
.paso-ct-step p strong { color: #fff; }
.paso-ct-more {
text-align: center;
margin-top: 50px;
}
.paso-ct-more p {
font-family: var(--paso-font-body);
font-style: italic;
color: var(--paso-text-dim);
margin-bottom: 22px;
font-size: 15px;
}
/* ============== JOIN STEPS — grille 3 colonnes ============== */
.paso-join-list {
list-style: none;
padding: 0;
margin: 0 auto 50px;
max-width: var(--paso-container-wide);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
counter-reset: paso-step;
}
.paso-join-list li {
display: flex;
flex-direction: column;
gap: 14px;
padding: 26px 26px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
margin: 0;
transition: all var(--paso-transition);
}
.paso-join-list li:hover {
border-color: var(--paso-magenta);
background: var(--paso-surface-hover);
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 27, 158, 0.18);
}
@media (max-width: 980px) {
.paso-join-list { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
.paso-join-list { grid-template-columns: 1fr; }
}
.paso-join-num {
font-family: var(--paso-font-display);
font-size: 34px;
color: var(--paso-magenta);
text-shadow: 0 0 14px rgba(255, 27, 158, 0.55);
flex-shrink: 0;
line-height: 1;
}
.paso-join-list h3 {
font-family: var(--paso-font-display);
font-size: 20px;
margin-bottom: 6px;
color: #fff;
letter-spacing: 0.03em;
}
.paso-join-list p {
font-size: 14px;
color: var(--paso-text-dim);
line-height: 1.65;
margin-bottom: 12px;
}
.paso-join-list p:last-child { margin-bottom: 0; }
.paso-join-list a:not(.paso-btn):not(.btn-primary):not(.btn-secondary) {
color: var(--paso-cyan);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 600px) {
.paso-join-list li { flex-direction: column; gap: 8px; }
}
.paso-final-cta {
text-align: center;
margin: 0 auto;
max-width: 800px;
padding: 40px 28px;
background: var(--paso-surface);
border: 1px solid var(--paso-magenta);
position: relative;
}
.paso-final-cta::before, .paso-final-cta::after {
content: '★';
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--paso-cyan);
font-size: 22px;
text-shadow: 0 0 14px var(--paso-cyan);
}
.paso-final-cta::before { left: 18px; }
.paso-final-cta::after { right: 18px; }
.paso-final-cta p {
font-family: var(--paso-font-mono);
font-style: italic;
font-size: 17px;
color: var(--paso-text);
margin-bottom: 24px;
line-height: 1.6;
}
/* ============== REGLEMENT TEASER ============== */
.paso-reg-teaser {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 44px;
max-width: 1100px;
margin: 0 auto;
align-items: center;
}
@media (max-width: 820px) { .paso-reg-teaser { grid-template-columns: 1fr; } }
.paso-reg-text h3 {
font-family: var(--paso-font-display);
font-size: clamp(24px, 3.5vw, 32px);
margin-bottom: 18px;
color: #fff;
letter-spacing: 0.03em;
}
.paso-reg-text p {
font-size: 15px;
color: var(--paso-text-dim);
line-height: 1.7;
margin-bottom: 26px;
}
.paso-reg-list {
list-style: none;
padding: 28px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
display: grid;
gap: 12px;
}
.paso-reg-list li {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 14px;
background: rgba(0, 0, 0, 0.35);
border-left: 2px solid var(--paso-cyan);
font-size: 14px;
color: var(--paso-text);
transition: all var(--paso-transition);
}
.paso-reg-list li:hover {
border-left-color: var(--paso-magenta);
background: rgba(0, 0, 0, 0.6);
transform: translateX(6px);
}
.paso-reg-list li i {
color: var(--paso-magenta);
font-size: 16px;
width: 22px;
text-align: center;
}
/* ============== TEBEX SHOP SECTION (intégrée à la home) ============== */
.paso-shop-section {
padding: var(--paso-section-pad) var(--paso-gutter);
}
.paso-shop-cta {
text-align: center;
margin-top: 40px;
}
/* Trust strip — bandeau de réassurance */
.paso-trust-strip {
max-width: var(--paso-container-wide);
margin: 0 auto 48px;
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--paso-border-strong);
border-bottom: 1px solid var(--paso-border-strong);
background:
linear-gradient(90deg, rgba(255, 27, 158, 0.03), transparent 30%, transparent 70%, rgba(0, 240, 255, 0.03)),
linear-gradient(180deg, rgba(15, 6, 32, 0.6), rgba(15, 6, 32, 0.3));
position: relative;
isolation: isolate;
}
.paso-trust-strip::before,
.paso-trust-strip::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--paso-magenta) 20%, var(--paso-cyan) 80%, transparent);
opacity: 0.35;
z-index: -1;
}
.paso-trust-strip::before { top: -1px; }
.paso-trust-strip::after { bottom: -1px; }
.paso-trust-item {
display: flex;
align-items: center;
gap: 14px;
padding: 22px 24px;
position: relative;
transition: background var(--paso-transition);
}
.paso-trust-item + .paso-trust-item {
border-left: 1px solid var(--paso-border);
}
.paso-trust-item:hover {
background: linear-gradient(180deg, rgba(255, 27, 158, 0.05), rgba(0, 240, 255, 0.04));
}
.paso-trust-icon {
flex: 0 0 auto;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--paso-border-strong);
background:
radial-gradient(circle at 30% 30%, rgba(255, 27, 158, 0.18), transparent 60%),
rgba(15, 6, 32, 0.8);
color: var(--paso-cyan);
font-size: 17px;
box-shadow:
inset 0 0 12px rgba(0, 240, 255, 0.1),
0 0 0 1px rgba(0, 240, 255, 0.08);
transition: all var(--paso-transition);
}
.paso-trust-item:hover .paso-trust-icon {
color: var(--paso-magenta);
border-color: var(--paso-magenta);
box-shadow:
inset 0 0 14px rgba(255, 27, 158, 0.15),
0 0 18px rgba(255, 27, 158, 0.25);
transform: rotate(-4deg);
}
.paso-trust-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.paso-trust-text strong {
font-family: var(--paso-font-display);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--paso-text);
line-height: 1.2;
}
.paso-trust-text span {
font-size: 11.5px;
letter-spacing: 0.02em;
color: var(--paso-text-dim);
line-height: 1.35;
}
@media (max-width: 1100px) {
.paso-trust-strip { grid-template-columns: repeat(2, 1fr); }
.paso-trust-item:nth-child(2) { border-left: 1px solid var(--paso-border); }
.paso-trust-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--paso-border); }
.paso-trust-item:nth-child(4) { border-top: 1px solid var(--paso-border); }
}
@media (max-width: 640px) {
.paso-trust-strip { grid-template-columns: 1fr; }
.paso-trust-item { border-left: 0 !important; }
.paso-trust-item + .paso-trust-item { border-top: 1px solid var(--paso-border); }
.paso-trust-item { padding: 16px 18px; }
}
/* Categories en tuiles — version image-driven premium */
.site-home-categories,
.paso-categories-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 22px;
max-width: var(--paso-container-wide);
margin: 0 auto 64px;
}
.site-home-categories .category,
.paso-category-tile {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
padding: 0;
font-family: var(--paso-font-display);
font-size: 18px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--paso-text);
background:
linear-gradient(180deg, rgba(255, 27, 158, 0.06) 0%, transparent 35%),
linear-gradient(180deg, var(--paso-surface), var(--paso-surface-strong));
border: 1px solid var(--paso-border-strong);
text-align: left;
text-decoration: none;
isolation: isolate;
transition: all var(--paso-transition);
}
/* Image fills the whole tile, label overlays via gradient */
.site-home-categories .category .image,
.paso-category-tile .image {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
z-index: 0;
transition: transform 0.7s ease, filter 0.6s ease;
filter: saturate(0.9) contrast(1.05);
}
.site-home-categories .category .image-default,
.paso-category-tile .image-default {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
background:
radial-gradient(circle at 30% 30%, rgba(255, 27, 158, 0.18), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(0, 240, 255, 0.14), transparent 55%),
linear-gradient(135deg, rgba(15, 6, 32, 0.9), rgba(106, 27, 154, 0.4));
}
.site-home-categories .category .image-default::before,
.paso-category-tile .image-default::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 64px;
height: 64px;
transform: translate(-50%, -55%);
background-color: rgba(255, 255, 255, 0.85);
mask: url("https://template-assets.tebex.io/images/package-default.svg") center/contain no-repeat;
-webkit-mask: url("https://template-assets.tebex.io/images/package-default.svg") center/contain no-repeat;
}
/* Overlay gradient + label */
.site-home-categories .category::before,
.paso-category-tile::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 6, 32, 0) 30%, rgba(15, 6, 32, 0.85) 70%, rgba(15, 6, 32, 0.96) 100%);
z-index: 1;
transition: background var(--paso-transition);
}
/* Label injected from text node — wrap in pseudo to allow flex */
.site-home-categories .category,
.paso-category-tile {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.site-home-categories .category > *:not(.image):not(.image-default),
.paso-category-tile > *:not(.image):not(.image-default) {
position: relative;
z-index: 2;
}
/* Style the trailing text node (category name) via padding + bottom strip */
.site-home-categories .category::after,
.paso-category-tile::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--paso-magenta), var(--paso-cyan));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
z-index: 3;
}
.site-home-categories .category:hover::after,
.paso-category-tile:hover::after { transform: scaleX(1); }
/* Text wrap — Tebex injects the text node directly inside .category */
.site-home-categories .category,
.paso-category-tile {
padding: 0 22px 22px;
}
.site-home-categories .category:hover,
.paso-category-tile:hover {
color: #fff;
border-color: var(--paso-magenta);
box-shadow: 0 18px 50px rgba(255, 27, 158, 0.32);
transform: translateY(-4px);
}
.site-home-categories .category:hover .image,
.paso-category-tile:hover .image {
transform: scale(1.08);
filter: saturate(1.1) contrast(1.08);
}
.site-home-categories .category:hover::before,
.paso-category-tile:hover::before {
background: linear-gradient(180deg, rgba(15, 6, 32, 0) 25%, rgba(15, 6, 32, 0.7) 60%, rgba(106, 27, 154, 0.55) 100%);
}
@media (max-width: 640px) {
.site-home-categories,
.paso-categories-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.site-home-categories .category,
.paso-category-tile {
font-size: 14px;
letter-spacing: 0.14em;
padding: 0 14px 16px;
}
}
/* ============== TEBEX PAGES INTERNES (header, sidebar) ============== */
.site-content {
width: 100%;
max-width: var(--paso-container-wide);
margin: 0 auto;
padding: clamp(32px, 5vw, 64px) var(--paso-pad);
}
.site-content-widgets {
display: grid;
gap: 40px;
align-items: start;
}
@media (min-width: 961px) {
body.is-sidebar-left .site-content-widgets {
grid-template-columns: var(--sidebar-width) 1fr;
}
body.is-sidebar-left .store-sidebar { order: -1; }
body.is-sidebar-right .site-content-widgets {
grid-template-columns: 1fr var(--sidebar-width);
}
.store-sidebar {
align-self: start;
position: sticky;
top: 100px;
}
}
/* Category page header */
.category-header {
margin-bottom: 36px;
padding-bottom: 26px;
border-bottom: 1px solid var(--paso-border);
position: relative;
}
.category-header::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 100px;
height: 2px;
background: linear-gradient(to right, var(--paso-magenta), var(--paso-cyan));
}
.category-header h1,
.category-header h2 {
font-family: var(--paso-font-display);
font-size: clamp(28px, 4vw, 42px);
letter-spacing: 0.04em;
background: linear-gradient(180deg, #fff 30%, var(--paso-pink) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
}
.no-products {
font-family: var(--paso-font-heading);
font-size: 22px;
letter-spacing: 0.15em;
text-align: center;
color: var(--paso-text-mute);
padding: 64px 20px;
text-transform: uppercase;
}
/* ============== PACKAGE CARDS — Premium "arcade collectible" ============== */
.store-products-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
gap: 16px;
}
@media (min-width: 1200px) {
.store-products-list {
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}
}
.store-products-images {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--products-gap);
}
.store-product {
display: flex;
flex-direction: column;
gap: 14px;
}
/* === CARD PRODUIT EN MODE GRID/IMAGE — version premium === */
.store-products-images .store-product {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: subgrid;
padding: 0;
background:
linear-gradient(180deg, rgba(255, 27, 158, 0.04), transparent 30%),
linear-gradient(180deg, var(--paso-surface), var(--paso-surface-strong));
border: 1px solid var(--paso-border-strong);
position: relative;
overflow: hidden;
transition: all var(--paso-transition);
isolation: isolate;
}
/* Ribbon rouge "NOUVEAU" en diagonale dans le coin gauche */
.store-products-images .store-product::before {
content: 'NOUVEAU';
position: absolute;
top: 16px;
left: -42px;
z-index: 4;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
padding: 6px 48px;
transform: rotate(-45deg);
font-family: var(--paso-font-heading);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45), 0 0 12px rgba(239, 68, 68, 0.4);
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.store-products-images .store-product:hover {
border-color: var(--paso-magenta);
transform: translateY(-6px);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.55),
0 0 30px rgba(255, 27, 158, 0.2);
}
/* IMAGE zone — gros et au top */
.store-products-images .store-product .image-link {
display: block;
margin: 0 !important;
width: 100%;
position: relative;
background: linear-gradient(135deg, rgba(15, 6, 32, 0.6), rgba(106, 27, 154, 0.15));
aspect-ratio: 16/10;
overflow: hidden;
}
.store-products-images .store-product .image-link::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 60%, rgba(7, 3, 15, 0.85));
pointer-events: none;
z-index: 1;
}
.store-products-images .store-product .image-link::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(0, 229, 255, 0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 27, 158, 0.06) 1px, transparent 1px);
background-size: 30px 30px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
pointer-events: none;
z-index: 0;
}
.store-products-images .store-product .image {
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
transition: transform 0.6s ease;
}
.store-products-images .store-product:hover .image {
transform: scale(1.08);
}
.store-products-images .store-product .image-default {
width: 100%;
height: 100%;
aspect-ratio: auto;
border: 0;
background: linear-gradient(135deg, rgba(255, 27, 158, 0.15), rgba(0, 229, 255, 0.1));
position: relative;
}
.store-products-images .store-product .image-default::before {
inset: 30% !important;
background-color: rgba(255, 27, 158, 0.5) !important;
}
/* CONTENT zone — sous l'image */
.store-products-images .store-product > :not(.image-link) {
position: relative;
z-index: 2;
padding-left: 22px;
padding-right: 22px;
}
.store-products-images .store-product > .product-title {
margin-top: 18px;
padding-bottom: 4px;
}
.store-products-images .store-product > .descr {
margin-bottom: 12px;
}
.store-products-images .store-product > .price {
padding-top: 12px;
border-top: 1px dashed var(--paso-border);
}
.store-products-images .store-product > .actions {
padding-bottom: 20px;
padding-top: 6px;
}
.store-product .product-title {
font-family: var(--paso-font-display);
font-size: 18px;
letter-spacing: 0.02em;
color: #fff;
line-height: 1.25;
word-break: normal;
overflow-wrap: anywhere;
}
.store-products-images .store-product .product-title a:hover {
color: var(--paso-magenta);
text-shadow: 0 0 14px rgba(255, 27, 158, 0.6);
}
/* Price plus impactant */
.store-products-images .store-product .price {
font-family: var(--paso-font-heading);
font-size: 13px;
letter-spacing: 0.08em;
color: var(--paso-text-dim);
text-shadow: none;
margin-bottom: 8px;
display: flex;
align-items: baseline;
gap: 10px;
}
.store-products-images .store-product .price .discount {
margin-right: 0;
font-size: 14px;
color: var(--paso-text-mute);
}
.store-products-images .store-product .price strong {
font-family: var(--paso-font-display);
font-size: 26px;
background: linear-gradient(180deg, var(--paso-cyan), var(--paso-magenta));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
letter-spacing: 0.02em;
filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.35));
}
/* Actions buttons — bigger and on full width */
.store-products-images .store-product .actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.store-products-images .store-product .actions .add,
.store-products-images .store-product .actions .subscribe {
flex: 1 1 100%;
height: 44px;
font-size: 12px;
letter-spacing: 0.2em;
}
.store-products-images .store-product .actions .gift {
width: 40px;
height: 40px;
flex: none;
}
.store-product .product-title {
font-family: var(--paso-font-display);
font-size: 20px;
letter-spacing: 0.02em;
color: #fff;
line-height: 1.25;
word-break: normal;
overflow-wrap: anywhere;
hyphens: auto;
}
.store-product .descr {
word-break: normal;
overflow-wrap: break-word;
hyphens: auto;
}
.store-product .product-title a { color: inherit; transition: color var(--paso-transition); }
.store-product .product-title a:hover {
color: var(--paso-cyan);
text-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
}
.store-product .product-title .countdown {
display: block;
margin-top: 8px;
font-family: var(--paso-font-mono);
color: var(--paso-orange);
font-size: 12px;
letter-spacing: 0.18em;
font-variant-numeric: tabular-nums;
text-transform: uppercase;
}
.store-product .product-title .countdown::before {
content: "";
display: inline-block;
vertical-align: -0.15em;
margin-right: 0.4em;
width: 1em;
height: 1em;
background-color: currentColor;
mask: url("https://template-assets.tebex.io/images/countdown.svg") center / contain no-repeat;
}
.store-product .image-link {
display: block;
margin: 0 auto;
width: fit-content;
}
.store-product .image-link:hover ~ .product-title a { color: var(--paso-cyan); }
.store-product .image {
margin: 0 auto;
max-width: 100%;
border: 1px solid var(--paso-border);
}
.store-product .image-default {
position: relative;
width: min(140px, 100%);
aspect-ratio: 1;
border: 1px solid var(--paso-border);
}
.store-product .image-default::before {
content: "";
display: block;
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.6);
mask: url("https://template-assets.tebex.io/images/package-default.svg") center / contain no-repeat;
}
.store-product .descr {
font-size: 14px;
color: var(--paso-text-dim);
line-height: 1.65;
}
.store-product .actions {
display: flex;
gap: 10px;
position: relative;
overflow: hidden;
}
.store-product .actions.updating { pointer-events: none; }
.store-product .actions.updating > * { opacity: 0.3; filter: grayscale(100%); }
.store-product .actions.updating::before {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 10;
margin: auto;
width: 30px;
height: 30px;
background: url("https://template-assets.tebex.io/images/loading.svg") center no-repeat;
background-size: contain;
}
.store-product:not(.store-product-full) .actions {
flex-wrap: wrap;
align-content: flex-end;
flex: 1 1 auto;
}
.store-product .price {
font-family: var(--paso-font-heading);
font-size: 16px;
letter-spacing: 0.08em;
color: var(--paso-cyan);
text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}
.store-product .price .discount {
margin-right: 8px;
color: var(--paso-text-mute);
text-decoration: line-through;
text-shadow: none;
}
.store-product .price strong {
font-family: var(--paso-font-display);
font-size: 26px;
color: #fff;
text-shadow: 0 0 14px rgba(255, 27, 158, 0.55);
}
.store-product:not(.store-product-full) .price { width: 100%; }
.store-product .quantity-field {
height: var(--btn-size);
background: rgba(15, 6, 32, 0.7);
}
.store-product .quantity-field input[type=number] { border: 0; }
.store-product .half { flex: 1 1 33%; overflow: visible; }
.store-product .wide { flex: 1 1 auto; }
.store-product .gift { --btn-icon: url("https://template-assets.tebex.io/images/gift.svg"); flex: none; }
.store-product .remove { --btn-icon: url("https://template-assets.tebex.io/images/delete.svg"); flex: none; }
/* === STORE PRODUCTS LIST — design flottant, less boxy === */
.store-products-list .store-product {
display: grid;
grid-template-columns: 130px 1fr;
align-items: center;
gap: 18px 26px;
padding: 22px 26px;
background:
radial-gradient(circle at 0% 0%, rgba(255, 27, 158, 0.12), transparent 50%),
radial-gradient(circle at 100% 100%, rgba(0, 229, 255, 0.08), transparent 55%),
rgba(15, 6, 32, 0.5);
border: 0;
position: relative;
overflow: visible;
isolation: isolate;
transition: all var(--paso-transition);
}
/* Trait néon vertical animé à gauche (au lieu d'une bordure complète) */
.store-products-list .store-product::before {
content: '';
position: absolute;
top: 12%;
left: 0;
width: 2px;
height: 60%;
background: linear-gradient(180deg, var(--paso-magenta), transparent);
transition: height 0.4s ease, top 0.4s ease;
z-index: 1;
}
/* Soft glow flottant au sol (en-dessous) au hover */
.store-products-list .store-product::after {
content: '';
position: absolute;
left: 8%; right: 8%;
bottom: -10px;
height: 24px;
background: radial-gradient(ellipse at center, rgba(255, 27, 158, 0.3), transparent 70%);
filter: blur(10px);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
pointer-events: none;
}
.store-products-list .store-product:hover {
background:
radial-gradient(circle at 0% 0%, rgba(255, 27, 158, 0.2), transparent 55%),
radial-gradient(circle at 100% 100%, rgba(0, 229, 255, 0.14), transparent 60%),
rgba(15, 6, 32, 0.75);
transform: translateX(8px);
}
.store-products-list .store-product:hover::before {
top: 0;
height: 100%;
background: linear-gradient(180deg, var(--paso-magenta), var(--paso-cyan));
box-shadow: 0 0 14px rgba(255, 27, 158, 0.6);
width: 3px;
}
.store-products-list .store-product:hover::after { opacity: 1; }
/* Image flottante — pas de cadre, juste un drop-shadow néon */
.store-products-list .store-product .image-link {
margin: 0;
grid-row: span 3;
width: 130px;
height: 130px;
background: transparent;
border: 0;
overflow: visible;
position: relative;
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5));
transition: filter 0.4s ease, transform 0.4s ease;
}
.store-products-list .store-product:hover .image-link {
filter:
drop-shadow(0 10px 24px rgba(0, 0, 0, 0.6))
drop-shadow(0 0 18px rgba(255, 27, 158, 0.45));
transform: rotate(-2deg) scale(1.04);
}
.store-products-list .store-product .image {
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
display: block;
transition: none;
}
.store-products-list .store-product .image-default {
width: 100%;
height: 100%;
border: 0;
}
/* Titre plus impactant */
.store-products-list .store-product .product-title {
font-family: var(--paso-font-display);
font-size: 22px;
margin: 0;
letter-spacing: 0.02em;
color: #fff;
text-shadow: 0 0 14px rgba(255, 27, 158, 0.25);
}
.store-products-list .store-product:hover .product-title {
text-shadow: 0 0 18px rgba(255, 27, 158, 0.55);
}
.store-products-list .store-product .descr {
display: block;
font-size: 13px;
color: var(--paso-text-dim);
line-height: 1.5;
margin: 4px 0 0;
max-height: 3em;
overflow: hidden;
}
/* Prix avec gradient cyan→magenta */
.store-products-list .store-product .price {
font-size: 14px;
letter-spacing: 0.06em;
color: var(--paso-text-dim);
}
.store-products-list .store-product .price strong {
font-family: var(--paso-font-display);
font-size: 28px;
background: linear-gradient(180deg, var(--paso-cyan), var(--paso-magenta));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.4));
}
/* Boutons d'action — plus gros, plus glow */
.store-products-list .store-product .actions {
grid-column: 2;
flex-wrap: wrap;
gap: 10px;
flex: 1 1 auto;
}
.store-products-list .store-product .actions .btn-primary,
.store-products-list .store-product .actions .btn-secondary {
height: 44px;
padding: 0 22px;
font-size: 12px;
letter-spacing: 0.22em;
font-weight: 600;
}
.store-products-list .store-product .actions .btn-primary {
flex: 1 1 auto;
min-width: 200px;
}
.store-products-list .store-product .quantity-field {
height: 44px;
}
/* Responsive — sur petits écrans, repasser à un layout plus compact */
@media (max-width: 600px) {
.store-products-list .store-product {
grid-template-columns: 80px 1fr;
gap: 12px 14px;
padding: 16px 16px;
}
.store-products-list .store-product .image-link {
width: 80px;
height: 80px;
}
.store-products-list .store-product .product-title { font-size: 17px; }
.store-products-list .store-product .price strong { font-size: 22px; }
.store-products-list .store-product .actions .btn-primary,
.store-products-list .store-product .actions .btn-secondary {
height: 40px;
padding: 0 16px;
font-size: 11px;
}
}
/* Tiered (category tiered) */
.store-category-tiered-header {
margin-bottom: 30px;
font-size: 16px;
color: var(--paso-text-dim);
}
.store-products-tiered {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--products-gap);
}
.store-product-tiered {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
gap: 22px;
padding: 28px 24px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
transition: all var(--paso-transition);
text-align: center;
}
.store-product-tiered:hover {
border-color: var(--paso-magenta);
background: var(--paso-surface-hover);
transform: translateY(-6px);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 28px rgba(255, 27, 158, 0.22);
}
.store-product-tiered .image { margin: auto; object-fit: contain; }
.store-product-tiered .product-title {
font-family: var(--paso-font-display);
font-size: 22px;
color: #fff;
letter-spacing: 0.03em;
}
.store-product-tiered .descr {
padding: 18px 0;
border-block: 1px solid var(--paso-border);
color: var(--paso-text-dim);
font-size: 14px;
line-height: 1.65;
}
.store-product-tiered .price {
font-family: var(--paso-font-heading);
font-size: 16px;
letter-spacing: 0.08em;
color: var(--paso-cyan);
}
.store-product-tiered .price strong {
font-family: var(--paso-font-display);
font-size: 26px;
color: #fff;
text-shadow: 0 0 14px rgba(255, 27, 158, 0.5);
}
.store-product-tiered .actions { gap: 12px; }
.store-product-tiered .actions .wide { width: 100%; }
/* ============== PRODUCT FULL — REDESIGN ============== */
.store-product-full {
padding: 0;
display: flex;
flex-direction: column;
gap: 28px;
}
/* TITLE — full-width hero banner avec neon */
.store-product-full .product-title {
font-family: var(--paso-font-display);
font-size: clamp(30px, 4.5vw, 52px);
letter-spacing: 0.05em;
text-align: center;
margin: 0;
padding: 28px 20px;
background:
radial-gradient(ellipse at center, rgba(0, 229, 255, 0.10), transparent 60%),
linear-gradient(135deg, rgba(255, 27, 158, 0.06), rgba(255, 179, 0, 0.04));
border: 1px solid rgba(255, 27, 158, 0.25);
border-radius: 12px;
position: relative;
overflow: hidden;
-webkit-text-fill-color: initial;
color: #fff;
text-shadow: 0 0 30px rgba(255, 27, 158, 0.35), 0 0 60px rgba(0, 229, 255, 0.2);
}
.store-product-full .product-title::before,
.store-product-full .product-title::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--paso-cyan), var(--paso-pink), var(--paso-gold), transparent);
filter: drop-shadow(0 0 6px var(--paso-pink));
}
.store-product-full .product-title::before { top: 0; }
.store-product-full .product-title::after { bottom: 0; }
/* IMAGE — frame neon avec glow */
.store-product-full .image,
.store-product-full .image-default {
margin: 0;
max-width: 100%;
border: 2px solid transparent;
background:
linear-gradient(rgba(13, 8, 20, 0.96), rgba(13, 8, 20, 0.96)) padding-box,
linear-gradient(135deg, var(--paso-cyan), var(--paso-pink), var(--paso-gold)) border-box;
border-radius: 14px;
padding: 16px;
box-shadow:
0 0 50px rgba(255, 27, 158, 0.18),
inset 0 0 80px rgba(0, 229, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
min-height: 280px;
}
/* BUY BOX — bloc dramatique */
.store-product-full .actions {
flex-wrap: wrap;
align-content: center;
padding: 32px 26px;
background:
radial-gradient(ellipse at top, rgba(0, 229, 255, 0.10), transparent 70%),
linear-gradient(180deg, rgba(255, 27, 158, 0.05), rgba(13, 8, 20, 0.4));
border: 1px solid rgba(255, 27, 158, 0.3);
border-radius: 14px;
position: relative;
overflow: hidden;
gap: 14px;
}
.store-product-full .actions::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--paso-cyan), var(--paso-pink), var(--paso-gold));
filter: drop-shadow(0 0 8px var(--paso-pink));
}
/* PRIX — gros et lumineux avec label */
.store-product-full .price {
width: 100%;
text-align: center;
margin: 0 0 12px;
font-size: 14px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--paso-text-mute);
position: relative;
}
.store-product-full .price::before {
content: '— TARIF —';
display: block;
margin-bottom: 16px;
font-family: var(--paso-font-mono);
font-size: 10px;
letter-spacing: 0.55em;
color: var(--paso-cyan);
text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
opacity: 0.85;
}
.store-product-full .price strong {
display: block;
margin-top: 4px;
font-family: var(--paso-font-display);
font-size: clamp(40px, 6vw, 64px);
background: linear-gradient(135deg, var(--paso-cyan), var(--paso-pink) 60%, var(--paso-gold));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 22px rgba(255, 27, 158, 0.4));
letter-spacing: 0.02em;
line-height: 1;
}
/* CTA bouton — full width, glowing, pulsing */
.store-product-full .wide { max-width: none; }
.store-product-full .actions .btn-primary,
.store-product-full .actions .btn-secondary {
width: 100%;
min-height: 56px;
font-size: 13px;
letter-spacing: 0.25em;
font-weight: 800;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.store-product-full .actions .btn-primary.add,
.store-product-full .actions .btn-primary.subscribe {
background: linear-gradient(135deg, var(--paso-cyan), var(--paso-pink));
border: none;
box-shadow:
0 0 28px rgba(255, 27, 158, 0.45),
0 6px 24px rgba(0, 0, 0, 0.4),
inset 0 0 20px rgba(255, 255, 255, 0.1);
color: #fff;
transition: all var(--paso-transition);
}
.store-product-full .actions .btn-primary.add::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transform: translateX(-100%);
animation: paso-cta-shine 3s ease-in-out infinite;
}
@keyframes paso-cta-shine {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
.store-product-full .actions .btn-primary.add:hover {
transform: translateY(-3px);
box-shadow:
0 0 40px rgba(255, 27, 158, 0.6),
0 12px 32px rgba(0, 0, 0, 0.5),
inset 0 0 20px rgba(255, 255, 255, 0.2);
}
/* Trust badges sous le bouton — séparés par un trait dashed */
.store-product-full .actions::after {
content: '⚡ Livraison instantanée · 🔒 Paiement sécurisé Tebex';
display: block;
width: 100%;
text-align: center;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed rgba(255, 27, 158, 0.2);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--paso-text-mute);
opacity: 0.85;
}
/* Bouton gift secondaire — texte + icône visibles, style "ghost" */
.store-product-full .actions .gift {
width: 100% !important;
height: 44px !important;
flex: none;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 20px !important;
font-family: var(--paso-font-heading) !important;
font-size: 11px !important;
line-height: 1 !important;
letter-spacing: 0.22em !important;
color: var(--paso-text-dim) !important;
background: transparent !important;
background-image: none !important;
border: 1px dashed rgba(255, 27, 158, 0.35) !important;
text-transform: uppercase;
position: relative;
transition: all var(--paso-transition);
}
.store-product-full .actions .gift::before {
content: '\f06b';
font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', sans-serif !important;
font-weight: 900;
font-size: 14px;
color: var(--paso-pink);
text-shadow: 0 0 8px rgba(255, 27, 158, 0.5);
background: none !important;
mask: none !important;
-webkit-mask: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
position: static !important;
inset: auto !important;
display: inline-block;
}
.store-product-full .actions .gift:hover {
color: #fff !important;
border-color: var(--paso-pink) !important;
border-style: solid !important;
background: rgba(255, 27, 158, 0.06) !important;
transform: translateY(-1px);
}
.store-product-full .actions .gift:hover::before {
color: #fff;
}
/* DESCRIPTION — full width avec label flottant */
.store-product-full .descr {
font-size: 16px;
color: var(--paso-text-dim);
line-height: 1.75;
padding: 38px 28px 30px;
background:
radial-gradient(ellipse at top right, rgba(255, 27, 158, 0.04), transparent 60%),
rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 27, 158, 0.18);
border-radius: 14px;
position: relative;
}
.store-product-full .descr::before {
content: '✦ DÉTAILS DU PACK ✦';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 4px 18px;
background: var(--paso-bg, #0a0612);
color: var(--paso-pink);
font-family: var(--paso-font-display);
font-size: 11px;
letter-spacing: 0.4em;
text-shadow: 0 0 12px rgba(255, 27, 158, 0.6);
white-space: nowrap;
}
/* DESKTOP — layout grid */
@media (width > 768px) {
.store-product-full {
display: grid;
grid-template:
"title title" auto
"image actions" auto
"descr descr" 1fr / 1fr 1fr;
gap: 28px;
}
.store-product-full .product-title { grid-area: title; }
.store-product-full .image,
.store-product-full .media-slider,
.store-product-full .image-default { grid-area: image; }
.store-product-full .actions { grid-area: actions; align-self: stretch; }
.store-product-full .descr { grid-area: descr; }
}
/* ============== MEDIA SLIDER ============== */
.media-slider {
--slider-spacing: 12px;
--thumbs-size: 70px;
--thumb-padding: 6px;
position: relative;
width: 100%;
overflow: hidden;
}
.media-slider .slider {
width: 100%;
min-height: 200px;
margin-bottom: var(--thumb-padding);
}
.media-slider .slider::part(container) {
--swiper-navigation-size: 24px;
--swiper-theme-color: var(--paso-cyan);
}
.media-slider .slide { align-content: center; }
.media-slider .slide-image {
margin: auto;
max-width: 100%;
min-height: 200px;
max-height: 100%;
object-fit: contain;
}
.media-slider .thumbs {
display: flex;
gap: var(--slider-spacing);
flex-wrap: wrap;
}
.media-slider .thumb {
width: var(--thumbs-size);
height: var(--thumbs-size);
padding: var(--thumb-padding);
background: var(--paso-surface);
border: 1px solid var(--paso-border);
cursor: pointer;
transition: border-color var(--paso-transition);
}
.media-slider .thumb.active {
border-color: var(--paso-magenta);
box-shadow: 0 0 14px rgba(255, 27, 158, 0.4);
}
.media-slider .thumb:not(.active) > * { opacity: 0.5; }
.media-slider .thumb-image,
.media-slider .thumb-youtube {
width: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
height: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
object-fit: contain;
}
/* ============== FORMS ============== */
.store-form { font-size: 16px; }
.store-form p { margin-bottom: 20px; color: var(--paso-text-dim); }
.store-form .input-group,
.store-form .field,
.store-form .field-inline { margin-bottom: 22px; }
.store-form .input-group > p,
.store-form .field > p,
.store-form .field-inline > p {
margin-bottom: 10px;
font-family: var(--paso-font-heading);
letter-spacing: 0.15em;
color: #fff;
font-size: 13px;
text-transform: uppercase;
}
.store-form .field-inline {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 16px;
}
.store-form input[type=text],
.store-form input[type=password],
.store-form input[type=email],
.store-form input[type=number],
.store-form input[type=search],
.store-form input[type=url],
.store-form input[type=tel],
.store-form input[type=date],
.store-form input[type=time],
.store-form input[type=datetime-local],
.store-form input[type=file],
.store-form input[type=month],
.store-form input[type=week],
.store-form select,
.store-form textarea {
display: block;
width: 100%;
margin-bottom: 8px;
padding: 14px;
color: #fff;
background: rgba(15, 6, 32, 0.7);
border: 1px solid var(--paso-border-strong);
font-family: var(--paso-font-body);
font-size: 15px;
transition: border-color var(--paso-transition), box-shadow var(--paso-transition);
border-radius: 0;
}
.store-form input:focus, .store-form select:focus, .store-form textarea:focus {
border-color: var(--paso-cyan);
box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}
.store-form .field-inline input,
.store-form .field-inline select,
.store-form .field-inline textarea { width: auto; }
.store-form .actions {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
/* Quantity field */
.quantity-field {
display: flex;
align-items: stretch;
justify-content: center;
height: 38px;
overflow: hidden;
color: #fff;
background: rgba(15, 6, 32, 0.7);
border: 1px solid var(--paso-border-strong);
border-radius: 0;
}
.quantity-field input[type=number] {
flex: none;
width: 44px;
background: transparent;
color: #fff;
text-align: center;
font-family: var(--paso-font-mono);
font-size: 16px;
-moz-appearance: textfield;
appearance: textfield;
}
.quantity-field input[type=number]::-webkit-inner-spin-button,
.quantity-field input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.quantity-field .adjust {
width: 36px;
padding: 0;
line-height: 0;
font-size: 0;
color: transparent;
transition: background var(--paso-transition);
}
.quantity-field .adjust:hover { background: rgba(255, 27, 158, 0.15); }
.quantity-field .adjust.decrease { order: -1; }
.quantity-field .adjust.increase { order: 100; }
.quantity-field .adjust::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: var(--paso-cyan);
mask: url("https://template-assets.tebex.io/images/plus.svg") center / 10px no-repeat;
}
.quantity-field .adjust.decrease::before {
mask-image: url("https://template-assets.tebex.io/images/minus.svg");
}
/* ============== SIDEBAR & MODULES ============== */
.store-sidebar {
display: grid;
gap: 28px;
}
body.is-sidebar-bottom .store-sidebar { margin-top: 50px; }
@media (min-width: 601px) {
body.is-sidebar-bottom .store-sidebar {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
}
.widget-title,
.store-sidebar h3,
.store-sidebar h4,
.store-sidebar h5,
.store-sidebar h6 {
margin-bottom: 16px;
font-family: var(--paso-font-display);
font-size: 18px;
letter-spacing: 0.05em;
color: #fff;
text-shadow: 0 0 14px rgba(255, 27, 158, 0.4);
}
.store-sidebar > div,
.store-sidebar > section,
.store-sidebar > article {
padding: 22px 22px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
}
.widget-featured .store-product { padding: 0; text-align: center; background: transparent; border: 0; }
.widget-gift-card { text-align: center; }
.widget-gift-card .gift-card-input {
margin-bottom: 12px;
width: 100%;
padding: 14px;
color: #fff;
background: rgba(15, 6, 32, 0.7);
border: 1px solid var(--paso-border-strong);
}
.widget-gift-card .check { width: 100%; }
.widget-recent .purchase {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
line-height: 1.4;
font-size: 14px;
}
.widget-recent .avatar {
flex: none;
max-width: 40px;
max-height: 40px;
object-fit: contain;
border: 1px solid var(--paso-border);
}
.widget-recent .username { color: #fff; font-weight: 600; }
.widget-recent .empty { text-align: center; color: var(--paso-text-mute); }
.widget-recent time { color: var(--paso-text-mute); opacity: 0.8; font-size: 0.9em; }
.widget-recent .sep { margin: 0 0.3em; color: var(--paso-text-mute); }
.widget-top-donator { text-align: center; }
.widget-top-donator .avatar {
margin: 0 auto 14px;
max-width: 96px;
border: 1px solid var(--paso-magenta);
box-shadow: 0 0 20px rgba(255, 27, 158, 0.45);
}
.widget-top-donator .username {
font-family: var(--paso-font-display);
font-size: 18px;
color: #fff;
margin-bottom: 6px;
}
.widget-community-goal .widget-content,
.widget-goal .widget-content { text-align: center; }
.widget-community-goal .progress,
.widget-goal .progress {
height: 14px;
margin-bottom: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--paso-border);
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
height: 100%;
background: linear-gradient(to right, var(--paso-magenta), var(--paso-cyan));
box-shadow: 0 0 14px rgba(255, 27, 158, 0.55);
}
/* ============== SECTION GOAL — featured sur la home ============== */
.paso-goal-section {
position: relative;
padding: clamp(50px, 6vw, 80px) var(--paso-gutter) !important;
}
.paso-goal-section .paso-section-head { margin-bottom: 36px; }
.paso-goal-section .paso-section-num {
color: var(--paso-gold);
font-size: 14px;
}
.paso-goal-section .paso-section-num::before,
.paso-goal-section .paso-section-num::after {
background: var(--paso-gold);
box-shadow: 0 0 8px var(--paso-gold);
}
.paso-goal-section .paso-section-head h2 {
font-size: clamp(28px, 4vw, 42px);
}
.paso-goal-wrapper {
max-width: var(--paso-container-wide);
margin: 0 auto 36px;
width: 100%;
}
/* ⚠️ Masquer TOUS les widgets sauf community-goal */
.paso-goal-wrapper > *:not(.widget-community-goal):not(.widget-goal),
.paso-goal-wrapper .widget:not(.widget-community-goal):not(.widget-goal) {
display: none !important;
}
/* === Card du goal — version premium avec watermark € === */
.paso-goal-wrapper .widget-community-goal,
.paso-goal-wrapper .widget-goal {
position: relative;
padding: 40px 44px 36px;
background:
radial-gradient(circle at 0% 100%, rgba(255, 27, 158, 0.14), transparent 55%),
radial-gradient(circle at 100% 0%, rgba(0, 229, 255, 0.1), transparent 55%),
linear-gradient(180deg, rgba(15, 6, 32, 0.8), rgba(7, 3, 15, 0.95));
border: 0;
text-align: left;
overflow: hidden;
isolation: isolate;
}
/* Stripe néon multicolor animé en haut */
.paso-goal-wrapper .widget-community-goal::before,
.paso-goal-wrapper .widget-goal::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--paso-magenta), var(--paso-cyan), var(--paso-gold), var(--paso-magenta));
background-size: 200% 100%;
animation: paso-goal-shine 6s linear infinite;
box-shadow: 0 0 14px rgba(255, 27, 158, 0.4);
z-index: 2;
}
@keyframes paso-goal-shine {
0% { background-position: 0% 0; }
100% { background-position: 200% 0; }
}
/* Watermark "€" géant en filigrane derrière */
.paso-goal-wrapper .widget-community-goal::after,
.paso-goal-wrapper .widget-goal::after {
content: '€';
position: absolute;
right: -30px;
top: -50px;
font-family: var(--paso-font-display);
font-size: 320px;
font-weight: 400;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgba(255, 27, 158, 0.08);
pointer-events: none;
z-index: -1;
user-select: none;
}
.paso-goal-wrapper .widget-content {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Header : kicker style label */
.paso-goal-wrapper .widget-title {
font-family: var(--paso-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.42em !important;
margin: 0 !important;
color: var(--paso-cyan) !important;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
-webkit-text-fill-color: var(--paso-cyan) !important;
background: none !important;
display: inline-flex;
align-items: center;
gap: 10px;
}
.paso-goal-wrapper .widget-title::before {
content: '';
width: 24px;
height: 1px;
background: var(--paso-cyan);
box-shadow: 0 0 6px var(--paso-cyan);
}
/* Image plus discrète — petite et alignée à gauche */
.paso-goal-wrapper .goal-image {
display: none !important; /* On la cache, elle alourdit */
}
/* Description plus douce */
.paso-goal-wrapper .descr {
font-family: var(--paso-font-body) !important;
font-style: italic !important;
font-size: 15px !important;
color: var(--paso-text-dim) !important;
line-height: 1.6 !important;
margin: 0 !important;
max-width: 540px;
}
/* Montant : énorme chiffre cyan→magenta gradient + target gris */
.paso-goal-wrapper .goal-amount {
display: flex;
align-items: baseline;
gap: 14px;
margin: 14px 0 8px !important;
font-family: var(--paso-font-display);
line-height: 1;
}
.paso-goal-wrapper .goal-current {
font-size: 68px;
background: linear-gradient(180deg, var(--paso-cyan), var(--paso-magenta));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.5));
letter-spacing: -0.02em;
line-height: 0.9;
font-weight: 400;
}
.paso-goal-wrapper .goal-separator {
font-size: 30px;
color: var(--paso-text-mute);
font-family: var(--paso-font-mono);
opacity: 0.6;
}
.paso-goal-wrapper .goal-target {
font-size: 20px;
color: var(--paso-text-dim);
letter-spacing: 0.04em;
font-weight: 400;
font-family: var(--paso-font-heading);
}
.paso-goal-wrapper .goal-percent-text {
font-family: var(--paso-font-display);
font-size: 56px;
background: linear-gradient(180deg, var(--paso-cyan), var(--paso-magenta));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.5));
}
/* Barre de progression plus impactante avec stripes animés */
.paso-goal-wrapper .progress {
height: 14px !important;
margin: 14px 0 18px !important;
max-width: 100%;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
position: relative !important;
overflow: hidden !important;
border-radius: 0;
}
.paso-goal-wrapper .progress::before { display: none; }
.paso-goal-wrapper .progress-bar {
height: 100% !important;
background:
repeating-linear-gradient(135deg,
rgba(255, 255, 255, 0.12) 0,
rgba(255, 255, 255, 0.12) 8px,
transparent 8px,
transparent 16px),
linear-gradient(90deg, var(--paso-magenta), var(--paso-cyan)) !important;
background-size: 22px 22px, 100% 100% !important;
box-shadow: 0 0 18px rgba(255, 27, 158, 0.6) !important;
position: relative;
animation: paso-goal-stripes 1.6s linear infinite;
}
@keyframes paso-goal-stripes {
0% { background-position: 0 0, 0 0; }
100% { background-position: 22px 0, 0 0; }
}
.paso-goal-wrapper .progress-percent {
display: none;
}
/* Times achieved */
.paso-goal-wrapper .goal-achieved {
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--paso-text-mute);
text-transform: uppercase;
margin: 0 !important;
}
.paso-goal-wrapper .goal-achieved strong {
color: var(--paso-magenta);
font-family: var(--paso-font-heading);
font-size: 14px;
}
/* CTA Soutenir — plus gros, gradient au hover */
.paso-goal-wrapper .goal-cta {
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 10px;
padding: 0 32px;
height: 50px;
font-family: var(--paso-font-heading);
font-size: 13px;
letter-spacing: 0.26em;
color: #fff !important;
background: var(--paso-magenta);
border: 1px solid var(--paso-magenta);
text-transform: uppercase;
text-decoration: none !important;
box-shadow: 0 0 24px rgba(255, 27, 158, 0.45) !important;
transition: all var(--paso-transition);
isolation: isolate;
position: relative;
overflow: hidden;
}
.paso-goal-wrapper .goal-cta::before {
content: '' !important;
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--paso-orange), var(--paso-magenta));
opacity: 0;
transition: opacity var(--paso-transition);
z-index: -1;
display: block !important;
}
.paso-goal-wrapper .goal-cta:hover {
color: #fff !important;
border-color: #fff;
transform: translateY(-2px);
box-shadow:
0 0 36px rgba(255, 27, 158, 0.85),
0 0 60px rgba(255, 27, 158, 0.3) !important;
}
.paso-goal-wrapper .goal-cta:hover::before { opacity: 1; }
/* Fallback ancien module */
.paso-goal-wrapper .widget-community-goal > .widget-content > p,
.paso-goal-wrapper .widget-goal > .widget-content > p {
font-family: var(--paso-font-mono);
font-size: 12px;
letter-spacing: 0.15em;
color: var(--paso-text-dim);
text-transform: uppercase;
margin: 0;
}
.paso-goal-wrapper .widget-community-goal > .widget-content > p strong,
.paso-goal-wrapper .widget-goal > .widget-content > p strong {
font-family: var(--paso-font-heading);
font-size: 28px;
color: var(--paso-cyan);
text-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
letter-spacing: 0.02em;
text-transform: none;
font-weight: 400;
}
@media (max-width: 700px) {
.paso-goal-wrapper .widget-community-goal,
.paso-goal-wrapper .widget-goal {
padding: 26px 22px 24px;
}
.paso-goal-wrapper .goal-current { font-size: 32px; }
.paso-goal-wrapper .goal-cta { width: 100%; }
}
.widget-community-goal .progress-bar.striped,
.widget-goal .progress-bar.striped {
background-image: linear-gradient(135deg,
var(--paso-magenta) 0%, var(--paso-magenta) 33%,
var(--paso-cyan) 33%, var(--paso-cyan) 66%,
var(--paso-magenta) 66%, var(--paso-magenta) 100%);
background-size: 24px 100%;
}
@keyframes paso-progress-anim { to { background-position: 100% 0; } }
.widget-community-goal .progress-bar.striped.animated,
.widget-goal .progress-bar.striped.animated {
animation: paso-progress-anim 10s linear infinite;
}
.widget-community-goal .goal-image { margin: 0 auto 12px; max-width: 96px; }
.widget-server-status .widget-content { text-align: center; }
.widget-server-status h6 {
font-family: var(--paso-font-heading);
letter-spacing: 0.15em;
font-size: 13px;
}
/* ============== CMS PAGE WRAPPER ============== */
.paso-cms-page {
max-width: 880px;
margin: 0 auto;
padding: clamp(40px, 6vw, 80px) var(--paso-pad);
}
.paso-cms-head {
text-align: center;
margin-bottom: 50px;
padding-bottom: 38px;
border-bottom: 1px solid var(--paso-border);
position: relative;
}
.paso-cms-head::after {
content: '';
position: absolute;
left: 50%;
bottom: -1px;
transform: translateX(-50%);
width: 130px;
height: 2px;
background: linear-gradient(to right, var(--paso-magenta), var(--paso-cyan));
}
.paso-cms-kicker {
display: inline-block;
font-family: var(--paso-font-mono);
font-size: 12px;
letter-spacing: 0.45em;
color: var(--paso-cyan);
text-transform: uppercase;
margin-bottom: 16px;
text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}
.paso-cms-head h1 {
font-family: var(--paso-font-display);
font-size: clamp(36px, 5.5vw, 58px);
letter-spacing: 0.04em;
background: linear-gradient(180deg, #fff 30%, var(--paso-pink) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 14px;
line-height: 1;
}
/* Texte CMS — auto-stylé pour tout HTML standard */
.text-content {
line-height: 1.75;
word-wrap: break-word;
font-family: var(--paso-font-body);
color: var(--paso-text);
font-size: 16px;
}
.text-content > * + * { margin-top: 16px; }
.text-content h1, .text-content h2, .text-content h3,
.text-content h4, .text-content h5, .text-content h6 {
font-family: var(--paso-font-display);
font-weight: 400;
letter-spacing: 0.03em;
color: var(--paso-text-white);
text-shadow: 0 0 18px rgba(255, 27, 158, 0.3);
margin-top: 40px;
line-height: 1.2;
}
.text-content h1 { font-size: clamp(28px, 4vw, 42px); }
.text-content h2 {
font-size: clamp(24px, 3.5vw, 34px);
border-bottom: 1px solid var(--paso-border);
padding-bottom: 12px;
margin-top: 50px;
}
.text-content h3 { font-size: clamp(20px, 2.5vw, 26px); color: var(--paso-pink); }
.text-content h4 { font-size: 19px; color: var(--paso-cyan); }
.text-content p { color: var(--paso-text-dim); line-height: 1.75; }
.text-content strong, .text-content b { color: #fff; font-weight: 600; }
.text-content em, .text-content i:not([class*="fa-"]) { color: var(--paso-text); font-style: italic; }
.text-content a:not([class*="btn-"]):not(.paso-btn) {
color: var(--paso-cyan);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--paso-transition);
}
.text-content a:not([class*="btn-"]):not(.paso-btn):hover {
color: #fff;
text-shadow: 0 0 12px var(--paso-cyan);
}
.text-content img {
max-width: 100%;
height: auto;
border: 1px solid var(--paso-border);
margin: 16px 0;
}
.text-content ol, .text-content ul {
margin-left: 1.6em;
color: var(--paso-text-dim);
}
.text-content li { display: list-item; margin-bottom: 8px; }
.text-content li::marker { color: var(--paso-magenta); }
.text-content blockquote {
margin: 24px 0;
padding: 18px 26px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
border-left: 3px solid var(--paso-magenta);
font-style: italic;
color: var(--paso-text);
font-family: var(--paso-font-mono);
}
.text-content hr {
border: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--paso-border-strong), transparent);
margin: 36px 0;
}
.text-content code {
font-family: var(--paso-font-mono);
background: rgba(0, 229, 255, 0.1);
border: 1px solid rgba(0, 229, 255, 0.25);
padding: 2px 6px;
font-size: 0.9em;
color: var(--paso-cyan);
}
.text-content table {
width: 100%;
margin: 20px 0;
border-collapse: collapse;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
}
.text-content th, .text-content td {
padding: 12px 16px;
border-bottom: 1px solid var(--paso-border);
text-align: left;
}
.text-content th {
font-family: var(--paso-font-heading);
letter-spacing: 0.15em;
text-transform: uppercase;
font-size: 13px;
color: #fff;
background: rgba(255, 27, 158, 0.1);
}
.back-to-top {
--btn-icon: url("https://template-assets.tebex.io/images/chevron.svg");
margin: 50px auto;
}
.back-to-top::before { rotate: 90deg; }
/* ============== Boutique intro (description de la boutique) ============== */
.paso-shop-intro {
text-align: center;
max-width: 760px;
margin: 0 auto 50px;
padding: 32px 36px;
background: linear-gradient(135deg, rgba(15, 6, 32, 0.7), rgba(106, 27, 154, 0.15));
border: 1px solid var(--paso-border);
border-radius: 0;
position: relative;
}
.paso-shop-intro::before,
.paso-shop-intro::after {
content: '';
position: absolute;
width: 60px;
height: 60px;
border: 2px solid var(--paso-magenta);
pointer-events: none;
}
.paso-shop-intro::before {
top: -2px;
left: -2px;
border-right: 0;
border-bottom: 0;
}
.paso-shop-intro::after {
bottom: -2px;
right: -2px;
border-left: 0;
border-top: 0;
}
.paso-shop-intro p {
font-size: 15px;
line-height: 1.75;
color: var(--paso-text-dim);
margin: 8px 0;
}
.paso-shop-intro p strong {
font-family: var(--paso-font-display);
color: var(--paso-magenta);
font-weight: 400;
letter-spacing: 0.04em;
text-shadow: 0 0 12px rgba(255, 27, 158, 0.4);
}
/* ============== FINAL CTA — minimaliste, juste de la typo ============== */
.paso-final-cta {
max-width: 680px;
margin: 80px auto 20px;
padding: 0;
text-align: center;
background: transparent;
border: 0;
overflow: visible;
}
.paso-final-cta::before,
.paso-final-cta::after { display: none; }
.paso-final-cta-marker {
display: block;
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.6em;
color: var(--paso-cyan);
text-transform: uppercase;
margin: 0 0 24px;
text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
position: relative;
padding-top: 30px;
}
.paso-final-cta-marker::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 20px;
background: var(--paso-cyan);
box-shadow: 0 0 8px var(--paso-cyan);
}
.paso-final-cta p {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: clamp(22px, 3vw, 32px);
color: var(--paso-text-white);
line-height: 1.45;
margin: 0 auto 28px;
letter-spacing: 0.005em;
max-width: 600px;
}
.paso-final-cta-signature {
display: block;
font-family: var(--paso-font-display);
font-size: 12px;
letter-spacing: 0.5em;
color: var(--paso-magenta);
text-transform: uppercase;
margin: 0 0 40px;
text-shadow: 0 0 14px rgba(255, 27, 158, 0.55);
}
/* ============== FOOTER AMÉLIORÉ (gradient, accents, social) ============== */
.paso-footer,
.site-footer {
margin-top: 90px;
padding: 60px var(--paso-pad) 30px;
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 27, 158, 0.12), transparent 60%),
linear-gradient(180deg, transparent, var(--paso-bg-2) 30%, var(--paso-bg));
border-top: 1px solid var(--paso-border);
position: relative;
}
.paso-footer::before,
.site-footer::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 2px;
background: linear-gradient(to right, transparent, var(--paso-magenta), var(--paso-cyan), transparent);
box-shadow: 0 0 20px rgba(255, 27, 158, 0.6);
}
.paso-footer::after,
.site-footer::after {
content: '';
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
font-family: var(--paso-font-display);
font-size: 11px;
letter-spacing: 0.5em;
color: var(--paso-cyan);
text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
content: '★ PASO 80 ★';
text-transform: uppercase;
background: var(--paso-bg);
padding: 0 16px;
}
.paso-footer-grid {
margin-top: 36px;
}
.paso-foot-col {
position: relative;
}
.paso-foot-col h4 {
position: relative;
padding-bottom: 8px;
margin-bottom: 18px;
}
.paso-foot-col h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(to right, var(--paso-magenta), var(--paso-cyan));
box-shadow: 0 0 8px rgba(255, 27, 158, 0.5);
}
.paso-foot-col a {
position: relative;
padding-left: 0;
transition: padding-left var(--paso-transition), color var(--paso-transition);
}
.paso-foot-col a::before {
content: '→';
position: absolute;
left: -16px;
top: 50%;
transform: translateY(-50%);
color: var(--paso-cyan);
opacity: 0;
transition: all var(--paso-transition);
}
.paso-foot-col a:hover {
padding-left: 16px;
color: var(--paso-cyan);
}
.paso-foot-col a:hover::before {
opacity: 1;
left: 0;
}
.paso-foot-brand {
position: relative;
}
.paso-foot-brand::after {
content: '';
position: absolute;
top: 0;
right: -20px;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--paso-border-strong), transparent);
}
@media (max-width: 600px) {
.paso-foot-brand::after { display: none; }
}
/* ============== CMS CONTENT — Classes pour les pages CMS (.paso-cms-*) ============== */
/* Hero banner au début de chaque page CMS */
.paso-cms-banner {
position: relative;
margin: -20px -30px 50px;
padding: 50px 40px;
background: var(--paso-bg-2);
border: 1px solid var(--paso-border);
overflow: hidden;
text-align: center;
}
@media (max-width: 600px) {
.paso-cms-banner { margin: -10px -10px 40px; padding: 36px 22px; }
}
.paso-cms-banner::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(0, 229, 255, 0.18) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 27, 158, 0.15) 1px, transparent 1px);
background-size: 40px 40px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.paso-cms-banner > * { position: relative; z-index: 1; }
.paso-cms-banner--histoire {
background:
radial-gradient(ellipse at 50% 60%, rgba(255, 27, 158, 0.35), transparent 65%),
linear-gradient(180deg, #07030f 0%, #1a0a30 100%);
}
.paso-cms-banner--mexique {
background:
radial-gradient(ellipse at 50% 30%, rgba(255, 179, 0, 0.4), transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(255, 69, 0, 0.25), transparent 55%),
linear-gradient(180deg, #4a1e08 0%, #2a0a02 100%);
}
.paso-cms-banner--usa {
background:
radial-gradient(ellipse at 30% 30%, rgba(255, 20, 147, 0.45), transparent 55%),
radial-gradient(ellipse at 70% 70%, rgba(0, 191, 255, 0.35), transparent 55%),
linear-gradient(180deg, #1a0a3a 0%, #0a0218 100%);
}
.paso-cms-banner--reglement {
background:
radial-gradient(ellipse at 50% 50%, rgba(106, 27, 154, 0.4), transparent 60%),
linear-gradient(180deg, #0a0218 0%, #1a0a3a 100%);
}
.paso-cms-banner-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border: 2px solid var(--paso-magenta);
border-radius: 50%;
margin-bottom: 18px;
font-size: 26px;
color: var(--paso-magenta);
background: rgba(0, 0, 0, 0.45);
text-shadow: 0 0 14px rgba(255, 27, 158, 0.7);
box-shadow: 0 0 24px rgba(255, 27, 158, 0.4), inset 0 0 14px rgba(255, 27, 158, 0.2);
}
.paso-cms-banner--mexique .paso-cms-banner-icon {
border-color: var(--paso-gold);
color: var(--paso-gold);
text-shadow: 0 0 14px rgba(255, 179, 0, 0.7);
box-shadow: 0 0 24px rgba(255, 179, 0, 0.4), inset 0 0 14px rgba(255, 179, 0, 0.2);
}
.paso-cms-banner--usa .paso-cms-banner-icon {
border-color: var(--paso-cyan);
color: var(--paso-cyan);
text-shadow: 0 0 14px rgba(0, 229, 255, 0.7);
box-shadow: 0 0 24px rgba(0, 229, 255, 0.4), inset 0 0 14px rgba(0, 229, 255, 0.2);
}
.paso-cms-banner-kicker {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--paso-font-mono);
font-size: 12px;
letter-spacing: 0.45em;
color: var(--paso-cyan);
text-transform: uppercase;
margin-bottom: 16px;
text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}
.paso-cms-banner-kicker::before,
.paso-cms-banner-kicker::after {
content: '';
width: 20px;
height: 1px;
background: var(--paso-cyan);
}
.paso-cms-banner-title {
font-family: var(--paso-font-display);
font-size: clamp(32px, 5vw, 52px);
line-height: 1.05;
letter-spacing: 0.04em;
background: linear-gradient(180deg, #fff 30%, var(--paso-pink) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 14px;
text-shadow: 0 0 40px rgba(255, 27, 158, 0.3);
}
.paso-cms-banner-sub {
font-family: var(--paso-font-heading);
font-size: clamp(14px, 1.8vw, 18px);
letter-spacing: 0.25em;
color: #fff;
text-transform: uppercase;
margin-bottom: 20px;
opacity: 0.85;
}
.paso-cms-banner-desc {
max-width: 640px;
margin: 0 auto;
font-family: var(--paso-font-body);
font-style: italic;
font-size: 16px;
color: var(--paso-text-dim);
line-height: 1.7;
}
/* Eyebrow + meta intro */
.paso-cms-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--paso-font-mono);
font-size: 12px;
letter-spacing: 0.45em;
color: var(--paso-cyan);
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
margin-bottom: 18px;
}
.paso-cms-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-family: var(--paso-font-display);
font-size: 18px;
color: var(--paso-text-dim);
margin: 20px 0 30px;
}
.paso-cms-meta-line {
width: 80px;
height: 1px;
background: var(--paso-cyan);
box-shadow: 0 0 6px var(--paso-cyan);
}
/* Sommaire (TOC) */
.paso-cms-toc {
background: var(--paso-surface);
border: 1px solid var(--paso-border);
border-left: 3px solid var(--paso-magenta);
padding: 26px 28px;
margin: 30px 0 40px;
}
.paso-cms-toc h2 {
font-family: var(--paso-font-heading);
font-size: 16px;
letter-spacing: 0.3em;
color: var(--paso-magenta);
text-transform: uppercase;
margin-bottom: 16px;
text-shadow: 0 0 10px rgba(255, 27, 158, 0.4);
}
.paso-cms-toc ol {
list-style: none;
margin: 0;
padding: 0;
counter-reset: paso-toc;
display: grid;
gap: 6px;
}
.paso-cms-toc ol li {
margin: 0;
padding: 0;
}
.paso-cms-toc ol li::marker { content: ''; }
.paso-cms-toc a {
display: flex;
align-items: baseline;
gap: 14px;
padding: 8px 0;
font-family: var(--paso-font-body);
color: var(--paso-text);
text-decoration: none;
transition: all var(--paso-transition);
border-bottom: 1px dashed transparent;
}
.paso-cms-toc a:hover {
color: var(--paso-cyan);
padding-left: 8px;
border-bottom-color: var(--paso-cyan);
}
.paso-cms-toc a span {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 6px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--paso-border);
font-family: var(--paso-font-mono);
font-size: 12px;
color: var(--paso-cyan);
}
/* Chapter (chapitre numéroté) */
.paso-cms-chapter {
margin: 50px 0 40px;
padding: 28px 30px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
border-left: 3px solid var(--paso-cyan);
position: relative;
transition: border-color var(--paso-transition);
}
.paso-cms-chapter:hover { border-color: var(--paso-magenta); }
.paso-cms-chapter--dark {
background: rgba(106, 27, 154, 0.08);
border-left-color: var(--paso-magenta);
}
.paso-cms-chapter--final {
border-left-color: var(--paso-gold);
background: rgba(255, 179, 0, 0.06);
box-shadow: 0 0 30px rgba(255, 179, 0, 0.1);
}
.paso-cms-chapter-tag {
display: inline-block;
font-family: var(--paso-font-mono);
font-size: 12px;
letter-spacing: 0.3em;
color: var(--paso-magenta);
text-transform: uppercase;
margin-bottom: 8px;
text-shadow: 0 0 8px rgba(255, 27, 158, 0.4);
}
.paso-cms-chapter-num {
position: absolute;
top: 10px;
right: 20px;
font-family: var(--paso-font-display);
font-size: 60px;
line-height: 1;
color: rgba(255, 255, 255, 0.06);
pointer-events: none;
user-select: none;
}
.paso-cms-chapter h2,
.paso-cms-chapter h3 {
font-family: var(--paso-font-display);
font-size: clamp(24px, 3.5vw, 32px);
letter-spacing: 0.04em;
color: #fff;
margin: 0 0 16px;
border: 0;
padding: 0;
}
.paso-cms-lead {
font-family: var(--paso-font-body);
font-style: italic;
font-size: 17px;
color: var(--paso-text);
line-height: 1.7;
padding-left: 16px;
border-left: 2px solid var(--paso-magenta);
margin: 12px 0;
}
/* Grids génériques */
.paso-cms-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px;
margin: 30px 0;
}
.paso-cms-grid-2 {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* ============== CARDS DE PERSONNAGES — Style "dossier" ============== */
.paso-cms-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
overflow: hidden;
transition: all var(--paso-transition);
}
/* Bande colorée en haut — diffère selon la "side" */
.paso-cms-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 70px;
background:
radial-gradient(circle at 50% 100%, rgba(0, 229, 255, 0.35), transparent 70%),
linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 229, 255, 0.05));
border-bottom: 1px solid rgba(0, 229, 255, 0.3);
z-index: 0;
}
/* Cercle avec initiale (en haut centré, sur la bande) */
.paso-cms-card h3,
.paso-cms-card h4 {
position: relative;
z-index: 1;
margin: 24px 22px 0 22px !important;
padding: 60px 0 0 !important;
border: 0 !important;
font-family: var(--paso-font-display);
font-size: 19px;
letter-spacing: 0.04em;
color: #fff;
line-height: 1.2;
text-align: center;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
/* Avatar circulaire avec première lettre du nom */
.paso-cms-card h3::before,
.paso-cms-card h4::before {
content: '';
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 70px;
border-radius: 50%;
background:
radial-gradient(circle, rgba(7, 3, 15, 0.95), rgba(15, 6, 32, 0.85));
border: 2px solid var(--paso-cyan);
box-shadow: 0 0 24px rgba(0, 229, 255, 0.45), inset 0 0 14px rgba(0, 229, 255, 0.12);
z-index: 2;
}
/* Tag de "side" (El Norte / The South / Disparue) en haut gauche */
.paso-cms-card-tag {
position: absolute;
top: 12px;
left: 14px;
z-index: 2;
display: inline-block;
padding: 4px 10px;
font-family: var(--paso-font-mono);
font-size: 10px;
letter-spacing: 0.25em;
color: var(--paso-cyan);
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 229, 255, 0.5);
text-transform: uppercase;
text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
margin: 0 !important;
}
/* Rôle (sous le nom) */
.paso-cms-card-role {
position: relative;
z-index: 1;
text-align: center;
margin: 6px 22px 16px !important;
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--paso-text-dim);
text-transform: uppercase;
}
/* Description */
.paso-cms-card p:not(.paso-cms-card-role) {
margin: 0 22px 22px !important;
padding-top: 14px;
border-top: 1px dashed var(--paso-border);
font-size: 13.5px;
color: var(--paso-text-dim);
line-height: 1.6;
text-align: left;
}
/* Hover : remontée + glow */
.paso-cms-card:hover {
border-color: var(--paso-cyan);
transform: translateY(-5px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 229, 255, 0.2);
}
.paso-cms-card:hover h3::before,
.paso-cms-card:hover h4::before {
box-shadow: 0 0 32px rgba(0, 229, 255, 0.7), inset 0 0 14px rgba(0, 229, 255, 0.2);
}
/* === Variantes par "side" === */
/* El Norte (Mexique) — orange/gold */
.paso-cms-card:has(.paso-cms-card-tag:where([class*="norte"], :is(span)):not(:empty)) {
/* fallback générique */
}
/* On utilise les valeurs textuelles avec attribute selectors */
.paso-cms-card .paso-cms-card-tag {
/* default cyan */
}
/* Norte */
.paso-cms-card[data-side="norte"]::before,
.paso-cms-card:has(.paso-cms-card-tag) .paso-cms-card-tag {
/* fallback en JS-less */
}
/* On définit via classes parent */
.paso-cms-card--norte::before {
background:
radial-gradient(circle at 50% 100%, rgba(255, 179, 0, 0.35), transparent 70%),
linear-gradient(135deg, rgba(255, 122, 26, 0.18), rgba(255, 122, 26, 0.05));
border-bottom-color: rgba(255, 179, 0, 0.3);
}
.paso-cms-card--norte .paso-cms-card-tag {
color: var(--paso-gold);
border-color: rgba(255, 179, 0, 0.5);
text-shadow: 0 0 8px rgba(255, 179, 0, 0.5);
}
.paso-cms-card--norte h3::before,
.paso-cms-card--norte h4::before {
border-color: var(--paso-gold);
box-shadow: 0 0 24px rgba(255, 179, 0, 0.45), inset 0 0 14px rgba(255, 179, 0, 0.12);
}
.paso-cms-card--norte:hover {
border-color: var(--paso-gold);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 179, 0, 0.25);
}
/* South */
.paso-cms-card--south::before {
background:
radial-gradient(circle at 50% 100%, rgba(0, 229, 255, 0.35), transparent 70%),
linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 229, 255, 0.05));
border-bottom-color: rgba(0, 229, 255, 0.3);
}
/* Ghost / Disparue / Décédé — magenta */
.paso-cms-card--ghost {
border-style: solid;
opacity: 1;
}
.paso-cms-card--ghost::before {
background:
radial-gradient(circle at 50% 100%, rgba(255, 27, 158, 0.35), transparent 70%),
linear-gradient(135deg, rgba(255, 27, 158, 0.18), rgba(255, 27, 158, 0.05));
border-bottom-color: rgba(255, 27, 158, 0.4);
}
.paso-cms-card--ghost .paso-cms-card-tag {
color: var(--paso-magenta);
border-color: rgba(255, 27, 158, 0.6);
text-shadow: 0 0 8px rgba(255, 27, 158, 0.5);
}
.paso-cms-card--ghost h3::before,
.paso-cms-card--ghost h4::before {
border-color: var(--paso-magenta);
box-shadow: 0 0 24px rgba(255, 27, 158, 0.5), inset 0 0 14px rgba(255, 27, 158, 0.12);
}
.paso-cms-card--ghost:hover {
border-color: var(--paso-magenta);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 27, 158, 0.3);
}
/* Auto-style selon le texte du tag (fallback CSS pur via :has()) */
.paso-cms-card:has(.paso-cms-card-tag:is(:--norte)),
.paso-cms-card-tag {
/* Pas utilisable sans JS — on garde la classe modifier */
}
/* Faction card (avec devise + meta) */
.paso-cms-faction {
padding: 28px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
border-left: 4px solid var(--paso-magenta);
margin: 18px 0;
transition: all var(--paso-transition);
}
.paso-cms-faction:hover {
background: var(--paso-surface-hover);
border-left-color: var(--paso-cyan);
transform: translateX(4px);
}
.paso-cms-faction-tag {
display: inline-block;
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.3em;
color: var(--paso-cyan);
text-transform: uppercase;
margin-bottom: 10px;
text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}
.paso-cms-faction h3 {
font-family: var(--paso-font-display);
font-size: 24px;
letter-spacing: 0.03em;
color: #fff;
margin: 0 0 8px;
border: 0;
padding: 0;
}
.paso-cms-faction-motto {
font-family: var(--paso-font-mono);
font-style: italic;
color: var(--paso-magenta);
margin-bottom: 14px;
text-shadow: 0 0 8px rgba(255, 27, 158, 0.3);
}
.paso-cms-faction p { color: var(--paso-text-dim); line-height: 1.65; margin-bottom: 14px; }
.paso-cms-faction-meta {
display: grid;
gap: 6px;
padding-top: 14px;
margin-top: 14px;
border-top: 1px solid var(--paso-border);
font-size: 13px;
}
.paso-cms-faction-meta div { display: flex; gap: 10px; }
.paso-cms-faction-meta strong {
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--paso-cyan);
text-transform: uppercase;
flex: 0 0 110px;
}
/* Stats inline */
.paso-cms-stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px 50px;
margin: 30px 0;
padding: 22px 16px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
}
.paso-cms-stats > div { text-align: center; }
.paso-cms-stats span {
display: block;
font-family: var(--paso-font-display);
font-size: 28px;
color: var(--paso-magenta);
text-shadow: 0 0 12px rgba(255, 27, 158, 0.5);
}
.paso-cms-stats small {
font-family: var(--paso-font-mono);
font-size: 10px;
letter-spacing: 0.3em;
color: var(--paso-text-mute);
text-transform: uppercase;
}
/* Rules list (numbered RP rules) */
.paso-cms-rules {
list-style: none;
padding: 0;
margin: 20px 0;
counter-reset: paso-rule;
display: grid;
gap: 14px;
}
.paso-cms-rules > li {
counter-increment: paso-rule;
position: relative;
padding: 18px 22px 18px 64px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
border-left: 3px solid var(--paso-cyan);
transition: all var(--paso-transition);
}
.paso-cms-rules > li::before {
content: counter(paso-rule, decimal-leading-zero);
position: absolute;
top: 18px;
left: 18px;
font-family: var(--paso-font-display);
font-size: 22px;
color: var(--paso-magenta);
text-shadow: 0 0 10px rgba(255, 27, 158, 0.4);
line-height: 1;
}
.paso-cms-rules > li:hover {
background: var(--paso-surface-hover);
border-left-color: var(--paso-magenta);
transform: translateX(4px);
}
.paso-cms-rules > li h3,
.paso-cms-rules > li h4 {
font-family: var(--paso-font-display);
font-size: 17px;
letter-spacing: 0.02em;
color: #fff;
margin: 0 0 6px;
border: 0;
padding: 0;
}
.paso-cms-rules > li p {
color: var(--paso-text-dim);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.paso-cms-rules > li ul {
margin-top: 8px;
padding-left: 1.2em;
color: var(--paso-text-dim);
}
/* Mystères / questions */
.paso-cms-mystery {
list-style: none;
padding: 0;
margin: 30px 0;
display: grid;
gap: 16px;
}
.paso-cms-mystery > li {
display: flex;
gap: 22px;
padding: 22px 24px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
border-left: 3px solid var(--paso-magenta);
transition: all var(--paso-transition);
}
.paso-cms-mystery > li:hover {
background: var(--paso-surface-hover);
transform: translateX(4px);
}
.paso-cms-mystery-n {
font-family: var(--paso-font-display);
font-size: 36px;
color: var(--paso-magenta);
text-shadow: 0 0 14px rgba(255, 27, 158, 0.5);
flex-shrink: 0;
line-height: 1;
}
.paso-cms-mystery h3 {
font-family: var(--paso-font-display);
font-size: 18px;
margin: 0 0 6px;
color: #fff;
border: 0;
padding: 0;
}
.paso-cms-mystery p {
color: var(--paso-text-dim);
font-size: 14px;
line-height: 1.65;
margin: 0;
}
/* Tabs/anchor navigation */
.paso-cms-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 30px 0;
padding: 12px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
position: sticky;
top: 80px;
z-index: 50;
backdrop-filter: var(--paso-blur);
}
/* Titres de catégorie ciblés par les tabs (scroll smooth + visible sous tabs sticky) */
.paso-cms-cat-title {
scroll-margin-top: 140px;
font-family: var(--paso-font-display) !important;
font-size: clamp(34px, 5vw, 50px) !important;
letter-spacing: 0.06em !important;
text-align: center;
margin: 80px 0 30px !important;
padding: 20px 0 !important;
position: relative;
background: linear-gradient(180deg, #fff 10%, var(--paso-magenta) 90%);
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
border: 0 !important;
text-shadow: 0 0 40px rgba(255, 27, 158, 0.3);
}
.paso-cms-cat-title::before,
.paso-cms-cat-title::after {
content: '';
position: absolute;
left: 50%;
width: 80px;
height: 1px;
background: var(--paso-cyan);
box-shadow: 0 0 8px var(--paso-cyan);
transform: translateX(-50%);
}
.paso-cms-cat-title::before { top: 0; }
.paso-cms-cat-title::after { bottom: 0; }
html { scroll-padding-top: 140px; }
.paso-cms-tabs a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
font-family: var(--paso-font-heading);
font-size: 13px;
letter-spacing: 0.18em;
color: var(--paso-text-dim);
text-transform: uppercase;
border: 1px solid transparent;
transition: all var(--paso-transition);
}
.paso-cms-tabs a:hover,
.paso-cms-tabs a.is-active {
color: var(--paso-magenta);
border-color: var(--paso-magenta);
background: rgba(255, 27, 158, 0.08);
text-shadow: none;
}
/* Lexique (definition list) */
.paso-cms-lexique {
margin: 20px 0;
}
.paso-cms-lex-letters {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 14px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
margin-bottom: 30px;
justify-content: center;
}
.paso-cms-lex-letters a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-family: var(--paso-font-display);
color: var(--paso-cyan);
border: 1px solid var(--paso-border);
text-decoration: none !important;
transition: all var(--paso-transition);
}
.paso-cms-lex-letters a:hover {
background: var(--paso-magenta);
color: #fff;
border-color: var(--paso-magenta);
text-shadow: none;
}
.paso-cms-lex-letter {
font-family: var(--paso-font-display);
font-size: 38px !important;
color: var(--paso-magenta) !important;
letter-spacing: 0.04em;
margin: 26px 0 12px !important;
padding-bottom: 6px !important;
border-bottom: 1px solid var(--paso-border) !important;
}
.paso-cms-lexique dt {
font-family: var(--paso-font-display);
font-size: 16px;
color: #fff;
margin-top: 14px;
padding: 8px 12px;
background: rgba(255, 27, 158, 0.08);
border-left: 2px solid var(--paso-magenta);
}
.paso-cms-lexique dd {
margin: 4px 0 0 0;
padding: 8px 12px 8px 14px;
color: var(--paso-text-dim);
font-size: 14px;
line-height: 1.6;
}
/* CTA final */
.paso-cms-final {
margin: 50px 0 20px;
padding: 40px 28px;
background: var(--paso-surface);
border: 1px solid var(--paso-magenta);
text-align: center;
position: relative;
}
.paso-cms-final::before,
.paso-cms-final::after { content: none; }
.paso-cms-final h2,
.paso-cms-final h3 {
font-family: var(--paso-font-display);
font-size: clamp(24px, 3.5vw, 34px);
letter-spacing: 0.04em;
color: #fff;
border: 0;
margin: 0 0 14px;
padding: 0;
}
.paso-cms-final p {
color: var(--paso-text-dim);
margin-bottom: 22px;
line-height: 1.7;
}
.paso-cms-final-buttons {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.paso-cms-final-quote {
font-family: var(--paso-font-mono);
font-style: italic;
font-size: 14px;
color: var(--paso-text-mute);
margin-top: 18px !important;
letter-spacing: 0.05em;
}
/* Safe zones grid */
.paso-cms-safe-grid {
list-style: none;
padding: 0;
margin: 20px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.paso-cms-safe-grid li {
padding: 14px 16px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
border-left: 2px solid var(--paso-cyan);
margin: 0;
}
.paso-cms-safe-grid li::marker { content: ''; }
.paso-cms-safe-grid li strong {
display: block;
font-family: var(--paso-font-display);
color: #fff;
margin-bottom: 4px;
font-size: 14px;
}
.paso-cms-safe-grid li p {
color: var(--paso-text-dim);
font-size: 12px;
margin: 0;
line-height: 1.5;
}
/* Section anchor / heading */
.paso-cms-section {
margin: 40px 0;
}
.paso-cms-section-num {
display: inline-block;
font-family: var(--paso-font-display);
font-size: 30px;
color: var(--paso-cyan);
margin-right: 14px;
text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}
.paso-cms-section h2 {
display: flex;
align-items: center;
gap: 12px;
}
/* Quote block — citation imposante */
.paso-cms-quote {
position: relative;
margin: 36px 0;
padding: 36px 50px 36px 70px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
border-left: 4px solid var(--paso-magenta);
font-family: var(--paso-font-mono);
font-style: italic;
font-size: 17px;
line-height: 1.7;
color: var(--paso-text);
}
.paso-cms-quote::before {
content: '"';
position: absolute;
top: -10px;
left: 18px;
font-family: var(--paso-font-display);
font-size: 80px;
line-height: 1;
color: var(--paso-magenta);
text-shadow: 0 0 20px rgba(255, 27, 158, 0.6);
opacity: 0.7;
}
.paso-cms-quote cite {
display: block;
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--paso-border);
font-family: var(--paso-font-heading);
font-size: 13px;
letter-spacing: 0.22em;
color: var(--paso-cyan);
text-transform: uppercase;
font-style: normal;
}
/* Section header avec icône XL */
.paso-cms-section-icon {
display: flex;
align-items: center;
gap: 22px;
margin: 60px 0 30px;
padding-bottom: 20px;
border-bottom: 1px solid var(--paso-border);
position: relative;
}
.paso-cms-section-icon::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 120px;
height: 2px;
background: linear-gradient(to right, var(--paso-magenta), transparent);
box-shadow: 0 0 8px rgba(255, 27, 158, 0.5);
}
.paso-cms-section-icon .icon-wrap {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--paso-magenta);
background: rgba(255, 27, 158, 0.08);
border: 1px solid var(--paso-magenta);
flex-shrink: 0;
text-shadow: 0 0 14px rgba(255, 27, 158, 0.6);
}
.paso-cms-section-icon h2 {
font-family: var(--paso-font-display);
font-size: clamp(26px, 4vw, 38px);
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
letter-spacing: 0.04em;
background: linear-gradient(180deg, #fff 20%, var(--paso-pink) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.paso-cms-section-icon .subtitle {
display: block;
font-family: var(--paso-font-mono);
font-size: 12px;
letter-spacing: 0.3em;
color: var(--paso-cyan);
text-transform: uppercase;
margin-top: 4px;
}
/* Key fact box — highlight d'une info clé */
.paso-cms-key-fact {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
margin: 24px 0;
padding: 20px 24px;
background: linear-gradient(135deg, rgba(0, 229, 255, 0.05), rgba(255, 27, 158, 0.08));
border: 1px solid var(--paso-border-strong);
border-left: 3px solid var(--paso-cyan);
align-items: center;
}
.paso-cms-key-fact .icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 229, 255, 0.15);
color: var(--paso-cyan);
font-size: 22px;
text-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
flex-shrink: 0;
}
.paso-cms-key-fact strong {
display: block;
font-family: var(--paso-font-display);
font-size: 17px;
color: #fff;
margin-bottom: 4px;
letter-spacing: 0.02em;
}
.paso-cms-key-fact p {
margin: 0;
font-size: 14px;
color: var(--paso-text-dim);
line-height: 1.55;
}
/* Place card — version pro avec gradient, glow, et icône emoji visible */
.paso-cms-places {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
gap: 18px !important;
margin: 30px 0 !important;
list-style: none !important;
padding: 0 !important;
}
/* Si Tebex wrap chaque card dans un , on fix */
.paso-cms-places > p { display: contents; }
.paso-cms-places > div,
.paso-cms-places > article,
.paso-cms-place {
position: relative;
padding: 24px 22px 22px;
background:
linear-gradient(135deg, rgba(15, 6, 32, 0.85), rgba(106, 27, 154, 0.12) 80%, rgba(255, 27, 158, 0.08)),
var(--paso-surface);
border: 1px solid var(--paso-border);
transition: all var(--paso-transition);
overflow: hidden;
margin: 0;
}
/* Top accent (simple, propre, pas de lignes moches au hover) */
.paso-cms-place::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, var(--paso-magenta), var(--paso-cyan));
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s ease;
}
.paso-cms-place:hover {
border-color: var(--paso-magenta);
transform: translateY(-4px);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 27, 158, 0.25);
}
.paso-cms-place:hover::before { transform: scaleX(1); }
/* Icon (emoji ou span) — gros, centré dans cercle néon */
.paso-cms-place .place-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 14px;
font-size: 26px;
line-height: 1;
background: radial-gradient(circle, rgba(255, 27, 158, 0.18), rgba(255, 27, 158, 0.04));
border: 1.5px solid var(--paso-magenta);
border-radius: 50%;
box-shadow: 0 0 18px rgba(255, 27, 158, 0.35), inset 0 0 10px rgba(255, 27, 158, 0.15);
position: relative;
z-index: 1;
}
.paso-cms-place .place-tag {
display: inline-block;
font-family: var(--paso-font-mono);
font-size: 10px;
letter-spacing: 0.35em;
color: var(--paso-cyan);
text-transform: uppercase;
margin-left: 12px;
vertical-align: middle;
text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}
.paso-cms-place h3,
.paso-cms-place h4 {
font-family: var(--paso-font-display) !important;
font-size: 19px !important;
color: #fff !important;
margin: 0 0 10px !important;
border: 0 !important;
padding: 0 !important;
letter-spacing: 0.02em;
line-height: 1.2;
text-shadow: 0 0 14px rgba(255, 27, 158, 0.3);
}
.paso-cms-place p {
font-size: 13.5px;
color: var(--paso-text-dim);
line-height: 1.6;
margin: 0;
}
/* Divider visuel néon */
.paso-cms-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin: 50px 0;
color: var(--paso-cyan);
font-family: var(--paso-font-mono);
font-size: 12px;
letter-spacing: 0.5em;
text-transform: uppercase;
text-shadow: 0 0 10px var(--paso-cyan);
}
.paso-cms-divider::before,
.paso-cms-divider::after {
content: '';
flex: 1;
max-width: 120px;
height: 1px;
background: linear-gradient(to right, transparent, var(--paso-cyan));
box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}
.paso-cms-divider::after {
background: linear-gradient(to left, transparent, var(--paso-cyan));
}
/* Cross navigation (bouton entre pages) */
.paso-cms-cross {
margin: 40px 0;
padding: 30px 24px;
background: var(--paso-surface);
border: 1px solid var(--paso-border);
text-align: center;
}
.paso-cms-cross-kicker {
font-family: var(--paso-font-mono);
font-size: 12px;
letter-spacing: 0.4em;
color: var(--paso-cyan);
text-transform: uppercase;
margin-bottom: 8px;
}
.paso-cms-cross h3 {
font-family: var(--paso-font-display);
font-size: 26px;
color: #fff;
margin: 0 0 10px;
border: 0;
padding: 0;
}
.paso-cms-cross p {
color: var(--paso-text-dim);
margin-bottom: 18px;
}
/* ============== FOOTER ============== */
.paso-footer,
.site-footer {
margin-top: 80px;
padding: 56px var(--paso-pad) 28px;
background: linear-gradient(180deg, transparent, var(--paso-bg) 25%);
border-top: 1px solid var(--paso-border);
position: relative;
}
.paso-footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 40px;
max-width: var(--paso-container-wide);
margin: 0 auto 40px;
}
.paso-foot-col h4 {
font-family: var(--paso-font-heading);
font-size: 14px;
letter-spacing: 0.24em;
color: var(--paso-magenta);
margin-bottom: 18px;
text-transform: uppercase;
}
.paso-foot-col a,
.paso-foot-col p {
display: block;
font-family: var(--paso-font-body);
font-size: 14px;
color: var(--paso-text-dim);
padding: 5px 0;
transition: color var(--paso-transition);
}
.paso-foot-col a:hover { color: var(--paso-cyan); }
.paso-foot-col a i { margin-right: 6px; opacity: 0.7; }
.paso-foot-brand img {
height: 60px;
width: auto;
margin-bottom: 14px;
filter: drop-shadow(0 0 16px rgba(255, 27, 158, 0.55));
}
.paso-foot-brand strong {
display: block;
font-family: var(--paso-font-display);
font-size: 22px;
letter-spacing: 0.16em;
color: #fff;
margin-bottom: 4px;
}
.paso-foot-brand span {
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.25em;
color: var(--paso-text-mute);
text-transform: uppercase;
}
.paso-footer-mono {
font-family: var(--paso-font-mono);
font-size: 12px;
letter-spacing: 0.1em;
color: var(--paso-cyan);
background: rgba(0, 229, 255, 0.06);
border: 1px dashed rgba(0, 229, 255, 0.3);
padding: 8px 12px;
margin-top: 8px;
text-align: center;
}
.paso-we-accept {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
list-style: none;
padding: 26px 0;
border-top: 1px solid var(--paso-border);
margin: 0 auto;
max-width: var(--paso-container-wide);
}
.paso-we-accept li img {
height: 24px;
width: auto;
opacity: 0.6;
filter: grayscale(20%);
transition: opacity var(--paso-transition);
}
.paso-we-accept li img:hover { opacity: 1; }
.paso-copyright,
.site-footer .copyright {
text-align: center;
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.25em;
color: var(--paso-text-mute);
padding-top: 20px;
border-top: 1px solid var(--paso-border);
text-transform: uppercase;
max-width: var(--paso-container-wide);
margin: 0 auto;
line-height: 1.6;
}
/* Tebex legal footer */
.site-footer-credit {
background: #050108;
border-top: 1px solid var(--paso-border);
color: var(--paso-text-mute);
font-size: 11px;
}
.site-footer-credit .site-footer-credit-inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
gap: 18px;
padding: 18px var(--paso-pad);
max-width: var(--paso-container-wide);
margin: 0 auto;
}
@media (min-width: 961px) {
.site-footer-credit .site-footer-credit-inner {
flex-direction: row;
align-items: center;
}
}
.site-footer-credit .copyright {
display: flex;
gap: 18px;
font-family: var(--paso-font-mono);
letter-spacing: 0.15em;
text-transform: uppercase;
}
.site-footer-credit .legal {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.site-footer-credit .legal a {
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--paso-transition);
}
.site-footer-credit .legal a:hover { color: var(--paso-cyan); }
/* ============== POPUPS / MODALS ============== */
.popup {
--fade-duration: 300ms;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
z-index: 1000;
overflow: hidden scroll;
scrollbar-width: thin;
scrollbar-color: var(--paso-magenta) transparent;
background: rgba(7, 3, 15, 0.85);
backdrop-filter: blur(8px);
transition: opacity var(--fade-duration) ease, display var(--fade-duration) allow-discrete;
}
@starting-style { .popup { opacity: 0; } }
.popup[hidden] { opacity: 0; display: none; }
.popup-scroll-cont {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
padding: 20px;
}
.popup-content {
position: relative;
width: 100%;
max-width: 560px;
padding: 28px;
background: var(--paso-surface-strong);
border: 1px solid var(--paso-border-strong);
border-top: 3px solid var(--paso-magenta);
backdrop-filter: var(--paso-blur);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 27, 158, 0.2);
transition: translate var(--fade-duration) ease, opacity var(--fade-duration) ease;
color: var(--paso-text);
}
@starting-style { .popup-content { translate: 0 20px; } }
.popup-close {
position: absolute;
top: 0;
right: 0;
width: 48px;
height: 48px;
background-color: var(--paso-text);
mask: url("https://template-assets.tebex.io/images/close.svg") center / 22px no-repeat;
font-size: 0;
transition: background var(--paso-transition);
cursor: pointer;
}
.popup-close:hover { background-color: var(--paso-magenta); }
.store-product-popup-content { max-width: 820px; }
.product-options-popup .popup-content { max-width: 480px; }
.login-popup { z-index: 1002; }
.login-popup-content { max-width: 420px; }
/* ============== BASKET ============== */
.basket-popup { background: transparent; }
.basket-popup .popup-scroll-cont { justify-content: flex-end; padding: 0; }
.basket-popup-content {
display: flex;
flex-direction: column;
width: 100%;
max-width: 520px;
height: 100vh;
height: 100dvh;
padding: 0;
background: var(--paso-surface-strong);
border-left: 1px solid var(--paso-border-strong);
backdrop-filter: blur(20px);
border-top: 0;
}
@starting-style { .basket-popup-content { translate: 100% 0; } }
:root .popup[hidden] .basket-popup-content { translate: 100% 0; }
.basket .basket-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 60px 28px 24px;
font-family: var(--paso-font-display);
font-size: 22px;
color: #fff;
letter-spacing: 0.05em;
}
.basket .basket-title {
display: flex;
align-items: center;
gap: 12px;
text-transform: uppercase;
}
.basket .basket-title::before {
content: "";
width: 28px;
height: 28px;
background: var(--paso-magenta);
mask: url("https://template-assets.tebex.io/images/user.svg") center / contain no-repeat;
}
.basket .basket-second-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 28px;
background: rgba(15, 6, 32, 0.7);
border-block: 1px solid var(--paso-border);
font-family: var(--paso-font-heading);
font-size: 14px;
letter-spacing: 0.12em;
}
.basket .basket-second-header .total { color: var(--paso-text-dim); }
.basket .basket-second-header .total strong {
font-family: var(--paso-font-display);
font-size: 20px;
color: var(--paso-cyan);
text-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
}
.basket .basket-items {
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px;
flex: 1;
overflow-y: auto;
}
.basket .basket-item {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: rgba(15, 6, 32, 0.7);
border: 1px solid var(--paso-border);
border-left: 3px solid var(--paso-magenta);
}
.basket .basket-item .info { margin-right: auto; }
.basket .basket-item .title {
font-family: var(--paso-font-display);
font-size: 18px;
color: #fff;
letter-spacing: 0.03em;
}
.basket .basket-item .price {
font-family: var(--paso-font-heading);
color: var(--paso-cyan);
letter-spacing: 0.05em;
}
.basket .basket-item .price strong {
font-family: var(--paso-font-display);
font-size: 18px;
color: #fff;
}
.basket .basket-item .remove {
--btn-icon: url("https://template-assets.tebex.io/images/delete.svg");
flex: none;
width: 40px;
height: 40px;
padding: 0;
background: transparent;
border: 1px solid var(--paso-border-strong);
color: transparent;
font-size: 0;
line-height: 0;
position: relative;
cursor: pointer;
transition: all var(--paso-transition);
display: flex;
align-items: center;
justify-content: center;
}
.basket .basket-item .remove::before {
content: "";
display: block;
width: 18px;
height: 18px;
background-color: var(--paso-text);
-webkit-mask: url("https://template-assets.tebex.io/images/delete.svg") center / contain no-repeat;
mask: url("https://template-assets.tebex.io/images/delete.svg") center / contain no-repeat;
transition: background-color var(--paso-transition);
}
.basket .basket-item .remove:hover {
border-color: var(--paso-magenta);
background: rgba(255, 27, 158, 0.1);
}
.basket .basket-item .remove:hover::before {
background-color: var(--paso-magenta);
}
.basket .basket-checkout {
padding: 18px 28px 30px;
margin-top: auto;
}
.basket .basket-checkout h3 {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 18px;
font-family: var(--paso-font-heading);
font-size: 14px;
letter-spacing: 0.18em;
color: #fff;
text-transform: uppercase;
}
.basket .basket-checkout .total strong {
font-family: var(--paso-font-display);
font-size: 28px;
color: var(--paso-cyan);
text-shadow: 0 0 14px rgba(0, 229, 255, 0.55);
}
.basket .basket-checkout .checkout { width: 100%; }
.basket .basket-empty {
margin: auto;
text-align: center;
font-family: var(--paso-font-heading);
font-size: 18px;
letter-spacing: 0.15em;
color: var(--paso-text-mute);
}
/* ============== TOAST ============== */
.toaster {
display: flex;
flex-direction: column-reverse;
gap: 12px;
position: fixed;
bottom: 24px;
left: 0;
right: 0;
z-index: 10000;
margin: 0 auto;
padding: 0 var(--paso-pad);
max-width: 520px;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
background: var(--paso-surface-strong);
border: 1px solid var(--paso-border-strong);
border-left: 3px solid var(--paso-magenta);
backdrop-filter: var(--paso-blur);
font-family: var(--paso-font-heading);
font-size: 14px;
letter-spacing: 0.12em;
color: #fff;
text-transform: uppercase;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 27, 158, 0.2);
pointer-events: auto;
}
.toast.toast-warning { border-left-color: var(--paso-gold); }
.toast.toast-error { border-left-color: #ff3838; }
.toast.toast-success { border-left-color: var(--paso-cyan); }
.toast-close {
margin-left: auto;
width: 28px;
height: 28px;
background: url("https://template-assets.tebex.io/images/close.svg") center / 16px no-repeat;
opacity: 0.6;
font-size: 0;
}
.toast-close:hover { opacity: 1; }
/* Tebex inline message (data-toast) */
.site[data-toast]:not([data-toast=""])::after {
content: attr(data-toast);
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
padding: 14px 24px;
background: var(--paso-magenta);
color: #fff;
font-family: var(--paso-font-heading);
letter-spacing: 0.18em;
font-size: 13px;
box-shadow: 0 0 30px rgba(255, 27, 158, 0.55);
text-transform: uppercase;
}
/* ============== SHAPES — Mix formes arrondies / organiques ============== */
/* Boutons pill (arrondis intégralement) */
.paso-btn-pill,
.paso-btn.is-pill,
.btn-primary.is-pill,
.btn-secondary.is-pill {
border-radius: 999px !important;
padding: 0 36px;
}
.paso-btn-pill::before,
.btn-primary.is-pill::before { border-radius: 999px; }
/* Coins arrondis supprimés — ils bugaient au hover */
/* Section-num variante "circle badge" */
.paso-section-num--circle {
display: inline-flex !important;
width: 70px;
height: 70px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: rgba(0, 229, 255, 0.06);
border: 1px solid var(--paso-cyan);
font-family: var(--paso-font-display);
font-size: 22px;
letter-spacing: 0;
gap: 0;
text-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
margin-bottom: 18px;
position: relative;
}
.paso-section-num--circle::before,
.paso-section-num--circle::after { display: none; }
.paso-section-num--circle .paso-num-ring {
content: '';
position: absolute;
inset: -8px;
border: 1px dashed var(--paso-cyan);
border-radius: 50%;
opacity: 0.4;
animation: paso-num-rotate 14s linear infinite;
}
@keyframes paso-num-rotate {
to { transform: rotate(360deg); }
}
/* About cards : icônes en cercle (au lieu d'icône seule flottante) */
.paso-about-item i:not(.paso-no-bubble) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(255, 27, 158, 0.2), transparent 65%),
rgba(15, 6, 32, 0.6);
border: 1px solid rgba(255, 27, 158, 0.35);
box-shadow: 0 0 18px rgba(255, 27, 158, 0.2), inset 0 0 12px rgba(255, 27, 158, 0.08);
font-size: 22px !important;
margin-bottom: 18px;
text-shadow: 0 0 10px rgba(255, 27, 158, 0.6);
}
.paso-about-item:nth-child(1) i { width: 80px; height: 80px; font-size: 32px !important; }
.paso-about-item:nth-child(2) i {
background:
radial-gradient(circle at 30% 30%, rgba(0, 229, 255, 0.2), transparent 65%),
rgba(15, 6, 32, 0.6);
border-color: rgba(0, 229, 255, 0.35);
box-shadow: 0 0 18px rgba(0, 229, 255, 0.2), inset 0 0 12px rgba(0, 229, 255, 0.08);
color: var(--paso-cyan);
text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}
.paso-about-item:nth-child(3) i {
background:
radial-gradient(circle at 30% 30%, rgba(255, 179, 0, 0.25), transparent 65%),
rgba(15, 6, 32, 0.6);
border-color: rgba(255, 179, 0, 0.4);
box-shadow: 0 0 18px rgba(255, 179, 0, 0.25), inset 0 0 12px rgba(255, 179, 0, 0.1);
color: var(--paso-gold);
text-shadow: 0 0 10px rgba(255, 179, 0, 0.6);
}
/* Bridge note icon — en cercle */
.paso-bridge-note i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 50%;
background: rgba(0, 229, 255, 0.08);
border: 1px solid var(--paso-cyan);
}
/* Reg list icons en cercles */
.paso-reg-list li i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 27, 158, 0.12);
border: 1px solid rgba(255, 27, 158, 0.3);
font-size: 13px !important;
flex-shrink: 0;
}
/* Join num en cercle */
.paso-join-num {
display: inline-flex !important;
width: 64px;
height: 64px;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(255, 27, 158, 0.22), transparent 65%),
rgba(15, 6, 32, 0.7);
border: 1px solid var(--paso-magenta);
box-shadow: 0 0 20px rgba(255, 27, 158, 0.3), inset 0 0 12px rgba(255, 27, 158, 0.1);
font-size: 24px !important;
}
/* ============== DIVIDERS — Séparateurs entre sections ============== */
/* Marquee divider — défilement horizontal */
.paso-divider {
position: relative;
overflow: hidden;
}
.paso-divider--marquee {
padding: 18px 0;
background:
linear-gradient(90deg, rgba(255, 27, 158, 0.04), transparent 30%, transparent 70%, rgba(0, 229, 255, 0.04)),
linear-gradient(180deg, var(--paso-bg-2), var(--paso-bg));
border-top: 1px solid var(--paso-border);
border-bottom: 1px solid var(--paso-border);
}
.paso-divider--marquee::before,
.paso-divider--marquee::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 90px;
z-index: 2;
pointer-events: none;
}
.paso-divider--marquee::before { left: 0; background: linear-gradient(to right, var(--paso-bg-2), transparent); }
.paso-divider--marquee::after { right: 0; background: linear-gradient(to left, var(--paso-bg-2), transparent); }
.paso-divider-track {
display: flex;
align-items: center;
gap: 36px;
white-space: nowrap;
animation: paso-divider-scroll 38s linear infinite;
width: max-content;
}
@keyframes paso-divider-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.paso-divider-item {
font-family: var(--paso-font-display);
font-size: 17px;
letter-spacing: 0.28em;
color: var(--paso-text-dim);
text-transform: uppercase;
}
.paso-divider-item--magenta {
color: var(--paso-magenta);
text-shadow: 0 0 10px rgba(255, 27, 158, 0.55);
}
.paso-divider-item--cyan {
color: var(--paso-cyan);
text-shadow: 0 0 10px rgba(0, 229, 255, 0.55);
}
.paso-divider-item--gold {
color: var(--paso-gold);
text-shadow: 0 0 10px rgba(255, 179, 0, 0.5);
}
.paso-divider-star {
color: var(--paso-cyan);
text-shadow: 0 0 12px var(--paso-cyan);
font-size: 20px;
}
/* Checkpoint stamp divider — tampon central rond */
.paso-divider--checkpoint {
padding: 40px 20px;
text-align: center;
background: var(--paso-bg);
position: relative;
border-top: 1px solid var(--paso-border);
border-bottom: 1px solid var(--paso-border);
}
.paso-divider--checkpoint::before,
.paso-divider--checkpoint::after {
content: '';
position: absolute;
top: 50%;
height: 1px;
background: linear-gradient(to right, transparent, var(--paso-cyan), transparent);
box-shadow: 0 0 6px var(--paso-cyan);
z-index: 0;
}
.paso-divider--checkpoint::before { left: 0; width: 38%; }
.paso-divider--checkpoint::after { right: 0; width: 38%; transform: scaleX(-1); }
.paso-divider-stamp {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 140px;
height: 140px;
border: 2px solid var(--paso-magenta);
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 27, 158, 0.08), rgba(15, 6, 32, 0.7));
font-family: var(--paso-font-display);
color: var(--paso-magenta);
text-align: center;
position: relative;
text-shadow: 0 0 10px rgba(255, 27, 158, 0.45);
transform: rotate(-3deg);
transition: transform var(--paso-transition);
z-index: 1;
}
.paso-divider-stamp:hover { transform: rotate(0deg) scale(1.05); }
.paso-divider-stamp::before {
content: '';
position: absolute;
inset: 6px;
border: 1px dashed var(--paso-magenta);
border-radius: 50%;
opacity: 0.55;
}
.paso-divider-stamp .kicker {
font-family: var(--paso-font-mono);
font-size: 9px;
letter-spacing: 0.3em;
opacity: 0.85;
}
.paso-divider-stamp .big {
font-size: 18px;
letter-spacing: 0.05em;
margin: 5px 0;
line-height: 1;
}
.paso-divider-stamp .sub {
font-family: var(--paso-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
opacity: 0.75;
}
.paso-divider-stamp--cyan {
color: var(--paso-cyan);
border-color: var(--paso-cyan);
text-shadow: 0 0 10px rgba(0, 229, 255, 0.45);
background: radial-gradient(circle, rgba(0, 229, 255, 0.08), rgba(15, 6, 32, 0.7));
}
.paso-divider-stamp--cyan::before { border-color: var(--paso-cyan); }
.paso-divider-stamp--gold {
color: var(--paso-gold);
border-color: var(--paso-gold);
text-shadow: 0 0 10px rgba(255, 179, 0, 0.45);
background: radial-gradient(circle, rgba(255, 179, 0, 0.08), rgba(15, 6, 32, 0.7));
}
.paso-divider-stamp--gold::before { border-color: var(--paso-gold); }
/* ============== WANTED POSTER — section Règlement vintage ============== */
.paso-section--wanted {
background:
radial-gradient(ellipse at 30% 20%, rgba(255, 27, 158, 0.06), transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(255, 179, 0, 0.04), transparent 50%),
var(--paso-bg);
}
.paso-section--wanted::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.04;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 0;
}
.paso-reg-stamp {
position: absolute;
top: 80px;
right: 7%;
width: 160px;
height: 160px;
border: 3px double var(--paso-magenta);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255, 27, 158, 0.04);
color: var(--paso-magenta);
text-shadow: 0 0 10px rgba(255, 27, 158, 0.5);
text-align: center;
letter-spacing: 0.1em;
opacity: 0.92;
transform: rotate(14deg);
pointer-events: none;
z-index: 1;
}
.paso-reg-stamp::before {
content: '';
position: absolute;
inset: 9px;
border: 1px dashed var(--paso-magenta);
border-radius: 50%;
opacity: 0.55;
}
.paso-reg-stamp .kicker {
font-family: var(--paso-font-mono);
font-size: 10px;
letter-spacing: 0.32em;
}
.paso-reg-stamp .main {
font-family: var(--paso-font-display);
font-size: 22px;
letter-spacing: 0.04em;
margin: 6px 0;
line-height: 1;
}
.paso-reg-stamp .year {
font-family: var(--paso-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
}
/* Cinematic effects — glitch sur titres au hover (sobre) */
.paso-section-head h2 {
transition: text-shadow 0.3s ease;
}
.paso-section-head h2:hover {
text-shadow:
2px 0 0 rgba(255, 27, 158, 0.6),
-2px 0 0 rgba(0, 229, 255, 0.6),
0 0 40px rgba(255, 27, 158, 0.4);
}
/* ============== RESPONSIVE — Tout nouveau ============== */
@media (max-width: 980px) {
.paso-reg-stamp {
width: 110px;
height: 110px;
top: 30px;
right: 4%;
}
.paso-reg-stamp .main { font-size: 17px; }
.paso-reg-stamp .kicker,
.paso-reg-stamp .year { font-size: 8px; letter-spacing: 0.22em; }
.paso-section-num--circle { width: 60px; height: 60px; font-size: 18px; }
.paso-divider-stamp { width: 120px; height: 120px; }
.paso-divider-stamp .big { font-size: 15px; }
}
@media (max-width: 700px) {
.paso-reg-stamp { display: none; }
.paso-divider--marquee { padding: 12px 0; }
.paso-divider-item { font-size: 13px; letter-spacing: 0.18em; }
.paso-divider--checkpoint { padding: 30px 14px; }
.paso-divider--checkpoint::before,
.paso-divider--checkpoint::after { width: 28%; }
.paso-divider-stamp { width: 100px; height: 100px; }
.paso-divider-stamp .big { font-size: 13px; }
.paso-divider-stamp .kicker,
.paso-divider-stamp .sub { font-size: 8px; letter-spacing: 0.2em; }
.paso-section-num--circle { width: 54px; height: 54px; font-size: 16px; margin-bottom: 14px; }
.paso-about-item i:not(.paso-no-bubble) { width: 48px; height: 48px; font-size: 18px !important; }
.paso-about-item:nth-child(1) i { width: 60px; height: 60px; font-size: 24px !important; }
.paso-join-num { width: 54px !important; height: 54px !important; font-size: 20px !important; }
.paso-bridge-note i { width: 48px; height: 48px; font-size: 22px !important; }
}
/* ============== UTILS ============== */
.is-hidden { display: none !important; }
/* ============== RESPONSIVE COMPLET ============== */
/* ====== Tablette (≤ 980px) ====== */
@media (max-width: 980px) {
:root {
--paso-pad: 18px;
--paso-section-pad: clamp(48px, 7vw, 80px);
}
.paso-topbar-inner {
padding: 10px 16px;
gap: 12px;
}
.paso-brand-logo { height: 38px; }
.paso-brand-text strong { font-size: 14px; letter-spacing: 0.12em; }
.paso-brand-text span { display: none; }
.paso-cta-rejoindre span { display: none; }
.paso-cta-rejoindre {
padding: 8px 10px;
width: 38px;
height: 38px;
justify-content: center;
}
.paso-hero { min-height: 80vh; }
.paso-actions { gap: 4px; }
.paso-action-label { display: none; }
.paso-action { padding: 8px 10px; }
.paso-section { padding: clamp(48px, 7vw, 80px) var(--paso-pad); }
.paso-shop-section .site-home-categories { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
/* ====== Mobile (≤ 700px) ====== */
@media (max-width: 700px) {
:root {
--paso-pad: 14px;
--paso-gutter: 4%;
}
body { font-size: 15px; }
/* Topbar — version mobile compacte */
.paso-topbar-inner { padding: 8px 12px; gap: 8px; min-height: 60px; }
.paso-brand { gap: 8px; }
.paso-brand-logo { height: 32px; }
.paso-brand-text strong { font-size: 12px; letter-spacing: 0.1em; }
.paso-cta-rejoindre { padding: 0; width: 34px; height: 34px; box-shadow: 0 0 12px rgba(255,27,158,0.35); }
.paso-action { padding: 0 10px; height: 34px; font-size: 11px; }
/* Hero */
.paso-hero {
min-height: 70vh;
padding: 60px 4% 40px;
}
.paso-hero-kicker { font-size: 11px; letter-spacing: 0.3em; margin-bottom: 18px; }
.paso-hero-title { font-size: clamp(46px, 18vw, 90px); }
.paso-hero-sub { font-size: 14px; letter-spacing: 0.2em; }
.paso-hero-desc { font-size: 15px; padding: 0 8px; }
.paso-hero-actions {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.paso-hero-actions .paso-btn,
.paso-hero-actions .paso-btn-primary,
.paso-hero-actions .paso-btn-ghost {
width: 100%;
height: 50px;
font-size: 13px;
padding: 0 18px;
}
.paso-scroll-indicator { bottom: 18px; }
/* Marquee */
.paso-marquee { padding: 10px 0; }
.paso-marquee-word { font-size: 18px; letter-spacing: 0.1em; }
/* Sections de la home */
.paso-section-head { margin-bottom: 36px; }
.paso-section-num { font-size: 11px; letter-spacing: 0.3em; }
.paso-section-num::before, .paso-section-num::after { width: 20px; }
.paso-section-head h2 { font-size: clamp(28px, 8vw, 40px); }
.paso-section-kicker { font-size: 14px; }
/* Worlds (Mexique / USA) */
.paso-worlds-grid { grid-template-columns: 1fr; gap: 22px; }
.paso-world { min-height: 380px; transform: none !important; }
.paso-world-content { padding: 24px 20px 22px; }
.paso-world-content h3 { font-size: 32px; }
.paso-world-desc { font-size: 14px; }
.paso-bridge-note {
flex-direction: column;
text-align: center;
gap: 14px;
padding: 20px 18px;
}
.paso-bridge-note i { font-size: 30px; }
/* About cards */
.paso-about-grid { grid-template-columns: 1fr; gap: 16px; }
.paso-about-item { padding: 22px 20px; }
.paso-about-item h3 { font-size: 19px; }
/* Boutique sur la home */
.paso-shop-intro {
padding: 22px 20px;
margin-bottom: 32px;
}
.paso-shop-intro::before,
.paso-shop-intro::after { width: 40px; height: 40px; }
.paso-shop-intro p { font-size: 14px; }
.site-home-categories,
.paso-categories-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 30px 0 40px;
}
.site-home-categories .category,
.paso-category-tile {
padding: 0 12px 14px;
font-size: 13px;
letter-spacing: 0.1em;
aspect-ratio: 1 / 1.15;
}
.store-products-images {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
gap: 16px;
}
.store-products-images .store-product { padding: 18px; }
.store-product .product-title { font-size: 17px; }
.store-product .price strong { font-size: 22px; }
.store-products-list {
grid-template-columns: 1fr;
}
.store-products-list .store-product {
grid-template-columns: 50px 1fr;
padding: 12px 14px;
}
.store-products-list .store-product .image,
.store-products-list .store-product .image-default {
width: 48px;
height: 48px;
}
/* Contexte timeline */
.paso-timeline { padding: 18px 0; }
.paso-ct-step {
padding: 20px 22px;
max-width: 100% !important;
margin: 0 0 18px !important;
}
.paso-ct-year { font-size: 24px; }
.paso-ct-step h3 { font-size: 19px; }
/* Règlement teaser */
.paso-reg-teaser { grid-template-columns: 1fr; gap: 28px; }
.paso-reg-list { padding: 20px; }
.paso-reg-list li { font-size: 13px; padding: 9px 12px; }
/* Join steps */
.paso-join-list li {
flex-direction: column;
gap: 8px;
padding: 20px 22px;
}
.paso-join-num { font-size: 28px; }
.paso-join-list h3 { font-size: 18px; }
.paso-final-cta {
padding: 36px 22px !important;
}
.paso-final-cta p {
font-size: 16px !important;
padding: 0 18px !important;
}
.paso-final-cta p::before,
.paso-final-cta p::after { font-size: 38px !important; }
.paso-final-cta::after { right: 16px; font-size: 22px; }
.paso-final-cta-buttons,
.paso-cms-final-buttons {
flex-direction: column;
gap: 10px;
}
.paso-final-cta .paso-btn,
.paso-cms-final .btn-primary,
.paso-cms-final .btn-secondary {
width: 100%;
}
/* Footer */
.paso-footer,
.site-footer {
padding: 50px 18px 24px;
margin-top: 50px;
}
.paso-footer-grid {
grid-template-columns: 1fr;
gap: 28px;
text-align: center;
}
.paso-foot-col h4::after {
left: 50%;
transform: translateX(-50%);
}
.paso-foot-col a {
display: inline-block;
padding: 6px 0;
}
.paso-foot-col a:hover { padding-left: 0; }
.paso-foot-col a::before { display: none; }
.paso-foot-brand::after { display: none; }
.paso-we-accept { gap: 10px; padding: 18px 0; }
.paso-we-accept li img { height: 20px; }
.paso-copyright,
.site-footer .copyright { font-size: 10px; letter-spacing: 0.15em; }
/* Cards CMS (places, factions, etc.) */
.paso-cms-page { padding: 30px 14px 50px; }
.paso-cms-banner {
padding: 36px 22px;
margin: -10px -4px 36px;
}
.paso-cms-banner-icon {
width: 54px;
height: 54px;
font-size: 22px;
}
.paso-cms-banner-title { font-size: clamp(28px, 8vw, 40px); }
.paso-cms-banner-sub { font-size: 12px; letter-spacing: 0.18em; }
.paso-cms-banner-desc { font-size: 14px; }
.paso-cms-stats {
gap: 18px 30px;
padding: 18px 14px;
}
.paso-cms-stats span { font-size: 22px; }
.paso-cms-stats small { font-size: 9px; letter-spacing: 0.2em; }
.paso-cms-section-icon {
gap: 14px;
margin: 36px 0 22px;
}
.paso-cms-section-icon .icon-wrap {
width: 44px;
height: 44px;
font-size: 18px;
}
.paso-cms-section-icon h2 { font-size: clamp(22px, 6vw, 30px); }
.paso-cms-section-icon .subtitle { font-size: 10px; letter-spacing: 0.2em; }
.paso-cms-places {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.paso-cms-grid {
grid-template-columns: 1fr !important;
gap: 14px;
}
.paso-cms-place { padding: 22px 18px; }
.paso-cms-place h3, .paso-cms-place h4 { font-size: 17px !important; }
.paso-cms-faction {
padding: 22px 20px;
}
.paso-cms-faction h3 { font-size: 20px; }
.paso-cms-faction-meta {
font-size: 12px;
}
.paso-cms-faction-meta div {
flex-direction: column;
gap: 2px;
}
.paso-cms-faction-meta strong {
flex: none;
font-size: 10px;
}
.paso-cms-rules > li {
padding: 16px 18px 16px 56px;
}
.paso-cms-rules > li::before {
font-size: 18px;
top: 16px;
left: 16px;
}
.paso-cms-rules > li h3, .paso-cms-rules > li h4 { font-size: 16px; }
.paso-cms-quote {
padding: 28px 22px 24px 40px;
font-size: 15px;
}
.paso-cms-quote::before {
font-size: 56px;
left: 10px;
}
.paso-cms-key-fact {
padding: 18px 18px;
gap: 14px;
}
.paso-cms-key-fact .icon {
width: 42px;
height: 42px;
font-size: 18px;
}
.paso-cms-key-fact strong { font-size: 15px; }
.paso-cms-toc { padding: 20px 22px; }
.paso-cms-toc a { font-size: 14px; gap: 10px; }
.paso-cms-chapter { padding: 22px 22px; }
.paso-cms-chapter h2, .paso-cms-chapter h3 { font-size: 22px; }
.paso-cms-chapter-num { font-size: 38px; top: 6px; right: 12px; }
.paso-cms-mystery > li { padding: 18px 20px; gap: 14px; }
.paso-cms-mystery-n { font-size: 28px; }
.paso-cms-divider {
font-size: 10px;
letter-spacing: 0.3em;
margin: 36px 0;
gap: 12px;
}
.paso-cms-divider::before,
.paso-cms-divider::after { max-width: 60px; }
.paso-cms-tabs {
padding: 8px;
gap: 4px;
top: 60px;
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.paso-cms-tabs a {
padding: 8px 12px;
font-size: 11px;
letter-spacing: 0.12em;
white-space: nowrap;
flex-shrink: 0;
}
.paso-cms-safe-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.paso-cms-lex-letters {
gap: 4px;
padding: 10px;
}
.paso-cms-lex-letters a {
width: 28px;
height: 28px;
font-size: 13px;
}
.paso-cms-lex-letter {
font-size: 28px !important;
margin: 22px 0 10px !important;
}
.paso-cms-lexique dt { font-size: 14px; padding: 6px 10px; }
.paso-cms-lexique dd { font-size: 13px; padding: 6px 10px 6px 12px; }
.paso-cms-final {
padding: 32px 22px;
}
.paso-cms-final h2, .paso-cms-final h3 { font-size: 22px; }
.paso-cms-cross {
padding: 24px 20px;
}
.paso-cms-cross h3 { font-size: 22px; }
/* Tebex internal pages */
.site-content {
padding: 24px 14px 50px;
}
.category-header {
margin-bottom: 24px;
padding-bottom: 18px;
}
.category-header h1,
.category-header h2 { font-size: 26px; }
.store-product-full {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.store-product-full .product-title { font-size: 26px; padding: 22px 16px; }
.store-product-full .price strong { font-size: 40px; }
.store-product-full .image,
.store-product-full .image-default { min-height: 200px; padding: 12px; }
.store-product-full .actions { padding: 24px 18px; }
.store-product-full .descr { padding: 32px 18px 24px; }
/* Sidebar — passe en bottom sur mobile */
body.is-sidebar-left .site-content-widgets,
body.is-sidebar-right .site-content-widgets {
grid-template-columns: 1fr !important;
}
.store-sidebar {
margin-top: 30px;
grid-template-columns: 1fr !important;
}
/* Basket panneau plein-écran */
.basket-popup-content { max-width: 100vw; }
.basket .basket-header { padding: 50px 18px 18px; font-size: 18px; }
.basket .basket-title::before { width: 24px; height: 24px; }
.basket .basket-second-header { padding: 12px 18px; font-size: 12px; }
.basket .basket-items { padding: 16px; gap: 10px; }
.basket .basket-item {
flex-wrap: wrap;
padding: 12px;
gap: 10px;
}
.basket .basket-item .title { font-size: 16px; }
.basket .basket-item .info {
flex: 1 1 100%;
margin: 0;
}
.basket .basket-checkout {
padding: 14px 18px 24px;
}
.basket .basket-checkout .total strong { font-size: 22px; }
/* Popups */
.popup-scroll-cont { padding: 14px; }
.popup-content {
padding: 22px 18px;
max-width: 100%;
}
.popup-close { width: 42px; height: 42px; }
}
/* ====== Petit mobile (≤ 400px) ====== */
@media (max-width: 400px) {
.paso-topbar-inner { padding: 6px 10px; gap: 6px; }
.paso-brand-text { display: none; } /* logo seul */
.paso-hero-title { font-size: clamp(40px, 16vw, 70px); }
.paso-cms-banner { padding: 28px 16px; margin: -10px -2px 28px; }
.paso-cms-banner-title { font-size: 26px; }
.paso-section-head h2 { font-size: 24px; }
.paso-stamp { display: none !important; }
}
/* ====== Tablette mode portrait (681-980px) — 2 col pour les cards ====== */
@media (min-width: 701px) and (max-width: 980px) {
.paso-about-grid { grid-template-columns: repeat(2, 1fr); }
.paso-worlds-grid { gap: 22px; }
}
/* ====== Large desktop (≥ 1400px) — Plus d'air ====== */
@media (min-width: 1400px) {
.paso-topbar-inner { padding-left: 32px; padding-right: 32px; }
.paso-section { padding-left: 8%; padding-right: 8%; }
}
/* Print friendly */
@media print {
body::before, body::after { display: none; }
.paso-header, .paso-footer, .site-footer-credit { display: none; }
.paso-hero, .paso-marquee { display: none; }
body { background: white; color: black; }
h1, h2, h3, h4 { color: black; -webkit-text-fill-color: black; }
}
/* Print friendly */
@media print {
body::before, body::after { display: none; }
.paso-header, .paso-footer, .site-footer-credit { display: none; }
}
/* ==========================================================================
MOBILE HOTFIX — Corrections responsive critiques
========================================================================== */
/* Anti-overflow global */
html, body {
overflow-x: hidden;
max-width: 100vw;
}
* { min-width: 0; }
img, video, iframe { max-width: 100%; height: auto; }
/* ====== Tablette + Mobile (≤ 980px) ====== */
@media (max-width: 980px) {
/* BURGER — Fix display flex (conflit avec .paso-mobile-only) */
button.paso-burger,
.paso-burger.paso-mobile-only {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 5px !important;
width: 38px !important;
height: 38px !important;
padding: 0 !important;
background: transparent !important;
border: 1px solid var(--paso-border-strong) !important;
flex-shrink: 0;
}
.paso-burger span {
display: block !important;
width: 18px !important;
height: 1.5px !important;
background: var(--paso-text-white) !important;
}
/* TOPBAR — overflow protection */
.paso-topbar-inner {
flex-wrap: nowrap;
gap: 10px;
overflow: hidden;
}
.paso-brand {
min-width: 0;
flex-shrink: 1;
overflow: hidden;
}
.paso-brand-text {
min-width: 0;
overflow: hidden;
}
.paso-brand-text strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.paso-actions {
flex-shrink: 0;
margin-left: auto;
}
/* Drawer mobile li.paso-mobile-only — force list-item (override .paso-mobile-only display:initial !important) */
.site-navigation .menu li.paso-mobile-only {
display: block !important;
}
}
/* ====== Mobile (≤ 700px) ====== */
@media (max-width: 700px) {
/* Conteneurs — pas de débordement */
.paso-section,
.paso-shop-section,
.paso-worlds-section,
.paso-goal-section {
padding-left: 14px;
padding-right: 14px;
overflow-x: hidden;
}
/* Hero mobile — empêcher overflow titre/sun */
.paso-hero {
padding: 50px 14px 30px;
}
.paso-hero-content {
padding: 0 4px;
}
.paso-hero-sun {
width: min(420px, 90vw);
height: min(420px, 90vw);
bottom: 22%;
}
.paso-hero-title {
font-size: clamp(38px, 14vw, 72px);
word-break: break-word;
}
.paso-hero-sub {
font-size: 12px;
letter-spacing: 0.18em;
word-break: break-word;
}
/* Topbar — encore plus compact */
.paso-topbar-inner {
padding: 8px 10px;
gap: 6px;
min-height: 56px;
}
.paso-brand-logo { height: 28px; }
.paso-burger { width: 34px !important; height: 34px !important; }
.paso-action { padding: 0 8px; height: 32px; }
/* Pages produit Tebex — bug spécifique sur mobile */
.store-product-full {
gap: 18px !important;
}
.store-product-full .product-title {
font-size: clamp(22px, 6vw, 30px) !important;
padding: 18px 14px !important;
word-break: break-word;
}
.store-product-full .image,
.store-product-full .image-default {
padding: 10px !important;
min-height: 180px !important;
}
.store-product-full .actions {
padding: 22px 16px !important;
gap: 10px !important;
}
.store-product-full .price {
margin-bottom: 8px !important;
}
.store-product-full .price::before {
font-size: 9px !important;
letter-spacing: 0.4em !important;
margin-bottom: 10px !important;
}
.store-product-full .price strong {
font-size: clamp(34px, 10vw, 48px) !important;
}
.store-product-full .actions .btn-primary,
.store-product-full .actions .btn-secondary {
min-height: 48px !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
}
.store-product-full .actions::after {
font-size: 10px !important;
letter-spacing: 0.05em !important;
margin-top: 10px !important;
padding-top: 10px !important;
}
.store-product-full .descr {
padding: 28px 14px 20px !important;
font-size: 15px !important;
}
.store-product-full .descr::before {
font-size: 10px !important;
letter-spacing: 0.3em !important;
padding: 4px 12px !important;
}
/* Sidebar — pas de sticky sur mobile, ça bug */
.store-sidebar {
position: static !important;
top: auto !important;
}
/* CMS pages — overflow + marges safe */
.paso-cms-page {
padding: 24px 12px 40px;
overflow-x: hidden;
}
.paso-cms-banner {
margin: 0 0 30px !important;
padding: 30px 18px !important;
}
.paso-cms-banner-title {
word-break: break-word;
hyphens: auto;
}
.paso-cms-stats {
flex-direction: column;
gap: 14px !important;
}
/* Cards CMS — pas de transform translateX qui peut overflow */
.paso-cms-faction:hover,
.paso-cms-rules > li:hover,
.paso-cms-mystery > li:hover {
transform: none !important;
}
/* Boutique — categories grid 1 col sur petit écran */
.site-home-categories,
.paso-categories-grid {
grid-template-columns: 1fr !important;
}
/* Footer — no margin negative */
.paso-footer,
.site-footer {
margin-top: 40px;
}
}
/* ====== Très petit mobile (≤ 380px) ====== */
@media (max-width: 380px) {
.paso-topbar-inner { gap: 4px; padding: 6px 8px; }
.paso-brand-text { display: none; }
.paso-brand-logo { height: 26px; }
.paso-action { padding: 0 6px; height: 30px; font-size: 10px; }
.paso-action-label { display: none !important; }
.paso-hero-title { font-size: clamp(32px, 13vw, 56px); }
.paso-cms-banner-title { font-size: 22px !important; }
.store-product-full .product-title { font-size: 20px !important; }
}
/* ==========================================================================
NAVBAR FIX — Bouton close fantôme + burger invisible
========================================================================== */
/* Cache TOTALEMENT le popup-close de la navigation drawer quand le drawer est fermé */
.site-navigation .popup-close {
display: none !important;
}
body.show-navigation .site-navigation .popup-close {
display: flex !important;
align-items: center;
justify-content: center;
}
/* Cache aussi le popup-close global quand on n'est pas dans un popup actif */
@media (max-width: 980px) {
.paso-topbar .popup-close,
.paso-topbar-inner .popup-close,
header .popup-close {
display: none !important;
}
body.show-navigation .site-navigation .popup-close {
display: flex !important;
}
}
/* Burger — force visibilité avec ordre 0 (premier élément) */
@media (max-width: 980px) {
button.toggle-navigation,
button.paso-burger,
.paso-topbar-inner > .paso-burger {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 5px !important;
width: 38px !important;
height: 38px !important;
padding: 0 !important;
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
cursor: pointer;
flex-shrink: 0 !important;
order: -1;
visibility: visible !important;
opacity: 1 !important;
}
button.paso-burger > span,
button.toggle-navigation > span {
display: block !important;
width: 18px !important;
height: 1.5px !important;
background: #fff !important;
transition: all 0.25s ease;
margin: 0 !important;
}
/* État ouvert (X) */
body.show-navigation button.paso-burger > span:nth-child(1),
body.show-navigation button.toggle-navigation > span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
body.show-navigation button.paso-burger > span:nth-child(2),
body.show-navigation button.toggle-navigation > span:nth-child(2) {
opacity: 0;
}
body.show-navigation button.paso-burger > span:nth-child(3),
body.show-navigation button.toggle-navigation > span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
}
/* Hide burger on desktop */
@media (min-width: 981px) {
button.paso-burger,
button.toggle-navigation {
display: none !important;
}
}
/* ==========================================================================
DISCOUNT / PROMO — Affichage prix barré + badge promo (v2 — lisible)
========================================================================== */
/* Prix barré (ancien prix) — LISIBLE et stylé */
.store-product .price .discount,
.store-products-list .store-product .price .discount,
.store-products-images .store-product .price .discount,
.store-product-full .price .discount {
display: inline-flex !important;
align-items: center;
margin: 0 8px 0 0 !important;
padding: 0 !important;
font-family: var(--paso-font-display) !important;
font-size: 1em !important;
font-weight: 400 !important;
color: rgba(255, 255, 255, 0.45) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
background: transparent !important;
border: 0 !important;
text-decoration: line-through !important;
text-decoration-thickness: 2.5px !important;
text-decoration-color: var(--paso-magenta) !important;
filter: none !important;
letter-spacing: 0.02em !important;
text-shadow: none !important;
vertical-align: baseline;
line-height: 1;
position: relative;
}
.store-product .price .discount strong,
.store-products-list .store-product .price .discount strong,
.store-products-images .store-product .price .discount strong,
.store-product-full .price .discount strong {
font-family: inherit !important;
font-size: inherit !important;
color: inherit !important;
-webkit-text-fill-color: inherit !important;
background: none !important;
filter: none !important;
text-shadow: none !important;
font-weight: inherit !important;
}
/* Container .price quand discount appliqué — layout horizontal propre */
.store-product .price:has(.discount),
.store-products-images .store-product .price:has(.discount),
.store-products-list .store-product .price:has(.discount) {
position: relative;
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding-top: 4px;
}
/* Badge "PROMO" — animé, plus stylé */
@keyframes paso-promo-pulse {
0%, 100% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.5), 0 0 0 0 rgba(239, 68, 68, 0.4); }
50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.7), 0 0 0 6px rgba(239, 68, 68, 0); }
}
.store-products-images .store-product .price:has(.discount)::before,
.store-products-list .store-product .price:has(.discount)::before {
content: '-PROMO-';
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
background: linear-gradient(135deg, #fbbf24 0%, #ef4444 50%, #ec4899 100%);
color: #fff !important;
font-family: var(--paso-font-display);
font-size: 10px;
letter-spacing: 0.18em;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-text-fill-color: #fff !important;
filter: none !important;
order: -1;
animation: paso-promo-pulse 2s ease-in-out infinite;
transform: rotate(-2deg);
text-transform: uppercase;
white-space: nowrap;
}
/* Sur les CARDS produit — corner ribbon promo (en plus du badge inline) */
.store-products-images .store-product:has(.price .discount)::after {
content: '-PROMO-';
position: absolute;
top: 16px;
right: -42px;
z-index: 5;
background: linear-gradient(135deg, #fbbf24, #ef4444, #ec4899);
color: #fff;
padding: 6px 48px;
transform: rotate(45deg);
font-family: var(--paso-font-heading);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5), 0 0 16px rgba(251, 191, 36, 0.4);
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
animation: paso-promo-pulse 2.5s ease-in-out infinite;
}
/* PRIX NOUVEAU — encore plus vibrant quand promo */
.store-product .price:has(.discount) strong,
.store-products-images .store-product .price:has(.discount) strong,
.store-products-list .store-product .price:has(.discount) strong {
background: linear-gradient(135deg, #00E5FF 0%, #FF1B9E 50%, #FFB300 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
filter: drop-shadow(0 0 14px rgba(255, 27, 158, 0.55)) !important;
}
/* Page produit détail — promo PLEINE LARGEUR */
.store-product-full .price:has(.discount) {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 6px;
position: relative;
}
.store-product-full .price:has(.discount)::before {
content: '🔥 OFFRE LIMITÉE 🔥';
display: block;
margin: 0 auto 8px;
padding: 8px 22px;
background: linear-gradient(135deg, #fbbf24, #ef4444, #ec4899);
color: #fff !important;
font-family: var(--paso-font-display);
font-size: 13px;
letter-spacing: 0.3em;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 24px rgba(239, 68, 68, 0.6), inset 0 0 12px rgba(255, 255, 255, 0.15);
-webkit-text-fill-color: #fff !important;
filter: none !important;
width: fit-content;
animation: paso-promo-pulse 2s ease-in-out infinite;
}
.store-product-full .price .discount {
display: block !important;
margin: 0 auto !important;
font-size: 22px !important;
order: 1;
color: rgba(255, 255, 255, 0.5) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
text-decoration-thickness: 3px !important;
}
.store-product-full .price strong {
order: 2;
}
/* ==========================================================================
CRITICAL FIX — backdrop-filter sur .paso-topbar empêchait le drawer
en position:fixed de couvrir tout l'écran (containing block bug)
========================================================================== */
@media (max-width: 980px) {
.paso-topbar {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(7, 3, 15, 0.95) !important;
}
.paso-topbar-inner {
overflow: visible !important;
}
.paso-header {
overflow: visible !important;
}
/* Force le drawer à être positionné par rapport au viewport */
.site-navigation {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
z-index: 9999 !important;
}
/* Menu drawer (panneau gauche) */
body.show-navigation .site-navigation .menu {
transform: translateX(0) !important;
width: min(340px, 88vw) !important;
max-width: 88vw !important;
height: 100vh !important;
height: 100dvh !important;
background: var(--paso-surface-strong) !important;
z-index: 10001 !important;
overflow-y: auto !important;
}
body:not(.show-navigation) .site-navigation .menu {
transform: translateX(-100%) !important;
}
}