/* ============================================================
   RBPROG — Styles globaux
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0B0C10;
  --bg2:      #13151C;
  --surface:  #1A1D28;
  --border:   #2A2E3F;
  --accent:   #b9e200;
  --accent2:  #FF6B35;
  --text:     #F0F2F8;
  --file:     #558ad3;
  --muted:    #9BA3B8;
  --success:  #4ade80;
  --warning:  #fbbf24;
  --error:    #f87171;
  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Inter', sans-serif;
  /* Rayons partagés — même arrondi que les cartes premium (login, prestations, index)
     appliqué à tous les blocs du site pour une cohérence visuelle unique. */
  --radius:    16px;
  --radius-sm: 10px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 2vw, 2rem); }
h3 { font-size: 1.1rem; letter-spacing: 0.05em; }
p  { color: var(--muted); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5vw; height: 64px;
  background: rgba(11,12,16,0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(185,226,0,0.12), 0 12px 30px -20px rgba(0,0,0,0.8);
}
.nav-logo {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-weight: 900; font-size: 1.2rem;
  letter-spacing: 0.1em; color: var(--accent);
  text-decoration: none;
  transition: filter 0.2s, transform 0.2s;
}
.nav-logo:hover { filter: drop-shadow(0 0 10px rgba(185,226,0,0.45)); transform: translateY(-1px); text-decoration: none; }
.nav-logo span { color: var(--text); }
.nav-links { display: flex; gap: 0.35rem; list-style: none; align-items: center; }
.nav-links a {
  position: relative;
  display: inline-block;
  font-family: var(--font-display); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); text-decoration: none; transition: color 0.2s, background 0.2s;
  padding: 8px 14px; border-radius: 999px;
}
.nav-links a:hover { color: var(--accent); background: rgba(185,226,0,0.08); text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: 0.65rem; }

.nav-profile {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  padding: 7px 14px; border: 1px solid var(--border);
  border-radius: 999px;
  transition: color 0.2s, border-color 0.2s, background 0.2s; position: relative;
}
.nav-profile:hover { color: var(--accent); border-color: rgba(185,226,0,0.5); background: rgba(185,226,0,0.08); text-decoration: none; }
.nav-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--accent); color: #0B0C10;
  font-size: 0.6rem; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.nav-cta {
  font-family: var(--font-display); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), #d6ff2e); color: #0B0C10;
  padding: 8px 18px; border: none; border-radius: 999px; cursor: pointer;
  text-decoration: none; transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 8px 20px -8px rgba(185,226,0,0.5);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(185,226,0,0.6); text-decoration: none; }

