/* Farha — site de vente. Identité : bleu de Sidi Bou Saïd, chaux, laiton. */
:root{
  --lime:#F8F9F7; --wall:#EDF0EF; --blue:#0A5CAD; --blue-deep:#063B73; --ink:#14263B; --muted:#5B6B7C;
  --brass:#B4893A; --brass-hi:#E7C77E; --line:#D6DEE6; --ok:#2E7D5B; --warn:#B9782A; --bad:#A23B2A;
  --f-name:"El Messiri","Tajawal",sans-serif; --f-body:"Tajawal","Segoe UI",Tahoma,sans-serif; --f-label:"Tajawal","Segoe UI",Tahoma,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--lime);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.7;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img,video{max-width:100%}
a{color:var(--blue)}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-name);font-weight:600;color:var(--blue-deep);line-height:1.3;margin:0;text-wrap:balance}
.label{font-family:var(--f-label);font-size:13px;letter-spacing:.14em;color:var(--blue)}
.muted{color:var(--muted)}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-label);font-weight:500;font-size:16px;text-decoration:none;
  color:var(--lime);background:var(--blue);padding:12px 24px;border-radius:999px;border:0;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{background:var(--blue-deep)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.6;cursor:wait}
.btn.ghost{background:transparent;color:var(--blue-deep);border:1.5px solid var(--blue-deep)}
.btn.ghost:hover{background:rgba(10,92,173,.07)}
.btn.brass{background:var(--brass);color:#fff}
.btn.wa{background:#1F8F55}
.btn.sm{font-size:14px;padding:8px 14px}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brass);outline-offset:2px}

/* en-tête */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(248,249,247,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--lime)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--blue-deep)}
.logo b{font-family:var(--f-name);font-weight:700;font-size:28px;line-height:1}
.logo .arch{width:26px;height:32px;border:2.5px solid var(--blue);border-bottom:0;border-radius:13px 13px 0 0;position:relative}
.logo .arch::after{content:"";position:absolute;left:50%;top:9px;bottom:0;width:2px;background:var(--brass);transform:translateX(-50%)}
.nav{display:flex;gap:18px;align-items:center;font-family:var(--f-label);font-size:15px}
.nav a{text-decoration:none;color:var(--ink)}
@media (max-width:640px){.nav .hide-sm{display:none}}

/* formulaires */
.card{background:#fff;border-radius:20px;padding:22px 18px;box-shadow:0 18px 40px -30px rgba(6,59,115,.55);border:1px solid #e6ebf0}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.lbl{font-family:var(--f-label);font-size:14px;color:var(--blue-deep)}
.field small{color:var(--muted);font-size:14px;line-height:1.5}
input[type=text],input[type=tel],input[type=date],input[type=time],input[type=url],input[type=email],input[type=password],select,textarea{
  font:inherit;font-size:17px;color:var(--ink);background:var(--lime);border:1.5px solid #cdd6df;border-radius:12px;padding:10px 12px;width:100%;min-width:0}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,92,173,.15)}
input.bad,textarea.bad{border-color:var(--bad);background:#fff6f4}
.ltr{direction:ltr;text-align:left}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}

.pill{display:inline-block;font-family:var(--f-label);font-size:12px;border-radius:999px;padding:2px 10px;color:#fff;white-space:nowrap}
.pill.pending{background:var(--warn)}.pill.active{background:var(--ok)}.pill.disabled{background:#8a96a3}

.demo-bar{background:var(--brass);color:#fff;font-family:var(--f-label);font-size:13px;text-align:center;padding:6px 12px}
footer.site{border-top:1px solid var(--line);margin-top:40px;padding-block:24px;color:var(--muted);font-size:15px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;font-family:var(--f-label);
  font-size:15px;padding:10px 18px;border-radius:999px;z-index:50;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}