/* ==========================================================================
   BCDP – Business Consulting & Digital Payments
   Feuille de style principale du thème.
   Base de mise en page : NexusAI (Bestwpware / ThemeWagon, licence MIT),
   entièrement ré-habillée aux couleurs et à la typographie de la marque BCDP.
   ========================================================================== */

/* ---------- Police : Poppins (hébergée localement) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins/poppins-latin-700-normal.woff2") format("woff2"); }

/* ---------- Variables : thème sombre (par défaut, « Nuit abyssale ») ---------- */
:root {
  --bg: #04141f;
  --bg2: #061b29;
  --bg3: #08222f;
  --sf: #0a2838;
  --bd: rgba(255, 255, 255, 0.08);
  --bd2: rgba(255, 255, 255, 0.16);
  --tx: #f1f5f9;
  --tx2: #aec0cf;
  --tx3: #7c93a6;

  --acc: #2dd4bf;   /* turquoise */
  --acc2: #60a5fa;  /* bleu ciel */
  --acc3: #a5b4fc;  /* lavande */
  --grad: linear-gradient(90deg, #2dd4bf 0%, #60a5fa 50%, #a5b4fc 100%);
  --on-grad: #04141f;
  --accsoft: rgba(45, 212, 191, 0.12);
  --accline: rgba(45, 212, 191, 0.3);
  --glow: rgba(45, 212, 191, 0.35);
  --aur-a: rgba(15, 118, 110, 0.34);
  --aur-b: rgba(29, 78, 216, 0.28);
  --nav-bg: rgba(4, 20, 31, 0.78);
  --nav-bg-s: rgba(4, 20, 31, 0.96);
  --shadow: rgba(0, 0, 0, 0.45);
  --hover: rgba(255, 255, 255, 0.06);

  --ok: #34d399;   --ok-bg: rgba(52, 211, 153, 0.12);
  --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, 0.12);
  --err: #f87171;  --err-bg: rgba(248, 113, 113, 0.12);
  --info: #60a5fa; --info-bg: rgba(96, 165, 250, 0.12);
  --ind: #a5b4fc;  --ind-bg: rgba(165, 180, 252, 0.13);

  --nav: 76px;
  --dsb: 248px;
  color-scheme: dark;
}

/* ---------- Thème clair ---------- */
.lm {
  --bg: #ffffff;
  --bg2: #f1f5f9;
  --bg3: #e6edf4;
  --sf: #ffffff;
  --bd: rgba(4, 20, 31, 0.09);
  --bd2: rgba(4, 20, 31, 0.18);
  --tx: #04141f;
  --tx2: #475569;
  --tx3: #586a80;

  --acc: #0f766e;
  --acc2: #1d4ed8;
  --acc3: #4338ca;
  --grad: linear-gradient(90deg, #0f766e 0%, #1d4ed8 50%, #4338ca 100%);
  --on-grad: #ffffff;
  --accsoft: rgba(15, 118, 110, 0.09);
  --accline: rgba(15, 118, 110, 0.28);
  --glow: rgba(29, 78, 216, 0.32);
  --aur-a: rgba(15, 118, 110, 0.13);
  --aur-b: rgba(67, 56, 202, 0.12);
  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-bg-s: rgba(255, 255, 255, 0.97);
  --shadow: rgba(4, 20, 31, 0.16);
  --hover: rgba(4, 20, 31, 0.05);

  --ok: #047857;   --ok-bg: rgba(4, 120, 87, 0.1);
  --warn: #b45309; --warn-bg: rgba(180, 83, 9, 0.1);
  --err: #b91c1c;  --err-bg: rgba(185, 28, 28, 0.09);
  --info: #1d4ed8; --info-bg: rgba(29, 78, 216, 0.09);
  --ind: #4338ca;  --ind-bg: rgba(67, 56, 202, 0.1);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 12px); }
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--tx);
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}
body.bo-open { overflow: hidden; }
#landing { overflow-x: clip; }
#main > section { overflow-x: clip; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 3000; background: var(--sf); color: var(--tx); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.gt { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.slbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--acc); margin-bottom: 14px;
}
.slbl::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); }
.stitle { font-size: clamp(1.65rem, 3.4vw, 2.35rem); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; margin-bottom: 14px; }
.ssub { font-size: 1.05rem; color: var(--tx2); max-width: 600px; }
.ctext { font-size: 1rem; color: var(--tx2); margin-bottom: 0; }
.csmall { font-size: 0.9rem; color: var(--tx3); margin-bottom: 8px; }
.eyebrow { font-size: 0.74rem; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 14px; }