.nav-fileservice {
  font-family: var(--font-display); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  background: rgba(30,80,140,0.25); color: #60a5fa;
  padding: 8px 18px; border: 1px solid rgba(96,165,250,0.35);
  border-radius: 999px;
  text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.nav-fileservice:hover { background: rgba(30,80,140,0.45); border-color: #60a5fa; text-decoration: none; transform: translateY(-1px); }

.nav-credits {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 6px 14px; border: 1px solid rgba(185,226,0,0.35);
  background: rgba(185,226,0,0.08);
  border-radius: 999px;
  text-decoration: none; transition: border-color 0.2s, background 0.2s, transform 0.15s;
  cursor: pointer;
}
.nav-credits:hover { border-color: var(--accent); background: rgba(185,226,0,0.15); text-decoration: none; transform: translateY(-1px); }
.nav-credits-icon { color: var(--accent); font-size: 0.75rem; }
.nav-credits-count {
  font-family: var(--font-display); font-size: 0.9rem;
  font-weight: 900; color: var(--accent); line-height: 1;
}
.nav-credits-label {
  font-family: var(--font-display); font-size: 0.6rem;
  color: var(--muted); letter-spacing: 0.05em;
}

/* ── LAYOUT ── */
.page-wrapper { padding-top: 64px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 5vw; }
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  padding: 12px 24px; border: none; border-radius: var(--radius-sm); cursor: pointer;
  text-decoration: none; transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
/* Même dégradé lime que le bouton de connexion / hero — utilisé partout maintenant. */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #d6ff2e);
  color: #0B0C10;
  box-shadow: 0 10px 26px -10px rgba(185,226,0,0.45);
}
.btn-primary:hover { box-shadow: 0 14px 30px -10px rgba(185,226,0,0.55); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: rgba(185,226,0,0.06); }
.btn-success { background: #166534; color: var(--success); border: 1px solid var(--success); }
.btn-success:hover { background: #14532d; }
.btn-danger  { background: #7f1d1d; color: var(--error); border: 1px solid var(--error); }
.btn-danger:hover  { background: #6b1a1a; }
.btn-warning { background: #78350f; color: var(--warning); border: 1px solid var(--warning); }
.btn-warning:hover { background: #92400e; }
.btn-sm { padding: 8px 16px; font-size: 0.65rem; }
.btn-block { display: flex; width: 100%; justify-content: center; }

/* ── CARDS ──
   Même fond en léger dégradé + coins arrondis que les cartes premium de la page
   d'accueil / connexion, pour un rendu homogène sur tout le site. Sans le liseré
   de couleur en haut (retiré à la demande de Ronan — trop répétitif sur autant
   de cartes à la fois). */
.card {
  background: linear-gradient(165deg, rgba(26,29,40,0.9), rgba(19,21,28,0.9));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem; position: relative; overflow: hidden;
}
.card-header {
  border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
}
.card-title {
  font-family: var(--font-display); font-size: 0.75rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text);
}

/* ── Bannière promo simulateur de gain (page d'accueil + prestations) ── */
.sim-promo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  background: linear-gradient(165deg, rgba(26,29,40,0.92), rgba(19,21,28,0.92));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.6rem 2rem; margin: 2rem 0;
}
.sim-promo::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent2), var(--accent) 65%, transparent 95%);
  opacity: 0.85;
}
.sim-promo-content { display: flex; align-items: center; gap: 1.1rem; }
.sim-promo-icon {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(185,226,0,0.18), rgba(255,107,53,0.18));
  border: 1px solid rgba(185,226,0,0.3);
}
.sim-promo h3 { margin-bottom: 0.3rem; font-size: 1.05rem; }
.sim-promo p { color: var(--muted); font-size: 0.86rem; margin: 0; }
@media (max-width: 700px) {
  .sim-promo { padding: 1.3rem 1.4rem; flex-direction: column; align-items: center; text-align: center; }
  .sim-promo-content { flex-direction: column; }
  /* Icône retirée sur mobile : l'emoji voiture dans son cadre faisait trop
     "générique / IA" sur petit écran, le texte seul suffit. */
  .sim-promo-icon { display: none; }
}

/* ── FORMS ── */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block; font-family: var(--font-display);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.5rem;
}
.form-control {
  display: block; width: 100%;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 10px 14px;
  font-family: var(--font-body); font-size: 0.975rem;
  transition: border-color 0.2s, box-shadow 0.2s; outline: none;
}
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(185,226,0,0.14); }
.form-control::placeholder { color: var(--muted); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 120px; }
.form-hint { font-size: 0.82rem; color: var(--muted); margin-top: 0.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-error { font-size: 0.82rem; color: var(--error); margin-top: 0.4rem; }

/* ── TABLES ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
th {
  font-family: var(--font-display); font-size: 0.65rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); padding: 12px 16px;
  border-bottom: 1px solid var(--border); text-align: left;
}
td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 0.975rem; color: var(--text); }
tr:hover td { background: rgba(42,46,63,0.4); }

/* ── STATUS BADGES ── */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-display); font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
}
.status-pending    { background: rgba(251,191,36,0.15);  color: #fbbf24; }
.status-paid       { background: rgba(74,222,128,0.1);   color: #4ade80; }
.status-processing { background: rgba(96,165,250,0.15);  color: #60a5fa; }
.status-delivered  { background: rgba(74,222,128,0.15);  color: #4ade80; }
.status-cancelled  { background: rgba(248,113,113,0.15); color: #f87171; }
.status-refunded   { background: rgba(167,139,250,0.15); color: #a78bfa; }

/* ── FLASH MESSAGES ── */
.flash {
  padding: 14px 18px; margin-bottom: 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.975rem; border-left: 3px solid;
}
.flash-success { background: rgba(74,222,128,0.1);  border-color: var(--success); color: var(--success); }
.flash-error   { background: rgba(248,113,113,0.1); border-color: var(--error);   color: var(--error); }
.flash-warning { background: rgba(251,191,36,0.1);  border-color: var(--warning); color: var(--warning); }
.flash-info    { background: rgba(96,165,250,0.1);  border-color: #60a5fa;        color: #60a5fa; }

/* ── STATS / CREDIT WIDGETS ── */
.stat-card {
  background: linear-gradient(165deg, rgba(26,29,40,0.9), rgba(19,21,28,0.9));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; text-align: center;
}
.stat-card .num {
  font-family: var(--font-display); font-size: 2.2rem;
  font-weight: 900; color: var(--accent); line-height: 1;
  display: block; margin-bottom: 0.4rem;
}
.stat-card .lbl { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

/* ── DASHBOARD GRID / MENU COMPTE CLIENT ──
   Desktop : liste verticale fluide avec icône dans une pastille, indicateur actif
   en liseré lime + fond dégradé. Mobile (voir media query plus bas) : la même liste
   devient une rangée horizontale de pastilles qui défile, pour rester pratique sur
   petit écran plutôt qu'une longue colonne empilée. */
.dashboard-grid { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
/* Empêche la colonne (et le menu horizontal qui défile dedans en mobile) de forcer
   toute la grille à s'élargir au-delà de l'écran — piège classique min-width:auto. */
.dashboard-grid > * { min-width: 0; }
.sidebar { position: sticky; top: 80px; }
.sidebar-nav { list-style: none; }
.sidebar-nav li { border-bottom: 1px solid var(--border); }
.sidebar-nav li:last-child { border-bottom: none; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 13px 16px; color: var(--muted);
  font-family: var(--font-display); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; border-left: 3px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s, padding-left 0.2s;
}
.sidebar-nav a:hover { color: var(--accent); background: rgba(185,226,0,0.06); padding-left: 20px; text-decoration: none; }
.sidebar-nav a.active {
  color: var(--accent); background: rgba(185,226,0,0.09); border-left-color: var(--accent);
}
.sidebar-nav-icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2); font-size: 0.82rem;
  transition: background 0.2s;
}
.sidebar-nav a:hover .sidebar-nav-icon, .sidebar-nav a.active .sidebar-nav-icon { background: rgba(185,226,0,0.16); }

/* ── PROGRESS BAR ── */
.progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 3px; transition: width 1s ease; }

/* ── PAGE HEADER ──
   Même fond dégradé sombre + fine trame diagonale que le hero de la page
   d'accueil et la carte de connexion, pour un bandeau de titre cohérent sur
   tout le site. Sans le halo de couleur vert/orange (retiré à la demande de
   Ronan — celui-ci reste réservé à l'accueil et à la page de connexion). */
.page-header {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(26,29,40,0.95), rgba(19,21,28,0.95));
  border-bottom: 1px solid var(--border);
  padding: 3rem 0;
}
.page-header::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 26px);
  pointer-events: none;
}
.page-header .container { position: relative; z-index: 1; }
.page-header h1 { margin-bottom: 0.25rem; }
.page-header p { color: var(--muted); font-size: 1rem; }
.eyebrow {
  font-family: var(--font-display); font-size: 0.65rem;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.5rem;
}

/* ── ALERTS ── */
.alert { padding: 1rem 1.25rem; border: 1px solid; border-radius: var(--radius-sm); margin-bottom: 1.5rem; font-size: 0.975rem; }
.alert-info    { border-color: #2563eb; background: rgba(37,99,235,0.1); color: #93c5fd; }
.alert-success { border-color: var(--success); background: rgba(74,222,128,0.1); color: var(--success); }
.alert-warning { border-color: var(--warning); background: rgba(251,191,36,0.1); color: var(--warning); }
.alert-danger  { border-color: var(--error);   background: rgba(248,113,113,0.1); color: var(--error); }

/* ── GRIDS ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ── CREDIT CARD ── */
.credit-widget {
  background: linear-gradient(165deg, rgba(26,29,40,0.9), rgba(19,21,28,0.9));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem;
  position: relative; overflow: hidden;
}
.credit-widget::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.credit-widget .balance {
  font-family: var(--font-display); font-size: 3rem; font-weight: 900;
  color: var(--accent); line-height: 1; margin: 0.5rem 0;
}
.credit-widget .label {
  font-family: var(--font-display); font-size: 0.65rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
}

/* ── FOOTER ── */
footer {
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 3.5rem 0 2rem; margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.25rem;
}
.footer-logo { font-family: var(--font-display); font-size: 1.15rem; font-weight: 900; color: var(--accent); }
.footer-logo span { color: var(--text); }
.footer-tagline { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin-top: 0.65rem; max-width: 280px; }
.footer-contact { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.9rem; }
.footer-contact a { font-size: 0.85rem; color: var(--text); text-decoration: none; }
.footer-contact a:hover { color: var(--accent); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--border); color: var(--muted);
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.footer-social a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.footer-col h4 {
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text);
  margin-bottom: 1rem;
}
.footer-col a { display: block; font-size: 0.85rem; color: var(--muted); text-decoration: none; margin-bottom: 0.7rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.footer-copy { font-size: 0.8rem; color: var(--muted); margin: 0; }

/* ── UTILS ── */
.mt-1 { margin-top: 0.5rem; }  .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }  .mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-accent { color: var(--accent); }
.text-muted  { color: var(--muted); }
.text-success { color: var(--success); }
.text-danger  { color: var(--error); }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; }
.w-100 { width: 100%; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .form-row { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

/* ── NAV BURGER ── */
/* Bouton pilule bien visible (fond + bordure) avec le mot "Menu" à côté de
   l'icône : plus facile à repérer que 3 fines barres seules sur fond sombre. */
.nav-burger {
  display: none; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; padding: 7px 13px 7px 11px;
  transition: border-color 0.2s, background 0.2s;
}
.nav-burger:hover, .nav-burger.open { border-color: rgba(185,226,0,0.5); background: rgba(185,226,0,0.12); }
.nav-burger-icon { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.nav-burger-icon span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--text); transition: 0.3s;
}
.nav-burger:hover .nav-burger-icon span, .nav-burger.open .nav-burger-icon span { background: var(--accent); }
.nav-burger.open .nav-burger-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open .nav-burger-icon span:nth-child(2) { opacity: 0; }
.nav-burger.open .nav-burger-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-burger-label {
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
}
.nav-burger.open .nav-burger-label { color: var(--accent); }

.nav-mobile {
  display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
  background: rgba(11,12,16,0.98); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border); z-index: 199;
  flex-direction: column; padding: 1rem 5vw 2rem;
  overflow-y: auto;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-family: var(--font-display); font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  padding: 16px 0; border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.nav-mobile a:hover { color: var(--accent); }
.nav-mobile .nav-mobile-cta {
  margin-top: 1rem; text-align: center;
  background: linear-gradient(135deg, var(--accent), #d6ff2e); color: #0B0C10; padding: 14px;
  font-family: var(--font-display); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  border: none; border-radius: 12px;
  box-shadow: 0 10px 26px -8px rgba(185,226,0,0.5);
}
/* Lien "Se connecter" pour un visiteur non connecté : reste discret (même
   style que les autres liens du menu, juste un peu plus estompé) plutôt
   qu'un gros bouton vert flashi — un visiteur lambda ne cherche pas
   forcément à se connecter, ça ne doit pas être ce qui saute le plus aux yeux. */
.nav-mobile a.nav-mobile-login { color: var(--muted); font-weight: 500; }
.nav-mobile a.nav-mobile-login:hover { color: var(--accent); }

/* ── CLOCHE NOTIFICATIONS ── */
.nav-bell {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s;
  font-size: 0.95rem; border-radius: 50%;
}
.nav-bell:hover { border-color: rgba(185,226,0,0.5); color: var(--text); background: rgba(185,226,0,0.1); transform: translateY(-1px); }
.nav-bell-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--accent); color: #0B0C10;
  font-family: var(--font-display); font-size: 0.5rem; font-weight: 700;
  min-width: 14px; height: 14px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 1px solid var(--bg);
  box-shadow: 0 0 8px rgba(185,226,0,0.6);
}

/* ── DROPDOWN NOTIFICATIONS ── */
.notif-dropdown {
  display: none; position: absolute; top: calc(100% + 12px); right: 0;
  width: 320px;
  background: rgba(19,21,28,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(185,226,0,0.18);
  border-radius: 14px;
  overflow: hidden;
  z-index: 300;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,0.75);
}
.notif-dropdown.open { display: block; }
.notif-dropdown::before {
  content: ''; position: absolute; top: -5px; right: 12px;
  width: 8px; height: 8px; background: var(--bg2);
  border-left: 1px solid rgba(185,226,0,0.18); border-top: 1px solid rgba(185,226,0,0.18);
  transform: rotate(45deg);
}
.notif-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: 0.6rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
  background: rgba(255,255,255,0.02);
}
.notif-list { max-height: 320px; overflow-y: auto; }
.notif-list::-webkit-scrollbar { width: 3px; }
.notif-list::-webkit-scrollbar-thumb { background: var(--border); }
.notif-item {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  transition: background 0.15s; text-decoration: none; cursor: pointer;
}
.notif-item:hover { background: rgba(185,226,0,0.07); text-decoration: none; }
.notif-item.unread { border-left: 2px solid var(--accent); }
.notif-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(185,226,0,0.1); border: 1px solid rgba(185,226,0,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex-shrink: 0;
}
.notif-title { font-size: 0.85rem; color: var(--text); font-weight: 600; display: block; line-height: 1.3; }
.notif-msg   { font-size: 0.78rem; color: var(--muted); display: block; margin-top: 2px; line-height: 1.4; }
.notif-time  { font-size: 0.68rem; color: var(--muted); display: block; margin-top: 4px; }
.notif-empty { padding: 2rem 1rem; text-align: center; color: var(--muted); font-size: 0.88rem; }
.notif-footer {
  padding: 10px 14px; border-top: 1px solid var(--border);
  background: var(--surface); text-align: center;
}
.notif-footer a { font-size: 0.78rem; color: var(--accent); text-decoration: none; font-family: var(--font-display); letter-spacing: 0.08em; }
.notif-footer a:hover { text-decoration: underline; }

/* ── STATUS BADGE COULEURS ── */
.status-waiting    { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.status-processing { background: rgba(251,146,60,0.15);  color: #fb923c; }
.status-ready      { background: rgba(74,222,128,0.15);  color: #4ade80; }
.status-revision   { background: rgba(251,191,36,0.15);  color: #fbbf24; }
.status-cancelled  { background: rgba(248,113,113,0.15); color: #f87171; }
.status-masked     { background: rgba(251,146,60,0.15);  color: #fb3c3c; }

/* ── TICKET / CHAT ── */
.chat-wrap {
  display: flex; flex-direction: column; gap: 0;
  max-height: 420px; overflow-y: auto;
  padding: 1rem; background: var(--bg);
  border: 1px solid var(--border); margin-bottom: 1rem;
}
.chat-msg {
  display: flex; flex-direction: column; max-width: 75%;
  margin-bottom: 1rem;
}
.chat-msg.mine  { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: 10px 14px; font-size: 0.9rem; line-height: 1.6;
  border-radius: 2px; word-break: break-word;
}
.chat-msg.mine   .chat-bubble { background: rgba(230,48,48,0.15); border: 1px solid rgba(230,48,48,0.3); color: var(--text); }
.chat-msg.theirs .chat-bubble { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.chat-meta { font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
.chat-file {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 8px 12px; border: 1px solid var(--border);
  background: var(--surface); font-size: 0.82rem; color: var(--text);
  text-decoration: none; margin-top: 6px; transition: border-color 0.2s;
}
.chat-file:hover { border-color: var(--accent); text-decoration: none; }

/* ── COMPTE EN ATTENTE ── */
.account-pending {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 60vh; text-align: center;
  padding: 3rem;
}
.pending-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(251,191,36,0.1); border: 2px solid #fbbf24;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin-bottom: 1.5rem;
}
.pending-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.4);
  color: #fbbf24; font-family: var(--font-display); font-size: 0.65rem;
  letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 14px;
  margin-bottom: 1rem;
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
  .nav-links           { display: none; }
  .nav-burger          { display: flex; }
  .nav-credits-label   { display: none; }
  .nav-desktop-only    { display: none !important; }
  .notif-dropdown      { width: min(320px, calc(100vw - 2rem)); right: -2rem; }
  .container           { padding: 0 4vw; }
  section, .section    { padding: 60px 0; }
  .section-sm          { padding: 40px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row                  { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .sidebar        { position: static !important; }

  /* Menu compte client : au lieu d'une longue liste empilée, une rangée de
     pastilles qui défile horizontalement — plus rapide à parcourir sur mobile. */
  .sidebar-nav {
    display: flex; flex-direction: row; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-nav li { border-bottom: none; border-right: 1px solid var(--border); flex-shrink: 0; }
  .sidebar-nav li:last-child { border-right: none; }
  .sidebar-nav a {
    flex-direction: column; gap: 0.3rem; padding: 10px 16px;
    font-size: 0.6rem; border-left: none; border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .sidebar-nav a:hover { padding-left: 16px; }
  .sidebar-nav a.active { border-left-color: transparent; border-bottom-color: var(--accent); }

  .oscilloscope-wrap  { display: none; }
  .d-flex { flex-wrap: wrap; }
  .cta-inner { flex-direction: column; text-align: center; gap: 1.5rem; }
  .footer-grid          { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand         { grid-column: 1 / -1; }
  .table-wrap          { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chat-msg            { max-width: 85%; }

  /* GRILLES INLINE */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="position:sticky"], [style*="position: sticky"] { position: static !important; top: auto !important; }
  [style*="display:grid"], [style*="display: grid"] { display: flex !important; flex-direction: column !important; }

}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1rem; }
  .nav                 { padding: 0 4vw; height: 56px; }
  .nav-logo            { font-size: 1rem; }
  .nav-credits         { padding: 5px 9px; }
  .nav-credits-count   { font-size: 0.85rem; }
  .nav-bell            { width: 30px; height: 30px; font-size: 0.85rem; }
  .nav-profile         { padding: 6px 10px; font-size: 0.6rem; }
  .nav-cta             { padding: 6px 12px; font-size: 0.6rem; }
  .page-wrapper        { padding-top: 56px; }
  .nav-mobile          { top: 56px; }
  .notif-dropdown      { width: calc(100vw - 1rem); right: -1rem; top: calc(100% + 6px); }
  .container           { padding: 0 1rem; }
  section, .section    { padding: 48px 0; }
  .section-sm          { padding: 28px 0; }
  .card                { padding: 1rem; }
  .card-header         { flex-wrap: wrap; gap: 0.5rem; }
  .btn                 { padding: 10px 16px; font-size: 0.62rem; }
  .btn-sm              { padding: 7px 12px; font-size: 0.58rem; }
  .btn-block           { width: 100%; justify-content: center; }
  .form-control        { font-size: 16px; }
  select.form-control  { font-size: 16px; }
  /* Empêche le zoom automatique iOS/Android à l'ouverture du clavier : ces
     champs du widget de chat avaient une taille de police < 16px. Le
     "!important" est nécessaire ici car la règle de base (plus bas dans ce
     fichier) est déclarée après cette media query et l'emporterait sinon,
     peu importe que la condition de largeur soit vraie. */
  .rb-chat-field input, .rb-chat-field textarea, .rb-chat-panel-form input { font-size: 16px !important; }
  .stat-card .num      { font-size: 1.4rem; }
  .stat-card .lbl      { font-size: 0.65rem; }
  .table-wrap          { font-size: 0.8rem; border: 1px solid var(--border); }
  td, th               { padding: 8px 6px; }
  .credit-widget       { padding: 1.25rem; }
  .credit-widget .balance { font-size: 2.2rem; }
  .sidebar-nav a       { padding: 9px 12px; font-size: 0.56rem; }
  .page-header         { padding: 1.5rem 0; }
  .chat-msg            { max-width: 92%; }
  .chat-wrap           { max-height: 320px; padding: 0.75rem; }
  .chat-bubble         { font-size: 0.88rem; padding: 8px 12px; }
  .notif-dropdown      { position: fixed; left: 0.5rem; right: 0.5rem; width: auto; }
  .notif-dropdown::before { display: none; }
  .account-pending     { padding: 2rem 1rem; min-height: 50vh; }
  .footer-grid         { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .footer-brand        { grid-column: auto; }
  .footer-tagline      { max-width: none; margin-left: auto; margin-right: auto; }
  .footer-contact      { align-items: center; }
  .footer-social       { justify-content: center; }
  .footer-bottom       { text-align: center; }
  .accordion-header    { flex-wrap: wrap; gap: 0.5rem; }
  .credit-badge-lg     { font-size: 0.85rem; padding: 5px 10px; }
  .credit-badge-sm     { font-size: 0.75rem; padding: 4px 8px; }
  .pack-card           { padding: 1.25rem; }

  /* GRILLES INLINE */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="display:grid"], [style*="display: grid"] { display: flex !important; flex-direction: column !important; }
  .order-form-grid { display: flex !important; flex-direction: column !important; }

}

/* ============================================================
   RESPONSIVE — TRÈS PETIT MOBILE (≤ 380px)
   ============================================================ */
@media (max-width: 380px) {
  .nav-right           { gap: 0.4rem; }
  .nav-credits         { display: none; }
  .nav-burger          { padding: 6px 10px 6px 9px; }
  .nav-burger-label    { font-size: 0.56rem; }
  h1                   { font-size: 1.3rem; }
  .card                { padding: 0.875rem; }
  .btn                 { padding: 9px 12px; }
}

/* PAGE D'ACCUEIL */
/* .hero-label : mise en forme complète désormais définie dans le <style>
   propre à index.php (nouvelle pastille "Disponible maintenant" du hero v2),
   seule page qui utilise cette classe — pas de règle partagée ici. */
.hero-ctas { display:flex;gap:1rem;flex-wrap:wrap; }
.prestation-grid { display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--border); }
.prestation-item { padding:3rem 2.5rem;border-right:1px solid var(--border); }
.prestation-item:last-child { border-right:none; }
.prestation-img { width:100%;height:200px;object-fit:cover;margin-bottom:2rem;opacity:0.9; }
.prestation-cat { font-family:var(--font-display);font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:0.75rem;display:block; }
.prestation-title { font-size:1.15rem;font-weight:700;margin-bottom:0.75rem; }
.prestation-desc { font-size:0.9rem;color:var(--muted);line-height:1.75;margin-bottom:1.75rem; }
.steps { display:grid;grid-template-columns:repeat(4,1fr); }
.step { padding:2.5rem 2rem;border-right:1px solid var(--border); }
.step:last-child { border-right:none; }
.step-num { font-family:var(--font-display);font-size:0.58rem;letter-spacing:0.2em;color:var(--accent);margin-bottom:1.25rem;display:block; }
.step-title { font-size:0.95rem;font-weight:700;margin-bottom:0.5rem; }
.step-desc { font-size:0.85rem;color:var(--muted);line-height:1.7; }
.galerie { display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;min-height:520px; }
.galerie-item { position:relative;overflow:hidden; }
.galerie-item img { width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;display:block; }
.galerie-item:hover img { transform:scale(1.04); }
.galerie-item.span-rows { grid-row:span 2; }
.galerie-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,13,0.75) 0%,transparent 55%); }
.galerie-caption { position:absolute;bottom:1.5rem;left:1.75rem;color:#fff; }
.galerie-caption span { font-family:var(--font-display);font-size:0.55rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent); }
.galerie-caption h3 { font-size:1rem;margin-top:0.3rem; }
.galerie-border { border-left:1px solid var(--border);border-bottom:1px solid var(--border); }
.option-list { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border); }
.option-item { background:var(--bg2);padding:1.75rem 2rem; }
.option-tag { display:inline-block;margin-bottom:0.75rem;font-family:var(--font-display);font-size:0.55rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(230,48,48,0.25);padding:2px 8px; }
.option-desc { font-size:0.85rem;color:var(--muted);line-height:1.6; }
.avis-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:2rem; }
.avis-card { padding:2rem;border:1px solid var(--border); }
.avis-etoiles { color:var(--accent);letter-spacing:3px;font-size:0.8rem;margin-bottom:1rem; }
.avis-texte { font-size:0.92rem;color:var(--text);line-height:1.75;margin-bottom:1.25rem;font-style:italic; }
.avis-auteur { font-size:0.8rem;color:var(--muted); }
.avis-auteur strong { color:var(--text);display:block; }
.contact-line { display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--border); }
.contact-ico { width:40px;height:40px;border:1px solid var(--border);border-radius:10px;display:grid;place-items:center;flex-shrink:0; }
.ann-bar { background:var(--accent);height:32px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative; }
.ann-inner { position:relative;height:32px;width:100%;overflow:hidden; }
.ann-face { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:#0B0C10;font-weight:700;transition:opacity 0.5s,transform 0.5s; }
.cta-final { margin-top:20px;background:rgba(184,225,0,0.75);padding:2rem 8vw;display:flex;align-items:center;gap:2rem;flex-wrap:wrap; }
.cta-final h2 { color:#fff;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.2;margin-right:auto; }
.cta-final h2 span { opacity:0.55; }
.btn-blanc { display:inline-block;background:#fff;color:var(--accent);font-family:var(--font-display);font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;font-weight:700;padding:14px 28px;text-decoration:none;white-space:nowrap; }
.btn-blanc:hover { opacity:0.92;text-decoration:none; }
@media (max-width:900px) {
  .prestation-grid { grid-template-columns:1fr; }
  .prestation-item { border-right:none;border-bottom:1px solid var(--border); }
  .steps { grid-template-columns:1fr 1fr; }
  .galerie { grid-template-columns:1fr;grid-template-rows:260px 200px 200px; }
  .galerie-item.span-rows { grid-row:span 1; }
  .option-list { grid-template-columns:1fr; }
  .avis-grid { grid-template-columns:1fr; }
  .cta-final { flex-direction:column;align-items:flex-start; }
}
@media (max-width:600px) {
  .steps { grid-template-columns:1fr; }
}

/* PAGE PRESTATIONS */
.presta-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:3rem; }
.presta-card { position:relative;height:260px;overflow:hidden;border:1px solid var(--border);cursor:default; }
.presta-card img { width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease,filter 0.5s ease;display:block;filter:brightness(0.45); }
.presta-card:hover img { transform:scale(1.1);filter:brightness(0.6); }
.presta-card::after { content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,13,0.95) 0%,rgba(8,10,13,0.1) 65%,transparent 100%); }
.presta-card-body { position:absolute;bottom:0;left:0;right:0;padding:1.25rem 1.5rem;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:0.5rem; }
.presta-card-name { font-size:1rem;font-weight:700;color:#fff; }
.presta-card-price { font-family:var(--font-display);font-size:0.75rem;font-weight:700;color:var(--accent);white-space:nowrap;flex-shrink:0; }
@media (max-width:700px) { .presta-grid { grid-template-columns:1fr 1fr; } .presta-card { height:200px; } }
@media (max-width:480px) { .presta-grid { grid-template-columns:1fr; } }

/* PAGE FILESERVICE */
.stage-lbl, .opt-lbl { display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--border);cursor:pointer;transition:border-color 0.2s,background 0.2s;background:var(--surface); }
.stage-lbl:hover { border-color:rgba(230,48,48,0.5); }
.stage-lbl.selected { border-color:var(--accent);background:rgba(185,226,0,0.06); }
.opt-lbl { padding:0.875rem;opacity:1;transition:border-color 0.2s,opacity 0.2s; }
.opt-lbl.disabled { opacity:0.35;pointer-events:none;cursor:not-allowed; }
.opt-lbl.selected { border-color:var(--accent);background:rgba(185,226,0,0.06); }
.credit-badge { display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;background:rgba(230,48,48,0.15);border:1px solid rgba(230,48,48,0.4);color:#fff;border-radius:2px;white-space:nowrap; }
.credit-badge-lg { font-size:1rem;padding:6px 14px; }
.credit-badge-sm { font-size:0.85rem;padding:5px 12px; }

/* PAGE ACHETER CRÉDITS */
.pack-card {
  background:linear-gradient(165deg, rgba(26,29,40,0.9), rgba(19,21,28,0.9));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:1.75rem; position:relative; transition:border-color 0.2s, background 0.2s;
}
.pack-card.selected { border-color:var(--accent); background:rgba(185,226,0,0.06); }
.pack-card input[type=radio] { position:absolute;opacity:0;pointer-events:none; }
.bonus-tag {
  position:absolute; top:0; right:20px;
  background:var(--accent); color:#0B0C10;
  font-family:var(--font-display); font-size:0.6rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; padding:4px 10px;
  border-radius:0 0 6px 6px;
}

/* PAGE ACCOUNT — ACCORDION */
.accordion-header { display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;padding:0; }
.accordion-header:hover .accordion-toggle { color:var(--accent); }
.accordion-toggle { font-size:1rem;color:var(--muted);transition:transform 0.25s,color 0.2s;flex-shrink:0; }
.accordion-toggle.open { transform:rotate(180deg); }
.accordion-body { overflow:hidden;transition:max-height 0.3s ease,opacity 0.3s ease;max-height:0;opacity:0; }
.accordion-body.open { max-height:2000px;opacity:1; }

/* ── RDV — Styles calendrier (client + admin) ────────────── */
.rdv-type-lbl.selected { background: var(--bg2); }
.rdv-type-lbl input[type="radio"] { flex-shrink: 0; }

/* Grids forcées même sur mobile (le site empile les display:grid en colonne unique
   sur petits écrans — on force explicitement le comportement voulu ici) */
.rdv-cal-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px;
}
.rdv-cal-days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px;
}
.rdv-slots-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
  gap: 0.5rem;
}

