/* ============================================================
CrediPay — Design System Premium
Palette stricte : #FF0000 | #000000 | #FFFFFF | neutres gris
Inter · Mobile-first · Zéro dégradé · Transitions 200ms
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
/* Alpine.js : masquer les éléments x-cloak avant initialisation */
[x-cloak] { display: none !important; }
/* ── Tokens ───────────────────────────────────────────────── */
:root {
/* Palette stricte */
--red: #FF0000;
--black: #000000;
--white: #FFFFFF;
/* Neutres (variantes de noir) */
--gray-50: #FAFAFA;
--gray-100: #F5F5F5;
--gray-200: #EEEEEE;
--gray-300: #E0E0E0;
--gray-400: #BDBDBD;
--gray-500: #9E9E9E;
--gray-600: #757575;
--gray-700: #424242;
--gray-800: #212121;
--gray-900: #111111;
/* Alias sémantiques */
--page-bg: #F4F2F0;
--text: var(--gray-900);
--text-light: var(--gray-700);
--text-muted: var(--gray-500);
--border: var(--gray-200);
--border-md: var(--gray-300);
/* Rouge décliné — sans dégradé */
--red-light: #FFF0F0;
--red-mid: #FFCCCC;
--red-dark: #CC0000;
--red-deeper: #990000;
/* Compat (variables anciennes → nouvelles) */
--red-glow: rgba(255,0,0,.12);
--green: #16A34A;
--green-light:#DCFCE7;
--yellow: #EAB308;
--yellow-light:#FEF9C3;
--blue: #2563EB;
--blue-light: #DBEAFE;
--purple: #7C3AED;
--purple-light:#EDE9FE;
/* Sidebar */
--sidebar-bg: var(--black);
--sidebar-w: 256px;
/* Ombres (noir pur, jamais colorées) */
--shadow-xs: 0 1px 2px rgba(0,0,0,.06);
--shadow-sm: 0 1px 4px rgba(0,0,0,.09);
--shadow-md: 0 4px 14px rgba(0,0,0,.11);
--shadow-lg: 0 8px 28px rgba(0,0,0,.13);
--shadow-xl: 0 20px 56px rgba(0,0,0,.16);
--shadow-red: 0 4px 18px rgba(255,0,0,.28);
/* Rayons */
--r-xs: 2px;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 18px;
--r-2xl: 24px;
--r-pill: 999px;
/* Transitions */
--ease: cubic-bezier(.4,0,.2,1);
--ease-out: cubic-bezier(0,0,.2,1);
--t-fast: 140ms var(--ease);
--t-base: 220ms var(--ease);
--t-slow: 350ms var(--ease);
}
/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; font-size: 14px; }
body {
font-family: 'Inter','Segoe UI',system-ui,sans-serif;
background: var(--page-bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input,select,textarea { font-family: inherit; }
/* ── Announce bar ─────────────────────────────────────────── */
.jm-announce {
background: var(--black);
color: rgba(255,255,255,.85);
text-align: center;
padding: 8px 16px;
font-size: 12.5px;
letter-spacing: .15px;
font-weight: 500;
}
.jm-announce strong { color: var(--red); }
.jm-announce-inner { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.jm-announce-close { background: none; border: none; color: rgba(255,255,255,.5); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px 8px; transition: color var(--t-fast); flex-shrink: 0; }
.jm-announce-close:hover { color: #fff; }
/* Ticker */
.jm-ticker-wrap { overflow: hidden; white-space: nowrap; flex: 1; }
.jm-ticker-inner { display: inline-flex; gap: 56px; animation: ticker 30s linear infinite; }
.jm-ticker-inner:hover { animation-play-state: paused; }
@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.jm-ticker-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.jm-ticker-item i { color: var(--red); font-size: 11px; }
/* ── Header public ────────────────────────────────────────── */
.jm-header {
background: var(--white);
padding: 12px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1.5px solid var(--red);
transition: box-shadow var(--t-base);
}
.jm-header.scrolled { box-shadow: var(--shadow-md); }
.jm-header-inner { display: flex; align-items: center; gap: 16px; }
/* Logo */
.jm-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
line-height: 0;
/* fallback text style (si jamais ![]()
ne charge pas) */
font-size: 1.65rem;
font-weight: 900;
color: var(--red);
letter-spacing: -1.5px;
white-space: nowrap;
}
.jm-logo img { height: 36px; width: auto; display: block; object-fit: contain; }
.jm-logo span { color: var(--black); }
.jm-logo .dot { color: var(--red); }
/* Barre de recherche — prend tout l'espace disponible */
.jm-search-wrap { position: relative; flex: 1; }
.jm-search {
display: flex;
border: 2px solid var(--red);
border-radius: var(--r-md);
overflow: hidden;
background: var(--white);
transition: border-color var(--t-fast);
}
.jm-search:focus-within { border-color: var(--red); }
.jm-search input {
flex: 1;
border: none;
padding: 11px 16px;
font-size: 14px;
font-weight: 500;
outline: none;
color: var(--text);
min-width: 0;
background: transparent;
}
.jm-search input::placeholder { color: var(--gray-400); font-weight: 400; }
.jm-search button {
background: var(--red);
color: #fff;
border: none;
padding: 11px 22px;
font-size: 13.5px;
font-weight: 700;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 7px;
transition: background var(--t-fast);
white-space: nowrap;
}
.jm-search button:hover { background: var(--red-dark); }
/* Résultats recherche AJAX */
.jm-search-results {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
background: var(--white);
border: 2px solid var(--black);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xl);
z-index: 1100;
max-height: 420px;
overflow-y: auto;
animation: dropIn var(--t-base) both;
}
.jm-search-results.show { display: block; }
@keyframes dropIn {
from { opacity: 0; transform: translateY(-8px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cp-search-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid var(--border);
transition: background var(--t-fast);
cursor: pointer;
text-decoration: none;
color: inherit;
}
.cp-search-item:last-child { border-bottom: none; }
.cp-search-item:hover { background: var(--red-light); }
.cp-search-item img { width: 52px; height: 52px; object-fit: cover; background: var(--gray-100); border-radius: var(--r-sm); flex-shrink: 0; }
.cp-search-info { min-width: 0; flex: 1; }
.cp-search-item .name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-search-item .brand { font-size: 11px; color: var(--text-muted); }
.cp-search-item .price { font-size: 13px; font-weight: 800; color: var(--red); margin-top: 2px; }
.cp-s-kit { display: inline-block; background: var(--black); color: #fff; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 4px; vertical-align: middle; margin-left: 4px; }
.cp-search-empty { padding: 20px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.cp-search-empty i { font-size: 22px; display: block; margin-bottom: 6px; color: var(--gray-400); }
/* skeleton loader */
.cp-search-skel { pointer-events: none; }
.cp-skel-img { width: 52px; height: 52px; border-radius: var(--r-sm); background: linear-gradient(90deg,#eee 25%,#e0e0e0 50%,#eee 75%); background-size: 200% 100%; animation: skelShimmer 1.2s ease-in-out infinite; flex-shrink: 0; }
.cp-skel-line { height: 10px; border-radius: 6px; background: linear-gradient(90deg,#eee 25%,#e0e0e0 50%,#eee 75%); background-size: 200% 100%; animation: skelShimmer 1.2s ease-in-out infinite; margin-bottom: 6px; }
.cp-skel-line.w70 { width: 70%; }
.cp-skel-line.w40 { width: 40%; }
/* Boutons header */
.jm-header-btn {
display: flex;
flex-direction: column;
align-items: center;
color: var(--gray-700);
padding: 6px 10px;
border-radius: var(--r-md);
font-size: 11px;
gap: 2px;
background: transparent;
border: none;
transition: all var(--t-fast);
white-space: nowrap;
flex-shrink: 0;
}
.jm-header-btn:hover { background: var(--red-light); color: var(--red); }
.jm-header-btn i { font-size: 22px; }
.jm-header-btn .label { font-size: 11px; font-weight: 600; }
/* ── Barre catégories ─────────────────────────────────────── */
.jm-cat-bar {
background: var(--red);
position: sticky;
top: 61px;
z-index: 990;
}
.jm-cat-bar-inner { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.jm-cat-bar-inner::-webkit-scrollbar { display: none; }
.jm-cat-link {
color: rgba(255,255,255,.80);
padding: 11px 14px;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
display: flex;
align-items: center;
gap: 5px;
transition: all var(--t-fast);
border-bottom: 3px solid transparent;
position: relative;
}
.jm-cat-link:hover { color: #fff; background: rgba(0,0,0,.15); }
.jm-cat-link.active { color: #fff; border-bottom-color: #fff; font-weight: 700; }
.jm-cat-link.featured { color: #fff; font-weight: 700; }
.jm-all-cat-btn {
background: rgba(0,0,0,.22);
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
gap: 7px;
padding: 11px 16px;
border: none;
font-size: 13px;
white-space: nowrap;
cursor: pointer;
transition: background var(--t-fast);
flex-shrink: 0;
border-right: 1px solid rgba(255,255,255,.15);
}
.jm-all-cat-btn:hover { background: rgba(0,0,0,.35); }
/* ── Mega menu ────────────────────────────────────────────── */
.jm-mega {
display: none;
position: absolute;
top: 100%; left: 0; right: 0;
background: var(--white);
z-index: 989;
box-shadow: var(--shadow-xl);
border-top: 3px solid var(--red);
border-bottom: 2px solid var(--black);
min-height: 300px;
animation: dropIn var(--t-slow) both;
}
.jm-mega.open { display: grid; grid-template-columns: 240px 1fr; }
.jm-mega-left { background: var(--gray-50); border-right: 2px solid var(--black); padding: 8px 0; }
.jm-mega-cat {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
font-size: 13.5px;
color: var(--text-light);
cursor: pointer;
transition: all var(--t-fast);
border-left: 3px solid transparent;
}
.jm-mega-cat i { font-size: 16px; color: var(--gray-400); width: 20px; flex-shrink: 0; transition: color var(--t-fast); }
.jm-mega-cat:hover,
.jm-mega-cat.active { background: var(--red-light); color: var(--red); border-left-color: var(--red); font-weight: 600; }
.jm-mega-cat.active i,
.jm-mega-cat:hover i { color: var(--red); }
.jm-mega-right { padding: 24px 28px; display: none; }
.jm-mega-right.show { display: block; animation: fadeIn .15s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.jm-mega-right h6 { font-weight: 900; color: var(--black); font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px; }
.jm-mega-right a { font-size: 13.5px; color: var(--text-light); padding: 6px 0; display: block; transition: all var(--t-fast); }
.jm-mega-right a:hover { color: var(--red); padding-left: 6px; }
.jm-mega-right .see-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 8px 18px; background: var(--red); color: #fff; border-radius: var(--r-md); font-size: 12.5px; font-weight: 700; transition: background var(--t-fast); }
.jm-mega-right .see-all:hover { background: var(--red-dark); }
/* Overlay */
.jm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 980; }
.jm-overlay.open { display: block; animation: overlayIn .2s; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
/* ── Héros carousel ───────────────────────────────────────── */
.jm-hero-wrap { padding: 10px 0; }
.jm-hero-grid { display: grid; grid-template-columns: 1fr 220px; gap: 10px; align-items: start; }
@media(max-width:767px) { .jm-hero-grid { grid-template-columns: 1fr; } }
/* ── Home grid : hauteur initiale (JS la recalcule selon le ratio de l'image) ── */
.jm-home-grid { grid-template-rows: 360px; }
body.cp-public .jm-home-grid { grid-template-rows: 360px; }
@media(max-width:576px) {
.jm-home-grid,
body.cp-public .jm-home-grid { grid-template-rows: 220px; }
}
.jm-carousel {
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
height: 100%;
}
.jm-carousel .carousel-inner,
.jm-carousel .carousel-item { height: 100%; }
.jm-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; }
.jm-carousel .carousel-control-prev,
.jm-carousel .carousel-control-next { width: 44px; }
.jm-hero-banners { display: flex; flex-direction: column; gap: 10px; height: 100%; }
@media(max-width:767px) { .jm-hero-banners { display: none; } }
.jm-hero-banner { border-radius: var(--r-lg); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-md); flex: 1; }
.jm-hero-banner img { width: 100%; height: 175px; object-fit: cover; transition: transform .4s; display: block; }
.jm-hero-banner:hover img { transform: scale(1.04); }
/* Slide hero avec texte */
.jm-slide { position: relative; height: 100%; display: flex; align-items: stretch; overflow: hidden; }
.jm-slide-bg { position: absolute; inset: 0; z-index: 0; background: #111; }
.jm-slide-bg::after { content: ''; position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,.45); }
.jm-slide-bg img,
.jm-carousel .carousel-item .jm-slide-bg img { width: 100%; height: 100%; object-fit: contain; object-position: center; position: relative; z-index: 1; }
.jm-slide-img-link { display: block; width: 100%; height: 100%; }
.jm-slide-panel { position: relative; z-index: 1; max-width: 480px; padding: 44px 40px 40px; display: flex; flex-direction: column; justify-content: center; }
@media(max-width:576px) { .jm-slide-panel { padding: 24px 18px; } }
.jm-slide-tag { display: inline-flex; align-items: center; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 14px; width: fit-content; }
.jm-slide-h1 { font-size: 2rem; font-weight: 900; color: #fff; line-height: 1.18; letter-spacing: -.5px; margin-bottom: 10px; }
@media(max-width:576px) { .jm-slide-h1 { font-size: 1.3rem; } }
.jm-slide-p { font-size: 13.5px; color: rgba(255,255,255,.8); margin-bottom: 22px; line-height: 1.65; }
.jm-slide-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; padding: 13px 26px; border-radius: var(--r-md); font-size: 14px; font-weight: 700; text-decoration: none; width: fit-content; transition: background var(--t-fast), transform var(--t-fast); }
.jm-slide-btn:hover { background: var(--red-dark); transform: translateY(-1px); color: #fff; }
.jm-slide-prices { position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
@media(max-width:767px) { .jm-slide-prices { display: none; } }
.jm-slide-price-item { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-md); padding: 8px 14px; }
.jm-slide-price-item .spi-name { color: rgba(255,255,255,.7); font-size: 11px; font-weight: 500; }
.jm-slide-price-item .spi-price { color: #fff; font-size: 15px; font-weight: 800; }
/* Carousel indicators */
.jm-carousel .carousel-indicators { margin-bottom: 14px; gap: 6px; }
.jm-carousel .carousel-indicators button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); border: none; transition: all var(--t-base); }
.jm-carousel .carousel-indicators button.active { background: #fff; width: 24px; border-radius: var(--r-pill); }
/* ── Raccourcis catégories — défilement contrôlable ──────── */
.jm-shortcuts {
background: var(--white); margin-bottom: 10px;
border-radius: var(--r-md); box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
overflow: hidden; position: relative;
}
/* Fondu sur les bords gauche/droite */
.jm-shortcuts::before,
.jm-shortcuts::after {
content: ''; position: absolute; top: 0; bottom: 0;
width: 60px; z-index: 2; pointer-events: none;
}
.jm-shortcuts::before { left: 0; background: linear-gradient(to right, #fff 20%, transparent); }
.jm-shortcuts::after { right: 0; background: linear-gradient(to left, #fff 20%, transparent); }
/* Grille défilante */
.jm-shortcuts-grid {
display: flex; flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: grab;
}
.jm-shortcuts-grid::-webkit-scrollbar { display: none; }
.jm-shortcuts-grid.is-dragging { cursor: grabbing; user-select: none; }
@media (max-width: 767px) {
.jm-shortcuts::before,
.jm-shortcuts::after { width: 30px; }
}
/* Boutons navigation */
.jm-shortcuts-nav {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 10; background: #fff; border: 1px solid #ddd;
border-radius: 50%; width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15);
transition: background .2s, color .2s, border-color .2s;
color: #1A1A1A; font-size: 14px; padding: 0;
}
.jm-shortcuts-nav:hover { background: #C8102E; color: #fff; border-color: #C8102E; }
.jm-shortcuts-prev { left: 8px; }
.jm-shortcuts-next { right: 8px; }
@media (max-width: 480px) { .jm-shortcuts-nav { display: none; } }
/* Carte */
.jm-shortcut {
flex: 0 0 203px; width: 203px; height: 203px;
display: flex; align-items: center; justify-content: center;
padding: 8px; background: var(--white);
border-right: 1px solid var(--border);
cursor: pointer; text-decoration: none;
}
.jm-shortcut span { display: none; }
.jm-shortcut i { font-size: 26px; color: var(--red); }
/* Conteneur image */
.jm-shortcut-icon {
width: 100%; aspect-ratio: 1; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
margin: 0; overflow: hidden; background: var(--gray-50);
transition: box-shadow .3s ease;
}
.jm-shortcut:hover .jm-shortcut-icon {
box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
@media (max-width: 480px) {
.jm-shortcut { flex: 0 0 110px; width: 110px; height: 110px; padding: 6px; }
}
/* ── Section générique — PREMIUM ─────────────────────────── */
.jm-section {
background: var(--white);
margin-bottom: 14px;
border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
border: 1px solid var(--border);
}
.jm-section-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
background: var(--gray-50);
position: relative;
}
.jm-section-head::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--red);
border-radius: 0;
}
.jm-section-head h3 {
font-size: 1rem;
font-weight: 900;
color: var(--black);
margin: 0;
display: flex;
align-items: center;
gap: 9px;
letter-spacing: -.2px;
padding-left: 4px;
}
.jm-section-head h3 .dot {
width: 8px;
height: 8px;
background: var(--red);
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(255,0,0,.2);
animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
0%,100% { box-shadow: 0 0 0 3px rgba(255,0,0,.2); }
50% { box-shadow: 0 0 0 6px rgba(255,0,0,.0); }
}
.jm-section-head .see-all {
font-size: 12.5px;
color: var(--red);
font-weight: 700;
padding: 6px 16px;
background: var(--red-light);
border: 1.5px solid var(--red-mid);
border-radius: var(--r-pill);
transition: all var(--t-fast);
white-space: nowrap;
}
.jm-section-head .see-all:hover { background: var(--red); color: #fff; border-color: var(--red); }
.jm-section-body { padding: 12px; }
/* ── Flash Sales ──────────────────────────────────────────── */
.jm-flash-head {
background: var(--red);
padding: 12px 18px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.jm-flash-head h3 { color: #fff; font-size: 1.05rem; font-weight: 900; margin: 0; display: flex; align-items: center; gap: 6px; }
.jm-flash-head h3 i { color: #fff; }
.jm-flash-head .ends { color: rgba(255,255,255,.75); font-size: 12px; }
.jm-countdown { display: flex; align-items: center; gap: 4px; }
.jm-countdown .blk { background: rgba(0,0,0,.3); color: #fff; font-size: 14px; font-weight: 900; padding: 4px 8px; border-radius: var(--r-xs); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.jm-countdown .sep { color: rgba(255,255,255,.7); font-weight: 900; font-size: 16px; }
.jm-flash-head .see-all-flash { margin-left: auto; color: #fff; background: #000; padding: 6px 16px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 700; border: 1px solid #000; transition: background var(--t-fast); }
.jm-flash-head .see-all-flash:hover { background: #1a1a1a; border-color: #1a1a1a; }
/* ── Grille produits ──────────────────────────────────────── */
.jm-prod-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; padding: 8px; }
@media(max-width:1100px) { .jm-prod-grid { grid-template-columns: repeat(4,1fr); } }
@media(max-width:767px) { .jm-prod-grid { grid-template-columns: repeat(2,1fr); gap: 6px; padding: 6px; } }
/* ── Carte produit — PREMIUM ──────────────────────────────── */
.jm-card {
background: var(--white);
display: flex;
flex-direction: column;
border-radius: var(--r-lg);
transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-fast);
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--border);
box-shadow: var(--shadow-xs);
}
.jm-card:hover {
box-shadow: 0 12px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
transform: translateY(-5px);
border-color: var(--gray-300);
z-index: 2;
}
.jm-card-img { position: relative; padding-top: 100%; overflow: hidden; background: #fff; }
.jm-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; transition: transform .45s var(--ease); }
.jm-card:hover .jm-card-img img { transform: scale(1.08); }
/* Ligne rouge en bas de l'image au hover */
.jm-card-img::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: var(--red);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t-base);
}
.jm-card:hover .jm-card-img::after { transform: scaleX(1); }
.jm-card-body { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; }
.jm-card-brand { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 3px; font-weight: 700; }
.jm-card-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.45; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; min-height: 38px; }
.jm-card-price { font-size: 16px; font-weight: 900; color: var(--red); margin-bottom: 2px; line-height: 1; letter-spacing: -.5px; }
.jm-card-credit { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 3px; }
.jm-card-credit i { color: var(--red); font-size: 10px; }
/* Badges produit */
.jm-badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: var(--r-pill); z-index: 2; letter-spacing: .3px; }
.jm-badge-flash { background: var(--red); color: #fff; }
.jm-badge-new { background: var(--black); color: #fff; }
.jm-badge-kit { background: var(--black); color: #fff; }
.jm-badge-off { background: var(--red); color: #fff; }
.jm-badge-rupture { background: var(--gray-400); color: #fff; }
.jm-badge-right { left: auto; right: 8px; }
/* Étoiles */
.jm-stars { color: var(--black); font-size: 11px; margin-bottom: 4px; display: flex; align-items: center; gap: 1px; }
.jm-stars span { color: var(--text-muted); font-size: 10.5px; margin-left: 3px; }
/* Bouton carte */
.jm-card-btn {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--red);
color: #fff;
padding: 9px;
font-size: 12.5px;
font-weight: 700;
border: none;
border-radius: var(--r-md);
transition: background var(--t-fast), transform var(--t-fast);
}
.jm-card-btn:hover { background: var(--red-dark); color: #fff; }
.jm-card-btn:active { transform: scale(.97); }
.jm-card-link { text-decoration: none; color: inherit; display: block; }
.jm-card-add-btn { margin: 0 10px 10px; width: calc(100% - 20px); padding: 9px 12px; border: none; background: var(--black); color: #fff; border-radius: var(--r-md); font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
.jm-card-add-btn:hover { background: var(--red); }
.jm-card-add-btn:active { transform: scale(.97); }
.jm-card-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.03); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.jm-card:hover .jm-card-overlay { opacity: 1; }
.jm-card-overlay span { background: var(--red); color: #fff; padding: 8px 18px; border-radius: var(--r-md); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; box-shadow: var(--shadow-red); }
.jm-rank { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; background: var(--red); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; z-index: 3; }
.jm-stock-bar { height: 4px; background: var(--gray-200); border-radius: var(--r-pill); margin-top: 7px; overflow: hidden; }
.jm-stock-fill { height: 100%; background: var(--red); border-radius: var(--r-pill); }
.cp-new-ribbon { position: absolute; top: 0; right: 0; background: var(--red); color: #fff; font-size: 9.5px; font-weight: 800; padding: 4px 11px; text-transform: uppercase; letter-spacing: .4px; clip-path: polygon(0 0,100% 0,100% 100%,7px 100%); }
.cp-bs-ribbon { position: absolute; top: 8px; left: 8px; background: var(--black); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 5px; z-index: 3; }
/* ── Skeleton loader ──────────────────────────────────────── */
@keyframes pulse {
0%,100% { opacity: 1; }
50% { opacity: .5; }
}
.skeleton { background: var(--gray-200); animation: pulse 1.6s ease-in-out infinite; border-radius: var(--r-xs); }
.skeleton-card { background: var(--white); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.skeleton-img { width: 100%; padding-top: 100%; }
.skeleton-line { height: 10px; margin: 8px 12px; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.h-16 { height: 16px; }
#cat-products-loading { display: none; }
.loading #cat-products-loading { display: grid; }
.loading #cat-products-grid { display: none; }
/* ── Trust strip ─────────────────────────────────────────── */
.jm-trust-strip { display: grid; grid-template-columns: repeat(4,1fr); background: var(--white); border-radius: var(--r-lg); margin-bottom: 10px; box-shadow: var(--shadow-md); border: 1px solid var(--border); overflow: hidden; }
@media(max-width:767px) { .jm-trust-strip { grid-template-columns: repeat(2,1fr); } }
.jm-trust-item { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background var(--t-base); cursor: default; }
.jm-trust-item:hover { background: var(--red-light); }
.jm-trust-item-icon {
width: 48px; height: 48px;
background: linear-gradient(135deg, var(--red), var(--red-dark));
border-radius: var(--r-lg);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(255,0,0,.25);
transition: transform var(--t-base), box-shadow var(--t-base);
}
.jm-trust-item:hover .jm-trust-item-icon {
transform: scale(1.12) rotate(-4deg);
box-shadow: 0 6px 20px rgba(255,0,0,.4);
}
.jm-trust-item-icon i { font-size: 21px; color: #fff; }
.jm-trust-item .ti { font-size: 13px; font-weight: 700; color: var(--black); }
.jm-trust-item .ts { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
/* ── Stats bar ────────────────────────────────────────────── */
.jm-stats-bar { background: var(--black); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; border: 2px solid var(--black); }
.jm-stats-inner { display: grid; grid-template-columns: repeat(4,1fr); }
@media(max-width:576px) { .jm-stats-inner { grid-template-columns: repeat(2,1fr); } }
.jm-stat-item { padding: 18px 16px; text-align: center; border-right: 1px solid rgba(255,255,255,.1); }
.jm-stat-item:last-child { border-right: none; }
.jm-stat-val { font-size: 1.7rem; font-weight: 900; color: var(--red); line-height: 1; letter-spacing: -.5px; }
.jm-stat-val sup { font-size: .75rem; vertical-align: super; letter-spacing: 0; }
.jm-stat-lbl { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 5px; font-weight: 500; }
/* ── Bannières ────────────────────────────────────────────── */
.jm-banner { border-radius: var(--r-md); overflow: hidden; margin-bottom: 10px; cursor: pointer; border: 1px solid var(--border); }
.jm-banner img { width: 100%; display: block; transition: transform .4s var(--ease); }
.jm-banner:hover img { transform: scale(1.02); }
.jm-banner-double { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.jm-banner-triple { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 10px; }
@media(max-width:576px) { .jm-banner-double,.jm-banner-triple { grid-template-columns: 1fr; } }
/* Image banners */
.jm-img-banner { position: relative; border-radius: var(--r-md); overflow: hidden; display: block; text-decoration: none; border: 1px solid var(--border); flex: 1; }
.jm-img-banner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.jm-img-banner:hover img { transform: scale(1.04); }
.jm-img-banner-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 18px; background: rgba(0,0,0,.45); }
.jm-img-banner-title { color: #fff; font-size: 15px; font-weight: 800; line-height: 1.3; }
.jm-img-banner-sub { color: rgba(255,255,255,.8); font-size: 12px; margin-top: 3px; }
.jm-img-banner-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; background: var(--red); color: #fff; padding: 6px 14px; border-radius: var(--r-md); font-size: 12px; font-weight: 700; width: fit-content; transition: background var(--t-fast); }
.jm-img-banner-cta:hover { background: var(--red-dark); }
.jm-promo-double { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@media(max-width:576px) { .jm-promo-double { grid-template-columns: 1fr; } }
/* ── Promo banner ─────────────────────────────────────────── */
.jm-promo-banner { border-radius: var(--r-lg); padding: 28px 32px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.jm-promo-banner.red { background: var(--red); }
.jm-promo-banner.dark { background: var(--black); }
.jm-promo-banner h2 { font-size: 1.6rem; font-weight: 900; margin: 0 0 6px; letter-spacing: -.5px; }
.jm-promo-banner p { margin: 0; opacity: .85; font-size: 14px; }
@media(max-width:576px) { .jm-promo-banner h2 { font-size: 1.2rem; } .jm-promo-banner { padding: 20px; } }
/* ── How it works ─────────────────────────────────────────── */
.jm-hiw { padding: 24px 28px; }
.jm-hiw-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 20px; }
@media(max-width:767px) { .jm-hiw-steps { grid-template-columns: repeat(2,1fr); } }
.jm-hiw-step { text-align: center; }
.jm-hiw-icon { width: 64px; height: 64px; background: var(--red-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; border: 2px solid var(--red); position: relative; }
.jm-hiw-icon i { font-size: 26px; color: var(--red); }
.jm-hiw-num { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; background: var(--red); color: #fff; border-radius: 50%; font-size: 10.5px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.jm-hiw-t { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.jm-hiw-d { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
/* ── Newsletter ───────────────────────────────────────────── */
.jm-newsletter { background: var(--black); border-radius: var(--r-lg); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.jm-nl-text h4 { color: #fff; font-size: 1.1rem; font-weight: 900; margin-bottom: 5px; }
.jm-nl-text p { color: rgba(255,255,255,.6); font-size: 13.5px; }
.jm-nl-form { display: flex; gap: 8px; flex-shrink: 0; }
.jm-nl-form input { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2); border-radius: var(--r-md); padding: 11px 18px; color: #fff; font-size: 13.5px; outline: none; min-width: 240px; transition: border-color var(--t-fast); }
.jm-nl-form input:focus { border-color: var(--red); }
.jm-nl-form input::placeholder { color: rgba(255,255,255,.4); }
.jm-nl-form button { background: var(--red); color: #fff; border: none; padding: 11px 22px; border-radius: var(--r-md); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background var(--t-fast); white-space: nowrap; }
.jm-nl-form button:hover { background: var(--red-dark); }
@media(max-width:576px) { .jm-nl-form { flex-direction: column; width: 100%; } .jm-nl-form input { min-width: 0; width: 100%; } }
/* ── App banner ───────────────────────────────────────────── */
.jm-app-banner { background: #6B0A1A; border-radius: var(--r-lg); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 12px 40px rgba(107,10,26,.35); position: relative; }
.jm-app-text h3 { color: #fff; font-size: 1.15rem; font-weight: 900; margin-bottom: 8px; }
.jm-app-text p { color: rgba(255,255,255,.5); font-size: 13px; margin-bottom: 18px; line-height: 1.6; }
.jm-app-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.jm-app-badge { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-md); padding: 10px 18px; color: #fff; text-decoration: none; transition: all var(--t-fast); cursor: pointer; }
.jm-app-badge:hover { background: var(--red); border-color: var(--red); color: #fff; }
.jm-app-badge i { font-size: 26px; }
.jm-app-badge .sub { display: block; font-size: 9.5px; color: rgba(255,255,255,.55); margin-bottom: 1px; }
.jm-app-badge div { font-size: 14px; font-weight: 700; }
.jm-app-phone { font-size: 5rem; color: rgba(255,255,255,.12); flex-shrink: 0; }
.jm-app-banner::after { display: none; }
/* ── Footer public ────────────────────────────────────────── */
.jm-footer { background: var(--black); color: rgba(255,255,255,.55); padding: 48px 0 0; margin-top: 24px; }
.jm-footer h5 { color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; }
.jm-footer a { font-size: 13.5px; color: rgba(255,255,255,.45); display: block; margin-bottom: 9px; transition: color var(--t-fast); }
.jm-footer a:hover { color: var(--red); }
.jm-footer p { font-size: 13.5px; line-height: 1.7; }
.jm-footer-bottom { border-top: 2px solid #C8102E; padding: 16px 0; margin-top: 36px; font-size: 12px; color: rgba(255,255,255,.25); text-align: center; }
.jm-footer-bottom a { color: rgba(255,255,255,.35); display: inline; margin: 0 8px; }
.jm-footer-bottom a:hover { color: var(--red); }
.jm-pay-logos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jm-pay-logo { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm); padding: 5px 11px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); }
.jm-social { display: flex; gap: 8px; margin-top: 16px; }
.jm-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; font-size: 15px; color: rgba(255,255,255,.5); transition: all var(--t-base); }
.jm-social a:hover { background: var(--red); color: #fff; transform: scale(1.1); }
/* ── Home grid ────────────────────────────────────────────── */
.jm-home-grid { display: grid; grid-template-columns: 200px 1fr 216px; gap: 10px; padding: 10px 0 4px; align-items: stretch; }
@media(max-width:1100px) { .jm-home-grid { grid-template-columns: 1fr 200px; } }
@media(max-width:767px) { .jm-home-grid { grid-template-columns: 1fr; } }
/* Cat sidebar homepage */
.jm-cat-sidebar { background: var(--white); border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255,0,0,.25); box-shadow: var(--shadow-sm); height: 100%; display: flex; flex-direction: column; }
.jm-cat-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--text-light); font-size: 12.5px; font-weight: 500; border-bottom: 1px solid var(--border); transition: all var(--t-fast); text-decoration: none; flex: 1; min-height: 0; }
.jm-cat-sidebar-item:last-child { border-bottom: none; }
.jm-cat-sidebar-item:hover { background: var(--red-light); color: var(--red); }
.jm-cat-sidebar-item i { font-size: 15px; width: 20px; color: var(--gray-400); flex-shrink: 0; }
.jm-cat-sidebar-item .si-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-cat-sidebar-item .si-arr { font-size: 10px; color: var(--gray-300); margin-left: auto; }
@media(max-width:991px) { .jm-cat-sidebar { display: none; } }
/* ═══════════════════════════════════════════════════════════
COMPOSANTS NAVBAR PUBLIQUE
═══════════════════════════════════════════════════════════ */
/* Hamburger */
.jm-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; padding: 7px; background: none; border: none; cursor: pointer; border-radius: var(--r-md); transition: background var(--t-fast); }
.jm-hamburger:hover { background: var(--gray-100); }
.jm-hamburger span { display: block; width: 20px; height: 2px; background: var(--black); border-radius: 2px; transition: all .25s var(--ease); }
.jm-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jm-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.jm-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media(max-width:767px) { .jm-hamburger { display: flex; } }
/* Mobile search */
.jm-mob-search { display: none; background: var(--white); border-bottom: 1px solid var(--border); padding: 10px 14px; }
.jm-mob-search-bar { display: flex; align-items: center; gap: 10px; background: var(--gray-50); border: 1.5px solid var(--border-md); border-radius: var(--r-md); padding: 9px 14px; }
.jm-mob-search-bar i { color: var(--gray-400); font-size: 15px; flex-shrink: 0; }
.jm-mob-search-bar input { border: none; outline: none; flex: 1; font-size: 13.5px; color: var(--text); background: transparent; }
.jm-mob-search-bar input::placeholder { color: var(--gray-400); }
@media(max-width:767px) { .jm-mob-search { display: block; } }
/* Call strip */
.jm-call-strip { background: var(--red); color: #fff; text-align: center; padding: 6px 16px; font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; }
.jm-call-strip i { font-size: 13px; }
@media(min-width:768px) { .jm-call-strip { display: none; } }
/* Dropdown navbar */
.cp-dd-root { position: relative; display: inline-block; }
.cp-dd-btn { background: none; border: none; padding: 0; cursor: pointer; }
.cp-dd-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; min-width: 230px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); z-index: 1200; border: 1.5px solid var(--red); overflow: hidden; transform-origin: top right; }
/* Bridge transparent pour éviter la fermeture du dropdown quand le curseur passe sur le gap */
.cp-dd-root::after { content: ''; position: absolute; top: 100%; left: -8px; right: -8px; height: 8px; background: transparent; z-index: 1199; }
@keyframes ddOpen { from { opacity: 0; transform: scale(.95) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* BUG FIX: JS toggle .open (pas .show) — on garde aussi :hover pour desktop */
.cp-dd-root:hover .cp-dd-menu,
.cp-dd-menu.open { display: block; animation: ddOpen .18s var(--ease) both; }
.cp-dd-menu a { display: flex; align-items: center; gap: 11px; padding: 11px 18px; font-size: 13.5px; font-weight: 500; color: var(--text); transition: background var(--t-fast), color var(--t-fast); }
.cp-dd-menu a:hover { background: var(--red-light); color: var(--red); }
.cp-dd-menu a i { font-size: 15px; width: 18px; color: var(--gray-400); flex-shrink: 0; transition: color var(--t-fast); }
.cp-dd-menu a:hover i { color: var(--red); }
.cp-dd-divider { height: 1px; background: var(--border); margin: 4px 0; }
.jm-dd-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px; }
.jm-dd-av { width: 38px; height: 38px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; color: #fff; flex-shrink: 0; }
.jm-dd-name { font-size: 13.5px; font-weight: 700; color: var(--black); line-height: 1.3; }
.jm-dd-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
/* Cart badge */
.jm-cart-btn { position: relative; }
.jm-header-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; background: var(--red); color: #fff; font-size: 10px; font-weight: 900; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff; line-height: 1; }
/* ── Side menu mobile ─────────────────────────────────────── */
.jm-side-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 1300; }
.jm-side-overlay.open { display: block; animation: overlayIn .2s both; }
.jm-side-menu { position: fixed; top: 0; left: -320px; bottom: 0; width: 310px; max-width: 88vw; background: var(--white); z-index: 1400; overflow-y: auto; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); transition: left .3s var(--ease); }
.jm-side-menu.open { left: 0; }
.jm-sm-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--red); }
.jm-sm-head .jm-logo { color: #fff; font-size: 1.4rem; }
.jm-sm-head .jm-logo span { color: rgba(255,255,255,.75); }
.jm-sm-close { background: rgba(0,0,0,.2); border: none; color: #fff; font-size: 16px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t-fast); flex-shrink: 0; }
.jm-sm-close:hover { background: rgba(0,0,0,.35); }
.jm-sm-account { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--gray-50); border-bottom: 1px solid var(--border); }
.jm-sm-account .av { width: 44px; height: 44px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; font-size: 16px; flex-shrink: 0; }
.jm-sm-account .info .name { font-size: 14px; font-weight: 700; color: var(--black); }
.jm-sm-account .info .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.jm-sm-account .info a { font-size: 12.5px; color: var(--red); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; text-decoration: none; }
.jm-sm-section { border-bottom: 1px solid var(--border); padding: 6px 0; }
.jm-sm-section-head { padding: 10px 18px 5px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; }
.jm-sm-section-head a { font-size: 11.5px; color: var(--red); text-transform: none; font-weight: 700; text-decoration: none; }
.jm-sm-link { display: flex; align-items: center; gap: 11px; padding: 11px 18px; color: var(--text); font-size: 13.5px; font-weight: 500; transition: all var(--t-fast); text-decoration: none; }
.jm-sm-link:hover { background: var(--red-light); color: var(--red); }
.jm-sm-link i { font-size: 17px; width: 20px; flex-shrink: 0; color: var(--gray-400); }
.jm-sm-link:hover i { color: var(--red); }
.jm-sm-link .arr { margin-left: auto; font-size: 11px; opacity: .3; }
.jm-sm-cat { display: flex; align-items: center; gap: 11px; padding: 10px 18px; color: var(--text); font-size: 13.5px; font-weight: 500; transition: all var(--t-fast); text-decoration: none; }
.jm-sm-cat:hover { background: var(--red-light); color: var(--red); }
.jm-sm-cat i { font-size: 16px; width: 20px; color: var(--gray-300); flex-shrink: 0; }
.jm-sm-cat .arr { margin-left: auto; font-size: 11px; color: var(--gray-300); }
/* ── Cart drawer ──────────────────────────────────────────── */
.jm-cart-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1300; }
.jm-cart-overlay.open { display: block; animation: overlayIn .2s both; }
.jm-cart-drawer { position: fixed; top: 0; right: -420px; bottom: 0; width: 100%; max-width: 420px; background: var(--white); z-index: 1400; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); transition: right .3s var(--ease); }
.jm-cart-drawer.open { right: 0; }
.jm-cart-head { padding: 18px 20px; border-bottom: 2px solid var(--black); display: flex; align-items: center; justify-content: space-between; }
.jm-cart-head h5 { margin: 0; font-size: 1rem; font-weight: 900; color: var(--black); display: flex; align-items: center; }
.jm-cart-count-lbl { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.jm-cart-items { flex: 1; overflow-y: auto; padding: 14px; scrollbar-width: thin; }
.jm-cart-footer { padding: 18px 20px; border-top: 2px solid var(--black); background: var(--gray-50); }
.jm-cart-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.jm-cart-total-row strong { font-size: 17px; font-weight: 900; color: var(--red); }
.jm-cart-credit-row { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.jm-cart-credit-row strong { color: var(--red); font-weight: 700; }
.jm-cart-checkout-btn { width: 100%; padding: 14px; background: var(--red); color: #fff; border: none; border-radius: var(--r-md); font-size: 14.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); margin-top: 14px; }
.jm-cart-checkout-btn:hover { background: var(--red-dark); transform: translateY(-1px); }
.jm-cart-clear-btn { width: 100%; padding: 10px; background: transparent; color: var(--text-muted); border: 1.5px solid var(--border-md); border-radius: var(--r-md); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; margin-top: 8px; transition: all var(--t-fast); }
.jm-cart-clear-btn:hover { border-color: var(--red); color: var(--red); }
/* ── Mobile bottom nav ────────────────────────────────────── */
.mob-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 2px solid var(--black); z-index: 1200; padding: 4px 0 env(safe-area-inset-bottom,4px); grid-template-columns: repeat(4,1fr); box-shadow: 0 -4px 24px rgba(0,0,0,.1); }
.mob-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; color: var(--gray-500); font-size: 10.5px; font-weight: 600; text-align: center; transition: color var(--t-fast); cursor: pointer; background: none; border: none; text-decoration: none; }
.mob-nav-item i { font-size: 23px; }
.mob-nav-item.active { color: var(--red); }
.mob-nav-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; background: var(--red); border-radius: 0 0 3px 3px; }
@media(max-width:767px) { .mob-nav { display: grid; } body { padding-bottom: 68px; } }
@media(min-width:768px) { .mob-nav { display: none !important; } }
/* ── WhatsApp FAB ─────────────────────────────────────────── */
.jm-wa-fab { position: fixed; bottom: 88px; right: 18px; z-index: 1100; width: 54px; height: 54px; background: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 20px rgba(37,211,102,.45); transition: all .2s; text-decoration: none; }
.jm-wa-fab:hover { transform: scale(1.1) rotate(10deg); color: #fff; }
@media(min-width:768px) { .jm-wa-fab { bottom: 22px; right: 22px; } }
/* ═══════════════════════════════════════════════════════════
DASHBOARD LAYOUT
═══════════════════════════════════════════════════════════ */
/* Sidebar */
.jm-sidebar {
width: var(--sidebar-w);
height: 100vh;
background: var(--black);
position: fixed;
top: 0; left: 0;
z-index: 200;
overflow: hidden;
transition: transform var(--t-slow);
display: flex;
flex-direction: column;
border-right: 1px solid rgba(255,255,255,.06);
}
.jm-sidebar::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--red);
flex-shrink: 0;
}
.jm-sidebar-logo { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.jm-sidebar-logo .jm-logo { font-size: 1.45rem; }
.jm-sidebar-logo .jm-logo span { color: rgba(255,255,255,.6); }
/* Nav links */
.jm-sidebar nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent; }
.jm-sidebar .nav-link { color: rgba(255,255,255,.5); padding: 9px 12px; margin: 2px 10px; border-radius: var(--r-md); display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; transition: all var(--t-fast); position: relative; }
.jm-sidebar .nav-link i { font-size: 16px; width: 20px; flex-shrink: 0; opacity: .7; transition: opacity var(--t-fast); }
.jm-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.jm-sidebar .nav-link:hover i { opacity: 1; }
.jm-sidebar .nav-link.active { background: var(--red); color: #fff; font-weight: 700; }
.jm-sidebar .nav-link.active i { opacity: 1; }
.jm-sidebar .nav-link.active::after { content: ''; position: absolute; right: 12px; width: 6px; height: 6px; background: rgba(255,255,255,.5); border-radius: 50%; }
/* Sections headers sidebar */
.jm-sidebar-section { font-size: 9.5px; color: rgba(255,255,255,.25); text-transform: uppercase; letter-spacing: 1.4px; padding: 16px 22px 6px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.jm-sidebar-section::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.06); }
/* User info */
.jm-sidebar-user { margin-top: auto; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.03); }
.jm-sidebar-user .av { width: 36px; height: 36px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; color: #fff; flex-shrink: 0; }
.jm-sidebar-user .name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-sidebar-user .role { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 1px; }
/* Main area */
.jm-main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--page-bg); }
/* Topbar */
.jm-topbar { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--border); padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 1050; overflow: visible; box-shadow: var(--shadow-xs); }
.jm-topbar .page-title { font-size: 1rem; font-weight: 800; margin: 0; flex: 1; color: var(--black); letter-spacing: -.2px; }
.jm-topbar-btn { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--gray-100); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 17px; transition: all var(--t-fast); position: relative; flex-shrink: 0; }
.jm-topbar-btn:hover { background: var(--red-light); color: var(--red); border-color: var(--red-mid); }
.jm-topbar-avatar { width: 38px; height: 38px; background: var(--red); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: #fff; flex-shrink: 0; cursor: pointer; transition: transform var(--t-fast); }
.jm-topbar-avatar:hover { transform: scale(1.05); }
.jm-notif-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; background: var(--red); color: #fff; font-size: 9.5px; font-weight: 900; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid #fff; }
.jm-content { flex: 1; padding: 24px; background: var(--page-bg); min-height: calc(100vh - 60px); }
@media(max-width:991px) {
.jm-sidebar { transform: translateX(-100%); position: fixed; top: 0; bottom: 0; z-index: 990; }
.jm-sidebar.open { transform: translateX(0); box-shadow: var(--shadow-xl); }
.jm-main { margin-left: 0; }
.jm-content { padding: 16px; }
}
/* ── KPI cards ────────────────────────────────────────────── */
.kpi-card { background: var(--white); border-radius: var(--r-lg); padding: 22px 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: box-shadow var(--t-base), transform var(--t-base); position: relative; overflow: hidden; }
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-card .kv { font-size: 1.55rem; font-weight: 900; color: var(--black); line-height: 1.15; letter-spacing: -.5px; }
.kpi-card .kl { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; font-weight: 500; line-height: 1.3; }
.kpi-card .ki-wrap { width: 52px; height: 52px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-card .ki { font-size: 24px; }
.kpi-card.red .ki-wrap { background: var(--red-light); } .kpi-card.red .ki { color: var(--red); }
.kpi-card.green .ki-wrap { background: var(--green-light); } .kpi-card.green .ki { color: var(--green); } .kpi-card.green::before { background: var(--green); }
.kpi-card.blue .ki-wrap { background: var(--blue-light); } .kpi-card.blue .ki { color: var(--blue); } .kpi-card.blue::before { background: var(--blue); }
.kpi-card.yellow .ki-wrap { background: var(--yellow-light); } .kpi-card.yellow .ki { color: var(--yellow); } .kpi-card.yellow::before { background: var(--yellow); }
.kpi-card.purple .ki-wrap { background: var(--purple-light); } .kpi-card.purple .ki { color: var(--purple); } .kpi-card.purple::before { background: var(--purple); }
/* ── Tables dashboard ─────────────────────────────────────── */
.cp-table-wrap { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; }
.cp-table-wrap table { margin: 0; font-size: 13px; }
.cp-table-wrap thead th { background: var(--gray-50); color: var(--text-muted); font-size: 11px; font-weight: 800; border: none; border-bottom: 1px solid var(--border); padding: 12px 16px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.cp-table-wrap tbody td { padding: 13px 16px; vertical-align: middle; border-color: var(--border); color: var(--text); }
.cp-table-wrap tbody tr { transition: background var(--t-fast); }
.cp-table-wrap tbody tr:hover { background: var(--gray-50); }
.cp-table-wrap tbody tr:last-child td { border-bottom: none; }
/* ── Statuts badges ───────────────────────────────────────── */
.st,.status-badge { padding: 4px 12px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; letter-spacing: .1px; }
.st-actif,.st-valide { background: #DCFCE7; color: #15803D; }
.st-solde { background: #DBEAFE; color: #1D4ED8; }
.st-en_livraison { background: #EDE9FE; color: #6D28D9; }
.st-livre,.st-paid { background: #D1FAE5; color: #065F46; }
.st-en_attente_signature,.st-brouillon { background: #FEF9C3; color: #92400E; }
.st-en_attente,.st-pending { background: #FEF3C7; color: #B45309; }
.st-litige,.st-rejete,.st-resilie,.st-late,.st-banni { background: #FEE2E2; color: #991B1B; }
.st-partial { background: #FFF7ED; color: #C2410C; }
.st-suspendu,.st-waived { background: var(--gray-100); color: var(--text-muted); }
.st-calculee { background: #F0FDF4; color: #166534; }
.st-payee { background: #DBEAFE; color: #1D4ED8; }
.st-annulee { background: var(--gray-100); color: var(--text-muted); }
/* ── Cards génériques ─────────────────────────────────────── */
.cp-card { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: 24px; }
.cp-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cp-card-title { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.cp-card-title i { color: var(--red); font-size: 16px; }
/* ── Formulaires ──────────────────────────────────────────── */
.form-control,.form-select { border-radius: var(--r-md) !important; border: 1.5px solid var(--border-md) !important; font-size: 14px; padding: 10px 14px; color: var(--text); background: var(--white); transition: border-color var(--t-fast), box-shadow var(--t-fast) !important; }
.form-control:focus,.form-select:focus { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-glow) !important; outline: none; }
.form-control::placeholder { color: var(--text-muted); font-weight: 400; }
.cp-form-group { margin-bottom: 20px; }
.cp-form-group label { font-size: 13px; font-weight: 700; color: var(--gray-700); margin-bottom: 7px; display: block; }
.cp-label-hint { font-size: 11.5px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.cp-input-icon { position: relative; }
.cp-input-icon>i:first-child { position: absolute; top: 50%; transform: translateY(-50%); left: 13px; color: var(--text-muted); font-size: 16px; pointer-events: none; z-index: 1; }
.cp-input-icon input,.cp-input-icon select { padding-left: 42px !important; }
.cp-input-icon .toggle-pw { position: absolute; top: 50%; transform: translateY(-50%); right: 13px; cursor: pointer; color: var(--text-muted); font-size: 16px; transition: color var(--t-fast); }
.cp-input-icon .toggle-pw:hover { color: var(--red); }
.form-text { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
/* ── Boutons premium ──────────────────────────────────────── */
.btn-red { background: var(--red); color: #fff; border: none; border-radius: var(--r-md); padding: 10px 22px; font-weight: 700; font-size: 14px; transition: all var(--t-fast); display: inline-flex; align-items: center; gap: 7px; line-height: 1.4; text-decoration: none; }
.btn-red:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-red); }
.btn-red:active { transform: scale(.97) translateY(0); }
.btn-red-outline { border: 2px solid var(--red); color: var(--red); background: transparent; border-radius: var(--r-md); padding: 9px 20px; font-weight: 700; font-size: 13.5px; transition: all var(--t-fast); display: inline-flex; align-items: center; gap: 6px; }
.btn-red-outline:hover { background: var(--red); color: #fff; }
.btn-black { background: var(--black); color: #fff; border: none; border-radius: var(--r-md); padding: 10px 22px; font-weight: 700; font-size: 14px; transition: all var(--t-fast); display: inline-flex; align-items: center; gap: 7px; line-height: 1.4; text-decoration: none; }
.btn-black:hover { background: var(--gray-800); color: #fff; transform: translateY(-1px); }
.btn-yellow { background: var(--yellow); color: var(--black); border: none; border-radius: var(--r-md); font-weight: 700; transition: all var(--t-fast); }
.btn-yellow:hover { filter: brightness(.92); color: var(--black); transform: translateY(-1px); }
.btn-ghost { background: var(--gray-100); color: var(--text-light); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 18px; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: all var(--t-fast); }
.btn-ghost:hover { background: var(--gray-200); color: var(--text); }
/* ── Auth pages (ancien) ──────────────────────────────────── */
.jm-auth-wrap { min-height: 100vh; background: var(--black); display: flex; align-items: center; justify-content: center; padding: 24px; }
.jm-auth-card { background: var(--white); border-radius: var(--r-xl); padding: 40px 36px; width: 100%; max-width: 440px; box-shadow: var(--shadow-xl); border: 2px solid var(--red); }
.jm-auth-card .logo-wrap { text-align: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
@media(max-width:480px) { .jm-auth-card { padding: 28px 20px; border-radius: var(--r-lg); } }
/* ══════════════════════════════════════════════════════════
AUTH SPLIT — Login & Register
══════════════════════════════════════════════════════════ */
body.jm-auth { margin: 0; padding: 0; min-height: 100vh; background: #0a0a0a; }
.cp-auth-split {
display: flex;
min-height: 100vh;
}
/* ── Panneau gauche (marque) ── */
.cp-auth-left {
width: 420px;
flex-shrink: 0;
background:
radial-gradient(circle, rgba(200,16,46,.25) 1.5px, transparent 1.5px),
linear-gradient(160deg, #0d0d0d 0%, #1c0000 55%, #0d0d0d 100%);
background-size: 22px 22px, 100% 100%;
display: flex;
flex-direction: column;
padding: 48px 40px;
position: relative;
overflow: hidden;
}
.cp-auth-left::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,0,0,.18) 0%, transparent 70%);
pointer-events: none;
}
.cp-auth-left::after {
content: '';
position: absolute;
bottom: -80px; left: -60px;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,0,0,.1) 0%, transparent 70%);
pointer-events: none;
}
.cp-auth-back-btn {
display: inline-flex; align-items: center; gap: 8px;
color: #fff; font-size: 13px; font-weight: 700;
text-decoration: none; transition: all var(--t-base);
margin-bottom: 48px; width: fit-content;
background: rgba(200,16,46,.35);
border: 1.5px solid rgba(200,16,46,.65);
padding: 8px 18px;
border-radius: 50px;
}
.cp-auth-back-btn:hover { background: var(--red); border-color: var(--red); box-shadow: 0 4px 16px rgba(200,16,46,.4); }
.cp-auth-tagline {
font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.65;
margin-bottom: 40px;
}
.cp-auth-perks {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 16px;
}
.cp-auth-perks li {
display: flex; align-items: center; gap: 14px;
color: rgba(255,255,255,.8); font-size: 14px; font-weight: 500;
}
.cp-auth-perks .ck {
width: 28px; height: 28px; border-radius: 50%;
background: rgba(255,0,0,.2); border: 1.5px solid rgba(255,0,0,.4);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--red); font-size: 14px;
}
/* ── Panneau droit (formulaire) ── */
.cp-auth-right {
flex: 1;
background: linear-gradient(145deg, #fce8e8 0%, #ffffff 45%, #fdf2f2 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
overflow-y: auto;
}
.cp-auth-mobile-top {
display: none;
width: 100%;
justify-content: space-between; align-items: center;
margin-bottom: 0;
}
.cp-auth-mobile-top .mob-back {
font-size: 13px; color: rgba(255,255,255,.9); text-decoration: none;
display: flex; align-items: center; gap: 6px;
font-weight: 700;
padding: 6px 14px;
border: 1.5px solid rgba(255,255,255,.45);
border-radius: 50px;
transition: background var(--t-fast);
}
.cp-auth-mobile-top .mob-back:hover { background: rgba(255,255,255,.15); }
.cp-auth-form-wrap {
width: 100%; max-width: 460px;
background: #fff;
border-radius: 24px;
padding: 40px 36px;
box-shadow: 0 8px 40px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.04);
border: 1px solid var(--border);
}
.cp-auth-title {
font-size: 1.65rem; font-weight: 900; color: var(--black);
letter-spacing: -.7px; margin-bottom: 6px;
}
.cp-auth-sub {
font-size: 13.5px; color: var(--text-muted); margin-bottom: 28px;
}
/* Error */
.cp-auth-error {
background: #fff1f2; border: 1.5px solid #fca5a5;
border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 20px;
font-size: 13px; color: #dc2626;
}
.cp-auth-error ul { margin: 6px 0 0 16px; padding: 0; }
.cp-auth-error li { margin-bottom: 3px; }
/* Row */
.cp-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
/* Field */
.cp-auth-field { margin-bottom: 18px; }
.cp-auth-field label {
display: block; font-size: 12.5px; font-weight: 700;
color: var(--text); text-transform: uppercase; letter-spacing: .5px;
margin-bottom: 7px;
}
.cp-auth-input-wrap {
position: relative; display: flex; align-items: center;
}
.cp-auth-input-wrap .icon {
position: absolute; left: 14px; font-size: 15px; color: var(--gray-400);
pointer-events: none; z-index: 1;
}
.cp-auth-input-wrap input {
width: 100%; padding: 13px 14px 13px 42px;
border: 1.5px solid var(--border-md); border-radius: var(--r-lg);
font-size: 14px; color: var(--text); background: var(--gray-50);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
outline: none;
}
.cp-auth-input-wrap.no-icon input { padding-left: 14px; }
.cp-auth-input-wrap input:focus {
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(255,0,0,.12);
background: #fff;
}
.cp-auth-input-wrap .toggle-pw {
position: absolute; right: 14px; font-size: 16px;
color: var(--gray-400); cursor: pointer;
transition: color var(--t-fast);
}
.cp-auth-input-wrap .toggle-pw:hover { color: var(--red); }
/* Options row */
.cp-auth-row-opts {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 22px; font-size: 13px; color: var(--text-muted);
}
.cp-auth-row-opts label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.cp-auth-forgot { color: var(--red); text-decoration: none; font-weight: 600; }
.cp-auth-forgot:hover { text-decoration: underline; }
/* Submit */
.cp-auth-submit {
width: 100%; height: 52px;
background: linear-gradient(135deg, var(--red), var(--red-dark));
color: #fff; border: none; border-radius: var(--r-lg);
font-size: 15px; font-weight: 800; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 10px;
box-shadow: 0 6px 24px rgba(255,0,0,.35);
transition: all var(--t-base); letter-spacing: .2px;
}
.cp-auth-submit:hover {
background: linear-gradient(135deg, var(--red-dark), #6B0000);
box-shadow: 0 8px 32px rgba(255,0,0,.5);
transform: translateY(-2px);
}
.cp-auth-submit:active { transform: translateY(0); }
.cp-auth-submit:disabled {
opacity: .45; cursor: not-allowed;
transform: none !important; box-shadow: none !important;
background: linear-gradient(135deg, #999, #777);
}
/* Switch link */
.cp-auth-switch { text-align: center; font-size: 13.5px; color: var(--text-muted); }
.cp-auth-switch a { color: var(--red); font-weight: 700; text-decoration: none; }
.cp-auth-switch a:hover { text-decoration: underline; }
/* Auth CGU / checkbox */
.cp-auth-cgu,
.cp-auth-check {
display: flex; align-items: flex-start; gap: 9px;
font-size: 12px; color: var(--text-muted); line-height: 1.6;
margin-bottom: 18px; cursor: pointer;
}
.cp-auth-cgu a, .cp-auth-check a { color: var(--red); }
.cp-auth-cgu input[type=checkbox],
.cp-auth-check input[type=checkbox] {
width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; accent-color: var(--red);
}
.cp-auth-check label { cursor: pointer; font-size: 12px; color: var(--text-muted); }
/* Mobile : masquer panneau gauche, centrer formulaire */
@media(max-width:767px) {
.cp-auth-split { flex-direction: column; min-height: 100vh; }
.cp-auth-left { display: none; }
.cp-auth-right {
padding: 0 0 40px; justify-content: flex-start;
background: linear-gradient(180deg, #ffe4e4 0%, #fff0f0 35%, #fdf8f8 100%);
}
.cp-auth-mobile-top {
display: flex;
width: 100%; max-width: 100%;
padding: 18px 20px;
background: linear-gradient(135deg, #C8102E 0%, #8B0000 100%);
margin-bottom: 24px;
}
.cp-auth-mobile-top .jm-logo { color: #fff; font-size: 1.4rem; }
.cp-auth-mobile-top .jm-logo .dot { color: rgba(255,255,255,.75); }
.cp-auth-form-wrap {
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0,0,0,.08);
border: none;
padding: 24px 20px 40px;
background: #fff;
max-width: calc(100% - 24px);
margin: 0 auto;
}
}
@media(min-width:768px) and (max-width:1024px) {
.cp-auth-left { width: 320px; padding: 40px 28px; }
.cp-auth-form-wrap { padding: 32px 28px; }
}
/* ── Toasts/Flash ─────────────────────────────────────────── */
.cp-flash { position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px; max-width: 420px; }
.cp-toast { padding: 14px 18px 14px 16px; border-radius: var(--r-lg); margin-bottom: 8px; font-size: 13.5px; font-weight: 500; animation: toastIn .28s var(--ease) both; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; cursor: pointer; border-left: 4px solid; border: 1px solid var(--border); border-left: 4px solid; }
.cp-toast::before { font-family: 'Bootstrap Icons'; font-size: 17px; flex-shrink: 0; }
.cp-toast-success { background: #F0FDF4; color: #15803D; border-left-color: var(--green); }
.cp-toast-success::before { content: "\F26E"; color: var(--green); }
.cp-toast-error { background: var(--red-light); color: var(--red-deeper); border-left-color: var(--red); }
.cp-toast-error::before { content: "\F337"; color: var(--red); }
.cp-toast-warning { background: #FFFBEB; color: #92400E; border-left-color: var(--yellow); }
.cp-toast-warning::before { content: "\F33A"; color: var(--yellow); }
.cp-toast-info { background: #EFF6FF; color: #1E40AF; border-left-color: var(--blue); }
.cp-toast-info::before { content: "\F431"; color: var(--blue); }
@keyframes toastIn { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(110%); opacity: 0; } }
/* ── Simulateur ───────────────────────────────────────────── */
.sim-card { background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-md); overflow: hidden; border: 1px solid var(--border); }
.sim-card-head { background: var(--red); padding: 20px 24px; color: #fff; }
.sim-card-head h4 { margin: 0; font-weight: 900; font-size: 1.05rem; }
.sim-card-body { padding: 24px; }
.sim-result { background: var(--red-light); border: 1px solid var(--red-mid); border-radius: var(--r-lg); padding: 22px; margin-top: 22px; }
.sim-result .amount { font-size: 2.2rem; font-weight: 900; color: var(--red); line-height: 1; letter-spacing: -1px; }
.sim-formula-opt { display: block; padding: 12px 16px; border: 2px solid var(--border); border-radius: var(--r-lg); cursor: pointer; transition: all var(--t-fast); user-select: none; }
.sim-formula-opt:hover { border-color: var(--red); background: var(--red-light); }
.sim-formula-opt.active { border-color: var(--red); background: var(--red-light); box-shadow: 0 0 0 3px var(--red-glow); }
.sim-formula-opt.active .fw-600,.sim-formula-opt.active .fw-700 { color: var(--red); }
/* ── Catalogue filtres ────────────────────────────────────── */
.cat-filter-box { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; position: sticky; top: 118px; }
.cat-filter-section { padding: 16px; border-bottom: 1px solid var(--border); }
.cat-filter-section:last-child { border-bottom: none; }
.cat-filter-title { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin-bottom: 10px; }
.cat-filter-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-md); font-size: 13px; color: var(--text-light); transition: all var(--t-fast); margin-bottom: 2px; font-weight: 500; }
.cat-filter-link i { font-size: 14px; width: 16px; color: var(--gray-400); flex-shrink: 0; }
.cat-filter-link:hover { background: var(--red-light); color: var(--red); }
.cat-filter-link:hover i { color: var(--red); }
.cat-filter-link.active { background: var(--red); color: #fff; font-weight: 700; }
.cat-filter-link.active i { color: #fff; }
.cat-filter-link .nb { margin-left: auto; background: var(--gray-100); color: var(--text-muted); font-size: 10.5px; padding: 1px 6px; border-radius: var(--r-pill); }
.cat-filter-link.active .nb { background: rgba(255,255,255,.25); color: #fff; }
/* Chips filtres */
.filter-chip { background: var(--white); border: 1.5px solid var(--border-md); color: var(--text); padding: 4px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; transition: all var(--t-fast); }
.filter-chip:hover { border-color: var(--red); color: var(--red); }
.filter-chip-clear { background: var(--red-light); border-color: var(--red); color: var(--red); font-weight: 700; }
/* ── Page produit ─────────────────────────────────────────── */
.prod-gallery { background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: 18px; position: sticky; top: 100px; }
.prod-main-img { position: relative; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--gray-50); display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; }
.prod-main-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .4s var(--ease); }
.prod-main-img:hover img { transform: scale(1.06); }
.prod-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.prod-thumb { width: 64px; height: 64px; object-fit: contain; border: 2px solid var(--border); border-radius: var(--r-md); padding: 4px; cursor: pointer; background: var(--white); transition: all var(--t-fast); }
.prod-thumb:hover,.prod-thumb.active { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-glow); }
.prod-description { font-size: 13.5px; line-height: 1.8; color: var(--text-light); }
/* ── Empty state ──────────────────────────────────────────── */
.cp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.cp-empty-icon { width: 80px; height: 80px; background: var(--gray-100); border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; font-size: 36px; color: var(--gray-400); margin-bottom: 20px; border: 2px solid var(--border); }
.cp-empty h4,.cp-empty h5 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.cp-empty p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 20px; max-width: 280px; line-height: 1.6; }
/* ── Alert ────────────────────────────────────────────────── */
.cp-alert { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-lg); font-size: 13.5px; font-weight: 500; border: 1px solid; }
.cp-alert-danger { background: #FFF5F5; border-color: #FCA5A5; color: #991B1B; }
.cp-alert-warning { background: #FFFBEB; border-color: #FCD34D; color: #92400E; }
.cp-alert-info { background: #EFF6FF; border-color: #BAE6FD; color: #1E40AF; }
.cp-alert-success { background: #F0FDF4; border-color: #86EFAC; color: #15803D; }
.cp-alert-icon { font-size: 20px; flex-shrink: 0; }
.cp-alert-btn { margin-left: auto; flex-shrink: 0; padding: 6px 16px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 700; transition: all var(--t-fast); background: var(--red); color: #fff; border: none; }
.cp-alert-btn:hover { background: var(--red-dark); color: #fff; }
/* ── Progress bar ─────────────────────────────────────────── */
.cp-progress { height: 6px; background: var(--gray-100); border-radius: var(--r-pill); overflow: hidden; }
.cp-progress-bar { height: 100%; background: var(--red); border-radius: var(--r-pill); transition: width .6s var(--ease-out); }
.cp-progress-bar.green { background: var(--green); }
.cp-progress-bar.blue { background: var(--blue); }
.progress-bar.bg-danger { background: var(--red) !important; }
.progress { border-radius: var(--r-pill) !important; background: var(--gray-100) !important; }
/* ── Client sidebar nav ───────────────────────────────────── */
.cp-client-nav { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; }
.cp-client-nav-head { background: var(--black); padding: 20px 16px; display: flex; align-items: center; gap: 12px; }
.cp-client-av { width: 44px; height: 44px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: #fff; flex-shrink: 0; }
.cp-client-nav-info .fw-700 { color: #fff; }
.cp-client-nav-links { padding: 8px; }
.cp-client-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; color: var(--text-light); transition: all var(--t-fast); margin-bottom: 2px; }
.cp-client-nav-link i { font-size: 16px; width: 20px; color: var(--gray-400); flex-shrink: 0; }
.cp-client-nav-link:hover { background: var(--red-light); color: var(--red); }
.cp-client-nav-link:hover i { color: var(--red); }
.cp-client-nav-link.active { background: var(--red); color: #fff; font-weight: 700; }
.cp-client-nav-link.active i { color: #fff; }
.cp-client-nav-footer { padding: 8px; border-top: 1px solid var(--border); }
/* ── Pagination ───────────────────────────────────────────── */
.pagination .page-link { border-radius: var(--r-md) !important; font-size: 13px; font-weight: 600; color: var(--text); border-color: var(--border); transition: all var(--t-fast); }
.pagination .page-link:hover { background: var(--red-light); color: var(--red); border-color: var(--red); }
.pagination .page-item.active .page-link { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--shadow-red); }
.cp-pagination { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 28px; flex-wrap: wrap; }
.cp-page-link { min-width: 38px; height: 38px; border-radius: var(--r-md); background: var(--white); border: 1.5px solid var(--border-md); color: var(--text-muted); font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; transition: all var(--t-fast); text-decoration: none; }
.cp-page-link:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.cp-page-link.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--shadow-red); }
.cp-page-ellipsis { border: none; background: none; color: var(--gray-400); }
/* ── Dashboard Hero ───────────────────────────────────────── */
.dash-hero { background: var(--black); border-radius: var(--r-xl); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: relative; overflow: hidden; }
.dash-hero::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--red); }
.dash-hero-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dash-hero-avatar { width: 60px; height: 60px; background: var(--red); border: 2px solid rgba(255,255,255,.15); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 900; color: #fff; flex-shrink: 0; }
.dash-hero-greeting { font-size: 1.3rem; font-weight: 900; color: #fff; line-height: 1.2; letter-spacing: -.3px; }
.dash-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 6px; }
.dash-level-badge { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 3px 12px; font-size: 11.5px; font-weight: 700; color: #fff; }
.dash-sep { opacity: .35; }
.dash-hero-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dash-hero-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: var(--red); border-radius: var(--r-md); padding: 10px 20px; font-size: 13.5px; font-weight: 700; transition: all var(--t-fast); white-space: nowrap; }
.dash-hero-btn:hover { background: var(--red-light); color: var(--red-dark); transform: translateY(-1px); }
.dash-hero-btn-ghost { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); color: #fff; border-radius: var(--r-md); padding: 10px 18px; font-size: 13.5px; font-weight: 600; border: 1px solid rgba(255,255,255,.15); transition: all var(--t-fast); white-space: nowrap; }
.dash-hero-btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
/* ── KPI Row ──────────────────────────────────────────────── */
.dash-kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media(max-width:991px) { .dash-kpi-row { grid-template-columns: repeat(2,1fr); } }
@media(max-width:479px) { .dash-kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; } }
.dash-kpi { background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--border); padding: 18px 20px; display: flex; align-items: center; gap: 14px; transition: box-shadow var(--t-base), transform var(--t-base); position: relative; overflow: hidden; }
.dash-kpi::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--red-mid); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base); }
.dash-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dash-kpi:hover::after { transform: scaleX(1); }
.dash-kpi-icon { width: 48px; height: 48px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.dash-kpi-body { flex: 1; min-width: 0; }
.dash-kpi-value { font-size: 1.3rem; font-weight: 900; color: var(--black); line-height: 1.2; letter-spacing: -.3px; }
.dash-kpi-label { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpi-arrow { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-500); font-size: 12px; flex-shrink: 0; transition: all var(--t-fast); }
.dash-kpi-arrow:hover { background: var(--red); color: #fff; }
/* ── Action rows ──────────────────────────────────────────── */
.dash-action-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--gray-50); border: 1px solid var(--border); transition: all var(--t-fast); color: inherit; }
.dash-action-row:hover { background: var(--red-light); border-color: var(--red-mid); color: var(--red); box-shadow: var(--shadow-sm); }
.dash-action-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.dash-cash-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-md); background: var(--gray-50); border: 1px solid var(--border); }
.dash-cash-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--red-light); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; flex-shrink: 0; }
.dash-top-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-md); background: var(--gray-50); border: 1px solid var(--border); transition: background var(--t-fast); }
.dash-top-row:hover { background: var(--gray-100); }
.dash-top-rank { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.dash-alert { background: #FFF5F5; border: 1px solid #FCA5A5; border-radius: var(--r-lg); padding: 14px 18px; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #991B1B; }
.dash-alert-icon { font-size: 20px; flex-shrink: 0; }
.dash-alert-btn { flex-shrink: 0; background: var(--red); color: #fff; border-radius: var(--r-md); padding: 6px 16px; font-size: 12.5px; font-weight: 700; transition: background var(--t-fast); }
.dash-alert-btn:hover { background: var(--red-dark); color: #fff; }
@media(max-width:575px) { .dash-hero { padding: 20px; } .dash-hero-greeting { font-size: 1.1rem; } .dash-hero-actions { width: 100%; justify-content: flex-end; } .dash-hero-btn,.dash-hero-btn-ghost { padding: 9px 14px; font-size: 13px; } }
/* ── Section header ───────────────────────────────────────── */
.section-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.section-title { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.section-title i { color: var(--red); font-size: 16px; }
/* ═══════════════════════════════════════════════════════════
PAGE CATALOGUE
═══════════════════════════════════════════════════════════ */
.cp-cat-hero { background: var(--black); padding: 28px 0 22px; position: relative; overflow: hidden; border-bottom: 3px solid var(--red); }
.cp-cat-hero-inner { position: relative; }
.cp-cat-hero h1 { color: #fff; font-size: 1.55rem; font-weight: 900; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.25; }
.count-badge { background: rgba(255,0,0,.25); color: var(--red); font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: var(--r-pill); border: 1px solid var(--red); }
.cp-cat-hero-bc { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.5); flex-wrap: wrap; }
.cp-cat-hero-bc a { color: rgba(255,255,255,.75); text-decoration: none; transition: color var(--t-fast); }
.cp-cat-hero-bc a:hover { color: var(--red); }
.cp-cat-hero-bc .sep { color: rgba(255,255,255,.25); }
.cp-catpage.jm-cat-bar { background: var(--red-dark) !important; }
.cp-sort-bar { background: var(--gray-900); padding: 9px 0; position: sticky; top: 60px; z-index: 90; border-bottom: 2px solid var(--red); }
.cp-sort-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cp-sort-label { color: rgba(255,255,255,.5); font-size: 12.5px; font-weight: 500; }
.cp-sort-select { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; border-radius: var(--r-md); padding: 6px 12px; font-size: 12.5px; cursor: pointer; outline: none; }
.cp-sort-select option { background: var(--gray-900); color: #fff; }
.cp-filter-mob-btn { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; padding: 7px 14px; border-radius: var(--r-md); font-size: 13px; cursor: pointer; }
.cp-view-toggle { display: flex; gap: 4px; }
.cp-view-btn { width: 32px; height: 32px; border-radius: var(--r-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--t-fast); }
.cp-view-btn.active,.cp-view-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.cp-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--red); color: #fff; padding: 4px 11px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.cp-chip:hover { background: var(--red-dark); color: #fff; }
.cp-chip-clear { background: var(--gray-600); }
.cp-chip-clear:hover { background: var(--gray-800); }
/* Sidebar catalogue */
.cp-cat-sidebar { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: 120px; border: 1px solid var(--border); }
.cp-cat-sidebar-title { padding: 13px 16px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--black); border-bottom: 2px solid var(--red); display: flex; align-items: center; gap: 8px; background: var(--gray-50); }
.cp-sb-reset { margin-left: auto; color: var(--text-muted); font-size: 11px; display: flex; align-items: center; gap: 4px; font-weight: 500; text-decoration: none; }
.cp-sb-reset:hover { color: var(--red); }
.cp-cat-filter-section { padding: 8px 0 4px; border-bottom: 1px solid var(--border); }
.cp-cat-filter-section:last-child { border-bottom: none; }
.cp-cat-filter-label { padding: 9px 16px 5px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.cp-cat-filter-item { display: flex; align-items: center; gap: 9px; padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--text-light); transition: all var(--t-fast); cursor: pointer; text-decoration: none; border-left: 3px solid transparent; }
.cp-cat-filter-item:hover { background: var(--red-light); color: var(--red); border-left-color: var(--red); }
.cp-cat-filter-item.active { color: var(--red); font-weight: 700; background: var(--red-light); border-left-color: var(--red); }
.cp-cat-filter-item i { font-size: 14px; width: 18px; color: var(--gray-300); flex-shrink: 0; }
.cp-cat-filter-item.active i,.cp-cat-filter-item:hover i { color: var(--red); }
.cp-cat-filter-count { margin-left: auto; background: var(--gray-100); color: var(--gray-600); font-size: 10.5px; padding: 2px 7px; border-radius: var(--r-pill); font-weight: 700; }
.cp-cat-filter-item.active .cp-cat-filter-count { background: var(--red); color: #fff; }
.cp-price-form { padding: 10px 16px 12px; }
.cp-price-inputs { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 10px; }
.cp-price-field { flex: 1; }
.cp-price-field label { display: block; font-size: 10.5px; color: var(--text-muted); margin-bottom: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.cp-price-sep { color: var(--gray-300); font-size: 14px; flex-shrink: 0; margin-bottom: 8px; }
.cp-apply-btn { width: 100%; padding: 9px; background: var(--red); color: #fff; border: none; border-radius: var(--r-md); font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background var(--t-fast); }
.cp-apply-btn:hover { background: var(--red-dark); }
.cp-price-ranges { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 12px; }
.cp-price-range-chip {
font-size: 12.5px; padding: 8px 14px;
border: 1.5px solid var(--border-md); border-radius: var(--r-md);
color: var(--text-muted); cursor: pointer; transition: all var(--t-fast);
text-decoration: none; font-weight: 600;
display: flex; align-items: center; gap: 8px;
}
.cp-price-range-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--border-md); flex-shrink: 0; transition: background var(--t-fast); }
.cp-price-range-chip:hover,.cp-price-range-chip.active { border-color: var(--red); color: var(--red); background: var(--red-light); }
.cp-price-range-chip:hover::before,.cp-price-range-chip.active::before { background: var(--red); }
.cp-brand-list { overflow: visible; }
.cp-brand-clear { display: flex; align-items: center; gap: 5px; padding: 6px 16px 10px; font-size: 11.5px; color: var(--text-muted); cursor: pointer; transition: color var(--t-fast); text-decoration: none; }
.cp-brand-clear:hover { color: var(--red); }
.cp-cat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
@media(max-width:1100px) { .cp-cat-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:767px) { .cp-cat-grid { grid-template-columns: repeat(2,1fr); gap: 8px; } }
.cp-cat-card { opacity: 0; animation: fadeUp .45s var(--ease) both; animation-delay: var(--ci,0s); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* ── List mode premium ─────────────────────────────────── */
.cp-cat-grid.cp-list-mode { grid-template-columns: 1fr; gap: 10px; }
.cp-cat-grid.cp-list-mode .jm-card {
flex-direction: row;
align-items: stretch;
height: 130px;
overflow: hidden;
}
/* Le lien doit être flex pour aligner image + info */
.cp-cat-grid.cp-list-mode .jm-card-link {
display: flex;
flex: 1;
align-items: stretch;
text-decoration: none;
color: inherit;
min-width: 0;
}
.cp-cat-grid.cp-list-mode .jm-card-img {
padding-top: 0;
width: 130px;
height: 130px;
flex-shrink: 0;
border-radius: var(--r-md) 0 0 var(--r-md);
border-right: 1px solid var(--border);
}
.cp-cat-grid.cp-list-mode .jm-card-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
}
.cp-cat-grid.cp-list-mode .jm-card-body {
flex: 1;
padding: 14px 16px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
min-width: 0;
}
.cp-cat-grid.cp-list-mode .jm-card-brand { font-size: 10px; }
.cp-cat-grid.cp-list-mode .jm-card-name { -webkit-line-clamp: 2; min-height: auto; font-size: 14px; }
.cp-cat-grid.cp-list-mode .jm-card-price { font-size: 17px; }
.cp-cat-grid.cp-list-mode .jm-card-credit { font-size: 11.5px; }
.cp-cat-grid.cp-list-mode .jm-card-add-btn {
align-self: center;
margin: 0 14px 0 0;
width: auto;
padding: 10px 18px;
flex-shrink: 0;
font-size: 13px;
border-radius: var(--r-md);
display: flex;
align-items: center;
gap: 6px;
}
.cp-cat-grid.cp-list-mode .jm-card .jm-card-overlay { display: none; }
/* Red line on hover in list mode */
.cp-cat-grid.cp-list-mode .jm-card:hover { border-color: var(--red); box-shadow: 0 4px 20px rgba(255,0,0,.12); }
.cp-float-filter { position: fixed; bottom: 80px; left: 50%; right: auto; transform: translateX(-50%); z-index: 500; }
.cp-float-filter-btn {
display: flex; align-items: center; gap: 10px;
background: linear-gradient(135deg, var(--black), #1a0000);
color: #fff; padding: 13px 28px; border-radius: var(--r-pill);
border: 2px solid var(--red); font-size: 14px; font-weight: 800;
cursor: pointer; box-shadow: 0 6px 24px rgba(255,0,0,.35), 0 2px 8px rgba(0,0,0,.3);
white-space: nowrap;
transition: all var(--t-fast);
}
.cp-float-filter-btn:hover { background: var(--red); box-shadow: 0 8px 32px rgba(255,0,0,.5); transform: translateY(-2px); }
/* Scroll to top button */
.cp-scroll-top {
position: fixed; bottom: 156px; right: 16px; z-index: 1200;
width: 42px; height: 42px; border-radius: 50%;
background: linear-gradient(135deg, var(--red), var(--red-dark));
color: #fff; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 16px; box-shadow: 0 4px 16px rgba(255,0,0,.35);
transition: opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
opacity: 0; pointer-events: none;
}
.cp-scroll-top.visible { opacity: 1; pointer-events: auto; }
.cp-scroll-top:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(255,0,0,.5); }
/* Desktop: WhatsApp FAB est à bottom:22px + 54px haut = 76px du bas → scroll-top au dessus */
@media(min-width:768px) { .cp-scroll-top { bottom: 90px; right: 24px; } }
.cp-flt-badge { background: #fff; color: var(--red); font-size: 10px; font-weight: 900; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
/* ═══════════════════════════════════════════════════════════
PAGE PRODUIT
═══════════════════════════════════════════════════════════ */
.cp-gal-wrap { position: sticky; top: 110px; }
.cp-gal-main { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #fff; aspect-ratio: 1/1; max-height: 440px; border: 1.5px solid var(--border); }
.cp-gal-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--t-fast); }
.cp-gal-main img.cp-fading { opacity: 0; }
.cp-gal-count { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); }
.cp-gal-kit-badge,.cp-gal-out-badge { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; z-index: 2; }
.cp-gal-kit-badge { background: var(--black); color: #fff; }
.cp-gal-out-badge { background: var(--gray-400); color: #fff; }
.cp-gal-zoom-btn { position: absolute; bottom: 12px; left: 12px; background: rgba(0,0,0,.5); color: #fff; border: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: background var(--t-fast); }
.cp-gal-zoom-btn:hover { background: var(--red); }
.cp-gal-video-btn { position: absolute; top: 12px; right: 12px; background: var(--red); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 19px; transition: all var(--t-fast); box-shadow: var(--shadow-red); }
.cp-gal-video-btn:hover { transform: scale(1.1); background: var(--red-dark); }
.cp-gal-strip { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.cp-gal-strip::-webkit-scrollbar { display: none; }
.cp-gal-thumb { width: 70px; height: 70px; border-radius: var(--r-md); overflow: hidden; border: 2px solid var(--border); cursor: pointer; flex-shrink: 0; transition: all var(--t-fast); background: var(--gray-50); }
.cp-gal-thumb:hover,.cp-gal-thumb.active { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); }
.cp-gal-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.cp-gal-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.95); z-index: 2000; align-items: center; justify-content: center; }
.cp-gal-lightbox.open { display: flex; }
.cp-gal-lightbox>img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--r-lg); }
.cp-gal-lb-close { position: absolute; top: 16px; right: 18px; background: rgba(255,255,255,.1); border: none; color: #fff; font-size: 20px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t-fast); }
.cp-gal-lb-close:hover { background: var(--red); }
.cp-gal-lb-arrows { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; padding: 0 14px; }
.cp-gal-lb-prev,.cp-gal-lb-next { pointer-events: all; background: rgba(255,255,255,.1); border: none; color: #fff; font-size: 22px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t-fast); }
.cp-gal-lb-prev:hover,.cp-gal-lb-next:hover { background: var(--red); }
.cp-vid-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.95); z-index: 2100; align-items: center; justify-content: center; }
.cp-vid-modal.open { display: flex; }
.cp-vid-close { position: absolute; top: 16px; right: 18px; background: rgba(255,255,255,.1); border: none; color: #fff; font-size: 20px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cp-vid-close:hover { background: var(--red); }
.cp-vid-wrap { width: min(92vw,940px); aspect-ratio: 16/9; }
.cp-vid-wrap iframe { width: 100%; height: 100%; border: none; border-radius: var(--r-lg); }
/* Infos produit */
.cp-prod-panel {
background: #fff;
border-radius: var(--r-xl);
padding: 28px 26px;
border: 1px solid var(--border);
box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.cp-prod-brand { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .7px; font-weight: 700; margin-bottom: 6px; }
.cp-prod-name { font-size: 1.45rem; font-weight: 900; color: var(--black); line-height: 1.25; margin-bottom: 10px; letter-spacing: -.4px; }
.cp-prod-price-big { font-size: 1.9rem; font-weight: 900; color: var(--red); line-height: 1; margin: 10px 0; letter-spacing: -.5px; }
.cp-prod-short-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }
.cp-social-proof { display: inline-flex; align-items: center; gap: 6px; background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; padding: 5px 13px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.cp-stars { display: flex; align-items: center; gap: 2px; color: var(--black); }
.cp-stars i { font-size: 15px; }
.cp-stars .count { font-size: 12.5px; color: var(--text-muted); margin-left: 7px; font-weight: 500; }
.cp-stock-ok { display: inline-flex; align-items: center; gap: 6px; color: #059669; font-size: 13px; font-weight: 700; }
.cp-stock-out { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; font-weight: 700; }
.cp-pay-title { font-size: 13.5px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.cp-pay-toggle { display: flex; gap: 8px; margin-bottom: 16px; background: var(--gray-100); border-radius: var(--r-lg); padding: 4px; }
.cp-pay-toggle-btn { flex: 1; padding: 9px 14px; border: none; border-radius: var(--r-md); background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: all var(--t-fast); }
.cp-pay-toggle-btn.active { background: #fff; color: var(--red); box-shadow: var(--shadow-sm); }
.cp-credit-group { margin-bottom: 14px; }
.cp-credit-group-title { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-left: 2px; }
.cp-credit-group-title i { color: var(--red); }
.cp-formula-opt { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 2px solid var(--border); border-radius: var(--r-lg); cursor: pointer; transition: all var(--t-fast); margin-bottom: 7px; background: #fff; }
.cp-formula-opt:hover { border-color: var(--red-mid); background: var(--red-light); }
.cp-formula-opt.active { border-color: var(--red); background: var(--red-light); box-shadow: 0 0 0 4px var(--red-glow); }
.cp-formula-opt-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-md); flex-shrink: 0; transition: all var(--t-fast); position: relative; }
.cp-formula-opt.active .cp-formula-opt-radio { border-color: var(--red); background: var(--red); }
.cp-formula-opt.active .cp-formula-opt-radio::after { content: ''; position: absolute; inset: 3px; background: #fff; border-radius: 50%; }
.cp-formula-opt-left { flex: 1; min-width: 0; }
.cp-formula-opt-name { font-size: 13.5px; font-weight: 700; color: var(--black); }
.cp-formula-opt-detail { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.cp-formula-opt-right { text-align: right; flex-shrink: 0; }
.cp-formula-opt-amount { font-size: 16px; font-weight: 900; color: var(--red); }
.cp-formula-opt-freq { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.cp-credit-summary { background: var(--gray-50); border: 1.5px solid var(--border); border-radius: var(--r-lg); margin-top: 12px; overflow: hidden; }
.cp-cs-header { background: var(--red); color: #fff; padding: 11px 16px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.cp-cs-body { padding: 14px 16px; }
.cp-cs-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.cp-cs-row:last-child { border-bottom: none; }
.cp-cs-row strong { font-weight: 700; color: var(--black); }
.cp-cs-highlight { background: var(--red-light); border-radius: var(--r-md); padding: 9px 12px; margin-top: 6px; }
.cp-cs-highlight strong { color: var(--red); font-size: 16px; }
.cp-cash-box { background: #ECFDF5; border: 2px solid #6EE7B7; border-radius: var(--r-lg); padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; }
.cp-cash-box-price { font-size: 1.45rem; font-weight: 900; color: #065F46; }
.cp-cash-box-label { font-size: 12.5px; color: #065F46; margin-top: 4px; font-weight: 500; }
.cp-cta-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px; background: var(--red); color: #fff; border: none; border-radius: var(--r-lg); font-size: 15px; font-weight: 900; transition: background var(--t-fast), transform var(--t-fast); cursor: pointer; text-decoration: none; text-align: center; box-shadow: var(--shadow-red); }
.cp-cta-btn:hover { background: var(--red-dark); transform: translateY(-2px); color: #fff; }
.cp-cta-btn:active { transform: scale(.99); }
.cp-cta-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: #fff; color: var(--text); border: 1.5px solid var(--border-md); border-radius: var(--r-lg); font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: center; transition: all var(--t-fast); margin-top: 9px; text-decoration: none; }
.cp-cta-secondary:hover { border-color: var(--red); color: var(--red); }
.cp-add-cart-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: var(--black); color: #fff; border: none; border-radius: var(--r-lg); font-size: 13.5px; font-weight: 700; cursor: pointer; margin-top: 9px; transition: background var(--t-fast); }
.cp-add-cart-btn:hover { background: var(--red); }
.cp-qty-btn { width: 36px; height: 36px; border: 1.5px solid var(--border-md); border-radius: var(--r-md); background: #fff; color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; transition: all var(--t-fast); }
.cp-qty-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.cp-qty-btn:disabled { opacity: .32; cursor: not-allowed; }
.cp-delivery-section { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 18px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.cp-delivery-item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 130px; }
.cp-delivery-item i { font-size: 22px; color: var(--red); flex-shrink: 0; }
.cp-delivery-label { font-size: 12.5px; font-weight: 700; color: var(--black); line-height: 1.2; }
.cp-delivery-val { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.cp-trust-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cp-trust-row span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.cp-trust-row i { color: var(--red); font-size: 13px; }
.cp-share-btn { width: 34px; height: 34px; border: 1.5px solid var(--border-md); border-radius: 50%; background: #fff; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: all var(--t-fast); text-decoration: none; }
.cp-share-btn:hover { transform: scale(1.12); }
.cp-share-btn.wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
.cp-share-btn.fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.cp-share-btn.tw:hover { background: #000; border-color: #000; color: #fff; }
.cp-share-btn.copy:hover{ background: var(--red); border-color: var(--red); color: #fff; }
.cp-prod-tabs-wrap { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); margin-top: 24px; overflow: hidden; border: 1px solid var(--border); }
.cp-prod-tabs-nav { display: flex; border-bottom: 2px solid var(--border); overflow-x: auto; scrollbar-width: none; background: var(--gray-50); }
.cp-prod-tabs-nav::-webkit-scrollbar { display: none; }
.cp-tab-btn { padding: 14px 22px; font-size: 13.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; border: none; background: none; border-bottom: 3px solid transparent; transition: all var(--t-fast); cursor: pointer; display: flex; align-items: center; gap: 7px; margin-bottom: -2px; }
.cp-tab-btn:hover { color: var(--text); }
.cp-tab-btn.active { color: var(--red); border-bottom-color: var(--red); }
.cp-tab-pane { display: none; padding: 26px; }
.cp-tab-pane.active { display: block; }
.cp-prod-desc-body { font-size: 14px; color: var(--text-muted); line-height: 1.85; }
.cp-carac-table { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.cp-carac-row { display: grid; grid-template-columns: 200px 1fr; border-bottom: 1px solid var(--border); }
.cp-carac-row:last-child { border-bottom: none; }
.cp-carac-row.even { background: var(--gray-50); }
.cp-carac-label { padding: 11px 16px; font-size: 13px; font-weight: 700; color: var(--text); border-right: 1px solid var(--border); }
.cp-carac-val { padding: 11px 16px; font-size: 13px; color: var(--text-muted); }
.cp-kit-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; }
.cp-kit-item { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--gray-50); transition: border-color var(--t-fast); }
.cp-kit-item:hover { border-color: var(--red-mid); }
.cp-kit-item img { width: 62px; height: 62px; object-fit: contain; background: #fff; border-radius: var(--r-md); padding: 5px; flex-shrink: 0; border: 1px solid var(--border); }
.cp-kit-info-qty { font-size: 10.5px; font-weight: 700; color: var(--red); background: var(--red-light); padding: 2px 8px; border-radius: var(--r-pill); display: inline-block; margin-bottom: 5px; }
.cp-kit-info-name { font-size: 13px; font-weight: 700; color: var(--black); }
.cp-kit-info-brand { font-size: 11.5px; color: var(--text-muted); }
.cp-kit-info-price { font-size: 13px; font-weight: 900; color: var(--red); margin-top: 4px; }
.cp-similaires-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; padding: 8px; }
@media(max-width:1100px) { .cp-similaires-grid { grid-template-columns: repeat(4,1fr); } }
@media(max-width:767px) { .cp-similaires-grid { grid-template-columns: repeat(2,1fr); } }
/* ── Drawer mobile catalogue ──────────────────────────────── */
.cp-mob-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 1300; }
.cp-mob-overlay.open { display: block; animation: overlayIn .2s both; }
.cp-mob-drawer { position: fixed; left: -300px; top: 0; bottom: 0; width: 285px; max-width: 88vw; background: #fff; z-index: 1400; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); transition: left .3s var(--ease); }
.cp-mob-drawer.open { left: 0; }
.cp-mob-drawer-head { display: flex; align-items: center; gap: 12px; padding: 15px 16px; background: var(--red); }
.cp-mob-drawer-close { margin-left: auto; background: rgba(0,0,0,.2); border: none; color: #fff; font-size: 16px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cp-mob-drawer-close:hover { background: rgba(0,0,0,.35); }
.cp-mob-drawer-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.cp-mob-drawer-link { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--text); font-size: 13.5px; font-weight: 500; transition: all var(--t-fast); text-decoration: none; }
.cp-mob-drawer-link:hover,.cp-mob-drawer-link.active { background: var(--red-light); color: var(--red); }
.cp-mob-drawer-link i { font-size: 18px; width: 22px; color: var(--gray-400); flex-shrink: 0; }
.cp-mob-drawer-link:hover i,.cp-mob-drawer-link.active i { color: var(--red); }
.cp-mob-drawer-footer { border-top: 1px solid var(--border); padding: 8px 0; }
/* ── Utilitaires ──────────────────────────────────────────── */
.text-red { color: var(--red) !important; }
.bg-red { background: var(--red) !important; }
.bg-light-red { background: var(--red-light) !important; }
.text-cp-red { color: var(--red) !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }
.hover-shadow:hover { box-shadow: var(--shadow-lg) !important; }
.container-xl { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media(min-width:1400px) { .container-xl { max-width: 1360px; } }
/* ── Animations globales ──────────────────────────────────── */
.page-content { animation: pageIn .25s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
img.lazy { opacity: 0; transition: opacity .45s ease; }
img.lazy.loaded { opacity: 1; }
/* skeleton shimmer visible while lazy img is pending (img covers it once loaded) */
@keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="scale"].is-visible { transform: none; opacity: 1; }
[data-reveal].revealed { opacity: 1; transform: none; }
[data-delay="100"] { transition-delay: .10s; }
[data-delay="150"] { transition-delay: .15s; }
[data-delay="200"] { transition-delay: .20s; }
[data-delay="250"] { transition-delay: .25s; }
[data-delay="300"] { transition-delay: .30s; }
[data-delay="400"] { transition-delay: .40s; }
[data-delay="500"] { transition-delay: .50s; }
/* ── Spinner ──────────────────────────────────────────────── */
.cp-spinner { display: none; width: 22px; height: 22px; border: 3px solid rgba(255,0,0,.2); border-top-color: var(--red); border-radius: 50%; animation: spin .6s linear infinite; }
.cp-spinner.show { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb { background: transparent; padding: 0; margin: 0; flex-wrap: wrap; }
.breadcrumb-item { font-size: 13px; }
.breadcrumb-item+.breadcrumb-item::before { color: var(--gray-400); }
.breadcrumb-item.active { color: var(--gray-600); }
/* ── Offcanvas ────────────────────────────────────────────── */
.offcanvas { border-radius: 0 var(--r-xl) var(--r-xl) 0 !important; }
/* ── Responsive misc ──────────────────────────────────────── */
@media(max-width:767px) { .prod-gallery { position: static; } .cat-filter-box { position: static; } }
@media(max-width:576px) { .cp-table-wrap { overflow-x: auto; } .cp-table-wrap th,.cp-table-wrap td { white-space: nowrap; } }
#cat-products-grid { transition: opacity .2s; }
#cat-products-grid.fading { opacity: .3; pointer-events: none; }
/* ═══════════════════════════════════════════════════════════
MOBILE UX — REFONTE COMPLÈTE
1. Items panier (CSS manquant) + bottom-sheet drawer
2. Fiche produit : galerie sticky corrigée + CTA flottant
3. Catalogue : sort-bar, cartes, hero
═══════════════════════════════════════════════════════════ */
/* ── CART ITEMS ───────────────────────────────────────────── */
.jm-cart-item {
display: flex;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--border);
align-items: flex-start;
}
.jm-cart-item:last-child { border-bottom: none; }
.jm-ci-img {
width: 72px;
height: 72px;
object-fit: contain;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--gray-50);
padding: 6px;
flex-shrink: 0;
}
.jm-ci-info { flex: 1; min-width: 0; }
.jm-ci-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
line-height: 1.4;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.jm-ci-price {
font-size: 15px;
font-weight: 900;
color: var(--red);
margin-bottom: 3px;
}
.jm-ci-credit {
font-size: 11px;
color: var(--text-muted);
margin-bottom: 9px;
display: flex;
align-items: center;
gap: 4px;
}
.jm-ci-credit i { font-size: 10px; }
.jm-ci-controls {
display: inline-flex;
align-items: center;
background: var(--gray-100);
border-radius: var(--r-md);
overflow: hidden;
border: 1px solid var(--border);
}
.jm-ci-btn {
width: 34px;
height: 34px;
border: none;
background: transparent;
color: var(--text);
font-size: 18px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--t-fast), color var(--t-fast);
line-height: 1;
flex-shrink: 0;
}
.jm-ci-btn:hover { background: var(--red); color: #fff; }
.jm-ci-btn:active { transform: scale(.91); }
.jm-ci-qty {
min-width: 32px;
text-align: center;
font-size: 14px;
font-weight: 800;
color: var(--text);
padding: 0 2px;
}
.jm-ci-del {
width: 34px;
height: 34px;
border: 1.5px solid var(--border-md);
border-radius: var(--r-md);
background: transparent;
color: var(--text-muted);
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--t-fast);
margin-top: 2px;
align-self: flex-start;
}
.jm-ci-del:hover { background: var(--red-light); border-color: var(--red); color: var(--red); }
.jm-cart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
gap: 10px;
}
.jm-cart-empty i { font-size: 3.5rem; color: var(--gray-300); }
.jm-cart-empty p { font-size: 14px; color: var(--text-muted); margin: 0; }
.cp-cart-empty-btn {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--red);
color: #fff;
padding: 10px 22px;
border-radius: var(--r-md);
font-size: 13.5px;
font-weight: 700;
text-decoration: none;
margin-top: 6px;
transition: background var(--t-fast);
}
.cp-cart-empty-btn:hover { background: var(--red-dark); color: #fff; }
/* ── CART DRAWER — BOTTOM SHEET SUR MOBILE ────────────────── */
@media(max-width:767px) {
.jm-cart-drawer {
top: auto;
right: 0;
left: 0;
bottom: 0;
max-width: 100%;
max-height: 92vh;
border-radius: 20px 20px 0 0;
transform: translateY(105%);
transition: transform .38s cubic-bezier(0.16,1,0.3,1);
}
.jm-cart-drawer.open {
transform: translateY(0);
right: 0;
}
.jm-cart-head {
position: relative;
padding-top: 22px;
}
.jm-cart-head::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
background: var(--gray-300);
border-radius: 2px;
}
.jm-cart-footer {
padding: 14px 16px;
padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
}
.jm-cart-checkout-btn { height: 54px; font-size: 15px; border-radius: var(--r-lg); }
/* Bigger touch targets in cart on mobile */
.jm-ci-btn { width: 40px; height: 40px; font-size: 20px; }
.jm-ci-qty { min-width: 36px; font-size: 15px; }
.jm-ci-del { width: 40px; height: 40px; font-size: 16px; }
.jm-ci-img { width: 68px; height: 68px; }
}
/* ── FICHE PRODUIT MOBILE ─────────────────────────────────── */
@media(max-width:767px) {
/* Galerie : pas de sticky sur mobile */
.cp-gal-wrap { position: static !important; }
.cp-prod-name { font-size: 1.2rem; margin-bottom: 8px; }
.cp-prod-price-big { font-size: 1.55rem; margin: 8px 0; }
/* Formules : cibles tactiles plus grandes */
.cp-formula-opt { padding: 14px 13px; margin-bottom: 8px; }
/* Toggle paiement */
.cp-pay-toggle-btn { padding: 10px 8px; font-size: 12.5px; gap: 5px; }
/* Onglets */
.cp-tab-btn { padding: 11px 16px; font-size: 13px; }
.cp-tab-pane { padding: 18px 14px; }
/* Tableau caractéristiques : une colonne */
.cp-carac-row { grid-template-columns: 1fr; }
.cp-carac-label { border-right: none; padding-bottom: 2px; font-size: 12px; color: var(--text-muted); font-weight: 700; }
.cp-carac-val { padding-top: 2px; padding-bottom: 10px; font-size: 12.5px; }
.cp-carac-row.even .cp-carac-val { background: var(--gray-50); }
}
@media(max-width:576px) {
.cp-gal-strip { gap: 6px; }
.cp-gal-thumb { width: 58px; height: 58px; }
.cp-prod-short-desc { font-size: 13px; }
.cp-kit-grid { grid-template-columns: repeat(2,1fr); }
}
/* ── CTA FLOTTANT BAS DE PAGE — FICHE PRODUIT MOBILE ─────── */
.cp-mob-sticky-cta {
display: none;
position: fixed;
bottom: 68px; /* au-dessus de la bottom-nav */
left: 0;
right: 0;
z-index: 900;
background: var(--white);
border-top: 1.5px solid var(--border);
padding: 10px 16px;
gap: 12px;
align-items: center;
box-shadow: 0 -4px 20px rgba(0,0,0,.09);
}
@media(max-width:767px) { .cp-mob-sticky-cta { display: flex; } }
.cp-mob-sticky-price .price {
font-size: 1.1rem;
font-weight: 900;
color: var(--red);
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cp-mob-sticky-price .label {
font-size: 10px;
color: var(--text-muted);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cp-mob-sticky-btn {
display: flex;
align-items: center;
gap: 7px;
background: var(--red);
color: #fff;
padding: 12px 20px;
border-radius: var(--r-md);
font-size: 14px;
font-weight: 800;
border: none;
cursor: pointer;
white-space: nowrap;
transition: background var(--t-fast);
flex-shrink: 0;
text-decoration: none;
}
.cp-mob-sticky-btn:hover { background: var(--red-dark); color: #fff; }
/* ── Share buttons — horizontal row ──────────────────────── */
.cp-prod-share-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-prod-share-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 5px; white-space: nowrap; margin-right: 2px; }
/* ── HEADER MOBILE : logo centré, icons droite ────────────── */
@media(max-width:767px) {
.jm-search-wrap { display: none; }
.jm-header-inner {
gap: 8px;
position: relative;
justify-content: space-between;
}
.jm-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
pointer-events: auto;
z-index: 1;
}
/* Annuler le positionnement absolu hors de la navbar */
.jm-footer .jm-logo,
.cp-auth-mobile-top .jm-logo {
position: static;
transform: none;
left: auto;
z-index: auto;
}
}
/* ── CATALOGUE MOBILE ─────────────────────────────────────── */
@media(max-width:767px) {
/* Sort bar : masquer le label, empêcher le wrap */
.cp-sort-label { display: none; }
.cp-sort-bar-inner { gap: 8px; flex-wrap: nowrap; }
.cp-sort-select { flex: 1; min-width: 0; }
/* Catalogue hero : réduire padding */
.cp-cat-hero { padding: 14px 0 10px; }
.cp-cat-hero h1 { font-size: 1.25rem; margin-bottom: 5px; }
/* Floating filter : toujours au-dessus bottom-nav */
.cp-float-filter { bottom: 80px; }
}
@media(max-width:576px) {
/* Cartes produit : densité mobile */
.jm-card-body { padding: 7px 9px 9px; }
.jm-card-name { font-size: 12px; min-height: 30px; }
.jm-card-price { font-size: 14px; }
.jm-card-credit { font-size: 10px; }
.jm-card-add-btn {
margin: 0 6px 6px;
width: calc(100% - 12px);
padding: 8px 10px;
font-size: 12px;
gap: 4px;
}
.jm-badge { font-size: 9px; padding: 2px 6px; top: 5px; left: 5px; }
/* Grille : gap réduit */
.jm-prod-grid { gap: 5px; padding: 5px; }
/* Floating filter button */
.cp-float-filter-btn { padding: 10px 16px; font-size: 13px; }
/* List mode mobile */
.cp-cat-grid.cp-list-mode .jm-card { height: 100px; }
.cp-cat-grid.cp-list-mode .jm-card-img { width: 100px; height: 100px; }
.cp-cat-grid.cp-list-mode .jm-card-add-btn { padding: 7px 12px; font-size: 12px; margin: 0 8px 0 0; }
}
/* ═══════════════════════════════════════════════════════════
DESIGN ÉLÉVATION — ANIMATIONS & PREMIUM
═══════════════════════════════════════════════════════════ */
/* ── Hero slide : texte plus impactant ───────────────────── */
.jm-slide-h1 { text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.jm-slide-btn {
box-shadow: 0 4px 20px rgba(255,0,0,.45);
transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.jm-slide-btn:hover { box-shadow: 0 6px 28px rgba(255,0,0,.6); }
/* ── Header premium ──────────────────────────────────────── */
.jm-header { box-shadow: 0 2px 16px rgba(0,0,0,.08); }
.jm-search { border-radius: var(--r-lg) !important; box-shadow: var(--shadow-sm); }
.jm-search:focus-within { box-shadow: 0 0 0 3px rgba(255,0,0,.15), var(--shadow-sm); }
.jm-header-btn {
border-radius: var(--r-lg);
transition: all var(--t-fast);
}
.jm-header-btn:hover {
background: var(--red-light);
color: var(--red);
transform: translateY(-1px);
}
/* ── Cat bar améliorée ───────────────────────────────────── */
.jm-cat-bar { box-shadow: 0 3px 12px rgba(255,0,0,.2); }
/* ── Shortcuts catégories ────────────────────────────────── */
.jm-shortcut { transition: background var(--t-base), box-shadow var(--t-base); }
.jm-shortcut:hover { background: var(--red-light); }
.jm-shortcut-icon { box-shadow: var(--shadow-xs); }
/* ── Stats bar animée ────────────────────────────────────── */
.jm-stat-val { transition: color var(--t-base); }
.jm-stat-item:hover .jm-stat-val { color: #fff; filter: brightness(1.4); }
/* ── Flash head ─────────────────────────────────────────── */
.jm-flash-head {
background: #FF0000 !important;
position: relative;
overflow: hidden;
}
@keyframes shimmer {
0% { transform: translateX(-100%) skewX(-15deg); }
100% { transform: translateX(100%) skewX(-15deg); }
}
/* ── Add-to-cart button ──────────────────────────────────── */
.jm-card-add-btn {
position: relative;
overflow: hidden;
transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.jm-card-add-btn::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,.15);
transform: translateX(-100%);
transition: transform .3s;
}
.jm-card-add-btn:hover::after { transform: translateX(100%); }
.jm-card-add-btn.added { background: #059669; }
/* ── Announce bar desktop hide on scroll ─────────────────── */
.jm-announce { transition: all .3s; }
/* ── Hero banner images ──────────────────────────────────── */
.jm-img-banner {
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.jm-hero-banners .jm-img-banner { border-radius: var(--r-lg); border: none; box-shadow: var(--shadow-md); }
/* ── NEW ribbon amélioré ─────────────────────────────────── */
.cp-new-ribbon {
background: linear-gradient(135deg, var(--red), var(--red-dark));
font-size: 10px;
font-weight: 900;
letter-spacing: .6px;
animation: ribbonPop .4s var(--ease) both;
}
@keyframes ribbonPop { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
/* ── Cart drawer PREMIUM ────────────────────────────────── */
.jm-cart-head {
background: linear-gradient(135deg, var(--black), var(--gray-800));
border-bottom: none;
}
.jm-cart-head h5 { color: #fff; }
.jm-cart-count-lbl { color: rgba(255,255,255,.55); font-size: 11.5px; }
.jm-cart-head .jm-sm-close {
background: rgba(255,255,255,.12);
color: #fff;
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,.2);
font-size: 15px;
line-height: 1;
transition: all var(--t-fast);
}
.jm-cart-head .jm-sm-close:hover { background: var(--red); border-color: var(--red); }
.jm-cart-footer {
background: var(--white);
border-top: 1.5px solid var(--border);
}
.jm-cart-total-row { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.jm-cart-total-row strong { font-size: 20px; font-weight: 900; letter-spacing: -.5px; }
.jm-cart-checkout-btn {
background: linear-gradient(135deg, var(--red), var(--red-dark));
box-shadow: 0 4px 16px rgba(255,0,0,.35);
border-radius: var(--r-lg);
transition: all var(--t-base);
}
.jm-cart-checkout-btn:hover {
box-shadow: 0 6px 24px rgba(255,0,0,.5);
transform: translateY(-2px);
background: linear-gradient(135deg, var(--red-dark), #6B0000);
}
/* ── Product page premium ───────────────────────────────── */
.cp-cta-btn {
background: linear-gradient(135deg, var(--red), var(--red-dark));
box-shadow: 0 4px 18px rgba(255,0,0,.35);
transition: all var(--t-base);
}
.cp-cta-btn:hover {
background: linear-gradient(135deg, var(--red-dark), #6B0000);
box-shadow: 0 6px 26px rgba(255,0,0,.5);
transform: translateY(-2px);
color: #fff;
}
.cp-mob-sticky-btn {
background: linear-gradient(135deg, var(--red), var(--red-dark));
box-shadow: 0 3px 12px rgba(255,0,0,.3);
}
/* ── Pay logos footer ───────────────────────────────────── */
.jm-pay-logo {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
border-radius: var(--r-md);
padding: 6px 12px;
font-size: 11.5px;
font-weight: 600;
color: rgba(255,255,255,.7);
transition: all var(--t-fast);
}
.jm-pay-logo:hover { background: var(--red); border-color: var(--red); color: #fff; }
/* ── Sticky header shadow ───────────────────────────────── */
.jm-header.scrolled {
box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
/* ── Catalogue hero premium ─────────────────────────────── */
.cp-cat-hero {
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
border-bottom: 3px solid var(--red);
}
.cp-cat-hero h1 { text-shadow: 0 2px 8px rgba(0,0,0,.3); }
/* ── Sort bar améliorée ─────────────────────────────────── */
.cp-sort-bar {
background: linear-gradient(135deg, var(--gray-900), var(--gray-800));
box-shadow: 0 3px 12px rgba(0,0,0,.2);
}
/* ── Filter sidebar produit ─────────────────────────────── */
.cp-cat-sidebar { border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.cp-cat-sidebar-title { background: linear-gradient(135deg, var(--black), var(--gray-800)); color: #fff; border-bottom: 2px solid var(--red); }
/* ── Add to cart btn pressed animation ─────────────────── */
@keyframes cartAdd {
0% { transform: scale(1); }
50% { transform: scale(.93); }
100% { transform: scale(1); }
}
.jm-card-add-btn:active { animation: cartAdd .2s ease; }
/* ── WhatsApp FAB amélioré ──────────────────────────────── */
.jm-wa-fab {
box-shadow: 0 6px 24px rgba(37,211,102,.5);
border: 3px solid rgba(255,255,255,.3);
}
.jm-wa-fab::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid rgba(37,211,102,.3);
animation: waPing 2s ease-in-out infinite;
}
@keyframes waPing {
0%,100% { transform: scale(1); opacity: .6; }
50% { transform: scale(1.15); opacity: 0; }
}
/* ── Announce bar couleur ───────────────────────────────── */
.jm-announce {
background: linear-gradient(90deg, #0a0a0a, #1a0000, #0a0a0a);
border-bottom: 1px solid rgba(255,0,0,.2);
}
/* ── NEW : badge amélioré ───────────────────────────────── */
.count-badge {
background: rgba(255,0,0,.2);
color: var(--red);
border: 1px solid rgba(255,0,0,.35);
animation: badgePop .35s var(--ease) both;
}
@keyframes badgePop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* ── Pagination améliorée ───────────────────────────────── */
.cp-page-link { box-shadow: var(--shadow-xs); }
.cp-page-link.active { box-shadow: 0 4px 14px rgba(255,0,0,.3); }
/* ═══════════════════════════════════════════════════════════
DESIGN EXTRAORDINAIRE — ACCUEIL & FICHE PRODUIT
═══════════════════════════════════════════════════════════ */
/* ── Fiche produit : galerie premium ───────────────────────── */
.cp-gal-main {
border: 2px solid var(--red) !important;
box-shadow: 0 0 0 4px rgba(255,0,0,.06), var(--shadow-lg);
transition: box-shadow var(--t-base), border-color var(--t-base);
}
.cp-gal-main:hover { box-shadow: 0 0 0 6px rgba(255,0,0,.1), var(--shadow-xl); }
/* Thumbnails galerie */
.cp-gal-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cp-gal-thumb {
width: 66px; height: 66px; border-radius: var(--r-md); cursor: pointer;
border: 2px solid var(--border); background: var(--gray-50); padding: 4px;
object-fit: contain; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cp-gal-thumb.active,
.cp-gal-thumb:hover { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,0,0,.15); }
/* ── Fiche produit : panneau info premium ──────────────────── */
.cp-prod-info-panel {
background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
border-radius: var(--r-xl);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
padding: 28px 24px;
}
/* Nom produit */
.cp-prod-name {
font-size: 1.45rem;
font-weight: 900;
line-height: 1.25;
color: var(--black);
letter-spacing: -.5px;
margin-bottom: 10px;
}
/* Prix premium */
.cp-prod-price-main {
font-size: 2rem;
font-weight: 900;
color: var(--red);
letter-spacing: -1px;
line-height: 1;
}
/* ── Accueil : shortcut icons premium ──────────────────────── */
.jm-shortcut-label { font-weight: 700; color: var(--black); font-size: 12px; }
.jm-shortcut:hover .jm-shortcut-label { color: var(--red); }
/* ── Stats bar : nombres en rouge pulsant ──────────────────── */
.jm-stat-val { color: var(--red); font-size: 1.35rem; font-weight: 900; letter-spacing: -.5px; }
@keyframes statPop {
0%,100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.jm-stat-val { animation: statPop 3s ease-in-out infinite; }
/* ── Carousel : indicateurs premium ───────────────────────── */
.jm-carousel .carousel-indicators button {
width: 24px; height: 4px; border-radius: 2px;
background: rgba(255,255,255,.4); border: none; opacity: 1;
transition: all .3s;
}
.jm-carousel .carousel-indicators button.active {
width: 36px; background: #fff;
box-shadow: 0 0 8px rgba(255,255,255,.6);
}
/* ── Section accueil : cartes avec glass-card effect ──────── */
.jm-section-wrap {
background: rgba(255,255,255,.8);
backdrop-filter: blur(8px);
border-radius: var(--r-xl);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
/* ── Séparateurs de sections premium ───────────────────────── */
.jm-section-head {
background: linear-gradient(90deg, rgba(255,0,0,.04) 0%, transparent 60%);
}
/* ── Card add-to-cart : bouton panier premium ─────────────── */
.jm-card-add-btn {
background: linear-gradient(135deg, var(--red) 0%, #CC0000 100%);
border-radius: var(--r-md);
font-weight: 700;
letter-spacing: .2px;
color: #fff;
border: none;
}
.jm-card-add-btn:hover {
background: linear-gradient(135deg, #CC0000 0%, #990000 100%);
box-shadow: 0 6px 20px rgba(255,0,0,.4);
transform: translateY(-2px);
color: #fff;
}
/* ── Fiche produit : bouton panier primary ────────────────── */
.cp-add-cart-btn.cp-cta-btn {
background: linear-gradient(135deg, var(--red) 0%, #CC0000 100%) !important;
color: #fff !important;
box-shadow: 0 6px 24px rgba(255,0,0,.4) !important;
letter-spacing: .3px;
}
.cp-add-cart-btn.cp-cta-btn:hover {
background: linear-gradient(135deg, #CC0000 0%, #990000 100%) !important;
box-shadow: 0 8px 32px rgba(255,0,0,.55) !important;
transform: translateY(-3px) !important;
}
.cp-add-cart-btn.cp-cta-btn.added {
background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
box-shadow: 0 6px 20px rgba(5,150,105,.35) !important;
}
/* ── cp-cta-secondary : bouton secondaire raffiné ────────── */
.cp-cta-secondary {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 46px;
border-radius: 12px;
border: 2px solid var(--red);
color: var(--red);
font-size: 13.5px;
font-weight: 700;
text-decoration: none;
transition: all var(--t-fast);
background: transparent;
}
.cp-cta-secondary:hover {
background: var(--red);
color: #fff;
box-shadow: 0 4px 16px rgba(255,0,0,.3);
transform: translateY(-1px);
}
/* ── Flash ventes : titre premium ─────────────────────────── */
.jm-flash-head h3 {
text-shadow: 0 1px 4px rgba(0,0,0,.2);
font-size: 1.1rem;
}
.jm-flash-head h3 i { animation: flashBlink .8s ease-in-out infinite alternate; }
@keyframes flashBlink {
from { opacity: .7; transform: scale(.95); }
to { opacity: 1; transform: scale(1.1); }
}
/* ── Home grid : aligner parfaitement les trois colonnes ──── */
.jm-home-grid { align-items: stretch; }
.jm-home-grid > * { min-height: 0; }
/* ── Announcement bar : ticker plus lisse ─────────────────── */
.jm-ticker-item { font-size: 13px; }
/* ── Mobile sticky CTA : premium ─────────────────────────── */
.cp-mob-sticky-cta {
backdrop-filter: blur(12px);
border-top: 2px solid var(--red);
background: rgba(255,255,255,.97);
box-shadow: 0 -4px 24px rgba(0,0,0,.12);
}
/* ── Product page : livraison section ─────────────────────── */
.cp-delivery-section {
background: var(--gray-50);
border-radius: var(--r-lg);
padding: 16px;
margin-top: 18px !important;
border: 1px solid var(--border) !important;
}
/* ── Trust row : badges plus visibles ─────────────────────── */
.cp-trust-row span {
background: var(--red-light);
border-radius: var(--r-pill);
padding: 5px 12px;
border: 1px solid rgba(255,0,0,.15);
color: var(--red);
font-weight: 600;
}
.cp-trust-row i { color: var(--red); }
/* ── Share buttons : premium spacing ──────────────────────── */
.cp-prod-share-row { margin-top: 16px; }
.cp-share-btn {
width: 36px; height: 36px;
border: 1.5px solid var(--red);
color: var(--red);
transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.cp-share-btn:hover { transform: scale(1.18) rotate(-5deg); }
/* ── Mobile : bottom nav premium ─────────────────────────── */
@media(max-width:767px) {
.jm-bot-nav {
box-shadow: 0 -4px 20px rgba(0,0,0,.12);
border-top: 2px solid rgba(255,0,0,.15);
}
.jm-bot-nav-item.active { color: var(--red); }
.jm-bot-nav-item.active i { text-shadow: 0 0 8px rgba(255,0,0,.4); }
}
/* ── Fiche produit : tabs premium ─────────────────────────── */
.cp-prod-tabs-wrap {
border: 1px solid var(--red) !important;
box-shadow: var(--shadow-md) !important;
}
.cp-tab-btn.active {
background: linear-gradient(180deg, var(--red-light) 0%, transparent 100%);
}
/* ── Kit items : border accent ────────────────────────────── */
.cp-kit-item { border-color: var(--border); }
.cp-kit-item:hover { border-color: var(--red); box-shadow: 0 4px 16px rgba(255,0,0,.1); }
/* ── Caractéristiques : zebra amélioré ────────────────────── */
.cp-carac-row.even { background: rgba(255,0,0,.02); }
.cp-carac-label { color: var(--black); font-weight: 700; }
/* ── Mobile header : z-index sécurisé pour logo centré ────── */
@media(max-width:767px) {
.jm-hamburger { z-index: 2; }
.cp-nav-icons { z-index: 2; position: relative; gap: 6px !important; }
}
/* ── Payment toggle : cash vs credit premium ─────────────── */
.cp-pay-toggle {
display: flex; gap: 6px;
background: var(--gray-100); border-radius: var(--r-lg);
padding: 5px; margin-bottom: 16px;
border: 1.5px solid var(--border);
}
.cp-pay-toggle-btn {
flex: 1; padding: 11px 8px; border: none; border-radius: var(--r-md);
font-size: 13px; font-weight: 700; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 7px;
background: transparent; color: var(--text-muted);
transition: all var(--t-fast);
}
.cp-pay-toggle-btn.active {
background: #fff; color: var(--red);
box-shadow: 0 2px 12px rgba(0,0,0,.1);
border: 1.5px solid var(--red);
}
.cp-pay-toggle-btn:not(.active):hover { color: var(--text); background: rgba(255,255,255,.6); }
#cp-btn-credit.active { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff; border: none; box-shadow: 0 4px 16px rgba(255,0,0,.3); }
#cp-btn-cash.active { background: linear-gradient(135deg, #059669, #047857); color: #fff; border: none; box-shadow: 0 4px 16px rgba(5,150,105,.3); }
/* ── Pay section title ──────────────────────────────────── */
.cp-pay-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 10px; }
/* ── Cash box premium ───────────────────────────────────── */
.cp-cash-box {
background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
border: 2px solid #6EE7B7;
border-radius: var(--r-lg); padding: 20px 18px;
display: flex; justify-content: space-between; align-items: center;
}
.cp-cash-box-price { font-size: 1.6rem; font-weight: 900; color: #059669; letter-spacing: -.5px; }
.cp-cash-box-label { font-size: 12px; color: #047857; font-weight: 600; margin-top: 2px; }
/* ── Catalogue list mode mobile ─────────────────────────── */
@media(max-width:576px) {
.cp-cat-grid.cp-list-mode .jm-card { height: 110px; }
.cp-cat-grid.cp-list-mode .jm-card-img { width: 110px; height: 110px; }
.cp-cat-grid.cp-list-mode .jm-card-add-btn { padding: 8px 12px; font-size: 12px; margin: 0 8px 0 0; }
.cp-cat-grid.cp-list-mode .jm-card-name { font-size: 13px; }
.cp-cat-grid.cp-list-mode .jm-card-price { font-size: 15px; }
/* Float filter : centré sur mobile */
.cp-float-filter { bottom: 76px; }
}
/* ── Float filter on pages without bottom nav ───────────── */
@media(min-width:768px) {
.cp-float-filter { bottom: 24px; }
}
/* ── Home page : animations avancées ───────────────────── */
@keyframes slideInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
from { opacity: 0; transform: scale(.96); }
to { opacity: 1; transform: scale(1); }
}
@keyframes floatUpDown {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Sections accueil : entrée animée */
[data-reveal] { animation: slideInUp .6s var(--ease) both; }
[data-reveal]:nth-child(2) { animation-delay: .1s; }
[data-reveal]:nth-child(3) { animation-delay: .2s; }
[data-reveal]:nth-child(4) { animation-delay: .3s; }
/* Cards : animation d'entrée avec stagger */
.cp-cat-card { animation: fadeInScale .4s var(--ease) both; animation-delay: var(--ci, 0s); }
/* Section head : position relative for animated bar */
.jm-section-head { position: relative; overflow: hidden; }
/* Trust items : float animation */
.jm-trust-item:nth-child(1) { animation: floatUpDown 3.5s ease-in-out infinite; }
.jm-trust-item:nth-child(2) { animation: floatUpDown 3.5s ease-in-out infinite .5s; }
.jm-trust-item:nth-child(3) { animation: floatUpDown 3.5s ease-in-out infinite 1s; }
.jm-trust-item:nth-child(4) { animation: floatUpDown 3.5s ease-in-out infinite 1.5s; }
/* Product cards : stagger + pop */
.jm-card { animation: fadeInScale .35s var(--ease) both; }
/* Announce bar : slide in */
.jm-announce { animation: slideInUp .4s var(--ease) both; }
/* Header : premium gradient on scroll */
.jm-header.scrolled {
background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.97) 100%);
backdrop-filter: blur(12px);
}
/* HOW IT WORKS section — float icons */
.jm-hiw-icon { animation: floatUpDown 4s ease-in-out infinite; }
.jm-hiw-item:nth-child(2) .jm-hiw-icon { animation-delay: .8s; }
.jm-hiw-item:nth-child(3) .jm-hiw-icon { animation-delay: 1.6s; }
.jm-hiw-item:nth-child(4) .jm-hiw-icon { animation-delay: 2.4s; }
/* ═══════════════════════════════════════════════════════════
PAYMENT TOGGLE — VISIBILITÉ MAXIMALE
═══════════════════════════════════════════════════════════ */
/* Conteneur toggle repensé */
.cp-pay-toggle {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
background: transparent !important;
padding: 0 !important;
border: none !important;
margin-bottom: 18px !important;
}
/* Bouton non sélectionné : clairement visible */
.cp-pay-toggle-btn {
flex: unset;
height: 56px;
border-radius: var(--r-lg) !important;
font-size: 13.5px !important;
font-weight: 700 !important;
border: 2px solid var(--border-md) !important;
background: #fff !important;
color: var(--text) !important;
box-shadow: var(--shadow-xs);
transition: all var(--t-fast) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.cp-pay-toggle-btn:not(.active):hover {
border-color: var(--red) !important;
color: var(--red) !important;
box-shadow: 0 4px 16px rgba(255,0,0,.12) !important;
transform: translateY(-1px);
}
/* Bouton crédit actif — rouge */
#cp-btn-credit.active {
background: linear-gradient(135deg, var(--red) 0%, #CC0000 100%) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 6px 20px rgba(255,0,0,.4) !important;
transform: translateY(-1px);
}
/* Bouton cash actif — vert */
#cp-btn-cash.active {
background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 6px 20px rgba(5,150,105,.4) !important;
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════════════
FONDS ANIMÉS — SITE ENTIER
═══════════════════════════════════════════════════════════ */
/* ── Fond du body : warm off-white, change de couleur au scroll (via JS) ── */
body {
background-color: #F4F2F0;
background-image:
radial-gradient(ellipse 90% 50% at 50% 0%, rgba(200,16,46,.10) 0%, transparent 65%);
background-attachment: fixed;
transition: background-color .7s ease;
}
/* ── Page hero (accueil) : fond animé ── */
.jm-section-wrap {
background: rgba(255,255,255,.9);
backdrop-filter: blur(4px);
}
/* ── Announce bar : gradient défilant ── */
.jm-announce {
background: linear-gradient(90deg, #0a0a0a 0%, #1a0000 25%, #0a0a0a 50%, #1a0000 75%, #0a0a0a 100%);
background-size: 200% 100%;
animation: announceGrad 6s linear infinite;
}
@keyframes announceGrad {
0% { background-position: 200% 0; }
100% { background-position: 0% 0; }
}
/* ── Cat bar inner : overflow-x:auto conservé pour le scroll mobile ── */
.jm-cat-bar-inner { position: relative; overflow-x: auto; overflow-y: hidden; }
.jm-cat-bar-inner::after {
content: '';
position: absolute;
bottom: 0; left: 0; width: 100%; height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
transform: translateX(-100%);
animation: catBarShimmer 3.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes catBarShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ── Hero slides : backdrop flouté (zones vides autour de l'image) ── */
.jm-slide-bg::before {
content: '';
position: absolute;
inset: -40px;
z-index: 0;
background-image: var(--sb-img, none);
background-size: cover;
background-position: center;
filter: blur(28px);
opacity: .7;
transform: scale(1.08);
}
/* Slide sans texte : image nette, sans assombrissement */
.jm-slide--plain .jm-slide-bg::after { display: none; }
.jm-slide--plain .jm-slide-panel { display: none; }
/* ── Flash section : pulse rouge ── */
.jm-flash-head::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,.15) 0%, transparent 60%);
animation: flashPulse 2s ease-in-out infinite alternate;
}
@keyframes flashPulse {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── Product page : fond de section premium ── */
.cp-prod-page-wrap {
background: linear-gradient(180deg, #fff5f5 0%, #ffffff 30%);
}
/* ── Section head : ligne rouge animée ── */
.jm-section-head {
position: relative;
overflow: hidden;
}
.jm-section-head::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0; width: 5px;
background: linear-gradient(180deg, var(--red), rgba(255,0,0,.3) 50%, var(--red));
background-size: 100% 200%;
animation: leftBarFlow 2s ease-in-out infinite;
}
@keyframes leftBarFlow {
0%,100% { background-position: 0% 0%; }
50% { background-position: 0% 100%; }
}
/* ── Stat items : entrée échelonnée ── */
.jm-stat-item { opacity: 0; animation: statEntry .6s var(--ease) both; }
.jm-stat-item:nth-child(1) { animation-delay: .1s; }
.jm-stat-item:nth-child(2) { animation-delay: .2s; }
.jm-stat-item:nth-child(3) { animation-delay: .3s; }
.jm-stat-item:nth-child(4) { animation-delay: .4s; }
@keyframes statEntry { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
/* ── Cards accueil : animation continue sur hover ── */
.jm-card:hover .jm-card-img img { animation: imgPan 8s ease-in-out infinite alternate; }
@keyframes imgPan {
from { transform: scale(1.08) translateX(-2%); }
to { transform: scale(1.12) translateX(2%); }
}
/* ── Footer : particules CSS (pseudoéléments) ── */
.jm-footer { position: relative; overflow: hidden; }
.jm-footer::before {
content: '';
position: absolute;
top: -40%; right: -10%;
width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,0,0,.08) 0%, transparent 65%);
animation: footerOrb1 8s ease-in-out infinite alternate;
}
.jm-footer::after {
content: '';
position: absolute;
bottom: -20%; left: -5%;
width: 240px; height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,0,0,.06) 0%, transparent 65%);
animation: footerOrb2 10s ease-in-out infinite alternate;
}
@keyframes footerOrb1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-30px,20px) scale(1.15); } }
@keyframes footerOrb2 { from { transform: translate(0,0) scale(1); } to { transform: translate(20px,-20px) scale(1.1); } }
/* ── Cat bar : PAS de overflow:hidden (le mega menu est absolu à l'intérieur) ── */
/* Le shimmer est clipé par jm-cat-bar-inner ci-dessous */
/* ── Hero grid : fond légèrement dégradé ── */
.jm-home-grid-wrap,
.container-xl > .jm-home-grid {
position: relative;
}
/* ── Section accueil : trait animé bas ── */
.jm-section-wrap { position: relative; }
.jm-section-wrap::after {
content: '';
position: absolute;
bottom: 0; left: 5%; right: 5%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,0,0,.2), transparent);
}
/* ── Boutons CTA : glow pulsant au repos ── */
.cp-cta-btn {
animation: ctaGlow 3s ease-in-out infinite;
}
@keyframes ctaGlow {
0%,100% { box-shadow: 0 4px 18px rgba(255,0,0,.35); }
50% { box-shadow: 0 6px 28px rgba(255,0,0,.55); }
}
.cp-cta-btn:hover { animation: none; }
/* ── Product panel : fond dégradé chaud ── */
.cp-prod-panel {
background: linear-gradient(180deg, #ffffff 0%, #fffaf9 100%) !important;
}
/* ── Thumbnails galerie : zoom au hover ── */
.cp-gal-strip .cp-gal-thumb img { transition: transform var(--t-fast); }
.cp-gal-strip .cp-gal-thumb:hover img { transform: scale(1.08); }
/* ── Badge stock : pulsation verte ── */
.cp-stock-ok { animation: stockPulse 2.5s ease-in-out infinite; }
@keyframes stockPulse {
0%,100% { color: #059669; }
50% { color: #047857; filter: brightness(1.1); }
}
/* ── Prix : apparition ── */
.cp-prod-price-big {
animation: priceAppear .5s var(--ease) both;
}
@keyframes priceAppear {
from { opacity: 0; transform: scale(.9) translateX(-10px); }
to { opacity: 1; transform: scale(1) translateX(0); }
}
/* ── Loading skeleton style (futur) ── */
@keyframes skeleton {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}
/* ── Mobile product page ── */
@media(max-width:767px) {
.cp-prod-panel { padding: 18px 16px; border-radius: var(--r-lg); }
.cp-pay-toggle { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
.cp-pay-toggle-btn { height: 48px !important; font-size: 12.5px !important; }
/* Galerie pleine largeur — container padding = 12px / col gutter = 8px → contenu à 12px du bord */
.cp-gal-wrap {
margin-left: -12px;
margin-right: -12px;
width: calc(100% + 24px);
}
.cp-gal-main {
aspect-ratio: 1/1 !important;
max-height: none !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
.cp-gal-strip { padding: 8px 12px; }
}
/* ── Stock bar produit : plus haute que la version carte ── */
.cp-prod-panel .jm-stock-bar {
height: 6px;
margin-top: 8px;
background: var(--gray-100);
border-radius: var(--r-pill);
overflow: hidden;
}
.cp-prod-panel .jm-stock-fill {
height: 100%;
border-radius: var(--r-pill);
transition: width .6s var(--ease);
}
/* ── Logo image (remplace le texte partout) ── */
@media(max-width:767px) { .jm-logo img { height: 30px; } }
.jm-sm-head .jm-logo img { height: 32px; background: #fff; border-radius: 6px; padding: 3px 6px; }
.jm-footer .jm-logo img { height: 42px; border-radius: 8px; padding: 5px 10px; background: rgba(255,255,255,.92); }
/* ═══════════════════════════════════════════════════════════
SECTION HEADS — BANDES COLORÉES PAR THÈME
═══════════════════════════════════════════════════════════ */
/* Base commune pour tous les section heads colorés */
.jm-sh-new, .jm-sh-best, .jm-sh-kits, .jm-sh-elec, .jm-sh-tel, .jm-sh-trending {
color: #fff;
border-bottom: none;
}
.jm-sh-new h3, .jm-sh-best h3, .jm-sh-kits h3, .jm-sh-elec h3, .jm-sh-tel h3, .jm-sh-trending h3 { color: #fff !important; }
.jm-sh-new .see-all, .jm-sh-best .see-all, .jm-sh-kits .see-all,
.jm-sh-elec .see-all, .jm-sh-tel .see-all, .jm-sh-trending .see-all {
color: #fff !important;
border-color: #000 !important;
background: #000 !important;
}
.jm-sh-new .see-all:hover, .jm-sh-best .see-all:hover, .jm-sh-kits .see-all:hover,
.jm-sh-elec .see-all:hover, .jm-sh-tel .see-all:hover, .jm-sh-trending .see-all:hover {
background: #1a1a1a !important;
color: #fff !important;
border-color: #1a1a1a !important;
}
/* Override left bar (was red on gray bg) */
.jm-sh-new::before, .jm-sh-best::before, .jm-sh-kits::before,
.jm-sh-elec::before, .jm-sh-tel::before, .jm-sh-trending::before {
background: rgba(255,255,255,.4) !important;
}
/* Tous les section heads colorés → rouge vif */
.jm-sh-new { background: #FF0000; }
.jm-sh-best { background: #FF0000; }
.jm-sh-kits { background: #FF0000; }
.jm-sh-elec { background: #FF0000; }
.jm-sh-tel { background: #FF0000; }
/* Badge NEW */
.jm-sh-badge {
font-size: 10px; font-weight: 800; letter-spacing: .5px;
background: rgba(255,255,255,.25); color: #fff;
padding: 2px 9px; border-radius: 20px; margin-left: 8px;
border: 1px solid rgba(255,255,255,.35);
}
/* ── Footer : colonne logo légèrement plus claire ── */
.jm-footer-about-col {
background: rgba(255,255,255,.045);
border-radius: 12px;
padding: 20px !important;
border-bottom: 1px solid rgba(255,255,255,.07);
}
/* ── Fiche produit : gap réduit entre galerie et panel ── */
.cp-prod-page-wrap .row { --bs-gutter-x: 12px; }
/* ── Mob-nav client : 5 colonnes ── */
.mob-nav--client {
grid-template-columns: repeat(5, 1fr) !important;
}
.mob-nav--client .mob-nav-item {
font-size: 9.5px !important;
padding: 6px 2px !important;
gap: 2px !important;
}
.mob-nav--client .mob-nav-item i {
font-size: 20px !important;
}
/* ═══════════════════════════════════════════════════════════
FAVORIS — drawer + bouton header
═══════════════════════════════════════════════════════════ */
.jm-fav-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.45);
z-index: 1299; opacity: 0; pointer-events: none;
transition: opacity var(--t-med);
}
.jm-fav-overlay.open { opacity: 1; pointer-events: auto; }
.jm-fav-drawer {
position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw);
background: #fff; z-index: 1300; display: flex; flex-direction: column;
transform: translateX(100%); transition: transform var(--t-med) var(--ease);
box-shadow: -8px 0 40px rgba(0,0,0,.18);
}
.jm-fav-drawer.open { transform: translateX(0); }
.jm-fav-head {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px; border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.jm-fav-head h5 { margin: 0; font-size: 16px; font-weight: 800; color: var(--black); display: flex; align-items: center; gap: 8px; }
.jm-fav-count-lbl { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
#jm-fav-items { flex: 1; overflow-y: auto; }
.jm-fav-item {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.jm-fav-item img {
width: 56px; height: 56px; object-fit: contain;
border-radius: var(--r-sm); border: 1px solid var(--border);
flex-shrink: 0; background: #fafafa;
}
.jm-fav-info { flex: 1; min-width: 0; }
.jm-fav-info .fav-name { font-size: 13px; font-weight: 600; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-fav-info .fav-price { font-size: 12.5px; color: var(--red); font-weight: 700; margin-top: 3px; }
.jm-fav-actions { display: flex; gap: 6px; flex-shrink: 0; }
.jm-fav-actions .fav-voir {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: var(--r-sm);
background: var(--red); color: #fff; font-size: 14px;
transition: background var(--t-fast);
}
.jm-fav-actions .fav-voir:hover { background: var(--red-dark); }
.jm-fav-actions .fav-del {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: var(--r-sm);
background: var(--gray-100); color: var(--text-muted); font-size: 13px;
border: none; cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.jm-fav-actions .fav-del:hover { background: #FFEAEA; color: var(--red); }
/* Bouton favori sur les cartes produit — hors du , positionné sur .jm-card */
.cp-fav-btn {
position: absolute; top: 8px; right: 8px; z-index: 10;
width: 30px; height: 30px; border-radius: 50%;
background: rgba(255,255,255,.92); border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 15px; color: var(--text-muted);
box-shadow: 0 2px 8px rgba(0,0,0,.15);
transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.cp-fav-btn:hover { color: var(--red); background: #fff; transform: scale(1.12); }
.cp-fav-btn.active { color: var(--red); background: #fff; }
.cp-fav-btn.active i { font-weight: 900; }
/* ═══════════════════════════════════════════════════════════
SLIDER KITS TENDANTS
═══════════════════════════════════════════════════════════ */
.jm-sh-trending { background: #000; }
.cp-kits-slider {
display: flex; gap: 10px; overflow-x: auto;
padding: 12px; scrollbar-width: none;
-webkit-overflow-scrolling: touch; cursor: grab;
}
.cp-kits-slider::-webkit-scrollbar { display: none; }
.cp-kits-slider .jm-card { flex: 0 0 195px; min-width: 0; }
@media(max-width:767px) { .cp-kits-slider .jm-card { flex: 0 0 160px; } }
/* ═══════════════════════════════════════════════════════════
SECTION NOTRE MARQUE
═══════════════════════════════════════════════════════════ */
.cp-brand-section {
border-radius: var(--r-lg); overflow: hidden;
margin-bottom: 10px;
}
.cp-brand-head {
background: #000;
padding: 14px 20px;
display: flex; align-items: center; gap: 10px;
font-size: 1.05rem; font-weight: 900; color: #fff;
letter-spacing: -.2px;
}
.cp-brand-head i { font-size: 1.1rem; }
.cp-brand-slider-wrap {
background: #fff;
border: 1px solid var(--border); border-top: none;
border-radius: 0 0 var(--r-lg) var(--r-lg);
overflow: hidden;
}
.cp-brand-slider {
display: flex; gap: 12px; overflow-x: auto;
padding: 18px 16px; scrollbar-width: none;
-webkit-overflow-scrolling: touch; cursor: grab;
}
.cp-brand-slider::-webkit-scrollbar { display: none; }
.cp-brand-card {
flex: 0 0 130px; scroll-snap-align: start;
display: flex; flex-direction: column; align-items: center;
gap: 8px; padding: 16px 12px; border-radius: var(--r-md);
border: 1px solid var(--border); background: var(--gray-50);
text-decoration: none; transition: all var(--t-fast);
cursor: pointer;
}
.cp-brand-card:hover {
border-color: var(--red); background: #fff6f6;
transform: translateY(-2px); box-shadow: 0 6px 20px rgba(200,16,46,.15);
}
.cp-brand-initial {
width: 52px; height: 52px; border-radius: 50%;
background: linear-gradient(135deg, #C8102E, #8B0000);
color: #fff; font-size: 20px; font-weight: 900;
display: flex; align-items: center; justify-content: center;
letter-spacing: 0; flex-shrink: 0;
}
.cp-brand-logo {
width: 72px; height: 52px;
object-fit: contain; object-position: center;
flex-shrink: 0;
}
.cp-brand-name {
font-size: 12.5px; font-weight: 700; color: var(--black);
text-align: center; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; width: 100%;
}
.cp-brand-count {
font-size: 10.5px; color: var(--text-muted);
}
@media(max-width:767px) { .cp-brand-card { flex: 0 0 110px; } }
/* ═══════════════════════════════════════════════════════════
CORRECTIONS MOBILE TÉLÉPHONE (≤575px)
═══════════════════════════════════════════════════════════ */
/* 1. Logo : décalé à gauche pour ne plus chevaucher les icônes */
@media(max-width:575px) {
.jm-header .jm-logo { transform: translateX(calc(-50% - 36px)); }
.jm-header .jm-logo img { height: 26px; }
#jm-help-dd { display: none; }
}
/* 2. Grilles produits : 1 colonne sur téléphone */
@media(max-width:575px) {
.jm-prod-grid { grid-template-columns: 1fr !important; }
.cp-cat-grid { grid-template-columns: 1fr !important; }
}
/* 3. Chips de filtre : tronquer sur mobile */
@media(max-width:575px) {
.cp-chip { max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
/* 4. Résultats recherche mobile : positionnement */
.jm-mob-search { position: relative; }
/* ── Raccourcis catégories : photos illustratives ─────────────
Remplace les icônes Bootstrap par les photos produits.
─────────────────────────────────────────────────────────── */
.jm-shortcut-icon {
width: 100% !important;
aspect-ratio: 1 !important;
height: auto !important;
border-radius: 10px !important;
overflow: hidden !important;
border: none !important;
background: var(--gray-50) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
transition: box-shadow .3s ease !important;
}
.jm-shortcut-icon img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 0;
transition: transform .45s cubic-bezier(.25,.46,.45,.94);
will-change: transform;
}
/* Zoom en avant au survol */
.jm-shortcut:hover .jm-shortcut-icon img { transform: scale(1.14); }
/* Fallback icône sans image */
.jm-shortcut-icon i { font-size: 32px; color: var(--red); }
/* ═══════════════════════════════════════════════════════════
ACCESSIBILITÉ & UX UNIVERSELLE
═══════════════════════════════════════════════════════════ */
/* ── Focus visible — WCAG 2.1 AA (2.4.7) ───────────────────── */
:focus-visible {
outline: 2px solid var(--red);
outline-offset: 3px;
border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* ── Touch targets ≥ 44 × 44 px — WCAG 2.5.5 ──────────────── */
@media (max-width:767px) {
.jm-card-add-btn { min-height: 44px; }
.jm-card-btn { min-height: 44px; }
.cp-fav-btn { min-height: 44px; min-width: 44px; }
.jm-header-btn { min-height: 44px; }
.jm-hamburger { min-height: 44px; min-width: 44px; }
}
/* ── prefers-reduced-motion : stopper toutes les animations ─── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.jm-ticker-inner { animation: none !important; }
[data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
.jm-stat-item { animation: none !important; opacity: 1 !important; }
.jm-trust-item { animation: none !important; }
.jm-hiw-icon { animation: none !important; }
.cp-cta-btn { animation: none !important; }
.jm-section-head::before,
.jm-flash-head::before,
.jm-footer::before,
.jm-footer::after,
.jm-announce,
.jm-cat-bar-inner::after { animation: none !important; }
}
/* ── Trust strip mobile : padding compact ───────────────────── */
@media (max-width:576px) {
.jm-trust-item { padding: 12px 10px; gap: 8px; }
.jm-trust-item-icon { width: 38px; height: 38px; }
.jm-trust-item-icon i { font-size: 17px; }
.jm-trust-item .ti { font-size: 11.5px; }
.jm-trust-item .ts { font-size: 10px; margin-top: 1px; }
}
@media (max-width:480px) {
.jm-shortcut { flex: 0 0 110px !important; width: 110px !important; height: 110px !important; padding: 6px !important; }
}
/* ── Site public : fond animé + conteneur rétréci ──────────── */
body.cp-public {
background-repeat: repeat;
background-size: auto;
background-attachment: fixed;
background-position: center center;
}
body.cp-public .container-xl {
max-width: var(--cp-cont-w, 80%) !important;
}
@media (max-width: 991px) {
body.cp-public .container-xl { max-width: 100% !important; }
}
/* ═══════════════════════════════════════════════════════════
ESPACE CLIENT — COMPOSANTS PANIER & COMMANDE
═══════════════════════════════════════════════════════════ */
/* ── Indicateur d'étapes ────────────────────────────────────── */
.cp-steps {
display: flex; align-items: center; gap: 0;
margin-bottom: 28px; padding: 16px 0;
}
.cp-step { display: flex; align-items: center; gap: 8px; }
.cp-step-num {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; flex-shrink: 0;
background: var(--gray-200); color: var(--text-muted);
transition: all var(--t-fast);
}
.cp-step.active .cp-step-num { background: var(--red); color: #fff; box-shadow: 0 0 0 4px rgba(255,0,0,.18); }
.cp-step-lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.cp-step.active .cp-step-lbl { color: var(--red); font-weight: 700; }
.cp-step-sep { flex: 1; height: 2px; background: var(--border); min-width: 24px; margin: 0 8px; border-radius: 2px; }
/* ── Cartes formule de financement ──────────────────────────── */
.cp-formula-card {
display: block; position: relative; cursor: pointer;
border: 2px solid var(--border); border-radius: var(--r-lg);
padding: 14px 16px; background: #fff;
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
user-select: none;
}
.cp-formula-card:hover {
border-color: var(--red-mid); background: var(--red-light);
}
.cp-formula-card.active {
border-color: var(--red); background: #fff8f8;
box-shadow: 0 0 0 3px rgba(255,0,0,.12);
}
/* Faux bouton radio */
.cp-formula-radio {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--gray-300); background: #fff;
flex-shrink: 0; position: relative;
transition: all var(--t-fast);
}
.cp-formula-radio.checked {
border-color: var(--red); background: var(--red);
}
.cp-formula-radio.checked::after {
content: '';
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
width: 6px; height: 6px; border-radius: 50%;
background: #fff; margin: auto;
}
/* ── Bouton supprimer article panier ────────────────────────── */
.cp-qty-del {
width: 28px; height: 28px; border-radius: var(--r-sm);
background: transparent; border: 1.5px solid var(--border-md);
color: var(--text-muted); cursor: pointer; font-size: 13px;
display: flex; align-items: center; justify-content: center;
transition: all var(--t-fast); flex-shrink: 0;
}
.cp-qty-del:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
/* ── Bouton quantité panier ─────────────────────────────────── */
.cp-qty-btn {
width: 32px; height: 32px;
border: 1.5px solid var(--border-md); border-radius: var(--r-sm);
background: #fff; color: var(--text); cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 16px; transition: all var(--t-fast); flex-shrink: 0;
}
.cp-qty-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.cp-qty-btn:disabled { opacity: .3; cursor: not-allowed; }
/* ══════════════════════════════════════════════════════════════════
ESPACE COMMERCIAL
══════════════════════════════════════════════════════════════════ */
/* ── Recherche clients ───────────────────────────────────────────── */
.cl-search-wrap { position: relative; }
.cl-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; z-index: 1; }
.cl-search-inp { width: 100%; padding: 11px 44px 11px 42px; border: 1.5px solid var(--border); border-radius: var(--r-lg); font-size: 13.5px; background: var(--white); color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast); outline: none; }
.cl-search-inp:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,0,0,.07); }
.cl-search-inp::placeholder { color: var(--text-muted); }
.cl-search-spin { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.cl-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; transition: all var(--t-fast); }
.cl-search-clear:hover { background: var(--red-light); color: var(--red); }
/* ── Cartes clients ──────────────────────────────────────────────── */
.client-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r-xl); padding: 20px; transition: all var(--t-base); position: relative; height: 100%; display: flex; flex-direction: column; }
.client-card:hover { border-color: var(--red-mid); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.client-card--danger { border-color: #FCA5A5; background: #FFF5F5; }
.client-card--danger:hover { border-color: var(--red); }
.client-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-shrink: 0; }
.client-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.client-card-footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
.client-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; flex-shrink: 0; }
.client-avatar.bg-danger { background: #DC2626 !important; }
/* ── Hauteur minimale garantie pour les cartes sans données ──────── */
.comm-card-min { min-height: 300px; display: flex; flex-direction: column; }
.comm-card-min .cp-empty { flex: 1; min-height: 240px; }
.comm-col-flex { display: flex; flex-direction: column; height: 100%; }
.comm-col-flex > .cp-card { flex: 1; display: flex; flex-direction: column; }
.comm-col-flex > .cp-card > .comm-card-min { flex: 1; }
/* ── Statut badge dans les tables commerciales ───────────────────── */
.comm-table-empty { padding: 60px 24px; text-align: center; }
.comm-table-empty-icon { width: 64px; height: 64px; background: var(--gray-100); border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--gray-400); margin: 0 auto 16px; }
.comm-table-empty p { font-size: 13.5px; color: var(--text-muted); margin: 8px 0 20px; max-width: 260px; margin-left: auto; margin-right: auto; }
/* ── Table interne dashboard commercial ──────────────────────────── */
.cp-table-comm { width: 100%; border-collapse: collapse; font-size: 13px; }
.cp-table-comm thead tr { background: var(--gray-50); border-bottom: 1px solid var(--border); }
.cp-table-comm thead th { padding: 11px 16px; text-align: left; font-size: 10.5px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.cp-table-comm thead th:first-child { padding-left: 20px; }
.cp-table-comm tbody tr { border-bottom: 1px solid var(--border); transition: background var(--t-fast); }
.cp-table-comm tbody tr:last-child { border-bottom: none; }
.cp-table-comm tbody tr:hover { background: var(--gray-50); }
.cp-table-comm tbody tr.row-danger { background: #FFF5F5; }
.cp-table-comm tbody tr.row-danger:hover { background: #FEE2E2; }
.cp-table-comm tbody td { padding: 12px 16px; vertical-align: middle; }
.cp-table-comm tbody td:first-child { padding-left: 20px; }
/* ══════════════════════════════════════════════════════════════════
ESPACE CALL CENTER — Styles enrichis
══════════════════════════════════════════════════════════════════ */
/* ── Hero client (appel.php) ─────────────────────────────────────── */
.cc-client-hero {
background: linear-gradient(135deg, #C8102E 0%, #8B0000 100%);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: 0 4px 20px rgba(200,16,46,.25);
}
.cc-client-hero-inner {
display: flex; align-items: flex-start; gap: 16px;
padding: 24px; flex-wrap: wrap;
}
.cc-client-av {
width: 56px; height: 56px; border-radius: 50%;
background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.3);
color: #fff; font-size: 20px; font-weight: 900;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cc-tel-link { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 700; transition: color .15s; }
.cc-tel-link:hover { color: #fff; text-decoration: underline; }
.cc-badge-auto { display:inline-flex;align-items:center;background:rgba(16,185,129,.2);color:#6EE7B7;border:1px solid rgba(110,231,183,.3);border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700; }
.cc-badge-terrain { display:inline-flex;align-items:center;background:rgba(245,158,11,.2);color:#FCD34D;border:1px solid rgba(252,211,77,.3);border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700; }
.cc-badge-auto-xs { display:inline-flex;align-items:center;background:#ECFDF5;color:#059669;border:1px solid #A7F3D0;border-radius:20px;padding:1px 8px;font-size:10.5px;font-weight:700;white-space:nowrap; }
.cc-badge-terrain-xs { display:inline-flex;align-items:center;background:#FFFBEB;color:#D97706;border:1px solid #FDE68A;border-radius:20px;padding:1px 8px;font-size:10.5px;font-weight:700;white-space:nowrap; }
.cc-btn-outline { background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:var(--r-md);padding:6px 14px;font-size:12.5px;font-weight:600;text-decoration:none;transition:all .15s; }
.cc-btn-outline:hover { background:rgba(255,255,255,.22);color:#fff; }
/* ── Progression hero ────────────────────────────────────────────── */
.cc-progress-wrap { padding:16px 24px;border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.08); }
.cc-progress-bar-bg { background:rgba(255,255,255,.2);border-radius:8px;height:10px;overflow:hidden; }
.cc-progress-bar-fill { height:100%;background:linear-gradient(90deg,#FFC107,#fff);border-radius:8px;transition:width .4s ease; }
/* ── Icône section ───────────────────────────────────────────────── */
.cc-section-icon { width:36px;height:36px;border-radius:10px;background:#FFF0F2;color:#C8102E;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0; }
/* ── Cartes contrats (autonome) ──────────────────────────────────── */
.cc-contrat-card { border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px;background:#FAFAFA;transition:border-color .15s; }
.cc-contrat-card:hover { border-color:var(--red-mid); }
.cc-mini-progress-bg { background:#E5E7EB;border-radius:6px;height:6px;overflow:hidden; }
.cc-mini-progress-fill { height:100%;background:#F59E0B;border-radius:6px;transition:width .3s; }
.cc-mini-progress-fill.cc-mini-mid { background:#C8102E; }
.cc-mini-progress-fill.cc-mini-done { background:#10B981; }
.cc-next-payment { display:flex;align-items:flex-start;gap:10px;background:#FFFBEB;border:1px solid #FDE68A;border-radius:var(--r-lg);padding:12px 16px; }
/* ── Stats boxes (terrain) ───────────────────────────────────────── */
.cc-stat-box { border-radius:var(--r-lg);padding:14px 12px;text-align:center;border:1.5px solid transparent; }
.cc-stat-label { font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;color:var(--text-muted); }
.cc-stat-val { font-size:1.1rem;font-weight:900;line-height:1.2; }
.cc-stat-sub { font-size:11px;margin-top:4px; }
.cc-stat-total { background:#F9FAFB;border-color:var(--border); }
.cc-stat-total .cc-stat-val { color:var(--text); }
.cc-stat-paye { background:#FFF0F2;border-color:#FECDD3; }
.cc-stat-paye .cc-stat-val { color:#C8102E; }
.cc-stat-paye .cc-stat-sub { color:#C8102E;font-weight:700; }
.cc-stat-client { background:#F5F3FF;border-color:#DDD6FE; }
.cc-stat-client .cc-stat-val { color:#7C3AED; }
.cc-stat-client .cc-stat-sub { color:#7C3AED; }
/* ── Saisie jours ────────────────────────────────────────────────── */
.cc-jours-input-row { background:#F8FAFC;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px 16px; }
.cc-jours-label { font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:10px; }
.cc-jours-field-wrap { position:relative;display:flex;align-items:center; }
.cc-jours-inp { width:120px;text-align:center;font-size:1.2rem;font-weight:900;border:2px solid var(--border);border-radius:var(--r-md) 0 0 var(--r-md);padding:10px 14px;outline:none;transition:border-color .15s; }
.cc-jours-inp:focus { border-color:#C8102E; }
.cc-jours-unit { background:#F3F4F6;border:2px solid var(--border);border-left:none;border-radius:0 var(--r-md) var(--r-md) 0;padding:10px 14px;font-size:13px;font-weight:700;color:var(--text-muted);white-space:nowrap; }
/* ── Écart display ───────────────────────────────────────────────── */
.cc-ecart-ok { display:inline-flex;align-items:center;color:#059669;font-weight:700;font-size:13px;background:#ECFDF5;border:1px solid #A7F3D0;border-radius:20px;padding:4px 12px; }
.cc-ecart-ko { display:inline-flex;align-items:center;color:#DC2626;font-weight:700;font-size:13px;background:#FEF2F2;border:1px solid #FECACA;border-radius:20px;padding:4px 12px; }
/* ── Légende ─────────────────────────────────────────────────────── */
.cc-legend-row { display:flex;gap:16px;flex-wrap:wrap; }
.cc-legend-item { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted); }
.cc-legend-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
/* ── Radio chips ─────────────────────────────────────────────────── */
.cc-radio-chip { display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1.5px solid var(--border);border-radius:24px;font-size:13.5px;cursor:pointer;transition:all .15s;background:var(--white);user-select:none; }
.cc-radio-chip:hover { border-color:#C8102E;background:#FFF0F2; }
/* ── Vue rapide sidebar ──────────────────────────────────────────── */
.cc-quick-stat-row { display:flex;gap:8px; }
.cc-quick-stat { flex:1;text-align:center;background:var(--gray-50);border-radius:var(--r-lg);padding:12px 8px; }
.cc-quick-num { font-size:1.4rem;font-weight:900;color:var(--red);line-height:1.2; }
.cc-quick-label { font-size:10.5px;color:var(--text-muted);font-weight:600;margin-top:2px; }
/* ── Historique sidebar ──────────────────────────────────────────── */
.cc-history-list { display:flex;flex-direction:column;gap:2px; }
.cc-history-item { padding:10px;border-radius:var(--r-md);transition:background .12s;color:var(--text); }
.cc-history-item:hover { background:var(--gray-50); }
.cc-history-icon { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0; }
/* ══════════════════════════════════════════════════════════════════
CALL CENTER — Dashboard
══════════════════════════════════════════════════════════════════ */
.cc-dash-header { background:linear-gradient(135deg,#C8102E 0%,#8B0000 100%);border-radius:var(--r-xl);padding:32px;box-shadow:0 4px 24px rgba(200,16,46,.2); }
.cc-dash-header-inner { display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px; }
.cc-btn-white { display:inline-flex;align-items:center;background:#fff;color:#C8102E;border:none;border-radius:var(--r-md);padding:10px 20px;font-size:13.5px;font-weight:700;text-decoration:none;transition:all .15s;box-shadow:0 2px 8px rgba(0,0,0,.12); }
.cc-btn-white:hover { background:#FFF0F2;color:#8B0000; }
.cc-btn-outline-white { display:inline-flex;align-items:center;background:rgba(255,255,255,.12);color:rgba(255,255,255,.9);border:1.5px solid rgba(255,255,255,.3);border-radius:var(--r-md);padding:9px 18px;font-size:13.5px;font-weight:600;text-decoration:none;transition:all .15s; }
.cc-btn-outline-white:hover { background:rgba(255,255,255,.2);color:#fff; }
.cc-kpi-card { background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:20px;transition:all .15s; }
.cc-kpi-card:hover { box-shadow:var(--shadow-md);transform:translateY(-2px); }
.cc-kpi-card.cc-kpi-warn { border-color:#FDE68A;background:#FFFBEB; }
.cc-kpi-card.cc-kpi-danger { border-color:#FECACA;background:#FEF2F2; }
.cc-kpi-icon { width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px; }
.cc-kpi-val { font-size:2rem;font-weight:900;line-height:1.1;margin-bottom:4px;color:var(--text); }
.cc-kpi-label { font-size:12.5px;color:var(--text-muted);font-weight:600; }
.cc-kpi-sub { font-size:11px;color:var(--text-muted);margin-top:4px; }
.cc-kpi-sub-warn { color:#D97706;font-weight:700; }
.cc-av-sm { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#C8102E,#8B0000);color:#fff;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.cc-av-md { width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#C8102E,#8B0000);color:#fff;font-size:16px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.cc-priority-row { display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-lg);border:1.5px solid var(--border);background:#FAFAFA;transition:all .15s; }
.cc-priority-row:hover { border-color:var(--red-mid);background:#FFF5F5; }
.cc-quick-link { display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r-lg);border:1.5px solid var(--border);color:var(--text);text-decoration:none;font-size:13.5px;font-weight:600;transition:all .15s;background:var(--white); }
.cc-quick-link:hover { border-color:var(--red);background:#FFF0F2;color:var(--red); }
.cc-quick-link i:first-child { font-size:16px;color:var(--text-muted); }
.cc-quick-link:hover i:first-child { color:var(--red); }
/* ══════════════════════════════════════════════════════════════════
CALL CENTER — Grille clients (clients.php)
══════════════════════════════════════════════════════════════════ */
.cc-client-card { background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:all .15s;display:flex;flex-direction:column;height:100%; }
.cc-client-card:hover { box-shadow:var(--shadow-md);border-color:var(--red-mid);transform:translateY(-2px); }
.cc-client-card--urgent { border-color:#FECACA;background:#FFF5F5; }
.cc-client-card--urgent:hover { border-color:#EF4444; }
.cc-client-card-head { display:flex;align-items:flex-start;gap:12px;padding:18px 16px 12px; }
.cc-client-card-meta { display:flex;flex-direction:column;gap:5px;padding:10px 16px 12px;flex:1; }
.cc-client-card-info { display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted); }
.cc-client-card-foot { padding:12px 16px;border-top:1px solid var(--border);background:#FAFAFA; }