.aur { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.aur-a { width: 600px; height: 600px; background: radial-gradient(circle, var(--aur-a), transparent 70%); }
.aur-b { width: 500px; height: 500px; background: radial-gradient(circle, var(--aur-b), transparent 70%); }

.gc { background: var(--sf); border: 1px solid var(--bd); border-radius: 18px; transition: 0.3s; }
.gc:hover { border-color: var(--accline); transform: translateY(-3px); box-shadow: 0 16px 50px var(--shadow); }

/* Boutons de la marque : pastilles à dégradé */
.bgrd {
  background: var(--grad); border: none; color: var(--on-grad); font-weight: 500;
  border-radius: 999px; transition: filter 0.2s, transform 0.2s, box-shadow 0.2s; cursor: pointer;
}
.bgrd:hover, .bgrd:focus-visible { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 24px var(--glow); color: var(--on-grad); }
.bgrd:disabled { opacity: 0.6; cursor: wait; transform: none; }
.boc {
  background: transparent; border: 1px solid var(--bd2); color: var(--tx); font-weight: 500;
  border-radius: 999px; transition: 0.25s; cursor: pointer;
}
.boc:hover { border-color: var(--acc); background: var(--accsoft); color: var(--tx); }
.icon-btn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.65s, transform 0.65s; }
.js .rv.in { opacity: 1; transform: none; }
.sp { padding: 90px 0; }
.page-section { padding-top: calc(var(--nav) + 60px); min-height: 70vh; }

/* ---------- Logos selon le thème ---------- */
.brand { display: inline-flex; align-items: center; }
.brand img { height: 52px; width: auto; }
.logo-light { display: none; }
.lm .logo-dark { display: none; }
.lm .logo-light { display: inline-block; }
#suni { display: none; }
.lm #suni { display: inline; }
.lm #mooni { display: none; }

/* ---------- Navigation ---------- */
#nbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030; height: var(--nav);
  background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bd); display: flex; align-items: center;
  transition: background 0.3s, box-shadow 0.3s;
}
#nbar.scr { background: var(--nav-bg-s); box-shadow: 0 4px 28px var(--shadow); }
.nav-link { color: var(--tx2) !important; font-weight: 500; font-size: 0.92rem; padding: 6px 14px !important; border-radius: 8px; transition: 0.2s !important; }
.nav-link:hover { color: var(--tx) !important; background: var(--hover) !important; }
#mbmenu {
  position: fixed; top: var(--nav); left: 0; right: 0; z-index: 1029; background: var(--nav-bg-s);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 14px 20px 20px;
  border-bottom: 1px solid var(--bd); display: none; max-height: calc(100vh - var(--nav)); overflow-y: auto;
}
#mbmenu.open { display: block; }
#mbmenu .border-bottom { border-color: var(--bd) !important; }

/* ---------- Hero ---------- */
#hero { min-height: 100vh; padding: calc(var(--nav) + 56px) 0 70px; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: center; }
.hbadge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 10px; border-radius: 100px;
  background: var(--accsoft); border: 1px solid var(--accline); font-size: 0.8rem; font-weight: 500; color: var(--acc); margin-bottom: 22px;
}
.bdot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); animation: bpls 2s infinite; flex-shrink: 0; }
.h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.025em; margin-bottom: 22px; }
.hero-sub { max-width: 640px; font-size: clamp(1rem, 1.7vw, 1.15rem); color: var(--tx2); margin-bottom: 36px; }
.tlog { font-size: 0.9rem; font-weight: 600; color: var(--tx2); opacity: 0.55; transition: 0.3s; }
.tlog:hover { opacity: 1; color: var(--acc); }

