/* ========================================================================
   YOUCRÉATION — THEME GLOBAL (DARK PRO) + ADMIN + CGU + LOGIN + PATCH MOBILE
   Version: 1.0 – Fichier unique consolidé
   Auteur: YC
   ======================================================================== */

/* ======================= Variables globales ======================= */
:root{
  --bg:#0c171b;
  --bg-2:#0f1e22;
  --panel:#12242a;
  --panel-2:#0f1d22;
  --panel-3:#0b1417;
  --text:#e7f3f1;
  --muted:#a7c4c2;
  --accent:#a7c4c2;
  --accent-2:#1a2d34;
  --border:rgba(167,196,194,.18);
  --shadow:0 18px 40px rgba(0,0,0,.35);

  /* Smooth natif + décalage si header fixe */
  --header-offset: 80px;
}

/* ======================= Reset de base ======================= */
*{box-sizing:border-box}
html,body{height:100%}
html{ scroll-behavior:smooth }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 20% -200px, rgba(167,196,194,.12), transparent 60%),
    radial-gradient(900px 400px at 85% -250px, rgba(26,45,52,.18), transparent 60%),
    linear-gradient(180deg,#0c171b,#091216);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}
a{color:#cfeae6;text-decoration:none}
a:hover{opacity:.9}

.container{max-width:1100px;margin:0 auto;padding:22px 18px}

/* ======================= Header & Navigation ======================= */
.header{ display:flex;align-items:center;justify-content:space-between;margin-bottom:18px }
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:28px;height:28px}
.brand h1{font-size:22px;margin:0;color:#dff4ef;letter-spacing:.2px}
.nav{display:flex;gap:10px}
.nav a{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 16px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:var(--text)
}
.nav a.btn{background:linear-gradient(180deg,var(--accent),#7aa29f);color:#0b1417;border:none}
.nav a.btn.secondary{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--border)}

/* ======================= Boutons / Inputs / Label ======================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px; padding:0 14px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.06);color:var(--text);cursor:pointer
}
.btn:hover{filter:brightness(1.04)}
.btn.small{height:32px;padding:0 10px;border-radius:10px}
.btn.secondary{background:rgba(255,255,255,.06)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.input{
  height:38px;border-radius:10px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);padding:0 12px;outline:none;width:100%;
}
.label{font-size:12px;color:var(--muted);margin-bottom:4px}

/* ======================= Cartes / Grilles / KPI ======================= */
.card{
  background: linear-gradient(180deg, rgba(20,35,41,.66), rgba(18,30,36,.95));
  border: 1px solid var(--border);
  border-radius:16px;padding:14px;box-shadow:var(--shadow)
}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:1fr 1fr}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{padding:12px;border:1px solid var(--border);background:rgba(255,255,255,.04);border-radius:12px;text-align:center}
.kpi span{display:block;color:var(--muted);font-size:12px}
.kpi b{font-size:20px}

/* ======================= Table ======================= */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}
.table{width:100%;border-collapse:collapse;min-width:820px}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.table thead th{background:rgba(255,255,255,.04);color:#dff4ef;position:sticky;top:0}

.badge{
  display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;
  font-size:12px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--muted)
}
.badge.ok{color:#10d08a;border-color:#10d08a33;background:#10d08a14}
.badge.bad{color:#ff9898;border-color:#ff989833;background:#ff989814}

/* ======================= CGU (scopé via .yc-cgu) ======================= */
.yc-cgu{
  --yc-bg: var(--surface, #0b0b0b05);
  --yc-card: var(--card, #fff);
  --yc-text: var(--foreground, #0e0e10);
  --yc-muted: var(--muted-foreground, #6b7280);
  --yc-primary: var(--primary, #2ecc71);
  --yc-border: var(--border, #e5e7eb);
  --yc-link: var(--link, #2563eb);
  --yc-shadow: 0 10px 25px rgba(0,0,0,.07);
}
.yc-cgu{ display:block; padding:clamp(16px, 2.5vw, 32px); background:var(--yc-bg); }
.yc-cgu-card{
  max-width: 980px; margin: 0 auto; background: var(--yc-card); color: var(--yc-text);
  border: 1px solid var(--yc-border); border-radius: 16px; box-shadow: var(--yc-shadow); overflow:hidden;
}
.yc-cgu-header{ padding: clamp(20px, 3.2vw, 36px); border-bottom: 1px solid var(--yc-border);
  background: linear-gradient(to bottom right, rgba(46,204,113,.06), transparent); }
.yc-cgu-header h1{ margin: 0 0 8px; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.2; letter-spacing: -0.01em; }
.yc-cgu-meta{ margin: 0; color: var(--yc-muted); font-size: clamp(14px, 1.4vw, 15px); }
.yc-cgu-toc{ padding: 16px clamp(20px, 3.2vw, 36px) 8px; border-bottom: 1px solid var(--yc-border); background: #fafafa; }
@media (prefers-color-scheme: dark){ .yc-cgu-toc{ background: #0f1115; } }
.yc-cgu-toc h2{ font-size: 16px; margin: 0 0 8px; color: var(--yc-muted); text-transform: uppercase; letter-spacing: .06em; }
.yc-cgu-toc ol{ margin: 0; padding-left: 20px; columns: 1; column-gap: 24px; }
@media (min-width: 820px){ .yc-cgu-toc ol{ columns: 2; } }
.yc-cgu-toc a{ color: var(--yc-link); text-decoration: none; }
.yc-cgu-toc a:hover, .yc-cgu-toc a:focus{ text-decoration: underline; }
.yc-cgu-content{ padding: clamp(20px, 3.2vw, 36px); }
.yc-cgu-content h2{ margin: 24px 0 8px; font-size: clamp(18px, 2.2vw, 22px); border-left: 4px solid var(--yc-primary); padding-left: 10px; }
.yc-cgu-content p, .yc-cgu-content li{ line-height: 1.7; font-size: clamp(15px, 1.7vw, 17px); }
.yc-cgu-content ul{ padding-left: 20px; }
.yc-cgu-list li{ margin-bottom: 6px; }
.yc-cgu-back{ margin: 12px 0 0; }
.yc-cgu-top{ display:inline-block; font-size: 14px; color: var(--yc-link); text-decoration: none; }
.yc-cgu-top:hover{ text-decoration: underline; }
.yc-cgu-note{
  margin: 12px 0 0; padding: 16px;
  background: linear-gradient(180deg, rgba(46,204,113,.08), rgba(46,204,113,.02));
  border: 1px dashed rgba(46,204,113,.35); border-radius: 12px;
}
.yc-cgu-footer{
  padding: 16px clamp(20px, 3.2vw, 36px) 28px; border-top: 1px solid var(--yc-border);
  display:flex; align-items:center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.yc-cgu-footer p{ margin: 0; color: var(--yc-muted); font-size: 14px; }
.yc-cgu-btn{
  display:inline-block; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--yc-border); text-decoration: none; color: var(--yc-text);
}
.yc-cgu-btn:hover{ border-color: var(--yc-link); }
.yc-cgu a:focus{ outline: 2px solid var(--yc-link); outline-offset: 2px; border-radius: 4px; }

/* Impression */
@media print{
  .yc-cgu{ padding: 0; background: #fff; }
  .yc-cgu-card{ box-shadow: none; border: none; }
  .yc-cgu-toc{ background: #fff; }
  .yc-cgu-footer .yc-cgu-btn{ display: none !important; }
}

/* ======================= Profil / Form (view-me) ======================= */
#view-me .profile-form{ display:grid; gap:12px; }
#view-me .profile-grid{ display:grid; gap:10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px){ #view-me .profile-grid{ grid-template-columns: 1fr; } }

#view-me .field{ position:relative; }
#view-me .field input.input{
  height:42px; border-radius:10px; padding:14px 40px 6px 12px;
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#view-me .field input.input:focus{ border-color:#2aa47a; box-shadow:0 0 0 3px rgba(42,164,122,.15); }
#view-me .field label{
  position:absolute; left:12px; top:9px; font-size:12px; opacity:.85; pointer-events:none; transition: all .15s ease;
}
#view-me .field input.input:focus + label,
#view-me .field input.input:not(:placeholder-shown) + label{ top:4px; font-size:10px; opacity:.92; }
#view-me .icon-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.05); cursor:pointer;
}
#view-me .span-2{ grid-column:1 / -1; }
#view-me .field.ok input.input{ border-color:#18a86a; }
#view-me .field.bad input.input{ border-color:#e66b6b; }
#view-me .hint{ font-size:12px; opacity:.8; margin-top:2px; }
#view-me .btn.primary{
  height:44px; border-radius:10px; background:linear-gradient(180deg,#18a86a,#12805a);
  border-color:#12805a; font-weight:600;
}
#view-me .btn.primary:hover{ filter:brightness(1.06); }

/* ======================= Vues / Nav ======================= */
.view{display:none;opacity:0;transform:translateY(6px);transition:.18s}
.view.show{display:block;opacity:1;transform:none}
.cms-nav a.active{filter:brightness(1.1);}
select.input{appearance:none;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:10px;height:36px;padding:0 12px}
.chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text)}
.chip.muted{opacity:.9}
.stack-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.flashcard{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:10px}

/* ======================= Support ======================= */
.support-wrap{display:grid;grid-template-columns:340px 1fr;gap:14px}
.support-list{border:1px solid var(--border);border-radius:12px;padding:10px;background:rgba(255,255,255,.04)}
.support-item{display:block;border:1px solid var(--border);border-radius:12px;padding:10px;margin-bottom:10px;background:rgba(255,255,255,.03);text-decoration:none;color:var(--text)}
.support-item.active{outline:2px solid rgba(167,196,194,.35)}
.ticket-panel{display:none}
.ticket-panel.show{display:block}
.badge.neutral{color:#a7c4c2}
.badge.state-open{color:#fff;border-color:#fff3;background:#fff1}
.badge.state-en_cours{color:#ffc86b;border-color:#ffc86b55;background:#ffc86b1a}
.badge.state-resolu{color:#10d08a;border-color:#10d08a55;background:#10d08a1a}
.badge.state-closed{color:#9fb7b4;border-color:#9fb7b455;background:#9fb7b41a}

/* ======================= Drawers ======================= */
.drawer{position:fixed;inset:0;display:none;z-index:1100}
.drawer.show{display:block}
.drawer .bg{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
.drawer .panel{
  position:absolute;right:0;top:0;bottom:0;width:min(720px,96vw);
  background:linear-gradient(180deg, rgba(26,45,52,.85), rgba(15,29,34,.98));
  border-left:1px solid var(--border);padding:18px;overflow:auto
}

/* ======================= Alignements Tableaux ======================= */
.table th, .table td { vertical-align: middle; text-align: left; }
.nowrap { white-space: nowrap; }

/* --- QR Codes (admin) --- */
.table--qrs th, .table--qrs td { vertical-align: middle; }
.table--qrs td:nth-child(1){ width:64px; }
.table--qrs td:nth-child(2){ min-width:340px; }
.table--qrs td:nth-child(3){ min-width:340px; }
.table--qrs td:nth-child(4){ width:100px; text-align:center; }
.table--qrs td:nth-child(5){ width:120px; }
.table--qrs td:nth-child(6){ width:1%; }
.table--qrs .stack-row { flex-wrap: nowrap; }

/* --- Clients --- */
.table--clients th, .table--clients td { vertical-align: middle; }
.table--clients td:nth-child(1){ width:64px; }
.table--clients td:nth-child(2){ min-width:220px; }
.table--clients td:nth-child(3){ min-width:260px; }
.table--clients td:nth-child(4){ width:160px; }
.table--clients td:nth-child(5){ width:220px; }
.table--clients td:nth-child(6){ width:1%; }
.table--clients .stack-row { flex-wrap: nowrap; gap:8px; }

.counter-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 10px; border-radius:10px;
  background:var(--panel-2); border:1px solid var(--border); font-weight:600;
}

/* ======================= Topbar & Sidebar ======================= */
.cms-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(26,45,52,.45), rgba(18,30,36,.85));
  position:sticky; top:0; z-index:5;
}
.cms-topbar .actions .btn.danger{ background:#e05662; border-color:#e0566233; color:#fff; }

.cms-topbar .crumbs{ flex:1; display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.cms-topbar .crumbs .chip{ white-space:nowrap; }
.cms-topbar .crumbs .chip.muted{ margin-left:auto; }

.footer-mini{
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font-size: 12px; color: #9fb7b4; opacity: .9; z-index: 10;
}

.cms-nav{ display:grid; gap:6px; margin:14px 0 24px }
.cms-nav a{ display:block; padding:9px 10px; border-radius:10px; color:var(--text); border:1px solid transparent; }
.cms-nav a:hover{ background:rgba(255,255,255,.06); border-color:var(--border) }
.cms-nav a.active{ background:linear-gradient(180deg,var(--accent),#7aa29f); color:#0b1417 }

.cms-nav a{ display:flex; align-items:center; gap:10px; }
.cms-nav .nav-icon{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
.cms-nav a.active .nav-icon{ opacity:1; }
.cms-nav .nav-text{ line-height:1; }
.cms-nav .badge{ margin-left:auto; }

.cms-side-meta{ color:var(--muted); font-size:12px; margin-top:auto }

body.cms{ background:linear-gradient(180deg,#0c171b,#0b1416); }
.cms-sidebar{
  position:fixed; inset:0 auto 0 0; width:220px; background:#0f1e22;
  border-right:1px solid var(--border); padding:16px 14px; overflow:auto;
}
.cms-shell{ margin-left:220px; min-height:100vh; display:flex; flex-direction:column; }
.cms-content{ padding:18px }
.cms-login{ grid-template-columns:1fr 1fr; }
.cms-brandmini{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.cms-brandmini img{ width:28px; height:28px }
.cms-brandmini b{ color:#e7f3f1 } .cms-brandmini small{ color:var(--muted) }

/* ======================= Client — Liste des QR ======================= */
.qr-list{display:grid;gap:14px}
.qr-row.card{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
.qr-top{display:flex;align-items:center;gap:10px}
.qr-top code{background:var(--panel-3);border:1px solid var(--border);padding:4px 6px;border-radius:8px}
.qr-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted);font-size:12px;text-decoration:none
}
.pill:hover{background:rgba(255,255,255,.1)}
.pill.ok{color:#10d08a;border-color:#10d08a33;background:#10d08a14}
.pill.bad{color:#ff9898;border-color:#ff989833;background:#ff989814}
.reason{font-size:12px;margin-top:6px;color:#ffb0b0}
.qr-form{display:flex;gap:8px;align-items:center;margin-top:8px}
.qr-form .input{flex:1;min-width:260px}

/* ======================= Modale Aperçu QR ======================= */
#modal{position:fixed !important; inset:0; display:none !important; place-items:center; z-index:9999}
#modal.show{display:grid !important}
#modal .modal-backdrop{ position:absolute; inset:0; background:rgba(2,10,12,.75); backdrop-filter:blur(6px) }
#modal .modal-card{
  position:relative; z-index:1; width:min(80vw, 560px);
  background:linear-gradient(180deg, rgba(26,45,52,.82), rgba(15,29,34,.98));
  border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); padding:18px
}
#modal .modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
#modal .modal-title{margin:0; color:#dff4ef; font-weight:700; font-size:18px}
#modal .modal-close{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.06);
  color:#e8f2f0; cursor:pointer; font-size:20px; line-height:1
}
#modal img{
  display:block; width:min(30vw, 420px); min-width:220px;
  height:auto; margin:0 auto; border-radius:14px; border:1px solid var(--border);
  background:#0b1417; padding:12px
}
#modal .modal-foot{ margin-top:8px; text-align:center; font-size:12px; color:#9fb7b4 }

/* ======================= Admin – Ajustements Table Clients ======================= */
.table--clients .stack-row{ flex-wrap:nowrap; gap:10px; }
.table--clients .input-count{
  width:48px; height:36px; text-align:center; font-weight:600; border-radius:12px; padding:0;
  background: rgba(255,255,255,.06); border:1px solid var(--border); color: var(--text);
  -moz-appearance: textfield; appearance: textfield;
}
.table--clients .input-count::-webkit-outer-spin-button,
.table--clients .input-count::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }
.table--clients .btn{ white-space:nowrap; }
.table--clients td:nth-child(5){ min-width:360px; }
.role-flex{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
.role-form{ display:flex; align-items:center; gap:10px; margin:0; }
.table--clients td:nth-child(5){
  width: 1% !important; min-width: unset !important; white-space: nowrap; padding-right: 8px;
}
.table--clients td:nth-child(6){
  width: 1%; white-space: nowrap; padding-left: 8px;
}

/* Titres alignés aux données / centrages ciblés */
.table--clients thead th, .table--clients tbody td{ padding-left:16px; padding-right:16px; vertical-align:middle; }
.table--clients thead th:nth-child(1),
.table--clients tbody td:nth-child(1),
.table--clients thead th:nth-child(2),
.table--clients tbody td:nth-child(2),
.table--clients thead th:nth-child(3),
.table--clients tbody td:nth-child(3),
.table--clients thead th:nth-child(4),
.table--clients tbody td:nth-child(4),
.table--clients thead th:nth-child(6),
.table--clients tbody td:nth-child(6){ text-align:center; }
.table--clients tbody td:nth-child(6) .stack-row{ justify-content:center; }
.role-cell .role-flex{ justify-content:center; }
.table--clients thead th:nth-child(6), .table--clients tbody td:nth-child(6){ white-space:nowrap; width:1%; padding-left:8px; }

/* ======================= ADMIN — Harmonisation avancée ======================= */
.kpi{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:18px 10px;
  background:linear-gradient(180deg, rgba(26,45,52,.55), rgba(18,30,36,.92));
  border:1px solid rgba(167,196,194,.18);
  border-radius:14px; box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.kpi span{color:#a7c4c2; font-size:12px}
.kpi b{color:#e7f3f1; font-size:26px; line-height:1.1}

.table-wrap{ overflow:auto; border:1px solid rgba(167,196,194,.18); border-radius:14px }
.table{
  width:100%; min-width:860px; border-collapse:separate; border-spacing:0
}
.table th{
  position:sticky; top:0; z-index:2; background:rgba(255,255,255,.05);
  backdrop-filter:blur(5px); color:#dff4ef; font-weight:600;
}
.table th,.table td{ padding:12px 14px; border-bottom:1px solid rgba(167,196,194,.18) }
.table tbody tr:nth-child(odd){ background:rgba(255,255,255,.03) }
.table tbody tr:hover{ background:rgba(255,255,255,.06) }

.table td .row{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap }
.table td .row .btn{ height:32px; padding:0 12px; border-radius:10px }
.table td .row select.input{ height:32px }

/* Enlever “User ID / Assigner” sans toucher au PHP */
.table td .row form input[name="user_id"]{ display:none !important; }
.table td .row form input[name="user_id"] ~ .btn{ display:none !important; }

/* Ordre des actions QR */
.actions-qr a.btn.secondary{order:1}      /* Aperçu */
.actions-qr a.btn[target="_blank"]{order:2}/* Ouvrir */
.actions-qr form[action*="toggle_qr"]{order:3} /* Activer/Désactiver */

.qrcount{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:30px;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.05);color:var(--text);font-weight:600
}

/* ======================= Support layout (admin) ======================= */
.support{display:grid;grid-template-columns:320px 1fr;gap:14px}
.support .list{border:1px solid var(--border);border-radius:12px;overflow:auto;background:rgba(255,255,255,.04)}
.support .ticket{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer}
.support .ticket.active{background:rgba(255,255,255,.06)}
.support .badge-dot{display:inline-block;width:8px;height:8px;border-radius:99px;background:#10d08a;margin-right:6px}
.support .thread{border:1px solid var(--border);border-radius:12px;padding:12px;background:linear-gradient(180deg, rgba(26,45,52,.55), rgba(18,30,36,.92))}
.support .msg{margin:10px 0;padding:10px;border-radius:10px;background:rgba(255,255,255,.06)}
.support .msg.you{background:rgba(16,208,138,.12);border:1px solid rgba(16,208,138,.25)}
.support .meta{font-size:12px;color:var(--muted)}

/* ======================= Login Card V2 (scopé) ======================= */
.logincardv2-scope{
  --logincardv2-bg:#0b1417; --logincardv2-bg-2:#091216; --logincardv2-sheen:rgba(167,196,194,.10);
  --logincardv2-panel:#0f1d22; --logincardv2-panel-2:#12242a;
  --logincardv2-text:#e7f3f1; --logincardv2-muted:#a7c4c2; --logincardv2-accent:#a7c4c2;
  --logincardv2-border:rgba(167,196,194,.20); --logincardv2-border-strong:rgba(167,196,194,.28);
  --logincardv2-shadow:0 22px 60px rgba(0,0,0,.45); --logincardv2-radius:16px;
  --logincardv2-focus:0 0 0 3px rgba(167,196,194,.25), 0 0 0 1px rgba(167,196,194,.55) inset;
}
.logincardv2-scope, .logincardv2-scope *{box-sizing:border-box}
html, body{height:100%}
.logincardv2-scope{
  margin:0; color:var(--logincardv2-text);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:
    radial-gradient(1100px 480px at 20% -200px, var(--logincardv2-sheen), transparent 60%),
    radial-gradient(900px 420px at 85% -250px, rgba(26,45,52,.18), transparent 60%),
    linear-gradient(180deg,var(--logincardv2-bg),var(--logincardv2-bg-2));
}
.logincardv2-scope a{color:#d4ece8;text-decoration:none}
.logincardv2-scope a:hover{opacity:.9}
.logincardv2-scope .logincardv2-full{ min-height:100dvh; display:grid; place-items:center; padding:28px 16px; }
.logincardv2-scope .logincardv2-stack{ display:flex; flex-direction:column; align-items:center; width:min(820px, 96vw); gap:22px; }
.logincardv2-scope .logincardv2-logo{
  width:140px; height:auto; display:block; filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));
  user-select:none; pointer-events:none;
}
@media (min-width:720px){ .logincardv2-scope .logincardv2-logo{ width:500px; } }
.logincardv2-scope .logincardv2-card{
  width:min(640px, 96vw);
  background: linear-gradient(180deg, rgba(20,35,41,.70), rgba(15,29,34,.96));
  border:1px solid var(--logincardv2-border);
  border-radius:calc(var(--logincardv2-radius) + 2px);
  padding:22px; box-shadow:var(--logincardv2-shadow);
  backdrop-filter:saturate(120%) blur(3px);
}
@media (min-width:720px){ .logincardv2-scope .logincardv2-card{ padding:28px; } }
.logincardv2-scope .logincardv2-title{ margin:0 0 12px 0; font-size:22px; font-weight:700; letter-spacing:.2px; color:#dff4ef; }
@media (min-width:720px){ .logincardv2-scope .logincardv2-title{ font-size:24px; text-align:center; } }
.logincardv2-scope .logincardv2-form{ display:grid; grid-template-columns:1fr; gap:12px; }
.logincardv2-scope .logincardv2-label{ font-size:12px; color:var(--logincardv2-muted); margin-top:8px; }
.logincardv2-scope .logincardv2-input{
  height:52px; border-radius:12px; border:1px solid var(--logincardv2-border);
  background:linear-gradient(180deg, var(--logincardv2-panel), var(--logincardv2-panel-2));
  color:var(--logincardv2-text); padding:0 14px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.logincardv2-scope .logincardv2-input::placeholder{color:#c7d9d7aa}
.logincardv2-scope .logincardv2-input:focus{
  border-color:var(--logincardv2-border-strong); box-shadow:var(--logincardv2-focus);
}
.logincardv2-scope .logincardv2-actions{
  display:flex; align-items:center; gap:10px; margin-top:10px; justify-content:flex-end; flex-wrap:wrap;
}
.logincardv2-scope .logincardv2-btn{
  display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 16px;
  border-radius:12px; border:1px solid var(--logincardv2-border); font-weight:600; cursor:pointer;
  transition:transform .06s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.logincardv2-scope .logincardv2-btn:active{ transform:translateY(1px) }
.logincardv2-scope .logincardv2-btn-ghost{ background:rgba(255,255,255,.04); color:var(--logincardv2-text); }
.logincardv2-scope .logincardv2-btn-ghost:hover{ filter:brightness(1.06); }
.logincardv2-scope .logincardv2-btn-primary{
  background:linear-gradient(180deg, var(--logincardv2-accent), #7aa29f);
  color:#0b1417; border:1px solid rgba(122,162,159,.55);
}
.logincardv2-scope .logincardv2-btn-primary:hover{ filter:brightness(1.03) }
.logincardv2-scope .logincardv2-footer{
  display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:6px;
  color:var(--logincardv2-muted); text-align:center;
}
.logincardv2-scope .logincardv2-links{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ======================= Ancrages CGU (offset header) ======================= */
#yc-cgu-title, .yc-cgu h2 { scroll-margin-top: var(--header-offset); }

/* ========================================================================
   RESPONSIVE — Patches mobiles non destructifs (≤ 1100/900/768/720/600/560/420)
   ======================================================================== */

/* >= 1024 : resserre un peu */
@media (max-width: 1024px){
  .container{padding:20px 14px}
  .header{flex-wrap:wrap; gap:10px}
  .nav{flex-wrap:wrap; gap:8px; margin-top:4px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
}

/* <= 900 : cartes + lignes QR plus compactes */
@media (max-width: 900px){
  .qr-row.card{grid-template-columns:1fr}
  .qr-form{flex-direction:column; align-items:stretch}
  .qr-form .input{min-width:0; width:100%}
  .qr-form .btn, .qr-form .btn.secondary{width:100%}
}

/* Sidebar medium */
@media (max-width:860px){
  .cms-sidebar{ width:200px }
  .cms-shell{ margin-left:200px }
}

/* <= 768 : shell mobile + burger/off-canvas */
@media (max-width: 768px){
  .container{ padding: 18px 14px; }
  .btn{ min-height: 42px; border-radius: 12px; }
  .input{ height: 44px; border-radius: 10px; }
  .page-title{ margin: 6px 0 12px; }

  .cms-shell{ margin-left: 0; }
  .cms-sidebar{
    position: fixed; inset: 0 auto 0 0;
    width: min(86vw, 320px); max-width: 92vw; height: 100dvh;
    border-right: 1px solid var(--border);
    transform: translateX(-100%); transition: transform .2s ease; z-index: 1100;
  }
  body.nav-open .cms-sidebar{ transform: translateX(0); }
  .cms-overlay{
    position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
    display: none; z-index: 1090;
  }
  body.nav-open .cms-overlay{ display: block; }
  .cms-topbar{ gap: 10px; padding: 10px 14px; }
  .cms-topbar .actions{ gap: 8px; }
  .cms-burger{
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.06);
  }

  /* Table: overflow horizontal lisible */
  .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table{ min-width: 720px; font-size: 14px; }
  .table th, .table td{ padding: 10px; }

  /* QR table: relâche contraintes */
  .table--qrs td:nth-child(1),
  .table--qrs td:nth-child(4),
  .table--qrs td:nth-child(5),
  .table--qrs td:nth-child(6){ width: auto; min-width: 0; }
  .table--qrs td:nth-child(2),
  .table--qrs td:nth-child(3){ min-width: 240px; }
  .table--qrs .stack-row{ flex-wrap: wrap; gap: 8px; }

  /* Clients table */
  .table--clients td:nth-child(2),
  .table--clients td:nth-child(3){ min-width: 200px; }
  .table--clients td:nth-child(4){ width: auto; }
  .table--clients td:nth-child(5),
  .table--clients td:nth-child(6){
    width: auto !important; min-width: 0 !important; white-space: normal; padding-left: 12px; padding-right: 12px;
  }
  .table--clients .stack-row{ flex-wrap: wrap; gap: 8px; }
  .table--clients .input-count{ width: 40px; height: 34px; }

  .role-flex, .role-form{ gap: 8px !important; flex-wrap: wrap; }

  /* CGU respirations */
  .yc-cgu{ padding: 16px; }
  .yc-cgu-card{ border-radius: 14px; }
  .yc-cgu-header{ padding: 18px; }
  .yc-cgu-content{ padding: 18px; }
  .yc-cgu-footer{ padding: 14px 18px 22px; gap: 10px; justify-content: center; }
  .yc-cgu-toc{ padding: 12px 18px; }

  /* Modale large mobile */
  #modal .modal-card{ width: min(92vw, 520px); padding: 16px; border-radius: 20px; }
  #modal img{ width: min(82vw, 460px); min-width: 200px; }
  #modal .modal-title{ font-size: 18px; }
  #modal .modal-close{ width: 40px; height: 40px; }

  /* Drawer panel */
  .drawer .panel{ width: min(92vw, 560px); padding: 16px; }

  /* Topbar crumbs ellipsis */
  .cms-topbar .crumbs{ flex: 1; min-width: 0; justify-content: center; gap: 8px; }
  .cms-topbar .crumbs .chip{ max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* <= 720 : typo & boutons adoucis */
@media (max-width: 720px){
  .brand img{width:24px;height:24px}
  .brand h1{font-size:18px}
  .nav{ flex-wrap: wrap; gap: 8px; }
  .nav a{height:36px;padding:0 12px;border-radius:10px}
  .kpi b{font-size:18px}
  .table th,.table td{padding:8px}
  .pill{padding:6px 9px;font-size:12px}
  .chip{ padding: 6px 10px; }
  .badge{ height: 26px; padding: 0 10px; }
}

/* Sidebar 100% en très petit layout */
@media (max-width: 720px){
  .cms-sidebar{
    position:fixed; left:0; width:100%; height:auto;
    border-right:none; border-bottom:1px solid var(--border);
  }
  .cms-shell{ margin-left:0 }
  .cms-content{ padding:14px }
}

/* <= 600 : Login fixes + footer centré + anti-zoom iOS */
@media (max-width: 600px){
  .container{ padding-bottom: 90px; }

  img[src*="logo-youcreation"]{
    max-width: 58vw; height:auto; display:block; margin: 22px auto 10px;
  }

  form[action*="login"]{ display:block; width: min(92vw, 520px); margin: 14px auto; }
  form[action*="login"] input[type="email"],
  form[action*="login"] input[type="password"]{ height: 46px; font-size: 16px; }
  form[action*="login"] .row{ display:flex; flex-direction: column; align-items: stretch; gap: 8px; }
  form[action*="login"] .btn, form[action*="login"] .btn.secondary{ min-height: 44px; width: 100%; }

  .footer{ flex-direction: column; gap: 8px; text-align: center; }
  .footer .links{ justify-content: center; flex-wrap: wrap; }

  /* Login Card V2 */
  .logincardv2-scope .logincardv2-full{ padding: 22px 14px; }
  .logincardv2-scope .logincardv2-card{ width: 100%; }
  .logincardv2-scope .logincardv2-actions{ flex-direction: column; align-items: stretch; }
  .logincardv2-scope .logincardv2-btn{ width: 100%; }
}

/* <= 560 : mono-colonnes + nav fluide */
@media (max-width: 560px){
  .kpis{grid-template-columns:1fr}
  .footer{flex-direction:column; gap:8px; text-align:center}
  .footer .links{justify-content:center; flex-wrap:wrap}
  .nav{gap:6px}
  .nav a{flex:1 1 auto}
  .table{ min-width:720px; }
}

/* <= 420 : compaction finale */
@media (max-width: 420px){
  body{ font-size: 14px; }
  .nav a{padding:0 10px}
  .brand h1{font-size:16px}
  .table{font-size:13px}
  .table th, .table td{ padding:8px; }
}

/* Accessibilité focus visibles en mobile (devices sans hover) */
@media (hover: none){
  .yc-cgu a:focus,
  .cms-nav a:focus,
  .btn:focus,
  .input:focus{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}


/* =========================================================
   PATCH MOBILE+TOUCH PRO — Non destructif
   Ajoute uniquement des surcharges sous certains breakpoints
   ========================================================= */

/* ---------- Base tactile & lisibilité ---------- */
@media (max-width: 768px){
  :root{ --header-offset: 68px; }
  body{ -webkit-text-size-adjust: 100%; }
  .container{ padding: 16px 12px; }
  .btn{ min-height: 44px; border-radius: 12px; }
  .input{ height: 46px; border-radius: 12px; font-size: 16px; } /* anti-zoom iOS */
  .label{ font-size: 12px; }
  .page-title{ margin: 6px 0 12px; }
}

/* ---------- Topbar & sidebar — vrai site mobile ---------- */
@media (max-width: 768px){
  .cms-shell{ margin-left: 0; }
  .cms-topbar{
    position: sticky; top: 0; z-index: 20;
    padding: 10px 12px; gap: 8px;
    backdrop-filter: blur(6px);
  }
  .cms-topbar .crumbs{ flex: 1; min-width: 0; justify-content: center; gap: 6px; }
  .cms-topbar .crumbs .chip{ max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cms-topbar .actions{ gap: 8px; }

  /* Off-canvas sidebar (via body.nav-open) */
  .cms-sidebar{
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); height: 100dvh;
    transform: translateX(-100%); transition: transform .22s ease; z-index: 1100;
    border-right: 1px solid var(--border);
  }
  body.nav-open .cms-sidebar{ transform: translateX(0); }
  .cms-overlay{
    position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
    display: none; z-index: 1090;
  }
  body.nav-open .cms-overlay{ display: block; }

  /* Bouton burger (si présent) */
  .cms-burger{
    width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.06);
  }
}

/* ---------- KPI en cartes fluides ---------- */
@media (max-width: 900px){
  .kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}
@media (max-width: 560px){
  .kpis{ grid-template-columns: 1fr; }
}

/* ---------- Navigation & header compacts ---------- */
@media (max-width: 720px){
  .header{ flex-wrap: wrap; gap: 8px; }
  .brand img{ width: 24px; height: 24px; }
  .brand h1{ font-size: 18px; }
  .nav{ flex-wrap: wrap; gap: 6px; width: 100%; }
  .nav a{ flex: 1 1 auto; height: 38px; padding: 0 12px; border-radius: 10px; }
}

/* ---------- “Cartes QR” lisibles en mobile ---------- */
@media (max-width: 768px){
  .qr-list{ gap: 12px; }
  .qr-row.card{ gap: 8px; padding: 12px; border-radius: 14px; }
  .qr-top{ flex-wrap: wrap; gap: 6px; }
  .qr-top code{
    font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .qr-quick{ gap: 6px; }
  .pill{ padding: 6px 9px; font-size: 12px; }

  /* Formulaire dans chaque carte : tout en colonne, full width */
  .qr-form{ flex-direction: column; align-items: stretch; gap: 8px; margin-top: 6px; }
  .qr-form .input{ min-width: 0; width: 100%; }
  .qr-form .btn, .qr-form .btn.secondary{ width: 100%; }

  /* Boutons d’action empilés quand l’espace manque */
  .qr-actions, .actions-qr, .table td .row{
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .actions-qr .btn{ flex: 1 1 calc(50% - 8px); min-width: 130px; }
  .actions-qr .btn.secondary,
  .actions-qr a.btn[target="_blank"],
  .actions-qr form[action*="toggle_qr"] .btn{ min-height: 42px; }

  /* Champs URL/UUID : lisibles */
  .qr-row input[type="text"], .qr-row input[type="url"]{
    font-size: 16px; height: 46px;
  }
}

/* ---------- Tables : “vrai” mobile (scroll propre) ---------- */
@media (max-width: 768px){
  .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
  .table{ min-width: 720px; font-size: 14px; }
  .table th, .table td{ padding: 10px; }

  /* Allège les contraintes rigides côté QR/Clients */
  .table--qrs .stack-row{ flex-wrap: wrap; gap: 8px; }
  .table--clients .stack-row{ flex-wrap: wrap; gap: 8px; }
  .table--clients .input-count{ width: 42px; height: 36px; }

  /* Colonnes “Rôle/Actions” redeviennent auto-width en mobile */
  .table--clients td:nth-child(5),
  .table--clients td:nth-child(6){
    width: auto !important; min-width: 0 !important; white-space: normal; padding-left: 10px; padding-right: 10px;
  }
}

/* ---------- CGU : respirations & titres ---------- */
@media (max-width: 720px){
  .yc-cgu{ padding: 14px; }
  .yc-cgu-card{ border-radius: 14px; }
  .yc-cgu-header{ padding: 16px; }
  .yc-cgu-content{ padding: 16px; }
  .yc-cgu-footer{ padding: 12px 16px 20px; gap: 10px; justify-content: center; }
  .yc-cgu-toc{ padding: 12px 16px; }
}

/* ---------- Modale QR plus large sur mobile ---------- */
@media (max-width: 768px){
  #modal .modal-card{ width: min(92vw, 520px); padding: 16px; border-radius: 20px; }
  #modal img{ width: min(82vw, 460px); min-width: 200px; }
  #modal .modal-title{ font-size: 18px; }
  #modal .modal-close{ width: 40px; height: 40px; }
}

/* ---------- Accessibilité touch-only ---------- */
@media (hover: none){
  .btn:focus, .input:focus, .cms-nav a:focus, .yc-cgu a:focus{
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
}

/* ---------- Last-mile très petit écran ---------- */
@media (max-width: 420px){
  body{ font-size: 14px; }
  .table{ font-size: 13px; }
  .table th, .table td{ padding: 8px; }
  .brand h1{ font-size: 16px; }
}

/* ================================
   MOBILE FIX v2 (safe, non destructif)
   ================================ */

/* --------- Boutons compacts & cohérents --------- */
@media (max-width: 600px){
  .btn{ min-height: 40px; height:auto; padding: 0 12px; border-radius: 12px; font-size: 14px; }
  .btn.small{ min-height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13px; }
  .pill{ padding: 6px 10px; border-radius: 999px; font-size: 12px; }
  .qr-form .btn, .qr-form .btn.secondary{ width: 100%; }
  .qr-quick{ gap: 6px; }
  .kpi b{ font-size: 20px; }
}

/* --------- Menu latéral mobile (look “app”) --------- */
@media (max-width: 768px){
  .cms-sidebar{
    position: fixed; left:0; top:0; bottom:0;
    width: min(86vw, 320px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 1100;
    background: #0f1e22;
  }
  body.nav-open .cms-sidebar{ transform: translateX(0); }
  .cms-overlay{
    position: fixed; inset:0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    display:none; z-index:1090;
  }
  body.nav-open .cms-overlay{ display:block; }

  .cms-brandmini{ padding: 6px 2px 12px; }
  .cms-nav{ gap: 8px; }
  .cms-nav a{
    display:flex; align-items:center; gap:12px;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
  }
  .cms-nav a:hover{ background: rgba(255,255,255,.05); border-color: var(--border); }
  .cms-nav a.active{
    background: linear-gradient(180deg,var(--accent),#7aa29f);
    color: #0b1417;
  }
  .cms-nav .nav-icon{ width:18px; height:18px; opacity:.95; }
  .cms-nav .badge{ margin-left:auto; }

  /* Topbar compacte avec burger */
  .cms-topbar{ position: sticky; top: 0; z-index: 20; padding: 10px 12px; gap: 8px; }
  .cms-burger{
    width: 42px; height: 42px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:10px;
    background: rgba(255,255,255,.06);
  }
}

/* --------- Support lisible en mobile --------- */
@media (max-width: 900px){
  .support-wrap{ display: grid; grid-template-columns: 1fr; gap: 12px; }
  .support-list{ max-height: none; }
  .ticket-panel.show{ display:block; }
  .support .thread{ padding: 12px; }
  .support .msg{ font-size: 14px; }
  .support .row .btn.small{ min-height: 36px; }
}

/* Option très petit écran : on force la liste en “cartes” pleines largeur */
@media (max-width: 560px){
  .support .ticket{ border-radius: 12px; padding: 12px; }
  .support .badge{ height: 26px; }
}

/* --------- CGU 100% lisibles (pas sous la topbar) --------- */
@media (max-width: 768px){
  :root{ --header-offset: 68px; } /* utilisée pour le scroll des ancres */
  .yc-cgu{ padding-top: 10px; }
  .yc-cgu-card{ border-radius: 14px; }
  .yc-cgu-header{ padding: 16px; }
  .yc-cgu-content{ padding: 16px; }
  .yc-cgu-footer{ padding: 12px 16px 20px; }
  .yc-cgu-toc{ padding: 12px 16px; }
  .yc-cgu, .yc-cgu *{ color: var(--yc-text, #e7f3f1); }
  .yc-cgu-content p, .yc-cgu-content li{
    font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; word-break: break-word;
  }
  .yc-cgu h2{ font-size: 18px; }
  .yc-cgu-toc ol{ columns: 1 !important; } /* évite les colonnes étroites */
}

/* --------- Tables: scroll horizontal propre en mobile --------- */
@media (max-width: 768px){
  .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
  .table{ min-width: 720px; font-size: 14px; }
  .table th, .table td{ padding: 10px; }
  .table--clients td:nth-child(5),
  .table--clients td:nth-child(6){
    width: auto !important; min-width: 0 !important; white-space: normal; padding-left: 10px; padding-right: 10px;
  }
}

/* Burger caché par défaut (desktop) */
.cms-burger{ display:none !important; }

/* Afficher le burger uniquement sur mobile/tablette */
@media (max-width: 1024px){
  .cms-burger{
    display:inline-flex !important;
    width:42px; height:42px;
    align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:10px;
    background:rgba(255,255,255,.06);
    margin-right:8px;
  }
  /* Sidebar en off-canvas sur mobile/tablette */
  .cms-sidebar{
    position: fixed; left:0; top:0; bottom:0;
    width: min(86vw, 320px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 1100;
  }
  body.nav-open .cms-sidebar{ transform: translateX(0); }

  /* Overlay du menu */
  .cms-overlay{
    position: fixed; inset:0; z-index:1090;
    background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
    display:none;
  }
  body.nav-open .cms-overlay{ display:block; }
}

/* Desktop ≥ 1025px : sidebar visible, burger caché */
@media (min-width: 1025px){
  .cms-sidebar{ position:fixed; transform:none; }
  body.nav-open{ overflow:auto; } /* évite tout blocage si state résiduel */
}

/* Par défaut : caché sur PC */
.cms-burger {
  display: none !important;
}

/* Affiché uniquement si largeur <= 1024px */
@media (max-width: 1024px) {
  .cms-burger {
    display: inline-flex !important;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    margin-right: 8px;
    cursor: pointer;
  }
}

/* ======= Header du menu (sidebar) ======= */
.cms-brandbox{
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:12px 12px 14px;
}
.cms-brandlogo{
  width:36px; height:auto; display:block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.cms-brandname{
  font-weight:700; letter-spacing:.2px;
}

/* Adresse dans le menu (mobile) */
.cms-side-addr{
  display:none; /* on n'affiche que sur mobile */
  max-width: 92%;
  text-align:center;
  white-space: normal;          /* autorise retour à la ligne */
  overflow-wrap: anywhere;      /* coupe si très long */
}

/* Affichage mobile/tablette uniquement */
@media (max-width: 1024px){
  /* Logo + nom un peu plus grands sur mobile */
  .cms-brandlogo{ width:40px; }
  .cms-brandname{ font-size:16px; }

  /* On montre l'adresse dans le menu */
  .cms-side-addr{ display:block; }

  /* Et on cache la puce d'adresse de la topbar pour ne pas la voir sous la barre */
  .cms-topbar .chip.muted{ display:none; }
}

/* Desktop : on conserve ton rendu actuel */
@media (min-width: 1025px){
  .cms-side-addr{ display:none; } /* adresse reste gérée par la topbar sur PC */
}

/* Cacher la version mobile en desktop */
.cms-brandbox { display: none; }
@media (max-width: 1024px){
  .cms-brandmini { display: none; }
  .cms-brandbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 14px;
  }
  .cms-brandlogo {
    width: 40px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  }
  .cms-brandname {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
  }
  .cms-side-addr {
    max-width: 92%;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    display: block;
  }
  /* cacher l'adresse dans la topbar en mobile */
  .cms-topbar .chip.muted { display: none; }
}

/* === KPI en 4 colonnes SERREES partout (mobile inclus) === */
.card .kpis, .kpis{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;  /* pas de min 180px */
  gap: 8px !important;
  align-items: stretch;
  margin-bottom: 14px; /* espace entre les KPI et le bloc suivant */
}

/* Les items ne doivent pas forcer la largeur ni s'étirer sur la ligne entière */
.kpi{
  min-width: 0 !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 8px 6px;
}
.kpi span{ font-size: 16px; line-height: 1.1; }
.kpi b{ font-size: 18px; line-height: 1.1; }

/* Désactive explicitement les anciens overrides qui forçaient 2/1 colonnes */
@media (max-width:1100px){ .kpis{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 560px){ .kpis{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }

/* Fallback au cas où Grid serait neutralisé par un autre style */
@supports not (display: grid){
  .kpis{ display: flex !important; gap: 8px !important; }
  .kpi{ flex: 1 1 0 !important; }
}

/* Desktop visible, mobile caché */
.only-desktop{display:flex}
.only-mobile{display:none}

/* Mobile ≤ 900px : on inverse */
@media (max-width:900px){
  .only-desktop{display:none !important}
  .only-mobile{display:block !important}
  .m-actions{position:relative; display:inline-block}
  .m-actions .m-panel{
    position:absolute; right:0; top:42px;
    width:220px; max-width:80vw;
    background:#10181c; border:1px solid rgba(255,255,255,.08);
    border-radius:12px; padding:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    display:none; z-index:9999;
  }
  .m-actions .m-panel.open{display:block}
  .m-actions .m-panel .btn,
  .m-actions .m-panel form .btn{width:100%}
}

/* Remonte le paquet central d’environ ~2 cm (ajuste la valeur si besoin) */
.logincardv2-scope #login-pack{
  margin-top: -64px;   /* essaie -64px ; passe à -72px ou -80px si tu veux encore plus haut */
}

/* Optionnel : sur petites hauteurs, remonte un peu moins pour éviter le recadrage */
@media (max-height: 750px){
  .logincardv2-scope #login-pack{ margin-top: -48px; }
}
  /* Empêche la page de scroller, sans toucher aux autres pages */
body.logincardv2-scope{
  height:100svh;
  overflow:hidden;
}

/* Conteneur de placement du bloc central (ne change pas ton background) */
.logincardv2-scope .login-fit{
  height:100svh;                 /* occupe tout le viewport */
  display:grid;
  place-items:start center;      /* centré horizontal, vers le haut */
  padding-top:clamp(8px, 4vh, 28px);
  overflow:hidden;               /* coupe si jamais un pixel dépasse */
}

/* On ne scale QUE le paquet central, pas le décor */
#login-pack{
  transform-origin: top center;
  will-change: transform;
}
#login-pack{ transform-origin:top center; will-change:transform; }
@media (max-height:820px){ .logincardv2-scope #login-fit{ padding-top:16px } }
@media (max-height:700px){ #login-pack > img:first-child{ transform:scale(.92); transform-origin:top center } }

/* --- Bandeaux message --- */
.banner{ margin:0 auto 16px; max-width:440px; border-radius:12px; padding:12px 14px; display:flex; align-items:flex-start; gap:10px; line-height:1.45; box-shadow:0 4px 18px rgba(0,0,0,.08); border:1px solid transparent; }
.banner-icon{ font-size:18px; line-height:1; margin-top:2px; user-select:none; }
.banner strong{ display:block; margin-bottom:2px; }
.banner-error{ background:#fef2f2; border-color:#f9caca; color:#7a1c1c; }
.banner-success{ background:#f0fdf4; border-color:#bbf7d0; color:#14532d; }

/* --- Carte de login --- */
.logincardv2-card{ border-radius:16px; padding:24px; box-shadow:0 12px 30px rgba(0,0,0,.08); background:#0d1b1b; border:1px solid rgba(255,255,255,0.06); }
.logincardv2-title{ margin:0 0 14px; font-size:1.4rem; color:#e7f6f6; text-align:center; letter-spacing:.2px; }
.logincardv2-label{ color:#b7caca; font-size:.94rem; margin:10px 0 6px; display:block; }
.logincardv2-input{ width:100%; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#e7f6f6; border-radius:10px; padding:12px 12px; outline:none; transition:border-color .2s, box-shadow .2s; }
.logincardv2-input:focus{ border-color:#7dd3fc; box-shadow:0 0 0 3px rgba(125, 211, 252, .15); }
.logincardv2-actions{ margin-top:16px; }
.logincardv2-btn{ width:100%; padding:12px 14px; border-radius:12px; border:0; cursor:pointer; font-weight:600; letter-spacing:.2px; }
.logincardv2-btn-primary{ background:linear-gradient(180deg, #22d3ee, #06b6d4); color:#052d2d; box-shadow:0 8px 20px rgba(6,182,212,.25); }
.logincardv2-btn-primary:hover{ filter:brightness(1.05); }
.logincardv2-stack{ display:grid; gap:18px; }
.logincardv2-logo{ width:120px; height:auto; margin:10px auto 0; display:block; opacity:.95; filter:drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
.logincardv2-full{ min-height:100dvh; display:grid; place-items:center; padding:24px; background:radial-gradient(80% 100% at 50% 0%, #0b2b2b, #031818 60%, #021010); }
.logincardv2-scope{ margin:0; }

/* Footer */
.logincardv2-footer{ margin-top:12px; text-align:center; color:#9fb1b1; }
.logincardv2-links a{ color:#9ad2d2; text-decoration:none; margin:0 10px; }
.logincardv2-links a:hover{ text-decoration:underline; }
.copyright-footer{ text-align:center; font-size:.85rem; color:#b5c4c4; margin-top:15px; font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif; letter-spacing:.3px; user-select:none }

/* =======================
   Modale CGU (login-only)
   ======================= */
#modalCgu{ position:fixed; inset:0; z-index:9999; display:none; }
#modalCgu.show{ display:block; }
#modalCgu .modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
#modalCgu .modal-card{ position:relative; width:min(900px,92vw); margin:5vh auto 0; background:var(--panel-bg,#101214); border:1px solid var(--border,#263142); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.35); display:flex; flex-direction:column; max-height:85vh; }
#modalCgu .modal-head, #modalCgu .modal-foot{ padding:12px 14px; border-bottom:1px solid var(--border,#263142); }
#modalCgu .modal-foot{ border-top:1px solid var(--border,#263142); border-bottom:0; }
#modalCgu .modal-title{ margin:0; font-size:18px; }
#modalCgu .modal-close{ margin-left:auto; border:0; background:transparent; color:#cfd9d9; font-size:22px; line-height:1; cursor:pointer; }
#modalCgu .modal-body{ padding:12px; overflow:auto; }
#modalCgu.show .modal-card{ animation:modalSlide .22s ease-out both; }
@keyframes modalSlide{ from{ transform:translateY(16px); opacity:0 } to{ transform:none; opacity:1 } }

/* Effet “retournement de page” */
.cgu-flip-wrap{ perspective:1500px; -webkit-perspective:1500px; }
.cgu-flip-page{ transform-origin:left center; transform-style:preserve-3d; backface-visibility:hidden; will-change:transform,opacity; box-shadow:0 18px 50px rgba(0,0,0,.30), 0 0 1px rgba(0,0,0,.2); border:1px solid var(--border,#263142); background:var(--panel-bg,#101214); border-radius:12px; }
.flip-enter .cgu-flip-page{ animation:cguFlipIn .50s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes cguFlipIn{ 0%{ transform:rotateY(-88deg) translateX(-6px); opacity:.0 } 60%{ transform:rotateY(-18deg) translateX(-2px); opacity:.7 } 100%{ transform:rotateY(0deg) translateX(0); opacity:1 } }

.login-cgu-link{ color:#9ad2d2; text-decoration:underline; cursor:pointer; }

/* ==== Selects en thème sombre global ==== */

/* 1) Demande aux navigateurs d'utiliser des contrôles "dark" (liste native sombre) */
:root, body, .cms {
  color-scheme: dark;
}

/* 2) Sélecteurs YouCréation (table, drawers, formulaires) */
select.input,
.table select.input,
.input-count,
#drawer-new select.input,
#drawer-edit select.input {
  -webkit-appearance: none;
  appearance: none;
  color: #e6f0f0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  padding-right: 34px; /* place pour la flèche */
}

/* Flèche personnalisée (même style que tes drawers) */
select.input,
.input-count,
.table select.input {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

/* Focus cohérent */
select.input:focus,
.input-count:focus,
.table select.input:focus {
  outline: none;
  border-color: rgba(123,232,195,.45);
  box-shadow: 0 0 0 3px rgba(123,232,195,.12);
  background-color: #0d1716;
}

/* 3) Couleurs des options (utile surtout Firefox; Chrome/Edge suivent color-scheme) */
select.input option,
.input-count option,
.table select.input option,
#drawer-edit select.input option,
#drawer-new select.input option {
  background-color: #0e1716 !important;
  color: #e6f0f0 !important;
}

/* Option sélectionnée (surbrillance) */
select.input option:checked,
.input-count option:checked,
.table select.input option:checked {
  background: #134b3a linear-gradient(0deg,#134b3a,#134b3a) !important;
  color: #e6f0f0 !important;
}

/* Scrollbar du menu (WebKit/Blink) */
select.input::-webkit-scrollbar,
.input-count::-webkit-scrollbar {
  width: 10px;
}
select.input::-webkit-scrollbar-thumb,
.input-count::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.22);
  border-radius: 8px;
}

/* Vieilles versions IE/Edge : cache l’icône native */
select.input::-ms-expand,
.input-count::-ms-expand {
  display: none;
}

/* Largeur stable pour le select "Ajout QR-Codes" (1..10) */
.table--clients .input-count {
  min-width: 72px;      /* 2 chiffres + flèche = lisible */
  width: 72px;          /* garde la même taille, pas de saut */
  text-align-last: center;     /* centre le nombre (Firefox) */
  font-variant-numeric: tabular-nums; /* chiffres à chasse fixe */
}

/* Si tu veux un peu plus compact sur mobile */
@media (max-width: 720px){
  .table--clients .input-count { width: 66px; min-width: 66px; }
}
/* Forcer les contrôles natifs en sombre (liste dépliée incluse sur Chromium/Firefox) */
.table--clients select.input,
#drawer-edit select.input,
#drawer-new select.input {
  color-scheme: dark;            /* clé pour le menu natif sombre */
}

/* Teinte des lignes de la liste (options) */
.table--clients select.input option,
#drawer-edit select.input option,
#drawer-new select.input option {
  background-color: #0d1716;     /* fond sombre comme ton UI */
  color: #e6f0f0;                /* texte clair */
}

.table--clients select.input option:hover,
.table--clients select.input option:checked {
  background-color: #182527;     /* survol / sélection */
}

/* (déjà conseillé) largeur stable pour 1..10 */
.table--clients .input-count {
  min-width: 72px;
  width: 72px;
  text-align-last: center;       /* FF */
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px){
  .table--clients .input-count { width: 66px; min-width: 66px; }
}