/* WcPay Payment Links — feuille de style unique.
   Palette alignee sur wcpay.us : marine #07091A, bleu #2F6BFF, vert #0E9F6E. */

:root{
  --bg:#F5F7FB; --surface:#fff; --ink:#0F1421; --muted:#68718A; --line:#E3E8F0;
  --primary:#2F6BFF; --primary-dark:#1F4FD8; --green:#0E9F6E; --amber:#B45309;
  --red:#DC2626; --navy:#0B1020; --navy-2:#141B30;
  --radius:12px; --shadow:0 1px 2px rgba(15,20,33,.05),0 8px 24px rgba(15,20,33,.06);
  --sidebar:248px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 10px;line-height:1.25;letter-spacing:-.01em}
h1{font-size:1.5rem}
h2{font-size:1.15rem}
h3{font-size:1rem}
p{margin:0 0 12px}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}

/* ---------- Mise en page ---------- */
.shell{display:flex;min-height:100vh}
.side{
  width:var(--sidebar);flex:none;background:var(--navy);color:#C7CEE0;
  display:flex;flex-direction:column;padding:20px 14px;gap:4px;
}
.side .brand{display:flex;align-items:center;gap:10px;padding:6px 10px 20px;color:#fff;font-weight:700}
.side .brand span{font-size:1.02rem;letter-spacing:-.01em}
.side .dot{width:26px;height:26px;border-radius:7px;background:var(--primary);flex:none;
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800}
.side a.nav{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  color:#AEB7CC;font-size:.93rem;text-decoration:none;
}
.side a.nav:hover{background:var(--navy-2);color:#fff}
.side a.nav.on{background:var(--primary);color:#fff;font-weight:600}
.side .sep{margin:14px 11px 7px;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:#5C6680}
.side .foot{margin-top:auto;padding:12px 11px 0;border-top:1px solid #1E2740;font-size:.8rem;color:#737E99}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:14px;padding:14px 26px;background:var(--surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
.topbar .grow{flex:1}
.topbar .who{font-size:.86rem;color:var(--muted)}
.burger{display:none;background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink);padding:0 4px}
.wrap{padding:26px;max-width:1180px;width:100%}

/* ---------- Bandeau d'expiration ---------- */
.notice-expired{
  background:#FDECEC;border-bottom:1px solid #F6C9C9;color:#8E1B1B;
  padding:13px 26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.93rem;
}
.notice-expired strong{color:#7A1414}
.notice-expired .btn{margin-left:auto}
.notice-warn{
  background:#FFF7E6;border-bottom:1px solid #F4E0B5;color:#7A4A06;
  padding:11px 26px;font-size:.9rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.notice-warn .btn{margin-left:auto}

/* ---------- Blocs ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;margin-bottom:20px}
.card.tight{padding:0;overflow:hidden}
.card h2{margin-bottom:4px}
.card .sub{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow)}
.stat .k{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.stat .v{font-size:1.5rem;font-weight:700;margin-top:5px;letter-spacing:-.02em}
.stat .d{font-size:.82rem;color:var(--muted);margin-top:2px}

/* ---------- Formulaires ---------- */
label{display:block;font-size:.86rem;font-weight:600;margin:0 0 6px}
.hint{font-size:.82rem;color:var(--muted);margin:5px 0 0;font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink);font:inherit;font-size:.95rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(47,107,255,.35);border-color:var(--primary)}
textarea{min-height:92px;resize:vertical}
.field{margin-bottom:16px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>.field{flex:1;min-width:190px}
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--primary);color:#fff;border:0;border-radius:9px;padding:10px 18px;
  font:inherit;font-size:.93rem;font-weight:600;cursor:pointer;text-decoration:none;
}
.btn:hover{background:var(--primary-dark);text-decoration:none;color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#F2F5FA;color:var(--ink)}
.btn.danger{background:var(--red)}
.btn.danger:hover{background:#B91C1C}
.btn.sm{padding:7px 12px;font-size:.85rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  background:#FAFBFD;font-weight:700;white-space:nowrap}
tbody tr:hover{background:#FAFBFD}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:38px 20px;text-align:center;color:var(--muted)}

/* ---------- Pastilles ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.74rem;
  font-weight:700;letter-spacing:.02em;white-space:nowrap}
.b-green{background:#E3F6EE;color:#076C4A}
.b-blue{background:#E6EDFF;color:#1B40A8}
.b-amber{background:#FDF2DC;color:#8A5906}
.b-red{background:#FDE7E7;color:#9B1C1C}
.b-grey{background:#EEF1F6;color:#5B6478}

/* ---------- Messages ---------- */
.flash{padding:12px 15px;border-radius:10px;margin-bottom:16px;font-size:.92rem;
  border:1px solid transparent}
.flash.ok{background:#E8F7F0;border-color:#BFE6D5;color:#0A6B49}
.flash.err{background:#FDEBEB;border-color:#F3C9C9;color:#9B1C1C}
.flash.info{background:#EAF0FF;border-color:#C9D8FF;color:#1B40A8}

/* ---------- Bascules ---------- */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#CBD3E1;border-radius:999px;
  transition:background .16s;cursor:pointer}
.switch .slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform .16s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .slider{background:var(--green)}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch input:disabled + .slider{opacity:.45;cursor:not-allowed}

.methods{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.method{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:#fff}
.method .n{font-weight:600;font-size:.92rem}
.method .m{font-size:.78rem;color:var(--muted)}
.method.off{opacity:.55}
.method .grow{flex:1;min-width:0}

/* ---------- Page publique de facture ---------- */
.pub{min-height:100vh;background:#EEF1F7;padding:34px 16px;display:flex;justify-content:center}
.pub .sheet{width:100%;max-width:660px}
.pub .head{background:var(--brand,#2F6BFF);color:#fff;border-radius:14px 14px 0 0;padding:26px 28px}
.pub .head img{max-height:44px;max-width:190px;display:block;margin-bottom:14px;
  background:#fff;border-radius:6px;padding:5px 8px}
.pub .head .biz{font-size:1.05rem;font-weight:700}
.pub .head .ref{opacity:.85;font-size:.86rem;margin-top:3px}
.pub .body{background:#fff;padding:28px;border-radius:0 0 14px 14px;box-shadow:var(--shadow)}
.pub .total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px 0;border-top:2px solid var(--ink);margin-top:10px}
.pub .total .amt{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.pub .pay{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));margin-top:6px}
.pub .pay button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;text-align:left;color:var(--ink);
}
.pub .pay button:hover{border-color:var(--primary);background:#F7F9FF}
.pub .pay button .arrow{color:var(--muted);font-weight:400}
.pub .state{text-align:center;padding:28px 10px}
.pub .state .big{font-size:2.6rem;line-height:1}
.pub .foot{text-align:center;color:#8A93A6;font-size:.8rem;margin-top:18px}

/* ---------- Authentification ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:30px 16px;
  background:radial-gradient(1100px 520px at 50% -10%,#15204A 0%,#07091A 60%)}
.auth .box{width:100%;max-width:420px;background:#fff;border-radius:14px;padding:30px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.auth .logo{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-weight:800}
.auth .logo .dot{width:28px;height:28px;border-radius:8px;background:var(--primary);
  display:grid;place-items:center;color:#fff;font-size:14px}
.auth .alt{margin-top:18px;font-size:.88rem;color:var(--muted);text-align:center}

/* ---------- Divers ---------- */
.copy{display:flex;gap:8px;align-items:center}
.copy input{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;background:#F7F9FC}
.keylist{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.9;
  background:#F7F9FC;border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  max-height:280px;overflow:auto}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;padding:16px}
.muted{color:var(--muted)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}

/* ---------- Adaptatif ---------- */
@media(max-width:900px){
  .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .burger{display:block}
  .side{position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.4)}
  body.nav-open .side{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(7,9,26,.5);z-index:35}
  .wrap{padding:18px 16px}
  .topbar{padding:12px 16px}
  .notice-expired,.notice-warn{padding:12px 16px}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .notice-expired .btn,.notice-warn .btn{margin-left:0;width:100%}
}
@media print{
  .side,.topbar,.notice-expired,.notice-warn,.pub .pay{display:none!important}
  body{background:#fff}
  .pub .body{box-shadow:none}
}

/* ---------- Sélecteur de langue et petits éléments ---------- */
.langpick{margin:0}
.langpick select{
  padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font:inherit;font-size:.84rem;color:var(--muted);width:auto;min-width:104px;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px}
.side a.nav .ic{width:18px;display:inline-block;text-align:center;flex:none}
.notice-expired .bullet{font-size:19px;flex:none}
.side .foot a{color:#8C97B2}

/* ---------- Propriétés logiques : la mise en page suit la direction ---------- */
.notice-expired .btn,.notice-warn .btn{margin-left:0;margin-inline-start:auto}
.side a.nav,.method,.copy,.topbar,.actions{text-align:start}
th,td{text-align:start}
td.num,th.num{text-align:end}
.right{text-align:end}
.li,.hint{text-align:start}

/* ---------- Arabe : inversion complète ---------- */
[dir="rtl"] body,[dir="rtl"]{direction:rtl}
[dir="rtl"] .switch .slider::before{left:auto;right:3px}
[dir="rtl"] .switch input:checked + .slider::before{transform:translateX(-18px)}
[dir="rtl"] .trust span::before,[dir="rtl"] .wcp-check{transform:rotate(45deg)}
[dir="rtl"] .pub .head,[dir="rtl"] .pub .body{text-align:right}
[dir="rtl"] .side{inset:0 0 0 auto}
[dir="rtl"] .pager{direction:ltr}
[dir="rtl"] .mono,[dir="rtl"] input.mono,[dir="rtl"] .keylist{direction:ltr;text-align:left}
[dir="rtl"] .copy input{direction:ltr;text-align:left}
[dir="rtl"] .amt,[dir="rtl"] .stat .v{direction:ltr;unicode-bidi:embed}
@media(max-width:760px){
  [dir="rtl"] .side{transform:translateX(100%)}
  [dir="rtl"] body.nav-open .side{transform:none}
}
/* L'arabe se lit mieux avec un peu plus d'interligne et une police adaptée. */
[dir="rtl"] body{
  font-family:"Segoe UI","Noto Naskh Arabic","Geeza Pro",Tahoma,Arial,sans-serif;
  line-height:1.75;
}
[dir="rtl"] th{letter-spacing:0}

/* ---------- Choix de langue sur les pages d'authentification ---------- */
.langrow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--line)}
.langbtn{background:none;border:0;color:var(--muted);font:inherit;font-size:.82rem;
  padding:4px 9px;border-radius:7px;cursor:pointer}
.langbtn:hover{background:#F2F5FA;color:var(--ink)}
.langbtn.on{background:#E6EDFF;color:#1B40A8;font-weight:600}
[dir="rtl"] .pub .pay button .arrow{transform:scaleX(-1);display:inline-block}
[dir="rtl"] .pub .head .ref{unicode-bidi:isolate}
[dir="rtl"] .langrow{direction:ltr}