/* =========================================================
   Pages publiques (accueil, connexion) et console admin
   ========================================================= */
.site, .auth-bg, .admin-body { display:block; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }

/* Captures : version claire ou sombre selon le thème */
.shot-d { display:none !important; }
[data-theme="dark"] .shot-l { display:none !important; }
[data-theme="dark"] .shot-d { display:block !important; }

/* ---------- Accueil ---------- */
.site { background:var(--bg); overflow-x:hidden; }
/* La page d'accueil occupe toute la largeur; le contenu est centré par .lp-wrap */
main.lp { display:block; max-width:none; width:100%; padding:0; margin:0; }
.lp-wrap { width:min(100% - 48px, 1200px); padding:0; margin-inline:auto; }
@media (min-width:1700px) { .lp-wrap { width:min(100% - 96px, 1360px); } .lp-hero h1 { max-width:1040px; } }
.lp-nav { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--b); }
.lp-nav-in { display:flex; align-items:center; gap:24px; height:66px; }
.lp-brand { display:inline-flex; align-items:center; gap:10px; font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--t) !important; }
.lp-mark { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg, var(--p), #0ea5e9); display:inline-flex; flex-direction:column; justify-content:center; gap:3px; padding:0 7px; }
.lp-mark i { display:block; height:2.5px; border-radius:2px; background:#fff; } .lp-mark i:nth-child(2) { width:70%; } .lp-mark i:nth-child(3) { width:85%; }
.lp-links { display:flex; gap:26px; margin-left:12px; }
.lp-links a { color:var(--t2) !important; font-weight:500; font-size:14px; }
.lp-links a:hover { color:var(--t) !important; }
.lp-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }

.lp-hero { text-align:center; padding:84px 0 36px; position:relative; }
.lp-hero::before { content:""; position:absolute; inset:-40px 0 auto 0; height:560px; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--p) 16%, transparent), transparent 70%); }
.lp-eyebrow { display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:99px; border:1px solid var(--b); background:var(--card); color:var(--t2); font-size:13px; font-weight:500; }
.lp-eyebrow .ico-svg { width:15px; height:15px; color:var(--p); }
.lp-hero h1 { font-size:clamp(34px, 4.6vw, 58px); line-height:1.08; letter-spacing:-.035em; margin:22px auto 18px; max-width:920px; font-weight:800; }
.grad { background:linear-gradient(90deg, var(--p), #0ea5e9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lp-lead { font-size:clamp(16px, 1.5vw, 19px); color:var(--t2); max-width:720px; margin:0 auto 30px; line-height:1.6; }
.lp-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn.big { padding:13px 24px; font-size:15px; border-radius:10px; }
.lp-assure { list-style:none; padding:0; margin:22px 0 0; display:flex; gap:22px; justify-content:center; flex-wrap:wrap; color:var(--m); font-size:13px; }
.lp-assure li { display:inline-flex; align-items:center; gap:6px; }
.lp-assure .ico-svg { width:15px; height:15px; color:var(--ok); }

/* Aperçu du produit */
.lp-showcase { padding-top:20px; }
.lp-tabs { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.lp-tabs button { position:relative; overflow:hidden; border:1px solid var(--b); background:var(--card); color:var(--t2); font:inherit; font-weight:600; font-size:14px;
  padding:9px 16px; border-radius:99px; cursor:pointer; transition:.15s; }
.lp-tabs button:hover { color:var(--t); border-color:var(--b2); }
.lp-tabs button.on { background:var(--t); color:var(--bg); border-color:var(--t); }
.lp-tabs button.run::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--p); transform-origin:left; animation:lp-prog 6s linear forwards; }
@keyframes lp-prog { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.lp-frame { border:1px solid var(--b); border-radius:14px; overflow:hidden; background:var(--card);
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 30px 70px -20px rgba(15,23,42,.30); }
[data-theme="dark"] .lp-frame { box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 30px 80px -20px rgba(0,0,0,.7); }
.lp-frame-bar { display:flex; align-items:center; gap:7px; padding:10px 14px; background:var(--soft); border-bottom:1px solid var(--b); }
.lp-frame-bar > span { width:11px; height:11px; border-radius:50%; background:var(--b2); }
.lp-url { margin:0 auto; padding:3px 40px; border-radius:6px; background:var(--card); border:1px solid var(--b); font-size:12px; color:var(--m); text-transform:lowercase; }
.lp-screens { position:relative; aspect-ratio:16 / 10; background:var(--bg); }
.lp-screens figure { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .5s ease; }
.lp-screens figure.on { opacity:1; }
.lp-screens img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; }
.lp-caption { text-align:center; color:var(--m); margin:16px auto 0; max-width:720px; min-height:22px; }

/* Bandeau de confiance */
.lp-trust { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; margin:64px 0 0; background:var(--b); border:1px solid var(--b); border-radius:14px; overflow:hidden; }
.lp-trust > div { background:var(--card); padding:20px; display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:2px; align-items:start; }
.lp-trust .ico-svg { grid-row:span 2; width:22px; height:22px; color:var(--p); margin-top:2px; }
.lp-trust b { font-size:14px; } .lp-trust span { font-size:13px; color:var(--m); }

/* En-têtes de section */
.lp-head { text-align:center; max-width:720px; margin:110px auto 48px; }
.lp-head h2 { font-size:clamp(28px, 3vw, 38px); letter-spacing:-.025em; line-height:1.15; margin:10px 0 12px; }
.lp-head p { color:var(--t2); font-size:17px; margin:0; line-height:1.6; }
.lp-kicker { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--p); }
[data-theme="dark"] .lp-kicker { color:color-mix(in srgb, var(--p) 55%, white); }