/* Aperçu du back-office dans le hero */
.dwrap { border-radius: 26px; overflow: hidden; background: var(--sf); border: 1px solid var(--bd2); box-shadow: 0 40px 100px var(--shadow), 0 0 40px var(--accsoft); text-align: left; }
.dtbar { background: var(--bg3); padding: 11px 16px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--bd); }
.dd { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dtitle { font-size: 0.76rem; color: var(--tx3); }
.dgrid { display: grid; grid-template-columns: 200px 1fr; }
.dside { background: var(--bg2); border-right: 1px solid var(--bd); padding: 14px 10px; }
.dsec { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tx3); padding: 0 10px 10px; font-weight: 700; }
.dsi { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 0.82rem; color: var(--tx3); margin-bottom: 3px; }
.dsi i { width: 16px; text-align: center; }
.dsi.on { background: var(--accsoft); color: var(--acc); }
.stpill { background: var(--bg3); border: 1px solid var(--bd); border-radius: 12px; padding: 12px; position: relative; overflow: hidden; height: 100%; }
.stpill::after, .bo-stat::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--grad); opacity: 0.7; }
.stv { font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.stl { font-size: 0.7rem; color: var(--tx3); }
.std { font-size: 0.7rem; font-weight: 600; }
.std.up, .bo-sd.up { color: var(--ok); }
.std.info { color: var(--info); }
.dbox { background: var(--bg3); border: 1px solid var(--bd); border-radius: 12px; padding: 14px; height: 100%; }
.dbox-t { font-size: 0.74rem; color: var(--tx3); margin-bottom: 10px; font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 76px; }
.bbar { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(to top, var(--acc3), var(--acc)); transform-origin: bottom; animation: bgrow 0.8s ease forwards; }
.daylbl { font-size: 0.62rem; color: var(--tx3); }
.livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); margin-right: 6px; animation: bpls 2s infinite; }
.frow { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.78rem; border-bottom: 1px solid var(--bd); }
.frow:last-child { border-bottom: none; }
.ftxt { color: var(--tx2); flex: 1; }
.famt { font-weight: 600; font-variant-numeric: tabular-nums; }
.fdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fdot.ok { background: var(--ok); }
.fdot.wait { background: var(--warn); }
.fdot.fail { background: var(--err); }
@media (max-width: 991px) { .dgrid { grid-template-columns: 1fr; } .dside { display: none; } }

/* ---------- Repères ---------- */
#proof { background: var(--bg2); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); padding: 44px 0; }
.pnum { font-size: 1.9rem; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; }
.plbl { font-size: 0.82rem; color: var(--tx3); margin-top: 3px; }
.lscroll { overflow: hidden; margin-top: 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ltrack { display: flex; gap: 44px; width: max-content; animation: lscr 40s linear infinite; }
.lbr { font-size: 0.92rem; font-weight: 600; color: var(--tx3); opacity: 0.7; white-space: nowrap; }

/* ---------- Cartes et pictogrammes ---------- */
.icbox { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; border: 1px solid transparent; }
.ic-red { background: var(--err-bg); color: var(--err); border-color: var(--err-bg); }
.ic-amber { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bg); }
.ic-ind { background: var(--ind-bg); color: var(--ind); border-color: var(--ind-bg); }
.ic-teal { background: var(--accsoft); color: var(--acc); border-color: var(--accsoft); }
.ic-blue { background: var(--info-bg); color: var(--info); border-color: var(--info-bg); }
.ic-green { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bg); }
.ftico { width: 48px; height: 48px; border-radius: 13px; background: var(--grad); display: flex; align-items: center; justify-content: center; color: var(--on-grad); font-size: 1.05rem; margin-bottom: 16px; flex-shrink: 0; }
.ftag { display: inline-block; margin-top: 12px; padding: 3px 12px; border-radius: 100px; font-size: 0.74rem; font-weight: 500; background: var(--accsoft); color: var(--acc); border: 1px solid var(--accline); }
.hnum { width: 56px; height: 56px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: var(--on-grad); margin: 0 auto 18px; box-shadow: 0 8px 24px var(--glow); }
.pfl-list { list-style: none; padding: 0; margin: 0 0 8px; }
.pfl { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 1rem; color: var(--tx2); }
.pchk { width: 22px; height: 22px; border-radius: 6px; background: var(--ok-bg); border: 1px solid var(--ok-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.7rem; color: var(--ok); margin-top: 2px; }
.demo-card { padding: 26px; }
.demo-card:hover { transform: none; }
.arow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg3); border: 1px solid var(--bd); border-radius: 12px; margin-bottom: 10px; font-size: 0.92rem; }
.arow:last-child { margin-bottom: 0; }
.bst { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 100px; border: 1px solid transparent; white-space: nowrap; }
.son { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bg); }
.sid { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bg); }
.sfl { background: var(--err-bg); color: var(--err); border-color: var(--err-bg); }
.sbz { background: var(--info-bg); color: var(--info); border-color: var(--info-bg); }