#slots-grid button:hover,
.rdv-slots-grid button:hover { border-color: var(--accent); }
#slots-grid button:disabled,
.rdv-slots-grid button:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 480px) {
  .rdv-cal-days button { font-size: 0.72rem; padding: 5px 0; }
  #mini-cal, .rs-mini-cal { padding: 0.75rem !important; }
}

/* ── WIDGET CHAT PUBLIC (FAQ + discussion en direct) ──────────
   Le conteneur est placé juste après .page-wrapper dans footer.php (donc pas
   d'ancêtre avec un "transform" au-dessus) pour que position:fixed reste bien
   calé sur l'écran, comme pour le tiroir mobile de l'admin. */
.rb-chat-widget { position: fixed; bottom: 22px; right: 22px; z-index: 950; font-family: var(--font-body); }
.rb-chat-bubble {
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), #8fb300); color: #0B0C10;
  font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -6px rgba(185,226,0,0.55); position: relative;
  transition: transform 0.15s ease;
}
.rb-chat-bubble:hover { transform: translateY(-2px); }
.rb-chat-bubble-dot {
  position: absolute; top: -3px; right: -3px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--accent2); border: 2px solid var(--bg);
}
.rb-chat-panel {
  position: fixed; bottom: 92px; right: 22px;
  width: min(360px, calc(100vw - 2rem));
  max-height: min(560px, calc(100vh - 140px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.rb-chat-widget.rb-chat-open .rb-chat-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.rb-chat-panel-header {
  padding: 0.9rem 1.1rem;
  background: linear-gradient(135deg, rgba(185,226,0,0.12), rgba(255,107,53,0.08));
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-size: 0.76rem; font-weight: 700;
  flex-shrink: 0;
}
.rb-chat-panel-header button { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 2px; }
.rb-chat-panel-header button:hover { color: var(--accent); }
.rb-chat-panel-title { flex: 1; text-align: center; }
.rb-chat-status {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;
  border-bottom: 1px solid var(--border); font-size: 0.7rem; color: var(--muted); flex-shrink: 0;
}
.rb-chat-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rb-chat-status-dot.online { background: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,0.2); }
.rb-chat-status-dot.absent { background: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,0.2); }
.rb-chat-sender-name {
  display: block; font-size: 0.68rem; color: var(--muted); margin: 0.1rem 0 -0.15rem 0.2rem;
}
.rb-chat-system-notice {
  text-align: center; font-size: 0.75rem; color: var(--muted); margin: 0.4rem 0;
  padding: 0.4rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.rb-chat-panel-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; scroll-behavior: smooth; }
.rb-chat-intro { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.7rem; }
.rb-chat-faq-item { border-bottom: 1px solid var(--border); }
.rb-chat-faq-item:last-of-type { border-bottom: none; }
.rb-chat-faq-q {
  width: 100%; text-align: left; background: none; border: none; color: var(--text);
  padding: 0.65rem 0; font-size: 0.83rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.rb-chat-faq-q span { color: var(--accent); font-size: 1rem; flex-shrink: 0; transition: transform 0.2s; }
.rb-chat-faq-q.open span { transform: rotate(45deg); }
.rb-chat-faq-a { display: none; font-size: 0.8rem; color: var(--muted); line-height: 1.55; padding: 0 0 0.85rem; }
.rb-chat-faq-a.open { display: block; }
.rb-chat-escalate { margin-top: 1rem; text-align: center; }
.rb-chat-escalate p { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.6rem; }
.rb-chat-field { margin-bottom: 0.6rem; }
.rb-chat-field input, .rb-chat-field textarea {
  width: 100%; box-sizing: border-box; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); padding: 0.6rem 0.8rem; font-size: 0.85rem;
  font-family: var(--font-body); resize: vertical;
}
.rb-chat-field input.rb-chat-field-invalid { border-color: #f87171; }
.rb-chat-field-error { display: none; color: #f87171; font-size: 0.7rem; margin-top: 0.3rem; }
.rb-chat-thread { display: flex; flex-direction: column; gap: 0.55rem; }
.rb-chat-bubble-msg { max-width: 85%; padding: 0.55rem 0.8rem; border-radius: 12px; font-size: 0.83rem; line-height: 1.5; }
.rb-chat-bubble-msg.visitor { align-self: flex-end; background: linear-gradient(135deg, var(--accent), #d6ff2e); color: #0B0C10; }
.rb-chat-bubble-msg.staff { align-self: flex-start; background: var(--bg2); border: 1px solid var(--border); }
.rb-chat-bubble-msg.manou, .rb-chat-bubble-msg.manou_fallback { align-self: flex-start; background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.35); }
.rb-chat-panel-form { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.rb-chat-panel-form input {
  flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); padding: 0.55rem 0.8rem; font-size: 0.85rem;
}
.rb-chat-panel-form button {
  background: var(--accent); border: none; border-radius: 10px; width: 38px;
  color: #0B0C10; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
@media (max-width: 480px) {
  .rb-chat-widget { bottom: 14px; right: 14px; }
  /* Plein écran sur mobile : sinon, quand le clavier s'ouvre pour écrire un
     message, la hauteur visible se réduit et le bouton « Envoyer » peut se
     retrouver hors champ, obligeant à faire défiler la page pour l'atteindre.
     En plein écran, le champ + bouton restent toujours calés en bas de
     l'écran visible grâce à la mise en page flex de .rb-chat-panel. */
  .rb-chat-panel {
    top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
    max-height: none; border-radius: 0;
  }
}

/* ── Bulle proactive « Besoin d'aide ? » ────────────────────── */
.rb-chat-proactive {
  position: absolute; bottom: 74px; right: 0; display: flex; align-items: center; gap: 0.6rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.7rem 0.95rem; font-size: 0.85rem; color: var(--text); cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.55); white-space: nowrap;
  animation: rbChatProactiveIn 0.3s ease;
}
.rb-chat-proactive::after {
  content: ''; position: absolute; bottom: -6px; right: 22px; width: 12px; height: 12px;
  background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.rb-chat-proactive-close {
  background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.7rem; padding: 2px; flex-shrink: 0;
}
.rb-chat-proactive-close:hover { color: var(--accent); }
@keyframes rbChatProactiveIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  .rb-chat-proactive { right: 0; max-width: calc(100vw - 28px); }
}

/* ── Bandeau cookies (RGPD) ──────────────────────────────────── */
/* Petite carte flottante en bas à gauche (plutôt qu'une barre pleine largeur) :
   très transparente (façon verre dépoli) et compacte, pour que le texte et
   les boutons restent proches les uns des autres. z-index sous celui du
   widget de chat (950) — et le JS remonte temporairement la bulle de chat
   pendant que ce bandeau est affiché, pour éviter tout chevauchement. */
.rb-cookie-banner {
  position: fixed; left: 18px; bottom: 18px; z-index: 940;
  width: min(360px, calc(100vw - 36px));
  background: rgba(26,29,40,0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 16px;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.55);
  padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.85rem;
  font-family: var(--font-body);
  transition: bottom 0.15s ease;
}
.rb-cookie-top { display: flex; align-items: flex-start; gap: 0.65rem; }
.rb-cookie-icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.rb-cookie-text { flex: 1; }
.rb-cookie-banner p { font-size: 0.78rem; color: var(--text); margin: 0; line-height: 1.5; }
.rb-cookie-banner a { color: var(--accent); text-decoration: underline; }
.rb-cookie-actions { display: flex; gap: 0.55rem; }
.rb-cookie-actions .btn { flex: 1; justify-content: center; }
@media (max-width: 600px) {
  .rb-cookie-banner { left: 12px; bottom: 12px; padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)); }
}

/* ── Pop-up promo / alerte (admin/popup.php) ────────────────── */
.rb-site-popup-overlay {
  position: fixed; inset: 0; z-index: 970; background: rgba(11,12,16,0.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 1.25rem;
  animation: rbPopupFadeIn 0.2s ease;
}
.rb-site-popup-box {
  position: relative; width: min(500px, 100%); background: var(--surface);
  border: 1px solid rgba(185,226,0,0.35); border-radius: 20px; padding: 2.5rem 2.25rem 2.25rem;
  /* Ombre + légère lueur accent pour que ça ressorte bien comme une offre à ne pas manquer. */
  box-shadow: 0 34px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(185,226,0,0.08), 0 20px 60px -15px rgba(185,226,0,0.18);
  animation: rbPopupIn 0.25s ease;
}
.rb-site-popup-close {
  position: absolute; top: 1rem; right: 1rem; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1rem; cursor: pointer; padding: 0;
}
.rb-site-popup-close:hover { color: var(--accent); border-color: rgba(185,226,0,0.5); }
.rb-site-popup-title {
  font-family: var(--font-display); font-size: 1.55rem; margin: 0 0 1rem; padding-right: 1.5rem; line-height: 1.3;
}
.rb-site-popup-message { font-size: 1.02rem; color: var(--text); line-height: 1.65; margin: 0; white-space: pre-line; }
@media (max-width: 480px) {
  .rb-site-popup-box { padding: 2.1rem 1.5rem 1.75rem; }
  .rb-site-popup-title { font-size: 1.3rem; }
}
@keyframes rbPopupFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rbPopupIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ── Roue de la fortune (mode "jeu" de la pop-up, admin/popup.php) ── */
.rb-site-popup-box-wheel { text-align: center; }
.rb-site-popup-box-wheel .rb-site-popup-title { text-align: center; padding-right: 0; }
.rb-wheel-wrap { position: relative; width: 236px; height: 236px; margin: 0.75rem auto 0.4rem; }

/* Petit pointeur façon "roue de foire" : triangle + gemme ronde au-dessus. */
.rb-wheel-pointer {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-top: 24px solid var(--accent2); filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55));
}
.rb-wheel-pointer::after {
  content: ''; position: absolute; top: -20px; left: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent2) 55%, #9a3d1e 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.rb-wheel-disc {
  width: 220px; height: 220px; border-radius: 50%; position: absolute; top: 8px; left: 8px; overflow: hidden;
  /* Anneau doré façon roue de foire, en plusieurs couches concentriques. */
  box-shadow:
    0 0 0 3px #12141c,
    0 0 0 7px #FFD166,
    0 0 0 9px rgba(0,0,0,0.45),
    0 16px 34px -10px rgba(0,0,0,0.7),
    inset 0 0 26px rgba(0,0,0,0.45);
  /* 8 parts égales de 45° — l'ordre doit rester synchronisé avec la liste des
     lots dans includes/footer.php (SEGMENTS) et getPopupWheelPrizes() côté
     PHP. Couleurs pensées pour se voir clairement d'un coup d'œil : rouge
     sombre = PERDU, bleu nuit = jamais gagnable (juste pour donner envie),
     lime/orange = vraies réductions, doré = goodies (le plus rare). Un fin
     liseré doré est superposé à chaque jointure pour un rendu "roue" propre. */
  background:
    repeating-conic-gradient(from 0deg, rgba(255,214,102,0.9) 0deg 1.4deg, transparent 1.4deg 45deg),
    conic-gradient(
      from 0deg,
      #232842 0deg 45deg,
      #5c1f2b 45deg 90deg,
      #b9e200 90deg 135deg,
      #5c1f2b 135deg 180deg,
      #232842 180deg 225deg,
      #5c1f2b 225deg 270deg,
      #FF6B35 270deg 315deg,
      #FFD166 315deg 360deg
    );
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.16, 0.99);
}