/* Rangées fonctionnalité + capture */
.lp-row { display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center; margin:0 0 88px; }
.lp-row.rev { grid-template-columns:7fr 5fr; } .lp-row.rev .lp-row-text { order:2; }
.lp-row h3 { font-size:clamp(22px, 2.2vw, 28px); letter-spacing:-.02em; line-height:1.2; margin:10px 0 14px; }
.lp-row p { color:var(--t2); line-height:1.65; margin:0 0 18px; }
.lp-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.lp-list li { display:flex; gap:10px; align-items:flex-start; color:var(--t); }
.lp-list .ico-svg { color:var(--ok); margin-top:1px; }
.lp-shot { border:1px solid var(--b); border-radius:12px; overflow:hidden; background:var(--card); box-shadow:0 24px 60px -24px rgba(15,23,42,.35); }
.lp-shot img { width:100%; display:block; aspect-ratio:16 / 10; object-fit:cover; object-position:top left; }

/* Grille de fonctionnalités */
.lp-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.lp-grid .card { padding:22px; }
.lp-grid h4 { margin:14px 0 6px; font-size:16px; }
.lp-grid p { margin:0; color:var(--t2); line-height:1.55; font-size:14px; }
.ico { width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:var(--p50); color:var(--p); border-radius:10px; }
.ico .ico-svg { width:21px; height:21px; }

/* Tarifs */
#tarifs .plans { grid-template-columns:repeat(4, 1fr); }
.plan h3 { margin:0; font-size:19px; }
.plan-tag { min-height:34px; }
.plan-price { margin:12px 0 8px; }
.lp-note { text-align:center; color:var(--m); font-size:13px; margin-top:18px; line-height:1.7; }

/* FAQ */
.lp-faq details { max-width:820px; margin:0 auto 10px; border:1px solid var(--b); border-radius:12px; background:var(--card); padding:4px 20px; }
.lp-faq summary { cursor:pointer; font-weight:600; padding:14px 0; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:"+"; font-size:20px; line-height:1; color:var(--m); }
.lp-faq details[open] summary::after { content:"−"; }
.lp-faq details p { color:var(--t2); line-height:1.65; margin:0 0 16px; }

/* Appel à l'action et pied de page */
.lp-cta { margin:110px 0 90px; text-align:center; padding:56px 28px; border-radius:20px; color:#fff;
  background:radial-gradient(80% 120% at 0% 0%, #0ea5e9 0%, transparent 55%), linear-gradient(135deg, var(--p), #312e81); }
.lp-cta h2 { font-size:clamp(26px, 3vw, 36px); letter-spacing:-.02em; margin:0 0 10px; }
.lp-cta p { opacity:.85; margin:0 0 26px; font-size:17px; }
.lp-cta .btn:not(.ghost) { background:#fff; color:#1e1b4b !important; }
.lp-cta .btn.ghost { background:transparent; border-color:rgba(255,255,255,.45); color:#fff !important; }
.lp-foot { border-top:1px solid var(--b); background:var(--card); padding:44px 0 26px; }
.lp-foot-in { display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; }
.lp-foot-in > div { display:flex; flex-direction:column; gap:8px; }
.lp-foot-in a:not(.lp-brand) { color:var(--t2) !important; font-size:14px; }
.lp-foot-in b { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--m); margin-bottom:4px; }
.lp-copy { font-size:13px; margin-top:28px; padding-top:20px; border-top:1px solid var(--b); }

@media (max-width:1100px) {
  #tarifs .plans { grid-template-columns:repeat(2, 1fr); }
  .lp-trust { grid-template-columns:repeat(2, 1fr); }
  .lp-row, .lp-row.rev { grid-template-columns:1fr; gap:28px; } .lp-row.rev .lp-row-text { order:0; }
}
@media (max-width:860px) {
  .lp-links { display:none; } .lp-hide-sm { display:none !important; }
  .lp-grid, .lp-trust, #tarifs .plans { grid-template-columns:1fr; }
  .lp-foot-in { grid-template-columns:1fr; }
  .lp-hero { padding-top:56px; } .lp-head { margin-top:80px; }
  .lp-url { display:none; }
}

/* ---------- Connexion ---------- */
.auth-bg { background:var(--bg); min-height:100vh; }
.auth-bg::before { content:""; position:fixed; inset:0 0 auto 0; height:420px; z-index:0; pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--p) 14%, transparent), transparent 70%); }
.auth-wrap { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; max-width:none; }
.auth-brand { font-size:22px; font-weight:800; color:var(--t) !important; }
.auth-card { width:100%; max-width:400px; box-shadow:0 20px 50px -12px rgba(15,23,42,.18); }
.theme-float { position:fixed; top:16px; right:16px; z-index:5; background:var(--card); }

