*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--red: #ff2d3b;
--red-dark: #d41a26;
--red-glow: rgba(255,45,59,.18);
--accent: #ff4757;
--green: #00d26a;
--bg: #0d0d0f;
--surface: #141416;
--surface-2: #1a1a1e;
--surface-3: #222228;
--border: #1e1e22;
--border-hover: #2a2a30;
--text: #ededf0;
--text-secondary: #87879a;
--text-muted: #4a4a5c;
--font-display: 'Space Grotesk', sans-serif;
--font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--radius: 6px;
--radius-sm: 4px;
--radius-xs: 3px;
--ease: cubic-bezier(.16,1,.3,1);
}
html { scroll-behavior: smooth; }
.typing-cursor {
display: inline;
font-weight: 400;
animation: blink .7s step-end infinite;
color: var(--red);
}
@keyframes blink { 50% { opacity: 0; } }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.65;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
display: flex; align-items: center; justify-content: space-between;
padding: 0 2.5rem; height: 56px;
background: var(--bg);
border-bottom: 1px solid var(--border);
transition: .3s ease;
}
.navbar.scrolled {
background: rgba(13,13,15,.98);
box-shadow: 0 1px 0 var(--border);
}
.nav-brand {
display: flex; align-items: center; gap: .5rem;
font-family: var(--font-display);
font-weight: 700; font-size: 1rem; letter-spacing: -.02em;
}
.nav-brand img { height: 26px; width: 26px; border-radius: 4px; }
.nav-links {
display: flex; align-items: center; gap: 0;
}
.nav-links a {
padding: .45rem .8rem; border-radius: 0;
font-size: .78rem; font-weight: 500; color: var(--text-muted);
transition: .2s ease; letter-spacing: .01em;
position: relative; white-space: nowrap;
}
.nav-links a:hover { color: var(--text-secondary); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
content: ''; position: absolute; bottom: -1px; left: .8rem; right: .8rem;
height: 1px; background: var(--red);
}
.nav-cta {
background: var(--red) !important; color: #fff !important;
padding: .4rem 1rem !important; border-radius: var(--radius) !important;
font-weight: 600 !important; margin-left: .75rem;
font-size: .78rem !important;
transition: .2s ease !important;
display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
}
.nav-cta:hover { opacity: .85 !important; }
.nav-brand { flex-shrink: 0; }
@media (max-width: 1180px) {
.navbar { padding: 0 1.5rem; }
.nav-links a { padding: .45rem .55rem; }
.nav-cta { margin-left: .4rem; }
}
.hamburger { display: none; flex-direction: column; gap: 4px; cursor: pointer; z-index: 1001; }
.hamburger span { width: 18px; height: 1.5px; background: var(--text); border-radius: 0; transition: .3s ease; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }
.nav-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.7);
opacity: 0; pointer-events: none; z-index: 998; transition: .3s ease;
}
.nav-overlay.active { opacity: 1; pointer-events: all; }
.hero {
min-height: 100vh; display: flex; align-items: center;
text-align: left; padding: 8rem 2rem 6rem; position: relative;
overflow: hidden; max-width: 1200px; margin: 0 auto;
}
.hero-inner { position: relative; z-index: 1; max-width: 620px; }
.hero-badge {
display: inline-flex; align-items: center; gap: .4rem;
padding: .3rem .7rem; border-radius: 0;
background: transparent; border: 1px solid var(--red);
font-size: .65rem; font-weight: 600; color: var(--red);
margin-bottom: 2rem; letter-spacing: .08em; text-transform: uppercase;
}
.hero-badge i {
font-size: .55rem;
}
.hero h1 {
font-family: var(--font-display);
font-size: clamp(3rem, 7vw, 5rem);
font-weight: 700; line-height: 1;
letter-spacing: -.05em; margin-bottom: .6rem;
}
.hero h1 .gradient {
color: var(--red);
-webkit-text-fill-color: var(--red);
background: none;
}
.hero-subtitle {
font-family: var(--font-display);
font-size: clamp(1.1rem, 3vw, 1.6rem);
font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 1.5rem;
}
.hero p {
font-size: .95rem; color: var(--text-secondary);
max-width: 440px; margin: 0 0 2.5rem; line-height: 1.8;
}
.hero-buttons { display: flex; gap: .65rem; flex-wrap: wrap; }
.btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: .65rem 1.4rem; border-radius: var(--radius);
font-size: .82rem; font-weight: 600; font-family: var(--font);
cursor: pointer; transition: .2s ease; border: none;
text-decoration: none; white-space: nowrap; letter-spacing: 0;
}
.btn-primary {
background: var(--red); color: #fff;
}
.btn-primary:hover {
opacity: .88; transform: translateY(-1px);
}
.btn-outline {
background: transparent; color: var(--text);
border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--border-hover); background: var(--surface); }
.btn-ghost {
background: transparent; color: var(--text-secondary);
border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--red); color: var(--red); }
.section {
padding: 5rem 2rem; max-width: 1200px; margin: 0 auto;
}
.section-label {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .65rem; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; color: var(--red); margin-bottom: .6rem;
font-family: var(--font-display);
}
.section-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 700; letter-spacing: -.04em; line-height: 1.1;
margin-bottom: .6rem;
}
.section-desc {
font-size: .88rem; color: var(--text-secondary);
max-width: 500px; line-height: 1.7;
}
.section-header { margin-bottom: 3rem; }
.page-hero {
padding: 10rem 2rem 3rem; text-align: left;
max-width: 1200px; margin: 0 auto;
position: relative;
}
.page-hero > * { position: relative; }
.marquee-wrap {
overflow: hidden; padding: .7rem 0;
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
position: relative;
}
.marquee-wrap::before, .marquee-wrap::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 120px;
z-index: 2; pointer-events: none;
}
.marquee-wrap::before {
left: 0; background: linear-gradient(to right, var(--bg), transparent);
}
.marquee-wrap::after {
right: 0; background: linear-gradient(to left, var(--bg), transparent);
}
.marquee-track {
display: flex; gap: 3rem; width: max-content;
animation: marquee 40s linear infinite;
}
.marquee-item {
font-size: .68rem; font-weight: 600; color: var(--text-muted);
white-space: nowrap; display: flex; align-items: center; gap: .5rem;
text-transform: uppercase; letter-spacing: .15em;
font-family: var(--font-display);
}
.marquee-item i { color: var(--red); font-size: .25rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
.stats-row {
display: flex; gap: .75rem; justify-content: stretch; flex-wrap: wrap;
}
.stat-box {
background: var(--surface); padding: 1.8rem 1.5rem; text-align: center;
flex: 1; min-width: 120px;
border: 1px solid var(--border); border-radius: var(--radius);
transition: .25s ease;
}
.stat-box:hover {
border-color: var(--border-hover); background: var(--surface-2);
}
.stat-num {
font-family: var(--font-display);
font-size: 2rem; font-weight: 700; letter-spacing: -.04em;
color: var(--text);
}
.stat-lbl {
font-size: .65rem; color: var(--text-muted); margin-top: .25rem;
text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
font-family: var(--font-display);
}
.transport-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: .75rem;
}
.transport-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; transition: .25s ease;
display: flex; flex-direction: column;
position: relative;
}
.transport-card:hover {
background: var(--surface-2); border-color: var(--border-hover);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.transport-card-head {
padding: 1.5rem 1.6rem 1.2rem;
display: flex; align-items: center; gap: 1rem;
border-bottom: 1px solid var(--border);
}
.transport-logo {
width: 42px; height: 42px; border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; overflow: hidden;
background: transparent;
}
.transport-logo img {
width: 100%; height: 100%; object-fit: contain;
padding: 3px; border-radius: var(--radius);
}
.transport-card-head h3 {
font-family: var(--font-display);
font-size: 1rem; font-weight: 700; letter-spacing: -.02em;
}
.transport-card-head .transport-type {
font-size: .7rem; color: var(--text-muted); margin-top: .15rem;
}
.transport-card-body { padding: 1.2rem 1.6rem 1.4rem; flex: 1; }
.transport-card-body .services-list {
display: flex; flex-direction: column;
}
.service-row {
display: flex; justify-content: space-between; align-items: center;
padding: .55rem 0;
border-bottom: 1px solid rgba(255,255,255,.03);
font-size: .82rem;
}
.service-row:last-child { border-bottom: none; }
.service-name { color: var(--text-secondary); font-weight: 500; }
.service-price {
color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums;
font-family: var(--font-display); letter-spacing: -.02em;
}
.service-category-label {
padding: .8rem 0 .3rem;
font-weight: 700; color: var(--red); font-size: .65rem;
text-transform: uppercase; letter-spacing: .1em;
border-bottom: 1px solid rgba(255,45,59,.08);
display: flex; align-items: center; gap: .4rem;
font-family: var(--font-display);
}
.service-category-label i { font-size: .55rem; }
.transport-footer {
padding: .7rem 1.6rem 1.1rem;
display: flex; gap: .5rem; flex-wrap: wrap;
}
.transport-tag {
padding: .2rem .5rem; border-radius: 0;
font-size: .64rem; font-weight: 600;
background: var(--surface-2); color: var(--text-muted);
border: none; font-family: var(--font-display);
letter-spacing: .02em;
}
.transport-card-link {
display: flex; align-items: center; justify-content: center; gap: .5rem;
padding: .75rem; border-top: 1px solid var(--border);
font-size: .76rem; font-weight: 600; color: var(--text-muted);
transition: .2s ease; text-decoration: none;
}
.transport-card-link:hover { background: rgba(255,45,59,.03); color: var(--red); }
.scan-compare {
margin-bottom: 3rem;
}
.scan-pills {
display: flex; gap: .35rem; flex-wrap: wrap;
margin-bottom: 1.5rem;
padding: 0;
background: transparent;
}
.scan-pill {
padding: .5rem .9rem; border-radius: var(--radius);
font-size: .74rem; font-weight: 600; color: var(--text-muted);
background: var(--surface); border: 1px solid var(--border);
cursor: pointer; transition: .2s ease;
font-family: var(--font); letter-spacing: 0;
white-space: nowrap;
}
.scan-pill:hover { color: var(--text-secondary); background: var(--surface-2); }
.scan-pill.active {
color: #fff; background: var(--red);
border-color: var(--red);
}
.scan-result {
display: none; animation: scanFadeIn .25s ease;
}
.scan-result.active { display: block; }
@keyframes scanFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.scan-result-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: .75rem;
}
.scan-result-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 1.3rem 1rem;
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: .5rem;
transition: .2s ease;
}
.scan-result-card:hover {
background: var(--surface-2);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.scan-result-card .scan-carrier-logo {
width: 32px; height: 32px; border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
background: transparent; overflow: hidden;
}
.scan-result-card .scan-carrier-logo img {
width: 100%; height: 100%; object-fit: contain; padding: 2px;
}
.scan-result-card .scan-carrier-name {
font-size: .75rem; font-weight: 600; color: var(--text-secondary);
}
.scan-result-card .scan-carrier-price {
font-family: var(--font-display);
font-size: 1.4rem; font-weight: 700; color: var(--text);
letter-spacing: -.03em;
}
.scan-result-card .scan-carrier-note {
font-size: .6rem; color: var(--red); font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
font-family: var(--font-display);
}
.feature-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: .75rem;
}
.feature-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 2rem 1.7rem;
transition: .25s ease;
position: relative;
}
.feature-card:hover {
background: var(--surface-2); border-color: var(--border-hover);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.feature-icon {
width: 44px; height: 44px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(255,45,59,.12), rgba(255,45,59,.04));
border: 1px solid rgba(255,45,59,.15);
color: var(--red); font-size: 1rem; margin-bottom: 1.2rem;
transition: .25s ease;
}
.feature-card:hover .feature-icon {
background: linear-gradient(135deg, rgba(255,45,59,.2), rgba(255,45,59,.08));
border-color: rgba(255,45,59,.3);
transform: scale(1.05);
}
.feature-card h3 {
font-family: var(--font-display);
font-size: .95rem; font-weight: 700; margin-bottom: .35rem;
letter-spacing: -.02em;
}
.feature-card p { font-size: .82rem; color: var(--text-secondary); line-height: 1.65; }
.timeline { position: relative; max-width: 700px; }
.timeline::before {
content: ''; position: absolute; left: 24px; top: 0; bottom: 0;
width: 1px;
background: var(--border);
}
.timeline-step {
display: flex; gap: 1.5rem; padding-bottom: 2rem;
position: relative;
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-dot {
width: 48px; height: 48px; flex-shrink: 0;
border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(255,45,59,.12), rgba(255,45,59,.04));
border: 1px solid rgba(255,45,59,.15);
font-weight: 700; font-size: .9rem; color: var(--red);
position: relative; z-index: 1; transition: .25s ease;
}
.timeline-step:hover .timeline-dot {
background: linear-gradient(135deg, rgba(255,45,59,.2), rgba(255,45,59,.08));
border-color: rgba(255,45,59,.3);
transform: scale(1.05);
}
.timeline-body {
flex: 1;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1.4rem 1.5rem;
transition: .25s ease;
}
.timeline-step:hover .timeline-body {
border-color: var(--border-hover);
}
.timeline-body h3 {
font-family: var(--font-display);
font-size: .95rem; font-weight: 700; margin-bottom: .35rem;
display: flex; align-items: center; gap: .5rem;
letter-spacing: -.02em;
}
.timeline-body h3 .step-label {
font-size: .58rem; font-weight: 700;
padding: .15rem .45rem; border-radius: 0;
background: rgba(255,45,59,.06); color: var(--red);
text-transform: uppercase; letter-spacing: .06em;
font-family: var(--font-display);
}
.timeline-body p { font-size: .82rem; color: var(--text-secondary); line-height: 1.65; }
.rules-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: .75rem;
}
.rule-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 1.7rem;
display: flex; flex-direction: column; gap: .7rem;
transition: .25s ease; position: relative;
}
.rule-card:hover {
background: var(--surface-2);
}
.rule-num {
width: 34px; height: 34px; flex-shrink: 0;
border-radius: 10px; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(255,45,59,.12), rgba(255,45,59,.04));
border: 1px solid rgba(255,45,59,.15);
font-family: var(--font-display);
font-weight: 700; color: var(--red); font-size: .82rem;
}
.rule-card h4 { font-family: var(--font-display); font-size: .9rem; font-weight: 700; margin-bottom: .2rem; letter-spacing: -.02em; }
.rule-card p { font-size: .8rem; color: var(--text-secondary); line-height: 1.6; }
.info-box {
display: flex; align-items: flex-start; gap: .9rem;
padding: 1.1rem 1.3rem; border-radius: var(--radius);
background: var(--surface); border: 1px solid var(--border);
border-left: 2px solid var(--red);
font-size: .82rem; color: var(--text-secondary); line-height: 1.6;
}
.info-box i { color: var(--red); margin-top: .15rem; flex-shrink: 0; }
.guarantee-box {
display: flex; align-items: center; gap: 1.25rem;
padding: 1.5rem 1.75rem; border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
border-left: 2px solid var(--green);
}
.guarantee-icon {
width: 42px; height: 42px; flex-shrink: 0;
border-radius: 10px; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(0,210,106,.12), rgba(0,210,106,.04));
color: var(--green); font-size: 1rem;
border: 1px solid rgba(0,210,106,.15);
}
.guarantee-box h4 { font-family: var(--font-display); font-size: .9rem; font-weight: 700; color: var(--green); margin-bottom: .2rem; }
.guarantee-box p { font-size: .8rem; color: var(--text-secondary); line-height: 1.55; }
.contact-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: .75rem;
max-width: 680px;
}
.contact-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 2.2rem 1.7rem;
text-align: center; transition: .25s ease;
text-decoration: none; display: block;
position: relative;
}
.contact-card:hover {
background: var(--surface-2);
}
.contact-icon {
width: 52px; height: 52px; border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1.2rem; font-size: 1.3rem; color: #fff;
}
.contact-card h3 { font-family: var(--font-display); font-size: .98rem; font-weight: 700; margin-bottom: .35rem; letter-spacing: -.01em; }
.contact-handle { color: var(--red); font-weight: 700; font-size: .92rem; font-family: var(--font-display); }
.contact-card .sub { font-size: .72rem; color: var(--text-muted); margin-top: .3rem; }
.cta-section {
text-align: center; padding: 4rem 2rem;
margin: 2rem auto; max-width: 1200px; border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
position: relative; overflow: hidden;
}
.cta-section::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent);
pointer-events: none;
}
.cta-section > * { position: relative; }
.cta-section .hero-buttons { justify-content: center; }
.cta-section h2 {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 700; letter-spacing: -.04em; margin-bottom: .65rem;
}
.cta-section p {
color: var(--text-secondary); font-size: .88rem;
max-width: 420px; margin: 0 auto 1.8rem;
}
.cta-section .btn-primary {
background: var(--red); color: #fff;
}
.cta-section .btn-outline {
border-color: var(--border); color: var(--text);
background: transparent;
}
.notes-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: .75rem;
}
.note-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 1.4rem 1.3rem;
transition: .25s ease;
}
.note-card:hover { background: var(--surface-2); border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.note-card h4 {
display: flex; align-items: center; gap: .45rem;
font-family: var(--font-display);
font-size: .83rem; font-weight: 700; margin-bottom: .35rem;
}
.note-card h4 i { color: var(--red); font-size: .75rem; }
.note-card p { font-size: .8rem; color: var(--text-secondary); line-height: 1.6; }
.footer {
position: relative;
border-top: 1px solid var(--border);
background:
radial-gradient(55% 140px at 50% 0%, rgba(255,45,59,.07), transparent 100%),
linear-gradient(180deg, var(--bg), #09090b);
}
.footer::before {
content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
width: min(560px, 70%); height: 1px;
background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 3.5rem 2rem 1.5rem; }
.footer-grid {
display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr;
gap: 2.5rem;
}
.footer-brand {
display: inline-flex; align-items: center; gap: .55rem;
font-family: var(--font-display);
font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em;
}
.footer-brand img { height: 32px; width: 32px; border-radius: var(--radius); }
.footer-tagline {
margin-top: .9rem; max-width: 330px;
font-size: .82rem; line-height: 1.65; color: var(--text-secondary);
}
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.footer-status {
display: inline-flex; align-items: center; gap: .5rem;
padding: .38rem .75rem; border-radius: 999px;
border: 1px solid rgba(34,197,94,.25); background: rgba(34,197,94,.07);
font-size: .72rem; font-weight: 600; color: #86efac;
}
.footer-tg {
display: inline-flex; align-items: center; gap: .5rem;
padding: .38rem .85rem; border-radius: 999px;
border: 1px solid rgba(42,171,238,.45); background: rgba(42,171,238,.1);
font-size: .72rem; font-weight: 600; color: #fff;
transition: background .2s ease, border-color .2s ease;
}
.footer-tg i { color: #2aabee; font-size: .85rem; transition: color .2s ease; }
.footer-tg:hover { background: #2aabee; border-color: #2aabee; }
.footer-tg:hover i { color: #fff; }
.footer-col h4 {
font-family: var(--font-display);
font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--text); margin-bottom: 1.1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer-col a {
display: inline-flex; align-items: center;
font-size: .84rem; color: var(--text-secondary);
transition: color .2s ease;
}
.footer-col a::before {
content: ''; width: 0; height: 1px; margin-right: 0;
background: var(--red);
transition: width .2s var(--ease), margin-right .2s var(--ease);
}
.footer-col a:hover { color: var(--text); }
.footer-col a:hover::before { width: 10px; margin-right: .45rem; }
.footer-ext { font-size: .58rem; margin-left: .4rem; opacity: .6; }
.footer-trust {
display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
margin-top: 2.75rem; padding: 1.1rem 0;
border-top: 1px solid var(--border);
}
.footer-trust li { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--text-secondary); }
.footer-trust i { color: var(--red); font-size: .7rem; }
.footer-bottom {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding-top: 1.1rem; border-top: 1px solid var(--border);
}
.footer-copy { font-size: .74rem; color: var(--text-secondary); opacity: .8; letter-spacing: .01em; }
.footer-top {
display: inline-flex; align-items: center; gap: .45rem;
padding: .4rem .8rem; border-radius: var(--radius);
border: 1px solid var(--border-hover);
font-size: .74rem; font-weight: 600; color: var(--text-secondary);
transition: color .2s ease, border-color .2s ease;
}
.footer-top i { font-size: .62rem; transition: transform .2s var(--ease); }
.footer-top:hover { color: var(--text); border-color: var(--red); }
.footer-top:hover i { transform: translateY(-2px); }
.footer a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: var(--radius-sm); }
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: repeat(3, 1fr); gap: 2.25rem 2rem; }
.footer-about { grid-column: 1 / -1; }
}
.fade-in {
opacity: 0; transform: translateY(16px);
transition: opacity .5s ease, transform .5s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.stagger.visible > * { opacity: 1; transform: translateY(0); }
.stagger.visible > *:nth-child(1) { transition-delay: .02s; }
.stagger.visible > *:nth-child(2) { transition-delay: .04s; }
.stagger.visible > *:nth-child(3) { transition-delay: .06s; }
.stagger.visible > *:nth-child(4) { transition-delay: .08s; }
.stagger.visible > *:nth-child(5) { transition-delay: .10s; }
.stagger.visible > *:nth-child(6) { transition-delay: .12s; }
@media (max-width: 1020px) {
.navbar { padding: 0 1.25rem; height: 52px; }
.hamburger { display: flex; }
.nav-links {
position: fixed; top: 0; right: -100%; width: 260px; height: 100vh;
flex-direction: column; align-items: stretch; padding: 4rem 1.25rem 2rem; gap: .15rem;
background: var(--surface); border-left: 1px solid var(--border);
transition: .3s ease; z-index: 999;
}
.nav-links.open { right: 0; }
.nav-links li { width: 100%; }
.nav-links a { display: block; padding: .65rem .9rem; width: 100%; font-size: .82rem; }
.nav-links a.active::after { display: none; }
.nav-links a.active { background: var(--surface-2); }
.nav-cta { display: flex !important; justify-content: center; margin-left: 0 !important; margin-top: .5rem; }
}
@media (max-width: 768px) {
.nav-links {
position: fixed; top: 0; right: -100%; width: 260px; height: 100vh;
flex-direction: column; padding: 4rem 1.25rem 2rem; gap: .15rem;
background: var(--surface); border-left: 1px solid var(--border);
transition: .3s ease; z-index: 999;
}
.nav-links.open { right: 0; }
.nav-links li { width: 100%; }
.nav-links a { display: block; padding: .65rem .9rem; width: 100%; font-size: .82rem; }
.nav-links a.active::after { display: none; }
.nav-links a.active { background: var(--surface-2); }
.nav-cta { margin-left: 0 !important; margin-top: .5rem; text-align: center; }
.hero { padding: 7rem 1.25rem 3.5rem; min-height: auto; }
.hero h1 { font-size: 2.2rem; }
.hero-buttons { flex-direction: column; align-items: stretch; }
.btn { width: 100%; justify-content: center; }
.section { padding: 3.5rem 1.25rem; }
.transport-grid { grid-template-columns: 1fr; }
.feature-grid { grid-template-columns: 1fr; }
.stats-row { flex-direction: column; }
.contact-grid { grid-template-columns: 1fr; }
.rules-grid { grid-template-columns: 1fr; }
.timeline-step { gap: .75rem; }
.timeline::before { left: 16px; }
.timeline-dot { width: 36px; height: 36px; font-size: .8rem; }
.timeline-body { padding: 1.1rem 1.2rem; }
.cta-section { margin: 1rem; padding: 2.5rem 1.25rem; }
.guarantee-box { flex-direction: column; text-align: center; padding: 1.3rem; }
.page-hero { padding: 7.5rem 1.25rem 2.5rem; }
.scan-pills { flex-wrap: wrap; overflow: visible; }
.scan-pill { flex: 1; min-width: 0; text-align: center; font-size: .68rem; padding: .4rem .6rem; }
.scan-result-grid { grid-template-columns: repeat(2, 1fr); }
.footer-inner { padding: 2.75rem 1.25rem 1.25rem; }
.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
.footer-about { grid-column: 1 / -1; }
.footer-trust { margin-top: 2.25rem; gap: .55rem 1.25rem; }
.footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: .9rem; }
}
@media (max-width: 480px) {
.hero h1 { font-size: 1.8rem; }
.stat-box { padding: 1.2rem 1rem; }
.stat-num { font-size: 1.5rem; }
.transport-card-head { padding: 1.1rem 1.2rem; }
.transport-card-body { padding: 1rem 1.2rem; }
.transport-footer { padding: .6rem 1.2rem .8rem; }
.scan-result-grid { grid-template-columns: 1fr 1fr; }
.scan-result-card { padding: 1rem .7rem; }
.scan-result-card .scan-carrier-price { font-size: 1.15rem; }
.timeline-step { flex-direction: column; gap: .5rem; }
.timeline::before { display: none; }
}
.search-box {
flex: 1; max-width: 400px; position: relative;
}
.search-box i {
position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
color: var(--text-muted); font-size: .78rem;
}
.search-box input {
width: 100%; padding: .6rem .9rem .6rem 2.3rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); color: var(--text);
font-family: var(--font); font-size: .8rem;
outline: none; transition: .2s ease;
}
.search-box input::placeholder { color: var(--text-muted); }
.search-box input:focus { border-color: var(--red); }
.category-filters {
display: flex; gap: .35rem; flex-wrap: wrap;
margin-bottom: 2.5rem;
padding: 0; background: transparent;
}
.cat-pill {
padding: .4rem .8rem; border-radius: var(--radius);
font-size: .72rem; font-weight: 600; color: var(--text-muted);
background: var(--surface); border: 1px solid var(--border);
cursor: pointer; transition: .2s ease;
font-family: var(--font); display: inline-flex;
align-items: center; gap: .3rem; white-space: nowrap;
}
.cat-pill:hover { color: var(--text-secondary); background: var(--surface-2); }
.cat-pill.active {
color: #fff; background: var(--red);
}
.cat-pill i { font-size: .6rem; }
.cat-section { margin-bottom: 2.5rem; }
.cat-section.hidden { display: none; }
.cat-section-header {
display: flex; align-items: center; gap: .7rem;
margin-bottom: 1rem; padding-bottom: .7rem;
border-bottom: 1px solid var(--border);
}
.cat-section-icon {
width: 32px; height: 32px; border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid var(--border);
color: var(--red); font-size: .8rem; flex-shrink: 0;
}
.cat-section-header h3 {
font-family: var(--font-display);
font-size: .9rem; font-weight: 700; letter-spacing: -.02em;
}
.cat-section-count {
font-size: .65rem; color: var(--text-muted); font-weight: 600;
margin-left: auto; white-space: nowrap;
font-family: var(--font-display);
}
.shop-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
padding: .85rem .95rem;
transition: .2s ease;
}
.shop-card:hover {
background: var(--surface-2);
}
.shop-card.hidden { display: none; }
.shop-card-name {
font-family: var(--font-display);
font-size: .82rem; font-weight: 700; margin-bottom: .35rem;
letter-spacing: -.01em;
}
.shop-card-info {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.shop-card-budget {
font-family: var(--font-display);
font-size: .76rem; font-weight: 700; color: var(--text);
}
.shop-card-articles {
font-size: .66rem; color: var(--text-muted); font-weight: 500;
}
.shop-card-time {
font-size: .66rem; color: var(--text-muted); font-weight: 500;
display: inline-flex; align-items: center; gap: .2rem;
}
.shop-card-time i { font-size: .55rem; }
.shop-card-note {
margin-top: .35rem; font-size: .64rem; font-weight: 600;
color: #f59e0b; display: flex; align-items: center; gap: .25rem;
}
.shop-card-note i { font-size: .55rem; }
.no-results {
display: none; text-align: center; padding: 3rem 1rem;
color: var(--text-muted); font-size: .9rem;
}
.no-results.visible { display: block; }
.formation-duo {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: .75rem;
}
.formation-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 2rem 1.7rem;
text-align: center; transition: .25s ease;
}
.formation-card:hover {
background: var(--surface-2); border-color: var(--border-hover);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.formation-icon {
font-size: 2.5rem; margin-bottom: 1rem;
line-height: 1;
}
.formation-card h3 {
font-family: var(--font-display);
font-size: 1.2rem; font-weight: 700; letter-spacing: -.03em;
margin-bottom: .5rem;
}
.formation-card p {
font-size: .82rem; color: var(--text-secondary); line-height: 1.65;
}
.formation-plans {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: .75rem; margin-top: 1.5rem;
}
.plan-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 2rem 1.7rem;
text-align: center; transition: .25s ease;
display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.plan-card:hover {
border-color: var(--border-hover);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.plan-featured {
border-color: var(--red);
background: linear-gradient(180deg, rgba(255,45,59,.04), var(--surface));
position: relative; overflow: hidden;
padding-top: 3.5rem;
}
.plan-recommend {
position: absolute; top: 0; left: 0; right: 0;
background: var(--red); color: #fff;
font-family: var(--font-display);
font-size: .65rem; font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; text-align: center;
padding: .5rem 0;
display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.plan-recommend i {
font-size: .6rem;
}
.plan-featured:hover {
border-color: var(--red);
}
.plan-badge {
font-family: var(--font-display);
font-size: .6rem; font-weight: 700; letter-spacing: .15em;
text-transform: uppercase; color: var(--red);
padding: .25rem .7rem; border-radius: var(--radius);
background: rgba(255,45,59,.08);
border: 1px solid rgba(255,45,59,.12);
}
.plan-price {
font-family: var(--font-display);
font-size: 2.2rem; font-weight: 700; letter-spacing: -.04em;
color: var(--text);
}
.plan-price span {
font-size: .85rem; font-weight: 500; color: var(--text-muted);
letter-spacing: 0; margin-left: .15rem;
}
.plan-card p {
font-size: .8rem; color: var(--text-secondary); line-height: 1.55;
margin-bottom: .4rem;
}
.vouch-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: .75rem;
}
.vouch-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; transition: .25s ease;
}
.vouch-card:hover {
border-color: var(--border-hover);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.vouch-card img {
width: 100%; height: auto; display: block;
border-radius: calc(var(--radius) - 1px);
}
.contact-hero-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: .75rem;
}
.contact-hero-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 2rem 1.7rem;
display: flex; gap: 1.5rem; align-items: flex-start;
text-decoration: none; transition: .25s ease;
}
.contact-hero-card:hover {
background: var(--surface-2); border-color: var(--border-hover);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.contact-icon-lg {
width: 56px; height: 56px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; color: #fff; flex-shrink: 0;
}
.contact-badge {
font-size: .55rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--red);
margin-bottom: .35rem;
font-family: var(--font-display);
}
.contact-hero-right h3 {
font-family: var(--font-display);
font-size: 1.05rem; font-weight: 700; margin-bottom: .25rem;
letter-spacing: -.02em; color: var(--text);
}
.contact-hero-right .contact-handle {
color: var(--red); font-weight: 700; font-size: .88rem;
font-family: var(--font-display); margin-bottom: .5rem;
}
.contact-hero-right p {
font-size: .78rem; color: var(--text-secondary); line-height: 1.55;
margin-bottom: .7rem;
}
.contact-cta {
font-size: .72rem; font-weight: 600; color: var(--text-muted);
display: flex; align-items: center; gap: .35rem;
transition: .2s ease;
}
.contact-hero-card:hover .contact-cta {
color: var(--red);
}
.contact-stats {
display: flex; gap: .75rem; flex-wrap: wrap;
}
.contact-stat {
flex: 1; min-width: 100px;
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 1.5rem 1rem; text-align: center;
transition: .25s ease;
}
.contact-stat:hover {
border-color: var(--border-hover);
}
.contact-stat-num {
font-family: var(--font-display);
font-size: 1.5rem; font-weight: 700; color: var(--red);
letter-spacing: -.03em;
}
.contact-stat-lbl {
font-size: .62rem; color: var(--text-muted); margin-top: .2rem;
text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
font-family: var(--font-display);
}
@media (max-width: 768px) {
.formation-duo { grid-template-columns: 1fr; }
.formation-plans { grid-template-columns: 1fr; }
.vouch-grid { grid-template-columns: repeat(2, 1fr); }
.contact-hero-grid { grid-template-columns: 1fr; }
.contact-hero-card { flex-direction: column; align-items: center; text-align: center; }
.contact-cta { justify-content: center; }
.contact-stats { flex-direction: column; }
}
@media (max-width: 480px) {
.vouch-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.search-box { max-width: none; }
.category-filters { gap: .25rem; padding: .3rem; }
.cat-pill { padding: .35rem .65rem; font-size: .68rem; }
}
@media (max-width: 480px) {
.shop-card { padding: .75rem .85rem; }
}
.scan-swipe-hint { display: none; }
@keyframes scanSwipe {
0%, 100% { transform: translateX(0); opacity: .7; }
50% { transform: translateX(3px); opacity: 1; }
}
@media (max-width: 768px) {
.scan-swipe-hint {
display: flex; align-items: center; justify-content: center; gap: .55rem;
margin-top: .6rem; color: var(--text-muted); font-size: .66rem;
font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
font-family: var(--font-display);
}
.scan-swipe-hint i {
font-size: .6rem; color: var(--red);
animation: scanSwipe 1.6s ease-in-out infinite;
}
.scan-pills {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: .45rem;
padding-bottom: .25rem;
}
.scan-pills::-webkit-scrollbar { display: none; }
.scan-pill {
flex: 0 0 auto;
min-width: max-content;
font-size: .7rem;
padding: .5rem .85rem;
}
.scan-result-grid { gap: .5rem; }
.scan-result-card { padding: 1.1rem .6rem; }
}
.crypto-pills {
flex-wrap: wrap;
overflow: visible;
}
.crypto-pills .scan-pill {
cursor: pointer;
font-family: var(--font-display);
letter-spacing: .06em;
}
.crypto-pills .scan-pill:hover {
border-color: var(--red);
color: var(--text);
}
.pay-address-box {
max-width: none;
margin: 0 auto 1.1rem;
gap: .5rem;
display: flex;
align-items: center;
}
.pay-address-box > i {
position: static;
transform: none;
flex-shrink: 0;
}
.pay-address-box input {
flex: 1;
min-width: 0;
padding-left: .9rem;
font-family: var(--font-display);
font-size: .78rem;
letter-spacing: .02em;
}
.pay-copy-btn {
flex-shrink: 0;
padding: .45rem .85rem;
font-size: .7rem;
}
.pay-qr-card {
max-width: 280px;
margin: 0 auto;
text-align: center;
padding: 1.4rem 1.2rem 1.1rem;
}
.pay-qr-card img {
display: block;
width: 220px;
height: 220px;
margin: 0 auto .8rem;
border-radius: var(--radius);
background: #fff;
padding: 8px;
}
.pay-qr-card p {
font-size: .74rem;
}
.formation-plans {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.formation-plans:has(> :only-child) {
grid-template-columns: 1fr;
}
@media (max-width: 768px) {
.pay-qr-card img { width: 190px; height: 190px; }
}
.panier-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 .35rem;
margin-left: .35rem; border-radius: var(--radius-sm);
background: var(--red); color: #fff;
font-family: var(--font-display); font-size: .62rem; font-weight: 700;
line-height: 1; letter-spacing: 0;
}
.panier-actions { padding-left: .6rem; flex-shrink: 0; }
.panier-add { display: inline-flex; margin: 0; }
.panier-add-btn {
padding: .25rem .6rem; font-size: .68rem;
width: auto; white-space: nowrap;
}
.panier-item { flex-direction: column; align-items: stretch; gap: .65rem; padding: .85rem 0; }
.panier-item-head { display: flex; align-items: center; gap: .8rem; }
.panier-item-logo { width: 34px; height: 34px; }
.panier-item-text { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; min-width: 0; flex: 1; }
.panier-item-price { font-size: 1rem; flex-shrink: 0; }
.panier-item-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.panier-item-actions .btn { padding: .5rem 1rem; font-size: .76rem; }
.panier-total { padding-top: .9rem; border-top: 1px solid var(--border); }
.panier-finaliser { display: flex; flex-wrap: wrap; gap: .65rem; }
@media (max-width: 768px) {
.panier-add-btn { width: auto; min-height: 32px; }
.panier-item-actions .btn, .panier-finaliser .btn, .panier-page .btn { min-height: 44px; }
.panier-item-actions form { width: 100%; }
.panier-item-actions .btn { width: 100%; }
}
.formation-page { overflow-x: hidden; }
.formation-hero {
min-height: 82vh;
padding: 7rem 2rem 4.5rem;
align-items: center;
}
.formation-hero::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 55% 45% at 50% 32%, rgba(255, 45, 59, .16), rgba(255, 45, 59, .05) 45%, transparent 72%);
}
.formation-hero .hero-inner { position: relative; z-index: 1; }
.formation-hero .hero-badge {
display: inline-flex; align-items: center; gap: .5rem;
background: rgba(255, 45, 59, .12);
border: 1px solid rgba(255, 45, 59, .35);
color: var(--red);
border-radius: 999px;
padding: .45rem 1.1rem;
font-family: var(--font-display);
font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
.formation-hero p { max-width: 620px; margin-top: 1.1rem; }
.formation-hero .hero-buttons { margin-top: 1.8rem; }
.formation-stats-section { padding-top: 1rem; padding-bottom: 1rem; }
.formation-stats { gap: .9rem; }
.formation-stats .stat-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.6rem 1rem;
transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
}
.formation-stats .stat-box:hover {
transform: translateY(-3px);
border-color: rgba(255, 45, 59, .3);
box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.formation-stats .stat-num { color: var(--red); font-family: var(--font-display); }
.formation-stats .stat-lbl { color: var(--text-secondary); }
.formation-features { grid-template-columns: repeat(3, 1fr); }
.formation-features .feature-card { transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease; }
.formation-features .feature-card:hover {
transform: translateY(-4px) scale(1.01);
border-color: rgba(255, 45, 59, .3);
box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}
.formation-split {
display: grid; grid-template-columns: minmax(240px, 1fr) 1.6fr;
gap: 3rem; align-items: start;
}
.formation-split-head { text-align: left; margin-bottom: 0; }
.formation-timeline .timeline-step { position: relative; }
.formation-timeline .timeline-step::before {
content: ''; position: absolute;
left: 23px; top: 52px; bottom: 4px;
width: 1px; background: var(--border);
}
.formation-timeline .timeline-step:last-child::before { display: none; }
.formation-timeline .timeline-dot {
border-radius: 50%;
background: var(--red);
border-color: var(--red);
color: #fff;
font-family: var(--font-display);
box-shadow: 0 0 0 5px rgba(255, 45, 59, .12);
}
.formation-timeline .timeline-step:hover .timeline-dot {
background: var(--red-dark);
border-color: var(--red-dark);
box-shadow: 0 0 0 7px rgba(255, 45, 59, .16);
transform: scale(1.06);
}
.formation-timeline .timeline-body h3 { font-family: var(--font-display); }
.formation-offer { padding-top: 2.5rem; }
.formation-offer-head { text-align: center; }
.formation-offer .formation-plans { display: flex; justify-content: center; }
.formation-plan {
position: relative;
width: 100%; max-width: 640px;
background: linear-gradient(180deg, #1a1a22, #14141b);
border: 1px solid rgba(255, 45, 59, .38);
border-radius: 16px;
box-shadow: 0 0 70px rgba(255, 45, 59, .12), 0 24px 60px rgba(0, 0, 0, .45);
padding: 3.4rem 2.6rem 2.6rem;
overflow: visible;
text-align: left;
align-items: stretch;
gap: 0;
transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}
.formation-plan:hover {
transform: translateY(-4px);
border-color: rgba(255, 45, 59, .55);
box-shadow: 0 0 90px rgba(255, 45, 59, .18), 0 30px 70px rgba(0, 0, 0, .5);
}
.formation-plan .plan-recommend {
top: -15px; left: 50%; right: auto;
transform: translateX(-50%);
width: auto;
border-radius: 999px;
padding: .5rem 1.3rem;
box-shadow: 0 8px 24px rgba(255, 45, 59, .45);
white-space: nowrap;
}
.formation-plan:hover .plan-recommend { transform: translateX(-50%) scale(1.03); }
.formation-plan .plan-badge {
text-align: center;
font-family: var(--font-display);
font-size: .7rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: .8rem;
}
.formation-plan .plan-price {
text-align: center;
font-family: var(--font-display);
font-size: 4.4rem; font-weight: 700; line-height: 1;
color: var(--text);
margin-bottom: 1.8rem;
}
.formation-plan .plan-price span {
font-size: 1.05rem; font-weight: 500;
color: var(--text-secondary);
margin-left: .35rem;
}
.formation-includes {
list-style: none; margin: 0 0 1.6rem; padding: 0;
border-top: 1px solid rgba(255, 255, 255, .06);
}
.formation-includes li {
display: flex; align-items: flex-start; gap: .95rem;
padding: .95rem 0;
border-bottom: 1px solid rgba(255, 255, 255, .06);
text-align: left;
}
.formation-includes li > i {
flex-shrink: 0;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--red);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: .62rem;
margin-top: .15rem;
box-shadow: 0 4px 14px rgba(255, 45, 59, .35);
}
.formation-includes strong {
display: block;
font-family: var(--font-display);
font-size: .95rem;
color: var(--text);
margin-bottom: .15rem;
}
.formation-includes span {
display: block;
font-size: .84rem; line-height: 1.55;
color: var(--text-secondary);
}
.formation-plan-actions { display: flex; flex-direction: column; gap: .65rem; }
.formation-plan-actions .btn { width: 100%; justify-content: center; min-height: 48px; }
.formation-faq { display: flex; flex-direction: column; gap: .8rem; }
.formation-faq-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: border-color .25s ease, box-shadow .25s ease;
}
.formation-faq-item:hover { border-color: var(--border-hover); }
.formation-faq-item[open] {
border-color: rgba(255, 45, 59, .3);
box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.formation-faq-item summary {
list-style: none;
display: flex; align-items: center;
padding: 1.15rem 1.35rem;
cursor: pointer;
font-family: var(--font-display);
font-weight: 700; font-size: .98rem;
color: var(--text);
user-select: none;
}
.formation-faq-item summary::-webkit-details-marker { display: none; }
.formation-faq-item summary::marker { content: ''; }
.formation-faq-chev {
margin-left: auto;
color: var(--red);
font-size: .8rem;
transition: transform .3s var(--ease);
}
.formation-faq-item[open] .formation-faq-chev { transform: rotate(180deg); }
.formation-faq-item p {
margin: 0 1.35rem;
padding: 1rem 0 1.25rem;
border-top: 1px solid var(--border);
font-size: .87rem; line-height: 1.6;
color: var(--text-secondary);
}
@media (max-width: 900px) {
.formation-features { grid-template-columns: repeat(2, 1fr); }
.formation-split { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 640px) {
.formation-hero { min-height: auto; padding: 5.5rem 1.2rem 3rem; }
.formation-features { grid-template-columns: 1fr; }
.formation-stats { grid-template-columns: repeat(2, 1fr); }
.formation-plan { padding: 3rem 1.3rem 1.6rem; border-radius: 14px; }
.formation-plan .plan-price { font-size: 3.2rem; margin-bottom: 1.3rem; }
.formation-includes li { padding: .8rem 0; }
.formation-faq-item summary { padding: 1rem 1.1rem; font-size: .92rem; }
.formation-faq-item p { margin: 0 1.1rem; padding: .9rem 0 1.1rem; }
}
.pay-crypto-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: .65rem;
}
.pay-crypto-card {
display: flex; flex-direction: column; align-items: flex-start;
gap: .55rem;
min-height: 64px;
padding: .85rem .9rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
font-family: var(--font);
color: var(--text);
text-align: left;
transition: transform .2s var(--ease), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pay-crypto-card:hover {
border-color: var(--red);
background: var(--surface-3);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.pay-crypto-card:active,
.pay-crypto-card:focus-visible {
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(255, 45, 59, .25);
outline: none;
}
.pay-crypto-dot {
width: 12px; height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.pay-crypto-txt { display: flex; flex-direction: column; gap: .1rem; }
.pay-crypto-txt strong {
font-family: var(--font-display);
font-size: .95rem; font-weight: 700; letter-spacing: .04em;
}
.pay-crypto-sub {
font-size: .68rem;
color: var(--text-secondary);
}
.pay-crypto-card .pay-crypto-go {
display: none;
}
.pay-cancel {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .8rem;
color: var(--text-secondary);
text-decoration: none;
transition: color .2s ease;
}
.pay-cancel:hover { color: var(--text); }
.pay-qr-wrap {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 10px;
}
.pay-qr-frame {
background: #fff;
border-radius: 16px;
padding: 14px;
box-shadow: 0 18px 45px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .07);
}
.pay-qr-frame img {
display: block;
width: 260px; height: 260px;
max-width: 100%;
border-radius: 6px;
image-rendering: pixelated;
}
.pay-qr-corner {
position: absolute;
width: 22px; height: 22px;
border: 3px solid var(--red);
pointer-events: none;
}
.pay-qr-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.pay-qr-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.pay-qr-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.pay-qr-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.pay-qr-caption {
margin: 1rem auto 0;
max-width: 320px;
font-size: .82rem; line-height: 1.55;
color: var(--text);
text-align: center;
}
.pay-qr-caption span { color: var(--text-secondary); font-size: .76rem; }
.pay-pulse {
display: inline-block;
width: 9px; height: 9px;
margin-right: .5rem;
border-radius: 50%;
background: var(--red);
vertical-align: middle;
animation: pay-pulse 1.6s ease-out infinite;
}
@keyframes pay-pulse {
0%   { box-shadow: 0 0 0 0 rgba(255, 45, 59, .45); }
70%  { box-shadow: 0 0 0 9px rgba(255, 45, 59, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 45, 59, 0); }
}
@media (max-width: 900px) {
.pay-crypto-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.pay-crypto-grid { grid-template-columns: repeat(2, 1fr); }
.pay-crypto-card { min-height: 56px; padding: .75rem .8rem; }
.pay-qr-frame img { width: 230px; height: 230px; }
}
.bx-photo {
position: relative; isolation: isolate; overflow: hidden;
background-color: var(--bg);
background-size: cover; background-position: center;
background-repeat: no-repeat;
}
.bx-photo::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.bx-photo::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
box-shadow: inset 0 0 140px rgba(0, 0, 0, .55);
}
.bx-photo > * { position: relative; z-index: 1; }
.bx-photo--hero::before {
background:
linear-gradient(180deg, rgba(13,13,15,.55) 0%, rgba(13,13,15,0) 22%, rgba(13,13,15,0) 70%, var(--bg) 100%),
linear-gradient(90deg, rgba(13,13,15,.94) 0%, rgba(13,13,15,.88) 42%, rgba(13,13,15,.50) 72%, rgba(13,13,15,.30) 100%);
}
.bx-photo .formation-hero::after { background: none; border: 0; }
.bx-photo--hero > .hero-video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: -1; pointer-events: none;
}
.bx-photo--page::before {
background:
radial-gradient(ellipse 42% 38% at 50% 66%, rgba(13,13,15,.62), transparent 72%),
linear-gradient(180deg, rgba(13,13,15,.50) 0%, rgba(13,13,15,.12) 40%, rgba(13,13,15,.35) 78%, var(--bg) 100%),
linear-gradient(90deg, rgba(13,13,15,.84) 0%, rgba(13,13,15,.62) 50%, rgba(13,13,15,.28) 100%);
}
.bx-photo--page .page-hero { padding-bottom: 6rem; min-height: 380px; }
.bx-photo--page .section-title, .bx-photo--page .section-desc, .bx-photo--page .section-label {
text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 18px rgba(0,0,0,.75);
}
.bx-photo--page .section-desc, .bx-photo--hero .hero p { color: #B4B4C4; }
.bx-photo--band::before {
background:
linear-gradient(180deg, var(--bg) 0%, rgba(13,13,15,.86) 12%, rgba(13,13,15,.86) 88%, var(--bg) 100%);
}
.bx-img-ring          { background-image: url('/img/tyson-hero.jpg'); background-position: 38% 30%; }
.bx-img-wraps         { background-image: url('/img/tyson-formations.jpg'); background-position: 50% 20%; }
.bx-img-gloves-red    { background-image: url('/img/band-gloves-red.jpg'); background-position: center 40%; }
.bx-img-gloves-lights { background-image: url('/img/band-gloves-lights.jpg'); background-position: center 45%; }
.bx-img-heavybag-dark { background-image: url('/img/tyson-band.jpg'); background-position: center 30%; }
.bx-band {
position: relative;
background: linear-gradient(180deg, #101018 0%, #14141C 100%);
border-top: 1px solid rgba(255,255,255,.045);
border-bottom: 1px solid rgba(255,255,255,.045);
}
.bx-band--glow::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 60% 50% at 12% 0%, rgba(255,45,59,.09), transparent 70%);
}
.bx-band--deep {
background: linear-gradient(180deg, #0F0F14 0%, #0D0D0F 100%);
border-top: 1px solid rgba(255,255,255,.035);
border-bottom: 0;
}
.bx-band > * { position: relative; }
.bx-sep {
height: 1px; max-width: 1200px; margin: 0 auto;
background: linear-gradient(90deg, transparent, rgba(255,45,59,.45), transparent);
}
.bx-band .feature-card, .bx-photo--band .feature-card,
.bx-band .note-card, .bx-band .rule-card, .bx-band .stat-box,
.bx-band .timeline-body, .bx-band .guarantee-box, .bx-band .info-box {
background: linear-gradient(160deg, #18181E 0%, #131317 100%);
border-color: #26262C;
box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.28);
}
.bx-band .feature-card:hover, .bx-photo--band .feature-card:hover,
.bx-band .note-card:hover, .bx-band .rule-card:hover, .bx-band .stat-box:hover {
background: linear-gradient(160deg, #1D1D24 0%, #17171C 100%);
border-color: #33333B;
}
.bx-band .vouch-card {
background: linear-gradient(160deg, #18181E 0%, #131317 100%);
border-color: #26262C;
}
.bx-band .marquee-wrap::before { background: linear-gradient(to right, #101018, transparent); }
.bx-band .marquee-wrap::after  { background: linear-gradient(to left,  #14141C, transparent); }
.bx-band .marquee-wrap { border-color: rgba(255,255,255,.05); }
.bx-cta {
background-image:
linear-gradient(90deg, rgba(13,13,15,.90) 0%, rgba(13,13,15,.82) 50%, rgba(13,13,15,.90) 100%),
url('/img/band-gloves-bw.jpg');
background-size: cover; background-position: center 45%;
border-color: #26262C;
box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.bx-cta .btn-outline { background: rgba(13,13,15,.55); }
@media (max-width: 768px) {
.bx-photo--hero::before {
background:
linear-gradient(180deg, rgba(13,13,15,.62) 0%, rgba(13,13,15,.55) 60%, var(--bg) 100%),
linear-gradient(90deg, rgba(13,13,15,.72) 0%, rgba(13,13,15,.58) 55%, rgba(13,13,15,.42) 100%);
}
.bx-photo--hero .hero h1, .bx-photo--hero .hero p, .bx-photo--hero .hero-subtitle {
text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 18px rgba(0,0,0,.75);
}
.bx-photo--page::before {
background: linear-gradient(180deg, rgba(13,13,15,.70) 0%, rgba(13,13,15,.55) 55%, var(--bg) 100%);
}
.bx-photo--page .page-hero { min-height: 320px; }
.bx-img-ring  { background-position: 30% 30%; }
.bx-img-wraps { background-position: 55% 20%; }
.bx-photo::after { box-shadow: inset 0 0 80px rgba(0,0,0,.5); }
.bx-photo--page .page-hero { padding-bottom: 3.5rem; }
}
#transporteurs .transport-card {
border-radius: 14px;
background: linear-gradient(180deg, var(--surface-2), var(--surface));
transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
}
#transporteurs .transport-card:hover {
transform: translateY(-3px);
border-color: rgba(255, 45, 59, .28);
box-shadow: 0 16px 42px rgba(0, 0, 0, .42);
}
#transporteurs .transport-card-head {
padding: 1.4rem 1.6rem 1.1rem;
gap: 1.05rem;
}
#transporteurs .transport-logo {
width: 56px; height: 56px;
border-radius: 14px;
background: transparent;
box-shadow: none;
}
#transporteurs .transport-logo img { padding: 6px; }
#transporteurs .transport-card-head h3 { font-size: 1.12rem; }
#transporteurs .transport-card-head .transport-type { margin-top: .25rem; }
#transporteurs .transport-card-body { padding-top: .5rem; }
#transporteurs .services-list .service-row {
padding: .7rem .35rem;
margin: 0 -.35rem;
border-bottom: 1px solid rgba(255, 255, 255, .05);
border-radius: 6px;
transition: background .2s ease, padding-left .2s var(--ease);
}
#transporteurs .services-list .service-row:last-child { border-bottom: 0; }
#transporteurs .services-list .service-row:hover {
background: rgba(255, 255, 255, .025);
padding-left: .6rem;
}
#transporteurs .service-price { font-family: var(--font-display); font-weight: 700; }
#transporteurs .panier-actions .btn { min-height: 34px; }
#transporteurs .transport-footer {
gap: .5rem;
padding-top: 1rem;
}
#transporteurs .transport-tag {
border: 1px solid var(--border);
border-radius: 999px;
padding: .32rem .75rem;
background: rgba(255, 255, 255, .03);
}
@media (max-width: 640px) {
#transporteurs .transport-card { border-radius: 12px; }
#transporteurs .transport-card-head { padding: 1.2rem 1.2rem .95rem; }
#transporteurs .transport-logo { width: 48px; height: 48px; border-radius: 12px; }
}
.marquee-track { animation-duration: 32s; }
.marquee-item {
font-size: .78rem;
color: var(--text-secondary);
letter-spacing: .17em;
}
.marquee-item i {
font-size: .3rem;
filter: drop-shadow(0 0 5px rgba(255, 45, 59, .75));
}
.bx-spin {
display: inline-block;
width: 13px; height: 13px;
margin-right: .45rem;
vertical-align: -2px;
border: 2px solid rgba(255, 255, 255, .35);
border-top-color: #fff;
border-radius: 50%;
animation: bx-spin .8s linear infinite;
}
@keyframes bx-spin { to { transform: rotate(360deg); } }
.ctc-img-heavybag { background-image: url('/img/band-heavybag-dark.jpg'); background-position: 60% 40%; }
.ctc-photo.bx-photo--page::before {
background:
radial-gradient(ellipse 46% 40% at 30% 60%, rgba(13,13,15,.55), transparent 72%),
linear-gradient(180deg, rgba(13,13,15,.62) 0%, rgba(13,13,15,.30) 45%, rgba(16,16,24,.55) 82%, #101018 100%),
linear-gradient(90deg, rgba(13,13,15,.90) 0%, rgba(13,13,15,.70) 48%, rgba(13,13,15,.38) 100%);
}
.ctc-photo .page-hero { padding-bottom: 5.5rem; }
.ctc-photo .section-label {
display: inline-flex; align-items: center; gap: .5rem;
padding: .38rem .8rem; border: 1px solid rgba(255,45,59,.45); border-radius: 999px;
background: rgba(13,13,15,.55);
}
.ctc-band { border-top: 0; }
.ctc-channels { padding-top: 2.5rem; padding-bottom: 3rem; }
.ctc-grid { gap: 1rem; }
.ctc-card {
position: relative; overflow: hidden;
padding: 2.2rem 2rem; gap: 1.6rem; align-items: center;
background: linear-gradient(160deg, #18181E 0%, #131317 100%);
border-color: #26262C; border-radius: 12px;
box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.28);
transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.ctc-card::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 55% 60% at 0% 50%, rgba(255,255,255,.035), transparent 70%);
}
.ctc-card:hover {
transform: translateY(-5px);
background: linear-gradient(160deg, #1D1D24 0%, #17171C 100%);
border-color: rgba(255,45,59,.45);
box-shadow: 0 0 0 1px rgba(255,45,59,.10), 0 18px 44px rgba(0,0,0,.45), 0 0 50px rgba(255,45,59,.08);
}
.ctc-card--primary {
border-color: rgba(255,45,59,.42);
box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 0 60px rgba(255,45,59,.10), 0 14px 36px rgba(0,0,0,.38);
}
.ctc-card--primary::after {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--red), transparent);
pointer-events: none;
}
.ctc-card--primary:hover { border-color: rgba(255,45,59,.65); }
.ctc-card .contact-hero-left, .ctc-card .contact-hero-right { position: relative; }
.ctc-icon {
width: 76px; height: 76px; border-radius: 18px; font-size: 2rem;
box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
transition: transform .3s var(--ease);
}
.ctc-card:hover .ctc-icon { transform: scale(1.06) rotate(-3deg); }
.ctc-card .contact-hero-right h3 { font-size: 1.2rem; }
.ctc-card .contact-hero-right p { font-size: .82rem; margin-bottom: 1.05rem; }
.ctc-link {
min-height: 44px; padding: .6rem 1.15rem; font-size: .76rem; gap: .6rem;
border-color: rgba(255,255,255,.10); color: var(--text);
transition: border-color .2s ease, color .2s ease, background .2s ease, gap .2s var(--ease);
}
.ctc-link i { font-size: .7rem; transition: transform .25s var(--ease); }
.ctc-card:hover .ctc-link { border-color: var(--red); color: var(--red); background: rgba(255,45,59,.06); }
.ctc-card:hover .ctc-link i { transform: translateX(4px); }
.ctc-card--primary .ctc-link { border-color: rgba(255,45,59,.45); color: var(--red); }
.ctc-form-section { padding-top: 4rem; padding-bottom: 4.5rem; }
.ctc-form-head { text-align: center; margin-bottom: 2.25rem; }
.ctc-form-head .section-desc { margin: 0 auto; }
.ctc-form {
position: relative;
max-width: 640px; margin: 0 auto;
background: linear-gradient(180deg, #1a1a22, #14141b);
border: 1px solid rgba(255,45,59,.30); border-radius: 16px;
box-shadow: 0 0 70px rgba(255,45,59,.10), 0 24px 60px rgba(0,0,0,.45);
padding: 2.6rem 2.6rem 2.4rem;
}
.ctc-form::before {
content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--red), transparent);
pointer-events: none;
}
.ctc-field { margin-bottom: 1.35rem; }
.ctc-label {
display: block; margin-bottom: .55rem;
font-family: var(--font-display); font-size: .72rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary);
}
.ctc-req { color: var(--red); }
.ctc-input-wrap { position: relative; }
.ctc-input-wrap i {
position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
color: var(--text-muted); font-size: .95rem; pointer-events: none;
transition: color .2s ease;
}
.ctc-input-wrap:focus-within i { color: var(--red); }
.ctc-input {
width: 100%; display: block;
min-height: 48px; padding: .8rem 1rem;
background: rgba(13,13,15,.55); border: 1px solid rgba(255,255,255,.09);
border-radius: var(--radius); color: var(--text);
font-family: var(--font); font-size: .86rem; line-height: 1.5;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ctc-input--icon { padding-left: 2.6rem; }
.ctc-textarea { resize: vertical; min-height: 150px; }
.ctc-input::placeholder { color: var(--text-muted); }
.ctc-input:hover { border-color: rgba(255,255,255,.16); }
.ctc-input:focus {
border-color: var(--red);
background: rgba(13,13,15,.75);
box-shadow: 0 0 0 3px var(--red-glow);
}
.ctc-submit {
width: 100%; justify-content: center;
min-height: 50px; margin-top: .4rem;
font-size: .88rem; letter-spacing: .01em;
box-shadow: 0 10px 30px rgba(255,45,59,.28);
}
.ctc-submit:hover { opacity: 1; box-shadow: 0 14px 36px rgba(255,45,59,.38); }
@media (max-width: 768px) {
.ctc-photo .page-hero { padding-bottom: 3.25rem; }
.ctc-channels { padding-top: 1.75rem; padding-bottom: 2.25rem; }
.ctc-card { padding: 1.8rem 1.4rem; gap: 1.1rem; }
.ctc-card::before { background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,255,255,.035), transparent 70%); }
.ctc-icon { width: 64px; height: 64px; border-radius: 16px; font-size: 1.7rem; }
.ctc-link { width: 100%; justify-content: center; }
.ctc-form-section { padding-top: 3rem; padding-bottom: 3.25rem; }
.ctc-form-head { margin-bottom: 1.75rem; }
.ctc-form { padding: 1.75rem 1.25rem 1.5rem; border-radius: 12px; }
.ctc-input { font-size: 16px; }
}
#transporteurs .services-list .service-row {
display: grid; grid-template-columns: 1fr auto auto;
align-items: center; gap: .9rem;
}
#transporteurs .services-list .service-row:hover { padding-left: .35rem; }
#transporteurs .service-name { line-height: 1.35; font-size: .8rem; }
#transporteurs .service-price {
font-size: .95rem; color: var(--text); min-width: 3.2rem; text-align: right;
}
.service-actions { display: inline-flex; align-items: center; gap: .35rem; }
.service-order {
display: inline-flex; align-items: center; height: 30px; padding: 0 .8rem;
border-radius: 6px; font-size: .7rem; font-weight: 600; white-space: nowrap;
color: var(--red); border: 1px solid rgba(255,45,59,.35);
background: rgba(255,45,59,.06);
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.service-order:hover,
.service-row:hover .service-order { background: var(--red); color: #fff; border-color: var(--red); }
.service-cart {
width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 6px; border: 1px solid var(--border); background: transparent;
color: var(--text-muted); font-size: .75rem; cursor: pointer;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.service-cart:hover { color: var(--text); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.04); }
@media (max-width: 420px) {
#transporteurs .services-list .service-row { gap: .6rem; }
.service-order { padding: 0 .6rem; }
}
.ctc2 { padding-top: 3rem; }
.ctc2-grid {
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 1.5rem; align-items: start; max-width: 1080px; margin: 0 auto;
}
.ctc2-form {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 2rem;
}
.ctc2-head { margin-bottom: 1.5rem; }
.ctc2-head h2 {
font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
letter-spacing: -.03em; margin: .3rem 0 .4rem;
}
.ctc2-head p { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }
.ctc2-hint { font-size: .72rem; color: var(--text-muted); margin-top: .4rem; }
.ctc2-count { text-align: right; font-variant-numeric: tabular-nums; }
.ctc2-form .ctc-submit { width: 100%; justify-content: center; }
.ctc2-form .ctc-submit:disabled { opacity: .7; cursor: wait; }
.ctc2-privacy { font-size: .72rem; color: var(--text-muted); text-align: center; margin-top: .8rem; }
.ctc2-privacy i { margin-right: .3rem; }
.ctc2-side { display: flex; flex-direction: column; gap: 1rem; }
.ctc2-tg {
display: flex; align-items: center; gap: 1rem; padding: 1.25rem;
border-radius: 12px; border: 1px solid rgba(42,171,238,.3);
background: linear-gradient(135deg, rgba(42,171,238,.12), rgba(42,171,238,.03));
transition: border-color .2s ease, transform .2s ease;
}
.ctc2-tg:hover { border-color: rgba(42,171,238,.6); transform: translateY(-2px); }
.ctc2-tg-icon {
width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #2aabee; color: #fff; font-size: 1.2rem;
}
.ctc2-tg-kicker { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #2aabee; }
.ctc2-tg-title { font-weight: 700; font-size: 1rem; margin: .1rem 0; }
.ctc2-tg-handle { font-size: .78rem; color: var(--text-secondary); }
.ctc2-tg-arrow { margin-left: auto; color: var(--text-muted); transition: transform .2s ease; }
.ctc2-tg:hover .ctc2-tg-arrow { transform: translateX(3px); color: var(--text); }
.ctc2-facts {
list-style: none; margin: 0; padding: .5rem 1.25rem;
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.ctc2-facts li {
display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 0;
border-bottom: 1px solid var(--border);
}
.ctc2-facts li:last-child { border-bottom: 0; }
.ctc2-facts i { color: var(--red); margin-top: .2rem; width: 16px; text-align: center; }
.ctc2-facts strong { display: block; font-size: .85rem; color: var(--text); }
.ctc2-facts span { font-size: .75rem; color: var(--text-muted); }
@media (max-width: 860px) {
.ctc2-grid { grid-template-columns: 1fr; }
.ctc2-form { padding: 1.4rem; }
}
.marquee-wrap { padding: 1rem 0; }
.marquee-track { gap: 1rem; animation-duration: 45s; }
.marquee-item {
gap: .6rem; padding: .4rem .9rem .4rem .45rem;
border: 1px solid rgba(255,255,255,.06); border-radius: 999px;
background: rgba(255,255,255,.02);
font-size: .74rem; letter-spacing: .08em; color: var(--text-secondary);
transition: color .2s ease, border-color .2s ease;
}
.marquee-item img {
width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
background: #fff;
}
.marquee-item:hover { color: var(--text); border-color: rgba(255,45,59,.35); }
.auth-section { padding-top: 7.5rem; padding-bottom: 4rem; }
.auth-card {
max-width: 440px; margin: 0 auto; padding: 2.25rem 2rem 1.75rem;
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.auth-head { text-align: center; margin-bottom: 1.75rem; }
.auth-icon {
width: 48px; height: 48px; margin: 0 auto 1rem; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,45,59,.1); color: var(--red); font-size: 1.1rem;
border: 1px solid rgba(255,45,59,.25);
}
.auth-head h1 {
font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
letter-spacing: -.03em; margin-bottom: .4rem;
}
.auth-head p { font-size: .84rem; color: var(--text-secondary); line-height: 1.6; }
.auth-error {
display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1.25rem;
padding: .75rem .9rem; border-radius: 8px; font-size: .8rem;
background: rgba(255,45,59,.08); border: 1px solid rgba(255,45,59,.3); color: var(--text);
}
.auth-error i { color: var(--red); margin-top: .15rem; }
.auth-pass { padding-right: 2.75rem !important; }
.auth-eye {
position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
color: var(--text-muted); border-radius: 6px;
}
.auth-eye:hover { color: var(--text); background: rgba(255,255,255,.05); }
.auth-card .ctc-input-wrap > .auth-eye i { position: static; transform: none; }
.auth-meter { height: 3px; margin-top: .5rem; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.auth-meter span { display: block; height: 100%; width: 0; transition: width .25s ease, background .25s ease; background: var(--red); }
.auth-meter span[data-level="ok"] { background: #f5a623; }
.auth-meter span[data-level="strong"] { background: #22c55e; }
.auth-hint { font-size: .72rem; margin-top: .4rem; min-height: 1em; color: var(--text-muted); }
.auth-hint.ok { color: #22c55e; }
.auth-hint.bad { color: var(--red); }
.auth-submit { width: 100%; justify-content: center; margin-top: .5rem; }
.auth-switch {
text-align: center; margin-top: 1.5rem; padding-top: 1.25rem;
border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-muted);
}
.auth-switch a { color: var(--text); font-weight: 600; margin-left: .25rem; }
.auth-switch a:hover { color: var(--red); }
.auth-note {
max-width: 440px; margin: 1.25rem auto 0; text-align: center;
font-size: .72rem; color: var(--text-muted); line-height: 1.6;
}
.auth-note i { color: var(--red); margin-right: .3rem; }
@media (max-width: 480px) {
.auth-section { padding-top: 5.5rem; }
.auth-card { padding: 1.75rem 1.25rem 1.5rem; }
}
.auth-caps { color: #f5a623; }
.auth-note a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.auth-note a:hover { color: var(--text); }
.auth-submit:disabled { opacity: .7; cursor: wait; }
.auth-section { min-height: calc(100vh - 120px); display: flex; flex-direction: column; justify-content: center; }
.auth-shell {
display: grid; grid-template-columns: 1fr 1fr;
max-width: 900px; width: 100%; margin: 0 auto;
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.45);
}
.auth-shell .auth-card {
max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
background: transparent; padding: 2.75rem 2.5rem 2rem;
}
.auth-shell .auth-head { text-align: left; }
.auth-shell .auth-icon { margin: 0 0 1rem; }
.auth-visual {
position: relative; background-size: cover; background-position: center;
min-height: 100%;
}
.auth-visual::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(13,13,15,.25) 0%, rgba(13,13,15,.55) 45%, rgba(13,13,15,.95) 100%),
linear-gradient(90deg, rgba(255,45,59,.18), transparent 60%);
}
.auth-visual-inner {
position: relative; height: 100%; display: flex; flex-direction: column;
justify-content: flex-end; padding: 2.25rem;
}
.auth-visual-brand {
position: absolute; top: 2rem; left: 2.25rem;
display: flex; align-items: center; gap: .5rem;
font-family: var(--font-display); font-weight: 700; font-size: .95rem;
}
.auth-visual-brand img { width: 26px; height: 26px; border-radius: 5px; }
.auth-visual h2 {
font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
letter-spacing: -.04em; line-height: 1.1; margin-bottom: 1.1rem;
}
.auth-visual ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.auth-visual li { font-size: .84rem; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: .6rem; }
.auth-visual li i {
width: 18px; height: 18px; border-radius: 50%; font-size: .55rem;
display: inline-flex; align-items: center; justify-content: center;
background: var(--red); color: #fff;
}
.auth-note { max-width: 900px; }
.auth-card .ctc-input:focus {
border-color: rgba(255,255,255,.28);
box-shadow: 0 0 0 3px rgba(255,255,255,.05);
background: rgba(13,13,15,.8);
}
.auth-card .ctc-input-wrap:focus-within > i { color: var(--text); }
.auth-card .ctc-input-wrap > .auth-eye i { color: var(--text-muted); }
.auth-card .ctc-input-wrap > .auth-eye:hover i { color: var(--text); }
.auth-caps:empty { display: none; }
.auth-card .ctc-field:last-of-type { margin-bottom: 1.5rem; }
.auth-head p, .auth-switch, .auth-note { color: var(--text-secondary); }
@media (max-width: 820px) {
.auth-shell { grid-template-columns: 1fr; max-width: 460px; }
.auth-visual { min-height: 150px; }
.auth-visual ul, .auth-visual-brand { display: none; }
.auth-visual-inner { padding: 1.5rem; }
.auth-visual h2 { font-size: 1.4rem; margin: 0; }
.auth-shell .auth-card { padding: 1.75rem 1.4rem 1.5rem; }
}
.kpi-bar {
display: grid; grid-template-columns: repeat(4, 1fr);
max-width: 1100px; margin: 0 auto;
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
border: 1px solid rgba(255,255,255,.07); border-radius: 16px;
position: relative; overflow: hidden;
}
.kpi-bar::before {
content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,45,59,.6), transparent);
}
.kpi {
position: relative; padding: 2rem 1.5rem; text-align: center;
transition: background .25s ease;
}
.kpi + .kpi::before {
content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px;
background: rgba(255,255,255,.08);
}
.kpi:hover { background: rgba(255,45,59,.04); }
.kpi-icon {
width: 38px; height: 38px; margin: 0 auto .9rem; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,45,59,.1); color: var(--red); font-size: .9rem;
border: 1px solid rgba(255,45,59,.2);
}
.kpi-num {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(2rem, 3.4vw, 2.7rem); letter-spacing: -.04em; line-height: 1;
color: var(--text); font-variant-numeric: tabular-nums;
}
.kpi-num em { font-style: normal; color: var(--red); margin-left: .05em; }
.kpi-lbl {
margin-top: .6rem; font-size: .78rem; font-weight: 500;
color: var(--text-secondary); letter-spacing: .01em;
}
@media (max-width: 768px) {
.kpi-bar { grid-template-columns: 1fr 1fr; }
.kpi { padding: 1.5rem 1rem; }
.kpi:nth-child(3)::before { display: none; }
.kpi:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.07); }
}
@media (max-width: 1440px) {
.navbar--user { padding: 0 1.5rem; }
.navbar--user .nav-links a,
.navbar--user .nav-links button { padding: .45rem .5rem !important; }
.navbar--user .nav-cta { margin-left: .4rem; }
}
@media (max-width: 1240px) and (min-width: 1021px) {
.navbar--user .nav-links a, .navbar--user .nav-links button { font-size: .72rem !important; padding: .45rem .4rem !important; }
}
.recap-section { padding-top: 6.5rem; }
.recap-wrap { max-width: 980px; margin: 0 auto; }
.recap-back {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .8rem; color: var(--text-muted); margin-bottom: 1.5rem;
}
.recap-back:hover { color: var(--text); }
.recap-steps {
list-style: none; margin: 0 0 1.75rem; padding: 0;
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.recap-steps li {
display: flex; align-items: center; gap: .5rem;
font-size: .78rem; font-weight: 600; color: var(--text-muted);
}
.recap-steps li + li::before {
content: ''; width: 28px; height: 1px; background: rgba(255,255,255,.12); margin-right: .1rem;
}
.recap-steps span {
width: 24px; height: 24px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: .7rem; border: 1px solid rgba(255,255,255,.14);
}
.recap-steps .is-current { color: var(--text); }
.recap-steps .is-current span { background: var(--red); border-color: var(--red); color: #fff; }
.recap-grid {
display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 1.25rem; align-items: start;
}
.recap-card, .recap-next, .recap-trust {
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.recap-head {
display: flex; gap: 1rem; align-items: center;
padding: 1.6rem 1.6rem 1.4rem; border-bottom: 1px solid var(--border);
}
.recap-logo {
width: 56px; height: 56px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
background: rgba(255,255,255,.04); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
}
.recap-logo img { width: 100%; height: 100%; object-fit: cover; }
.recap-kicker {
font-size: .66rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--red);
}
.recap-head h1 {
font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
letter-spacing: -.03em; line-height: 1.15; margin: .15rem 0 .2rem;
}
.recap-sub { font-size: .8rem; color: var(--text-secondary); }
.recap-lines { margin: 0; padding: .6rem 1.6rem; }
.recap-lines > div {
display: flex; justify-content: space-between; gap: 1rem;
padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .85rem;
}
.recap-lines > div:last-child { border-bottom: 0; }
.recap-lines dt { color: var(--text-muted); }
.recap-lines dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.recap-free { color: #22c55e !important; }
.recap-free i { margin-right: .3rem; font-size: .75rem; }
.recap-total {
display: flex; justify-content: space-between; align-items: baseline;
margin: 0 1rem 1rem; padding: 1.1rem 1rem; border-radius: 10px;
background: rgba(255,45,59,.06); border: 1px solid rgba(255,45,59,.18);
}
.recap-total span { font-size: .8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .1em; }
.recap-total strong {
font-family: var(--font-display); font-size: 2rem; font-weight: 700;
letter-spacing: -.04em; line-height: 1; color: var(--text);
}
.recap-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 80px; }
.recap-next { padding: 1.5rem; }
.recap-next h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.recap-next p { font-size: .82rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.2rem; }
.recap-cta { width: 100%; justify-content: center; min-height: 46px; }
.recap-cart { margin: .7rem 0 0; }
.recap-cart button {
width: 100%; background: none; border: 1px solid var(--border); border-radius: var(--radius);
color: var(--text-secondary); font-family: var(--font); font-size: .78rem; font-weight: 500;
padding: .65rem; cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.recap-cart button:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.recap-cart i { margin-right: .35rem; }
.recap-trust { list-style: none; margin: 0; padding: .4rem 1.25rem; }
.recap-trust li {
display: flex; align-items: center; gap: .7rem; padding: .75rem 0;
font-size: .8rem; color: var(--text-secondary);
border-bottom: 1px solid rgba(255,255,255,.05);
}
.recap-trust li:last-child { border-bottom: 0; }
.recap-trust i { color: var(--red); width: 16px; text-align: center; font-size: .8rem; }
@media (max-width: 820px) {
.recap-section { padding-top: 5rem; }
.recap-grid { grid-template-columns: 1fr; }
.recap-side { position: static; }
.recap-head h1 { font-size: 1.4rem; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.recap-steps .is-done { color: var(--text-secondary); }
.recap-steps .is-done span { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.45); color: #22c55e; font-size: .6rem; }
.recap-steps .is-done + li::before { background: rgba(34,197,94,.45); }
.flow-body { padding: 1.5rem 1.6rem 1.6rem; }
.flow-submit { width: 100%; justify-content: center; min-height: 48px; margin-top: 1rem; }
.flow-submit:disabled { opacity: .75; cursor: wait; }
.flow-hint { font-size: .75rem; color: var(--text-muted); line-height: 1.6; margin-top: .6rem; }
.flow-alert {
display: flex; gap: .7rem; align-items: flex-start;
padding: .85rem 1rem; border-radius: 10px; font-size: .8rem; line-height: 1.55;
border: 1px solid var(--border); background: rgba(255,255,255,.025); color: var(--text-secondary);
margin-bottom: 1rem;
}
.flow-alert i { margin-top: .2rem; }
.flow-alert strong { color: var(--text); }
.flow-body form + .flow-alert { margin: 1.25rem 0 0; }
.flow-alert--info i { color: #60a5fa; }
.flow-alert--ok { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.06); }
.flow-alert--ok i { color: #22c55e; }
.flow-alert--warn { border-color: rgba(245,166,35,.3); background: rgba(245,166,35,.06); }
.flow-alert--warn i { color: #f5a623; }
.flow-alert--error { border-color: rgba(255,45,59,.35); background: rgba(255,45,59,.07); color: var(--text); }
.flow-alert--error i { color: var(--red); }
.flow-alert--page { max-width: 980px; margin: 0 0 1.25rem; }
.recap-mini { margin: 0 0 1rem; }
.recap-mini > div {
display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .8rem;
}
.recap-mini > div:last-child { border-bottom: 0; }
.recap-mini dt { color: var(--text-muted); }
.recap-mini dt small { display: block; font-family: ui-monospace, monospace; font-size: .7rem; color: var(--text-muted); opacity: .8; margin-top: .1rem; }
.recap-mini dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; white-space: nowrap; }
.recap-mini .mono { font-family: ui-monospace, monospace; font-size: .76rem; }
.recap-total--side { margin: 0 0 1rem; padding: .9rem 1rem; }
.recap-total--side strong { font-size: 1.6rem; }
.recap-next .recap-cta:disabled { opacity: .45; cursor: not-allowed; }
.recap-cart-link { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--text-secondary); margin-top: .9rem; }
.recap-cart-link:hover { color: var(--text); }
.dropzone {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
padding: 2.4rem 1.25rem; border-radius: 12px; cursor: pointer; text-align: center;
border: 1.5px dashed rgba(255,255,255,.16); background: rgba(255,255,255,.02);
transition: border-color .2s ease, background .2s ease;
}
.dropzone:hover, .dropzone.is-over { border-color: rgba(255,45,59,.6); background: rgba(255,45,59,.05); }
.dropzone-icon {
width: 54px; height: 54px; border-radius: 50%; margin-bottom: .5rem;
display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
background: rgba(255,45,59,.1); color: var(--red);
}
.dropzone strong { font-size: .95rem; color: var(--text); word-break: break-all; }
.dropzone span { font-size: .78rem; color: var(--text-muted); }
.dropzone.has-file { border-style: solid; border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.05); }
.dropzone.has-file .dropzone-icon { background: rgba(34,197,94,.12); color: #22c55e; }
.dropzone.is-bad { border-color: rgba(255,45,59,.6); background: rgba(255,45,59,.06); }
.dropzone.is-bad span { color: var(--red); }
.dropzone.is-busy .dropzone-icon i { animation: bx-pulse 1s ease-in-out infinite; }
@keyframes bx-pulse { 50% { opacity: .35; } }
#bordereau:focus-visible + .flow-submit { box-shadow: 0 0 0 3px rgba(255,45,59,.25); }
.track-input-wrap { position: relative; }
.track-input-wrap > i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1.1rem; }
.track-input {
width: 100%; min-height: 60px; padding: .8rem 1rem .8rem 3rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15rem; letter-spacing: .12em;
background: rgba(13,13,15,.6); color: var(--text);
border: 1px solid rgba(255,255,255,.12); border-radius: 10px; outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.track-input:focus { border-color: rgba(255,255,255,.3); box-shadow: 0 0 0 3px rgba(255,255,255,.05); }
.track-input-wrap.is-detected .track-input { border-color: rgba(34,197,94,.45); }
.track-input-wrap.is-detected > i { color: #22c55e; }
.cart-head {
display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
padding: 1.5rem 1.6rem 1.25rem; border-bottom: 1px solid var(--border);
}
.cart-head h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }
.cart-head p { font-size: .78rem; color: var(--text-muted); margin-top: .2rem; }
.cart-progress { min-width: 150px; text-align: right; }
.cart-progress span { font-size: .75rem; font-weight: 600; color: var(--text-secondary); }
.cart-progress-bar { height: 5px; margin-top: .4rem; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; }
.cart-progress-bar i { display: block; height: 100%; background: #22c55e; border-radius: 5px; transition: width .4s ease; }
.cart-list { list-style: none; margin: 0; padding: .4rem 1rem; }
.cart-item {
display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem;
padding: .9rem .6rem; border-bottom: 1px solid rgba(255,255,255,.05);
}
.cart-item:last-child { border-bottom: 0; }
.cart-logo { width: 44px; height: 44px; border-radius: 10px; }
.cart-title { font-weight: 600; font-size: .9rem; color: var(--text); }
.cart-title span { font-weight: 500; color: var(--text-muted); }
.cart-status { font-size: .74rem; margin-top: .25rem; display: flex; align-items: center; gap: .4rem; }
.cart-status strong { font-family: ui-monospace, monospace; font-weight: 600; letter-spacing: .03em; }
.cart-status.is-ok { color: #22c55e; }
.cart-status.is-warn { color: #f5a623; }
.cart-status.is-bad { color: var(--red); }
.cart-item.is-off .cart-title, .cart-item.is-off .cart-price { opacity: .45; text-decoration: line-through; }
.cart-price { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.cart-actions { display: flex; align-items: center; gap: .4rem; }
.cart-remove { margin: 0; }
.cart-btn {
display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .8rem;
border-radius: 8px; border: 1px solid var(--border); background: transparent;
color: var(--text-secondary); font-family: var(--font); font-size: .74rem; font-weight: 600;
cursor: pointer; white-space: nowrap; transition: .2s ease;
}
.cart-btn:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.cart-btn--primary { background: var(--red); border-color: var(--red); color: #fff; }
.cart-btn--primary:hover { color: #fff; opacity: .88; border-color: var(--red); }
.cart-btn--icon { width: 34px; padding: 0; justify-content: center; }
.cart-btn--icon:hover { color: var(--red); border-color: rgba(255,45,59,.4); }
.cart-add {
display: flex; align-items: center; justify-content: center; gap: .5rem;
margin: 0 1.6rem 1.4rem; padding: .8rem; border-radius: 10px;
border: 1px dashed rgba(255,255,255,.14); font-size: .8rem; color: var(--text-secondary);
}
.cart-add:hover { color: var(--text); border-color: rgba(255,45,59,.5); }
.cart-empty {
max-width: 520px; margin: 1rem auto 0; text-align: center; padding: 3rem 2rem;
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
}
.cart-empty-icon {
width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
background: rgba(255,45,59,.1); color: var(--red);
}
.cart-empty h1 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: .6rem; }
.cart-empty p { font-size: .85rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 1.5rem; }
@media (max-width: 560px) {
.cart-item { grid-template-columns: auto 1fr auto; gap: .75rem; }
.cart-actions { grid-column: 2 / -1; }
.cart-btn span { display: none; }
.cart-logo { width: 38px; height: 38px; }
}
.pay-crypto-card.is-loading .pay-crypto-go { animation: bx-pulse .8s ease-in-out infinite; }
.pay-body { text-align: center; }
.pay-body .ctc-label { text-align: left; }
.pay-amount { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-bottom: 1.5rem; }
.pay-amount-lbl { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.pay-amount-val {
background: none; border: 0; cursor: pointer; color: var(--text);
font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -.03em;
display: inline-flex; align-items: baseline; gap: .4rem; padding: .2rem .6rem; border-radius: 8px;
transition: background .2s ease;
}
.pay-amount-val em { font-style: normal; color: var(--red); font-size: .6em; }
.pay-amount-val i { font-size: .45em; color: var(--text-muted); align-self: center; }
.pay-amount-val:hover { background: rgba(255,255,255,.04); }
.pay-amount-val.is-copied i { color: #22c55e; }
.pay-amount-eur { font-size: .8rem; color: var(--text-muted); }
.pay-status-line {
display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-radius: 10px;
background: rgba(245,166,35,.07); border: 1px solid rgba(245,166,35,.25);
font-size: .84rem; font-weight: 600; color: var(--text);
}
.cart-toast {
position: fixed; left: 50%; bottom: 1.5rem; z-index: 1100;
transform: translate(-50%, 150%); opacity: 0;
display: flex; align-items: center; gap: .8rem; max-width: calc(100vw - 2rem);
padding: .8rem .9rem .8rem 1.1rem; border-radius: 12px;
background: #1b1b21; border: 1px solid rgba(34,197,94,.35);
box-shadow: 0 20px 50px rgba(0,0,0,.5); font-size: .82rem; color: var(--text);
transition: transform .35s ease, opacity .35s ease;
}
.cart-toast.show { transform: translate(-50%, 0); opacity: 1; }
.cart-toast > i { color: #22c55e; }
.cart-toast a {
white-space: nowrap; font-weight: 600; color: #fff; background: var(--red);
padding: .45rem .8rem; border-radius: 8px; font-size: .76rem;
}
.cart-toast a i { font-size: .65rem; margin-left: .2rem; }
.service-cart.is-added { color: #22c55e; border-color: rgba(34,197,94,.5); }
.panier-badge.bump { animation: bx-bump .4s ease; }
@keyframes bx-bump { 40% { transform: scale(1.45); } }
@media (max-width: 480px) {
.cart-toast { flex-wrap: wrap; justify-content: center; text-align: center; }
}
.panier-badge[hidden] { display: none !important; }
.track-input::placeholder { font-family: var(--font); letter-spacing: 0; font-size: .9rem; }
@media (max-width: 480px) {
.recap-steps { gap: .4rem; flex-wrap: nowrap; }
.recap-steps li + li::before { width: 14px; }
.recap-steps li:not(.is-current) { font-size: 0; gap: 0; }
.recap-steps li:not(.is-current) span { font-size: .68rem; }
.recap-steps li.is-done:not(.is-current) span { font-size: .58rem; }
}
.bx-photo--hero .hero { min-height: 100vh; min-height: 100svh; padding-top: 7rem; padding-bottom: 7rem; }
.bx-photo--hero .hero-inner { max-width: 680px; }
.bx-photo--hero .hero-badge {
border-radius: 999px; padding: .4rem .85rem; margin-bottom: 1.75rem;
background: rgba(255,45,59,.1); border-color: rgba(255,45,59,.45);
font-size: .68rem; color: #ff6b75; backdrop-filter: blur(6px);
}
.hero-live {
width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: hero-live 2s ease-out infinite;
}
@keyframes hero-live { 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.bx-photo--hero .hero h1 {
font-size: clamp(3.4rem, 8.5vw, 7rem); letter-spacing: -.055em; line-height: .95;
min-height: 1em; margin-bottom: .9rem;
text-shadow: 0 4px 40px rgba(0,0,0,.5);
}
.bx-photo--hero .hero-subtitle {
display: flex; align-items: center; gap: .9rem;
color: #e8e8ee; font-size: clamp(.95rem, 2vw, 1.25rem); letter-spacing: .42em;
margin-bottom: 1.6rem;
}
.bx-photo--hero .hero-subtitle::before { content: ''; width: 36px; height: 2px; background: var(--red); flex-shrink: 0; }
.bx-photo--hero .hero p { font-size: 1.02rem; color: #c9c9d6; max-width: 480px; margin-bottom: 2.2rem; }
.hero-cta { padding: .95rem 1.7rem; font-size: .9rem; box-shadow: 0 10px 30px rgba(255,45,59,.35); }
.hero-cta i { transition: transform .2s ease; }
.hero-cta:hover i { transform: translateX(3px); }
.hero-cta-2 {
padding: .95rem 1.5rem; font-size: .9rem;
background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.18) !important;
backdrop-filter: blur(6px);
}
.hero-cta-2:hover { background: rgba(255,255,255,.12) !important; }
.hero-tg {
display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.4rem;
font-size: .84rem; font-weight: 500; color: #b4b4c4;
}
.hero-tg .fa-telegram-plane { color: #2aabee; font-size: 1rem; }
.hero-tg-arrow { font-size: .7rem; opacity: 0; transform: translateX(-4px); transition: .2s ease; }
.hero-tg:hover { color: #fff; }
.hero-tg:hover .hero-tg-arrow { opacity: 1; transform: none; }
.hero-trust {
list-style: none; margin: 2.6rem 0 0; padding: 1.4rem 0 0;
display: flex; flex-wrap: wrap; gap: .6rem 1.8rem;
border-top: 1px solid rgba(255,255,255,.1); max-width: 560px;
}
.hero-trust li { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 500; color: #d4d4de; }
.hero-trust i { color: var(--red); font-size: .8rem; }
.hero-scroll {
position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 2;
width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.3); border-radius: 14px;
}
.hero-scroll span {
position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
background: #fff; border-radius: 2px; animation: hero-scroll 1.8s ease-in-out infinite;
}
@keyframes hero-scroll { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@media (max-width: 768px) {
.bx-photo--hero .hero { padding-top: 6.5rem; padding-bottom: 5rem; }
.bx-photo--hero .hero h1 { font-size: 3.2rem; }
.bx-photo--hero .hero-subtitle { letter-spacing: .3em; }
.hero-cta, .hero-cta-2 { justify-content: center; }
.hero-trust { gap: .7rem 1.2rem; margin-top: 2rem; }
.hero-scroll { display: none; }
}
.carrier-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.carrier-card {
display: flex; flex-direction: column; padding: 1.4rem;
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.carrier-card:hover {
transform: translateY(-4px); border-color: rgba(255,45,59,.4);
background: linear-gradient(180deg, rgba(255,45,59,.06), var(--surface) 60%);
box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.carrier-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.1rem; }
.carrier-logo {
width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.carrier-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carrier-logo--plus {
display: flex; align-items: center; justify-content: center;
border: 1.5px dashed rgba(255,255,255,.2); box-shadow: none; color: var(--text-muted);
}
.carrier-from {
font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text);
padding: .3rem .65rem; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--border);
}
.carrier-from span { font-family: var(--font); font-weight: 500; font-size: .68rem; color: var(--text-muted); margin-right: .1rem; }
.carrier-card h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: .35rem; }
.carrier-card p { font-size: .8rem; color: var(--text-secondary); line-height: 1.55; flex: 1; }
.carrier-foot {
display: flex; justify-content: space-between; align-items: center;
margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.06);
font-size: .74rem; font-weight: 600; color: var(--text-muted);
}
.carrier-foot i { font-size: .7rem; transition: transform .2s ease, color .2s ease; }
.carrier-card:hover .carrier-foot { color: var(--text); }
.carrier-card:hover .carrier-foot i { transform: translateX(4px); color: var(--red); }
.carrier-card--more { background: transparent; border-style: dashed; }
.carrier-card--more:hover { background: rgba(255,255,255,.02); }
.carrier-cta { text-align: center; margin-top: 2rem; }
.transport-card { scroll-margin-top: 80px; }
@media (max-width: 1024px) { .carrier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
.carrier-grid { gap: .75rem; }
.carrier-card { padding: 1.1rem; }
.carrier-card p { display: none; }
.carrier-logo { width: 44px; height: 44px; }
.carrier-from { font-size: .95rem; padding: .25rem .5rem; }
}
.adm { max-width: 1280px; margin: 0 auto; padding: 6rem 1.5rem 4rem; }
.adm-back-wrap { max-width: 1200px; margin: 0 auto; padding: 5.5rem 2rem 0; }
.adm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.adm-top h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; margin-top: .3rem; word-break: break-all; }
.adm-sub { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; }
.adm-top-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.adm-top-actions form { margin: 0; }
.adm-btn {
display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .9rem;
border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
color: var(--text-secondary); font-family: var(--font); font-size: .78rem; font-weight: 600; cursor: pointer;
transition: .2s ease;
}
.adm-btn:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.adm-btn--danger:hover { color: #fff; background: var(--red); border-color: var(--red); }
.adm-tabs {
display: flex; gap: .25rem; margin-bottom: 1.5rem; padding: .3rem;
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
overflow-x: auto; scrollbar-width: none;
}
.adm-tabs a {
display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 9px;
font-size: .82rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: .2s ease;
}
.adm-tabs a span { font-size: .68rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text-secondary); }
.adm-tabs a:hover { color: var(--text); }
.adm-tabs a.is-active { background: rgba(255,45,59,.12); color: var(--text); }
.adm-tabs a.is-active i { color: var(--red); }
.adm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.adm-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-kpi {
display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.3rem;
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.adm-kpi-lbl { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.adm-kpi strong { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adm-kpi strong em { font-style: normal; font-size: .55em; color: var(--text-muted); font-weight: 600; }
.adm-kpi-sub { font-size: .74rem; color: var(--text-secondary); }
.adm-kpi-sub b { color: var(--text); }
.adm-kpi--hl { border-color: rgba(255,45,59,.35); background: linear-gradient(135deg, rgba(255,45,59,.12), var(--surface) 70%); }
.adm-kpi--warn strong { color: #f5a623; }
.adm-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.adm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem 1.3rem; min-width: 0; }
.adm-card--wide { grid-column: 1 / -1; }
.adm-card--flush { padding: 0; overflow: hidden; }
.adm-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.adm-card-head--pad { padding: 1.2rem 1.3rem 0; }
.adm-card-head h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; word-break: break-all; }
.adm-demande .adm-card-head { align-items: center; }
.adm-demande .adm-card-head h2 { flex: 1; min-width: 0; }
.adm-dm-x { margin: 0; flex-shrink: 0; }
.adm-dm-x button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-muted, #8a8a93); cursor: pointer; font-size: .8rem; }
.adm-dm-x button:hover { color: #ff5a64; border-color: rgba(255,45,59,.45); background: rgba(255,45,59,.08); }
.adm-h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 2rem 0 1rem; }
.adm-muted { color: var(--text-muted); font-size: .78rem; }
.adm-link { font-size: .78rem; color: var(--text-secondary); }
.adm-link:hover { color: var(--red); }
.adm-empty { font-size: .82rem; color: var(--text-muted); padding: 1rem 1.3rem; text-align: center; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.adm-legend { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--text-muted); }
.adm-legend span { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: .6rem; }
.lg-ca { background: var(--red); }
.lg-n { background: rgba(255,255,255,.25); }
.adm-chart { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding-top: .5rem; border-bottom: 1px solid var(--border); }
.adm-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 1px; cursor: default; border-radius: 3px 3px 0 0; }
.adm-bar:hover { background: rgba(255,255,255,.03); }
.adm-bar i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; transition: opacity .2s; }
.adm-bar .b-ca { background: var(--red); }
.adm-bar .b-n { background: rgba(255,255,255,.22); }
.adm-chart-axis { display: flex; justify-content: space-between; font-size: .68rem; color: var(--text-muted); margin-top: .4rem; }
.adm-list { list-style: none; margin: 0; padding: 0; }
.adm-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .84rem; }
.adm-list li:last-child { border-bottom: 0; }
.adm-list li .adm-muted { min-width: 60px; text-align: right; }
.adm-pill { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 600; background: rgba(255,255,255,.06); color: var(--text-secondary); white-space: nowrap; justify-self: start; }
.st-payee, .st-livree { background: rgba(34,197,94,.12); color: #22c55e; }
.st-en_cours { background: rgba(96,165,250,.12); color: #60a5fa; }
.st-en_attente { background: rgba(245,166,35,.12); color: #f5a623; }
.st-annulee { background: rgba(255,45,59,.12); color: #ff6b75; }
.adm-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.adm-bars-row { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: .3rem; color: var(--text-secondary); }
.adm-bars-row b { color: var(--text); }
.adm-bars-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.adm-bars-track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--red), #ff6b75); }
.adm-toolbar { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.adm-search { position: relative; flex: 1 1 280px; max-width: 420px; }
.adm-search i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .8rem; }
.adm-search input {
width: 100%; height: 40px; padding: 0 1rem 0 2.4rem; border-radius: 10px;
background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: .84rem; outline: none;
}
.adm-search input:focus { border-color: rgba(255,255,255,.28); }
.adm-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.adm-chips button {
height: 32px; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--border); background: transparent;
color: var(--text-muted); font-family: var(--font); font-size: .74rem; font-weight: 600; cursor: pointer;
}
.adm-chips button:hover { color: var(--text); }
.adm-chips button.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.adm-table th {
text-align: left; padding: .8rem 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; background: rgba(255,255,255,.02);
position: sticky; top: 0;
}
.adm-table th[data-sort] { cursor: pointer; user-select: none; }
.adm-table th[data-sort]:hover { color: var(--text); }
.adm-table th[data-dir="asc"]::after { content: " ▲"; color: var(--red); }
.adm-table th[data-dir="desc"]::after { content: " ▼"; color: var(--red); }
.adm-table td { padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tr.is-link { cursor: pointer; }
.adm-table tbody tr:hover { background: rgba(255,255,255,.025); }
.adm-table a { color: var(--text); font-weight: 600; }
.adm-table a:hover { color: var(--red); }
.adm-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-table--compact td { padding: .5rem 0; }
.adm-table--compact td + td { padding-left: .8rem; }
.adm-demandes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.adm-demande p { font-size: .84rem; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
@media (max-width: 900px) {
.adm-kpis, .adm-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.adm { padding: 5rem 1rem 3rem; }
.adm-kpis, .adm-kpis--4 { grid-template-columns: 1fr; }
.adm-kpi strong { font-size: 1.6rem; }
.adm-chart { gap: 2px; height: 140px; }
.adm-demandes { grid-template-columns: 1fr; }
}
.pay-howto { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.pay-howto li { display: flex; align-items: center; gap: .45rem; font-size: .76rem; color: var(--text-secondary); }
.pay-howto li + li::before { content: ''; width: 16px; height: 1px; background: rgba(255,255,255,.15); margin-right: .1rem; }
.pay-howto span {
width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
font-size: .65rem; font-weight: 700; background: rgba(255,45,59,.12); color: var(--red);
}
.pay-coins { display: grid; gap: .6rem; }
.pay-coin {
display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
padding: .9rem 1rem; border-radius: 12px; cursor: pointer;
background: rgba(255,255,255,.02); border: 1px solid var(--border); color: var(--text);
font-family: var(--font); transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.pay-coin:hover, .pay-coin:focus-visible {
border-color: color-mix(in srgb, var(--coin) 60%, transparent);
background: color-mix(in srgb, var(--coin) 8%, transparent); outline: none;
}
.pay-coin:active { transform: scale(.99); }
.pay-coin:disabled { opacity: .5; cursor: wait; }
.pay-coin.is-loading { opacity: 1; border-color: var(--coin); }
.pay-coin-icon {
width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--coin); color: #fff; font-size: 1.2rem; font-weight: 800; font-family: var(--font-display);
box-shadow: 0 6px 18px color-mix(in srgb, var(--coin) 35%, transparent);
}
.pay-coin-icon--lg { width: 56px; height: 56px; font-size: 1.5rem; }
.pay-coin-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pay-coin-txt strong { font-size: .92rem; font-weight: 700; }
.pay-coin-txt strong em { font-style: normal; font-weight: 600; color: var(--text-muted); font-size: .78rem; margin-left: .2rem; }
.pay-coin-txt span { font-size: .74rem; color: var(--text-muted); }
.pay-coin-badge {
margin-left: auto; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
font-size: .66rem; font-weight: 700; color: #22c55e; background: rgba(34,197,94,.12);
}
.pay-coin-go { margin-left: auto; color: var(--text-muted); font-size: .8rem; transition: transform .2s ease, color .2s ease; }
.pay-coin-badge + .pay-coin-go { margin-left: .6rem; }
.pay-coin:hover .pay-coin-go { transform: translateX(3px); color: var(--text); }
.pay-coin.is-loading .pay-coin-go { animation: bx-pulse .8s ease-in-out infinite; }
.pay-loading {
display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1rem;
font-size: .82rem; color: var(--text-secondary);
}
.pay-track { list-style: none; margin: 0; padding: 1rem 1.6rem; display: flex; border-bottom: 1px solid var(--border); }
.pay-track li {
flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem;
font-size: .7rem; font-weight: 600; color: var(--text-muted); text-align: center;
}
.pay-track li span {
width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: var(--surface);
position: relative; z-index: 1; transition: .3s ease;
}
.pay-track li + li::before {
content: ''; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: rgba(255,255,255,.1);
}
.pay-track li.is-current { color: var(--text); }
.pay-track li.is-current span { border-color: #f5a623; box-shadow: 0 0 0 4px rgba(245,166,35,.18); }
.pay-track li.is-done { color: #22c55e; }
.pay-track li.is-done span { border-color: #22c55e; background: #22c55e; }
.pay-track li.is-done + li::before, .pay-track li.is-done + li.is-done::before { background: #22c55e; }
.pay-qr-layout { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; text-align: left; }
.pay-qr-layout .pay-qr-wrap { margin: 0; }
.pay-addr .ctc-label { margin-bottom: .45rem; }
.pay-addr-box {
display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
background: rgba(13,13,15,.6); overflow: hidden;
}
.pay-addr-box input {
flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); outline: none;
padding: .8rem .9rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; letter-spacing: .02em;
}
.pay-addr-copy {
border: 0; border-left: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--text);
padding: 0 1rem; font-family: var(--font); font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pay-addr-copy:hover { background: rgba(255,255,255,.08); }
.pay-addr-copy.is-copied { color: #22c55e; }
.pay-warn {
display: flex; gap: .6rem; align-items: flex-start; margin-top: .9rem; padding: .75rem .85rem; border-radius: 10px;
background: rgba(245,166,35,.07); border: 1px solid rgba(245,166,35,.28); font-size: .76rem; line-height: 1.5; color: var(--text-secondary);
}
.pay-warn i { color: #f5a623; margin-top: .15rem; }
.pay-warn strong { color: var(--text); }
.pay-status-line[data-state="confirming"], .pay-status-line[data-state="partial"] { background: rgba(96,165,250,.08); border-color: rgba(96,165,250,.3); }
.pay-status-line[data-state="expired"] { background: rgba(255,45,59,.08); border-color: rgba(255,45,59,.35); }
.pay-status-line[data-state="done"] { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.35); }
.pay-status-line[data-state="done"] .pay-pulse { display: none; }
.pay-change {
background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font);
}
#changeForm { margin: 0; text-align: center; }
.pay-done { padding: 2.5rem 1.6rem; text-align: center; }
.pay-done-icon {
width: 72px; height: 72px; margin: 0 auto 1.2rem; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #fff; background: #22c55e;
box-shadow: 0 0 0 10px rgba(34,197,94,.12); animation: pay-pop .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pay-pop { from { transform: scale(.3); opacity: 0; } }
.pay-done h2 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: .5rem; }
.pay-done p { font-size: .88rem; color: var(--text-secondary); margin-bottom: 1.4rem; }
@media (max-width: 640px) {
.pay-qr-layout { grid-template-columns: 1fr; justify-items: center; }
.pay-addr { width: 100%; }
.pay-track { padding: 1rem .8rem; }
.pay-coin-badge { display: none; }
}
.pay-loading[hidden], .pay-done[hidden], [id="payBody"][hidden] { display: none !important; }
.pay-body { container-type: inline-size; }
@container (max-width: 600px) {
.pay-qr-layout { grid-template-columns: 1fr; justify-items: center; }
.pay-addr { width: 100%; }
}
.pay-qr-layout .pay-qr-frame img { width: 200px; height: 200px; display: block; }
.qrx { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.qrx-glow {
position: absolute; top: 8%; left: 8%; right: 8%; height: 76%; border-radius: 30px;
background: var(--coin); filter: blur(38px); opacity: .28; pointer-events: none;
}
.qrx-card {
position: relative; padding: 10px; border-radius: 22px; overflow: hidden;
background: linear-gradient(145deg, color-mix(in srgb, var(--coin) 80%, #fff), color-mix(in srgb, var(--coin) 55%, #000));
box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.qrx-code { position: relative; width: 216px; height: 216px; border-radius: 14px; overflow: hidden; background: #fff; }
.qrx-code svg { display: block; width: 100%; height: 100%; }
.qrx-logo {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--coin); color: #fff; font-size: 1.35rem; font-weight: 800; font-family: var(--font-display);
box-shadow: 0 0 0 5px #fff;
}
.qrx-scan {
position: absolute; left: 10px; right: 10px; top: 10px; height: 40px; pointer-events: none;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--coin) 35%, transparent) 70%, var(--coin));
border-bottom: 2px solid var(--coin); opacity: .55; mix-blend-mode: multiply;
animation: qrx-scan 3.2s ease-in-out infinite;
}
@keyframes qrx-scan { 0% { transform: translateY(-40px); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .55; } 100% { transform: translateY(216px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qrx-scan { display: none; } }
.qrx figcaption { font-size: .74rem; color: var(--text-muted); display: flex; align-items: center; gap: .4rem; }
.qrx figcaption i { color: var(--coin); }
@media (max-width: 380px) { .qrx-code { width: 190px; height: 190px; } }
.acc { max-width: 1080px; margin: 0 auto; padding: 6.5rem 1.5rem 4rem; }
.acc-head { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.acc-id { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.acc-avatar {
width: 64px; height: 64px; flex-shrink: 0; border-radius: 18px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: #fff;
background: linear-gradient(135deg, var(--red), #7a0d16); box-shadow: 0 10px 30px rgba(255,45,59,.3);
}
.acc-id h1 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.03em; margin-top: .2rem; word-break: break-all; }
.acc-sub { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; }
.acc-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.acc-actions .adm-btn { height: 42px; }
.acc-alert {
display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; padding: .9rem 1rem;
border-radius: 12px; border: 1px solid rgba(245,166,35,.35); background: rgba(245,166,35,.07);
font-size: .84rem; color: var(--text-secondary); transition: border-color .2s ease;
}
.acc-alert:hover { border-color: rgba(245,166,35,.7); }
.acc-alert strong { color: var(--text); }
.acc-alert-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(245,166,35,.15); color: #f5a623; }
.acc-alert-cta { margin-left: auto; font-weight: 700; color: #f5a623; white-space: nowrap; }
.acc-kpi-date { font-size: 1.4rem !important; }
.acc-list-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2.2rem 0 1rem; }
.acc-list-head h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
.acc-orders { display: grid; gap: 1rem; }
.acc-order { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem 1.3rem; transition: border-color .2s ease; }
.acc-order:hover { border-color: rgba(255,255,255,.14); }
.acc-order.is-pending { border-color: rgba(245,166,35,.3); }
.acc-order-top { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1rem; align-items: center; }
.acc-order-logo { width: 46px; height: 46px; border-radius: 11px; }
.acc-order-title { min-width: 0; }
.acc-order-title h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.acc-order-title h3 span { font-weight: 500; color: var(--text-muted); font-size: .85rem; }
.acc-order-meta { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .25rem; font-size: .74rem; color: var(--text-muted); }
.acc-ref {
background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 6px; padding: .15rem .45rem;
color: var(--text-secondary); font-family: ui-monospace, monospace; font-size: .72rem; cursor: pointer;
}
.acc-ref i { font-size: .6rem; margin-left: .2rem; opacity: .6; }
.acc-ref.is-copied { color: #22c55e; border-color: rgba(34,197,94,.4); }
.acc-order-price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.acc-steps { list-style: none; display: flex; margin: 1.1rem 0 .4rem; padding: 0; }
.acc-steps li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .66rem; font-weight: 600; color: var(--text-muted); }
.acc-steps li span { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: var(--surface); position: relative; z-index: 1; }
.acc-steps li + li::before { content: ''; position: absolute; top: 4px; right: 50%; width: 100%; height: 2px; background: rgba(255,255,255,.08); }
.acc-steps li.is-done { color: #22c55e; }
.acc-steps li.is-done span { background: #22c55e; border-color: #22c55e; }
.acc-steps li.is-done + li.is-done::before { background: #22c55e; }
.acc-steps li.is-wait { color: #f5a623; }
.acc-steps li.is-wait span { border-color: #f5a623; box-shadow: 0 0 0 3px rgba(245,166,35,.18); }
.acc-scans { list-style: none; margin: .8rem 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.06); }
.acc-scans li { display: flex; align-items: center; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: .8rem; flex-wrap: wrap; }
.acc-scan-name { color: var(--text-secondary); min-width: 150px; }
.acc-scan-name em { font-style: normal; color: var(--text-muted); font-size: .74rem; margin-left: .2rem; }
.acc-scan-track { color: var(--text); font-weight: 600; }
.acc-track-btn {
margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px;
font-size: .72rem; font-weight: 600; color: #60a5fa; background: rgba(96,165,250,.1);
}
.acc-track-btn:hover { background: rgba(96,165,250,.2); }
.acc-order-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; }
.acc-paid-with { font-size: .76rem; color: #22c55e; display: flex; align-items: center; gap: .4rem; }
.acc-order-actions { display: flex; gap: .5rem; align-items: center; }
.acc-pay { height: 36px; padding: 0 1rem; font-size: .8rem; }
.acc-help {
display: flex; align-items: center; gap: .7rem; margin-top: 2rem; padding: .9rem 1.1rem; border-radius: 12px;
border: 1px dashed rgba(255,255,255,.12); font-size: .82rem; color: var(--text-secondary);
}
.acc-help i { color: var(--red); }
.acc-help a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.acc-order[hidden] { display: none; }
@media (max-width: 640px) {
.acc { padding: 5.5rem 1rem 3rem; }
.acc-order-top { grid-template-columns: auto 1fr auto; }
.acc-order-top .adm-pill { grid-column: 2 / -1; justify-self: start; }
.acc-actions { width: 100%; }
.acc-actions .btn { flex: 1; justify-content: center; }
.acc-alert { flex-wrap: wrap; }
.acc-alert-cta { margin-left: 0; }
.acc-scan-name { min-width: 0; width: 100%; }
.acc-track-btn { margin-left: 0; }
}
@media (max-width: 520px) { .acc .adm-kpis--4 { grid-template-columns: 1fr 1fr; gap: .6rem; } .acc .adm-kpi { padding: .9rem 1rem; } .acc .adm-kpi strong { font-size: 1.35rem; } .acc .acc-kpi-date { font-size: 1rem !important; } }
.cmp-section { padding-top: 0; padding-bottom: 2.5rem; }
.cmp { max-width: 980px; }
.cmp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.cmp-head h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 700; letter-spacing: -.03em; margin-top: .35rem; }
.cmp-head p { font-size: .82rem; color: var(--text-secondary); max-width: 340px; }
.cmp-tabs-wrap { position: relative; margin-bottom: 1rem; }
.cmp-tabs-wrap::after {
content: ''; position: absolute; top: 0; right: 0; bottom: 6px; width: 48px; pointer-events: none;
background: linear-gradient(to left, var(--bg), transparent);
}
.cmp-tabs {
display: flex; gap: .5rem; overflow-x: auto; padding: 2px 48px 6px 2px;
scroll-snap-type: x proximity; scrollbar-width: none;
}
.cmp-tabs::-webkit-scrollbar { display: none; }
.cmp-tab {
flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
padding: .65rem 1rem; border-radius: 12px; cursor: pointer; text-align: left;
background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); font-family: var(--font);
transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.cmp-tab:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.cmp-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cmp-tab-name { font-size: .86rem; font-weight: 700; white-space: nowrap; }
.cmp-tab-name i { font-size: .7rem; }
.cmp-tab-meta { font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
.cmp-tab-meta b { color: var(--text-secondary); }
.cmp-tab.is-active { background: rgba(255,45,59,.1); border-color: var(--red); color: var(--text); }
.cmp-tab.is-active .cmp-tab-meta b { color: var(--red); }
.cmp-tab--insider .cmp-tab-name i { color: var(--red); }
.cmp-note { font-size: .78rem; color: var(--text-muted); margin-bottom: .7rem; display: flex; gap: .45rem; align-items: center; }
.cmp-note i { color: var(--red); }
.cmp-list { list-style: none; margin: 0; padding: .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.cmp-row {
display: grid; grid-template-columns: 26px 40px 1fr auto auto; gap: .9rem; align-items: center;
padding: .7rem .8rem; border-radius: 10px; transition: background .2s ease;
}
.cmp-row + .cmp-row { border-top: 1px solid rgba(255,255,255,.04); }
.cmp-row:hover { background: rgba(255,255,255,.025); }
.cmp-row.is-best { background: linear-gradient(90deg, rgba(34,197,94,.09), transparent 70%); }
.cmp-rank { font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: var(--text-muted); text-align: center; }
.cmp-row.is-best .cmp-rank { color: #22c55e; }
.cmp-logo { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; }
.cmp-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-name { display: flex; flex-direction: column; min-width: 0; }
.cmp-name strong { font-size: .9rem; }
.cmp-name > span { font-size: .76rem; color: var(--text-muted); }
.cmp-badge {
font-style: normal; display: inline-flex; align-items: center; gap: .3rem; margin-left: .35rem;
padding: .1rem .5rem; border-radius: 999px; font-size: .66rem; font-weight: 700; color: #22c55e; background: rgba(34,197,94,.12);
}
.cmp-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.cmp-price b { font-family: var(--font-display); font-size: 1.15rem; }
.cmp-price small { font-size: .68rem; color: var(--text-muted); margin-top: .15rem; }
.cmp-row.is-best .cmp-price b { color: #22c55e; }
.cmp-actions { display: flex; gap: .35rem; align-items: center; }
.cmp-actions .panier-add { margin: 0; }
@media (max-width: 560px) {
.cmp-row { grid-template-columns: 34px 1fr auto; gap: .7rem; padding: .75rem .6rem; }
.cmp-rank { display: none; }
.cmp-logo { width: 34px; height: 34px; }
.cmp-actions { grid-column: 2 / -1; justify-content: flex-end; }
.cmp-actions .service-order { flex: 1; justify-content: center; }
}
.cmp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.cmp-tile {
display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-align: left;
padding: .9rem 1rem; border-radius: 14px; cursor: pointer; font-family: var(--font);
background: var(--surface); border: 1px solid var(--border); color: var(--text);
transition: border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.cmp-tile:hover { border-color: rgba(255,255,255,.22); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.cmp-tile:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cmp-tile-name { font-size: .95rem; font-weight: 700; }
.cmp-tile-name i { font-size: .72rem; color: var(--red); }
.cmp-tile-price { font-size: .76rem; color: var(--text-muted); }
.cmp-tile-price b { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.cmp-tile-logos { display: flex; align-items: center; margin-top: .15rem; }
.cmp-tile-logos img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; border: 2px solid var(--surface); }
.cmp-tile-logos img + img { margin-left: -6px; }
.cmp-tile-logos em { font-style: normal; font-size: .66rem; color: var(--text-muted); margin-left: .3rem; }
.cmp-tile-count { font-size: .7rem; color: var(--text-muted); display: flex; align-items: center; gap: .35rem; margin-top: .1rem; }
.cmp-tile-count i { font-size: .6rem; transition: transform .25s ease; }
.cmp-tile.is-active { border-color: var(--red); background: linear-gradient(180deg, rgba(255,45,59,.12), var(--surface)); }
.cmp-tile.is-active .cmp-tile-price b { color: var(--red); }
.cmp-tile.is-active .cmp-tile-count { color: var(--text); }
.cmp-tile.is-active .cmp-tile-count i { transform: rotate(180deg); }
.cmp-hint { font-size: .8rem; color: var(--text-muted); display: flex; align-items: center; gap: .5rem; }
.cmp-hint i { color: var(--red); }
.cmp-hint[hidden], .cmp-panel[hidden] { display: none; }
.cmp-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.cmp-panel-head h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.cmp-panel-head h3 span { font-family: var(--font); font-weight: 500; font-size: .8rem; color: var(--text-muted); }
.cmp-close {
width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: transparent;
color: var(--text-muted); cursor: pointer;
}
.cmp-close:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.cmp-panel { scroll-margin-top: 80px; }
.cmp-panel.is-in { animation: cmp-in .3s ease; }
@keyframes cmp-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 560px) {
.cmp-tiles { grid-template-columns: 1fr 1fr; gap: .5rem; }
.cmp-tile { padding: .8rem .85rem; }
}
.cmp-panel { scroll-margin-top: 96px; }
.cmp-head { margin-bottom: .9rem; }
.cmp-tiles { display: flex; flex-wrap: wrap; gap: .45rem; grid-template-columns: none; margin-bottom: 1rem; }
.cmp-tile {
flex-direction: row; align-items: baseline; gap: .45rem; padding: .5rem .9rem; border-radius: 999px;
}
.cmp-tile:hover { transform: none; box-shadow: none; }
.cmp-tile-name { font-size: .84rem; }
.cmp-tile-price { font-size: .72rem; }
.cmp-tile-price b { font-size: .84rem; font-family: var(--font); }
@media (max-width: 560px) { .cmp-tiles { display: flex; } .cmp-tile { padding: .45rem .75rem; } }
.insider-reco {
margin-left: auto; display: inline-flex; align-items: center; gap: .3rem;
padding: .18rem .55rem; border-radius: 999px;
font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: #f5c542; background: rgba(245,197,66,.12); border: 1px solid rgba(245,197,66,.35);
}
.insider-reco i { font-size: .55rem; color: #f5c542; }
.cmp-tiles {
display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none;
padding: 4px; margin-bottom: 1rem; width: fit-content; max-width: 100%;
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.cmp-tiles::-webkit-scrollbar { display: none; }
.cmp-tile {
flex: 0 0 auto; flex-direction: column; align-items: center; gap: .1rem;
padding: .55rem 1rem; border: 0; border-radius: 10px; background: transparent;
color: var(--text-secondary); white-space: nowrap;
transition: background .2s ease, color .2s ease;
}
.cmp-tile:hover { background: rgba(255,255,255,.05); color: var(--text); transform: none; box-shadow: none; border: 0; }
.cmp-tile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.cmp-tile-name { font-size: .82rem; font-weight: 600; }
.cmp-tile-name i { font-size: .65rem; margin-right: .15rem; }
.cmp-tile-price { font-size: .68rem; color: var(--text-muted); font-weight: 500; }
.cmp-tile.is-active { background: var(--red); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(255,45,59,.3); }
.cmp-tile.is-active .cmp-tile-price { color: rgba(255,255,255,.8); }
.cmp-tile.is-active .cmp-tile-name i { color: #fff; }
@media (max-width: 560px) { .cmp-tile { padding: .5rem .8rem; } }
.acc-kpi-solde { border-color: rgba(34,197,94,.3); background: linear-gradient(135deg, rgba(34,197,94,.1), var(--surface) 70%); }
.acc-kpi-solde strong { color: #22c55e; }
.acc-kpi-solde .adm-kpi-lbl i { color: #22c55e; margin-right: .2rem; }
.solde-pos { color: #22c55e; }
.solde-list { list-style: none; margin: 0; padding: .3rem 1.3rem .6rem; }
.solde-list li { display: grid; grid-template-columns: 32px 1fr auto auto; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.solde-list li:last-child { border-bottom: 0; }
.solde-ic { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; }
.solde-ic.is-in { background: rgba(34,197,94,.12); color: #22c55e; }
.solde-ic.is-out { background: rgba(255,45,59,.1); color: #ff6b75; }
.solde-txt { display: flex; flex-direction: column; min-width: 0; font-size: .82rem; }
.solde-txt strong { font-weight: 600; }
.solde-txt a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.solde-txt em { font-style: normal; font-size: .74rem; color: var(--text-muted); overflow-wrap: anywhere; }
.solde-date { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.solde-amt { font-family: var(--font-display); font-weight: 700; font-size: .95rem; white-space: nowrap; }
.solde-amt.is-in { color: #22c55e; }
.solde-amt.is-out { color: #ff6b75; }
.solde-admin { margin: 1.25rem 0; }
.solde-admin .adm-card-head h2 i { color: #22c55e; margin-right: .3rem; }
.solde-form .ctc-label { margin-top: .9rem; }
.solde-sens { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.solde-sens label { cursor: pointer; }
.solde-sens input { position: absolute; opacity: 0; pointer-events: none; }
.solde-sens span { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem; border-radius: 9px; font-size: .82rem; font-weight: 600; color: var(--text-muted); transition: .2s ease; }
.solde-sens input:checked + span { color: #fff; }
.solde-sens label:first-child input:checked + span { background: #16a34a; }
.solde-sens label:last-child input:checked + span { background: var(--red); }
.solde-sens input:focus-visible + span { box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
.solde-amount { position: relative; }
.solde-amount .ctc-input { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; padding-right: 2.2rem; }
.solde-amount span { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-weight: 700; }
.solde-quick { display: flex; gap: .35rem; margin-top: .5rem; flex-wrap: wrap; }
.solde-quick button { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-family: var(--font); font-size: .74rem; font-weight: 600; cursor: pointer; }
.solde-quick button:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.solde-submit { width: 100%; justify-content: center; margin-top: 1.1rem; }
.pay-solde {
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
padding: 1rem 1.1rem; border-radius: 12px; margin-bottom: 1rem;
border: 1px solid rgba(34,197,94,.35); background: linear-gradient(135deg, rgba(34,197,94,.1), transparent 70%);
}
.pay-solde.is-short { border-color: var(--border); background: rgba(255,255,255,.02); }
.pay-solde-info { display: flex; align-items: center; gap: .8rem; }
.pay-solde-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(34,197,94,.15); color: #22c55e; flex-shrink: 0; }
.pay-solde.is-short .pay-solde-icon { background: rgba(255,255,255,.06); color: var(--text-muted); }
.pay-solde-info div { display: flex; flex-direction: column; font-size: .8rem; color: var(--text-secondary); }
.pay-solde-info strong { color: var(--text); font-size: .92rem; }
.pay-solde form { margin: 0; }
.pay-solde .btn { background: #16a34a !important; }
.pay-or { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.pay-or::before, .pay-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
@media (max-width: 560px) {
.solde-list { padding: .3rem .9rem .6rem; }
.solde-list li { grid-template-columns: 30px 1fr auto; }
.solde-date { grid-column: 2; grid-row: 2; }
.solde-amt { grid-row: 1 / span 2; grid-column: 3; }
.pay-solde form, .pay-solde .btn { width: 100%; justify-content: center; }
}
@media (min-width: 901px) { .adm-kpis:not(.adm-kpis--4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .adm-kpis:not(.adm-kpis--4) .adm-kpi--hl { grid-column: span 2; } }
@media (min-width: 901px) { .adm-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.rc-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.rc-preset { cursor: pointer; }
.rc-preset input { position: absolute; opacity: 0; pointer-events: none; }
.rc-preset span {
display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 10px;
border: 1px solid var(--border); background: rgba(255,255,255,.02);
font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-secondary); transition: .2s ease;
}
.rc-preset:hover span { border-color: rgba(255,255,255,.25); color: var(--text); }
.rc-preset input:checked + span { border-color: #16a34a; background: rgba(34,197,94,.12); color: #fff; box-shadow: inset 0 0 0 1px #16a34a; }
.rc-preset input:focus-visible + span { box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
.rc-custom { margin-top: .6rem; }
.rc-custom[hidden] { display: none; }
.rc-solde { background: rgba(34,197,94,.08) !important; border-color: rgba(34,197,94,.3) !important; }
.rc-solde strong { color: #22c55e; }
.acc-kpi-link { cursor: pointer; transition: border-color .2s ease, transform .15s ease; }
.acc-kpi-link:hover { border-color: rgba(34,197,94,.6); transform: translateY(-2px); }
.acc-kpi-cta { font-size: .72rem; font-weight: 700; color: #22c55e; display: flex; align-items: center; gap: .3rem; }
.pay-solde .adm-btn { color: #22c55e; border-color: rgba(34,197,94,.35); }
@media (max-width: 560px) { .rc-presets { grid-template-columns: repeat(3, 1fr); } }
.pay-partial { padding: 2rem 1.6rem; text-align: center; }
.pay-partial[hidden] { display: none; }
.pay-partial-icon {
width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #1a1205;
background: #f5a623; box-shadow: 0 0 0 10px rgba(245,166,35,.12);
}
.pay-partial h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: .7rem; }
.pay-partial p { font-size: .88rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: .45rem; }
.pay-partial p strong { color: var(--text); }
.pay-partial-cta-txt { color: #f5a623 !important; font-weight: 600; }
.pay-partial-cta-txt[hidden], .pay-partial-actions [hidden] { display: none !important; }
.pay-partial-actions { display: flex; justify-content: center; gap: .5rem; margin-top: 1.1rem; flex-wrap: wrap; }
.pay-partial-actions form { margin: 0; }
.pp-pay { background: #16a34a !important; }
.st-partielle { background: rgba(245,166,35,.12); color: #f5a623; }
.cm-alert {
margin-bottom: 1.25rem; padding: 1.1rem; border-radius: 12px;
border: 1px solid rgba(245,166,35,.5); background: linear-gradient(135deg, rgba(245,166,35,.12), rgba(245,166,35,.03));
}
.cm-head { display: flex; gap: .85rem; align-items: flex-start; }
.cm-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f5a623; color: #1a1205; }
.cm-head strong { display: block; font-size: .95rem; color: var(--text); margin-bottom: .2rem; }
.cm-head p { font-size: .84rem; color: var(--text-secondary); line-height: 1.55; }
.cm-head b { color: var(--text); }
.cm-switch { margin: 1rem 0 0; }
.cm-switch .btn, .cm-link { width: 100%; justify-content: center; margin-top: 1rem; }
.cm-switch .btn { margin-top: 0; }
.cm-note { font-size: .8rem; color: var(--text-secondary); margin-top: .9rem; }
.cm-note a { color: var(--text); text-decoration: underline; }
.cm-confirm { display: flex; gap: .6rem; align-items: flex-start; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(245,166,35,.25); font-size: .8rem; color: var(--text-secondary); cursor: pointer; }
.cm-confirm input { margin-top: .15rem; width: 16px; height: 16px; accent-color: #f5a623; flex-shrink: 0; }
.cm-confirm b { color: var(--text); }
#trackSubmit:disabled { opacity: .45; cursor: not-allowed; }
.adm-tabs a.adm-tab-link { margin-left: auto; color: var(--text-secondary); border: 1px solid var(--border); }
.tf-add { margin-bottom: 1.2rem; }
.tf-add summary { cursor: pointer; font-weight: 700; font-size: .92rem; list-style: none; display: flex; align-items: center; gap: .5rem; }
.tf-add summary::-webkit-details-marker { display: none; }
.tf-add summary i { color: #22c55e; }
.tf-add-form { display: grid; grid-template-columns: 1.2fr 1.6fr .8fr 1fr auto; gap: .7rem; align-items: end; margin-top: 1rem; }
.tf-add-form label { display: flex; flex-direction: column; gap: .35rem; font-size: .72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.tf-add-form .ctc-input { min-height: 42px; padding: .55rem .8rem; }
.tf-add-form .btn { height: 42px; }
.tf-toggle { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--text-secondary); cursor: pointer; }
.tf-toggle input { accent-color: var(--red); }
.tf-group { margin-bottom: 1rem; }
.tf-group-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.tf-group-head h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-right: auto; }
.tf-logo { width: 34px; height: 34px; border-radius: 9px; }
.tf-rows { padding: .3rem .6rem; }
.tf-row { display: grid; grid-template-columns: 1fr 150px 110px 54px auto; gap: .6rem; align-items: center; padding: .55rem .6rem; border-radius: 10px; margin: 0; }
.tf-row + .tf-row { border-top: 1px solid rgba(255,255,255,.04); }
.tf-row[hidden] { display: none; }
.tf-row .ctc-input { min-height: 38px; padding: .45rem .7rem; font-size: .84rem; }
.tf-prix { position: relative; }
.tf-prix .ctc-input { padding-right: 1.6rem; font-weight: 700; text-align: right; }
.tf-prix em { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--text-muted); font-size: .8rem; }
.tf-meta { font-size: .74rem; white-space: nowrap; }
.tf-actions { display: flex; gap: .35rem; }
.tf-actions .adm-btn { height: 36px; font-size: .74rem; }
.tf-save:disabled { opacity: .35; cursor: default; }
.tf-row.is-dirty { background: rgba(34,197,94,.06); }
.tf-row.is-dirty .tf-save { background: #16a34a; border-color: #16a34a; color: #fff; }
.tf-off:hover { color: #fff !important; background: var(--red) !important; border-color: var(--red) !important; }
.tf-on { color: #22c55e; border-color: rgba(34,197,94,.4); }
.tf-row.is-off { opacity: .55; }
.tf-row.is-off:hover { opacity: 1; }
.tf-row.is-flash { animation: tf-flash 2s ease; }
@keyframes tf-flash { 0%, 30% { background: rgba(34,197,94,.18); } }
@media (max-width: 900px) {
.tf-add-form { grid-template-columns: 1fr 1fr; }
.tf-add-form .btn { grid-column: 1 / -1; }
.tf-row { grid-template-columns: 1fr 110px; }
.tf-cat { grid-column: 1; }
.tf-meta { grid-column: 2; text-align: right; }
.tf-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
.insider-reco {
gap: .28rem; padding: .22rem .55rem .22rem .5rem; border: 0; border-radius: 6px;
font-size: .58rem; font-weight: 800; letter-spacing: .09em; color: #fff;
background: linear-gradient(135deg, var(--red), #ff7a45);
box-shadow: 0 4px 12px rgba(255,45,59,.28);
}
.insider-reco i { font-size: .56rem; color: #fff; }
.insider-reco {
position: relative; overflow: hidden; margin-left: .55rem;
display: inline-flex; align-items: center; height: 18px; padding: 0 .5rem;
border-radius: 4px; border: 1px solid rgba(255,45,59,.45);
background: rgba(255,45,59,.1); box-shadow: none;
font-size: .54rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ff6b75;
}
.insider-reco::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
animation: reco-sheen 4s ease-in-out infinite;
}
@keyframes reco-sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .insider-reco::after { display: none; } }
.qr-guide {
display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center;
padding: 1rem; margin-bottom: 1.2rem; border-radius: 12px;
border: 1px solid rgba(150,21,74,.45); background: linear-gradient(135deg, rgba(150,21,74,.14), rgba(150,21,74,.03));
}
.qr-guide-demo { position: relative; }
.qr-guide-phone {
width: 112px; padding: 10px 9px 12px; border-radius: 16px; background: #f4f4f6;
border: 3px solid #2a2a31; box-shadow: 0 10px 24px rgba(0,0,0,.4);
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.qr-guide-code { width: 84px; height: 84px; }
.qr-guide-code svg { width: 100%; height: 100%; display: block; }
.qr-guide-brand { font-size: .5rem; color: #333; font-weight: 700; white-space: nowrap; }
.qr-guide-brand span { color: #96154a; }
.qr-guide-brand b { color: #999; }
.qr-guide-lines { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.qr-guide-lines i { display: block; height: 3px; border-radius: 2px; background: #d6d6dc; }
.qr-guide-lines i:nth-child(2) { width: 80%; }
.qr-guide-lines i:nth-child(3) { width: 60%; }
.qr-guide-tag {
position: absolute; top: -8px; right: -10px; padding: .12rem .45rem; border-radius: 4px;
font-size: .55rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
background: #96154a; color: #fff;
}
.qr-guide-steps strong { display: block; font-size: .9rem; margin-bottom: .5rem; }
.qr-guide-steps ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.qr-guide-steps li { font-size: .8rem; color: var(--text-secondary); line-height: 1.5; }
.qr-guide-steps b { color: var(--text); }
.tf-row { grid-template-columns: 1fr 140px 130px 110px 54px auto; }
@media (max-width: 900px) { .tf-row { grid-template-columns: 1fr 1fr; } .tf-depot { grid-column: 2; } }
@media (max-width: 560px) {
.qr-guide { grid-template-columns: 1fr; justify-items: center; text-align: left; }
}
.qr-guide-phone { width: 128px; } .qr-guide-code { width: 96px; height: 96px; }
.qr-sur {
display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.25rem; padding: 1rem 1.1rem;
border-radius: 12px; border: 1px solid rgba(150,21,74,.55);
background: linear-gradient(135deg, rgba(150,21,74,.18), rgba(150,21,74,.04));
}
.qr-sur-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #96154a; color: #fff; }
.qr-sur strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.qr-sur p { font-size: .82rem; color: var(--text-secondary); line-height: 1.55; }
.qr-sur b { color: var(--text); }
.qr-sur-link { display: inline-block; margin-top: .45rem; font-size: .76rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.qr-sur-link:hover { color: var(--text); }
.tf-qr { display: grid; grid-template-columns: auto 1fr 110px auto; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.tf-qr-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #96154a; color: #fff; }
.tf-qr-txt strong { display: block; font-size: .9rem; }
.tf-qr-txt span { font-size: .76rem; color: var(--text-muted); }
@media (max-width: 700px) { .tf-qr { grid-template-columns: auto 1fr; } .tf-qr .tf-prix, .tf-qr .adm-btn { grid-column: span 1; } }
.consigne {
display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.1rem; padding: .9rem 1rem;
border-radius: 12px; border: 1px solid rgba(96,165,250,.4); background: linear-gradient(135deg, rgba(96,165,250,.12), rgba(96,165,250,.03));
}
.consigne-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #3b82f6; color: #fff; font-size: .8rem; }
.consigne strong { display: block; font-size: .86rem; margin-bottom: .15rem; color: var(--text); }
.consigne p { font-size: .82rem; color: var(--text-secondary); line-height: 1.55; white-space: pre-line; }
.consigne-wrap { padding: 1.1rem 1.6rem 0; }
.consigne-wrap:empty { display: none; }
.consigne-wrap .consigne { margin-bottom: 0; }
.tf-cons { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .35rem; font-size: .72rem; color: var(--text-muted); padding-top: .2rem; }
.tf-cons[hidden] { display: none; }
.tf-cons textarea, .tf-add-cons textarea { min-height: 56px; resize: vertical; font-size: .82rem; }
.tf-cons-btn.has { color: #60a5fa; border-color: rgba(96,165,250,.45); }
.tf-add-cons { grid-column: 1 / -1; order: 10; }
.or-sep { display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0 1rem; font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; }
.or-sep::before, .or-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.suivi26 { margin: 0 0 1rem; }
.suivi26-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.suivi26 .track-input { min-height: 52px; font-size: 1rem; letter-spacing: .06em; }
.suivi26 .btn { height: 52px; }
.suivi26 .btn:disabled { opacity: .4; cursor: not-allowed; }
.suivi26-count { text-align: right; margin-top: .35rem; }
@media (max-width: 520px) { .suivi26-row { grid-template-columns: 1fr; } .suivi26 .btn { width: 100%; justify-content: center; } }
.n10 {
display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: 12px;
border: 1px solid rgba(245,166,35,.5); background: linear-gradient(135deg, rgba(245,166,35,.13), rgba(245,166,35,.03));
}
.n10-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #f5a623; color: #1a1205; }
.n10 strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.n10 p { font-size: .82rem; color: var(--text-secondary); line-height: 1.55; }
.n10 b { color: var(--text); }
.n10-count { text-align: right; }
.tuto { margin-bottom: 1.2rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); }
.tuto summary {
cursor: pointer; list-style: none; display: flex; align-items: center; gap: .55rem; padding: .85rem 1rem;
font-size: .86rem; font-weight: 700; color: var(--text);
}
.tuto summary::-webkit-details-marker { display: none; }
.tuto summary i { color: var(--red); }
.tuto summary span { margin-left: auto; font-size: .68rem; font-weight: 600; color: var(--text-muted); padding: .15rem .5rem; border-radius: 999px; background: rgba(255,255,255,.05); }
.tuto[open] summary { border-bottom: 1px solid var(--border); }
.tuto-body { padding: 1rem 1.1rem 1.1rem; }
.tuto-intro { font-size: .8rem; color: var(--text-secondary); margin-bottom: 1rem; }
.tuto-intro b { color: var(--text); }
.tuto-steps { list-style: none; counter-reset: t; margin: 0; padding: 0; display: grid; gap: 1rem; }
.tuto-steps li { counter-increment: t; position: relative; padding-left: 2.4rem; }
.tuto-steps li::before {
content: counter(t); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; color: #fff;
background: var(--red); box-shadow: 0 0 0 4px rgba(255,45,59,.15);
}
.tuto-steps li + li::after { content: ''; position: absolute; left: 12px; top: -1rem; height: 1rem; width: 2px; background: rgba(255,45,59,.35); }
.tuto-steps strong { display: block; font-size: .86rem; margin-bottom: .25rem; }
.tuto-steps p, .tuto-phone p { font-size: .78rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: .35rem; }
.tuto-steps b, .tuto-phone b { color: var(--text); }
.tuto mark { background: rgba(255,45,59,.14); color: #ff6b75; padding: .05rem .35rem; border-radius: 4px; font-family: ui-monospace, monospace; font-size: .74rem; }
.tuto-code {
display: flex; align-items: center; gap: .5rem; margin: .35rem 0 .45rem; padding: .55rem .7rem; border-radius: 8px;
border: 1px solid var(--border); background: rgba(13,13,15,.6); overflow-x: auto;
}
.tuto-code code { flex: 1; font-family: ui-monospace, monospace; font-size: .74rem; color: var(--text); white-space: nowrap; }
.tuto-code--msg code { white-space: normal; line-height: 1.5; }
.tuto-copy { flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; }
.tuto-copy:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.tuto-muted { color: var(--text-muted) !important; font-size: .74rem !important; word-break: break-all; }
.tuto-phone { margin-top: 1.1rem; padding: .9rem 1rem; border-radius: 10px; background: rgba(255,45,59,.05); border: 1px solid rgba(255,45,59,.2); }
.tuto-phone strong { display: block; font-size: .84rem; margin-bottom: .3rem; }
.tuto-phone strong i { color: var(--red); margin-right: .3rem; }
.tuto summary span { white-space: nowrap; flex-shrink: 0; }
.tuto summary { gap: .75rem; padding: .9rem 1rem; }
.tuto-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,45,59,.12); }
.tuto-ic i { color: var(--red); }
.tuto-sum { display: flex; flex-direction: column; min-width: 0; margin-left: 0 !important; padding: 0 !important; background: none !important; white-space: normal !important; }
.tuto-sum b { font-size: .88rem; color: var(--text); }
.tuto-sum small { font-size: .72rem; font-weight: 500; color: var(--text-muted); }
.tuto-chev { margin-left: auto; color: var(--text-muted) !important; font-size: .75rem; transition: transform .25s ease; }
.tuto[open] .tuto-chev { transform: rotate(180deg); }
.tuto-body { padding: 1.1rem 1.1rem 1.2rem; }
.tuto-steps { gap: 0; }
.tuto-steps li { padding: 0 0 1.25rem 2.6rem; }
.tuto-steps li:last-child { padding-bottom: 0; }
.tuto-steps li + li::after { display: none; }
.tuto-steps li::before { top: 0; }
.tuto-steps li:not(:last-child) { background: linear-gradient(rgba(255,45,59,.35), rgba(255,45,59,.35)) no-repeat 12px 30px / 2px calc(100% - 32px); }
.tuto-steps strong { font-size: .88rem; margin-bottom: .3rem; padding-top: .15rem; }
.tuto-steps p { margin: .4rem 0 0; }
.tuto-steps code { font-family: ui-monospace, monospace; font-size: .74rem; color: var(--text); background: rgba(255,255,255,.06); padding: .05rem .3rem; border-radius: 4px; }
.tuto-muted { word-break: normal !important; overflow-wrap: anywhere; }
.tuto-browser {
display: flex; align-items: center; gap: .6rem; margin-top: .45rem; padding: .5rem .7rem; border-radius: 9px;
background: #202027; border: 1px solid rgba(255,255,255,.08); overflow: hidden;
}
.tuto-dots { display: flex; gap: 4px; flex-shrink: 0; }
.tuto-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.tuto-url { flex: 1; min-width: 0; padding: .3rem .6rem; border-radius: 6px; background: rgba(0,0,0,.35); font-family: ui-monospace, monospace; font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuto-url em { font-style: normal; color: var(--text-secondary); }
.tuto-url mark { background: rgba(255,45,59,.22); color: #ff8a92; box-shadow: 0 0 0 1px rgba(255,45,59,.5); }
.tuto-rrma { display: grid; grid-template-columns: 1fr auto; gap: .45rem; margin-top: .45rem; }
.tuto-rrma .ctc-input { min-height: 42px; padding: .5rem .75rem; font-family: ui-monospace, monospace; font-size: .8rem; letter-spacing: .03em; }
.tuto-rrma .btn { height: 42px; padding: 0 1rem; }
.tuto-rrma .btn.is-disabled { opacity: .4; cursor: not-allowed; }
.tuto-track {
display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .45rem; padding: .6rem .8rem;
border-radius: 9px; background: #fff; color: #333; font-size: .76rem;
}
.tuto-track b { color: #96154a; }
.tuto-track-num { font-family: ui-monospace, monospace; font-weight: 700; color: #111; background: #fde68a; padding: .15rem .45rem; border-radius: 5px; white-space: nowrap; }
.tuto-track-num i { color: var(--red); margin-left: .3rem; animation: tuto-nudge 1.2s ease-in-out infinite; }
@keyframes tuto-nudge { 50% { transform: translateX(-3px); } }
.tuto-phone { margin-top: 1.3rem; }
.tuto-phone-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.tuto-phone-head i { color: var(--red); }
.tuto-phone-head strong { margin: 0 !important; font-size: .85rem; }
.tuto-msg { display: flex; gap: .6rem; align-items: flex-end; margin-top: .5rem; padding: .7rem .8rem; border-radius: 10px; background: rgba(13,13,15,.6); border: 1px solid var(--border); }
.tuto-msg p { flex: 1; margin: 0 !important; font-size: .8rem !important; color: var(--text) !important; line-height: 1.55; font-style: italic; }
.tuto-msg .tuto-copy { width: auto; height: 32px; padding: 0 .7rem; font-size: .72rem; font-weight: 600; font-family: var(--font); white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
@media (max-width: 480px) {
.tuto-msg { flex-direction: column; align-items: stretch; }
.tuto-msg .tuto-copy { justify-content: center; }
}
.tuto-note { display: flex; gap: .6rem; align-items: flex-start; margin-top: .6rem; padding: .6rem .75rem; border-radius: 9px; font-size: .76rem; line-height: 1.5; color: var(--text-secondary); background: rgba(245,166,35,.07); border: 1px solid rgba(245,166,35,.28); }
.tuto-note > i { color: #f5a623; margin-top: .2rem; }
.tuto-note b { color: var(--text); }
.tuto-note--alt { background: rgba(96,165,250,.07); border-color: rgba(96,165,250,.28); }
.tuto-note--alt > i { color: #60a5fa; }
.tuto-note--alt > div { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.tuto-copy-link { width: auto !important; height: 30px !important; padding: 0 .7rem !important; font-family: var(--font); font-size: .72rem !important; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.tuto-copy-link:disabled { opacity: .4; cursor: not-allowed; }
.tuto-sum { flex: 1 1 auto; } .tuto summary { overflow: hidden; } .tuto-chev { flex-shrink: 0; }
.tuto-copy-link {
height: 34px !important; padding: 0 .85rem !important; border-radius: 8px !important;
border: 1px solid rgba(96,165,250,.5) !important; background: rgba(96,165,250,.14) !important;
color: #bfdbfe !important; font-size: .76rem !important; font-weight: 700 !important;
transition: background .2s ease, border-color .2s ease, color .2s ease, transform .1s ease;
}
.tuto-copy-link i { color: #60a5fa; }
.tuto-copy-link:not(:disabled):hover { background: rgba(96,165,250,.26) !important; border-color: #60a5fa !important; color: #fff !important; }
.tuto-copy-link:not(:disabled):active { transform: scale(.97); }
.tuto-copy-link:focus { outline: none; }
.tuto-copy-link:focus-visible { box-shadow: 0 0 0 3px rgba(96,165,250,.35); }
.tuto-copy-link:disabled { opacity: .45; cursor: not-allowed; background: rgba(96,165,250,.06) !important; }
.tuto-copy-link.is-copied { background: rgba(34,197,94,.16) !important; border-color: rgba(34,197,94,.55) !important; color: #bbf7d0 !important; }
.tuto-copy-link.is-copied i { color: #22c55e; }
.suivi26--first { margin: 0 0 .4rem; padding: 1rem; border-radius: 12px; border: 1px solid rgba(255,45,59,.35); background: linear-gradient(135deg, rgba(255,45,59,.08), transparent 70%); }
.suivi26--first .ctc-label { color: var(--text); }
.flow-body--suivi .dropzone { padding: 1.4rem 1rem; }
.consigne--warn { border-color: rgba(245,166,35,.55); background: linear-gradient(135deg, rgba(245,166,35,.14), rgba(245,166,35,.03)); }
.consigne--warn .consigne-icon { background: #f5a623; color: #1a1205; }
.consigne--warn strong { color: #fbbf24; }
.consigne--warn {
position: relative; overflow: hidden; padding: 1.1rem 1.1rem 1.1rem 1.2rem;
border: 2px solid #f59e0b; border-radius: 12px;
background: linear-gradient(135deg, rgba(245,158,11,.28), rgba(245,158,11,.1) 60%, rgba(245,158,11,.06));
box-shadow: 0 0 0 4px rgba(245,158,11,.12), 0 10px 30px rgba(245,158,11,.15);
animation: warn-glow 2.4s ease-in-out infinite;
}
.consigne--warn::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #f59e0b; }
.consigne--warn .consigne-icon { width: 38px; height: 38px; font-size: 1.05rem; background: #f59e0b; color: #1a1205; box-shadow: 0 0 0 5px rgba(245,158,11,.25); }
.consigne--warn strong { font-size: 1rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fbbf24; }
.consigne--warn p { font-size: .9rem; font-weight: 600; color: #fff; }
@keyframes warn-glow { 50% { box-shadow: 0 0 0 7px rgba(245,158,11,.2), 0 10px 34px rgba(245,158,11,.28); } }
@media (prefers-reduced-motion: reduce) { .consigne--warn { animation: none; } }
.tf-pdd { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .35rem; font-size: .74rem !important; font-weight: 600; color: var(--text-secondary) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; white-space: nowrap; }
.tf-pdd input { accent-color: #22c55e; width: 15px; height: 15px; }
.tf-row { grid-template-columns: 1fr 140px 64px 130px 110px 54px auto; }
@media (max-width: 900px) { .tf-row { grid-template-columns: 1fr 1fr; } }
.consigne--warn {
display: block; padding: 0; overflow: hidden; animation: none;
border: 1px solid rgba(245,158,11,.45); border-radius: 12px;
background: #17140e; box-shadow: none;
}
.consigne--warn::before { display: none; }
.consigne--warn .consigne-icon { display: none; }
.consigne--warn > div { display: block; }
.consigne--warn strong {
display: flex; align-items: center; gap: .5rem; margin: 0; padding: .6rem 1rem;
font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: #1a1205; background: #f59e0b;
}
.consigne--warn strong::before { content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8rem; }
.consigne--warn p { padding: .85rem 1rem .95rem; font-size: .86rem; font-weight: 500; line-height: 1.6; color: #f3f4f6; }
.consigne--warn p b { color: #fbbf24; font-weight: 700; }
.poids { margin: 0 1rem 1rem; padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.02); }
.poids-toggle { display: flex; align-items: center; gap: .8rem; cursor: pointer; }
.poids-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.poids-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; border-radius: 999px; background: rgba(255,255,255,.12); transition: background .2s ease; }
.poids-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.poids-toggle input:checked + .poids-switch { background: #16a34a; }
.poids-toggle input:checked + .poids-switch::after { transform: translateX(18px); }
.poids-toggle input:focus-visible + .poids-switch { box-shadow: 0 0 0 3px rgba(34,197,94,.35); }
.poids-txt { display: flex; flex-direction: column; }
.poids-txt strong { font-size: .88rem; }
.poids-txt small { font-size: .74rem; color: var(--text-muted); }
.poids-kg { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; }
.poids-kg[hidden] { display: none; }
.poids-btn { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.poids-btn:hover { border-color: rgba(255,255,255,.28); }
.poids-kg input { width: 64px; height: 36px; text-align: center; border-radius: 9px; border: 1px solid var(--border); background: rgba(13,13,15,.6); color: var(--text); font-family: var(--font-display); font-size: 1rem; font-weight: 700; -moz-appearance: textfield; }
.poids-kg input::-webkit-outer-spin-button, .poids-kg input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.poids-unit { font-size: .8rem; color: var(--text-muted); }
.poids-sup { margin-left: auto; font-family: var(--font-display); font-weight: 700; color: #22c55e; }
.tf-kg2 { display: flex; gap: .4rem; }
.tf-kg2 .tf-prix { width: 90px; }
.tf-qr:has(.tf-kg2) { grid-template-columns: auto 1fr auto auto; }
.poids-tarifs { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }
.poids-chip {
display: inline-flex; align-items: baseline; gap: .15rem; padding: .2rem .55rem; border-radius: 999px;
font-size: .7rem; color: var(--text-secondary); background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3);
}
.poids-chip b { font-family: var(--font-display); font-size: .82rem; color: #22c55e; }
.poids-chip em { font-style: normal; margin-left: .35rem; padding-left: .4rem; border-left: 1px solid rgba(255,255,255,.15); color: var(--text-muted); }
.poids-chip--2 { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.3); }
.poids-chip--2 b { color: #60a5fa; }
.pw { margin: 0 1rem 1rem; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(135deg, rgba(34,197,94,.06), rgba(255,255,255,.015) 60%); transition: border-color .25s ease, background .25s ease; overflow: hidden; }
.pw.is-on { border-color: rgba(34,197,94,.5); background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(255,255,255,.02) 70%); }
.pw-head { display: flex; align-items: center; gap: .85rem; padding: .95rem 1rem; cursor: pointer; }
.pw-head input { position: absolute; opacity: 0; pointer-events: none; }
.pw-head .poids-switch { margin-left: auto; }
.pw-head input:checked + .poids-switch { background: #16a34a; }
.pw-head input:checked + .poids-switch::after { transform: translateX(18px); }
.pw-head input:focus-visible + .poids-switch { box-shadow: 0 0 0 3px rgba(34,197,94,.35); }
.pw-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(34,197,94,.15); color: #22c55e; font-size: 1rem; }
.pw-title { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pw-title strong { font-size: .92rem; }
.pw-title small { font-size: .74rem; color: var(--text-muted); }
.pw-deg { color: #60a5fa; font-weight: 600; white-space: nowrap; }
.pw-deg i { font-size: .65rem; }
.pw-body { padding: 0 1rem 1rem; }
.pw-body[hidden] { display: none; }
.pw-stepper { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .6rem; border-radius: 12px; background: rgba(0,0,0,.25); }
.pw-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: var(--text); cursor: pointer; font-size: .85rem; transition: background .15s ease, transform .1s ease; }
.pw-btn:hover { background: rgba(34,197,94,.25); }
.pw-btn:active { transform: scale(.92); }
.pw-btn:focus { outline: none; }
.pw-btn:focus-visible { box-shadow: 0 0 0 3px rgba(34,197,94,.35); }
.pw-value { display: flex; align-items: baseline; gap: .3rem; min-width: 96px; justify-content: center; }
.pw-value input { width: 60px; border: 0; background: transparent; color: var(--text); text-align: right; font-family: var(--font-display); font-size: 2rem; font-weight: 800; -moz-appearance: textfield; outline: none; }
.pw-value input::-webkit-outer-spin-button, .pw-value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pw-value span { font-size: .95rem; font-weight: 600; color: var(--text-muted); }
.pw-quick { display: flex; gap: .35rem; justify-content: center; margin-top: .65rem; flex-wrap: wrap; }
.pw-quick button { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-family: var(--font); font-size: .74rem; font-weight: 600; cursor: pointer; }
.pw-quick button:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.pw-quick button.is-active { background: #16a34a; border-color: #16a34a; color: #fff; }
.pw-calc { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed rgba(255,255,255,.12); font-size: .76rem; color: var(--text-muted); }
.pw-calc strong { font-family: var(--font-display); font-size: 1.15rem; color: #22c55e; }
.tf-perks { display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem !important; }
.perk { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 11px; border: 1px solid var(--border); background: rgba(255,255,255,.02); min-width: 0; }
.perk-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .78rem; }
.perk-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.perk-txt b { font-size: .78rem; color: var(--text); }
.perk-txt small { font-size: .66rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perk--pdd { border-color: rgba(34,197,94,.35); background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(34,197,94,.02)); cursor: pointer; transition: border-color .2s ease, transform .15s ease; }
.perk--pdd .perk-ic { background: #16a34a; color: #fff; }
.perk--pdd small { color: #86efac; }
.perk--pdd:hover { border-color: #22c55e; transform: translateY(-1px); }
.perk-go { margin-left: auto; font-size: .7rem; color: #22c55e; transition: transform .2s ease; }
.perk--pdd:hover .perk-go { transform: translateX(3px); }
.perk--kg .perk-ic { background: rgba(96,165,250,.15); color: #60a5fa; }
.tf-perks > .perk:only-child { grid-column: 1 / -1; }
@media (max-width: 380px) { .tf-perks { grid-template-columns: 1fr; } }
.lk-form { max-width: 760px; }
.lk-form .adm-card-head h2 i { color: #2aabee; margin-right: .3rem; }
.lk-row { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.lk-input { display: flex; gap: .4rem; }
.lk-input .ctc-input { min-height: 40px; padding: .5rem .8rem; font-family: ui-monospace, monospace; font-size: .8rem; }
.lk-input .adm-btn { height: 40px; }
.lk-save { margin-top: .4rem; }
button.perk { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; transition: border-color .2s ease, background .2s ease; }
.perk--kg { border-color: rgba(96,165,250,.3); background: linear-gradient(135deg, rgba(96,165,250,.1), rgba(96,165,250,.02)); }
.perk--kg small { color: #93c5fd; }
.perk--kg:hover { border-color: #60a5fa; transform: translateY(-1px); }
.perk--kg .perk-go { color: #60a5fa; }
.perk .perk-go { transition: transform .25s ease; }
.perk:hover .perk-go { transform: none; }
.perk[aria-expanded="true"] .perk-go { transform: rotate(180deg); }
.perk--pdd[aria-expanded="true"] { border-color: #22c55e; }
.perk--kg[aria-expanded="true"] { border-color: #60a5fa; }
.perk:focus-visible { outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; }
.perk-pop { grid-column: 1 / -1; padding: .85rem .95rem; border-radius: 11px; font-size: .8rem; line-height: 1.5; color: var(--text-secondary); animation: perkIn .22s ease; }
.perk-pop[hidden] { display: none; }
.perk-pop p { margin: 0 0 .7rem; }
.perk-pop p b { color: var(--text); }
.perk-pop--pdd { background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.3); }
.perk-pop--kg { background: rgba(96,165,250,.07); border: 1px solid rgba(96,165,250,.3); }
.perk-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 9px; background: #16a34a; color: #fff; font-weight: 700; font-size: .8rem; text-decoration: none; transition: background .2s ease; }
.perk-cta:hover { background: #22c55e; }
.perk-cta .fa-arrow-right { font-size: .7rem; transition: transform .2s ease; }
.perk-cta:hover .fa-arrow-right { transform: translateX(3px); }
.perk-tarif { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.perk-tarif li { display: flex; flex-direction: column; padding: .5rem .65rem; border-radius: 8px; background: rgba(0,0,0,.25); font-size: .72rem; }
.perk-tarif b { font-family: var(--font-display); font-size: 1.05rem; color: #60a5fa; }
.perk-ex { color: var(--text-muted); font-size: .72rem; }
.perk-ex b { color: var(--text); }
@keyframes perkIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tf-perks > button.perk:only-of-type { grid-column: 1 / -1; }
.tf-row { grid-template-columns: 1fr 140px auto 130px 110px 54px auto; }
.tf-flags { display: inline-flex; gap: .7rem; flex-wrap: wrap; }
@media (max-width: 900px) { .tf-row { grid-template-columns: 1fr 1fr; } }
.rl { margin: 1rem 0 1.1rem; padding: 1rem; border-radius: 14px; border: 1px solid rgba(250,204,21,.35); background: linear-gradient(135deg, rgba(250,204,21,.09), rgba(255,255,255,.015) 65%); }
.rl--info { margin: 0 1rem 1rem; }
.rl-head { display: flex; gap: .8rem; align-items: flex-start; }
.rl-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #facc15; color: #1a1a1a; font-size: .95rem; }
.rl-head strong { display: block; font-size: .92rem; color: var(--text); margin-bottom: .2rem; }
.rl-head p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-secondary); }
.rl-head p b { color: #fde047; }
.rl-map { display: inline-flex; align-items: center; gap: .5rem; margin: .8rem 0 0; padding: .55rem .9rem; border-radius: 9px; background: #facc15; color: #1a1a1a; font-weight: 700; font-size: .8rem; text-decoration: none; transition: background .2s ease, transform .15s ease; }
.rl-map:hover { background: #fde047; transform: translateY(-1px); }
.rl-map .fa-external-link-alt { font-size: .65rem; opacity: .7; }
.rl-ex { margin: .8rem 0 .9rem; padding: .5rem .7rem; border-radius: 8px; background: rgba(0,0,0,.3); font-size: .74rem; line-height: 1.6; color: var(--text-muted); font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.rl, .rl-head > div { min-width: 0; }
.rl-ex mark { background: #2563eb; color: #fff; padding: 0 .2rem; border-radius: 3px; }
.rl-input i { color: #facc15 !important; }
.rl-input .track-input { text-transform: none; }
.service-cart--relais { display: inline-flex; align-items: center; justify-content: center; color: #facc15 !important; cursor: help; }
.suivi26-err { display: flex; gap: .45rem; align-items: flex-start; margin: .6rem 0 0; padding: .55rem .75rem; border-radius: 9px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); color: #fbbf24; font-size: .78rem; line-height: 1.45; }
.suivi26-err::before { content: '\f071'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; font-size: .72rem; margin-top: .15rem; }
.suivi26-err[hidden] { display: none; }
.track-input-wrap.is-invalid { border-color: rgba(245,158,11,.55) !important; }
.ins85 { margin-bottom: 1.1rem; border-radius: 14px; overflow: hidden; border: 1px solid rgba(168,85,247,.45); background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(255,255,255,.015) 70%); padding: 1rem; }
.ins85[hidden] { display: none; }
.ins85-head { display: flex; gap: .8rem; align-items: flex-start; }
.ins85-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #a855f7; color: #fff; font-size: 1rem; box-shadow: 0 6px 18px rgba(168,85,247,.35); }
.ins85-head > div { min-width: 0; }
.ins85-head strong { display: block; font-size: .95rem; color: var(--text); margin-bottom: .25rem; }
.ins85-head p { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--text-secondary); }
.ins85-head p b { color: #d8b4fe; }
.ins85-switch { margin: .9rem 0 0; }
.ins85-btn { width: 100%; justify-content: center; background: #a855f7; color: #fff; border: 0; font-weight: 700; }
.ins85-btn:hover { background: #9333ea; }
.ins85-note { margin: .55rem 0 0; font-size: .74rem; color: var(--text-muted); text-align: center; }
.service-cart {
position: relative; width: 38px; height: 38px; border-radius: 10px;
border: 1px solid rgba(255,255,255,.1);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
color: var(--text-secondary); font-size: .85rem;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.25);
transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.service-cart .sc-plus {
position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--red); color: #fff; font-size: .45rem;
box-shadow: 0 0 0 2px var(--bg-card, #16161b); transition: transform .2s ease;
}
.service-cart:hover {
color: #fff; border-color: rgba(255,45,59,.55);
background: linear-gradient(180deg, rgba(255,45,59,.22), rgba(255,45,59,.08));
transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,45,59,.22);
}
.service-cart:hover .sc-plus { transform: scale(1.15) rotate(90deg); }
.service-cart:active { transform: scale(.94); }
.service-cart:focus-visible { outline: 2px solid rgba(255,45,59,.6); outline-offset: 2px; }
.service-cart:disabled { opacity: .6; cursor: progress; }
.service-cart.is-added {
color: #fff; border-color: #16a34a; background: #16a34a;
box-shadow: 0 6px 16px rgba(34,197,94,.3); animation: sc-pop .35s ease;
}
@keyframes sc-pop { 40% { transform: scale(1.15); } }
.service-order { height: 38px; border-radius: 10px; }
@media (max-width: 420px) { .service-cart, .service-order { height: 34px; } .service-cart { width: 34px; } }
.service-cart {
color: #ff6b75; border-color: rgba(255,45,59,.28);
background: rgba(255,45,59,.05); box-shadow: none; font-size: .9rem;
}
.service-cart:hover {
color: #fff; border-color: var(--red); background: var(--red);
transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,45,59,.3);
}
.service-cart:hover i { animation: sc-wiggle .45s ease; }
@keyframes sc-wiggle { 30% { transform: translateX(-2px) rotate(-8deg); } 60% { transform: translateX(2px) rotate(6deg); } }
.service-actions { gap: 0; }
.service-actions .service-order { border-radius: 10px 0 0 10px; }
.service-actions .panier-add .service-cart {
width: 40px; border-radius: 0 10px 10px 0; border-left-color: rgba(255,45,59,.18);
margin-left: -1px; color: #ff6b75; background: rgba(255,45,59,.05);
font-size: .85rem; box-shadow: none; transform: none;
}
.service-actions .panier-add .service-cart:hover {
color: #fff; background: var(--red); border-color: var(--red); transform: none; box-shadow: none;
}
.service-row:hover .service-actions .service-cart { border-left-color: rgba(255,255,255,.25); }
.service-actions .panier-add .service-cart.is-added { background: #16a34a; border-color: #16a34a; color: #fff; }
@media (max-width: 420px) { .service-actions .panier-add .service-cart { width: 36px; } }
.service-actions { gap: .45rem; }
.service-actions .service-order { border-radius: 10px; }
.service-actions .panier-add .service-cart {
width: 38px; margin-left: 0; border-radius: 10px;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
color: #d4d4d8; font-size: .85rem;
}
.service-row:hover .service-actions .service-cart { border-left-color: rgba(255,255,255,.12); }
.service-actions .panier-add .service-cart:hover {
color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3);
}
.service-actions .panier-add .service-cart.is-added { background: #16a34a; border-color: #16a34a; color: #fff; }
@media (max-width: 420px) { .service-actions .panier-add .service-cart { width: 34px; } }
.acc-pdd { display: inline-flex; align-items: center; gap: .45rem; padding: 0 1rem; min-height: 40px; border-radius: 10px; border: 1px solid rgba(34,197,94,.45); background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(34,197,94,.04)); color: #86efac; font-weight: 700; font-size: .85rem; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; }
.acc-pdd i { color: #22c55e; transition: color .2s ease; }
.acc-pdd:hover { background: #16a34a; border-color: #16a34a; color: #fff; transform: translateY(-1px); }
.acc-pdd:hover i { color: #fff; }
.acc-order-actions { flex-wrap: wrap; justify-content: flex-end; }
.dchoix { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.1rem; }
.dchoix-opt { display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.02); color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; min-width: 0; }
.dchoix-opt:hover { border-color: rgba(255,255,255,.22); color: var(--text); }
.dchoix-opt.is-active { border-color: var(--red); background: linear-gradient(135deg, rgba(255,45,59,.14), rgba(255,45,59,.03)); color: var(--text); box-shadow: 0 0 0 3px rgba(255,45,59,.12); }
.dchoix-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); font-size: .95rem; transition: background .2s ease, color .2s ease; }
.dchoix-opt.is-active .dchoix-ic { background: var(--red); color: #fff; }
.dchoix-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dchoix-txt b { font-size: .9rem; }
.dchoix-txt small { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dchoix-panel[hidden] { display: none !important; }
@media (max-width: 380px) { .dchoix-txt small { display: none; } }
.nocrypto { margin-top: 1rem; border-radius: 14px; border: 1px solid rgba(96,165,250,.28); background: linear-gradient(135deg, rgba(96,165,250,.08), rgba(255,255,255,.015) 65%); overflow: hidden; }
.nocrypto summary { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; cursor: pointer; list-style: none; }
.nocrypto summary::-webkit-details-marker { display: none; }
.nocrypto-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(96,165,250,.16); color: #60a5fa; }
.nocrypto-title { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.nocrypto-title b { font-size: .92rem; color: var(--text); }
.nocrypto-title small { font-size: .76rem; color: var(--text-muted); }
.nocrypto-chev { margin-left: auto; color: #60a5fa; font-size: .8rem; transition: transform .25s ease; }
.nocrypto[open] .nocrypto-chev { transform: rotate(180deg); }
.nocrypto-body { padding: 0 1rem 1rem; animation: perkIn .22s ease; }
.nocrypto-steps { margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: nc; display: grid; gap: .55rem; }
.nocrypto-steps li { counter-increment: nc; position: relative; padding-left: 2rem; font-size: .8rem; line-height: 1.5; color: var(--text-secondary); }
.nocrypto-steps li::before { content: counter(nc); position: absolute; left: 0; top: .05rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #2563eb; color: #fff; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.nocrypto-steps b { color: var(--text); }
.nocrypto-cat { margin: .2rem 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.nocrypto-cat i { color: #60a5fa; margin-right: .25rem; }
.nocrypto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem; margin-bottom: .9rem; }
.nocrypto-svc { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 10px; border: 1px solid var(--border); background: rgba(0,0,0,.2); text-decoration: none; color: var(--text); min-width: 0; transition: border-color .2s ease, transform .15s ease, background .2s ease; }
.nocrypto-svc:hover { border-color: rgba(96,165,250,.55); background: rgba(96,165,250,.08); transform: translateY(-1px); }
.nocrypto-svc > span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nocrypto-svc b { font-size: .82rem; }
.nocrypto-svc small { font-size: .68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nocrypto-logo { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .8rem; }
.nocrypto-tip { display: flex; gap: .55rem; padding: .7rem .8rem; border-radius: 10px; background: rgba(250,204,21,.07); border: 1px solid rgba(250,204,21,.25); font-size: .77rem; line-height: 1.5; color: var(--text-secondary); }
.nocrypto-tip i { color: #facc15; margin-top: .2rem; }
.nocrypto-tip b { color: var(--text); }
.od { max-width: 760px; margin: 0 auto; padding-top: 2.5rem; }
.od-hero { text-align: center; padding: 2.2rem 1.5rem 1.6rem; border-radius: 20px; border: 1px solid var(--border); background: radial-gradient(120% 90% at 50% 0%, rgba(34,197,94,.12), transparent 60%), var(--bg-card, #16161b); margin-bottom: 1.2rem; }
.od-hero--wait { background: radial-gradient(120% 90% at 50% 0%, rgba(245,158,11,.12), transparent 60%), var(--bg-card, #16161b); }
.od-hero--run { background: radial-gradient(120% 90% at 50% 0%, rgba(96,165,250,.12), transparent 60%), var(--bg-card, #16161b); }
.od-hero--off { background: radial-gradient(120% 90% at 50% 0%, rgba(255,45,59,.1), transparent 60%), var(--bg-card, #16161b); }
.od-hero-ic { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; background: #16a34a; box-shadow: 0 0 0 8px rgba(34,197,94,.12), 0 12px 30px rgba(34,197,94,.3); animation: odPop .5s cubic-bezier(.2,1.4,.4,1); }
.od-hero--wait .od-hero-ic { background: #f59e0b; box-shadow: 0 0 0 8px rgba(245,158,11,.12); }
.od-hero--run .od-hero-ic { background: #2563eb; box-shadow: 0 0 0 8px rgba(96,165,250,.12); }
.od-hero--off .od-hero-ic { background: var(--red); box-shadow: 0 0 0 8px rgba(255,45,59,.12); }
@keyframes odPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.od-hero h1 { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 .5rem; }
.od-hero p { max-width: 520px; margin: 0 auto 1rem; color: var(--text-secondary); font-size: .92rem; line-height: 1.6; }
.od-ref { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text); font: inherit; font-size: .82rem; cursor: pointer; }
.od-ref span { color: var(--text-muted); }
.od-ref b { font-family: ui-monospace, monospace; letter-spacing: .03em; }
.od-ref i { font-size: .72rem; color: var(--text-muted); }
.od-ref:hover { border-color: rgba(255,255,255,.25); }
.od-steps { margin: 1.4rem auto 0; max-width: 560px; }
.od-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.5rem; }
.od-card { border-radius: 18px; border: 1px solid var(--border); background: var(--bg-card, #16161b); overflow: hidden; }
.od-head { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--border); }
.od-head .recap-logo { width: 48px; height: 48px; flex-shrink: 0; }
.od-head-txt { display: flex; flex-direction: column; min-width: 0; }
.od-head-txt strong { font-size: 1rem; }
.od-head-txt span { font-size: .78rem; color: var(--text-muted); }
.od-head-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.od-head-right b { font-family: var(--font-display); font-size: 1.35rem; }
.od-track-box { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.015); }
.od-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .45rem; }
.od-track { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.od-track code { font-family: ui-monospace, monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; color: var(--text); padding: .35rem .6rem; border-radius: 8px; background: rgba(0,0,0,.3); }
.od-copy { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; }
.od-copy:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.od-scans { list-style: none; margin: 0; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.od-scans li { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.2rem; flex-wrap: wrap; }
.od-scans li + li { border-top: 1px solid rgba(255,255,255,.04); }
.od-scan-n { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
.od-scan-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.od-scan-main small { font-size: .74rem; color: var(--text-muted); }
.od-scans .od-track code { font-size: .85rem; }
.od-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.od-grid > div { padding: .85rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.04); min-width: 0; }
.od-grid > div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.04); }
.od-grid dt { font-size: .72rem; color: var(--text-muted); margin-bottom: .2rem; }
.od-grid dd { margin: 0; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.od-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.od-dd-ic { color: var(--text-muted); font-size: .8em; margin-right: .4rem; }
.od-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; padding: .85rem 1.2rem; font-size: .76rem; color: var(--text-muted); }
.od-foot i { color: #22c55e; margin-right: .3rem; }
.od-help { text-align: center; margin: 1.2rem 0 0; font-size: .82rem; color: var(--text-muted); }
.od-help i { color: var(--red); margin-right: .3rem; }
.od-help a { color: var(--text); text-decoration: underline; }
@media (max-width: 560px) {
.od-grid { grid-template-columns: 1fr; }
.od-grid > div:nth-child(odd) { border-right: 0; }
.od-head { flex-wrap: wrap; }
}
.od-foot { align-items: flex-start; }
.od-delai { flex-basis: 100%; }
.od-delai summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; padding: .3rem .6rem; margin: -.3rem -.6rem; border-radius: 8px; transition: background .2s ease, color .2s ease; }
.od-delai summary::-webkit-details-marker { display: none; }
.od-delai summary:hover, .od-delai[open] summary { background: rgba(245,158,11,.1); color: var(--text); }
.od-delai-i { color: #f59e0b !important; font-size: .72rem; margin: 0 !important; }
.od-delai-pop { margin-top: .6rem; padding: .8rem .9rem; border-radius: 10px; border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.08); animation: perkIn .22s ease; }
.od-delai-pop strong { display: block; color: #fbbf24; font-size: .84rem; margin-bottom: .35rem; }
.od-delai-pop strong i { color: #f59e0b; margin-right: .3rem; }
.od-delai-pop p { margin: .2rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--text-secondary); }
.od-delai-note { color: var(--text-muted) !important; font-style: italic; }
.cmp-scroll { position: relative; width: fit-content; max-width: 100%; margin-bottom: 1rem; }
.cmp-scroll .cmp-tiles { margin-bottom: 0; }
.cmp-scroll::before, .cmp-scroll::after { content: ''; position: absolute; top: 1px; bottom: 1px; width: 44px; pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 1; }
.cmp-scroll::before { left: 1px; border-radius: 14px 0 0 14px; background: linear-gradient(90deg, var(--surface) 20%, transparent); }
.cmp-scroll::after { right: 1px; border-radius: 0 14px 14px 0; background: linear-gradient(270deg, var(--surface) 20%, transparent); }
.cmp-scroll.can-left::before, .cmp-scroll.can-right::after { opacity: 1; }
.cmp-swipe { display: flex; align-items: center; gap: .45rem; margin: -.4rem 0 1rem; font-size: .75rem; color: var(--text-muted); }
.cmp-swipe[hidden] { display: none; }
.cmp-swipe .fa-hand-point-up { color: var(--red); animation: cmpSwipe 1.6s ease-in-out infinite; }
.cmp-swipe .fa-arrow-right { font-size: .65rem; animation: cmpArrow 1.6s ease-in-out infinite; }
@keyframes cmpSwipe { 0%, 100% { transform: translateX(0) rotate(-15deg); } 50% { transform: translateX(10px) rotate(-15deg); } }
@keyframes cmpArrow { 0%, 100% { transform: translateX(0); opacity: .5; } 50% { transform: translateX(4px); opacity: 1; } }
.ctc-me { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; margin-bottom: 1rem; border-radius: 12px; border: 1px solid rgba(42,171,238,.35); background: linear-gradient(135deg, rgba(42,171,238,.1), rgba(255,255,255,.015) 70%); }
.ctc-me-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2aabee; color: #fff; font-size: 1rem; }
.ctc-me-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ctc-me-txt small { font-size: .74rem; color: var(--text-muted); }
.ctc-me-txt b { font-size: .95rem; overflow-wrap: anywhere; }
.ctc-me-ok { margin-left: auto; font-size: .72rem; font-weight: 700; color: #22c55e; white-space: nowrap; }
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; counter-reset: none; }
.how::before { content: ''; position: absolute; top: 22px; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, var(--red), rgba(255,45,59,.35) 70%, #22c55e); opacity: .55; }
.how-step { position: relative; display: flex; flex-direction: column; align-items: center; }
.how-num { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #fff; background: var(--red); box-shadow: 0 0 0 6px rgba(255,45,59,.14), 0 10px 24px rgba(255,45,59,.35); margin-bottom: 1rem; }
.how-num--end { background: #16a34a; box-shadow: 0 0 0 6px rgba(34,197,94,.14), 0 10px 24px rgba(34,197,94,.3); }
.how-card { width: 100%; flex: 1; display: flex; flex-direction: column; padding: 1.3rem 1.2rem 1.1rem; border-radius: 16px; border: 1px solid var(--border); background: rgba(22,22,27,.82); backdrop-filter: blur(6px); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.how-card:hover { border-color: rgba(255,45,59,.45); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.how-ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,45,59,.12); color: var(--red); font-size: 1rem; margin-bottom: .9rem; }
.how-step:last-child .how-ic { background: rgba(34,197,94,.12); color: #22c55e; }
.how-card h3 { font-size: 1.02rem; margin: 0 0 .45rem; }
.how-card p { margin: 0 0 1rem; font-size: .86rem; line-height: 1.6; color: var(--text-secondary); flex: 1; }
.how-time { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--text-secondary); background: rgba(255,255,255,.05); border: 1px solid var(--border); }
.how-step:last-child .how-time { color: #86efac; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); }
.how-cta { display: flex; align-items: center; justify-content: center; gap: 1rem 1.4rem; flex-wrap: wrap; margin-top: 2rem; }
.how-cta-note { font-size: .8rem; color: var(--text-muted); }
.how-cta-note i { color: #22c55e; margin-right: .3rem; }
@media (max-width: 900px) {
.how { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; }
.how::before { display: none; }
}
@media (max-width: 560px) {
.how { grid-template-columns: 1fr; gap: 0; }
.how::before { display: block; top: 23px; bottom: 23px; left: 22px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--red), rgba(255,45,59,.35) 70%, #22c55e); }
.how-step { flex-direction: row; align-items: flex-start; gap: .9rem; padding-bottom: 1rem; }
.how-num { flex-shrink: 0; margin-bottom: 0; }
.how-card { padding: 1rem; }
}
.tr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.tr-card { --c: 255,45,59; position: relative; overflow: hidden; padding: 1.3rem 1.3rem 1.2rem; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(160deg, rgba(var(--c),.09), rgba(22,22,27,.9) 55%); transition: border-color .25s ease, transform .25s ease; }
.tr-card:hover { border-color: rgba(var(--c),.45); transform: translateY(-3px); }
.tr-card--amber { --c: 245,158,11; }
.tr-card--red { --c: 255,45,59; }
.tr-card--blue { --c: 96,165,250; }
.tr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.tr-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: rgb(var(--c)); background: rgba(var(--c),.14); }
.tr-big { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: rgb(var(--c)); letter-spacing: -.01em; }
.tr-card h3 { font-size: 1.02rem; margin: 0 0 .45rem; }
.tr-card p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--text-secondary); }
.tr-guarantee { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border-radius: 16px; border: 1px solid rgba(34,197,94,.35); background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(22,22,27,.9) 60%); }
.tr-g-ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; background: #16a34a; box-shadow: 0 8px 22px rgba(34,197,94,.3); }
.tr-g-txt { flex: 1; min-width: 0; }
.tr-g-txt strong { display: block; font-size: 1rem; color: #86efac; margin-bottom: .15rem; }
.tr-g-txt p { margin: 0; font-size: .86rem; color: var(--text-secondary); }
.tr-g-btn { flex-shrink: 0; }
@media (max-width: 860px) { .tr-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tr-guarantee { flex-wrap: wrap; } .tr-g-btn { width: 100%; justify-content: center; } }
.fq-head { align-self: start; }
.fq-help { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.6rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.025); }
.fq-help-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,45,59,.12); color: var(--red); }
.fq-help strong { display: block; font-size: .95rem; }
.fq-help p { margin: .1rem 0 0; font-size: .8rem; color: var(--text-muted); }
.fq-help-btn { margin-left: auto; }
.fq-list { display: flex; flex-direction: column; gap: .7rem; }
.fq-item { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card, #16161b); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; }
.fq-item:hover { border-color: rgba(255,255,255,.14); }
.fq-item[open] { border-color: rgba(255,45,59,.45); box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 3px 0 0 var(--red); }
.fq-item summary { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; cursor: pointer; list-style: none; }
.fq-item summary::-webkit-details-marker { display: none; }
.fq-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); color: var(--text-muted); font-size: .9rem; transition: background .25s ease, color .25s ease; }
.fq-item[open] .fq-ic { background: var(--red); color: #fff; }
.fq-q { flex: 1; font-weight: 700; font-size: .98rem; }
.fq-toggle { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,.05); transition: background .25s ease, transform .3s ease; }
.fq-toggle::before, .fq-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 2px; background: var(--red); transform: translate(-50%, -50%); transition: transform .3s ease; }
.fq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.fq-item[open] .fq-toggle { background: rgba(255,45,59,.14); transform: rotate(180deg); }
.fq-item[open] .fq-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.fq-a { padding: 0 1.2rem 1.15rem calc(1.2rem + 36px + .9rem); animation: fqIn .3s ease; }
.fq-a p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--text-secondary); }
@keyframes fqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .fq-a { padding-left: 1.2rem; } .fq-help-btn { width: 100%; justify-content: center; margin-left: 0; } }
.fh-chips { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.fh-chips li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.fh-chips li i { color: var(--red); font-size: .75rem; }
.fh-chips .fh-chip-price { background: rgba(255,45,59,.14); border-color: rgba(255,45,59,.45); }
.fh-chips .fh-chip-price b { color: #fff; font-family: var(--font-display); font-size: .95rem; }
.fs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fs-stat { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 1.3rem 1.2rem; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(160deg, rgba(255,45,59,.08), var(--bg-card, #16161b) 55%); transition: border-color .25s ease, transform .25s ease; }
.fs-stat:hover { border-color: rgba(255,45,59,.45); transform: translateY(-3px); }
.fs-ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,45,59,.12); color: var(--red); margin-bottom: .9rem; }
.fs-num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; background: linear-gradient(135deg, #fff, #ff8a93); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fs-lbl { margin-top: .45rem; font-weight: 700; font-size: .92rem; }
.fs-stat small { margin-top: .15rem; font-size: .76rem; color: var(--text-muted); }
@media (max-width: 860px) { .fs-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .fs-num { font-size: 2rem; } .fs-stat { padding: 1.1rem 1rem; } }
.fp-perday { margin: -.2rem 0 1.1rem; font-size: .85rem; color: var(--text-muted); }
.fp-perday b { color: var(--text); }
.fp-roi { display: flex; gap: .8rem; align-items: flex-start; text-align: left; padding: .9rem 1rem; margin-bottom: 1.2rem; border-radius: 12px; border: 1px solid rgba(34,197,94,.35); background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(34,197,94,.03)); }
.fp-roi-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #16a34a; color: #fff; }
.fp-roi strong { display: block; font-size: .92rem; color: #86efac; margin-bottom: .15rem; }
.fp-roi span { font-size: .82rem; line-height: 1.5; color: var(--text-secondary); }
.fp-roi b { color: var(--text); }
.fp-perday { text-align: center; }
.fp-roi b { white-space: nowrap; }
.bx-photo--hero .formation-hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.045em; max-width: 12ch; }
.formation-hero .hero-subtitle { font-size: .9rem; letter-spacing: .32em; margin-bottom: 1.2rem; }
.formation-hero .fh-text p { max-width: 520px; }
.fh-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 3rem; align-items: center; width: 100%; }
.fh-card { border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: rgba(14,14,18,.62); backdrop-filter: blur(14px); box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; animation: fhIn .7s .15s both cubic-bezier(.2,.8,.2,1); }
@keyframes fhIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.fh-card-head { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .76rem; color: var(--text-muted); }
.fh-dots { display: inline-flex; gap: 5px; }
.fh-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a44; }
.fh-dots i:first-child { background: var(--red); }
.fh-rows { list-style: none; margin: 0; padding: .5rem 0; }
.fh-rows li { display: flex; align-items: center; gap: .8rem; padding: .75rem 1.1rem; font-size: .88rem; color: var(--text); }
.fh-rows li + li { border-top: 1px solid rgba(255,255,255,.05); }
.fh-rows b { font-family: var(--font-display); }
.fh-ric { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,45,59,.13); color: var(--red); font-size: .85rem; }
.fh-rows em { margin-left: auto; font-style: normal; font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.fh-live { display: inline-flex; align-items: center; gap: .35rem; color: #86efac !important; font-weight: 600; }
.fh-live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: hero-live 2s ease-out infinite; }
.fh-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,45,59,.07); }
.fh-card-foot b { font-family: var(--font-display); font-size: 1.6rem; }
.fh-card-foot span { font-size: .8rem; color: var(--text-muted); margin-left: .25rem; }
.fh-card-foot a { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 10px; background: var(--red); color: #fff; font-weight: 700; font-size: .85rem; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease; }
.fh-card-foot a:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,45,59,.35); }
@media (max-width: 980px) {
.fh-grid { grid-template-columns: 1fr; gap: 2rem; }
.fh-card { display: none; }
}
@media (max-width: 768px) { .bx-photo--hero .formation-hero h1 { font-size: 2.6rem; } }
.formation-hero .hero-inner.fh-grid { max-width: 1200px; margin-left: auto; margin-right: auto; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .85fr); }
.bx-photo--hero .formation-hero h1 { max-width: none; font-size: clamp(2.4rem, 4.6vw, 4.1rem); }
@media (max-width: 980px) { .formation-hero .hero-inner.fh-grid { grid-template-columns: 1fr; } }
.fo-head { text-align: center; max-width: 640px; margin: 0 auto 2.2rem; }
.fo-head .section-label { justify-content: center; }
.fo-head .section-desc { margin-left: auto; margin-right: auto; }
.fo-card { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 360px 1fr; border-radius: 22px; border: 1px solid rgba(255,45,59,.35); background: var(--bg-card, #16161b); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,45,59,.08); }
.fo-price { position: relative; display: flex; flex-direction: column; padding: 2rem 1.8rem; background: radial-gradient(120% 80% at 0% 0%, rgba(255,45,59,.22), transparent 60%), linear-gradient(180deg, rgba(255,45,59,.08), rgba(255,45,59,.02)); border-right: 1px solid rgba(255,255,255,.07); }
.fo-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: var(--red); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(255,45,59,.35); }
.fo-name { margin-top: 1.2rem; font-size: .78rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--text-muted); }
.fo-amount { display: flex; align-items: baseline; gap: .4rem; margin-top: .3rem; }
.fo-amount b { font-family: var(--font-display); font-size: 3.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.fo-amount span { font-size: 1rem; color: var(--text-muted); }
.fo-perday { margin: .5rem 0 1.3rem; font-size: .84rem; color: var(--text-secondary); }
.fo-roi { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem .9rem; border-radius: 12px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); font-size: .8rem; line-height: 1.5; color: var(--text-secondary); margin-bottom: 1.4rem; }
.fo-roi i { color: #22c55e; margin-top: .2rem; }
.fo-roi b { color: #86efac; }
.fo-btn { width: 100%; justify-content: center; margin-top: auto; }
.fo-link { margin-top: .9rem; text-align: center; font-size: .82rem; color: var(--text-muted); text-decoration: none; transition: color .2s ease; }
.fo-link:hover { color: var(--text); }
.fo-link i { margin-right: .3rem; }
.fo-inc { padding: 2rem 2rem 1.6rem; display: flex; flex-direction: column; }
.fo-inc-title { margin: 0 0 1.1rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.fo-inc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fo-inc li { display: flex; gap: .8rem; padding: 1rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.02); transition: border-color .2s ease, background .2s ease; }
.fo-inc li:hover { border-color: rgba(255,45,59,.35); background: rgba(255,45,59,.04); }
.fo-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,45,59,.12); color: var(--red); }
.fo-inc strong { display: block; font-size: .93rem; margin-bottom: .25rem; }
.fo-inc li span:not(.fo-ic) { font-size: .8rem; line-height: 1.5; color: var(--text-secondary); }
.fo-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: auto; padding-top: 1.3rem; font-size: .8rem; color: var(--text-secondary); }
.fo-trust i { color: #22c55e; margin-right: .35rem; }
@media (max-width: 900px) {
.fo-card { grid-template-columns: 1fr; }
.fo-price { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.fo-btn { margin-top: 0; }
}
@media (max-width: 600px) {
.fo-inc ul { grid-template-columns: 1fr; }
.fo-inc, .fo-price { padding: 1.5rem 1.2rem; }
.fo-amount b { font-size: 3rem; }
}
.fo-cap { font-size: .95rem; padding-top: .95rem; padding-bottom: .95rem; box-shadow: 0 12px 30px rgba(255,45,59,.4); position: relative; overflow: hidden; }
.fo-cap::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); animation: foShine 3.2s ease-in-out infinite; }
@keyframes foShine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.fo-btn2 { width: 100%; justify-content: center; margin-top: .6rem; }
.fo-cap-note { margin: .8rem 0 0; text-align: center; font-size: .76rem; color: var(--text-muted); }
.fo-cap-note i { color: #2aabee; margin-right: .3rem; }
.fh-cap { padding: 1rem 1.8rem; font-size: 1rem; border-radius: 12px; animation: fhPulse 2.6s ease-in-out infinite; }
.fh-cap .fh-cap-go { font-size: .8rem; margin-left: .2rem; transition: transform .2s ease; }
.fh-cap:hover .fh-cap-go { transform: translateX(4px); }
.fh-cap:hover { transform: translateY(-2px); }
@keyframes fhPulse { 0%, 100% { box-shadow: 0 12px 30px rgba(255,45,59,.4), 0 0 0 0 rgba(255,45,59,.45); } 50% { box-shadow: 0 12px 30px rgba(255,45,59,.4), 0 0 0 10px rgba(255,45,59,0); } }
.fh-more { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.18) !important; backdrop-filter: blur(6px); }
.fh-more:hover { background: rgba(255,255,255,.12) !important; }
.hero-tg-btn { position: relative; overflow: hidden; gap: .8rem; margin-top: 1.4rem; padding: .7rem 1.1rem .7rem .7rem; border-radius: 14px; border: 1px solid rgba(42,171,238,.45); background: linear-gradient(135deg, rgba(42,171,238,.22), rgba(42,171,238,.06)); backdrop-filter: blur(6px); color: #fff; text-decoration: none; animation: tgPulse 2.8s ease-in-out infinite; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.hero-tg-btn:hover { transform: translateY(-2px); border-color: #2aabee; background: linear-gradient(135deg, rgba(42,171,238,.34), rgba(42,171,238,.1)); }
.hero-tg-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); animation: foShine 3.6s ease-in-out infinite; }
.hero-tg-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2aabee; box-shadow: 0 6px 18px rgba(42,171,238,.45); }
.hero-tg-btn .hero-tg-ic .fa-telegram-plane { color: #fff; font-size: 1.1rem; margin-left: -2px; }
.hero-tg-txt { display: flex; flex-direction: column; line-height: 1.25; }
.hero-tg-txt b { font-size: .92rem; color: #fff; }
.hero-tg-txt small { font-size: .74rem; color: #a9d8f5; }
.hero-tg-btn .hero-tg-arrow { opacity: 1; transform: none; color: #2aabee; font-size: .8rem; margin-left: .3rem; }
.hero-tg-btn:hover .hero-tg-arrow { transform: translateX(4px); }
@keyframes tgPulse { 0%, 100% { box-shadow: 0 10px 26px rgba(42,171,238,.22), 0 0 0 0 rgba(42,171,238,.4); } 50% { box-shadow: 0 10px 26px rgba(42,171,238,.22), 0 0 0 9px rgba(42,171,238,0); } }
.hero-cta-tg { padding: .95rem 1.4rem; font-size: .9rem; color: #fff !important; background: rgba(42,171,238,.14) !important; border: 1px solid rgba(42,171,238,.5) !important; backdrop-filter: blur(6px); transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.hero-cta-tg i { color: #2aabee; font-size: 1rem; }
.hero-cta-tg:hover { background: #2aabee !important; border-color: #2aabee !important; transform: translateY(-1px); }
.hero-cta-tg:hover i { color: #fff; }
@media (max-width: 768px) { .hero-cta-tg { justify-content: center; } }
.vc-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.6rem; }
.vc-bar-item { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(22,22,27,.85); color: var(--text); text-decoration: none; }
.vc-bar-item b { display: block; font-size: .9rem; }
.vc-bar-item small { font-size: .74rem; color: var(--text-muted); }
.vc-bar-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,45,59,.12); color: var(--red); }
.vc-bar-ic.vc-tg { background: #2aabee; color: #fff; }
.vc-bar-link { border-color: rgba(42,171,238,.4); transition: border-color .2s ease, transform .2s ease; }
.vc-bar-link:hover { border-color: #2aabee; transform: translateY(-2px); }
.vc-go { margin-left: auto; color: #2aabee; font-size: .8rem; transition: transform .2s ease; }
.vc-bar-link:hover .vc-go { transform: translateX(3px); }
.vc-grid { columns: 3 260px; column-gap: 1rem; }
.vc-card { position: relative; display: block; width: 100%; margin: 0 0 1rem; padding: 0; break-inside: avoid; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); cursor: zoom-in; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.vc-card img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.vc-card:hover { border-color: rgba(255,45,59,.5); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.vc-card:hover img { transform: scale(1.03); }
.vc-badge { position: absolute; left: .6rem; top: .6rem; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #fff; background: rgba(10,10,14,.75); backdrop-filter: blur(6px); border: 1px solid rgba(34,197,94,.45); }
.vc-badge i { color: #22c55e; }
.vc-zoom { position: absolute; right: .6rem; bottom: .6rem; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--red); opacity: 0; transform: scale(.8); transition: opacity .2s ease, transform .2s ease; }
.vc-card:hover .vc-zoom, .vc-card:focus-visible .vc-zoom { opacity: 1; transform: none; }
.vc-more { text-align: center; margin-top: .6rem; }
.vc-lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 3rem 4.5rem; background: rgba(5,5,8,.92); backdrop-filter: blur(6px); }
.vc-lb[hidden] { display: none; }
.vc-lb img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.vc-lb-x, .vc-lb-nav { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 1rem; transition: background .2s ease; }
.vc-lb-x:hover, .vc-lb-nav:hover { background: var(--red); border-color: var(--red); }
.vc-lb-x { top: 1rem; right: 1rem; }
.vc-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.vc-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.vc-lb-count { position: absolute; bottom: 1.3rem; left: 50%; transform: translateX(-50%); font-size: .8rem; color: var(--text-secondary); }
@media (max-width: 760px) {
.vc-bar { grid-template-columns: 1fr; }
.vc-grid { columns: 2 140px; column-gap: .6rem; }
.vc-card { margin-bottom: .6rem; border-radius: 12px; }
.vc-badge { font-size: .6rem; padding: .2rem .45rem; }
.vc-lb { padding: 3.5rem .6rem 5rem; }
.vc-lb-nav { top: auto; bottom: 1rem; transform: none; }
}
.pr-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pr-rule { position: relative; overflow: hidden; padding: 1.3rem 1.2rem; border-radius: 16px; border: 1px solid var(--border); background: rgba(22,22,27,.85); transition: border-color .25s ease, transform .25s ease; }
.pr-rule:hover { border-color: rgba(255,45,59,.45); transform: translateY(-3px); }
.pr-rule-num { position: absolute; right: .9rem; top: .4rem; font-family: var(--font-display); font-size: 2.8rem; font-weight: 800; color: rgba(255,45,59,.12); line-height: 1; }
.pr-rule-ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,45,59,.12); color: var(--red); margin-bottom: .9rem; }
.pr-rule h3 { font-size: .98rem; margin: 0 0 .45rem; }
.pr-rule p { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--text-secondary); }
.pr-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; position: relative; }
.pr-steps::before { content: ''; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(180deg, var(--red), rgba(255,45,59,.35) 75%, #22c55e); opacity: .6; }
.pr-step { position: relative; display: flex; gap: 1.1rem; padding-bottom: 1rem; }
.pr-step-dot { position: relative; z-index: 1; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: #fff; background: var(--red); box-shadow: 0 0 0 6px rgba(255,45,59,.14), 0 10px 24px rgba(255,45,59,.3); }
.pr-step:last-child .pr-step-dot { background: #16a34a; box-shadow: 0 0 0 6px rgba(34,197,94,.14), 0 10px 24px rgba(34,197,94,.3); }
.pr-step-card { flex: 1; padding: 1.1rem 1.2rem; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card, #16161b); transition: border-color .25s ease; }
.pr-step-card:hover { border-color: rgba(255,45,59,.4); }
.pr-step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.pr-step-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,45,59,.12); color: var(--red); }
.pr-step:last-child .pr-step-ic { background: rgba(34,197,94,.12); color: #22c55e; }
.pr-step-time { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--text-secondary); background: rgba(255,255,255,.05); border: 1px solid var(--border); }
.pr-step-card h3 { font-size: 1rem; margin: 0 0 .35rem; }
.pr-step-card p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--text-secondary); }
.pr-step-card a { color: var(--red); font-weight: 600; }
.pr-notes { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .pr-rules, .pr-notes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
.pr-rules, .pr-notes { grid-template-columns: 1fr; }
.pr-steps::before { left: 19px; }
.pr-step-dot { width: 40px; height: 40px; }
.pr-step { gap: .8rem; }
}
.acc-edit { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text-secondary); font: inherit; font-size: .72rem; font-weight: 600; vertical-align: middle; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.acc-edit i { font-size: .65rem; }
.acc-edit:hover, .acc-edit[aria-expanded="true"] { color: #fff; border-color: rgba(42,171,238,.6); background: rgba(42,171,238,.15); }
.acc-flash { margin: 0 0 1rem; }
.acc-tg { margin: 0 0 1.4rem; padding: 1.1rem 1.2rem; border-radius: 16px; border: 1px solid rgba(42,171,238,.4); background: linear-gradient(135deg, rgba(42,171,238,.1), rgba(255,255,255,.015) 70%); animation: perkIn .22s ease; }
.acc-tg[hidden] { display: none; }
.acc-tg-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.acc-tg-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2aabee; color: #fff; }
.acc-tg-head strong { display: block; font-size: .95rem; }
.acc-tg-head small { font-size: .76rem; color: var(--text-muted); }
.acc-tg-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: .8rem; align-items: end; }
.acc-tg-fields label { display: flex; flex-direction: column; gap: .35rem; font-size: .76rem; font-weight: 600; color: var(--text-secondary); }
.acc-tg-fields .ctc-input { min-height: 42px; }
.acc-tg-actions { display: flex; gap: .5rem; }
.acc-tg-actions .adm-btn { height: 42px; }
@media (max-width: 760px) { .acc-tg-fields { grid-template-columns: 1fr; } .acc-tg-actions .btn { flex: 1; justify-content: center; } }
.acc-order { position: relative; }
.acc-del { position: absolute; top: .7rem; right: .7rem; margin: 0; z-index: 1; }
.acc-del button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text-muted); cursor: pointer; font-size: .8rem; display: flex; align-items: center; justify-content: center; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease; }
.acc-del button:hover { color: #fff; background: var(--red); border-color: var(--red); transform: rotate(90deg); }
.acc-order.is-pending .acc-order-top { padding-right: 2.2rem; }
.acc-expire { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; color: #fbbf24; }
.tgh { margin-top: .55rem; display: flex; flex-direction: column; gap: .5rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.tgh-warn { display: flex; gap: .5rem; margin: 0; padding: .6rem .75rem; border-radius: 10px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); font-size: .78rem; line-height: 1.5; color: var(--text-secondary); }
.tgh-warn i { color: #f59e0b; margin-top: .2rem; }
.tgh-warn b { color: #fbbf24; }
.tgh-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.tgh-how { flex: 1; min-width: 200px; font-size: .78rem; color: var(--text-secondary); }
.tgh-how summary { cursor: pointer; list-style: none; color: #7cc8f5; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.tgh-how summary::-webkit-details-marker { display: none; }
.tgh-how summary:hover { color: #2aabee; }
.tgh-how ol { margin: .55rem 0 0; padding: .7rem .8rem .7rem 1.9rem; border-radius: 10px; background: rgba(42,171,238,.07); border: 1px solid rgba(42,171,238,.25); line-height: 1.55; }
.tgh-how li + li { margin-top: .3rem; }
.tgh-how b { color: var(--text); }
.tgh-how code { font-size: .78rem; padding: .05rem .35rem; border-radius: 5px; background: rgba(0,0,0,.35); color: #fff; }
.tgh-check { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 600; color: #fff; background: rgba(42,171,238,.18); border: 1px solid rgba(42,171,238,.5); text-decoration: none; white-space: nowrap; }
.tgh-check[hidden] { display: none; }
.tgh-check:hover { background: #2aabee; }
.acc-tg-fields label .tgh { margin-top: .2rem; }
.tgh-how ol { all: unset; }
.tgh-body { display: grid; grid-template-columns: 1fr 190px; gap: .9rem; margin-top: .6rem; padding: .9rem; border-radius: 12px; background: rgba(42,171,238,.07); border: 1px solid rgba(42,171,238,.25); animation: perkIn .22s ease; }
.tgh-steps { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: .75rem; }
.tgh-steps::before { content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(180deg, #2aabee, #22c55e); opacity: .45; }
.tgh-steps li { position: relative; display: flex; gap: .65rem; align-items: flex-start; }
.tgh-n { position: relative; z-index: 1; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2aabee; color: #fff; font-size: .7rem; box-shadow: 0 0 0 4px rgba(42,171,238,.15); }
.tgh-n--ok { background: #16a34a; box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.tgh-steps b { display: block; font-size: .8rem; color: var(--text); }
.tgh-steps small { display: block; font-size: .72rem; color: var(--text-muted); line-height: 1.45; }
.tgh-mock { align-self: center; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #17212b; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 26px rgba(0,0,0,.35); font-size: .7rem; }
.tgh-mock-title { padding: .5rem .7rem; font-weight: 700; color: #fff; background: #232e3c; font-size: .74rem; }
.tgh-mock-row { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; color: #cfd8e3; border-top: 1px solid rgba(255,255,255,.05); }
.tgh-mock-row > i:first-child { width: 14px; color: #6d7f92; text-align: center; }
.tgh-mock-row > span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tgh-mock-row small { font-size: .62rem; color: #6d7f92; }
.tgh-mock-row.is-hl { background: rgba(42,171,238,.18); box-shadow: inset 3px 0 0 #2aabee; }
.tgh-mock-row.is-hl > i:first-child, .tgh-mock-row.is-hl b { color: #7cc8f5; }
.tgh-mock-go { margin-left: auto; font-size: .6rem; color: #7cc8f5; }
@media (max-width: 520px) { .tgh-body { grid-template-columns: 1fr; } .tgh-mock { max-width: 240px; } }
.tgh-body { grid-template-columns: 1fr; }
.tgh-mock { order: -1; width: 100%; max-width: 280px; justify-self: center; }
.tgh-row { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
.tgh-check { align-self: flex-start; }
.tgh-how { width: 100%; min-width: 0; }
.tgh-row { flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: nowrap; }
.tgh-open { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: none; color: #7cc8f5; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tgh-open:hover { color: #2aabee; text-decoration: underline; }
.tgh-check { align-self: auto; padding: .25rem .6rem; font-size: .72rem; }
.tgh-warn { font-size: .76rem; padding: .5rem .7rem; }
.tgh-dlg { width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid rgba(42,171,238,.35); border-radius: 18px; background: #14171d; color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: auto; }
.tgh-dlg[open] { animation: perkIn .2s ease; }
.tgh-dlg::backdrop { background: rgba(5,5,8,.7); backdrop-filter: blur(4px); }
.tgh-dlg-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.tgh-dlg-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2aabee; color: #fff; }
.tgh-dlg-head strong { display: block; font-size: .98rem; }
.tgh-dlg-head small { font-size: .76rem; color: var(--text-muted); }
.tgh-close { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; }
.tgh-close:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.tgh-dlg .tgh-body { display: grid; grid-template-columns: 200px 1fr; gap: 1.1rem; align-items: center; margin: 0; padding: 1.1rem; border: 0; border-radius: 0; background: none; animation: none; }
.tgh-dlg .tgh-mock { order: 0; max-width: none; }
.tgh-dlg .tgh-n { font-family: var(--font-display); font-weight: 800; font-size: .78rem; }
.tgh-dlg .tgh-steps code { font-size: .74rem; padding: .05rem .35rem; border-radius: 5px; background: rgba(0,0,0,.35); color: #fff; }
.tgh-ok { display: flex; width: calc(100% - 2.2rem); margin: 0 1.1rem 1.1rem; justify-content: center; }
@media (max-width: 520px) { .tgh-dlg .tgh-body { grid-template-columns: 1fr; } .tgh-dlg .tgh-mock { max-width: 260px; justify-self: center; } }
.tgh-dlg { margin: auto; position: fixed; inset: 0; height: fit-content; }
html { scroll-padding-top: 96px; }
#transporteurs { scroll-margin-top: 110px; }
.sv-toggle { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.sv-toggle .sv-i { font-size: .72rem; color: var(--text-muted); transition: color .2s ease, transform .2s ease; }
.sv-toggle:hover { color: var(--text); }
.sv-toggle:hover .sv-i, .service-row.is-open .sv-i { color: #60a5fa; }
.service-row.is-open { background: rgba(96,165,250,.05); }
.sv-fiche { margin: -.2rem 0 .5rem; padding: .75rem .9rem; border-radius: 12px; border: 1px solid rgba(96,165,250,.28); background: rgba(96,165,250,.06); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; animation: perkIn .2s ease; }
.sv-fiche[hidden] { display: none; }
.sv-fiche-lbl { font-size: .74rem; font-weight: 700; color: var(--text-secondary); }
.sv-etats { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.sv-etat { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.sv-etat.is-ok { color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); }
.sv-etat.is-no { color: var(--text-muted); background: rgba(255,255,255,.03); border: 1px solid var(--border); text-decoration: line-through; opacity: .7; }
.sv-etat i { font-size: .65rem; }
.sv-fiche-txt { flex-basis: 100%; margin: .15rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--text-secondary); white-space: pre-line; }
.tf-cons-f { display: flex; flex-direction: column; gap: .35rem; }
.tf-etats { display: flex; gap: 1rem; flex-wrap: wrap; }
.sv-fiche { flex-direction: column; align-items: stretch; gap: .7rem; }
.sv-fiche-lbl { display: inline-flex; align-items: center; gap: .4rem; }
.sv-fiche-lbl i { color: #60a5fa; }
.sv-track { list-style: none; margin: 0; padding: 0 .3rem; display: flex; justify-content: space-between; position: relative; }
.sv-track::before { content: ''; position: absolute; left: 12%; right: 12%; top: 15px; height: 2px; background: linear-gradient(90deg, #22c55e, #60a5fa, #22c55e); opacity: .55; }
.sv-track li { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; color: var(--text); }
.sv-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; color: #fff; background: #16a34a; box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.sv-track li.is-off { color: var(--text-muted); font-weight: 500; }
.sv-track li.is-off .sv-dot { background: #2a2a33; color: var(--text-muted); box-shadow: none; }
.sv-track { justify-content: center; gap: 0; }
.sv-track li { flex: 0 1 120px; text-align: center; line-height: 1.25; }
.sv-track::before { left: 50%; right: auto; width: 0; }
.sv-track li + li::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: linear-gradient(90deg, #22c55e, #60a5fa); opacity: .55; z-index: -1; }
.sv-track li.is-retour .sv-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.18); }
.sv-track li.is-retour + li::before, .sv-track li + li.is-retour::before { background: linear-gradient(90deg, #22c55e, #f59e0b); }
.sv-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; position: relative; }
.sv-events li { position: relative; display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .7rem; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); font-size: .8rem; line-height: 1.45; color: var(--text); }
.sv-ev-dot { width: 9px; height: 9px; flex-shrink: 0; margin-top: .35rem; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.2); }
.sv-events li:first-child .sv-ev-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.sv-fiche { display: block; padding: .95rem 1rem 1rem; margin: -.15rem 0 .6rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(120% 100% at 0% 0%, rgba(96,165,250,.12), transparent 55%), rgba(12,14,19,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.svf-head { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; }
.svf-ic { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(96,165,250,.15); color: #60a5fa; font-size: .72rem; }
.svf-title { font-size: .8rem; font-weight: 700; color: var(--text); }
.svf-count { margin-left: auto; padding: .15rem .5rem; border-radius: 999px; font-size: .66rem; font-weight: 700; color: var(--text-muted); background: rgba(255,255,255,.05); border: 1px solid var(--border); }
.svf-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); position: relative; }
.svf-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: 0 .2rem; }
.svf-step + .svf-step::before { content: ''; position: absolute; top: 15px; right: calc(50% + 19px); width: calc(100% - 38px); height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); }
.svf-step + .svf-step::after { content: ''; position: absolute; top: 15px; right: calc(50% + 19px); width: calc(100% - 38px); height: 3px; border-radius: 3px; background: linear-gradient(90deg, #22c55e, #4ade80); transform-origin: left; transform: scaleX(0); }
.sv-fiche:not([hidden]) .svf-step + .svf-step::after { animation: svfFill .35s ease forwards; animation-delay: calc(var(--i) * .28s - .1s); }
.svf-step.is-retour::after { background: linear-gradient(90deg, #22c55e, #f59e0b) !important; }
.svf-dot { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; color: #fff; background: #16a34a; box-shadow: 0 4px 14px rgba(34,197,94,.35); margin-bottom: .35rem; }
.sv-fiche:not([hidden]) .svf-dot { animation: svfPop .4s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--i) * .28s); }
.svf-step.is-retour .svf-dot { background: #f59e0b; box-shadow: 0 4px 14px rgba(245,158,11,.4); }
.svf-step.is-last .svf-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; color: rgba(34,197,94,.55); animation: svfRing 1.8s ease-out infinite; animation-delay: 1s; }
.svf-step.is-last.is-retour .svf-dot::after { color: rgba(245,158,11,.6); }
.svf-step b { font-size: .8rem; color: var(--text); }
.svf-step small { font-size: .66rem; line-height: 1.3; color: var(--text-muted); max-width: 110px; }
.svf-events { list-style: none; margin: .9rem 0 0; padding: 0 0 0 .4rem; position: relative; display: flex; flex-direction: column; gap: .5rem; }
.svf-track + .svf-events { padding-top: .9rem; border-top: 1px dashed rgba(255,255,255,.08); }
.svf-events::before { content: ''; position: absolute; left: calc(.4rem + 4px); top: .5rem; bottom: .5rem; width: 2px; background: rgba(96,165,250,.25); }
.svf-track + .svf-events::before { top: 1.4rem; }
.svf-events li { position: relative; display: flex; gap: .7rem; align-items: flex-start; font-size: .8rem; line-height: 1.5; color: var(--text); }
.sv-fiche:not([hidden]) .svf-events li { animation: perkIn .3s ease both; animation-delay: calc(var(--i) * .15s); }
.svf-ev-dot { position: relative; z-index: 1; width: 10px; height: 10px; flex-shrink: 0; margin-top: .38rem; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.2); }
.svf-events li:first-child .svf-ev-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
@keyframes svfPop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes svfFill { to { transform: scaleX(1); } }
@keyframes svfRing { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.tp-hero > * { animation: tpUp .7s cubic-bezier(.2,.8,.2,1) both; }
.tp-hero > *:nth-child(2) { animation-delay: .08s; }
.tp-hero > *:nth-child(3) { animation-delay: .16s; }
.tp-hero .section-title { background: linear-gradient(90deg, #fff 0%, #fff 40%, #ff6b75 50%, #fff 60%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tpUp .7s .08s cubic-bezier(.2,.8,.2,1) both, tpShine 5s 1s ease-in-out infinite; }
@keyframes tpUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tpShine { 0%, 60% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
.tp-card { position: relative; transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease; transition-delay: calc(var(--d, 0) * .1s); transform-style: preserve-3d; will-change: transform; }
.tp-card.fade-in:not(.visible) { opacity: 0; transform: translateY(34px) scale(.97); }
.tp-card.visible { transition-delay: 0s; }
.tp-card:hover { border-color: rgba(255,45,59,.35); box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,45,59,.12); transition: transform .15s ease-out, border-color .3s ease, box-shadow .3s ease; }
.tp-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,45,59,.13), transparent 45%); z-index: 0; }
.tp-card:hover .tp-glow { opacity: 1; }
.tp-card > *:not(.tp-glow) { position: relative; z-index: 1; }
.tp-card .transport-logo { transition: transform .35s cubic-bezier(.2,1.4,.4,1); }
.tp-card:hover .transport-logo { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.tp-card .service-row { opacity: 0; transform: translateX(-10px); transition: opacity .45s ease, transform .45s ease, background .2s ease, padding .2s ease; }
.tp-card.visible .service-row { opacity: 1; transform: none; transition-delay: calc(.15s + var(--r, 0) * .05s), calc(.15s + var(--r, 0) * .05s), 0s, 0s; }
.tp-card .service-price { transition: transform .2s ease, color .2s ease; }
.tp-card .service-row:hover .service-price { transform: scale(1.08); color: #fff; }
.cmp-tile { position: relative; overflow: hidden; }
.cmp-tile::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent); transform: skewX(-20deg); transition: left .5s ease; pointer-events: none; }
.cmp-tile:hover::after { left: 130%; }
#transporteurs .tp-card.fade-in { opacity: 1; transform: none; }
#transporteurs .tp-card.visible { animation: tpCard .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d, 0) * .12s); }
@keyframes tpCard { from { opacity: 0; transform: translateY(46px) scale(.94) rotateX(8deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
#transporteurs .tp-card .service-row { opacity: 1; transform: none; }
#transporteurs .tp-card.visible .service-row { animation: tpRow .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d, 0) * .12s + .25s + var(--r, 0) * .06s); }
@keyframes tpRow { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
#transporteurs .tp-card { transition: transform .18s ease-out, border-color .3s ease, box-shadow .3s ease; }
#transporteurs .tp-card:hover { border-color: transparent; box-shadow: 0 34px 70px rgba(0,0,0,.55), 0 0 40px rgba(255,45,59,.15); }
#transporteurs .tp-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ang, 0deg), rgba(255,45,59,0) 0deg, #ff2d3b 70deg, rgba(255,45,59,0) 140deg, rgba(255,45,59,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 2; animation: tpSpin 3s linear infinite; }
#transporteurs .tp-card:hover::before { opacity: 1; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes tpSpin { to { --ang: 360deg; } }
#transporteurs .tp-glow { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255,45,59,.22), transparent 50%); }
#transporteurs .tp-card:hover .transport-logo { transform: translateY(-4px) rotate(-6deg) scale(1.12); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
#transporteurs .tp-card .service-row:hover { background: rgba(255,45,59,.06); }
#transporteurs .tp-card.visible { animation-fill-mode: backwards; }
#transporteurs .tp-card.visible .service-row { animation-fill-mode: backwards; }
#transporteurs .tp-card::before { inset: 0; }
.mx-dot, .mx-ring, .mx-glow { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .3s ease; }
body.mx-on .mx-dot, body.mx-on .mx-ring, body.mx-on .mx-glow { opacity: 1; }
.mx-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(255,45,59,.8); }
.mx-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid rgba(255,45,59,.55); transition: opacity .3s ease, width .25s ease, height .25s ease, margin .25s ease, background .25s ease, border-color .25s ease; }
.mx-ring.is-hover { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(255,45,59,.08); border-color: rgba(255,45,59,.8); }
.mx-ring.is-text { width: 4px; height: 26px; margin: -13px 0 0 -2px; border-radius: 2px; background: rgba(255,45,59,.5); border-color: transparent; }
.mx-ring.is-down { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: rgba(255,45,59,.25); }
.mx-glow { z-index: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,45,59,.08), rgba(255,45,59,.03) 40%, transparent 70%); }
body.mx-on .mx-glow { opacity: 1; }
.mx-wave { position: fixed; z-index: 9998; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid rgba(255,45,59,.7); pointer-events: none; animation: mxWave .6s ease-out forwards; }
@keyframes mxWave { to { transform: scale(7); opacity: 0; } }
.mx-mag { transition: translate .25s cubic-bezier(.2,.8,.2,1), transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mx-glow { z-index: 9990; mix-blend-mode: screen; }
.mx-glow { width: 460px; height: 460px; margin: -230px 0 0 -230px; background: radial-gradient(circle, rgba(255,45,59,.05), rgba(255,45,59,.018) 40%, transparent 70%); }
.tp-glow { display: none !important; }
#transporteurs .tp-card:hover { box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.acc-cfm { margin: auto; position: fixed; inset: 0; height: fit-content; width: min(400px, calc(100vw - 2rem)); padding: 1.6rem 1.5rem 1.3rem; border: 1px solid rgba(255,45,59,.35); border-radius: 20px; background: #14151a; color: var(--text); text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.acc-cfm[open] { animation: accCfmIn .22s cubic-bezier(.2,1.2,.4,1); }
.acc-cfm::backdrop { background: rgba(5,5,8,.7); backdrop-filter: blur(4px); }
@keyframes accCfmIn { from { opacity: 0; transform: scale(.92) translateY(8px); } to { opacity: 1; transform: none; } }
.acc-cfm-ic { width: 52px; height: 52px; margin: 0 auto .9rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--red); background: rgba(255,45,59,.12); box-shadow: 0 0 0 6px rgba(255,45,59,.06); }
.acc-cfm h3 { margin: 0 0 .8rem; font-size: 1.15rem; }
.acc-cfm-order { margin: 0 0 .8rem; padding: .7rem .8rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); display: flex; flex-direction: column; gap: .25rem; }
.acc-cfm-order b { font-size: .88rem; }
.acc-cfm-order span { font-size: .78rem; color: var(--text-muted); }
.acc-cfm-order code { font-family: ui-monospace, monospace; color: var(--text-secondary); }
.acc-cfm-txt { margin: 0 0 1.2rem; font-size: .82rem; line-height: 1.55; color: var(--text-secondary); }
.acc-cfm-btns { display: grid; grid-template-columns: 1fr 1.3fr; gap: .6rem; }
.acc-cfm-btns .adm-btn, .acc-cfm-btns .btn { height: 44px; justify-content: center; }
.bx-dlg { margin: auto; position: fixed; inset: 0; height: fit-content; width: min(400px, calc(100vw - 2rem)); padding: 1.6rem 1.5rem 1.3rem; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: #14151a; color: var(--text); text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.bx-dlg[open] { animation: accCfmIn .22s cubic-bezier(.2,1.2,.4,1); }
.bx-dlg::backdrop { background: rgba(5,5,8,.7); backdrop-filter: blur(4px); }
.bx-dlg-ic { width: 52px; height: 52px; margin: 0 auto .9rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #60a5fa; background: rgba(96,165,250,.12); box-shadow: 0 0 0 6px rgba(96,165,250,.06); }
.bx-dlg.is-danger { border-color: rgba(255,45,59,.35); }
.bx-dlg.is-danger .bx-dlg-ic { color: var(--red); background: rgba(255,45,59,.12); box-shadow: 0 0 0 6px rgba(255,45,59,.06); }
.bx-dlg-title { margin: 0 0 .5rem; font-size: 1.12rem; }
.bx-dlg-text { margin: 0 0 1.3rem; font-size: .86rem; line-height: 1.55; color: var(--text-secondary); }
.bx-dlg-btns { display: grid; grid-template-columns: 1fr 1.3fr; gap: .6rem; }
.bx-dlg.is-alert .bx-dlg-btns { grid-template-columns: 1fr; }
.bx-dlg-btns .adm-btn, .bx-dlg-btns .btn { height: 44px; justify-content: center; }
.bx-dlg-btns [hidden] { display: none; }
.acc-help-btn { display: inline-flex; align-items: center; gap: .45rem; padding: 0 1rem; min-height: 40px; border-radius: 10px; border: 1px solid rgba(96,165,250,.45); background: rgba(96,165,250,.1); color: #93c5fd; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.acc-help-btn:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.acc-aide { width: min(460px, calc(100vw - 2rem)); text-align: left; }
.acc-aide h3, .acc-aide .acc-cfm-ic { text-align: center; }
.acc-aide-ic { color: #60a5fa; background: rgba(96,165,250,.12); box-shadow: 0 0 0 6px rgba(96,165,250,.06); }
.acc-aide-ic.is-ok { color: #22c55e; background: rgba(34,197,94,.12); box-shadow: 0 0 0 6px rgba(34,197,94,.06); }
.acc-aide .acc-cfm-order { text-align: center; }
.acc-aide-lbl { margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; color: var(--text-secondary); }
.acc-aide-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-bottom: .7rem; }
.acc-aide-chips label { cursor: pointer; }
.acc-aide-chips input { position: absolute; opacity: 0; pointer-events: none; }
.acc-aide-chips span { display: flex; align-items: center; gap: .45rem; height: 100%; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.03); font-size: .78rem; font-weight: 600; color: var(--text-secondary); transition: border-color .2s ease, background .2s ease, color .2s ease; }
.acc-aide-chips span i { color: #60a5fa; }
.acc-aide-chips label:hover span { border-color: rgba(96,165,250,.45); }
.acc-aide-chips input:checked + span { border-color: #2563eb; background: rgba(37,99,235,.15); color: #fff; }
.acc-aide-chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(96,165,250,.35); }
.acc-aide-txt { width: 100%; min-height: 70px; resize: vertical; font-size: .84rem; margin-bottom: .6rem; }
.acc-aide-note { margin: 0 0 1rem; font-size: .76rem; color: var(--text-muted); text-align: center; }
.acc-aide-note i { color: #2aabee; margin-right: .25rem; }
.acc-aide-ok { text-align: center; }
.acc-aide-ok .btn { width: 100%; justify-content: center; height: 44px; }
@media (max-width: 480px) { .acc-aide-chips { grid-template-columns: 1fr; } }
.acc-aide-chips label { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.acc-aide-chips span { color: var(--text); transition: border-color .12s ease, background .12s ease, color .12s ease, transform .08s ease; }
.acc-aide-chips label:active span { transform: scale(.98); }
@media (hover: none) { .acc-aide-chips label:hover span { border-color: var(--border); } }
.acc-aide-chips input:checked + span { border-color: #2563eb; background: rgba(37,99,235,.18); color: #fff; }
.acc-aide-chips span { transition: none; }
.acc-aide-chips label:active span { transform: none; }
.acc-aide-chips input:focus-visible + span { box-shadow: none; }
.acc-aide-chips input:checked:focus-visible + span { outline: 2px solid rgba(96,165,250,.6); outline-offset: 2px; }
.acc-aide-delai { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 .7rem; padding: .7rem .8rem; border-radius: 10px; border: 1px solid rgba(255,45,59,.5); background: rgba(255,45,59,.1); color: #ff6b75; font-size: .78rem; line-height: 1.5; }
.acc-aide-delai[hidden] { display: none; }
.acc-aide-delai i { margin-top: .2rem; }
.acc-aide-delai b { color: #fff; }
.recap-note { margin: 0 0 .9rem; }
.recap-note-btn { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .8rem 1rem; border-radius: 12px; border: 1px dashed var(--border); background: rgba(255,255,255,.02); color: var(--text); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.recap-note-btn i { color: #60a5fa; }
.recap-note-btn small { margin-left: auto; font-size: .72rem; font-weight: 500; color: var(--text-muted); }
.recap-note-btn:hover, .recap-note.is-open .recap-note-btn { border-color: rgba(96,165,250,.5); }
.recap-note-body { margin-top: .5rem; }
.recap-note-body[hidden] { display: none; }
.recap-note-body textarea { width: 100%; min-height: 76px; resize: vertical; }
.recap-note-etat { display: block; margin-top: .35rem; font-size: .74rem; color: var(--text-muted); }
.sec-bots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; margin: .2rem 0 1.1rem; }
.sec-bot { padding: .8rem .9rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.02); }
.sec-bot h3 { display: flex; justify-content: space-between; gap: .5rem; margin: 0 0 .5rem; font-size: .86rem; }
.sec-bot h3 small { font-weight: 500; color: var(--text-muted); }
.sec-prin { font-size: .78rem; color: var(--text-muted); margin-bottom: .45rem; }
.sec-prin b { color: #6ee7a0; }
.sec-liste { list-style: none; margin: 0; padding: 0; }
.sec-liste li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-top: 1px solid rgba(255,255,255,.05); font-size: .8rem; }
.sec-liste li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-liste li small { color: var(--text-muted); }
.sec-vide { font-size: .78rem; color: #ffb547; }
.sec-ajout { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: .6rem; }
@media (max-width: 640px) { .sec-ajout { grid-template-columns: 1fr; } }
.pay-totaux { display: flex !important; flex-direction: column; gap: .15rem; }
.pay-totaux span { display: flex; justify-content: space-between; gap: .6rem; white-space: nowrap; }
.pay-totaux b { font-variant-numeric: tabular-nums; }
.pay-liste li { grid-template-columns: 3.4rem minmax(0, 1fr) auto auto !important; }
.pay-suppr { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,93,93,.35); background: rgba(255,93,93,.08); color: #ff6b6b; cursor: pointer; font-size: .72rem; }
.pay-suppr:hover { background: rgba(255,93,93,.2); }
.pay-ajout { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
@media (max-width: 640px) { .pay-ajout { grid-template-columns: 1fr; } }
.pay-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .9rem; margin: 0 0 1.1rem; }
.pay-bloc { padding: .8rem .9rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.02); min-width: 0; }
.pay-bloc h3 { margin: 0 0 .6rem; font-size: .86rem; }
.pay-bloc h3 i { color: #60a5fa; margin-right: .3rem; }
.pay-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; max-height: 320px; overflow: auto; }
.pay-liste li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .3rem; border-top: 1px solid rgba(255,255,255,.05); font-size: .8rem; }
.pay-liste li:first-child { border-top: 0; }
.pay-liste li > span:nth-child(2), .pay-liste li > a.mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-liste small { display: block; color: var(--text-muted); font-size: .7rem; }
.pay-liste em { font-style: normal; color: #8fd9a8; }
.pay-liste a { color: var(--text); }
.pay-liste a i { font-size: .62rem; color: var(--text-muted); }
.pay-liste .pay-coin { display: inline-flex; justify-content: center; padding: .15rem .35rem; border-radius: 6px; font-size: .68rem; font-weight: 700; background: rgba(96,165,250,.14); color: #93c5fd; }
.pub-jr { list-style: none; margin: .6rem 0 0; padding: .35rem; max-height: 320px; overflow: auto; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07); }
.pub-jr li { display: grid; grid-template-columns: 3rem 22px 1fr; align-items: start; gap: .55rem; padding: .45rem .5rem; border-radius: 8px; font-size: .8rem; line-height: 1.45; }
.pub-jr li + li { border-top: 1px solid rgba(255,255,255,.04); }
.pub-jr li:hover { background: rgba(255,255,255,.03); }
.pub-jr time { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: .74rem; padding-top: .1rem; }
.pub-jr i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: .6rem; background: rgba(154,164,178,.15); color: #9aa4b2; }
.pub-jr span { color: var(--text); word-break: break-word; }
.pub-jr-ok i { background: rgba(61,220,132,.15); color: #3ddc84; }
.pub-jr-err i { background: rgba(255,93,93,.15); color: #ff6b6b; }
.pub-jr-err span { color: #ffb3b3; }
.pub-jr-warn i { background: rgba(255,181,71,.15); color: #ffb547; }
.pub-jr-dm i { background: rgba(96,165,250,.15); color: #60a5fa; }
.pub-jr-wait i { background: rgba(167,139,250,.15); color: #a78bfa; }
.pub-jr-n { margin-left: .2rem; padding: 0 .35rem; border-radius: 999px; font-size: .68rem; background: rgba(255,255,255,.08); color: var(--text-muted); }
.pub-filtre { margin: .2rem 0 .6rem; }
.pub-c[hidden] { display: none; }
.pub-titre { align-items: center !important; }
.pub-av { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.06); }
.pub-av--ini { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; color: #fff; background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.pub-c.is-off .pub-av { filter: grayscale(1); }
.pub-go { flex: none; display: inline-flex; align-items: center; gap: .35rem; height: 38px; padding: 0 .8rem; border-radius: 10px; border: 1px solid rgba(61,220,132,.4); background: rgba(61,220,132,.1); color: #6ee7a0; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.pub-go:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 560px) { .pub-go span { display: none; } }
.pub-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; }
.pub-barre .btn:disabled { opacity: .45; }
#pubRelance { background: rgba(96,165,250,.12); color: #93c5fd; border: 1px solid rgba(96,165,250,.45); }
#pubRelance:hover:not(:disabled) { background: rgba(96,165,250,.22); color: #fff; }
#pubRelance i { color: inherit; }
#pubAjout { background: rgba(61,220,132,.1); color: #6ee7a0; border: 1px dashed rgba(61,220,132,.45); }
#pubAjout:hover { background: rgba(61,220,132,.2); color: #fff; }
#pubAjout i { color: inherit; }
.pub-live { font-size: .74rem; color: #6ee7a0; }
.pub-live i { font-size: .5rem; vertical-align: middle; }
.pub-live.is-off { color: var(--text-muted); }
.pub-msg { font-size: .8rem; }
.pub-msg.is-ok { color: #6ee7a0; }
.pub-msg.is-ko { color: #ff7a7a; }
.pub-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; margin-bottom: .55rem; font-size: .92rem; }
.pub-titre span { color: #60a5fa; font-size: .82rem; }
.pub-titre small { margin-left: auto; font-size: .72rem; color: var(--text-muted); }
.pub-plan { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 12px; border: 1px solid rgba(61,220,132,.25); background: rgba(61,220,132,.05); }
.pub-plan-t { display: block; margin-bottom: .45rem; font-size: .8rem; font-weight: 700; color: #8fd9a8; }
.pub-plan-t small { font-weight: 500; color: var(--text-muted); }
.pub-plan-l { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .6rem; align-items: baseline; padding: .25rem 0; font-size: .82rem; border-top: 1px solid rgba(255,255,255,.05); }
.pub-plan-l:first-of-type { border-top: 0; }
.pub-plan-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-plan-l small { color: var(--text-muted); font-size: .72rem; }
.pub-canaux { display: grid; gap: .7rem; margin: .4rem 0 .6rem; }
.pub-c { padding: .8rem .9rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.02); }
.pub-c.is-off { opacity: .55; }
.pub-c-top { display: flex; align-items: center; gap: .6rem; }
.pub-cible { flex: 1; min-width: 0; }
.pub-suppr { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,93,93,.35); background: rgba(255,93,93,.08); color: #ff6b6b; cursor: pointer; }
.pub-sw { position: relative; flex: none; width: 40px; height: 22px; cursor: pointer; }
.pub-sw input { position: absolute; opacity: 0; }
.pub-sw span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.12); transition: background .15s; }
.pub-sw span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.pub-sw input:checked + span { background: #22a559; }
.pub-sw input:checked + span::after { transform: translateX(18px); }
.pub-c-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-top: .7rem; }
.pub-c-grid label, .pub-liens { display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; color: var(--text-muted); }
.pub-liens { margin-top: .6rem; }
.pub-delai { display: flex; align-items: center; gap: .3rem; color: var(--text-muted); }
.pub-delai input { width: 4.2rem; padding-left: .5rem; padding-right: .3rem; }
.pub-chk { flex-direction: row !important; align-items: center; gap: .45rem !important; font-size: .82rem !important; color: var(--text) !important; cursor: pointer; }
.pub-etat { margin-top: .6rem; font-size: .76rem; color: var(--text-muted); }
.pub-etat--fatal, .pub-etat--error { color: #ff7a7a; }
.pub-etat--ok, .pub-etat--waiting { color: #8fd9a8; }
.pub-dm { margin: .2rem 0 1rem; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--border); }
.pub-dm summary { cursor: pointer; font-weight: 600; }
.acc-aide::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5,5,8,.82); }
.deja-suivi { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1rem; padding: .75rem .9rem; border-radius: 12px; border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.08); animation: perkIn .25s ease; }
.deja-suivi[hidden] { display: none; }
.deja-suivi > i { color: #f59e0b; margin-top: .2rem; }
.deja-suivi strong { display: block; font-size: .84rem; color: #fbbf24; margin-bottom: .3rem; }
.deja-suivi ul { list-style: none; margin: 0 0 .3rem; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.deja-suivi li { font-size: .78rem; color: var(--text-secondary); }
.deja-suivi a { font-family: ui-monospace, monospace; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.deja-suivi small { font-size: .72rem; color: var(--text-muted); }
.pay-coin-meta { display: flex; align-items: center; gap: .3rem; margin-top: .15rem; font-size: .7rem; color: var(--text-muted); }
.pay-coin-meta i { font-size: .62rem; }
.pay-coin-meta.is-warn { color: #fbbf24; }
.pay-coin-meta[hidden] { display: none; }
.pay-coin.is-min, .pay-coin:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.6); }
.pay-coin.is-min .pay-coin-go, .pay-coin.is-min .pay-coin-badge { display: none; }
.pay-chain { margin-top: .9rem; padding: .8rem .9rem; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 12px; background: rgba(255,255,255,.025); }
.pay-chain[hidden] { display: none; }
.pay-chain-head { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: var(--text-muted); }
.pay-chain-head i { margin-right: .3rem; opacity: .8; }
.pay-chain-head strong { color: var(--text, #fff); font-size: .95rem; font-variant-numeric: tabular-nums; }
.pay-chain-bar { height: 6px; margin: .55rem 0 .45rem; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.pay-chain-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width .6s ease; }
.pay-chain.is-ok .pay-chain-bar i { background: linear-gradient(90deg, #16a34a, #4ade80); }
.pay-chain-sub { margin: 0; font-size: .75rem; color: var(--text-muted); }
.pay-chain-tx { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-size: .75rem; color: var(--text-muted); text-decoration: none; }
.pay-chain-tx:hover { color: var(--text, #fff); }
.pay-chain-tx[hidden] { display: none; }
.pay-chain-tx i { font-size: .65rem; }
.selfdep { position: relative; display: flex; align-items: center; gap: .85rem; margin: 0 1rem 1rem; padding: .95rem 1rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.02); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.selfdep:hover { border-color: rgba(255,255,255,.16); }
.selfdep input { position: absolute; opacity: 0; pointer-events: none; }
.selfdep-check { width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px; border: 2px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; transition: background .15s ease, border-color .15s ease; }
.selfdep-check i { font-size: .7rem; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease; }
.selfdep input:checked + .selfdep-check { background: var(--accent); border-color: var(--accent); }
.selfdep input:checked + .selfdep-check i { opacity: 1; transform: scale(1); }
.selfdep input:focus-visible + .selfdep-check { box-shadow: 0 0 0 3px rgba(255,71,87,.35); }
.selfdep-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.selfdep-txt strong { font-size: .92rem; }
.selfdep-txt small { font-size: .74rem; color: var(--text-muted); }
.selfdep-ic { margin-left: auto; color: var(--text-muted); font-size: 1.05rem; }
.selfdep.is-on { border-color: rgba(255,71,87,.45); background: rgba(255,71,87,.06); }
.selfdep.is-on .selfdep-ic { color: var(--accent); }
.selfdep-note { display: none; align-items: flex-start; gap: .4rem; margin-top: .45rem; padding: .5rem .65rem; border-radius: 9px; background: rgba(255,71,87,.1); color: #fecdd3; font-size: .78rem; line-height: 1.4; }
.selfdep-note i { margin-top: .15rem; font-size: .7rem; color: var(--accent); }
.selfdep.is-on .selfdep-note { display: flex; animation: selfdepIn .25s ease; }
@keyframes selfdepIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .selfdep-ic { display: none; } .selfdep { align-items: flex-start; } .selfdep-check { margin-top: .1rem; } }
.pay-amount-valid { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; padding: .2rem .6rem; border-radius: 99px; font-size: .72rem; color: var(--text-muted); background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.pay-amount-valid i { font-size: .68rem; }
.pay-status-line[data-state="review"] { background: rgba(167,139,250,.09); border-color: rgba(167,139,250,.35); }
.pay-status-line[data-state="review"] .pay-pulse { background: #a78bfa; }
.pay-expired { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; padding: 2.2rem 1.4rem; }
.pay-expired[hidden] { display: none; }
.pay-expired-icon { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #f87171; background: rgba(255,45,59,.1); border: 1px solid rgba(255,45,59,.3); }
.pay-expired h2 { margin: 0; font-size: 1.2rem; }
.pay-expired p { margin: 0; max-width: 420px; font-size: .88rem; line-height: 1.55; color: var(--text-secondary); }
.pay-review .pay-expired-icon { color: #a78bfa; background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.35); }
.acc-order { padding: 1.25rem 1.4rem 1.1rem; }
.acc-order .adm-pill { font-size: .72rem; }
.acc-steps { margin: 1.3rem 0 .3rem; }
.acc-steps li { font-size: .72rem; gap: .55rem; color: rgba(255,255,255,.36); letter-spacing: .01em; }
.acc-steps li span { width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.14); background: #1a1a1e; transition: background .25s, border-color .25s, box-shadow .25s; }
.acc-steps li span::after { content: ''; }
.acc-steps li + li::before { top: 8px; right: calc(50% + 14px); width: calc(100% - 28px); height: 2px; border-radius: 2px; background: rgba(255,255,255,.07); }
.acc-steps li.is-done { color: #4ade80; }
.acc-steps li.is-done span { background: #22c55e; border-color: #22c55e; }
.acc-steps li.is-done span::after { width: 4px; height: 8px; border: solid #0b1a10; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.acc-steps li.is-done + li.is-done::before { background: #22c55e; }
.acc-steps li.is-current { font-weight: 700; }
.acc-steps li.is-current span { box-shadow: 0 0 0 5px rgba(34,197,94,.16); }
.acc-steps li.is-done + li.is-next::before { background: linear-gradient(90deg, #22c55e, rgba(255,255,255,.1)); }
.acc-steps li.is-next { color: rgba(255,255,255,.78); }
.acc-steps li.is-next span { border-color: rgba(255,255,255,.34); }
.acc-steps li.is-next span::after { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); }
.acc-steps li.is-wait span::after { width: 6px; height: 6px; border-radius: 50%; background: #f5a623; }
.acc-steps li small { font-size: .62rem; font-weight: 600; color: rgba(255,255,255,.62); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); padding: .2rem .6rem; border-radius: 999px; margin-top: -.1rem; white-space: nowrap; }
@media (max-width: 520px) { .acc-steps li { font-size: .64rem; } .acc-steps li small { font-size: .56rem; padding: .15rem .45rem; } }
.acc-scans { margin-top: 1rem; border-top: 0; display: grid; gap: .5rem; }
.acc-scans li { gap: .7rem; padding: .6rem .7rem .6rem .9rem; border: 1px solid rgba(255,255,255,.06); border-radius: 11px; background: rgba(255,255,255,.02); }
.acc-scan-name { min-width: 0; width: 100%; font-size: .74rem; }
.acc-scan-lbl { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--text-muted); }
.acc-scan-lbl i { font-size: .8rem; opacity: .8; }
.acc-scan-track { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .55rem; border: 1px solid transparent; border-radius: 7px; background: none; font-size: .86rem; font-weight: 700; letter-spacing: .02em; color: var(--text); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.acc-scan-track i { font-size: .65rem; opacity: .45; transition: opacity .15s ease; }
.acc-scan-track:hover { background: rgba(255,255,255,.05); border-color: var(--border); }
.acc-scan-track:hover i { opacity: .9; }
.acc-scan-track.is-copied { color: #22c55e; border-color: rgba(34,197,94,.4); }
.acc-scan-none { font-size: .78rem; color: var(--text-muted); font-style: italic; }
.acc-track-btn { margin-left: auto; min-height: 34px; padding: 0 .9rem; font-size: .76rem; border-radius: 9px; border: 1px solid rgba(96,165,250,.3); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.acc-track-btn:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.acc-order-foot { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.05); }
.acc-order-actions { gap: .45rem; }
.acc-pdd, .acc-help-btn { min-height: 36px; padding: 0 .9rem; font-size: .78rem; border-radius: 9px; }
.acc-detail-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: 0 .9rem; border-radius: 9px; border: 1px solid var(--border-hover); background: rgba(255,255,255,.03); color: var(--text-secondary); font-size: .78rem; font-weight: 600; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.acc-detail-btn i { font-size: .62rem; transition: transform .2s ease; }
.acc-detail-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--text); }
.acc-detail-btn:hover i { transform: translateX(2px); }
.acc-pay { height: 36px; border-radius: 9px; }
@media (max-width: 640px) {
.acc-order { padding: 1.1rem 1rem 1rem; }
.acc-track-btn { margin-left: 0; width: 100%; justify-content: center; }
.acc-order-foot { flex-direction: column; align-items: stretch; }
.acc-order-actions { justify-content: stretch; }
.acc-order-actions > * { flex: 1; justify-content: center; }
}
.acc-pdd, .acc-help-btn, .acc-detail-btn, .acc-track-btn { white-space: nowrap; }
.acc-note { margin-top: .5rem; }
.acc-note-toggle { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .9rem; border: 1px dashed rgba(255,255,255,.1); border-radius: 11px; background: none; color: var(--text-muted); font: inherit; font-size: .78rem; text-align: left; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.acc-note-toggle:hover { border-color: rgba(250,204,21,.4); color: var(--text-secondary); background: rgba(250,204,21,.03); }
.acc-note-toggle[hidden] { display: none; }
.acc-note-toggle > i:first-child { font-size: .85rem; }
.acc-note-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-note-pen { font-size: .65rem; opacity: 0; transition: opacity .2s ease; }
.acc-note-toggle:hover .acc-note-pen { opacity: .7; }
.acc-note.has-note .acc-note-toggle { border-style: solid; border-color: rgba(250,204,21,.22); background: rgba(250,204,21,.04); color: #fde68a; }
.acc-note.has-note .acc-note-toggle > i:first-child { color: #facc15; }
.acc-note-edit[hidden] { display: none; }
.acc-note-edit textarea { width: 100%; min-height: 76px; resize: vertical; padding: .7rem .85rem; border: 1px solid rgba(250,204,21,.3); border-radius: 11px; background: rgba(0,0,0,.25); color: var(--text); font: inherit; font-size: .82rem; line-height: 1.5; outline: none; box-sizing: border-box; }
.acc-note-edit textarea:focus { border-color: rgba(250,204,21,.6); box-shadow: 0 0 0 3px rgba(250,204,21,.1); }
.acc-note-bar { display: flex; align-items: center; gap: .8rem; margin-top: .45rem; font-size: .7rem; color: var(--text-muted); }
.acc-note-info i { font-size: .6rem; margin-right: .2rem; }
.acc-note-status { margin-left: auto; }
.acc-note-status.is-ok { color: #22c55e; }
.acc-note-status.is-err { color: #f87171; }
.acc-note-ok { min-height: 30px; padding: 0 .8rem; border: 1px solid rgba(250,204,21,.4); border-radius: 8px; background: rgba(250,204,21,.1); color: #fde68a; font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; }
.acc-note-ok:hover { background: #ca8a04; border-color: #ca8a04; color: #fff; }
@media (max-width: 640px) { .acc-note-bar { flex-wrap: wrap; } .acc-note-status { margin-left: 0; } .acc-note-ok { margin-left: auto; } }
.st-expiree { background: rgba(255,255,255,.05); color: var(--text-muted); }
.pw-offert-tag { display: inline-flex; align-items: center; gap: .35rem; color: #86efac !important; font-weight: 600; }
.pw-offert-tag i { font-size: .65rem; }
.pw.is-offert .pw-tarif { text-decoration: line-through; opacity: .6; }
.pw.is-offert #poidsSup { color: #22c55e; }
.tr-card--violet { --c: 167,139,250; }
a.tr-card--link { display: block; color: inherit; text-decoration: none; }
.tr-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .45rem; font-weight: 600; color: rgb(var(--c)); }
.tr-more i { font-size: .7rem; transition: transform .2s ease; }
.tr-card--link:hover .tr-more i { transform: translateX(3px); }
@media (max-width: 640px) { .tr-guarantee { flex-wrap: wrap; } .tr-g-btn { width: 100%; justify-content: center; } }
.fo-cta { padding-top: 3.4rem; padding-bottom: 3rem; }
.fo-cta::after { content: ''; position: absolute; left: 50%; top: 0; width: 60%; height: 70%; transform: translateX(-50%); background: radial-gradient(ellipse at top, rgba(255,45,59,.16), transparent 70%); pointer-events: none; }
.fo-cta-kicker { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .35rem .85rem; border-radius: 99px; border: 1px solid rgba(255,45,59,.35); background: rgba(255,45,59,.08); color: #ff6b75; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fo-cta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255,45,59,.6); animation: foCtaDot 1.8s ease-out infinite; }
@keyframes foCtaDot { 0% { box-shadow: 0 0 0 0 rgba(255,45,59,.6); } 100% { box-shadow: 0 0 0 8px rgba(255,45,59,0); } }
.fo-cta h2 span { color: var(--red); }
.fo-cta > p { max-width: 560px; margin-left: auto; margin-right: auto; }
.fo-cta-proofs { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 0 1.8rem; padding: 0; }
.fo-cta-proofs li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(13,13,15,.55); backdrop-filter: blur(4px); font-size: .8rem; color: var(--text-secondary); }
.fo-cta-proofs li i { color: var(--red); font-size: .75rem; }
.fo-cta-proofs li strong { color: var(--text); font-family: var(--font-display); }
.fo-cta-vouch { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.4rem; font-size: .82rem; color: var(--text-secondary); text-decoration: none; transition: color .2s ease; }
.fo-cta-vouch i { font-size: .7rem; transition: transform .2s ease; }
.fo-cta-vouch:hover { color: var(--text); }
.fo-cta-vouch:hover i { transform: translateX(3px); }
@media (max-width: 640px) { .fo-cta-proofs li { font-size: .74rem; padding: .4rem .7rem; } }
.vc-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.2rem; }
.vc-hero-chips span { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 99px; border: 1px solid rgba(255,255,255,.1); background: rgba(13,13,15,.6); backdrop-filter: blur(4px); font-size: .76rem; color: var(--text-secondary); }
.vc-hero-chips i { color: #22c55e; font-size: .72rem; }
.vc-hero-chips span:last-child i { color: #2aabee; }
.vc-how { margin-top: 2.6rem; padding: 1.8rem; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(160deg, rgba(255,45,59,.07), rgba(22,22,27,.9) 55%); display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.2rem 2rem; align-items: center; }
.vc-how-head h2 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; margin: .5rem 0 .35rem; }
.vc-how-head p { margin: 0; font-size: .86rem; color: var(--text-secondary); }
.vc-how-kicker { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.vc-how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.vc-how-steps li { display: flex; gap: .7rem; padding: .9rem; border-radius: 13px; border: 1px solid rgba(255,255,255,.06); background: rgba(13,13,15,.5); }
.vc-how-n { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: .85rem; color: #fff; background: var(--red); }
.vc-how-steps b { display: block; font-size: .86rem; margin-bottom: .2rem; }
.vc-how-steps small { font-size: .74rem; line-height: 1.45; color: var(--text-muted); }
.vc-how-btn { grid-column: 1 / -1; justify-self: center; }
.vc-cta-accent { color: var(--red); }
@media (max-width: 900px) { .vc-how { grid-template-columns: 1fr; } .vc-how-steps { grid-template-columns: 1fr; } .vc-how-btn { justify-self: stretch; justify-content: center; } }
@media (max-width: 760px) { .vc-bar { grid-template-columns: 1fr; } }
.vs-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin: 1rem 0; }
.vs-chart { display: flex; align-items: flex-end; gap: 4px; height: 190px; padding: 1.4rem .2rem 1.6rem; }
.vs-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.vs-bar i { display: block; width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #ff4757, rgba(255,45,59,.35)); transition: filter .2s ease; }
.vs-bar:hover i { filter: brightness(1.3); }
.vs-bar-n { font-size: .6rem; color: var(--text-muted); margin-bottom: .2rem; min-height: .8rem; }
.vs-bar em { position: absolute; bottom: -1.3rem; font-style: normal; font-size: .6rem; color: var(--text-muted); white-space: nowrap; }
.vs-top-row { display: flex; justify-content: space-between; gap: .8rem; padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: .8rem; }
.vs-top-row span { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-top-sub { margin-top: 1rem; }
.vs-ip { font-size: .78rem; }
.vs-path { font-size: .74rem; }
.vs-sub { display: block; font-size: .68rem; color: var(--text-muted); margin-top: .15rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 99px; font-size: .68rem; font-weight: 700; }
.vs-tag i { font-size: .6rem; }
.vs-tag--proxy { background: rgba(255,45,59,.14); color: #ff6b75; border: 1px solid rgba(255,45,59,.35); }
.vs-tag--ok { background: rgba(34,197,94,.1); color: #86efac; }
.vs-tag--bot { background: rgba(255,255,255,.06); color: var(--text-muted); }
.vs-note { margin-top: .8rem; font-size: .72rem; }
@media (max-width: 900px) { .vs-row { grid-template-columns: 1fr; } .vs-chart { height: 150px; } }
.recap-cart-note { margin: .8rem 0 0; font-size: .74rem; line-height: 1.5; color: var(--text-muted); }
.recap-cart-note[hidden], .recap-cart[hidden] { display: none; }
.recap-cart-note i { color: #60a5fa; margin-right: .25rem; }
.ban-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 99px; background: rgba(255,45,59,.14); border: 1px solid rgba(255,45,59,.4); color: #ff6b75; font-size: .75rem; font-weight: 700; vertical-align: middle; }
.ban-pill--sm { font-size: .62rem; padding: .05rem .45rem; margin-left: .3rem; }
.ban-alert { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ban-alert > span { flex: 1; min-width: 220px; }
.ban-card-adm { margin: 1rem 0; padding: 0; border-color: rgba(255,45,59,.25); }
.ban-card-adm summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; list-style: none; color: #ff6b75; font-weight: 700; font-size: .9rem; }
.ban-card-adm summary::-webkit-details-marker { display: none; }
.ban-card-adm summary > i { font-size: .7rem; transition: transform .2s ease; color: var(--text-muted); }
.ban-card-adm[open] summary > i { transform: rotate(180deg); }
.ban-form { display: grid; gap: .6rem; padding: 0 1.2rem 1.2rem; }
.ban-ips { display: flex; gap: .6rem; align-items: flex-start; font-size: .8rem; color: var(--text-secondary); line-height: 1.45; cursor: pointer; }
.ban-ips input { margin-top: .2rem; accent-color: var(--red); }
.ban-btn { justify-self: start; background: rgba(255,45,59,.12); border: 1px solid rgba(255,45,59,.45); color: #ff6b75; }
.ban-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.vs-ban { display: block; margin-top: .3rem; }
.vs-ban-btn { background: none; border: 0; padding: 0; font: inherit; font-size: .66rem; color: var(--text-muted); cursor: pointer; }
.vs-ban-btn:hover { color: #ff6b75; }
.ban-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding-top: 7rem; }
.ban-card { max-width: 460px; text-align: center; padding: 2.2rem 1.8rem; border-radius: 18px; border: 1px solid rgba(255,45,59,.3); background: linear-gradient(160deg, rgba(255,45,59,.08), var(--surface) 60%); }
.ban-ic { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #ff6b75; background: rgba(255,45,59,.12); border: 1px solid rgba(255,45,59,.35); }
.ban-card h1 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 .5rem; }
.ban-card p { color: var(--text-secondary); font-size: .9rem; margin: 0 0 .6rem; }
.ban-raison { padding: .6rem .8rem; border-radius: 10px; background: rgba(0,0,0,.25); }
.ban-contact { margin-bottom: 1.2rem !important; font-size: .8rem !important; }
.adm-todo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.1rem; }
.adm-todo-item { display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); text-decoration: none; font-size: .8rem; line-height: 1.3; transition: border-color .2s ease, transform .2s ease; }
.adm-todo-item:hover { border-color: rgba(255,255,255,.18); transform: translateY(-2px); }
.adm-todo-item b { color: var(--text); font-family: var(--font-display); font-size: 1.05rem; margin-right: .15rem; }
.adm-todo-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); color: var(--text-muted); font-size: .85rem; }
.adm-todo-item.is-warm { border-color: rgba(245,166,35,.35); }
.adm-todo-item.is-warm .adm-todo-ic { background: rgba(245,166,35,.14); color: #f5a623; }
.adm-todo-item.is-hot { border-color: rgba(255,45,59,.45); background: linear-gradient(135deg, rgba(255,45,59,.1), var(--surface) 70%); }
.adm-todo-item.is-hot .adm-todo-ic { background: rgba(255,45,59,.16); color: #ff6b75; }
.adm-tab-alert { background: var(--red) !important; color: #fff !important; }
.adm-gsearch { position: relative; display: flex; align-items: center; }
.adm-gsearch i { position: absolute; left: .75rem; font-size: .75rem; color: var(--text-muted); pointer-events: none; }
.adm-gsearch input { width: 250px; height: 36px; padding: 0 .8rem 0 2rem; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: .8rem; outline: none; transition: border-color .2s ease, width .25s ease; }
.adm-gsearch input:focus { border-color: rgba(255,45,59,.5); width: 300px; }
.rv-todo td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.rv-done { opacity: .5; }
.rv-raison { max-width: 380px; font-size: .78rem; color: var(--text-secondary); line-height: 1.45; }
.rv-ok:hover { background: #16a34a; border-color: #16a34a; color: #fff; }
.rv-help { padding: .8rem 1.2rem 1rem; font-size: .74rem; }
.pay-grid { margin-top: 1rem; }
@media (max-width: 1200px) { .adm-todo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .adm-todo { grid-template-columns: 1fr 1fr; } .adm-gsearch input, .adm-gsearch input:focus { width: 100%; } .adm-gsearch { width: 100%; } }
.dc-tag { display: inline-flex; align-items: center; gap: .3rem; margin-left: .4rem; padding: .1rem .5rem; border-radius: 99px; font-size: .64rem; font-weight: 700; vertical-align: middle; }
.dc-tag i { font-size: .58rem; }
.dc-tag--ok { background: rgba(34,197,94,.12); color: #86efac; }
.dc-tag--warn { background: rgba(245,166,35,.14); color: #fbbf24; }
.acc-pw-link { background: none; border: 0; padding: 0; font: inherit; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.acc-pw-link:hover { color: var(--text); }
.acc-pw-link i { font-size: .7em; margin-right: .15rem; }
.tg-form { margin-bottom: 1rem; }
.tg-form .flow-alert { margin: 0 0 1rem; }
.tg-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: .4rem 0 .6rem; }
.tg-topics label { display: grid; gap: .3rem; font-size: .78rem; color: var(--text-secondary); }
.tg-aide { font-size: .74rem; line-height: 1.5; margin: .2rem 0 .7rem; }
.tg-test { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--text-secondary); margin-bottom: .8rem; cursor: pointer; }
.tg-test input { accent-color: var(--red); }
@media (max-width: 700px) { .tg-topics { grid-template-columns: 1fr; } }
.mdp-card { margin: 1rem 0 0; padding: 0; }
.mdp-card summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; list-style: none; color: #93c5fd; font-weight: 700; font-size: .9rem; }
.mdp-card summary::-webkit-details-marker { display: none; }
.mdp-card summary > i { font-size: .7rem; color: var(--text-muted); transition: transform .2s ease; }
.mdp-card[open] summary > i { transform: rotate(180deg); }
.mdp-aide { font-size: .78rem; line-height: 1.5; margin: 0; }
.mdp-btn { justify-self: start; background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.45); color: #93c5fd; }
.mdp-btn:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.mdp-ok { margin: 1rem 0 0; border-color: rgba(34,197,94,.4); background: linear-gradient(135deg, rgba(34,197,94,.1), var(--surface) 70%); display: grid; gap: .6rem; }
.mdp-ok-head { color: #86efac; font-size: .9rem; }
.mdp-val { justify-self: start; display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3); color: var(--text); font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.mdp-val i { font-size: .75rem; opacity: .6; }
.mdp-val.is-copied { border-color: #22c55e; color: #86efac; }
.mdp-ok p { margin: 0; font-size: .78rem; line-height: 1.5; }
.np-quitter { margin-top: 1rem; text-align: center; }
.np-quitter button { background: none; border: 0; color: var(--text-muted); font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }
.nav-admin-tag { font-style: normal; font-size: .6rem; font-weight: 800; letter-spacing: .1em; margin-left: .45rem; padding: .15rem .45rem; border-radius: 6px; background: rgba(255,45,59,.14); color: #ff6b75; border: 1px solid rgba(255,45,59,.35); vertical-align: middle; }
.navbar--admin .hamburger { display: none !important; }
.navbar--admin .nav-links { position: static !important; flex-direction: row !important; width: auto !important; height: auto !important; padding: 0 !important; background: none !important; border: 0 !important; }
.footer--admin { padding: 1.4rem 0; }
.footer-admin-note { margin: 0; text-align: center; font-size: .78rem; color: var(--text-muted); }
.auth-tabs {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 1.6rem;
background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 11px;
}
.auth-tabs a {
display: flex; align-items: center; justify-content: center; gap: .45rem;
padding: .6rem .5rem; border-radius: 8px; font-size: .8rem; font-weight: 600;
color: var(--text-secondary); text-decoration: none; transition: background .2s ease, color .2s ease;
}
.auth-tabs a i { font-size: .72rem; }
.auth-tabs a:hover { color: var(--text); }
.auth-tabs a.active { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(255,45,59,.28); }
.auth-shell .auth-head { margin-bottom: 1.4rem; }
.auth-shell .auth-head h1 { font-size: 1.55rem; }
.auth-info {
display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1.1rem; padding: .75rem .9rem;
font-size: .8rem; line-height: 1.5; color: var(--text-secondary);
background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px;
}
.auth-info i { color: var(--text-muted); margin-top: .18rem; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.auth-label-row .ctc-label { margin-bottom: .4rem; }
.auth-forgot { font-size: .72rem; color: var(--text-muted); text-decoration: none; }
.auth-forgot:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.auth-eyebrow {
display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; margin-bottom: .9rem;
padding: .28rem .65rem; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.9); background: rgba(255,45,59,.22); border: 1px solid rgba(255,45,59,.4); border-radius: 999px;
}
.auth-eyebrow i { font-size: .6rem; }
.auth-trust {
display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: 1.3rem; padding-top: 1.1rem;
border-top: 1px solid rgba(255,255,255,.14); font-size: .72rem; color: rgba(255,255,255,.75);
}
.auth-trust i { color: var(--red); margin-right: .3rem; }
@media (max-width: 820px) { .auth-eyebrow, .auth-trust { display: none; } .auth-tabs { margin-bottom: 1.2rem; } }
.auth-tabs a { white-space: nowrap; }
@media (max-width: 480px) { .auth-tabs a { font-size: .76rem; gap: .35rem; padding: .6rem .3rem; } .auth-tabs a i { display: none; } }
.auth-strength { font-size: .72rem; font-weight: 600; margin-top: .4rem; min-height: 1em; color: var(--text-muted); }
.auth-strength[data-level="weak"] { color: var(--red); }
.auth-strength[data-level="ok"] { color: #f5a623; }
.auth-strength[data-level="strong"] { color: #22c55e; }
.auth-rules { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.auth-rules li { display: flex; align-items: center; gap: .5rem; font-size: .74rem; color: var(--text-muted); transition: color .2s ease; }
.auth-rules li i { font-size: .55rem; width: 12px; text-align: center; }
.auth-rules li.ok { color: #22c55e; }
.auth-rules li.ok i { font-size: .72rem; }
.hp-champ { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.amz {
display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: 12px;
border: 1px solid rgba(255,153,0,.45); background: linear-gradient(135deg, rgba(255,153,0,.12), rgba(255,153,0,.03));
}
.amz-txt { flex: 1; min-width: 0; }
.amz-txt strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.amz-txt strong i { color: #ff9900; margin-right: .3rem; }
.amz-txt p { font-size: .82rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.amz-txt b { color: var(--text); }
.amz-btn { flex-shrink: 0; background: #ff9900; color: #131921; border: 0; font-weight: 700; white-space: nowrap; }
.amz-btn:hover { background: #f08804; }
@media (max-width: 560px) { .amz { flex-direction: column; align-items: stretch; } .amz-btn { justify-content: center; } }
.acc-proof-btn { display: inline-flex; align-items: center; gap: .45rem; padding: 0 1rem; min-height: 40px; border-radius: 10px; border: 1px solid rgba(250,204,21,.45); background: rgba(250,204,21,.1); color: #fde68a; font-weight: 700; font-size: .85rem; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.acc-proof-btn i { color: #facc15; }
.acc-proof-btn:hover { background: #ca8a04; border-color: #ca8a04; color: #fff; }
.acc-proof-btn:hover i { color: #fff; }
.pv-logo { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #facc15; background: rgba(250,204,21,.12); }
.pv-warn { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.1rem; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid rgba(245,158,11,.55); background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.04)); }
.pv-warn-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #f59e0b; color: #1a1205; }
.pv-warn strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.pv-warn p { font-size: .82rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.pv-warn b { color: var(--text); }
.pv-ok { border: 1px solid rgba(34,197,94,.45); background: rgba(34,197,94,.1); }
.pv-ok i { color: #22c55e; }
.pv-form .ctc-label small { color: var(--text-muted); font-weight: 400; }
.pv-avis { width: 100%; min-height: 140px; resize: vertical; font: inherit; line-height: 1.5; }
.pv-count { text-align: right; margin: .3rem 0 1rem; }
.pv-drop { margin-bottom: 1.1rem; }
.av-head { margin: 2.2rem 0 1rem; }
.av-head h2 { font-size: 1.35rem; display: flex; align-items: center; gap: .5rem; }
.av-head h2 i { color: #facc15; }
.av-head p { color: var(--text-muted); font-size: .88rem; margin-top: .3rem; }
.av-grid { columns: 3 280px; column-gap: 1rem; }
.av-card { break-inside: avoid; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.av-card .av-img { margin: 0 0 .8rem; }
.av-txt { white-space: pre-line; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.6; color: var(--text-secondary); margin: 0 0 .7rem; }
.av-meta { font-size: .75rem; color: #86efac; display: inline-flex; align-items: center; gap: .35rem; }
.vc-avis { position: relative; break-inside: avoid; margin: 0 0 1rem; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.vc-avis .vc-card { margin: 0; border: 0; border-radius: 0; }
.vc-avis .vc-card:hover { transform: none; box-shadow: none; }
.vc-avis-txt { white-space: pre-line; overflow-wrap: anywhere; margin: 0; padding: .85rem 1rem .4rem; font-size: .9rem; line-height: 1.6; color: var(--text-secondary); }
.vc-avis-meta { display: flex; align-items: center; gap: .35rem; padding: 0 1rem .9rem; font-size: .74rem; color: #86efac; }
.vc-avis--txt { padding-top: 2.6rem; }
.vc-avis--txt .vc-avis-q { position: absolute; right: 1rem; top: .9rem; font-size: 1.3rem; color: rgba(255,45,59,.5); }
.vc-avis--txt .vc-avis-txt { font-size: .98rem; color: var(--text); }
.vc-avis--img { border: 0; background: none; }
.vc-avis--img .vc-card { border: 1px solid var(--border); border-radius: 16px; }
.vx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
.vx-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.vx-card.is-attente { border-color: rgba(245,158,11,.6); box-shadow: 0 0 0 1px rgba(245,158,11,.25); }
.vx-img { display: block; background: #0b0b0f; max-height: 320px; overflow: hidden; }
.vx-img img { display: block; width: 100%; height: auto; }
.vx-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.vx-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.vx-src { font-size: .72rem; color: var(--text-muted); }
.vx-txt { white-space: pre-line; overflow-wrap: anywhere; font-size: .88rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.vx-meta { font-size: .75rem; color: var(--text-muted); margin: 0; }
.vx-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.vx-actions form { margin: 0; }
.vx-ok { border-color: rgba(34,197,94,.5); color: #86efac; }
.vx-del { border-color: rgba(239,68,68,.5); color: #fca5a5; }
.vx-del:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.vx-vide { margin-top: 1rem; color: var(--text-muted); }
.pv-err { display: flex; align-items: center; gap: .45rem; margin: .45rem 0 0; font-size: .82rem; color: #fca5a5; }
.pv-err[hidden] { display: none; }
.pv-avis.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.pv-count { display: flex; justify-content: space-between; gap: .5rem; }
.pv-count .pv-min { color: var(--text-muted); }
.pv-count.is-ok .pv-min { color: #86efac; }
.pv-drop.is-bad { border-color: #ef4444; }
@media (max-width: 600px) {
.auth-section { padding: 74px 12px 36px; }
.auth-card { padding: 22px 18px 20px; }
.auth-visual, .auth-visual-inner { height: 104px; min-height: 104px; }
.auth-card .ctc-input { font-size: 16px; min-height: 50px; }
.auth-card .ctc-field { margin-bottom: 16px; }
.auth-card .auth-strength:empty, .auth-card .auth-hint:empty { display: none; }
.auth-card .auth-rules { margin-top: 6px; }
.auth-card .auth-rules li { font-size: .8rem; }
.auth-card .tgh-warn { font-size: .84rem; line-height: 1.45; }
.auth-card .auth-submit { min-height: 52px; width: 100%; font-size: 1rem; border-radius: 12px; }
}
@media (max-width: 600px) {
.auth-section { padding: 70px 10px 28px; }
.auth-shell { border-radius: 18px; }
.auth-visual, .auth-visual-inner { height: auto; min-height: 0; }
.auth-visual-inner { padding: 18px 18px 16px; background: linear-gradient(180deg, rgba(10,10,14,.15), rgba(10,10,14,.85)); }
.auth-visual .auth-eyebrow { display: inline-flex; align-items: center; gap: .35rem; height: auto; margin: 0 0 .35rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.auth-visual h2 { font-size: 1.3rem; margin: 0; }
.auth-visual ul, .auth-visual .auth-visual-brand, .auth-visual .auth-trust { display: none; }
.auth-card { padding: 18px 16px 18px; }
.auth-tabs { margin-bottom: 14px; }
.auth-tabs a { min-height: 42px; display: flex; align-items: center; justify-content: center; }
.auth-head h1 { display: none; }
.auth-head p { font-size: .88rem; margin: 0 0 14px; color: var(--text-muted); }
.auth-card .ctc-label { font-size: .68rem; letter-spacing: .09em; margin-bottom: 6px; }
.auth-card .ctc-field { margin-bottom: 14px; }
.auth-card .ctc-input:focus { border-color: #ff2d3b; box-shadow: 0 0 0 3px rgba(255,45,59,.18); }
.auth-card .auth-hint { font-size: .74rem; }
.auth-card .tgh { margin-top: 8px; }
.auth-card .tgh-warn { font-size: .8rem; padding: .6rem .75rem; border-radius: 10px; }
.auth-card .tgh-row { margin-top: 6px; }
.auth-card .auth-meter { margin-top: 6px; }
.auth-card .auth-rules { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.auth-card .auth-rules li { font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); list-style: none; }
.auth-card .auth-rules li::before { display: none; }
.auth-card .auth-submit { margin-top: 6px; box-shadow: 0 10px 24px rgba(255,45,59,.25); }
}
.ts-box { margin: 4px 0 14px; min-height: 65px; }
.ts-box { min-height: 0; margin: 0; border-radius: 12px; overflow: hidden; line-height: 0; }
.ts-box:has(iframe) { margin: 2px 0 14px; }
.ts-box .cf-turnstile { width: 100%; }
.ts-box iframe { display: block; width: 100% !important; border-radius: 12px; }
.ts-box { margin: 0 0 16px; border-radius: 12px; overflow: hidden; line-height: 0; background: transparent; }
.ts-box iframe { display: block; margin: -1px !important; width: calc(100% + 2px) !important; max-width: none !important; border: 0 !important; }
.ts-box { margin: 0 0 16px; border-radius: 12px; overflow: hidden; line-height: 0; }
.ts-box .cf-turnstile { overflow: hidden; border-radius: 12px; }
.ts-box .cf-turnstile > div { margin: -1px !important; width: calc(100% + 2px) !important; }
.ts-note { margin: -6px 0 14px; padding: .6rem .8rem; border-radius: 10px; background: rgba(255,170,0,.1); border: 1px solid rgba(255,170,0,.3); color: #ffcf70; font-size: .84rem; line-height: 1.4; }
.ts-note[hidden] { display: none; }
.auth-card .auth-hint:empty, .auth-card .auth-strength:empty { display: none; }
.auth-card form > .ctc-field:last-of-type { margin-bottom: 16px; }
.acc-order-actions > a, .acc-order-actions > button { min-height: 40px; height: 40px; white-space: nowrap; line-height: 1; box-sizing: border-box; }
.acc-proof-btn { padding: 0 1rem; }
@media (max-width: 600px) {
.acc-order-foot { flex-direction: column; align-items: stretch; gap: 12px; }
.acc-order-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.acc-order-actions > a, .acc-order-actions > button { width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 .6rem; justify-content: center; font-size: .82rem; gap: .4rem; }
.acc-order-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.acc-order-actions > .acc-pay { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.acc-order-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc-order-actions > a, .acc-order-actions > button { padding: 0 .4rem; font-size: .78rem; gap: .3rem; overflow: hidden; }
}
@media (max-width: 600px) {
.acc-order-actions > .acc-proof-btn { grid-column: 1 / -1; order: -1; font-size: .85rem; }
.acc-order-actions > :last-child:nth-child(odd) { grid-column: auto; }
.acc-order-actions:has(.acc-proof-btn):has(.acc-pdd) > .acc-detail-btn,
.acc-order-actions:not(:has(.acc-proof-btn)) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.adm-login .auth-card { max-width: 440px; }
.adm-login-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; }
.adm-login-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: .8rem; color: var(--text-muted); background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.adm-login-steps li span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; background: rgba(255,255,255,.08); }
.adm-login-steps li.is-on { color: #fff; border-color: rgba(255,45,59,.55); background: rgba(255,45,59,.08); }
.adm-login-steps li.is-on span { background: #ff2d3b; color: #fff; }
.adm-login-steps li.is-done { color: #86efac; border-color: rgba(34,197,94,.4); }
.adm-login-steps li.is-done span { background: #16a34a; color: #fff; }
.adm-otp-input { text-align: center; font-size: 1.6rem !important; letter-spacing: .5em; font-variant-numeric: tabular-nums; padding-left: .5em !important; }
.adm-otp-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.adm-otp-actions form { margin: 0; }
.adm-otp-link { background: none; border: 0; color: var(--text-muted); font: inherit; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; }
.adm-otp-link:hover:not([disabled]) { color: #fff; }
.adm-otp-link[disabled] { opacity: .45; cursor: not-allowed; }
.ast-c0 { --c: #55556a; }
.ast-c1 { --c: #3987e5; }
.ast-c2 { --c: #d95926; }
.ast-c3 { --c: #199e70; }
.ast-c4 { --c: #c98500; }
.ast-c5 { --c: #d55181; }
.ast-c6 { --c: #008300; }
.ast-c7 { --c: #9085e9; }
.ast-c8 { --c: #e66767; }
.ast-st-att { --c: #f5a623; }
.ast-st-pay { --c: #22c55e; }
.ast-st-cours { --c: #60a5fa; }
.ast-st-livr { --c: #2dd4bf; }
.ast-st-ann { --c: #ff6b75; }
.ast-st-sup { --c: #55556a; }
.ast-warn { --c: #f5a623; }
.ast-d { display: inline-flex; align-items: center; gap: .28rem; padding: .12rem .48rem; border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1.45; white-space: nowrap; background: rgba(255,255,255,.06); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ast-d i { font-size: .58rem; }
.ast-d small { font-size: .92em; font-weight: 600; opacity: .72; }
.ast-d--bien { background: rgba(34,197,94,.12); color: #4ade80; }
.ast-d--mal { background: rgba(255,45,59,.13); color: #ff7b84; }
.ast-d--attn { background: rgba(245,166,35,.13); color: #f5a623; }
.ast-apercu .adm-kpi { position: relative; transition: border-color .2s ease, transform .2s ease; }
.ast-apercu .adm-kpi:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.ast-apercu .adm-kpi--hl:hover { border-color: rgba(255,45,59,.5); }
.ast-apercu .adm-kpi strong { overflow-wrap: anywhere; }
.ast-kpi-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; min-height: 22px; }
.ast-apercu .adm-kpi-lbl i { margin-right: .3rem; }
.ast-apercu .adm-kpi--hl .adm-kpi-lbl i { color: var(--red); }
.ast-spark { display: block; width: 100%; height: 38px; margin-top: .4rem; overflow: visible; }
.ast-spark-a { fill: rgba(255,45,59,.12); }
.ast-spark-l { fill: none; stroke: var(--red); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ast-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.ast-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.ast-title i { color: var(--red); margin-right: .4rem; }
.ast-sub { font-size: .76rem; color: var(--text-muted); margin-top: .2rem; }
.ast-jump { display: flex; gap: .35rem; flex-wrap: wrap; }
.ast-jump button { height: 30px; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-family: var(--font); font-size: .74rem; font-weight: 600; cursor: pointer; transition: .2s ease; }
.ast-jump button:hover, .ast-jump button:focus-visible { color: var(--text); border-color: rgba(255,255,255,.22); }
.ast-h { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; margin: 2.2rem 0 .9rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; scroll-margin-top: 76px; }
.ast-head + .ast-h, .ast-head + .flow-alert + .ast-h { margin-top: .6rem; padding-top: 0; border-top: 0; }
.ast-h i { color: var(--red); margin-right: .45rem; font-size: .9em; }
.ast-h small { font-family: var(--font); font-size: .74rem; font-weight: 500; color: var(--text-muted); }
.ast-periods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.ast-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.ast-tile { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.05rem; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: border-color .2s ease; }
.ast-tile:hover { border-color: var(--border-hover); }
.ast-tile--hl { border-color: rgba(255,45,59,.35); background: linear-gradient(135deg, rgba(255,45,59,.1), var(--surface) 70%); }
.ast-tile-top { display: flex; justify-content: space-between; align-items: center; gap: .4rem; flex-wrap: wrap; min-height: 22px; }
.ast-tile-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ast-tile-val { font-family: var(--font-display); font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.ast-tile-sub { font-size: .72rem; color: var(--text-secondary); line-height: 1.4; }
.ast-tile-sub b { color: var(--text); }
.ast-tile-prev { font-size: .68rem; color: var(--text-muted); line-height: 1.35; }
.ast-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ast-span-4 { grid-column: span 4; }
.ast-span-5 { grid-column: span 5; }
.ast-span-6 { grid-column: span 6; }
.ast-span-7 { grid-column: span 7; }
.ast-span-12 { grid-column: 1 / -1; }
.ast-card { display: flex; flex-direction: column; gap: .95rem; }
.ast > .ast-card { margin-bottom: 1rem; }
.ast-card.adm-card--flush { gap: .6rem; }
.ast-stack-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ast-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem 1rem; flex-wrap: wrap; }
.ast-card-head--pad { padding: 1.2rem 1.3rem 0; }
.ast-card-head h4 { font-family: var(--font-display); font-size: .98rem; font-weight: 700; }
.ast-card-head h4 i { color: var(--text-muted); margin-right: .3rem; }
.ast-note { font-size: .74rem; color: var(--text-muted); margin-top: .15rem; line-height: 1.5; }
.ast-note b { color: var(--text-secondary); }
.ast-head-kpis { display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; font-size: .76rem; color: var(--text-secondary); }
.ast-head-kpis b { color: var(--text); }
.ast-sub-h { display: flex; justify-content: space-between; gap: .6rem; margin-top: .15rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ast-sub-h span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ast-foot { font-size: .72rem; color: var(--text-muted); line-height: 1.55; }
.ast-foot b { color: var(--text-secondary); }
.ast-foot--defs { margin-top: 1.4rem; }
.ast-foot--defs i { margin-right: .3rem; }
.ast-inline-kpis { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .74rem; color: var(--text-muted); }
.ast-inline-kpis b { color: var(--text); font-variant-numeric: tabular-nums; }
.ast-pill { display: inline-flex; align-items: center; padding: .08rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; background: rgba(255,255,255,.06); color: var(--text-secondary); }
.ast-cc { display: inline-block; padding: .02rem .32rem; border-radius: 4px; font-size: .6rem; font-weight: 700; letter-spacing: .03em; background: rgba(255,255,255,.07); color: var(--text-secondary); vertical-align: 1px; }
.ast-ic { width: 1em; color: var(--text-muted); }
.ast-neg { color: #ff7b84; }
.ast-pos { color: #4ade80; }
.ast-warn-ic { color: #f5a623; font-size: .7rem; }
.ast-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.ast-stats--2, .ast-stack-col .ast-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ast-stats > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .75rem .8rem; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); }
.ast-stats > div > span:first-child { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ast-stats strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.ast-stats small { font-size: .68rem; color: var(--text-muted); line-height: 1.35; }
.ast-stats .ast-d { align-self: flex-start; }
.ast-stats > div.is-alert { border-color: rgba(255,45,59,.4); }
.ast-stats > div.is-alert strong { color: #ff7b84; }
.ast-stats > div.is-warm { border-color: rgba(245,166,35,.4); }
.ast-stats > div.is-warm strong { color: #f5a623; }
.ast-chart { position: relative; height: 190px; margin: .2rem 0 1.4rem 46px; }
.ast-chart--sm { height: 120px; }
.ast-chart--xs { height: 96px; }
.ast-chart--months { flex: 1 1 auto; height: auto; min-height: 200px; margin-top: 1rem; }
.ast-gy { position: absolute; inset: 0; pointer-events: none; }
.ast-gy span { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.055); }
.ast-gy span:first-child { border-top-color: rgba(255,255,255,.16); }
.ast-gy em { position: absolute; right: 100%; top: 0; margin-right: 8px; transform: translateY(-50%); font-style: normal; font-size: .64rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ast-plot { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.ast-plot--gap { gap: 3px; }
.ast-chart--months .ast-plot { gap: 10px; }
.ast-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.ast-col::before { content: ''; position: absolute; inset: 0 -1px; border-radius: 3px; background: transparent; transition: background .15s; }
.ast-col:hover::before { background: rgba(255,255,255,.045); }
.ast-col > i { position: relative; display: block; width: 100%; max-width: 44px; border-radius: 3px 3px 0 0; background: var(--c, var(--red)); transition: filter .15s; }
.ast-col > i.is-nz { min-height: 2px; }
.ast-col:hover > i { filter: brightness(1.22); }
.ast-bar-ca { --c: var(--red); }
.ast-col--dual > i { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; }
.ast-bar-n { --c: rgba(255,255,255,.15); }
.ast-col b { position: absolute; top: 100%; left: 50%; margin-top: 6px; transform: translateX(-50%); font-size: .64rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; pointer-events: none; }
.ast-val { position: absolute; bottom: 100%; left: 50%; margin-bottom: 4px; transform: translateX(-50%); font-size: .64rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; font-style: normal; }
.ast-mini-h { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: -.3rem; font-size: .76rem; font-weight: 600; color: var(--text-secondary); }
.ast-leg-inline { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 500; color: var(--text-muted); }
.ast-leg-inline .ast-sw + .ast-sw, .ast-leg-inline .ast-sw:not(:first-child) { margin-left: .5rem; }
.ast-sw { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; background: var(--c, #55556a); vertical-align: middle; }
.ast-sw--ghost { --c: rgba(255,255,255,.22); }
.ast-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.ast-seg button { height: 28px; padding: 0 .85rem; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font-family: var(--font); font-size: .74rem; font-weight: 600; cursor: pointer; }
.ast-seg button:hover { color: var(--text); }
.ast-seg button.is-on { background: var(--surface-3); color: var(--text); }
[data-ast-range="90"] [data-show="30"], [data-ast-range="30"] [data-show="90"] { display: none; }
[data-ast-range="30"] .ast-plot > .ast-col:nth-child(-n+60) { display: none; }
[data-ast-range="90"] .ast-col .l30, [data-ast-range="30"] .ast-col .l90 { display: none; }
[data-ast-range="30"] .ast-plot { gap: 3px; }
.ast-data summary { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--text-muted); cursor: pointer; list-style: none; user-select: none; }
.ast-data summary::-webkit-details-marker { display: none; }
.ast-data summary::before { content: '▸'; font-size: .7rem; transition: transform .15s; }
.ast-data[open] summary::before { transform: rotate(90deg); }
.ast-data summary:hover { color: var(--text); }
.ast-data .adm-table-wrap { margin-top: .6rem; }
.ast-data-scroll { max-height: 320px; overflow: auto; }
.ast-donut-box { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 1.3rem; align-items: center; }
.ast-donut { position: relative; width: 148px; height: 148px; }
.ast-donut svg { display: block; width: 100%; height: 100%; }
.ast-donut-bg { fill: none; stroke: rgba(255,255,255,.05); stroke-width: 5; }
.ast-seg-c { fill: none; stroke: var(--c); stroke-width: 5; transition: stroke-width .15s; cursor: default; }
.ast-seg-c:hover { stroke-width: 6.4; }
.ast-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ast-donut-c strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.ast-donut-c span { margin-top: .25rem; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ast-leg { list-style: none; display: grid; margin: 0; padding: 0; }
.ast-leg li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .8rem; }
.ast-leg li:last-child { border-bottom: 0; }
.ast-leg li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.ast-leg li > b { font-variant-numeric: tabular-nums; }
.ast-leg li > em { grid-column: 2 / -1; font-style: normal; font-size: .7rem; color: var(--text-muted); }
.ast-leg--row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
.ast-leg--row li:nth-last-child(-n+2) { border-bottom: 0; }
.ast-leg--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
.ast-leg--grid li { grid-template-columns: 10px minmax(0, 1fr) auto auto; }
.ast-leg--grid li > em { grid-column: auto; min-width: 44px; text-align: right; }
.ast-hb { list-style: none; display: grid; gap: .7rem; margin: 0; padding: 0; }
.ast-hb--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
.ast-hb-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .3rem; font-size: .78rem; color: var(--text-secondary); }
.ast-hb-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ast-hb-row > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ast-hb-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.ast-hb-track { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.ast-hb-track i { display: block; height: 100%; border-radius: 6px; background: var(--c, var(--red)); }
.ast-stack { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.04); }
.ast-stack--lg { height: 16px; border-radius: 8px; }
.ast-stack i { display: block; height: 100%; min-width: 3px; background: var(--c); transition: filter .15s; }
.ast-stack i:hover { filter: brightness(1.22); }
.ast-funnel { list-style: none; display: grid; gap: .65rem; margin: 0; padding: 0; }
.ast-funnel li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 54px; gap: .8rem; align-items: center; }
.ast-funnel-lbl b { display: block; font-size: .8rem; }
.ast-funnel-lbl small { font-size: .68rem; color: var(--text-muted); }
.ast-funnel-track { position: relative; height: 30px; border-radius: 8px; background: rgba(255,255,255,.04); overflow: hidden; }
.ast-funnel-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, var(--red), #ff6b75); }
.ast-funnel-track span { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); font-size: .82rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }
.ast-funnel-pct { text-align: right; font-size: .76rem; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ast-heat { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)) 34px; gap: 3px; align-items: center; }
.ast-heat-d { font-size: .66rem; font-weight: 600; color: var(--text-muted); }
.ast-heat-t { text-align: right; font-size: .66rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ast-heat-h { font-size: .6rem; color: var(--text-muted); white-space: nowrap; overflow: visible; }
.ast-hc { display: block; aspect-ratio: 1 / 1; border-radius: 3px; background: rgba(255,45,59,var(--a, 0)); }
.ast-hc.is-0 { background: rgba(255,255,255,.035); }
.ast-hc:hover { outline: 1px solid rgba(255,255,255,.65); outline-offset: 1px; }
.ast-heat-leg { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-size: .68rem; color: var(--text-muted); }
.ast-heat-leg i { width: 14px; height: 14px; border-radius: 3px; background: rgba(255,45,59,var(--a, 0)); }
.ast-heat-leg em { margin-left: auto; font-style: normal; }
.ast-heat-leg b { color: var(--text-secondary); }
.ast-coh { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .76rem; }
.ast-coh th { padding: .3rem .45rem; text-align: left; white-space: nowrap; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ast-coh td { padding: .45rem .5rem; white-space: nowrap; }
.ast-coh .num { text-align: right; font-variant-numeric: tabular-nums; }
.ast-coh th.ast-coh-m { text-align: center; }
.ast-coh-c { min-width: 52px; text-align: center; border-radius: 5px; background: rgba(57,135,229,var(--a, 0)); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ast-coh-c.is-0 { background: rgba(255,255,255,.03); color: var(--text-muted); }
.ast-coh-c.is-dark { color: #fff; font-weight: 700; }
.ast-coh-c.is-futur { background: transparent; }
.ast-top td { padding: .6rem 1rem; }
.ast-top-ca { min-width: 150px; }
.ast-top-ca b { display: block; margin-bottom: .3rem; font-variant-numeric: tabular-nums; }
.ast-top-ca .ast-hb-track { height: 4px; }
.ast-carriers td { padding: .45rem 0; }
.ast-mvt th { padding: .5rem 0; background: none; position: static; }
.ast-mvt th + th { padding-left: .8rem; }
.ast-tip { position: fixed; left: 0; top: 0; z-index: 2000; max-width: 280px; padding: .45rem .65rem; border-radius: 8px; background: rgba(13,13,15,.96); border: 1px solid var(--border-hover); box-shadow: 0 8px 24px rgba(0,0,0,.45); color: var(--text); font-size: .74rem; line-height: 1.4; font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; transition: opacity .12s; }
.ast-tip.is-on { opacity: 1; }
@media (max-width: 1180px) {
.ast-periods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ast-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
.ast-grid > [class*="ast-span-"] { grid-column: 1 / -1; }
.ast-hb--2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.ast-periods, .ast-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.ast-tile { padding: .8rem .85rem; }
.ast-tile-val { font-size: 1.15rem; }
.ast-chart { height: 160px; margin-left: 38px; }
.ast-chart--sm { height: 100px; }
.ast-chart--xs { height: 86px; }
.ast-chart--months { min-height: 170px; }
.ast-plot, .ast-plot--gap { gap: 1px; }
[data-ast-range="30"] .ast-plot { gap: 2px; }
.ast-chart--months .ast-plot { gap: 4px; }
.ast-chart--months .ast-col:nth-child(even) .lm { display: none; }
.ast-donut-box { grid-template-columns: 1fr; justify-items: center; }
.ast-donut-box > .ast-leg, .ast-donut-box > .adm-table-wrap { width: 100%; }
.ast-funnel li { grid-template-columns: minmax(0, 1fr) 48px; gap: .3rem .5rem; }
.ast-funnel-lbl { grid-column: 1 / -1; display: flex; align-items: baseline; gap: .45rem; }
.ast-funnel-lbl b { display: inline; }
.ast-leg--grid, .ast-leg--row { grid-template-columns: 1fr; }
.ast-leg--row li:nth-last-child(2) { border-bottom: 1px solid rgba(255,255,255,.05); }
.ast-heat { grid-template-columns: 24px repeat(24, minmax(0, 1fr)) 26px; gap: 1.5px; }
.ast-heat-h { font-size: .5rem; }
.ast-heat-d, .ast-heat-t { font-size: .6rem; }
.ast-stats strong { font-size: 1rem; }
.ast-card-head--pad { padding: 1rem 1rem 0; }
.ast-heat-leg em { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.ast-apercu .adm-kpi, .ast-apercu .adm-kpi:hover { transition: none; transform: none; }
.ast-tip, .ast-seg-c, .ast-col > i, .ast-stack i { transition: none; }
}
.pay-live { padding: 2.2rem 1.4rem 1.8rem; text-align: center; }
.pay-live[hidden] { display: none !important; }
.pay-live.is-in, .pay-done.is-in { animation: payLiveIn .45s cubic-bezier(.2,.9,.3,1) both; }
@keyframes payLiveIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.pay-live-ring { position: relative; width: 96px; height: 96px; margin: 0 auto 1.3rem; }
.pay-live-spin {
position: absolute; inset: 0; border-radius: 50%;
border: 3px solid color-mix(in srgb, var(--coin) 18%, transparent);
border-top-color: var(--coin); border-right-color: var(--coin);
animation: bx-spin 1s linear infinite; transition: border-color .35s, opacity .35s;
}
.pay-live-coin, .pay-live-ok {
position: absolute; inset: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: #fff; transition: opacity .3s, transform .45s cubic-bezier(.2,1.4,.4,1);
}
.pay-live-coin { background: var(--coin); box-shadow: 0 8px 24px color-mix(in srgb, var(--coin) 35%, transparent); animation: payLiveBeat 1.6s ease-in-out infinite; }
.pay-live-ok { background: #22c55e; opacity: 0; transform: scale(.4); box-shadow: 0 0 0 10px rgba(34,197,94,.12); }
@keyframes payLiveBeat { 50% { transform: scale(.93); } }
.pay-live.is-done .pay-live-spin { border-color: rgba(34,197,94,.35); animation: none; opacity: 0; }
.pay-live.is-done .pay-live-coin { opacity: 0; animation: none; }
.pay-live.is-done .pay-live-ok { opacity: 1; transform: scale(1); }
.pay-live h2 { font-family: var(--font-display); font-size: 1.35rem; margin-bottom: .45rem; }
.pay-live p { font-size: .86rem; color: var(--text-secondary); line-height: 1.55; max-width: 34ch; margin: 0 auto; }
.pay-live p:empty { display: none; }
.pay-live-chain { max-width: 300px; margin: 1.1rem auto 0; padding: .75rem .9rem; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.025); text-align: left; }
.pay-live-chain[hidden], .pay-live.is-done .pay-live-chain, .pay-live.is-done .pay-live-note { display: none; }
.pay-live .pay-live-note { margin-top: 1.1rem; font-size: .76rem; color: var(--text-muted); }
.pay-live-note i { color: #22c55e; margin-right: .3rem; }
.pay-wait-mini { display: none; }
@media (max-width: 820px) {
.pay-wait-mini {
display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 0 auto 1rem; width: fit-content;
padding: .45rem .85rem; border-radius: 999px; font-size: .74rem; color: var(--text-secondary);
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
}
@media (prefers-reduced-motion: reduce) {
.pay-live.is-in, .pay-done.is-in, .pay-live-coin { animation: none; }
.pay-live-spin { animation-duration: 2.5s; }
}
.qrx-svg { width: 100%; height: 100%; }
.qrx-svg[hidden] { display: none; }
.qrx-switch {
background: none; border: 0; padding: .2rem .4rem; cursor: pointer; font-family: var(--font);
font-size: .74rem; color: var(--text-muted); text-align: center; line-height: 1.45;
}
.qrx-switch b { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.qrx-switch:hover b { color: var(--coin, var(--red)); }
.cli-ips { margin-top: 1.25rem; }
.cli-ips-resume { display: flex; flex-wrap: wrap; gap: .6rem 2rem; padding: 0 1.4rem 1rem; }
.cli-ips-resume > div { display: flex; flex-direction: column; gap: .2rem; }
.cli-ips-resume .adm-muted { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.ip-tag { margin-left: .35rem; font-size: .66rem; padding: .12rem .45rem; background: rgba(255,255,255,.06); color: var(--text-secondary); }
.ip-tag--alerte { background: rgba(255,45,59,.14); color: #ff7b85; }
.cli-lies { border-top: 1px solid rgba(255,255,255,.06); padding: 1rem 1.4rem 1.2rem; }
.cli-lies h3 { font-size: .9rem; margin-bottom: .6rem; }
.cli-lies ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; font-size: .85rem; }
.vx-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-bottom: 1.2rem; }
.vx-ajout-txt { flex: 1 1 320px; }
.vx-ajout-txt h2 { font-size: 1rem; margin-bottom: .25rem; }
.vx-ajout-txt p { font-size: .8rem; margin: 0; }
.vx-ajout-fichiers input { font-size: .82rem; color: var(--text-secondary); max-width: 100%; }
.vx-ajout-pub { display: flex; align-items: center; gap: .45rem; font-size: .85rem; cursor: pointer; }
.vc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin-bottom: 1.2rem; }
.vc-score { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.05rem; }
.vc-stars { display: inline-flex; gap: 2px; color: #fbbf24; font-size: .7rem; }
.vc-stars--lg { font-size: 1rem; gap: 3px; }
.vc-filtres { display: flex; flex-wrap: wrap; gap: .45rem; }
.vc-filtre { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(22,22,27,.85); color: var(--text-secondary); font-family: var(--font); font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.vc-filtre span { font-size: .72rem; color: var(--text-muted); }
.vc-filtre:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.vc-filtre.is-on { background: rgba(255,45,59,.14); border-color: rgba(255,45,59,.55); color: #fff; }
.vc-filtre.is-on span { color: #ff8a93; }
.vc-grid { columns: 3 300px; column-gap: 1rem; }
.vc-avis { display: flex; flex-direction: column; transition: border-color .25s ease, transform .25s ease; }
.vc-avis[hidden] { display: none; }
.vc-avis:hover { border-color: rgba(255,45,59,.35); transform: translateY(-2px); }
.vc-avis--txt { padding-top: 0; }
.vc-head { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem .6rem; }
.vc-av { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: #fff; background: hsl(var(--h, 350) 70% 42%); box-shadow: 0 0 0 2px rgba(255,255,255,.06); }
.vc-av i { font-size: .8rem; opacity: .9; }
.vc-who { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.vc-who b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-date { margin-left: auto; font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
.vc-avis .vc-avis-txt { padding: 0 1rem .8rem; }
.vc-avis--txt .vc-avis-txt { font-size: .95rem; }
.vc-avis .vc-card { border-top: 1px solid rgba(255,255,255,.05); }
.vc-foot { display: flex; align-items: center; gap: .35rem; padding: .6rem 1rem .75rem; font-size: .72rem; color: #86efac; border-top: 1px solid rgba(255,255,255,.04); }
.vc-plus-wrap { text-align: center; margin: .4rem 0 1rem; }
.vc-plus-wrap[hidden] { display: none; }
@media (max-width: 640px) {
.vc-grid { columns: 1; }
.vc-top { flex-direction: column; align-items: stretch; }
.vc-filtres { justify-content: center; }
}
.vc-avis .vc-card { min-height: 140px; background: #0d0d10; }
.vx-forma.is-on { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.5); color: #fbbf24; }
.vc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.4rem; }
.vc-stat { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(22,22,27,.9)); }
.vc-stat > i { color: var(--red); font-size: .95rem; margin-bottom: .35rem; }
.vc-stat b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; }
.vc-stat small { font-size: .74rem; color: var(--text-muted); }
.vc-stat--note { border-color: rgba(251,191,36,.35); background: linear-gradient(160deg, rgba(251,191,36,.10), rgba(22,22,27,.9)); }
.vc-stat--note .vc-stars { margin-bottom: .3rem; }
.vc-cherche { display: flex; align-items: center; gap: .55rem; min-width: 290px; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(22,22,27,.85); color: var(--text-muted); }
.vc-cherche:focus-within { border-color: rgba(255,45,59,.55); }
.vc-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-family: var(--font); font-size: .85rem; }
.vc-avis { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease, border-color .25s ease; }
.vc-avis.is-in { opacity: 1; transform: none; }
.vc-avis.is-in:hover { transform: translateY(-2px); }
.vc-tag-forma { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; margin: -.2rem 1rem .6rem; padding: .2rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); }
.vc-txt-wrap { max-height: 11.5em; overflow: hidden; position: relative; }
.vc-avis.is-ouvert .vc-txt-wrap { max-height: none; }
.vc-avis:not(.is-ouvert) .vc-txt-wrap:has(+ .vc-lire:not([hidden]))::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; background: linear-gradient(transparent, var(--surface)); }
.vc-lire { align-self: flex-start; margin: -.3rem 1rem .7rem; padding: 0; border: 0; background: none; color: var(--red); font-family: var(--font); font-size: .78rem; font-weight: 700; cursor: pointer; }
.vc-lire[hidden] { display: none; }
.vc-avis.is-haute:not(.is-lb) .vc-card { max-height: 460px; }
.vc-avis.is-haute .vc-card img { object-fit: cover; object-position: top; max-height: 460px; }
.vc-entier { display: none; }
.vc-avis.is-haute .vc-entier { display: flex; align-items: flex-end; justify-content: center; gap: .4rem; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; padding-bottom: .8rem; font-size: .76rem; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(10,10,14,.92)); }
.vc-avis.is-haute .vc-zoom { display: none; }
.vc-vide { text-align: center; color: var(--text-muted); padding: 2rem 0; }
.vc-vide[hidden] { display: none; }
.vc-lb-fig { margin: 0; display: flex; align-items: stretch; gap: 0; max-width: 100%; max-height: 100%; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.vc-lb-fig img { max-width: min(62vw, 900px); max-height: calc(100vh - 7rem); object-fit: contain; border-radius: 0; box-shadow: none; background: #000; }
.vc-lb-info { width: 320px; flex-shrink: 0; overflow-y: auto; max-height: calc(100vh - 7rem); border-left: 1px solid rgba(255,255,255,.08); background: var(--surface); }
.vc-lb-info:empty { display: none; }
.vc-lb-txt { margin: 0; padding: 0 1rem 1rem; white-space: pre-line; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.6; color: var(--text-secondary); }
@media (max-width: 900px) {
.vc-stats { grid-template-columns: repeat(2, 1fr); }
.vc-lb-fig { flex-direction: column; }
.vc-lb-fig img { max-width: 100%; max-height: 60vh; }
.vc-lb-info { width: auto; max-height: 30vh; border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 640px) {
.vc-cherche { min-width: 0; }
.vc-stat b { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .vc-avis { opacity: 1; transform: none; transition: none; } }
.vc-stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .vc-stats { grid-template-columns: repeat(2, 1fr); } .vc-stat--note { grid-column: 1 / -1; } }
.rf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.rf-card { display: flex; flex-direction: column; padding: 0; text-align: left; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); color: var(--text); font-family: var(--font); cursor: pointer; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.rf-card[hidden] { display: none; }
.rf-card:hover, .rf-card:focus-visible { border-color: rgba(255,45,59,.45); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(255,45,59,.12); outline: none; }
.rf-logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: #0d080a; border-bottom: 1px solid var(--border); }
.rf-logo img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.rf-card:hover .rf-logo img { transform: scale(1.04); }
.rf-logo b { font-family: var(--font-display); font-size: 2.4rem; color: #ff4d64; }
.rf-body { display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem 1rem; flex: 1; }
.rf-nom { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.rf-desc { font-size: .78rem; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.2em; }
.rf-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .45rem; }
.rf-max, .rf-delai { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.rf-max { background: rgba(0,210,106,.1); color: #3ee08f; }
.rf-delai { background: rgba(255,255,255,.05); color: var(--text-secondary); }
.rf-max i, .rf-delai i { font-size: .65rem; }
.rf-vide { margin: 2rem auto 0; max-width: 520px; text-align: center; color: var(--text-secondary); font-size: .9rem; }
.rf-vide a { color: var(--red); }
.rf-fiche { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(5,5,8,.82); backdrop-filter: blur(6px); }
.rf-fiche[hidden] { display: none; }
.rf-fiche-box { position: relative; display: grid; grid-template-columns: 300px 1fr; width: min(820px, 100%); max-height: calc(100vh - 3rem); overflow: auto; border: 1px solid var(--border-hover); border-radius: 20px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: rf-entree .25s cubic-bezier(.16,1,.3,1); }
@keyframes rf-entree { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.rf-fiche-logo { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 0%, #2a0b12, #0d080a 70%); padding: 1.5rem; }
.rf-fiche-logo img { border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 40px rgba(255,40,70,.15); }
.rf-fiche-logo img { width: 100%; height: auto; }
.rf-fiche-corps { padding: 1.8rem 1.8rem 1.6rem; }
.rf-fiche-cat { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.rf-fiche-corps h2 { font-family: var(--font-display); font-size: 1.6rem; margin: .25rem 0 .35rem; }
.rf-fiche-desc { color: var(--text-secondary); font-size: .88rem; margin: 0 0 1.1rem; }
.rf-fiche-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.2rem; }
.rf-fiche-chiffres > div { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .8rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.rf-fiche-chiffres small { font-size: .68rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.rf-fiche-chiffres b { font-family: var(--font-display); font-size: 1.05rem; }
.rf-fiche-chiffres > div:first-child b { color: #3ee08f; }
.rf-fiche-corps h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 0 0 .55rem; }
.rf-fiche-cond { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.rf-fiche-cond li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.rf-fiche-cond li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; font-size: .6rem; color: #0d0d0f; background: #00d26a; }
.rf-fiche-go { width: 100%; justify-content: center; }
.rf-fiche-bientot { display: flex; gap: .55rem; align-items: center; padding: .8rem 1rem; border-radius: 12px; font-size: .82rem; color: var(--text-secondary); background: var(--surface-2); border: 1px dashed var(--border-hover); margin: 0; }
.rf-fiche-x { position: absolute; top: .8rem; right: .8rem; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-hover); background: rgba(13,13,15,.75); color: var(--text); cursor: pointer; }
.rf-fiche-x:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 720px) {
.rf-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.rf-body { padding: .7rem .75rem .8rem; }
.rf-desc { display: none; }
.rf-fiche { padding: 0; align-items: flex-end; }
.rf-fiche-box { grid-template-columns: 1fr; border-radius: 20px 20px 0 0; max-height: 92vh; }
.rf-fiche-logo { padding: 1rem; max-height: 170px; }
.rf-fiche-logo img { max-height: 140px; width: auto; }
.rf-fiche-corps { padding: 1.2rem 1.2rem 1.4rem; }
.rf-fiche-chiffres { gap: .4rem; }
.rf-fiche-chiffres > div { padding: .55rem .6rem; }
.rf-fiche-chiffres b { font-size: .92rem; }
}
.rf ~ .rf-fiche, .rf-fiche { z-index: 1100; }
.bx-photo--page .page-hero .vc-hero-chips.rf-chips { justify-content: flex-start; }
.rf-astuce { display: flex; align-items: center; gap: .5rem; margin: -.3rem 0 1rem; font-size: .8rem; color: var(--text-secondary); }
.rf-astuce i { color: var(--red); }
.rf-voir { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: .76rem; font-weight: 700; color: var(--red); }
.rf-voir i { font-size: .62rem; transition: transform .25s ease; }
.rf-card:hover .rf-voir i, .rf-card:focus-visible .rf-voir i { transform: translateX(4px); }
.rf-cat { display: none; position: relative; }
.rf-cat-btn { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .75rem 1rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(22,22,27,.85); color: var(--text); font-family: var(--font); font-size: .9rem; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.rf-cat-btn span { flex: 1; text-align: left; }
.rf-cat-btn em { font-style: normal; font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text-secondary); }
.rf-cat-ic { color: var(--red); width: 1.1rem; text-align: center; }
.rf-cat-fleche { font-size: .7rem; color: var(--text-secondary); transition: transform .25s ease; }
.rf-cat.is-open .rf-cat-btn, .rf-cat.is-filtre .rf-cat-btn { border-color: rgba(255,45,59,.55); background: rgba(255,45,59,.08); }
.rf-cat.is-filtre .rf-cat-btn em { background: rgba(255,45,59,.18); color: #ff8a93; }
.rf-cat.is-open .rf-cat-fleche { transform: rotate(180deg); }
.rf-cat-menu { position: absolute; z-index: 50; top: calc(100% + .45rem); left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .5rem; border-radius: 16px; border: 1px solid var(--border-hover); background: var(--surface); box-shadow: 0 22px 50px rgba(0,0,0,.6); animation: rf-menu .2s cubic-bezier(.16,1,.3,1); }
.rf-cat-menu[hidden] { display: none; }
@keyframes rf-menu { from { opacity: 0; transform: translateY(-6px); } }
.rf-cat-opt { display: flex; align-items: center; gap: .5rem; padding: .7rem .75rem; border-radius: 11px; border: 1px solid transparent; background: var(--surface-2); color: var(--text-secondary); font-family: var(--font); font-size: .84rem; font-weight: 600; text-align: left; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.rf-cat-opt i { width: 1rem; text-align: center; font-size: .8rem; color: var(--text-muted); }
.rf-cat-opt span { flex: 1; color: var(--text); }
.rf-cat-opt em { font-style: normal; font-size: .7rem; color: var(--text-muted); }
.rf-cat-opt:hover { background: var(--surface-3); }
.rf-cat-opt.is-on { border-color: rgba(255,45,59,.55); background: rgba(255,45,59,.12); }
.rf-cat-opt.is-on i, .rf-cat-opt.is-on em { color: #ff8a93; }
.rf-cat-opt[data-cat="tous"] { grid-column: 1 / -1; }
@media (max-width: 720px) {
.rf-filtres { display: none; }
.rf .vc-top { gap: .6rem; margin-bottom: .9rem; }
.rf .vc-cherche { padding: .7rem .95rem; }
.rf .vc-cherche input { font-size: .9rem; }
.rf-cat { display: block; }
.rf-astuce { margin: 0 0 .9rem; font-size: .76rem; }
.rf-voir { margin-top: .45rem; padding-top: .45rem; font-size: .72rem; }
}
.rf-mes { margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; }
.rf-mes span { font-size: .72rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(255,255,255,.08); }
.rf-mes em { font-style: normal; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: var(--red); color: #fff; }
.rfd-logo { background: #fff; overflow: hidden; padding: 4px; }
.rfd-logo img { width: 100%; height: 100%; object-fit: contain; }
.rfd-montant { position: relative; }
.rfd-montant input { padding-right: 2.4rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.rfd-montant span { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-weight: 700; }
.rfd-calc { margin: .45rem 0 0; font-size: .8rem; color: var(--text-secondary); }
.rfd-calc b { color: var(--text); }
.rfd-form .ctc-label { margin-top: 1.1rem; }
.rfd-form .ctc-label:first-child { margin-top: 0; }
.rfd-cond { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.rfd-cond h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 0 0 .6rem; }
.rfd-cond .rf-fiche-cond { margin: 0; }
.rfd-cond .rf-fiche-cond li { font-size: .82rem; }
.dropzone.has-file { border-color: rgba(0,210,106,.55); background: rgba(0,210,106,.06); }
.dropzone.has-file .dropzone-icon { color: #00d26a; }
.rf-statut { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; padding: .32rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.rf-statut i { font-size: .7rem; }
.rf-statut--attente { background: rgba(251,191,36,.12); color: #fbbf24; }
.rf-statut--cours { background: rgba(59,130,246,.14); color: #6ea8ff; }
.rf-statut--paiement { background: rgba(255,45,59,.14); color: #ff7b85; }
.rf-statut--ok { background: rgba(0,210,106,.12); color: #3ee08f; }
.rf-statut--ko, .rf-statut--ferme { background: rgba(255,255,255,.06); color: var(--text-secondary); }
.rft-wrap { max-width: 860px; }
.rft-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .4rem 0 1.4rem; }
.rft-head h1 { font-family: var(--font-display); font-size: 1.8rem; margin: .15rem 0 0; }
.rft-vide { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--border-hover); border-radius: 18px; color: var(--text-secondary); }
.rft-vide i { font-size: 2rem; color: var(--text-muted); }
.rft-liste { display: flex; flex-direction: column; gap: .6rem; }
.rft-item { display: flex; align-items: center; gap: .9rem; padding: .75rem 1rem; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s; }
.rft-item:hover { border-color: rgba(255,45,59,.4); transform: translateY(-1px); }
.rft-item.is-fini { opacity: .72; }
.rft-logo { width: 74px; height: 42px; flex-shrink: 0; border-radius: 9px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.rft-logo img { width: 100%; height: 100%; object-fit: contain; }
.rft-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.rft-info b { font-size: .95rem; }
.rft-info small { font-size: .75rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rft-nl { min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: 999px; background: var(--red); color: #fff; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.rft-go { color: var(--text-muted); font-size: .75rem; }
.rtk { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); overflow: hidden; margin-top: .6rem; }
.rtk-head { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.rtk-titre { flex: 1; min-width: 0; }
.rtk-titre h1 { font-family: var(--font-display); font-size: 1.15rem; margin: 0; }
.rtk-titre small { font-size: .75rem; color: var(--text-secondary); }
.rtk-cond { margin: 0; padding: .6rem 1.2rem; font-size: .76rem; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.rtk-fil { display: flex; flex-direction: column; gap: .6rem; padding: 1.2rem; height: min(60vh, 560px); overflow-y: auto; background: linear-gradient(180deg, rgba(13,13,15,.35), transparent 30%); }
.rtk-msg { max-width: 78%; padding: .6rem .85rem .45rem; border-radius: 16px; font-size: .9rem; line-height: 1.45; }
.rtk-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rtk-msg p { -webkit-user-select: text; user-select: text; }
.rtk-msg { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.rtk-msg.is-select { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.rtk-copier { position: fixed; z-index: 1200; display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: #26262c; color: #fff; font: 600 .78rem/1 var(--font-body, inherit); box-shadow: 0 8px 22px rgba(0,0,0,.45); cursor: pointer; }
.rtk-copier[hidden] { display: none; }
.rtk-copier:hover { background: #303038; }
.rtk-msg time { display: block; margin-top: .25rem; font-size: .66rem; opacity: .6; text-align: right; }
.rtk-msg--moi { align-self: flex-end; background: linear-gradient(135deg, #ff2d3b, #d41a26); color: #fff; border-bottom-right-radius: 5px; }
.rtk-msg--equipe { align-self: flex-start; background: var(--surface-3); border: 1px solid var(--border-hover); border-bottom-left-radius: 5px; }
.rtk-auteur { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; margin-bottom: .2rem; color: #ff8a93; }
.rtk-msg--moi .rtk-auteur { color: rgba(255,255,255,.85); }
.rtk-img { display: block; margin: .15rem 0 .35rem; }
.rtk-img img { display: block; max-width: 100%; max-height: 280px; border-radius: 10px; }
.rtk-sys { align-self: center; display: flex; flex-direction: column; align-items: center; gap: .1rem; max-width: 90%; padding: .4rem .8rem; border-radius: 999px; font-size: .74rem; color: var(--text-secondary); background: rgba(255,255,255,.04); text-align: center; }
.rtk-sys time { font-size: .62rem; opacity: .7; }
.rtk-envoi { display: flex; align-items: flex-end; gap: .55rem; padding: .8rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.rtk-joindre { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border-hover); color: var(--text-secondary); cursor: pointer; transition: color .2s, border-color .2s; }
.rtk-joindre:hover { color: var(--text); border-color: var(--red); }
.rtk-champ { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.rtk-champ textarea { width: 100%; min-height: 42px; max-height: 160px; padding: .65rem .9rem; border-radius: 21px; border: 1px solid var(--border-hover); background: var(--bg); color: var(--text); font-family: var(--font); font-size: .9rem; line-height: 1.4; resize: none; outline: none; }
.rtk-champ textarea:focus { border-color: rgba(255,45,59,.55); }
.rtk-pj { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; max-width: 100%; padding: .25rem .6rem; border-radius: 999px; font-size: .74rem; background: rgba(0,210,106,.1); color: #3ee08f; }
.rtk-pj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.rtk-pj button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 .2rem; }
.rtk-go { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--red); color: #fff; cursor: pointer; transition: transform .2s, background .2s; }
.rtk-go:hover { background: var(--red-dark); transform: scale(1.05); }
.rtk-go:disabled { opacity: .6; cursor: wait; }
.rtk-err { margin: 0; padding: 0 1rem .8rem; background: var(--surface-2); }
.rtk-clos { margin: 0; padding: 1rem 1.2rem; border-top: 1px solid var(--border); font-size: .85rem; color: var(--text-secondary); background: var(--surface-2); }
.rtk-clos a { color: var(--red); }
.rtk-statut-form { display: flex; gap: .4rem; }
.rtk-statut-form select { width: auto; padding: .45rem .7rem; font-size: .82rem; }
.rtk-nom { width: 130px; flex-shrink: 0; padding: .6rem .8rem; font-size: .82rem; }
.rtk--admin .rtk-fil { height: min(62vh, 640px); }
@media (max-width: 720px) {
.rft-item { gap: .65rem; padding: .65rem .75rem; flex-wrap: wrap; }
.rft-logo { width: 58px; height: 34px; }
.rft-info { flex-basis: calc(100% - 90px); }
.rft-item .rf-statut { margin-left: calc(58px + .65rem); }
.rft-go { display: none; }
.rtk { border-radius: 16px; }
.rtk-head { flex-wrap: wrap; padding: .85rem .9rem; gap: .65rem; }
.rtk-head .rft-logo { width: 58px; height: 34px; }
.rtk-titre { flex-basis: calc(100% - 70px); }
.rtk-fil { height: 62vh; padding: .9rem .75rem; }
.rtk-msg { max-width: 88%; }
.rtk-envoi--admin { flex-wrap: wrap; }
.rtk-nom { width: 100%; }
}
.rtk-pj[hidden] { display: none; }
.rtk-champ textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-rf-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.acc-rf-head h2 i { color: var(--red); font-size: .9em; margin-right: .3rem; }
.acc-rf-liste { margin-bottom: 2rem; }
.acc-rf-ouvrir { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; color: var(--red); white-space: nowrap; }
.acc-rf-ouvrir i { font-size: .62rem; }
.acc-rf-vide { display: flex; align-items: center; gap: .9rem; margin-bottom: 2rem; padding: 1rem 1.2rem; border-radius: 16px; border: 1px dashed var(--border-hover); background: var(--surface); color: var(--text-secondary); text-decoration: none; font-size: .88rem; transition: border-color .2s; }
.acc-rf-vide:hover { border-color: rgba(255,45,59,.5); }
.acc-rf-vide > i:first-child { font-size: 1.3rem; color: var(--red); }
.acc-rf-vide span { flex: 1; }
.acc-rf-vide strong { color: var(--text); }
@media (max-width: 720px) {
.acc-rf-ouvrir { width: 100%; padding-left: calc(58px + .65rem); }
}
.rtk-avis { display: flex; flex-direction: column; gap: .7rem; margin: 0; padding: 1.1rem 1.2rem; border-top: 1px solid rgba(251,191,36,.35); background: linear-gradient(180deg, rgba(251,191,36,.08), transparent); }
.rtk-avis h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; }
.rtk-avis h3 i { color: #fbbf24; }
.rtk-avis p { margin: 0; font-size: .82rem; color: var(--text-secondary); }
.rtk-etoiles { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .25rem; }
.rtk-etoiles input { position: absolute; opacity: 0; pointer-events: none; }
.rtk-etoiles label { font-size: 1.6rem; color: var(--text-muted); cursor: pointer; transition: color .15s, transform .15s; }
.rtk-etoiles label:hover, .rtk-etoiles label:hover ~ label, .rtk-etoiles input:checked ~ label { color: #fbbf24; }
.rtk-etoiles label:hover { transform: scale(1.12); }
.rtk-avis .btn { align-self: flex-start; }
.ds-ok { color: #3ee08f; } .ds-ko { color: #ff7b85; }
.ds-ok i, .ds-ko i { font-size: .55rem; vertical-align: middle; margin-right: .2rem; }
.rtk-attente { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; padding: 2.4rem 1.4rem 2rem; }
.rtk-attente-ic { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #fbbf24; background: rgba(251,191,36,.1); box-shadow: 0 0 0 10px rgba(251,191,36,.05); }
.rtk-attente-ic i { animation: rtk-sablier 2.4s ease-in-out infinite; }
@keyframes rtk-sablier { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rtk-attente-ic i { animation: none; } }
.rtk-attente h2 { margin: .3rem 0 0; font-family: var(--font-display); font-size: 1.35rem; }
.rtk-attente > p { margin: 0; max-width: 460px; color: var(--text-secondary); font-size: .9rem; line-height: 1.55; }
.rtk-attente-delai { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 999px; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); color: #fde68a; font-size: .9rem; }
.rtk-attente-delai b { color: #fbbf24; }
.rtk-attente-recap { list-style: none; margin: .4rem 0 0; padding: 0; width: min(420px, 100%); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.rtk-attente-recap li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .95rem; font-size: .86rem; background: var(--surface-2); }
.rtk-attente-recap li + li { border-top: 1px solid var(--border); }
.rtk-attente-recap span { color: var(--text-secondary); }
.rtk-attente-note { font-size: .78rem !important; }
.rtk-attente-note a { color: var(--red); }
.rtk-annuler { margin-top: .3rem; border-color: rgba(255,45,59,.4); color: #ff7b85; }
.rtk-annuler:hover { background: rgba(255,45,59,.1); border-color: var(--red); color: #fff; }
.rtk-attente-delai b { white-space: nowrap; }
.appn { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; padding: .95rem 1.1rem; border-radius: 16px; border: 1px solid rgba(255,45,59,.3); background: linear-gradient(135deg, rgba(255,45,59,.1), rgba(20,20,22,.9)); }
.appn[hidden] { display: none; }
.appn-ic img { width: 46px; height: 46px; border-radius: 12px; display: block; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.appn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.appn-txt strong { font-family: var(--font-display); font-size: .98rem; }
.appn-txt span { font-size: .8rem; color: var(--text-secondary); line-height: 1.45; }
.appn-ios { color: #fde68a !important; }
.appn-ios i { margin-right: .25rem; }
.appn-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.appn-btn { padding: .6rem 1rem; font-size: .82rem; white-space: nowrap; }
.appn-btn[hidden], .appn-ok[hidden], .appn-ios[hidden] { display: none !important; }
.appn-ok { color: #3ee08f; font-size: .82rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 720px) {
.appn { flex-wrap: wrap; gap: .75rem; }
.appn-txt { flex-basis: calc(100% - 62px); }
.appn-btns { width: 100%; }
.appn-btn { flex: 1; justify-content: center; }
}
.rtk-avis-bandeau { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .7rem 1rem; border-top: 1px solid rgba(251,191,36,.35); background: rgba(251,191,36,.08); font-size: .88rem; }
.rtk-avis-bandeau i.fa-star { color: #fbbf24; }
.rtk-avis-bandeau .btn { padding: .5rem .9rem; font-size: .82rem; }
.rtk-avis-fond { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(5,5,8,.82); backdrop-filter: blur(6px); }
.rtk-avis-fond[hidden] { display: none; }
.rtk-avis-fond .rtk-avis { position: relative; width: min(460px, 100%); max-height: calc(100vh - 2.4rem); overflow-y: auto; border: 1px solid var(--border-hover); border-radius: 20px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.6); padding: 1.5rem 1.4rem 1.3rem; animation: rf-entree .25s cubic-bezier(.16,1,.3,1); }
.rtk-avis-fond .rtk-avis .dropzone { padding: 1rem; }
@media (max-width: 720px) {
.rtk-avis-fond { padding: 0; align-items: flex-end; }
.rtk-avis-fond .rtk-avis { width: 100%; border-radius: 20px 20px 0 0; max-height: 92vh; }
}
.rtk-envoi { align-items: center; }
.rtk-joindre, .rtk-go { width: 44px; height: 44px; }
.rtk-champ textarea { display: block; min-height: 44px; height: 44px; padding: 11px 1rem; line-height: 20px; border-radius: 22px; font-size: .92rem; }
@media (max-width: 720px) { .rtk-envoi { padding: .65rem; gap: .45rem; } }
.rtk-merci { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; padding: 1.6rem 1.2rem 1.4rem; border-top: 1px solid rgba(0,210,106,.3); background: linear-gradient(180deg, rgba(0,210,106,.08), transparent); }
.rtk-merci-ic { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #0d0d0f; background: #00d26a; box-shadow: 0 0 0 8px rgba(0,210,106,.12); }
.rtk-merci h3 { margin: .3rem 0 0; font-family: var(--font-display); font-size: 1.25rem; }
.rtk-merci p { margin: 0; max-width: 420px; color: var(--text-secondary); font-size: .88rem; }
.rtk-merci-avis { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 999px; font-size: .8rem; background: rgba(251,191,36,.1); color: #fde68a; }
.rtk-merci-avis i { color: #fbbf24; }
.rtk-merci-avis.is-ok { background: rgba(0,210,106,.1); color: #86efac; }
.rtk-merci-avis.is-ok i { color: #3ee08f; }
.rtk-merci-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .3rem; }
.rtk-confirm { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; width: min(420px, 100%); padding: 1.6rem 1.4rem 1.3rem; border: 1px solid var(--border-hover); border-radius: 20px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: rf-entree .25s cubic-bezier(.16,1,.3,1); }
.rtk-confirm-ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #ff7b85; background: rgba(255,45,59,.12); box-shadow: 0 0 0 8px rgba(255,45,59,.06); }
.rtk-confirm h3 { margin: .2rem 0 0; font-family: var(--font-display); font-size: 1.2rem; }
.rtk-confirm p { margin: 0; color: var(--text-secondary); font-size: .88rem; line-height: 1.5; }
.rtk-confirm p b { color: var(--text); }
.rtk-confirm-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .5rem; width: 100%; }
.rtk-confirm-btns .btn { flex: 1 1 160px; justify-content: center; }
@media (max-width: 720px) {
.rtk-confirm { width: 100%; border-radius: 20px 20px 0 0; padding-bottom: 1.6rem; }
.rtk-confirm-btns { flex-direction: column-reverse; }
}
@media (max-width: 720px) { .rtk-confirm-btns .btn { flex: 0 0 auto; width: 100%; padding: .85rem 1rem; } }
.acc-rf-plis { border-radius: 16px; border: 1px dashed var(--border-hover); background: transparent; }
.acc-rf-plis > summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1rem; cursor: pointer; list-style: none; font-size: .86rem; font-weight: 600; color: var(--text-secondary); }
.acc-rf-plis > summary::-webkit-details-marker { display: none; }
.acc-rf-plis > summary:hover { color: var(--text); }
.acc-rf-plis > summary i.fa-history { color: var(--red); margin-right: .35rem; }
.acc-rf-plis > summary em { font-style: normal; font-size: .7rem; font-weight: 700; margin-left: .4rem; padding: .1rem .45rem; border-radius: 999px; background: var(--red); color: #fff; }
.acc-rf-plis > summary .fa-chevron-down { font-size: .7rem; transition: transform .25s ease; }
.acc-rf-plis[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.acc-rf-plis > .rft-liste { padding: 0 .6rem .6rem; }
#demandes { scroll-margin-top: 80px; }
.tip-fond { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(5,5,8,.85); backdrop-filter: blur(6px); }
.tip-fond[hidden] { display: none; }
.tip { position: relative; width: min(560px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.5rem 1.4rem 1.3rem; border: 1px solid var(--border-hover); border-radius: 22px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: rf-entree .25s cubic-bezier(.16,1,.3,1); }
.tip h3 { margin: 0 2.4rem 1.1rem 0; font-family: var(--font-display); font-size: 1.15rem; }
.tip h3 i { margin-right: .35rem; }
.tip-scene { display: flex; align-items: center; gap: 1.4rem; }
.tip-tel { flex-shrink: 0; width: 196px; height: 392px; padding: 9px; border-radius: 36px; background: #050507; border: 2px solid #2a2a30; box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 0 0 2px #111; }
.tip-ecran { position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden; background: #0d0d0f; font-family: -apple-system, var(--font); }
.tip-ecran img { display: block; }
.tip-page { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tip-barre-haut { margin: 26px 10px 8px; padding: 5px 8px; border-radius: 9px; background: #1e1e22; color: #b4b4c4; font-size: 9px; text-align: center; }
.tip-contenu { flex: 1; padding: 6px 14px; display: flex; flex-direction: column; gap: 7px; }
.tip-logo img { width: 44px; height: 44px; border-radius: 11px; margin: 6px auto 8px; }
.tip-contenu > i { display: block; height: 8px; border-radius: 4px; background: #1e1e22; }
.tip-contenu > i.court { width: 60%; }
.tip-safari { display: flex; justify-content: space-around; align-items: center; height: 46px; padding-bottom: 8px; background: #161618; border-top: 1px solid #222; color: #4f8cff; font-size: 13px; }
.tip-partager { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; animation: tip-share 14s infinite; }
.tip-feuille { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; padding: 6px 10px 14px; border-radius: 16px 16px 0 0; background: #1c1c1f; transform: translateY(105%); animation: tip-feuille 14s infinite; }
.tip-poignee { width: 34px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: #3a3a42; }
.tip-ligne { display: flex; align-items: center; gap: 8px; height: 30px; margin-bottom: 5px; padding: 0 10px; border-radius: 9px; background: #26262b; color: #ededf0; font-size: 10px; }
.tip-ligne i { width: 12px; color: #b4b4c4; }
.tip-cible { animation: tip-cible 14s infinite; }
.tip-ajout { position: absolute; left: 0; right: 0; top: 0; padding: 26px 10px 14px; background: #1c1c1f; border-radius: 0 0 16px 16px; transform: translateY(-105%); animation: tip-ajout 14s infinite; }
.tip-ajout-haut { display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; color: #4f8cff; }
.tip-ajout-haut b { color: #ededf0; white-space: nowrap; font-size: 9px; }
.tip-ajouter { padding: 3px 6px; border-radius: 6px; font-weight: 700; animation: tip-ajouter 14s infinite; }
.tip-ajout-app { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 8px; border-radius: 10px; background: #26262b; color: #ededf0; font-size: 10px; }
.tip-ajout-app img { width: 34px; height: 34px; border-radius: 8px; }
.tip-ajout-app small { display: block; color: #87879a; font-size: 8.5px; }
.tip-accueil { position: absolute; inset: 0; padding: 38px 16px; background: radial-gradient(circle at 30% 20%, #3b1218, #0d0d0f 70%); opacity: 0; animation: tip-accueil 14s infinite; }
.tip-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
.tip-grille > span { display: block; aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,.12); }
.tip-grille > .tip-app { background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; animation: tip-app 14s infinite; }
.tip-app img { width: 100%; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255,45,59,.6); }
.tip-app small { font-size: 7px; color: #fff; }
.tip-notif { position: absolute; left: 8px; right: 8px; top: 30px; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: rgba(40,40,46,.92); color: #fff; font-size: 9.5px; box-shadow: 0 10px 24px rgba(0,0,0,.5); transform: translateY(-160%); animation: tip-notif 14s infinite; }
.tip-notif img { width: 26px; height: 26px; border-radius: 7px; }
.tip-notif small { display: block; color: #d0d0da; font-size: 8.5px; }
.tip-doigt { position: absolute; z-index: 5; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(255,255,255,.35); border: 2px solid rgba(255,255,255,.85); left: 50%; top: 55%; opacity: 0; animation: tip-doigt 14s infinite; }
.tip-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.tip-etapes li { position: relative; display: block; padding: .55rem .7rem .55rem 2.5rem; border-radius: 12px; border: 1px solid transparent; font-size: .84rem; color: var(--text-secondary); line-height: 1.4; }
.tip-etapes li b { position: absolute; left: .7rem; top: .55rem; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; background: var(--surface-3); color: var(--text); }
.tip-etapes li strong { color: var(--text); }
.tip-etapes li:nth-child(1) { animation: tip-e1 14s infinite; }
.tip-etapes li:nth-child(2) { animation: tip-e2 14s infinite; }
.tip-etapes li:nth-child(3) { animation: tip-e3 14s infinite; }
.tip-etapes li:nth-child(4) { animation: tip-e4 14s infinite; }
.tip-note { margin: 1rem 0 .9rem; font-size: .78rem; color: var(--text-secondary); }
.tip-ok { width: 100%; justify-content: center; }
.appn-comment { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; padding: .4rem .8rem; border-radius: 999px; border: 1px solid rgba(251,191,36,.45); background: rgba(251,191,36,.1); color: #fde68a; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; align-self: flex-start; }
.appn-comment:hover { background: rgba(251,191,36,.2); }
@keyframes tip-doigt {
0% { opacity: 0; left: 55%; top: 60%; }
5% { opacity: 1; left: 55%; top: 60%; }
11% { left: 50%; top: 93%; transform: scale(1); }
12.5% { transform: scale(.75); }
14% { left: 50%; top: 93%; transform: scale(1); }
26% { left: 55%; top: 79%; transform: scale(1); }
29% { left: 55%; top: 79%; transform: scale(.75); }
31% { left: 55%; top: 79%; transform: scale(1); }
46% { left: 84%; top: 8%; transform: scale(1); }
49% { left: 84%; top: 8%; transform: scale(.75); }
51% { left: 84%; top: 8%; transform: scale(1); opacity: 1; }
55%, 100% { left: 84%; top: 8%; opacity: 0; }
}
@keyframes tip-share { 0%, 11% { background: transparent; } 12.5%, 15% { background: rgba(79,140,255,.25); } 17%, 100% { background: transparent; } }
@keyframes tip-feuille { 0%, 14% { transform: translateY(105%); } 19%, 33% { transform: translateY(0); } 37%, 100% { transform: translateY(105%); } }
@keyframes tip-cible { 0%, 27% { background: #26262b; } 29%, 34% { background: rgba(79,140,255,.35); } 36%, 100% { background: #26262b; } }
@keyframes tip-ajout { 0%, 34% { transform: translateY(-105%); } 39%, 52% { transform: translateY(0); } 56%, 100% { transform: translateY(-105%); } }
@keyframes tip-ajouter { 0%, 48% { background: transparent; } 49%, 52% { background: rgba(79,140,255,.3); } 54%, 100% { background: transparent; } }
@keyframes tip-accueil { 0%, 55% { opacity: 0; } 59%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tip-app { 0%, 60% { transform: scale(0); } 64% { transform: scale(1.18); } 67%, 100% { transform: scale(1); } }
@keyframes tip-notif { 0%, 72% { transform: translateY(-160%); } 77%, 93% { transform: translateY(0); } 97%, 100% { transform: translateY(-160%); } }
@keyframes tip-e1 { 0%, 24% { background: rgba(255,45,59,.12); border-color: rgba(255,45,59,.4); } 26%, 100% { background: transparent; border-color: transparent; } }
@keyframes tip-e2 { 0%, 24% { background: transparent; border-color: transparent; } 26%, 40% { background: rgba(255,45,59,.12); border-color: rgba(255,45,59,.4); } 42%, 100% { background: transparent; border-color: transparent; } }
@keyframes tip-e3 { 0%, 40% { background: transparent; border-color: transparent; } 42%, 55% { background: rgba(255,45,59,.12); border-color: rgba(255,45,59,.4); } 57%, 100% { background: transparent; border-color: transparent; } }
@keyframes tip-e4 { 0%, 55% { background: transparent; border-color: transparent; } 57%, 97% { background: rgba(255,45,59,.12); border-color: rgba(255,45,59,.4); } 100% { background: transparent; border-color: transparent; } }
@media (max-width: 560px) {
.tip-fond { padding: 0; align-items: flex-end; }
.tip { border-radius: 22px 22px 0 0; max-height: 94vh; }
.tip-scene { flex-direction: column; gap: 1rem; }
.tip-tel { width: 176px; height: 352px; }
}
.rtk.rtk--clavier { position: fixed; left: 0; right: 0; z-index: 1050; margin: 0; border: 0; border-radius: 0; }
.rtk--clavier .rtk-head { padding: .55rem .8rem; }
.rtk--clavier .rtk-head .rft-logo { width: 46px; height: 28px; }
.rtk--clavier .rtk-cond, .rtk--clavier .rtk-avis-bandeau { display: none; }
.rtk--clavier .rtk-fil { flex: 1; height: auto; min-height: 0; }
.tip-chrome { display: flex; align-items: center; gap: 6px; margin: 24px 8px 8px; }
.tip-url { flex: 1; padding: 5px 9px; border-radius: 999px; background: #1e1e22; color: #b4b4c4; font-size: 9px; }
.tip-url i { font-size: 7px; margin-right: 3px; }
.tip-points { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; color: #ededf0; font-size: 11px; animation: tip-share 14s infinite; }
.tip-menu { position: absolute; top: 22px; right: 6px; width: 78%; padding: 5px 0; border-radius: 10px; background: #26262b; box-shadow: 0 10px 24px rgba(0,0,0,.5); transform-origin: top right; opacity: 0; transform: scale(.3); animation: tip-menu 14s infinite; }
.tip-menu .tip-ligne { height: 26px; margin: 0; border-radius: 0; font-size: 9.5px; }
.tip-dialog { position: absolute; left: 10px; right: 10px; top: 34%; padding: 12px; border-radius: 16px; background: #26262b; color: #ededf0; font-size: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.6); opacity: 0; transform: scale(.9); animation: tip-dialog 14s infinite; }
.tip-dialog-t { display: block; margin-bottom: 8px; font-size: 10.5px; white-space: nowrap; }
.tip-dialog .tip-ajout-app, .tip-pc-pop .tip-ajout-app { margin: 0 0 10px; background: #1c1c1f; }
.tip-dialog-btns { display: flex; justify-content: flex-end; align-items: center; gap: 12px; color: #8ab4f8; font-weight: 700; }
.tip-and .tip-doigt { animation-name: tip-doigt-and; }
.tip-and .tip-accueil { background: radial-gradient(circle at 70% 20%, #1d2a3b, #0d0d0f 70%); }
.tip-scene--pc { flex-direction: column; align-items: stretch; }
.tip-pc { position: relative; width: 100%; max-width: 360px; align-self: center; height: 220px; overflow: hidden; border: 1px solid #2a2a30; border-radius: 10px; background: #0d0d0f; box-shadow: 0 18px 40px rgba(0,0,0,.55); font-family: -apple-system, var(--font); }
.tip-pc img { display: block; }
.tip-pc-barre { display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: #1c1c1f; }
.tip-pc-barre > i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a42; }
.tip-pc-url { flex: 1; display: flex; align-items: center; justify-content: space-between; margin-left: 6px; padding: 2px 3px 2px 9px; border-radius: 999px; background: #26262b; color: #b4b4c4; font-size: 8.5px; }
.tip-pc-url i.fa-lock { font-size: 7px; margin-right: 3px; }
.tip-pc-url .tip-partager { width: 18px; height: 18px; border-radius: 6px; color: #ededf0; font-size: 9px; }
.tip-pc .tip-contenu { padding: 8px 18px; gap: 6px; }
.tip-pc .tip-logo img { width: 32px; height: 32px; margin: 4px 0 6px; }
.tip-pc-pop { position: absolute; top: 30px; right: 8px; width: 190px; padding: 10px; border-radius: 10px; background: #26262b; color: #ededf0; font-size: 9px; box-shadow: 0 14px 30px rgba(0,0,0,.6); opacity: 0; transform: translateY(-6px); animation: tip-pcpop 14s infinite; }
.tip-pc-pop .tip-dialog-t { font-size: 10px; }
.tip-pc-pop .tip-dialog-btns { justify-content: flex-start; }
.tip-pc-ok { padding: 4px 11px; border-radius: 999px; background: #8ab4f8; color: #0d0d0f; animation: tip-pcok 14s infinite; }
.tip-pc-app { position: absolute; inset: 14% 9% 9%; overflow: hidden; border: 1px solid #33333b; border-radius: 8px; background: #141416; box-shadow: 0 16px 34px rgba(0,0,0,.7); opacity: 0; transform: scale(.9); animation: tip-pcapp 14s infinite; }
.tip-pc-app-barre { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #1c1c1f; color: #ededf0; font-size: 9px; font-weight: 700; }
.tip-pc-app-barre img { width: 13px; height: 13px; border-radius: 3px; }
.tip-pc-app-barre span { margin-left: auto; display: flex; gap: 9px; color: #87879a; font-size: 8px; }
.tip-pc-toast { position: absolute; right: 8px; bottom: 8px; width: 56%; display: flex; align-items: center; gap: 7px; padding: 7px; border-radius: 10px; background: rgba(40,40,46,.96); color: #fff; font-size: 9px; box-shadow: 0 10px 24px rgba(0,0,0,.5); transform: translateX(130%); animation: tip-toast 14s infinite; }
.tip-pc-toast img { width: 24px; height: 24px; border-radius: 6px; }
.tip-pc-toast small { display: block; color: #d0d0da; font-size: 8px; }
.tip-curseur { position: absolute; z-index: 5; left: 50%; top: 60%; color: #fff; font-size: 15px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); opacity: 0; transform-origin: top left; animation: tip-curseur 14s infinite; }
@keyframes tip-menu { 0%, 14% { opacity: 0; transform: scale(.3); } 18%, 33% { opacity: 1; transform: scale(1); } 36%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes tip-dialog { 0%, 35% { opacity: 0; transform: scale(.9); } 39%, 52% { opacity: 1; transform: scale(1); } 55%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes tip-doigt-and {
0% { opacity: 0; left: 50%; top: 60%; }
5% { opacity: 1; left: 50%; top: 60%; }
11% { left: 89%; top: 9%; transform: scale(1); }
12.5% { transform: scale(.75); }
14% { left: 89%; top: 9%; transform: scale(1); }
26% { left: 55%; top: 32%; transform: scale(1); }
29% { left: 55%; top: 32%; transform: scale(.75); }
31% { left: 55%; top: 32%; transform: scale(1); }
46% { left: 80%; top: 68%; transform: scale(1); }
49% { left: 80%; top: 68%; transform: scale(.75); }
51% { left: 80%; top: 68%; transform: scale(1); opacity: 1; }
55%, 100% { left: 80%; top: 68%; opacity: 0; }
}
@keyframes tip-curseur {
0% { opacity: 0; left: 50%; top: 62%; }
5% { opacity: 1; left: 50%; top: 62%; }
11% { left: calc(100% - 24px); top: 12px; transform: scale(1); }
12.5% { transform: scale(.8); }
14% { left: calc(100% - 24px); top: 12px; transform: scale(1); }
26% { left: calc(100% - 168px); top: 130px; transform: scale(1); }
29% { left: calc(100% - 168px); top: 130px; transform: scale(.8); }
31% { left: calc(100% - 168px); top: 130px; transform: scale(1); opacity: 1; }
35%, 100% { left: calc(100% - 168px); top: 130px; opacity: 0; }
}
@keyframes tip-pcpop { 0%, 13% { opacity: 0; transform: translateY(-6px); } 16%, 31% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes tip-pcok { 0%, 28% { box-shadow: none; } 29%, 32% { box-shadow: 0 0 0 3px rgba(138,180,248,.45); } 34%, 100% { box-shadow: none; } }
@keyframes tip-pcapp { 0%, 36% { opacity: 0; transform: scale(.9); } 41%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9); } }
@keyframes tip-toast { 0%, 70% { transform: translateX(130%); } 75%, 93% { transform: translateX(0); } 97%, 100% { transform: translateX(130%); } }
@media (max-width: 720px) {
.rtk-champ textarea, .rtk-avis textarea, .rtk-avis input { font-size: 16px; }
}
.rtk.rtk--clavier { right: auto; }
html.rtk-clavier-on body::before { content: ''; position: fixed; top: -50vh; bottom: -50vh; left: 0; right: 0; z-index: 1049; background: var(--surface-2); }
html.rtk-clavier-on, html.rtk-clavier-on body { overscroll-behavior: none; }
.tip-ios .tip-contenu { padding-top: 30px; }
.tip-safari26 { display: flex; align-items: center; gap: 6px; padding: 6px 8px 14px; }
.tip-pill { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 30px; border-radius: 999px; background: rgba(44,44,50,.95); color: #ededf0; font-size: 11px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.tip-pill-url { flex: 1; font-size: 9.5px; color: #d0d0da; }
.tip-ios .tip-partager { width: 30px; height: 30px; border-radius: 999px; animation: tip-ishare 14s infinite; }
.tip-imenu { position: absolute; right: 8px; bottom: 52px; width: 62%; padding: 4px 0; border-radius: 14px; background: #2a2a30; box-shadow: 0 10px 24px rgba(0,0,0,.55); transform-origin: bottom right; opacity: 0; transform: scale(.3); animation: tip-imenu 14s infinite; }
.tip-imenu .tip-ligne { height: 26px; margin: 0; border-radius: 0; background: transparent; font-size: 9.5px; }
.tip-imenu .tip-icible { animation: tip-icible 14s infinite; }
.tip-ios .tip-feuille { animation-name: tip-ifeuille; }
.tip-ios .tip-doigt { animation-name: tip-doigt-ios; }
.tip-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 7px 8px; border-radius: 10px; background: #26262b; color: #ededf0; font-size: 9px; }
.tip-toggle span { position: relative; width: 26px; height: 15px; border-radius: 999px; background: #34c759; }
.tip-toggle span::after { content: ''; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
#tutoIphone .tip-etapes li:nth-child(1) { animation-name: tip-ie1; }
#tutoIphone .tip-etapes li:nth-child(2) { animation-name: tip-ie2; }
#tutoIphone .tip-etapes li:nth-child(3) { animation-name: tip-ie3; }
@keyframes tip-doigt-ios {
0% { opacity: 0; left: 50%; top: 55%; }
4% { opacity: 1; left: 50%; top: 55%; }
9% { left: 87%; top: 92%; transform: scale(1); }
10.5% { transform: scale(.75); }
12% { left: 87%; top: 92%; transform: scale(1); }
18% { left: 70%; top: 81%; transform: scale(1); }
19.5% { left: 70%; top: 81%; transform: scale(.75); }
21% { left: 70%; top: 81%; transform: scale(1); }
30% { left: 55%; top: 75%; transform: scale(1); }
32% { left: 55%; top: 75%; transform: scale(.75); }
34% { left: 55%; top: 75%; transform: scale(1); }
46% { left: 84%; top: 8%; transform: scale(1); }
49% { left: 84%; top: 8%; transform: scale(.75); }
51% { left: 84%; top: 8%; transform: scale(1); opacity: 1; }
55%, 100% { left: 84%; top: 8%; opacity: 0; }
}
@keyframes tip-ishare { 0%, 9.5% { background: rgba(44,44,50,.95); } 10.5%, 13% { background: rgba(79,140,255,.45); } 15%, 100% { background: rgba(44,44,50,.95); } }
@keyframes tip-imenu { 0%, 11% { opacity: 0; transform: scale(.3); } 13.5%, 21% { opacity: 1; transform: scale(1); } 23.5%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes tip-icible { 0%, 19% { background: transparent; } 19.5%, 22% { background: rgba(79,140,255,.35); } 23%, 100% { background: transparent; } }
@keyframes tip-ifeuille { 0%, 22% { transform: translateY(105%); } 26%, 35% { transform: translateY(0); } 38%, 100% { transform: translateY(105%); } }
@keyframes tip-ie1 { 0%, 21% { background: rgba(255,45,59,.12); border-color: rgba(255,45,59,.4); } 23%, 100% { background: transparent; border-color: transparent; } }
@keyframes tip-ie2 { 0%, 21% { background: transparent; border-color: transparent; } 23%, 36% { background: rgba(255,45,59,.12); border-color: rgba(255,45,59,.4); } 38%, 100% { background: transparent; border-color: transparent; } }
@keyframes tip-ie3 { 0%, 36% { background: transparent; border-color: transparent; } 38%, 55% { background: rgba(255,45,59,.12); border-color: rgba(255,45,59,.4); } 57%, 100% { background: transparent; border-color: transparent; } }
.tip-ajout-haut { gap: 4px; font-size: 8.5px; }
.tip-ajout-haut b { font-size: 8.5px; }
.tip-appli { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 7px; padding: 30px 12px 12px; background: #0d0d0f; opacity: 0; animation: tip-appli 14s infinite; }
.tip-appli > i { display: block; height: 8px; border-radius: 4px; background: #1e1e22; }
.tip-appli > i.court { width: 60%; }
.tip-appli-haut { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: #fff; font-size: 10px; font-weight: 800; }
.tip-appli-haut img { width: 18px; height: 18px; border-radius: 5px; }
.tip-appli-carte { display: flex; flex-direction: column; gap: 4px; padding: 9px; border-radius: 12px; border: 1px solid rgba(255,45,59,.4); background: rgba(255,45,59,.08); color: #ededf0; font-size: 9px; }
.tip-appli-carte small { color: #b4b4c4; font-size: 8px; }
.tip-activer { margin-top: 3px; padding: 6px; border-radius: 999px; background: #ff2d3b; color: #fff; font-size: 9px; font-weight: 700; text-align: center; animation: tip-activer 14s infinite; }
.tip-perm { position: absolute; left: 14px; right: 14px; top: 38%; overflow: hidden; border-radius: 14px; background: rgba(44,44,50,.98); color: #fff; font-size: 9.5px; text-align: center; box-shadow: 0 14px 30px rgba(0,0,0,.6); opacity: 0; transform: scale(1.1); animation: tip-perm 14s infinite; }
.tip-perm b { display: block; padding: 12px 10px 3px; }
.tip-perm small { display: block; padding: 0 10px 10px; color: #b4b4c4; font-size: 8px; }
.tip-perm-btns { display: flex; border-top: 1px solid #3a3a42; }
.tip-perm-btns span { flex: 1; padding: 8px 4px; color: #4f8cff; }
.tip-perm-btns span + span { border-left: 1px solid #3a3a42; font-weight: 700; }
.tip-autoriser { animation: tip-autoriser 14s infinite; }
.tip-ecran > .tip-notif { z-index: 4; }
@keyframes tip-appli { 0%, 65% { opacity: 0; } 67.5%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tip-activer { 0%, 71% { box-shadow: none; filter: none; } 71.5%, 73.5% { box-shadow: 0 0 0 3px rgba(255,45,59,.4); filter: brightness(1.25); } 75%, 100% { box-shadow: none; filter: none; } }
@keyframes tip-perm { 0%, 73.5% { opacity: 0; transform: scale(1.1); } 75.5%, 79.5% { opacity: 1; transform: scale(1); } 81.5%, 100% { opacity: 0; transform: scale(1.1); } }
@keyframes tip-autoriser { 0%, 78% { background: transparent; } 78.5%, 80.5% { background: rgba(79,140,255,.3); } 81%, 100% { background: transparent; } }
@keyframes tip-notif { 0%, 83% { transform: translateY(-160%); } 87%, 95% { transform: translateY(0); } 98%, 100% { transform: translateY(-160%); } }
@keyframes tip-doigt-ios {
0% { opacity: 0; left: 50%; top: 55%; }
4% { opacity: 1; left: 50%; top: 55%; }
9% { left: 87%; top: 92%; transform: scale(1); }
10.5% { transform: scale(.75); }
12% { left: 87%; top: 92%; transform: scale(1); }
18% { left: 70%; top: 81%; transform: scale(1); }
19.5% { left: 70%; top: 81%; transform: scale(.75); }
21% { left: 70%; top: 81%; transform: scale(1); }
30% { left: 55%; top: 75%; transform: scale(1); }
32% { left: 55%; top: 75%; transform: scale(.75); }
34% { left: 55%; top: 75%; transform: scale(1); }
46% { left: 84%; top: 8%; transform: scale(1); }
49% { left: 84%; top: 8%; transform: scale(.75); }
51% { left: 84%; top: 8%; transform: scale(1); opacity: 1; }
55% { left: 84%; top: 8%; opacity: 0; }
60% { left: 83%; top: 26%; opacity: 0; transform: scale(1); }
62% { left: 83%; top: 26%; opacity: 1; transform: scale(1); }
63.5% { left: 83%; top: 26%; transform: scale(.75); }
65% { left: 83%; top: 26%; transform: scale(1); }
70% { left: 50%; top: 43%; transform: scale(1); }
71.5% { left: 50%; top: 43%; transform: scale(.75); }
73% { left: 50%; top: 43%; transform: scale(1); }
77% { left: 70%; top: 70%; transform: scale(1); }
78.5% { left: 70%; top: 70%; transform: scale(.75); }
80% { left: 70%; top: 70%; transform: scale(1); opacity: 1; }
83%, 100% { left: 70%; top: 70%; opacity: 0; }
}
@keyframes tip-doigt-and {
0% { opacity: 0; left: 50%; top: 60%; }
5% { opacity: 1; left: 50%; top: 60%; }
11% { left: 89%; top: 9%; transform: scale(1); }
12.5% { transform: scale(.75); }
14% { left: 89%; top: 9%; transform: scale(1); }
26% { left: 55%; top: 32%; transform: scale(1); }
29% { left: 55%; top: 32%; transform: scale(.75); }
31% { left: 55%; top: 32%; transform: scale(1); }
46% { left: 80%; top: 68%; transform: scale(1); }
49% { left: 80%; top: 68%; transform: scale(.75); }
51% { left: 80%; top: 68%; transform: scale(1); opacity: 1; }
55% { left: 80%; top: 68%; opacity: 0; }
60% { left: 83%; top: 26%; opacity: 0; transform: scale(1); }
62% { left: 83%; top: 26%; opacity: 1; transform: scale(1); }
63.5% { left: 83%; top: 26%; transform: scale(.75); }
65% { left: 83%; top: 26%; transform: scale(1); }
70% { left: 50%; top: 43%; transform: scale(1); }
71.5% { left: 50%; top: 43%; transform: scale(.75); }
73% { left: 50%; top: 43%; transform: scale(1); }
77% { left: 70%; top: 70%; transform: scale(1); }
78.5% { left: 70%; top: 70%; transform: scale(.75); }
80% { left: 70%; top: 70%; transform: scale(1); opacity: 1; }
83%, 100% { left: 70%; top: 70%; opacity: 0; }
}
.apn-form { display: flex; flex-direction: column; gap: .8rem; }
.apn-champ { display: flex; flex-direction: column; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.apn-champ textarea { resize: vertical; }
.apn-champ small { align-self: flex-end; font-weight: 400; }
.apn-apercu { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 16px; background: rgba(40,40,46,.9); border: 1px solid var(--border-hover); }
.apn-apercu img { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; }
.apn-apercu div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.apn-apercu b { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apn-apercu small { font-size: .78rem; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.apn-apercu time { align-self: flex-start; font-size: .68rem; color: var(--text-muted); }
.apn-form .btn { align-self: flex-start; }
.apn-barres { display: flex; align-items: flex-end; gap: .3rem; height: 120px; margin-bottom: 1rem; }
.apn-jour { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.apn-jour small { font-size: .62rem; color: var(--text-muted); }
.apn-col { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.apn-filtres { display: flex; flex-wrap: wrap; gap: .4rem; padding: 1rem 1.2rem .4rem; }
.apn-filtres .adm-pill { border: 1px solid rgba(255,255,255,.08); cursor: pointer; font: inherit; font-size: .78rem; padding: .35rem .8rem; }
.apn-filtres .adm-pill.is-on { background: rgba(255,59,59,.16); border-color: rgba(255,59,59,.45); color: #fff; }
#apnClients tr[hidden] { display: none; }
.apn-b { width: 40%; max-width: 9px; min-height: 2px; border-radius: 3px 3px 0 0; }
.apn-b--i, .apn-pt--i { background: var(--red); }
.apn-b--n, .apn-pt--n { background: #fbbf24; }
.apn-pt { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: .4rem; }
@media (max-width: 720px) { .apn-form .btn { align-self: stretch; justify-content: center; } }
.apn-pages { flex-direction: row; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.apn-pages legend { width: 100%; padding: 0; margin-bottom: .45rem; font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.apn-page { position: relative; cursor: pointer; }
.apn-page input { position: absolute; opacity: 0; pointer-events: none; }
.apn-page span { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--border-hover); background: var(--bg); color: var(--text-secondary); font-size: .8rem; font-weight: 600; transition: border-color .2s, background .2s, color .2s; }
.apn-page span i { font-size: .72rem; }
.apn-page:hover span { color: var(--text); border-color: rgba(255,45,59,.4); }
.apn-page input:checked + span { background: rgba(255,45,59,.14); border-color: rgba(255,45,59,.6); color: var(--text); }
.apn-page input:checked + span i { color: var(--red); }
.apn-page input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.apn-form .adm-card-head, .apn-stats .adm-card-head { flex-wrap: wrap; align-items: center; }
.apn-form .adm-card-head h2, .apn-stats .adm-card-head h2 { word-break: normal; }
.rf-encours { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; padding: .9rem 1.1rem; border-radius: 16px; border: 1px solid rgba(251,191,36,.4); background: linear-gradient(135deg, rgba(251,191,36,.1), var(--surface) 70%); color: var(--text); transition: border-color .2s; }
.rf-encours:hover { border-color: rgba(251,191,36,.7); }
.rf-encours-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fbbf24; background: rgba(251,191,36,.12); }
.rf-encours-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.rf-encours-txt small { font-size: .78rem; color: var(--text-secondary); }
.rf-encours-go { flex-shrink: 0; font-size: .82rem; font-weight: 700; color: #fde68a; white-space: nowrap; }
@media (max-width: 720px) { .rf-encours { flex-wrap: wrap; } .rf-encours-txt { flex-basis: calc(100% - 60px); } .rf-encours-go { margin-left: calc(42px + .9rem); } }
.tip-pc-app-corps { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; }
.tip-pc-app-corps > i { display: block; height: 7px; border-radius: 4px; background: #1e1e22; }
.tip-pc-app-corps > i.court { width: 60%; }
.tip-pc-activer { align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: #ff2d3b; color: #fff; font-size: 8.5px; font-weight: 700; animation: tip-pcactiver 14s infinite; }
.tip-pc-perm { position: absolute; top: 24px; left: 10px; width: 175px; padding: 9px; border-radius: 8px; background: #2a2a30; color: #ededf0; font-size: 8.5px; box-shadow: 0 12px 26px rgba(0,0,0,.6); opacity: 0; transform: translateY(-5px); animation: tip-pcperm 14s infinite; }
.tip-pc-perm b { display: block; margin-bottom: 8px; font-weight: 600; }
.tip-pc-perm b i { color: #8ab4f8; margin-right: 3px; }
.tip-pc-perm div { display: flex; gap: 6px; justify-content: flex-end; }
.tip-pc-perm span { padding: 3px 9px; border-radius: 999px; border: 1px solid #3a3a42; color: #8ab4f8; font-weight: 700; }
.tip-pc-autoriser { animation: tip-pcautoriser 14s infinite; }
@keyframes tip-pcactiver { 0%, 55% { box-shadow: none; filter: none; } 56%, 58% { box-shadow: 0 0 0 3px rgba(255,45,59,.4); filter: brightness(1.25); } 60%, 100% { box-shadow: none; filter: none; } }
@keyframes tip-pcperm { 0%, 58% { opacity: 0; transform: translateY(-5px); } 60%, 68% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes tip-pcautoriser { 0%, 65% { background: transparent; } 66%, 68% { background: rgba(138,180,248,.3); } 69%, 100% { background: transparent; } }
@keyframes tip-curseur {
0% { opacity: 0; left: 50%; top: 62%; }
5% { opacity: 1; left: 50%; top: 62%; }
11% { left: calc(100% - 24px); top: 12px; transform: scale(1); }
12.5% { transform: scale(.8); }
14% { left: calc(100% - 24px); top: 12px; transform: scale(1); }
26% { left: calc(100% - 168px); top: 130px; transform: scale(1); }
29% { left: calc(100% - 168px); top: 130px; transform: scale(.8); }
31% { left: calc(100% - 168px); top: 130px; transform: scale(1); opacity: 1; }
35% { left: calc(100% - 168px); top: 130px; opacity: 0; }
48% { left: calc(9% + 24px); top: 70px; opacity: 0; transform: scale(1); }
50% { left: calc(9% + 24px); top: 70px; opacity: 1; transform: scale(1); }
56% { left: calc(9% + 24px); top: 70px; transform: scale(.8); }
58% { left: calc(9% + 24px); top: 70px; transform: scale(1); }
64% { left: calc(9% + 96px); top: 108px; transform: scale(1); }
66% { left: calc(9% + 96px); top: 108px; transform: scale(.8); }
68% { left: calc(9% + 96px); top: 108px; transform: scale(1); opacity: 1; }
72%, 100% { left: calc(9% + 96px); top: 108px; opacity: 0; }
}
.rf-autre { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: 16px; border: 1px dashed var(--border-hover); background: var(--surface); color: var(--text); transition: border-color .2s, background .2s; }
.rf-autre:hover { border-color: rgba(255,45,59,.55); background: rgba(255,45,59,.05); }
.rf-autre-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--red); background: rgba(255,45,59,.12); }
.rf-autre-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; font-size: .92rem; }
.rf-autre-txt small { font-size: .8rem; color: var(--text-secondary); }
.rf-autre > .fa-chevron-right { color: var(--text-muted); }
.pdd-wrap { max-width: 760px; }
.pdd-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .4rem 0 1.2rem; }
.pdd-top h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); margin: .2rem 0 .4rem; }
.pdd-sub { color: var(--text-secondary); font-size: .9rem; max-width: 520px; margin: 0; }
.pdd-quota { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; background: rgba(0,210,106,.1); border: 1px solid rgba(0,210,106,.35); color: #3ee08f; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pdd-quota.is-vide { background: rgba(255,45,59,.1); border-color: rgba(255,45,59,.4); color: #ff7b85; }
.pdd-carte { border: 1px solid var(--border); border-radius: 20px; background: var(--surface); padding: 1.4rem; }
.pdd-bloque { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; padding: 2.4rem 1.4rem; }
.pdd-bloque h2 { margin: 0; font-family: var(--font-display); }
.pdd-bloque p { margin: 0; color: var(--text-secondary); }
.pdd-bloque-ic { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--red); background: rgba(255,45,59,.1); }
.pdd-etape + .pdd-etape { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.pdd-etape h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; font-size: 1rem; }
.pdd-etape h2 b { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; background: var(--red); color: #fff; }
.pdd-transporteurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.pdd-t { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .9rem .6rem; border-radius: 14px; border: 1px solid var(--border-hover); background: var(--bg); color: var(--text); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.pdd-t img { height: 34px; max-width: 100%; object-fit: contain; }
.pdd-t:hover { border-color: rgba(255,45,59,.45); }
.pdd-t.is-on { border-color: var(--red); background: rgba(255,45,59,.1); }
.pdd-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.pdd-mode { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; align-items: center; text-align: left; padding: .85rem 1rem; border-radius: 14px; border: 1px solid var(--border-hover); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.pdd-mode i { grid-row: span 2; font-size: 1.2rem; color: var(--text-secondary); }
.pdd-mode b { font-size: .9rem; }
.pdd-mode small { font-size: .75rem; color: var(--text-secondary); }
.pdd-mode.is-on { border-color: var(--red); background: rgba(255,45,59,.1); }
.pdd-mode.is-on i { color: var(--red); }
.pdd-suivi { display: flex; gap: .6rem; }
.pdd-suivi input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; }
.pdd-aide { margin: .5rem 0 0; font-size: .78rem; color: var(--text-muted); }
.pdd-detecte { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 12px; font-size: .84rem; background: rgba(255,255,255,.04); color: var(--text-secondary); }
.pdd-detecte.is-ok { background: rgba(0,210,106,.08); color: #3ee08f; }
.pdd-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.pdd-champ { display: flex; flex-direction: column; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.pdd-champ.is-auto input { border-color: rgba(0,210,106,.5); }
.pdd-go { margin-top: 1.1rem; width: 100%; justify-content: center; }
#pddErreur { margin-top: 1rem; }
.pdd-attente { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: 1.6rem 1rem .6rem; }
.pdd-attente small { color: var(--text-secondary); font-size: .8rem; }
.pdd-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--red); animation: pdd-tourne .8s linear infinite; }
@keyframes pdd-tourne { to { transform: rotate(360deg); } }
.pdd-resultat { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.pdd-ok { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.pdd-ok b { font-size: 1.05rem; }
.pdd-ok small { color: var(--text-secondary); font-size: .84rem; }
.pdd-ok-ic { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #0d0d0f; background: #00d26a; box-shadow: 0 0 0 8px rgba(0,210,106,.12); margin-bottom: .4rem; }
.pdd-apercu { max-width: 100%; max-height: 520px; border-radius: 12px; border: 1px solid var(--border); background: #fff; }
.pdd-dl { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
@media (max-width: 600px) {
.pdd-carte { padding: 1.1rem; }
.pdd-champs { grid-template-columns: 1fr; }
.pdd-suivi { flex-direction: column; }
.pdd-suivi .btn, .pdd-dl .btn { justify-content: center; }
.pdd-transporteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.apd-form { display: flex; flex-direction: column; gap: .8rem; }
.apd-form .btn { align-self: flex-start; }
.apd-sep { margin-top: .4rem; padding-top: .8rem; border-top: 1px solid var(--border); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.apd-ligne { display: flex; gap: .6rem; align-items: flex-end; }
.apd-ligne > .apn-champ, .apd-ligne > input { flex: 1; min-width: 0; }
.apd-ligne .btn { align-self: auto; flex-shrink: 0; }
.apd-port { flex: 0 0 110px !important; }
.apd-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.apd-liste li { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: .84rem; }
.apd-liste li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.apd-liste form { margin: 0; }
.apd-x { border: 0; background: none; color: var(--text-muted); cursor: pointer; padding: .2rem .4rem; }
.apd-x:hover { color: var(--red); }
.apd-ko, .apd-okk { font-style: normal; font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.apd-ko { background: rgba(255,45,59,.12); color: #ff7b85; }
.apd-okk { background: rgba(0,210,106,.1); color: #3ee08f; }
.apd-attente, .apd-warn { font-style: normal; font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.apd-attente { background: rgba(255,255,255,.06); color: var(--text-muted, #9a9aa3); }
.apd-warn { background: rgba(255,170,0,.12); color: #ffbf47; }
.apd-quota { text-align: right; max-width: 45%; line-height: 1.25; }
.apd-reverif { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 720px) { .apd-ligne { flex-wrap: wrap; } .apd-ligne .btn { width: 100%; justify-content: center; } }
.pdd-attente[hidden], .pdd-resultat[hidden], .pdd-etape[hidden] { display: none; }
.pdd-t { position: relative; }
.pdd-t.is-fixe { cursor: default; }
.pdd-t.is-lock { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.pdd-t.is-lock:hover { border-color: var(--border-hover); }
.pdd-t-lock { position: absolute; top: .5rem; right: .55rem; font-size: .75rem; color: var(--text-muted); }
.pdd-fixe { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: 14px; border: 1px solid rgba(255,45,59,.45); background: linear-gradient(135deg, rgba(255,45,59,.1), var(--bg) 70%); }
.pdd-fixe-logo { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
.pdd-fixe-logo img { width: 100%; height: 100%; object-fit: contain; }
.pdd-fixe-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.pdd-fixe-txt b { font-size: 1rem; }
.pdd-fixe-txt small { font-size: .78rem; color: var(--text-secondary); }
.pdd-fixe-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--text-secondary); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.pdd-fixe-badge i { font-size: .68rem; }
@media (max-width: 600px) { .pdd-fixe { flex-wrap: wrap; } .pdd-fixe-badge { margin-left: calc(46px + .9rem); } }
.pdd-aide--haut { margin: -.3rem 0 .8rem; font-size: .84rem; color: var(--text-secondary); }
.pdd-articles { display: flex; flex-direction: column; gap: .6rem; }
.pdd-article { width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; border-color: var(--border-hover); background: var(--bg); transition: border-color .2s, background .2s; }
.pdd-article:hover { border-color: rgba(255,45,59,.45); }
.pdd-article.is-on { border-color: rgba(255,45,59,.6); background: linear-gradient(135deg, rgba(255,45,59,.12), var(--bg) 70%); }
.pdd-article-ok { color: var(--border-hover); font-size: 1.15rem; }
.pdd-article.is-on .pdd-article-ok { color: var(--red); }
#pddErreur[hidden] { display: none; }
.apd-info { margin: 0; line-height: 1.5; }
.cmp-lbl { margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.cmp-lbl i { color: var(--red); margin-right: .3rem; }
.tpf-tile .cmp-tile-name { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.tpf-logo { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
#transporteurs { scroll-margin-top: 80px; }
.tp-card[hidden] { display: none; }
.rv-badge { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; padding: .4rem .9rem; border-radius: 99px; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #4ade80; font-size: .85rem; font-weight: 600; }
.rv-avant { color: var(--text-muted, #8a8a99); font-weight: 400; font-size: .8em; margin-right: .2rem; }
.rv-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 99px; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.4); color: #4ade80; font-size: .75rem; font-weight: 700; vertical-align: middle; }
.rv-card > summary { display: flex; align-items: center; justify-content: space-between; gap: .6rem; cursor: pointer; list-style: none; font-weight: 600; }
.rv-card > summary::-webkit-details-marker { display: none; }
.rv-card[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.rv-form { margin-top: 1rem; display: grid; gap: 1rem; }
.rv-actif { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.rv-actif input { margin-top: .25rem; accent-color: #22c55e; }
.rv-aide { margin: 0; font-size: .85rem; }
.rv-sups { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.rv-sups label { display: grid; gap: .3rem; font-size: .85rem; }
.rv-in { display: flex; align-items: center; gap: .35rem; }
.rv-in input { width: 100%; min-width: 0; text-align: right; }
.rv-in i { font-style: normal; color: var(--text-muted, #8a8a99); font-size: .85rem; white-space: nowrap; }
.rv-groupe { border-top: 1px solid rgba(255,255,255,.08); padding-top: .75rem; }
.rv-groupe h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: .95rem; }
.rv-groupe h3 img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; }
.rv-ligne { display: grid; grid-template-columns: 1fr auto 130px; align-items: center; gap: .75rem; padding: .3rem 0; }
.rv-ligne em { font-style: normal; font-size: .7rem; padding: .05rem .4rem; border-radius: 99px; background: rgba(255,255,255,.08); }
.rv-normal { color: var(--text-muted, #8a8a99); font-size: .85rem; }
.rv-ligne.is-perso .rv-normal { text-decoration: line-through; }
.rv-ligne.is-perso input { border-color: rgba(34,197,94,.6); }
.rv-save { justify-self: start; }
@media (max-width: 560px) {
.rv-ligne { grid-template-columns: 1fr 96px; }
.rv-normal { display: none; }
}
.rvr-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1rem 0 1.25rem; }
.rvr-head h1 { margin: .2rem 0; }
.rvr-periodes { display: flex; flex-wrap: wrap; gap: .4rem; }
.rvr-periodes a { padding: .4rem .8rem; border-radius: 99px; border: 1px solid rgba(255,255,255,.12); color: var(--text-secondary); font-size: .85rem; text-decoration: none; }
.rvr-periodes a.is-active { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.5); color: #4ade80; font-weight: 600; }
.rvr-kpis { margin-bottom: 1rem; }
.rvr-copie { margin-bottom: 1rem; }
.rvr-copie .adm-card-head { flex-wrap: wrap; gap: .6rem; }
.rvr-copie .btn.is-ok { background: #16a34a; border-color: #16a34a; }
.rvr-texte { width: 100%; margin-top: .75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.5; resize: vertical; white-space: pre; overflow-x: auto; }
.rvr-groupe { margin-bottom: 1rem; }
.rvr-groupe h2 { display: flex; align-items: center; gap: .5rem; }
.rvr-groupe h2 img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; }
.rvr-types { margin: 0; padding: 0 1.25rem .5rem; color: var(--text-muted); font-size: .85rem; }
.rv-recap-btn { border-color: rgba(34,197,94,.45); color: #4ade80; }
.acc-kpi-solde.is-negatif { border-color: rgba(239,68,68,.4); background: linear-gradient(135deg, rgba(239,68,68,.12), var(--surface) 70%); }
.acc-kpi-solde.is-negatif strong, .acc-kpi-solde.is-negatif .adm-kpi-lbl i, .acc-kpi-solde.is-negatif .acc-kpi-cta { color: #ef4444; }
.rc-solde.is-negatif { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.35) !important; }
.rc-solde.is-negatif strong { color: #ef4444; }
.adm-suivi { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .3rem; padding: .2rem .55rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; font-weight: 700; letter-spacing: .02em; cursor: pointer; vertical-align: middle; }
.adm-suivi i { font-size: .7rem; color: var(--text-muted); }
.adm-suivi:hover { border-color: rgba(96,165,250,.6); }
.adm-suivi.is-copied { border-color: #22c55e; }
.adm-suivi.is-copied i, .adm-suivis-tous.is-copied i { color: #22c55e; }
.adm-suivis-tous { margin-top: .75rem; }
.fp-logo { color: var(--red); font-size: 1.4rem; background: var(--red-glow); border-color: rgba(255,45,59,.3); }
.fp-id { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; margin-bottom: 1rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.02); }
.fp-id-ic { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(42,171,238,.14); color: #2aabee; font-size: 1.1rem; }
.fp-id div { display: flex; flex-direction: column; gap: .15rem; font-size: .8rem; color: var(--text-secondary); }
.fp-id strong { color: var(--text); font-size: .92rem; }
.fp-wait .pay-done-icon { background: var(--surface-3); box-shadow: 0 0 0 10px rgba(255,255,255,.04); }
.fp-done { padding: 1.4rem 1rem 1.2rem; }
.fp-creds { display: grid; gap: .55rem; margin-bottom: 1.2rem; }
.fp-cred { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.fp-cred-lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.fp-cred-val { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; text-decoration: none; word-break: break-all; text-align: right; }
.fp-cred-val.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.fp-cred-val i { font-size: .78rem; color: var(--text-muted); transition: color .2s; }
.fp-cred-val:hover i { color: var(--accent); }
.fp-cred-val.is-copied i { color: #22c55e; }
.fp-steps { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .7rem; }
.fp-steps li { display: flex; gap: .75rem; font-size: .85rem; color: var(--text-secondary); line-height: 1.5; }
.fp-steps li > span { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--red-glow); color: var(--red); font-weight: 800; font-size: .78rem; }
.fp-steps strong { color: var(--text); }
.fp-go { width: 100%; justify-content: center; }
.fo-choix { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,5,7,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
.fo-choix[hidden] { display: none; }
.fo-choix.is-open { opacity: 1; }
.fo-choix-box { position: relative; width: 100%; max-width: 440px; padding: 1.8rem 1.4rem 1.4rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border-hover); box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: translateY(12px) scale(.98); transition: transform .25s var(--ease); }
.fo-choix.is-open .fo-choix-box { transform: none; }
.fo-choix-x { position: absolute; top: .7rem; right: .7rem; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.05); color: var(--text-secondary); cursor: pointer; }
.fo-choix-x:hover { color: var(--text); background: rgba(255,255,255,.1); }
.fo-choix-ic { width: 54px; height: 54px; margin: 0 auto .9rem; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--red); background: var(--red-glow); border: 1px solid rgba(255,45,59,.3); }
.fo-choix h2 { font-family: var(--font-display); font-size: 1.35rem; text-align: center; margin: 0 0 .35rem; }
.fo-choix p { text-align: center; font-size: .86rem; color: var(--text-secondary); margin: 0 0 1.3rem; }
.fo-choix-opts { display: grid; gap: .6rem; }
.fo-choix-opt { display: flex; align-items: center; gap: .85rem; padding: .95rem 1rem; border-radius: 12px; border: 1px solid var(--border-hover); background: var(--surface-2); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s, background .2s; }
.fo-choix-opt:hover { transform: translateY(-2px); border-color: rgba(255,45,59,.45); }
.fo-choix-opt > i:first-child { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); font-size: 1rem; }
.fo-choix-opt span { flex: 1; display: flex; flex-direction: column; gap: .1rem; font-size: .78rem; color: var(--text-secondary); }
.fo-choix-opt strong { font-size: .95rem; color: var(--text); }
.fo-choix-opt .fo-choix-go { color: var(--text-muted); font-size: .8rem; transition: transform .2s; }
.fo-choix-opt:hover .fo-choix-go { transform: translateX(3px); color: var(--text); }
.fo-choix-opt--pay { background: linear-gradient(135deg, rgba(255,45,59,.16), rgba(255,45,59,.04)); border-color: rgba(255,45,59,.4); }
.fo-choix-opt--pay > i:first-child { background: var(--red); color: #fff; }
.fo-choix-opt--q > i:first-child { color: #2aabee; background: rgba(42,171,238,.14); }
.fp-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; padding: 1.7rem 1.6rem 1.5rem; border-bottom: 1px solid var(--border);
background: radial-gradient(120% 140% at 0% 0%, rgba(255,45,59,.14), transparent 60%); border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fp-hero-kicker { display: inline-flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.fp-hero h1 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; margin: .35rem 0 .3rem; line-height: 1.1; }
.fp-hero p { margin: 0; font-size: .86rem; color: var(--text-secondary); }
.fp-price { text-align: right; flex-shrink: 0; }
.fp-price b { display: block; font-family: var(--font-display); font-size: 2.3rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.fp-price span { display: block; margin-top: .35rem; font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.fp-id { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; margin-bottom: 1rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.02); }
.fp-id-ic { width: 32px; height: 32px; font-size: .95rem; }
.fp-id-txt { flex: 1; font-size: .82rem; color: var(--text-secondary); }
.fp-id-val { font-size: .95rem; color: var(--text); }
.fp-side h2 { margin-bottom: .9rem; }
.fp-inc { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.fp-inc li { display: flex; align-items: center; gap: .7rem; font-size: .84rem; color: var(--text-secondary); }
.fp-inc li i { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--red); background: var(--red-glow); }
.fp-inc b { color: var(--text); }
.fp-split { margin-bottom: .2rem; }
@media (max-width: 560px) {
.fp-hero { flex-direction: column; align-items: flex-start; padding: 1.4rem 1.1rem 1.2rem; }
.fp-hero h1 { font-size: 1.6rem; }
.fp-price { text-align: left; display: flex; align-items: baseline; gap: .6rem; }
.fp-price b { font-size: 1.9rem; }
.fp-price span { margin: 0; }
.fp-id-txt { font-size: .76rem; }
}
.fp-tg { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; margin: 0 0 1.3rem; border-radius: 14px; text-decoration: none; color: #fff;
background: linear-gradient(135deg, #2aabee, #1d8fd0); box-shadow: 0 14px 34px rgba(42,171,238,.35); transition: transform .2s, box-shadow .2s; }
.fp-tg:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(42,171,238,.45); color: #fff; }
.fp-tg-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; background: rgba(255,255,255,.18); }
.fp-tg-txt { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.fp-tg-txt strong { font-size: 1rem; }
.fp-tg-txt small { font-size: .78rem; opacity: .85; }
.fp-tg-go { transition: transform .2s; }
.fp-tg:hover .fp-tg-go { transform: translateX(4px); }
.fp-reprise { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; margin-bottom: 1rem; border-radius: 12px; text-decoration: none; color: var(--text);
border: 1px solid rgba(245,158,11,.45); background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.03)); transition: transform .2s; }
.fp-reprise:hover { transform: translateY(-2px); color: var(--text); }
.fp-reprise-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(245,158,11,.18); color: #f59e0b; }
.fp-reprise-txt { flex: 1; display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.fp-reprise-txt small { font-size: .76rem; color: var(--text-secondary); }
.fp-reprise-go { font-size: .8rem; font-weight: 700; color: #f59e0b; white-space: nowrap; }
@media (max-width: 560px) { .fp-reprise-go { display: none; } }
.fp-rembourse { background: #f59e0b; box-shadow: 0 0 0 10px rgba(245,158,11,.14); }
.pay-partiel { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.pay-partiel span { font-size: .8rem; color: var(--text-muted, #9a9aa5); }
.pay-partiel strong { font-size: 1.15rem; color: #34d17b; }
.adm-kpis--4.acc-kpis3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .adm-kpis--4.acc-kpis3 { grid-template-columns: 1fr 1fr; } .acc-kpis3 .acc-kpi-solde { grid-column: 1 / -1; } }
.adm-card-head { align-items: center; }
.adm-card-head > .adm-muted { display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0; max-width: 60%; padding: .35rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 700; line-height: 1.3; color: #e4e6eb; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.adm-card-head > .adm-muted:has(.ds-ok) { color: #3ddc84; background: rgba(61,220,132,.12); border-color: rgba(61,220,132,.38); }
.adm-card-head > .adm-muted:has(.ds-ko) { color: #ff6b6b; background: rgba(255,93,93,.12); border-color: rgba(255,93,93,.38); }
.adm-card-head > .adm-muted .ds-ok, .adm-card-head > .adm-muted .ds-ko { color: inherit; }
@media (max-width: 600px) { .adm-card-head { flex-wrap: wrap; } .adm-card-head > .adm-muted { max-width: 100%; } }
.flow-alert.is-flottant { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 9999; width: max-content; max-width: min(92vw, 680px); margin: 0; box-shadow: 0 12px 32px rgba(0,0,0,.45); animation: place-flash .25s ease-out; }
@keyframes place-flash { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.page-hero.page-hero--adm { padding-top: 1.5rem; padding-bottom: 1rem; }
.rg-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; padding: .45rem; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.03); }
.rg-nav button { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.rg-nav button:hover { color: #fff; background: rgba(255,255,255,.06); }
.rg-nav button.is-active { color: #fff; background: rgba(229,57,53,.16); border-color: rgba(229,57,53,.5); }
.rg-nav button.is-active i { color: var(--red, #e53935); }
.rg-nav .rg-pt { width: .5rem; height: .5rem; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px rgba(61,220,132,.7); }
.rg-nav .rg-pt.off { background: #ff5d5d; box-shadow: 0 0 6px rgba(255,93,93,.6); }
.rg-nav .rg-alerte { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #ff5d5d; color: #fff; font-size: .7rem; font-weight: 800; }
#tab-liens [data-rub-carte][hidden] { display: none !important; }
@media (max-width: 600px) { .rg-nav { flex-wrap: nowrap; overflow-x: auto; } .rg-nav button { flex: 0 0 auto; } }
.cx-intro { margin: 0 0 1rem; color: #c3c7cf; font-size: .92rem; line-height: 1.55; }
.cx-intro b { color: #fff; }
.cx-etapes { display: grid; gap: .65rem; margin: 0 0 1.2rem; padding: 1rem 1.1rem 1rem 2.4rem; border-radius: 12px; background: rgba(42,171,238,.06); border: 1px solid rgba(42,171,238,.22); color: #d8dbe2; font-size: .9rem; line-height: 1.5; }
.cx-etapes b { color: #fff; }
.cx-etapes code, .cx-uri code { padding: .25rem .55rem; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); color: #7fd0ff; font-size: .85rem; word-break: break-all; }
.cx-uri { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; }
.cx-copier { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.cx-copier:hover { background: rgba(255,255,255,.12); }
.cx-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.cx-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cx-off { background: rgba(255,93,93,.14); color: #ff6b6b; border: 1px solid rgba(255,93,93,.4); }
.cx-off:hover { background: rgba(255,93,93,.22); }
.cx-secours > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
.cx-secours > summary::-webkit-details-marker { display: none; }
.cx-secours[open] > summary { margin-bottom: .9rem; }
.cx-secours .cx-fleche { font-size: .75rem; margin-left: .4rem; color: var(--text-muted); transition: transform .2s; }
.cx-secours[open] .cx-fleche { transform: rotate(180deg); }
.cx-secours > summary h2 i.fa-life-ring { color: #2aabee; margin-right: .3rem; }
#tab-liens .tg-aide { color: #b4b8c2; }
@media (max-width: 700px) { .cx-grille { grid-template-columns: 1fr; } }
.adm-card input:-webkit-autofill, .adm-card input:-webkit-autofill:hover, .adm-card input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #121216 inset !important; -webkit-text-fill-color: #f2f2f5 !important; caret-color: #fff; transition: background-color 9999s ease-out 0s; }
.bb-titre { margin: 1.1rem 0 .7rem; font-size: .95rem; font-weight: 700; color: #e4e6eb; }
.bb-titre small { font-weight: 500; color: var(--text-muted); }
.bb2-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; margin-bottom: 1.2rem; }
.bb2-liste { display: grid; gap: .45rem; }
.bb2-ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .8rem; border-radius: 11px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); }
.bb2-nom { font-weight: 600; color: #e4e6eb; font-size: .92rem; }
.bb2-coul { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.bb2-pt { position: relative; display: inline-grid; place-items: center; cursor: pointer; }
.bb2-pt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bb2-rond { width: 1.55rem; height: 1.55rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); transition: transform .12s, box-shadow .12s, border-color .12s; }
.bb2-pt-aucune .bb2-rond { background: linear-gradient(135deg, transparent 45%, rgba(255,255,255,.45) 45%, rgba(255,255,255,.45) 55%, transparent 55%), #2a2d35; }
.bb2-pt-danger .bb2-rond { background: #e5484d; }
.bb2-pt-primary .bb2-rond { background: #3b82f6; }
.bb2-pt-success .bb2-rond { background: #22a559; }
.bb2-pt:hover .bb2-rond { transform: scale(1.1); }
.bb2-pt input:checked + .bb2-rond { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); transform: scale(1.12); }
.bb2-pt input:focus-visible + .bb2-rond { outline: 2px solid #fff; outline-offset: 2px; }
.bb2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bb2-perso { display: grid; gap: .55rem; padding: .8rem; margin-bottom: .6rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); transition: opacity .15s; }
.bb2-perso.bb2-barre { opacity: .45; }
.bb2-nouveau { border-style: dashed; border-color: rgba(42,171,238,.4); background: rgba(42,171,238,.05); }
.bb2-etiquette { font-size: .82rem; font-weight: 700; color: #7fd0ff; }
.bb2-champs { display: grid; grid-template-columns: 1fr 1.3fr; gap: .55rem; }
.bb2-bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bb2-suppr { display: inline-flex; align-items: center; gap: .4rem; color: #ff7b7b; font-size: .85rem; font-weight: 600; cursor: pointer; }
.bb2-vide { margin: 0 0 .7rem; }
.bb2-apercu-col { position: sticky; top: 1rem; }
.bb2-tg { padding: 1rem; border-radius: 16px; background: linear-gradient(160deg, #17212b, #0e1621); border: 1px solid rgba(255,255,255,.08); }
.bb2-bulle { padding: .7rem .9rem; border-radius: 12px 12px 12px 4px; background: #182533; color: #e9eef3; font-size: .88rem; margin-bottom: .5rem; }
.bb2-clavier { display: grid; gap: .35rem; }
.bb2-rangee { display: flex; gap: .35rem; }
.bb2-btn { flex: 1 1 0; min-width: 0; padding: .55rem .5rem; border-radius: 9px; text-align: center; font-size: .82rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb2-btn.bb2-danger { background: #e5484d; }
.bb2-btn.bb2-primary { background: #3b82f6; }
.bb2-btn.bb2-success { background: #22a559; }
.bb2-note { margin: .5rem 0 0; font-size: .78rem; }
@media (max-width: 900px) { .bb2-grille { grid-template-columns: 1fr; } .bb2-apercu-col { position: static; } }
@media (max-width: 600px) { .bb2-champs { grid-template-columns: 1fr; } .bb2-ligne, .bb2-bas { flex-wrap: wrap; } }
.bb2-tg, .bb2-apercu-col { min-width: 0; overflow: hidden; }
.bb2-clavier { grid-template-columns: minmax(0, 1fr); }
.bb2-rangee { min-width: 0; }
@media (max-width: 640px) {
table.adm-fiches thead { display: none; }
table.adm-fiches, table.adm-fiches tbody { display: block; width: 100%; }
table.adm-fiches tr { display: block; padding: .7rem .9rem; margin: 0 0 .6rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
table.adm-fiches tr[hidden] { display: none !important; }
table.adm-fiches td { display: block; padding: .28rem 0; border: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
table.adm-fiches td::before { content: attr(data-label); float: left; margin-right: .8rem; max-width: 45%; text-align: left; font-size: .7rem; line-height: 1.9; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
table.adm-fiches td::after { content: ""; display: block; clear: both; }
table.adm-fiches td[data-label=""]::before { display: none; }
.adm-table-wrap:has(> table.adm-fiches) { overflow: visible; }
}
@media (max-width: 700px) {
.tf-qr, .tf-qr:has(.tf-kg2) { display: flex; flex-wrap: wrap; align-items: center; }
.tf-qr .tf-qr-icon { flex: 0 0 38px; }
.tf-qr .tf-qr-txt { flex: 1 1 calc(100% - 38px - .9rem); min-width: 0; }
.tf-qr > .tf-prix { flex: 1 1 110px; }
.tf-qr > .tf-kg2 { flex: 1 1 180px; }
.tf-qr .tf-kg2 .tf-prix { flex: 1 1 0; width: auto; min-width: 0; }
.tf-qr > .adm-btn { flex: 0 0 auto; }
}
select.ctc-input { color-scheme: dark; cursor: pointer; }
select.ctc-input option { background: var(--surface-2); color: var(--text); }
@supports (appearance: base-select) {
select.ctc-input,
select.ctc-input::picker(select) { appearance: base-select; }
select.ctc-input {
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
text-align: left; white-space: nowrap;
}
select.ctc-input::picker-icon {
color: var(--text-secondary); font-size: .7rem;
transition: rotate .2s var(--ease), color .2s ease;
}
select.ctc-input:hover::picker-icon { color: var(--text); }
select.ctc-input:open {
border-color: var(--red);
background: rgba(13,13,15,.75);
box-shadow: 0 0 0 3px var(--red-glow);
}
select.ctc-input:open::picker-icon { rotate: 180deg; color: var(--red); }
select.ctc-input::picker(select) {
margin-block: 6px;
padding: .35rem;
min-width: anchor-size(width);
max-height: min(340px, 60vh);
background: var(--surface-2);
border: 1px solid var(--border-hover);
border-radius: 10px;
box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
color: var(--text);
font-family: var(--font);
opacity: 0; translate: 0 -4px;
transition: opacity .16s ease, translate .16s var(--ease),
overlay .16s allow-discrete, display .16s allow-discrete;
}
select.ctc-input:open::picker(select) { opacity: 1; translate: 0 0; }
@starting-style {
select.ctc-input:open::picker(select) { opacity: 0; translate: 0 -4px; }
}
select.ctc-input option {
display: flex; align-items: center; gap: .6rem;
padding: .6rem .75rem;
border-radius: 7px;
background: transparent;
color: rgba(237,237,240,.78);
font-size: .86rem; line-height: 1.3;
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
select.ctc-input option + option { margin-top: 2px; }
select.ctc-input option:hover,
select.ctc-input option:focus-visible { background: var(--surface-3); color: var(--text); outline: none; }
select.ctc-input option:checked { background: rgba(255,45,59,.12); color: var(--text); font-weight: 600; }
select.ctc-input option:checked:hover { background: rgba(255,45,59,.18); }
select.ctc-input option::checkmark { order: 1; margin-left: auto; color: var(--red); font-weight: 700; }
select.ctc-input option:disabled { opacity: .45; cursor: not-allowed; }
.tf-row select.ctc-input option { font-size: .84rem; padding: .5rem .7rem; }
}
.pdd-resultat { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.pay-carte { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.1rem; border-radius: 12px; margin-bottom: 1rem;
border: 1px solid rgba(99,102,241,.4); background: linear-gradient(135deg, rgba(99,102,241,.12), transparent 70%); }
.pay-carte-head { display: flex; align-items: center; gap: .8rem; }
.pay-carte-ic { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(99,102,241,.18); color: #818cf8; flex-shrink: 0; }
.pay-carte-head div { display: flex; flex-direction: column; font-size: .8rem; color: var(--text-secondary); }
.pay-carte-head strong { color: var(--text); font-size: .92rem; }
.pay-carte-montant { margin: 0; }
.pay-carte-btn { width: 100%; justify-content: center; background: #4f46e5 !important; }
.pay-carte-note { font-size: .75rem; color: var(--text-secondary); }
.sc-wrap { display: flex; flex-direction: column; gap: 1rem; max-width: 980px; }
.sc-wrap[hidden] { display: none; }
.sc-etat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
background: linear-gradient(135deg, rgba(99,102,241,.14), var(--surface) 65%); border-color: rgba(99,102,241,.35); }
.sc-etat-titre { display: flex; align-items: center; gap: .85rem; }
.sc-etat-titre h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.sc-etat-titre small { font-size: .78rem; color: var(--text-secondary); }
.sc-etat-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: rgba(99,102,241,.2); color: #a5b4fc; flex-shrink: 0; }
.sc-badges { display: flex; flex-wrap: wrap; gap: .45rem; }
.sc-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; font-size: .76rem; font-weight: 700; border: 1px solid transparent; }
.sc-badge .fa-circle { font-size: .5rem; }
.sc-badge--ok { color: #3ddc84; background: rgba(61,220,132,.12); border-color: rgba(61,220,132,.3); }
.sc-badge--warn { color: #ffb547; background: rgba(255,181,71,.12); border-color: rgba(255,181,71,.3); }
.sc-badge--ko { color: #ff5d5d; background: rgba(255,93,93,.12); border-color: rgba(255,93,93,.3); }
.sc-badge--off { color: var(--text-secondary); background: rgba(255,255,255,.05); border-color: var(--border); }
.sc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sc-kpis .adm-kpi strong { font-size: 1.6rem; }
.sc-moyens { padding: 1rem 1.3rem; }
.sc-moyens-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .6rem; }
.sc-moyens-head small { font-weight: 500; color: var(--text-muted); }
.sc-barre { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.05); }
.sc-b-carte { background: #6366f1; } .sc-b-apple { background: #e5e7eb; } .sc-b-google { background: #34a853; }
.sc-legende { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .6rem; font-size: .76rem; color: var(--text-secondary); }
.sc-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.sc-legende b { color: var(--text); }
.sc-titre { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .95rem; font-weight: 700; margin: 0 0 .8rem; }
.sc-titre i { color: #818cf8; }
.sc-form .sc-titre:not(:first-of-type) { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.sc-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.sc-tg { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem .95rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.02); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.sc-tg:hover { border-color: var(--border-hover); }
.sc-tg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sc-sw { position: relative; width: 40px; height: 22px; flex-shrink: 0; margin-top: .1rem; border-radius: 999px; background: rgba(255,255,255,.12); transition: background .2s ease; }
.sc-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.sc-tg input:checked + .sc-sw { background: #16a34a; }
.sc-tg input:checked + .sc-sw::after { transform: translateX(18px); }
.sc-tg input:focus-visible + .sc-sw { box-shadow: 0 0 0 3px rgba(34,197,94,.35); }
.sc-tg:has(input:checked) { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.05); }
.sc-tg-txt { display: flex; flex-direction: column; gap: .2rem; }
.sc-tg-txt strong { font-size: .88rem; color: var(--text); }
.sc-tg-txt small { font-size: .74rem; color: var(--text-secondary); line-height: 1.45; }
.sc-plafonds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.sc-plafonds label, .sc-cles label { display: flex; flex-direction: column; gap: .35rem; font-size: .76rem; font-weight: 600; color: var(--text-secondary); }
.sc-eur { position: relative; display: block; }
.sc-eur input { width: 100%; padding-right: 2rem; }
.sc-eur i { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--text-muted); font-weight: 700; }
.sc-cles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.sc-cles input { width: 100%; }
.sc-aide { margin: .6rem 0 0; font-size: .74rem; color: var(--text-muted); }
.sc-webhook { margin-top: .9rem; padding: .9rem; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px dashed var(--border-hover); font-size: .76rem; color: var(--text-secondary); }
.sc-webhook-url { display: flex; align-items: center; gap: .6rem; margin: .45rem 0 .6rem; flex-wrap: wrap; }
.sc-webhook-url code { flex: 1; min-width: 0; padding: .5rem .7rem; border-radius: 8px; background: var(--bg); color: var(--text); font-size: .8rem; word-break: break-all; }
.sc-events { display: flex; flex-wrap: wrap; gap: .35rem; }
.sc-events code { padding: .2rem .5rem; border-radius: 6px; background: rgba(99,102,241,.12); color: #a5b4fc; font-size: .7rem; }
.sc-save { margin-top: 1.2rem; width: 100%; justify-content: center; }
.sc-table-wrap { overflow-x: auto; }
.sc-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.sc-table th { text-align: left; font-size: .68rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; padding: .5rem .6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sc-table td { padding: .6rem; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-secondary); }
.sc-table td b { color: var(--text); }
.sc-table td small { display: block; margin-top: .2rem; font-size: .68rem; color: var(--text-muted); max-width: 260px; }
.sc-table tr:last-child td { border-bottom: 0; }
.sc-test { font-size: .62rem; padding: .05rem .35rem; border-radius: 4px; background: rgba(255,181,71,.15); color: #ffb547; font-family: var(--font-body, inherit); }
.sc-st-ko { background: rgba(255,93,93,.12); color: #ff6b75; }
.sc-st-warn { background: rgba(245,166,35,.12); color: #f5a623; }
@media (max-width: 900px) { .sc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
.sc-kpis, .sc-toggles, .sc-plafonds, .sc-cles { grid-template-columns: 1fr; }
.sc-webhook-url .adm-btn { width: 100%; justify-content: center; }
}
.sc-embed { min-height: 120px; border-radius: 12px; overflow: hidden; }
.sc-cle-pub { grid-column: 1 / -1; }
.sc-apple { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.3rem; }
.sc-apple div { display: flex; flex-direction: column; gap: .25rem; }
.sc-apple strong { font-size: .88rem; }
.sc-apple small { font-size: .74rem; color: var(--text-secondary); }
@media (max-width: 640px) { .sc-apple .adm-btn { width: 100%; justify-content: center; } }
.sc-plafonds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-plafonds--4 {}
@media (max-width: 900px) { .sc-plafonds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sc-plafonds { grid-template-columns: 1fr; } }
.pay-coins--carte { margin-bottom: .6rem; }
.sc-pay { display: grid; gap: .75rem; }
.sc-pay-label { font-size: .82rem; color: var(--text-secondary); }
.sc-pay-email { width: 100%; }
.sc-pay-element { min-height: 140px; }
.sc-pay-btn { width: 100%; justify-content: center; margin-top: .35rem; background: #635bff; border-color: #635bff; }
.sc-pay-btn:disabled { opacity: .55; cursor: not-allowed; }
.sc-pay-secure { font-size: .74rem; color: var(--text-secondary); text-align: center; }
.flow-alert[hidden], .pay-loading[hidden] { display: none !important; }
.sc-pay-express:empty { display: none; }
.sc-pay .pay-or { margin: .2rem 0; }
.pay-coins { gap: .5rem; }
.pay-coins--carte { margin-bottom: .5rem; }
button.pay-coin {
display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 14px; align-items: center; column-gap: .85rem;
padding: .7rem .9rem; border-radius: 12px; font-size: inherit; font-weight: inherit;
background: rgba(255,255,255,.025); color: var(--text);
}
button.pay-coin .pay-coin-icon { width: 36px; height: 36px; font-size: 1rem; box-shadow: none; grid-column: 1; }
button.pay-coin .pay-coin-txt { grid-column: 2; gap: .1rem; }
button.pay-coin .pay-coin-txt strong { font-size: .92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.pay-coin .pay-coin-txt strong em { color: var(--text-secondary); font-size: .76rem; }
button.pay-coin .pay-coin-txt > span { font-size: .74rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.pay-coin .pay-coin-meta { margin-top: .05rem; font-size: .7rem; color: var(--text-secondary); }
button.pay-coin .pay-coin-badge { grid-column: 3; margin: 0; padding: .18rem .5rem; font-size: .66rem; }
button.pay-coin .pay-coin-go { grid-column: 4; margin: 0; justify-self: end; }
@media (max-width: 640px) {
button.pay-coin { grid-template-columns: 32px minmax(0, 1fr) 12px; column-gap: .7rem; padding: .65rem .75rem; }
button.pay-coin .pay-coin-icon { width: 32px; height: 32px; font-size: .9rem; }
button.pay-coin .pay-coin-badge { display: none; }
button.pay-coin .pay-coin-go { grid-column: 3; }
}
.sc-frais { display: grid; gap: .9rem; }
.sc-frais-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.sc-frais-kpis div { display: flex; flex-direction: column; gap: .2rem; padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.02); }
.sc-frais-kpis span { font-size: .72rem; color: var(--text-secondary); }
.sc-frais-kpis strong { font-size: 1.15rem; }
.sc-frais-kpis .is-reste { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.06); }
.sc-frais-kpis .is-reste strong { color: #22c55e; }
.sc-frais-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; }
.sc-frais-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sc-frais-liste li { display: flex; align-items: center; gap: .7rem; padding: .45rem .7rem; border-radius: 10px; background: rgba(255,255,255,.02); font-size: .8rem; }
.sc-frais-liste li span { color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-frais-liste form { margin: 0; }
.sc-frais-suppr { background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: .2rem .35rem; }
.sc-frais-suppr:hover { color: #ff6b6b; }
@media (max-width: 640px) { .sc-frais-form { grid-template-columns: 1fr; } .sc-frais-kpis strong { font-size: 1rem; } }
.sc-filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .8rem; }
.sc-filtres button { padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.02); color: var(--text-secondary); font: inherit; font-size: .78rem; cursor: pointer; }
.sc-filtres button b { margin-left: .25rem; color: var(--text); }
.sc-filtres button.is-active { border-color: #635bff; background: rgba(99,91,255,.14); color: var(--text); }
.sc-table tr[hidden] { display: none; }
.sc-ico { width: 1.1em; text-align: center; color: var(--text); }
button.pay-coin .pay-coin-frais { color: #fbbf24; font-weight: 600; }
button.pay-coin .pay-coin-badge--frais { color: #fbbf24; background: rgba(251,191,36,.12); }
.pay-or--carte { margin: .9rem 0 .5rem; }
@media (max-width: 640px) { button.pay-coin .pay-coin-badge--frais { display: none; } }