/* ================================================================
KBINE PLUS | Feuille de styles globale
Couleurs : Orange CI #FF6200 | Vert CI #009A44 | Blanc #FFFFFF
================================================================ */
/* La police Roboto est chargée en dans le de chaque page
(client.html/cabine.html/admin.html), pas via @import ici : un @import
dans une feuille de style bloque le parsing du reste du fichier tant
qu'il n'est pas résolu, alors qu'un se charge en parallèle.
Choisie sur capture de référence (demande explicite : "utilise ce
modèle de police pour tous le site" — menu système Android) pour tout
le site, y compris l'espace client qui gardait Nunito en surcharge
locale (voir index.html, ancienne demande scopée là, remplacée). */
/* ── Variables ─────────────────────────────────────────────────── */
:root {
--primary: #FF6200;
--primary-light: #FF8533;
--primary-dark: #CC4E00;
--secondary: #009A44;
--secondary-light:#00C457;
--secondary-dark: #007833;
--white: #FFFFFF;
--light-bg: #FFFFFF;
--section-tint: #FFF6EE;
--frame-green: rgba(255,98,0,.28);
--gray-100: #F8F9FC;
--gray-200: #E8ECF4;
--gray-300: #CBD5E0;
--gray-400: #A0AEC0;
--gray-500: #718096;
--gray-600: #4A5568;
--gray-700: #2D3748;
--gray-800: #1A202C;
--gray-900: #0F1117;
--shadow-sm: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
--shadow: 0 4px 16px rgba(0,0,0,.08);
--shadow-lg: 0 10px 40px rgba(0,0,0,.12);
--shadow-orange: 0 4px 20px rgba(255,98,0,.35);
--shadow-green: 0 4px 20px rgba(0,154,68,.35);
--radius-sm: 8px;
--radius: 16px;
--radius-lg: 26px;
--radius-xl: 36px;
--transition: all .3s ease;
--font: 'Roboto', -apple-system, sans-serif;
--sidebar-w: 260px;
--header-h: 64px;
}
/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
background: var(--light-bg);
color: var(--gray-800);
line-height: 1.6;
min-height: 100vh;
transition: background .3s, color .3s;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; }
button, input, select, textarea { font-family: var(--font); }
/* ── Typography ────────────────────────────────────────────────── */
h1 { font-size: 2rem; font-weight: 800; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p { color: var(--gray-600); }
/* ── Scrollbar ─────────────────────────────────────────────────── */
* { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* ================================================================
APP LAYOUT
================================================================ */
.app-wrapper { display: flex; min-height: 100vh; }
/* ── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
position: fixed;
left: 0; top: 0;
width: var(--sidebar-w);
height: 100vh;
background: linear-gradient(175deg, #FF6200 0%, #E05500 45%, #006B2F 100%);
display: flex;
flex-direction: column;
z-index: 1000;
transition: transform .3s ease;
overflow-y: auto;
overflow-x: hidden;
}
.sidebar-logo {
padding: 18px 20px 14px;
border-bottom: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
}
.sidebar-logo-img {
width: 90px; height: 90px; object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
}
.sidebar-user {
padding: 16px 20px;
display: flex; align-items: center; gap: 12px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-user .user-avatar {
width: 40px; height: 40px;
background: rgba(255,255,255,.25);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .9rem; font-weight: 700; color: #fff;
flex-shrink: 0;
}
.sidebar-user .user-info { overflow: hidden; }
.sidebar-user .user-name {
font-size: .85rem; font-weight: 600; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user .user-role {
font-size: .7rem; color: rgba(255,255,255,.7);
text-transform: uppercase; letter-spacing: .5px;
}
.sidebar-nav { flex: 1; padding: 12px 0; }
.nav-section-label {
font-size: .65rem; color: rgba(255,255,255,.5);
text-transform: uppercase; letter-spacing: 1px;
padding: 12px 20px 4px; font-weight: 600;
}
.nav-item {
display: flex; align-items: center; gap: 12px;
padding: 11px 20px;
color: rgba(255,255,255,.8);
cursor: pointer;
border-radius: 0;
transition: var(--transition);
font-size: .88rem; font-weight: 500;
margin: 2px 10px;
border-radius: var(--radius-sm);
position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.15); color: #fff; }
.nav-item.active {
background: rgba(255,255,255,.22);
color: #fff; font-weight: 600;
}
.nav-item.active::before {
content: '';
position: absolute; left: 0; top: 20%; bottom: 20%;
width: 3px; background: #FFD700; border-radius: 99px;
left: -10px;
}
.nav-item i { width: 20px; text-align: center; font-size: .9rem; }
/* Recherche d'onglets (sidebar) — voir filterAdminNav() dans js/admin.js,
distincte de style.display géré par applyAdminPermissionGating(). */
.nav-item--search-hidden { display: none !important; }
.nav-badge {
margin-left: auto;
background: #FFD700; color: #000;
font-size: .65rem; font-weight: 700;
padding: 2px 7px; border-radius: 99px;
}
.sidebar-footer {
padding: 16px 20px;
border-top: 1px solid rgba(255,255,255,.15);
}
.btn-logout {
display: flex; align-items: center; gap: 10px;
color: rgba(255,255,255,.8);
font-size: .85rem; cursor: pointer;
padding: 8px 10px;
border-radius: var(--radius-sm);
transition: var(--transition);
background: none; border: none; width: 100%;
}
.btn-logout:hover { background: rgba(255,255,255,.15); color: #fff; }
/* ── Main Content ──────────────────────────────────────────────── */
.main-content {
margin-left: var(--sidebar-w);
flex: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
transition: margin .3s ease;
}
/* ── Top Header ────────────────────────────────────────────────── */
.topbar {
height: var(--header-h);
background: var(--white);
border-bottom: 1px solid var(--gray-200);
display: flex; align-items: center;
padding: 0 24px;
gap: 16px;
position: sticky; top: 0; z-index: 100;
transition: background .3s;
}
.topbar-menu-btn {
display: none;
background: none; border: none;
font-size: 1.2rem; color: var(--gray-600);
cursor: pointer; padding: 4px;
}
.topbar-title { font-size: 1.1rem; font-weight: 700; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-btn {
width: 38px; height: 38px;
border-radius: var(--radius);
border: none;
background: var(--gray-100);
color: var(--gray-600);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: .95rem;
transition: var(--transition);
position: relative;
}
.topbar-btn:hover { background: var(--gray-200); color: var(--primary); }
.notif-dot {
position: absolute; top: 6px; right: 6px;
width: 8px; height: 8px;
background: var(--primary); border-radius: 50%;
border: 2px solid var(--white);
}
/* ── Page Content ──────────────────────────────────────────────── */
.page-content { padding: 24px; flex: 1; }
.page-header { margin-bottom: 24px; }
.page-header h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.page-header p { font-size: .85rem; }
.breadcrumb { font-size: .8rem; color: var(--gray-500); margin-bottom: 8px; }
.breadcrumb span { color: var(--primary); font-weight: 500; }
/* ── View Sections ─────────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }
/* ── Stat Cards ────────────────────────────────────────────────── */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
/* Titre de section au-dessus d'une rangée de stat-cards, avec filet
horizontal pour séparer visuellement les groupes du dashboard admin. */
.dash-section-title {
display: flex; align-items: center; gap: 10px;
font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
color: var(--gray-500);
margin: 24px 0 12px;
}
.dash-section-title::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.dash-section-title:first-of-type { margin-top: 4px; }
.stat-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 22px;
display: flex; align-items: flex-start; justify-content: space-between;
box-shadow: var(--shadow-sm);
transition: transform .2s, box-shadow .2s;
overflow: hidden;
position: relative;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card::after {
content: '';
position: absolute; top: -30px; right: -30px;
width: 100px; height: 100px;
border-radius: 50%;
opacity: .06;
}
.stat-card.orange::after { background: var(--primary); }
.stat-card.green::after { background: var(--secondary); }
.stat-card.blue::after { background: #3B82F6; }
.stat-card.purple::after { background: #8B5CF6; }
.stat-info { flex: 1; }
.stat-label { font-size: .75rem; color: var(--gray-500); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.stat-value { font-size: 1.6rem; font-weight: 800; color: var(--gray-800); line-height: 1.2; }
.stat-sub { font-size: .75rem; color: var(--gray-500); margin-top: 4px; }
.stat-trend { font-size: .75rem; margin-top: 6px; }
.stat-trend.up { color: var(--secondary); }
.stat-trend.down { color: #EF4444; }
.stat-icon {
width: 48px; height: 48px;
border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; flex-shrink: 0;
}
.stat-icon.orange { background: rgba(255,98,0,.12); color: var(--primary); }
.stat-icon.green { background: rgba(0,154,68,.12); color: var(--secondary); }
.stat-icon.blue { background: rgba(59,130,246,.12); color: #3B82F6; }
.stat-icon.purple { background: rgba(139,92,246,.12); color: #8B5CF6; }
.stat-icon.gold { background: rgba(234,179,8,.12); color: #CA8A04; }
.stat-icon.red { background: rgba(239,68,68,.12); color: #EF4444; }
/* ── Cards ─────────────────────────────────────────────────────── */
.card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: background .3s;
}
.card-header {
padding: 18px 22px 14px;
border-bottom: 1px solid var(--gray-200);
display: flex; align-items: center; justify-content: space-between;
}
.card-title { font-size: .95rem; font-weight: 700; }
.card-body { padding: 22px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 20px;
border-radius: var(--radius);
border: none; cursor: pointer;
font-size: .875rem; font-weight: 600;
transition: var(--transition);
white-space: nowrap;
}
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary {
background: var(--primary); color: #fff;
box-shadow: var(--shadow-orange);
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-secondary {
background: var(--secondary); color: #fff;
box-shadow: var(--shadow-green);
}
.btn-secondary:hover { background: var(--secondary-dark); transform: translateY(-1px); }
.btn-outline {
background: transparent; color: var(--primary);
border: 2px solid var(--primary);
}
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-ghost {
background: var(--gray-100); color: var(--gray-700);
}
.btn-ghost:hover { background: var(--gray-200); }
.btn-danger { background: #EF4444; color: #fff; }
.btn-danger:hover { background: #DC2626; }
.btn-sm { padding: 6px 14px; font-size: .8rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }
.btn-icon { padding: 8px; width: 36px; height: 36px; justify-content: center; }
/* ── Onglet Admin "Forfaits" ──────────────────────────────────── */
.frf-op-btn.active { background: var(--primary) !important; color: #fff !important; }
.frf-cat-group { margin-bottom: 18px; }
.frf-cat-group:last-child { margin-bottom: 0; }
.frf-cat-title {
font-size: .72rem; font-weight: 800; color: var(--gray-500);
text-transform: uppercase; letter-spacing: .04em;
margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--gray-200);
}
.frf-subcat-title {
font-size: .64rem; font-weight: 700; color: var(--gray-400);
text-transform: uppercase; letter-spacing: .03em;
margin: 10px 0 4px; padding-left: 2px;
}
.frf-subcat-title:first-child { margin-top: 0; }
.frf-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 0; border-bottom: 1px solid var(--gray-100);
}
.frf-row:last-child { border-bottom: none; }
.frf-row-nom { font-weight: 700; font-size: .85rem; color: var(--gray-800); }
.frf-row-meta { font-size: .72rem; color: var(--gray-500); margin-top: 2px; }
.frf-row-ussd { font-size: .65rem; color: var(--gray-400); margin-top: 2px; font-family: monospace; word-break: break-all; }
.frf-row-prix { font-weight: 800; color: var(--primary); font-size: .85rem; white-space: nowrap; flex-shrink: 0; }
.frf-row-edit {
background: none; border: none; color: var(--gray-500); cursor: pointer;
font-size: .9rem; padding: 6px; flex-shrink: 0;
}
.frf-row-edit:hover { color: var(--primary); }
.frf-row-del {
background: none; border: none; color: #EF4444; cursor: pointer;
font-size: .9rem; padding: 6px; flex-shrink: 0;
}
.frf-row-del:hover { color: #DC2626; }
/* ── Forms ──────────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
display: block; margin-bottom: 6px;
font-size: .85rem; font-weight: 600; color: var(--gray-700);
}
.form-control {
width: 100%;
padding: 11px 16px;
border: 1.5px solid var(--gray-300);
border-radius: var(--radius);
font-size: .9rem;
background: var(--white);
color: var(--gray-800);
transition: border-color .2s, box-shadow .2s;
outline: none;
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(255,98,0,.12);
}
.form-control.green:focus {
border-color: var(--secondary);
box-shadow: 0 0 0 3px rgba(0,154,68,.12);
}
.input-group { position: relative; }
.input-icon {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--gray-400); font-size: .9rem; pointer-events: none;
}
.input-group .form-control { padding-left: 42px; }
.input-suffix {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
color: var(--gray-500); font-size: .85rem; font-weight: 600;
}
.form-hint { font-size: .75rem; color: var(--gray-500); margin-top: 4px; }
.form-error { font-size: .75rem; color: #EF4444; margin-top: 4px; }
/* ── Operator Cards ────────────────────────────────────────────── */
.operator-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 4px; }
.operator-card {
border: 2px solid var(--gray-200);
border-radius: var(--radius);
padding: 14px 10px;
cursor: pointer;
text-align: center;
transition: var(--transition);
background: var(--white);
}
.operator-card:hover { border-color: var(--primary); }
.operator-card.selected { border-color: var(--primary); background: rgba(255,98,0,.05); }
.operator-card img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; }
.operator-icon { font-size: 1.8rem; margin-bottom: 6px; }
.operator-name { font-size: .78rem; font-weight: 600; color: var(--gray-700); }
/* ── Amount Presets ────────────────────────────────────────────── */
.amount-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.preset-btn {
padding: 6px 14px;
border: 1.5px solid var(--gray-200);
border-radius: 99px;
font-size: .8rem; font-weight: 600;
cursor: pointer; background: var(--white);
color: var(--gray-600);
transition: var(--transition);
}
.preset-btn:hover { border-color: var(--primary); color: var(--primary); }
.preset-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* ── Tables ────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead { background: var(--gray-100); }
th {
text-align: left; padding: 12px 16px;
font-size: .75rem; font-weight: 700;
color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px;
}
td { padding: 14px 16px; border-bottom: 1px solid var(--gray-200); color: var(--gray-700); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--gray-100); }
/* ── Badges ────────────────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 99px;
font-size: .72rem; font-weight: 700;
}
.badge-pending { background: rgba(234,179,8,.12); color: #92400E; }
.badge-success { background: rgba(0,154,68,.12); color: #065F46; }
.badge-failed { background: rgba(239,68,68,.12); color: #991B1B; }
.badge-info { background: rgba(59,130,246,.12); color: #1E40AF; }
.badge-orange { background: rgba(255,98,0,.12); color: var(--primary-dark); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ── Modals ────────────────────────────────────────────────────── */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.5);
backdrop-filter: blur(4px);
z-index: 2000;
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0; visibility: hidden;
transition: opacity .2s ease, visibility .2s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
background: var(--white);
border-radius: var(--radius-xl);
width: 100%; max-width: 500px;
max-height: 90vh; overflow-y: auto;
transform: translateY(20px) scale(.97);
transition: var(--transition);
box-shadow: var(--shadow-lg);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-header {
padding: 22px 24px 16px;
border-bottom: 1px solid var(--gray-200);
display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 1.05rem; font-weight: 700; }
.modal-close {
width: 32px; height: 32px; border-radius: var(--radius-sm);
border: none; background: var(--gray-100); cursor: pointer;
color: var(--gray-600); font-size: .9rem;
display: flex; align-items: center; justify-content: center;
transition: var(--transition);
}
.modal-close:hover { background: #FEE2E2; color: #EF4444; }
/* Poignée "bottom-sheet" (ni flèche ni croix, demande explicite) — même
patron que .qrs-handle/.cadeau-handle : on tape ou on glisse vers le
bas dessus pour fermer (voir _bindSwipeDownToClose(), js/client.js).
Utilisée uniquement sur les modales qui l'ont explicitement demandée
(Notifications/Changer le PIN/Appareils connectés) — .modal-close
reste la norme partout ailleurs. */
.modal-handle {
display: block; width: 38px; height: 5px; border-radius: 3px;
border: none; padding: 0; margin: 12px auto 0;
background: rgba(0,0,0,.15); cursor: pointer; transition: background .15s;
}
.modal-handle:hover, .modal-handle:active { background: rgba(0,0,0,.28); }
.modal-header--noline { border-bottom: none; justify-content: center; }
.modal-body { padding: 22px 24px; }
.modal-footer {
padding: 16px 24px 22px;
border-top: 1px solid var(--gray-200);
display: flex; gap: 12px; justify-content: flex-end;
}
/* ── Écran d'amorçage des notifications push (#modal-push-priming) — voir
PushNotif dans js/push-notifications.js ── */
.push-prime { text-align: center; padding-top: 8px; }
.push-prime-ico {
width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 18px;
background: rgba(15,10,46,.06); color: #0F0A2E;
display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.push-prime-title { font-size: 1.05rem; font-weight: 800; color: #16121F; margin: 0 0 6px; }
.push-prime-text { font-size: .82rem; color: var(--gray-600); margin: 0 0 14px; }
.push-prime-list {
list-style: none; margin: 0 0 20px; padding: 0;
text-align: left; display: flex; flex-direction: column; gap: 10px;
}
.push-prime-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: .8rem; color: #16121F;
}
.push-prime-list li i { color: #16a34a; margin-top: 2px; flex-shrink: 0; }
.push-prime-cta { width: 100%; margin: 0 0 8px; }
.push-prime-skip {
width: 100%; background: none; border: none; cursor: pointer;
font-family: var(--font); font-size: .8rem; font-weight: 600;
color: var(--gray-500); padding: 10px;
}
.push-prime-skip:hover { color: #374151; }
/* ── Menu d'aide (bouton "Aide", bottom-nav) — voir openHelpMenu(),
js/client.js ── */
/* Réduit pour bien tenir sur un écran de téléphone (demande explicite). */
/* Liste unifiée en un seul cadre, filet entre les lignes (direction B
choisie via canvas de design le 25/08), plutôt que des cartes
séparées — même langage que la liste de #modal-contact. Icônes en
bleu marine (famille unique), sauf WhatsApp qui garde sa couleur de
marque pour rester identifiable. */
.help-menu-body { border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; }
.help-menu-item {
display: flex; align-items: center; gap: 12px;
width: 100%; background: #fff; border: none; border-bottom: 1px solid var(--gray-200);
border-radius: 0; padding: 13px 14px; cursor: pointer;
font-family: var(--font); text-align: left;
transition: background .15s;
}
.help-menu-item:last-child { border-bottom: none; }
.help-menu-item:hover { background: var(--gray-100); }
.help-menu-ico {
width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
background: rgba(15,10,46,.06); color: #0F0A2E;
display: flex; align-items: center; justify-content: center;
font-size: .8rem;
}
.help-menu-ico--green { background: rgba(37,211,102,.1); color: #25D366; }
.help-menu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.help-menu-title { font-size: .76rem; font-weight: 800; color: #16121F; }
.help-menu-sub { font-size: .64rem; color: var(--gray-500); }
.help-menu-chev { font-size: .6rem; color: #0F0A2E; opacity: .3; flex-shrink: 0; }
.help-menu-heading { font-size: .86rem; font-weight: 800; color: #16121F; text-align: center; }
#modal-help-menu .modal-header {
border-bottom: none; flex-direction: column; align-items: center; gap: 14px;
padding: 16px 20px 4px;
}
#modal-help-menu .modal-body { padding-top: 6px; }
/* Barre de glissement façon feuille mobile (bottom sheet), remplace la
croix (demande explicite) — reste cliquable pour fermer. */
#modal-help-menu .help-menu-drag-handle {
width: 40px; height: 5px; border-radius: 99px;
background: var(--gray-300); border: none; padding: 0; cursor: pointer;
}
#modal-help-menu .help-menu-drag-handle:hover { background: var(--gray-400); }
/* ── Modale "Perturbation réseau" (maintenance réseau globale) ───────────
Voir warnNetworkMaintenance() dans js/db.js — réutilise .modal-overlay
(fond + transition open/close déjà défini ci-dessus). Fond blanc avec
halo orange clair (--primary), badge toujours teinté par le réseau
bloqué (--netm-clr). */
.netm-overlay { z-index: 3000; }
.netm-card {
--netm-clr: #FF6200; --netm-txt: #ffffff;
position: relative;
width: 100%; max-width: 340px;
border-radius: 26px; overflow: hidden;
background: #ffffff;
border: 1.5px solid rgba(255,98,0,.15);
box-shadow: var(--shadow-lg);
padding: 30px 24px 26px; text-align: center;
transform: translateY(20px) scale(.97);
transition: transform .25s cubic-bezier(.34,1.46,.64,1);
}
.netm-overlay.open .netm-card { transform: translateY(0) scale(1); }
.netm-close {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 28px; height: 28px; border-radius: 50%; border: none;
background: rgba(0,0,0,.06); color: rgba(0,0,0,.5);
display: flex; align-items: center; justify-content: center;
font-size: .75rem; cursor: pointer; transition: background .15s;
}
.netm-close:hover { background: rgba(0,0,0,.12); }
.netm-icon {
width: 92px; height: 92px; border-radius: 22px; margin: 0 auto 18px;
overflow: hidden; position: relative;
box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.netm-icon-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.netm-title { color: #1a1a2e; font-weight: 900; font-size: 1.05rem; margin-bottom: 6px; }
.netm-sub { color: rgba(0,0,0,.45); font-size: .75rem; margin-bottom: 18px; }
#global-maintenance-message { color: #DC2626; font-weight: 800; }
.netm-badge {
display: inline-flex; align-items: center; gap: 10px;
background: none; color: rgba(22,18,31,.75);
padding: 0; border-radius: 0;
font-weight: 800; font-size: .85rem; margin-bottom: 16px;
}
.netm-badge-icon { position: relative; display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; font-size: 1.05rem; }
.netm-badge-slash {
position: absolute; width: 145%; height: 2.5px; background: currentColor;
transform: rotate(-45deg);
}
.netm-badge-logo { height: 28px; width: auto; max-width: 120px; object-fit: contain; display: block; border-radius: 3px; }
/* ── Toast Notifications ──────────────────────────────────────── */
#toast-container {
position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
z-index: 9999; display: flex; flex-direction: column; gap: 8px;
pointer-events: none; align-items: center; width: 100%; max-width: 340px;
padding: 0 16px; box-sizing: border-box;
}
/* "Carte signal" — fond clair + rail de couleur en bordure gauche
(plutôt qu'un dégradé sombre plein), plus lisible en plein soleil
(usage cabiniste en boutique) ; volontairement indépendant du thème
clair/sombre du site, comme l'était déjà l'ancien modèle. */
.toast {
pointer-events: all; width: 100%;
border-radius: 14px; overflow: hidden; position: relative;
animation: toastIn .4s cubic-bezier(.34,1.28,.64,1);
box-shadow: 0 12px 32px rgba(36,28,18,.22);
background: #FBF6EE;
border: 1px solid rgba(36,28,18,.08);
}
.toast::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.toast.success::before { background: #16A34A; }
.toast.error::before { background: #EF4444; }
.toast.info::before { background: #3B82F6; }
.toast.warning::before { background: #F59E0B; }
@keyframes toastIn {
from { transform: translateY(-14px) scale(.92); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.toast-inner {
display: flex; align-items: center; gap: 11px;
padding: 12px 12px 12px 18px;
}
.toast-logo-badge {
position: relative; width: 38px; height: 38px; flex-shrink: 0;
border-radius: 50%; background: rgba(36,28,18,.05);
display: flex; align-items: center; justify-content: center;
}
.toast-logo-img { width: 25px; height: 25px; object-fit: contain; }
.toast-content { flex: 1; min-width: 0; }
.toast-type {
display: flex; align-items: center; gap: 6px;
font-size: .5rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .1em; margin-bottom: 3px;
}
.toast-type::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: currentColor; flex-shrink: 0;
}
.toast.success .toast-type { color: #16A34A; }
.toast.error .toast-type { color: #EF4444; }
.toast.info .toast-type { color: #3B82F6; }
.toast.warning .toast-type { color: #B45309; }
.toast-msg {
font-size: .72rem; font-weight: 600;
color: #241C12; line-height: 1.42;
}
.toast-close {
cursor: pointer; flex-shrink: 0; align-self: center;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(36,28,18,.05);
display: flex; align-items: center; justify-content: center;
color: rgba(36,28,18,.4); font-size: .5rem; transition: all .2s;
border: none;
}
.toast-close:hover { background: rgba(36,28,18,.1); color: #241C12; }
.toast-progress {
position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
animation: toastProgress linear forwards;
}
.toast.success .toast-progress { background: rgba(22,163,74,.35); }
.toast.error .toast-progress { background: rgba(239,68,68,.35); }
.toast.info .toast-progress { background: rgba(59,130,246,.35); }
.toast.warning .toast-progress { background: rgba(245,158,11,.35); }
@keyframes toastProgress {
from { width: 100%; }
to { width: 0; }
}
/* ── Notification Panel ───────────────────────────────────────── */
.notif-list { display: flex; flex-direction: column; gap: 0; }
.notif-item {
display: flex; gap: 12px; padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,.05);
cursor: pointer; transition: background .2s; position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255,255,255,.03); }
.notif-item.unread { background: rgba(255,98,0,.04); }
.notif-icon {
width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: .8rem;
background: rgba(255,98,0,.12); color: var(--primary);
border: 1px solid rgba(255,98,0,.2);
}
.notif-content { flex: 1; min-width: 0; }
.notif-msg { font-size: .75rem; font-weight: 600; margin-bottom: 4px; color: var(--text); line-height: 1.4; }
.notif-time { font-size: .62rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.notif-unread-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--primary); margin-top: 4px; flex-shrink: 0;
box-shadow: 0 0 6px rgba(255,98,0,.6);
}
.notif-delete-btn {
flex-shrink: 0; align-self: center;
width: 28px; height: 28px; border-radius: 50%; border: none;
background: rgba(255,255,255,.05); color: var(--text-muted);
display: flex; align-items: center; justify-content: center;
font-size: .68rem; cursor: pointer; transition: background .15s, color .15s;
}
.notif-delete-btn:hover { background: rgba(239,68,68,.15); color: #ef4444; }
/* ── Search & Filters ──────────────────────────────────────────── */
.filter-bar {
display: flex; gap: 12px; flex-wrap: wrap;
margin-bottom: 20px; align-items: center;
}
.search-box {
flex: 1; min-width: 220px; max-width: 340px;
}
.filter-select {
padding: 10px 14px;
border: 1.5px solid var(--gray-300);
border-radius: var(--radius);
background: var(--white);
color: var(--gray-700);
font-size: .875rem;
cursor: pointer; outline: none;
}
/* ── Timeline / Activity ───────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
display: flex; gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--gray-200);
position: relative;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .85rem; flex-shrink: 0;
}
.timeline-dot.send { background: rgba(255,98,0,.12); color: var(--primary); }
.timeline-dot.receive { background: rgba(0,154,68,.12); color: var(--secondary); }
.timeline-dot.wallet { background: rgba(59,130,246,.12); color: #3B82F6; }
.timeline-info { flex: 1; }
.timeline-title { font-size: .88rem; font-weight: 600; margin-bottom: 2px; }
.timeline-sub { font-size: .78rem; color: var(--gray-500); }
.timeline-amount { font-size: .9rem; font-weight: 700; }
.timeline-amount.debit { color: #EF4444; }
.timeline-amount.credit { color: var(--secondary); }
.timeline-time { font-size: .72rem; color: var(--gray-400); }
/* ── Notification Panel ────────────────────────────────────────── */
.notif-list { display: flex; flex-direction: column; gap: 0; }
.notif-item {
display: flex; gap: 14px; padding: 14px;
border-bottom: 1px solid var(--gray-200);
cursor: pointer; transition: background .2s;
border-radius: var(--radius);
}
.notif-item:hover { background: var(--gray-100); }
.notif-item.unread { background: rgba(255,98,0,.04); }
.notif-icon {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .9rem; flex-shrink: 0;
background: rgba(255,98,0,.1); color: var(--primary);
}
.notif-content { flex: 1; }
.notif-msg { font-size: .85rem; font-weight: 500; margin-bottom: 3px; }
.notif-time { font-size: .75rem; color: var(--gray-400); }
.notif-unread-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--primary); margin-top: 6px; flex-shrink: 0;
}
/* ── Wallet / Balance Card ─────────────────────────────────────── */
.wallet-card {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, #8B1A00 100%);
border-radius: var(--radius-xl);
padding: 28px;
color: #fff;
position: relative; overflow: hidden;
box-shadow: var(--shadow-orange);
}
.wallet-card::before {
content: '';
position: absolute; top: -40px; right: -40px;
width: 160px; height: 160px;
border-radius: 50%; background: rgba(255,255,255,.08);
}
.wallet-card::after {
content: '';
position: absolute; bottom: -60px; left: 20px;
width: 200px; height: 200px;
border-radius: 50%; background: rgba(255,255,255,.05);
}
.wallet-label { font-size: .78rem; opacity: .8; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.wallet-amount { font-size: 2.4rem; font-weight: 800; margin-bottom: 4px; position: relative; z-index: 1; }
.wallet-sub { font-size: .8rem; opacity: .7; position: relative; z-index: 1; }
.wallet-chip {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,.2); padding: 6px 14px;
border-radius: 99px; font-size: .78rem; font-weight: 600;
margin-top: 16px; position: relative; z-index: 1;
}
/* ── Progress / Steps ──────────────────────────────────────────── */
.steps { display: flex; align-items: center; margin-bottom: 28px; }
.step {
flex: 1; display: flex; flex-direction: column; align-items: center;
position: relative;
}
.step:not(:last-child)::after {
content: '';
position: absolute; top: 16px; left: 50%; width: 100%;
height: 2px; background: var(--gray-200);
}
.step.done:not(:last-child)::after { background: var(--secondary); }
.step-circle {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .75rem; font-weight: 700; border: 2px solid var(--gray-200);
background: var(--white); color: var(--gray-500); z-index: 1; margin-bottom: 6px;
}
.step.active .step-circle { border-color: var(--primary); color: var(--primary); background: rgba(255,98,0,.08); }
.step.done .step-circle { border-color: var(--secondary); background: var(--secondary); color: #fff; }
.step-label { font-size: .7rem; color: var(--gray-500); font-weight: 500; }
.step.active .step-label { color: var(--primary); font-weight: 600; }
.step.done .step-label { color: var(--secondary); }
/* ── Charts Container ──────────────────────────────────────────── */
.chart-container { position: relative; height: 240px; }
.chart-container-sm { position: relative; height: 180px; }
/* ── Empty State ───────────────────────────────────────────────── */
.empty-state {
display: flex; flex-direction: column; align-items: center;
justify-content: center; padding: 48px 24px; text-align: center;
}
.empty-icon { font-size: 3rem; color: var(--gray-300); margin-bottom: 16px; }
.empty-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.empty-text { font-size: .88rem; color: var(--gray-500); max-width: 320px; }
/* ── Receipt ───────────────────────────────────────────────────── */
.receipt {
border: 2px dashed var(--gray-200);
border-radius: var(--radius-lg);
padding: 24px;
}
.receipt-header { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); margin-bottom: 16px; }
.receipt-logo { font-size: 1.4rem; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.receipt-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: .875rem; }
.receipt-row:not(:last-child) { border-bottom: 1px solid var(--gray-100); }
.receipt-row .label { color: var(--gray-500); }
.receipt-row .value { font-weight: 600; }
.receipt-total { background: var(--gray-100); border-radius: var(--radius); padding: 12px 16px; margin-top: 12px; }
/* ── Request Cards (Cabine) ────────────────────────────────────── */
.request-card {
background: var(--white);
border-radius: var(--radius-lg);
border: 1.5px solid var(--gray-200);
padding: 18px;
transition: var(--transition);
}
.request-card:hover { box-shadow: var(--shadow); border-color: var(--primary); }
.request-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.request-id { font-size: .75rem; color: var(--gray-400); }
.request-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.request-field { font-size: .82rem; }
.request-field .field-label { color: var(--gray-500); margin-bottom: 2px; }
.request-field .field-value { font-weight: 600; }
.request-actions { display: flex; gap: 10px; }
/* ── Sidebar Mobile Overlay ────────────────────────────────────── */
.sidebar-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.5);
z-index: 999;
}
/* ── Avatar group ──────────────────────────────────────────────── */
.user-chip {
display: inline-flex; align-items: center; gap: 8px;
}
.user-chip .avatar {
width: 30px; height: 30px; border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex; align-items: center; justify-content: center;
font-size: .7rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-chip .name { font-size: .85rem; font-weight: 600; }
/* ── Switch toggle ─────────────────────────────────────────────── */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
position: absolute; cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--gray-300); border-radius: 99px;
transition: .3s;
}
.slider::before {
content: '';
position: absolute; height: 18px; width: 18px;
left: 3px; bottom: 3px;
background: #fff; border-radius: 50%; transition: .3s;
}
input:checked + .slider { background: var(--secondary); }
input:checked + .slider::before { transform: translateX(20px); }
/* Notifications sonores (admin — Paramètres) */
.admin-notif-toggle-row {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200);
}
.admin-notif-toggle-title { font-size: .86rem; font-weight: 700; color: var(--gray-800); }
.admin-notif-toggle-sub { font-size: .74rem; color: var(--gray-500); margin-top: 4px; max-width: 380px; line-height: 1.5; }
.admin-sound-picker { display: flex; flex-direction: column; gap: 8px; }
.admin-sound-option {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--radius);
border: 1.5px solid var(--gray-200); background: var(--gray-100);
cursor: pointer; transition: border-color .15s, background .15s;
}
.admin-sound-option:hover { border-color: rgba(255,98,0,.35); }
.admin-sound-option--active { border-color: var(--primary); background: rgba(255,98,0,.05); }
.admin-sound-option-radio {
width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
border: 1.5px solid var(--gray-300); background: #fff;
display: flex; align-items: center; justify-content: center;
color: transparent; font-size: .58rem; transition: border-color .15s, background .15s, color .15s;
}
.admin-sound-option--active .admin-sound-option-radio { border-color: var(--primary); background: var(--primary); color: #fff; }
.admin-sound-option-label { flex: 1; min-width: 0; font-size: .82rem; font-weight: 600; color: var(--gray-700); }
.admin-sound-preview-btn {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
border: 1px solid var(--gray-300); background: #fff; color: var(--gray-600);
cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .66rem;
transition: background .15s, color .15s, border-color .15s;
}
.admin-sound-preview-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
/* ── Pagination ────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 6px; margin-top: 20px; justify-content: center; }
.page-btn {
width: 36px; height: 36px; border-radius: var(--radius);
border: 1.5px solid var(--gray-200);
background: var(--white); color: var(--gray-600);
cursor: pointer; font-size: .875rem; font-weight: 600;
display: flex; align-items: center; justify-content: center;
transition: var(--transition);
}
.page-btn:hover, .page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* ── Commission badge ──────────────────────────────────────────── */
.commission-pill {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(0,154,68,.12); color: var(--secondary-dark);
padding: 3px 10px; border-radius: 99px;
font-size: .75rem; font-weight: 700;
}
/* ── Profile ───────────────────────────────────────────────────── */
.profile-banner {
height: 120px;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
position: relative;
}
.profile-avatar-wrap {
position: absolute; bottom: -30px; left: 28px;
}
.profile-avatar {
width: 70px; height: 70px; border-radius: 50%;
background: var(--white);
border: 4px solid var(--white);
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; font-weight: 800;
color: var(--primary);
box-shadow: var(--shadow);
}
.profile-info-section { padding: 42px 28px 22px; }
.profile-name { font-size: 1.2rem; font-weight: 700; }
.profile-role {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,98,0,.1); color: var(--primary);
padding: 4px 12px; border-radius: 99px;
font-size: .75rem; font-weight: 700; margin-top: 6px;
}
/* ── Stat Mini ─────────────────────────────────────────────────── */
.stat-mini {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0; border-bottom: 1px solid var(--gray-200);
}
.stat-mini:last-child { border-bottom: none; }
.stat-mini-label { font-size: .82rem; color: var(--gray-500); }
.stat-mini-val { font-size: .9rem; font-weight: 700; }
/* ── Top Export bar ────────────────────────────────────────────── */
.export-bar {
display: flex; gap: 10px; margin-bottom: 16px;
}
/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
:root { --sidebar-w: 260px; }
.sidebar { transform: translateX(-100%); }
.sidebar.open { transform: translateX(0); }
.sidebar-overlay { display: block; opacity: 0; visibility: hidden; transition: var(--transition); }
.sidebar-overlay.open { opacity: 1; visibility: visible; }
.main-content { margin-left: 0; }
.topbar-menu-btn { display: flex; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.page-content { padding: 16px; }
.operator-grid { grid-template-columns: 1fr 1fr 1fr; }
.request-body { grid-template-columns: 1fr; }
.filter-bar { flex-direction: column; align-items: stretch; }
.search-box { max-width: 100%; }
}
@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr; }
.modal { border-radius: var(--radius-lg); }
.wallet-amount { font-size: 1.8rem; }
}
/* ── Espace administrateur (espace-gestion.html) sur smartphone : sidebar
déjà en tiroir dès 768px ci-dessus ; ici on resserre les marges, on
empile les grilles et on rend les tableaux défilables pour que tout
reste lisible et utilisable sur un écran de téléphone. ── */
@media (max-width: 640px) {
.main-content { max-width: 100vw; overflow-x: hidden; }
.topbar { padding: 0 12px; gap: 10px; }
.topbar-title { font-size: .98rem; }
.topbar-btn { width: 34px; height: 34px; }
.page-content { padding: 14px 12px 90px; }
.page-header { margin-bottom: 16px; }
.page-header h2 { font-size: 1.15rem; }
.card-header { padding: 14px 14px 12px; flex-wrap: wrap; row-gap: 8px; }
.card-body { padding: 14px; }
.grid-2, .grid-3 { grid-template-columns: 1fr; gap: 14px; }
.stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.operator-grid { grid-template-columns: 1fr 1fr; }
.filter-bar { flex-direction: column; align-items: stretch; width: 100%; }
.filter-bar .search-box,
.card-header .filter-bar .search-box { max-width: 100%; }
.card-header .filter-bar { margin: 0; width: 100%; }
/* Tableaux : défilement horizontal dans leur conteneur plutôt que de
pousser toute la page en largeur. */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrapper table { min-width: 560px; font-size: .8rem; }
.table-wrapper th, .table-wrapper td { white-space: nowrap; }
}
@media (max-width: 400px) {
.stats-grid { grid-template-columns: 1fr; }
.page-content { padding: 12px 10px 90px; }
.card-body { padding: 12px 10px; }
}
/* ── Print (Receipt) ───────────────────────────────────────────── */
@media print {
.sidebar, .topbar, .no-print { display: none !important; }
.main-content { margin-left: 0 !important; }
.receipt { border: 1px solid #ccc; }
}
/* ── Animations ────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fade-in { animation: fadeIn .4s ease; }
.pulse { animation: pulse 2s infinite; }
.spin { animation: spin .8s linear infinite; }
.loading-spinner {
width: 20px; height: 20px;
border: 2px solid rgba(255,255,255,.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin .7s linear infinite;
display: inline-block;
}
/* ── Auth Page (login) ─────────────────────────────────────────── */
.auth-page {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #FF6200 0%, #CC4E00 35%, #1A6E35 70%, #009A44 100%);
padding: 20px;
position: relative; overflow: hidden;
}
.auth-page::before {
content: '';
position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.auth-card {
background: var(--white);
border-radius: var(--radius-xl);
width: 100%; max-width: 440px;
padding: 36px;
box-shadow: var(--shadow-lg);
position: relative; z-index: 1;
animation: fadeIn .5s ease;
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo-img {
width: 130px; height: 130px; object-fit: contain;
display: block; margin: 0 auto 6px;
filter: drop-shadow(0 6px 20px rgba(255,98,0,.35));
}
.auth-logo-sub { font-size: .8rem; color: var(--gray-500); margin-top: 4px; }
.auth-tabs {
display: flex; border-bottom: 2px solid var(--gray-200);
margin-bottom: 24px;
}
.auth-tab {
flex: 1; padding: 10px;
text-align: center; font-size: .88rem; font-weight: 600;
color: var(--gray-500); cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -2px;
transition: var(--transition);
}
.auth-tab.active { color: var(--primary); border-color: var(--primary); }
.demo-access {
margin-top: 24px; padding-top: 20px;
border-top: 1px solid var(--gray-200);
}
.demo-title { text-align: center; font-size: .78rem; color: var(--gray-400); margin-bottom: 12px; }
.demo-btns { display: flex; gap: 8px; }
.demo-btn {
flex: 1; padding: 9px 8px;
border-radius: var(--radius);
border: 1.5px solid var(--gray-200);
background: var(--white);
font-size: .75rem; font-weight: 700;
cursor: pointer; transition: var(--transition);
display: flex; flex-direction: column; align-items: center; gap: 4px;
color: var(--gray-700);
}
.demo-btn:hover { border-color: var(--primary); color: var(--primary); }
.demo-btn i { font-size: 1rem; }
/* ================================================================
NOUVEAU FLUX TRANSFERT GUIDÉ
================================================================ */
/* ── Balance Strip ─────────────────────────────────────────────── */
.balance-strip {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
border-radius: var(--radius-lg);
padding: 18px 22px;
display: flex; align-items: center; gap: 16px;
color: #fff; margin-bottom: 24px;
border: 1px solid rgba(255,98,0,.25);
box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.bs-icon {
width: 48px; height: 48px;
background: rgba(255,98,0,.18);
border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; color: var(--primary-light); flex-shrink: 0;
}
.bs-label { font-size: .7rem; opacity: .65; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.bs-amount { font-size: 1.5rem; font-weight: 800; letter-spacing: -.5px; }
.bs-sub { font-size: .72rem; opacity: .6; margin-top: 2px; }
.bs-recharge {
margin-left: auto; flex-shrink: 0;
background: rgba(255,98,0,.18); color: var(--primary-light);
border: 1.5px solid rgba(255,98,0,.35);
border-radius: var(--radius); padding: 9px 18px;
font-size: .8rem; font-weight: 700; cursor: pointer;
transition: var(--transition); white-space: nowrap;
}
.bs-recharge:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
/* ── Transfer Layout (wizard, full-width) ─────────────────────── */
.tf-layout {
display: block;
margin-top: 8px;
background: linear-gradient(150deg, #0d1a3d 0%, #0a1330 55%, #060a1c 100%);
border-radius: var(--radius-lg);
padding: 12px 12px;
}
/* ── Stepper — en-tête "page" : flèche retour + titre + sous-titre,
aligné à gauche, fond blanc plein largeur. Remplace l'ancien badge
centré (modèle de référence fourni par le client). Inséré normalement
dans le padding de .tf-layout, pas de marges négatives. ───────── */
.tf-stepper-card {
background: #fff;
border: none;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: none;
outline: none;
margin: -12px -12px 0 -12px;
padding: 14px 18px 44px;
}
/* Barre de progression fine (demande explicite du 27/08 : "un autre
modèle complètement différent" des cercles reliés au trait). Largeur/
texte mis à jour par syncWizardBar()/schedSyncStepper() (js/client.js) —
plus aucune étape cliquable individuellement (seul le bouton retour
permet de reculer, un cran à la fois), donc plus de wz-ind-N/wz-line-N
dans le DOM. */
.tf-stepper-card { position: relative; }
.wz-progress-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.wz-progress-head:has(.wzc-back-hidden) { margin-bottom: 0; }
.wz-progress-label {
font-size: .68rem; font-weight: 800; color: #4A4E6B;
text-transform: uppercase; letter-spacing: .04em;
}
/* Modèle "segmenté" (demande explicite : "propose un autre modèle") —
4 blocs séparés par de fins interstices plutôt qu'un trait continu ;
le mécanisme JS (largeur en % sur .wz-progress-fill, voir
syncWizardBar()/schedSyncStepper()) reste inchangé, les interstices
sont posés en surcouche décorative (::after) par-dessus le
remplissage. */
.wz-progress-track {
position: relative;
width: 100%; height: 7px; border-radius: 4px; overflow: hidden;
background: #EEF0F4;
margin-bottom: 16px;
}
.wz-progress-track::after {
content: '';
position: absolute; inset: 0; z-index: 1;
background-image: repeating-linear-gradient(90deg,
transparent 0, transparent calc(25% - 3px),
var(--white, #fff) calc(25% - 3px), var(--white, #fff) 25%);
pointer-events: none;
}
.wz-progress-fill {
height: 100%; border-radius: 4px;
background: linear-gradient(90deg, #2A3363, #0F0A2E);
transition: width .35s cubic-bezier(.4,0,.2,1);
}
/* Modèle "points numérotés" propre au tunnel "Maintenant" (demande
explicite) — remplace la barre ci-dessus pour #tf-order-now (voir
#wz-dots, index.html) ; le tunnel "Plus tard" garde la barre
segmentée (#sched-wz-progress-track/-fill) pour son nombre d'étapes
variable (4 ou 5). États posés par syncWizardBar() (js/client.js). */
.wz-dots { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 8px; margin-bottom: 16px; }
.wz-dot-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.wz-dot {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: .7rem; font-weight: 800; color: var(--gray-400);
background: #EEF0F4; border: 1.5px solid transparent;
transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.wz-dot.active {
background: #0F0A2E; color: #fff;
box-shadow: 0 0 0 4px rgba(15,10,46,.15);
}
.wz-dot.done { background: #fff; border-color: #0F0A2E; color: #0F0A2E; }
.wz-dot-line { display: none; }
.wz-dot-lbl {
font-size: .58rem; font-weight: 700; color: var(--gray-400);
text-align: center; line-height: 1.2;
transition: color .25s ease;
}
.wz-dot.active + .wz-dot-lbl,
.wz-dot.done + .wz-dot-lbl { color: #0F0A2E; }
.wzc-shared-back {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; padding: 0; flex-shrink: 0;
background: none; border: none;
color: #0F0A2E; font-size: 1.1rem;
cursor: pointer; font-family: inherit;
transition: opacity .15s;
}
.wzc-shared-back:hover { opacity: .6; }
/* Rien à quitter depuis la 1re étape — masqué tant qu'elle est active.
display (pas visibility) : le libellé qui justifiait de réserver
l'espace a été supprimé (demande explicite : "rapproche les etapes du
bouton"), donc l'en-tête peut s'effacer complètement à l'étape 1.
Posé directement en JS (syncWizardBar()/schedSyncStepper()). */
.wzc-shared-back.wzc-back-hidden { display: none; }
/* Consigne de l'étape en cours — agrandie, gras (demande explicite du
27/08, revenue sur "enlève le gras" : "je veux qu'ils soit en gras"),
en casse de phrase normale plutôt qu'en majuscules ("respecte le
principe d'une phrase" — une seule majuscule initiale, comme le texte
source wzc.sub.* lui-même). Texte mis à jour par syncWizardBar()/
schedSyncStepper() (js/client.js) à chaque changement d'étape. */
.wzc-active-sub {
font-size: .98rem; font-weight: 800; color: #0F0A2E;
text-align: left; letter-spacing: normal;
}
/* ── Slider horizontal des étapes ─────────────────────────────── */
/* Simple bloc de contenu, sans fond/border-radius propre : il montre le
fond bleu marine natif de .tf-layout/#sched-section en transparence, y
compris les vrais coins arrondis du haut de la carte (redevenus visibles
tout seuls maintenant que .tf-stepper-card, juste au-dessus, est un
badge inséré normalement et non plus un bandeau plein largeur). */
.tf-slider-wrap {
overflow: hidden;
margin-bottom: 10px;
transition: height .38s cubic-bezier(.4, 0, .2, 1);
}
/* Bandeau marine "encoché" sous l'en-tête blanc, pour #tf-order-now
(Maintenant) ET #sched-section (Plus tard) — même fond marine restant
visible dans les deux tunnels tant que le fond blanc de #tf-order-now
n'est pas encore déployé partout. Le chevauchement de -14px fait
remonter ce bandeau SOUS le blanc (qui garde exprès un padding-bottom
suffisant pour rester visible derrière) — les coins arrondis de CE
bandeau découpent alors deux encoches qui révèlent le blanc en
dessous, au lieu d'un arrondi invisible marine-sur-marine (le fond de
.tf-layout est le même marine). Peint après le header dans le flux
normal, donc par-dessus lui dans la zone de chevauchement.
Rayon volontairement réduit (14px au lieu de --radius-lg/26px) : un
arrondi plus large donnait l'impression d'une bordure épaisse autour
de la zone marine. */
#tf-order-now .tf-slider-wrap,
#sched-section .tf-slider-wrap {
margin: -14px -12px 10px -12px;
border-radius: 14px 14px 0 0;
/* Blanc plein (modèle de référence du 27/08) — remplace l'ancien
bandeau marine : #tf-order-now/#sched-section sont maintenant blancs
de bout en bout (voir plus bas), donc rien à "encocher" en dessous. */
background: #fff;
}
/* Réduit la hauteur du bandeau blanc "Réseau / Sélectionnez votre
opérateur" : padding-bottom aligné sur le nouveau rayon (14px) pour
que l'encoche marine ci-dessus reste visible sans mordre sur le texte.
Les deux tunnels (Maintenant/Plus tard) partagent le même réglage. */
#tf-order-now .tf-stepper-card,
#sched-section .tf-stepper-card { padding: 2px 18px 14px; }
.tf-slider-track {
display: flex;
width: 400%;
transition: transform .42s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
align-items: flex-start;
}
.tf-slide {
width: 25%;
padding: 10px 10px 16px;
box-sizing: border-box;
}
/* Barre d'accent à gauche + badge icône rond (plutôt qu'un pavé plein
orange) : c'est un simple titre de section, jamais cliquable — l'ancien
rendu "bouton plein" prêtait à confusion avec les vrais CTA (Continuer,
Payer maintenant...) de la même couleur. */
.tf-slide-hd {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-left: 3px solid var(--primary);
border-radius: 12px;
padding: 10px 14px;
margin-bottom: 24px;
font-size: .68rem; font-weight: 900; color: #fff; line-height: 1;
text-transform: uppercase; letter-spacing: .5px;
}
.tf-slide-hd i {
background: var(--primary);
color: #fff; font-size: .62rem; line-height: 1;
width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(255,98,0,.4);
}
/* Bouton Retour */
.tf-svc-row {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-bottom: 10px;
}
.tf-svc-row .service-toggle { max-width: 260px; width: 100%; margin-bottom: 0; }
.tf-svc-row .svc-tab { padding: 12px 10px; gap: 3px; }
.tf-svc-row .svc-tab-title { font-size: .85rem; }
.tf-svc-row .svc-tab-sub { font-size: .64rem; }
/* Retour = action secondaire discrète (contour translucide) plutôt qu'un
cercle vert plein — le vert n'existe nulle part ailleurs dans la charte
et rivalisait visuellement avec le "Continuer" orange, la vraie action
principale. Modèle plus simple/sobre, cohérent avec le reste. */
.wz-back-btn {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 32px; height: 32px;
background: rgba(255,255,255,.06);
border: 1.5px solid rgba(255,255,255,.18);
border-radius: 50%; padding: 0;
color: rgba(255,255,255,.75); font-size: .78rem;
cursor: pointer; font-family: inherit;
margin-bottom: 12px;
transition: background .18s, border-color .18s, transform .15s;
}
.tf-svc-row .wz-back-btn,
.tf-dest-row .wz-back-btn { margin-bottom: 0; }
.wz-back-btn:hover {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.3);
color: #fff;
transform: translateX(-2px);
}
.wz-back-btn:active { transform: scale(.95); }
/* Bouton Continuer — même gabarit que .wz-back-btn, teinte opérateur,
flèche vers la droite, posé de l'autre côté de la ligne. */
.wz-next-btn {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 32px; height: 32px;
background: var(--op-clr, var(--primary));
border: 1.5px solid var(--op-clr, var(--primary));
border-radius: 50%; padding: 0;
color: var(--op-clr-text, #fff); font-size: .78rem;
cursor: pointer; font-family: inherit;
box-shadow: 0 3px 12px rgba(255,98,0,.35);
transition: background .18s, box-shadow .18s, transform .15s;
}
.tf-svc-row .wz-next-btn,
.tf-dest-row .wz-next-btn { margin-bottom: 0; }
.wz-next-btn:hover { box-shadow: 0 0 0 3px rgba(255,98,0,.25); transform: translateX(2px); }
.wz-next-btn:active { transform: scale(.95); }
.tf-pay-nav-row { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 12px; }
.tf-pay-nav-row .wz-back-btn { margin-bottom: 0; }
/* Les slides sont toujours visibles — on neutralise l'accordéon */
.tf-slide.tf-step { background: transparent; border: none; border-radius: 0; box-shadow: none; margin: 0; overflow: visible; }
.tf-slide.tf-step.active,
.tf-slide.tf-step.complete,
.tf-slide.tf-step.locked { opacity: 1; pointer-events: auto; border: none; box-shadow: none; }
/* ── Navigation wizard ─────────────────────────────────────────── */
.tf-wz-nav {
display: flex; gap: 10px; margin-bottom: 14px;
}
.tf-wz-back {
padding: 12px 20px; border-radius: var(--radius); border: 1.5px solid var(--gray-200);
background: var(--white); color: var(--gray-600);
font-size: .85rem; font-weight: 700; cursor: pointer;
display: flex; align-items: center; gap: 7px;
transition: background .18s, border-color .18s;
}
.tf-wz-back:hover { background: var(--gray-100); }
.tf-wz-next {
flex: 1; padding: 13px 20px; border-radius: var(--radius); border: none;
background: var(--primary); color: #fff;
font-size: .9rem; font-weight: 800; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 4px 16px rgba(255,98,0,.35);
transition: background .18s, box-shadow .18s, transform .15s;
}
.tf-wz-next:hover { background: var(--primary-dark); transform: translateY(-1px); }
.tf-wz-next:active { transform: translateY(0); }
/* ── Récapitulatif inline (étape 4) ──────────────────────────── */
.tf-inline-summary {
background: rgba(255,98,0,.04); border: 1.5px solid rgba(255,98,0,.15);
border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px;
}
.tis-head {
font-size: .82rem; font-weight: 800; color: var(--primary);
margin-bottom: 12px; display: flex; align-items: center; gap: 7px;
}
.tis-grid { display: flex; flex-direction: column; gap: 0; }
.tis-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0; border-bottom: 1px solid rgba(255,98,0,.08);
font-size: .82rem;
}
.tis-row:last-child { border-bottom: none; }
.tis-label { color: var(--gray-500); font-weight: 500; }
.tis-val { font-weight: 700; color: var(--gray-800); }
.tis-amount { color: var(--primary); font-size: .95rem; }
.tis-total {
display: flex; justify-content: space-between; align-items: center;
margin-top: 12px; padding-top: 12px; border-top: 2px solid rgba(255,98,0,.2);
font-size: .82rem; font-weight: 700; color: var(--gray-700);
}
.tis-total-amt { font-size: 1.15rem; font-weight: 900; color: var(--primary); }
/* ── Step card : en-tête pilule-bulle ────────────────────────── */
.tf-step-head {
padding: 11px 14px;
display: flex; align-items: center; gap: 10px;
cursor: default; transition: background .15s;
}
.tf-step.active .tf-step-head { background: rgba(255,98,0,.03); }
.tf-step.complete .tf-step-head { background: rgba(34,197,94,.03); cursor: pointer; }
/* Pilule-bulle */
.tf-step-pill {
display: inline-flex; align-items: center; gap: 8px;
border-radius: 30px; padding: 5px 14px 5px 6px; flex-shrink: 0;
background: #f0f0f0; border: 2px solid #e5e7eb;
transition: all .25s;
}
.tf-sp-dot {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: #ddd; transition: all .25s;
}
.tf-sp-num { font-size: .8rem; font-weight: 900; color: #aaa; }
.tf-sp-check { display: none; font-size: .75rem; }
.tf-sp-lbl { font-size: .78rem; font-weight: 800; color: #aaa; white-space: nowrap; }
/* Pilule active */
.tf-step.active .tf-step-pill {
background: rgba(255,98,0,.07); border-color: var(--primary);
box-shadow: 0 2px 10px rgba(255,98,0,.15);
}
.tf-step.active .tf-sp-dot {
background: radial-gradient(circle at 38% 32%, #ffb36e 0%, #FF6200 60%, #c44800 100%);
box-shadow: 0 3px 10px rgba(255,98,0,.4), inset 0 1px 3px rgba(255,200,100,.4);
}
.tf-step.active .tf-sp-num { color: #fff; }
.tf-step.active .tf-sp-lbl { color: var(--primary); }
/* Pilule complète */
.tf-step.complete .tf-step-pill {
background: rgba(34,197,94,.07); border-color: #22c55e;
}
.tf-step.complete .tf-sp-dot {
background: radial-gradient(circle at 38% 32%, #7eeda0 0%, #22c55e 60%, #148038 100%);
box-shadow: 0 3px 8px rgba(34,197,94,.35);
}
.tf-step.complete .tf-sp-num { display: none; }
.tf-step.complete .tf-sp-check { display: block; color: #fff; }
.tf-step.complete .tf-sp-lbl { color: #16a34a; }
/* Pilule verrouillée */
.tf-step.locked .tf-step-pill { opacity: .5; }
/* Preview + flèche */
.tf-step-preview {
flex: 1; font-size: .72rem; color: #bbb; font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tf-step.active .tf-step-preview { color: var(--primary); font-weight: 600; }
.tf-step.complete .tf-step-preview { color: #16a34a; font-weight: 700; }
.tf-step-arrow { font-size: .7rem; color: #ddd; transition: transform .25s, color .2s; flex-shrink: 0; }
.tf-step.active .tf-step-arrow { color: var(--primary); transform: rotate(90deg); }
.tf-step.complete .tf-step-arrow { color: #22c55e; }
.tf-step-body { padding: 18px 20px; border-top: 1px solid var(--gray-200); }
/* ── Operator Cards (New) ──────────────────────────────────────── */
.op-row { display: flex; justify-content: center; align-items: stretch; width: 100%; gap: 10px; margin-top: 4px; }
/* Carte = colonne pastel teintée par réseau (logo carré + pilule nom),
inspirée d'un modèle de référence à cartes hautes arrondies. */
.op-card {
position: relative; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: space-between;
gap: 14px;
cursor: pointer; flex: 1; padding: 16px 10px;
border-radius: 22px; border: 1.5px solid transparent;
transition: all .3s cubic-bezier(.34,1.46,.64,1);
}
/* Léger reflet en haut de carte, façon verre — touche "premium" discrète,
sans changer les couleurs propres à chaque réseau. */
.op-card::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,.08), transparent);
pointer-events: none;
}
/* translateY/scale au survol réservés à la souris réelle : sur tactile, le
:hover reste "collé" après le tap qui sélectionne la carte, ce qui donne
l'impression que la carte choisie grossit toute seule et reste agrandie. */
@media (hover: hover) and (pointer: fine) {
.op-card:hover { transform: translateY(-3px); }
.op-card:hover .op-logo-sq { transform: scale(1.05); }
}
.op-card--orange { background: linear-gradient(165deg, rgba(255,130,40,.18), rgba(255,130,40,.04)); border-color: rgba(255,130,40,.3); }
/* Fond neutre "verre" (pas de teinte jaune pleine) : mélangé au fond très
sombre de la carte, le jaune MTN vire au brun-olive terne plutôt que de
rester lisible comme sa couleur de marque — l'identité MTN reste portée
par le logo, la pastille du nom et la bordure/lueur jaune (.active
plus bas), pas par un remplissage. */
.op-card--mtn { background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border-color: rgba(255,204,0,.35); }
.op-card--moov { background: linear-gradient(165deg, rgba(29,122,224,.18), rgba(29,122,224,.04)); border-color: rgba(29,122,224,.3); }
/* Logo carré (garde le fond de marque déjà présent dans les PNG) */
.op-logo-sq {
width: 64px; height: 64px; border-radius: 14px;
overflow: hidden; flex-shrink: 0; margin: 0 auto;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.03) inset;
transition: transform .3s cubic-bezier(.34,1.46,.64,1), box-shadow .3s ease;
}
.op-card.active .op-logo-sq { box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset; }
.op-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* Le PNG Orange a une large marge blanche autour du logo (contrairement
aux visuels MTN/Moov qui remplissent déjà tout le cadre) — on zoome
uniquement celui-ci pour qu'il occupe la vignette au même titre que
les autres réseaux. */
.op-card--orange .op-logo-img { transform: scale(1.7); }
.op-emoji-fb { font-size: 2.2rem; line-height: 1; }
/* Pilule nom */
.op-name-pill {
background: #fff; color: #1a1a2e;
font-size: .72rem; font-weight: 800; letter-spacing: .02em;
padding: 8px 16px; border-radius: 999px;
white-space: nowrap;
box-shadow: 0 3px 10px rgba(0,0,0,.2);
transition: color .2s;
}
/* Badge check */
.op-check {
position: absolute; top: 10px; right: 10px;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(255,255,255,.12);
border: 1.5px solid rgba(255,255,255,.35);
box-shadow: 0 2px 6px rgba(0,0,0,.2);
color: transparent;
z-index: 10;
display: flex; align-items: center; justify-content: center;
font-size: .62rem; transition: var(--transition);
}
/* États actifs — léger effet "carte soulevée" en plus de la lueur
colorée déjà en place, pour une sélection plus nette. */
.op-card.active { transform: translateY(-2px); }
@media (hover: hover) and (pointer: fine) {
.op-card.active:hover { transform: translateY(-4px); }
}
.op-card--orange.active { border-color: #FF6200; box-shadow: 0 8px 26px rgba(255,98,0,.35); }
.op-card--mtn.active { border-color: #E6B800; box-shadow: 0 8px 26px rgba(230,184,0,.35); }
.op-card--moov.active { border-color: #0066CC; box-shadow: 0 8px 26px rgba(0,102,204,.35); }
.op-card--orange.active .op-check { background: #FF6200; color: #fff; }
.op-card--mtn.active .op-check { background: #E6B800; color: #fff; }
.op-card--moov.active .op-check { background: #0066CC; color: #fff; }
.op-card--orange.active .op-name-pill { color: #FF6200; }
.op-card--mtn.active .op-name-pill { color: #CA8A04; }
.op-card--moov.active .op-name-pill { color: #0066CC; }
/* Cartes réseau plus compactes dans le tunnel de commande (étape 1) et
la commande programmée : réduit la hauteur de cette étape pour éviter
que le fond du .tf-layout ne s'agrandisse visiblement par rapport aux
autres étapes (voir _tfSyncSlideHeight(), js/client.js). */
/* Descend le logo dans les cartes réseau de l'étape 1 "Transférer" sans
agrandir la carte : on retire au gap logo/pilule ce qu'on ajoute en
marge au-dessus du logo, la hauteur totale de la carte ne bouge pas. */
#step-op .op-card, #sched-step-op .op-card { gap: 4px; }
#step-op .op-logo-sq, #sched-step-op .op-logo-sq { margin-top: 10px; }
#tf-order-now .op-card, #sched-section .op-card { padding: 6px 8px; gap: 5px; }
#tf-order-now .op-logo-sq, #sched-section .op-logo-sq { width: 46px; height: 46px; border-radius: 12px; }
#tf-order-now .op-name-pill, #sched-section .op-name-pill { padding: 5px 12px; font-size: .66rem; }
/* Cartes "Chap Chap" (renderChapChap(), js/client.js) — même carte réseau
(.op-card--orange/mtn/moov, couleur/fond/rayon inchangés) mais avec le
numéro du destinataire et le type d'opération affichés directement
dessus (pas seulement au survol, invisible au toucher sur téléphone). */
.ccp-card { justify-content: flex-start; gap: 6px; }
.ccp-type {
font-size: .54rem; font-weight: 800; color: rgba(255,255,255,.6);
text-transform: uppercase; letter-spacing: .04em;
}
.ccp-num {
font-size: .7rem; font-weight: 700; color: #fff;
font-variant-numeric: tabular-nums;
}
/* Section "Chap Chap" en version très compacte — bandeau/carte/cartes
réduits, à la demande explicite (moins d'espace pris que le tunnel de
commande juste au-dessus, qui lui garde sa taille normale). */
#chapchap-section { padding: 0 10px 10px; margin-top: -42px; }
#chapchap-section .tf-slide-hd { padding: 6px 10px; margin-bottom: 10px; font-size: .58rem; gap: 6px; }
/* Agrandi (demande explicite : "augmente la taille des sections") — sans
revenir à la taille pleine .op-card d'origine, la version compacte
d'origine (30px/.46rem/.58rem) restait lisible mais tassée. */
#chapchap-section .op-logo-sq { width: 38px; height: 38px; border-radius: 10px; }
#chapchap-section .ccp-type { font-size: .56rem; }
#chapchap-section .ccp-num { font-size: .72rem; }
/* Liste de lignes horizontales (demande explicite) à la place des cartes
verticales côte à côte : .op-row empile les lignes, chaque .ccp-card
redevient une rangée flex (logo à gauche, texte au centre via .ccp-info,
montant à droite) au lieu de la colonne centrée héritée de .op-card. */
#chapchap-section .op-row { flex-direction: column; gap: 6px; }
#chapchap-section .ccp-card {
flex-direction: row; align-items: center; justify-content: flex-start;
width: 100%; padding: 11px 12px; gap: 12px; border-radius: 12px;
}
#chapchap-section .ccp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#chapchap-section .op-name-pill {
flex-shrink: 0; font-size: .74rem; padding: 4px 9px;
background: none; box-shadow: none; color: #dc2626;
}
/* Fond gris neutre pour chaque ligne, peu importe le réseau (demande
explicite) — remplace les teintes orange/jaune/bleu par réseau
héritées de .op-card--orange/mtn/moov, qui n'ont plus lieu d'être une
fois cette section sans fond navy derrière. */
#chapchap-section .op-card--orange,
#chapchap-section .op-card--mtn,
#chapchap-section .op-card--moov {
background: #F1F3F8; border-color: #E8ECF4;
}
/* Sans fond (demande explicite) — plus de carte navy ni blanche, le
bloc devient transparent et se fond dans la page ; le libellé
"Reprendre rapidement" passe en noir/gras pour rester lisible sans
fond sombre derrière lui. Chaque ligne garde sa teinte réseau
(.op-card--orange/mtn/moov) pour rester identifiable, texte recoloré
en noir/gris pour la même raison. */
#chapchap-section {
background: none; border: none; box-shadow: none;
}
#chapchap-section .tf-slide-hd {
background: none; border: none;
border-radius: 0; color: #000; font-size: .82rem;
}
#chapchap-section .ccp-type { color: #000 !important; }
#chapchap-section .ccp-num { color: #000 !important; }
#chapchap-section .tf-slide-hd i {
background: none; box-shadow: none; color: #000;
width: 30px; height: 30px; font-size: 1rem;
}
/* Soulignement "trait curviligne" bleu marine sous « Reprendre rapidement »
(demande explicite) — vaguelette SVG en fond, répétée sous le libellé. */
#chapchap-section .tf-slide-hd span { position: relative; }
#chapchap-section .tf-slide-hd span::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 7px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='7' viewBox='0 0 36 7'%3E%3Cpath d='M1 4 Q 6 0.5 10 4 T 19 4 T 28 4 T 36 4' fill='none' stroke='%230F0A2E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center;
background-size: auto 7px;
}
/* Carrousel de cartes promo, juste au-dessus de #order-mode-section (voir
index.html) — .promo-carousel-track glisse en transform:translateX() via
_promoCarouselInit() (js/client.js), une carte = 100% de la largeur du
wrap, alternées automatiquement. */
.promo-carousel-wrap {
/* .promo-carousel-wrap est un enfant direct de .cs-section.active
(display:flex, gap:20px, voir plus bas) — margin-top négatif pour
réduire l'écart avec la grille d'actions juste au-dessus, même
technique que .pgc-panel un peu plus bas dans ce fichier. */
overflow: hidden; border-radius: 14px; margin-top: -14px;
}
.promo-carousel-track {
display: flex;
transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.promo-carousel-track .promo-recruit {
flex: 0 0 100%; min-width: 0; margin-top: 0;
}
.promo-carousel-dots {
display: flex; align-items: center; justify-content: center; gap: 6px;
/* Négatif : réduit l'espace blanc visible autour des points, qui
s'ajoute sinon au gap:20px de #cs-transfer.active (voir plus bas dans
ce fichier) des deux côtés (carrousel au-dessus, "Je passe ma
commande" en dessous) — même mécanisme que la jointure order-mode
déjà annulée plus bas. */
margin: -10px 0;
}
/* Modèle "segments" (demande explicite : "propose un autre modèle des
points") — petits traits arrondis plutôt que des pastilles rondes, en
bleu marine (au lieu de l'orange) : inactif = trait court estompé,
actif = trait long plein, effet barre de progression. */
.promo-carousel-dot {
width: 14px; height: 3px; border-radius: 2px;
background: rgba(15,10,46,.22);
transition: background .25s, width .25s;
}
.promo-carousel-dot.active {
width: 28px; background: #0F0A2E;
}
/* Carte "devenir promoteur"/"bonus réseaux" — fond blanc, sans bordure
(demande explicite), relief porté uniquement par l'ombre. Texte en noir
et orange uniquement (aucun gris intermédiaire). */
.promo-recruit {
cursor: pointer; text-align: center;
border-radius: 14px;
padding: 20px 18px 22px;
background: #fff;
box-shadow: 0 6px 14px -10px rgba(0,0,0,.2);
/* Affiches réduites (demande explicite du 28/08) — min-height
partagé par les 3 cartes du carrousel, align-items:stretch
(.promo-carousel-track) synchronise leur hauteur sur la plus
grande des trois. */
min-height: 150px;
}
.promo-recruit-eyebrow {
display: flex; align-items: center; justify-content: center; gap: 5px;
font-size: .64rem; font-weight: 800; letter-spacing: .08em;
color: var(--primary-dark); margin-bottom: 4px;
}
.promo-recruit-dot {
width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
box-shadow: 0 0 5px 1px rgba(255,98,0,.7);
}
.promo-recruit-title {
font-size: .94rem; font-weight: 900; color: #000000; text-transform: uppercase;
line-height: 1.25; margin-bottom: 4px;
}
.promo-recruit-title em {
font-style: italic; color: var(--primary-dark);
}
.promo-recruit-sub {
font-size: .74rem; line-height: 1.35; color: #000000;
max-width: 260px; margin: 0 auto 8px;
}
.promo-recruit-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border: none; border-radius: 99px; padding: 7px 18px;
background: linear-gradient(135deg, var(--primary-light), var(--primary));
color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .03em;
cursor: pointer; box-shadow: 0 5px 11px -6px rgba(255,98,0,.6);
}
.promo-recruit-eyebrow-ico { font-size: .72rem; }
/* Cartes "bonus"/"assistance" — nouveau modèle (demande explicite du
28/08 : "propose un autre modèle") : texte ancré en bas à gauche
façon légende, accroche en badge pilule plutôt qu'en ligne centrée,
au lieu de l'ancien bloc centré verticalement. */
.promo-recruit--photo {
display: flex; flex-direction: column; justify-content: flex-end;
text-align: left; align-items: flex-start;
padding: 16px 16px 18px;
background-size: cover; background-position: center 15%;
}
.promo-recruit--photo .promo-recruit-eyebrow {
display: inline-flex; justify-content: flex-start;
background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
border-radius: 99px; padding: 3px 10px; margin-bottom: 8px;
color: #fff;
}
.promo-recruit--photo .promo-recruit-title,
.promo-recruit--photo .promo-recruit-sub { color: #fff; }
.promo-recruit--photo .promo-recruit-title em { color: var(--primary-light); }
.promo-recruit--photo .promo-recruit-sub { margin: 0 0 10px; max-width: 100%; }
.promo-recruit--photo .promo-bonus-logos,
.promo-recruit--photo .promo-recruit-btn { align-self: flex-start; }
/* Carte "pharmacies de garde" — bandeaux HTML façon affiche (titre en
deux rubans, ligne repère, bandeau "offert par") posés sur la photo
du pharmacien (img/garde garde.png), plutôt que de dépendre du texte
déjà incrusté dans l'image. .promo-recruit.promo-pharma-... :
double-classe pour passer devant .promo-recruit de base (padding,
text-align) sans dépendre de l'ordre des règles dans ce fichier. */
.promo-recruit.promo-recruit--pharma {
position: relative; overflow: hidden; padding: 0; text-align: left;
display: flex; flex-direction: column;
/* Affiche réduite (demande explicite) — plus besoin de la hauteur
généreuse qui garantissait de voir un visage en entier : img/pati.jfif
est un plan sans visage (blouse, presse-papier, plaquettes de
médicaments), pas de cadrage vertical délicat à préserver ici. */
min-height: 130px;
}
.promo-pharma-bg {
position: absolute; inset: 0;
background-image: url('../img/pati.jfif');
background-size: cover; background-position: center;
}
.promo-pharma-bg::after {
/* Fondu resserré tout contre le bord gauche — le visage du pharmacien
est cadré à droite (background-position ci-dessus), les rubans/la
pastille repère ont chacun déjà leur propre fond opaque (voir
.promo-pharma-title-l1/l2, .promo-pharma-loc plus bas). */
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.5) 10%, rgba(255,255,255,0) 22%);
}
.promo-pharma-title {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: flex-start;
margin: 10px 0 0 10px;
}
.promo-pharma-title-l1, .promo-pharma-title-l2 {
display: inline-flex; align-items: center; gap: 4px;
font-size: 1.05rem; font-weight: 900; letter-spacing: .01em;
color: #fff; text-transform: uppercase; line-height: 1.3;
padding: 4px 14px 4px 10px;
clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}
.promo-pharma-title-l1 { background: #0F0A2E; }
.promo-pharma-title-l2 { background: linear-gradient(135deg,#22B366,#0E7C3F); margin-top: 3px; }
.promo-pharma-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%; background: #fff;
color: #0E7C3F; font-size: .76rem; font-weight: 900; flex: none;
}
.promo-pharma-loc {
position: relative; z-index: 1;
display: flex; align-items: flex-start; gap: 6px;
margin: 10px 10px 10px 10px; max-width: 62%;
background: #EAF9EF; border: 1px solid #B8E8C4; border-radius: 10px;
padding: 7px 10px;
font-size: .68rem; line-height: 1.32; font-weight: 700; color: #0F0A2E;
}
.promo-pharma-loc-ico { font-size: .78rem; flex: none; margin-top: 1px; }
.promo-pharma-loc-em { color: #0E7C3F; }
/* Logos réseau (carte "bonus mardi/vendredi") — agrandis, sans bordure. */
.promo-bonus-logos {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin-bottom: 8px;
}
.promo-bonus-logo {
width: 38px; height: 38px; border-radius: 11px; overflow: hidden; flex-shrink: 0;
background: #fff; display: flex; align-items: center; justify-content: center;
box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.promo-bonus-logo img { width: 100%; height: 100%; object-fit: cover; }
/* "Me recharger" — en-tête (icône + titre + sous-titre) au-dessus des
deux cartes Maintenant/Plus tard, modèle adapté d'une référence
fournie par l'utilisateur (25/08), recoloré bleu marine/blanc pour
rester cohérent avec le reste du site (au lieu du violet d'origine
de la référence). */
.wz-order-head {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
/* Le parent flex (.cs-section.active, gap:20px) impose déjà 20px avec
#order-mode-section juste en dessous — réduit ici par une marge
négative (demande explicite du 25/08 : "diminue la taille de
l'espace blanc"). */
margin-bottom: -12px;
/* Espace avec le carrousel promo juste au-dessus, augmenté (demande
explicite du 25/08 : "augmente la taille de l'espace blanc"). */
margin-top: 16px;
}
.wz-order-head-ico {
width: 52px; height: 52px; border-radius: 50%;
background: rgba(15,10,46,.07); color: #0F0A2E;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem; margin-bottom: 6px;
}
.wz-order-head-title { font-size: 1rem; font-weight: 900; color: #16121F; letter-spacing: .01em; }
.wz-order-head-sub { font-size: .72rem; color: var(--gray-500); }
/* #order-mode-section n'est plus qu'un conteneur fonctionnel (affichage
Maintenant/Plus tard, voir setOrderMode()) — les deux cartes portent
maintenant elles-mêmes tout le style visuel, comme sur la référence,
plutôt qu'un cadre englobant blanc/sombre. */
#order-mode-section {
background: none; border: none; padding: 0; margin: 0; box-shadow: none;
}
.wz-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 10px; }
.wz-mode-card {
display: flex; align-items: center; justify-content: center; gap: 10px;
background: #fff; border: 1.5px solid var(--gray-200); border-radius: 16px;
padding: 10px 12px; cursor: pointer; font-family: var(--font); text-align: center;
transition: background .2s, border-color .2s;
}
.wz-mode-card.active { background: linear-gradient(135deg, #1B234F, #0F0A2E); border-color: #0F0A2E; }
.wz-mode-card-ico {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
background: rgba(15,10,46,.07); color: #0F0A2E;
display: flex; align-items: center; justify-content: center; font-size: .8rem;
transition: background .2s, color .2s;
}
.wz-mode-card.active .wz-mode-card-ico { background: rgba(255,255,255,.15); color: #fff; }
.wz-mode-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.wz-mode-card-title { font-size: .74rem; font-weight: 800; color: #16121F; }
.wz-mode-card-sub { font-size: .58rem; color: var(--gray-500); }
.wz-mode-card.active .wz-mode-card-title,
.wz-mode-card.active .wz-mode-card-sub { color: #fff; }
.wz-mode-card.active .wz-mode-card-sub { opacity: .75; }
.wz-mode-card-chev { font-size: .56rem; color: var(--gray-400); flex-shrink: 0; }
.wz-mode-card.active .wz-mode-card-chev { color: rgba(255,255,255,.6); }
/* "Passez votre commande" (#tf-order-now) et "Commande automatique"
(#sched-section) — cartes autonomes (#order-mode-section ne portant
plus de style visuel, plus rien à raccorder ici), teintes d'origine. */
#tf-order-now,
#sched-section {
padding: 12px 12px 10px;
/* Un peu d'air entre les cartes Maintenant/Plus tard et le tunnel en
dessous (demande explicite : "plus espacé" — le collé total d'avant
paraissait trop serré), réduit depuis (demande explicite du 27/08 :
"trop d'espace blanc" une fois le stepper numéroté en place). */
margin-top: 4px;
/* Découpe tout enfant (notamment .tf-stepper-card, flush contre ces
bords) exactement sur le rayon arrondi de CETTE carte — sans ça, deux
coins arrondis superposés (celui de la carte, celui du badge blanc)
peuvent laisser un liseré d'1px de la couleur de fond entre les deux
(anti-aliasing), perceptible comme une fine bordure marine résiduelle
dans le coin. */
overflow: hidden;
}
/* #sched-section a désormais un bandeau d'intro en premier enfant
(.tf-order-intro) — moins de padding en haut que #tf-order-now pour
compenser (demande explicite du 27/08 : "diminue l'espace blanc du
haut"), le bandeau porte déjà son propre espacement. */
#sched-section { padding-top: 4px; }
/* #order-mode-section (bascule Maintenant/Plus tard) + #tf-order-now
(Maintenant) + #sched-section (Plus tard) : fond blanc/écritures
noires sur toute la zone (demande explicite : "crée une section
blanche uniquement pour le tunnel maintenant et plus tard") — sans
ça, la bascule restait sur le fond marine sombre par défaut de
.tf-layout (visible juste au-dessus des deux tunnels, déjà blancs
depuis le 27/08) et créait un bandeau sombre entre le carrousel promo
et les tunnels. Scopé pour ne pas toucher .tf-layout/.wzc-.../
.op-card ailleurs (Chap Chap notamment — jamais demandé là). */
#order-mode-section,
#tf-order-now,
#sched-section {
background: #fff;
border: none;
box-shadow: none;
}
/* "Choisissez votre réseau" : fond sombre remis tel quel (demande
explicite du 25/08 : "remets la couleur précédente" / "fais
pareil"). */
#tf-order-now .tf-slide-hd {
background: linear-gradient(150deg, #0d1a3d 0%, #0a1330 55%, #060a1c 100%);
border-color: rgba(255,255,255,.08); color: #fff;
}
/* MTN : léger dégradé jaune de marque (comme Orange/Moov ont chacun le
leur) au lieu du blanc translucide devenu invisible sur fond blanc
(demande explicite du 25/08 : "remets sa couleur précédente"). */
#tf-order-now .op-card--mtn { background: linear-gradient(165deg, rgba(255,204,0,.16), rgba(255,204,0,.03)); }
#tf-order-now .op-card:not(.active) .op-check { background: rgba(15,10,46,.08); }
#tf-order-now .tf-slide-hd,
#sched-section .tf-slide-hd { padding: 7px 11px; margin-bottom: 34px; font-size: .6rem; gap: 6px; }
/* Étape paiement uniquement : rapproche la grille des moyens de paiement
du bandeau titre juste au-dessus (le grand espacement générique
ci-dessus était pensé pour les autres étapes, pas celle-ci). */
#step-pay > .tf-slide-hd { margin-bottom: 10px; }
#tf-order-now .tf-slide-hd i,
#sched-section .tf-slide-hd i { font-size: .68rem; }
#tf-order-now .op-row,
#sched-section .op-row { gap: 8px; }
#tf-order-now .op-logo-sq,
#sched-section .op-logo-sq { width: 44px; height: 44px; }
#tf-order-now .op-name-pill,
#sched-section .op-name-pill { font-size: .68rem; padding: 5px 12px; }
#tf-order-now .op-check,
#sched-section .op-check { top: 16px; right: 16px; }
/* Réduction supplémentaire, sur les DEUX tunnels (#step-op ET
#sched-step-op) — la zone marine paraissait encore trop haute avec la
taille de carte "normale" (gros logos), ce qui laissait un grand vide
sous les cartes une fois la hauteur synchronisée sur ce contenu (voir
_tfSyncSlideHeight()/_schedSyncSlideHeight(), js/client.js).
VOLONTAIREMENT placé ici, après TOUTES les règles #tf-order-now/
#sched-section ci-dessus qui ciblent aussi .op-card/.op-logo-sq/
.op-name-pill avec la même spécificité (un ID + une classe) : à
spécificité égale, c'est la règle la PLUS BASSE dans le fichier qui
l'emporte — un bug réel corrigé ici (cette réduction était placée plus
haut avant, et se faisait donc silencieusement écraser par les règles
génériques #tf-order-now/#sched-section qui la suivaient). */
#step-op .op-card, #sched-step-op .op-card { padding: 10px 8px; gap: 6px; }
#step-op .op-logo-sq, #sched-step-op .op-logo-sq { width: 44px; height: 44px; margin-top: 10px; }
#step-op .op-name-pill, #sched-step-op .op-name-pill { padding: 5px 12px; font-size: .64rem; }
/* Cartes réseau pastel par opérateur (modèle de référence fourni par
l'utilisateur le 27/08) — remplace les teintes très translucides pensées
pour le fond marine (.op-card--orange/mtn/moov ci-dessus, quasi
invisibles sur blanc) par un pastel plein/lisible, bordure assortie plus
soutenue. VOLONTAIREMENT après TOUTES les règles .op-card--orange/mtn/
moov (même logique de spécificité égale/ordre de source que le
commentaire juste au-dessus). */
#tf-order-now .op-card--orange, #sched-section .op-card--orange { background: #FFF3EA; border-color: #FFD9BA; }
#tf-order-now .op-card--mtn, #sched-section .op-card--mtn { background: #FFFBE0; border-color: #FFEDA3; }
#tf-order-now .op-card--moov, #sched-section .op-card--moov { background: #EAF2FE; border-color: #BFDBFE; }
/* box-shadow:none annule le reflet coloré hérité de .op-card--*.active
(demande explicite : "annule le reflèt de la couleurs") — halo flou
autour de la carte, visible sur le fond clair de ce tunnel. */
#tf-order-now .op-card--orange.active, #sched-section .op-card--orange.active { border-color: #FF6200; box-shadow: none; }
#tf-order-now .op-card--mtn.active, #sched-section .op-card--mtn.active { border-color: #E6B800; box-shadow: none; }
#tf-order-now .op-card--moov.active, #sched-section .op-card--moov.active { border-color: #0066CC; box-shadow: none; }
/* Reflet "verre" invisible de toute façon sur pastel clair — retiré
proprement. */
#tf-order-now .op-card::before, #sched-section .op-card::before { display: none; }
/* Pastille de nom : blanche pleine, comme dans le modèle de référence —
ressort bien sur le fond pastel de la carte (contrairement à un fond
blanc uni de carte, où elle deviendrait redondante). Couleur (grise par
défaut, teinte de marque une fois .active) inchangée, héritée des règles
.op-name-pill/.op-card--*.active .op-name-pill existantes. */
/* Coche : invisible tant que la carte n'est pas sélectionnée (aucun rond
visible sur les cartes inactives dans le modèle de référence), apparaît
en fondu à la sélection — même transition que .op-check déjà en place. */
#tf-order-now .op-check, #sched-section .op-check { opacity: 0; }
#tf-order-now .op-card.active .op-check, #sched-section .op-card.active .op-check { opacity: 1; }
/* Section "Commande automatique" (client, index.html #sched-section) —
même identité visuelle ET même taille que "Passez votre commande" du
tunnel principal : chaque slide porte désormais AUSSI la classe .tf-slide
(en plus de .sched-slide, qui ne fixe que la géométrie 25%/padding,
identique) pour hériter de toutes les surcharges "fond sombre" déjà
écrites pour le tunnel principal (.recipient-wrap/.amount-custom-wrap/
.amount-tile/.svc-tab/.forfait-cats .fcat-btn — voir plus bas dans ce
fichier) plutôt que de les dupliquer ici. Seule exception : #sched-date/
#sched-time (voir plus bas) n'ont pas d'icône en overlay contrairement
aux champs du tunnel principal, donc pas le padding-left 38px que
`.tf-slide .form-control` suppose. */
/* 5 slides désormais (Réseau/Type/Date/Numéro/Paiement) — #sched-slider-track
doit donc faire 500% (5 × 100% de la largeur visible) et non les 400%
génériques de .tf-slider-track (qui reste, lui, à 4 slides pour le
tunnel principal) ; chaque .sched-slide occupe 1/5e de ce track, soit
20%, pas 25%. Sans cette correction, flex-shrink réduisait toutes les
slides pour les faire tenir dans un track resté à 400%, laissant la
slide suivante déborder visiblement dans le cadre. */
#sched-slider-track { width: 500%; }
.sched-slide { width: 20%; padding: 14px 14px 28px; box-sizing: border-box; flex-shrink: 0; }
.sched-field { margin-top: 14px; }
.sched-label {
display: flex; align-items: center; gap: 6px;
font-size: .68rem; font-weight: 700; color: var(--gray-500);
text-transform: uppercase; letter-spacing: .03em;
margin-bottom: 6px;
}
.sched-row2 { display: flex; gap: 10px; }
.sched-row2 .sched-field { flex: 1; margin-top: 14px; }
/* Fond blanc/écritures noires (demande explicite du 27/08), même raison
que .sched-date-tile ci-dessous. */
.sched-hint {
display: flex; align-items: flex-start; gap: 6px;
background: var(--gray-100); border: 1px solid var(--gray-200);
border-radius: 10px; padding: 9px 11px; margin-top: 14px;
font-size: .64rem; font-weight: 500; color: #0a1330;
line-height: 1.5;
}
.sched-hint i { color: var(--primary); font-size: .7rem; margin-top: 1px; flex-shrink: 0; }
#sched-section .tf-validate-btn { margin-top: 16px; }
#sched-date, #sched-time { padding: 9px 14px !important; }
/* Étape "Date & heure" — raccourcis rapides (même esprit que
.amount-tiles, mais pilules rectangulaires plutôt que ronds : le
libellé ("Ce soir 20h") est trop long pour un cercle) + un bouton
"Autre date" qui révèle les champs date/heure existants. Voir
schedPickQuickDate()/schedToggleCustomDate() (js/client.js). */
.sched-date-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Fond blanc/écritures noires (demande explicite du 27/08) — remplace le
blanc translucide pensé pour l'ancien fond marine du tunnel "Plus
tard", devenu invisible depuis son passage au blanc. */
.sched-date-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
border: 1.5px solid var(--gray-200); border-radius: 14px;
background: #fff; color: #0a1330;
padding: 10px 6px; cursor: pointer; font-family: inherit;
transition: all .2s ease;
}
.sched-date-tile:hover { border-color: color-mix(in srgb, var(--op-clr, var(--primary)) 55%, transparent); transform: translateY(-2px); }
.sched-date-tile .sdt-label { font-size: .64rem; font-weight: 800; }
.sched-date-tile .sdt-sub { font-size: .5rem; font-weight: 600; color: var(--gray-500); }
.sched-date-tile.selected {
background: linear-gradient(150deg, color-mix(in srgb, var(--op-clr, var(--primary)) 75%, white 25%), var(--op-clr, var(--primary)));
border-color: transparent; color: var(--op-clr-text, #fff);
box-shadow: 0 5px 16px color-mix(in srgb, var(--op-clr, var(--primary)) 40%, transparent);
}
.sched-date-tile.selected .sdt-sub { color: var(--op-clr-text, #fff); opacity: .8; }
.sched-date-custom-toggle {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; margin-top: 10px;
border: 1.5px dashed var(--gray-200); border-radius: 12px;
background: #fff; color: #0a1330;
padding: 10px 14px; cursor: pointer; font-family: inherit;
font-size: .64rem; font-weight: 700;
transition: all .2s ease;
}
.sched-date-custom-toggle:hover { border-color: var(--op-clr, var(--primary)); color: #fff; }
.sched-date-custom-toggle i { color: var(--op-clr, var(--primary)); font-size: .72rem; }
#sched-date-custom-fields { margin-top: 12px; }
/* ── Service Toggle ────────────────────────────────────────────── */
/* Deux cartes (Crédit/Transfert direct, Forfait/Internet-appels-SMS) —
même traitement que .fcat-btn : inactif en gris neutre,
actif coloré à la teinte de l'opérateur (--op-clr/--op-clr-text). */
.service-toggle {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin-bottom: 10px;
}
.svc-tab {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
border: none; border-radius: 14px;
padding: 12px 10px;
cursor: pointer;
background: var(--gray-100); color: var(--gray-800);
transition: var(--transition);
}
.svc-tab-title { font-size: .8rem; font-weight: 800; }
.svc-tab-sub { font-size: .62rem; font-weight: 600; color: var(--gray-500); text-align: center; line-height: 1.3; }
.svc-tab.active { background: var(--op-clr, var(--primary)); color: var(--op-clr-text, #fff); }
.svc-tab.active .svc-tab-sub { color: var(--op-clr-text, #fff); opacity: .7; }
/* ── Amount Tiles ──────────────────────────────────────────────── */
.amount-tiles {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
margin-bottom: 8px;
}
.amount-tile {
border: 1.5px solid var(--gray-200);
border-radius: 10px;
padding: 7px 5px;
cursor: pointer; text-align: center;
transition: var(--transition); background: var(--white);
}
.amount-tile:hover { border-color: var(--primary); transform: translateY(-1px); }
.amount-tile.selected { border-color: var(--primary); background: rgba(255,98,0,.06); }
.amount-tile .tile-val { font-size: .74rem; font-weight: 800; color: var(--gray-800); }
.amount-tile.selected .tile-val { color: var(--primary); }
/* Carte "montant libre" — modèle sobre : bordure fine arrondie, aucun
libellé séparé (le placeholder du champ fait office d'instruction),
suffixe FCFA à droite. */
.amount-custom-wrap--plain {
display: flex; align-items: center; gap: 8px;
width: 100%; border-radius: 9px;
background: transparent; border: 1.5px solid var(--gray-200);
padding: 7px 12px 7px 4px;
transition: var(--transition);
}
.amount-custom-wrap--plain:focus-within { border-color: var(--primary); }
.amount-custom-wrap--plain .form-control {
flex: 1; min-width: 0;
background: transparent !important; border: none !important; box-shadow: none !important;
font-size: .82rem; font-weight: 600; line-height: 1;
padding: 0; text-align: left;
-moz-appearance: textfield;
}
/* Flèches +/- natives du champ number — masquées : rien n'empêche de
taper un chiffre au clavier, seul le petit stepper visuel disparaît. */
.amount-custom-wrap--plain .form-control::-webkit-outer-spin-button,
.amount-custom-wrap--plain .form-control::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.amount-custom-wrap--plain .amount-custom-suffix {
font-size: .68rem; font-weight: 700; color: var(--gray-500);
letter-spacing: .04em;
}
/* Retour/Continuer sous le champ montant (demande explicite) — ligne
horizontale, bouton retour discret (contour) + continuer plein
(couleur opérateur, --op-clr posée par tfSelectOp()). */
.tf-wz-nav-row { display: flex; gap: 10px; margin-top: 16px; }
.tf-wz-back-btn2, .tf-wz-next-btn2 {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
border-radius: 12px; padding: 12px; font-size: .82rem; font-weight: 800;
font-family: var(--font); cursor: pointer; transition: var(--transition);
}
.tf-wz-back-btn2 {
background: #fff; border: 1.5px solid var(--gray-200); color: var(--gray-700, #374151);
}
.tf-wz-back-btn2:hover { border-color: var(--gray-300); }
/* Bouton "Continuer" en bleu marine plein, identique quel que soit le
réseau/moyen de paiement sélectionné (demande du 2026-09-03 : "en bleu
marine et sans reflet de couleur") — ne suit plus --op-clr, aucun
dégradé ni ombre colorée. */
.tf-wz-next-btn2 {
background: #0F0A2E; border: none; color: #fff;
box-shadow: none;
}
/* Grisé tant qu'aucun montant/forfait n'est choisi (demande explicite :
"tant que le client ne sélectionne pas un montant le bouton continuer
doit être grisé") — posé/retiré par _tfSetNextBtnEnabled()
(js/client.js), en même temps que l'attribut disabled natif. */
.tf-wz-next-btn2:disabled {
background: var(--gray-200, #E5E7EF); color: var(--gray-400, #9AA2B4);
box-shadow: none; cursor: not-allowed;
}
/* ── Forfait Tabs ──────────────────────────────────────────────── */
/* Catégories en interrupteur à glissière : piste sombre discrète au repos,
le segment sélectionné devient un bloc plein à la teinte opérateur
(--op-clr/--op-clr-text, posées sur .tf-layout par tfSelectOp()). */
.forfait-cats {
display: flex; gap: 3px; padding: 4px;
width: fit-content; max-width: 100%; margin: 0 auto 16px;
overflow-x: auto; scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
touch-action: pan-x;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
}
.forfait-cats::-webkit-scrollbar { display: none; }
.fcat-btn {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; gap: 7px;
border: none; border-radius: 16px;
padding: 11px 8px;
background: transparent;
color: rgba(255,255,255,.5);
font-family: inherit; font-weight: 700; font-size: .72rem;
cursor: pointer;
transition: var(--transition);
}
.fcat-btn i { font-size: .78rem; }
.fcat-btn.active {
background: linear-gradient(135deg,
color-mix(in srgb, var(--op-clr, var(--primary)) 100%, white 8%),
var(--op-clr, var(--primary)));
color: var(--op-clr-text, #fff);
box-shadow: 0 8px 18px color-mix(in srgb, var(--op-clr, var(--primary)) 40%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.fcat-btn { transition: none; }
}
/* ── Forfait Cards ─────────────────────────────────────────────── */
.forfait-grid {
display: flex; flex-direction: column; gap: 12px;
}
/* Annonce de destination (International) — une seule fois par pays,
au-dessus de ses paliers de prix, plutôt que de répéter "Pass X" sur
chaque carte (voir tfRenderForfaits). */
/* International (demande explicite : "le pays s'affiche et quand le
client clique que les offres sortent") — chaque destination est un
accordéon : badge pays cliquable, paliers de prix repliés dessous
jusqu'au tap (voir tfToggleIntlGroup(), tfRenderForfaits() et
l'équivalent schedRenderForfaits()). */
.intl-group { margin-bottom: 12px; }
.intl-group:last-child { margin-bottom: 0; }
.forfait-group-badge {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; border: 1.5px solid var(--gray-200, #E5E7EF); font-family: var(--font); cursor: pointer;
padding: 12px 16px; border-radius: 12px;
font-size: .78rem; font-weight: 800;
background: #fff; color: #16121F;
}
.intl-group-chev { font-size: .68rem; color: var(--gray-500); transition: transform .2s ease; }
.intl-group.open .intl-group-chev { transform: rotate(180deg); }
.intl-group-body {
display: none; flex-direction: column; gap: 12px;
margin-top: 10px;
}
.intl-group.open .intl-group-body { display: flex; }
/* Sous-groupes d'une catégorie (ex. Pass Mix 1-3j/5-7j/30j + International
au sein d'"Appels") — onglets soulignés : texte simple sur le fond de
l'appli, un trait plein à la teinte opérateur glisse sous l'onglet actif
plutôt qu'un bloc de couleur. */
.forfait-subcats {
display: flex; gap: 8px; padding: 0 2px 10px;
/* Centré quand tout tient (fit-content + margin auto, même technique que
.forfait-cats plus haut) plutôt que via justify-content:center/safe
center sur le conteneur défilant : cette dernière approche recule mal
sur certains WebView Android (voir plus bas), alors que fit-content +
margin:auto centre l'élément lui-même sans jamais gêner son propre
défilement une fois qu'il déborde (il passe alors simplement à
max-width:100%, aligné à gauche par défaut, sans configuration
spéciale). */
width: fit-content; max-width: 100%; margin: 0 auto 12px;
overflow-x: auto;
scrollbar-width: none;
/* Défilement à l'inertie natif (WebView Android/iOS) — sans ça, le
défilement horizontal est saccadé au doigt au lieu d'être fluide. */
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
/* touch-action: indique tout de suite au navigateur qu'un geste ici est
un défilement horizontal (pas un scroll vertical de page à laisser
remonter) — sans ça, certains WebView Android hésitent/retardent la
décision au premier mouvement du doigt, ce qui se ressent comme un
défilement qui "n'accroche pas" ou reste bloqué. */
touch-action: pan-x;
}
.forfait-subcats::-webkit-scrollbar { display: none; }
/* Les onglets entrent en fondu au tap d'une catégorie (au lieu d'un
simple affichage instantané) — classe rejouée par tfRenderSubCats() à
chaque tap, y compris d'une catégorie à une autre. */
.forfait-subcats.fsub-reveal .fsub-tab {
animation: fsub-tab-in .3s cubic-bezier(.22,1,.36,1) backwards;
}
.forfait-subcats.fsub-reveal .fsub-tab:nth-child(1) { animation-delay: 0s; }
.forfait-subcats.fsub-reveal .fsub-tab:nth-child(2) { animation-delay: .04s; }
.forfait-subcats.fsub-reveal .fsub-tab:nth-child(3) { animation-delay: .08s; }
.forfait-subcats.fsub-reveal .fsub-tab:nth-child(4) { animation-delay: .12s; }
.forfait-subcats.fsub-reveal .fsub-tab:nth-child(n+5) { animation-delay: .16s; }
@keyframes fsub-tab-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.forfait-subcats.fsub-reveal .fsub-tab { animation: none; }
}
/* Modèle "pilules" (demande explicite : "propose un autre modèle") —
chaque sous-groupe est une capsule contourée, remplie de la teinte
opérateur quand active, plutôt qu'un texte simple souligné. Reste une
rangée défilante horizontale (aucun changement de structure/JS). */
.fsub-tab {
flex: 0 0 auto;
display: flex; align-items: center; gap: 6px;
border: 1.5px solid rgba(255,255,255,.16); border-radius: 999px;
background: none;
padding: 7px 14px;
color: rgba(255,255,255,.55);
font-family: inherit; font-weight: 700; font-size: .74rem;
white-space: nowrap; cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
-webkit-user-select: none; user-select: none;
}
.fsub-tab-count { display: none; }
.fsub-tab.active {
border-color: transparent; color: var(--op-clr-text, #fff);
background: linear-gradient(135deg,
color-mix(in srgb, var(--op-clr, var(--primary)) 100%, white 8%),
var(--op-clr, var(--primary)));
}
.fsub-tab.active .fsub-tab-count { color: var(--op-clr-text, #fff); }
@media (prefers-reduced-motion: reduce) {
.fsub-tab::after { transition: none; }
}
/* Carte "premium" pleine largeur (une par ligne) — fond crème, badge logo
dégradé, prix affiché en grand comme statistique héro, et pastille
"Les avantages du pass" au-dessus des deux statistiques (detail/durée)
plutôt que du texte brut empilé. --fc-1/--fc-2/--fc-text portent la
teinte par opérateur, posées par les classes .op-orange/.op-moov/.op-mtn
déjà présentes sur la carte (voir tfRenderForfaits()). */
/* Modèle "blanc, sans tache" (demande explicite : "supprime les
bordures et rends la section bien blanc sans tache orange") — plus
de halo décoratif ni de liseré coloré, fond blanc pur, teinte
opérateur réservée au prix (léger) et à l'anneau de sélection
(état, pas décor). */
/* Modèle "pilule prix" (demande explicite : "utilise ce modèle", sur
capture de référence) — carte fine à bordure claire, titre + sous-
texte (détail/validité) empilés à gauche, prix en pilule pleine
couleur à droite sur une seule ligne, plutôt que le bloc prix
multi-lignes précédent. */
.forfait-card {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: #fff;
border: 1.5px solid #DCEAFB;
border-radius: 14px;
padding: 12px 14px;
cursor: pointer; text-align: left;
box-shadow: 0 3px 10px rgba(15,10,46,.05);
transition: var(--transition);
}
.forfait-card:hover { transform: translateY(-2px); }
.forfait-card.op-orange { --fc-1: #FF7A1A; --fc-2: #FF6200; --fc-text: #fff; }
.forfait-card.op-moov { --fc-1: #4FA3F0; --fc-2: #1D7AE0; --fc-text: #fff; }
.forfait-card.op-mtn { --fc-1: #FFDD55; --fc-2: #FFCC00; --fc-text: #3D2E00; }
.forfait-card.selected {
border-color: var(--fc-2, var(--primary));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc-2, var(--primary)) 25%, transparent);
}
.fc-top { display: flex; align-items: center; gap: 9px; min-width: 0; position: relative; }
.fc-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fc-icon {
width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: .85rem; overflow: hidden;
background: linear-gradient(135deg, var(--fc-1, var(--primary)), var(--fc-2, var(--primary)));
box-shadow: 0 6px 14px color-mix(in srgb, var(--fc-2, var(--primary)) 40%, transparent);
}
.fc-icon-img { width: 100%; height: 100%; object-fit: cover; }
/* Même correctif que .op-card--orange .op-logo-img : le PNG Orange a une
large marge blanche autour du logo. */
.fc-icon.op-orange .fc-icon-img { transform: scale(1.7); }
.fc-title { font-size: .88rem; font-weight: 800; color: var(--gray-800); line-height: 1.25; }
.fc-sub { font-size: .68rem; font-weight: 500; color: var(--gray-500); }
.fc-price {
flex-shrink: 0; white-space: nowrap;
background: linear-gradient(135deg, var(--fc-1, var(--primary)), var(--fc-2, var(--primary)));
color: var(--fc-text, #fff);
font-size: .68rem; font-weight: 800;
border-radius: 999px; padding: 7px 13px;
box-shadow: 0 6px 14px color-mix(in srgb, var(--fc-2, var(--primary)) 35%, transparent);
}
.fc-check {
position: absolute; top: -6px; left: -6px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--fc-2, var(--primary)); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: .5rem;
opacity: 0; transform: scale(.6);
transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
box-shadow: 0 6px 14px color-mix(in srgb, var(--fc-2, var(--primary)) 45%, transparent);
}
.forfait-card.selected .fc-check { opacity: 1; transform: scale(1); }
/* Bandeau "Les avantages du pass" — pastille dégradée à la teinte
opérateur (au lieu du tag plat précédent), sert de transition entre
l'identité du forfait (logo/nom/prix) et son détail (.fc-stats). */
.fc-adv-section {
display: inline-flex; align-items: center; gap: 6px;
border-radius: 999px; padding: 5px 12px 5px 6px;
margin-bottom: 10px;
background: linear-gradient(135deg, var(--fc-1, var(--primary)), var(--fc-2, var(--primary)));
box-shadow: 0 6px 14px color-mix(in srgb, var(--fc-2, var(--primary)) 30%, transparent);
}
.fc-adv-ico {
width: 14px; height: 14px; border-radius: 50%;
background: rgba(255,255,255,.28);
display: flex; align-items: center; justify-content: center;
font-size: .42rem; color: var(--fc-text, #fff);
}
.fc-adv-lbl {
font-size: .48rem; font-weight: 800; color: var(--fc-text, #fff);
text-transform: uppercase; letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) {
.forfait-card, .fc-check { transition: none; }
}
/* ── Recipient Input ───────────────────────────────────────────── */
/* Carte-pilule : drapeau et bouton contacts en pastilles rondes de part
et d'autre du champ, plutôt que des icônes en position absolue sur un
simple input bordé. */
.recipient-wrap {
display: flex; align-items: center; gap: 8px;
border-radius: 16px; padding: 5px;
background: var(--gray-100); border: 1.5px solid var(--gray-200);
transition: var(--transition);
}
.recipient-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,98,0,.12); }
.recipient-wrap:has(.rcp-valid) { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(0,154,68,.12); }
.recipient-wrap .form-control {
flex: 1; min-width: 0;
background: transparent !important; border: none !important; box-shadow: none !important;
padding: 8px 4px; font-size: 1.15rem; font-weight: 700;
}
/* Étape "Numéro" (#step-dest/#sched-step-dest) : centre le champ dans la
zone marine au lieu de le laisser collé en haut — la carte réseau de
l'étape précédente est bien plus haute, laissant sinon un grand vide
sous ce champ court une fois _tfSyncSlideHeight()/_schedSyncSlideHeight()
appliqué (js/client.js). min-height fixe une hauteur confortable à
centrer dedans (measurée via scrollHeight par ces mêmes fonctions). */
/* Carte blanche dédiée (demande explicite : "crée une section blanche
uniquement pour eux") — titre/consigne/champ de cette étape isolés
dans leur propre encart blanc arrondi, plutôt que posés à même le
fond du tunnel. */
#step-dest, #sched-step-dest {
display: flex; flex-direction: column; justify-content: center;
min-height: 70px;
background: #fff; border: 1px solid var(--gray-100, #F1F2F6);
border-radius: 16px; padding: 16px;
box-shadow: 0 4px 14px rgba(15,10,46,.05);
}
/* Drapeau réseau à côté du champ, pas dedans (demande explicite : "je ne
veux pas que le logo du reseau se trouve dans le champ" + capture de
référence) — ligne horizontale flag + champ pilule. Contour lavande
très doux plutôt qu'une ombre. */
.tf-dest-row {
display: flex; flex-direction: row; align-items: center; gap: 12px;
margin: 10px 0 6px;
}
.tf-dest-row .recipient-wrap {
flex: 1; min-width: 0; margin: 0;
padding: 4px 6px;
}
.tf-slide .tf-dest-row .recipient-wrap {
background: #fff !important;
border: 1.5px solid #E3E6F5 !important;
box-shadow: none !important;
}
.tf-slide .tf-dest-row .recipient-wrap:focus-within {
border-color: var(--op-clr, var(--primary)) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--op-clr, var(--primary)) 15%, transparent) !important;
}
/* Consigne au-dessus du champ (demande explicite : "base-toi sur
l'image 2") — texte d'aide court, sous le titre d'étape partagé
(#wzc-active-sub, déjà "Numéro du destinataire"). */
/* margin-left:2px compense l'écart de padding entre .tf-stepper-card
(18px, où vit le titre #wzc-active-sub) et la carte #step-dest/
#sched-step-dest (16px, voir ci-dessus, où vit ce sous-texte) — sans
ça les deux lignes ne démarrent pas au même bord gauche ("aligne bien
les deux bien à gauche"). */
.rcp-hint { font-size: .86rem; font-weight: 400; color: #0A0A0F; margin: 2px 0 12px 2px; }
/* "Choisir dans mes contacts" — ouvre le répertoire du téléphone
(openContactsPicker(), js/client.js) et écrit le numéro dans le champ. */
.rcp-contacts-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; margin: 10px 0 2px; padding: 11px 12px;
border: none; border-radius: 12px;
background: rgba(15,10,46,.05); color: #0F0A2E;
font-family: var(--font); font-size: .8rem; font-weight: 800; cursor: pointer;
transition: background .15s;
}
.rcp-contacts-btn:hover { background: rgba(15,10,46,.09); }
.rcp-contacts-btn:active { transform: scale(.99); }
.rcp-contacts-btn i { font-size: .9rem; }
/* Deux boutons sur la même ligne : "Choisir dans mes contacts" (extensible)
+ "Moi-même" (compact). */
.rcp-pick-row { display: flex; flex-wrap: nowrap; gap: 8px; margin: 10px 0 2px; }
.rcp-pick-row .rcp-contacts-btn {
flex: 1 1 0; min-width: 0;
width: auto; margin: 0; white-space: nowrap;
font-size: .74rem; padding: 11px 10px;
}
.rcp-pick-row .rcp-contacts-btn span {
overflow: hidden; text-overflow: ellipsis;
}
/* Badge logo réseau, à côté du champ (voir tfSelectOp()/schedSelectOp(),
js/client.js, qui y écrivent déjà le logo dès l'opérateur choisi à
l'étape 1) — cliquable pour revenir le changer (onclick="wzBack()"/
"schedWzBack()" dans le HTML). */
.rcp-flag {
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
background: var(--gray-100); border: 1px solid var(--gray-200);
display: flex; align-items: center; justify-content: center;
font-size: .85rem; overflow: hidden; cursor: pointer;
transition: opacity .15s;
}
.rcp-flag:hover { opacity: .75; }
.rcp-status {
display: flex; align-items: center; gap: 6px;
font-size: .78rem; margin-top: 3px; min-height: 14px;
}
/* Le message injecté par tfUpdateRecipient() est un à l'intérieur
de #rcp-status (qui porte déjà .rcp-status) — lui donner la même
classe dupliquait margin-top/min-height (span dans son propre parent
flex) et créait un grand vide avant l'avertissement en dessous. */
.rcp-msg { display: flex; align-items: center; gap: 6px; }
.rcp-msg.ok { color: var(--secondary); }
.rcp-msg.err { color: #EF4444; }
/* Chip d'avertissement discret (ambre translucide) plutôt qu'un pavé plein
à la couleur criarde de l'opérateur (Orange/MTN/Moov) — un fond
saturé pour un simple message de prudence paraissait trop agressif,
pas assez "carte d'alerte" standard. */
.tf-recipient-warning {
display: flex; align-items: flex-start; gap: 7px;
background: rgba(255,179,64,.12); border: 1px solid rgba(255,179,64,.3);
border-radius: 10px; padding: 8px 10px;
margin-top: 2px;
font-size: .64rem; font-weight: 600; color: #FFD08A;
line-height: 1.4;
}
.tf-recipient-warning i { color: #FFB340; font-size: .68rem; margin-top: 2px; flex-shrink: 0; }
/* ── Payment Methods ───────────────────────────────────────────── */
/* Paiement — icônes horizontaux */
.payment-grid {
display: flex; flex-direction: row;
justify-content: space-between; align-items: flex-start;
gap: 4px;
}
.pm-row {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 5px;
cursor: pointer; flex: 1;
padding: 6px 3px; border-radius: 13px;
border: 1.5px solid color-mix(in srgb, var(--pm-clr, #fff) 40%, transparent);
transition: background .18s, border-color .18s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.pm-row:hover { background: rgba(255,255,255,.05); transform: translateY(-2px); }
.pm-row.selected {
background: rgba(255,255,255,.06);
border-color: var(--pm-clr);
transform: translateY(-3px);
box-shadow: 0 4px 16px var(--pm-glow);
}
.pm-row::before { display: none; }
.pm-row-check {
position: absolute; top: 4px; right: 4px;
width: 14px; height: 14px; border-radius: 50%;
background: rgba(255,255,255,.15); color: transparent;
display: flex; align-items: center; justify-content: center;
font-size: .46rem; transition: var(--transition);
}
.pm-row.selected .pm-row-check { background: var(--pm-clr); color: #fff; }
.pm-row-logo {
width: 26px; height: 26px; border-radius: 8px;
overflow: hidden; flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
transition: box-shadow .2s;
}
.pm-row-logo svg { width: 26px; height: 26px; display: block; }
.pm-row-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-row.selected .pm-row-logo { box-shadow: 0 4px 14px var(--pm-glow); }
.pm-row-name {
background: #fff; color: #1a1a2e;
font-size: .5rem; font-weight: 900;
padding: 4px 7px; border-radius: 999px;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
transition: color .2s;
}
.pm-row.selected .pm-row-name { color: var(--pm-clr); }
.pm-row-sub, .pm-row-radio, .pm-row-info,
.pm-chip, .pm-bubble { display: none; }
/* ── Carte paiement fixe (panneaux) ─────────────────────────────────── */
.tf-pay-card {
background: rgba(255,255,255,.04);
border: 1.5px solid rgba(255,255,255,.09);
border-radius: 20px;
}
.tf-pay-panel {
display: flex; flex-direction: column; gap: 10px;
padding: 0;
}
.tf-pay-card-hd {
display: flex; align-items: center; gap: 8px;
font-size: .75rem; font-weight: 900; color: rgba(255,255,255,.5);
text-transform: uppercase; letter-spacing: .06em;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.tf-pay-card-hd i { color: var(--primary); font-size: .8rem; }
.tf-pay-divider {
height: 1px; background: rgba(255,255,255,.07); margin: 0 -4px;
}
/* Saisie numéro — style premium */
.tf-pay-num-wrap {
display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 18px 16px 16px;
background: rgba(255,255,255,.04);
border: 1.5px solid rgba(255,255,255,.08);
border-radius: 18px;
transition: border-color .25s, box-shadow .25s;
}
.tf-pay-num-wrap:focus-within {
border-color: var(--pm-clr, var(--primary));
box-shadow: 0 0 0 4px var(--pm-glow, rgba(138,99,255,.18));
}
.tf-pay-num-input {
width: 100%; background: none; border: none; outline: none;
text-align: center; font-family: var(--font);
font-size: 1.35rem; font-weight: 900; letter-spacing: .15em;
color: #fff; padding: 4px 0;
}
.tf-pay-num-input::placeholder {
color: rgba(255,255,255,.45); font-size: .85rem;
font-weight: 400; letter-spacing: .05em;
}
.tf-pay-num-input:disabled { cursor: not-allowed; color: rgba(255,255,255,.2); }
.tf-pay-num-label {
font-size: .6rem; font-weight: 800;
color: var(--pm-clr, rgba(255,255,255,.2));
text-transform: uppercase; letter-spacing: .1em;
transition: color .2s;
}
.tf-pay-num-bar {
width: 40%; height: 1.5px; border-radius: 99px;
background: linear-gradient(90deg, transparent, var(--pm-clr, rgba(255,255,255,.1)), transparent);
margin-top: 2px;
}
.tf-pay-num-bar {
width: 60%; height: 2px; border-radius: 99px;
background: linear-gradient(90deg, transparent, var(--pm-clr, rgba(255,255,255,.15)), transparent);
transition: background .3s;
}
/* Paiement par solde disponible — pas de numéro à saisir, voir
tfSelectPayment() dans js/client.js. */
.tf-pay-solde-wrap {
display: flex; align-items: center; justify-content: center;
padding: 16px; margin-top: 4px;
background: rgba(34,197,94,.08);
border: 1.5px solid rgba(34,197,94,.3);
border-radius: 18px;
overflow: hidden;
}
.tf-pay-solde-dest-marquee {
display: flex; align-items: center; gap: 8px;
color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: .04em;
animation: tf-solde-dest-in .4s cubic-bezier(.34,1.56,.64,1);
}
.tf-pay-solde-dest-marquee i { color: #22C55E; font-size: 1rem; }
@keyframes tf-solde-dest-in {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes tf-btn-appear {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Bouton "Continuer" en bleu marine plein, identique quel que soit le
réseau ou le moyen de paiement (demande du 2026-09-03 : "en bleu marine
et sans reflet de couleur") — ne suit plus --op-clr, et plus d'ombre
colorée sous le bouton. */
.tf-pay-next-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%;
padding: 13px 0; border-radius: 12px;
background: #0F0A2E;
border: none; color: #fff;
font-size: .85rem; font-weight: 900; letter-spacing: .05em;
font-family: var(--font); cursor: pointer;
box-shadow: none;
transition: transform .15s, opacity .15s;
animation: tf-btn-appear .28s cubic-bezier(.34,1.56,.64,1);
}
.tf-pay-next-btn:disabled {
background: var(--gray-200, #E5E7EF); color: var(--gray-400, #9AA2B4);
box-shadow: none; cursor: not-allowed;
}
.tf-pay-next-btn:not(:disabled):hover {
transform: translateY(-2px);
opacity: .92;
}
/* Partage la ligne avec le bouton Retour (demande explicite : "a ce niveau
ajoute le bouton retour") — même patron que les autres étapes
(.tf-wz-nav-row), le bouton Continuer garde ses couleurs propres au
moyen de paiement plutôt que de devenir un simple .tf-wz-next-btn2. */
.tf-wz-nav-row .tf-pay-next-btn { width: auto; flex: 1; margin-top: 0; }
/* ── Récapitulatif panneau ───────────────────────────────────────────── */
.tf-inline-recap { display: none; }
.tf-recap-title {
font-size: .72rem; font-weight: 900; color: rgba(255,255,255,.5);
text-transform: uppercase; letter-spacing: .05em;
margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.tf-recap-title i { color: var(--primary); }
.tf-recap-rows {
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
border-radius: 14px; overflow: hidden; margin-bottom: 14px;
}
.tf-recap-row {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,.05);
font-size: .68rem;
}
.tf-recap-row:last-child { border-bottom: none; }
.tf-recap-row span { color: rgba(255,255,255,.4); font-weight: 600; }
.tf-recap-row strong { color: #fff; font-weight: 800; }
.tf-recap-row--total { background: rgba(255,98,0,.1); }
.tf-recap-row--total strong { color: var(--primary); font-size: .76rem; }
.tf-recap-actions {
display: flex; gap: 8px;
}
.tf-recap-back-btn {
padding: 13px 16px; border-radius: 99px; white-space: nowrap;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.6); font-size: .78rem; font-weight: 800;
font-family: var(--font); cursor: pointer;
display: flex; align-items: center; gap: 7px;
transition: background .15s, color .15s;
}
.tf-recap-back-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
/* Bleu marine par défaut (demande explicite du 27/08 : "Payer maintenant"
+ "mets le bleu marine") plutôt que la couleur du moyen de paiement —
--pm-clr reste utilisable si posé plus haut dans le DOM, mais la valeur
de repli passe de l'orange (#ff6200) au bleu marine de marque. */
.tf-validate-btn {
width: 100%; padding: 14px; border-radius: 14px;
background: linear-gradient(135deg, var(--pm-clr, #1B234F), var(--pm-clr, #0F0A2E));
border: none; color: #fff; font-size: .88rem; font-weight: 900;
font-family: var(--font); cursor: pointer; letter-spacing: .04em;
display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 6px 22px var(--pm-glow, rgba(15,10,46,.35));
transition: transform .15s, box-shadow .15s;
margin-top: 4px;
}
.tf-validate-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--pm-glow, rgba(15,10,46,.45)); }
/* Partage la ligne avec le bouton Retour (demande explicite : "sur la
meme ligne que payer maintenant ajoute un bouton retour") — même
patron que .tf-wz-nav-row .tf-pay-next-btn plus haut. */
.tf-wz-nav-row .tf-validate-btn { width: auto; flex: 1; margin-top: 0; }
/* Délai de 30s pour valider le paiement — voir PaymentTimer/tfShowRecap()
dans js/client.js. Passé ce délai, le wizard est réinitialisé. */
.tf-recap-timer {
display: flex; align-items: center; justify-content: center; gap: 7px;
padding: 8px; margin-bottom: 10px; border-radius: 10px;
background: rgba(255,255,255,.04);
font-size: .68rem; color: rgba(255,255,255,.5); font-weight: 600;
}
.tf-recap-timer i { color: #F59E0B; font-size: .68rem; }
.tf-recap-timer strong { color: #F59E0B; font-weight: 900; font-variant-numeric: tabular-nums; }
/* Récapitulatif de paiement sur fond blanc (demande explicite du 27/08 :
"rends les écritures en noir") — .tf-recap-row/.tf-recap-timer/
.tf-recap-back-btn sont PARTAGÉS avec l'espace cabine (voir cabine.html),
resté sombre : les couleurs translucides blanches d'origine y restent
correctes, d'où cette surcharge scopée à .tf-slide plutôt qu'un
changement des règles de base. */
.tf-slide .tf-recap-row { border-bottom-color: var(--gray-200) !important; }
.tf-slide .tf-recap-row span { color: var(--gray-500) !important; }
.tf-slide .tf-recap-row strong { color: #0a1330 !important; }
.tf-slide .tf-recap-row--total { background: rgba(15,10,46,.06) !important; }
.tf-slide .tf-recap-timer {
background: var(--gray-100) !important;
color: var(--gray-600) !important;
}
.tf-slide .tf-recap-back-btn {
background: var(--gray-100) !important;
border: 1px solid var(--gray-200) !important;
color: var(--gray-600) !important;
}
.tf-slide .tf-recap-back-btn:hover { background: var(--gray-200) !important; color: #0a1330 !important; }
.tf-recap-confirm-btn {
flex: 1; padding: 13px; border-radius: 99px;
background: linear-gradient(135deg, #ff6200, #ff8c00);
border: none; color: #fff; font-size: .82rem; font-weight: 900;
cursor: pointer; font-family: var(--font);
display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 6px 20px rgba(255,98,0,.35); transition: transform .15s, box-shadow .15s;
}
.tf-recap-confirm-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(255,98,0,.45); }
/* ── Summary Card ──────────────────────────────────────────────── */
.tf-sidebar { position: sticky; top: calc(var(--header-h) + 12px); }
.summary-card {
background: var(--white);
border-radius: var(--radius-xl);
border: 1.5px solid var(--gray-200);
overflow: hidden; box-shadow: var(--shadow);
}
.summary-head {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: #fff; padding: 18px 20px;
display: flex; align-items: center; gap: 10px;
}
.summary-head .sh-title { font-size: .95rem; font-weight: 800; }
.summary-head .sh-sub { font-size: .72rem; opacity: .75; margin-top: 2px; }
.summary-body { padding: 16px 20px 8px; }
.sum-row {
padding: 9px 0; border-bottom: 1px solid var(--gray-200);
display: flex; flex-direction: column; gap: 2px;
}
.sum-row:last-child { border-bottom: none; }
.sum-label { font-size: .68rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: .5px; }
.sum-val { font-size: .88rem; font-weight: 700; }
.sum-total {
margin: 12px 20px;
background: var(--gray-100);
border-radius: var(--radius);
padding: 13px 16px;
display: flex; align-items: center; justify-content: space-between;
}
.sum-total .st-lbl { font-size: .82rem; font-weight: 700; }
.sum-total .st-amt { font-size: 1.25rem; font-weight: 800; color: var(--primary); }
/* Validation checklist */
.vcheck-list { padding: 8px 20px 12px; display: flex; flex-direction: column; gap: 5px; }
.vcheck-row { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--gray-400); }
.vcheck-row.done { color: var(--secondary); }
.vcheck-row i { width: 14px; }
/* Validate CTA */
.btn-validate-main {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: calc(100% - 40px); margin: 0 20px 20px;
padding: 15px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: #fff; border: none; border-radius: var(--radius-lg);
font-size: .97rem; font-weight: 800; cursor: pointer;
transition: var(--transition); box-shadow: var(--shadow-orange);
}
.btn-validate-main:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(255,98,0,.45);
}
.btn-validate-main:disabled {
background: var(--gray-300); color: var(--gray-400);
box-shadow: none; cursor: not-allowed;
}
/* ── Contacts Quick-Pick ───────────────────────────────────────── */
.contacts-list { display: flex; flex-direction: column; gap: 2px; }
.contacts-group-label {
font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
color: var(--gray-400); padding: 10px 12px 4px;
}
.contact-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: var(--radius);
cursor: pointer; transition: background .15s;
}
.contact-item:hover { background: var(--gray-100); }
.contact-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg,var(--primary),var(--secondary));
display: flex; align-items: center; justify-content: center;
font-size: .75rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.contact-name { font-size: .85rem; font-weight: 600; }
.contact-num { font-size: .75rem; color: var(--gray-400); }
.contact-op { margin-left: auto; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; }
/* ── Responsive transfert ──────────────────────────────────────── */
@media (max-width: 900px) {
.tf-layout { grid-template-columns: 1fr; }
.tf-sidebar { position: static; }
.btn-validate-main { margin-bottom: 24px; }
}
@media (max-width: 520px) {
.amount-tiles { grid-template-columns: repeat(4,1fr); }
.op-row { justify-content: space-around; }
.forfait-grid { grid-template-columns: 1fr 1fr; }
.payment-grid { flex-wrap: wrap; gap: 8px; }
.balance-strip { flex-wrap: wrap; }
.bs-recharge { width: 100%; text-align: center; }
}
/* ================================================================
CLIENT PAGE — Layout autonome sans sidebar
================================================================ */
/* ── Sections hors Accueil : contenu fixe top ── */
html { background: #ffffff; }
body:not(.on-home) { background: #ffffff !important; }
body:not(.on-home) .client-page { padding-top: 0 !important; }
body:not(.on-home) .cs-section.active {
display: block;
position: fixed;
inset: 0;
height: 100vh; width: 100%;
overflow-y: auto; overflow-x: hidden;
z-index: 100;
padding: 20px 20px 110px;
background: #ffffff;
/* Interface plein écran strictement blanche : aucun liseré / ombre /
arrondi / animation sur les bords (demande explicite). */
box-shadow: none;
border: none;
border-radius: 0;
outline: none;
animation: none;
transform: none;
filter: none;
-webkit-mask-image: none;
mask-image: none;
}
@media (max-width: 600px) {
body:not(.on-home) .cs-section.active { padding: 16px 12px 110px; }
}
body:not(.on-home) .cs-section.active > * { margin-bottom: 16px; }
body:not(.on-home) .cs-section.active > .pgc-panel { margin-bottom: 6px; }
/* ── Dark mode : carte & panneau ─────────────────────────── */
/* anciens sélecteurs conservés pour compatibilité */
.cn-brand { display: flex; align-items: center; gap: 10px; }
.cn-logo-icon { display: none; }
.cn-logo-text { font-size: 1.2rem; font-weight: 800; color: var(--gray-800); }
.cn-logo-text span { color: var(--secondary); }
.cn-spacer { flex: 1; }
.cn-tagline { display: none; }
/* Icon button */
.cn-icon-btn {
width: 38px; height: 38px; background: none; border: none;
cursor: pointer; border-radius: var(--radius); color: var(--gray-500);
font-size: .95rem; display: flex; align-items: center; justify-content: center;
transition: var(--transition); position: relative;
}
.cn-icon-btn:hover { background: var(--gray-100); color: var(--gray-800); }
.cn-notif-dot {
position: absolute; top: 6px; right: 6px;
width: 8px; height: 8px; background: var(--primary);
border-radius: 50%; border: 2px solid var(--white); display: none;
}
/* Text buttons (login/register) */
.cn-text-btn {
height: 36px; padding: 0 14px; border: none; cursor: pointer;
border-radius: var(--radius); font-size: .82rem; font-weight: 700;
font-family: var(--font); display: flex; align-items: center; gap: 6px;
transition: var(--transition);
}
.cn-btn-login { background: none; color: var(--primary); border: 1.5px solid rgba(255,98,0,.35); }
.cn-btn-login:hover { background: rgba(255,98,0,.06); border-color: var(--primary); }
.cn-btn-register { background: var(--primary); color: #fff; }
.cn-btn-register:hover { background: var(--primary-dark); }
@media(max-width:480px){
.cn-btn-login .btn-label, .cn-btn-register .btn-label { display: none; }
}
/* User chip */
.cn-user-chip {
display: flex; align-items: center; gap: 8px;
padding: 3px 6px 3px 3px; background: var(--gray-100);
border-radius: var(--radius-lg);
}
.cn-chip-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff; font-size: .72rem; font-weight: 800;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cn-chip-info { line-height: 1.25; padding: 0 2px; }
.cn-chip-name { font-size: .8rem; font-weight: 700; color: var(--gray-800); }
.cn-chip-role { font-size: .67rem; color: var(--gray-500); }
/* ── Main container ─────────────────────────────────────────────── */
.cn-main {
max-width: 1140px; margin: 0 auto;
padding: 28px 20px 80px;
}
@media(max-width:600px){ .cn-main { padding: 18px 14px 60px; } }
/* ── Sections ───────────────────────────────────────────────────── */
.cn-section { margin-bottom: 36px; }
.cn-section-divider { height: 1px; background: var(--gray-200); margin-bottom: 36px; }
.cn-sec-head {
display: flex; align-items: center; gap: 14px;
padding-bottom: 14px; margin-bottom: 18px;
border-bottom: 2px solid var(--gray-200);
}
.cn-sec-icon {
width: 44px; height: 44px; border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
font-size: 1.05rem; flex-shrink: 0;
}
.cn-sec-title { font-size: 1.05rem; font-weight: 800; color: var(--gray-800); line-height: 1.2; }
.cn-sec-sub { font-size: .78rem; color: var(--gray-500); margin-top: 3px; }
.cn-sec-extra { margin-left: auto; flex-shrink: 0; }
/* ── Balance strip with inline stats ───────────────────────────── */
.bs-stats-row {
display: flex; gap: 0;
background: rgba(255,255,255,.13);
border-radius: var(--radius); overflow: hidden;
margin-left: auto; flex-shrink: 0;
}
.bs-stat-item { padding: 10px 18px; text-align: center; }
.bs-stat-num { font-size: .92rem; font-weight: 800; color: #fff; }
.bs-stat-lbl { font-size: .63rem; color: rgba(255,255,255,.68); margin-top: 2px; white-space: nowrap; }
.bs-stat-div { width: 1px; background: rgba(255,255,255,.18); align-self: stretch; margin: 8px 0; }
@media(max-width:680px){ .bs-stats-row { display: none; } }
/* ================================================================
CLIENT SIDEBAR — layout barre latérale gauche
================================================================ */
/* ── Wrapper global sous la topnav ─────────────────────────────── */
.client-layout {
display: grid;
grid-template-columns: 258px 1fr;
min-height: calc(100vh - 62px);
align-items: start;
}
/* ── Sidebar ────────────────────────────────────────────────────── */
.client-sidebar {
position: sticky; top: 62px;
height: calc(100vh - 62px);
background: var(--white);
border-right: 1px solid var(--gray-200);
display: flex; flex-direction: column;
overflow-y: auto; overflow-x: hidden;
scrollbar-width: thin; scrollbar-color: var(--gray-200) transparent;
z-index: 50; flex-shrink: 0;
}
/* Logo dans sidebar */
.csb-logo {
display: flex; align-items: center; gap: 10px;
padding: 18px 16px 14px;
border-bottom: 1px solid var(--gray-200);
}
.csb-logo-icon {
width: 34px; height: 34px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 9px; color: #fff; font-size: .85rem;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.csb-logo-text { font-size: 1.15rem; font-weight: 800; color: var(--gray-800); line-height: 1; }
.csb-logo-text span { color: var(--secondary); }
.csb-mobile-close {
margin-left: auto; display: none;
width: 32px; height: 32px; background: none; border: none;
color: var(--gray-500); font-size: 1rem; cursor: pointer;
border-radius: var(--radius); align-items: center; justify-content: center;
}
.csb-mobile-close:hover { background: var(--gray-100); }
/* Carte utilisateur */
.csb-user-block {
padding: 14px 16px;
border-bottom: 1px solid var(--gray-200);
}
.csb-user-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.csb-user-avatar {
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff; font-size: .76rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
.csb-user-name { font-size: .86rem; font-weight: 700; color: var(--gray-800); line-height: 1.2; }
.csb-user-role { font-size: .7rem; color: var(--gray-500); margin-top: 1px; }
/* Mini balance dans sidebar */
.csb-balance-mini {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: var(--radius); padding: 12px 14px;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.csb-bal-info {}
.csb-bal-label { font-size: .63rem; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .4px; }
.csb-bal-amount { font-size: 1.1rem; font-weight: 800; color: #fff; margin-top: 1px; }
.csb-recharge-btn {
background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.35);
color: #fff; padding: 5px 10px; border-radius: var(--radius-sm);
font-size: .72rem; font-weight: 700; cursor: pointer; white-space: nowrap;
font-family: var(--font); transition: var(--transition);
}
.csb-recharge-btn:hover { background: rgba(255,255,255,.28); }
/* Bloc invité dans sidebar */
.csb-guest-block {
padding: 14px 16px;
border-bottom: 1px solid var(--gray-200);
}
.csb-guest-title { font-size: .82rem; font-weight: 700; color: var(--gray-700); margin-bottom: 4px; }
.csb-guest-sub { font-size: .73rem; color: var(--gray-500); margin-bottom: 10px; }
.csb-guest-btns { display: flex; flex-direction: column; gap: 6px; }
.csb-guest-btns .btn { justify-content: center; }
/* Navigation sidebar */
.csb-nav { flex: 1; padding: 10px 0; }
.csb-nav-label {
font-size: .63rem; font-weight: 700; color: var(--gray-400);
text-transform: uppercase; letter-spacing: .7px;
padding: 10px 16px 4px;
}
.csb-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px; cursor: pointer;
font-size: .86rem; font-weight: 600; color: var(--gray-600);
border-left: 3px solid transparent;
transition: background .15s, color .15s, border-color .15s;
user-select: none; position: relative;
}
.csb-item:hover { background: var(--gray-100); color: var(--gray-800); }
.csb-item.active {
background: rgba(255,98,0,.08); color: var(--primary);
border-left-color: var(--primary); font-weight: 700;
}
.csb-item i { width: 18px; text-align: center; font-size: .95rem; flex-shrink: 0; }
.csb-item-badge {
margin-left: auto; background: var(--primary); color: #fff;
font-size: .6rem; font-weight: 800; line-height: 1;
padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center;
}
/* Footer sidebar */
.csb-footer {
padding: 12px 16px; border-top: 1px solid var(--gray-200); margin-top: auto;
}
.csb-logout-btn {
width: 100%; padding: 10px 14px;
background: none; border: 1.5px solid var(--gray-200);
border-radius: var(--radius); color: var(--gray-500);
font-size: .83rem; font-weight: 600; cursor: pointer;
font-family: var(--font); display: flex; align-items: center;
justify-content: center; gap: 8px; transition: var(--transition);
}
.csb-logout-btn:hover { background: rgba(255,98,0,.06); color: var(--primary); border-color: var(--primary); }
/* ── Zone principale ─────────────────────────────────────────────── */
.client-main-area {
min-height: calc(100vh - 62px);
background: var(--light-bg);
padding: 24px;
}
/* Sections (remplacent les onglets) */
.cs-section { display: none; }
.cs-section.active {
display: flex; flex-direction: column; gap: 20px;
animation: fadeIn .25s ease;
background: transparent;
padding: 0;
}
/* ── Fond spécifique section Historique — fond principal blanc, comme
les cartes de commande qu'il porte (voir .hoc-card) ── */
#cs-historique.active {
background: var(--light-bg);
padding: 0 16px 16px;
min-height: 100%;
}
/* Cartes d'historique élargies (demande explicite) — la liste déborde du
padding latéral de la section pour gagner ~50 px de largeur. */
#history-list { margin: 0 1px; }
/* En-tête "Historique" : même modèle que le bandeau identité de
"À propos"/"Contact" (icône/titre/sous-titre centrés en colonne, bouton
"trois traits" en badge absolu) — demande explicite, même patron que
#cs-profit .cs-sec-bar.
#cs-historique.active n'a plus de padding-top (voir plus haut) : cette
carte n'a donc plus besoin d'annuler une marge verticale via un margin
négatif — seule une marge négative HORIZONTALE reste nécessaire pour
toucher les bords. Le margin-top négatif a été retiré volontairement :
#cs-historique.active défile (overflow-y:auto, voir body:not(.on-home)
.cs-section.active) et un margin négatif vertical n'annule pas de façon
fiable le padding-top d'un conteneur qui scrolle (le padding restait
visible comme un espace blanc résiduel en haut, même une fois annulé
"sur le papier") — d'où le padding-top:0 directement sur le parent
plutôt qu'un margin négatif ici. */
#cs-historique .cs-sec-bar {
position: relative; overflow: hidden;
flex-direction: column; align-items: center; text-align: center;
gap: 5px;
padding: 15px 20px 13px; margin: 0 -16px 10px;
border-radius: 0 0 20px 20px;
background: linear-gradient(150deg, #0d1a3d 0%, #0a1330 55%, #060a1c 100%);
box-shadow: 0 10px 24px rgba(6,10,28,.32), 0 1px 0 rgba(255,255,255,.04) inset;
/* Couche de composition dédiée (même correctif que .pgc-hero-card) —
bandeau sur fond dégradé, sujet au même glitch de rendu. */
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cs-historique .cs-sec-bar::after {
content: ''; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
width: 120px; height: 120px; border-radius: 50%;
background: rgba(255,255,255,.05);
pointer-events: none;
}
#cs-historique .cs-sec-bar-info,
#cs-historique .cs-sec-bar-ico { position: relative; z-index: 1; }
#cs-historique .cs-sec-bar-ico--hist {
width: 38px; height: 38px; border-radius: 12px; font-size: .95rem;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
color: #fff;
margin-bottom: 1px;
}
#cs-historique .cs-sec-bar-info { align-items: center; }
#cs-historique .cs-sec-bar-title { font-size: .95rem; }
#cs-historique .cs-sec-bar-sub {
color: #8FA0C6; font-size: .62rem;
text-transform: uppercase; letter-spacing: .04em;
}
/* En-tête de section dans la zone principale */
.cs-page-head {
margin-bottom: 22px;
padding-bottom: 16px;
border-bottom: 1px solid var(--gray-200);
}
.cs-page-title {
font-size: 1.2rem; font-weight: 800; color: var(--gray-800);
display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.cs-page-title i { color: var(--primary); font-size: 1rem; }
.cs-page-sub { font-size: .8rem; color: var(--gray-500); }
/* État sidebar masquée (desktop toggle) */
.client-layout.sidebar-off .client-sidebar {
display: none;
}
.client-layout.sidebar-off {
grid-template-columns: 1fr;
}
/* Centrage absolu du nom dans la topnav (position:sticky du bandeau
sert déjà de contexte de positionnement pour cet enfant absolu) */
.cn-brand-center {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
/* Bouton Profits */
.cn-profit-btn {
display: flex; align-items: center; gap: 7px;
height: 36px; padding: 0 16px;
background: linear-gradient(135deg, var(--secondary), #007a35);
color: #fff; border: none; border-radius: 20px;
font-size: .82rem; font-weight: 700; cursor: pointer;
box-shadow: 0 2px 10px rgba(0,154,68,.35);
transition: opacity .18s, transform .18s;
flex-shrink: 0;
}
.cn-profit-btn:hover { opacity: .88; transform: translateY(-1px); }
/* ── Onglets principal (cs-tabs) ─────────────────────────────── */
.cs-tabs {
display: flex; gap: 4px;
background: var(--white);
border-radius: var(--radius-lg);
padding: 6px;
margin-bottom: 22px;
box-shadow: 0 2px 12px rgba(0,0,0,.07);
border: 1px solid var(--gray-100);
overflow-x: auto;
}
.cs-tab {
display: flex; align-items: center; gap: 7px;
padding: 10px 18px; border: none; background: none;
border-radius: var(--radius); cursor: pointer;
font-size: .84rem; font-weight: 600; color: var(--gray-500);
white-space: nowrap; transition: all .18s ease; flex-shrink: 0;
}
.cs-tab:hover { background: var(--gray-100); color: var(--gray-700); }
.cs-tab.active {
background: var(--primary); color: #fff;
box-shadow: 0 3px 10px rgba(255,98,0,.35);
}
.cs-tab i { font-size: .88rem; }
/* ── Section Profit ─────────────────────────────────────────── */
.profit-kpi-row {
display: grid; grid-template-columns: repeat(4,1fr); gap: 14px;
margin-bottom: 4px;
}
@media(max-width:760px){ .profit-kpi-row { grid-template-columns: repeat(2,1fr); } }
.profit-kpi {
background: var(--white); border-radius: var(--radius-lg);
padding: 20px 16px; text-align: center;
box-shadow: 0 2px 12px rgba(0,0,0,.07);
border: 1px solid var(--gray-100);
}
.pk-icon {
width: 44px; height: 44px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem; margin-bottom: 10px;
}
.pk-val { font-size: 1.25rem; font-weight: 800; color: var(--gray-800); line-height: 1; }
.pk-lbl { font-size: .72rem; color: var(--gray-500); margin-top: 5px; font-weight: 600; }
.pf-breakdown { display: flex; flex-direction: column; gap: 12px; }
.pf-op-row {
display: flex; align-items: center; gap: 12px;
}
.pf-op-name { width: 60px; font-size: .82rem; font-weight: 700; color: var(--gray-700); }
.pf-bar-wrap { flex: 1; background: var(--gray-100); border-radius: 99px; height: 10px; overflow: hidden; }
.pf-bar { height: 100%; border-radius: 99px; transition: width .5s ease; }
.pf-op-amount { font-size: .8rem; font-weight: 700; color: var(--gray-600); min-width: 80px; text-align: right; }
/* ── Badge NEW sur item sidebar ─────────────────────────────── */
.csb-item-badge--new {
margin-left: auto; padding: 2px 7px;
background: linear-gradient(135deg, var(--primary), #e05500);
color: #fff; font-size: .6rem; font-weight: 800;
border-radius: 99px; letter-spacing: .5px;
}
/* ── Section Espace Partenaires ─────────────────────────────── */
.ph5-hero { display:none; }
/* Hero v2 (désactivé) */
.ph5-hero2 { display: none; }
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: .25; }
}
/* Hero v3 */
.ph5-hero3 {
position: relative; overflow: hidden;
background: linear-gradient(150deg, #0d1a3d 0%, #0a1330 55%, #060a1c 100%);
border: 1.5px solid rgba(255,98,0,.2);
border-radius: 18px; margin-bottom: 10px;
padding: 24px 22px 20px;
box-shadow: 0 8px 28px rgba(0,0,0,.4);
/* Même correctif que .pgc-hero-card/.pgc-qr-card : couche de composition
dédiée contre le glitch de rendu (fond dégradé qui semble "bouger")
observé sur certains WebView Android. */
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ph5-hero3-corner {
position: absolute; top: -30px; right: -30px;
width: 120px; height: 120px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,98,0,.22) 0%, transparent 70%);
pointer-events: none;
}
/* Hero v2 */
.ph5-hero2 {
position: relative; overflow: hidden;
background: radial-gradient(ellipse at 50% 0%, #1f0d00 0%, #0a0a10 65%);
border: 1px solid rgba(255,98,0,.25);
border-top: 2px solid #FF6200;
border-radius: 18px; margin-bottom: 10px;
padding: 22px 18px 20px;
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ph5-hero2-glow {
position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,98,0,.18) 0%, transparent 70%);
pointer-events: none;
}
.ph5-hero2-badge {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(255,98,0,.12); border: 1px solid rgba(255,98,0,.3);
color: #FF6200; font-size: .52rem; font-weight: 700;
padding: 4px 12px; border-radius: 99px; letter-spacing: .08em;
text-transform: uppercase; margin-bottom: 18px;
}
/* Visuel orbital */
.ph5-hero2-visual {
position: relative; width: 130px; height: 130px; margin-bottom: 18px;
}
.ph5-hero2-ring {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
border-radius: 50%; border: 1px solid rgba(255,98,0,.2);
}
.ph5-hero2-ring--outer { width: 130px; height: 130px; border-style: dashed; }
.ph5-hero2-ring--inner { width: 90px; height: 90px; border-color: rgba(255,98,0,.15); }
.ph5-hero2-core {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 56px; height: 56px; border-radius: 16px;
background: linear-gradient(135deg, #FF6200, #c94800);
box-shadow: 0 0 28px rgba(255,98,0,.5), inset 0 1px 0 rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
}
.ph5-hero2-logo {
font-size: 1rem; font-weight: 900; color: #fff; letter-spacing: -.02em;
}
.ph5-hero2-logo span { color: rgba(255,255,255,.7); }
.ph5-hero2-orb {
position: absolute; width: 28px; height: 28px; border-radius: 50%;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,98,0,.3);
display: flex; align-items: center; justify-content: center;
font-size: .6rem; color: #FF6200;
box-shadow: 0 0 8px rgba(255,98,0,.2);
}
.ph5-hero2-orb--1 { top: 0; left: 50%; transform: translateX(-50%); }
.ph5-hero2-orb--2 { bottom: 0; left: 50%; transform: translateX(-50%); }
.ph5-hero2-orb--3 { left: 0; top: 50%; transform: translateY(-50%); }
.ph5-hero2-orb--4 { right: 0; top: 50%; transform: translateY(-50%); }
.ph5-hero2-title {
font-size: .92rem; font-weight: 900; color: #fff;
line-height: 1.2; margin-bottom: 8px; letter-spacing: -.01em;
}
.ph5-hero2-sub {
font-size: .6rem; color: rgba(255,255,255,.38); line-height: 1.7;
margin-bottom: 18px; max-width: 280px;
}
.ph5-hero2-stats {
display: flex; align-items: center; gap: 0;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
border-radius: 12px; overflow: hidden; width: 100%;
}
.ph5-hero2-stat {
flex: 1; display: flex; flex-direction: column; align-items: center;
padding: 10px 8px;
}
.ph5-hero2-stat-val { font-size: .85rem; font-weight: 900; color: #FF6200; line-height: 1; }
.ph5-hero2-stat-lbl { font-size: .46rem; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .07em; margin-top: 3px; }
.ph5-hero2-stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,.07); flex-shrink: 0; }
.ph5-glow { display: none; }
.ph5-ring { display: none; }
.ph5-ring-inner { display: none; }
.ph5-hero-body { display: none; }
.ph5-hero-sep { display: none; }
.ph5-title { display: none; }
/* Chip */
.ph5-badge {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(255,98,0,.1);
border: 1px solid rgba(255,98,0,.28);
color: var(--primary);
font-size: .46rem; font-weight: 600; letter-spacing: .12em;
padding: 3px 9px; border-radius: 99px; text-transform: uppercase;
margin-bottom: 14px;
}
.ph5-badge i { font-size: .4rem; }
/* Trio de cercles */
.ph5-trio {
display: flex; align-items: center; justify-content: center;
gap: 0; margin-bottom: 14px; width: 100%;
}
.ph5-trio-item {
display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.ph5-trio-line {
flex: 1; height: 1px; background: rgba(255,98,0,.25);
max-width: 32px;
}
.ph5-trio-circle {
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .75rem;
}
.ph5-trio-circle--fill {
background: var(--primary);
color: #fff;
box-shadow: 0 0 0 3px rgba(255,98,0,.15);
}
.ph5-trio-circle--mid {
background: rgba(255,98,0,.12);
border: 1.5px solid rgba(255,98,0,.4);
color: var(--primary);
font-size: .65rem; font-weight: 800; letter-spacing: .02em;
}
.ph5-trio-circle--outline {
background: transparent;
border: 1.5px solid rgba(255,255,255,.15);
color: rgba(255,255,255,.5);
font-size: .65rem;
}
.ph5-trio-lbl {
font-size: .5rem; font-weight: 500; color: rgba(255,255,255,.3);
text-transform: uppercase; letter-spacing: .07em;
}
/* Textes */
.ph5-brand {
font-size: .88rem; font-weight: 700; color: var(--primary);
letter-spacing: .01em; margin-bottom: 6px; line-height: 1.25;
}
.ph5-sub {
font-size: .6rem; font-weight: 300; color: rgba(255,255,255,.35);
line-height: 1.65; margin-bottom: 12px;
}
/* Bouton principal */
.ph5-tag {
display: inline-flex; align-items: center; gap: 5px;
background: var(--primary);
border: none; color: #fff;
font-size: .58rem; font-weight: 600;
padding: 7px 16px; border-radius: 99px;
cursor: pointer; font-family: var(--font);
transition: background .2s;
}
.ph5-tag:hover { background: var(--primary-dark); }
/* Ancienne classe conservée pour compatibilité */
.ph5-why-btn {
display: inline-flex; align-items: center; gap: 5px;
background: transparent; border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.55); font-size: .58rem; font-weight: 400; font-family: var(--font);
padding: 7px 14px; border-radius: 99px; cursor: pointer; transition: border-color .2s, color .2s;
}
.ph5-why-btn:hover { border-color: rgba(255,98,0,.4); color: rgba(255,255,255,.8); }
.ph5-why-icon { font-size: .5rem; transition: transform .3s; }
.ph5-why-icon.open { transform: rotate(180deg); }
/* Accordéon autonome — style "éditorial minimal" (direction C choisie
par l'utilisateur le 24/08 : pas d'icône, numérotation discrète en
bleu marine, chevron fin). Une carte blanche distincte par accordéon
(demande explicite du 24/08 : "crée une section pour chaque"), plutôt
qu'un seul cadre continu avec un filet entre les deux lignes. */
.ph5-accordion {
margin-bottom: 0;
background: #fff; border: 1px solid #E8E9EE; border-radius: 16px;
padding: 2px 18px;
}
.ph5-acc-btn {
width: 100%; display: flex; align-items: center; justify-content: flex-start;
background: transparent;
border: none;
border-radius: 0; color: #16121F;
font-size: .68rem; font-weight: 700; font-family: var(--font);
padding: 14px 0; cursor: pointer;
transition: background .2s;
letter-spacing: .01em;
}
.ph5-acc-btn .ph5-why-icon { color: #0F0A2E; opacity: .3; flex-shrink: 0; margin-left: auto; }
.ph5-acc-btn:hover { background: var(--gray-100); }
.ph5-acc-btn.open .ph5-acc-num { color: #FF6200; }
/* Numéro discret remplaçant l'ancienne icône */
.ph5-acc-num { font-size: .66rem; font-weight: 800; color: #0F0A2E; width: 16px; flex-shrink: 0; transition: color .2s; }
.ph5-acc-title { font-size: .86rem; font-weight: 800; color: #16121F; line-height: 1.3; }
.ph5-acc-sub { font-size: .7rem; font-weight: 450; color: #5B5F6E; line-height: 1.5; margin-top: 3px; }
/* Bouton CTA partenaire */
.ph5-cta-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; background: #FF6200;
border: none; border-radius: 12px;
color: #fff; font-size: .72rem; font-weight: 700; font-family: var(--font);
padding: 13px 20px; cursor: pointer; margin-bottom: 10px;
box-shadow: 0 4px 18px rgba(255,98,0,.35);
transition: opacity .2s, transform .15s;
}
.ph5-cta-btn:hover { opacity: .88; transform: translateY(-1px); }
.ph5-cta-btn:active { transform: translateY(0); }
/* ── Écran de connexion cabine (page entière, pas une modale) — voir
showCabineLoginGate() dans js/cabine.js. Réutilise .pln-modal/.pln-*
(mêmes classes que la modale de connexion partenaire d'index.html) pour
un rendu identique, seul le conteneur change (plein écran plutôt que
superposé au tableau de bord). ── */
.cab-login-gate {
position: fixed; inset: 0; z-index: 3000;
display: flex; align-items: center; justify-content: center;
padding: 20px; box-sizing: border-box;
background: #09090f;
}
/* ── Modal login partenaire (pln) ──────────────────────────────── */
.pln-modal {
position: relative; overflow: hidden;
background: #09090f;
border: 1px solid rgba(255,98,0,.22);
border-radius: 22px;
width: 92%; max-width: 360px;
animation: slideUp .28s ease;
box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset,
0 30px 70px rgba(0,0,0,.7),
0 0 60px rgba(255,98,0,.06);
}
/* Écran de paiement d'abonnement (#cab-abo-gate) : plus étroit que le
login partenaire ci-dessus — override scopé pour ne pas rétrécir aussi
l'écran de connexion, qui partage la même classe .pln-modal. */
#cab-abo-gate .pln-modal { max-width: 300px; }
#cab-abo-gate .pln-cta { width: 80%; margin: 0 auto; }
/* Steps indicator */
.pln-steps {
display: flex; align-items: center; justify-content: center; gap: 0;
padding: 4px 20px 12px;
}
.pln-step {
width: 8px; height: 8px; border-radius: 99px;
background: rgba(255,255,255,.15);
transition: all .35s ease;
}
.pln-step--active { width: 24px; background: #FF6200; box-shadow: 0 0 8px rgba(255,98,0,.5); }
.pln-step--done { background: rgba(255,98,0,.4); }
.pln-step-line { flex: 1; height: 1px; background: rgba(255,255,255,.08); margin: 0 6px; max-width: 40px; }
/* Slides */
.pln-slides { position: relative; overflow: hidden; }
.pln-slide {
transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.pln-slide--hidden {
display: none; opacity: 0; transform: translateX(40px);
}
.pln-slide--exit {
opacity: 0; transform: translateX(-40px);
pointer-events: none;
}
.pln-slide--enter {
opacity: 1; transform: translateX(0);
}
/* Back button */
.pln-back-btn {
width: 28px; height: 28px; border-radius: 50%;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
color: rgba(255,255,255,.5); font-size: .65rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s;
}
.pln-back-btn:hover { background: rgba(255,255,255,.12); }
/* Autre modèle de "retour" (demande explicite : "je ne veux pas de
flèche ni de croix") — lien texte plutôt qu'une icône, même principe
que .prg-topbar-close--text ; libellé/onclick reposés dynamiquement
par openPartnerLoginModal()/prtGoStep() (js/client.js) selon l'étape
("Fermer" à l'étape 1, "Retour" à l'étape 2). */
.pln-back-btn--text {
width: auto; height: auto; border-radius: 8px;
background: none; border: none; padding: 5px 10px;
font-family: var(--font); font-size: .66rem; font-weight: 700;
}
/* User card */
.pln-user-card {
display: flex; align-items: center; gap: 12px;
margin: 0 16px 14px;
background: rgba(255,98,0,.06); border: 1px solid rgba(255,98,0,.18);
border-radius: 14px; padding: 12px 14px;
}
.pln-user-ava {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg,#c94e00,#FF6200);
display: flex; align-items: center; justify-content: center;
font-size: .8rem; font-weight: 900; color: #fff; text-transform: uppercase;
}
.pln-user-name { font-size: .72rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.pln-user-tel { font-size: .58rem; color: rgba(255,255,255,.35); }
.pln-glow {
position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
width: 260px; height: 200px; border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,98,0,.15) 0%, transparent 70%);
pointer-events: none;
}
.pln-topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px 0;
}
.pln-brand {
display: flex; align-items: center; gap: 6px;
font-size: .52rem; font-weight: 800; color: rgba(255,98,0,.7);
text-transform: uppercase; letter-spacing: .12em;
}
.pln-brand-dot {
width: 6px; height: 6px; border-radius: 50%; background: #FF6200;
box-shadow: 0 0 6px #FF6200;
}
.pln-hero {
display: flex; flex-direction: column; align-items: center;
padding: 20px 20px 14px;
}
.pln-hero-ring {
width: 62px; height: 62px; border-radius: 50%;
background: conic-gradient(from 0deg, #FF6200, #ff8c42, #FF6200);
padding: 2px; margin-bottom: 14px;
box-shadow: 0 0 24px rgba(255,98,0,.3);
}
.pln-hero-ico {
width: 100%; height: 100%; border-radius: 50%;
background: #09090f;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; color: #FF6200;
}
.pln-hero-title { font-size: .95rem; font-weight: 900; color: #fff; margin-bottom: 5px; letter-spacing: -.02em; }
.pln-hero-sub { font-size: .57rem; color: rgba(255,255,255,.3); }
.pln-denied {
display: flex; align-items: center; gap: 10px;
background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25);
border-radius: 10px; padding: 10px 14px; margin: 0 16px 12px;
font-size: .6rem; color: #f87171;
}
.pln-denied i { font-size: .8rem; flex-shrink: 0; }
/* Statut "vérification en cours" — remplace le bouton "Continuer" de
l'étape 1 de connexion (voir _agLoginAutoAdvance(), js/client.js), qui
avance désormais toute seule dès que le numéro est complet. */
.pln-form { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.pln-field { display: flex; flex-direction: column; gap: 6px; }
.pln-remember { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; margin-top: -4px; }
.pln-remember input[type="checkbox"] { display: none; }
.pln-remember-box {
flex-shrink: 0; width: 18px; height: 18px; border-radius: 6px;
background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
transition: background .2s, border-color .2s;
}
.pln-remember-box i { font-size: .5rem; color: #17110c; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.pln-remember input[type="checkbox"]:checked + .pln-remember-box {
background: linear-gradient(135deg, #ff9a3c, #ff6200); border-color: transparent;
}
.pln-remember input[type="checkbox"]:checked + .pln-remember-box i { opacity: 1; transform: scale(1); }
.pln-remember-txt { font-size: .6rem; color: rgba(255,255,255,.55); }
.pln-label { font-size: .52rem; font-weight: 700; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 5px; }
.pln-label i { font-size: .5rem; color: rgba(255,98,0,.5); }
.pln-input-wrap {
display: flex; align-items: center;
background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.1);
border-radius: 12px; overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
.pln-input-wrap:focus-within {
border-color: rgba(255,98,0,.5);
box-shadow: 0 0 0 3px rgba(255,98,0,.1);
}
.pln-prefix {
font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.5);
padding: 0 12px; white-space: nowrap; flex-shrink: 0;
}
.pln-sep { width: 1px; height: 22px; background: rgba(255,255,255,.1); flex-shrink: 0; }
.pln-input {
flex: 1; background: none; border: none; outline: none;
color: #fff; font-family: var(--font); font-size: .72rem;
padding: 12px 14px;
}
.pln-pin-row { display: flex; gap: 10px; justify-content: center; }
.pln-pin-box {
width: 52px; height: 52px; border-radius: 14px;
background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
color: #FF6200; font-size: 1.4rem; text-align: center;
font-family: var(--font); outline: none;
transition: border-color .2s, background .2s, box-shadow .2s;
-webkit-text-security: disc;
}
.pln-pin-box:focus {
border-color: #FF6200; background: rgba(255,98,0,.08);
box-shadow: 0 0 0 3px rgba(255,98,0,.15);
}
.pln-pin-box:not(:placeholder-shown) { border-color: rgba(255,98,0,.4); }
.pln-pin-hint {
font-size: .5rem; color: rgba(255,255,255,.2); text-align: center;
display: flex; align-items: center; justify-content: center; gap: 4px;
}
/* Ancien pln-btn-wrap conservé pour compatibilité */
.pln-btn-wrap { display: flex; gap: 10px; }
.pln-btn { display: none; }
.pln-btn-circle { display: none; }
/* ── Nouveau bouton CTA partenaire ─────────────────────────────── */
.pln-cta {
position: relative; width: 100%; height: 52px;
display: flex; align-items: center; justify-content: space-between;
padding: 0 6px 0 20px;
background: transparent;
border: none; border-radius: 16px; cursor: pointer;
font-family: var(--font); overflow: hidden;
transition: transform .18s, box-shadow .2s;
}
.pln-cta::before {
content: ''; position: absolute; inset: 0; border-radius: 16px;
padding: 1.5px;
background: linear-gradient(135deg, #FF6200, #ff9a52, #c94e00);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: plnBorderSpin 4s linear infinite;
}
@keyframes plnBorderSpin {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.pln-cta-bg {
position: absolute; inset: 0; border-radius: 16px;
background: linear-gradient(135deg, rgba(201,78,0,.18), rgba(255,98,0,.1));
transition: background .25s;
}
.pln-cta:hover .pln-cta-bg {
background: linear-gradient(135deg, rgba(201,78,0,.35), rgba(255,98,0,.22));
}
.pln-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,98,0,.25); }
.pln-cta:active { transform: translateY(0); }
.pln-cta-label {
position: relative; z-index: 1;
font-size: .77rem; font-weight: 800; color: #fff; letter-spacing: .02em;
}
.pln-cta-arrow {
position: relative; z-index: 1; flex-shrink: 0;
width: 40px; height: 40px; border-radius: 11px;
background: linear-gradient(135deg, #c94e00, #FF6200);
display: flex; align-items: center; justify-content: center;
font-size: .78rem; color: #fff;
box-shadow: 0 4px 14px rgba(255,98,0,.45);
transition: transform .18s;
}
.pln-cta:hover .pln-cta-arrow { transform: translateX(3px); }
/* Banner "Devenir partenaire" — v3 */
.pln-join3 {
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin: 0 14px 16px; padding: 13px 12px 13px 13px;
background: linear-gradient(135deg, #1a0900 0%, #2d1200 50%, #1a0900 100%);
border: 1px solid rgba(255,98,0,.35);
border-radius: 16px; cursor: pointer; width: calc(100% - 28px);
font-family: var(--font); text-align: left;
box-shadow: 0 4px 20px rgba(255,98,0,.12), 0 0 0 1px rgba(255,98,0,.08) inset;
transition: transform .18s, box-shadow .2s;
}
.pln-join3:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(255,98,0,.22), 0 0 0 1px rgba(255,98,0,.15) inset;
}
.pln-join3-glow {
position: absolute; top: -30px; right: 30px;
width: 100px; height: 80px; border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,98,0,.2), transparent 70%);
pointer-events: none;
}
.pln-join3-left { display: flex; align-items: center; gap: 11px; }
.pln-join3-ico {
width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
background: linear-gradient(135deg,#c94e00,#FF6200);
display: flex; align-items: center; justify-content: center;
font-size: .8rem; color: #fff;
box-shadow: 0 4px 12px rgba(255,98,0,.4);
}
.pln-join3-title { font-size: .75rem; font-weight: 900; color: #fff; margin-bottom: 2px; }
.pln-join3-sub { font-size: .55rem; color: rgba(255,255,255,.35); }
.pln-join3-tag {
flex-shrink: 0; display: flex; align-items: center; gap: 5px;
background: rgba(255,98,0,.15); border: 1px solid rgba(255,98,0,.3);
border-radius: 999px; padding: 5px 12px;
font-size: .58rem; font-weight: 800; color: #FF6200;
transition: background .2s, gap .2s;
}
.pln-join3:hover .pln-join3-tag { background: #FF6200; color: #fff; gap: 8px; }
/* Bande reset mot de passe — étape 2 */
.pln-reset-strip {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin: 0 14px 14px; padding: 10px 10px 10px 14px;
background: rgba(255,255,255,.03);
border: 1px dashed rgba(255,255,255,.1);
border-radius: 12px;
}
.pln-reset-left {
display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.pln-reset-ico {
width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
background: rgba(255,255,255,.06);
display: flex; align-items: center; justify-content: center;
font-size: .58rem; color: rgba(255,255,255,.3);
}
.pln-reset-left > span {
font-size: .65rem; font-weight: 600; color: rgba(255,255,255,.35);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pln-reset-cta {
flex-shrink: 0;
background: none; border: 1px solid rgba(15,10,46,.35);
border-radius: 8px; padding: 5px 12px;
color: #0F0A2E; font-size: .6rem; font-weight: 800;
font-family: var(--font); cursor: pointer;
display: flex; align-items: center; gap: 6px;
transition: background .2s, border-color .2s;
}
.pln-reset-cta:hover { background: rgba(15,10,46,.08); border-color: rgba(15,10,46,.6); }
.pln-reset-cta i { font-size: .5rem; transition: transform .2s; }
.pln-reset-cta:hover i { transform: translateX(3px); }
.pln-footer {
border-top: 1px solid rgba(255,255,255,.06);
padding: 6px 12px 12px;
display: flex; flex-direction: column; gap: 0;
}
.pln-footer-row {
width: 100%; display: flex; align-items: center; gap: 12px;
background: none; border: none; cursor: pointer; font-family: var(--font);
padding: 10px 8px; border-radius: 10px;
transition: background .18s;
text-align: left;
}
.pln-footer-row:hover { background: rgba(255,255,255,.04); }
.pln-footer-ico {
width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: .72rem;
}
.pln-footer-ico--gray { background: rgba(255,255,255,.07); color: rgba(255,255,255,.4); }
.pln-footer-ico--orange { background: rgba(255,98,0,.12); color: #FF6200; border: 1px solid rgba(255,98,0,.2); }
.pln-footer-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pln-footer-label { font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.55); }
.pln-footer-hint { font-size: .52rem; color: rgba(255,255,255,.45); }
.pln-footer-arr { font-size: .5rem; color: rgba(255,255,255,.2); flex-shrink: 0; }
.pln-footer-divider { height: 1px; background: rgba(255,255,255,.05); margin: 0 8px; }
/* ── Connexion "Espace Partenaire" — thème clair (direction B choisie
via canvas de design le 24/08 : "je veux un fond blanc et les
écritures en noir", modèle "tout blanc" retenu). Le patron .pln-*
ci-dessus reste sombre pour ses autres usages (#cab-abo-gate) — cet
override est scopé à #modal-partner-login uniquement, dans la
continuité de l'override existant sur .pln-user-card. */
#modal-partner-login .pln-modal {
background: #fff; border: 1px solid #E8E9EE;
box-shadow: 0 8px 32px rgba(16,18,31,.14);
}
#modal-partner-login .pln-glow { display: none; }
#modal-partner-login .pln-back-btn {
background: var(--gray-100); border: 1px solid #E8E9EE; color: var(--gray-600);
}
#modal-partner-login .pln-back-btn:hover { background: #E8E9EE; }
#modal-partner-login .pln-back-btn--text { background: none; border: none; }
#modal-partner-login .pln-back-btn--text:hover { background: var(--gray-100); }
#modal-partner-login .pln-step { background: #E8E9EE; }
#modal-partner-login .pln-step--active { background: #0F0A2E; box-shadow: none; }
#modal-partner-login .pln-step--done { background: rgba(15,10,46,.35); }
#modal-partner-login .pln-step-line { background: #E8E9EE; }
#modal-partner-login .pln-hero-ring { background: rgba(15,10,46,.06); box-shadow: none; padding: 0; }
#modal-partner-login .pln-hero-ico { background: transparent; color: #0F0A2E; }
#modal-partner-login .pln-hero-title { color: #16121F; }
#modal-partner-login .pln-hero-sub { color: var(--gray-500); }
#modal-partner-login .pln-label { color: var(--gray-500); }
#modal-partner-login .pln-label i { color: #0F0A2E; opacity: .5; }
#modal-partner-login .pln-input-wrap {
background: #fff; border: 1.5px solid #E8E9EE;
}
#modal-partner-login .pln-input-wrap:focus-within {
border-color: #0F0A2E; box-shadow: 0 0 0 3px rgba(15,10,46,.08);
}
#modal-partner-login .pln-input { color: #16121F; }
#modal-partner-login .pln-input::placeholder { color: #C7CAD2; }
#modal-partner-login .pln-denied { color: #dc2626; }
/* Bouton d'action simplifié (demande explicite : "propose un autre
modèle simple") — plus de boîte séparée autour de la flèche ni
d'ombre portée, juste l'icône posée à côté du texte. */
#modal-partner-login .pln-cta::before { display: none; }
#modal-partner-login .pln-cta-bg { background: #0F0A2E; }
#modal-partner-login .pln-cta:hover .pln-cta-bg { background: #1B234F; }
#modal-partner-login .pln-cta:hover { box-shadow: none; }
/* Bouton "Continuer" : sans flèche, libellé centré (demande explicite). */
#modal-partner-login .pln-cta {
justify-content: center;
padding: 0 20px;
}
#modal-partner-login .pln-cta-arrow { display: none; }
#modal-partner-login .pln-join3 {
background: var(--gray-100); border: 1px solid #E8E9EE; box-shadow: none;
}
#modal-partner-login .pln-join3:hover { box-shadow: none; }
#modal-partner-login .pln-join3-glow { display: none; }
#modal-partner-login .pln-join3-ico {
background: rgba(255,98,0,.1); box-shadow: none; color: #FF6200;
}
#modal-partner-login .pln-join3-title { color: #16121F; }
#modal-partner-login .pln-join3-sub { color: var(--gray-500); }
#modal-partner-login .pln-reset-strip { background: var(--gray-100); border: 1px dashed #E8E9EE; }
#modal-partner-login .pln-reset-ico { background: #fff; color: var(--gray-500); }
#modal-partner-login .pln-reset-left > span { color: var(--gray-500); }
/* ── Connexion "Espace Cabine" (cabine.html) — même demande que ci-dessus
("uniquement un fond blanc, et les écritures en bleu marine et noir"),
scopée à #cab-login-gate uniquement : #cab-abo-gate (paiement
d'abonnement) partage la même classe .cab-login-gate mais reste sombre,
avec des styles inline qui supposent ce fond (jamais touché ici). */
#cab-login-gate .pln-modal {
background: #fff; border: 1px solid #E8E9EE;
box-shadow: 0 8px 32px rgba(16,18,31,.14);
}
#cab-login-gate .pln-glow { display: none; }
#cab-login-gate .pln-brand { color: #0F0A2E; }
#cab-login-gate .pln-brand-dot { background: #0F0A2E; box-shadow: none; }
#cab-login-gate .pln-hero-ring { background: rgba(15,10,46,.06); box-shadow: none; padding: 0; }
#cab-login-gate .pln-hero-ico { background: transparent; color: #0F0A2E; }
#cab-login-gate .pln-hero-title { color: #16121F; }
#cab-login-gate .pln-hero-sub { color: var(--gray-500); }
#cab-login-gate .pln-label { color: var(--gray-500); }
#cab-login-gate .pln-label i { color: #0F0A2E; opacity: .5; }
#cab-login-gate .pln-input-wrap {
background: #fff; border: 1.5px solid #E8E9EE;
}
#cab-login-gate .pln-input-wrap:focus-within {
border-color: #0F0A2E; box-shadow: 0 0 0 3px rgba(15,10,46,.08);
}
#cab-login-gate .pln-input { color: #16121F; }
#cab-login-gate .pln-input::placeholder { color: #C7CAD2; }
#cab-login-gate .pln-denied { color: #dc2626; }
#cab-login-gate .pln-cta::before { display: none; }
#cab-login-gate .pln-cta-bg { background: #0F0A2E; }
#cab-login-gate .pln-cta:hover .pln-cta-bg { background: #1B234F; }
#cab-login-gate .pln-cta:hover { box-shadow: 0 8px 24px rgba(15,10,46,.2); }
#cab-login-gate .pln-cta-arrow { background: rgba(255,255,255,.15); box-shadow: none; }
#cab-login-gate .pw-field-wrap--dark .pw-field-eye { color: var(--gray-400); }
#cab-login-gate .pw-field-wrap--dark .pw-field-eye:hover { color: var(--gray-600); }
#admin-login-gate .pw-field-wrap--dark .pw-field-eye { color: var(--gray-400); }
#admin-login-gate .pw-field-wrap--dark .pw-field-eye:hover { color: var(--gray-600); }
/* ── Modal choix partenaire (pa-modal) ─────────────────────────── */
.pa-modal {
position: relative; overflow: hidden;
background: #0c0c15;
border: 1px solid rgba(255,98,0,.2);
border-radius: 24px;
width: 92%; max-width: 340px;
padding: 28px 22px 20px;
animation: slideUp .28s ease;
box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.pa-bg-blob {
position: absolute; top: -40px; right: -40px;
width: 160px; height: 160px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,98,0,.18) 0%, transparent 70%);
pointer-events: none;
}
.pa-close {
position: absolute; top: 14px; right: 14px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
width: 28px; height: 28px; border-radius: 50%;
color: rgba(255,255,255,.5); font-size: .7rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s;
}
.pa-close:hover { background: rgba(255,255,255,.12); }
.pa-brand {
display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
}
.pa-brand-mark {
width: 32px; height: 32px; border-radius: 8px;
background: #FF6200;
display: flex; align-items: center; justify-content: center;
font-size: .7rem; font-weight: 900; color: #fff; font-family: var(--font);
flex-shrink: 0; letter-spacing: -.5px;
}
.pa-brand-mark span { color: rgba(255,255,255,.7); }
.pa-brand-tag {
font-size: .5rem; font-weight: 700; color: rgba(255,98,0,.7);
text-transform: uppercase; letter-spacing: .1em;
}
.pa-title {
font-size: 1.1rem; font-weight: 900; color: #fff;
letter-spacing: -.02em; margin-bottom: 5px;
}
.pa-sub {
font-size: .58rem; color: rgba(255,255,255,.3); margin-bottom: 18px;
}
.pa-divider-line {
height: 1px; background: linear-gradient(90deg, #FF6200 0%, rgba(255,98,0,.0) 100%);
margin-bottom: 18px; opacity: .3;
}
.pa-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.pa-action {
width: 100%; display: flex; align-items: center; justify-content: space-between;
gap: 12px; border-radius: 14px; padding: 13px 14px;
cursor: pointer; border: none; font-family: var(--font);
transition: transform .15s, opacity .2s;
text-align: left;
}
.pa-action:active { transform: scale(.98); }
.pa-action--primary {
background: linear-gradient(135deg, #e55a00, #FF6200);
box-shadow: 0 6px 20px rgba(255,98,0,.35);
}
.pa-action--ghost {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.09) !important;
}
.pa-action--ghost:hover { background: rgba(255,98,0,.06); border-color: rgba(255,98,0,.3) !important; }
.pa-action-left { display: flex; align-items: center; gap: 11px; }
.pa-action-ico {
width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.pa-action-ico--solid { background: rgba(255,255,255,.18); color: #fff; }
.pa-action-ico--outline { background: rgba(255,98,0,.1); border: 1px solid rgba(255,98,0,.3); color: #FF6200; }
.pa-action-title { font-size: .72rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.pa-action-sub { font-size: .52rem; color: rgba(255,255,255,.45); }
.pa-action--ghost .pa-action-sub { color: rgba(255,255,255,.3); }
.pa-action-arr { font-size: .6rem; color: rgba(255,255,255,.4); flex-shrink: 0; }
.pa-action--primary .pa-action-arr { color: rgba(255,255,255,.6); }
.pa-footer {
display: flex; align-items: center; justify-content: center; gap: 6px;
font-size: .52rem; color: rgba(255,255,255,.2);
padding-top: 14px; border-top: 1px solid rgba(255,255,255,.05);
}
/* ── Modal login Admin (adx) ───────────────────────────────────── */
/* ── Écran de connexion admin (carte centrée plein écran, pas une
modale) — voir showAdminLoginGate() dans js/admin.js. Réutilise
.adx-modal/.adx-* (mêmes classes que la modale de connexion admin
d'index.html). ── */
.admin-login-gate {
position: fixed; inset: 0; z-index: 3000;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 16px; padding: 20px; box-sizing: border-box;
background: linear-gradient(180deg, #0F0A2E 0%, #170F42 45%, #07070f 100%);
}
/* Fond blanc, logo/badge "ADMIN" retirés (demande explicite) — .adx-*
n'est utilisé que par cet unique écran (#admin-login-gate,
espace-gestion.html), donc les règles de base sont directement
converties au thème clair plutôt que scopées comme pour
#modal-partner-login/#cab-login-gate (partagées avec un autre écran
resté sombre). */
.adx-modal {
position: relative; overflow: hidden;
background: #fff;
border: 1px solid #E8E9EE;
border-radius: 22px; width: 92%; max-width: 360px;
animation: slideUp .3s ease;
box-shadow: 0 8px 32px rgba(16,18,31,.14);
}
.adx-grid { display: none; }
.adx-glow-top { display: none; }
.adx-slides { position: relative; overflow: hidden; }
.adx-slide { position: relative; z-index: 1; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s; }
.adx-slide--hidden { display: none; opacity: 0; transform: translateX(40px); }
.adx-slide--exit { opacity: 0; transform: translateX(-40px); pointer-events: none; }
.adx-slide--enter { opacity: 1; transform: translateX(0); }
.adx-hero {
display: flex; flex-direction: column; align-items: center;
padding: 18px 20px 14px;
}
.adx-hero-title { font-size: .95rem; font-weight: 900; color: #16121F; margin-bottom: 5px; letter-spacing: -.02em; }
.adx-hero-sub { font-size: .57rem; color: var(--gray-500); }
.adx-form { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.adx-field { display: flex; flex-direction: column; gap: 6px; }
.adx-label { font-size: .52rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 5px; }
.adx-label i { color: #7c3aed; opacity: .6; font-size: .5rem; }
.adx-input-wrap {
display: flex; align-items: center;
background: #fff; border: 1.5px solid #E8E9EE;
border-radius: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.adx-input-wrap:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }
.adx-prefix { font-size: .62rem; font-weight: 700; color: var(--gray-500); padding: 0 12px; white-space: nowrap; flex-shrink: 0; }
.adx-sep { width: 1px; height: 22px; background: #E8E9EE; flex-shrink: 0; }
.adx-input { flex: 1; background: none; border: none; outline: none; color: #16121F; font-family: var(--font); font-size: .72rem; padding: 12px 14px; }
.adx-input::placeholder { color: #C7CAD2; }
.adx-pin-row { display: flex; gap: 10px; justify-content: center; }
.adx-pin-box {
width: 52px; height: 52px; border-radius: 14px;
background: rgba(255,255,255,.04); border: 1.5px solid rgba(139,92,246,.2);
color: #a78bfa; font-size: 1.4rem; text-align: center;
font-family: var(--font); outline: none;
transition: border-color .2s, background .2s, box-shadow .2s;
}
.adx-pin-box:focus { border-color: #7c3aed; background: rgba(109,40,217,.1); box-shadow: 0 0 0 3px rgba(109,40,217,.15); }
.adx-pin-box::-ms-reveal, .adx-pin-box::-ms-clear { display: none !important; }
/* "Rester connecté" — même structure que .pln-remember (modale cabine),
accent violet plutôt qu'orange pour rester cohérent avec la palette de
la modale admin (.adx-cta, .adx-pin-box). */
.adx-remember { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; margin-top: -4px; }
.adx-remember input[type="checkbox"] { display: none; }
.adx-remember-box {
flex-shrink: 0; width: 18px; height: 18px; border-radius: 6px;
background: rgba(255,255,255,.04); border: 1.5px solid rgba(139,92,246,.2);
display: flex; align-items: center; justify-content: center;
transition: background .2s, border-color .2s;
}
.adx-remember-box i { font-size: .5rem; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.adx-remember input[type="checkbox"]:checked + .adx-remember-box {
background: linear-gradient(135deg,#5b21b6,#7c3aed); border-color: transparent;
}
.adx-remember input[type="checkbox"]:checked + .adx-remember-box i { opacity: 1; transform: scale(1); }
.adx-remember-txt { font-size: .6rem; color: rgba(255,255,255,.55); }
/* Bouton d'action simplifié (demande explicite : "propose un autre
modèle simple") — violet uni plutôt qu'un dégradé, plus de boîte
séparée autour de la flèche ni d'ombre portée. */
.adx-cta {
position: relative; overflow: hidden; width: 100%;
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 0 20px; height: 50px;
background: #7c3aed;
border: none; border-radius: 14px; cursor: pointer; font-family: var(--font);
color: #fff; box-shadow: none;
transition: opacity .15s;
}
.adx-cta:hover { opacity: .9; }
.adx-cta > span { font-size: .75rem; font-weight: 800; }
.adx-cta-arr {
width: auto; height: auto; flex-shrink: 0;
background: none; display: flex; align-items: center;
justify-content: center; font-size: .78rem;
transition: background .2s, transform .18s;
}
.adx-cta:hover .adx-cta-arr { transform: translateX(3px); }
.adx-user-card {
display: flex; align-items: center; gap: 12px;
margin: 0 16px 14px;
background: rgba(109,40,217,.08); border: 1px solid rgba(139,92,246,.2);
border-radius: 14px; padding: 12px 14px;
}
.adx-user-ava {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg,#5b21b6,#7c3aed);
display: flex; align-items: center; justify-content: center;
font-size: .8rem; font-weight: 900; color: #fff; text-transform: uppercase;
}
.adx-user-name { font-size: .72rem; font-weight: 800; color: #fff; margin-bottom: 3px; }
.adx-user-role { font-size: .55rem; color: #a78bfa; display: flex; align-items: center; gap: 4px; }
.adx-denied {
display: flex; align-items: center; gap: 10px;
background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25);
border-radius: 10px; padding: 10px 14px; margin: 0 16px 12px;
font-size: .6rem; color: #dc2626;
}
.adx-denied i { font-size: .8rem; flex-shrink: 0; }
.adx-secure {
text-align: center; font-size: .5rem; color: rgba(255,255,255,.45);
padding: 0 16px 14px; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.adx-steps {
display: flex; align-items: center; justify-content: center; gap: 0;
padding: 10px 20px 14px; position: relative; z-index: 1;
}
.adx-step {
width: 8px; height: 8px; border-radius: 99px;
background: rgba(255,255,255,.12); transition: all .35s ease;
}
.adx-step--active { width: 24px; background: #7c3aed; box-shadow: 0 0 8px rgba(124,58,237,.6); }
.adx-step--done { background: rgba(124,58,237,.4); }
.adx-step-line { flex: 1; height: 1px; background: rgba(139,92,246,.12); margin: 0 6px; max-width: 40px; }
/* ── Modal réinitialisation mot de passe (client) ─────────────── */
.rst-modal {
background: #ffffff; border: 1px solid rgba(0,0,0,.08);
border-radius: 20px; width: 92%; max-width: 340px;
overflow: hidden; animation: slideUp .28s ease;
box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.rst-header {
background: #ffffff;
border-bottom: 1px solid rgba(0,0,0,.07);
padding: 22px 20px 18px; text-align: center; position: relative;
}
.rst-close {
position: absolute; top: 10px; right: 12px;
background: none; border: none; color: rgba(0,0,0,.4);
font-size: .9rem; cursor: pointer;
}
.rst-header-ico {
width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 12px;
background: rgba(15,10,46,.12); border: 2px solid rgba(15,10,46,.3);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; color: #0F0A2E;
box-shadow: 0 0 20px rgba(15,10,46,.2);
}
.rst-header-title { font-size: .85rem; font-weight: 800; color: #000000; margin-bottom: 5px; }
.rst-header-sub { font-size: .57rem; color: rgba(0,0,0,.5); line-height: 1.5; }
.rst-body { padding: 20px 18px; }
.rst-field { margin-bottom: 14px; }
.rst-label { font-size: .55rem; font-weight: 700; color: rgba(0,0,0,.5); display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .08em; }
.rst-input-wrap { position: relative; }
.rst-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .65rem; color: rgba(15,10,46,.7); }
.rst-input {
width: 100%; background: var(--gray-100); border: 1.5px solid var(--gray-200);
border-radius: 10px; color: #000000; font-family: var(--font);
font-size: .68rem; padding: 10px 12px 10px 32px; box-sizing: border-box;
outline: none; transition: border-color .2s;
}
.rst-input:focus { border-color: #0F0A2E; background: rgba(15,10,46,.05); }
.rst-btn {
width: 100%; background: #0F0A2E; border: none; border-radius: 10px;
color: #fff; font-size: .68rem; font-weight: 800; font-family: var(--font);
padding: 12px; cursor: pointer; display: flex; align-items: center;
justify-content: center; gap: 8px; box-shadow: 0 4px 14px rgba(15,10,46,.4);
transition: opacity .2s;
}
.rst-btn:hover { opacity: .9; }
.rst-sent {
display: flex; align-items: flex-start; gap: 12px;
background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25);
border-radius: 12px; padding: 14px; margin-bottom: 4px;
font-size: .57rem;
}
.rst-sent > i { color: #22c55e; font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.rst-sent-title { font-size: .68rem; font-weight: 800; color: #22c55e; margin-bottom: 5px; }
.rst-sent-msg { color: rgba(0,0,0,.55); line-height: 1.6; }
/* Cases code PIN — .pin-box est sombre par défaut (voir plus bas), même
surcharge claire que .ag-modal (fond blanc du même style). */
.rst-modal .pin-box {
border: 1.5px solid rgba(0,0,0,.15);
border-radius: 12px;
background: var(--gray-100);
color: #0F0A2E;
}
.rst-modal .pin-box:focus {
border-color: #0F0A2E;
box-shadow: 0 0 0 4px rgba(15,10,46,.14);
background: #ffffff;
}
.rst-modal .pin-box.pin-filled {
border-color: #0F0A2E;
background: #0F0A2E;
color: #fff;
}
/* ── Tableau admin — réinitialisations ─────────────────────────── */
.rst-admin-row {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.05);
gap: 12px;
}
.rst-admin-row:last-child { border-bottom: none; }
.rst-admin-info { flex: 1; min-width: 0; }
.rst-admin-name { font-size: .78rem; font-weight: 700; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.rst-admin-meta { font-size: .68rem; color: var(--text-muted); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.rst-admin-date { font-size: .63rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.rst-admin-actions { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
/* ── Modal inscription partenaire v2 ───────────────────────────── */
/* Thème clair (même modèle que la modale admin "Créer un nouveau compte",
voir .form-control/.form-label/.type-card, admin.html) — remplace
l'ancien thème sombre de ce formulaire, demande explicite pour que la
candidature partenaire (côté client) ressemble à la création de compte
côté admin. Structure inchangée (3 étapes, bandeaux "01/02/03", champ
"Code de parrainage" déjà présent — voir #prg-parrain-code plus bas). */
.prg-modal {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: 22px; width: 94%; max-width: 390px;
max-height: 92vh; display: flex; flex-direction: column;
overflow: hidden; animation: slideUp .3s cubic-bezier(.16,1,.3,1);
box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
/* Topbar */
.prg-topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px 12px; flex-shrink: 0;
}
.prg-topbar-brand { display: flex; align-items: center; gap: 9px; }
.prg-topbar-title { font-size: .72rem; font-weight: 800; color: var(--gray-800); }
.prg-topbar-close {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
background: var(--gray-100); border: none; color: var(--gray-600);
font-size: .7rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
.prg-topbar-close:hover { background: #FEE2E2; color: #EF4444; }
/* Autre modèle de "retour" (demande explicite : "je ne veux pas de
croix ni aussi de flèche") — simple lien texte plutôt qu'une icône. */
.prg-topbar-close--text {
width: auto; height: auto; border-radius: 8px; flex-shrink: 0;
background: none; padding: 5px 10px;
font-family: var(--font); font-size: .66rem; font-weight: 700;
}
.prg-topbar-close--text:hover { background: var(--gray-100); color: var(--gray-800); }
/* Stepper */
.prg-stepper {
display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; flex-shrink: 0;
border-bottom: 1px solid var(--gray-200);
}
.prg-stp { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.prg-stp-num {
width: 28px; height: 28px; border-radius: 50%;
background: var(--gray-100); border: 2px solid var(--gray-300);
display: flex; align-items: center; justify-content: center;
font-size: .6rem; font-weight: 800; color: var(--gray-400);
transition: all .3s;
}
.prg-stp-lbl { font-size: .46rem; color: var(--gray-500); font-weight: 600; white-space: nowrap; transition: color .3s; }
.prg-stp--active .prg-stp-num { background: #0F0A2E; border-color: #0F0A2E; color: #fff; box-shadow: 0 0 12px rgba(15,10,46,.35); }
.prg-stp--active .prg-stp-lbl { color: #0F0A2E; }
.prg-stp--done .prg-stp-num { background: rgba(34,197,94,.12); border-color: #22c55e; color: #22c55e; }
.prg-stp--done .prg-stp-lbl { color: #22c55e; }
.prg-stp-line { flex: 1; height: 2px; background: var(--gray-200); margin: 0 6px; margin-bottom: 14px; transition: background .3s; }
.prg-stp-line--done { background: #22c55e; }
/* Step hero */
.prg-step-hero {
position: relative; overflow: hidden;
background: rgba(15,10,46,.05); border: 1px solid rgba(15,10,46,.15);
border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
}
.prg-step-hero-num {
position: absolute; right: -4px; top: -8px;
font-size: 3.5rem; font-weight: 900; color: rgba(15,10,46,.08);
line-height: 1; letter-spacing: -.05em; pointer-events: none; user-select: none;
}
.prg-step-hero-tag {
display: inline-flex; align-items: center; gap: 5px;
font-size: .5rem; font-weight: 700; color: #0F0A2E;
background: rgba(15,10,46,.1); border: 1px solid rgba(15,10,46,.25);
padding: 3px 9px; border-radius: 99px; margin-bottom: 6px;
text-transform: uppercase; letter-spacing: .08em;
}
.prg-step-hero-title { font-size: .78rem; font-weight: 800; color: var(--gray-800); }
/* Corps */
.prg-body { flex: 1; overflow-y: auto; padding: 16px; }
.prg-panel { }
.prg-section-title {
display: flex; align-items: center; gap: 7px;
font-size: .6rem; font-weight: 700; color: #0F0A2E;
text-transform: uppercase; letter-spacing: .1em;
margin-bottom: 14px; padding-bottom: 8px;
border-bottom: 1px solid rgba(15,10,46,.15);
}
.prg-notice {
display: flex; align-items: flex-start; gap: 7px;
background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.25);
border-radius: 8px; padding: 8px 10px; margin-bottom: 14px;
font-size: .55rem; color: var(--gray-600); line-height: 1.5;
}
.prg-field { margin-bottom: 12px; }
.prg-label {
font-size: .74rem; font-weight: 600; color: var(--gray-700);
display: block; margin-bottom: 5px;
}
.prg-consent {
display: flex; align-items: flex-start; gap: 9px;
margin: 6px 0 4px; cursor: pointer;
font-size: .72rem; line-height: 1.5; color: var(--gray-700);
}
.prg-consent input { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: #0F0A2E; cursor: pointer; }
.prg-consent a { color: #0F0A2E; font-weight: 600; }
.prg-input-wrap { position: relative; }
.prg-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: .65rem; color: rgba(15,10,46,.65); }
.prg-input {
width: 100%; background: var(--white); border: 1.5px solid var(--gray-300);
border-radius: var(--radius); color: var(--gray-800); font-family: var(--font);
font-size: .74rem; padding: 10px 12px; box-sizing: border-box;
outline: none; transition: border-color .2s, background .2s;
}
.prg-input--icon { padding-left: 33px; }
.prg-input:focus { border-color: #0F0A2E; background: rgba(15,10,46,.03); }
.prg-input::placeholder { color: var(--gray-400); }
.prg-select { appearance: none; cursor: pointer; }
.prg-textarea { resize: vertical; min-height: 90px; line-height: 1.6; padding: 10px 12px !important; }
/* Upload */
.prg-upload {
border: 2px dashed var(--gray-300); border-radius: 12px;
padding: 18px; text-align: center; cursor: pointer;
transition: border-color .2s, background .2s; background: var(--gray-100);
}
.prg-upload:hover { border-color: rgba(15,10,46,.4); background: rgba(15,10,46,.04); }
.prg-upload--done { border-color: rgba(34,197,94,.4); border-style: solid; background: rgba(34,197,94,.05); }
.prg-upload-ico { font-size: 1.3rem; color: var(--gray-400); margin-bottom: 7px; display: block; }
.prg-upload--done .prg-upload-ico { color: #22c55e; }
.prg-upload-lbl { font-size: .6rem; color: var(--gray-600); margin-bottom: 3px; }
.prg-upload-fn { font-size: .54rem; color: var(--gray-400); word-break: break-all; }
.prg-upload--done .prg-upload-fn { color: #22c55e; font-weight: 600; }
/* Abonnements */
.prg-abo-list { display: flex; flex-direction: column; gap: 8px; }
.prg-abo2 {
position: relative; overflow: hidden;
background: rgba(255,255,255,.03); border: 1.5px solid rgba(255,255,255,.08);
border-radius: 13px; padding: 12px 12px 10px; cursor: pointer;
transition: border-color .2s, background .2s;
}
.prg-abo2 { background: var(--gray-100); border: 1.5px solid var(--gray-200); }
.prg-abo2:hover { background: rgba(15,10,46,.05); border-color: rgba(15,10,46,.25); }
.prg-abo2--sel { background: rgba(15,10,46,.06); border-color: #0F0A2E; box-shadow: 0 0 0 1px #0F0A2E; }
.prg-abo2--popular { border-color: rgba(15,10,46,.3); }
.prg-abo2-popular-tag {
position: absolute; top: 0; right: 0;
background: #0F0A2E; color: #fff;
font-size: .42rem; font-weight: 800; letter-spacing: .08em;
padding: 3px 9px; border-radius: 0 11px 0 8px;
}
.prg-abo2-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.prg-abo2-name { font-size: .75rem; font-weight: 900; color: var(--gray-800); }
.prg-abo2-badge { font-size: .42rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; border: 1px solid; }
.prg-abo2-price { font-size: .85rem; font-weight: 900; color: #0F0A2E; line-height: 1; }
.prg-abo2-price span { font-size: .46rem; font-weight: 600; color: var(--gray-500); margin-left: 2px; }
.prg-abo2-desc { font-size: .54rem; color: var(--gray-500); line-height: 1.5; margin-bottom: 8px; }
.prg-abo2-desc strong { color: var(--gray-700); }
.prg-abo2-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; }
.prg-abo2-feats span { font-size: .52rem; color: var(--gray-600); display: flex; align-items: center; gap: 5px; }
.prg-abo2-feats i { color: #22c55e; font-size: .48rem; }
.prg-abo2-check { display: none; position: absolute; top: 10px; right: 10px; font-size: .85rem; color: #0F0A2E; }
.prg-abo2--sel .prg-abo2-check { display: block; }
/* Moyens de paiement */
.prg-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.prg-pay-card {
display: flex; align-items: center; gap: 8px;
background: var(--gray-100); border: 1.5px solid var(--gray-200);
border-radius: 10px; padding: 9px 11px; cursor: pointer;
transition: border-color .18s, background .18s;
font-size: .6rem; font-weight: 600; color: var(--gray-600);
}
.prg-pay-card:hover { background: rgba(15,10,46,.06); border-color: rgba(15,10,46,.2); }
.prg-pay-card--sel { background: rgba(15,10,46,.08); border-color: #0F0A2E; color: var(--gray-800); }
/* Logo réel (voir #prg-pay-abo/#prg-pay-vers, index.html, et
#cab-retrait-grid, cabine.html) — remplace les anciennes pastilles de
couleur .prg-pay-dot (supprimées, plus aucune grille ne les utilise) ;
.prg-pay-logo affiche un ![]()
de marque, ou une icône pour les moyens
sans logo dédié (ex. "Compte bancaire"). */
.prg-pay-logo {
width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; overflow: hidden;
background: #fff; display: flex; align-items: center; justify-content: center;
}
.prg-pay-logo img { width: 100%; height: 100%; object-fit: cover; }
/* Onglet Retrait cabine — verrouillage pendant le délai de 24h entre deux
modifications (voir confirmCabRetrait()/renderCabRetraitState() dans
js/cabine.js). */
.prg-pay-grid--locked { pointer-events: none; opacity: .5; }
.cab-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
/* Réseaux exploités — case à cocher par réseau (logo réel), plusieurs
réseaux peuvent être cochés en même temps (voir prgToggleNet(),
js/client.js). Remplace l'ancien trio de champs numériques (quantité de
puces par réseau, jamais vraiment nécessaire : une simple déclaration
"j'ai / j'ai pas" suffit). */
.prg-net-list { display: flex; flex-direction: column; gap: 8px; }
.prg-net-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: 12px; cursor: pointer;
border: 1.5px solid var(--gray-200); background: var(--gray-100);
transition: all .18s ease;
}
.prg-net-logo {
width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; overflow: hidden;
background: #fff; display: flex; align-items: center; justify-content: center;
}
.prg-net-logo img { width: 100%; height: 100%; object-fit: cover; }
.prg-net-name { flex: 1; font-weight: 800; font-size: .74rem; color: var(--gray-800); }
.prg-net-check {
width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
border: 1.5px solid var(--gray-300); background: transparent;
display: flex; align-items: center; justify-content: center; color: transparent; font-size: .6rem;
transition: all .18s ease;
}
.prg-net-row--on { border-color: rgba(15,10,46,.5); background: rgba(15,10,46,.07); }
.prg-net-row--on .prg-net-check { background: #0F0A2E; border-color: #0F0A2E; color: #fff; }
/* Aperçu en direct du parrain (prénom) dès qu'un code valide est saisi —
#prg-parrain-feedback (candidature partenaire) et #ag-reg-parrain-feedback
(inscription client, coupon clair, voir plus bas #reg-slide-3) — les deux
sur fond clair désormais, voir _wireParrainLookup(), js/client.js. */
.parrain-fb {
display: none; align-items: center; gap: 6px;
font-size: .62rem; font-weight: 700; margin-top: 6px;
}
.parrain-fb--checking { color: var(--gray-500); }
.parrain-fb--ok { color: #22c55e; }
.parrain-fb--warn { color: #f59e0b; }
/* Coordonnées disponibles/non disponibles (surnom, téléphone, email, nom
de cabine, nom+prénom — voir _wireLiveChecks(), js/client.js) : icône
couleur seule, jamais de libellé texte visible (sens porté par
title/aria-label pour l'accessibilité) — .parrain-fb--unavailable
distinct de --warn (ambre, réservé à un vrai avertissement comme
"aucun client trouvé" pour un code parrain, pas une indisponibilité). */
.parrain-fb--unavailable { color: #ef4444; }
/* Footer navigation */
.prg-footer {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 12px 16px; border-top: 1px solid var(--gray-200); flex-shrink: 0;
}
.prg-btn-back {
display: flex; align-items: center; gap: 6px; flex-shrink: 0;
background: none; border: 1.5px solid var(--gray-300);
border-radius: 10px; color: var(--gray-500);
font-size: .62rem; font-weight: 700; font-family: var(--font);
padding: 9px 14px; cursor: pointer; transition: border-color .15s, color .15s;
}
.prg-btn-back:hover { border-color: var(--gray-400); color: var(--gray-700); }
.prg-btn-fwd {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
background: #0F0A2E; border: none; border-radius: 10px; color: #fff;
font-size: .68rem; font-weight: 800; font-family: var(--font);
padding: 11px 16px; cursor: pointer;
box-shadow: 0 4px 16px rgba(15,10,46,.4);
transition: background .2s, transform .1s;
}
.prg-btn-fwd:hover { background: #1B234F; }
.prg-btn-fwd:active { transform: scale(.98); }
.prg-btn-fwd:disabled { background: rgba(15,10,46,.35); cursor: not-allowed; box-shadow: none; }
/* Confirmation */
.prg-success { text-align: center; padding: 24px 12px; }
.prg-success-ico { font-size: 3.2rem; color: #22c55e; margin-bottom: 14px; }
.prg-success-title { font-size: .92rem; font-weight: 900; color: var(--gray-800); margin-bottom: 10px; }
.prg-success-msg { font-size: .6rem; color: var(--gray-500); line-height: 1.75; margin-bottom: 22px; }
.prg-success-btn {
background: #FF6200; border: none; border-radius: 10px;
color: #fff; font-size: .68rem; font-weight: 800; font-family: var(--font);
padding: 12px 32px; cursor: pointer; box-shadow: 0 4px 16px rgba(255,98,0,.4);
}
/* Surcharges orange pour modal partenaire */
.prt-input {
background: rgba(255,98,0,.07) !important;
border-color: rgba(255,98,0,.2) !important;
}
.prt-input:focus { border-color: rgba(255,98,0,.6) !important; }
.prt-pin-box:focus { border-color: #FF6200 !important; background: rgba(255,98,0,.12) !important; }
.prt-pin-box.adm-pin-filled { border-color: #FF6200 !important; background: #FF6200 !important; color: #fff !important; }
.prt-submit {
background: linear-gradient(135deg, #c94800, #FF6200) !important;
box-shadow: 0 4px 18px rgba(255,98,0,.4) !important;
}
/* Modal admin */
.adm-modal {
background: #0d0d16; border: 1px solid rgba(138,99,255,.3);
border-radius: 20px; width: 92%; max-width: 340px;
overflow: hidden; animation: slideUp .28s ease;
}
.adm-modal-header {
background: linear-gradient(135deg, #3b1fa8 0%, #5b32d6 100%);
padding: 22px 20px 18px; text-align: center; position: relative;
}
.adm-modal-close {
position: absolute; top: 10px; right: 12px;
background: none; border: none; color: rgba(255,255,255,.6);
font-size: .9rem; cursor: pointer; line-height: 1;
}
.adm-modal-ico {
width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 10px;
background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.2);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; color: #fff;
}
.adm-modal-title { font-size: .88rem; font-weight: 800; color: #fff; margin-bottom: 3px; }
.adm-modal-sub { font-size: .56rem; color: rgba(255,255,255,.55); }
.adm-modal-body { padding: 20px 18px; }
.adm-denied {
display: flex; align-items: flex-start; gap: 10px;
background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
border-radius: 10px; padding: 10px 12px; margin-bottom: 14px;
font-size: .57rem; color: #f87171; line-height: 1.5;
}
.adm-denied i { flex-shrink: 0; margin-top: 1px; }
.adm-field { margin-bottom: 14px; }
.adm-label { font-size: .56rem; font-weight: 700; color: rgba(255,255,255,.4); display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .08em; }
.adm-input-wrap { position: relative; }
.adm-input-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(138,99,255,.6); font-size: .65rem; }
.adm-input {
width: 100%; background: rgba(138,99,255,.07); border: 1.5px solid rgba(138,99,255,.2);
border-radius: 10px; color: #fff; font-family: var(--font);
font-size: .7rem; padding: 11px 12px 11px 34px; box-sizing: border-box;
outline: none; transition: border-color .2s;
}
.adm-input:focus { border-color: rgba(138,99,255,.6); }
.adm-pin-row { display: flex; gap: 8px; justify-content: center; }
.adm-pin-box {
width: 44px; height: 44px; border-radius: 50%; text-align: center;
background: rgba(138,99,255,.07); border: 1.5px solid rgba(138,99,255,.2);
color: #fff; font-size: 1.05rem; font-family: var(--font); outline: none;
transition: border-color .2s, background .2s;
}
.adm-pin-box:focus { border-color: #a78bfa; background: rgba(138,99,255,.15); }
.adm-pin-box.adm-pin-filled { border-color: rgba(138,99,255,.5); background: rgba(138,99,255,.12); }
.adm-submit {
width: 100%; background: linear-gradient(135deg, #5b32d6, #3b1fa8);
border: none; border-radius: 12px; color: #fff;
font-size: .68rem; font-weight: 700; font-family: var(--font);
padding: 13px; cursor: pointer; margin-top: 6px;
box-shadow: 0 4px 18px rgba(91,50,214,.4);
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: opacity .2s, transform .15s;
}
.adm-submit:hover { opacity: .9; transform: translateY(-1px); }
/* ── Champ mot de passe complexe (cabine/admin) — bouton œil + liste de
critères en temps réel. Voir Auth.initComplexPasswordField()/
togglePasswordVisibility() (js/auth.js), réutilisé partout où ce mot de
passe est créé (candidature partenaire, réinitialisation, création de
compte admin) ou saisi à la connexion. Habillage clair par défaut
(assorti à .prg-input/.form-control) ; .pw-field-wrap--dark ci-dessous
pour les écrans de connexion sur fond sombre (cabine/admin). ── */
.pw-field-wrap { position: relative; }
.pw-field-wrap input[type="password"],
.pw-field-wrap input[type="text"] { padding-right: 38px !important; }
.pw-field-eye {
position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
width: 26px; height: 26px; border-radius: 50%; border: none; background: none;
color: var(--gray-400); cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: .8rem; transition: color .15s;
}
.pw-field-eye:hover { color: var(--gray-600); }
.pw-field-wrap--dark .pw-field-eye { color: rgba(255,255,255,.4); }
.pw-field-wrap--dark .pw-field-eye:hover { color: rgba(255,255,255,.75); }
.pwck-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.pwck-item {
display: flex; align-items: center; gap: 6px;
font-size: .64rem; font-weight: 600; color: var(--gray-400);
transition: color .2s;
}
.pwck-item i { font-size: .68rem; color: var(--gray-300); transition: color .2s; }
.pwck-item--ok { color: #16a34a; }
.pwck-item--ok i { color: #16a34a; }
.pwck-list--dark .pwck-item { color: rgba(255,255,255,.35); }
.pwck-list--dark .pwck-item i { color: rgba(255,255,255,.25); }
.pwck-list--dark .pwck-item--ok,
.pwck-list--dark .pwck-item--ok i { color: #34d399; }
.adm-submit:active { transform: translateY(0); }
/* Portail d'accès — style "éditorial minimal" (direction A choisie via
canvas de design le 24/08) : label sans icône au-dessus d'une carte
à ligne unique, même langage que .ph5-accordion ci-dessus. */
.ph5-gate-row {
display: flex; align-items: center; gap: 12px; text-decoration: none;
background: #fff; border: 1px solid #E8E9EE;
border-radius: 16px; padding: 15px 16px;
cursor: pointer; transition: background .18s, border-color .18s, transform .12s;
}
.ph5-gate-row--partner:hover { background: rgba(255,98,0,.04); border-color: rgba(255,98,0,.25); transform: translateX(3px); }
.ph5-gate-row--admin:hover { background: rgba(15,10,46,.04); border-color: rgba(15,10,46,.2); transform: translateX(3px); }
.ph5-gate-row-body { flex: 1; min-width: 0; }
.ph5-gate-row-title { font-size: .86rem; font-weight: 800; color: #16121F; line-height: 1.3; }
.ph5-gate-row-sub { font-size: .7rem; font-weight: 450; color: #5B5F6E; line-height: 1.5; margin-top: 3px; }
.ph5-gate-row-arr { font-size: .55rem; color: #0F0A2E; opacity: .3; flex-shrink: 0; }
/* "Espace partenaire" en vert pur, écritures en blanc (demande explicite)
— scopé à cette seule carte via son id, "Devenir partenaire" juste en
dessous (même classe .ph5-gate-row--partner) n'est pas touchée. */
#ph5-gate-espace-partenaire { background: #008A3B; border-color: #008A3B; }
#ph5-gate-espace-partenaire:hover { background: #06A346; border-color: #06A346; transform: translateX(3px); }
#ph5-gate-espace-partenaire .ph5-gate-row-title { color: #fff; }
#ph5-gate-espace-partenaire .ph5-gate-row-sub { color: rgba(255,255,255,.6); }
#ph5-gate-espace-partenaire .ph5-gate-row-arr { color: #fff; opacity: .6; }
/* Carte administrateur */
.ph5-admin-card {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 14px;
background: rgba(138,99,255,.06);
border: 1px solid rgba(138,99,255,.2);
border-radius: 13px; padding: 14px 14px;
cursor: pointer; transition: background .2s, border-color .2s, transform .15s;
}
.ph5-admin-card:hover { background: rgba(138,99,255,.1); border-color: rgba(138,99,255,.4); transform: translateY(-1px); }
.ph5-admin-card-glow {
position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
width: 70px; height: 70px; border-radius: 50%;
background: radial-gradient(circle, rgba(138,99,255,.15) 0%, transparent 70%);
pointer-events: none;
}
.ph5-admin-ico {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
background: rgba(138,99,255,.12); border: 1.5px solid rgba(138,99,255,.3);
display: flex; align-items: center; justify-content: center;
font-size: .9rem; color: #a78bfa;
box-shadow: 0 0 14px rgba(138,99,255,.2);
}
.ph5-admin-info { flex: 1; min-width: 0; }
.ph5-admin-title { font-size: .72rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.ph5-admin-sub { font-size: .55rem; color: rgba(255,255,255,.3); margin-bottom: 6px; }
.ph5-admin-badge {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(138,99,255,.12); border: 1px solid rgba(138,99,255,.25);
color: #a78bfa; font-size: .48rem; font-weight: 600;
padding: 2px 8px; border-radius: 99px;
}
.ph5-admin-arrow {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
background: rgba(138,99,255,.12); border: 1px solid rgba(138,99,255,.25);
display: flex; align-items: center; justify-content: center;
font-size: .55rem; color: #a78bfa;
}
/* Carte d'accès partenaire */
.ph5-access-card {
position: relative; overflow: hidden;
display: flex; align-items: center;
background: linear-gradient(120deg, #0e0e14 55%, #1a0800 100%);
border: 1px solid rgba(255,98,0,.3);
border-radius: 16px; cursor: pointer;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 4px 20px rgba(0,0,0,.4);
min-height: 100px;
}
.ph5-access-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,98,0,.25); }
.ph5-access-grid {
position: absolute; inset: 0; pointer-events: none;
background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 18px),
repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 18px);
}
.ph5-access-glow {
position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
width: 120px; height: 120px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,98,0,.2) 0%, transparent 70%);
pointer-events: none;
}
/* Gauche */
.ph5-access-left {
display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 5px;
padding: 18px 16px; flex-shrink: 0; min-width: 90px;
}
.ph5-access-logo {
font-size: 1.1rem; font-weight: 900; color: #FF6200;
letter-spacing: -.02em; line-height: 1;
}
.ph5-access-label {
font-size: .46rem; font-weight: 600; color: rgba(255,255,255,.3);
text-transform: uppercase; letter-spacing: .07em;
text-align: center; line-height: 1.4;
}
.ph5-access-ops { display: flex; gap: 4px; margin-top: 2px; }
.ph5-access-ops span {
width: 8px; height: 8px; border-radius: 50%; display: block; opacity: .8;
}
/* Séparateur vertical */
.ph5-access-sep {
width: 1px; height: 60px; flex-shrink: 0;
background: linear-gradient(to bottom, transparent, rgba(255,98,0,.3), transparent);
}
/* Droite */
.ph5-access-right {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 18px 16px; gap: 4px; position: relative; z-index: 1;
}
.ph5-access-lock {
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,98,0,.15); border: 1.5px solid rgba(255,98,0,.4);
display: flex; align-items: center; justify-content: center;
font-size: .9rem; color: #FF6200; margin-bottom: 6px;
box-shadow: 0 0 16px rgba(255,98,0,.25);
}
.ph5-access-right-title {
font-size: .75rem; font-weight: 800; color: #fff;
}
.ph5-access-right-sub {
font-size: .52rem; color: rgba(255,255,255,.35);
}
.ph5-access-arrow {
position: absolute; bottom: 12px; right: 14px;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(255,98,0,.2); border: 1px solid rgba(255,98,0,.3);
display: flex; align-items: center; justify-content: center;
font-size: .48rem; color: #FF6200;
}
/* CTA circulaire */
.ph5-circ-wrap {
position: relative; width: 72px; height: 72px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.ph5-circ-ring {
position: absolute; border-radius: 50%;
border: 1.5px solid rgba(255,98,0,.25);
animation: pulse-ring 2.4s ease-out infinite;
}
.ph5-circ-ring--1 { width: 46px; height: 46px; animation-delay: 0s; }
.ph5-circ-ring--2 { width: 58px; height: 58px; animation-delay: .5s; border-color: rgba(255,98,0,.15); }
.ph5-circ-ring--3 { width: 72px; height: 72px; animation-delay: 1s; border-color: rgba(255,98,0,.07); }
@keyframes pulse-ring {
0% { transform: scale(.92); opacity: 1; }
100% { transform: scale(1.08); opacity: 0; }
}
.ph5-circ-btn {
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, #FF6200, #c94800);
box-shadow: 0 0 16px rgba(255,98,0,.55), inset 0 1px 0 rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
position: relative; z-index: 2;
transition: transform .15s, box-shadow .15s;
}
.ph5-circ-btn:hover { transform: scale(1.07); box-shadow: 0 0 24px rgba(255,98,0,.7); }
.ph5-circ-btn i { font-size: .75rem !important; }
/* CTA partenaire v2 */
.ph5-cta2 {
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: space-between;
background: linear-gradient(135deg, #FF6200 0%, #d94f00 100%);
border-radius: 14px; padding: 14px 16px;
cursor: pointer; margin-bottom: 0;
box-shadow: 0 6px 24px rgba(255,98,0,.4);
transition: transform .15s, box-shadow .15s;
}
.ph5-cta2:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,98,0,.5); }
.ph5-cta2:active { transform: translateY(0); }
.ph5-cta2-shine {
position: absolute; top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,.12), transparent);
transform: skewX(-20deg);
animation: shine 3s infinite;
}
@keyframes shine { 0%,70% { left:-60%; } 100% { left:160%; } }
.ph5-cta2-left { display: flex; align-items: center; gap: 12px; }
.ph5-cta2-ico {
width: 40px; height: 40px; border-radius: 11px;
background: rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
font-size: .85rem; color: #fff; flex-shrink: 0;
}
.ph5-cta2-title { font-size: .78rem; font-weight: 800; color: #fff; line-height: 1.1; }
.ph5-cta2-sub { font-size: .52rem; color: rgba(255,255,255,.65); margin-top: 2px; }
.ph5-cta2-arrow { color: rgba(255,255,255,.6); font-size: .6rem; flex-shrink: 0; }
/* Animation slideUp pour modals */
@keyframes slideUp {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Secteur 2 */
.ph5-sector2 {
background: linear-gradient(145deg, #120930 0%, #0a0620 100%);
border: 1px solid rgba(255,98,0,.18); border-radius: 18px;
padding: 20px 14px 20px; margin-bottom: 6px;
position: relative; overflow: hidden;
}
.ph5-sector2::before {
content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, transparent, rgba(255,98,0,.7), transparent);
box-shadow: 0 0 12px rgba(255,98,0,.4);
}
.ph5-s2-title {
font-size: .62rem; font-weight: 900; color: rgba(255,255,255,.55);
text-transform: uppercase; letter-spacing: .1em; text-align: center;
margin-bottom: 18px;
}
.ph5-perks {
display: flex; justify-content: space-between; gap: 6px; margin-bottom: 0;
}
.ph5-perk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ph5-perk-circle {
width: 52px; height: 52px; border-radius: 50%;
background: rgba(255,98,0,.1);
border: 1.5px solid rgba(255,98,0,.25);
color: var(--primary); font-size: 1.1rem;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(255,98,0,.15);
transition: transform .2s, box-shadow .2s;
}
.ph5-perk-circle:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(255,98,0,.25); }
.ph5-perk-lbl {
font-size: .57rem; font-weight: 800; color: #fff;
text-align: center; line-height: 1.35; text-transform: uppercase; letter-spacing: .05em;
opacity: .82;
}
.ph5-s2-divider { height: 1px; background: rgba(255,255,255,.06); margin: 18px 0; }
.ph5-circles {
display: flex; justify-content: space-around; align-items: center; gap: 8px;
}
.ph5-circle {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
aspect-ratio: 1; max-width: 80px; border-radius: 50%;
background: var(--cc); border: 1.5px solid var(--ccb);
box-shadow: 0 0 16px var(--cc);
justify-content: center; padding: 10px;
}
.ph5-circle-val { font-size: .9rem; font-weight: 900; color: var(--ccl); line-height: 1; }
.ph5-circle-lbl { font-size: .52rem; font-weight: 800; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .05em; text-align: center; line-height: 1.2; }
.ph4-hero {
background: linear-gradient(160deg, #190f3e 0%, #0f0830 100%);
border: 1px solid rgba(255,98,0,.18);
border-radius: 18px; margin-bottom: 14px;
overflow: hidden;
}
.ph4-top {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px 0;
}
.ph4-badge {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(255,98,0,.12); color: var(--primary);
border: 1px solid rgba(255,98,0,.25);
font-size: .58rem; font-weight: 900; letter-spacing: .07em;
padding: 4px 10px; border-radius: 99px; text-transform: uppercase;
}
.ph4-tag {
background: rgba(34,197,94,.12); color: #22c55e;
border: 1px solid rgba(34,197,94,.25);
font-size: .6rem; font-weight: 800;
padding: 3px 10px; border-radius: 99px;
}
.ph4-main {
display: flex; align-items: center; gap: 14px;
padding: 16px 16px 0;
}
.ph4-icon {
width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px;
background: linear-gradient(135deg, var(--primary), #9b3000);
color: #fff; font-size: 1.2rem;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(255,98,0,.4);
}
.ph4-titles { flex: 1; }
.ph4-title { font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.5); }
.ph4-brand { font-size: 1.1rem; font-weight: 900; color: var(--primary); line-height: 1.1; }
.ph4-sub { font-size: .7rem; color: rgba(255,255,255,.3); line-height: 1.5; margin-top: 4px; }
.ph4-divider {
height: 1px; background: rgba(255,255,255,.06); margin: 14px 16px;
}
.ph4-features {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
padding: 0 16px;
}
.ph4-feat {
display: flex; align-items: center; gap: 7px;
font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.55);
}
.ph4-feat i { color: #22c55e; font-size: .65rem; flex-shrink: 0; }
.ph4-stats {
display: flex; align-items: center;
padding: 14px 16px;
}
.ph4-stat { flex: 1; text-align: center; }
.ph4-stat-val { font-size: .95rem; font-weight: 900; color: #fff; }
.ph4-stat-lbl { font-size: .55rem; font-weight: 700; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.ph4-stat-sep { width: 1px; height: 28px; background: rgba(255,255,255,.08); }
/* Avantages — bulles circulaires */
.adv-grid {
display: flex; justify-content: space-between; gap: 8px;
margin-bottom: 4px;
}
.adv-card {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.adv-card-top { display: none; }
.adv-icon {
width: 58px; height: 58px; border-radius: 50%;
background: var(--ab); color: var(--ac); font-size: 1.1rem;
display: flex; align-items: center; justify-content: center;
border: 2px solid color-mix(in srgb, var(--ac) 35%, transparent);
box-shadow: 0 0 18px var(--ab), 0 0 6px var(--ab);
transition: transform .18s, box-shadow .2s;
}
.adv-card:hover .adv-icon { transform: scale(1.08); box-shadow: 0 0 26px var(--ab); }
.adv-title {
font-size: .65rem; font-weight: 900; color: #fff;
text-align: center; line-height: 1.3;
}
.adv-sub { display: none; }
.partner-success-msg {
background: rgba(0,154,68,.08); border: 1.5px solid rgba(0,154,68,.25);
border-radius: var(--radius); padding: 14px 16px;
font-size: .88rem; color: var(--secondary);
display: flex; align-items: center; gap: 10px;
margin-bottom: 20px;
}
/* ── Espace Cabiniste Auth v5 — Premium Card ─────── */
.cs4-box {
margin-top: 6px; border-radius: 22px; overflow: visible;
border: 1px solid rgba(255,98,0,.15);
background: linear-gradient(170deg, #0e0828 0%, #120a30 55%, #090520 100%);
box-shadow: 0 10px 40px rgba(0,0,0,.45);
position: relative;
}
/* Trait lumineux orange en haut */
.cs4-box::before {
content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, transparent, #FF6200 40%, #FF9500 60%, transparent);
box-shadow: 0 0 14px rgba(255,98,0,.55);
pointer-events: none;
}
/* Bannière info — chip interne */
.cs4-banner {
margin: 18px 14px 0;
background: rgba(255,98,0,.08);
border: 1px solid rgba(255,98,0,.18);
border-radius: 12px;
padding: 10px 13px;
display: flex; align-items: flex-start; gap: 9px;
}
.cs4-banner-icon { color: var(--primary); font-size: .78rem; flex-shrink: 0; margin-top: 1px; }
#cs4-banner-txt { font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.6); line-height: 1.45; }
/* Onglets — pill switcher */
.cs4-toggle {
display: flex;
margin: 14px 14px 0;
background: rgba(0,0,0,.35);
border-radius: 13px; padding: 3px;
border: 1px solid rgba(255,255,255,.06);
}
.cs4-tgl {
flex: 1; padding: 9px 8px;
background: none; border: none; border-radius: 10px;
color: rgba(255,255,255,.3); font-size: .74rem; font-weight: 800;
cursor: pointer; font-family: inherit;
transition: all .22s cubic-bezier(.34,1.2,.64,1);
}
.cs4-tgl.active {
background: linear-gradient(135deg, #FF6200, #cc4000);
color: #fff;
box-shadow: 0 3px 14px rgba(255,98,0,.4);
}
/* Zone formulaire */
.cs4-form { padding: 14px 14px 18px; }
/* Carte interne pour le champ téléphone */
.cs4-tel-wrap {
display: flex; align-items: center;
background: rgba(0,0,0,.3);
border: 1.5px solid rgba(255,255,255,.07);
border-radius: 14px; padding: 0 12px; margin-bottom: 12px;
transition: border-color .2s, box-shadow .2s;
}
.cs4-tel-wrap:focus-within {
border-color: rgba(255,98,0,.4);
box-shadow: 0 0 0 3px rgba(255,98,0,.1);
background: rgba(255,98,0,.03);
}
.cs4-flag { font-size: .85rem; padding: 13px 8px 13px 0; font-weight: 700; color: rgba(255,255,255,.65); white-space: nowrap; }
.cs4-sep { width: 1px; height: 18px; background: rgba(255,255,255,.1); margin-right: 10px; }
.cs4-tel { flex: 1; background: none; border: none; outline: none; color: #fff; font-size: .84rem; font-weight: 700; padding: 13px 0; }
.cs4-tel::placeholder { color: rgba(255,255,255,.45); font-weight: 400; }
/* PIN reveal */
.cs4-pin-wrap {
max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px);
transition: max-height .28s ease, opacity .25s ease, transform .25s ease;
margin-bottom: 0;
}
.cs4-pin-wrap.visible { max-height: 120px; opacity: 1; transform: translateY(0); margin-bottom: 12px; }
/* Section PIN encadrée */
.cs4-pin-section {
background: rgba(255,98,0,.04);
border: 1px solid rgba(255,98,0,.13);
border-radius: 13px; padding: 12px 10px 14px;
}
.cs4-pin-lbl {
font-size: .62rem; font-weight: 800; color: rgba(255,255,255,.4);
text-transform: uppercase; letter-spacing: .09em;
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-bottom: 12px;
}
.cs4-pin-lbl i { color: var(--primary); }
/* Bouton */
.cs4-btn {
width: 100%; padding: 13px; border-radius: 14px; border: none;
background: linear-gradient(135deg, #FF6200, #cc3d00);
color: #fff; font-size: .84rem; font-weight: 900;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
font-family: inherit; letter-spacing: .03em;
box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 6px 22px rgba(255,98,0,.35);
transition: transform .15s, box-shadow .15s;
}
.cs4-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 10px 28px rgba(255,98,0,.45); }
.cs4-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,.3), 0 4px 12px rgba(255,98,0,.3); }
.cs4-demo {
margin-top: 10px; font-size: .64rem; color: rgba(255,255,255,.45); text-align: center;
}
.cs4-demo strong { color: rgba(255,255,255,.35); }
.cs4-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cs4-field {
background: rgba(0,0,0,.3); border: 1.5px solid rgba(255,255,255,.07);
border-radius: 12px; padding: 11px 12px; color: #fff;
font-size: .8rem; font-weight: 600; outline: none;
transition: border-color .18s, box-shadow .18s; width: 100%; box-sizing: border-box;
font-family: inherit;
}
.cs4-field::placeholder { color: rgba(255,255,255,.2); }
.cs4-field:focus { border-color: rgba(255,98,0,.4); box-shadow: 0 0 0 3px rgba(255,98,0,.1); }
/* ── Espace Cabiniste Auth v3 — deux secteurs + cercles ─────── */
.cab3-wrap {
margin-top: 6px; border-radius: 20px; overflow: hidden;
border: 1px solid rgba(138,99,255,.2);
}
/* Secteur 1 — très sombre, centré */
.cab3-header {
background: linear-gradient(160deg, #190f3e 0%, #100830 100%);
padding: 24px 20px 0; text-align: center;
display: flex; flex-direction: column; align-items: center;
}
.cab3-orbit {
position: relative; width: 76px; height: 76px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.cab3-orbit-ring {
position: absolute; inset: 0; border-radius: 50%;
border: 1.5px dashed rgba(255,98,0,.3);
animation: orbitSpin 12s linear infinite;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.cab3-orbit-icon {
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, var(--primary), #9b3000);
color: #fff; font-size: 1.2rem;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 8px rgba(255,98,0,.08), 0 4px 16px rgba(255,98,0,.4);
}
.cab3-header-title { font-size: .95rem; font-weight: 900; color: #fff; margin-bottom: 4px; }
.cab3-header-sub { font-size: .7rem; color: rgba(255,255,255,.3); margin-bottom: 18px; }
.cab3-tabs {
display: flex; width: 100%; border-top: 1px solid rgba(255,255,255,.06);
}
.cab3-tab {
flex: 1; padding: 12px 8px; border: none; background: none;
color: rgba(255,255,255,.45); font-size: .75rem; font-weight: 800;
cursor: pointer; border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
}
.cab3-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
/* Secteur 2 — moins sombre */
.cab3-form-area {
background: #130a30;
padding: 22px 18px 18px;
}
.cab3-input-row {
display: flex; align-items: center; gap: 0;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
border-radius: 12px; padding: 0 14px; margin-bottom: 18px;
transition: border-color .18s;
}
.cab3-input-row:focus-within { border-color: rgba(255,98,0,.4); }
.cab3-flag { font-size: .9rem; padding: 12px 0; }
.cab3-code { font-size: .78rem; font-weight: 800; color: rgba(255,255,255,.4); padding: 12px 8px; border-right: 1px solid rgba(255,255,255,.1); margin-right: 10px; }
.cab3-tel { flex: 1; background: none; border: none; outline: none; color: #fff; font-size: .85rem; font-weight: 700; padding: 12px 0; }
.cab3-tel::placeholder { color: rgba(255,255,255,.45); font-weight: 400; }
.cab3-pin-title {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: .6rem; font-weight: 800; color: rgba(255,255,255,.45);
text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
}
.cab3-pin-title span {
flex: 1; height: 1px; background: rgba(255,255,255,.08);
}
.cab3-pin-row {
display: flex; justify-content: center; gap: 14px; margin-bottom: 20px;
}
.cab3-pin {
width: 52px; height: 52px; border-radius: 50%;
background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
color: #fff; text-align: center; font-size: 1.4rem; font-weight: 900; outline: none;
transition: border-color .18s, background .18s, box-shadow .18s;
}
.cab3-pin:focus {
border-color: var(--primary); background: rgba(255,98,0,.1);
box-shadow: 0 0 14px rgba(255,98,0,.3);
}
.cab3-btn {
width: 100%; padding: 13px; border-radius: 12px; border: none;
background: linear-gradient(135deg, var(--primary), #cc4400);
color: #fff; font-size: .85rem; font-weight: 800;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 4px 16px rgba(255,98,0,.3); transition: opacity .15s;
}
.cab3-btn:hover { opacity: .88; }
.cab3-demo {
margin-top: 14px; font-size: .67rem; color: rgba(255,255,255,.45); text-align: center;
}
.cab3-demo strong { color: rgba(255,255,255,.38); }
.cab3-name-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
.cab3-name-field {
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; padding: 11px 12px; color: #fff;
font-size: .82rem; font-weight: 600; outline: none; transition: border-color .18s;
}
.cab3-name-field::placeholder { color: rgba(255,255,255,.2); }
.cab3-name-field:focus { border-color: rgba(255,98,0,.4); }
/* ── Espace Cabiniste Auth v2 — deux secteurs + cercles ─────── */
.cab2-box {
margin-top: 6px; border-radius: 20px; overflow: hidden;
border: 1px solid rgba(255,98,0,.18);
}
/* Secteur 1 — sombre */
.cab2-s1 {
background: linear-gradient(160deg, #190f3e 0%, #0f0830 100%);
padding: 18px 18px 0;
}
.cab2-s1-top {
display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.cab2-s1-circle {
width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--primary), #9b3000);
color: #fff; font-size: 1.1rem;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 6px rgba(255,98,0,.1), 0 4px 14px rgba(255,98,0,.35);
}
.cab2-s1-title { font-size: .9rem; font-weight: 900; color: #fff; }
.cab2-s1-sub { font-size: .7rem; color: rgba(255,255,255,.3); margin-top: 2px; }
.cab2-tabs {
display: flex; gap: 0;
}
.cab2-tab {
flex: 1; padding: 11px 8px; border: none; background: none;
color: rgba(255,255,255,.3); font-size: .75rem; font-weight: 800;
cursor: pointer; border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
}
.cab2-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
/* Secteur 2 — moins sombre */
.cab2-s2 {
background: #2a1e6a;
padding: 20px 18px 18px;
}
.cab2-field-wrap {
display: flex; align-items: center;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
border-radius: 12px; padding: 0 12px; margin-bottom: 16px;
transition: border-color .18s;
}
.cab2-field-wrap:focus-within { border-color: rgba(255,98,0,.45); }
.cab2-prefix { font-size: .78rem; color: rgba(255,255,255,.4); white-space: nowrap; padding: 12px 0; }
.cab2-prefix-sep { width: 1px; height: 16px; background: rgba(255,255,255,.1); margin: 0 10px; }
.cab2-input {
flex: 1; background: none; border: none; outline: none;
color: #fff; font-size: .85rem; font-weight: 700; padding: 12px 0;
}
.cab2-input::placeholder { color: rgba(255,255,255,.45); font-weight: 400; }
.cab2-pin-label {
font-size: .6rem; font-weight: 800; color: rgba(255,255,255,.45);
text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; text-align: center;
}
.cab2-pin-row {
display: flex; gap: 12px; justify-content: center; margin-bottom: 18px;
}
.cab2-pin-dot {
width: 50px; height: 50px; border-radius: 50%;
background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.12);
color: #fff; text-align: center; font-size: 1.3rem; font-weight: 900; outline: none;
transition: border-color .18s, background .18s, box-shadow .18s;
}
.cab2-pin-dot:focus {
border-color: var(--primary); background: rgba(255,98,0,.08);
box-shadow: 0 0 12px rgba(255,98,0,.25);
}
.cab2-btn {
width: 100%; padding: 13px; border-radius: 12px; border: none;
background: linear-gradient(135deg, var(--primary), #cc4400);
color: #fff; font-size: .85rem; font-weight: 800;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 4px 16px rgba(255,98,0,.3); transition: opacity .15s;
}
.cab2-btn:hover { opacity: .88; }
.cab2-demo {
margin-top: 14px; font-size: .67rem; color: rgba(255,255,255,.45); text-align: center;
}
.cab2-demo strong { color: rgba(255,255,255,.38); }
.cab2-row2 {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
.cab2-field {
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; padding: 11px 12px; color: #fff;
font-size: .82rem; font-weight: 600; outline: none; transition: border-color .18s;
}
.cab2-field::placeholder { color: rgba(255,255,255,.2); }
.cab2-field:focus { border-color: rgba(255,98,0,.45); }
/* ── Espace Cabiniste Auth ───────────────────────────────────── */
.cab-auth-box {
margin-top: 20px;
background: linear-gradient(160deg, #190f3e 0%, #0f0830 100%);
border: 1px solid rgba(255,98,0,.18);
border-radius: 20px; overflow: hidden;
}
.cab-tabs {
display: flex; padding: 6px; gap: 6px;
background: rgba(0,0,0,.2); margin: 16px 16px 0;
border-radius: 12px;
}
.cab-tab {
flex: 1; padding: 9px 8px; border: none; background: none;
color: rgba(255,255,255,.3); font-size: .75rem; font-weight: 800;
cursor: pointer; border-radius: 8px;
transition: color .15s, background .15s;
}
.cab-tab.active {
background: var(--primary); color: #fff;
box-shadow: 0 2px 10px rgba(255,98,0,.35);
}
.cab-panel {
display: flex; flex-direction: column;
padding: 20px 18px 22px; gap: 0;
}
.cab-panel-icon { display: none; }
.cab-panel-title {
font-size: .9rem; font-weight: 900; color: #fff;
margin-bottom: 4px;
}
.cab-panel-sub {
font-size: .72rem; color: rgba(255,255,255,.3);
margin-bottom: 18px; line-height: 1.5;
}
.cab-input-wrap {
display: flex; align-items: center;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; padding: 0 12px; width: 100%; margin-bottom: 14px;
transition: border-color .18s;
}
.cab-input-wrap:focus-within { border-color: rgba(255,98,0,.5); }
.cab-prefix { font-size: .78rem; color: rgba(255,255,255,.4); white-space: nowrap; padding: 12px 0; }
.cab-prefix-sep { width: 1px; height: 18px; background: rgba(255,255,255,.1); margin: 0 10px; }
.cab-input {
flex: 1; background: none; border: none; outline: none;
color: #fff; font-size: .85rem; font-weight: 700; padding: 12px 0;
}
.cab-input::placeholder { color: rgba(255,255,255,.45); font-weight: 400; }
.cab-pin-label {
font-size: .6rem; font-weight: 800; color: rgba(255,255,255,.45);
text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px;
}
.cab-pin-row {
display: flex; gap: 8px; justify-content: center; margin-bottom: 18px;
}
.cab-pin-row .pin-box {
flex: 1; max-width: 52px; height: 48px; border-radius: 10px;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
color: #fff; text-align: center; font-size: 1.2rem; font-weight: 900; outline: none;
transition: border-color .18s, background .18s;
}
.cab-pin-row .pin-box:focus { border-color: var(--primary); background: rgba(255,98,0,.07); }
.cab-submit-btn {
width: 100%; padding: 13px; border-radius: 10px; border: none;
background: linear-gradient(135deg, var(--primary), #cc4400);
color: #fff; font-size: .85rem; font-weight: 800;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 4px 14px rgba(255,98,0,.3); transition: opacity .15s;
}
.cab-submit-btn:hover { opacity: .88; }
.cab-demo {
margin-top: 14px; font-size: .67rem; color: rgba(255,255,255,.45); text-align: center;
}
.cab-demo strong { color: rgba(255,255,255,.38); }
.cab-row-2 {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
.cab-field {
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; padding: 11px 12px; color: #fff;
font-size: .82rem; font-weight: 600; outline: none; transition: border-color .18s;
}
.cab-field::placeholder { color: rgba(255,255,255,.2); }
.cab-field:focus { border-color: rgba(255,98,0,.5); }
/* ══════════════════════════════════════════════════════════════
LAYOUT APP MOBILE (bottom nav)
══════════════════════════════════════════════════════════════ */
/* Topnav : pill utilisateur */
.cn-user-pill {
display: flex; align-items: center; gap: 8px;
}
.cup-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: var(--primary); color: #fff;
font-size: .75rem; font-weight: 800; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.cup-info { line-height: 1.25; }
.cup-name { font-size: .82rem; font-weight: 700; color: var(--gray-800); }
.cup-role { font-size: .66rem; color: var(--gray-500); }
.cup-logout {
width: 32px; height: 32px; border: none; background: none;
color: var(--gray-400); cursor: pointer;
border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
transition: var(--transition);
}
.cup-logout:hover { background: var(--gray-100); color: var(--primary); }
/* Page principale */
.client-page {
max-width: 720px; margin: 0 auto;
padding: 12px 20px 110px;
min-height: calc(100vh - 62px);
}
@media (max-width: 600px) { .client-page { padding: 10px 12px 110px; } }
/* Accueil : la carte de solde est le tout premier élément — on retire le
padding-top pour qu'elle touche directement le topnav, sans quoi le
bandeau (couleur variable selon le thème choisi) laisse un liseré du
fond de page visible entre lui et le topnav. */
body.on-home .client-page { padding-top: 0; }
/* Carte solde en haut */
#balance-header { margin-bottom: 8px; }
.bh-card {
background: linear-gradient(135deg, var(--primary) 0%, #cc4e00 100%);
border-radius: var(--radius-lg);
padding: 22px 22px;
display: flex; align-items: center; justify-content: space-between; gap: 14px;
box-shadow: 0 6px 24px rgba(255,98,0,.35);
}
.bh-info { min-width: 0; }
.bh-greeting { font-size: .78rem; color: rgba(255,255,255,.75); font-weight: 600; margin-bottom: 3px; }
.bh-amount {
font-size: 1.7rem; font-weight: 900; color: #fff;
line-height: 1.1; margin-bottom: 2px; white-space: nowrap;
}
.bh-label { font-size: .68rem; color: rgba(255,255,255,.6); }
.bh-recharge-btn {
flex-shrink: 0;
background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.4);
color: #fff; font-size: .82rem; font-weight: 700;
padding: 9px 18px; border-radius: 20px; cursor: pointer;
display: flex; align-items: center; gap: 6px;
transition: background .18s;
}
.bh-recharge-btn:hover { background: rgba(255,255,255,.32); }
/* Bottom navigation — bulle flottante */
.bottom-nav {
position: fixed; bottom: 14px; z-index: 200;
left: 50%; transform: translateX(-50%) translateY(0);
width: calc(100% - 28px); max-width: 520px;
background: #fff;
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-radius: 36px;
border: 1.5px solid rgba(22,163,74,.2);
border-top: 3px solid #16A34A;
display: flex; align-items: center;
box-shadow: 0 10px 30px rgba(0,0,0,.14);
padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
transition: transform .28s ease, opacity .28s ease;
}
/* Masquée pendant le défilement (haut ou bas), réapparaît à l'arrêt */
.bottom-nav--scroll-hidden {
transform: translateX(-50%) translateY(140%);
opacity: 0;
pointer-events: none;
}
.bn-item {
flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 4px;
padding: 4px 2px;
color: var(--gray-500); cursor: pointer;
font-size: .57rem; font-weight: 600; letter-spacing: .1px;
transition: color .25s; position: relative;
text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* Cercle autour de l'icône */
.bn-item i {
font-size: 1rem;
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.04);
border: 1.5px solid rgba(0,0,0,.08);
transition: all .28s cubic-bezier(.34,1.56,.64,1);
}
.bn-item:active i { transform: scale(.82); }
/* Cercles pastel par icône (inactif) : évite le gris terne uniforme,
chacune garde un repère couleur propre. L'état actif (orange, plus
bas) reste prioritaire grâce à :not(.active). Teintes assombries pour
rester lisibles sur le fond blanc de .bottom-nav (demande explicite). */
.bn-item:not(.active) i.bn-ico--indigo { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.25); color: #4F46E5; }
.bn-item:not(.active) i.bn-ico--violet { background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.25); color: #9333EA; }
.bn-item:not(.active) i.bn-ico--teal { background: rgba(20,184,166,.14); border-color: rgba(20,184,166,.28); color: #0D9488; }
/* Actif : cercle orange brillant surélevé */
.bn-item.active { color: var(--primary); }
.bn-item.active i {
background: linear-gradient(145deg, #FF6200, #cc4200);
border-color: transparent;
color: #fff;
box-shadow: 0 0 0 4px rgba(255,98,0,.18), 0 4px 18px rgba(255,98,0,.55);
transform: translateY(-4px) scale(1.08);
}
.bn-item.active span { color: var(--primary); font-weight: 700; }
/* Point lumineux sous l'item actif */
.bn-item.active::after {
content: '';
position: absolute; bottom: 0;
width: 4px; height: 4px; border-radius: 50%;
background: #FF6200;
box-shadow: 0 0 8px rgba(255,98,0,.8);
}
.bn-item:not(.active)::after { display: none; }
.bn-item::before { display: none; }
/* WhatsApp — grand cercle vert surélevé */
.bn-whatsapp { gap: 4px; }
.bn-wa-circle {
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(145deg, var(--primary), #cc4400);
color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 3px rgba(255,98,0,.18), 0 4px 16px rgba(255,98,0,.5);
margin-top: 0;
border: 1.5px solid rgba(255,255,255,.15);
transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s;
}
.bn-whatsapp:hover .bn-wa-circle { transform: scale(1.08); }
.bn-whatsapp span { color: var(--gray-500); font-weight: 600; }
.bn-wa-circle i {
width: auto; height: auto; border-radius: 0;
background: none; border: none; transform: none;
display: inline; font-size: 1.05rem;
}
/* Badge NEW */
.bn-badge {
position: absolute; top: 0; right: calc(50% - 28px);
background: linear-gradient(135deg, #FF6200, #cc4400);
color: #fff;
font-size: .48rem; font-weight: 900; padding: 2px 5px;
border-radius: 99px; letter-spacing: .5px; pointer-events: none;
box-shadow: 0 2px 8px rgba(255,98,0,.4);
}
/* ── Carte solde + actions rapides (home-balance-card) ──────── */
.hbc-balance {
background: linear-gradient(135deg, var(--primary) 0%, #cc4e00 100%);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: 24px 22px 18px; color: #fff;
}
.hbc-balance--guest { padding: 20px 22px 18px; }
.hbc-bal-label { font-size: .78rem; font-weight: 600; opacity: .82; margin-bottom: 6px; }
.hbc-bal-label strong { color: #fff; }
.hbc-bal-amount { font-size: 2.1rem; font-weight: 900; line-height: 1.1; margin-bottom: 3px; }
.hbc-bal-sub { font-size: .7rem; opacity: .65; }
/* Portefeuille invité */
.hbc-wallet-top {
display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.hbc-wallet-icon-wrap {
width: 38px; height: 38px; border-radius: 12px;
background: rgba(255,255,255,.22); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.hbc-wallet-tag {
font-size: .75rem; font-weight: 700; opacity: .8; letter-spacing: .5px; text-transform: uppercase;
}
.hbc-wallet-row { margin-bottom: 18px; }
.hbc-wallet-locked-amount {
display: flex; align-items: baseline; gap: 8px; margin-top: 2px;
}
.hbc-locked-dots {
font-size: 1.6rem; font-weight: 900; letter-spacing: 4px; line-height: 1;
color: rgba(255,255,255,.55);
}
.hbc-locked-curr {
font-size: .85rem; font-weight: 700; opacity: .55;
}
.hbc-unlock-btn {
width: 100%; padding: 11px; border-radius: 12px;
background: #fff; color: var(--primary); border: none;
font-size: .83rem; font-weight: 800; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: opacity .18s; box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.hbc-unlock-btn:hover { opacity: .9; }
.hbc-actions {
display: flex; padding: 12px 8px 4px; gap: 4px;
background: #fff; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
border: 1.5px solid var(--frame-green); border-top: none;
}
.hbc-btn {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 10px 4px 12px;
background: transparent; border: none; cursor: pointer;
font-size: .7rem; font-weight: 700; color: var(--gray-600);
transition: background .15s; border-radius: var(--radius-md);
}
.hbc-btn:active { background: #fff3ea; }
.hbc-btn-icon {
width: 42px; height: 42px; border-radius: 13px;
display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.hbc-btn-locked { opacity: .45; }
/* ── Wallet connecté — décorations ──────────────────────────── */
.hbc-balance--user {
background: linear-gradient(140deg, #FF6200 0%, #ff8c00 55%, #e05d00 100%);
position: relative; overflow: hidden;
}
.hbc-deco-circle {
position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); pointer-events: none;
}
.hbc-deco-1 { width: 180px; height: 180px; top: -70px; right: -50px; }
.hbc-deco-2 { width: 110px; height: 110px; bottom: -40px; right: 50px; }
.hbc-chip {
margin-left: auto; background: rgba(255,255,255,.22);
border: 1px solid rgba(255,255,255,.4); border-radius: 20px;
padding: 4px 12px; font-size: .7rem; font-weight: 800; color: #fff;
display: flex; align-items: center; gap: 5px; letter-spacing: .3px;
}
/* ── Sections home ───────────────────────────────────────────── */
.home-section {
margin-top: 8px;
margin-bottom: 0;
background: linear-gradient(150deg, #0d1a3d 0%, #0a1330 55%, #060a1c 100%);
border: 1.5px solid rgba(255,98,0,.22);
border-top: 2px solid rgba(255,98,0,.45);
border-radius: var(--radius-lg);
padding: 16px 14px;
box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,98,0,.08) inset;
}
#home-fidelite {
background: linear-gradient(145deg, #17103a 0%, #1e1248 55%, #120c2c 100%);
border-color: rgba(255,98,0,.22);
border-top-color: rgba(255,98,0,.35);
box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,98,0,.08) inset;
padding: 10px 16px;
border-radius: var(--radius-lg);
}
/* Réclamation + Service clients (section) */
.rcp-card { background: none; box-shadow: none; border: none; margin-top: -10px; }
/* Espace excessif entre "Recharge de masse" et "FAQ" juste en dessous
(demande explicite du 25/08 : "supprime l'espace blanc") — la carte
.rcp-bulk-card et le wrapper .home-section de la FAQ cumulaient
chacun leur propre padding/margin ; resserré ici sans toucher aux
autres sections .home-section. */
#rcp-faq-section { margin-top: -24px; padding-top: 8px; }
/* Même resserrement au-dessus de "Mes commandes programmées" (demande
explicite du 25/08 : "fais pareil"), entre elle et le tunnel de
commande juste au-dessus — même mécanisme, scopé à cette seule
section. Ordre des deux cartes inversé (demande explicite) : "Mes
commandes programmées" est désormais la première, "Récharge en masse"
la seconde — voir index.html. Titre en bleu marine de marque
(#0F0A2E, même teinte que .bottom-nav) pour le distinguer du titre
noir de la carte "Récharge en masse" (.rcp-bulk-title, non touché
ailleurs). */
#rcp-mcp-section { margin-top: -62px; padding-top: 8px; }
#rcp-mcp-section .rcp-bulk-title { color: #0F0A2E; }
/* Rapproche "Récharge en masse" de ce qui la précède immédiatement au-
dessus — réglage de base, utilisé en mode "Maintenant" (Chap Chap
juste au-dessus, "Mes commandes programmées" masquée). */
#rcp-bulk-section { margin-top: -43px; }
/* Réglage spécifique au mode "Plus tard" (demande explicite :
"uniquement au niveau de plus tard, rapproche les deux") — les deux
contextes ci-dessus/ci-dessous partageaient la même règle jusqu'ici,
ce qui resserrait aussi Chap Chap/"Récharge en masse" en mode
"Maintenant" à chaque ajustement voulu seulement ici ; body.order-
mode-later posée par setOrderMode() (js/client.js) permet de les
régler indépendamment. */
body.order-mode-later #rcp-bulk-section { margin-top: -55px; }
/* Questions fréquentes — modèle "cartes numérotées" (demande explicite :
"propose un autre modèle plus beau") : chaque question est sa propre
carte séparée, avec un grand numéro en filigrane dans le coin — plus
aéré et éditorial qu'une liste compacte à lignes divisées. */
.rcp-faq2-eyebrow {
display: block; width: fit-content; margin: 0 auto 10px;
font-size: .58rem; font-weight: 800; color: #0F0A2E;
background: rgba(15,10,46,.08); border-radius: 999px;
padding: 3px 10px; text-transform: uppercase; letter-spacing: .08em;
}
.rcp-faq2-hd {
font-size: 1.2rem; font-weight: 900; color: #16121F; text-align: center;
width: fit-content; max-width: 100%; margin: 0 auto 14px; position: relative;
}
/* Même soulignement "trait curviligne" bleu marine que « Reprendre
rapidement » (demande explicite) — vaguelette SVG répétée sous le titre. */
.rcp-faq2-hd::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 7px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='7' viewBox='0 0 36 7'%3E%3Cpath d='M1 4 Q 6 0.5 10 4 T 19 4 T 28 4 T 36 4' fill='none' stroke='%230F0A2E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center;
background-size: auto 7px;
}
.rcp-faq2-sub { font-size: .78rem; color: var(--gray-500); text-align: center; line-height: 1.55; margin-bottom: 22px; }
.rcp-faq2-list { display: flex; flex-direction: column; gap: 10px; margin: 0 -10px; }
@media (max-width: 600px) { .rcp-faq2-list { margin: 0 -8px; } }
.rcp-faq2-row {
position: relative; overflow: hidden;
background: #fff;
border: 1px solid rgba(0,0,0,.07);
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,.05);
padding: 0 16px;
}
.rcp-faq2-num {
position: absolute; top: 6px; right: 14px;
font-size: 2rem; font-weight: 900; color: rgba(15,10,46,.08);
line-height: 1; pointer-events: none;
}
.rcp-faq2-q-row {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
background: none; border: none; cursor: pointer;
padding: 16px 0; font-family: var(--font); text-align: left;
}
.rcp-faq2-q { font-size: .84rem; font-weight: 700; color: #16121F; letter-spacing: .005em; }
.rcp-faq2-toggle-wrap {
flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
background: rgba(15,10,46,.08);
display: flex; align-items: center; justify-content: center;
transition: background .2s;
}
.rcp-faq2-toggle { color: #0F0A2E; font-size: .68rem; transition: transform .25s ease; }
.rcp-faq2-row.open .rcp-faq2-toggle-wrap { background: #0F0A2E; }
.rcp-faq2-row.open .rcp-faq2-toggle { color: #fff; transform: rotate(45deg); }
.rcp-faq2-a { position: relative; z-index: 1; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.rcp-faq2-row.open .rcp-faq2-a { max-height: 200px; }
.rcp-faq2-a-inner { font-size: .78rem; color: var(--gray-500); line-height: 1.6; padding: 0 0 16px; }
/* Avis clients — modèle "une carte + pastilles", agrandi et sophistiqué
(demande explicite : "agrandir la taille et propose un modèle très
esthétique et professionnel") : carte plus spacieuse, liseré accent,
grand guillemet décoratif en filigrane, typographie plus affirmée —
même recette de défilement que le carrousel promo existant
(.promo-carousel-wrap/_promoCarouselInit(), js/client.js). */
.rcp-reviews-hd { font-size: 1.05rem; font-weight: 800; color: #16121F; margin-bottom: 12px; }
.rcp-reviews-carousel { overflow: hidden; border-radius: 20px; margin: 0 -10px; }
@media (max-width: 600px) { .rcp-reviews-carousel { margin: 0 -8px; } }
.rcp-reviews-track {
display: flex;
transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.rcp-review-card {
position: relative; overflow: hidden;
flex: 0 0 100%; min-width: 0;
min-height: 170px;
background: #fff;
border: 1px solid rgba(0,0,0,.06);
border-radius: 20px;
box-shadow: 0 14px 32px rgba(0,0,0,.09);
padding: 20px 18px;
display: flex; flex-direction: column;
}
.rcp-review-quote {
position: absolute; top: 14px; right: 20px;
font-size: 2.6rem; color: rgba(15,10,46,.08);
line-height: 1; pointer-events: none;
}
.rcp-review-title { position: relative; font-size: .88rem; font-weight: 800; color: #16121F; letter-spacing: .01em; margin-bottom: 8px; }
.rcp-review-text { position: relative; font-size: .74rem; color: var(--gray-500); line-height: 1.55; margin-bottom: 18px; }
.rcp-review-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.06); }
.rcp-review-avatar {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, #1B234F, #0F0A2E);
color: #fff; font-size: .76rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(15,10,46,.3);
}
.rcp-review-name { font-size: .74rem; font-weight: 800; color: #16121F; margin-bottom: 2px; }
.rcp-review-stars { font-size: .66rem; color: #16A34A; letter-spacing: 1.5px; }
.rcp-reviews-dots {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 10px;
}
.rcp-reviews-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(15,10,46,.2);
transition: background .25s, width .25s;
}
.rcp-reviews-dot.active {
width: 16px; border-radius: 3px; background: #0F0A2E;
}
/* Recharge de masse (professionnels) — modèle "accordéon repliable"
(demande explicite : "je veux un modèle qui s'ouvre") : seuls l'icône
et le titre sont visibles par défaut, le clic déplie la description,
les cas d'usage et le bouton de contact. */
.rcp-bulk-card {
background: #fff;
border: 1.5px solid rgba(15,10,46,.25);
box-shadow: 0 8px 24px rgba(0,0,0,.06);
border-radius: 20px;
margin: 12px -12px;
overflow: hidden;
}
@media (max-width: 600px) { .rcp-bulk-card { margin: 12px -6px; } }
.rcp-bulk-head {
display: flex; align-items: center; gap: 14px; width: 100%;
background: none; border: none; cursor: pointer;
padding: 14px 16px; min-height: 68px; box-sizing: border-box;
font-family: var(--font); text-align: left;
}
.rcp-bulk-head-text { flex: 1; min-width: 0; }
.rcp-bulk-ico {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 50%;
background: #000; color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: .92rem;
}
.rcp-bulk-title { font-size: .8rem; font-weight: 900; color: #16121F; }
.rcp-bulk-sub { font-size: .62rem; color: var(--gray-500); margin-top: 2px; }
.rcp-bulk-chevron { color: var(--gray-500); font-size: .66rem; flex-shrink: 0; transition: transform .25s ease; }
.rcp-bulk-card.open .rcp-bulk-chevron { transform: rotate(180deg); }
.rcp-bulk-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.rcp-bulk-card.open .rcp-bulk-body { max-height: 560px; }
/* Largeur réduite de 2 px (demande explicite). */
#rcp-bulk-section .rcp-bulk-card { margin-left: -11px; margin-right: -11px; }
.rcp-bulk-body-inner { padding: 0 14px 16px; }
.rcp-bulk-desc { font-size: .78rem; color: #16121F; font-weight: 600; margin: 0 0 12px; }
/* Autre modèle d'organisation (demande explicite) : les publics cibles
passent d'une liste en 2 colonnes à une rangée d'étiquettes "pilule" qui
s'enroulent naturellement. */
.rcp-bulk-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rcp-bulk-item {
display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
background: rgba(15,10,46,.05);
border: 1px solid rgba(15,10,46,.1);
border-radius: 999px; padding: 7px 12px;
font-size: .72rem; font-weight: 700; color: #16121F;
}
.rcp-bulk-item i { color: #0F0A2E; font-size: .72rem; flex-shrink: 0; }
.rcp-bulk-cta {
background: none;
border-radius: 14px;
padding: 0;
}
.rcp-bulk-cta p { font-size: .78rem; font-weight: 700; color: #0F0A2E; margin: 0 0 12px; }
.rcp-bulk-cta-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; box-sizing: border-box;
background: #000; color: #fff;
font-size: .8rem; font-weight: 800;
padding: 13px; border-radius: 999px;
text-decoration: none;
}
/* Chiffres de confiance — modèle "simple, libellé en haut, fond blanc"
(demande explicite), réutilise directement .asc-stats/.asc-stat/etc.
déjà utilisées dans la Vitrine app plus bas dans la page, avec des
couleurs adaptées au fond clair (surcharges scopées ci-dessous). */
.rcp-stats-card {
background: none;
border: none;
box-shadow: none;
padding: 0 0 24px;
margin: 12px 0;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.rcp-stats-hd { font-size: 1rem; font-weight: 800; color: #16121F; text-align: center; margin-bottom: 16px; }
.rcp-stats-card .asc-stat-val { font-size: 1.7rem; color: #0F0A2E; }
.rcp-stats-card .asc-stat-lbl { font-size: .62rem; color: var(--gray-500); }
.rcp-stats-card .asc-stat + .asc-stat::before { background: rgba(0,0,0,.1); }
/* Appel à l'action "Télécharger l'app" — reproduction textuelle de la
référence fournie (bannière CTA SendChap, demande explicite : "je veux
textuellement ce modèle") adaptée au contexte KBINE PLUS : fond pêche,
texte à gauche, grand logo à droite. */
.rcp-cta-card {
background: none;
border: none;
box-shadow: none;
padding: 12px 0;
margin: 0 0 28px;
}
.rcp-cta-row { display: flex; align-items: center; gap: 16px; }
.rcp-cta-text { flex: 1; min-width: 0; text-align: left; padding-left: 10px; }
/* Titre facon vitrine (repris du heros de l'Espace web) : amorce bleu
marine, puis « en » petit + « Côte d'Ivoire » en tres grand orange pur. */
.rcp-cta-title { font-weight: 900; color: #0F0A2E; margin-bottom: 12px; line-height: 1.1; letter-spacing: -.02em; }
.rcp-cta-lead { display: block; font-size: clamp(1.15rem, 4.6vw, 1.5rem); }
.rcp-cta-geo { display: block; margin-top: 3px; }
.rcp-cta-en { font-size: .58em; font-weight: 800; color: #8B879C; vertical-align: middle; margin-right: .14em; }
.rcp-cta-ci { font-size: clamp(1.85rem, 7.4vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; color: #FF6200; vertical-align: middle; }
.rcp-cta-desc {
font-size: .8rem; font-weight: 450; color: #5B5F6E;
line-height: 1.7; letter-spacing: .005em; margin: 0 0 16px;
}
.rcp-cta-btn {
display: inline-block; text-decoration: none;
background: #0F0A2E; color: #fff;
font-size: .78rem; font-weight: 800;
padding: 12px 22px; border-radius: 999px;
}
.rcp-cta-caption { font-size: .64rem; color: var(--gray-500); margin-top: 12px; }
.rcp-cta-art { flex: 0 0 44%; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.rcp-cta-logo-big {
width: 100%; max-width: 110px; height: auto; object-fit: contain;
}
.rcp-cta-logo-big--c { max-width: 140px; }
.home-section--bare {
background: none;
border: none;
box-shadow: none;
margin-top: -4px;
}
/* Demande explicite : à partir de "Rejoignez-nous dès maintenant sur"
jusqu'au bas de la page (jusque-là fond blanc de .client-page/body qui
transparaissait, .home-section--light étant elle-même transparente), le
fond doit être bleu marine — même teinte que .bottom-nav (#0F0A2E), qui
flotte par-dessus. padding-bottom généreux + margin-bottom négatif
annulant la réserve de 110px de .client-page (place pour le nav flottant)
: le bloc s'étend visuellement jusqu'à la limite basse réelle de la page,
quel que soit son contenu. margin-left/right négatif : annule le padding
horizontal de .client-page (20px desktop/12px mobile, voir media query
ci-dessous) pour retrouver le même surplomb de 14px de chaque côté que
.bottom-nav (width: calc(100% - 28px)) — "occupe tout l'espace comme la
barre flottante". */
.home-section--light {
position: relative;
overflow: hidden;
background: linear-gradient(150deg, #141B45 0%, #0A0A22 100%);
border: none;
box-shadow: none;
border-radius: 10px 10px 0 0;
padding: 18px 20px 110px;
margin: -20px -20px -110px;
}
/* Liseré d'accent en tête du pied de page (demande explicite : "propose
un modèle professionnel") — fine ligne dégradée, touche premium plutôt
qu'une coupure franche entre la carte précédente et le fond marine. */
.home-section--light::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(to right, transparent, rgba(255,98,0,.7), transparent);
}
@media (max-width: 600px) {
.home-section--light { margin-left: -12px; margin-right: -12px; padding-left: 14px; padding-right: 14px; }
}
/* Pied de page — modèle inspiré d'une référence fournie (Jèko), adapté au
contexte KBINE PLUS, disposition plus soignée (demande explicite :
"dispose pour avoir un modèle plus esthétique et plus professionnel") :
séparateur entre le bloc marque et les colonnes, titres de colonne avec
accent, liens avec icône repère — empilés verticalement (écran étroit)
plutôt qu'en rangée comme la référence desktop. */
/* Disposition "marque à gauche, réseaux à droite" (demande explicite :
"propose moi autre manière de disposition") — entête façon magazine :
logo+nom et icônes sociales sur la même ligne, tout aligné à gauche
en dessous, plutôt que tout centré. */
.ftr-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left; }
.ftr-masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ftr-brand-top { display: flex; align-items: center; gap: 11px; }
.ftr-logo {
width: 30px; height: 30px; border-radius: 9px;
background: #fff; object-fit: contain; padding: 6px;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.ftr-brand-name { font-size: 1.05rem; font-weight: 900; color: #fff; letter-spacing: .04em; }
.ftr-tagline { font-size: .76rem; color: rgba(255,255,255,.55); line-height: 1.6; margin: 0; max-width: 340px; }
/* Modèle "façon Jumia" (demande explicite : "je veux ce modèle") —
colonnes de liens avec titre en majuscules gras, liens simples en
dessous, plutôt qu'une ligne unique de liens séparés par des points.
Panneau blanc distinct (demande explicite : "fonds bleu marine et
blanc", même esprit que .cqt-band/.cqt-wrapper : bandeau marine en
tête, corps blanc en dessous) plutôt qu'un fond marine uniforme. */
/* Zone unique bleu marine (demande explicite : "rends la zone blanche en
bleu marine et les écritures en blanc") — le panneau ne fait plus que
laisser transparaître le fond marine dégradé de .home-section--light,
sans coin arrondi ni marge haute qui créerait une cassure. */
.ftr-white-panel {
background: transparent;
border-radius: 0;
margin: 0 -20px -110px;
padding: 12px 20px 48px;
}
@media (max-width: 600px) { .ftr-white-panel { margin-left: -12px; margin-right: -12px; padding-left: 14px; padding-right: 14px; } }
/* Logotype "KBINE PLUS" en tête du pied de page (demande explicite) —
« KBINE » plein blanc, « PLUS » en contour seul, sur le fond marine. */
.ftr-wordmark {
text-align: center;
font-family: var(--font);
font-weight: 900;
font-size: clamp(1.7rem, 8vw, 2.4rem);
line-height: 1;
letter-spacing: .01em;
color: #fff;
margin: 4px 0 16px;
}
.ftr-wordmark-outline {
color: transparent;
-webkit-text-stroke: 1.4px #fff;
text-stroke: 1.4px #fff;
}
/* Modèle compact : une seule ligne de liens qui reflue, puis icônes
sociales + copyright sur une ligne séparée par un filet — remplace
l'ancien modèle "façon Jumia" à 3 colonnes (titres + gros icônes),
bien plus haut, pour réduire nettement la hauteur du panneau blanc
(demande explicite). */
.ftr-links-row {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 5px 14px; margin-bottom: 10px;
}
.ftr-links-row a {
font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.82);
text-decoration: none; transition: color .15s;
}
.ftr-links-row a:hover { color: #fff; }
.ftr-bottom-row {
display: flex; flex-direction: column; align-items: center; gap: 7px;
padding-top: 8px; border-top: 1px solid rgba(255,255,255,.15);
}
.ftr-social-sm { display: flex; gap: 8px; }
.ftr-social-sm-btn {
width: 26px; height: 26px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: .72rem; color: #fff;
transition: transform .15s;
}
.ftr-social-sm-btn:hover { transform: translateY(-2px); }
.ftr-social-sm-btn--tt { background: #000; border: 1px solid rgba(255,255,255,.18); }
.ftr-social-sm-btn--wa { background: linear-gradient(135deg, #25D366, #128C7E); }
/* .asc-copyright porte déjà sa propre bordure/marge de séparation (voir
plus bas) — ici cette séparation est déjà assurée par .ftr-bottom-row,
la dupliquer donnerait un double filet/espace. */
.ftr-bottom-row .asc-copyright { margin-top: 0; padding-top: 0; border-top: none; font-size: .62rem; color: rgba(255,255,255,.7); }
/* ── Vitrine app (façon fiche App Store) ──────────────────────── */
/* Occupe toute la largeur comme .bottom-nav (demande explicite) : même
technique que .home-section--light plus bas dans ce fichier — margin
horizontal négatif annulant le padding de .client-page (20px desktop/
12px mobile), padding repris à 14px pour retrouver le même surplomb que
.bottom-nav (width: calc(100% - 28px)). */
.asc-card {
margin: 8px -20px 0;
background: linear-gradient(150deg, #0d1a3d 0%, #0a1330 55%, #060a1c 100%);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
/* padding-bottom : la section suivante (.home-section--light, "Suivez-
nous") a un margin-top: -20px volontaire (voir son commentaire) pour
s'étendre jusqu'en bas de la page — 20px pile suffisait tout juste à
ne plus chevaucher le bouton mais laissait les deux collés (aucune
séparation visible) ; marge supplémentaire ici pour un vrai espace. */
padding: 16px 14px 36px;
box-shadow: 0 6px 24px rgba(0,0,0,.45);
border: 1.5px solid rgba(255,255,255,.08);
}
@media (max-width: 600px) {
.asc-card { margin-left: -12px; margin-right: -12px; }
}
.asc-top { display: flex; align-items: center; gap: 14px; }
.asc-icon {
flex-shrink: 0; width: 92px; height: 92px; border-radius: 16px;
background: none;
display: flex; align-items: center; justify-content: center;
color: var(--primary); font-size: 1.4rem;
overflow: hidden;
}
/* Réduit spécifiquement dans ce badge (le PNG lui-même a déjà sa propre
marge autour de la mascotte, inutile de zoomer ici) — demande explicite,
n'affecte que cet emplacement, jamais le fichier logo partagé ailleurs. */
.asc-icon img { width: 100%; height: 100%; object-fit: contain; transform: scale(.78); }
.asc-info { flex: 1; min-width: 0; }
.asc-title {
font-size: 1.05rem; font-weight: 900; color: var(--primary);
text-transform: uppercase; letter-spacing: .02em; line-height: 1.25;
}
.asc-sub {
font-size: .62rem; font-weight: 700; color: #fff;
margin-top: 3px;
}
.asc-rating {
display: flex; align-items: center; gap: 6px;
margin-top: 8px; font-size: .76rem; font-weight: 700;
color: #fff;
}
.asc-stars { color: var(--primary); letter-spacing: 1px; }
.asc-dot { opacity: .6; }
/* Chiffres de confiance — bloc orange imbriqué dans .asc-card (bleu
marine), maquette de référence fournie par le client. */
.asc-stats-card {
margin-top: 28px;
background: rgba(255,255,255,.05);
border: none;
border-radius: var(--radius-md, 14px);
padding: 12px 10px;
box-shadow: none;
}
.asc-stats {
display: flex;
}
.asc-stat { flex: 1; text-align: center; position: relative; }
.asc-stat + .asc-stat::before {
content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
width: 1px; background: rgba(255,255,255,.15);
}
.asc-stat-val { font-size: .88rem; font-weight: 900; color: var(--primary); line-height: 1.1; }
.asc-stat-lbl {
font-size: .48rem; font-weight: 700; color: rgba(255,255,255,.6);
text-transform: uppercase; letter-spacing: .06em; margin-top: 2px;
}
/* Copyright intégré en bas de la vitrine */
.asc-copyright {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 16px; padding-top: 16px;
border-top: 1px solid rgba(0,0,0,.08);
font-size: .68rem; font-weight: 600; color: var(--gray-500);
}
.asc-copyright-logo { height: 16px; width: auto; object-fit: contain; opacity: .8; }
/* Liens rapides sous le copyright (Recharge/Forfaits/Support/téléphone/
WhatsApp) — demande explicite, mêmes actions que les raccourcis
existants (openRechargeModalGated()/handleClientWhatsappClick()) plutôt
que de dupliquer cette logique. */
.asc-footer-links {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 6px; margin-top: 5px;
font-size: .7rem; font-weight: 600;
}
.asc-footer-links a { color: rgba(255,255,255,.6); text-decoration: none; }
.asc-footer-links a:hover { color: var(--primary); }
.asc-footer-dot { color: rgba(255,255,255,.3); }
/* #home-balance-card est un simple conteneur : .pgc-card / .pgc-balance-card /
.pgc-panel gèrent chacun leur propre habillage. Un border/overflow:hidden
ici casserait le position:sticky de .pgc-sticky-wrap qu'il contient. */
.home-section-head {
display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,98,0,.28);
background: linear-gradient(90deg, rgba(255,98,0,.06) 0%, transparent 60%);
margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px;
border-radius: 0;
}
.home-section-head--center { justify-content: center; }
.home-section-head--center .home-section-title { flex: 1; justify-content: center; }
.home-section-title {
font-size: .9rem; font-weight: 900; color: #fff;
display: flex; align-items: center; gap: 8px;
}
.home-section-title i { color: var(--primary); filter: drop-shadow(0 0 5px rgba(255,98,0,.5)); }
.home-section-badge {
font-size: .62rem; font-weight: 800; padding: 2px 8px;
background: rgba(255,98,0,.2); color: #FF9020; border-radius: 20px;
letter-spacing: .5px; border: 1px solid rgba(255,98,0,.3);
}
.fid-badge-promo {
font-size: .62rem; font-weight: 800; padding: 2px 8px;
background: rgba(255,200,0,.15); color: #FFCC44;
border-radius: 20px; margin-left: auto;
border: 1px solid rgba(255,200,0,.25);
}
/* ── Message d'instruction commande ────────────────────────── */
/* Bandeau clair pastel (demande explicite du 27/08, référence fournie) —
remplace l'ancienne carte sombre à badge lumineux, jamais branchée
jusqu'ici (voir #sched-section, index.html : seul endroit qui utilise
ce composant pour l'instant). */
.tf-order-intro {
background: #EAF9EF;
border: 1px solid #B8E8C4;
border-radius: 14px;
padding: 12px 14px; margin-bottom: 26px;
}
.tf-oi-title {
font-size: .92rem; font-weight: 800; color: #16121F; line-height: 1.3;
margin-bottom: 4px;
}
.tf-oi-sub {
font-size: .74rem; color: var(--gray-600); line-height: 1.55; font-weight: 500;
}
/* ── Actualités — nouvelle section ─────────────────────────── */
.actu-section .home-section-head {
flex-wrap: wrap; gap: 10px;
}
.actu-tabs {
display: flex; gap: 6px; margin-left: auto;
}
.actu-tab {
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.45); border-radius: 99px;
padding: 3px 9px; font-size: .58rem; font-weight: 800;
cursor: pointer; font-family: var(--font);
transition: all .2s; white-space: nowrap;
}
.actu-tab.active {
background: var(--primary); border-color: var(--primary);
color: #fff; box-shadow: 0 2px 10px rgba(255,98,0,.35);
}
.actu-list { display: block; }
/* Une news vedette en haut + les suivantes en liste compacte */
.actu-cat {
font-size: .48rem; font-weight: 900; text-transform: uppercase;
letter-spacing: .5px; border-radius: 99px;
display: inline-block; padding: 1px 5px;
width: fit-content;
}
.actu-cat--foot { background: rgba(34,197,94,.15); color: #4ade80; }
.actu-cat--pol { background: rgba(99,102,241,.18); color: #a5b4fc; }
.actu-cat--kbine { background: rgba(255,98,0,.18); color: #FF9A3C; }
.actu-featured {
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
border-radius: 12px; padding: 12px 14px;
display: flex; flex-direction: column; gap: 6px;
cursor: pointer; margin-bottom: 10px;
transition: background .15s;
}
.actu-featured:hover { background: rgba(255,255,255,.1); }
.actu-featured-top { display: flex; align-items: center; gap: 8px; }
.actu-featured-title {
font-size: .78rem; font-weight: 800; color: #fff; line-height: 1.4;
}
.actu-mini-list { display: flex; flex-direction: column; }
.actu-mini-item {
display: flex; align-items: center; gap: 8px;
padding: 8px 2px;
border-top: 1px solid rgba(255,255,255,.07);
cursor: pointer;
}
.actu-mini-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.actu-mini-dot--foot { background: #4ade80; }
.actu-mini-dot--pol { background: #a5b4fc; }
.actu-mini-dot--kbine { background: #FF6200; }
.actu-mini-title {
flex: 1; min-width: 0;
font-size: .64rem; font-weight: 600; color: rgba(255,255,255,.75);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.actu-mini-time { font-size: .52rem; color: rgba(255,255,255,.3); flex-shrink: 0; }
.actu-meta {
font-size: .52rem; color: rgba(255,255,255,.3); font-weight: 500;
display: flex; align-items: center; gap: 4px;
}
.actu-meta i { font-size: .48rem; }
/* ── Ancienne liste simple ──────────────────────────────────── */
.actu-list-old {
background: #fff; border-radius: var(--radius-lg);
border: 1px solid #f0e8e0; overflow: hidden;
}
.actu-item {
display: flex; align-items: center; gap: 14px;
padding: 16px; border-bottom: 1px solid #faf0ea;
cursor: pointer; transition: background .15s;
}
.actu-item:active { background: #fff8f3; }
.actu-icon-wrap {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
}
.actu-item-body { flex: 1; min-width: 0; }
.actu-item-cat {
font-size: .68rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .5px; margin-bottom: 4px;
}
.actu-item-title {
font-size: .82rem; font-weight: 600; color: var(--gray-800);
line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.actu-item-meta {
font-size: .7rem; color: var(--gray-400); margin-top: 5px;
display: flex; align-items: center; gap: 5px;
}
.actu-arrow { color: var(--gray-300); font-size: .8rem; flex-shrink: 0; }
/* ── Fidélité ────────────────────────────────────────────────── */
.fid-card {
background: #fff; border-radius: var(--radius-lg);
padding: 18px 18px 14px;
box-shadow: 0 2px 8px rgba(168,230,176,.25);
}
.fid-reward-visual {
display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
padding-bottom: 14px; border-bottom: 1px solid var(--gray-100);
}
.fid-cake-icon { font-size: 2.6rem; line-height: 1; }
.fid-reward-title { font-size: .95rem; font-weight: 900; color: #000; }
.fid-reward-sub { font-size: .75rem; color: var(--gray-500); margin-top: 2px; }
.fid-progress-labels {
display: flex; justify-content: space-between; align-items: center;
font-size: .78rem; font-weight: 700; color: var(--gray-700); margin-bottom: 8px;
}
.fid-goal { color: var(--primary); }
.fid-bar-track {
height: 10px; border-radius: 20px; background: var(--gray-100); overflow: hidden; margin-bottom: 6px;
}
.fid-bar-fill {
height: 100%; border-radius: 20px; width: 0%;
background: linear-gradient(90deg, var(--primary), #ff8c42);
transition: width .6s cubic-bezier(.34,1.56,.64,1);
}
.fid-progress-hint { font-size: .72rem; color: var(--gray-400); text-align: center; margin-top: 4px; }
.fid-milestones {
display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px;
border-top: 1px solid var(--gray-100); position: relative;
}
.fid-ms {
display: flex; flex-direction: column; align-items: center; gap: 4px;
font-size: .65rem; font-weight: 700; color: var(--gray-400);
}
.fid-ms.reached { color: var(--primary); }
.fid-ms-dot {
width: 18px; height: 18px; border-radius: 50%;
background: var(--gray-200); border: 2px solid var(--gray-300);
display: flex; align-items: center; justify-content: center; font-size: .55rem;
}
.fid-ms.reached .fid-ms-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.fid-ms-goal .fid-ms-dot { font-size: .75rem; background: transparent; border: none; }
/* ── Mur de connexion (sections privées) ─────────────────────── */
.elc-wall {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 44px 24px 40px;
background: #fff;
border-radius: 20px; margin-bottom: 16px;
border: 1px solid #E8E9EE;
}
.elc-wall-glow { display: none; }
.elc-wall-lock {
width: 64px; height: 64px; border-radius: 50%;
background: rgba(15,10,46,.06);
border: none;
color: #0F0A2E; font-size: 1.35rem;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
overflow: hidden;
}
.elc-wall-lock img { width: 78%; height: 78%; object-fit: contain; }
.elc-wall-title {
font-size: 1rem; font-weight: 900; color: #000000;
margin-bottom: 8px;
}
.elc-wall-sub {
font-size: .78rem; color: var(--gray-500);
line-height: 1.6; max-width: 220px; margin: 0 auto 22px;
}
.elc-wall-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 26px; border-radius: 99px; border: none;
background: #0F0A2E; background-image: none;
-webkit-appearance: none; appearance: none;
color: #fff; font-size: .85rem; font-weight: 800;
cursor: pointer; transition: opacity .15s;
box-shadow: none;
}
.elc-wall-btn:hover { opacity: .88; }
.elc-wall-btn:active { opacity: .75; }
/* Lien secondaire "Ouvrir un compte" (direction B choisie via canvas
de design le 25/08) — sous le bouton principal "Se connecter",
plutôt qu'un second bouton plein de même poids. */
.elc-wall-signup {
margin-top: 16px; font-size: .68rem; color: var(--gray-500);
}
.elc-wall-signup a {
color: #0F0A2E; font-weight: 800; text-decoration: underline; cursor: pointer;
}
/* Lien "Retour" — les 5 encarts "verrouillé" inline (historique/
dépenses/portefeuille/transférer/profit) n'avaient aucune échappatoire
pour un invité qui n'a pas envie de se connecter (demande explicite :
"propose une option de retour partout"). Absent du popup
#modal-private-space, qui a déjà sa croix de fermeture. */
.elc-wall-back {
margin-top: 14px; background: none; border: none; cursor: pointer;
font-family: var(--font); font-size: .72rem; font-weight: 700;
color: var(--gray-500); display: inline-flex; align-items: center; gap: 5px;
transition: color .15s;
}
.elc-wall-back i { font-size: .62rem; }
.elc-wall-back:hover { color: #0F0A2E; }
/* "Se connecter" + "S'inscrire" (#modal-private-space uniquement) — fond
orange retiré, contours bleu marine sur les deux, même gabarit
(demande explicite). */
#modal-private-space .elc-wall-btn {
width: 100%; justify-content: center; box-sizing: border-box;
background: none; border: 1.5px solid #0d1a3d;
color: #0d1a3d;
}
#modal-private-space .elc-wall-btn:hover { background: rgba(13,26,61,.06); opacity: 1; }
#modal-private-space .elc-wall-btn:active { background: rgba(13,26,61,.1); opacity: 1; }
.elc-wall-btn--outline { margin-top: 8px; }
/* Popup "Espace privé" (#modal-private-space) uniquement — remplace le
badge logo + phrase unique (.elc-wall-lock/.elc-wall-sub, toujours
utilisés tels quels par les 4 encarts "verrouillé" inline des sections
historique/dépenses/portefeuille/profil, jamais retouchés ici) par un
badge icône contextuel + une liste de bénéfices courts, adaptée par
service (voir openPrivateSpaceNotice(), js/client.js). */
.elc-wall-badge {
width: 42px; height: 42px; border-radius: 50%; margin: 0 auto 8px;
background: linear-gradient(145deg, #FF6200, #CC4E00);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 16px -6px rgba(255,98,0,.55);
color: #fff; font-size: .95rem; flex-shrink: 0;
}
.elc-wall-list {
list-style: none; margin: 2px auto 12px; padding: 0;
display: flex; flex-direction: column; gap: 6px;
text-align: left; width: 100%; max-width: 220px;
}
.elc-wall-list li {
display: flex; align-items: center; gap: 7px;
font-size: .66rem; font-weight: 600; color: #2b241c; line-height: 1.35;
background: #FBF7F2; border: 1px solid rgba(28,23,18,.06);
padding: 6px 9px; border-radius: 9px;
}
.elc-wall-list .chk {
width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
background: rgba(0,154,68,.12); color: #009A44;
display: flex; align-items: center; justify-content: center; font-size: .44rem;
}
/* Popup uniquement : la carte .elc-wall/.elc-wall-title/.elc-wall-btn reste
partagée avec les 4 encarts "verrouillé" inline (padding/taille d'origine
pour eux, voir plus haut) — resserrée ici en plus pour un popup qui
n'a pas besoin d'autant de respiration qu'une section pleine page. */
#modal-private-space .elc-wall { padding: 28px 20px 22px; }
#modal-private-space .elc-wall-title { font-size: .88rem; margin-bottom: 2px; }
#modal-private-space .elc-wall-btn { padding: 9px 20px; font-size: .76rem; }
/* Popup "Espace privé" : le .elc-wall fait toute la carte, le modal
lui-même reste transparent (pas de double cadre). */
.priv-modal {
position: relative; background: none; box-shadow: none;
max-width: 288px; overflow: visible;
}
.priv-modal-close {
position: absolute; top: -42px; right: 0;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
color: #fff; font-size: .85rem;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .15s;
}
.priv-modal-close:hover { background: rgba(255,255,255,.22); }
/* ── Section Profil / Coordonnées ───────────────────────────── */
.pc-card {
position: relative; overflow: hidden;
background: #0d0d18;
border: 1px solid rgba(255,255,255,.07);
border-radius: 20px; margin: 12px 12px 0; padding: 18px 16px 14px;
}
.pc-card-bg {
position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,98,0,.12), transparent 70%);
pointer-events: none;
}
.pc-card-top {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.pc-card-ava-wrap {
position: relative; flex-shrink: 0; cursor: pointer;
}
.pc-card-id { flex: 1; min-width: 0; }
.pc-card-name {
font-size: .82rem; font-weight: 900; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: 3px;
}
.pc-card-sub {
font-size: .55rem; color: rgba(255,255,255,.35);
display: flex; align-items: center; gap: 5px;
}
.pc-card-solde { text-align: right; flex-shrink: 0; }
.pc-card-solde-val {
font-size: .9rem; font-weight: 900; color: #22c55e;
white-space: nowrap;
}
.pc-card-solde-lbl {
font-size: .48rem; font-weight: 700; color: rgba(255,255,255,.3);
text-transform: uppercase; letter-spacing: .08em;
}
.pc-card-sep {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
margin-bottom: 14px;
}
.pc-card-metrics {
display: flex; align-items: center; gap: 0;
}
.pc-card-metric {
flex: 1; display: flex; align-items: center; gap: 10px;
}
.pc-card-metric-ico { font-size: .78rem; flex-shrink: 0; }
.pc-card-metric-val {
font-size: .75rem; font-weight: 800; color: #fff; margin-bottom: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px;
}
.pc-card-metric-lbl {
font-size: .48rem; font-weight: 700; color: rgba(255,255,255,.3);
text-transform: uppercase; letter-spacing: .07em;
}
.pc-card-vline {
width: 1px; height: 32px; background: rgba(255,255,255,.07); margin: 0 14px;
flex-shrink: 0;
}
/* Carte profil v3 — regroupée en une seule carte blanche professionnelle
(au lieu de deux bandes de couleur contrastées orange/navy empilées) :
texte en noir/bleu marine, un simple séparateur discret entre le
montant et l'identité plutôt qu'un changement de fond. */
.pc3-card {
margin: 12px 0 0;
background: #fff;
border-radius: 20px 20px 0 0; overflow: hidden;
border: 1px solid #E8ECF4; border-bottom: none;
box-shadow: none;
}
.pc3-top {
background: #fff;
padding: 20px 18px 16px; position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 4px;
}
.pc3-top::before {
content: ''; position: absolute; top: -30px; right: -30px;
width: 120px; height: 120px; border-radius: 50%;
background: rgba(10,19,48,.04); pointer-events: none;
}
.pc3-top::after { content: none; }
.pc3-top-label {
font-size: .52rem; font-weight: 700; color: rgba(0,0,0,.45);
text-transform: uppercase; letter-spacing: .1em;
}
.pc3-top-amount {
font-size: 1.6rem; font-weight: 900; color: #0a1330;
letter-spacing: -.03em; line-height: 1;
}
.pc3-top-badge {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25);
border-radius: 999px;
padding: 3px 10px; font-size: .52rem; font-weight: 700; color: #16a34a;
width: fit-content; margin-top: 4px;
}
.pc3-bottom {
background: #fff; padding: 14px 16px;
border-top: 1px solid #F0F2F7;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pc3-left { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.pc3-ava-wrap { position: relative; flex-shrink: 0; cursor: pointer; }
.pc3-ava { width: 44px !important; height: 44px !important; font-size: .85rem !important; }
.pc3-name {
font-size: .72rem; font-weight: 800; color: #0a1330;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px;
}
.pc3-tel { font-size: .58rem; color: rgba(0,0,0,.4); }
.pc3-right { flex-shrink: 0; text-align: right; }
.pc3-stat-val { font-size: .9rem; font-weight: 900; color: #FF6200; }
.pc3-stat-lbl { font-size: .48rem; font-weight: 700; color: rgba(0,0,0,.35); text-transform: uppercase; letter-spacing: .07em; }
/* Ancien .pc-hero conservé vide */
.pc-hero { display: none; }
.pc-hero-glow { display: none; }
.pc-hero {
position: relative; overflow: hidden;
text-align: center; padding: 36px 20px 24px;
background: linear-gradient(160deg, #190f3e 0%, #0f0830 100%);
border-radius: 20px; margin-bottom: 16px;
border: 1px solid rgba(138,99,255,.2);
}
.pc-hero-glow {
position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
width: 180px; height: 180px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,98,0,.35) 0%, transparent 70%);
pointer-events: none;
}
.pc-avatar-wrap {
position: relative; display: inline-block; margin-bottom: 14px;
cursor: pointer;
}
.pc-avatar-edit {
position: absolute; inset: 0; border-radius: 50%;
background: rgba(0,0,0,.45); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: .9rem; opacity: 0;
transition: opacity .2s;
}
.pc-avatar-wrap:hover .pc-avatar-edit { opacity: 1; }
.pc-avatar {
width: 76px; height: 76px; border-radius: 50%;
background: linear-gradient(135deg, var(--primary), #9b3500);
color: #fff; font-size: 1.6rem; font-weight: 900;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 4px rgba(255,98,0,.2), 0 6px 24px rgba(255,98,0,.4);
}
.pc-avatar-badge {
position: absolute; bottom: 1px; right: 1px;
width: 22px; height: 22px; border-radius: 50%;
background: #22c55e; color: #fff;
font-size: .52rem; display: flex; align-items: center; justify-content: center;
border: 2px solid #0f0828;
}
.pc-name {
font-size: 1.15rem; font-weight: 900; color: #fff;
margin-bottom: 6px; letter-spacing: -.01em;
}
.pc-role-tag {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(255,98,0,.15); color: var(--primary);
border: 1px solid rgba(255,98,0,.25);
font-size: .65rem; font-weight: 800; padding: 4px 12px; border-radius: 99px;
text-transform: uppercase; letter-spacing: .05em;
margin-bottom: 20px;
}
.pc-bubbles {
display: flex; justify-content: center; gap: 10px; margin: 4px 0;
}
.pc-bubble {
display: flex; flex-direction: column; align-items: center; gap: 6px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
border-radius: 16px; padding: 12px 14px; min-width: 76px;
transition: background .2s, transform .15s;
}
.pc-bubble:hover { background: rgba(255,255,255,.07); transform: translateY(-2px); }
.pc-bubble-ico {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: .75rem;
}
.pc-bubble-val {
font-size: .8rem; font-weight: 900; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px;
text-align: center;
}
.pc-bubble-lbl {
font-size: .5rem; font-weight: 700; color: rgba(255,255,255,.3);
text-transform: uppercase; letter-spacing: .07em;
}
/* ancien coord-row conservé pour compatibilité */
.coord-row { display:none; }
/* ── Coordonnées v2 — lignes ─────────────────────────────────── */
.crd2-panel {
background: linear-gradient(150deg, #14161d 0%, #101218 55%, #0a0b0f 100%);
border: 1px solid rgba(255,255,255,.07);
border-radius: 18px; margin: 10px 12px; overflow: hidden;
}
.crd2-head {
display: flex; align-items: center; gap: 8px;
padding: 14px 16px 12px;
font-size: .6rem; font-weight: 800; color: rgba(255,255,255,.4);
text-transform: uppercase; letter-spacing: .1em;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.crd2-head i { color: var(--primary); font-size: .7rem; }
.crd2-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
transition: background .15s;
}
.crd2-row:hover { background: rgba(255,255,255,.03); }
.crd2-ico {
width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: .8rem;
}
.crd2-info { flex: 1; min-width: 0; }
.crd2-lbl {
font-size: .5rem; font-weight: 700; color: rgba(255,255,255,.3);
text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
}
.crd2-val {
font-size: .82rem; font-weight: 800; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crd2-val--green { color: #22c55e; }
.crd2-divider {
height: 1px; margin: 0 16px;
background: rgba(255,255,255,.05);
}
/* Police propre à la LISTE du profil client (demande du 2026-09-03 :
"une bonne police comme celle de Gmail") — Poppins (géométrique, rond,
proche de Google Sans/Product Sans). Portée strictement à
#cs-profit-content : les modales ouvertes par ces lignes
(#modal-client-notifications, #modal-change-pin, #modal-client-devices)
sont hors de ce conteneur et gardent la police de l'app. Les graisses
très hautes (900/800) des titres/valeurs sont ramenées à 600 : Poppins
Black paraît lourd à cette taille. */
#cs-profit-content {
font-family: "Poppins", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#cs-profit-content .rcp-bulk-title,
#cs-profit-content .ref2-banner-title,
#cs-profit-content .crd2-val,
#cs-profit-content #pc-coordonnees-card .crd2-val { font-weight: 600; }
#cs-profit-content .crd2-lbl,
#cs-profit-content #pc-coordonnees-card .crd2-lbl { font-weight: 500; }
/* Taille de police de cette liste (2026-09-03 : agrandie puis réduite —
compromis entre l'ancienne .8rem et la version élargie .95rem). */
#cs-profit-content .rcp-bulk-title,
#cs-profit-content .ref2-banner-title { font-size: .85rem; }
#cs-profit-content .crd2-val,
#cs-profit-content #pc-coordonnees-card .crd2-val { font-size: .85rem; }
#cs-profit-content .crd2-lbl,
#cs-profit-content #pc-coordonnees-card .crd2-lbl { font-size: .7rem; }
/* ── Modèle "réglages sectionnés" (demande du 2026-09-03 : "propose-moi
un autre") ──────────────────────────────────────────────────────────
Deux groupes étiquetés — « Mon compte » (coordonnées + parrainage) et
« Sécurité & appareils » (notifications + code PIN + appareils) —
chacun dans son propre cadre blanc, filet fin entre les lignes.
L'étiquette encode une vraie catégorie, pas de la décoration. Tout est
scopé à #cs-profit-content. */
#cs-profit-content { background: none; border: 0; box-shadow: none; }
.pfgrp + .pfgrp { margin-top: 18px; }
.pfgrp-label {
font-size: .78rem; font-weight: 500; letter-spacing: .08em;
text-transform: uppercase; color: #16121F;
padding: 0 4px 9px;
}
.pfgrp-card {
background: #fff;
border: 1px solid #ECEDF2;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15,10,46,.04);
}
/* Chaque item perd bordure / arrondi / ombre / marges ; le filet gère la
séparation à l'intérieur du groupe. */
.pfgrp-card > #pc-coordonnees-card,
.pfgrp-card > .ref2-wrap,
.pfgrp-card > .crd2-panel--white {
margin: 0; border: 0; border-radius: 0; box-shadow: none;
}
.pfgrp-card > * + * { border-top: 1px solid #EEEFF3; }
/* En-têtes / lignes : hauteur et retrait homogènes. */
#cs-profit-content .rcp-bulk-head,
#cs-profit-content .ref2-banner,
#cs-profit-content .crd2-panel--white .crd2-row {
min-height: 56px; padding: 12px 16px;
}
#cs-profit-content .ref2-banner { border-bottom: 0; }
/* Icône uniforme : carré arrondi, fond neutre, même taille partout
(avant : cercle noir plein / transparent / cercle à halo selon la
carte). Les icônes des 3 dernières lignes gardent leur couleur (style
inline dans le HTML) — un peu de couleur sur un socle identique. */
#cs-profit-content .rcp-bulk-ico,
#cs-profit-content .ref2-banner-ico,
#cs-profit-content .crd2-panel--white .crd2-ico {
width: 33px; height: 33px;
border-radius: 9px;
background: #F2F3F7;
box-shadow: none;
}
#cs-profit-content .rcp-bulk-ico { background: #0F0A2E; color: #fff; }
#cs-profit-content .rcp-bulk-ico i,
#cs-profit-content .ref2-banner-ico i,
#cs-profit-content .crd2-panel--white .crd2-ico i { font-size: .8rem; }
/* Variante blanche des lignes-cartes "Profil" (Notifications/Changer le
PIN/Appareils connectés) — jamais à .crd2-panel de base (Notifications
admin etc., qui gardent leur fond sombre standard). "Mes coordonnées"
n'en fait plus partie (voir #pc-coordonnees-card plus bas) : elle est
devenue repliable, sur le modèle de "Récharge en masse", et gère son
propre style. */
.crd2-panel--white {
margin: 12px 0 10px;
background: #fff; border: 1px solid #E8ECF4;
border-radius: 20px;
box-shadow: none;
}
.crd2-panel--white .crd2-head { color: #0a1330; border-bottom-color: #F0F2F7; }
.crd2-panel--white .crd2-head i { color: #0a1330; }
.crd2-panel--white .crd2-row {
min-height: 68px; box-sizing: border-box;
padding: 14px 16px;
}
/* Fond gris au survol réservé à la souris réelle : sur tactile (WebView
Capacitor), un tap laissait ce :hover "collé" et la section (souvent
"Notifications") restait grise au lieu de rester bien blanche — même
correctif que .pgc-menu-drawer-item / .op-card ailleurs dans ce fichier. */
@media (hover: hover) and (pointer: fine) {
.crd2-panel--white .crd2-row:hover { background: #F8F9FC; }
}
.crd2-panel--white .crd2-ico {
border-radius: 50%;
box-shadow: 0 4px 12px -2px var(--crd2-glow, transparent);
}
.crd2-panel--white .crd2-lbl { color: rgba(0,0,0,.4); }
.crd2-panel--white .crd2-val { color: #0a1330; }
.crd2-panel--white .crd2-val--green { color: #16a34a; }
.crd2-panel--white .crd2-divider { background: #F0F2F7; }
/* "Mes coordonnées" — repliable, même modèle que "Récharge en masse"
(demande explicite : "base-toi sur le modèle de commande en masse",
voir #pc-coordonnees-card, index.html, et .rcp-bulk-card ci-dessous).
Contenu interne (téléphone/solde/membre depuis) toujours sans icônes
ni traits séparateurs (demandes explicites précédentes), juste
libellé/valeur espacés. Même largeur que "Parrainez & gagnez"
(demande explicite) — .rcp-bulk-card déborde de -12px de chaque côté
par défaut (voir "Récharge en masse", non touchée), annulé ici pour
revenir à la largeur normale du conteneur, comme .ref2-wrap. */
#pc-coordonnees-card {
margin: 12px 0 10px;
border: 1px solid #E8ECF4;
box-shadow: none;
}
/* Modèle "fiche" (demande explicite : "propose un autre modèle") —
libellé à gauche / valeur à droite sur une seule ligne, plutôt
qu'empilés, pour un rendu plus compact façon relevé. Version
affinée (demande explicite : "rends la plus esthétique en gardant la
même disposition") — plus d'air entre les lignes, valeurs en chiffres
tabulaires pour un alignement propre, palette resserrée (libellé gris
doux, valeur bleu marine profond plutôt que noir pur). */
/* Modèle "relevé professionnel" (demande explicite : "propose un autre
modèle professionnel") — libellé en petites majuscules au-dessus de
la valeur (empilés, plus juxtaposés), fine barre d'accent verticale à
gauche de chaque ligne plutôt qu'un trait horizontal (jamais de trait
de séparation ici, demande explicite précédente). */
#pc-coordonnees-card .crd2-row { padding: 16px 20px 16px 26px; position: relative; }
#pc-coordonnees-card .crd2-row::before {
content: ''; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 3px;
border-radius: 3px; background: #0F2350;
}
#pc-coordonnees-card .crd2-info { display: block; }
#pc-coordonnees-card .crd2-lbl {
font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: #0F2350; margin-bottom: 5px;
}
#pc-coordonnees-card .crd2-val {
font-size: 1rem; font-weight: 800; color: #0A0A0A;
font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
#pc-coordonnees-card .crd2-val--green { color: #0A0A0A; }
/* Bandeau/icône alignés sur le même format que "Parrainez & gagnez"
(demande explicite) — fond légèrement teinté + icône en carré arrondi
clair, plutôt que le fond blanc uni/cercle noir plein hérité de
"Récharge en masse". */
#pc-coordonnees-card .rcp-bulk-head { background: #fff; border-bottom: 0; }
#pc-coordonnees-card .rcp-bulk-title { color: #0F2350; }
/* En-tête blanc, icône (le "logo") sur un petit carré arrondi gris,
glyphe noir (demande du 2026-09-03). */
#pc-coordonnees-card .rcp-bulk-ico {
width: 31px; height: 31px; border-radius: 9px;
background: #EEF0F4; color: #0A0A0A; font-size: .72rem;
}
/* ── Coordonnées — bulles cercles ───────────────────────────── */
.crd-panel {
position: relative; overflow: hidden;
background: linear-gradient(160deg, #190f3e 0%, #0f0830 100%);
border: 1px solid rgba(255,98,0,.18);
border-radius: 20px; margin-bottom: 14px;
padding-bottom: 20px;
}
.crd-panel-head {
display: flex; align-items: center; gap: 9px;
padding: 14px 18px 14px;
font-size: .72rem; font-weight: 900; color: rgba(255,255,255,.4);
text-transform: uppercase; letter-spacing: .08em;
border-bottom: 1px solid rgba(255,255,255,.06);
margin-bottom: 20px;
}
.crd-panel-head i { color: var(--primary); font-size: .82rem; }
/* Grille de bulles */
.crd-bubbles {
display: flex; justify-content: space-around; align-items: flex-start;
padding: 0 10px; gap: 8px;
}
.crd-bubble {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.crd-bubble-ring {
width: 72px; height: 72px; border-radius: 50%;
background: var(--cg);
border: 1.5px solid var(--cr);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 18px var(--cg);
}
.crd-bubble-icon {
width: 52px; height: 52px; border-radius: 50%;
background: rgba(0,0,0,.35);
color: var(--ci);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
border: 1px solid var(--ci);
box-shadow: 0 0 10px color-mix(in srgb, var(--ci) 30%, transparent);
}
.crd-bubble-lbl {
font-size: .6rem; font-weight: 800; color: rgba(255,255,255,.3);
text-transform: uppercase; letter-spacing: .07em; text-align: center;
}
.crd-bubble-val {
font-size: .78rem; font-weight: 900; color: #fff;
text-align: center; line-height: 1.3;
word-break: break-word;
}
.crd-bubble-val--green { color: #22c55e; }
/* ── Télécharger l'application Android ── */
.appdl-wrap { margin: 14px 12px 0; }
.asc-appdl-btn {
margin-top: 12px;
background: #ffffff !important;
box-shadow: 0 4px 14px rgba(0,0,0,.2) !important;
}
.asc-appdl-btn .appdl-label { color: #0A0A0F !important; }
.asc-appdl-btn .appdl-arrow { color: rgba(10,10,15,.55) !important; }
.asc-appdl-btn .appdl-btn-bg { background: radial-gradient(ellipse at left center, rgba(0,0,0,.05), transparent 70%) !important; }
.asc-appdl-btn .appdl-ico { border: 1.5px solid var(--gray-200); }
.appdl-btn {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 13px 18px;
border: none; border-radius: 14px; cursor: pointer;
background: linear-gradient(135deg, #FF6200 0%, #D62B00 100%);
outline: none;
box-shadow: 0 4px 14px rgba(255,98,0,.35);
text-decoration: none; color: inherit;
transition: transform .15s;
}
.appdl-btn:hover { transform: scale(.99); }
.appdl-btn-bg {
position: absolute; inset: 0;
background: radial-gradient(ellipse at left center, rgba(255,255,255,.12), transparent 70%);
pointer-events: none;
}
.appdl-ico {
width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
background: #fff;
display: flex; align-items: center; justify-content: center;
font-size: .95rem; color: #25D366; position: relative;
}
.appdl-label { font-size: .75rem; font-weight: 800; position: relative; color: #fff; flex: 1; }
.appdl-arrow { font-size: .7rem; color: rgba(255,255,255,.6); position: relative; }
/* Variante réduite — écran de connexion admin (.adx-modal, carte étroite,
voir espace-gestion.html #admin-login-android-dl) : le gabarit normal
ci-dessus (pensé pour la pleine largeur de "Mon profil" côté client)
y était disproportionné, texte sur deux lignes. */
.appdl-btn--sm { padding: 9px 14px; border-radius: 11px; gap: 8px; }
.appdl-btn--sm .appdl-ico { width: 26px; height: 26px; border-radius: 8px; font-size: .78rem; }
.appdl-btn--sm .appdl-label { font-size: .68rem; }
.appdl-btn--sm .appdl-arrow { font-size: .62rem; }
/* Section dédiée sous l'écran de connexion admin, détachée du formulaire
par une ligne de séparation — plutôt que collée juste sous "Retour à
l'accueil" (voir .ag-switch-line). */
/* Bloc totalement détaché de la carte de connexion admin (.adx-modal) —
sa propre carte, alignée sur la même largeur, espacée par le gap de
.admin-login-gate (flex column) plutôt qu'une bordure de séparation. */
.ag-appdl-section {
width: 92%; max-width: 360px; box-sizing: border-box;
padding: 16px; border-radius: 18px;
background: #0b0b12;
border: 1px solid rgba(255,255,255,.08);
}
.ag-appdl-sep {
text-align: center; font-size: .62rem; font-weight: 700;
color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .07em;
margin-bottom: 10px;
}
/* ── Parrainage v2 ───────────────────────────────────────────── */
/* Carte "Parrainez & gagnez" — même traitement blanc/noir/marine et pleine
largeur que les panneaux .crd2-panel--white ci-dessus (demande
explicite : "fais pareil"). */
.ref2-wrap {
margin: 12px 0 10px;
border-radius: 20px; overflow: hidden;
border: 1px solid #E8ECF4;
box-shadow: none;
background: #fff;
}
/* Bandeau devenu un