/* Petits points lumineux tout autour du pourtour, façon ampoules de foire. */
.rb-wheel-dot {
  position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%;
  transform-origin: 0 0;
  transform: rotate(calc(var(--i) * 45deg)) translate(-50%, -122px);
  background: radial-gradient(circle at 35% 30%, #fff, #FFD166 55%, #b8860b 100%);
  box-shadow: 0 0 6px 1px rgba(255,209,102,0.75);
  z-index: 2;
}

.rb-wheel-label {
  /* Centrée dans sa part (décalage de 22.5° = la moitié des 45° d'une part)
     pour que le texte tombe bien EN FACE de sa couleur, pas sur la couture
     entre deux couleurs. */
  position: absolute; top: 50%; left: 50%; width: 62px;
  transform-origin: 0 0;
  transform: rotate(calc(var(--i) * 45deg + 22.5deg)) translate(-50%, -80px);
  text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: 0.56rem; letter-spacing: 0.02em; color: #fff; line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0,0,0,0.65);
}
.rb-wheel-label-lost { color: rgba(255,255,255,0.82); font-weight: 600; }
/* Texte sombre sur les parts claires (lime / doré) pour rester lisible. */
.rb-wheel-label-dark { color: #1a1d28; text-shadow: 0 1px 1px rgba(255,255,255,0.4); }

/* Petit écusson central façon toupie, posé par-dessus le centre de la roue. */
.rb-wheel-hub {
  position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; border-radius: 50%;
  transform: translate(-50%, -50%); z-index: 2;
  background: radial-gradient(circle at 35% 30%, #eaffb0, var(--accent) 55%, #6f8600 100%);
  border: 2px solid rgba(255,255,255,0.55);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 0.85rem; letter-spacing: 0.03em; color: #12141c;
}

.rb-wheel-result-emoji { font-size: 2.4rem; margin: 0 0 0.4rem; }
.rb-wheel-code-box {
  margin-top: 1rem; padding: 1rem 1.1rem; border: 1px dashed rgba(185,226,0,0.4);
  border-radius: 12px; background: rgba(185,226,0,0.06);
}
.rb-wheel-code {
  display: inline-block; font-family: var(--font-display); font-size: 1.6rem;
  font-weight: 900; letter-spacing: 0.25em; color: var(--accent);
}
.rb-wheel-code-hint { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 480px) {
  .rb-wheel-wrap { width: 206px; height: 206px; }
  .rb-wheel-disc { width: 190px; height: 190px; top: 8px; left: 8px; }
  .rb-wheel-label { width: 54px; transform: rotate(calc(var(--i) * 45deg + 22.5deg)) translate(-50%, -69px); font-size: 0.5rem; }
  .rb-wheel-dot { transform: rotate(calc(var(--i) * 45deg)) translate(-50%, -105px); width: 6px; height: 6px; }
  .rb-wheel-hub { width: 36px; height: 36px; font-size: 0.75rem; }
  .rb-wheel-code { font-size: 1.35rem; letter-spacing: 0.2em; }
}