/* ---------- FAQ ---------- */
.acco .accordion-item { background: var(--sf); border: 1px solid var(--bd); border-radius: 18px !important; margin-bottom: 10px; overflow: hidden; }
.acco .accordion-button { background: var(--sf); color: var(--tx); font-weight: 600; font-size: 1rem; box-shadow: none; border-radius: 18px !important; padding: 18px 22px; }
.acco .accordion-button:not(.collapsed) { background: var(--accsoft); color: var(--acc); }
.acco .accordion-button::after { filter: invert(1) brightness(1.4); }
.lm .acco .accordion-button::after { filter: none; }
.acco .accordion-body { color: var(--tx2); font-size: 1rem; line-height: 1.7; padding: 4px 22px 20px; background: var(--sf); }

/* ---------- Appel à l'action ---------- */
#cta { padding: 110px 0; position: relative; overflow: hidden; background: var(--bg3); text-align: center; }
.cta-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 400px; max-width: 100%; background: radial-gradient(ellipse, var(--accsoft), transparent 70%); pointer-events: none; }
.cta-title { font-size: clamp(1.9rem, 4.6vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; margin-bottom: 18px; }
.cta-sub { font-size: 1.1rem; color: var(--tx2); max-width: 520px; margin: 0 auto 36px; }

/* ---------- Contact ---------- */
.cinfo { display: flex; flex-direction: column; gap: 14px; }
.cinfo-item { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.cinfo-item .ftico { margin: 0; }
.cinfo-l { display: block; font-size: 0.78rem; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.08em; }
.cinfo-v { display: block; font-weight: 500; word-break: break-word; }
.form-card:hover { transform: none; }
.olbl { font-size: 0.86rem; font-weight: 500; color: var(--tx2); margin-bottom: 6px; display: block; }
.req { color: var(--acc); }
.oinp {
  width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--bd2); background: var(--bg2);
  color: var(--tx); font-size: 0.95rem; outline: none; transition: 0.2s; margin-bottom: 0; display: block;
}
.offcanvas .oinp, .bo-card .oinp { margin-bottom: 0; }
textarea.oinp { resize: vertical; min-height: 120px; }
select.oinp { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237c93a6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
.oinp::placeholder { color: var(--tx3); opacity: 0.8; }
.oinp:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accsoft); }
.oinp.is-invalid { border-color: var(--err); }
.ferr { color: var(--err); font-size: 0.8rem; min-height: 0; margin-top: 4px; }
.chk { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--tx2); cursor: pointer; }
.chk input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--acc); flex-shrink: 0; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-alert { border-radius: 12px; padding: 12px 16px; font-size: 0.92rem; margin-bottom: 16px; border: 1px solid transparent; }
.form-alert.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bg); }
.form-alert.err { background: var(--err-bg); color: var(--err); border-color: var(--err-bg); }
.offcanvas { width: 460px; max-width: 100vw; background: var(--bg2); color: var(--tx); border-left: 1px solid var(--bd2); }
.offcanvas-header { border-bottom: 1px solid var(--bd); padding: 20px 24px; }
.offcanvas-body { padding: 24px; }
.offcanvas-title { font-weight: 700; color: var(--tx); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); opacity: 0.7; }
.lm .btn-close { filter: none; }

