/* ============================================================
rabidpos.css — RabidPOS v5.0
Thème : Blanc · Or (#D4AF37) · Bleu Océan (#0077B6)
Africain Moderne · Minimaliste · Responsive
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Variables ────────────────────────────────────────────── */
:root {
--kp-blue: #0077B6;
--kp-blue-dark: #005F92;
--kp-blue-deep: #1B4F72;
--kp-blue-light: #E8F4FD;
--kp-gold: #D4AF37;
--kp-gold-light: #E8C956;
--kp-gold-dark: #B8961E;
--kp-gold-bg: #FBF6E8;
--kp-white: #FFFFFF;
--kp-bg: #F8FAFC;
--kp-bg2: #EFF6FF;
--kp-text: #1A2332;
--kp-text2: #334155;
--kp-muted: #64748B;
--kp-border: rgba(0,119,182,0.14);
--kp-border-gold: rgba(212,175,55,0.25);
--kp-green: #16A34A;
--kp-red: #DC2626;
--kp-amber: #D97706;
/* Alias fonctionnel */
--sc-primary: #D4AF37;
--sc-primary-dark: #B8961E;
--sc-violet: #6366F1;
--sc-green: #16A34A;
--sc-amber: #D97706;
--sc-red: #B91C1C;
--sc-text: #1A2332;
--sc-muted: #64748B;
--sc-bord: #E2E8F0;
--sc-bg: #F8FAFC;
}
/* ============================================================
KEYFRAMES
============================================================ */
@keyframes sh-float-up {
from { opacity: 0; transform: translateY(32px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes sh-float-bob {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes sh-badge-dot-pulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.75); }
}
@keyframes sh-wave-a { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes sh-wave-b { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@keyframes sh-wave-c { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes sh-fb-slide-right {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes sh-fb-slide-left {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes sh-prod-in {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes sh-mock-glow {
0%,100% { box-shadow: 0 20px 60px rgba(0,119,182,.18), 0 0 0 1px rgba(0,119,182,.10); }
50% { box-shadow: 0 28px 80px rgba(0,119,182,.28), 0 0 0 1px rgba(0,119,182,.18); }
}
@keyframes kp-glow-blue {
0%,100% { box-shadow: 0 0 40px 10px rgba(0,119,182,0.04); }
50% { box-shadow: 0 0 80px 30px rgba(0,119,182,0.10); }
}
@keyframes kp-glow-gold {
0%,100% { box-shadow: 0 0 40px 10px rgba(212,175,55,0.04); }
50% { box-shadow: 0 0 80px 30px rgba(212,175,55,0.09); }
}
@keyframes kp-cauris-drift {
0%,100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(2deg); }
}
@keyframes kp-shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes kp-aurora {
0%,100% { opacity:.55; transform: translate(0,0) scale(1); }
33% { opacity:.80; transform: translate(40px,-30px) scale(1.12); }
66% { opacity:.40; transform: translate(-30px,15px) scale(.92); }
}
@keyframes kp-badge-pop {
0% { opacity:0; transform: scale(.4) translateY(16px); }
55% { transform: scale(1.14) translateY(-4px); }
75% { transform: scale(.95) translateY(2px); }
100% { opacity:1; transform: scale(1) translateY(0); }
}
@keyframes kp-phone-enter-front {
from { opacity:0; transform: translateY(50px) rotate(3deg) scale(.92); }
to { opacity:1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes kp-phone-enter-back {
from { opacity:0; transform: translateY(70px) rotate(-4deg) scale(.88); }
to { opacity:1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes kp-neon-breathe {
0%,100% { box-shadow: 0 8px 32px rgba(0,119,182,.35), 0 0 0 0 rgba(0,119,182,.0); }
50% { box-shadow: 0 12px 44px rgba(0,119,182,.55), 0 0 22px 4px rgba(0,119,182,.18); }
}
@keyframes kp-gold-breathe {
0%,100% { box-shadow: 0 8px 32px rgba(212,175,55,.35); }
50% { box-shadow: 0 14px 48px rgba(212,175,55,.60), 0 0 20px 4px rgba(212,175,55,.20); }
}
@keyframes kp-scan-line {
0% { top: 0%; opacity:1; }
90% { top: 100%; opacity:.3; }
100% { top: 100%; opacity:0; }
}
@keyframes kp-float-cauri-1 {
0%,100% { transform: translateY(0) translateX(0) rotate(0deg) scale(1); opacity:.18; }
25% { transform: translateY(-28px) translateX(14px) rotate(12deg) scale(1.08); opacity:.26; }
75% { transform: translateY(18px) translateX(-10px) rotate(-8deg) scale(.94); opacity:.14; }
}
@keyframes kp-float-cauri-2 {
0%,100% { transform: translateY(0) translateX(0) rotate(0deg) scale(1); opacity:.14; }
40% { transform: translateY(-22px) translateX(-18px) rotate(-14deg) scale(1.05); opacity:.22; }
70% { transform: translateY(16px) translateX(12px) rotate(10deg) scale(.96); opacity:.10; }
}
@keyframes kp-grid-pulse {
0%,100% { opacity:.45; }
50% { opacity:.70; }
}
@keyframes kp-stat-count {
from { opacity:0; transform: translateY(10px); }
to { opacity:1; transform: translateY(0); }
}
@keyframes kp-hero-text-in {
from { opacity:0; transform: translateY(30px); filter: blur(4px); }
to { opacity:1; transform: translateY(0); filter: blur(0); }
}
/* ============================================================
BASE
============================================================ */
html {
overflow-x: hidden;
overscroll-behavior-x: none;
}
html { overflow-x: clip; }
.sh-body {
min-height: 100vh;
background: #FFFFFF;
font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: #1A2332;
overflow-x: clip;
overscroll-behavior-x: none;
}
/* ============================================================
FOND — motifs cauris + orbes doux
============================================================ */
.sh-scene {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* Motif cauris répété */
.sh-scene::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='66' viewBox='0 0 90 66'%3E%3Cellipse cx='45' cy='33' rx='30' ry='19' fill='none' stroke='%23D4AF37' stroke-width='1.4' opacity='0.13'/%3E%3Cpath d='M19,33 Q32,24 45,23 Q58,24 71,33 Q58,42 45,43 Q32,42 19,33Z' fill='none' stroke='%23D4AF37' stroke-width='0.9' opacity='0.09'/%3E%3Ccircle cx='45' cy='33' r='5' fill='none' stroke='%230077B6' stroke-width='0.8' opacity='0.06'/%3E%3C/svg%3E");
background-size: 90px 66px;
}
.sh-orb {
position: absolute;
border-radius: 50%;
filter: blur(90px);
}
.sh-orb-1 {
width: 650px; height: 650px;
background: radial-gradient(circle, rgba(0,119,182,0.10) 0%, transparent 70%);
top: -180px; right: -130px;
}
.sh-orb-2 {
width: 450px; height: 450px;
background: radial-gradient(circle, rgba(212,175,55,0.09) 0%, transparent 70%);
bottom: -80px; left: -80px;
}
.sh-orb-3 {
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(0,119,182,0.06) 0%, transparent 70%);
top: 40%; left: 48%;
}
.sh-grid {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(0,119,182,0.06) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 0%, transparent 100%);
}
.sh-wave-wrap {
position: absolute;
bottom: 0; left: 0;
width: 200%; height: 180px;
}
.sh-wave {
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 180px;
}
.sh-wave-a { animation: sh-wave-a 22s linear infinite; }
.sh-wave-b { animation: sh-wave-b 30s linear infinite; }
.sh-wave-c { animation: sh-wave-c 38s linear infinite; }
/* ============================================================
NAVIGATION
============================================================ */
.sh-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
gap: 32px;
padding: 0 48px;
height: 72px;
background: rgba(255,255,255,0.94);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1.5px solid rgba(0,119,182,0.10);
box-shadow: 0 2px 16px rgba(0,119,182,0.06);
}
.sh-nav-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
flex-shrink: 0;
cursor: pointer;
}
/* ── Logo images ─────────────────────────────────────────── */
.kp-logo-img {
border-radius: 50%;
object-fit: cover;
object-position: 50% 38%;
flex-shrink: 0;
mix-blend-mode: multiply;
transition: transform 0.3s ease, filter 0.3s ease;
}
.kp-logo-img:hover {
transform: scale(1.07);
filter: drop-shadow(0 4px 12px rgba(0,119,182,0.25));
}
.kp-logo-nav { width: 52px; height: 52px; }
.kp-logo-auth { width: 64px; height: 64px; }
.kp-logo-footer { width: 44px; height: 44px; }
/* Logo héro (grand format, pas circulaire) */
.sh-hero-logo-img {
width: 460px;
max-width: 88vw;
height: auto;
mix-blend-mode: multiply;
filter: drop-shadow(0 24px 60px rgba(0,119,182,0.16));
animation: sh-float-bob 6s ease-in-out infinite;
position: relative;
z-index: 1;
}
.sh-logo-wordmark {
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
color: #1A2332;
letter-spacing: -0.3px;
}
.sh-logo-wordmark em {
font-style: normal;
color: #0077B6;
}
.sh-nav-links {
display: flex;
align-items: center;
gap: 32px;
margin-left: auto;
}
.sh-nav-link {
font-size: 14px;
font-weight: 500;
color: #64748B;
text-decoration: none;
transition: color 0.2s;
position: relative;
}
.sh-nav-link::after {
content: '';
position: absolute;
bottom: -4px; left: 0; right: 0;
height: 2px;
background: var(--kp-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
border-radius: 1px;
}
.sh-nav-link:hover { color: #0077B6; }
.sh-nav-link:hover::after { transform: scaleX(1); }
/* Bouton "Se connecter" dans la nav */
.sh-nav-right { display: flex; align-items: center; gap: 10px; }
.sh-nav-login {
padding: 9px 20px;
border-radius: 100px;
border: 1.5px solid rgba(0,119,182,.30);
background: rgba(0,119,182,.06);
color: #0077B6;
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
white-space: nowrap;
}
.sh-nav-login:hover {
background: rgba(0,119,182,.12);
border-color: #0077B6;
box-shadow: 0 2px 12px rgba(0,119,182,.15);
}
/* "Se souvenir de moi" row */
.sh-remember-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.sh-nav-cta {
margin-left: 0;
padding: 10px 24px;
border-radius: 100px;
border: none;
background: linear-gradient(135deg, #D4AF37 0%, #B8961E 100%);
color: #1A2332;
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: transform .15s, box-shadow .2s;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(212,175,55,.40);
position: relative; overflow: hidden;
}
.sh-nav-cta::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
transform: translateX(-100%);
transition: transform .45s ease;
border-radius: inherit;
}
.sh-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(212,175,55,.55); }
.sh-nav-cta:hover::after { transform: translateX(100%); }
/* ============================================================
HERO
============================================================ */
.sh-hero {
position: relative;
z-index: 1;
min-height: 100vh;
display: flex;
align-items: center;
padding: 110px 48px 80px;
background: linear-gradient(145deg, #040E1C 0%, #071E38 45%, #0A2847 75%, #030C18 100%);
overflow: hidden;
}
/* Aurora blobs in hero — tailles en vw pour s'adapter au zoom */
.sh-hero::before {
content: '';
position: absolute;
width: clamp(350px, 55vw, 700px); height: clamp(350px, 55vw, 700px);
border-radius: 50%;
background: radial-gradient(circle, rgba(0,119,182,.22) 0%, transparent 65%);
top: -15vh; right: -8vw;
animation: kp-aurora 9s ease-in-out infinite;
pointer-events: none;
}
.sh-hero::after {
content: '';
position: absolute;
width: clamp(250px, 40vw, 500px); height: clamp(250px, 40vw, 500px);
border-radius: 50%;
background: radial-gradient(circle, rgba(212,175,55,.13) 0%, transparent 65%);
bottom: -10vh; left: -6vw;
animation: kp-aurora 12s ease-in-out infinite reverse;
pointer-events: none;
}
.sh-hero-inner {
max-width: 1200px;
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.sh-anim-up { animation: sh-float-up 0.8s cubic-bezier(0.22,1,0.36,1) both; }
.sh-anim-delay { animation-delay: 0.15s; }
/* Badge */
.sh-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 18px;
border-radius: 100px;
border: 1.5px solid rgba(212,175,55,0.50);
background: rgba(212,175,55,0.12);
color: #E8C956;
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
margin-bottom: 24px;
backdrop-filter: blur(8px);
animation: kp-hero-text-in .7s .1s cubic-bezier(.22,1,.36,1) both;
}
.sh-badge-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #D4AF37;
flex-shrink: 0;
animation: sh-badge-dot-pulse 2s ease-in-out infinite;
}
/* Titre */
.sh-headline {
font-family: 'Poppins', 'Inter', sans-serif;
font-size: clamp(36px, 4.5vw, 58px);
font-weight: 800;
line-height: 1.12;
color: #FFFFFF;
margin-bottom: 20px;
animation: kp-hero-text-in .8s .25s cubic-bezier(.22,1,.36,1) both;
}
.sh-headline-accent {
background: linear-gradient(90deg, #D4AF37 0%, #F5D76E 40%, #E8C956 60%, #D4AF37 100%);
background-size: 200% auto;
animation: kp-shimmer 3.5s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sh-subline {
font-size: 16px;
line-height: 1.8;
color: rgba(255,255,255,.62);
margin-bottom: 36px;
max-width: 460px;
font-weight: 400;
animation: kp-hero-text-in .8s .45s cubic-bezier(.22,1,.36,1) both;
}
/* CTA buttons */
.sh-hero-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 48px;
animation: kp-hero-text-in .8s .6s cubic-bezier(.22,1,.36,1) both;
}
.sh-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 30px;
border-radius: 100px;
border: none;
background: linear-gradient(135deg, #0077B6 0%, #0099E6 100%);
color: #FFFFFF;
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 15px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 32px rgba(0,119,182,.50), inset 0 1px 0 rgba(255,255,255,.15);
transition: transform .2s, box-shadow .2s;
position: relative;
overflow: hidden;
}
.sh-btn-primary::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform .55s ease;
border-radius: inherit;
}
.sh-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 16px 48px rgba(0,119,182,.60), inset 0 1px 0 rgba(255,255,255,.15);
}
.sh-btn-primary:hover::after { transform: translateX(100%); }
.sh-btn-primary:active { transform: scale(.97); }
.sh-btn-primary svg { flex-shrink: 0; }
.sh-btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 26px;
border-radius: 100px;
border: 1.5px solid rgba(212,175,55,.55);
color: #E8C956;
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
background: rgba(212,175,55,.07);
backdrop-filter: blur(8px);
}
.sh-btn-ghost:hover {
border-color: #D4AF37;
background: rgba(212,175,55,.15);
color: #F5D76E;
box-shadow: 0 4px 24px rgba(212,175,55,.25);
}
/* Stats */
.sh-hero-stats {
display: flex;
align-items: center;
gap: 28px;
}
.sh-stat { display: flex; flex-direction: column; gap: 2px; }
.sh-stat-val {
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
color: #D4AF37;
font-variant-numeric: tabular-nums;
}
.sh-stat-lbl { font-size: 12px; color: rgba(255,255,255,.45); }
.sh-stat-sep { width: 1px; height: 36px; background: rgba(255,255,255,.14); }
/* ── Mockup flottant ── */
.sh-hero-mockup {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* ── Phone duo entrance ── */
.sh-hero-phones {
position: relative;
animation: kp-hero-text-in .9s .35s cubic-bezier(.22,1,.36,1) both;
}
.kp-phone-front {
animation: kp-phone-enter-front 1.1s .4s cubic-bezier(.22,1,.36,1) both, sh-float-bob 6s 1.5s ease-in-out infinite;
}
.kp-phone-back {
animation: kp-phone-enter-back 1.2s .25s cubic-bezier(.22,1,.36,1) both, sh-float-bob 8s 2s ease-in-out infinite;
}
/* Halo autour du logo héro */
.sh-hero-mockup::before {
content: '';
position: absolute;
width: 520px; height: 520px;
max-width: 90vw;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,119,182,0.07) 0%, transparent 70%);
animation: kp-glow-blue 5s ease-in-out infinite;
pointer-events: none;
}
.sh-mock-device {
width: 300px;
border-radius: 22px;
background: #0077B6;
border: 1.5px solid rgba(0,119,182,0.25);
box-shadow: 0 24px 70px rgba(0,119,182,0.22), 0 0 0 1px rgba(0,119,182,0.08);
overflow: hidden;
animation: sh-float-bob 5s ease-in-out infinite, sh-mock-glow 5s ease-in-out infinite;
}
.sh-mock-topbar {
display: flex;
gap: 6px; align-items: center;
padding: 12px 16px 10px;
background: rgba(0,0,0,0.15);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sh-mock-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.sh-mock-dot:first-child { background: rgba(220,38,38,0.70); }
.sh-mock-dot:nth-child(2) { background: rgba(212,175,55,0.70); }
.sh-mock-body { padding: 14px; }
.sh-mock-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sh-mock-store { font-size: 13px; font-weight: 700; color: #FFFFFF; }
.sh-mock-date { font-size: 11px; color: rgba(255,255,255,0.45); }
.sh-mock-prods { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sh-mock-prod {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 10px; border-radius: 8px;
background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.07);
font-size: 12px; color: rgba(255,255,255,0.90);
animation: sh-prod-in 0.5s ease both;
}
.sh-mock-p1 { animation-delay: 0.4s; }
.sh-mock-p2 { animation-delay: 0.6s; }
.sh-mock-p3 { animation-delay: 0.8s; }
.sh-mock-total {
display: flex; justify-content: space-between;
padding: 8px 10px;
border-top: 1px solid rgba(255,255,255,0.12);
margin-bottom: 10px;
font-size: 12px; color: rgba(255,255,255,0.50);
}
.sh-mock-val { font-size: 14px; font-weight: 700; color: #D4AF37; }
.sh-mock-btn {
text-align: center; padding: 10px; border-radius: 10px;
background: linear-gradient(135deg, #D4AF37, #B8961E);
color: #1A2332; font-size: 13px; font-weight: 700; margin-bottom: 10px;
box-shadow: 0 4px 14px rgba(212,175,55,0.35);
}
.sh-mock-modes { display: flex; gap: 6px; }
.sh-mock-mode {
flex: 1; text-align: center; padding: 6px 4px; border-radius: 7px;
font-size: 10px; font-weight: 600;
border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.45);
}
.sh-m-cash { border-color: rgba(22,163,74,.40); color: #86EFAC; background: rgba(22,163,74,.07); }
.sh-m-wave { border-color: rgba(212,175,55,.40); color: #F0CC5A; background: rgba(212,175,55,.07); }
.sh-m-om { border-color: rgba(245,158,11,.40); color: #FCD34D; background: rgba(245,158,11,.07); }
/* Badges flottants */
.sh-float-badge {
position: absolute;
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 14px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(0,119,182,.18);
box-shadow: 0 8px 32px rgba(0,119,182,.18), 0 1px 0 rgba(255,255,255,.8) inset;
white-space: nowrap; font-size: 12px;
backdrop-filter: blur(12px);
}
.sh-fb-sale { bottom: 30px; left: -40px; animation: kp-badge-pop .65s 1.4s cubic-bezier(.22,1,.36,1) both; }
.sh-fb-stock { top: 60px; right: -40px; animation: kp-badge-pop .65s 2.1s cubic-bezier(.22,1,.36,1) both; }
.sh-fb-ico { font-size: 18px; flex-shrink: 0; }
.sh-fb-lbl { color: #64748B; font-size: 11px; margin-bottom: 1px; }
.sh-fb-val { color: #1A2332; font-weight: 700; font-size: 13px; }
/* ============================================================
FONCTIONNALITÉS
============================================================ */
.sh-features {
position: relative; z-index: 1;
padding: 80px 48px;
background: #F8FAFC;
}
.sh-features-inner {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.sh-feat-card {
padding: 28px 24px; border-radius: 20px;
background: #FFFFFF;
border: 1.5px solid rgba(0,119,182,0.10);
box-shadow: 0 2px 12px rgba(0,119,182,0.05);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}
.sh-feat-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(0,119,182,0.12);
border-color: rgba(0,119,182,0.28);
}
.sh-feat-ico { font-size: 36px; margin-bottom: 16px; transition: transform .25s ease; }
.sh-feat-card:hover .sh-feat-ico { transform: scale(1.18) rotate(-4deg); }
.sh-feat-title { font-family: 'Poppins','Inter',sans-serif; font-size: 15px; font-weight: 600; color: #1A2332; margin-bottom: 8px; }
.sh-feat-sub { font-size: 13px; color: #64748B; line-height: 1.7; }
/* ============================================================
AUTH SECTION
============================================================ */
.sh-auth-section {
position: relative; z-index: 1;
padding: 80px 48px 120px;
background: linear-gradient(135deg, #F6FBFF 0%, #EBF3FD 60%, #E2EEF9 100%);
overflow: hidden;
}
/* Logo rabidpos-logo.jpg : derrière la colonne gauche "Prêt à démarrer" */
.sh-auth-section::before {
content: '';
position: absolute;
top: 50%;
left: -4%;
transform: translateY(-50%);
width: 56%;
height: 130%;
background: url('/img/rabidpos-logo.jpg') center / contain no-repeat;
opacity: 0.32;
z-index: 0;
pointer-events: none;
}
/* Dégradé : transparent à gauche (logo visible) → opaque à droite (protège la carte) */
.sh-auth-section::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
transparent 0%,
transparent 16%,
rgba(235,243,253,0.18) 30%,
rgba(235,243,253,0.62) 48%,
rgba(235,243,253,0.96) 62%,
#EBF3FD 72%,
#EBF3FD 100%
);
z-index: 1;
pointer-events: none;
}
.sh-auth-inner {
max-width: 1000px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
position: relative; z-index: 2;
}
.sh-auth-pitch { padding-top: 20px; }
.sh-auth-logo-mini {
display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.sh-auth-title {
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 32px; font-weight: 700; line-height: 1.25;
color: #1A2332; margin-bottom: 14px;
}
.sh-auth-sub {
font-size: 14px; color: #64748B; line-height: 1.8; margin-bottom: 28px;
}
.sh-trust-badges { display: flex; flex-direction: column; gap: 10px; }
.sh-trust-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: 12px;
background: rgba(0,119,182,.06);
border: 1px solid rgba(0,119,182,.18);
font-size: 13px; color: #0077B6; font-weight: 600; width: fit-content;
transition: background .2s, border-color .2s, transform .2s;
}
.sh-trust-badge:hover {
background: rgba(0,119,182,.10);
border-color: rgba(0,119,182,.30);
transform: translateX(4px);
}
/* Auth card */
.sh-card {
background: #FFFFFF;
border-radius: 24px;
border: 1.5px solid rgba(0,119,182,.14);
box-shadow:
0 0 0 1px rgba(255,255,255,.6) inset,
0 20px 80px rgba(0,119,182,.14),
0 4px 16px rgba(0,0,0,.06);
overflow: hidden;
transition: box-shadow .3s, transform .3s;
}
.sh-card:focus-within {
box-shadow:
0 0 0 1px rgba(255,255,255,.6) inset,
0 28px 100px rgba(0,119,182,.22),
0 4px 20px rgba(0,0,0,.08);
transform: translateY(-2px);
}
/* Onglets */
.sh-tabs {
position: relative; display: flex;
background: #F8FAFC;
border-bottom: 1.5px solid rgba(0,119,182,0.08);
}
.sh-tab {
flex: 1; padding: 15px 8px;
background: none; border: none;
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 13px; font-weight: 600;
color: #94A3B8; cursor: pointer;
transition: color 0.2s; position: relative; z-index: 1;
}
.sh-tab.active { color: #0077B6; }
.sh-tab:hover:not(.active) { color: #64748B; }
.sh-tab-slider {
position: absolute; bottom: 0;
height: 3px;
background: linear-gradient(90deg, #D4AF37, #F5D76E, #D4AF37);
background-size: 200% auto;
animation: kp-shimmer 2.5s linear infinite;
border-radius: 2px;
transition: left .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 10px rgba(212,175,55,.55);
pointer-events: none;
}
/* Panels */
.sh-panel { display: none; padding: 28px; }
.sh-panel.active { display: block; }
.sh-panel-head { margin-bottom: 20px; }
.sh-panel-title { font-family: 'Poppins','Inter',sans-serif; font-size: 20px; font-weight: 700; color: #1A2332; margin-bottom: 4px; }
.sh-panel-sub { font-size: 13px; color: #64748B; }
.sh-panel-foot { text-align: center; margin-top: 16px; font-size: 13px; color: #64748B; }
.sh-panel-foot a { color: #0077B6; text-decoration: none; font-weight: 600; }
.sh-panel-foot a:hover { text-decoration: underline; }
/* Champs */
.sh-field { margin-bottom: 14px; }
.sh-label {
display: block; font-family: 'Poppins','Inter',sans-serif;
font-size: 11px; font-weight: 600; color: #0077B6;
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 7px;
}
.sh-input-wrap { position: relative; display: flex; align-items: center; }
.sh-input-ico { position: absolute; left: 12px; font-size: 15px; pointer-events: none; z-index: 1; }
.sh-input, .sh-select {
width: 100%; padding: 11px 12px 11px 38px;
border-radius: 10px; border: 1.5px solid rgba(0,119,182,0.15);
background: #F8FAFC; color: #1A2332;
font-family: 'Poppins','Inter',sans-serif; font-size: 14px;
outline: none; appearance: none;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.sh-input::placeholder { color: #94A3B8; }
.sh-input--noico { padding-left: 14px; }
.sh-input:focus, .sh-select:focus {
border-color: #0077B6;
box-shadow: 0 0 0 3px rgba(0,119,182,0.10);
background: #FFFFFF;
}
.sh-select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230077B6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
padding-right: 36px; background-color: #F8FAFC;
}
.sh-select option { background: #FFFFFF; color: #1A2332; }
.sh-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Compteur boutiques */
.sh-nb-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; background: #EFF6FF;
border: 1.5px solid rgba(0,119,182,0.14); border-radius: 10px; margin-bottom: 14px;
}
.sh-nb-info { display: flex; align-items: center; gap: 8px; }
.sh-nb-ico { font-size: 16px; }
.sh-nb-ctrl { display: flex; align-items: center; gap: 14px; }
.sh-nb-btn {
width: 32px; height: 32px; border-radius: 8px;
border: 1.5px solid rgba(0,119,182,0.22);
background: rgba(0,119,182,0.08); color: #0077B6;
font-size: 18px; font-weight: 700; cursor: pointer;
display: flex; align-items: center; justify-content: center; line-height: 1;
transition: background 0.15s, border-color 0.15s;
}
.sh-nb-btn:hover { background: rgba(0,119,182,0.16); border-color: #0077B6; }
.sh-nb-val { font-family:'Poppins','Inter',sans-serif; font-size: 20px; font-weight: 700; color: #1A2332; min-width: 22px; text-align: center; }
/* Bouton submit */
.sh-btn-submit {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px; border-radius: 12px; border: none;
background: linear-gradient(135deg, #0077B6 0%, #0099E6 100%);
color: #FFFFFF; font-family: 'Poppins','Inter',sans-serif;
font-size: 15px; font-weight: 700; cursor: pointer;
box-shadow: 0 6px 24px rgba(0,119,182,.40), inset 0 1px 0 rgba(255,255,255,.12);
transition: transform .15s, box-shadow .15s;
margin-top: 4px;
position: relative; overflow: hidden;
animation: kp-neon-breathe 3s ease-in-out infinite;
}
.sh-btn-submit::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
transform: translateX(-100%);
transition: transform .5s ease;
border-radius: inherit;
}
.sh-btn-submit:hover {
transform: translateY(-1px);
box-shadow: 0 12px 40px rgba(0,119,182,.55), inset 0 1px 0 rgba(255,255,255,.12);
}
.sh-btn-submit:hover::after { transform: translateX(100%); }
.sh-btn-submit:active { transform: scale(.98); animation: none; }
.sh-btn-submit:disabled { opacity: .45; cursor: not-allowed; transform: none; animation: none; }
/* Bouton outline */
.sh-btn-outline {
width: 100%; padding: 11px; border-radius: 12px;
border: 1.5px solid rgba(0,119,182,0.22); background: transparent;
color: #0077B6; font-family: 'Poppins','Inter',sans-serif;
font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 8px;
transition: border-color 0.2s, background 0.2s;
}
.sh-btn-outline:hover { border-color: #0077B6; background: rgba(0,119,182,0.05); }
/* CGU */
.sh-cgu-row { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 8px; }
.sh-checkbox { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: #0077B6; cursor: pointer; }
.sh-cgu-label { font-size: 12px; color: #64748B; line-height: 1.6; cursor: pointer; }
.sh-cgu-label a { color: #0077B6; text-decoration: underline; }
/* Code activation */
.sh-code-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
/* Success */
.sh-success-state { text-align: center; padding: 20px 0; }
.sh-success-ico { font-size: 52px; margin-bottom: 14px; }
.sh-success-title { font-family:'Poppins','Inter',sans-serif; font-size: 20px; font-weight: 700; color: #1A2332; margin-bottom: 8px; }
.sh-success-sub { font-size: 13px; color: #64748B; line-height: 1.7; margin-bottom: 20px; }
.sh-success-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.sh-sstep {
padding: 10px 16px; border-radius: 9px; background: #EFF6FF;
border: 1px solid rgba(0,119,182,0.12); font-size: 13px; color: #64748B; text-align: left;
}
.sh-sstep-done { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.25); color: #15803D; }
/* ============================================================
FOOTER
============================================================ */
.sh-footer {
position: relative; z-index: 1;
padding: 32px 48px;
border-top: 1.5px solid rgba(0,119,182,0.10);
background: #F8FAFC;
display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.sh-footer-logo { display: flex; align-items: center; gap: 10px; }
.sh-footer-links {
display: flex; align-items: center; gap: 16px;
font-size: 13px; color: #64748B;
}
.sh-footer-links a { color: #64748B; text-decoration: none; transition: color 0.2s; }
.sh-footer-links a:hover { color: #0077B6; }
.sh-footer-copy { margin-left: auto; font-size: 12px; color: #94A3B8; }
/* ============================================================
MODAL CGU
============================================================ */
.sh-modal-ov {
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,0.40);
display: none;
align-items: center;
justify-content: center;
z-index: 2147483600;
isolation: isolate;
padding: 16px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.sh-modal-ov.open { display: flex !important; }
.sh-modal {
background: #FFFFFF; border: 1.5px solid rgba(0,119,182,0.12);
border-radius: 20px; max-width: 520px; width: 100%; max-height: 80vh;
display: flex; flex-direction: column;
box-shadow: 0 24px 60px rgba(0,119,182,0.14);
}
.sh-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px; border-bottom: 1px solid rgba(0,119,182,0.08); flex-shrink: 0;
}
.sh-modal-head h2 { font-family:'Poppins','Inter',sans-serif; font-size: 17px; font-weight: 700; color: #1A2332; }
.sh-modal-close {
width: 32px; height: 32px; border-radius: 8px; border: none; background: #EFF6FF;
cursor: pointer; font-size: 16px; color: #64748B; transition: background 0.15s;
}
.sh-modal-close:hover { background: #DBEAFE; color: #0077B6; }
.sh-modal-body { overflow-y: auto; padding: 20px 24px; font-size: 13px; line-height: 1.8; color: #374151; }
.sh-modal-body h3 { font-family:'Poppins','Inter',sans-serif; font-size: 14px; font-weight: 600; color: #0077B6; margin: 18px 0 6px; }
.sh-modal-body p { margin-bottom: 10px; }
.sh-modal-body strong { color: #0077B6; font-weight: 600; }
/* ============================================================
ONBOARDING OVERLAY
============================================================ */
.sh-onb-ov {
position: fixed; inset: 0; background: rgba(0,0,0,0.42);
display: none; align-items: center; justify-content: center;
z-index: 900; padding: 16px;
}
.sh-onb-ov.open { display: flex; }
.sh-onb-card {
background: #FFFFFF; border: 1.5px solid rgba(0,119,182,0.12);
border-radius: 24px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
box-shadow: 0 24px 80px rgba(0,119,182,0.13);
}
.sh-onb-progress { display: flex; align-items: center; gap: 0; margin-bottom: 24px; }
.sh-onb-dot {
width: 14px; height: 14px; border-radius: 50%;
background: rgba(0,119,182,0.10); border: 2px solid rgba(0,119,182,0.18); flex-shrink: 0;
transition: background 0.3s, border-color 0.3s;
}
.sh-onb-dot.sh-dot-done { background: #0077B6; border-color: #00A8E8; box-shadow: 0 0 8px rgba(0,119,182,0.35); }
.sh-onb-line { flex: 1; height: 2px; background: rgba(0,119,182,0.08); transition: background 0.3s; }
.sh-onb-line.sh-line-done { background: #0077B6; }
.sh-onb-badge-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; border-radius: 100px;
background: rgba(0,119,182,0.08); border: 1px solid rgba(0,119,182,0.18);
color: #0077B6; font-size: 12px; font-weight: 600; margin-bottom: 12px;
}
.sh-onb-title { font-family:'Poppins','Inter',sans-serif; font-size: 22px; font-weight: 700; color: #1A2332; margin-bottom: 6px; }
.sh-onb-sub { font-size: 13px; color: #64748B; margin-bottom: 20px; line-height: 1.65; }
.sh-onb-divider { height: 1px; background: rgba(0,119,182,0.08); margin: 16px 0; }
.sh-onb-info-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; }
.sh-onb-info-lbl { color: #64748B; }
.sh-onb-type-badge {
display: inline-block; padding: 3px 12px; border-radius: 100px;
background: rgba(0,119,182,0.08); border: 1px solid rgba(0,119,182,0.18);
color: #0077B6; font-size: 12px; font-weight: 600;
}
.sh-onb-pills-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sh-onb-nav { display: flex; gap: 10px; margin-top: 24px; }
.sh-onb-btn-next {
flex: 1; padding: 12px; border-radius: 12px; border: none;
background: linear-gradient(135deg, #0077B6, #005F92); color: #FFFFFF;
font-family: 'Poppins','Inter',sans-serif; font-size: 15px; font-weight: 600; cursor: pointer;
box-shadow: 0 4px 16px rgba(0,119,182,0.30); transition: opacity 0.15s, box-shadow 0.15s;
}
.sh-onb-btn-next:hover { opacity: 0.92; box-shadow: 0 6px 24px rgba(0,119,182,0.40); }
.sh-onb-btn-prev {
padding: 12px 20px; border-radius: 12px;
border: 1.5px solid rgba(0,119,182,0.18); background: transparent;
color: #64748B; font-family: 'Poppins','Inter',sans-serif;
font-size: 14px; font-weight: 500; cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.sh-onb-btn-prev:hover { border-color: rgba(0,119,182,0.40); color: #1A2332; }
.sh-onb-done { text-align: center; padding: 40px 32px; }
.sh-onb-done-anim { font-size: 60px; margin-bottom: 16px; }
.sh-onb-done-title { font-family:'Poppins','Inter',sans-serif; font-size: 26px; font-weight: 700; color: #1A2332; margin-bottom: 8px; }
.sh-onb-done-sub { font-size: 14px; color: #64748B; margin-bottom: 24px; line-height: 1.7; }
/* ============================================================
CLASSES FONCTIONNELLES (siich.js — sc-*)
============================================================ */
.sc-error {
background: rgba(220,38,38,0.07); color: #B91C1C;
border-radius: 9px; padding: 9px 13px; font-size: 13px;
margin-bottom: 12px; display: none; border-left: 3px solid #DC2626;
}
.sc-success {
background: rgba(22,163,74,0.07); color: #15803D;
border-radius: 9px; padding: 9px 13px; font-size: 13px;
margin-bottom: 12px; display: none; border-left: 3px solid #16A34A;
}
.sc-label {
display: block; font-family: 'Poppins','Inter',sans-serif;
font-size: 11px; font-weight: 600; color: #0077B6;
margin-bottom: 6px; letter-spacing: 0.06em; text-transform: uppercase;
}
.sc-input, .sc-select {
width: 100%; padding: 10px 14px; border-radius: 10px;
border: 1.5px solid rgba(0,119,182,0.15);
font-family: 'Poppins','Inter',sans-serif; font-size: 14px;
color: #1A2332; background: #F8FAFC; outline: none; appearance: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.sc-input:focus, .sc-select:focus {
border-color: #0077B6; box-shadow: 0 0 0 3px rgba(0,119,182,0.10); background: #FFFFFF;
}
.sc-input::placeholder { color: #94A3B8; }
.sc-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230077B6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
padding-right: 36px; cursor: pointer; background-color: #F8FAFC;
}
.sc-select option { background: #FFFFFF; color: #1A2332; }
.sc-boutique-block {
background: #EFF6FF; border-radius: 10px; padding: 14px; margin-bottom: 10px;
border: 1.5px solid rgba(0,119,182,0.12);
}
.sc-boutique-num {
font-family: 'Poppins','Inter',sans-serif;
font-size: 11px; font-weight: 600; color: #0077B6;
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.sc-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.sc-pay-check {
display: flex; align-items: center; gap: 8px;
background: #F8FAFC; border: 1.5px solid rgba(0,119,182,0.12);
border-radius: 9px; padding: 9px 12px; cursor: pointer;
font-size: 13px; font-weight: 500; color: #64748B;
transition: border-color 0.15s, background 0.15s; user-select: none;
}
.sc-pay-check:has(input:checked) {
background: rgba(0,119,182,0.07); border-color: #0077B6; color: #0077B6; font-weight: 600;
}
.sc-pay-check.sc-pay-fixed { opacity: 0.65; cursor: not-allowed; }
.sc-pay-check input[type="checkbox"] { accent-color: #0077B6; width: 15px; height: 15px; flex-shrink: 0; }
.sc-boutique-pill {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(0,119,182,0.08); border: 1px solid rgba(0,119,182,0.18);
color: #0077B6; border-radius: 8px; padding: 6px 12px;
font-size: 13px; font-weight: 600; margin: 4px 4px 0 0;
}
.sc-add-btn {
display: flex; align-items: center; gap: 6px; justify-content: center;
color: #0077B6; font-size: 13px; font-weight: 600;
background: none; border: 1.5px dashed rgba(0,119,182,0.28);
border-radius: 9px; padding: 8px 14px; cursor: pointer;
width: 100%; margin-top: 8px; transition: background 0.15s;
}
.sc-add-btn:hover { background: rgba(0,119,182,0.05); }
.sc-section-title {
font-family: 'Poppins','Inter',sans-serif;
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; color: #0077B6; margin: 18px 0 10px;
}
.sc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
/* Boutique block : toujours une colonne (card trop étroite pour deux colonnes) */
.sc-boutique-block .sc-two-col { grid-template-columns: 1fr; }
/* Empêche le champ tel de déborder dans sc-boutique-block */
.sc-boutique-block .sc-two-col > div { min-width: 0; width: 100%; }
.sc-boutique-block .kp-tel-wrap { width: 100%; overflow: hidden; min-width: 0; }
.sc-boutique-block .kp-tel-wrap .sc-input { min-width: 0; width: auto !important; flex: 1 1 0%; }
.sc-boutique-block .sc-input { max-width: 100%; }
.sc-divider { height: 1px; background: rgba(0,119,182,0.08); margin: 18px 0; }
.sc-emp-block {
background: rgba(22,163,74,0.04); border-radius: 9px; padding: 12px;
margin-bottom: 8px; border: 1px solid rgba(22,163,74,0.18);
}
.sc-emp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sc-role-badge { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.sc-role-patron { background: rgba(212,175,55,0.12); color: #B8961E; }
.sc-role-employe { background: rgba(22,163,74,0.10); color: #15803D; }
.sc-emp-del { background: none; border: none; cursor: pointer; color: #94A3B8; font-size: 15px; padding: 2px; }
.sc-emp-del:hover { color: #DC2626; }
.sc-onb-step { display: none; padding: 32px; }
.sc-onb-step.active { display: block; }
.sc-code-inp {
width: clamp(38px, 13vw, 50px);
height: clamp(48px, 14vw, 58px);
border-radius: 12px;
border: 2px solid rgba(0,119,182,0.18); text-align: center;
font-family: 'Poppins','Inter',sans-serif;
font-size: clamp(20px, 5vw, 26px); font-weight: 700;
color: #1A2332; background: #F8FAFC; outline: none;
caret-color: #0077B6; transition: border-color 0.2s, box-shadow 0.2s;
-webkit-text-fill-color: #1A2332;
}
.sc-code-inp:focus {
border-color: #0077B6; background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(0,119,182,0.12);
}
/* ============================================================
ADMIN DASHBOARD (.sad-*) — Design v6.0
Inspiré de oci.madebybuzzworthy.com × RabidPOS brand
============================================================ */
/* ── Tokens admin ── */
:root {
--sad-bg: #EDEAE5;
--sad-white: #FFFFFF;
--sad-navy: #1A2332;
--sad-blue: #0077B6;
--sad-blue-dk: #005F92;
--sad-gold: #D4AF37;
--sad-amber: #F59E0B;
--sad-red: #EF4444;
--sad-green: #10B981;
--sad-border: #D4CFC8;
--sad-bord-lt: #ECEAE5;
--sad-text: #1A2332;
--sad-muted: #6B7280;
--sad-sidebar: 240px;
--sad-radius: 10px;
--sad-ease: cubic-bezier(.4,0,.2,1);
}
/* ── Layout ── */
.sad-body {
min-height: 100vh;
display: flex;
font-family: 'Poppins','Inter',-apple-system,sans-serif;
background: var(--sad-bg);
color: var(--sad-text);
}
/* ── Sidebar ── */
.sad-sidebar {
width: var(--sad-sidebar);
min-height: 100vh;
background: var(--sad-navy);
display: flex;
flex-direction: column;
position: fixed;
left: 0; top: 0;
z-index: 100;
border-right: 1px solid rgba(255,255,255,.05);
}
.sad-sidebar-logo {
padding: 26px 22px 20px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.sad-sidebar-logo .sh-logo-wordmark { font-size: 20px; color: #fff; }
.sad-sidebar-logo .sh-logo-wordmark em { color: var(--sad-gold); }
.sad-sidebar-sub {
padding: 16px 22px 6px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(255,255,255,.28);
}
.sad-nav { flex: 1; padding: 8px 14px; }
.sad-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,.50);
cursor: pointer;
margin-bottom: 2px;
border-left: 2px solid transparent;
transition: color 180ms var(--sad-ease), background 180ms var(--sad-ease);
user-select: none;
}
.sad-nav-item:hover { color: rgba(255,255,255,.88); background: rgba(255,255,255,.07); }
.sad-nav-item.active { color: #fff; background: rgba(255,255,255,.09); border-left-color: var(--sad-gold); }
.sad-nav-item .sad-nav-ico { font-size: 15px; width: 20px; text-align: center; opacity: .85; }
.sad-nav-item.nav-locked { opacity: .45; cursor: not-allowed; }
.sad-nav-item.nav-locked:hover { color: rgba(255,255,255,.50); background: none; }
.nav-plan-badge { margin-left: auto; font-size: 9px; font-weight: 700; background: rgba(212,175,55,.25); color: #D4AF37; border: 1px solid rgba(212,175,55,.35); border-radius: 4px; padding: 1px 5px; letter-spacing: .3px; }
.sad-logout-btn {
margin: 16px 14px 24px;
padding: 10px 14px;
background: none;
border: 1px solid rgba(255,255,255,.10);
border-radius: 8px;
color: rgba(255,255,255,.42);
font-size: 12px;
font-family: 'Poppins','Inter',sans-serif;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: all 180ms var(--sad-ease);
}
.sad-logout-btn:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.80); border-color: rgba(255,255,255,.18); }
/* ── Main ── */
.sad-main { margin-left: var(--sad-sidebar); flex: 1; padding: 36px 40px; min-height: 100vh; }
/* ── Page header ── */
.sad-page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 30px;
padding-bottom: 22px;
border-bottom: 1px solid var(--sad-border);
}
.sad-page-title {
font-family: 'Poppins','Inter',sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--sad-navy);
letter-spacing: -.01em;
}
.sad-page-sub {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .09em;
color: var(--sad-muted);
margin-top: 5px;
}
.sad-section { display: none; }
.sad-section.active { display: block; }
/* ── Stats cards ── */
.sad-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 30px; }
.sad-stat {
background: var(--sad-white);
border: 1px solid var(--sad-border);
border-radius: var(--sad-radius);
padding: 22px 22px 18px 26px;
position: relative;
overflow: hidden;
transition: transform 180ms var(--sad-ease), box-shadow 180ms var(--sad-ease);
}
.sad-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.08); }
.sad-stat::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
}
.sad-stat-ico { display: none; }
.sad-stat-lbl {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .10em;
color: var(--sad-muted);
margin-bottom: 10px;
}
.sad-stat-val {
font-family: 'Poppins','Inter',sans-serif;
font-size: 42px;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -.03em;
}
.sad-stat-pending::before { background: var(--sad-amber); }
.sad-stat-pending .sad-stat-val { color: var(--sad-amber); }
.sad-stat-approved::before { background: var(--sad-gold); }
.sad-stat-approved .sad-stat-val { color: var(--sad-gold); }
.sad-stat-active::before { background: var(--sad-blue); }
.sad-stat-active .sad-stat-val { color: var(--sad-blue); }
/* ── Filter tabs ── */
.sad-filter-tabs {
display: flex;
gap: 3px;
margin-bottom: 16px;
background: var(--sad-white);
border: 1px solid var(--sad-border);
border-radius: 8px;
padding: 4px;
width: fit-content;
}
.sad-ftab {
padding: 6px 16px;
border: none;
background: none;
border-radius: 6px;
font-family: 'Poppins','Inter',sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--sad-muted);
cursor: pointer;
transition: all 180ms var(--sad-ease);
white-space: nowrap;
}
.sad-ftab:hover { color: var(--sad-navy); background: var(--sad-bord-lt); }
.sad-ftab.active { background: var(--sad-blue); color: #fff; }
/* ── Table ── */
.sad-table-wrap {
background: var(--sad-white);
border-radius: var(--sad-radius);
border: 1px solid var(--sad-border);
overflow-x: auto;
overflow-y: hidden;
}
.sad-table { width: 100%; border-collapse: collapse; min-width: 880px; }
.sad-table thead { background: var(--sad-navy); }
.sad-table th {
padding: 11px 16px;
text-align: left;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .10em;
color: rgba(255,255,255,.60);
white-space: nowrap;
}
.sad-table th.sortable { cursor: pointer; user-select: none; }
.sad-table th.sortable:hover { color: rgba(255,255,255,.95); }
.sad-table th.sort-asc .sad-sort-ico::after { content: ' ↑'; color: var(--sad-gold); }
.sad-table th.sort-desc .sad-sort-ico::after { content: ' ↓'; color: var(--sad-gold); }
.sad-table th.sortable:not(.sort-asc):not(.sort-desc) .sad-sort-ico::after { content: ' ↕'; opacity: .3; }
.sad-table td {
padding: 12px 16px;
font-size: 13px;
line-height: 1.4;
border-bottom: 1px solid var(--sad-bord-lt);
vertical-align: middle;
color: var(--sad-text);
}
.sad-table td:first-child { min-width: 90px; }
.sad-table tr:last-child td { border-bottom: none; }
.sad-table tr:hover td { background: #F6F4F0; }
.sad-empty { text-align: center; padding: 52px; color: var(--sad-muted); font-size: 13px; }
/* ── Checkboxes ── */
.sad-check-col { width: 40px !important; padding-left: 16px !important; }
.sad-table input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--sad-blue); }
/* ── Search ── */
.sad-search-wrap { display: flex; align-items: center; }
.sad-search-inp {
height: 36px;
padding: 0 14px 0 36px;
border: 1px solid var(--sad-border);
border-radius: 8px;
font-size: 13px;
outline: none;
background: var(--sad-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239CA3AF' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 11px center;
width: 220px;
transition: border-color 180ms var(--sad-ease), box-shadow 180ms var(--sad-ease);
color: var(--sad-text);
}
.sad-search-inp:focus { border-color: var(--sad-blue); box-shadow: 0 0 0 3px rgba(0,119,182,.12); }
/* ── Bulk bar ── */
.sad-bulk-bar {
display: none;
align-items: center;
gap: 10px;
background: var(--sad-navy);
color: #fff;
border-radius: 8px;
padding: 10px 16px;
margin-bottom: 12px;
font-size: 13px;
font-weight: 500;
}
.sad-bulk-bar.visible { display: flex; }
.sad-bulk-del { background: var(--sad-red); border: none; color: #fff; border-radius: 6px; padding: 6px 14px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background 180ms var(--sad-ease); }
.sad-bulk-del:hover { background: #DC2626; }
.sad-bulk-cancel { background: none; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.75); border-radius: 6px; padding: 6px 12px; font-size: 11px; cursor: pointer; transition: all 180ms var(--sad-ease); }
/* ── Badges ── */
.sad-badge { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.sad-badge-pending { background: #FEF3C7; color: #92400E; }
.sad-badge-approved { background: #DBEAFE; color: #1D4ED8; }
.sad-badge-rejected { background: #FEE2E2; color: #B91C1C; }
.sad-badge-active { background: #DCFCE7; color: #166534; }
.sad-badge-pending_onboarding { background: #EDE9FE; color: #5B21B6; }
.sad-badge-suspended { background: #F1F5F9; color: #475569; }
/* ── Action buttons ── */
.sad-btn-view {
background: none;
color: var(--sad-blue);
border: 1px solid var(--sad-border);
border-radius: 6px;
padding: 5px 11px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 180ms var(--sad-ease);
}
.sad-btn-view:hover { border-color: var(--sad-blue); background: #EFF6FF; }
.sad-btn-approve {
background: var(--sad-blue);
color: #fff;
border: none;
border-radius: 6px;
padding: 5px 11px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
margin-left: 4px;
transition: background 180ms var(--sad-ease);
}
.sad-btn-approve:hover { background: var(--sad-blue-dk); }
.sad-btn-reject {
background: none;
color: var(--sad-red);
border: 1px solid #FCA5A5;
border-radius: 6px;
padding: 5px 11px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
margin-left: 4px;
transition: all 180ms var(--sad-ease);
}
.sad-btn-reject:hover { background: #FEE2E2; }
/* ── Modal ── */
.sad-modal-ov {
position: fixed;
inset: 0;
background: rgba(26,35,50,.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
z-index: 999;
padding: 20px;
}
.sad-modal-ov.open { display: flex; }
.sad-modal {
background: var(--sad-white);
border-radius: 14px;
max-width: 540px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
border: 1px solid var(--sad-border);
box-shadow: 0 28px 72px rgba(0,0,0,.20);
}
.sad-modal-head {
padding: 18px 24px;
border-bottom: 1px solid var(--sad-bord-lt);
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
background: var(--sad-white);
z-index: 1;
}
.sad-modal-head h3 { font-family:'Poppins','Inter',sans-serif; font-size: 15px; font-weight: 700; color: var(--sad-navy); }
.sad-modal-close {
width: 30px; height: 30px;
border-radius: 6px;
border: 1px solid var(--sad-border);
background: none;
cursor: pointer;
font-size: 14px;
color: var(--sad-muted);
transition: all 180ms var(--sad-ease);
}
.sad-modal-close:hover { background: var(--sad-bord-lt); color: var(--sad-navy); }
.sad-modal-body { padding: 20px 24px 24px; }
.sad-modal-actions { display: flex; gap: 8px; margin-top: 20px; }
/* ── Detail grid ── */
.sad-detail-grid {
display: grid;
gap: 0;
margin-bottom: 16px;
border: 1px solid var(--sad-bord-lt);
border-radius: 8px;
overflow: hidden;
}
.sad-detail-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 10px 14px;
border-bottom: 1px solid var(--sad-bord-lt);
font-size: 13px;
}
.sad-detail-row:last-child { border-bottom: none; }
.sad-detail-lbl { color: var(--sad-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; flex-shrink: 0; margin-right: 16px; padding-top: 2px; }
.sad-detail-val { font-weight: 600; color: var(--sad-navy); text-align: right; }
/* ── Code display ── */
.sad-code-display { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 10px; padding: 20px; text-align: center; margin: 16px 0; }
.sad-code-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--sad-muted); margin-bottom: 12px; }
.sad-code-val { font-family:'Poppins','Inter',sans-serif; font-size: 38px; font-weight: 800; color: var(--sad-blue); letter-spacing: 12px; font-variant-numeric: tabular-nums; display: block; }
.sad-code-hint { font-size: 12px; color: var(--sad-muted); margin-top: 10px; }
.sad-copy-btn { margin-top: 14px; padding: 8px 20px; border-radius: 7px; background: var(--sad-blue); color: #fff; border: none; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 180ms var(--sad-ease); }
.sad-copy-btn:hover { background: var(--sad-blue-dk); }
.sad-copy-btn.copied { background: var(--sad-green); }
/* ── Recent activity ── */
.sad-recent-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--sad-bord-lt); font-size: 13px; }
.sad-recent-item:last-child { border-bottom: none; }
.sad-recent-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sad-recent-dot-pending { background: var(--sad-amber); }
.sad-recent-dot-approved { background: var(--sad-gold); }
.sad-recent-dot-rejected { background: var(--sad-red); }
/* ── Admin login ── */
.sad-login-body {
min-height: 100vh;
background: var(--sad-navy);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins','Inter',-apple-system,sans-serif;
position: relative;
overflow: hidden;
}
.sad-login-body::before {
content: '';
position: absolute;
width: 700px; height: 700px; border-radius: 50%;
background: radial-gradient(circle, rgba(0,119,182,.22), transparent 60%);
top: -250px; right: -200px; pointer-events: none;
}
.sad-login-body::after {
content: '';
position: absolute;
width: 500px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(212,175,55,.14), transparent 60%);
bottom: -180px; left: -120px; pointer-events: none;
}
.sad-login-card {
background: var(--sad-white);
border-radius: 16px;
padding: 40px 36px;
width: 100%; max-width: 400px;
position: relative;
overflow: hidden;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 32px 80px rgba(0,0,0,.32);
}
.sad-login-card-accent {
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--sad-blue), var(--sad-gold), var(--sad-blue));
background-size: 200% 100%;
animation: kp-shimmer 3s linear infinite;
}
@keyframes kp-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.sad-login-logo { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 6px; }
.sad-login-sub { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sad-muted); margin-bottom: 28px; }
.sc-btn {
width: 100%; padding: 12px; border-radius: 10px; border: none;
font-family: 'Poppins','Inter',sans-serif; font-size: 15px; font-weight: 600;
background: linear-gradient(135deg, #0077B6, #005F92);
color: #FFFFFF; cursor: pointer; margin-top: 6px;
box-shadow: 0 4px 16px rgba(0,119,182,0.28);
transition: opacity 0.15s, transform 0.15s;
}
.sc-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.sc-btn:active { transform: scale(0.98); }
.sc-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
/* ============================================================
POCKETCHANGE-INSPIRED REDESIGN — RabidPOS v5.0
============================================================ */
/* ── Scroll Reveal ──────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1.revealed { transition-delay: 0.10s; }
.reveal-delay-2.revealed { transition-delay: 0.20s; }
.reveal-delay-3.revealed { transition-delay: 0.30s; }
.reveal-delay-4.revealed { transition-delay: 0.40s; }
/* ── Couleurs texte helpers ─────────────────────────────── */
.sh-text-blue { color: #0077B6; }
.sh-text-gold { color: #D4AF37; }
/* ── NAVIGATION HERO (transparente sur fond bleu) ────────── */
.sh-nav-hero {
background: rgba(0,70,110,0.15) !important;
backdrop-filter: blur(12px) !important;
border-bottom-color: rgba(255,255,255,0.10) !important;
box-shadow: none !important;
}
.sh-nav-hero .sh-logo-wordmark { color: #FFFFFF !important; }
.sh-nav-hero .sh-logo-wordmark em { color: #D4AF37 !important; }
.sh-nav-hero .sh-nav-link { color: rgba(255,255,255,0.85) !important; }
.sh-nav-hero .sh-nav-link:hover { color: #FFFFFF !important; }
.sh-nav-hero .sh-nav-link::after { background: #D4AF37; }
.sh-nav-hero .sh-nav-cta {
background: rgba(255,255,255,0.18) !important;
color: #FFFFFF !important;
border: 1.5px solid rgba(255,255,255,0.35) !important;
box-shadow: none !important;
}
.sh-nav-hero .sh-nav-cta:hover {
background: rgba(255,255,255,0.28) !important;
}
/* Blend-mode fix sur fond bleu */
.sh-nav-hero .kp-logo-img {
mix-blend-mode: normal !important;
background: rgba(255,255,255,0.9);
border-radius: 50%;
}
/* ── HERO OVERRIDE — fond bleu plein écran ─────────────── */
.sh-hero {
background: linear-gradient(135deg, #0077B6 0%, #004F80 60%, #003460 100%) !important;
min-height: 100vh;
padding: 110px 64px 100px 64px !important;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.sh-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
max-width: 1240px;
margin: 0 auto;
width: 100%;
}
/* Motif cauris en bg */
.sh-hero-bg-pattern {
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='74' viewBox='0 0 100 74'%3E%3Cellipse cx='50' cy='37' rx='34' ry='22' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.5'/%3E%3Cpath d='M22,37 Q36,27 50,26 Q64,27 78,37 Q64,47 50,48 Q36,47 22,37Z' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E");
background-size: 100px 74px;
}
/* Texte héro sur fond bleu */
.sh-hero .sh-badge {
background: rgba(255,255,255,0.12) !important;
border-color: rgba(255,255,255,0.20) !important;
color: rgba(255,255,255,0.90) !important;
}
.sh-hero .sh-badge-dot { background: #D4AF37 !important; }
.sh-hero .sh-headline {
color: #FFFFFF !important;
font-size: clamp(40px, 5vw, 64px) !important;
line-height: 1.08 !important;
font-weight: 900 !important;
}
.sh-hero .sh-headline-accent {
background: linear-gradient(90deg, #D4AF37, #F0CC5A) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.sh-hero .sh-subline {
color: rgba(255,255,255,0.80) !important;
}
/* Bouton blanc sur fond bleu */
.sh-btn-white {
background: #FFFFFF !important;
color: #0077B6 !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.20) !important;
}
.sh-btn-white:hover {
background: #F0F7FF !important;
transform: translateY(-2px);
box-shadow: 0 14px 44px rgba(0,0,0,0.25) !important;
}
/* Bouton ghost blanc */
.sh-btn-ghost-white {
border-color: rgba(255,255,255,0.35) !important;
color: rgba(255,255,255,0.90) !important;
background: rgba(255,255,255,0.08) !important;
}
.sh-btn-ghost-white:hover {
border-color: rgba(255,255,255,0.60) !important;
color: #FFFFFF !important;
background: rgba(255,255,255,0.14) !important;
}
/* Stats sur fond bleu */
.sh-hero .sh-stat-val { color: #D4AF37 !important; font-size: 24px !important; }
.sh-hero .sh-stat-lbl { color: rgba(255,255,255,0.65) !important; }
.sh-hero .sh-stat-sep { background: rgba(255,255,255,0.18) !important; }
/* ── PHONES WRAPPER ─────────────────────────────────────── */
.sh-hero-phones {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
height: clamp(380px, 45vw, 580px);
}
/* ── iPhone mockup frame ────────────────────────────────── */
.kp-phone {
position: absolute;
filter: drop-shadow(0 40px 60px rgba(0,0,0,0.35));
/* animation définie par chaque phone individuellement pour garder leur transform */
}
.kp-phone-frame {
width: clamp(180px, 20vw, 260px);
height: clamp(370px, 41vw, 530px);
border-radius: clamp(30px, 3.5vw, 44px);
background: linear-gradient(160deg, #1C1C2E, #0D0D1A);
border: 9px solid #2A2A3E;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
inset 0 -1px 0 rgba(0,0,0,0.30),
0 0 0 1px rgba(255,255,255,0.05);
position: relative;
overflow: hidden;
}
/* Side button left */
.kp-phone-frame::before {
content: '';
position: absolute;
left: -12px; top: 110px;
width: 3px; height: 60px;
background: #2A2A3E;
border-radius: 2px 0 0 2px;
}
/* Side button right */
.kp-phone-frame::after {
content: '';
position: absolute;
right: -12px; top: 130px;
width: 3px; height: 80px;
background: #2A2A3E;
border-radius: 0 2px 2px 0;
}
/* Dynamic Island */
.kp-dynamic-island {
position: absolute;
top: 12px; left: 50%; transform: translateX(-50%);
width: 112px; height: 32px;
background: #000;
border-radius: 20px;
z-index: 20;
}
/* Phone screens */
.kp-phone-screen {
position: absolute;
inset: 0;
border-radius: 35px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ── Phone FRONT (Dashboard) ─────────────────────────────── */
.kp-phone-front {
bottom: 0;
left: 50%;
z-index: 10;
animation: kp-front-float 6s ease-in-out infinite;
}
@keyframes kp-front-float {
0%,100% { transform: translateX(-30%) translateY(0); }
50% { transform: translateX(-30%) translateY(-10px); }
}
.kp-screen-pos {
background: linear-gradient(180deg, #0F2D5C 0%, #0A1F40 100%);
}
/* ── Phone BACK (Analyses) ───────────────────────────────── */
.kp-phone-back {
bottom: -20px;
left: 50%;
z-index: 5;
filter: drop-shadow(0 40px 60px rgba(0,0,0,0.40)) brightness(0.88);
animation: kp-back-float 6s 0.8s ease-in-out infinite;
}
@keyframes kp-back-float {
0%,100% { transform: translateX(-84%) rotate(-8deg) scale(0.90) translateY(0); }
50% { transform: translateX(-84%) rotate(-8deg) scale(0.90) translateY(-10px); }
}
.kp-screen-analytics {
background: linear-gradient(180deg, #0D2B3E 0%, #071A27 100%);
}
/* ── Status bar (iPhone/Samsung style) ─────────────────── */
.kp-status-bar {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 16px 4px;
font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.9);
letter-spacing: 0.3px; flex-shrink: 0;
}
.kp-status-icons { display: flex; gap: 4px; font-size: 8px; }
/* ── Inventory phone content ────────────────────────────── */
.kp-inv-title { color: #fff; font-size: 10px; font-weight: 700; padding: 6px 10px 4px; }
.kp-inv-stats { display: flex; gap: 4px; padding: 0 8px 6px; }
.kp-inv-stat { flex: 1; border-radius: 7px; padding: 5px 4px; text-align: center; }
.kp-inv-blue { background: rgba(0,119,182,0.25); }
.kp-inv-red { background: rgba(220,38,38,0.22); }
.kp-inv-amber{ background: rgba(217,119,6,0.22); }
.kp-inv-val { font-size: 13px; font-weight: 800; color: #fff; }
.kp-inv-lbl { font-size: 7px; color: rgba(255,255,255,0.65); margin-top: 1px; }
.kp-cat-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px 4px; }
.kp-cat-bar { width: 4px; height: 20px; border-radius: 3px; flex-shrink: 0; }
.kp-cat-label{ font-size: 9px; font-weight: 700; color: #fff; flex: 1; }
.kp-prod-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
.kp-prod-thumb { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.kp-prod-info { flex: 1; min-width: 0; }
.kp-prod-nm { font-size: 8px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-prod-chips { display: flex; gap: 3px; margin-top: 2px; }
.kp-chip-sm { font-size: 7px; font-weight: 700; padding: 1px 4px; border-radius: 10px; display: inline-block; line-height: 1.3; }
.kp-chip-b { background: rgba(0,119,182,0.35); color: #7dd3fc; }
.kp-chip-g { background: rgba(22,163,74,0.30); color: #86efac; }
.kp-chip-a { background: rgba(217,119,6,0.30); color: #fcd34d; }
.kp-chip-r { background: rgba(220,38,38,0.30); color: #fca5a5; }
/* ── Caisse POS phone content ───────────────────────────── */
.kp-caisse-cats { display: flex; gap: 4px; padding: 5px 8px; overflow: hidden; }
.kp-cpill { font-size: 8px; font-weight: 600; padding: 3px 7px; border-radius: 20px; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); white-space: nowrap; }
.kp-cpill-on { background: #0077B6; color: #fff; }
.kp-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 8px 5px; flex: 1; }
.kp-pc { background: rgba(255,255,255,0.07); border-radius: 10px; padding: 7px 6px 6px; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(255,255,255,0.08); }
.kp-pc-img { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 4px; }
.kp-pc-nm { font-size: 7.5px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 2px; line-height: 1.2; }
.kp-pc-px { font-size: 9px; font-weight: 800; color: #D4AF37; margin-bottom: 4px; }
.kp-pc-btn { font-size: 7px; font-weight: 600; background: #0077B6; color: #fff; border-radius: 6px; padding: 2px 7px; }
.kp-cart-fab { display: flex; align-items: center; gap: 6px; background: #0077B6; border-radius: 14px; padding: 7px 10px; margin: 0 8px 4px; }
.kp-cart-fab span:first-child { font-size: 14px; }
.kp-cfab-cnt { font-size: 8px; color: rgba(255,255,255,0.8); }
.kp-cfab-tot { font-size: 11px; font-weight: 800; color: #fff; }
/* ── Mobile : "Se connecter" = lien simple, CTA garde toute la place ── */
@media (max-width: 540px) {
.sh-nav-right { gap: 8px; }
.sh-nav-login {
padding: 0;
border: none;
background: transparent;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.9);
text-decoration: underline;
text-underline-offset: 3px;
}
.sh-nav-login:hover { background: transparent; border: none; opacity: 0.75; }
.sh-nav-cta { padding: 9px 16px; font-size: 13px; }
}
/* ── Status bar ─────────────────────────────────────────── */
.kp-ps-statusbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 18px 8px;
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.9);
flex-shrink: 0;
}
.kp-ps-icons { display: flex; gap: 5px; align-items: center; }
/* ── POS screen content ─────────────────────────────────── */
.kp-ps-pos-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px 10px;
border-bottom: 1px solid rgba(255,255,255,0.10);
flex-shrink: 0;
}
.kp-ps-store-name { font-size: 12px; font-weight: 700; color: #FFFFFF; }
.kp-ps-date { font-size: 10px; color: rgba(255,255,255,0.50); }
.kp-ps-items {
flex: 1;
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 5px;
overflow: hidden;
}
.kp-ps-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 10px;
border-radius: 8px;
background: rgba(255,255,255,0.10);
font-size: 11px;
}
.kp-item-name { color: rgba(255,255,255,0.90); font-weight: 500; }
.kp-item-price { color: #D4AF37; font-weight: 700; }
.kp-item-1 { animation: sh-prod-in 0.5s 0.5s ease both; }
.kp-item-2 { animation: sh-prod-in 0.5s 0.7s ease both; }
.kp-item-3 { animation: sh-prod-in 0.5s 0.9s ease both; }
.kp-ps-total-bar {
display: flex;
justify-content: space-between;
padding: 8px 16px;
background: rgba(0,0,0,0.20);
flex-shrink: 0;
}
.kp-ps-total-lbl { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; align-self: center; }
.kp-ps-total-val { font-size: 18px; font-weight: 900; color: #D4AF37; }
.kp-ps-pay-btn {
margin: 8px 12px 6px;
padding: 10px;
border-radius: 10px;
background: linear-gradient(135deg, #D4AF37, #B8961E);
color: #1A2332;
font-size: 12px;
font-weight: 700;
text-align: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(212,175,55,0.40);
}
.kp-ps-modes {
display: flex;
gap: 5px;
padding: 0 12px 12px;
flex-shrink: 0;
}
.kp-ps-mode {
flex: 1;
text-align: center;
padding: 5px 3px;
border-radius: 7px;
font-size: 9px;
font-weight: 600;
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.55);
}
.kp-mode-cash { background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.30); color: #86EFAC; }
.kp-mode-wave { background: rgba(212,175,55,.10); border-color: rgba(212,175,55,.30); color: #F0CC5A; }
.kp-mode-om { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); color: #FCD34D; }
/* ── Analytics screen content ───────────────────────────── */
.kp-ps-analytics-header {
display: flex;
justify-content: space-between;
padding: 8px 16px 4px;
flex-shrink: 0;
}
.kp-ps-ana-title { font-size: 13px; font-weight: 700; color: #FFFFFF; }
.kp-ps-ana-date { font-size: 10px; color: rgba(255,255,255,0.45); align-self: center; }
.kp-ps-ca-block {
padding: 10px 16px;
flex-shrink: 0;
}
.kp-ps-ca-lbl { font-size: 10px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.kp-ps-ca-val { font-size: 26px; font-weight: 900; color: #FFFFFF; line-height: 1.1; }
.kp-ps-ca-trend { font-size: 10px; color: #86EFAC; font-weight: 600; margin-top: 2px; }
.kp-ps-chart {
display: flex;
align-items: flex-end;
gap: 5px;
padding: 8px 16px;
height: 70px;
flex-shrink: 0;
}
.kp-bar {
flex: 1;
background: rgba(255,255,255,0.18);
border-radius: 3px 3px 0 0;
transition: height 0.5s ease;
}
.kp-bar-1 { height: 40%; }
.kp-bar-2 { height: 55%; }
.kp-bar-3 { height: 35%; }
.kp-bar-4 { height: 70%; }
.kp-bar-5.kp-bar-active { height: 90%; background: #D4AF37; }
.kp-bar-6 { height: 50%; }
.kp-bar-7 { height: 30%; }
.kp-ps-mini-stats {
display: flex;
padding: 8px 12px;
background: rgba(0,0,0,0.15);
flex-shrink: 0;
}
.kp-ps-mini-stat {
flex: 1;
text-align: center;
}
.kp-ps-mini-val { display: block; font-size: 16px; font-weight: 700; color: #FFFFFF; }
.kp-ps-mini-lbl { font-size: 9px; color: rgba(255,255,255,0.50); }
.kp-ps-mini-sep { width: 1px; background: rgba(255,255,255,0.10); margin: 2px 0; }
.kp-ps-top-prod {
padding: 8px 16px;
margin: 4px 12px;
border-radius: 8px;
background: rgba(212,175,55,0.12);
border: 1px solid rgba(212,175,55,0.25);
flex-shrink: 0;
}
.kp-ps-tp-lbl { font-size: 9px; color: #D4AF37; font-weight: 600; letter-spacing: 0.04em; }
.kp-ps-tp-val { font-size: 11px; color: rgba(255,255,255,0.85); font-weight: 500; margin-top: 1px; }
/* ── Badges flottants autour du phone ───────────────────── */
.kp-phone-badge {
position: absolute;
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border-radius: 12px;
background: #FFFFFF;
box-shadow: 0 8px 28px rgba(0,0,0,0.18);
font-size: 11px;
z-index: 20;
white-space: nowrap;
}
.kp-badge-sale {
bottom: 60px; left: -30px;
animation: sh-fb-slide-right 0.7s 1.5s ease both;
}
.kp-badge-stock {
top: 80px; right: -25px;
animation: sh-fb-slide-left 0.7s 2s ease both;
}
.kp-pb-lbl { color: #64748B; font-size: 10px; margin-bottom: 1px; }
.kp-pb-val { color: #1A2332; font-weight: 700; font-size: 12px; }
/* ── Vague héro → blanc ─────────────────────────────────── */
.sh-hero-wave {
position: absolute;
bottom: 0;
left: 0;
right: 0;
line-height: 0;
}
.sh-hero-wave svg {
width: 100%;
height: 80px;
display: block;
}
/* ── SECTION LABELS & TITLES ────────────────────────────── */
.sh-section-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.10em;
color: #0077B6;
margin-bottom: 12px;
}
.sh-section-title {
font-family: 'Poppins', 'Inter', sans-serif;
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 800;
line-height: 1.15;
color: #1A2332;
margin-bottom: 0;
}
.sh-section-head {
text-align: center;
margin-bottom: 56px;
}
/* ── BENEFITS ───────────────────────────────────────────── */
.sh-benefits {
background: #FFFFFF;
padding: 100px 64px;
position: relative;
z-index: 1;
}
/* Logo centré discret (filigrane global) */
.sh-benefits::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 540px;
background-image: url('/img/rabidpos-logo.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.04;
pointer-events: none;
z-index: 0;
}
/* Logo très grand — position fixe viewport (zoom-proof) */
.sh-benefits::after {
content: '';
position: absolute;
inset: 0;
background-image: url('/img/rabidpos-logo.jpg');
background-attachment: fixed;
background-size: 75vw auto;
background-repeat: no-repeat;
background-position: center 30vh;
opacity: 0.11;
pointer-events: none;
z-index: 0;
}
.sh-benefits-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 1; }
.sh-benefits-intro {
max-width: 620px; margin: 0 auto;
font-size: 16px; color: #64748B; line-height: 1.7; text-align: center;
margin-top: 12px;
}
.sh-benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
}
.sh-benefit-card {
background: #F8FAFC;
border: 1.5px solid rgba(0,119,182,0.10);
border-radius: 20px;
padding: 28px 24px;
display: flex; flex-direction: column; gap: 10px;
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.sh-benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 48px rgba(0,119,182,0.10);
border-color: rgba(0,119,182,0.22);
}
.sh-benefit-ico-wrap {
width: 48px; height: 48px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 22px; flex-shrink: 0;
}
.sh-bico-blue { background: rgba(0,119,182,0.10); }
.sh-bico-green { background: rgba(22,163,74,0.10); }
.sh-bico-amber { background: rgba(217,119,6,0.10); }
.sh-bico-violet { background: rgba(99,102,241,0.10); }
.sh-benefit-tag {
display: inline-block; font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.07em;
padding: 3px 10px; border-radius: 100px;
}
.sh-btag-blue { background: rgba(0,119,182,0.08); color: #0077B6; }
.sh-btag-green { background: rgba(22,163,74,0.08); color: #16A34A; }
.sh-btag-amber { background: rgba(217,119,6,0.08); color: #D97706; }
.sh-btag-violet { background: rgba(99,102,241,0.08); color: #6366F1; }
.sh-benefit-title {
font-family: 'Poppins','Inter',sans-serif;
font-size: 17px; font-weight: 700; color: #1A2332; line-height: 1.35;
}
.sh-benefit-desc {
font-size: 14px; color: #64748B; line-height: 1.7; flex: 1;
}
.sh-benefit-impact {
font-size: 13px; font-weight: 600; color: #0077B6;
padding-top: 8px; border-top: 1px solid rgba(0,119,182,0.08);
}
/* ── HOW IT WORKS ───────────────────────────────────────── */
.sh-howit {
background: #FFFFFF;
padding: 100px 64px;
position: relative;
z-index: 1;
}
.sh-howit-inner {
max-width: 1100px;
margin: 0 auto;
}
.sh-steps {
display: flex;
flex-direction: column;
gap: 80px;
}
.sh-step {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.sh-step-reverse { direction: rtl; }
.sh-step-reverse .sh-step-content,
.sh-step-reverse .sh-step-phone-wrap { direction: ltr; }
.sh-step-num {
font-family: 'Poppins', sans-serif;
font-size: 72px;
font-weight: 900;
color: rgba(0,119,182,0.08);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -3px;
}
.sh-step-title {
font-family: 'Poppins', sans-serif;
font-size: 26px;
font-weight: 700;
color: #1A2332;
margin-bottom: 14px;
}
.sh-step-desc {
font-size: 15px;
line-height: 1.8;
color: #64748B;
margin-bottom: 20px;
}
.sh-step-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.sh-step-list li {
font-size: 14px;
font-weight: 500;
color: #1A2332;
}
/* Step phone (compact) */
.sh-step-phone-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.kp-step-phone {
width: 220px;
height: 380px;
border-radius: 36px;
background: linear-gradient(160deg, #1C1C2E, #0D0D1A);
border: 7px solid #2A2A3E;
box-shadow:
0 30px 60px rgba(0,119,182,0.18),
0 0 0 1px rgba(255,255,255,0.05);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kp-step-phone::before {
content: '';
position: absolute;
top: 10px; left: 50%; transform: translateX(-50%);
width: 80px; height: 24px;
background: #000;
border-radius: 12px;
z-index: 10;
}
.kp-step-phone:hover {
transform: translateY(-8px) rotate(1deg);
box-shadow: 0 44px 80px rgba(0,119,182,0.24);
}
.sh-howit .sh-step:hover .kp-step-phone {
transform: translateY(-6px);
}
.kp-sp-screen {
position: absolute;
inset: 0;
border-radius: 29px;
overflow: hidden;
padding: 48px 0 0;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #005F92, #003460);
}
.kp-sp-header {
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.90);
padding: 0 14px 8px;
border-bottom: 1px solid rgba(255,255,255,0.10);
flex-shrink: 0;
}
.kp-sp-field {
padding: 7px 14px;
flex-shrink: 0;
}
.kp-sp-label {
font-size: 8px;
font-weight: 700;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 3px;
}
.kp-sp-input {
padding: 6px 10px;
border-radius: 6px;
background: rgba(255,255,255,0.10);
font-size: 11px;
color: #FFFFFF;
font-weight: 500;
border: 1px solid rgba(255,255,255,0.12);
}
.kp-sp-select { background-image: none; }
.kp-sp-btn {
margin: 8px 14px;
padding: 8px 12px;
border-radius: 8px;
background: linear-gradient(135deg, #D4AF37, #B8961E);
color: #1A2332;
font-size: 10px;
font-weight: 700;
text-align: center;
}
/* Products screen */
.kp-sp-prod-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kp-sp-prod-ico { font-size: 16px; flex-shrink: 0; }
.kp-sp-prod-name { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.90); }
.kp-sp-prod-stock { font-size: 9px; color: rgba(255,255,255,0.45); }
.kp-sp-prod-price { margin-left: auto; font-size: 11px; font-weight: 700; color: #D4AF37; flex-shrink: 0; }
.kp-stock-low { color: #FBBF24 !important; }
.kp-sp-add-btn {
margin: 8px 14px;
padding: 7px;
border-radius: 6px;
border: 1.5px dashed rgba(0,119,182,0.4);
font-size: 10px;
font-weight: 600;
color: #60A5FA;
text-align: center;
}
/* POS screen step */
.kp-sp-cart {
padding: 6px 14px;
flex-shrink: 0;
}
.kp-sp-cart-item {
display: flex;
justify-content: space-between;
padding: 5px 0;
font-size: 10px;
color: rgba(255,255,255,0.80);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kp-sp-total {
display: flex;
justify-content: space-between;
padding: 7px 14px;
background: rgba(0,0,0,0.15);
font-size: 10px;
color: rgba(255,255,255,0.55);
flex-shrink: 0;
}
.kp-sp-total-val { font-size: 15px; font-weight: 900; color: #D4AF37; }
.kp-sp-pay-modes {
display: flex;
gap: 4px;
padding: 6px 14px;
flex-shrink: 0;
}
.kp-sp-pm {
flex: 1;
text-align: center;
font-size: 8px;
font-weight: 600;
padding: 5px 2px;
border-radius: 5px;
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.45);
}
.kp-pm-active {
background: rgba(212,175,55,0.15);
border-color: #D4AF37;
color: #D4AF37;
}
.kp-sp-confirm {
margin: 6px 14px;
padding: 7px 10px;
border-radius: 7px;
background: rgba(22,163,74,0.15);
border: 1px solid rgba(22,163,74,0.30);
font-size: 10px;
font-weight: 600;
color: #86EFAC;
text-align: center;
}
/* ── FEATURES override ──────────────────────────────────── */
.sh-features {
background: #F0F7FF !important;
}
.sh-features-head {
text-align: center;
margin-bottom: 48px;
padding: 0 48px;
}
/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
.sh-hero { padding: 100px 40px 100px !important; }
.sh-howit { padding: 80px 40px; }
.sh-step { gap: 40px; }
}
@media (max-width: 860px) {
.sh-hero-inner {
grid-template-columns: 1fr !important;
text-align: center;
gap: 48px !important;
}
.sh-hero { padding: 90px 24px 100px !important; }
.sh-hero-copy { display: flex; flex-direction: column; align-items: center; }
.sh-hero .sh-subline { max-width: 100%; }
.sh-hero .sh-hero-stats { justify-content: center; }
.sh-hero-phones { height: clamp(320px, 42vw, 460px); }
.kp-phone-frame { width: clamp(160px, 19vw, 210px); height: clamp(330px, 38vw, 430px); }
.kp-phone-back { transform: translateX(-88%) rotate(-8deg) scale(0.88); }
.kp-phone-front { transform: translateX(-22%); }
.sh-howit { padding: 70px 24px; }
.sh-step, .sh-step-reverse { grid-template-columns: 1fr; direction: ltr; gap: 32px; text-align: center; }
.sh-step-reverse .sh-step-phone-wrap { order: -1; }
.sh-step-list { align-items: center; }
.sh-features-head { padding: 0; }
}
@media (max-width: 540px) {
.sh-hero-phones { height: clamp(280px, 70vw, 380px); }
.kp-phone-frame { width: clamp(140px, 38vw, 180px); height: clamp(290px, 78vw, 370px); }
.kp-phone-back { transform: translateX(-95%) rotate(-8deg) scale(0.85); }
.kp-phone-front { transform: translateX(-10%); }
.kp-badge-sale, .kp-badge-stock { display: none; }
.kp-step-phone { width: 180px; height: 310px; }
}
.sc-btn-outline {
width: 100%; padding: 11px; border-radius: 10px;
border: 1.5px solid rgba(0,119,182,0.22); background: transparent;
font-family: 'Poppins','Inter',sans-serif; font-size: 14px; font-weight: 600;
color: #0077B6; cursor: pointer; margin-top: 8px;
transition: border-color 0.2s, background 0.2s;
}
.sc-btn-outline:hover { border-color: #0077B6; background: rgba(0,119,182,0.05); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.sh-features-inner { grid-template-columns: repeat(2, 1fr); }
.sh-benefits-grid { grid-template-columns: repeat(2, 1fr); }
.sh-benefits { padding: 80px 40px; }
}
@media (max-width: 860px) {
.sh-nav { padding: 0 24px; gap: 16px; }
.sh-nav-links { display: none; }
.sh-hero { padding: 90px 24px 100px; }
.sh-hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
.sh-hero-copy { display: flex; flex-direction: column; align-items: center; }
.sh-hero-logo-img { width: 300px; }
.sh-subline { max-width: 100%; }
.sh-hero-stats { justify-content: center; }
.sh-hero-mockup { justify-content: center; }
.sh-fb-sale { left: -10px; bottom: 10px; }
.sh-fb-stock { right: -10px; top: 30px; }
.sh-features { padding: 60px 24px; }
.sh-features-inner { grid-template-columns: 1fr 1fr; }
.sh-benefits { padding: 60px 24px; }
.sh-benefits-grid { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.sh-auth-section { padding: 60px 24px 80px; }
.sh-auth-section::before { left: 50%; right: auto; transform: translate(-50%,-50%); width: 92%; }
.sh-auth-section::after {
background: linear-gradient(
180deg,
transparent 0%,
transparent 20%,
rgba(235,243,253,0.55) 45%,
rgba(235,243,253,0.92) 68%,
#EBF3FD 82%
);
}
.sh-auth-inner { grid-template-columns: 1fr; gap: 40px; }
.sh-auth-pitch { text-align: center; }
.sh-trust-badges { align-items: center; }
.sh-footer { padding: 24px; }
}
@media (max-width: 540px) {
.sh-features-inner { grid-template-columns: 1fr; }
.sh-benefits-grid { grid-template-columns: 1fr; gap: 14px; }
.sh-benefits-intro { font-size: 14px; }
.sh-mock-device { width: 260px; }
.sh-fb-sale, .sh-fb-stock { display: none; }
.sh-footer { flex-direction: column; gap: 12px; text-align: center; }
.sh-footer-copy { margin-left: 0; }
.sh-hero-logo-img { width: 240px; }
.sad-stats { grid-template-columns: 1fr; }
}
/* sc-form-group spacing */
.sc-form-group { margin-bottom: 16px; }
.sc-form-group label.sc-label { display: block; margin-bottom: 6px; }
/* ── Drawer mobile (patron + admin) — desktop : invisible ── */
.sad-mobile-topbar { display: none; }
.sad-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.45);
z-index: 150;
-webkit-tap-highlight-color: transparent;
}
.sad-overlay.open { display: block; }
/* ── Responsive admin / patron ── */
@media (max-width: 1024px) {
/* Sidebar → drawer slide-in */
.sad-sidebar {
transform: translateX(-100%);
transition: transform 0.26s cubic-bezier(.4,0,.2,1);
z-index: 200;
min-height: 100dvh;
box-shadow: none;
overflow-y: auto;
}
.sad-sidebar.open {
transform: translateX(0);
box-shadow: 6px 0 32px rgba(0,0,0,.32);
}
/* Main : pas de marge gauche, padding top pour la topbar */
.sad-main { margin-left: 0; padding: 76px 24px 28px; }
/* Topbar mobile */
.sad-mobile-topbar {
display: flex;
align-items: center;
gap: 12px;
position: fixed;
top: 0; left: 0; right: 0;
height: 56px;
background: var(--sad-navy);
padding: 0 16px;
z-index: 180;
border-bottom: 1px solid rgba(255,255,255,.07);
box-sizing: border-box;
}
.sad-mobile-topbar-title {
flex: 1;
color: #fff;
font-family: 'Poppins','Inter',sans-serif;
font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
.sad-mobile-topbar-title em { color: var(--sad-gold); font-style: normal; }
.sad-hamburger {
display: flex; flex-direction: column; justify-content: center; gap: 4px;
width: 36px; height: 36px; padding: 7px 6px;
background: none; border: none; cursor: pointer; border-radius: 6px;
flex-shrink: 0;
}
.sad-hamburger span {
display: block; width: 100%; height: 2px;
background: rgba(255,255,255,.85); border-radius: 2px;
}
.sad-hamburger:active { background: rgba(255,255,255,.08); }
/* iOS fix : empêche le zoom auto sur les inputs (font-size < 16px déclenche le zoom Safari) */
.sh-input, .sh-select,
.sc-input, .sc-select,
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea {
font-size: 16px !important;
}
}
@media (max-width: 768px) {
.sad-stats { grid-template-columns: 1fr 1fr; }
.sad-page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 480px) {
.sad-stats { grid-template-columns: 1fr; }
.sad-main { padding: 68px 12px 20px; }
.sad-mobile-topbar { height: 52px; }
}
/* ============================================================
CLIENTS TABLE CARD — FlexiFilterTable style (admin)
Classes: clt-*
============================================================ */
.clt-card {
background: var(--sad-white);
border: 1px solid var(--sad-border);
border-radius: 12px;
overflow: hidden;
}
/* En-tête */
.clt-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--sad-bord-lt);
flex-wrap: wrap;
}
.clt-search-wrap { flex-shrink: 0; }
.clt-search-wrap .sad-search-inp { width: 220px; }
/* Barre filtres */
.clt-filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 24px;
border-bottom: 1px solid var(--sad-bord-lt);
background: var(--sad-bg);
}
/* Bulk bar intégrée dans la card (sans margin externe) */
.clt-bulk-bar {
border-radius: 0;
margin: 0;
border-top: 1px solid rgba(255,255,255,.08);
}
/* Zone scrollable */
.clt-scroll-wrap {
overflow-x: auto;
overflow-y: auto;
max-height: 480px;
}
/* Tableau */
.clt-table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
}
.clt-table thead {
position: sticky;
top: 0;
z-index: 2;
background: var(--sad-navy);
}
.clt-table th {
padding: 11px 14px;
text-align: left;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .10em;
color: rgba(255,255,255,.60);
white-space: nowrap;
}
.clt-table th.sortable { cursor: pointer; user-select: none; }
.clt-table th.sortable:hover { color: rgba(255,255,255,.95); }
.clt-table th.sort-asc .sad-sort-ico::after { content: ' ↑'; color: var(--sad-gold); }
.clt-table th.sort-desc .sad-sort-ico::after { content: ' ↓'; color: var(--sad-gold); }
.clt-table th.sortable:not(.sort-asc):not(.sort-desc) .sad-sort-ico::after { content: ' ↕'; opacity: .3; }
.clt-table td {
padding: 12px 14px;
font-size: 13px;
line-height: 1.4;
border-bottom: 1px solid var(--sad-bord-lt);
vertical-align: middle;
color: var(--sad-text);
}
.clt-table tr:last-child td { border-bottom: none; }
.clt-table tr:hover td { background: #F6F4F0; }
.clt-table input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--sad-blue); }
.clt-check-col { width: 40px !important; padding-left: 16px !important; }
.clt-th-actions { width: 48px !important; padding: 0 !important; text-align: center !important; }
/* Nom + type client */
.clt-client-name { font-weight: 600; color: var(--sad-navy); }
.clt-client-type { font-size: 11px; color: var(--sad-muted); margin-top: 2px; }
/* Dropdown action (⋮) */
.clt-action-wrap { position: relative; display: flex; justify-content: center; }
.clt-action-btn {
background: none;
border: 1px solid var(--sad-border);
border-radius: 6px;
padding: 5px 11px;
cursor: pointer;
font-size: 17px;
color: var(--sad-muted);
line-height: 1;
transition: all 140ms var(--sad-ease);
font-family: monospace;
}
.clt-action-btn:hover { background: var(--sad-bord-lt); color: var(--sad-navy); border-color: var(--sad-navy); }
.clt-dropdown {
display: none;
position: absolute;
right: 0;
top: calc(100% + 4px);
background: var(--sad-white);
border: 1px solid var(--sad-border);
border-radius: 8px;
box-shadow: 0 8px 28px rgba(0,0,0,.14);
z-index: 200;
min-width: 172px;
overflow: hidden;
}
.clt-dropdown.open { display: block; }
.clt-dropdown button {
display: block;
width: 100%;
padding: 10px 16px;
text-align: left;
background: none;
border: none;
border-top: 1px solid var(--sad-bord-lt);
cursor: pointer;
font-size: 13px;
color: var(--sad-text);
font-family: 'Poppins', sans-serif;
font-weight: 500;
transition: background 120ms;
}
.clt-dropdown button:first-child { border-top: none; }
.clt-dropdown button:hover { background: var(--sad-bord-lt); }
.clt-dropdown button.clt-dd-danger { color: #DC2626; }
.clt-dropdown button.clt-dd-danger:hover { background: #FEF2F2; }
/* Pied de tableau */
.clt-footer {
display: flex;
align-items: center;
padding: 11px 24px;
border-top: 1px solid var(--sad-bord-lt);
background: var(--sad-bg);
font-size: 12px;
color: var(--sad-muted);
font-weight: 500;
}
/* Select filtre boutique dans les card headers */
.clt-filter-select {
height: 36px;
padding: 0 10px;
border: 1px solid var(--sad-border);
border-radius: 8px;
font-size: 13px;
font-family: 'Poppins', sans-serif;
color: var(--sad-text);
background: var(--sad-white);
outline: none;
cursor: pointer;
transition: border-color 180ms var(--sad-ease);
max-width: 200px;
}
.clt-filter-select:focus { border-color: var(--sad-blue); box-shadow: 0 0 0 3px rgba(0,119,182,.12); }
/* Transactions wrapper dans la card */
.pat-txn-wrap {
padding: 16px 20px;
overflow-y: auto;
max-height: 600px;
}
.pat-txn-wrap:empty::before {
content: 'Chargement\2026';
display: block;
text-align: center;
padding: 40px;
color: var(--sad-muted);
font-size: 13px;
}
/* Responsive */
@media (max-width: 640px) {
.clt-col-tel,
.clt-col-bouts,
.clt-col-code { display: none; }
.clt-search-wrap .sad-search-inp { width: 150px; }
.clt-topbar { padding: 14px 16px 12px; }
.clt-filter-bar { padding: 8px 16px; }
.clt-footer { padding: 10px 16px; }
.clt-filter-select { max-width: 140px; font-size: 12px; }
.pat-txn-wrap { padding: 12px 14px; }
}
/* ============================================================
PHONE SCREEN INTERNALS — RabidPOS App UI Mockup
Classes: kp-app-*, kp-db-*, kp-an-*, kp-bn-*
============================================================ */
/* ── App Topbar (shared front + back) ───────────────────── */
.kp-app-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px 12px 8px;
background: rgba(0,0,0,0.25);
flex-shrink: 0;
}
.kp-app-tb-brand {
display: flex;
align-items: center;
gap: 5px;
}
.kp-app-tb-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #D4AF37;
flex-shrink: 0;
}
.kp-app-tb-name {
font-size: 10px;
font-weight: 700;
color: #FFFFFF;
letter-spacing: 0.02em;
}
.kp-app-tb-bout {
font-size: 9px;
font-weight: 600;
color: rgba(212,175,55,0.9);
background: rgba(212,175,55,0.12);
padding: 1px 5px;
border-radius: 4px;
border: 1px solid rgba(212,175,55,0.25);
}
.kp-app-tb-user {
font-size: 9px;
font-weight: 600;
color: rgba(255,255,255,0.6);
background: rgba(255,255,255,0.1);
padding: 2px 7px;
border-radius: 10px;
}
/* ── Bottom Navigation ──────────────────────────────────── */
.kp-app-bottom-nav {
display: flex;
justify-content: space-around;
align-items: center;
padding: 8px 0 10px;
border-top: 1px solid rgba(255,255,255,0.10);
background: rgba(0,0,0,0.30);
flex-shrink: 0;
margin-top: auto;
}
.kp-bn-item {
font-size: 16px;
opacity: 0.45;
cursor: pointer;
transition: opacity 0.2s;
}
.kp-bn-active {
opacity: 1;
position: relative;
}
.kp-bn-active::after {
content: '';
position: absolute;
bottom: -6px; left: 50%;
transform: translateX(-50%);
width: 18px; height: 2px;
border-radius: 2px;
background: #D4AF37;
}
/* ── FRONT PHONE — Dashboard / Accueil ─────────────────── */
.kp-db-welcome-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px 4px;
flex-shrink: 0;
}
.kp-db-welcome {
font-size: 11px;
font-weight: 700;
color: #FFFFFF;
}
.kp-db-sub {
font-size: 9px;
color: rgba(255,255,255,0.50);
margin-top: 1px;
}
/* Stats du jour */
.kp-db-stats {
display: flex;
gap: 6px;
padding: 6px 12px;
flex-shrink: 0;
}
.kp-db-stat {
flex: 1;
background: rgba(255,255,255,0.10);
border-radius: 8px;
padding: 8px 8px 6px;
border: 1px solid rgba(255,255,255,0.08);
}
.kp-db-stat-gold {
background: rgba(212,175,55,0.15);
border-color: rgba(212,175,55,0.30);
}
.kp-db-stat-val {
font-size: 13px;
font-weight: 800;
color: #FFFFFF;
line-height: 1.1;
}
.kp-db-stat-gold .kp-db-stat-val {
color: #D4AF37;
}
.kp-db-stat-lbl {
font-size: 9px;
color: rgba(255,255,255,0.50);
margin-top: 2px;
}
/* Actions rapides */
.kp-db-actions {
display: flex;
gap: 6px;
padding: 6px 12px;
flex-shrink: 0;
}
.kp-db-action {
flex: 1;
background: rgba(255,255,255,0.08);
border-radius: 8px;
padding: 7px 4px 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
border: 1px solid rgba(255,255,255,0.07);
cursor: pointer;
transition: background 0.2s;
}
.kp-db-act-ico { font-size: 14px; line-height: 1; }
.kp-db-act-lbl {
font-size: 8px;
font-weight: 600;
color: rgba(255,255,255,0.70);
text-align: center;
}
/* Activité récente */
.kp-db-recent-hd {
font-size: 9px;
font-weight: 700;
color: rgba(255,255,255,0.50);
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 4px 12px 3px;
flex-shrink: 0;
}
.kp-db-recent-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 12px;
border-bottom: 1px solid rgba(255,255,255,0.05);
flex-shrink: 0;
}
.kp-ri-name {
font-size: 10px;
color: rgba(255,255,255,0.80);
font-weight: 500;
}
.kp-ri-price {
font-size: 10px;
color: #D4AF37;
font-weight: 700;
}
/* ── BACK PHONE — Analyses ──────────────────────────────── */
.kp-an-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px 6px;
flex-shrink: 0;
}
.kp-an-title {
font-size: 12px;
font-weight: 700;
color: #FFFFFF;
}
.kp-an-period-bar {
display: flex;
gap: 3px;
background: rgba(255,255,255,0.08);
border-radius: 6px;
padding: 2px;
}
.kp-an-period {
font-size: 8px;
font-weight: 600;
color: rgba(255,255,255,0.45);
padding: 2px 6px;
border-radius: 5px;
}
.kp-an-period-active {
background: #0077B6;
color: #FFFFFF;
}
/* KPIs grid */
.kp-an-kpis {
display: flex;
gap: 4px;
padding: 4px 10px 6px;
flex-shrink: 0;
}
.kp-an-kpi {
flex: 1;
background: rgba(255,255,255,0.08);
border-radius: 7px;
padding: 6px 6px 5px;
text-align: center;
border: 1px solid rgba(255,255,255,0.07);
}
.kp-an-kpi-val {
font-size: 11px;
font-weight: 800;
color: #FFFFFF;
line-height: 1.1;
}
.kp-an-kpi-lbl {
font-size: 7.5px;
color: rgba(255,255,255,0.45);
margin-top: 1px;
}
.kp-an-kpi-trend {
font-size: 7.5px;
font-weight: 700;
margin-top: 2px;
}
.kp-trend-up { color: #86EFAC; }
.kp-trend-down { color: #FCA5A5; }
/* Bar chart */
.kp-an-chart-lbl {
font-size: 8px;
font-weight: 700;
color: rgba(255,255,255,0.40);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 12px;
flex-shrink: 0;
}
.kp-an-chart {
display: flex;
align-items: flex-end;
gap: 4px;
padding: 4px 12px 2px;
height: 52px;
flex-shrink: 0;
}
.kp-an-bar {
flex: 1;
background: rgba(255,255,255,0.18);
border-radius: 3px 3px 0 0;
min-width: 0;
transition: height 0.5s ease;
}
.kp-an-bar-gold {
background: #D4AF37;
}
/* Top produits */
.kp-an-top-lbl {
font-size: 8px;
font-weight: 700;
color: rgba(255,255,255,0.40);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 12px 2px;
flex-shrink: 0;
}
.kp-an-top-item {
display: flex;
align-items: center;
gap: 5px;
padding: 3px 12px;
flex-shrink: 0;
}
.kp-an-top-name {
font-size: 8.5px;
color: rgba(255,255,255,0.70);
font-weight: 500;
min-width: 48px;
flex-shrink: 0;
}
.kp-an-top-bar {
flex: 1;
height: 5px;
background: rgba(255,255,255,0.10);
border-radius: 3px;
overflow: hidden;
}
.kp-an-top-fill {
height: 100%;
background: linear-gradient(90deg, #0077B6, #D4AF37);
border-radius: 3px;
}
.kp-an-top-cnt {
font-size: 8px;
font-weight: 700;
color: #D4AF37;
min-width: 14px;
text-align: right;
flex-shrink: 0;
}
/* ══ Toggle switch (rabidpos-patron) ══════════════════════════ */
.kp-toggle {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
flex-shrink: 0;
}
.kp-toggle input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.kp-toggle-slider {
position: absolute;
inset: 0;
background: #CBD5E1;
border-radius: 22px;
cursor: pointer;
transition: background .2s;
}
.kp-toggle-slider::before {
content: '';
position: absolute;
left: 3px;
top: 3px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform .2s;
box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.kp-toggle input:checked + .kp-toggle-slider {
background: #0077B6;
}
.kp-toggle input:checked + .kp-toggle-slider::before {
transform: translateX(18px);
}
/* ══════════════════════════════════════════════════════════════
COMMENT ÇA MARCHE — section how-it-works
============================================================ */
.sh-howitworks {
background: #FFFFFF;
padding: 100px 64px;
position: relative;
z-index: 1;
}
.sh-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 960px;
margin: 0 auto;
}
.sh-step {
text-align: center;
padding: 32px 24px;
border-radius: 16px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
transition: transform .2s, box-shadow .2s;
}
.sh-step:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,119,182,.1);
}
.sh-step-num {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #0077B6, #00B4D8);
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 4px 12px rgba(0,119,182,.3);
}
.sh-step-title {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: 700;
color: #1A2332;
margin: 0 0 10px;
}
.sh-step-desc {
font-size: 14px;
color: #64748B;
line-height: 1.6;
margin: 0;
}
@media (max-width: 860px) {
.sh-howitworks { padding: 60px 24px; }
.sh-steps { grid-template-columns: 1fr; gap: 16px; }
}
/* ══════════════════════════════════════════════════════════════
CHAMPS OBLIGATOIRES / OPTIONNELS
============================================================ */
.sh-req {
color: #E53E3E;
font-size: 13px;
margin-left: 2px;
}
.sh-opt {
color: #94A3B8;
font-size: 12px;
font-weight: 400;
margin-left: 4px;
}
/* ══════════════════════════════════════════════════════════════
ÉTAT DE CHARGEMENT — bouton admin
============================================================ */
.sh-btn-submit.loading,
button.loading {
opacity: .7;
pointer-events: none;
cursor: wait;
}
/* ============================================================
ADMIN DASHBOARD v7 — KPI cards · Charts · Activity
============================================================ */
/* ── KPI Grid ── */
.adm-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 20px;
}
.adm-kpi-card {
background: var(--sad-white);
border-radius: var(--sad-radius);
border: 1px solid var(--sad-border);
border-top: 3px solid transparent;
padding: 18px 20px 14px;
transition: transform 180ms var(--sad-ease), box-shadow 180ms var(--sad-ease);
}
.adm-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.adm-kpi-orange { border-top-color: #F59E0B; }
.adm-kpi-green { border-top-color: #10B981; }
.adm-kpi-blue { border-top-color: #0077B6; }
.adm-kpi-red { border-top-color: #EF4444; }
.adm-kpi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.adm-kpi-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--sad-muted); }
.adm-kpi-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.adm-kpi-orange .adm-kpi-icon { background: #FEF3C7; color: #D97706; }
.adm-kpi-green .adm-kpi-icon { background: #D1FAE5; color: #059669; }
.adm-kpi-blue .adm-kpi-icon { background: #EFF6FF; color: #0077B6; }
.adm-kpi-red .adm-kpi-icon { background: #FEE2E2; color: #DC2626; }
.adm-kpi-val { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.adm-kpi-orange .adm-kpi-val { color: #F59E0B; }
.adm-kpi-green .adm-kpi-val { color: #10B981; }
.adm-kpi-blue .adm-kpi-val { color: #0077B6; }
.adm-kpi-red .adm-kpi-val { color: #EF4444; }
.adm-kpi-trend { font-size: 11px; color: var(--sad-muted); }
.adm-kpi-spark { margin-top: 10px; line-height: 0; }
/* ── Charts row ── */
.adm-charts-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
gap: 14px;
margin-bottom: 20px;
}
.adm-charts-row > * { min-width: 0; }
.adm-chart-card {
background: var(--sad-white);
border: 1px solid var(--sad-border);
border-radius: var(--sad-radius);
padding: 20px 22px;
}
.adm-chart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.adm-chart-title { font-size: 14px; font-weight: 700; color: var(--sad-navy); }
.adm-chart-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--sad-muted); margin-top: 3px; font-weight: 600; }
.adm-chart-badge { background: var(--sad-navy); color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 4px 10px; white-space: nowrap; }
/* ── Bottom row ── */
.adm-bottom-row {
display: grid;
grid-template-columns: 1fr 280px;
gap: 14px;
}
.adm-card { background: var(--sad-white); border: 1px solid var(--sad-border); border-radius: var(--sad-radius); padding: 18px 20px; }
.adm-card-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--sad-muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--sad-bord-lt); }
/* ── Activity items ── */
.adm-activity-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sad-bord-lt); font-size: 12px; }
.adm-activity-item:last-child { border-bottom: none; }
.adm-activity-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.adm-activity-name { font-weight: 600; color: var(--sad-navy); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-activity-meta { display: flex; align-items: center; gap: 6px; color: var(--sad-muted); font-size: 10px; white-space: nowrap; }
/* ── Code status bars ── */
.adm-code-bar { margin-bottom: 11px; }
.adm-code-bar:last-child { margin-bottom: 0; }
.adm-code-bar-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--sad-navy); margin-bottom: 4px; }
.adm-code-bar-label span:last-child { color: var(--sad-muted); }
.adm-code-bar-track { height: 7px; border-radius: 4px; background: #F1F5F9; overflow: hidden; }
.adm-code-bar-fill { height: 100%; border-radius: 4px; transition: width 700ms cubic-bezier(.4,0,.2,1); min-width: 3px; }
/* ── City items ── */
.adm-city-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--sad-bord-lt); font-size: 12px; }
.adm-city-item:last-child { border-bottom: none; }
.adm-city-rank { width: 20px; height: 20px; border-radius: 5px; background: var(--sad-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex-shrink: 0; }
.adm-city-name { flex: 1; font-weight: 600; color: var(--sad-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-city-count { font-size: 10px; font-weight: 700; background: #F1F5F9; color: var(--sad-muted); border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
/* ── Donut legend ── */
.adm-donut-legend { flex: 1; }
.adm-donut-legend-item { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid var(--sad-bord-lt); font-size: 11px; }
.adm-donut-legend-item:last-child { border-bottom: none; }
.adm-donut-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.adm-donut-lbl { flex: 1; font-weight: 500; color: var(--sad-navy); }
.adm-donut-pct { font-weight: 700; color: var(--sad-muted); }
/* ── Refresh button ── */
.adm-refresh-btn {
display: flex; align-items: center; gap: 6px;
padding: 7px 13px;
border: 1px solid var(--sad-border);
border-radius: 8px;
background: var(--sad-white);
color: var(--sad-muted);
font-size: 12px; font-weight: 600;
cursor: pointer;
font-family: 'Poppins','Inter',sans-serif;
transition: all 180ms var(--sad-ease);
}
.adm-refresh-btn:hover { border-color: var(--sad-blue); color: var(--sad-blue); }
/* ============================================================
INDICATIF PAYS + PAVÉ NUMÉRIQUE
============================================================ */
/* ── Récapitulatif numéro (étape 2) ── */
.kp-tel-recap {
display: flex; align-items: center; gap: 8px;
background: #F0F7FF; border: 1.5px solid rgba(0,119,182,0.15);
border-radius: 10px; padding: 10px 14px;
font-size: 14px; font-weight: 600; color: #1A2332;
margin-bottom: 4px;
}
/* ── Country code selector ── */
.kp-tel-wrap { gap: 0; display: flex; width: 100%; }
.kp-cc-select {
flex-shrink: 0;
width: 82px;
padding: 11px 6px 11px 8px;
border-radius: 10px 0 0 10px;
border: 1.5px solid rgba(0,119,182,0.15);
border-right: none;
background: #F0F7FF;
font-size: 13px; font-weight: 600; color: #1A2332;
font-family: 'Poppins','Inter',sans-serif;
cursor: pointer;
outline: none;
appearance: none; -webkit-appearance: none;
}
.kp-cc-select:focus {
border-color: #0077B6;
box-shadow: 0 0 0 3px rgba(0,119,182,0.10);
}
/* Le champ tel adjacent prend tout l'espace restant */
.kp-tel-wrap .sh-input,
.kp-tel-wrap .sc-input {
flex: 1 1 0%;
width: auto !important;
min-width: 0;
border-radius: 0 10px 10px 0;
border-left: none !important;
padding-left: 12px;
}
/* ── Cases OTP ── */
.kp-otp-row {
display: flex; justify-content: center; align-items: center;
gap: 10px; margin: 20px 0 24px;
}
.kp-otp-box {
width: 48px; height: 58px;
border: 2px solid rgba(0,119,182,0.2);
border-radius: 12px;
background: #F8FAFC;
font-size: 26px; font-weight: 700; color: #1A2332;
text-align: center;
font-family: 'Poppins','Inter',sans-serif;
-webkit-text-security: disc; /* masque le chiffre sur Safari/iOS */
caret-color: #0077B6;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
/* empêche le zoom automatique sur iOS */
font-size: max(16px, 26px);
}
.kp-otp-box:focus {
border-color: #0077B6;
background: #EFF6FF;
box-shadow: 0 0 0 3px rgba(0,119,182,0.14);
}
.kp-otp-box:disabled {
opacity: 0.5; pointer-events: none;
}
.kp-otp-box.kp-otp-filled {
border-color: #0077B6;
background: #EFF6FF;
}
@media (max-width: 380px) {
.kp-otp-box { width: 40px; height: 50px; gap: 6px; }
.kp-otp-row { gap: 6px; }
}
/* ============================================================
DASHBOARD v2 — Crypto Dashboard inspired
============================================================ */
/* Background avec pattern de petits plus */
#sec-dashboard.adm-dash-v2 {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 10v20M10 20h20' stroke='%230077B6' stroke-width='0.4' stroke-opacity='0.09'/%3E%3C/svg%3E");
}
/* KPI card v2 */
.adm-kpi-v2 {
position: relative;
background: #fff;
border-radius: 18px;
border: 1px solid #E2E8F0;
border-top: 3px solid transparent;
padding: 20px 22px 16px;
box-shadow: 0 2px 16px rgba(0,0,0,.05);
transition: transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 240ms ease;
overflow: visible;
animation: adm-kpi-enter .5s cubic-bezier(.34,1.2,.64,1) both;
}
.adm-kpi-v2:hover {
transform: translateY(-5px) scale(1.018);
box-shadow: 0 18px 44px rgba(0,0,0,.10);
}
.adm-kpi-v2:nth-child(1) { animation-delay: .05s; }
.adm-kpi-v2:nth-child(2) { animation-delay: .12s; }
.adm-kpi-v2:nth-child(3) { animation-delay: .19s; }
.adm-kpi-v2:nth-child(4) { animation-delay: .26s; }
@keyframes adm-kpi-enter {
from { opacity: 0; transform: translateY(22px) scale(.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.adm-kpi-v2.kpi-orange { border-top-color: #F59E0B; }
.adm-kpi-v2.kpi-green { border-top-color: #10B981; }
.adm-kpi-v2.kpi-blue { border-top-color: #0077B6; }
.adm-kpi-v2.kpi-red { border-top-color: #EF4444; }
.adm-kpi-v2 .kpi-icon-badge {
width: 36px; height: 36px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.adm-kpi-v2.kpi-orange .kpi-icon-badge { background: #FEF3C7; color: #D97706; }
.adm-kpi-v2.kpi-green .kpi-icon-badge { background: #D1FAE5; color: #059669; }
.adm-kpi-v2.kpi-blue .kpi-icon-badge { background: #DBEAFE; color: #0077B6; }
.adm-kpi-v2.kpi-red .kpi-icon-badge { background: #FEE2E2; color: #DC2626; }
.adm-kpi-v2 .kpi-val {
font-size: 40px; font-weight: 800; line-height: 1;
letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
margin: 10px 0 5px;
}
.adm-kpi-v2.kpi-orange .kpi-val { color: #D97706; }
.adm-kpi-v2.kpi-green .kpi-val { color: #059669; }
.adm-kpi-v2.kpi-blue .kpi-val { color: #0077B6; }
.adm-kpi-v2.kpi-red .kpi-val { color: #DC2626; }
.adm-kpi-v2 .kpi-spark-wrap {
margin-top: 12px;
position: relative;
cursor: crosshair;
line-height: 0;
}
/* Tooltip sparkline interactive */
.adm-spark-tip {
position: absolute;
pointer-events: none;
background: #1A2332;
color: #fff;
font-size: 10.5px; font-weight: 700;
font-family: 'Poppins','Inter',sans-serif;
padding: 4px 8px;
border-radius: 6px;
white-space: nowrap;
z-index: 20;
transform: translateX(-50%);
display: none;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
top: -28px;
}
.adm-spark-tip::after {
content: '';
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: #1A2332;
}
/* Chart cards v2 */
.adm-chart-v2 {
background: #fff;
border: 1px solid #E2E8F0;
border-radius: 18px;
padding: 22px 24px;
box-shadow: 0 2px 16px rgba(0,0,0,.04);
animation: adm-kpi-enter .5s ease .3s both;
min-width: 0;
overflow: hidden;
}
/* Bottom cards v2 */
.adm-card-v2 {
border-radius: 18px !important;
box-shadow: 0 2px 16px rgba(0,0,0,.04);
animation: adm-kpi-enter .5s ease .35s both;
}
/* Tooltip bar chart interactif */
.adm-bar-tip {
position: absolute;
pointer-events: none;
background: #1A2332;
color: #fff;
font-size: 11px; font-weight: 700;
font-family: 'Poppins','Inter',sans-serif;
padding: 5px 10px;
border-radius: 7px;
white-space: nowrap;
transform: translateX(-50%);
display: none;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
top: 6px; z-index: 10;
}
.adm-bar-tip::after {
content: '';
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: #1A2332;
}
/* ============================================================
HERO CINÉMATIQUE DARK — inspiré StackPilot
============================================================ */
/* Navigation dark overlay */
.sh-nav.kp-nav-dark {
background: rgba(12,16,12,0.88);
border-bottom: 1px solid rgba(200,180,160,0.10);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.sh-nav.kp-nav-dark .sh-logo-wordmark { color: #e6e1d7; }
.sh-nav.kp-nav-dark .sh-nav-link { color: rgba(200,180,160,0.65); }
.sh-nav.kp-nav-dark .sh-nav-link:hover { color: #e6e1d7; }
.sh-nav.kp-nav-dark .sh-nav-login { color: rgba(200,180,160,0.75); border-color: rgba(200,180,160,0.2); background: transparent; }
.sh-nav.kp-nav-dark .sh-nav-login:hover { border-color: rgba(200,180,160,0.5); color: #e6e1d7; }
.sh-nav.kp-nav-dark .sh-nav-cta { background: rgba(200,180,160,0.12); border-color: rgba(200,180,160,0.3); color: #f8f7f5; }
.sh-nav.kp-nav-dark .sh-nav-cta:hover { background: rgba(200,180,160,0.22); }
/* Section hero dark */
.kp-hero-dark {
background: linear-gradient(135deg, #1a1d18 0%, #080b08 55%, #252920 100%);
color: #e6e1d7;
min-height: 100vh;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* SVG grid overlay */
.kp-grid-svg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
}
.kp-grid-line {
stroke: rgba(200,180,160,0.15);
stroke-width: 0.5;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: kp-grid-draw 2.5s ease-out forwards;
}
.kp-detail-dot {
fill: rgba(200,180,160,0.35);
opacity: 0;
animation: kp-word-appear 0.6s ease-out forwards;
}
/* Corner elements */
.kp-corner-el {
position: absolute; width: 28px; height: 28px;
opacity: 0; pointer-events: none; z-index: 1;
animation: kp-word-appear 0.6s ease-out forwards;
}
.kp-corner-tl { top:28px; left:28px; border-top:1px solid rgba(200,180,160,0.28); border-left:1px solid rgba(200,180,160,0.28); }
.kp-corner-tr { top:28px; right:28px; border-top:1px solid rgba(200,180,160,0.28); border-right:1px solid rgba(200,180,160,0.28); }
.kp-corner-bl { bottom:90px; left:28px; border-bottom:1px solid rgba(200,180,160,0.28); border-left:1px solid rgba(200,180,160,0.28); }
.kp-corner-br { bottom:90px; right:28px; border-bottom:1px solid rgba(200,180,160,0.28); border-right:1px solid rgba(200,180,160,0.28); }
/* Floating dots */
.kp-float-el {
position: absolute; width: 4px; height: 4px; border-radius: 50%;
background: rgba(200,180,160,0.45);
animation: kp-float 7s ease-in-out infinite;
animation-play-state: paused;
pointer-events: none; z-index: 1;
}
/* Words — état initial invisible, animés par JS */
.kp-word {
display: inline-block;
opacity: 0;
margin: 0 0.2em;
}
/* Hero dark inner layout */
.kp-hero-dark-inner {
position: relative; z-index: 2; flex: 1;
display: flex; flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 100px 32px 48px;
min-height: calc(100vh - 64px);
text-align: center;
gap: 0;
}
/* Taglines */
.kp-tagline-sep {
width: 64px; height: 1px;
background: linear-gradient(to right, transparent, rgba(200,180,160,0.35), transparent);
margin: 10px auto 0;
}
.kp-tagline-sep.kp-sep-bot { margin: 0 auto 10px; }
.kp-hero-tagline-text {
font-family: 'Inter', monospace;
font-size: 10px; font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(200,180,160,0.75);
margin: 0; line-height: 1.8;
}
.kp-tagline-dots {
display: flex; gap: 14px; justify-content: center; margin-top: 10px;
opacity: 0; animation: kp-word-appear 1s ease-out 4.6s forwards;
}
.kp-tdot {
width: 4px; height: 4px; border-radius: 50%;
background: rgba(200,180,160,0.5);
}
.kp-tdot:nth-child(2) { opacity: 0.7; }
.kp-tdot:nth-child(1), .kp-tdot:nth-child(3) { opacity: 0.4; }
/* Main headline */
.kp-hero-dark-headline { max-width: 860px; width: 100%; }
.kp-dark-h1 { margin: 0 0 30px; }
.kp-dark-h1-main {
font-family: 'Poppins', sans-serif;
font-size: clamp(2rem, 5.5vw, 4.2rem);
font-weight: 200; line-height: 1.12;
color: #f8f7f5;
letter-spacing: -0.025em;
margin-bottom: 18px;
}
.kp-dark-h1-sub {
font-family: 'Poppins', sans-serif;
font-size: clamp(1.1rem, 2.4vw, 1.9rem);
font-weight: 100; line-height: 1.5;
color: rgba(200,180,160,0.80);
}
/* Boutons CTA dark */
.kp-dark-cta {
display: flex; gap: 14px; justify-content: center;
flex-wrap: wrap; margin-top: 8px;
opacity: 0; animation: kp-word-appear 1s ease-out 3.6s forwards;
}
.kp-dark-btn-primary {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 26px;
background: rgba(200,180,160,0.12);
border: 1px solid rgba(200,180,160,0.32);
color: #f8f7f5; border-radius: 8px;
font-family: 'Poppins',sans-serif; font-size: 14px; font-weight: 500;
cursor: pointer; transition: all 200ms ease;
backdrop-filter: blur(8px);
}
.kp-dark-btn-primary:hover {
background: rgba(200,180,160,0.22);
border-color: rgba(200,180,160,0.55);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.kp-dark-btn-ghost {
display: inline-flex; align-items: center;
padding: 13px 26px;
background: transparent;
border: 1px solid rgba(200,180,160,0.16);
color: rgba(200,180,160,0.7); border-radius: 8px;
font-family: 'Poppins',sans-serif; font-size: 14px; font-weight: 400;
cursor: pointer; transition: all 200ms ease;
}
.kp-dark-btn-ghost:hover {
border-color: rgba(200,180,160,0.40);
color: #e6e1d7;
}
/* Stat bar sous les CTAs */
.kp-dark-stats {
display: flex; align-items: center; justify-content: center;
gap: 28px; margin-top: 24px;
opacity: 0; animation: kp-word-appear 1s ease-out 4s forwards;
}
.kp-dark-stat-val {
font-size: 20px; font-weight: 700; color: #f8f7f5;
font-variant-numeric: tabular-nums;
}
.kp-dark-stat-lbl {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
color: rgba(200,180,160,0.55); margin-top: 2px;
}
.kp-dark-stat { text-align: center; }
.kp-dark-stat-sep { width: 1px; height: 28px; background: rgba(200,180,160,0.15); }
/* Mouse gradient */
.kp-mouse-grad {
position: fixed; width: 384px; height: 384px; border-radius: 50%;
background: radial-gradient(circle, rgba(107,85,69,0.06) 0%, transparent 70%);
filter: blur(50px);
pointer-events: none; opacity: 0;
transition: opacity 500ms ease;
z-index: 1;
}
/* Keyframes cinématiques */
@keyframes kp-word-appear {
0% { opacity: 0; transform: translateY(28px) scale(0.82); filter: blur(10px); }
55% { opacity: 0.85; transform: translateY(8px) scale(0.97); filter: blur(2px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes kp-grid-draw {
0% { stroke-dashoffset: 1000; opacity: 0; }
50% { opacity: 0.25; }
100% { stroke-dashoffset: 0; opacity: 0.15; }
}
@keyframes kp-float {
0%,100% { transform: translateY(0) translateX(0); opacity: 0.2; }
25% { transform: translateY(-11px) translateX(5px); opacity: 0.65; }
50% { transform: translateY(-5px) translateX(-4px); opacity: 0.4; }
75% { transform: translateY(-14px) translateX(7px); opacity: 0.8; }
}
@keyframes kp-pulse-glow {
0% { width:4px; height:4px; margin-left:0; margin-top:0; opacity:0.7; }
100% { width:120px; height:120px; margin-left:-58px; margin-top:-58px; opacity:0; }
}
/* ══════════════════════════════════════════════════════════════
DEVICE SHOWCASE — iPhone 17 + iPad cinématique
══════════════════════════════════════════════════════════════ */
.kp-devices-section {
background: linear-gradient(180deg, #0a0a14 0%, #0d1117 50%, #0a0a14 100%);
padding: 100px 0 120px;
overflow: hidden;
position: relative;
}
.kp-devices-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,119,182,0.12) 0%, transparent 70%);
pointer-events: none;
}
.kp-devices-head {
text-align: center;
margin-bottom: 72px;
position: relative;
z-index: 2;
}
.kp-devices-label {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #00C896;
margin-bottom: 16px;
padding: 5px 14px;
border: 1px solid rgba(0,200,150,0.25);
border-radius: 20px;
background: rgba(0,200,150,0.07);
}
.kp-devices-title {
font-size: clamp(28px, 4vw, 46px);
font-weight: 800;
color: #fff;
line-height: 1.15;
margin: 0 0 16px;
}
.kp-devices-title em {
font-style: normal;
background: linear-gradient(135deg, #00C896, #0077B6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.kp-devices-sub {
font-size: 16px;
color: rgba(255,255,255,0.5);
max-width: 480px;
margin: 0 auto;
line-height: 1.6;
}
/* Stage 3D */
.kp-devices-stage {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 40px;
perspective: 1200px;
position: relative;
z-index: 2;
padding: 0 24px 40px;
}
/* ── iPad mockup ── */
.kp-ipad-wrap {
transform: rotateY(12deg) rotateX(4deg) translateY(20px);
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(.22,1,.36,1);
flex-shrink: 0;
}
.kp-ipad-wrap:hover {
transform: rotateY(2deg) rotateX(1deg) translateY(0px);
}
.kp-ipad {
width: 560px;
height: 400px;
background: #1C1C1E;
border-radius: 22px;
border: 2px solid rgba(255,255,255,0.12);
box-shadow:
0 0 0 1px rgba(0,0,0,0.7),
0 50px 120px rgba(0,0,0,0.7),
0 20px 40px rgba(0,119,182,0.2),
inset 0 1px 0 rgba(255,255,255,0.08);
overflow: hidden;
position: relative;
}
.kp-ipad::before {
content: '';
position: absolute;
top: 0; left: 50%; transform: translateX(-50%);
width: 80px; height: 6px;
background: #2C2C2E;
border-radius: 0 0 6px 6px;
z-index: 10;
}
/* ── Real screenshot screens ── */
.kp-ipad-screen {
width: 100%; height: 100%;
position: relative;
overflow: hidden;
background: #050914;
}
.kp-iphone-screen {
position: absolute;
inset: 6px;
border-radius: 37px;
overflow: hidden;
background: #050914;
}
.kp-device-screenshot {
width: 100%; height: 100%;
object-fit: cover;
object-position: top;
display: block;
}
/* Glare overlay on screens */
.kp-device-glare {
position: absolute; inset: 0;
background: linear-gradient(115deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 40%);
pointer-events: none;
z-index: 2;
}
/* Film grain on section */
.kp-film-grain {
position: absolute; inset: 0;
pointer-events: none; z-index: 3;
opacity: .35;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
/* Pulsing live dot */
.kp-pulse-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: #00C896;
animation: kp-pulse-live 2s ease-in-out infinite;
vertical-align: middle;
margin-right: 6px;
}
@keyframes kp-pulse-live {
0%,100% { box-shadow: 0 0 0 0 rgba(0,200,150,.6); }
50% { box-shadow: 0 0 0 6px rgba(0,200,150,0); }
}
/* Floating glass notification badges */
.kp-float-badge {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,.07);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,.12);
border-radius: 16px;
padding: 10px 16px;
z-index: 10;
box-shadow: 0 20px 48px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
white-space: nowrap;
pointer-events: none;
}
.kp-fbadge-dot {
width: 9px; height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.kp-fbadge-dot.green { background: #00C896; box-shadow: 0 0 8px #00C896; }
.kp-fbadge-dot.blue { background: #0077B6; box-shadow: 0 0 8px #0077B6; }
.kp-fbadge-icon { font-size: 18px; line-height: 1; }
.kp-fbadge-title {
font-size: 13px; font-weight: 800;
color: #fff;
line-height: 1.1;
}
.kp-fbadge-sub {
font-size: 10px;
color: rgba(255,255,255,.45);
margin-bottom: 2px;
}
/* CA counter badge special */
.kp-counter-badge { right: -20px; bottom: 60px; }
/* LIVE badge on top of iPad */
.kp-live-badge {
position: absolute;
top: 12px; right: 12px;
z-index: 10;
display: flex;
align-items: center;
gap: 6px;
background: rgba(0,200,150,.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0,200,150,.3);
border-radius: 20px;
padding: 4px 12px;
font-size: 10px;
font-weight: 700;
color: #00C896;
letter-spacing: .06em;
pointer-events: none;
}
/* ── iPhone 17 mockup ── */
.kp-iphone-wrap {
transform: rotateY(-10deg) rotateX(3deg) translateY(10px);
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(.22,1,.36,1);
flex-shrink: 0;
position: relative;
}
.kp-iphone-wrap:hover {
transform: rotateY(-2deg) rotateX(1deg) translateY(0px);
}
.kp-iphone17 {
width: 200px;
height: 390px;
background: linear-gradient(160deg, #2a2a2e 0%, #1C1C1E 50%, #141416 100%);
border-radius: 42px;
border: 1.5px solid rgba(255,255,255,0.12);
box-shadow:
0 0 0 1px rgba(0,0,0,0.8),
0 60px 130px rgba(0,0,0,0.8),
0 20px 50px rgba(0,200,150,0.15),
inset 0 1px 0 rgba(255,255,255,0.1);
position: relative;
overflow: visible;
}
/* Physical hardware side buttons */
.kp-iphone-btn {
position: absolute;
background: linear-gradient(90deg, #3a3a3a 0%, #1a1a1a 100%);
border-radius: 2px;
z-index: 5;
}
.kp-iphone-btn.left { left: -3px; width: 3px; }
.kp-iphone-btn.right { right: -3px; width: 3px; top: 130px; height: 60px; }
.kp-iphone-btn.top { top: 90px; height: 20px; }
.kp-iphone-btn.mid { top: 120px; height: 38px; }
.kp-iphone-btn.bot { top: 168px; height: 38px; }
/* Dynamic Island */
.kp-di {
position: absolute;
top: 10px; left: 50%;
transform: translateX(-50%);
width: 72px; height: 24px;
background: #000;
border-radius: 14px;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.kp-di-cam {
width: 8px; height: 8px;
border-radius: 50%;
background: #1a1a1a;
border: 1.5px solid #333;
/* FaceID sensor dot glow */
box-shadow: 0 0 4px rgba(80,120,255,.3);
}
/* Shimmer sweep on hover */
.kp-ipad::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%);
background-size: 300% 100%;
background-position: -200% 0;
border-radius: inherit;
pointer-events: none;
z-index: 5;
transition: background-position .7s ease;
}
.kp-ipad-wrap:hover .kp-ipad::after { background-position: 200% 0; }
.kp-iphone17::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%);
background-size: 300% 100%;
background-position: -200% 0;
border-radius: inherit;
pointer-events: none;
z-index: 5;
transition: background-position .7s ease;
}
.kp-iphone-wrap:hover .kp-iphone17::after { background-position: 200% 0; }
/* Bottom beam glow */
.kp-devices-beam {
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 800px; height: 180px;
background: radial-gradient(ellipse at 50% 100%, rgba(0,119,182,.22) 0%, rgba(0,200,150,.1) 40%, transparent 70%);
pointer-events: none;
z-index: 1;
}
/* inner screen clip for iPhone (keeps image inside rounded corners) */
.kp-iphone17 > .kp-iphone-screen {
border-radius: 37px;
overflow: hidden;
}
/* Glow orbs under devices */
.kp-devices-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(60px);
opacity: 0.25;
}
.kp-devices-glow.ipad { width: 420px; height: 200px; background: #0077B6; bottom: -40px; left: 12%; }
.kp-devices-glow.iphone { width: 200px; height: 150px; background: #00C896; bottom: -30px; right: 20%; }
/* Bottom caption */
.kp-devices-caption {
text-align: center;
margin-top: 56px;
position: relative;
z-index: 2;
}
.kp-devices-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 24px;
}
.kp-devices-tag {
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.55);
padding: 6px 16px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
background: rgba(255,255,255,0.04);
}
.kp-devices-cta {
display: inline-block;
background: linear-gradient(135deg, #00C896, #0077B6);
color: #fff;
font-size: 14px;
font-weight: 700;
padding: 14px 32px;
border-radius: 40px;
border: none;
cursor: pointer;
letter-spacing: 0.3px;
box-shadow: 0 8px 32px rgba(0,200,150,0.35);
transition: transform 0.2s, box-shadow 0.2s;
}
.kp-devices-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(0,200,150,0.45);
}
/* Reveal animation for devices */
.kp-dev-reveal {
opacity: 0;
transform: translateY(40px) scale(0.97);
transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
}
.kp-dev-reveal.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.kp-dev-reveal.delay-200 { transition-delay: 0.2s; }
.kp-dev-reveal.delay-400 { transition-delay: 0.4s; }
/* Responsive — stack on mobile */
@media (max-width: 768px) {
.kp-devices-stage {
flex-direction: column-reverse;
align-items: center;
gap: 32px;
perspective: 800px;
}
.kp-ipad { width: 320px; height: 230px; }
.kp-ipad-wrap { transform: rotateY(0deg) rotateX(3deg); }
.kp-iphone-wrap { transform: rotateY(0deg) rotateX(3deg); }
.kp-ipad-bars { gap: 2px; }
.kp-ipad-kpi-val { font-size: 11px; }
.kp-devices-glow.ipad { left: 5%; width: 300px; }
}
/* ═══ Inscription — animations & redesign ══════════════════════ */
@keyframes ins-ring-draw {
from { stroke-dashoffset: 170; }
to { stroke-dashoffset: 0; }
}
@keyframes ins-chk-draw {
from { stroke-dashoffset: 50; }
to { stroke-dashoffset: 0; }
}
@keyframes ins-fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ins-form-enter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ins-step-in {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
/* ── Form wrapper ─────────────────────────────────────── */
.ins-form-inner { animation: none; }
.ins-form-inner.animate { animation: ins-form-enter 0.32s cubic-bezier(.4,0,.2,1) forwards; }
/* ── Section headers ──────────────────────────────────── */
.ins-section-head {
display: flex; align-items: center; gap: 8px;
padding: 14px 0 8px;
font-size: 11px; font-weight: 700; color: #0077B6;
text-transform: uppercase; letter-spacing: 0.09em;
border-bottom: 2px solid #EFF6FF; margin-bottom: 4px;
}
.ins-section-head svg { flex-shrink: 0; }
/* ── Success wrap ─────────────────────────────────────── */
.ins-success-wrap { padding: 8px 0 4px; text-align: center; }
.ins-chk-wrap {
width: 84px; height: 84px;
margin: 0 auto 18px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0,119,182,.07), rgba(0,200,150,.07));
display: flex; align-items: center; justify-content: center;
}
.ins-chk-svg { width: 64px; height: 64px; overflow: visible; }
.ins-chk-ring {
fill: none; stroke: #0077B6; stroke-width: 2.5; stroke-linecap: round;
stroke-dasharray: 170; stroke-dashoffset: 170;
}
.ins-chk-ring.animate {
animation: ins-ring-draw 0.6s cubic-bezier(.4,0,.2,1) 0.08s forwards;
}
.ins-chk-path {
fill: none; stroke: #00C896; stroke-width: 3.5;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 50; stroke-dashoffset: 50;
}
.ins-chk-path.animate {
animation: ins-chk-draw 0.38s cubic-bezier(.4,0,.2,1) 0.62s forwards;
}
.ins-success-title {
font-family: 'Poppins','Inter',sans-serif;
font-size: 21px; font-weight: 700; color: #1A2332;
margin-bottom: 6px;
opacity: 0; animation: ins-fade-up 0.4s ease 0.88s forwards;
}
.ins-success-sub {
font-size: 13px; color: #64748B; line-height: 1.65;
margin-bottom: 22px;
opacity: 0; animation: ins-fade-up 0.4s ease 1.02s forwards;
}
/* ── Steps ────────────────────────────────────────────── */
.ins-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; text-align: left; }
.ins-step {
display: flex; align-items: center; gap: 12px;
background: #F8FAFC; border: 1px solid #E2E8F0;
border-radius: 10px; padding: 10px 14px;
opacity: 0;
}
.ins-step:nth-child(1) { animation: ins-step-in 0.35s ease 1.18s forwards; }
.ins-step:nth-child(2) { animation: ins-step-in 0.35s ease 1.32s forwards; }
.ins-step:nth-child(3) { animation: ins-step-in 0.35s ease 1.46s forwards; }
.ins-step-dot {
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.ins-step-done .ins-step-dot { background: #DCFCE7; color: #16A34A; }
.ins-step-pend .ins-step-dot { background: #DBEAFE; color: #2563EB; }
.ins-step-lock .ins-step-dot { background: #F1F5F9; color: #94A3B8; }
.ins-step-label { font-weight: 600; font-size: 13px; color: #1A2332; line-height: 1.3; }
.ins-step-sublabel { font-size: 11px; color: #94A3B8; }
/* ── Submit loading state ─────────────────────────────── */
.sh-btn-submit.loading { opacity: .7; pointer-events: none; }
.sh-btn-submit.loading::after {
content: '';
width: 14px; height: 14px; border-radius: 50%;
border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
display: inline-block; margin-left: 8px; vertical-align: middle;
animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ════════════════════════════════════════════════════════════
FOURNISSEURS & COMMANDES — section espace patron
════════════════════════════════════════════════════════════ */
/* ── Sous-onglets fournisseurs/commandes ─────────────────── */
.frn-tabs { display:flex; gap:4px; margin-bottom:20px; background:#F1F5F9; border-radius:12px; padding:4px; }
.frn-tab { flex:1; text-align:center; padding:9px 14px; border-radius:9px; font-size:13px; font-weight:600;
color:#64748B; cursor:pointer; border:none; background:none; transition:all .18s; }
.frn-tab.active { background:#fff; color:#0077B6; box-shadow:0 1px 4px rgba(0,0,0,.08); }
/* ── Carte fournisseur ───────────────────────────────────── */
.frn-card { background:#fff; border:1.5px solid #E2E8F0; border-radius:14px;
padding:18px 20px; margin-bottom:14px; transition:box-shadow .18s; }
.frn-card:hover { box-shadow:0 4px 16px rgba(0,119,182,.08); }
.frn-card-head { display:flex; align-items:flex-start; gap:14px; }
.frn-card-ico { width:44px; height:44px; border-radius:12px; background:#EFF6FF;
display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.frn-card-info { flex:1; min-width:0; }
.frn-card-nom { font-size:15px; font-weight:800; color:#1A2332; margin-bottom:2px; }
.frn-card-tel { font-size:13px; color:#64748B; }
.frn-card-cats { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.frn-cat-pill { padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600;
background:#EFF6FF; color:#0077B6; }
.frn-card-actions { display:flex; gap:8px; flex-shrink:0; align-items:flex-start; }
.frn-card-products { margin-top:14px; border-top:1px solid #F1F5F9; padding-top:12px; }
.frn-prod-row { display:grid; grid-template-columns:1fr auto auto auto; align-items:center;
gap:10px; padding:8px 0; border-bottom:1px solid #F8FAFC; font-size:13px; }
.frn-prod-row:last-child { border-bottom:none; }
.frn-prod-nom { font-weight:600; color:#1A2332; }
.frn-prod-sub { font-size:11px; color:#94A3B8; margin-top:1px; }
.frn-marge-pill { display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
border-radius:20px; font-size:11px; font-weight:700; }
.frn-marge-pos { background:#DCFCE7; color:#16A34A; }
.frn-marge-neg { background:#FEE2E2; color:#DC2626; }
/* ── Commandes ───────────────────────────────────────────── */
.cmd-card { background:#fff; border:1.5px solid #E2E8F0; border-radius:14px;
padding:18px 20px; margin-bottom:14px; }
.cmd-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cmd-title { flex:1; min-width:0; }
.cmd-nom { font-size:14px; font-weight:800; color:#1A2332; }
.cmd-meta { font-size:12px; color:#64748B; margin-top:2px; }
.cmd-statut { padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.cmd-statut-afaire { background:#FEF9C3; color:#92400E; }
.cmd-statut-effectuee { background:#DBEAFE; color:#1D4ED8; }
.cmd-statut-recue { background:#DCFCE7; color:#15803D; }
.cmd-lignes { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:12px; }
.cmd-lignes th { text-align:left; padding:6px 10px; background:#F8FAFC;
color:#64748B; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:.04em; border-bottom:1px solid #E2E8F0; }
.cmd-lignes td { padding:8px 10px; border-bottom:1px solid #F8FAFC; color:#1A2332; vertical-align:middle; }
.cmd-lignes tr:last-child td { border-bottom:none; }
.cmd-total { text-align:right; font-weight:800; font-size:14px; color:#1A2332;
padding:10px 0 0; border-top:2px solid #E2E8F0; }
.cmd-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; border-top:1px solid #F1F5F9; padding-top:12px; }
.cmd-btn { padding:8px 16px; border-radius:10px; font-size:12px; font-weight:700; cursor:pointer;
border:none; transition:all .15s; display:inline-flex; align-items:center; gap:6px; }
.cmd-btn-primary { background:#0077B6; color:#fff; }
.cmd-btn-primary:hover { background:#005f8e; }
.cmd-btn-success { background:#16A34A; color:#fff; }
.cmd-btn-success:hover { background:#15803D; }
.cmd-btn-outline { background:#F1F5F9; color:#334155; border:1.5px solid #CBD5E1; }
.cmd-btn-outline:hover { background:#E2E8F0; }
.cmd-btn-wa { background:#25D366; color:#fff; }
.cmd-btn-wa:hover { background:#1da851; }
.cmd-btn-danger { background:#FEE2E2; color:#DC2626; }
.cmd-btn-danger:hover { background:#FECACA; }
/* ══ Modal fournisseur — design accessible (low-literacy) ═══ */
/* Agrandit la modale fournisseur par rapport aux autres */
#frn-modal .sad-modal { max-width:680px; width:96vw; }
/* Champ avec icône */
.frn-field { margin-bottom:18px; }
.frn-field-label { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700;
color:#1A2332; margin-bottom:8px; }
.frn-field-label svg { flex-shrink:0; opacity:.7; }
.frn-field-input { width:100%; padding:14px 16px; font-size:16px; font-weight:500;
border:2px solid #CBD5E1; border-radius:14px; outline:none;
color:#1A2332; background:#fff; box-sizing:border-box;
transition:border-color .15s; font-family:inherit; }
.frn-field-input:focus { border-color:#0077B6; box-shadow:0 0 0 3px rgba(0,119,182,.1); }
.frn-field-hint { font-size:12px; color:#94A3B8; margin-top:5px; padding-left:2px; }
/* Groupe téléphone */
.frn-tel-row { display:flex; gap:8px; }
.frn-tel-row select { padding:14px 10px; font-size:15px; font-weight:600; border:2px solid #CBD5E1;
border-radius:14px; background:#fff; color:#1A2332; outline:none;
flex-shrink:0; width:130px; font-family:inherit; cursor:pointer; }
.frn-tel-row select:focus { border-color:#0077B6; }
.frn-tel-row .frn-field-input { flex:1; }
/* Section titre */
.frn-section-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800;
color:#1A2332; letter-spacing:.01em; margin:22px 0 12px; padding-bottom:10px;
border-bottom:2px solid #F1F5F9; }
.frn-section-title svg { opacity:.6; }
/* Produit card dans le modal */
.frn-prod-card { background:#F8FAFC; border:2px solid #E2E8F0; border-radius:16px;
padding:16px; margin-bottom:12px; position:relative; }
.frn-prod-card-nom { width:100%; padding:12px 14px; font-size:15px; font-weight:700;
border:2px solid #CBD5E1; border-radius:12px; outline:none;
color:#1A2332; background:#fff; box-sizing:border-box;
font-family:inherit; margin-bottom:12px; }
.frn-prod-card-nom:focus { border-color:#0077B6; }
.frn-prod-card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.frn-prod-card-field { display:flex; flex-direction:column; gap:5px; }
.frn-prod-card-lbl { font-size:11px; font-weight:700; color:#64748B;
text-transform:uppercase; letter-spacing:.05em; }
.frn-prod-card-inp { width:100%; padding:10px 12px; font-size:15px; font-weight:600;
border:2px solid #CBD5E1; border-radius:10px; outline:none;
color:#1A2332; background:#fff; box-sizing:border-box; font-family:inherit; }
.frn-prod-card-inp:focus { border-color:#0077B6; }
.frn-prod-card-marge { margin-top:10px; padding:8px 12px; border-radius:10px;
font-size:13px; font-weight:800; text-align:center; }
.frn-prod-card-marge.pos { background:#DCFCE7; color:#15803D; }
.frn-prod-card-marge.neg { background:#FEE2E2; color:#DC2626; }
.frn-prod-card-marge.na { background:#F1F5F9; color:#94A3B8; }
.frn-prod-card-del { position:absolute; top:12px; right:12px; width:32px; height:32px;
border-radius:50%; background:#FEE2E2; border:none; color:#DC2626;
font-size:18px; line-height:1; cursor:pointer; display:flex;
align-items:center; justify-content:center; font-weight:900; }
.frn-prod-card-del:hover { background:#FECACA; }
.frn-add-prod-btn { width:100%; padding:14px; border:2px dashed #BFDBFE; border-radius:14px;
background:#EFF6FF; color:#0077B6; font-size:15px; font-weight:700;
cursor:pointer; display:flex; align-items:center; justify-content:center;
gap:8px; font-family:inherit; margin-top:4px; }
.frn-add-prod-btn:hover { background:#DBEAFE; border-color:#93C5FD; }
/* Boutons footer */
.frn-modal-footer { display:flex; gap:12px; margin-top:24px; }
.frn-btn-save { flex:1; padding:16px; background:#0077B6; color:#fff; border:none;
border-radius:14px; font-size:17px; font-weight:800; cursor:pointer;
font-family:inherit; transition:background .15s; }
.frn-btn-save:hover { background:#005f92; }
.frn-btn-cancel { padding:16px 24px; background:#F1F5F9; color:#64748B; border:none;
border-radius:14px; font-size:16px; font-weight:700; cursor:pointer;
font-family:inherit; }
.frn-btn-cancel:hover { background:#E2E8F0; }
@media (max-width:600px) {
.frn-prod-card-grid { grid-template-columns:repeat(2,1fr); }
}
/* Legacy (gardé pour compatibilité backoffice) */
.frn-marge-live { font-size:12px; color:#16A34A; font-weight:700; margin-top:2px; }
/* ── VG (Vente Gros) bouton pleine largeur dans le panier ── */
.ci-vg-btn {
display:block; width:100%; margin-top:6px;
padding:7px 12px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer;
border:1.5px solid #0077B6; background:#EFF6FF; color:#0077B6;
transition:all .15s; line-height:1.4; letter-spacing:.01em; text-align:center;
}
.ci-vg-btn.active { background:#0077B6; color:#fff; border-color:#0077B6; }
.ci-vg-btn:disabled { opacity:.4; cursor:default; }
/* ── Analyses (espace patron) ────────────────────────────── */
.pat-an-period-btn {
padding:5px 13px; font-size:11px; font-weight:700; cursor:pointer;
border:1.5px solid #E2E8F0; border-radius:20px; background:#fff; color:#64748B;
transition:all .15s;
}
.pat-an-period-btn.active { border-color:#0077B6; background:#EFF6FF; color:#0077B6; }
/* Onglets Ventes / Achats */
.pat-an-view-tabs { display:flex; gap:0; border-bottom:2px solid #E2E8F0; margin-bottom:14px; }
.pat-an-view-tab { padding:8px 18px; font-size:13px; font-weight:600; cursor:pointer;
border:none; background:none; color:#64748B; border-bottom:2px solid transparent;
margin-bottom:-2px; transition:all .15s; }
.pat-an-view-tab.active { color:#0077B6; border-bottom-color:#0077B6; }
.pat-an-view-tab:hover { color:#0077B6; }
/* Calendrier sélection plage */
.pat-cal-pop {
position:absolute; top:calc(100% + 6px); left:0; z-index:600;
background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.16);
border:1px solid #E2E8F0; padding:14px 16px 12px; min-width:252px;
}
.pat-cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pat-cal-header button { width:28px; height:28px; border-radius:6px; border:1px solid #E2E8F0;
background:#F8FAFC; cursor:pointer; font-size:16px; font-weight:700; color:#475569; line-height:1;
display:flex; align-items:center; justify-content:center; transition:background .1s; padding:0; }
.pat-cal-header button:hover { background:#E2E8F0; }
.pat-cal-header span { font-size:13px; font-weight:700; color:#1E293B; }
.pat-cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; }
.pat-cal-weekdays span { text-align:center; font-size:10px; font-weight:700; color:#94A3B8; padding:3px 0; }
.pat-cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.pat-cal-day { text-align:center; padding:6px 2px; font-size:12px; font-weight:500; color:#1E293B;
cursor:pointer; border-radius:6px; transition:all .1s; line-height:1; user-select:none; }
.pat-cal-day:hover:not(.pat-cal-future) { background:#EFF6FF; color:#0077B6; }
.pat-cal-day.pat-cal-future { color:#CBD5E1; cursor:default; pointer-events:none; }
.pat-cal-day.pat-cal-sel-start,
.pat-cal-day.pat-cal-sel-end { background:#0077B6 !important; color:#fff !important; border-radius:6px; }
.pat-cal-day.pat-cal-in-range { background:#DBEAFE; color:#0077B6; border-radius:0; }
.pat-cal-footer { margin-top:10px; display:flex; align-items:center; justify-content:space-between;
gap:6px; border-top:1px solid #F1F5F9; padding-top:10px; }
.pat-cal-footer-lbl { font-size:11px; color:#64748B; flex:1; min-width:0; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
.pat-cal-cancel { padding:6px 12px; background:#F1F5F9; color:#64748B; border:none;
border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
.pat-cal-apply { padding:6px 14px; background:#0077B6; color:#fff; border:none;
border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; }
.pat-cal-apply:hover { background:#005f8f; }
.pat-cal-cancel:hover { background:#E2E8F0; }
@media(max-width:640px) {
#pat-an-charts-row, #pat-an-ach-charts-row { grid-template-columns:1fr !important; }
.pat-cal-pop { min-width:220px; }
.pat-cal-day { padding:5px 1px; font-size:11px; }
}
.ci-row2-ext { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
/* ── Popup réception commande ────────────────────────────── */
.cmd-reception-table { width:100%; border-collapse:collapse; font-size:13px; margin:10px 0 16px; }
.cmd-reception-table th { text-align:left; padding:6px 10px; background:#F8FAFC;
color:#64748B; font-size:11px; font-weight:700; border-bottom:1px solid #E2E8F0; }
.cmd-reception-table td { padding:8px 10px; border-bottom:1px solid #F8FAFC; vertical-align:middle; }
.cmd-reception-table input[type=number] { width:70px; padding:5px 8px; border:1.5px solid #CBD5E1;
border-radius:8px; font-size:13px; font-weight:700; text-align:center; }
/* ── Dashboard card fournisseurs ─────────────────────────── */
.frn-dash-row { display:flex; align-items:center; gap:10px; padding:10px 0;
border-bottom:1px solid #F1F5F9; font-size:13px; }
.frn-dash-row:last-child { border-bottom:none; }
.frn-dash-ico { width:34px; height:34px; border-radius:10px; background:#EFF6FF;
display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.frn-dash-name { flex:1; font-weight:600; color:#1A2332; }
.frn-dash-amt { font-weight:800; color:#0077B6; font-size:13px; }
/* ── Stock lot badge ─────────────────────────────────────── */
.stock-lot-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
border-radius:12px; background:#FEF9C3; color:#92400E;
font-size:10px; font-weight:700; margin-top:3px; }
/* ══════════════════════════════════════════════════════════════
FOURNISSEURS — carte redesignée v20260402b
══════════════════════════════════════════════════════════════ */
/* Carte fournisseur */
.frn-card2 { background:#fff; border:1.5px solid #E2E8F0; border-radius:16px;
padding:18px 20px; transition:box-shadow .15s; }
.frn-card2:hover { box-shadow:0 4px 20px rgba(0,119,182,.09); }
.frn-card2-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.frn-card2-info { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.frn-card2-name { font-size:16px; font-weight:800; color:#1A2332; }
.frn-card2-cats { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.frn-card2-tel { font-size:12px; color:#64748B; }
.frn-card2-adr { font-size:12px; color:#94A3B8; }
.frn-card2-btns { display:flex; gap:7px; flex-shrink:0; flex-wrap:wrap; align-items:flex-start; }
.frn-card2-btn { padding:6px 13px; border-radius:9px; font-size:12px; font-weight:700;
cursor:pointer; border:none; transition:.13s; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.frn-card2-wa { background:#25D366; color:#fff; }
.frn-card2-wa:hover { background:#1eba57; }
.frn-card2-cmd { background:#16A34A; color:#fff; }
.frn-card2-cmd:hover { background:#15803D; }
.frn-card2-cmd-again { background:#0077B6 !important; }
.frn-card2-cmd-again:hover { background:#005f92 !important; }
.frn-card2-edit { background:#EFF6FF; color:#0077B6; }
.frn-card2-edit:hover { background:#DBEAFE; }
.frn-card2-del { background:#FEF2F2; color:#EF4444; }
.frn-card2-del:hover { background:#FEE2E2; }
.frn-card2-voir { background:#F0FDF4; color:#16A34A; }
.frn-card2-voir:hover { background:#DCFCE7; }
/* Q&A product form */
.frn-qa-row { margin-bottom:12px; }
.frn-qa-q { font-size:13px; font-weight:700; color:#1A2332; margin-bottom:7px; }
.frn-qa-chips { display:flex; flex-wrap:wrap; gap:7px; }
.frn-qa-chip { padding:7px 14px; border:1.5px solid #E2E8F0; border-radius:20px;
background:#F8FAFC; color:#64748B; font-size:13px; font-weight:600;
font-family:inherit; cursor:pointer; transition:.13s; }
.frn-qa-chip:hover { border-color:#93C5FD; color:#0077B6; background:#EFF6FF; }
.frn-qa-chip-active { border-color:#0077B6 !important; background:#0077B6 !important; color:#fff !important; }
.frn-qa-inp-unit { display:flex; align-items:center; gap:8px; }
.frn-qa-inp-unit .frn-ir-inp { flex:1; }
.frn-qa-unit { font-size:13px; font-weight:700; color:#64748B; white-space:nowrap; }
.frn-qa-marge { padding:9px 14px; border-radius:10px; font-size:13px; font-weight:700; margin-top:4px; }
.frn-qa-marge.pos { background:#DCFCE7; color:#15803D; }
.frn-qa-marge.neg { background:#FEE2E2; color:#DC2626; }
/* Stock badges in fournisseur table */
.frn-stock-ok { color:#16A34A; font-weight:700; font-size:12px; }
.frn-stock-warn { color:#D97706; font-weight:800; font-size:12px; }
.frn-card2-prods { border-top:1px solid #F1F5F9; padding-top:12px; }
.frn-no-prod { color:#94A3B8; font-size:12px; font-style:italic; margin:4px 0; }
/* Tableau produits fournisseur */
.frn-prod-tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.frn-prod-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.frn-prod-table th { text-align:left; padding:5px 8px; color:#94A3B8; font-size:10.5px;
font-weight:700; text-transform:uppercase; letter-spacing:.04em;
border-bottom:1.5px solid #F1F5F9; white-space:nowrap; }
.frn-prod-table th.frn-pt-c { text-align:center !important; }
.frn-prod-table td { padding:6px 8px; border-bottom:1px solid #F8FAFC; vertical-align:middle; }
.frn-prod-table tbody tr:last-child td { border-bottom:none; }
.frn-prod-table tbody tr:hover td { background:#F8FAFC; }
.frn-pt-name { font-weight:600; color:#1A2332; }
.frn-pt-num { text-align:right; color:#64748B; }
.frn-pt-c { text-align:center !important; }
.frn-pt-act { width:32px; text-align:center; }
.frn-pt-2lines { display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.frn-pt-dim { font-size:11px; color:#94A3B8; }
.frn-pt-empty { color:#CBD5E1; }
.frn-pt-type-badge { display:inline-block; background:#EFF6FF; color:#0077B6;
font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px;
margin-left:5px; vertical-align:middle; text-transform:lowercase; }
/* Commande table — colonne vente prévue */
.cmd-tbl-vente { font-size:12px; color:#1A2332; font-weight:600; }
.cmd-tbl-dim { font-size:11px; color:#94A3B8; margin-top:2px; }
.cmd-tbl-marge { display:inline-block; font-size:10px; font-weight:700; padding:1px 5px;
border-radius:4px; margin-left:5px; vertical-align:middle; }
.cmd-tbl-marge.pos { background:#DCFCE7; color:#166534; }
.cmd-tbl-marge.neg { background:#FEE2E2; color:#DC2626; }
/* Modal suppression fournisseur */
.frn-del-section { background:#F8FAFC; border:1px solid #E2E8F0; border-radius:10px;
padding:12px 14px; margin-bottom:12px; }
.frn-del-section-title { font-size:12px; font-weight:800; color:#1A2332; text-transform:uppercase;
letter-spacing:.5px; margin-bottom:10px; }
.frn-del-note { font-size:11.5px; color:#64748B; margin-bottom:10px; font-style:italic; }
.frn-del-chk-row { display:flex; align-items:center; gap:9px; padding:5px 0;
cursor:pointer; font-size:13px; color:#334155; }
.frn-del-chk-row input[type=checkbox] { width:15px; height:15px; accent-color:#EF4444; flex-shrink:0; }
.frn-del-prod-row { justify-content:space-between; }
.frn-del-prod-stock { font-size:11px; color:#94A3B8; white-space:nowrap; margin-left:auto; padding-left:8px; }
.frn-del-cat-group { margin-bottom:8px; }
.frn-del-cat-name { font-size:11px; font-weight:800; color:#64748B; text-transform:uppercase;
letter-spacing:.4px; padding:4px 0 2px; }
/* Header colonnes modal produits */
.frn-prod-header { display:grid; grid-template-columns:1.8fr 80px 60px 80px 80px 70px 28px;
gap:4px; padding:0 2px 5px; font-size:10.5px; font-weight:700;
color:#94A3B8; text-transform:uppercase; letter-spacing:.04em; border-bottom:1.5px solid #F1F5F9; margin-bottom:4px; }
/* ══════════════════════════════════════════════════════════════
FOURNISSEUR — ligne inline création v20260402f
══════════════════════════════════════════════════════════════ */
#frn-tab-content-frn { display:flex; flex-direction:column; gap:14px; }
.frn-inline-row {
background:#fff;
border:2px solid #0077B6;
border-radius:16px;
padding:20px;
box-shadow:0 4px 24px rgba(0,119,182,.13);
animation:sh-float-up .22s ease-out;
}
.frn-ir-header {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
}
.frn-ir-title {
font-size:15px;
font-weight:900;
color:#0077B6;
letter-spacing:.01em;
}
.frn-ir-close {
width:30px; height:30px;
border:none; border-radius:50%;
background:#F1F5F9; color:#64748B;
font-size:18px; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.frn-ir-close:hover { background:#E2E8F0; }
.frn-ir-body {
display:grid;
grid-template-columns:1fr 1fr 1.2fr;
gap:18px;
margin-bottom:18px;
}
@media (max-width:700px) {
.frn-ir-body { grid-template-columns:1fr; }
.frn-ir-col-prods { display:none !important; }
.frn-ir-col-prods.frn-ir-prods-visible { display:block !important; }
}
.frn-ir-col {
display:flex;
flex-direction:column;
gap:0;
}
.frn-ir-lbl {
font-size:12px;
font-weight:700;
color:#64748B;
text-transform:uppercase;
letter-spacing:.04em;
margin-bottom:6px;
display:block;
}
.frn-ir-sublbl {
font-size:11px;
font-weight:700;
color:#94A3B8;
margin-bottom:4px;
}
.frn-ir-inp {
width:100%;
padding:10px 12px;
font-size:15px;
font-family:inherit;
border:1.5px solid #E2E8F0;
border-radius:10px;
background:#FAFBFD;
color:#1A2332;
outline:none;
transition:border .15s;
}
.frn-ir-inp:focus { border-color:#0077B6; box-shadow:0 0 0 3px rgba(0,119,182,.09); }
.frn-ir-tel-row { display:flex; gap:8px; }
.frn-ir-sel-cc {
padding:10px 8px;
font-size:14px; font-family:inherit;
border:1.5px solid #E2E8F0; border-radius:10px;
background:#FAFBFD; color:#1A2332; cursor:pointer;
outline:none;
}
.frn-ir-sel {
width:100%;
padding:10px 12px;
font-size:15px; font-family:inherit;
border:1.5px solid #E2E8F0; border-radius:10px;
background:#FAFBFD; color:#1A2332; cursor:pointer;
outline:none;
}
.frn-ir-sel:focus { border-color:#0077B6; }
.frn-ir-inline-input-row { display:flex; gap:8px; align-items:center; }
/* Produits dans la col catégorie */
.frn-ir-prods-list { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; min-height:4px; }
.frn-ir-prod-row {
display:flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:10px;
background:#F8FAFC;
font-size:13px;
cursor:pointer;
transition:background .12s;
}
.frn-ir-prod-row:hover { background:#EFF6FF; }
.frn-ir-prod-row input[type="checkbox"] {
width:16px; height:16px;
accent-color:#0077B6;
cursor:pointer;
flex-shrink:0;
}
.frn-ir-prod-nom { flex:1; font-weight:600; color:#1A2332; }
.frn-ir-prod-prix { font-size:12px; color:#64748B; white-space:nowrap; }
.frn-ir-newprod-row { background:#F0FDF4 !important; }
.frn-ir-np-check { color:#16A34A; font-size:16px; font-weight:900; flex-shrink:0; }
.frn-ir-prod-del {
width:22px; height:22px;
border:none; border-radius:50%;
background:#FEE2E2; color:#DC2626;
font-size:14px; cursor:pointer;
display:flex; align-items:center; justify-content:center;
line-height:1; flex-shrink:0;
}
.frn-ir-prod-del:hover { background:#FECACA; }
.frn-ir-empty { color:#94A3B8; font-size:12px; font-style:italic; padding:6px 0; margin:0; }
.frn-ir-add-prod-btn {
width:100%;
padding:9px;
border:1.5px dashed #BFDBFE;
border-radius:10px;
background:#EFF6FF;
color:#0077B6;
font-size:13px; font-weight:700; font-family:inherit;
cursor:pointer;
transition:.13s;
}
.frn-ir-add-prod-btn:hover { background:#DBEAFE; }
.frn-ir-newprod-form {
margin-top:10px;
padding:12px;
background:#F8FAFC;
border-radius:12px;
border:1.5px dashed #CBD5E1;
}
.frn-ir-np-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
}
@media (max-width:500px) { .frn-ir-np-grid { grid-template-columns:1fr 1fr; } }
.frn-ir-btn-sm {
padding:9px 16px;
border:none; border-radius:9px;
font-size:13px; font-weight:700; font-family:inherit;
cursor:pointer; white-space:nowrap;
}
.frn-ir-btn-ok { background:#0077B6; color:#fff; }
.frn-ir-btn-ok:hover { background:#005f92; }
.frn-ir-btn-cancel { background:#F1F5F9; color:#64748B; }
.frn-ir-btn-cancel:hover { background:#E2E8F0; }
/* Footer */
.frn-ir-footer {
display:flex;
gap:10px;
flex-wrap:wrap;
padding-top:16px;
border-top:1.5px solid #F1F5F9;
}
.frn-ir-btn-save {
flex:1; min-width:140px;
padding:13px;
background:#0077B6; color:#fff;
border:none; border-radius:12px;
font-size:15px; font-weight:800; font-family:inherit;
cursor:pointer; transition:.13s;
}
.frn-ir-btn-save:hover { background:#005f92; }
.frn-ir-btn-cmd {
flex:1; min-width:140px;
padding:13px;
background:#16A34A; color:#fff;
border:none; border-radius:12px;
font-size:15px; font-weight:800; font-family:inherit;
cursor:pointer; transition:.13s;
}
.frn-ir-btn-cmd:hover { background:#15803D; }
.frn-ir-btn-annuler {
padding:13px 20px;
background:#F1F5F9; color:#64748B;
border:none; border-radius:12px;
font-size:14px; font-weight:700; font-family:inherit;
cursor:pointer; transition:.13s;
}
.frn-ir-btn-annuler:hover { background:#E2E8F0; }
/* ── Voir fournisseur modal */
.frn-voir-name { font-size:20px; font-weight:900; color:#1A2332; margin-bottom:6px; }
.frn-voir-tel { font-size:14px; color:#64748B; margin-bottom:4px; }
.frn-voir-adr { font-size:13px; color:#94A3B8; margin-bottom:16px; }
.frn-voir-wa { display:inline-block; padding:2px 10px; background:#25D366; color:#fff;
border-radius:6px; font-size:11px; font-weight:700; text-decoration:none; vertical-align:middle; }
.frn-voir-cat-title {
font-size:13px; font-weight:800; color:#0077B6;
text-transform:uppercase; letter-spacing:.05em;
margin:16px 0 8px;
padding-bottom:4px;
border-bottom:1.5px solid #E2E8F0;
}
.frn-voir-table { width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:6px; }
.frn-voir-table th { text-align:left; padding:5px 8px; color:#94A3B8; font-size:10.5px;
font-weight:700; text-transform:uppercase; letter-spacing:.04em;
border-bottom:1.5px solid #F1F5F9; }
.frn-voir-table td { padding:7px 8px; border-bottom:1px solid #F8FAFC; vertical-align:middle; }
.frn-voir-table tbody tr:last-child td { border-bottom:none; }
.frn-voir-table tbody tr:hover td { background:#F8FAFC; }
.frn-voir-empty { color:#94A3B8; font-style:italic; font-size:13px; padding:16px 0; text-align:center; }
/* ══════════════════════════════════════════════════════════════
COMMANDES — carte redesignée v20260402b
══════════════════════════════════════════════════════════════ */
#frn-tab-content-cmd { display:flex; flex-direction:column; gap:14px; }
.cmd-card2 { background:#fff; border:1.5px solid #E2E8F0; border-radius:16px; padding:18px 20px; }
.cmd-card2:hover { box-shadow:0 4px 20px rgba(0,119,182,.09); }
.cmd2-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; }
.cmd2-head-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cmd2-head-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cmd2-frn-name { font-size:15px; font-weight:800; color:#1A2332; }
.cmd2-date { font-size:11px; color:#94A3B8; }
.cmd2-badge { padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.cmd-statut-afaire { background:#FEF9C3; color:#854D0E; }
.cmd-statut-effectuee { background:#DBEAFE; color:#1D4ED8; }
.cmd-statut-recue { background:#DCFCE7; color:#166534; }
.cmd2-total { font-size:15px; font-weight:800; color:#0077B6; }
.cmd2-note { font-size:12px; color:#64748B; background:#F8FAFC; border-radius:8px;
padding:6px 10px; margin-bottom:10px; }
/* Tableau lignes commande */
.cmd2-table { width:100%; border-collapse:collapse; font-size:12.5px; margin:4px 0 14px; }
.cmd2-table th { text-align:left; padding:5px 8px; color:#94A3B8; font-size:10.5px;
font-weight:700; text-transform:uppercase; letter-spacing:.04em;
border-bottom:1.5px solid #F1F5F9; }
.cmd2-table td { padding:7px 8px; border-bottom:1px solid #F8FAFC; }
.cmd2-table tbody tr:last-child td { border-bottom:none; }
.cmd-tbl-num { text-align:right; color:#64748B; }
.cmd-tbl-c { text-align:center !important; color:#64748B; font-size:12px; }
.cmd-tbl-bold { font-weight:700; color:#1A2332; }
.cmd2-table th.cmd-tbl-c { text-align:center !important; }
.cmd2-actions { display:flex; gap:8px; flex-wrap:wrap; padding-top:12px; border-top:1px solid #F1F5F9; }
/* ── Confirm commande modal ── */
.cmd-confirm-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.cmd-conf-btn { padding:9px 16px; border-radius:10px; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; border:2px solid transparent; transition:.15s; }
.cmd-conf-save { background:#EFF6FF; color:#0077B6; border-color:#BFDBFE; }
.cmd-conf-save:hover { background:#DBEAFE; }
.cmd-conf-wa { background:#F0FDF4; color:#16A34A; border-color:#BBF7D0; }
.cmd-conf-wa:hover { background:#DCFCE7; }
.cmd-conf-contact { background:#16A34A; color:#fff; border-color:#16A34A; margin-left:auto; }
.cmd-conf-contact:hover { background:#15803D; }
/* Contact panel */
.cmd-contact-card { background:#F8FAFC; border:1.5px solid #E2E8F0; border-radius:12px; padding:16px 18px; margin-bottom:16px; }
.cmd-contact-frn-name { font-size:18px; font-weight:900; color:#1A2332; margin-bottom:6px; }
.cmd-contact-frn-tel { font-size:14px; color:#0077B6; font-weight:600; }
.cmd-contact-amount { display:flex; justify-content:space-between; align-items:center; background:#EFF6FF; border-radius:10px; padding:12px 16px; font-size:14px; font-weight:700; color:#1A2332; margin-bottom:20px; }
.cmd-contact-amount span { font-size:22px; font-weight:900; color:#0077B6; }
.cmd-contact-btns { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.cmd-contact-btns .sc-btn, .cmd-contact-btns .sc-btn-outline { flex:0 0 auto; width:auto; }
/* Success animation */
.cmd-succ-wrap { display:flex; flex-direction:column; align-items:center; padding:24px 16px; }
.cmd-succ-svg { width:80px; height:80px; margin-bottom:16px; }
.cmd-succ-ring { stroke-dasharray:160; stroke-dashoffset:160; }
.cmd-succ-ring.animate { animation:cmd-ring-draw .5s ease forwards; }
.cmd-succ-path { stroke-dasharray:50; stroke-dashoffset:50; opacity:0; }
.cmd-succ-path.animate { animation:cmd-chk-draw .4s ease .5s forwards; }
@keyframes cmd-ring-draw { to { stroke-dashoffset:0; } }
@keyframes cmd-chk-draw { to { stroke-dashoffset:0; opacity:1; } }
.cmd-succ-msg { font-size:20px; font-weight:900; color:#16A34A; margin-bottom:6px; }
.cmd-succ-sub { font-size:13px; color:#64748B; }
/* Réception — écart */
.rec-ecart-cell { font-weight:700; font-size:13px; }
.rec-ecart-ok { color:#94A3B8; }
.rec-ecart-pos { color:#16A34A; }
.rec-ecart-neg { color:#DC2626; }
.cc-qty-inp { width:60px; text-align:center; border:1.5px solid #E2E8F0; border-radius:8px; padding:5px 6px; font-size:13px; font-family:inherit; }
.cc-qty-inp:focus { border-color:#0077B6; outline:none; }
/* Voir fournisseur — redesign */
.frn-voir-contact-card { background:#F8FAFC; border:1.5px solid #E2E8F0; border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.frn-voir-name { font-size:18px; font-weight:900; color:#1A2332; margin-bottom:4px; }
.frn-voir-tel { font-size:14px; color:#0077B6; font-weight:600; }
.frn-voir-adr { font-size:12px; color:#94A3B8; margin-top:4px; }
.frn-voir-cats { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.frn-voir-section-title { font-size:11px; font-weight:800; color:#64748B; text-transform:uppercase; letter-spacing:.5px; margin:16px 0 10px; }
.frn-voir-cmd-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; font-size:13px; color:#64748B; }
.frn-voir-cmd-total { font-weight:800; color:#1A2332; margin-left:auto; }
.frn-voir-more-cmds { font-size:12px; color:#94A3B8; text-align:right; margin-top:8px; font-style:italic; }
.frn-voir-empty { color:#94A3B8; font-size:13px; font-style:italic; }
/* ── Simulateur commande ─────────────────────────────────── */
.cmd-qa-card {
background:#fff;
border:1.5px solid #E2E8F0;
border-radius:16px;
padding:18px 20px;
margin-bottom:14px;
box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.cmd-qa-prod-name {
font-size:16px; font-weight:900; color:#1A2332;
margin-bottom:14px;
display:flex; align-items:center; gap:8px;
border-bottom:1.5px solid #F1F5F9; padding-bottom:10px;
}
.cmd-qa-prod-type {
font-size:11px; font-weight:700; color:#64748B;
background:#E2E8F0; border-radius:20px; padding:2px 8px;
}
/* 2-column grid */
.cmd-qa-grid {
display:grid;
grid-template-columns:1fr 1.4fr;
gap:16px;
}
@media (max-width:640px) { .cmd-qa-grid { grid-template-columns:1fr; } }
/* Buy column */
.cmd-qa-buy {
background:#F8FAFC;
border:1.5px solid #E2E8F0;
border-radius:12px;
padding:14px;
display:flex; flex-direction:column; gap:10px;
}
.cmd-qa-section-title {
font-size:11px; font-weight:800; text-transform:uppercase;
letter-spacing:.06em; color:#64748B;
padding-bottom:8px; border-bottom:1.5px solid #E2E8F0;
margin-bottom:2px;
}
.cmd-qa-field { display:flex; flex-direction:column; gap:5px; }
.cmd-qa-lbl { font-size:12px; font-weight:700; color:#334155; }
.cmd-qa-buy-summary {
background:#EFF6FF;
border-radius:10px;
padding:10px 12px;
margin-top:4px;
font-size:13px;
color:#1A2332;
}
.cq-sum-row { display:flex; justify-content:space-between; gap:8px; margin-bottom:3px; }
.cq-sum-row:last-child { margin-bottom:0; }
/* Sell column */
.cmd-qa-sell {
display:flex; flex-direction:column; gap:10px;
}
.cmd-qa-sell-box {
background:#F8FAFC;
border:1.5px solid #E2E8F0;
border-radius:12px;
padding:12px 14px;
display:flex; flex-direction:column; gap:8px;
}
.cmd-qa-sell-box-title {
font-size:11px; font-weight:800; text-transform:uppercase;
letter-spacing:.05em; color:#0077B6;
border-bottom:1.5px solid #DBEAFE; padding-bottom:6px;
}
/* Margin simulation result */
.cmd-qa-sell-summary { display:flex; flex-direction:column; gap:6px; margin-top:2px; }
.cq-marge-row {
display:flex; justify-content:space-between; align-items:center;
gap:8px; font-size:12.5px; color:#334155;
background:#F8FAFC; border-radius:8px; padding:7px 10px;
}
.cq-marge-row.pos { border-left:3px solid #16A34A; }
.cq-marge-row.neg { border-left:3px solid #DC2626; }
.cq-marge-tag {
font-size:11.5px; font-weight:800; padding:2px 8px;
border-radius:20px; white-space:nowrap; flex-shrink:0;
}
.cq-marge-tag.pos { background:#DCFCE7; color:#16A34A; }
.cq-marge-tag.neg { background:#FEE2E2; color:#DC2626; }
.cq-marge-total {
display:flex; justify-content:space-between; align-items:center;
gap:8px; padding:10px 12px; border-radius:12px;
font-size:13px; font-weight:700;
margin-top:2px;
}
.cq-marge-total.pos { background:#DCFCE7; color:#15803D; border:1.5px solid #BBF7D0; }
.cq-marge-total.neg { background:#FEE2E2; color:#DC2626; border:1.5px solid #FECACA; }
.cq-marge-big {
font-size:16px; font-weight:900; white-space:nowrap;
}
/* Qty controls (shared) */
.cmd-qa-qty-row {
display:flex; align-items:center; gap:8px;
}
.cmd-qa-qty-btn {
width:32px; height:32px;
border:1.5px solid #CBD5E1; border-radius:8px;
background:#fff; font-size:18px; font-weight:700;
color:#0077B6; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:.12s; flex-shrink:0;
}
.cmd-qa-qty-btn:hover { background:#EFF6FF; border-color:#93C5FD; }
.cmd-qa-qty-inp {
width:56px; text-align:center; padding:7px;
font-size:15px; font-weight:700; font-family:inherit;
border:1.5px solid #E2E8F0; border-radius:8px; background:#fff;
}
.frn-ir-qa-hint {
font-size:12px; color:#94A3B8; font-style:italic;
margin:6px 0 4px; padding:0;
}
/* Boutons actions commande */
.cmd-action-btn { padding:7px 14px; border-radius:9px; font-size:12px; font-weight:700;
cursor:pointer; border:none; transition:.12s; white-space:nowrap; }
.cmd-action-whatsapp { background:#25D366; color:#fff; }
.cmd-action-whatsapp:hover { background:#1eba57; }
.cmd-action-confirm { background:#DBEAFE; color:#1D4ED8; }
.cmd-action-confirm:hover { background:#BFDBFE; }
.cmd-action-edit { background:#F1F5F9; color:#475569; }
.cmd-action-edit:hover { background:#E2E8F0; }
.cmd-action-del { background:#FEF2F2; color:#EF4444; }
.cmd-action-del:hover { background:#FEE2E2; }
.cmd-done-badge { display:inline-flex; align-items:center; gap:5px; padding:6px 12px;
background:#DCFCE7; color:#166534; border-radius:9px; font-size:12px; font-weight:700; }
/* ── Mini confirm modal ── */
.mini-confirm-ov { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
z-index:9999; align-items:center; justify-content:center; padding:16px; }
.mini-confirm-box { background:#fff; border-radius:16px; padding:24px 22px; max-width:360px; width:100%;
box-shadow:0 20px 60px rgba(0,0,0,.25); }
.mini-confirm-title { font-size:16px; font-weight:800; color:#1A2332; margin-bottom:6px; }
.mini-confirm-sub { font-size:13px; color:#64748B; margin-bottom:20px; }
.mini-confirm-btns { display:flex; gap:10px; justify-content:flex-end; }
.cmd-action-sim { background:#F5F3FF; color:#7C3AED; }
.cmd-action-sim:hover { background:#EDE9FE; }
.cmd-action-renew { background:#EFF6FF; color:#0077B6; }
.cmd-action-renew:hover { background:#DBEAFE; }
/* ── Simulation modale ── */
.sim-prod-card { background:#F8FAFC; border:1.5px solid #E2E8F0; border-radius:12px;
margin-bottom:12px; overflow:hidden; }
.sim-prod-head { display:flex; align-items:center; justify-content:space-between;
padding:10px 14px; background:#fff; border-bottom:1px solid #E2E8F0; gap:10px; flex-wrap:wrap; }
.sim-chk-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; flex:1; min-width:0; }
.sim-chk-wrap input[type=checkbox] { width:16px; height:16px; accent-color:#6366F1; flex-shrink:0; }
.sim-prod-name { font-size:14px; font-weight:700; color:#1A2332; }
.sim-prod-cost { font-size:12px; color:#64748B; white-space:nowrap; flex-shrink:0; }
.sim-prod-body { padding:14px; }
.sim-prod-result { margin-top:12px; padding-top:10px; border-top:1px dashed #E2E8F0; }
/* Slider allocation */
.sim-slider-row { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; }
.sim-side-info { display:flex; flex-direction:column; gap:4px; }
.sim-side-art { text-align:left; }
.sim-side-ent { text-align:right; }
.sim-side-lbl { font-size:11px; font-weight:700; color:#64748B; text-transform:uppercase; letter-spacing:.4px; }
.sim-side-count { font-size:15px; font-weight:800; color:#1A2332; line-height:1.2; }
.sim-side-price { font-size:12px; color:#94A3B8; }
.sim-slider-center { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:110px; }
.sim-slider-top { display:flex; align-items:center; gap:8px; }
.sim-slider-ratio { font-size:12px; font-weight:800; color:#6366F1; min-width:44px; text-align:center; }
.sim-fine-btn { width:28px; height:28px; border-radius:50%; border:2px solid #CBD5E1; background:#fff;
font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
color:#475569; font-weight:700; flex-shrink:0; padding:0; }
.sim-fine-btn:hover { background:#EEF2FF; border-color:#818CF8; color:#6366F1; }
.sim-slider { -webkit-appearance:none; appearance:none; width:100%; height:6px;
border-radius:3px; background:linear-gradient(to right,#A5B4FC,#6366F1); outline:none; cursor:pointer; }
.sim-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px;
border-radius:50%; background:#6366F1; cursor:pointer; border:3px solid #fff; box-shadow:0 0 0 2px #818CF8; }
.sim-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#6366F1;
cursor:pointer; border:3px solid #fff; box-shadow:0 0 0 2px #818CF8; }
.sim-slider-bot { display:flex; justify-content:space-between; width:100%;
font-size:10px; color:#94A3B8; font-weight:600; letter-spacing:.3px; }
/* Simulation — total groupé */
.sim-group-total-wrap { margin-top:16px; border-radius:12px; overflow:hidden;
border:2px solid #818CF8; background:#EEF2FF; }
.sim-gt-title { padding:10px 14px 6px; font-size:11px; font-weight:800; color:#4338CA;
text-transform:uppercase; letter-spacing:.6px; }
.sim-gt-row { display:flex; justify-content:space-between; padding:4px 14px;
font-size:14px; color:#1A2332; }
.sim-gt-lbl { color:#64748B; }
.sim-gt-val { font-weight:700; }
.sim-gt-marge { display:flex; justify-content:space-between; padding:10px 14px;
font-size:16px; font-weight:800; border-top:1.5px solid #C7D2FE; margin-top:4px; }
.sim-gt-marge.pos { color:#16A34A; }
.sim-gt-marge.neg { color:#DC2626; }
@media (max-width:520px) {
.sim-slider-row { grid-template-columns:1fr; gap:8px; }
.sim-side-ent { text-align:left; }
.sim-slider-center { width:100%; }
}
/* ============================================================
RESPONSIVE DASHBOARD ADMIN + PATRON — Mobile (≤768px)
============================================================ */
/* ── Laptop serré (≤1100px) : charts passent en 1 col pour laisser respirer ── */
@media (max-width: 1100px) {
.adm-charts-row { grid-template-columns: minmax(0, 1fr); }
}
/* ── Tablette (≤900px) : 4 col → 2×2 ── */
@media (max-width: 900px) {
.adm-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.adm-charts-row { grid-template-columns: minmax(0, 1fr); }
.adm-bottom-row { grid-template-columns: 1fr; }
}
/* ── Smartphone (≤640px) ── */
@media (max-width: 640px) {
/* KPI grid : 2 colonnes serrées */
.adm-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.adm-kpi-card { padding: 14px 14px 10px; }
.adm-kpi-val { font-size: 24px; }
/* KPI v2 (admin dashboard) */
.adm-kpi-v2 { padding: 14px 14px 12px; border-radius: 14px; }
.adm-kpi-v2 .kpi-val { font-size: 26px; }
.adm-kpi-v2 .kpi-icon-badge { width: 30px; height: 30px; }
.adm-kpi-v2 .kpi-spark-wrap { margin-top: 8px; }
/* Charts et bottom row : 1 colonne pleine largeur */
.adm-charts-row { grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.adm-chart-card { padding: 14px 14px; }
.adm-chart-v2 { padding: 14px 14px; }
.adm-bottom-row { grid-template-columns: 1fr; gap: 10px; }
.adm-card { padding: 14px 14px; }
/* Boutons de période (analyses) : scrollable horizontalement */
#pat-an-controls,
.pat-an-controls {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#pat-an-controls::-webkit-scrollbar,
.pat-an-controls::-webkit-scrollbar { display: none; }
.pat-an-period-btn {
flex-shrink: 0;
padding: 6px 12px;
font-size: 12px;
}
/* Vue tabs Ventes/Achats */
.pat-an-view-tab { padding: 7px 14px; font-size: 12px; }
/* Grille charts analyses → colonne unique */
#pat-an-charts-row,
#pat-an-ach-charts-row { grid-template-columns: 1fr !important; gap: 10px; }
/* Sélecteur employé dans analyses */
#pat-an-emp-wrap { margin-bottom: 10px; }
#pat-an-emp-sel { width: 100% !important; max-width: 100% !important; }
/* Transactions : select boutique pleine largeur */
#pat-txn-boutique { width: 100%; max-width: 100%; }
/* Headers de section */
.sad-page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
.sad-page-title { font-size: 18px; }
.sad-page-sub { font-size: 11px; }
/* clt-card topbar → colonne sur mobile */
.clt-topbar {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
}
.clt-search-wrap .sad-search-inp { width: 100%; }
.clt-search-wrap { width: 100%; }
/* Statistiques .sad-stats : 2 colonnes */
.sad-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
/* Modals : pleine largeur sur mobile */
.sad-modal-box {
width: 100% !important;
max-width: 100% !important;
margin: 0;
border-radius: 16px 16px 0 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 92dvh;
overflow-y: auto;
}
.sad-modal-ov.open { align-items: flex-end; }
/* Tableaux : scroll horizontal */
.sad-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.clt-scroll-wrap { max-height: 350px; }
/* Boutons d'action dans les headers */
.sad-btn { padding: 8px 12px; font-size: 12px; }
.sad-btn-sm { padding: 5px 10px; font-size: 11px; }
/* Mini KPI grille dans dashboard commandes */
#pat-dash-frn-row [style*="grid-template-columns:repeat(4"] {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ============================================================
RESPONSIVE PAGE D'ACCUEIL (rabidpos.html) — Mobile
============================================================ */
/* ── Navigation ── */
@media (max-width: 640px) {
.sh-nav { padding: 0 14px; height: 52px; }
.sh-nav-links { display: none; }
/* Connexion : compact mais visible sur mobile */
.sh-nav-login { padding: 6px 11px; font-size: 12px; }
.sh-nav-cta { padding: 6px 12px; font-size: 12px; }
/* scroll-padding-top : évite que la nav fixe masque l'input focalisé */
html { scroll-padding-top: 60px; }
/* kp-cc-select : ajuste la largeur quand font-size passe à 16px sur iOS */
.kp-cc-select { width: 70px; padding: 11px 4px 11px 6px; font-size: 16px; }
/* Padding bas de la section auth pour que le clavier ne masque pas le formulaire */
#auth-section { padding-bottom: 80px; }
}
/* ── Hero dark ── */
@media (max-width: 640px) {
.kp-hero-dark-inner {
padding: 80px 20px 36px;
min-height: calc(100svh - 52px);
gap: 0;
}
/* Désactiver les coins décoratifs qui débordent */
.kp-corner-el { display: none; }
.kp-float-el { display: none; }
.kp-hero-tagline-text {
font-size: 9px;
letter-spacing: 0.12em;
line-height: 1.6;
}
.kp-tagline-sep { width: 40px; }
.kp-dark-h1-main {
font-size: clamp(1.7rem, 8vw, 2.4rem);
margin-bottom: 12px;
}
.kp-dark-h1-sub {
font-size: clamp(0.95rem, 4vw, 1.2rem);
line-height: 1.6;
}
.kp-dark-h1 { margin-bottom: 20px; }
/* Boutons CTA : colonne sur très petit écran */
.kp-dark-cta { flex-direction: column; gap: 10px; align-items: center; }
.kp-dark-btn-primary,
.kp-dark-btn-ghost {
width: 100%; max-width: 320px;
justify-content: center;
padding: 13px 20px;
}
/* Stats : réduire les gaps */
.kp-dark-stats { gap: 16px; margin-top: 18px; }
.kp-dark-stat-val { font-size: 17px; }
.kp-dark-stat-lbl { font-size: 9px; }
.kp-dark-stat-sep { height: 22px; }
/* Vague hero */
.sh-hero-wave { margin-top: -2px; }
}
/* ── Device showcase : masquer sur mobile (trop lourd) ── */
@media (max-width: 640px) {
.kp-devices-section { padding: 48px 0 56px; }
.kp-devices-head { margin-bottom: 32px; padding: 0 20px; }
.kp-devices-title { font-size: clamp(1.4rem, 6vw, 2rem); }
.kp-devices-sub { font-size: 13px; }
/* Masquer la scène 3D complexe → allège le rendu */
.kp-devices-stage { display: none; }
.kp-devices-glow { display: none; }
}
/* ── Section "Comment ça marche" ── */
@media (max-width: 640px) {
.sh-howitworks { padding: 48px 20px; }
.sh-steps { grid-template-columns: 1fr !important; gap: 16px; }
.sh-benefit-card { padding: 18px 16px; }
}
/* ── Section features ── */
@media (max-width: 640px) {
.sh-features { padding: 48px 20px; }
.sh-features-inner { grid-template-columns: 1fr; gap: 12px; }
.sh-benefits { padding: 48px 20px; }
.sh-benefits-grid { grid-template-columns: 1fr; gap: 12px; }
}
/* ── Section formulaire d'inscription/connexion ── */
@media (max-width: 640px) {
.sh-auth-section { padding: 40px 16px 60px; }
.sh-auth-inner { grid-template-columns: 1fr; gap: 24px; }
.sh-auth-pitch { text-align: center; }
.sh-auth-title { font-size: clamp(1.3rem, 6vw, 1.8rem); }
/* Card formulaire pleine largeur */
.sh-card, .sh-auth-card {
width: 100% !important;
max-width: 100% !important;
padding: 24px 18px;
border-radius: 16px;
}
/* Grille 2 colonnes → 1 colonne dans le formulaire */
.sh-two-col { grid-template-columns: 1fr; }
/* Grille modes de paiement */
.sc-pay-grid { grid-template-columns: 1fr 1fr; }
/* Bloc boutique */
.sc-boutique-block .sc-two-col { grid-template-columns: 1fr; }
}
/* ── Footer ── */
@media (max-width: 640px) {
.sh-footer {
flex-direction: column;
gap: 14px;
text-align: center;
padding: 20px 16px;
}
.sh-footer-copy { margin-left: 0; }
.sh-footer-links { justify-content: center; }
}
/* ── Tableau équipe → cartes sur mobile (≤600px) ── */
@media (max-width: 600px) {
/* Le scroll-wrap laisse défiler les cartes verticalement */
#pat-equipe-content .clt-scroll-wrap {
overflow-x: visible;
max-height: none;
}
/* Cacher le thead */
#pat-equipe-content .clt-table thead { display: none; }
/* Chaque ligne → carte */
#pat-equipe-content .clt-table,
#pat-equipe-content .clt-table tbody,
#pat-equipe-content .clt-table tr,
#pat-equipe-content .clt-table td {
display: block;
width: 100%;
box-sizing: border-box;
}
#pat-equipe-content .clt-table tr {
border: 1px solid #E2E8F0;
border-radius: 12px;
margin: 8px 0;
padding: 10px 14px;
background: #fff;
position: relative;
}
#pat-equipe-content .clt-table tr:hover td { background: transparent; }
#pat-equipe-content .clt-table td {
border-bottom: none;
padding: 4px 0;
font-size: 13px;
}
/* Colonne Employé (nom + tel) : en haut pleine largeur */
#pat-equipe-content .clt-table td:first-child {
padding-bottom: 8px;
border-bottom: 1px solid #F1F5F9;
margin-bottom: 6px;
}
#pat-equipe-content .clt-table td:first-child .clt-client-name { font-size: 14px; }
/* Colonnes Rôle + Statut : inline côte à côte */
#pat-equipe-content .clt-table td:nth-child(2),
#pat-equipe-content .clt-table td:nth-child(3) {
display: inline-block;
width: auto;
padding-right: 12px;
}
/* Colonne Code : full width */
#pat-equipe-content .clt-table td.clt-col-code {
display: block !important;
padding-top: 6px;
}
/* Colonne Actions (⋮) : positionnée en haut à droite de la carte */
#pat-equipe-content .clt-table td:last-child {
position: absolute;
top: 10px;
right: 10px;
width: auto;
padding: 0;
}
/* Labels auto avant chaque cellule */
#pat-equipe-content .clt-table td:nth-child(2)::before { content: ''; }
#pat-equipe-content .clt-table td:nth-child(3)::before { content: ''; }
/* clt-table min-width annulé */
#pat-equipe-content .clt-table { min-width: 0; }
/* Bouton + Ajouter dans le topbar : pleine largeur sur mobile */
#pat-equipe-content .clt-topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
#pat-equipe-content .clt-topbar .sad-btn-approve { width: 100%; text-align: center; }
}
/* ── Très petit (≤400px) ── */
@media (max-width: 400px) {
.adm-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-kpi-card { padding: 12px 10px 8px; }
.adm-kpi-val { font-size: 20px; }
.adm-kpi-v2 .kpi-val { font-size: 22px; }
.sad-stats { grid-template-columns: 1fr; }
.sad-main { padding: 62px 10px 16px; }
}
/* ============================================================
SECTIONS ILLUSTRATIONS — Visual tools, For-who, Compare
============================================================ */
/* ── Cinematic Feature Cards section ── */
.kp-feat-section {
padding: 88px 0 100px;
background: #080F1C;
position: relative;
overflow: hidden;
}
/* Background grain texture */
.kp-feat-section::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
pointer-events: none;
opacity: .4;
}
/* Override section head colors on dark bg */
.kp-feat-section .sh-section-label {
display: flex; align-items: center; gap: 8px;
color: #94A3B8; justify-content: center;
}
.kp-feat-section .sh-section-title { color: #FFFFFF; }
/* Pulsing live dot */
.kp-live-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: #10B981;
flex-shrink: 0;
animation: kp-live 2s ease-in-out infinite;
}
@keyframes kp-live {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
50% { opacity: .7; box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
.kp-feat-intro {
max-width: 480px;
margin: 0 auto;
font-size: 16px;
color: #64748B;
line-height: 1.7;
text-align: center;
}
/* Grid */
.kp-feat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 52px;
}
/* Individual card */
.kp-feat-card {
position: relative;
border-radius: 22px;
overflow: hidden;
height: 400px;
cursor: default;
/* Entrance state */
opacity: 0;
transform: translateY(56px) scale(.97);
transition:
opacity .75s ease,
transform .75s cubic-bezier(.22,.68,0,1.15),
box-shadow .3s ease;
}
.kp-feat-card.kp-revealed { opacity: 1; transform: translateY(0) scale(1); }
.kp-feat-card:nth-child(2) { transition-delay: .12s; }
.kp-feat-card:nth-child(3) { transition-delay: .22s; }
.kp-feat-card:nth-child(4) { transition-delay: .32s; }
.kp-feat-card:hover {
box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
z-index: 2;
}
/* Background photo */
.kp-feat-bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transform: scale(1.08);
transition: transform .7s cubic-bezier(.22,.68,0,1.15);
will-change: transform;
}
.kp-feat-card:hover .kp-feat-bg { transform: scale(1); }
/* Gradient overlay — heavier at bottom for readability */
.kp-feat-overlay {
position: absolute; inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.55) 45%,
rgba(0,0,0,.18) 100%
);
transition: background .4s ease;
}
.kp-feat-card:hover .kp-feat-overlay {
background: linear-gradient(
to top,
rgba(0,0,0,.92) 0%,
rgba(0,0,0,.60) 50%,
rgba(0,0,0,.10) 100%
);
}
/* Diagonal shimmer sweep */
.kp-feat-shimmer {
position: absolute; inset: 0;
background: linear-gradient(
108deg,
transparent 38%,
rgba(255,255,255,.07) 50%,
transparent 62%
);
background-size: 250% 100%;
background-position: -150% 0;
animation: kp-shimmer 5s ease infinite;
pointer-events: none;
}
.kp-feat-card:nth-child(2) .kp-feat-shimmer { animation-delay: 1.25s; }
.kp-feat-card:nth-child(3) .kp-feat-shimmer { animation-delay: 2.5s; }
.kp-feat-card:nth-child(4) .kp-feat-shimmer { animation-delay: 3.75s; }
@keyframes kp-shimmer {
0%, 60% { background-position: -150% 0; }
100% { background-position: 200% 0; }
}
/* Accent color top-left border glow on hover */
.kp-feat-card::after {
content: '';
position: absolute; inset: 0;
border-radius: 22px;
border: 1.5px solid var(--accent, #0077B6);
opacity: 0;
transition: opacity .4s ease;
pointer-events: none;
}
.kp-feat-card:hover::after { opacity: .6; }
/* Decorative big number — top right */
.kp-feat-bignum {
position: absolute;
top: -8px; right: 16px;
font-size: 130px;
font-weight: 900;
font-family: 'Poppins', sans-serif;
color: rgba(255,255,255,.04);
line-height: 1;
pointer-events: none;
transition: color .4s;
user-select: none;
}
.kp-feat-card:hover .kp-feat-bignum { color: rgba(255,255,255,.07); }
/* Top area (category tag) */
.kp-feat-top {
position: absolute;
top: 20px; left: 20px;
}
.kp-feat-tag {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 13px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.15);
}
/* Tag dot (accent color) */
.kp-feat-tagdot {
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* Bottom content */
.kp-feat-content {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 24px 24px 26px;
}
.kp-feat-title {
font-family: 'Poppins', sans-serif;
font-size: 24px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.2;
margin: 0 0 10px;
letter-spacing: -.02em;
}
.kp-feat-desc {
font-size: 13.5px;
color: rgba(255,255,255,.65);
line-height: 1.6;
margin: 0 0 14px;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .45s ease, opacity .35s ease, margin-bottom .35s ease;
}
.kp-feat-card:hover .kp-feat-desc {
max-height: 80px;
opacity: 1;
}
/* Check pills */
.kp-feat-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .45s .08s ease, opacity .35s .08s ease;
}
.kp-feat-card:hover .kp-feat-pills { max-height: 70px; opacity: 1; }
.kp-feat-pill {
display: flex;
align-items: center;
gap: 5px;
background: rgba(255,255,255,.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.18);
border-radius: 100px;
padding: 4px 11px;
font-size: 11px;
color: rgba(255,255,255,.9);
font-weight: 600;
}
.kp-feat-pill::before {
content: '✓';
font-size: 10px;
color: var(--accent, #10B981);
font-weight: 800;
}
/* Bottom accent bar — slides from left on hover */
.kp-feat-bar {
position: absolute;
bottom: 0; left: 0;
height: 3px;
width: 0;
background: var(--accent, #0077B6);
border-radius: 0 3px 0 0;
transition: width .5s cubic-bezier(.22,.68,0,1.2);
box-shadow: 0 0 12px var(--accent, #0077B6);
}
.kp-feat-card:hover .kp-feat-bar { width: 100%; }
/* ── Commerce types section ── */
.kp-for-section {
padding: 80px 0;
background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
.kp-for-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.kp-for-card {
background: #FFFFFF;
border: 1.5px solid #E2E8F0;
border-radius: 20px;
padding: 28px 20px 24px;
text-align: center;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
cursor: default;
}
.kp-for-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0,0,0,.08);
border-color: #0077B6;
}
.kp-for-illus {
width: 100px;
height: 80px;
margin: 0 auto 16px;
}
.kp-for-illus svg { width: 100%; height: 100%; }
.kp-for-name {
font-family: 'Poppins','Inter',sans-serif;
font-size: 14px;
font-weight: 700;
color: #1A2332;
margin-bottom: 8px;
}
.kp-for-desc {
font-size: 12px;
color: #64748B;
line-height: 1.55;
}
.kp-for-card.kp-for-soon {
position: relative;
opacity: .55;
filter: grayscale(.85);
pointer-events: none;
}
.kp-for-card.kp-for-soon:hover {
transform: none;
box-shadow: none;
border-color: #E2E8F0;
}
.kp-for-card.kp-for-soon .kp-for-soon-badge {
position: absolute;
top: 12px;
right: 12px;
background: #1A2332;
color: #FFD84D;
font-family: 'Poppins','Inter',sans-serif;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
padding: 4px 10px;
border-radius: 999px;
filter: grayscale(0);
}
/* ═══ Comparatif Avant / Après — habillage ═══ */
.kp-compare-lead {
max-width: 640px;
margin: 18px auto 0;
font-size: 16px;
line-height: 1.6;
color: #64748B;
text-align: center;
font-weight: 500;
}
.kp-compare-hero-glow {
position: absolute;
inset: 10% 6% auto 6%;
height: 70%;
background: radial-gradient(60% 80% at 50% 50%, rgba(16,185,129,.18), rgba(0,119,182,.12) 55%, transparent 75%);
filter: blur(40px);
z-index: 0;
pointer-events: none;
}
/* ═══ Image Comparison Slider (Avant / Après) ═══ */
.kp-ic-wrap {
position: relative;
max-width: 1100px;
margin: 48px auto 0;
padding: 0 16px;
}
.kp-ic {
position: relative;
width: 100%;
aspect-ratio: 1603 / 656;
border-radius: 24px;
overflow: hidden;
user-select: none;
cursor: ew-resize;
box-shadow: 0 32px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.06);
background: #1A2332;
touch-action: pan-y;
}
.kp-ic-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
pointer-events: none;
-webkit-user-drag: none;
}
.kp-ic-before { clip-path: inset(0 0 0 50%); }
.kp-ic-after { clip-path: inset(0 50% 0 0); }
.kp-ic-slider {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
background: rgba(255,255,255,.92);
transform: translateX(-50%);
box-shadow: 0 0 24px rgba(0,0,0,.35);
pointer-events: none;
}
.kp-ic-handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
background: #FFFFFF;
border-radius: 50%;
box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 0 4px rgba(255,255,255,.2);
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.kp-ic-label {
position: absolute;
top: 20px;
padding: 8px 16px;
border-radius: 999px;
font-family: 'Poppins','Inter',sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 4px 12px rgba(0,0,0,.2);
pointer-events: none;
}
.kp-ic-label-before { left: 20px; background: rgba(239, 68, 68, .92); color: #fff; }
.kp-ic-label-after { right: 20px; background: rgba(16, 185, 129, .92); color: #fff; }
.kp-ic-hint {
text-align: center;
margin-top: 18px;
font-size: 13px;
color: #64748B;
font-weight: 500;
}
@media (max-width: 720px) {
.kp-ic-wrap { margin-top: 32px; padding: 0 10px; }
.kp-ic { border-radius: 14px; }
.kp-ic-handle { width: 40px; height: 40px; }
.kp-ic-handle svg { width: 16px; height: 16px; }
.kp-ic-label { top: 10px; padding: 5px 10px; font-size: 9px; letter-spacing: .8px; }
.kp-ic-label-before { left: 10px; }
.kp-ic-label-after { right: 10px; }
.kp-ic-hint { font-size: 12px; margin-top: 14px; }
.kp-compare-lead { font-size: 14px; margin-top: 14px; padding: 0 8px; }
}
/* ═══════════════════════════════════════════════════════════
BADGE NAV — 🇸🇳 Conçu à Dakar
═══════════════════════════════════════════════════════════ */
.kp-nav-badge-dakar {
display: none;
align-items: center;
gap: 6px;
padding: 5px 12px;
margin-left: 14px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.92);
font-family: 'Poppins','Inter',sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
white-space: nowrap;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.kp-nav-badge-flag { font-size: 13px; line-height: 1; }
@media (min-width: 960px) {
.kp-nav-badge-dakar { display: inline-flex; }
}
/* ═══════════════════════════════════════════════════════════
PRIX + FAQ
═══════════════════════════════════════════════════════════ */
.kp-pricing-section {
padding: 72px 0 64px;
background: var(--ds-surface-alt, #F8FAFC);
}
.kp-pf-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
max-width: 1160px;
margin: 40px auto 0;
padding: 0 16px;
align-items: stretch;
}
/* --- Cartes prix --- */
.kp-plan {
position: relative;
background: #FFFFFF;
border: 1px solid var(--ds-line, #E2E8F0);
border-radius: 18px;
padding: 22px 20px 20px;
display: flex;
flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kp-plan:hover {
transform: translateY(-3px);
box-shadow: 0 22px 50px rgba(15, 23, 42, .10);
}
.kp-plan--free { border-color: #CFE7F8; }
.kp-plan--free:hover { border-color: var(--ds-blue, #0077B6); }
.kp-plan--pro {
border-color: #E8C956;
background: linear-gradient(180deg, #FFFBE9 0%, #FFFFFF 55%);
}
.kp-plan--pro:hover { box-shadow: 0 24px 55px rgba(212, 175, 55, .18); }
.kp-plan-ribbon {
position: absolute;
top: 12px; right: 12px;
padding: 3px 9px;
border-radius: 999px;
background: var(--ds-grad-gold, linear-gradient(135deg,#E8C956,#D4AF37));
color: #4A3A0B;
font-family: 'Poppins','Inter',sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
box-shadow: 0 4px 10px rgba(212, 175, 55, .35);
}
.kp-plan-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.kp-plan-ico {
width: 40px; height: 40px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #E8F4FD, #CFE7F8);
color: var(--ds-blue, #0077B6);
flex-shrink: 0;
}
.kp-plan-ico--gold {
background: linear-gradient(135deg, #FBF6E8, #F5E7A8);
color: #B8961E;
}
.kp-plan-name {
font-family: 'Poppins','Inter',sans-serif;
font-size: 17px;
font-weight: 800;
color: var(--ds-ink, #0B1220);
letter-spacing: -.01em;
line-height: 1.15;
}
.kp-plan-tag {
font-size: 12.5px;
color: var(--ds-muted, #64748B);
margin-top: 2px;
line-height: 1.35;
}
.kp-plan-list {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
flex: 1;
}
.kp-plan-list li {
position: relative;
padding-left: 22px;
font-size: 13.5px;
color: var(--ds-ink-3, #334155);
line-height: 1.5;
}
.kp-plan-list li::before {
content: '';
position: absolute;
left: 0; top: 5px;
width: 14px; height: 14px;
border-radius: 50%;
background: #D1FAE5 url("data:image/svg+xml;utf8,") center/10px no-repeat;
}
.kp-plan-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 16px;
border: none;
border-radius: 12px;
font-family: 'Poppins','Inter',sans-serif;
font-size: 13.5px;
font-weight: 700;
letter-spacing: .01em;
cursor: pointer;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.kp-plan-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.kp-plan-btn--free {
background: var(--ds-grad-brand, linear-gradient(135deg,#0077B6,#1B4F72));
color: #FFFFFF;
box-shadow: 0 10px 22px rgba(0, 119, 182, .28);
}
.kp-plan-btn--pro {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: #FFFFFF;
box-shadow: 0 10px 22px rgba(18, 140, 126, .30);
}
/* --- FAQ accordéon --- */
.kp-pf-faq {
background: #FFFFFF;
border: 1px solid var(--ds-line, #E2E8F0);
border-radius: 18px;
padding: 18px 20px 8px;
display: flex;
flex-direction: column;
}
.kp-faq-title {
font-family: 'Poppins','Inter',sans-serif;
font-size: 11px;
font-weight: 700;
color: var(--ds-muted, #64748B);
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 6px;
padding: 0 2px;
}
.kp-faq-item { border-bottom: 1px solid var(--ds-line-2, #EEF2F7); }
.kp-faq-item:last-child { border-bottom: none; }
.kp-faq-item > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 2px;
color: var(--ds-ink, #0B1220);
font-family: 'Poppins','Inter',sans-serif;
font-size: 13.5px;
font-weight: 600;
transition: color .15s ease;
}
.kp-faq-item > summary::-webkit-details-marker { display: none; }
.kp-faq-item > summary:hover { color: var(--ds-blue, #0077B6); }
.kp-faq-q-txt { flex: 1; line-height: 1.35; }
.kp-faq-chev {
width: 22px; height: 22px;
display: inline-flex;
align-items: center; justify-content: center;
border-radius: 50%;
background: var(--ds-bg, #F5F7FB);
color: var(--ds-muted, #64748B);
font-size: 15px;
font-weight: 700;
line-height: 1;
transition: transform .25s ease, background .2s ease, color .2s ease;
flex-shrink: 0;
}
.kp-faq-item[open] > summary .kp-faq-chev {
transform: rotate(45deg);
background: var(--ds-blue, #0077B6);
color: #FFFFFF;
}
.kp-faq-a {
padding: 0 4px 12px 2px;
color: var(--ds-muted, #64748B);
font-size: 13px;
line-height: 1.55;
}
/* ═══════════════════════════════════════════════════════════
WHATSAPP FLOTTANT
═══════════════════════════════════════════════════════════ */
.kp-wa-float {
position: fixed !important;
right: 20px !important;
bottom: 20px !important;
left: auto !important;
top: auto !important;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: #FFFFFF;
display: inline-flex !important;
align-items: center;
justify-content: center;
box-shadow: 0 12px 28px rgba(18, 140, 126, .40), 0 0 0 1px rgba(255,255,255,.08);
text-decoration: none;
z-index: 2147483000;
isolation: isolate;
transition: transform .2s ease, box-shadow .2s ease;
}
.kp-wa-float:hover {
transform: scale(1.06);
box-shadow: 0 16px 36px rgba(18, 140, 126, .50);
}
.kp-wa-float:focus-visible {
outline: 3px solid #FFFFFF;
outline-offset: 3px;
}
.kp-wa-ico { position: relative; z-index: 2; }
.kp-wa-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
background: #25D366;
opacity: .55;
animation: kpWaPulse 2.6s cubic-bezier(.66,0,0,1) infinite;
z-index: 1;
}
@keyframes kpWaPulse {
0% { transform: scale(1); opacity: .55; }
70% { transform: scale(1.45); opacity: 0; }
100% { transform: scale(1.45); opacity: 0; }
}
.kp-wa-tip {
position: absolute;
right: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(8px);
background: var(--ds-ink, #0B1220);
color: #FFFFFF;
font-family: 'Poppins','Inter',sans-serif;
font-size: 12px;
font-weight: 600;
padding: 8px 12px;
border-radius: 10px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.kp-wa-tip::after {
content: '';
position: absolute;
right: -4px; top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 8px; height: 8px;
background: var(--ds-ink, #0B1220);
}
.kp-wa-float:hover .kp-wa-tip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
@media (hover: none) {
.kp-wa-tip { display: none; }
}
/* ═══════════════════════════════════════════════════════════
STICKY CTA MOBILE
═══════════════════════════════════════════════════════════ */
.kp-sticky-cta {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--ds-line, #E2E8F0);
box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
transform: translateY(110%);
transition: transform .3s cubic-bezier(.2,.8,.2,1);
z-index: 2147482000;
isolation: isolate;
display: none;
}
.kp-sticky-cta.is-visible { transform: translateY(0); }
.kp-sticky-cta-btn {
width: 100%;
padding: 14px 18px;
border: none;
border-radius: 14px;
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
color: #FFFFFF;
font-family: 'Poppins','Inter',sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: .01em;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
box-shadow: 0 8px 22px rgba(16, 185, 129, .35);
}
.kp-sticky-cta-btn:active { transform: scale(.98); }
/* ═══════════════════════════════════════════════════════════
RESPONSIVE — Prix/FAQ, WhatsApp, Sticky
═══════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
.kp-pf-grid {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"free pro"
"faq faq";
gap: 18px;
}
.kp-plan--free { grid-area: free; }
.kp-plan--pro { grid-area: pro; }
.kp-pf-faq { grid-area: faq; }
}
@media (max-width: 640px) {
.kp-pf-grid {
grid-template-columns: 1fr;
grid-template-areas:
"free"
"pro"
"faq";
gap: 16px;
}
.kp-pricing-section { padding: 52px 0 44px; }
}
@media (max-width: 720px) {
.kp-sticky-cta { display: block; }
.kp-wa-float {
width: 54px; height: 54px;
right: 14px;
bottom: 84px; /* au-dessus du sticky CTA */
}
.kp-wa-float .kp-wa-ico { width: 24px; height: 24px; }
.kp-wa-tip { display: none; }
}
/* ── Before / After section ── */
.kp-compare-section {
padding: 80px 0;
background: #FFFFFF;
}
.kp-compare-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0 24px;
align-items: start;
margin-top: 48px;
}
.kp-compare-card {
border-radius: 24px;
padding: 32px 28px 28px;
position: relative;
}
.kp-compare-before {
background: #FFF5F5;
border: 2px solid #FCA5A5;
}
.kp-compare-after {
background: #F0FDF4;
border: 2px solid #6EE7B7;
}
.kp-compare-badge {
display: inline-block;
padding: 5px 16px;
border-radius: 100px;
font-size: 11px;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
margin-bottom: 20px;
}
.kp-cbadge-before { background: #FEE2E2; color: #B91C1C; }
.kp-cbadge-after { background: #D1FAE5; color: #065F46; }
.kp-compare-illus { margin: 0 auto 24px; max-width: 200px; }
.kp-compare-illus svg { width: 100%; height: auto; }
.kp-compare-vs {
display: flex; align-items: center; justify-content: center;
font-family: 'Poppins','Inter',sans-serif;
font-size: 28px; font-weight: 900;
color: #CBD5E1;
padding-top: 100px;
align-self: center;
}
.kp-compare-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.kp-compare-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; line-height: 1.5;
}
.kp-clist-before li { color: #7F1D1D; }
.kp-clist-after li { color: #064E3B; }
.kp-clist-before li::before {
content: '✕';
font-size: 13px; font-weight: 700;
color: #EF4444; flex-shrink: 0; padding-top: 1px;
}
.kp-clist-after li::before {
content: '✓';
font-size: 13px; font-weight: 700;
color: #10B981; flex-shrink: 0; padding-top: 1px;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.kp-feat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.kp-feat-card { height: 300px; }
.kp-feat-title { font-size: 20px; }
.kp-feat-bignum { font-size: 90px; }
.kp-for-grid { grid-template-columns: repeat(2, 1fr); }
.kp-compare-grid { grid-template-columns: 1fr; gap: 24px; }
.kp-compare-vs { padding-top: 0; font-size: 22px; }
}
@media (max-width: 600px) {
.kp-feat-section { padding: 56px 0 64px; }
.kp-feat-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
.kp-feat-card { height: 320px; }
.kp-feat-desc, .kp-feat-pills { max-height: none !important; opacity: 1 !important; }
.kp-feat-content { padding: 20px 20px 22px; }
.kp-for-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.kp-for-card { padding: 20px 14px 18px; }
.kp-for-illus { width: 80px; height: 65px; }
.kp-for-name { font-size: 13px; }
.kp-compare-section { padding: 52px 0; }
.kp-compare-card { padding: 24px 18px 22px; }
.kp-compare-list li { font-size: 13px; }
}
@media (max-width: 400px) {
.kp-for-grid { grid-template-columns: 1fr; }
}
/* ============================================================
RESPONSIVE ADMIN — Inscriptions, Clients, Abonnements
============================================================ */
@media (max-width: 640px) {
/* Abonnements : stats row 4-col → 2-col */
#abo-stats-row {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
margin-bottom: 16px !important;
}
/* Inscriptions : barre recherche pleine largeur */
#sec-inscriptions .sad-search-wrap { width: 100%; }
#sec-inscriptions .sad-search-inp { width: 100%; }
/* filter-tabs : wrap */
.sad-filter-tabs { flex-wrap: wrap; gap: 4px; }
}
@media (max-width: 1200px) {
/* ── Inscriptions : table → cartes ── */
#sec-inscriptions .sad-table-wrap { overflow-x: visible; }
#sec-inscriptions .sad-table { min-width: 0 !important; }
#sec-inscriptions .sad-table thead { display: none; }
#sec-inscriptions .sad-table,
#sec-inscriptions .sad-table tbody,
#sec-inscriptions .sad-table tr,
#sec-inscriptions .sad-table td {
display: block; width: 100%; box-sizing: border-box;
}
#sec-inscriptions .sad-table tr {
border: 1px solid #E2E8F0;
border-radius: 12px;
margin: 8px 0;
padding: 12px 14px;
background: #fff;
position: relative;
}
#sec-inscriptions .sad-table tr:hover td { background: transparent; }
#sec-inscriptions .sad-table td { border-bottom: none; padding: 3px 0; font-size: 13px; }
/* Checkbox → masqué */
#sec-inscriptions .sad-table td.sad-check-col { display: none !important; }
/* Commerçant */
#sec-inscriptions .sad-table td:nth-child(2) {
font-size: 15px; font-weight: 700;
padding: 0 0 8px; border-bottom: 1px solid #F1F5F9; margin-bottom: 4px;
}
/* Type */
#sec-inscriptions .sad-table td:nth-child(3) {
display: inline-block !important; width: auto;
font-size: 12px; color: var(--sad-muted); padding-right: 10px;
}
/* Téléphone, Email, Boutiques → masqués */
#sec-inscriptions .sad-table td:nth-child(4),
#sec-inscriptions .sad-table td:nth-child(5),
#sec-inscriptions .sad-table td:nth-child(6) { display: none !important; }
/* Date */
#sec-inscriptions .sad-table td:nth-child(7) {
display: inline-block !important; width: auto;
font-size: 11px; color: var(--sad-muted);
}
/* Statut */
#sec-inscriptions .sad-table td:nth-child(8) { display: block; padding: 6px 0 2px; }
/* Actions */
#sec-inscriptions .sad-table td:nth-child(9) {
display: flex !important; flex-wrap: wrap; gap: 6px;
padding-top: 8px; border-top: 1px solid #F1F5F9; margin-top: 4px;
}
#sec-inscriptions .sad-table td:nth-child(9) .sad-btn-view,
#sec-inscriptions .sad-table td:nth-child(9) .sad-btn-approve,
#sec-inscriptions .sad-table td:nth-child(9) .sad-btn-reject {
flex: 1; min-width: 60px; text-align: center;
}
/* ── Clients : table → cartes ── */
#sec-clients .clt-scroll-wrap { overflow-x: visible; max-height: none; }
#sec-clients .clt-table { min-width: 0 !important; }
#sec-clients .clt-table thead { display: none; }
#sec-clients .clt-table,
#sec-clients .clt-table tbody,
#sec-clients .clt-table tr,
#sec-clients .clt-table td {
display: block; width: 100%; box-sizing: border-box;
}
#sec-clients .clt-table tr {
border: 1px solid #E2E8F0;
border-radius: 12px;
margin: 8px 0;
padding: 10px 14px;
background: #fff;
position: relative;
}
#sec-clients .clt-table tr:hover td { background: transparent; }
#sec-clients .clt-table td { border-bottom: none; padding: 3px 0; font-size: 13px; }
/* Checkbox → masqué */
#sec-clients .clt-table td.clt-check-col { display: none !important; }
/* Client (nom + type) : titre */
#sec-clients .clt-table td:nth-child(2) {
padding: 0 48px 8px 0;
border-bottom: 1px solid #F1F5F9; margin-bottom: 4px;
}
#sec-clients .clt-table td:nth-child(2) .clt-client-name { font-size: 14px; font-weight: 700; }
/* Statut */
#sec-clients .clt-table td:nth-child(5) { display: block !important; padding: 4px 0; }
/* Actions ⋮ : haut-droite */
#sec-clients .clt-table td:last-child {
position: absolute; top: 10px; right: 10px;
width: auto !important; padding: 0;
}
/* ── Abonnements : table → cartes ── */
#sec-abonnements .sad-table-wrap { overflow-x: visible; }
#sec-abonnements .sad-table { min-width: 0 !important; }
#sec-abonnements .sad-table thead { display: none; }
#sec-abonnements .sad-table,
#sec-abonnements .sad-table tbody,
#sec-abonnements .sad-table tr,
#sec-abonnements .sad-table td {
display: block; width: 100%; box-sizing: border-box;
}
#sec-abonnements .sad-table tr {
border: 1px solid #E2E8F0;
border-radius: 12px;
margin: 8px 0;
padding: 12px 14px;
background: #fff;
position: relative;
}
#sec-abonnements .sad-table tr:hover td { background: transparent; }
#sec-abonnements .sad-table td { border-bottom: none; padding: 3px 0; font-size: 13px; }
/* Commerçant : titre */
#sec-abonnements .sad-table td:nth-child(1) {
padding-bottom: 8px; border-bottom: 1px solid #F1F5F9; margin-bottom: 4px;
}
/* Offre (select) */
#sec-abonnements .sad-table td:nth-child(2) .sad-abo-select { width: 100%; }
/* Statut | Expiration | Jours | Revenu : inline */
#sec-abonnements .sad-table td:nth-child(3),
#sec-abonnements .sad-table td:nth-child(4),
#sec-abonnements .sad-table td:nth-child(5),
#sec-abonnements .sad-table td:nth-child(6) {
display: inline-block !important; width: auto; padding-right: 10px; font-size: 12px;
}
/* Actions */
#sec-abonnements .sad-table td:nth-child(7) {
display: flex !important; flex-wrap: wrap; gap: 6px;
padding-top: 8px; border-top: 1px solid #F1F5F9; margin-top: 4px;
}
#sec-abonnements .sad-table td:nth-child(7) .sad-btn-sm { flex: 1; text-align: center; }
/* Tarifs : 3-col → 1-col */
#sec-abonnements [style*="grid-template-columns:repeat(3"] {
grid-template-columns: 1fr !important;
}
/* Modals admin (reg-modal, client-modal) : bottom sheet */
#reg-modal.open,
#client-modal.open { align-items: flex-end; padding: 0; }
#reg-modal .sad-modal,
#client-modal .sad-modal {
width: 100%; max-width: 100%;
border-radius: 16px 16px 0 0;
max-height: 92dvh;
overflow-y: auto;
}
/* ── Dark mode : cartes responsive (ligne-tableau transformée en card) ── */
body[data-theme="dark"] #sec-inscriptions .sad-table tr,
body[data-theme="dark"] #sec-clients .clt-table tr,
body[data-theme="dark"] #sec-abonnements .sad-table tr {
background: #131B2B;
border-color: #2A3346;
}
body[data-theme="dark"] #sec-inscriptions .sad-table td,
body[data-theme="dark"] #sec-clients .clt-table td,
body[data-theme="dark"] #sec-abonnements .sad-table td {
color: #E5E7EB;
}
/* Séparateurs internes entre cellules (titre / date / actions) */
body[data-theme="dark"] #sec-inscriptions .sad-table td:nth-child(2),
body[data-theme="dark"] #sec-inscriptions .sad-table td:nth-child(9),
body[data-theme="dark"] #sec-clients .clt-table td:nth-child(2),
body[data-theme="dark"] #sec-abonnements .sad-table td:nth-child(1),
body[data-theme="dark"] #sec-abonnements .sad-table td:nth-child(7) {
border-color: #1F2937 !important;
}
}
@media (max-width: 400px) {
#abo-stats-row { grid-template-columns: 1fr !important; }
}
/* ============================================================
PATRON — Activité équipe (cartes cliquables + modal détails)
============================================================ */
.pat-emp-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
margin-bottom: 8px;
background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
border: 1px solid #E2E8F0;
border-radius: 14px;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
position: relative;
}
.pat-emp-row:hover {
transform: translateY(-1px);
border-color: #C7D2E0;
box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .28);
}
.pat-emp-row:active { transform: translateY(0); }
.pat-emp-dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .14);
}
.pat-emp-avatar {
width: 38px; height: 38px;
border-radius: 12px;
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
color: #0077B6;
font-weight: 700; font-size: 13px;
letter-spacing: .02em;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
border: 1px solid #DBE7F5;
}
.pat-emp-meta {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.pat-emp-name {
font-size: 13px; font-weight: 700; color: #0F172A;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
letter-spacing: -.01em;
}
.pat-emp-sub {
font-size: 10px; color: #94A3B8;
display: flex; align-items: center; gap: 6px;
}
.pat-emp-ca {
text-align: right; flex-shrink: 0;
display: flex; flex-direction: column; gap: 2px;
min-width: 80px;
}
.pat-emp-net {
font-size: 13px; font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
.pat-emp-brut {
font-size: 9px; color: #94A3B8;
font-variant-numeric: tabular-nums;
}
.pat-emp-status {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
}
.pat-emp-chev {
color: #CBD5E1;
flex-shrink: 0;
transition: transform .16s ease, color .16s ease;
}
.pat-emp-row:hover .pat-emp-chev {
color: #0077B6;
transform: translateX(2px);
}
/* ── Modal détails employé ───────────────────────────────── */
.pat-emp-modal-ov {
display: none;
position: fixed; inset: 0;
background: rgba(15, 23, 42, .58);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 9999;
align-items: flex-start; justify-content: center;
padding: 32px 16px;
overflow-y: auto;
}
.pat-emp-modal-ov.open { display: flex !important; }
.pat-emp-modal-box {
width: 100%; max-width: 560px;
background: #FFFFFF;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .32);
animation: patEmpIn .28s cubic-bezier(.2, .8, .25, 1);
}
@keyframes patEmpIn {
from { opacity: 0; transform: translateY(16px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.pat-emp-modal-head {
display: flex; align-items: flex-start; gap: 12px;
padding: 20px 22px 16px;
border-bottom: 1px solid #F1F5F9;
position: sticky; top: 0;
background: #FFFFFF;
z-index: 2;
}
.pat-emp-modal-id {
flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0;
}
.pat-emp-modal-avatar {
width: 48px; height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
color: #0077B6;
font-weight: 800; font-size: 16px;
display: flex; align-items: center; justify-content: center;
border: 1px solid #BFDBFE;
flex-shrink: 0;
}
.pat-emp-modal-titles { min-width: 0; }
.pat-emp-modal-name {
font-size: 17px; font-weight: 800; color: #0F172A;
letter-spacing: -.015em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pat-emp-modal-sub {
font-size: 11px; color: #64748B;
margin-top: 2px;
display: flex; align-items: center; gap: 6px;
}
.pat-emp-modal-body {
padding: 18px 22px 24px;
max-height: calc(92dvh - 110px);
overflow-y: auto;
}
.pat-emp-modal-status-row {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 999px;
margin-bottom: 14px;
}
.pat-emp-modal-status-dot {
width: 8px; height: 8px; border-radius: 50%;
}
.pat-emp-modal-status-txt {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em;
}
.pat-emp-modal-hero {
background: linear-gradient(135deg, #0077B6 0%, #023E8A 100%);
color: #FFFFFF;
border-radius: 16px;
padding: 20px 22px;
margin-bottom: 14px;
position: relative;
overflow: hidden;
}
.pat-emp-modal-hero::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .18) 0%, transparent 55%);
pointer-events: none;
}
.pat-emp-modal-hero-label {
font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
opacity: .82;
position: relative;
}
.pat-emp-modal-hero-amt {
font-size: 34px; font-weight: 800;
letter-spacing: -.02em;
margin-top: 6px;
font-variant-numeric: tabular-nums;
position: relative;
}
.pat-emp-modal-hero-meta {
display: flex; gap: 18px; flex-wrap: wrap;
margin-top: 10px;
font-size: 11px; opacity: .9;
position: relative;
}
.pat-emp-modal-hero-meta strong {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.pat-emp-modal-kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 18px;
}
.pat-emp-modal-kpi {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 12px 14px;
text-align: center;
}
.pat-emp-modal-kpi-num {
font-size: 22px; font-weight: 800; color: #0F172A;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
.pat-emp-modal-kpi-lbl {
font-size: 10px; color: #94A3B8;
text-transform: uppercase; letter-spacing: .05em;
margin-top: 2px;
}
.pat-emp-modal-section {
margin-top: 16px;
}
.pat-emp-modal-section-title {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
color: #64748B;
margin-bottom: 8px;
padding-left: 2px;
}
.pat-emp-tx-list {
display: flex; flex-direction: column; gap: 6px;
}
.pat-emp-tx {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: #FFFFFF;
border: 1px solid #EEF2F7;
border-radius: 10px;
transition: border-color .16s ease, background .16s ease;
}
.pat-emp-tx:hover {
border-color: #DBE7F5;
background: #FBFDFF;
}
.pat-emp-tx-ref {
background: #FFFBEB;
border-color: #FEF3C7;
}
.pat-emp-tx-ref:hover {
background: #FEF9E4;
border-color: #FDE68A;
}
.pat-emp-tx-dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
}
.pat-emp-tx-meta {
flex: 1; min-width: 0;
}
.pat-emp-tx-title {
font-size: 12px; font-weight: 700; color: #0F172A;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pat-emp-tx-sub {
font-size: 10px; color: #94A3B8;
margin-top: 1px;
}
.pat-emp-tx-amt {
font-size: 13px; font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
flex-shrink: 0;
}
.pat-emp-empty {
text-align: center;
font-size: 11px; color: #94A3B8;
padding: 16px 0;
font-style: italic;
}
@media (max-width: 480px) {
.pat-emp-modal-box { border-radius: 16px; }
.pat-emp-modal-hero-amt { font-size: 28px; }
.pat-emp-modal-body { padding: 16px 18px 22px; }
.pat-emp-modal-head { padding: 16px 18px 14px; }
}
/* ============================================================
PATRON — Tableau de bord (passe éditoriale)
Scope: #pat-sec-dashboard — overrides scope isolated from admin
============================================================ */
#pat-sec-dashboard {
padding: 4px 2px 32px;
}
#pat-sec-dashboard .sad-page-header {
position: relative;
padding: 26px 28px 22px;
margin-bottom: 22px;
border-radius: 22px;
background:
radial-gradient(circle at 100% 0%, rgba(0, 119, 182, .10) 0%, transparent 55%),
radial-gradient(circle at 0% 100%, rgba(245, 158, 11, .08) 0%, transparent 50%),
linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
border: 1px solid #E6EAF0;
box-shadow: 0 1px 0 rgba(15, 23, 42, .02), 0 24px 48px -32px rgba(15, 23, 42, .12);
overflow: hidden;
}
#pat-sec-dashboard .sad-page-header::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, #0077B6 0%, #023E8A 45%, #F59E0B 100%);
height: 3px;
width: 100%;
top: 0; bottom: auto;
}
#pat-sec-dashboard .sad-page-title {
font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
font-size: 30px;
font-weight: 800;
letter-spacing: -.025em;
color: #0B1220;
line-height: 1.1;
background: linear-gradient(135deg, #0B1220 0%, #0077B6 85%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#pat-sec-dashboard .sad-page-sub {
font-size: 12px;
font-weight: 600;
color: #64748B;
text-transform: capitalize;
margin-top: 6px;
letter-spacing: .01em;
display: inline-flex;
align-items: center;
gap: 8px;
}
#pat-sec-dashboard .sad-page-sub::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .16);
animation: patDashPulse 2.4s ease-in-out infinite;
}
@keyframes patDashPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .55; transform: scale(1.18); }
}
/* ── KPI grid ── */
#pat-sec-dashboard .adm-kpi-grid {
gap: 16px;
margin-bottom: 22px;
}
#pat-sec-dashboard .adm-kpi-card {
position: relative;
padding: 20px 22px 18px;
border-radius: 18px;
border: 1px solid #E6EAF0;
border-top: 0;
background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
box-shadow:
0 1px 0 rgba(15, 23, 42, .02),
0 16px 32px -24px rgba(15, 23, 42, .14);
overflow: hidden;
transition: transform .2s cubic-bezier(.2,.8,.25,1),
box-shadow .2s cubic-bezier(.2,.8,.25,1),
border-color .2s ease;
}
#pat-sec-dashboard .adm-kpi-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: currentColor;
opacity: .9;
}
#pat-sec-dashboard .adm-kpi-card::after {
content: '';
position: absolute;
top: -40%; right: -30%;
width: 180px; height: 180px;
background: radial-gradient(circle, currentColor 0%, transparent 65%);
opacity: .05;
pointer-events: none;
transition: opacity .3s ease;
}
#pat-sec-dashboard .adm-kpi-card:hover {
transform: translateY(-3px);
box-shadow:
0 1px 0 rgba(15, 23, 42, .03),
0 28px 48px -24px rgba(15, 23, 42, .22);
border-color: #D7DEE8;
}
#pat-sec-dashboard .adm-kpi-card:hover::after { opacity: .09; }
#pat-sec-dashboard .adm-kpi-blue { color: #0077B6; }
#pat-sec-dashboard .adm-kpi-green { color: #10B981; }
#pat-sec-dashboard .adm-kpi-orange { color: #F59E0B; }
#pat-sec-dashboard .adm-kpi-red { color: #EF4444; }
#pat-sec-dashboard .adm-kpi-header { margin-bottom: 14px; }
#pat-sec-dashboard .adm-kpi-lbl {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .11em;
color: #64748B;
}
#pat-sec-dashboard .adm-kpi-icon {
width: 38px; height: 38px;
border-radius: 11px;
background: linear-gradient(135deg, currentColor 0%, currentColor 100%);
color: currentColor;
position: relative;
box-shadow: 0 6px 14px -6px currentColor;
}
#pat-sec-dashboard .adm-kpi-blue .adm-kpi-icon { background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); color: #0077B6; }
#pat-sec-dashboard .adm-kpi-green .adm-kpi-icon { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); color: #10B981; }
#pat-sec-dashboard .adm-kpi-orange .adm-kpi-icon { background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); color: #F59E0B; }
#pat-sec-dashboard .adm-kpi-red .adm-kpi-icon { background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%); color: #EF4444; }
#pat-sec-dashboard .adm-kpi-val {
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 38px;
font-weight: 800;
letter-spacing: -.025em;
line-height: 1;
margin-bottom: 8px;
font-variant-numeric: tabular-nums;
color: #0B1220;
}
#pat-sec-dashboard .adm-kpi-blue .adm-kpi-val,
#pat-sec-dashboard .adm-kpi-green .adm-kpi-val,
#pat-sec-dashboard .adm-kpi-orange .adm-kpi-val,
#pat-sec-dashboard .adm-kpi-red .adm-kpi-val {
color: #0B1220;
}
#pat-sec-dashboard .adm-kpi-trend {
font-size: 11px;
color: #94A3B8;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
}
#pat-sec-dashboard .adm-kpi-spark {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed #EEF2F7;
}
/* ── Charts row ── */
#pat-sec-dashboard .adm-charts-row {
gap: 16px;
margin-bottom: 22px;
}
#pat-sec-dashboard .adm-chart-card {
padding: 22px 24px;
border-radius: 18px;
border: 1px solid #E6EAF0;
background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
box-shadow:
0 1px 0 rgba(15, 23, 42, .02),
0 16px 32px -28px rgba(15, 23, 42, .14);
transition: box-shadow .2s ease, border-color .2s ease;
}
#pat-sec-dashboard .adm-chart-card:hover {
border-color: #D7DEE8;
box-shadow:
0 1px 0 rgba(15, 23, 42, .03),
0 24px 40px -24px rgba(15, 23, 42, .18);
}
#pat-sec-dashboard .adm-chart-head { margin-bottom: 18px; }
#pat-sec-dashboard .adm-chart-title {
font-family: 'Poppins', 'Inter', sans-serif;
font-size: 16px;
font-weight: 800;
color: #0B1220;
letter-spacing: -.015em;
}
#pat-sec-dashboard .adm-chart-sub {
font-size: 10px;
color: #94A3B8;
letter-spacing: .09em;
margin-top: 4px;
font-weight: 600;
}
#pat-sec-dashboard .adm-chart-badge {
background: linear-gradient(135deg, #0B1220 0%, #0077B6 100%);
font-size: 11px;
font-weight: 700;
border-radius: 999px;
padding: 6px 12px;
box-shadow: 0 6px 14px -8px rgba(0, 119, 182, .45);
font-variant-numeric: tabular-nums;
}
/* ── Bottom row ── */
#pat-sec-dashboard .adm-bottom-row {
gap: 16px;
}
#pat-sec-dashboard .adm-card {
padding: 20px 22px;
border-radius: 18px;
border: 1px solid #E6EAF0;
background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
box-shadow:
0 1px 0 rgba(15, 23, 42, .02),
0 16px 32px -28px rgba(15, 23, 42, .12);
transition: box-shadow .2s ease, border-color .2s ease;
}
#pat-sec-dashboard .adm-card:hover {
border-color: #D7DEE8;
box-shadow:
0 1px 0 rgba(15, 23, 42, .03),
0 24px 40px -24px rgba(15, 23, 42, .18);
}
#pat-sec-dashboard .adm-card-head {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .11em;
color: #64748B;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #EEF2F7;
display: flex;
align-items: center;
gap: 8px;
}
#pat-sec-dashboard .adm-card-head::before {
content: '';
width: 4px; height: 14px;
border-radius: 2px;
background: linear-gradient(180deg, #0077B6 0%, #F59E0B 100%);
}
#pat-sec-dashboard .adm-activity-item {
padding: 10px 2px;
border-bottom: 1px solid #F1F5F9;
font-size: 12px;
transition: background .16s ease;
}
#pat-sec-dashboard .adm-activity-item:hover {
background: #FBFCFE;
}
#pat-sec-dashboard .adm-activity-name {
font-weight: 700;
color: #0F172A;
letter-spacing: -.005em;
}
#pat-sec-dashboard .adm-activity-meta {
color: #94A3B8;
font-size: 10px;
}
/* ── Responsive ── */
@media (max-width: 900px) {
#pat-sec-dashboard .adm-kpi-grid { grid-template-columns: repeat(2, 1fr); }
#pat-sec-dashboard .adm-charts-row { grid-template-columns: 1fr; }
#pat-sec-dashboard .adm-bottom-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
#pat-sec-dashboard .sad-page-header { padding: 20px 20px 18px; border-radius: 18px; }
#pat-sec-dashboard .sad-page-title { font-size: 24px; }
#pat-sec-dashboard .adm-kpi-grid { grid-template-columns: 1fr; gap: 12px; }
#pat-sec-dashboard .adm-kpi-val { font-size: 32px; }
#pat-sec-dashboard .adm-chart-card,
#pat-sec-dashboard .adm-card { padding: 18px 18px; }
}
/* ═══════════════════════════════════════════════════════════════
Admin HERO — Ruixen-inspired (éditorial + onglets animés violet)
═══════════════════════════════════════════════════════════════ */
:root {
/* Accent RabidPOS — or (même teinte que le wordmark POS) */
--adm-purple: #D4AF37;
--adm-purple-dim: #A8891F;
--adm-purple-glow: rgba(212, 175, 55, 0.40);
--adm-purple-soft: rgba(212, 175, 55, 0.12);
}
/* @property permet d'animer l'angle du conic-gradient (sweep de bordure) */
@property --adm-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
/* Hero wrapper */
.adm-hero {
position: relative;
padding: 44px 0 32px;
text-align: center;
margin-bottom: 24px;
border-bottom: 1px solid var(--sad-border);
}
.adm-hero-eyebrow {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--sad-muted);
padding: 6px 14px;
background: var(--sad-white);
border: 1px solid var(--sad-border);
border-radius: 999px;
margin-bottom: 20px;
}
.adm-hero-title {
font-family: 'Poppins', sans-serif;
font-size: clamp(40px, 6.2vw, 76px);
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1.02;
color: var(--sad-navy);
margin: 0 0 18px;
}
.adm-hero-title em {
font-style: normal;
background: linear-gradient(135deg, var(--adm-purple) 0%, var(--sad-blue) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.adm-hero-sub {
font-family: 'Inter', sans-serif;
font-size: clamp(15px, 1.3vw, 19px);
font-weight: 400;
color: var(--sad-muted);
max-width: 620px;
margin: 0 auto 32px;
letter-spacing: -0.01em;
line-height: 1.5;
}
/* Feature tabs — radial sweep animé sur .selected */
.adm-feat-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 28px;
}
.adm-feat-tab {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 18px 9px 10px;
background: var(--sad-white);
border: 1px solid var(--sad-border);
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 13.5px;
font-weight: 500;
color: var(--sad-navy);
cursor: pointer;
overflow: visible;
transition: color 220ms var(--sad-ease),
background 220ms var(--sad-ease),
border-color 220ms var(--sad-ease),
box-shadow 220ms var(--sad-ease);
}
.adm-feat-tab:hover {
color: var(--adm-purple);
border-color: var(--adm-purple-glow);
box-shadow: 0 4px 14px rgba(163, 105, 255, 0.10);
}
.adm-feat-tab .adm-feat-ico {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 8px;
background: var(--adm-purple-soft);
color: var(--adm-purple);
flex-shrink: 0;
transition: all 220ms var(--sad-ease);
}
.adm-feat-tab .adm-feat-title {
font-weight: 500;
letter-spacing: -0.005em;
}
.adm-feat-tab .adm-feat-badge {
background: var(--sad-red);
color: #fff;
font-size: 10px;
font-weight: 800;
padding: 2px 7px;
border-radius: 999px;
letter-spacing: 0.02em;
}
.adm-feat-tab .adm-feat-badge-warn {
background: var(--sad-amber);
}
/* État sélectionné — fond navy + bordure radial sweep violet */
.adm-feat-tab.selected {
background: var(--sad-navy);
color: #fff;
border-color: transparent;
box-shadow: 0 8px 24px rgba(26, 35, 50, 0.18);
}
.adm-feat-tab.selected .adm-feat-ico {
background: var(--adm-purple-glow);
color: #fff;
}
.adm-feat-tab.selected::before {
content: '';
position: absolute;
inset: -1.5px;
border-radius: inherit;
background: conic-gradient(
from var(--adm-angle),
transparent 0%,
var(--adm-purple) 8%,
var(--adm-purple) 12%,
transparent 30%,
transparent 100%
);
padding: 1.5px;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: adm-border-sweep 3.8s linear infinite;
pointer-events: none;
}
@keyframes adm-border-sweep {
to { --adm-angle: 360deg; }
}
/* Fallback navigateurs sans @property (glow statique pulsé) */
@supports not (background: paint(inline)) {
.adm-feat-tab.selected::before {
display: none;
}
.adm-feat-tab.selected {
box-shadow: 0 0 0 1.5px var(--adm-purple),
0 8px 24px rgba(163, 105, 255, 0.28);
}
}
/* Actions sous les tabs */
.adm-hero-actions {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 4px;
}
.adm-theme-btn {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--sad-border);
background: var(--sad-white);
color: var(--sad-navy);
cursor: pointer;
transition: all 200ms var(--sad-ease);
}
.adm-theme-btn:hover {
border-color: var(--adm-purple);
color: var(--adm-purple);
transform: rotate(15deg);
}
.adm-theme-btn .adm-theme-ico-moon { display: none; }
/* Responsive hero + chart */
@media (max-width: 1024px) {
.adm-hero { padding: 36px 0 26px; }
.adm-hero-title { font-size: clamp(36px, 5.5vw, 56px); }
}
@media (max-width: 768px) {
.adm-hero { padding: 28px 8px 22px; }
.adm-hero-title { font-size: clamp(30px, 7.5vw, 42px); letter-spacing: -0.025em; }
.adm-hero-title br { display: none; }
.adm-hero-sub { font-size: 14.5px; margin-bottom: 22px; padding: 0 8px; }
.adm-feat-tabs { gap: 8px; margin-bottom: 20px; }
.adm-feat-tab { font-size: 12.5px; padding: 7px 14px 7px 8px; }
.adm-feat-tab .adm-feat-ico { width: 26px; height: 26px; }
.adm-feat-tab .adm-feat-title { letter-spacing: -0.01em; }
.adm-hero-eyebrow { font-size: 10px; padding: 5px 12px; margin-bottom: 16px; }
.adm-hero-actions { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 480px) {
.adm-hero-title { font-size: 26px; line-height: 1.1; }
.adm-hero-sub { font-size: 13.5px; margin-bottom: 18px; }
.adm-feat-tab .adm-feat-title { display: none; }
.adm-feat-tab { padding: 8px 12px 8px 10px; border-radius: 999px; }
.adm-feat-tab .adm-feat-badge { margin-left: 4px; }
.adm-feat-tab .adm-feat-ico { width: 24px; height: 24px; }
}
/* Bar chart : hauteur réduite sur mobile */
@media (max-width: 640px) {
.adm-bar-scroll svg { height: 150px !important; }
.adm-bar-scroll::-webkit-scrollbar { height: 8px; }
}
/* ═══════════════════════════════════════════════════════════════
Dark mode — active via
═══════════════════════════════════════════════════════════════ */
body[data-theme="dark"] {
--sad-bg: #0C1220;
--sad-white: #131B2B;
--sad-navy: #F3F4F6;
--sad-text: #E5E7EB;
--sad-muted: #94A3B8;
--sad-border: #2A3346;
--sad-bord-lt: #1F2937;
}
/* Sidebar */
body[data-theme="dark"] .sad-sidebar {
background: #070C1A;
border-right: 1px solid #1F2937;
}
body[data-theme="dark"] .sad-sidebar-logo .sh-logo-wordmark { color: #fff; }
body[data-theme="dark"] .sad-nav-item { color: rgba(255,255,255,.70); }
body[data-theme="dark"] .sad-nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
body[data-theme="dark"] .sad-nav-item.active { color: #fff; background: rgba(212,175,55,.10); border-left-color: var(--sad-gold); }
/* Cards / containers */
body[data-theme="dark"] .adm-kpi-v2,
body[data-theme="dark"] .adm-chart-v2,
body[data-theme="dark"] .adm-card,
body[data-theme="dark"] .sad-table-wrap,
body[data-theme="dark"] .clt-card,
body[data-theme="dark"] .sad-stat,
body[data-theme="dark"] .sad-stat-card {
background: #131B2B;
border-color: #2A3346;
color: var(--sad-text);
}
/* Typographie titres dans cards */
body[data-theme="dark"] .sad-page-title,
body[data-theme="dark"] .adm-chart-title,
body[data-theme="dark"] .adm-card-head,
body[data-theme="dark"] .kpi-val,
body[data-theme="dark"] .sad-stat-val,
body[data-theme="dark"] .adm-kpi-lbl {
color: #F3F4F6;
}
body[data-theme="dark"] .sad-page-sub,
body[data-theme="dark"] .adm-chart-sub,
body[data-theme="dark"] .adm-kpi-trend,
body[data-theme="dark"] .sad-stat-lbl {
color: #94A3B8;
}
/* Feat tabs hero */
body[data-theme="dark"] .adm-feat-tab {
background: #131B2B;
border-color: #2A3346;
color: #E5E7EB;
}
body[data-theme="dark"] .adm-feat-tab:hover {
color: var(--sad-gold);
border-color: rgba(212,175,55,.45);
}
body[data-theme="dark"] .adm-feat-tab.selected {
background: #1F2937;
color: #fff;
border-color: transparent;
}
body[data-theme="dark"] .adm-hero-eyebrow {
background: #131B2B;
border-color: #2A3346;
color: #94A3B8;
}
body[data-theme="dark"] .adm-hero-title { color: #F3F4F6; }
body[data-theme="dark"] .adm-hero-sub { color: #94A3B8; }
/* TABLES — sad-table (Inscriptions, Abonnements) */
body[data-theme="dark"] .sad-table thead {
background: #0F172A;
}
body[data-theme="dark"] .sad-table thead th {
color: #E5E7EB;
border-bottom: 1px solid #2A3346;
}
body[data-theme="dark"] .sad-table tbody td {
color: var(--sad-text);
border-bottom: 1px solid #1F2937;
background: transparent;
}
body[data-theme="dark"] .sad-table tbody tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.018);
}
body[data-theme="dark"] .sad-table tbody tr:hover td {
background: rgba(212, 175, 55, 0.10);
color: #fff;
}
/* TABLES — clt-table (Clients) */
body[data-theme="dark"] .clt-table thead {
background: #0F172A;
}
body[data-theme="dark"] .clt-table th {
color: #E5E7EB;
border-bottom: 1px solid #2A3346;
}
body[data-theme="dark"] .clt-table td {
color: var(--sad-text);
border-bottom: 1px solid #1F2937;
background: transparent;
}
body[data-theme="dark"] .clt-table tbody tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.018);
}
body[data-theme="dark"] .clt-table tr:hover td {
background: rgba(212, 175, 55, 0.10);
color: #fff;
}
body[data-theme="dark"] .clt-client-name { color: #F3F4F6; }
body[data-theme="dark"] .clt-client-type { color: #94A3B8; }
body[data-theme="dark"] .clt-topbar { border-bottom-color: #2A3346; }
body[data-theme="dark"] .clt-filter-bar { border-bottom-color: #2A3346; }
body[data-theme="dark"] .clt-footer { background: #0F172A; color: #94A3B8; border-top-color: #2A3346; }
/* Dropdowns actions clients */
body[data-theme="dark"] .clt-dropdown {
background: #131B2B;
border: 1px solid #2A3346;
box-shadow: 0 10px 40px rgba(0,0,0,.55);
}
body[data-theme="dark"] .clt-dropdown button {
color: #E5E7EB;
border-top: 1px solid #1F2937;
background: transparent;
}
body[data-theme="dark"] .clt-dropdown button:hover { background: rgba(212,175,55,.10); }
body[data-theme="dark"] .clt-dropdown button.clt-dd-danger { color: #FCA5A5; }
body[data-theme="dark"] .clt-dropdown button.clt-dd-danger:hover { background: rgba(239,68,68,.12); }
body[data-theme="dark"] .clt-action-btn {
background: transparent;
color: #94A3B8;
border-color: #2A3346;
}
body[data-theme="dark"] .clt-action-btn:hover {
background: rgba(255,255,255,.05);
color: #F3F4F6;
border-color: var(--sad-gold);
}
/* Search + filter tabs */
body[data-theme="dark"] .sad-search-inp {
background: #0F172A;
border-color: #2A3346;
color: #E5E7EB;
}
body[data-theme="dark"] .sad-search-inp::placeholder { color: #64748B; }
body[data-theme="dark"] .sad-filter-tabs {
background: #131B2B;
border-color: #2A3346;
}
body[data-theme="dark"] .sad-ftab { color: #94A3B8; }
body[data-theme="dark"] .sad-ftab:hover { color: #F3F4F6; background: #1F2937; }
body[data-theme="dark"] .sad-ftab.active { background: var(--sad-blue); color: #fff; }
/* Modal overlays */
body[data-theme="dark"] .sad-modal {
background: #131B2B;
color: var(--sad-text);
border: 1px solid #2A3346;
}
body[data-theme="dark"] .sad-modal-head {
border-bottom-color: #2A3346;
}
body[data-theme="dark"] .sad-modal h3 { color: #F3F4F6; }
body[data-theme="dark"] .sc-input,
body[data-theme="dark"] .sc-label {
color: #E5E7EB;
}
body[data-theme="dark"] .sc-input {
background: #0F172A;
border-color: #2A3346;
}
/* Theme toggle icons */
body[data-theme="dark"] .adm-theme-btn .adm-theme-ico-sun { display: none; }
body[data-theme="dark"] .adm-theme-btn .adm-theme-ico-moon { display: inline; }
body[data-theme="dark"] .adm-theme-btn {
background: #131B2B;
border-color: #2A3346;
color: #F3F4F6;
}
body[data-theme="dark"] .adm-refresh-btn {
background: #131B2B;
border-color: #2A3346;
color: #E5E7EB;
}
body[data-theme="dark"] .adm-refresh-btn:hover { border-color: var(--sad-gold); color: var(--sad-gold); }
/* Badges — pastel backgrounds retuned for dark bg (better contrast, same hue) */
body[data-theme="dark"] .sad-badge-pending { background: rgba(251,191,36,.18); color: #FCD34D; }
body[data-theme="dark"] .sad-badge-approved { background: rgba(59,130,246,.18); color: #93C5FD; }
body[data-theme="dark"] .sad-badge-rejected { background: rgba(239,68,68,.18); color: #FCA5A5; }
body[data-theme="dark"] .sad-badge-active { background: rgba(16,185,129,.18); color: #6EE7B7; }
body[data-theme="dark"] .sad-badge-pending_onboarding { background: rgba(139,92,246,.18); color: #C4B5FD; }
body[data-theme="dark"] .sad-badge-suspended { background: rgba(148,163,184,.15); color: #CBD5E1; }
/* Action buttons (Inscriptions : Voir / Approuver / Rejeter) */
body[data-theme="dark"] .sad-btn-view {
background: transparent;
color: #93C5FD;
border-color: #2A3346;
}
body[data-theme="dark"] .sad-btn-view:hover {
background: rgba(59,130,246,.12);
border-color: #3B82F6;
}
body[data-theme="dark"] .sad-btn-approve { background: var(--sad-blue); color: #fff; }
body[data-theme="dark"] .sad-btn-approve:hover { background: var(--sad-blue-dk); }
body[data-theme="dark"] .sad-btn-reject {
background: transparent;
color: #FCA5A5;
border-color: rgba(252,165,165,.45);
}
body[data-theme="dark"] .sad-btn-reject:hover { background: rgba(239,68,68,.14); }
/* Bulk bar (barre sélection multiple) */
body[data-theme="dark"] .sad-bulk-bar {
background: #1F2937;
color: #F3F4F6;
border: 1px solid #2A3346;
}
body[data-theme="dark"] .sad-bulk-cancel {
border-color: rgba(255,255,255,.22);
color: rgba(255,255,255,.80);
}
/* Empty / chargement cells */
body[data-theme="dark"] .sad-empty { color: #94A3B8; }
/* Sortable columns hover */
body[data-theme="dark"] .sad-table th.sortable:hover,
body[data-theme="dark"] .clt-table th.sortable:hover { color: #fff; }
/* Modal — detail rows + grid */
body[data-theme="dark"] .sad-detail-row { border-bottom-color: #1F2937; }
body[data-theme="dark"] .sad-detail-lbl { color: #94A3B8; }
body[data-theme="dark"] .sad-detail-val { color: #F3F4F6; }
body[data-theme="dark"] .sad-modal-close {
background: transparent;
color: #94A3B8;
border-color: #2A3346;
}
body[data-theme="dark"] .sad-modal-close:hover {
background: #1F2937;
color: #F3F4F6;
}
body[data-theme="dark"] .sad-modal-head {
background: #131B2B;
border-bottom-color: #2A3346;
}
/* Clients — suspended counter badge inside filter tab (inline bg #EF4444 is fine) */
body[data-theme="dark"] #cli-suspended-count { color: #fff; }
/* Abonnements — bloc tarifs (override inline light styles via attribute selectors) */
body[data-theme="dark"] #sec-abonnements > div[style*="background:#F8FAFC"] {
background: #0F172A !important;
border-color: #2A3346 !important;
}
body[data-theme="dark"] #sec-abonnements [style*="color:#1A2332"] { color: #F3F4F6 !important; }
body[data-theme="dark"] #sec-abonnements [style*="color:#64748B"] { color: #94A3B8 !important; }
body[data-theme="dark"] #sec-abonnements input[type="number"] {
background: #131B2B !important;
border-color: #2A3346 !important;
color: #F3F4F6 !important;
}
/* Section titles / subtitles inside .clt-card header (non couverts par .sad-page-*) */
body[data-theme="dark"] .clt-card .sad-page-title { color: #F3F4F6; }
body[data-theme="dark"] .clt-card .sad-page-sub { color: #94A3B8; }
/* ═══════════════════════════════════════════════════════════════
Bar chart SCROLLABLE + BorderBeam (dillionverma-inspired)
═══════════════════════════════════════════════════════════════ */
.adm-bar-scroll {
position: relative;
overflow-x: scroll;
overflow-y: visible;
padding: 2px 0 10px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(212,175,55,.55) rgba(26,35,50,.08);
scroll-behavior: smooth;
max-width: 100%;
}
.adm-bar-scroll::-webkit-scrollbar { height: 10px; -webkit-appearance: none; }
.adm-bar-scroll::-webkit-scrollbar-track {
background: rgba(26,35,50,.08);
border-radius: 6px;
}
.adm-bar-scroll::-webkit-scrollbar-thumb {
background: rgba(212,175,55,.55);
border-radius: 6px;
border: 2px solid transparent;
background-clip: padding-box;
}
.adm-bar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,.85); background-clip: padding-box; }
body[data-theme="dark"] .adm-bar-scroll {
scrollbar-color: rgba(212,175,55,.60) rgba(255,255,255,.06);
color: #E5E7EB;
}
body[data-theme="dark"] .adm-bar-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }
body[data-theme="dark"] .adm-bar-scroll::-webkit-scrollbar-thumb { background: rgba(212,175,55,.55); background-clip: padding-box; }
body[data-theme="dark"] .adm-bar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,.85); background-clip: padding-box; }
/* Hint texte scroll discret si overflow */
.adm-bar-inner { color: var(--sad-navy); }
body[data-theme="dark"] .adm-bar-inner { color: #E5E7EB; }
/* ────────────────────────────────────────────────────────────
BorderBeam — ligne lumineuse qui parcourt la bordure de la card
Technique: ::before = bordure transparente masquée (padding-box XOR border-box)
::after = gradient suivant un offset-path rectangulaire
──────────────────────────────────────────────────────────── */
.adm-chart-beam {
position: relative;
isolation: isolate;
}
.adm-chart-beam::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border: 1.5px solid transparent;
pointer-events: none;
z-index: 1;
-webkit-mask:
linear-gradient(transparent, transparent) padding-box,
linear-gradient(#000, #000);
mask:
linear-gradient(transparent, transparent) padding-box,
linear-gradient(#000, #000);
-webkit-mask-composite: source-in, xor;
mask-composite: intersect;
}
.adm-chart-beam::after {
content: '';
position: absolute;
aspect-ratio: 1;
width: 200px;
border-radius: inherit;
background: linear-gradient(to left, #D4AF37, #0077B6, transparent);
offset-anchor: 90% 50%;
offset-path: rect(0 auto auto 0 round 200px);
animation: adm-beam-travel 14s linear infinite;
pointer-events: none;
z-index: 1;
opacity: .85;
}
@keyframes adm-beam-travel {
to { offset-distance: 100%; }
}
/* S'assurer que le contenu reste au-dessus du beam */
.adm-chart-beam > * { position: relative; z-index: 2; }
/* Le beam est plus visible en dark mode */
body[data-theme="dark"] .adm-chart-beam::after {
background: linear-gradient(to left, #E6C158, #3B9EE4, transparent);
opacity: 1;
filter: blur(0.5px);
}
/* Fallback navigateurs sans offset-path (Firefox < 131) : glow statique doux */
@supports not (offset-path: rect(0 auto auto 0 round 20px)) {
.adm-chart-beam::after { display: none; }
.adm-chart-beam {
box-shadow: 0 0 0 1px rgba(212,175,55,.18), 0 8px 32px rgba(212,175,55,.08);
}
}
/* Aperçu QR cliquable dans le modal édition boutique */
#eb-qr-wave-preview img,
#eb-qr-om-preview img { cursor: zoom-in; transition: transform .15s ease; -webkit-tap-highlight-color: transparent; }
#eb-qr-wave-preview img:hover,
#eb-qr-om-preview img:hover { transform: scale(1.03); }
/* Overlay plein écran zoom QR (côté patron — aperçu) */
.qr-zoom-overlay {
display: none;
position: fixed; inset: 0; z-index: 99999;
background: rgba(2, 8, 23, 0.92);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
align-items: center; justify-content: center;
padding: 20px;
animation: qr-zoom-fade .18s ease-out;
}
.qr-zoom-overlay.open { display: flex; }
@keyframes qr-zoom-fade { from { opacity: 0; } to { opacity: 1; } }
.qr-zoom-inner {
display: flex; flex-direction: column; align-items: center; gap: 14px;
max-width: 95vw; max-height: 95vh;
animation: qr-zoom-pop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes qr-zoom-pop {
from { transform: scale(0.85); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.qr-zoom-img {
width: min(85vmin, 680px); height: min(85vmin, 680px);
max-width: 95vw; max-height: 80vh;
object-fit: contain; background: #fff;
border-radius: 20px; padding: 18px;
box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.qr-zoom-hint {
font-size: 13px; color: #94A3B8; text-align: center; max-width: 90vw;
}
.qr-zoom-close {
position: fixed; top: 16px; right: 16px; z-index: 1;
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s ease;
-webkit-tap-highlight-color: transparent;
}
.qr-zoom-close:hover, .qr-zoom-close:focus {
background: rgba(255,255,255,.28); outline: none;
}
@media (max-width: 600px) {
.qr-zoom-img { width: 92vw; height: 92vw; padding: 12px; }
.qr-zoom-close { top: 12px; right: 12px; width: 40px; height: 40px; }
}
/* ============================================================
Support intégré (Chantier 5 — rabidpos-patron)
============================================================ */
.nav-count-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 6px; margin-left: 6px;
border-radius: 10px; background: #EF4444; color: #fff;
font-size: 11px; font-weight: 700; line-height: 1;
}
/* Bandeau contact rapide */
.sup-contact-strip {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
margin-bottom: 24px;
}
.sup-contact-card {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px; border-radius: 14px;
background: #fff; border: 1px solid var(--sc-bord, #E2E8F0);
transition: transform .15s ease, box-shadow .15s ease;
}
.sup-contact-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.sup-contact-ico {
width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
}
.sup-contact-wa .sup-contact-ico { background: #DCFCE7; color: #16A34A; }
.sup-contact-tel .sup-contact-ico { background: #DBEAFE; color: #2563EB; }
.sup-contact-hours .sup-contact-ico { background: #FEF3C7; color: #D97706; }
.sup-contact-lbl {
font-size: 11px; font-weight: 700; color: #64748B;
text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px;
}
.sup-contact-val {
display: block; font-size: 15px; font-weight: 700; color: #1A2332;
text-decoration: none; word-break: break-all;
}
a.sup-contact-val:hover { color: #2563EB; text-decoration: underline; }
/* Grille 2 colonnes : formulaire + historique */
.sup-two-col {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
/* Carte formulaire */
.sup-form-card, .sup-list-card {
background: #fff; border-radius: 14px;
border: 1px solid var(--sc-bord, #E2E8F0);
padding: 22px; min-width: 0;
}
.sup-form-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px;
}
.sup-form-title {
font-size: 15px; font-weight: 800; color: #1A2332;
}
.sup-form-steps { display: flex; gap: 6px; align-items: center; }
.sup-step {
width: 26px; height: 26px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
background: #F1F5F9; color: #94A3B8;
transition: all .2s ease;
}
.sup-step.active { background: #2563EB; color: #fff; transform: scale(1.08); }
.sup-step.done { background: #16A34A; color: #fff; }
.sup-step-panel { display: none; animation: supFadeIn .25s ease; }
.sup-step-panel.active { display: block; }
@keyframes supFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.sup-step-lbl {
font-size: 13px; font-weight: 700; color: #1A2332; margin-bottom: 12px;
}
.sup-hint {
font-size: 12px; color: #94A3B8; margin-top: 6px;
}
/* Grille catégories */
.sup-cat-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.sup-cat {
display: flex; align-items: center; gap: 10px;
padding: 14px 14px; border-radius: 12px;
background: #F8FAFC; border: 1.5px solid transparent;
color: #1A2332; font-size: 13px; font-weight: 600;
text-align: left; cursor: pointer;
transition: all .15s ease;
}
.sup-cat:hover { background: #EFF6FF; border-color: #BFDBFE; }
.sup-cat.active { background: #EFF6FF; border-color: #2563EB; color: #1D4ED8; }
.sup-cat svg { flex: 0 0 20px; color: inherit; }
/* Récap étape 4 */
.sup-recap {
background: #F8FAFC; border-radius: 12px; padding: 14px 16px;
border: 1px solid var(--sc-bord, #E2E8F0);
}
.sup-recap-row {
display: grid; grid-template-columns: 160px 1fr; gap: 12px;
padding: 8px 0; border-bottom: 1px dashed #E2E8F0; font-size: 13px;
}
.sup-recap-row:last-child { border-bottom: none; }
.sup-recap-row span { color: #64748B; font-weight: 600; }
.sup-recap-row strong { color: #1A2332; font-weight: 700; }
.sup-recap-msg em {
display: block; font-style: normal; color: #1A2332;
white-space: pre-wrap; word-break: break-word; line-height: 1.5;
}
/* Navigation étapes */
.sup-form-nav {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 20px; padding-top: 16px;
border-top: 1px solid #F1F5F9;
}
.sup-btn-back, .sup-btn-next, .sup-btn-submit {
border-radius: 10px; padding: 10px 18px;
font-size: 13px; font-weight: 700; cursor: pointer;
border: none; transition: all .15s ease;
}
.sup-btn-back { background: #F1F5F9; color: #64748B; }
.sup-btn-back:hover { background: #E2E8F0; color: #1A2332; }
.sup-btn-next { background: #2563EB; color: #fff; margin-left: auto; }
.sup-btn-next:hover:not(:disabled) { background: #1D4ED8; }
.sup-btn-next:disabled { background: #CBD5E1; cursor: not-allowed; }
.sup-btn-submit { background: #16A34A; color: #fff; margin-left: auto; }
.sup-btn-submit:hover:not(:disabled) { background: #15803D; }
.sup-btn-submit:disabled { background: #CBD5E1; cursor: not-allowed; }
/* Historique tickets */
.sup-list-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.sup-list-title { font-size: 15px; font-weight: 800; color: #1A2332; }
.sup-refresh {
background: #F1F5F9; border: none; border-radius: 8px;
width: 32px; height: 32px; cursor: pointer; color: #64748B;
display: inline-flex; align-items: center; justify-content: center;
}
.sup-refresh:hover { background: #E2E8F0; color: #1A2332; }
.sup-list-body {
display: flex; flex-direction: column; gap: 10px;
max-height: 520px; overflow-y: auto; padding-right: 4px;
}
.sup-empty {
text-align: center; padding: 40px 20px; color: #94A3B8;
font-size: 13px; background: #F8FAFC; border-radius: 10px;
}
.sup-ticket {
padding: 14px 16px; border-radius: 12px;
border: 1px solid var(--sc-bord, #E2E8F0);
cursor: pointer; transition: all .15s ease;
}
.sup-ticket:hover { border-color: #2563EB; box-shadow: 0 4px 12px rgba(37, 99, 235, .08); }
.sup-ticket-top {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 6px;
}
.sup-ticket-subject {
font-size: 13px; font-weight: 700; color: #1A2332;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
overflow: hidden; flex: 1; min-width: 0; padding-right: 8px;
}
.sup-ticket-status {
font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px;
text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.sup-st-open { background: #FEF3C7; color: #D97706; }
.sup-st-in_progress { background: #DBEAFE; color: #2563EB; }
.sup-st-resolved { background: #DCFCE7; color: #16A34A; }
.sup-ticket-meta {
font-size: 11px; color: #94A3B8; display: flex; gap: 10px; align-items: center;
}
.sup-ticket-meta strong { color: #64748B; font-weight: 600; }
.sup-ticket-unread {
width: 7px; height: 7px; background: #EF4444; border-radius: 50%;
display: inline-block;
}
/* Modal conversation */
.sup-modal {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
}
.sup-modal-backdrop {
position: absolute; inset: 0; background: rgba(15, 23, 42, .6);
backdrop-filter: blur(2px);
}
.sup-modal-card {
position: relative; background: #fff; border-radius: 16px;
width: min(560px, 92vw); max-height: 86vh;
display: flex; flex-direction: column;
box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.sup-modal-header {
display: flex; justify-content: space-between; align-items: flex-start;
padding: 20px 22px; border-bottom: 1px solid #F1F5F9;
}
.sup-modal-title { font-size: 16px; font-weight: 800; color: #1A2332; }
.sup-modal-sub { font-size: 12px; color: #64748B; margin-top: 2px; }
.sup-modal-close {
background: none; border: none; font-size: 18px; color: #94A3B8;
cursor: pointer; padding: 4px 8px;
}
.sup-modal-close:hover { color: #1A2332; }
.sup-thread {
flex: 1; overflow-y: auto; padding: 20px 22px;
display: flex; flex-direction: column; gap: 12px;
}
.sup-msg {
max-width: 80%; padding: 10px 14px; border-radius: 12px;
font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.sup-msg-client { align-self: flex-end; background: #2563EB; color: #fff; border-bottom-right-radius: 4px; }
.sup-msg-admin { align-self: flex-start; background: #F1F5F9; color: #1A2332; border-bottom-left-radius: 4px; }
.sup-msg-ts {
font-size: 10px; opacity: .7; margin-top: 4px; display: block;
}
.sup-reply-box {
padding: 16px 22px; border-top: 1px solid #F1F5F9;
display: flex; gap: 10px; align-items: flex-end;
}
.sup-reply-box textarea { flex: 1; resize: vertical; min-height: 60px; }
.sup-reply-box .sup-btn-submit { margin-left: 0; white-space: nowrap; }
/* Responsive */
@media (max-width: 1100px) {
.sup-two-col { grid-template-columns: 1fr; }
.sup-contact-strip { grid-template-columns: 1fr 1fr; }
.sup-contact-hours { grid-column: span 2; }
}
@media (max-width: 680px) {
.sup-contact-strip { grid-template-columns: 1fr; }
.sup-contact-hours { grid-column: auto; }
.sup-cat-grid { grid-template-columns: 1fr; }
.sup-recap-row { grid-template-columns: 1fr; gap: 2px; }
.sup-recap-row span { font-size: 11px; }
.sup-form-card, .sup-list-card { padding: 16px; }
}
/* ============================================================
Admin — Config support (Chantier 5 : édition supportPhone/WA/SLA)
============================================================ */
.sup-cfg-card {
background: #fff; border: 1px solid var(--sad-border, #E2E8F0);
border-radius: 12px; padding: 18px 20px; margin-bottom: 18px;
}
.sup-cfg-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; margin-bottom: 14px;
}
.sup-cfg-title { font-size: 14px; font-weight: 800; color: #1A2332; }
.sup-cfg-sub { font-size: 12px; color: #64748B; margin-top: 3px; }
.sup-cfg-edit {
background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE;
border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 700;
cursor: pointer;
}
.sup-cfg-edit:hover { background: #DBEAFE; }
.sup-cfg-edit.active { background: #2563EB; color: #fff; border-color: #2563EB; }
.sup-cfg-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.sup-cfg-field {
display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.sup-cfg-field > span {
font-size: 11px; font-weight: 700; color: #64748B;
text-transform: uppercase; letter-spacing: .04em;
}
.sup-cfg-field input {
padding: 9px 12px; font-size: 13px; border-radius: 8px;
border: 1px solid #E2E8F0; background: #F8FAFC; color: #1A2332;
transition: all .15s ease;
}
.sup-cfg-field input:not(:disabled) { background: #fff; border-color: #CBD5E1; }
.sup-cfg-field input:focus:not(:disabled) { border-color: #2563EB; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.sup-cfg-actions {
display: flex; align-items: center; gap: 10px; margin-top: 14px;
padding-top: 14px; border-top: 1px solid #F1F5F9;
}
.sup-cfg-cancel {
background: #F1F5F9; color: #64748B; border: none;
border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sup-cfg-cancel:hover { background: #E2E8F0; color: #1A2332; }
.sup-cfg-save {
background: #16A34A; color: #fff; border: none;
border-radius: 8px; padding: 8px 18px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sup-cfg-save:hover { background: #15803D; }
.sup-cfg-msg { font-size: 12px; font-weight: 600; }
.sup-cfg-msg.ok { color: #16A34A; }
.sup-cfg-msg.err { color: #DC2626; }
@media (max-width: 900px) {
.sup-cfg-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.sup-cfg-grid { grid-template-columns: 1fr; }
}
/* ============================================================
Cloche notifications (Chantier 3 — rabidpos-patron)
============================================================ */
.pat-bell {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 10px;
background: #fff; border: 1px solid #E2E8F0; color: #1A2332;
cursor: pointer; transition: all .15s ease;
}
.pat-bell:hover { background: #F8FAFC; border-color: #CBD5E1; }
.pat-bell.nav-locked { opacity: .4; cursor: not-allowed; pointer-events: none; }
.pat-bell-mobile { margin-left: auto; }
.pat-bell-desktop {
position: fixed; top: 16px; right: 20px; z-index: 80;
box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}
.pat-bell-badge {
position: absolute; top: -6px; right: -6px;
min-width: 18px; height: 18px; padding: 0 5px;
background: #EF4444; color: #fff;
border-radius: 10px; border: 2px solid #fff;
font-size: 10px; font-weight: 800; line-height: 14px;
display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 1024px) {
.pat-bell-desktop { display: none; }
}
@media (min-width: 1025px) {
.pat-bell-mobile { display: none; }
}
/* Panel dropdown */
.notif-panel {
position: fixed; top: 64px; right: 20px; z-index: 200;
width: min(380px, 92vw); max-height: 70vh;
background: #fff; border-radius: 14px;
border: 1px solid #E2E8F0;
box-shadow: 0 16px 48px rgba(15, 23, 42, .18);
display: flex; flex-direction: column;
animation: notifSlide .18s ease;
}
@keyframes notifSlide {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1024px) {
.notif-panel { top: 58px; right: 10px; left: 10px; width: auto; max-width: none; }
}
.notif-panel-header {
padding: 14px 16px; border-bottom: 1px solid #F1F5F9;
display: flex; align-items: center; justify-content: space-between;
}
.notif-panel-title { font-size: 14px; font-weight: 800; color: #1A2332; }
.notif-panel-actions { display: flex; gap: 6px; align-items: center; }
.notif-settings-btn {
background: transparent; border: none; padding: 6px; border-radius: 6px;
color: #64748B; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.notif-settings-btn:hover { background: #F1F5F9; color: #1A2332; }
.notif-settings-btn.nav-locked { opacity: .3; cursor: not-allowed; }
.notif-mark-all {
font-size: 11px; font-weight: 700; color: #2563EB;
background: transparent; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.notif-mark-all:hover { background: #EFF6FF; }
.notif-panel-body {
flex: 1; overflow-y: auto; padding: 6px;
max-height: calc(70vh - 58px);
}
.notif-empty {
text-align: center; padding: 40px 20px; color: #94A3B8; font-size: 13px;
}
.notif-item {
display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px;
cursor: pointer; transition: background .15s ease;
align-items: flex-start;
}
.notif-item:hover { background: #F8FAFC; }
.notif-item.unread { background: #EFF6FF; }
.notif-item.unread:hover { background: #DBEAFE; }
.notif-item-ico {
width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
}
.notif-ico-sale { background: #DCFCE7; color: #16A34A; }
.notif-ico-employee { background: #DBEAFE; color: #2563EB; }
.notif-ico-support { background: #FEF3C7; color: #D97706; }
.notif-ico-stock { background: #FEE2E2; color: #DC2626; }
.notif-ico-report { background: #E0E7FF; color: #4F46E5; }
.notif-ico-abo { background: #F3E8FF; color: #7C3AED; }
.notif-ico-debt { background: #FEF3C7; color: #B45309; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
font-size: 13px; font-weight: 700; color: #1A2332; margin-bottom: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-item-msg {
font-size: 12px; color: #64748B; line-height: 1.4;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-item-time { font-size: 11px; color: #94A3B8; margin-top: 4px; }
.notif-item-dot {
width: 8px; height: 8px; flex: 0 0 8px; background: #2563EB; border-radius: 50%;
margin-top: 12px; opacity: 0;
}
.notif-item.unread .notif-item-dot { opacity: 1; }
/* Modal seuils */
.notif-modal {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
}
.notif-modal-backdrop {
position: absolute; inset: 0; background: rgba(15, 23, 42, .6);
}
.notif-modal-card {
position: relative; background: #fff; border-radius: 16px;
width: min(440px, 92vw);
box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.notif-modal-header {
display: flex; justify-content: space-between; align-items: flex-start;
padding: 20px 22px; border-bottom: 1px solid #F1F5F9;
}
.notif-modal-title { font-size: 15px; font-weight: 800; color: #1A2332; }
.notif-modal-sub { font-size: 12px; color: #64748B; margin-top: 2px; }
.notif-modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.notif-modal-foot {
padding: 14px 22px; border-top: 1px solid #F1F5F9;
display: flex; justify-content: flex-end; gap: 10px;
}
/* ────────────────────────────────────────────────────────────────
Rapports journaliers (Chantier 1 — rapport WhatsApp 20h)
──────────────────────────────────────────────────────────── */
/* Carte "Aujourd'hui" */
.rp-today-card {
background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
border: 1px solid #E2E8F0; border-radius: 14px;
padding: 22px; margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.rp-today-header {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 14px; margin-bottom: 18px; padding-bottom: 14px;
border-bottom: 1px solid #EEF2F7;
}
.rp-today-title { font-size: 18px; font-weight: 800; color: #1A2332; line-height: 1.2; }
.rp-today-sub { font-size: 13px; color: #64748B; margin-top: 4px; }
.rp-today-badge {
background: #DBEAFE; color: #1D4ED8;
font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
white-space: nowrap;
}
.rp-today-badge.rp-badge-muted { background: #F1F5F9; color: #64748B; }
.rp-today-body { margin-bottom: 18px; }
.rp-kpi-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px; margin-bottom: 20px;
}
.rp-kpi {
background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 10px;
padding: 12px 14px;
}
.rp-kpi-lbl { font-size: 11px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.rp-kpi-val { font-size: 20px; font-weight: 800; color: #1A2332; line-height: 1.1; }
.rp-kpi-val-big { font-size: 24px; color: #16A34A; }
.rp-kpi-sub { font-size: 12px; font-weight: 600; color: #94A3B8; margin-left: 4px; }
.rp-kpi-muted { opacity: .6; }
.rp-detail-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: 18px;
}
.rp-detail-col { background: #FFFFFF; border: 1px solid #EEF2F7; border-radius: 10px; padding: 14px; }
.rp-detail-title {
font-size: 12px; font-weight: 700; color: #334155;
text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
.rp-mode-list, .rp-top-list { display: flex; flex-direction: column; gap: 6px; }
.rp-mode {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 10px; background: #F8FAFC; border-radius: 6px;
}
.rp-mode-lbl { font-size: 13px; color: #334155; }
.rp-mode-val { font-size: 13px; font-weight: 700; color: #1A2332; }
.rp-top-row {
display: grid; grid-template-columns: 28px 1fr auto auto;
gap: 10px; align-items: center;
padding: 6px 10px; background: #F8FAFC; border-radius: 6px;
}
.rp-top-medal { font-size: 16px; text-align: center; }
.rp-top-nom { font-size: 13px; color: #1A2332; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-top-qty { font-size: 12px; font-weight: 700; color: #2563EB; padding: 2px 8px; background: #DBEAFE; border-radius: 999px; }
.rp-top-ca { font-size: 12px; color: #64748B; min-width: 70px; text-align: right; }
.rp-bout-block { margin-top: 16px; background: #FFFFFF; border: 1px solid #EEF2F7; border-radius: 10px; padding: 14px; }
.rp-bout-row {
display: grid; grid-template-columns: 1fr auto auto; gap: 14px;
padding: 8px 10px; align-items: center; border-bottom: 1px solid #F1F5F9;
}
.rp-bout-row:last-child { border-bottom: 0; }
.rp-bout-nom { font-size: 13px; color: #1A2332; font-weight: 600; }
.rp-bout-ca { font-size: 13px; font-weight: 700; color: #16A34A; }
.rp-bout-tk { font-size: 12px; color: #64748B; padding: 2px 8px; background: #F1F5F9; border-radius: 999px; }
.rp-today-actions {
display: flex; gap: 10px; padding-top: 16px;
border-top: 1px solid #EEF2F7; flex-wrap: wrap;
}
.rp-today-actions .sc-btn { flex: 1; min-width: 160px; }
.rp-skel, .rp-empty, .rp-empty-sm {
color: #94A3B8; font-size: 13px; text-align: center; padding: 24px 12px;
}
.rp-empty-sm { padding: 12px 8px; font-size: 12px; }
/* Historique */
.rp-history-wrap {
background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px;
padding: 20px 22px;
}
.rp-history-title {
font-size: 14px; font-weight: 800; color: #1A2332;
margin-bottom: 14px; text-transform: uppercase; letter-spacing: .04em;
}
.rp-history-list { display: flex; flex-direction: column; gap: 6px; }
.rp-hist-row {
display: grid; grid-template-columns: 1fr auto auto 24px;
gap: 14px; align-items: center;
padding: 12px 14px; background: #F8FAFC; border: 1px solid transparent;
border-radius: 10px; cursor: pointer; transition: all .15s;
}
.rp-hist-row:hover { background: #F1F5F9; border-color: #CBD5E1; transform: translateX(2px); }
.rp-hist-row.rp-hist-today { background: #DBEAFE; border-color: #93C5FD; }
.rp-hist-day { font-size: 14px; font-weight: 700; color: #1A2332; text-transform: capitalize; }
.rp-hist-sub { font-size: 12px; color: #64748B; margin-top: 2px; }
.rp-hist-ca { font-size: 14px; font-weight: 700; color: #16A34A; min-width: 100px; text-align: right; }
.rp-hist-tk { font-size: 12px; color: #64748B; padding: 3px 10px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 999px; }
.rp-hist-arrow { font-size: 20px; color: #CBD5E1; text-align: center; }
/* Modal rapport */
.rp-modal-card { max-width: 640px; }
.rp-modal-pre {
white-space: pre-wrap; word-wrap: break-word;
font-family: 'Inter', monospace; font-size: 13px;
line-height: 1.55; color: #1A2332;
background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px;
padding: 16px; margin: 0; max-height: 60vh; overflow: auto;
}
/* Responsive */
@media (max-width: 1100px) {
.rp-kpi-grid { grid-template-columns: repeat(2, 1fr); }
.rp-detail-row { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
.rp-today-card { padding: 16px; }
.rp-today-header { flex-direction: column; align-items: flex-start; gap: 8px; }
.rp-kpi-grid { gap: 8px; }
.rp-kpi { padding: 10px 12px; }
.rp-kpi-val { font-size: 17px; }
.rp-kpi-val-big { font-size: 20px; }
.rp-today-actions .sc-btn { min-width: 100%; }
.rp-hist-row { grid-template-columns: 1fr auto 20px; }
.rp-hist-tk { display: none; }
.rp-bout-row { grid-template-columns: 1fr auto; }
.rp-bout-tk { display: none; }
}
/* ============================================================
Chantier 2 — Mon abonnement (self-service)
============================================================ */
/* Carte "Plan actuel" */
.sub-current-card {
background: #fff; border: 1px solid #E2E8F0; border-radius: 14px;
padding: 20px; margin-bottom: 18px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sub-cur-header {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 16px;
}
.sub-cur-plan-wrap { display: flex; flex-direction: column; gap: 4px; }
.sub-cur-plan-lbl {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
color: #64748B; font-weight: 600;
}
.sub-cur-plan-name { font-size: 24px; font-weight: 800; letter-spacing: -0.2px; }
.sub-cur-status {
font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
white-space: nowrap;
}
.sub-cur-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.sub-cur-kpi {
background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px;
padding: 12px 14px;
}
.sub-cur-kpi-lbl {
font-size: 11px; color: #64748B; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px;
}
.sub-cur-kpi-val { font-size: 18px; font-weight: 800; color: #0F172A; }
.sub-cur-kpi-sub { font-size: 11px; color: #94A3B8; margin-top: 2px; font-weight: 500; }
.sub-cur-kpi-warn { color: #DC2626 !important; }
.sub-cur-alert {
margin-top: 14px; padding: 10px 14px;
background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 8px;
font-size: 13px; color: #92400E; font-weight: 500;
}
/* Carte "Demande en attente" */
.sub-pending-card {
background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
border: 1px solid #FCD34D; border-radius: 12px;
padding: 18px; margin-bottom: 18px;
}
.sub-pending-badge {
display: inline-block; background: #F59E0B; color: #fff;
font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px;
}
.sub-pending-title { font-size: 16px; font-weight: 700; color: #92400E; margin-bottom: 12px; }
.sub-pending-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px;
margin-bottom: 12px;
}
.sub-pending-grid > div { display: flex; flex-direction: column; gap: 2px; }
.sub-pending-lbl {
font-size: 10px; color: #92400E; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.4px;
}
.sub-pending-val { font-size: 13px; font-weight: 700; color: #78350F; }
.sub-pending-info {
font-size: 12px; color: #78350F; font-style: italic;
padding-top: 10px; border-top: 1px solid rgba(245,158,11,0.3);
}
.sub-pending-actions {
display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px;
}
/* Grille des plans */
.sub-plans-header { margin-bottom: 14px; }
.sub-plans-title { font-size: 18px; font-weight: 700; color: #0F172A; }
.sub-plans-sub { font-size: 13px; color: #64748B; margin-top: 2px; }
.sub-plans-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
margin-bottom: 24px;
}
.sub-plan-card {
position: relative; background: #fff;
border: 1px solid #E2E8F0; border-radius: 12px;
padding: 20px; transition: all 0.2s;
display: flex; flex-direction: column;
}
.sub-plan-card:hover { border-color: #CBD5E1; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.sub-plan-card.sub-plan-pro {
border-color: #2563EB; box-shadow: 0 4px 14px rgba(37,99,235,0.12);
}
.sub-plan-card.sub-plan-current {
background: #F8FAFC; border-style: dashed;
}
.sub-plan-ribbon {
position: absolute; top: -10px; right: 14px;
background: #2563EB; color: #fff; font-size: 10px; font-weight: 800;
padding: 4px 10px; border-radius: 999px;
letter-spacing: 0.6px;
}
.sub-plan-name { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.sub-plan-price { margin-bottom: 14px; }
.sub-plan-amount { font-size: 26px; font-weight: 800; color: #0F172A; }
.sub-plan-per { font-size: 13px; color: #64748B; margin-left: 4px; font-weight: 500; }
.sub-plan-feats {
list-style: none; padding: 0; margin: 0 0 16px; flex: 1;
display: flex; flex-direction: column; gap: 8px;
}
.sub-plan-feats li {
font-size: 13px; color: #334155; display: flex; align-items: flex-start; gap: 8px;
line-height: 1.4;
}
.sub-plan-check {
color: #10B981; font-weight: 800; flex-shrink: 0;
}
.sub-plan-cta { width: 100%; }
/* Historique */
.sub-history-wrap { margin-top: 8px; }
.sub-history-title {
font-size: 14px; font-weight: 700; color: #334155; margin-bottom: 10px;
}
.sub-history-list {
background: #fff; border: 1px solid #E2E8F0; border-radius: 10px;
overflow: hidden;
}
.sub-hist-row {
display: grid; grid-template-columns: 120px 70px 1fr auto;
gap: 12px; align-items: center;
padding: 12px 16px; border-bottom: 1px solid #F1F5F9;
font-size: 13px;
}
.sub-hist-row:last-child { border-bottom: none; }
.sub-hist-date { color: #64748B; font-weight: 500; }
.sub-hist-mode {
display: inline-block; text-align: center;
font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
letter-spacing: 0.4px;
}
.sub-hist-mode-wave { background: #E0F7FF; color: #0369A1; }
.sub-hist-mode-om { background: #FFEDD5; color: #C2410C; }
.sub-hist-mode-virement { background: #E2E8F0; color: #475569; }
.sub-hist-mode-carte { background: #EDE9FE; color: #5B21B6; }
.sub-hist-mode-especes { background: #DCFCE7; color: #15803D; }
.sub-hist-ref {
font-family: 'SF Mono', 'Monaco', monospace; font-size: 12px;
color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sub-hist-amount { font-weight: 800; color: #0F172A; }
.sub-hist-empty {
padding: 24px; text-align: center; color: #94A3B8;
font-size: 13px; font-style: italic;
}
/* Modal de souscription */
.sub-modal-card { max-width: 560px; }
.sub-step { display: flex; flex-direction: column; gap: 18px; }
.sub-modal-section { display: flex; flex-direction: column; gap: 8px; }
.sub-modal-sec-title {
font-size: 12px; font-weight: 700; color: #334155;
text-transform: uppercase; letter-spacing: 0.5px;
}
/* Durée */
.sub-dur-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.sub-dur {
position: relative;
background: #fff; border: 1.5px solid #E2E8F0; border-radius: 10px;
padding: 10px 8px; cursor: pointer; transition: all 0.15s;
font-size: 13px; font-weight: 600; color: #334155;
}
.sub-dur:hover { border-color: #94A3B8; background: #F8FAFC; }
.sub-dur.active {
border-color: #2563EB; background: #EFF6FF; color: #1D4ED8;
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.sub-dur-save {
display: block; margin-top: 3px; font-size: 10px; font-weight: 700;
color: #10B981; letter-spacing: 0.3px;
}
/* Mode */
.sub-mode-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.sub-mode {
display: flex; flex-direction: column; align-items: center; gap: 6px;
background: #fff; border: 1.5px solid #E2E8F0; border-radius: 10px;
padding: 12px 8px; cursor: pointer; transition: all 0.15s;
}
.sub-mode:hover { border-color: #94A3B8; background: #F8FAFC; }
.sub-mode.active {
border-color: #2563EB; background: #EFF6FF;
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.sub-mode-badge {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800;
}
.sub-mode-lbl { font-size: 12px; font-weight: 600; color: #334155; }
/* Total */
.sub-total-box {
display: flex; align-items: center; justify-content: space-between;
background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px;
padding: 14px 18px;
}
.sub-total-lbl {
font-size: 13px; color: #64748B; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.4px;
}
.sub-total-val { font-size: 22px; font-weight: 800; color: #0F172A; }
/* Step 2 — instructions */
.sub-pay-card {
background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px;
padding: 16px;
}
.sub-pay-header {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 12px; margin-bottom: 12px;
border-bottom: 1px solid #E2E8F0;
}
.sub-pay-title { font-size: 14px; font-weight: 700; color: #334155; }
.sub-pay-amount { font-size: 20px; font-weight: 800; color: #0F172A; }
.sub-pay-body { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sub-pay-row {
display: flex; align-items: center; gap: 12px;
background: #fff; border: 1px solid #E2E8F0; border-radius: 10px;
padding: 12px;
}
.sub-pay-badge {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.sub-pay-details { flex: 1; min-width: 0; }
.sub-pay-method { font-size: 12px; color: #64748B; font-weight: 600; margin-bottom: 2px; }
.sub-pay-number {
font-size: 15px; font-weight: 700; color: #0F172A;
font-family: 'SF Mono', 'Monaco', monospace;
overflow: hidden; text-overflow: ellipsis;
}
.sub-pay-action {
padding: 6px 12px; border-radius: 8px; border: 1px solid #2563EB;
background: #EFF6FF; color: #1D4ED8; font-size: 12px; font-weight: 700;
cursor: pointer; text-decoration: none; white-space: nowrap;
}
.sub-pay-action:hover { background: #DBEAFE; }
.sub-pay-instructions {
font-size: 12px; color: #475569; line-height: 1.5;
padding: 10px 12px; background: #fff; border-radius: 8px;
border-left: 3px solid #2563EB;
}
.sub-ref-block { display: flex; flex-direction: column; gap: 6px; }
.sub-ref-block label {
font-size: 12px; font-weight: 700; color: #334155;
text-transform: uppercase; letter-spacing: 0.4px;
}
.sub-ref-hint { font-size: 11px; color: #94A3B8; font-style: italic; }
/* Responsive */
@media (max-width: 1100px) {
.sub-cur-grid { grid-template-columns: repeat(2, 1fr); }
.sub-plans-grid { grid-template-columns: 1fr; gap: 12px; }
.sub-pending-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.sub-current-card { padding: 16px; }
.sub-cur-header { flex-direction: column; align-items: flex-start; gap: 10px; }
.sub-cur-grid { grid-template-columns: 1fr; gap: 8px; }
.sub-pending-grid { grid-template-columns: 1fr; }
.sub-dur-grid { grid-template-columns: repeat(2, 1fr); }
.sub-mode-grid { grid-template-columns: 1fr; }
.sub-mode { flex-direction: row; justify-content: flex-start; padding: 10px 14px; }
.sub-hist-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
.sub-hist-mode, .sub-hist-ref { grid-column: 1; font-size: 11px; }
.sub-hist-date { grid-column: 1; }
.sub-hist-amount { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.sub-pay-header { flex-direction: column; align-items: flex-start; gap: 4px; }
.sub-total-val { font-size: 19px; }
}
/* ── File d'approbation des demandes (admin) ── */
.preq-card {
background: var(--sad-white, #fff); border: 1px solid var(--sad-border, #E2E8F0);
border-radius: 12px; padding: 18px 20px; margin-bottom: 20px;
}
.preq-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 14px;
}
.preq-title { font-size: 14px; font-weight: 700; color: var(--sad-navy, #0F172A); }
.preq-sub { font-size: 12px; color: var(--sad-muted, #64748B); margin-top: 2px; }
.preq-count {
background: #F59E0B; color: #fff; font-size: 13px; font-weight: 800;
padding: 4px 12px; border-radius: 999px; min-width: 28px; text-align: center;
}
.preq-list { display: flex; flex-direction: column; gap: 10px; }
.preq-empty {
padding: 22px; text-align: center; color: var(--sad-muted, #94A3B8);
font-size: 13px; font-style: italic;
}
.preq-row {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 10px;
padding: 12px 14px;
}
.preq-row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.preq-mode-badge {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.preq-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.preq-line1 {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 13px;
}
.preq-client { font-weight: 700; color: #78350F; }
.preq-plan {
font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
background: rgba(245,158,11,0.15); color: #92400E;
}
.preq-line2 {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-size: 12px; color: #78350F;
}
.preq-amount { font-weight: 800; color: #92400E; font-size: 13px; }
.preq-ref { font-family: 'SF Mono', 'Monaco', monospace; color: #92400E; }
.preq-date { color: #A16207; margin-left: auto; }
.preq-line3 { font-size: 11px; color: #78350F; font-style: italic; margin-top: 2px; }
.preq-actions { display: flex; gap: 8px; flex-shrink: 0; }
.preq-btn {
padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
cursor: pointer; border: 1.5px solid transparent;
transition: all 0.15s;
}
.preq-btn-reject { background: #fff; border-color: #F87171; color: #DC2626; }
.preq-btn-reject:hover { background: #FEE2E2; }
.preq-btn-approve { background: #10B981; color: #fff; border-color: #10B981; }
.preq-btn-approve:hover { background: #059669; border-color: #059669; }
@media (max-width: 900px) {
.preq-row { flex-direction: column; align-items: stretch; }
.preq-actions { justify-content: flex-end; }
.preq-date { margin-left: 0; }
}
/* ── Chantier 4 — Dette / Boor (patron) ─────────────────────── */
.dette-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.dette-kpi {
background: #fff;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 14px 16px;
position: relative;
overflow: hidden;
}
.dette-kpi::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 4px; background: #E2E8F0;
}
.dette-kpi-red::before { background: #EF4444; }
.dette-kpi-blue::before { background: #3B82F6; }
.dette-kpi-orange::before { background: #F59E0B; }
.dette-kpi-green::before { background: #10B981; }
.dette-kpi-lbl {
font-size: 11px; font-weight: 700; color: #64748B;
text-transform: uppercase; letter-spacing: 0.4px;
}
.dette-kpi-val {
font-size: 22px; font-weight: 800; color: #1A2332;
margin-top: 4px;
}
.dette-kpi-red .dette-kpi-val { color: #DC2626; }
.dette-kpi-blue .dette-kpi-val { color: #2563EB; }
.dette-kpi-orange .dette-kpi-val { color: #D97706; }
.dette-kpi-green .dette-kpi-val { color: #059669; }
.dette-kpi-sub {
font-size: 11px; color: #94A3B8; margin-top: 2px;
}
.dette-filter-bar {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 12px; align-items: center;
}
.dette-filter-btn {
padding: 7px 14px;
border-radius: 999px;
border: 1.5px solid #E2E8F0;
background: #fff;
color: #64748B;
font-size: 12px; font-weight: 700;
cursor: pointer;
transition: all 0.15s;
}
.dette-filter-btn:hover { border-color: #94A3B8; color: #1A2332; }
.dette-filter-btn.active {
background: #1A2332; border-color: #1A2332; color: #fff;
}
.dette-list {
display: flex; flex-direction: column; gap: 10px;
}
.dette-empty {
padding: 32px; text-align: center; color: #94A3B8;
background: #F8FAFC; border-radius: 12px;
border: 1px dashed #CBD5E1;
font-size: 13px;
}
.dette-row {
display: flex; gap: 16px; align-items: center;
background: #fff;
border: 1px solid #E2E8F0;
border-left: 4px solid #E2E8F0;
border-radius: 10px;
padding: 12px 16px;
cursor: pointer;
transition: all 0.15s;
}
.dette-row:hover {
border-color: #CBD5E1;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.dette-row-open { border-left-color: #3B82F6; }
.dette-row-overdue { border-left-color: #F59E0B; background: #FFFBEB; }
.dette-row-paid { border-left-color: #10B981; opacity: 0.85; }
.dette-row-cancelled { border-left-color: #94A3B8; opacity: 0.65; background: #F8FAFC; }
.dette-row-main { flex: 1; min-width: 0; }
.dette-row-title {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
margin-bottom: 4px;
}
.dette-row-nom {
font-size: 14px; font-weight: 800; color: #1A2332;
}
.dette-row-status {
font-size: 10px; font-weight: 700; padding: 2px 8px;
border-radius: 999px; letter-spacing: 0.3px;
text-transform: uppercase;
}
.dette-row-status-open { background: #DBEAFE; color: #1D4ED8; }
.dette-row-status-overdue { background: #FEF3C7; color: #92400E; }
.dette-row-status-paid { background: #D1FAE5; color: #065F46; }
.dette-row-status-cancelled { background: #E2E8F0; color: #475569; }
.dette-row-meta {
display: flex; flex-wrap: wrap; gap: 10px;
font-size: 11px; color: #64748B;
}
.dette-row-tel { color: #2563EB; font-weight: 600; }
.dette-row-note {
font-style: italic; color: #64748B;
max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dette-row-amount {
text-align: right;
flex-shrink: 0;
}
.dette-row-solde {
font-size: 18px; font-weight: 800; color: #1A2332;
}
.dette-row-paid .dette-row-solde { color: #059669; }
.dette-row-overdue .dette-row-solde { color: #DC2626; }
.dette-row-hint {
font-size: 10px; color: #94A3B8;
text-transform: uppercase; letter-spacing: 0.3px;
margin-top: 2px;
}
/* Formulaire nouvelle dette */
.dette-form-section {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.dette-form-field {
display: flex; flex-direction: column; gap: 6px;
font-size: 12px; font-weight: 700; color: #334155;
}
.dette-form-field-wide { grid-column: 1 / -1; }
.dette-req { color: #DC2626; }
/* Détail — hero */
.dette-detail-hero {
display: flex; gap: 16px; align-items: flex-start;
background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
border: 1px solid #DBEAFE;
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 14px;
}
.dette-detail-hero.overdue {
background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
border-color: #FDE68A;
}
.dette-detail-hero-left { flex: 1; min-width: 0; }
.dette-detail-hero-right {
text-align: right;
display: flex; flex-direction: column; gap: 6px;
flex-shrink: 0;
}
.dette-detail-solde-lbl {
font-size: 11px; font-weight: 700; color: #64748B;
text-transform: uppercase; letter-spacing: 0.4px;
}
.dette-detail-solde-val {
font-size: 30px; font-weight: 800; color: #DC2626;
line-height: 1.1; margin-top: 2px;
}
.dette-detail-hero.overdue .dette-detail-solde-val { color: #B45309; }
.dette-detail-paid {
font-size: 12px; color: #64748B; margin-top: 6px;
}
.dette-detail-tel, .dette-detail-boutique {
font-size: 12px; color: #475569; font-weight: 600;
}
.dette-status-badge {
display: inline-block;
font-size: 11px; font-weight: 700;
padding: 4px 10px; border-radius: 999px;
letter-spacing: 0.3px;
}
.dette-status-badge.open { background: #DBEAFE; color: #1D4ED8; }
.dette-status-badge.overdue { background: #FEF3C7; color: #92400E; }
.dette-status-badge.paid { background: #D1FAE5; color: #065F46; }
.dette-status-badge.cancelled { background: #E2E8F0; color: #475569; }
.dette-detail-note {
background: #FEFCE8; border: 1px solid #FEF08A;
border-radius: 8px; padding: 10px 12px;
font-size: 13px; color: #713F12;
margin-bottom: 14px;
}
.dette-detail-section {
margin-bottom: 14px;
}
.dette-detail-sec-title {
font-size: 12px; font-weight: 800; color: #334155;
text-transform: uppercase; letter-spacing: 0.4px;
margin-bottom: 8px;
}
.dette-items, .dette-paiements {
display: flex; flex-direction: column;
border: 1px solid #E2E8F0; border-radius: 8px;
overflow: hidden;
}
.dette-item, .dette-paiement {
display: flex; gap: 12px; align-items: center;
padding: 8px 12px;
border-top: 1px solid #F1F5F9;
font-size: 13px;
}
.dette-item:first-child, .dette-paiement:first-child { border-top: none; }
.dette-item-nom { flex: 1; color: #1A2332; font-weight: 600; }
.dette-item-qte { color: #64748B; font-size: 12px; }
.dette-item-prix { font-weight: 700; color: #1A2332; }
.dette-paiement-date { color: #64748B; font-size: 11px; flex-shrink: 0; min-width: 110px; }
.dette-paiement-mode {
font-size: 10px; font-weight: 700; padding: 2px 8px;
border-radius: 999px; letter-spacing: 0.3px;
background: #E2E8F0; color: #475569;
}
.dette-paiement-mode-wave { background: #DBEAFE; color: #1D4ED8; }
.dette-paiement-mode-om { background: #FED7AA; color: #9A3412; }
.dette-paiement-mode-carte { background: #E9D5FF; color: #6B21A8; }
.dette-paiement-montant { flex: 1; text-align: right; font-weight: 800; color: #059669; }
.dette-paiement-par { color: #94A3B8; font-size: 11px; }
.dette-pay-form {
display: flex; gap: 8px; align-items: center;
}
.dette-pay-hint {
font-size: 11px; color: #64748B; margin-top: 6px;
}
.dette-pay-hint a {
color: #2563EB; font-weight: 700; text-decoration: none;
}
.dette-pay-hint a:hover { text-decoration: underline; }
@media (max-width: 1100px) {
.dette-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.dette-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.dette-kpi { padding: 10px 12px; }
.dette-kpi-val { font-size: 18px; }
.dette-row { flex-direction: column; align-items: stretch; }
.dette-row-amount { text-align: left; display: flex; align-items: baseline; gap: 8px; }
.dette-form-section { grid-template-columns: 1fr; }
.dette-detail-hero { flex-direction: column; }
.dette-detail-hero-right { text-align: left; flex-direction: row; flex-wrap: wrap; align-items: center; }
.dette-detail-solde-val { font-size: 26px; }
.dette-pay-form { flex-direction: column; align-items: stretch; }
}
/* ============================================================
FOOTER ENRICHI — 4 colonnes (Brand / Produit / Aide / Contact)
Surcharge la layout flex de .sh-footer pour la version .kp-footer
============================================================ */
.sh-footer.kp-footer {
display: block;
padding: 0;
background: linear-gradient(180deg, #F8FAFC 0%, #EEF4FA 100%);
border-top: 1.5px solid rgba(0, 119, 182, 0.12);
}
.kp-footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 44px 48px 20px;
}
.kp-footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
gap: 40px;
align-items: flex-start;
}
.kp-footer-col { min-width: 0; }
.kp-footer-col--brand .sh-footer-logo { margin-bottom: 12px; }
.kp-footer-tag {
margin: 0 0 14px;
font-size: 13.5px;
line-height: 1.55;
color: #475569;
max-width: 320px;
}
.kp-footer-badge-dakar {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px;
border-radius: 999px;
background: #FFFFFF;
border: 1px solid rgba(0, 119, 182, 0.18);
font-size: 12px; font-weight: 600;
color: #0077B6;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.kp-footer-badge-dakar span[aria-hidden] { font-size: 13px; line-height: 1; }
.kp-footer-title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #0F172A;
margin-bottom: 14px;
}
.kp-footer-list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 9px;
}
.kp-footer-list a {
color: #475569;
font-size: 13.5px;
text-decoration: none;
transition: color 0.2s;
}
.kp-footer-list a:hover { color: #0077B6; }
.kp-footer-contact li {
display: flex; align-items: center; gap: 8px;
font-size: 13px;
color: #475569;
}
.kp-footer-contact svg {
flex-shrink: 0;
color: #0077B6;
}
.kp-footer-contact a {
color: #0F172A;
font-weight: 600;
text-decoration: none;
transition: color 0.2s;
}
.kp-footer-contact a:hover { color: #0077B6; }
.kp-footer-bottom {
margin-top: 32px;
padding: 16px 0 0;
border-top: 1px solid rgba(15, 23, 42, 0.08);
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.kp-footer-copy {
font-size: 12px;
color: #64748B;
margin: 0;
}
.kp-footer-legal {
display: flex; align-items: center; gap: 10px;
font-size: 12px;
color: #94A3B8;
}
.kp-footer-legal a {
color: #64748B;
text-decoration: none;
transition: color 0.2s;
}
.kp-footer-legal a:hover { color: #0077B6; }
@media (max-width: 960px) {
.kp-footer-inner { padding: 36px 32px 18px; }
.kp-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px 28px;
}
.kp-footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.kp-footer-inner { padding: 30px 22px 16px; }
.kp-footer-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.kp-footer-tag { max-width: none; }
.kp-footer-bottom {
flex-direction: column;
align-items: flex-start;
text-align: left;
}
}