/* ---------- Console admin ---------- */
.admin-body { background:var(--bg); }
.site-brand { font-size:20px; font-weight:800; color:var(--p); }
.adm-top { background:#0f172a; color:#fff; border-bottom:1px solid #1f2937; }
.adm-top .wrap { height:58px; max-width:1280px; display:flex; }
.adm-top .site-brand { color:#fff; }
.adm-top .muted { color:#94a3b8; }
.adm-top .btn.link { color:#c7d2fe !important; }
.adm-top .theme-btn { color:#e2e8f0; border-color:#334155; }
.adm-top .theme-btn:hover { background:#1e293b; }
.adm-tag { background:#334155; color:#e2e8f0; font-size:12px; padding:3px 10px; border-radius:99px; font-weight:600; }
/* ---------- 0.8 : console (en-têtes triables) ---------- */
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:var(--t); }
/* ---------- 0.2.5 : console en onglets ---------- */
.adm-strip { display:flex; flex-wrap:wrap; gap:6px 22px; align-items:center; font-size:13px; color:var(--t2); padding:10px 16px; background:var(--card); border:1px solid var(--b); border-radius:12px; margin-bottom:14px; }
.adm-strip b { color:var(--t); }
/* 0.2.6 : plus de barre de défilement; les onglets passent à la ligne au besoin (cellulaire : défilement tactile sans barre) */
.adm-tabs { position:sticky; top:0; z-index:15; display:flex; flex-wrap:wrap; gap:2px; overflow:visible; background:var(--bg); border-bottom:1px solid var(--b); }
.adm-tab { display:inline-flex; align-items:center; gap:7px; padding:11px 14px; color:var(--t2) !important; font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.adm-tab .ico-svg { width:16px; height:16px; }
.adm-tab:hover { color:var(--t) !important; }
.adm-tab.on { color:var(--p) !important; border-bottom-color:var(--p); }
[data-theme="dark"] .adm-tab.on { color:color-mix(in srgb, var(--p) 55%, white) !important; }
.adm-badge { font-style:normal; font-size:11px; font-weight:700; min-width:18px; height:18px; padding:0 6px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; background:var(--soft); color:var(--t2); }
.adm-badge.bad { background:#dc2626; color:#fff; } .adm-badge.warn { background:var(--warn-bg); color:var(--warn); } .adm-badge.info { background:var(--info-bg); color:var(--info); }
pre.code { background:var(--soft); border-radius:10px; padding:10px 12px; font-size:12px; overflow:auto; margin:0; white-space:pre-wrap; word-break:break-word; }
details.err-row { border:1px solid var(--b); border-radius:10px; padding:8px 12px; background:var(--card); }
details.err-row summary { cursor:pointer; display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
details.err-row pre { margin-top:8px; }
@media (max-width:700px) { .adm-strip { gap:4px 14px; font-size:12px; } .adm-tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; } .adm-tabs::-webkit-scrollbar { display:none; }
  .adm-tab { padding:10px 10px; } .adm-tab span { display:none; } .adm-tab.on span { display:inline; } }
/* 0.2.6 : comptes dépliables (utilisateurs, sessions), connectés en ce moment */
.exp-btn { border:0; background:none; cursor:pointer; color:var(--m); width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; }
.exp-btn:hover { background:var(--soft); color:var(--t); }
.exp-btn .ico-svg { width:16px; height:16px; transition:transform .15s; }
.exp-btn[aria-expanded="true"] .ico-svg { transform:rotate(90deg); color:var(--p); }
tr.acct-open > td { border-bottom-color:transparent; background:var(--soft); }
tr.acct-sub > td { background:var(--soft); padding-top:4px; padding-bottom:16px; cursor:default; }
.acct-detail { background:var(--card); border:1px solid var(--b); border-radius:12px; padding:14px 16px; }
.acct-detail table.u-table td { padding-top:8px; padding-bottom:8px; }
tr.u-hit > td { background:var(--p50); }
.live-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#16a34a; margin-right:8px; vertical-align:middle; box-shadow:0 0 0 0 rgba(22,163,74,.5); animation:live-pulse 2s infinite; }
@keyframes live-pulse { 0% { box-shadow:0 0 0 0 rgba(22,163,74,.55); } 70% { box-shadow:0 0 0 8px rgba(22,163,74,0); } 100% { box-shadow:0 0 0 0 rgba(22,163,74,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation:none; } }
@media (max-width:700px) {
  .adm-top .wrap { height:auto; min-height:58px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap; row-gap:6px; }
  .adm-top #who { flex-wrap:wrap; gap:4px 10px; }
  .admin-body .hide-sm { display:none !important; }
  .admin-body main.wrap { padding-left:12px; padding-right:12px; }
  table.u-table td:last-child { white-space:normal; }
  table.u-table td:last-child .btn { padding:4px 4px; }
}