/* ---------- Pied de page ---------- */
#foot { background: var(--bg); border-top: 1px solid var(--bd); padding: 60px 0 28px; }
.ftagline { font-size: 0.95rem; color: var(--tx3); line-height: 1.65; max-width: 340px; }
.fcol h5 { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tx3); margin-bottom: 14px; }
.fcol a, .fplain { display: block; font-size: 0.93rem; color: var(--tx2); padding: 3px 0; transition: 0.2s; word-break: break-word; }
.fcol a:hover { color: var(--acc); }
.fbottom { border-top: 1px solid var(--bd); }
.fcopy { font-size: 0.82rem; color: var(--tx3); }
.fcopy a { color: var(--tx2); text-decoration: underline; text-underline-offset: 2px; }
.fcopy a:hover { color: var(--acc); }
.fcredit { font-size: 0.75rem; opacity: 0.85; }
.sico { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bd2); display: flex; align-items: center; justify-content: center; color: var(--tx2); transition: 0.2s; font-size: 0.9rem; }
.sico:hover { border-color: var(--acc); color: var(--acc); }

/* ---------- Pages internes ---------- */
.entry-content { color: var(--tx2); font-size: 1.02rem; }
.entry-content h2, .entry-content h3 { color: var(--tx); margin-top: 2rem; font-weight: 600; }
.entry-content a { color: var(--acc); text-decoration: underline; }

/* ---------- Notifications éphémères (toasts) ---------- */
.toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 1090; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 40px); }
.bcdp-toast { background: var(--sf); color: var(--tx); border: 1px solid var(--bd2); border-left: 3px solid var(--acc); border-radius: 12px; padding: 12px 16px; font-size: 0.9rem; box-shadow: 0 12px 40px var(--shadow); animation: fadeIn 0.25s ease; max-width: 360px; }

/* ==========================================================================
   BACK-OFFICE DE DÉMONSTRATION
   ========================================================================== */
#bo {
  position: fixed; inset: 0; z-index: 1040; display: grid; grid-template-columns: var(--dsb) minmax(0, 1fr);
  background: var(--bg); color: var(--tx);
}
#bo[hidden] { display: none !important; }
.bo-side { background: var(--bg2); border-right: 1px solid var(--bd); display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
.bo-logo { padding: 18px 20px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 12px; }
.bo-logo img { height: 36px; width: auto; }
.bo-logo strong { display: block; font-size: 1.05rem; line-height: 1.1; }
.bo-logo small { display: block; font-size: 0.72rem; color: var(--tx3); }
.bo-nav { flex: 1; padding: 16px 12px; }
.bo-nav-sec { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tx3); padding: 0 10px; margin: 16px 0 8px; }
.bo-nl {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-size: 0.9rem; color: var(--tx2);
  margin-bottom: 3px; cursor: pointer; border: none; width: 100%; background: transparent; text-align: left; transition: 0.2s; position: relative;
}
.bo-nl i { width: 18px; text-align: center; font-size: 0.92rem; }
.bo-nl:hover { background: var(--hover); color: var(--tx); }
.bo-nl.active { background: var(--accsoft); color: var(--acc); font-weight: 600; }
.bo-nl.active::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; background: var(--grad); border-radius: 0 3px 3px 0; }
.bo-badge { margin-left: auto; background: var(--acc); color: var(--on-grad); font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; }
.bo-badge.warn { background: var(--warn); color: #04141f; }
.bo-badge:empty, .bo-badge[data-zero="1"] { display: none; }
.bo-bottom { padding: 14px 12px; border-top: 1px solid var(--bd); }
.bo-cta { background: var(--bg3); border: 1px solid var(--bd); border-radius: 14px; padding: 14px; }
.bo-scrim { display: none; }

.bo-main { height: 100%; overflow-y: auto; position: relative; scroll-behavior: smooth; }
.bo-top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 12px 28px;
  background: var(--nav-bg-s); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--bd);
}
.bo-search { position: relative; flex: 1; max-width: 380px; }
.bo-search input { width: 100%; padding: 9px 14px 9px 38px; border-radius: 999px; border: 1px solid var(--bd2); background: var(--sf); color: var(--tx); font-size: 0.88rem; outline: none; }
.bo-search input:focus { border-color: var(--acc); }
.bo-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tx3); font-size: 0.85rem; }
.bo-top .icon-btn { width: 38px; height: 38px; }
#boTheme [data-ic="light"] { display: none; }
.lm #boTheme [data-ic="light"] { display: inline; }
.lm #boTheme [data-ic="dark"] { display: none; }
.bo-dd-wrap { position: relative; }
.bell-dot { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--err); border: 2px solid var(--bg); }
.bo-user { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid var(--bd2); background: transparent; color: var(--tx); cursor: pointer; transition: 0.2s; }
.bo-user:hover { border-color: var(--acc); background: var(--accsoft); }
.bo-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: var(--on-grad); display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; }
.bo-avatar.lg { width: 56px; height: 56px; font-size: 1.1rem; }
.bo-dd { position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; background: var(--bg2); border: 1px solid var(--bd2); border-radius: 16px; box-shadow: 0 20px 60px var(--shadow); width: 360px; max-width: calc(100vw - 24px); overflow: hidden; display: none; animation: fadeIn 0.2s ease; }
.bo-dd.open { display: block; }
.bo-dd-sm { width: 240px; padding: 8px; }
.bo-dd-head { padding: 14px 16px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.92rem; }
.cnt { background: var(--err-bg); color: var(--err); font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; margin-left: 6px; }
.link-btn { background: none; border: none; color: var(--acc); font-size: 0.78rem; cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.bo-dd-body { padding: 10px; max-height: 360px; overflow-y: auto; }
.notif { display: flex; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--bd); margin-bottom: 8px; background: var(--sf); }
.notif.unread { background: var(--accsoft); border-color: var(--accline); }
.ni { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem; }
.ni.ok { background: var(--ok-bg); color: var(--ok); }
.ni.warn { background: var(--warn-bg); color: var(--warn); }
.ni.err { background: var(--err-bg); color: var(--err); }
.ni.info { background: var(--info-bg); color: var(--info); }
.ntime { font-size: 0.72rem; color: var(--tx3); margin-top: 2px; }
.pm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; font-size: 0.9rem; color: var(--tx2); background: transparent; border: none; border-radius: 10px; cursor: pointer; text-align: left; transition: 0.2s; }
.pm-item i { width: 18px; text-align: center; }
.pm-item:hover { background: var(--hover); color: var(--tx); }
.pm-item.danger:hover { background: var(--err-bg); color: var(--err); }

.bo-content { padding: 24px 28px 60px; max-width: 1400px; }
.bo-banner { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-bg); border-radius: 12px; padding: 10px 16px; font-size: 0.85rem; margin-bottom: 24px; }
.bo-sec { display: none; }
.bo-sec.active { display: block; animation: fadeIn 0.35s ease; }
.bo-h { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
.bo-stat { background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; padding: 20px; position: relative; overflow: hidden; height: 100%; }
.bo-sl { font-size: 0.8rem; color: var(--tx3); margin-bottom: 4px; }
.bo-sv { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.bo-sd { font-size: 0.78rem; font-weight: 600; }
.bo-sd.dn { color: var(--info); }
.bo-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; padding: 20px; }
.bo-card-t { font-weight: 600; margin-bottom: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bo-card-t .csmall { margin: 0; font-weight: 400; font-size: 0.78rem; }
.chart-box { position: relative; height: 290px; }
.chart-box.sm { height: 200px; }
.oplegend { display: grid; gap: 6px; margin-top: 14px; font-size: 0.82rem; }
.oplegend .lg { display: flex; align-items: center; gap: 8px; color: var(--tx2); }
.oplegend .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.oplegend .lg b { margin-left: auto; color: var(--tx); font-weight: 600; font-variant-numeric: tabular-nums; }
.live-feed { display: flex; flex-direction: column; gap: 8px; min-height: 250px; }
.live-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg3); border-radius: 10px; font-size: 0.82rem; animation: fadeIn 0.4s ease; }
.live-item .t { margin-left: auto; color: var(--tx3); white-space: nowrap; font-size: 0.74rem; }
.todo { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--bg3); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; color: var(--tx); cursor: pointer; transition: 0.2s; }
.todo:hover { border-color: var(--accline); transform: translateX(2px); }
.todo-n { font-size: 1.2rem; font-weight: 700; }
.tbl-wrap { overflow-x: auto; }
.db-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.db-table th { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tx3); padding: 10px 14px; border-bottom: 1px solid var(--bd); text-align: left; white-space: nowrap; }
.db-table th.text-end { text-align: right; }
.db-table td { padding: 13px 14px; border-bottom: 1px solid var(--bd); font-size: 0.88rem; color: var(--tx2); white-space: nowrap; }
.db-table td.text-end { text-align: right; font-variant-numeric: tabular-nums; }
.db-table td.strong { color: var(--tx); font-weight: 600; }
.db-table tbody tr:last-child td { border-bottom: none; }
.db-table tbody tr.clk { cursor: pointer; }
.db-table tbody tr:hover td { background: var(--accsoft); }
.db-table .btn-mini { font-size: 0.78rem; padding: 4px 12px; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; }
.pager button { min-width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--bd2); background: transparent; color: var(--tx2); font-size: 0.82rem; cursor: pointer; transition: 0.2s; }
.pager button:hover:not(:disabled) { border-color: var(--acc); color: var(--tx); }
.pager button.on { background: var(--grad); color: var(--on-grad); border-color: transparent; font-weight: 600; }
.pager button:disabled { opacity: 0.4; cursor: default; }
.rtbar { height: 6px; background: var(--bg3); border-radius: 100px; overflow: hidden; }
.rtfill { height: 100%; border-radius: 100px; background: var(--grad); transition: width 0.6s ease; }
.opcard { height: 100%; }
.opcard .top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.opcard .icbox { margin: 0; }
.opcard .kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.opcard .kv div { background: var(--bg3); border-radius: 10px; padding: 10px; }
.opcard .kv b { display: block; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.opcard .kv span { font-size: 0.7rem; color: var(--tx3); }
.report { display: flex; gap: 16px; align-items: flex-start; }
.report .ftico { margin: 0; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--bd); }
.setting-row:last-child { border-bottom: none; }
.toggle-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-thumb { position: absolute; inset: 0; background: var(--bd2); border-radius: 100px; cursor: pointer; transition: 0.3s; }
.toggle-thumb::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.3s; }
.toggle-switch input:checked + .toggle-thumb { background: var(--grad); }
.toggle-switch input:checked + .toggle-thumb::before { transform: translateX(20px); }
.toggle-switch input:focus-visible + .toggle-thumb { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Fenêtre modale (détail de transaction) */
.modal-content { background: var(--bg2); color: var(--tx); border: 1px solid var(--bd2); border-radius: 20px; }
.modal-header, .modal-footer { border-color: var(--bd); }
.modal .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.lm .modal .btn-close { filter: none; }
.kvrow { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bd); font-size: 0.92rem; }
.kvrow:last-child { border-bottom: none; }
.kvrow span:first-child { color: var(--tx3); }
.kvrow span:last-child { font-weight: 500; text-align: right; }

/* Back-office : mobile */
@media (max-width: 991px) {
  #bo { grid-template-columns: minmax(0, 1fr); }
  .bo-side { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; z-index: 30; transform: translateX(-100%); transition: transform 0.3s; box-shadow: 0 0 60px var(--shadow); }
  .bo-side.open { transform: none; }
  .bo-scrim.show { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, 0.55); }
  .bo-top { padding: 10px 16px; gap: 10px; }
  .bo-content { padding: 18px 16px 50px; }
}
@media (max-width: 575px) {
  .bo-search { display: none; }
  .bo-top .ms-auto { margin-left: auto; }
  .offcanvas { width: 100%; }
  .sp { padding: 70px 0; }
  #hero { padding-top: calc(var(--nav) + 36px); }
  .brand img { height: 46px; }
}

/* ---------- Animations ---------- */
@keyframes bpls { 0%, 100% { box-shadow: 0 0 6px var(--acc); } 50% { box-shadow: 0 0 14px var(--acc); } }
@keyframes bgrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 0.85; } }
@keyframes lscr { 0% { transform: translateX(0); } 100% { transform: translateX(-25%); } }
@keyframes fadU { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes dinI { from { opacity: 0; transform: perspective(1200px) rotateX(5deg) translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.afu { animation: fadU 0.8s ease both; }
.adi { animation: dinI 1.1s ease 0.35s both; }