/* ================================================================
   OKAZ.MA — DESIGN SYSTEM PARTAGE (extrait des maquettes validées)
   Ce fichier est la source de vérité du nouveau design.
   Portage Blade : chaque bloc -> classe utilitaire Tailwind (@theme).
   ================================================================ */:root{/* Palette reprise du site reel :
     - --color-primary #06c   (boutons, liens)
     - accent du logo #1796FF (onglet bleu du logo OKAZ)
     - noir du logo #222222   (texte de la marque)
     Sans cela, la maquette ressemblerait a une autre marque. */
  
  --brand:#0066CC;
  --brand-600:#0059B3;
  --brand-active:#004C99;
  --brand-050:#E6F2FF;
  --logo-blue:#1796FF;
  --logo-ink:#222222;
  --ink:#121212;
  --ink-2:#39445C;
  --ink-3:#6B7793;
  --line:#E5E7EB;
  --bg:#F7F8FA;
  --white:#fff;
  --amber:#FFB020;
  --green:#12B76A;
  --okz-radius:16px;
  --okz-shadow-sm:0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.04);
  --okz-shadow-md:0 4px 16px rgba(11,18,32,.08);
  --okz-shadow-lg:0 18px 50px -12px rgba(11,18,32,.22);
  --okz-shadow-blue:0 10px 30px -8px rgba(10,102,255,.45);
  --okz-maxw:1280px;
}:where(.okz-root), :where(.okz-root) *{box-sizing:border-box;margin:0;padding:0}html.okz-root{scroll-behavior:smooth}body.okz-body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;border:none;background:none}.okz-wrap{max-width:var(--okz-maxw);margin:0 auto;padding:0 20px}/* ============ HEADER ============ */.okz-hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s;
}.okz-hdr.okz-scrolled{box-shadow:0 4px 24px -8px rgba(11,18,32,.12)}.okz-hdr-in{display:flex;align-items:center;gap:20px;height:72px}/* Le logo reel du site : "OKAZ" noir + onglet bleu (#1796FF).
   On l'utilise tel quel, pas une recreation. */.okz-logo{display:flex;align-items:center;flex-shrink:0;line-height:0}.okz-logo-img{height:38px;width:auto;display:block}.okz-logo-mark{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--logo-blue) 0%,var(--brand) 100%);
  display:grid;place-items:center;color:#fff;font-size:17px;
  box-shadow:var(--okz-shadow-blue);
}.okz-search{
  flex:1;max-width:640px;position:relative;display:flex;align-items:center;
  background:var(--bg);border:1.5px solid var(--line);border-radius:12px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}.okz-search:focus-within{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(10,102,255,.1)}.okz-search i{position:absolute;inset-inline-start:14px;color:var(--ink-3);font-size:14px}.okz-search input{
  flex:1;border:none;background:none;outline:none;padding:12px 14px 12px 40px;
  font:inherit;font-size:14px;color:var(--ink);min-width:0;
}.okz-search input::placeholder{color:var(--ink-3);opacity:1}.okz-search .okz-go{
  margin:4px;padding:9px 20px;border-radius:9px;background:var(--brand);color:#fff;
  font-weight:700;font-size:14px;transition:background .2s;flex-shrink:0;
  box-shadow:var(--okz-shadow-blue);
}.okz-search .okz-go:hover{background:var(--brand-600)}.okz-hdr-actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px}.okz-btn-ghost{
  display:inline-block;padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;
  color:var(--ink-2);transition:background .2s,color .2s;
}.okz-btn-ghost:hover{background:var(--bg);color:var(--ink)}.okz-btn-primary{
  display:inline-block;padding:11px 20px;border-radius:10px;background:var(--brand);color:#fff;
  font-weight:700;font-size:14px;box-shadow:var(--okz-shadow-blue);transition:transform .15s,background .2s;
}.okz-btn-primary:hover{background:var(--brand-600);transform:translateY(-1px)}/* ============ HERO AVEC VIDEO ============ */.okz-hero{position:relative;min-height:600px;display:flex;align-items:center;overflow:hidden;background:#0B1220}.okz-hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;transform:scale(1.04);
}.okz-hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(8,14,28,.94) 0%, rgba(8,14,28,.78) 38%, rgba(8,14,28,.30) 72%, rgba(8,14,28,.55) 100%),
    radial-gradient(120% 90% at 80% 10%, rgba(10,102,255,.30), transparent 60%);
}.okz-hero-in{position:relative;z-index:2;width:100%;padding:72px 20px 96px}.okz-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}.okz-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(8px);
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.2px;margin-bottom:22px;
}.okz-eyebrow .okz-pulse{width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pulse 2s infinite}@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}.okz-hero h1{
  color:#fff;font-size:clamp(38px,5.2vw,64px);font-weight:800;
  letter-spacing:-2.2px;line-height:1.04;margin-bottom:20px;
}.okz-hero h1 .okz-grad{
  background:linear-gradient(95deg,#7FC4FF 0%,var(--logo-blue) 45%,#0066CC 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}.okz-hero p.okz-lead{color:rgba(255,255,255,.80);font-size:17px;max-width:540px;margin-bottom:30px;line-height:1.6}.okz-hero-cta{display:flex;gap:12px;flex-wrap:wrap}.okz-hero-cta .okz-big{
  display:inline-block;padding:14px 26px;border-radius:12px;font-weight:700;font-size:15px;
  background:#fff;color:var(--ink);box-shadow:0 10px 34px -10px rgba(0,0,0,.6);
  transition:transform .15s;
}.okz-hero-cta .okz-big:hover{transform:translateY(-2px)}.okz-hero-cta .okz-ghost{
  display:inline-block;padding:14px 26px;border-radius:12px;font-weight:700;font-size:15px;color:#fff;
  border:1.5px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);transition:background .2s;
}.okz-hero-cta .okz-ghost:hover{background:rgba(255,255,255,.16)}/* carte flottante qui montre la "vidéo d'annonce" */.okz-hero-card{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(20px);border-radius:20px;padding:14px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}/* Sur fond sombre, version blanche du logo (comme le site le fait en
   mode sombre) : on inverse le noir, et on recolore l'onglet bleu. */.okz-on-dark .okz-logo-img{filter:invert(1) brightness(1.6) saturate(.4) sepia(1) hue-rotate(175deg) saturate(6)}.okz-on-dark .okz-logo-img.okz-on-dark-keep{filter:none}.okz-hero-card .okz-vid{
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#111;
}.okz-hero-card .okz-vid video{width:100%;height:100%;object-fit:cover}.okz-hero-card .okz-vid .okz-live{
  position:absolute;top:12px;inset-inline-start:12px;display:flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;background:rgba(220,38,38,.92);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.6px;backdrop-filter:blur(6px);
}.okz-hero-card .okz-vid .okz-live .okz-dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}.okz-hero-card .okz-vid .okz-play{
  position:absolute;inset:0;display:grid;place-items:center;
}.okz-hero-card .okz-vid .okz-play span{
  width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);
  color:var(--brand);display:grid;place-items:center;font-size:20px;
  box-shadow:0 8px 26px rgba(0,0,0,.4);transition:transform .2s;
}.okz-hero-card .okz-vid .okz-play:hover span{transform:scale(1.1)}.okz-hero-card .okz-meta{padding:14px 6px 4px;color:#fff}.okz-hero-card .okz-meta h3{font-size:15px;font-weight:700;margin-bottom:5px}.okz-hero-card .okz-meta .okz-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:rgba(255,255,255,.72)}.okz-hero-card .okz-meta .okz-price{
  margin-inline-start:auto;font-weight:800;font-size:16px;color:#fff;
}.okz-hero-card .okz-meta .okz-price small{font-size:11px;opacity:.7;font-weight:600}/* barre de stats sous le hero */.okz-stats{
  position:relative;z-index:3;margin-top:-46px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--okz-shadow-lg);
}.okz-stat{background:#fff;padding:22px 24px}.okz-stat .okz-n{font-size:26px;font-weight:800;letter-spacing:-1px;margin-bottom:3px}.okz-stat .okz-l{font-size:13px;color:var(--ink-3);font-weight:500}/* ============ CATEGORIES ============ */section{padding:64px 0}.okz-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}.okz-sec-head h2{font-size:27px;font-weight:800;letter-spacing:-.9px}.okz-sec-head p{color:var(--ink-3);font-size:14.5px;margin-top:5px}.okz-sec-head a{color:var(--brand);font-weight:700;font-size:14px;white-space:nowrap}.okz-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.okz-cat{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 14px;
  text-align:center;transition:transform .18s,box-shadow .18s,border-color .18s;
}.okz-cat:hover{transform:translateY(-4px);box-shadow:var(--okz-shadow-md);border-color:transparent}.okz-cat .okz-ic{
  width:46px;height:46px;margin:0 auto 11px;border-radius:13px;display:grid;place-items:center;
  font-size:19px;background:var(--brand-050);color:var(--brand);transition:background .18s,color .18s;
}.okz-cat:hover .okz-ic{background:var(--brand);color:#fff}.okz-cat .okz-nm{font-size:13.5px;font-weight:700;margin-bottom:2px}.okz-cat .okz-ct{font-size:11.5px;color:var(--ink-3)}/* ============ GRILLE ANNONCES ============ */.okz-feat{
  background:linear-gradient(135deg,#0A66FF 0%,#0B49C7 55%,#0A3AA8 100%);
  border-radius:22px;padding:26px;margin-bottom:30px;position:relative;overflow:hidden;
}.okz-feat::after{
  content:'';position:absolute;inset-inline-end:-60px;top:-60px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(255,255,255,.20),transparent 70%);
}.okz-feat h3{color:#fff;font-size:21px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px}.okz-feat p{color:rgba(255,255,255,.80);font-size:14px;margin-bottom:18px;max-width:520px}.okz-feat-row{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:2}.okz-chip{
  display:inline-block;padding:9px 17px;border-radius:999px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);color:#fff;font-size:13.5px;font-weight:600;
  backdrop-filter:blur(8px);transition:background .2s;
}.okz-chip:hover{background:rgba(255,255,255,.28)}.okz-chip.okz-on{background:#fff;color:var(--brand);border-color:#fff}.okz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.okz-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--okz-radius);overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;
}.okz-card:hover{transform:translateY(-5px);box-shadow:var(--okz-shadow-lg);border-color:transparent}.okz-card .okz-media{position:relative;aspect-ratio:4/3;background:#EEF1F7;overflow:hidden}.okz-card .okz-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.okz-card:hover .okz-media img{transform:scale(1.06)}.okz-card .okz-media .okz-vbadge{
  position:absolute;bottom:10px;inset-inline-end:10px;
  display:flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:8px;background:rgba(11,18,32,.82);color:#fff;
  font-size:11px;font-weight:700;backdrop-filter:blur(6px);
}.okz-card .okz-media .okz-vbadge .okz-live-dot{width:6px;height:6px;border-radius:50%;background:#FF4D4F}.okz-card .okz-media .okz-tag{
  position:absolute;top:10px;inset-inline-start:10px;padding:5px 10px;border-radius:8px;
  font-size:11px;font-weight:700;background:#fff;color:var(--ink-2);box-shadow:var(--okz-shadow-sm);
}.okz-card .okz-media .okz-tag.okz-new{background:var(--green);color:#fff}.okz-card .okz-media .okz-fav{
  position:absolute;top:9px;inset-inline-end:9px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--ink-3);
  opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s,color .2s;
}.okz-card:hover .okz-media .okz-fav{opacity:1;transform:translateY(0)}.okz-card .okz-media .okz-fav:hover{color:#E5484D}.okz-card .okz-body{padding:14px}.okz-card .okz-price{font-size:19px;font-weight:800;letter-spacing:-.6px;margin-bottom:5px}.okz-card .okz-price small{font-size:12px;font-weight:600;color:var(--ink-3);margin-inline-start:3px}.okz-card .okz-ttl{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}.okz-card .okz-foot{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--ink-2);opacity:.85}.okz-card .okz-foot .okz-loc{display:flex;align-items:center;gap:4px}.okz-card .okz-foot .okz-ago{margin-inline-start:auto}/* pub native */.okz-card.okz-ad{border-color:#FFD79A;background:linear-gradient(180deg,#FFFBF3 0%,#fff 42%)}.okz-card.okz-ad .okz-media{aspect-ratio:4/3}.okz-card.okz-ad .okz-adflag{
  position:absolute;top:10px;inset-inline-start:10px;padding:5px 10px;border-radius:8px;
  background:#F59E0B;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.4px;
}/* ============ PUBS VIDEO (section dediee) ============ */.okz-vids{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.okz-vcard{
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--okz-shadow-sm);transition:transform .2s,box-shadow .2s;
}.okz-vcard:hover{transform:translateY(-5px);box-shadow:var(--okz-shadow-lg)}.okz-vcard .okz-thumb{position:relative;aspect-ratio:16/10;background:#0B1220;overflow:hidden}.okz-vcard .okz-thumb video{width:100%;height:100%;object-fit:cover;opacity:.9}.okz-vcard .okz-thumb .okz-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,18,32,.75) 100%)}.okz-vcard .okz-thumb .okz-play{
  position:absolute;inset:0;display:grid;place-items:center;
}.okz-vcard .okz-thumb .okz-play span{
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--brand);
  display:grid;place-items:center;font-size:17px;box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .2s;
}.okz-vcard:hover .okz-thumb .okz-play span{transform:scale(1.12)}.okz-vcard .okz-thumb .okz-dur{
  position:absolute;bottom:10px;inset-inline-end:10px;padding:4px 9px;border-radius:7px;
  background:rgba(11,18,32,.85);color:#fff;font-size:11px;font-weight:700;
}.okz-vcard .okz-thumb .okz-live{
  position:absolute;top:10px;inset-inline-start:10px;display:flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:8px;background:#E5484D;color:#fff;font-size:11px;font-weight:800;
}.okz-vcard .okz-body{padding:16px}.okz-vcard .okz-body .okz-ttl{font-size:15px;font-weight:700;margin-bottom:6px}.okz-vcard .okz-body .okz-sub{font-size:13px;color:var(--ink-3);display:flex;gap:14px;flex-wrap:wrap}.okz-vcard .okz-body .okz-sub b{color:var(--ink);font-weight:700}/* ============ CTA / PUB ============ */.okz-cta-band{
  margin-top:34px;
  background:#0B1220;border-radius:24px;padding:52px 40px;text-align:center;
  position:relative;overflow:hidden;margin:20px 0 64px;
}.okz-cta-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(60% 120% at 50% 0%, rgba(10,102,255,.35), transparent 70%);
}.okz-cta-band h2{color:#fff;font-size:32px;font-weight:800;letter-spacing:-1.1px;margin-bottom:12px;position:relative}.okz-cta-band p{color:rgba(255,255,255,.72);max-width:520px;margin:0 auto 26px;position:relative;font-size:15.5px}.okz-cta-band .okz-btn-primary{background:var(--brand);padding:14px 30px;font-size:15px;position:relative}.okz-cta-band .okz-stats-note{color:rgba(255,255,255,.5);font-size:13px;margin-top:18px;position:relative}/* ============ FOOTER ============ */.okz-root footer{background:#fff;border-top:1px solid var(--line);padding:46px 0 28px}.okz-f-top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px;margin-bottom:34px}.okz-root footer h4{font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}.okz-root footer a{display:block;font-size:13.5px;color:var(--ink-2);padding:5px 0;transition:color .15s}.okz-root footer a:hover{color:var(--brand)}.okz-f-bot{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}/* badges */.okz-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:6px;background:var(--brand-050);color:var(--brand)}.okz-badge.okz-green{background:#E7F8F0;color:var(--green)}.okz-badge.okz-amber{background:#FFF4E0;color:#B54708}/* note de conception *//* La note de conception ne doit pas masquer le contenu (elle
   recouvrait le bouton du bandeau CTA). Elle est repliee derriere un
   bouton discret et ne s'ouvre qu'au clic. */.okz-note-btn{
  position:fixed;left:18px;bottom:18px;z-index:81;width:38px;height:38px;border-radius:50%;
  background:#0B1220;color:#fff;box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
  display:grid;place-items:center;font-size:15px;transition:transform .2s;
}.okz-note-btn:hover{transform:scale(1.08)}.okz-note{
  position:fixed;inset-inline-start:18px;bottom:64px;z-index:80;
  background:#0B1220;color:#fff;border-radius:13px;padding:14px 16px;max-width:270px;
  font-size:12px;line-height:1.55;box-shadow:0 20px 50px -12px rgba(0,0,0,.55);
  display:none;
}.okz-note.okz-open{display:block;animation:noteIn .22s ease}@keyframes noteIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.okz-note b{color:#8FC0FF}.okz-note .okz-x{position:absolute;top:8px;inset-inline-end:12px;color:rgba(255,255,255,.5);font-size:14px;cursor:pointer}/* responsive */@media (max-width:1100px){.okz-cats{grid-template-columns:repeat(3,1fr)}.okz-grid{grid-template-columns:repeat(3,1fr)}.okz-hero-grid{grid-template-columns:1fr;gap:34px}.okz-hero-card{max-width:420px}
}@media (max-width:820px){.okz-stats{grid-template-columns:repeat(2,1fr)}.okz-vids{grid-template-columns:1fr}.okz-grid{grid-template-columns:repeat(2,1fr)}.okz-f-top{grid-template-columns:1fr 1fr}.okz-hdr-in{height:64px}.okz-search .okz-go{display:none}.okz-hdr-actions .okz-btn-ghost{display:none}
}@media (max-width:560px){.okz-cats{grid-template-columns:repeat(2,1fr)}.okz-grid{grid-template-columns:1fr 1fr;gap:12px}.okz-hero{min-height:auto}.okz-f-top{grid-template-columns:1fr}.okz-note,.okz-note-btn{display:none}
}/* ============ BACK-OFFICE (issu de admin.html) ============ */.okz-adm 
img{display:block;max-width:100%}.okz-adm a{color:inherit;text-decoration:none}.okz-adm button{font:inherit;cursor:pointer;border:none;background:none}.okz-adm input,.okz-adm select{font:inherit;color:inherit}.okz-adm .okz-wrap{max-width:var(--okz-maxw);margin:0 auto;padding:0 24px}/* ============ BARRE ADMIN (dark, .adm distincte du site public) ============ */.okz-adm 
.okz-admin-bar{
  background:#0B1220;color:#fff;padding:0 24px;height:60px;
  display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:70;
}.okz-admin-bar .okz-logo{display:flex;align-items:center;gap:9px;flex-shrink:0}.okz-admin-bar .okz-logo .okz-badge{
  padding:3px 9px;border-radius:7px;background:rgba(255,255,255,.12);
  font-size:11px;font-weight:800;letter-spacing:.5px;
}.okz-admin-bar .okz-brand-txt{font-size:15px;font-weight:800}.okz-admin-bar .okz-sep{width:1px;height:26px;background:rgba(255,255,255,.14)}.okz-admin-bar .okz-ctx{font-size:13px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:8px}.okz-admin-bar .okz-ctx i{color:var(--logo-blue)}.okz-admin-bar .okz-right{margin-inline-start:auto;display:flex;align-items:center;gap:10px}.okz-admin-bar .okz-search{
  display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.13);border-radius:9px;padding:7px 13px;
}.okz-admin-bar .okz-search i{color:rgba(255,255,255,.5);font-size:12.5px}.okz-admin-bar .okz-search input{background:none;border:none;outline:none;color:#fff;font:inherit;font-size:13px;width:210px}.okz-admin-bar .okz-search input::placeholder{color:rgba(255,255,255,.42)}.okz-adm .okz-icon-btn{
  width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.09);
  display:grid;place-items:center;color:rgba(255,255,255,.8);font-size:13.5px;position:relative;
}.okz-adm .okz-icon-btn:hover{background:rgba(255,255,255,.16)}.okz-adm .okz-icon-btn .okz-dot{
  position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;
  background:var(--red);border:1.5px solid #0B1220;
}.okz-admin-bar .okz-me{display:flex;align-items:center;gap:9px;padding-inline-start:6px}.okz-admin-bar .okz-me .okz-ava{
  width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--logo-blue),var(--brand));
  display:grid;place-items:center;font-size:12.5px;font-weight:800;
}.okz-admin-bar .okz-me .okz-t{font-size:12.5px;font-weight:700;line-height:1.2}.okz-admin-bar .okz-me .okz-r{font-size:10.5px;color:rgba(255,255,255,.55)}/* ============ SHELL ADMIN ============ */.okz-adm 
.okz-shell{display:grid;grid-template-columns:238px 1fr;gap:26px;align-items:start;padding:24px 0 60px}.okz-adm .okz-sidenav{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;
  box-shadow:var(--okz-shadow-sm);position:sticky;top:84px;
}.okz-adm .okz-sidenav .okz-grp{
  font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink-3);padding:12px 12px 7px;
}.okz-adm .okz-sidenav a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);transition:background .15s,color .15s;
}.okz-adm .okz-sidenav a i{width:16px;text-align:center;font-size:13px;color:var(--ink-3)}.okz-adm .okz-sidenav a:hover{background:var(--bg);color:var(--ink)}.okz-adm .okz-sidenav a.okz-on{background:var(--brand);color:#fff;font-weight:700}.okz-adm .okz-sidenav a.okz-on i{color:#fff}.okz-adm .okz-sidenav a .okz-b{
  margin-inline-start:auto;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;
  min-width:19px;height:19px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
}.okz-adm .okz-sidenav a.okz-on .okz-b{background:#fff;color:var(--brand)}/* ============ PAGE HEAD ============ */.okz-adm 
.okz-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}.okz-adm .okz-page-head h1{font-size:23px;font-weight:800;letter-spacing:-.6px;margin-bottom:3px}.okz-adm .okz-page-head .okz-sub{color:var(--ink-3);font-size:13.5px}.okz-adm .okz-page-head .okz-acts{display:flex;flex-wrap:wrap;gap:9px;min-width:0}.okz-adm .okz-btn-primary{
  padding:10px 17px;border-radius:10px;background:var(--brand);color:#fff;font-weight:700;font-size:13.5px;
  box-shadow:var(--okz-shadow-blue);display:inline-flex;align-items:center;gap:7px;
}.okz-adm .okz-btn-primary:hover{background:var(--brand-600)}.okz-adm .okz-btn-ghost{
  padding:10px 17px;border-radius:10px;background:#fff;border:1px solid var(--line);
  font-weight:700;font-size:13.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;
}.okz-adm .okz-btn-ghost:hover{border-color:var(--brand);color:var(--brand)}/* ============ KPI ============ */.okz-adm 
.okz-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-bottom:18px}.okz-adm .okz-kpi{
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px 16px;
  box-shadow:var(--okz-shadow-sm);position:relative;overflow:hidden;
}.okz-adm .okz-kpi .okz-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.okz-adm .okz-kpi .okz-lbl{font-size:11.5px;color:var(--ink-3);font-weight:600}.okz-adm .okz-kpi .okz-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:12.5px;background:var(--brand-050);color:var(--brand)}.okz-adm .okz-kpi.okz-g .okz-ic{background:#E7F8F0;color:var(--green)}.okz-adm .okz-kpi.okz-a .okz-ic{background:#FFF4E0;color:#B54708}.okz-adm .okz-kpi.okz-r .okz-ic{background:#FDECEC;color:var(--red)}.okz-adm .okz-kpi.okz-p .okz-ic{background:#F3EEFF;color:var(--purple)}.okz-adm .okz-kpi.okz-c .okz-ic{background:#E0F2FE;color:var(--cyan)}.okz-adm .okz-kpi .okz-n{font-size:24px;font-weight:800;letter-spacing:-.9px;line-height:1.1}.okz-adm .okz-kpi .okz-n small{font-size:12px;color:var(--ink-3);font-weight:600}.okz-adm .okz-kpi .okz-t{margin-top:5px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px}.okz-adm .okz-kpi .okz-t.okz-up{color:var(--green)}.okz-adm .okz-kpi .okz-t.okz-dn{color:var(--red)}.okz-adm .okz-kpi .okz-t.okz-flat{color:var(--ink-3)}/* ============ ALERTE MONETISATION (le point cle) ============ */.okz-adm 
.okz-alert{
  background:linear-gradient(100deg,#0A66FF,#0B49C7);border-radius:15px;padding:20px 22px;
  color:#fff;margin-bottom:18px;position:relative;overflow:hidden;display:flex;gap:18px;align-items:center;
}.okz-adm .okz-alert::after{content:'';position:absolute;inset-inline-end:-50px;top:-70px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}.okz-adm .okz-alert .okz-ic{
  width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;font-size:20px;flex-shrink:0;position:relative;z-index:2;
}.okz-adm .okz-alert .okz-tx{flex:1;position:relative;z-index:2}.okz-adm .okz-alert h3{font-size:16px;font-weight:800;margin-bottom:4px}.okz-adm .okz-alert p{font-size:13px;color:rgba(255,255,255,.82);line-height:1.55}.okz-adm .okz-alert p b{color:#fff}.okz-adm .okz-alert .okz-cta{
  background:#fff;color:var(--brand);padding:10px 18px;border-radius:10px;font-weight:800;font-size:13px;
  flex-shrink:0;position:relative;z-index:2;
}.okz-adm .okz-alert .okz-cta:hover{background:#E6F2FF}/* ============ GRILLE ============ */.okz-adm 
.okz-grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start;margin-bottom:18px}.okz-adm .okz-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}.okz-adm .okz-panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--okz-radius);
  box-shadow:var(--okz-shadow-sm);overflow:hidden;
}.okz-adm .okz-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}.okz-adm .okz-panel-head h2{font-size:14.5px;font-weight:800;display:flex;align-items:center;gap:9px}.okz-adm .okz-panel-head h2 i{color:var(--brand)}.okz-adm .okz-panel-head a,.okz-adm .okz-panel-head .okz-lnk{font-size:12.5px;font-weight:700;color:var(--brand)}.okz-adm .okz-panel-body{padding:18px}/* ============ GRAPHE ============ */.okz-adm 
.okz-chart{display:flex;align-items:flex-end;gap:8px;height:180px;padding-top:6px}.okz-adm .okz-chart .okz-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}.okz-adm .okz-chart .okz-bar{width:100%;max-width:30px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--brand),var(--brand-600));position:relative}.okz-adm .okz-chart .okz-bar span{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700;color:var(--ink);white-space:nowrap}.okz-adm .okz-chart .okz-col .okz-lb{font-size:10.5px;color:var(--ink-3);font-weight:600}.okz-adm .okz-chart .okz-bar.okz-zero{background:var(--line)}/* graphe a deux series (barres empilees) */.okz-adm 
.okz-dual{display:flex;align-items:flex-end;gap:10px;height:180px}.okz-adm .okz-dual .okz-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}.okz-adm .okz-dual .okz-stack{width:100%;max-width:28px;display:flex;flex-direction:column-reverse;border-radius:5px 5px 0 0;overflow:hidden}.okz-adm .okz-dual .okz-stack i{display:block;width:100%}.okz-adm .okz-dual .okz-stack .okz-a{background:var(--brand)}.okz-adm .okz-dual .okz-stack .okz-b{background:#93C5FD}.okz-adm .okz-dual .okz-col .okz-lb{font-size:10.5px;color:var(--ink-3);font-weight:600}/* ============ DONUT ============ */.okz-adm 
.okz-donut-wrap{display:flex;align-items:center;gap:20px}.okz-adm .okz-donut{
  width:132px;height:132px;border-radius:50%;flex-shrink:0;position:relative;
  background:conic-gradient(var(--brand) 0 78%, var(--logo-blue) 78% 92%, var(--amber) 92% 97%, #E5E7EB 97% 100%);
}.okz-adm .okz-donut::after{
  content:'';position:absolute;inset:26px;background:#fff;border-radius:50%;
}.okz-adm .okz-donut .okz-c{position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center}.okz-adm .okz-donut .okz-c b{font-size:23px;font-weight:800;display:block;line-height:1.1}.okz-adm .okz-donut .okz-c span{font-size:10.5px;color:var(--ink-3);font-weight:600}.okz-adm .okz-legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}.okz-adm .okz-legend .okz-l{display:flex;align-items:center;gap:9px;font-size:12.5px}.okz-adm .okz-legend .okz-l i{width:10px;height:10px;border-radius:3px;flex-shrink:0}.okz-adm .okz-legend .okz-l b{margin-inline-start:auto;font-weight:800}.okz-adm .okz-legend .okz-l span{color:var(--ink-3);font-size:11.5px}/* ============ TABLEAU ============ */.okz-adm 
.okz-tbl{width:100%;border-collapse:collapse}.okz-adm .okz-tbl th{
  text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ink-3);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}.okz-adm .okz-tbl td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}.okz-adm .okz-tbl tr:last-child td{border-bottom:none}.okz-adm .okz-tbl tbody tr:hover{background:#FAFBFD}.okz-adm .okz-tbl .okz-id{font-weight:700;color:var(--brand);font-size:12px}.okz-adm .okz-tbl .okz-thumb{width:46px;height:35px;border-radius:7px;object-fit:cover;background:#EEF1F7}.okz-adm .okz-tbl .okz-ttl{font-weight:600;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.okz-adm .okz-tbl .okz-num{text-align:end;font-variant-numeric:tabular-nums}.okz-adm .okz-tbl .okz-act{display:flex;gap:5px;justify-content:flex-end}.okz-adm .okz-tbl .okz-act button{
  width:29px;height:29px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--ink-3);display:grid;place-items:center;font-size:11.5px;
}.okz-adm .okz-tbl .okz-act button:hover{border-color:var(--brand);color:var(--brand)}.okz-adm .okz-tbl .okz-act button.okz-d:hover{border-color:var(--red);color:var(--red)}.okz-adm .okz-pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;white-space:nowrap;
}.okz-adm .okz-pill.okz-g{background:#E7F8F0;color:var(--green)}.okz-adm .okz-pill.okz-a{background:#FFF4E0;color:#B54708}.okz-adm .okz-pill.okz-r{background:#FDECEC;color:var(--red)}.okz-adm .okz-pill.okz-b{background:var(--brand-050);color:var(--brand)}.okz-adm .okz-pill.okz-n{background:#F1F3F6;color:var(--ink-3)}/* ============ FIL D'ACTIVITE ============ */.okz-adm 
.okz-feed{display:flex;flex-direction:column}.okz-adm .okz-feed .okz-f{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.okz-adm .okz-feed .okz-f:last-child{border-bottom:none}.okz-adm .okz-feed .okz-f .okz-ic{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-size:12.5px;
  background:var(--brand-050);color:var(--brand);
}.okz-adm .okz-feed .okz-f.okz-r .okz-ic{background:#FDECEC;color:var(--red)}.okz-adm .okz-feed .okz-f.okz-g .okz-ic{background:#E7F8F0;color:var(--green)}.okz-adm .okz-feed .okz-f.okz-a .okz-ic{background:#FFF4E0;color:#B54708}.okz-adm .okz-feed .okz-f .okz-tx{font-size:12.5px;line-height:1.5;flex:1;min-width:0}.okz-adm .okz-feed .okz-f .okz-tx b{font-weight:700}.okz-adm .okz-feed .okz-f .okz-tm{font-size:11px;color:var(--ink-3);margin-top:2px}/* ============ MODERATION (file d'attente) ============ */.okz-adm 
.okz-modo{
  display:flex;gap:13px;padding:14px;border:1px solid var(--line);border-radius:12px;
  align-items:flex-start;margin-bottom:11px;transition:border-color .16s;
}.okz-adm .okz-modo:hover{border-color:var(--brand)}.okz-adm .okz-modo .okz-th{width:62px;height:47px;border-radius:8px;overflow:hidden;background:#EEF1F7;flex-shrink:0}.okz-adm .okz-modo .okz-th img{width:100%;height:100%;object-fit:cover}.okz-adm .okz-modo .okz-tx{flex:1;min-width:0}.okz-adm .okz-modo .okz-t{font-size:13.5px;font-weight:700;margin-bottom:3px}.okz-adm .okz-modo .okz-r{font-size:12px;color:var(--ink-3);display:flex;gap:12px;flex-wrap:wrap;align-items:center}.okz-adm .okz-modo .okz-r .okz-why{color:var(--red);font-weight:700}.okz-adm .okz-modo .okz-btns{display:flex;gap:6px;flex-shrink:0}.okz-adm .okz-modo .okz-btns button{
  padding:7px 12px;border-radius:9px;font-size:12px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--ink-2);
}.okz-adm .okz-modo .okz-btns button.okz-ok{border-color:var(--green);color:var(--green)}.okz-adm .okz-modo .okz-btns button.okz-ok:hover{background:var(--green);color:#fff}.okz-adm .okz-modo .okz-btns button.okz-no{border-color:var(--red);color:var(--red)}.okz-adm .okz-modo .okz-btns button.okz-no:hover{background:var(--red);color:#fff}/* ============ VIDEOS (module cle) ============ */.okz-adm 
.okz-vstat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.okz-adm .okz-vstat .okz-v{
  border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff;
}.okz-adm .okz-vstat .okz-v .okz-l{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-bottom:5px}.okz-adm .okz-vstat .okz-v .okz-n{font-size:20px;font-weight:800;letter-spacing:-.6px}.okz-adm .okz-vstat .okz-v .okz-n small{font-size:11.5px;color:var(--ink-3);font-weight:600}.okz-adm .okz-vstat .okz-v.okz-hl{background:var(--brand-050);border-color:#BFDBFE}.okz-adm .okz-vstat .okz-v.okz-hl .okz-n{color:var(--brand)}/* note de conception */.okz-adm 
.okz-note-btn{
  position:fixed;right:18px;bottom:18px;z-index:81;width:38px;height:38px;border-radius:50%;
  background:#0B1220;color:#fff;box-shadow:0 10px 30px -8px rgba(0,0,0,.5);display:grid;place-items:center;font-size:15px;
}.okz-adm .okz-note{
  position:fixed;right:18px;bottom:64px;z-index:80;background:#0B1220;color:#fff;border-radius:13px;
  padding:14px 16px;max-width:300px;font-size:12px;line-height:1.55;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.55);display:none;
}.okz-adm .okz-note.okz-open{display:block}.okz-adm .okz-note b{color:#8FC0FF}.okz-adm .okz-note .okz-x{position:absolute;top:8px;inset-inline-end:12px;color:rgba(255,255,255,.5);font-size:14px;cursor:pointer}/* responsive */@media (max-width:1300px){.okz-adm .okz-kpis{grid-template-columns:repeat(3,1fr)}.okz-adm .okz-grid2{grid-template-columns:1fr}.okz-adm .okz-grid3{grid-template-columns:1fr 1fr}}@media (max-width:980px){.okz-adm .okz-shell{grid-template-columns:1fr}.okz-adm .okz-sidenav{position:static;display:flex;flex-wrap:wrap;gap:4px}.okz-adm .okz-sidenav .okz-grp{width:100%}.okz-admin-bar .okz-search{display:none}
}@media (max-width:680px){.okz-adm .okz-kpis{grid-template-columns:repeat(2,1fr)}.okz-adm .okz-grid3{grid-template-columns:1fr}.okz-adm .okz-vstat{grid-template-columns:1fr}.okz-adm .okz-alert{flex-direction:column;align-items:flex-start}.okz-adm .okz-wrap{padding:0 16px}
}@media (max-width:560px){.okz-adm .okz-note,.okz-adm .okz-note-btn{display:none}}/* ================================================================
   FORMULAIRES & CONTROLES (patron auth + CRUD admin)
   ================================================================ */.okz-adm 
.okz-wrap.okz-wide{max-width:1440px}/* Champ de formulaire */.okz-adm 
.okz-fld{margin-bottom:16px}.okz-adm .okz-fld > label{
  display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px;
}.okz-adm .okz-fld > label .okz-req{color:var(--red);margin-inline-start:2px}.okz-adm .okz-fld .okz-hint{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.5}.okz-adm .okz-fld .okz-err{font-size:12px;color:var(--red);margin-top:6px;font-weight:600;display:flex;gap:5px;align-items:center}.okz-adm .okz-inp,.okz-adm .okz-sel,.okz-adm .okz-ta{
  width:100%;background:#fff;border:1.5px solid var(--line);border-radius:10px;
  padding:11px 13px;font:inherit;font-size:14px;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s;min-width:0;
}.okz-adm .okz-inp::placeholder,.okz-adm .okz-ta::placeholder{color:var(--ink-3);opacity:1}.okz-adm .okz-inp:focus,.okz-adm .okz-sel:focus,.okz-adm .okz-ta:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(10,102,255,.10)}.okz-adm .okz-inp:disabled,.okz-adm .okz-sel:disabled,.okz-adm .okz-ta:disabled{background:var(--bg);color:var(--ink-3);cursor:not-allowed}.okz-adm .okz-sel{
  appearance:none;cursor:pointer;padding-inline-end:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7793' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}.okz-adm .okz-ta{min-height:110px;resize:vertical;line-height:1.6}.okz-adm .okz-inp.okz-invalid,.okz-adm .okz-sel.okz-invalid,.okz-adm .okz-ta.okz-invalid{border-color:var(--red);box-shadow:0 0 0 4px rgba(229,72,77,.10)}.okz-adm .okz-inp-group{position:relative}.okz-adm .okz-inp-group .okz-pre{
  position:absolute;inset-inline-start:13px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);font-size:14px;font-weight:600;pointer-events:none;
}.okz-adm .okz-inp-group .okz-inp{padding-inline-start:34px}/* Champ avec icone */.okz-adm 
.okz-fld-ico{position:relative}.okz-adm .okz-fld-ico > i{position:absolute;inset-inline-start:13px;top:12px;color:var(--ink-3);font-size:14px;pointer-events:none}.okz-adm .okz-fld-ico .okz-inp{padding-inline-start:36px}/* Interrupteur */.okz-adm 
.okz-sw{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}.okz-adm .okz-sw input{position:absolute;opacity:0;pointer-events:none}.okz-adm .okz-sw .okz-track{
  width:40px;height:23px;border-radius:999px;background:#CBD2DD;position:relative;
  transition:background .18s;flex-shrink:0;
}.okz-adm .okz-sw .okz-track::after{
  content:'';position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s;
}.okz-adm .okz-sw input:checked + .okz-track{background:var(--brand)}.okz-adm .okz-sw input:checked + .okz-track::after{transform:translateX(17px)}.okz-adm .okz-sw .okz-lb{font-size:13.5px;font-weight:600;color:var(--ink-2)}/* Case a cocher */.okz-adm 
.okz-chk{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13.5px;color:var(--ink-2);line-height:1.5}.okz-adm .okz-chk input{
  width:17px;height:17px;margin:1px 0 0;border-radius:5px;border:1.5px solid #CBD2DD;
  flex-shrink:0;appearance:none;cursor:pointer;transition:background .15s,border-color .15s;
  background:#fff;position:relative;
}.okz-adm .okz-chk input:checked{background:var(--brand);border-color:var(--brand)}.okz-adm .okz-chk input:checked::after{
  content:'\2713';position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-52%);
  color:#fff;font-size:11px;font-weight:800;
}/* Boutons */.okz-adm 
.okz-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 17px;border-radius:10px;font-weight:700;font-size:13.5px;
  border:1.5px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;
  white-space:nowrap;
}.okz-adm .okz-btn-p{background:var(--brand);color:#fff;box-shadow:var(--okz-shadow-blue)}.okz-adm .okz-btn-p:hover{background:var(--brand-600);transform:translateY(-1px)}.okz-adm .okz-btn-s{background:#fff;color:var(--ink-2);border-color:var(--line)}.okz-adm .okz-btn-s:hover{border-color:var(--brand);color:var(--brand)}.okz-adm .okz-btn-d{background:var(--red);color:#fff}.okz-adm .okz-btn-d:hover{background:#D43B40}.okz-adm .okz-btn-a{background:var(--brand-050);color:var(--brand)}.okz-adm .okz-btn-a:hover{background:#D5E9FF}.okz-adm .okz-btn-sm{padding:7px 12px;font-size:12.5px;border-radius:8px}.okz-adm .okz-btn-lg{padding:13px 24px;font-size:15px;border-radius:11px}.okz-adm .okz-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}/* Grille de formulaire */.okz-adm 
.okz-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.okz-adm .okz-form-grid .okz-span2{grid-column:1/-1}@media (max-width:720px){.okz-adm .okz-form-grid{grid-template-columns:1fr}}/* Barre d'outils / filtres admin */.okz-adm 
.okz-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
}.okz-adm .okz-toolbar .okz-sp{margin-inline-start:auto}.okz-adm .okz-f-inp{
  display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);
  border-radius:9px;padding:8px 12px;min-width:220px;
}.okz-adm .okz-f-inp:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(10,102,255,.10)}.okz-adm .okz-f-inp i{color:var(--ink-3);font-size:12.5px}.okz-adm .okz-f-inp input{border:none;outline:none;background:none;font:inherit;font-size:13px;width:100%;min-width:0}.okz-adm .okz-f-sel{
  background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:8px 32px 8px 12px;
  font:inherit;font-size:13px;color:var(--ink-2);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236B7793' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}.okz-adm .okz-f-sel:focus{outline:none;border-color:var(--brand)}/* Controle segmente (bascule grille/liste) */.okz-adm 
.okz-seg{display:inline-flex;background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:3px;gap:2px}.okz-adm .okz-seg button{
  padding:6px 11px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:6px;transition:background .15s,color .15s;
}.okz-adm .okz-seg button.okz-on{background:var(--brand);color:#fff}/* Pagination */.okz-adm 
.okz-pager{display:flex;align-items:center;justify-content:center;gap:6px;padding:22px 0 4px}.okz-adm .okz-pager a,.okz-adm .okz-pager span{
  min-width:36px;height:36px;padding:0 10px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:700;
  color:var(--ink-2);background:#fff;border:1.5px solid var(--line);
}.okz-adm .okz-pager a:hover{border-color:var(--brand);color:var(--brand)}.okz-adm .okz-pager .okz-on{background:var(--brand);border-color:var(--brand);color:#fff}.okz-adm .okz-pager .okz-gap{border-color:transparent;background:none}/* Etat vide */.okz-adm 
.okz-empty{
  text-align:center;padding:56px 20px;color:var(--ink-3);
}.okz-adm .okz-empty .okz-ic{
  width:56px;height:56px;border-radius:16px;background:var(--bg);display:grid;place-items:center;
  font-size:22px;color:var(--ink-3);margin:0 auto 14px;
}.okz-adm .okz-empty h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}.okz-adm .okz-empty p{font-size:13.5px;max-width:340px;margin:0 auto 16px;line-height:1.6}/* Alerte */.okz-adm 
.okz-alert{
  display:flex;gap:11px;padding:13px 15px;border-radius:11px;font-size:13.5px;line-height:1.55;
  margin-bottom:16px;border:1px solid transparent;
}.okz-adm .okz-alert i{flex-shrink:0;margin-top:1px;font-size:14px}.okz-adm .okz-alert b{font-weight:700}.okz-adm .okz-alert.okz-ok{background:#E7F8F0;color:#05603A;border-color:#BCEBD6}.okz-adm .okz-alert.okz-warn{background:#FFF4E0;color:#B54708;border-color:#FFD79A}.okz-adm .okz-alert.okz-err{background:#FDECEC;color:#B42318;border-color:#F9C6C6}.okz-adm .okz-alert.okz-info{background:var(--brand-050);color:#004C99;border-color:#C9E2FF}/* Carte de page (auth, .adm legal, .adm blog) */.okz-adm 
.okz-page-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--okz-shadow-md);padding:36px;max-width:520px;margin:0 auto;
}.okz-adm .okz-page-card.okz-wide{max-width:760px}.okz-adm .okz-page-card .okz-ttl{font-size:23px;font-weight:800;letter-spacing:-.7px;margin-bottom:7px}.okz-adm .okz-page-card .okz-sub{font-size:14px;color:var(--ink-3);margin-bottom:24px;line-height:1.6}.okz-adm .okz-page-card .okz-foot{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-3);text-align:center;
}.okz-adm .okz-page-card .okz-foot a{color:var(--brand);font-weight:700}/* En-tete de page (blog, .adm legal, .adm profil) */.okz-adm 
.okz-page-head{margin-bottom:28px}.okz-adm .okz-page-head h1{font-size:30px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}.okz-adm .okz-page-head .okz-sub{font-size:15px;color:var(--ink-3);max-width:620px;line-height:1.6}/* Contenu long (legal, .adm article) */.okz-adm 
.okz-prose{font-size:15px;line-height:1.75;color:var(--ink-2)}.okz-adm .okz-prose h2{font-size:19px;font-weight:800;color:var(--ink);margin:30px 0 10px;letter-spacing:-.4px}.okz-adm .okz-prose h3{font-size:16px;font-weight:700;color:var(--ink);margin:22px 0 8px}.okz-adm .okz-prose p{margin-bottom:14px}.okz-adm .okz-prose ul,.okz-adm .okz-prose ol{margin:0 0 14px 20px}.okz-adm .okz-prose li{margin-bottom:7px}.okz-adm .okz-prose a{color:var(--brand);font-weight:600;text-decoration:underline}.okz-adm .okz-prose strong{color:var(--ink);font-weight:700}.okz-adm .okz-prose hr{border:none;border-top:1px solid var(--line);margin:26px 0}/* ================================================================
   PATRON AUTHENTIFICATION (auth.html) — complement au design system
   Ajoute le 2026-10-29 : conteneur du patron, libelle de variante,
   bouton pleine largeur, separateur social, bloc telephone, icone
   d'etat email. Aucune valeur existante n'est modifiee.
   ================================================================ */.okz-auth-main{padding:44px 0 72px}.okz-auth-col{margin-bottom:52px}.okz-auth-col:last-child{margin-bottom:0}/* Libelle de variante, place AVANT chaque .page-card */.okz-auth-var{max-width:520px;margin:0 auto 16px}.okz-auth-var .okz-k{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--brand);background:var(--brand-050);border:1px solid #C9E2FF;
  padding:4px 10px;border-radius:999px;margin-bottom:10px;
}.okz-auth-var h2{font-size:17px;font-weight:800;letter-spacing:-.4px;margin-bottom:3px}.okz-auth-var p{font-size:13.5px;color:var(--ink-3);line-height:1.55}/* Bouton pleine largeur (champ et bouton doivent avoir la meme largeur) */.okz-btn-full{width:100%;display:flex}/* Ligne label + lien a droite (mot de passe oublie) */.okz-fld-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}.okz-fld-row label{font-size:12.5px;font-weight:700;color:var(--ink-2)}.okz-fld-row a{font-size:12.5px;font-weight:700;color:var(--brand);white-space:nowrap}/* Separateur "ou" + boutons sociaux */.okz-auth-sep{
  display:flex;align-items:center;gap:14px;margin:20px 0;
  color:var(--ink-3);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;
}.okz-auth-sep::before,.okz-auth-sep::after{content:'';flex:1;height:1px;background:var(--line)}.okz-auth-social{display:grid;grid-template-columns:1fr 1fr;gap:12px}.okz-auth-social .okz-btn{width:100%}/* Champ telephone : prefixe +212 */.okz-inp-group.okz-tel .okz-pre{
  position:absolute;inset-inline-start:13px;top:50%;transform:translateY(-50%);
  color:var(--ink-2);font-size:13.5px;font-weight:700;pointer-events:none;
  padding-inline-end:9px;border-inline-end:1px solid var(--line);
}.okz-inp-group.okz-tel .okz-inp{padding-inline-start:56px}/* Lien dans une case a cocher */.okz-chk .okz-lnk{color:var(--brand);font-weight:700}.okz-chk .okz-lnk:hover{text-decoration:underline}/* Etat "email envoye" : icone ronde centree */.okz-auth-ic{
  width:56px;height:56px;border-radius:16px;background:var(--brand-050);
  display:grid;place-items:center;font-size:22px;color:var(--brand);
  margin:0 auto 16px;
}/* Actions sous l'alerte de verification email : grille 2 colonnes,
   les deux boutons ont exactement la meme largeur. */.okz-auth-foot-acts{display:grid;grid-template-columns:1fr 1fr;gap:12px}.okz-auth-foot-acts .okz-btn{text-decoration:none;width:100%}/* Marge utilitaire */.okz-mt16{margin-top:16px}/* Note de conception : le patron demande le bouton en bas a GAUCHE
   (la carte est centree, donc pas de conflit avec les boutons).
   On reutilise la classe .note-left deja presente dans le design
   system : pas de regle globale, donc aucune autre maquette n'est
   impactee. */@media (max-width:560px){.okz-auth-main{padding:28px 0 52px}.okz-auth-col{margin-bottom:38px}.okz-page-card{padding:26px 20px;border-radius:16px}.okz-page-card .okz-ttl{font-size:20px}.okz-page-card .okz-sub{font-size:13.5px;margin-bottom:20px}.okz-auth-social{grid-template-columns:1fr}.okz-auth-foot-acts{grid-template-columns:1fr}.okz-auth-var h2{font-size:15.5px}.okz-fld-row{flex-wrap:wrap;gap:2px}
}/* ============ HEADER PUBLIC SUR PETIT ECRAN ============
   Defaut mesure le 2026-10-29 sur auth.html : a 375px, le bouton
   « Deposer » du header public deborde (document.scrollWidth 491 > 375).
   Cause : .search garde une base de contenu trop large et pousse
   .hdr-actions hors ecran. Correction : la recherche peutshrinker
   jusqu'a zero, les actions se resserrent. Aucune valeur du header
   n'est modifiee au-dela de 560px. */@media (max-width:560px){.okz-hdr-in{gap:10px}.okz-search{flex:1 1 0;min-width:0}.okz-search input{min-width:0;padding-inline-start:34px}.okz-hdr-actions{gap:8px}.okz-hdr-actions .okz-btn-primary{padding:9px 12px;font-size:13px}
}/* ================================================================
   PATRON EDITORIAL + PROFIL (editorial.html / profil.html)
   Ajoute le 2026-10-29 : tokens manquants, wrapper tableau scrollable,
   blog (liste + article), page legale longue, profil public, edition,
   portefeuille. Aucune valeur existante n'est modifiee.
   ================================================================ *//* --- Tokens manquants (references par .kpi.r/.p/.c et .btn-d) --- */:root{
  --red:#E5484D;
  --purple:#7C3AED;
  --cyan:#0891B2;
}/* ============ SEPARATION DES ECRANS (3 sections par maquette) ============ *//* Chaque maquette enchaîne 3 ecrans. On les separe par une bande
   grise + une etiquette, pour que la lecture soit immediate. */.okz-screen-sep{
  background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;
}.okz-screen-sep .okz-lbl{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-3);
}.okz-screen-sep .okz-lbl i{color:var(--brand)}.okz-screen-sep .okz-lbl b{color:var(--ink);font-weight:800}/* ============ WRAPPER TABLEAU SCROLLABLE ============ *//* Un tableau large (wallet) doit scroller DANS son conteneur,
   jamais faire deborder la page. */.okz-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.okz-tbl-wrap .okz-tbl{min-width:640px}/* ============ BLOG — LISTE ============ *//* Grille : 1 carte mise en avant (grande) + 2 petites a droite */.okz-post-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;margin-bottom:26px}.okz-post-side{display:grid;grid-template-rows:1fr 1fr;gap:22px}/* Carte article "mise en avant" */.okz-post-feat{
  background:#fff;border:1px solid var(--line);border-radius:var(--okz-radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;
}.okz-post-feat:hover{transform:translateY(-5px);box-shadow:var(--okz-shadow-lg);border-color:transparent}.okz-post-feat .okz-media{aspect-ratio:16/10;background:#EEF1F7;overflow:hidden;position:relative}.okz-post-feat .okz-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.okz-post-feat:hover .okz-media img{transform:scale(1.05)}.okz-post-feat .okz-media .okz-cat{
  position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:8px;
  font-size:11px;font-weight:800;background:var(--brand);color:#fff;box-shadow:var(--okz-shadow-sm);
}.okz-post-feat .okz-body{padding:20px}.okz-post-feat h3{font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.3;margin-bottom:9px}.okz-post-feat .okz-ex{
  font-size:14px;color:var(--ink-2);line-height:1.6;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}/* Carte article compacte (2e colonne) */.okz-post-mini{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:grid;grid-template-columns:150px 1fr;transition:transform .2s,box-shadow .2s;
}.okz-post-mini:hover{transform:translateY(-3px);box-shadow:var(--okz-shadow-md)}.okz-post-mini .okz-media{background:#EEF1F7;overflow:hidden}.okz-post-mini .okz-media img{width:100%;height:100%;object-fit:cover;height:100%}.okz-post-mini .okz-body{padding:14px 16px}.okz-post-mini .okz-cat{
  display:inline-block;font-size:10.5px;font-weight:800;color:var(--brand);
  background:var(--brand-050);padding:3px 9px;border-radius:6px;margin-bottom:7px;
}.okz-post-mini h4{font-size:14.5px;font-weight:700;line-height:1.4;margin-bottom:7px}.okz-post-mini .okz-ex{
  font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-bottom:9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}/* Meta d'un article (date FR + temps de lecture) */.okz-post-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}.okz-post-meta .okz-d{display:inline-flex;align-items:center;gap:6px}.okz-post-meta .okz-d i{font-size:11.5px}.okz-post-meta .okz-sep{width:3px;height:3px;border-radius:50%;background:#CBD2DD}/* ============ FIL D'ARIANE ============ */.okz-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);margin-bottom:18px}.okz-crumb a{color:var(--ink-3);transition:color .15s}.okz-crumb a:hover{color:var(--brand)}.okz-crumb i{font-size:9px;color:#CBD2DD}.okz-crumb .okz-cur{color:var(--ink);font-weight:700;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* ============ ARTICLE — COUVERTURE ============ */.okz-article-cover{
  width:100%;border-radius:var(--okz-radius);overflow:hidden;background:#EEF1F7;
  margin-bottom:24px;border:1px solid var(--line);
}.okz-article-cover img{width:100%;height:clamp(240px,38vw,440px);object-fit:cover}/* ============ ARTICLE — EN TETE ============ */.okz-article-head{margin-bottom:22px}.okz-article-head h1{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-1.2px;line-height:1.18;margin-bottom:14px}/* Avatar (initiales) */.okz-ava{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--logo-blue),var(--brand));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;letter-spacing:.3px;
}.okz-ava.okz-lg{width:96px;height:96px;font-size:32px;border-radius:26px}.okz-ava.okz-md{width:56px;height:56px;font-size:19px;border-radius:18px}.okz-ava.okz-sm{width:32px;height:32px;font-size:12px}/* Auteur (bloc article + profil) */.okz-byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.okz-byline .okz-who b{display:block;font-size:14px;font-weight:700}.okz-byline .okz-who span{font-size:12.5px;color:var(--ink-3)}/* Encadre "A retenir" */.okz-recap{
  background:var(--brand-050);border:1px solid #C9E2FF;border-radius:var(--okz-radius);
  padding:22px 24px;margin:26px 0;
}.okz-recap h4{font-size:15px;font-weight:800;color:var(--brand);margin-bottom:10px;display:flex;align-items:center;gap:8px}.okz-recap ul{margin:0 0 0 18px}.okz-recap li{margin-bottom:7px;font-size:14px;color:var(--ink-2);line-height:1.6}.okz-recap li:last-child{margin-bottom:0}.okz-recap li strong{color:var(--ink)}/* Image dans le texte d'article */.okz-prose figure{margin:24px 0}.okz-prose figure img{width:100%;border-radius:14px;border:1px solid var(--line)}.okz-prose figure figcaption{font-size:12.5px;color:var(--ink-3);margin-top:8px;text-align:center}/* Bloc auteur en fin d'article */.okz-author-box{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.okz-author-box .okz-who{flex:1;min-width:200px}.okz-author-box .okz-who b{display:block;font-size:15px;font-weight:700;margin-bottom:3px}.okz-author-box .okz-who span{font-size:13px;color:var(--ink-3);display:block;margin-bottom:8px}/* ============ PAGE LEGALE LONGUE ============ *//* 2 colonnes : sommaire lateral sticky + contenu long */.okz-legal-layout{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}.okz-toc{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;
  box-shadow:var(--okz-shadow-sm);position:sticky;top:90px;
}.okz-toc .okz-h{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}.okz-toc a{
  display:block;font-size:13px;color:var(--ink-2);padding:7px 10px;border-radius:8px;
  border-inline-start:2px solid var(--line);margin-bottom:2px;transition:all .15s;
}.okz-toc a:hover{background:var(--bg);color:var(--brand)}.okz-toc a.okz-on{border-left-color:var(--brand);color:var(--brand);font-weight:700;background:var(--brand-050)}/* Encadre de contact (fin de page legale) */.okz-contact-box{
  background:#fff;border:1px solid var(--line);border-radius:var(--okz-radius);
  padding:22px 24px;margin-top:26px;box-shadow:var(--okz-shadow-sm);
}.okz-contact-box h4{font-size:15px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:9px}.okz-contact-box h4 i{color:var(--brand)}.okz-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.okz-contact-grid .okz-c{display:flex;gap:11px;align-items:flex-start}.okz-contact-grid .okz-c .okz-ic{
  width:34px;height:34px;border-radius:10px;background:var(--brand-050);color:var(--brand);
  display:grid;place-items:center;font-size:13px;flex-shrink:0;
}.okz-contact-grid .okz-c b{display:block;font-size:13px;font-weight:700;margin-bottom:2px}.okz-contact-grid .okz-c span{font-size:12.5px;color:var(--ink-3);line-height:1.5;display:block}/* Encadré "à retenir" reutilise .recap mais plus sobre en page legale */.okz-takeaway{
  background:#FFF4E0;border:1px solid #FFD79A;border-radius:14px;padding:16px 18px;margin:22px 0;
  font-size:13.5px;color:#B54708;line-height:1.65;
}.okz-takeaway b{color:#8A3306}/* ============ PROFIL PUBLIC ============ */.okz-profile-banner{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--okz-shadow-sm);padding:26px;margin-bottom:20px;
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
}.okz-profile-banner .okz-who{flex:1;min-width:240px}.okz-profile-banner .okz-who h2{font-size:23px;font-weight:800;letter-spacing:-.6px;margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.okz-profile-banner .okz-facts{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);margin-bottom:12px}.okz-profile-banner .okz-facts span{display:inline-flex;align-items:center;gap:6px}/* Etoiles (note) */.okz-stars{display:inline-flex;align-items:center;gap:3px;color:var(--amber);font-size:13px}.okz-stars .okz-cnt{color:var(--ink-3);font-size:12.5px;margin-inline-start:5px;font-weight:600}/* Note de confiance */.okz-trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.okz-trust .okz-t{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-2);
  background:var(--bg);border:1px solid var(--line);padding:6px 11px;border-radius:999px;
}.okz-trust .okz-t i{color:var(--green)}/* Note / avis (colonne laterale) */.okz-review{
  display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--line);
}.okz-review:last-child{border-bottom:none}.okz-review .okz-who{flex:1;min-width:0}.okz-review .okz-who b{font-size:13px;font-weight:700}.okz-review .okz-who p{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:3px}.okz-review .okz-d{font-size:11.5px;color:var(--ink-3);margin-top:3px;display:block}/* ============ EDITION PROFIL — COLONNE LATERALE ============ *//* Mini-carte d'apercu du profil (preview) */.okz-preview-card{
  background:linear-gradient(135deg,#0A66FF 0%,#0B49C7 100%);
  border-radius:16px;padding:18px;color:#fff;position:relative;overflow:hidden;
}.okz-preview-card::after{
  content:'';position:absolute;inset-inline-end:-40px;top:-40px;width:150px;height:150px;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);
}.okz-preview-card .okz-top{display:flex;gap:13px;align-items:center;margin-bottom:14px;position:relative;z-index:2}.okz-preview-card .okz-ava{background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.35)}.okz-preview-card .okz-nm{font-size:15px;font-weight:800;position:relative;z-index:2}.okz-preview-card .okz-sub{font-size:12px;color:rgba(255,255,255,.78);position:relative;z-index:2}.okz-preview-card .okz-rows{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px}.okz-preview-card .okz-rows .okz-r{display:flex;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.85)}.okz-preview-card .okz-rows .okz-r b{color:#fff;font-weight:700}/* Liste de conseils (colonne laterale) */.okz-tips{display:flex;flex-direction:column;gap:11px}.okz-tips .okz-tip{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.55}.okz-tips .okz-tip .okz-n{
  width:20px;height:20px;border-radius:6px;background:var(--brand-050);color:var(--brand);
  display:grid;place-items:center;font-size:11px;font-weight:800;flex-shrink:0;margin-top:1px;
}.okz-tips .okz-tip b{color:var(--ink);font-weight:700}/* Choix de photo de profil */.okz-photo-pick{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.okz-photo-pick .okz-ava{width:84px;height:84px;font-size:28px;border-radius:22px}/* ============ PORTEFEUILLE ============ *//* 4 tuiles KPI sur une ligne */.okz-kpis.okz-k4{grid-template-columns:repeat(4,1fr)}@media (max-width:1100px){.okz-kpis.okz-k4{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.okz-kpis.okz-k4{grid-template-columns:1fr 1fr}}/* Montant signe et colore dans le tableau */.okz-amt{font-weight:800;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}.okz-amt.okz-in{color:var(--green)}.okz-amt.okz-out{color:var(--red)}/* Moyen de paiement (carte) */.okz-pay-method{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  border:1px solid var(--line);border-radius:13px;margin-bottom:11px;background:#fff;
}.okz-pay-method:last-child{margin-bottom:0}.okz-pay-method .okz-ic{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:16px;flex-shrink:0;
  background:var(--brand-050);color:var(--brand);
}.okz-pay-method .okz-ic.okz-g{background:#E7F8F0;color:var(--green)}.okz-pay-method .okz-ic.okz-a{background:#FFF4E0;color:#B54708}.okz-pay-method .okz-who{flex:1;min-width:0}.okz-pay-method .okz-who b{display:block;font-size:13.5px;font-weight:700}.okz-pay-method .okz-who span{font-size:12px;color:var(--ink-3)}/* Zone de retrait (montant + methode) */.okz-withdraw-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.okz-withdraw-grid .okz-span2{grid-column:1/-1}@media (max-width:720px){.okz-withdraw-grid{grid-template-columns:1fr}}/* ============ RESPONSIVE EDITORIAL / PROFIL ============ */@media (max-width:980px){.okz-post-layout{grid-template-columns:1fr}.okz-post-side{grid-template-rows:auto auto}.okz-legal-layout{grid-template-columns:1fr}.okz-toc{position:static}.okz-contact-grid{grid-template-columns:1fr}
}@media (max-width:720px){.okz-post-mini{grid-template-columns:110px 1fr}.okz-kpis{grid-template-columns:repeat(2,1fr)}
}@media (max-width:560px){.okz-post-mini{grid-template-columns:1fr}.okz-post-mini .okz-media{aspect-ratio:16/9}.okz-post-mini .okz-media img{height:auto}.okz-article-head h1{font-size:24px}.okz-profile-banner{padding:18px}.okz-profile-banner .okz-ava.okz-lg{width:72px;height:72px;font-size:24px;border-radius:20px}.okz-contact-grid{grid-template-columns:1fr}/* 1 colonne sur mobile : les tuiles KPI gardent leur lisibilite
     (montants longs comme "195 000 DH" ne sont jamais tronques). */.okz-kpis,.okz-kpis.okz-k3,.okz-kpis.okz-k4{grid-template-columns:1fr}/* La carte de contenu long perd sa marge interne sur mobile */.okz-legal-layout .okz-page-card.okz-wide{padding:24px 18px}
}/* ================================================================
   PATRON CRUD ADMIN (admin-liste.html / admin-formulaire.html)
   Ajoute le 2026-10-29 : 11 pages admin couvertes par 2 patrons
   (liste + tableau / formulaire). Aucune valeur existante n'est modifiee,
   on surcharge seulement ce qui manquait au design system.
   ================================================================ *//* ============ SHELL ADMIN : ANTI-GRID-BLOWOUT ============
   minmax(0,1fr) : sans ca, le contenu large (tableau, formulaire)
   impose sa largeur min-content a la colonne et fait deborder la page
   (le "grid blowout"). C'est le bug classique des grille CSS. */.okz-adm .okz-shell{grid-template-columns:238px minmax(0,1fr)}.okz-adm .okz-shell > *{min-width:0}/* --- Grille de 5 KPI (les listes admin en ont 5, pas 6) --- */.okz-kpis.okz-k5{grid-template-columns:repeat(5,1fr)}@media (max-width:1300px){.okz-kpis.okz-k5{grid-template-columns:repeat(3,1fr)}}@media (max-width:680px){.okz-kpis.okz-k5{grid-template-columns:repeat(2,1fr)}}@media (max-width:430px){.okz-kpis.okz-k5{grid-template-columns:1fr}}/* --- Tableau admin : largeur minimale + scroll horizontal interne ---
   Le wrapper .tbl-wrap (deja present) porte le scroll ; le tableau
   garde une largeur lisible et ne fait jamais deborder la page.
   A 1280 px le tableau doit tenir SANS scroll : d'ou le padding
   resserre et le titre plafonne a 180 px (les points de suspension
   taking la place du texte complet restent dans le title natif). */.okz-tbl-wrap.okz-adm{overflow-x:auto;-webkit-overflow-scrolling:touch}.okz-tbl-wrap.okz-adm .okz-tbl{min-width:880px}.okz-tbl-wrap.okz-adm .okz-tbl th,.okz-tbl-wrap.okz-adm .okz-tbl td{padding-inline-start:10px;padding-inline-end:10px}.okz-tbl-wrap.okz-adm .okz-tbl .okz-ttl{max-width:180px}.okz-tbl-wrap.okz-adm .okz-tbl .okz-act button{width:27px;height:27px}/* --- Layout 2 colonnes du patron formulaire (formulaire + colonne laterale) --- */.okz-crud-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}@media (max-width:1100px){.okz-crud-layout{grid-template-columns:1fr}}/* --- Panneau "Danger" : liseré rouge discret --- */.okz-panel.okz-danger{border-color:#F9C6C6}/* --- Galerie de photos : vignettes + croix de suppression + tuile d'ajout --- */.okz-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:12px}.okz-photo-grid .okz-ph{
  position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:#EEF1F7;
}.okz-photo-grid .okz-ph img{width:100%;height:100%;object-fit:cover}.okz-photo-grid .okz-ph .okz-x{
  position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:8px;
  background:rgba(11,18,32,.72);color:#fff;display:grid;place-items:center;font-size:10px;
}.okz-photo-grid .okz-ph .okz-x:hover{background:var(--red)}.okz-photo-grid .okz-ph .okz-cov{
  position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;background:rgba(11,18,32,.75);color:#fff;
  font-size:10px;font-weight:800;text-align:center;padding:4px 0;letter-spacing:.3px;
}.okz-photo-grid .okz-add{
  aspect-ratio:4/3;border:1.5px dashed #CBD2DD;border-radius:12px;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  color:var(--ink-3);font-size:12px;font-weight:700;transition:border-color .15s,color .15s;
}.okz-photo-grid .okz-add:hover{border-color:var(--brand);color:var(--brand)}.okz-photo-grid .okz-add .okz-ic{font-size:17px}/* --- Zone de depot de fichier (upload video / piece jointe) --- */.okz-drop-zone{
  border:1.5px dashed #CBD2DD;border-radius:14px;background:var(--bg);
  padding:26px 18px;text-align:center;transition:border-color .15s,background .15s;
}.okz-drop-zone:hover{border-color:var(--brand);background:var(--brand-050)}.okz-drop-zone .okz-ic{
  width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;margin:0 auto 11px;color:var(--brand);font-size:17px;
}.okz-drop-zone b{display:block;font-size:13.5px;margin-bottom:4px}.okz-drop-zone span{font-size:12px;color:var(--ink-3)}/* --- Lignes d'interrupteur (panneau Statut / Reactions) --- */.okz-sw-list{display:flex;flex-direction:column}.okz-sw-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.okz-sw-row:last-child{border-bottom:none;padding-bottom:0}.okz-sw-row:first-child{padding-top:0}.okz-sw-row .okz-tx{flex:1;min-width:0}.okz-sw-row .okz-tx b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}.okz-sw-row .okz-tx span{font-size:12px;color:var(--ink-3);line-height:1.5;display:block;margin-top:2px}/* --- Journal lateral : timeline verticale horodatee --- */.okz-timeline{display:flex;flex-direction:column;position:relative}.okz-timeline .okz-ev{display:flex;gap:11px;padding-bottom:15px;position:relative}.okz-timeline .okz-ev:last-child{padding-bottom:0}.okz-timeline .okz-ev::before{
  content:'';position:absolute;inset-inline-start:13px;top:27px;bottom:0;width:1.5px;background:var(--line);
}.okz-timeline .okz-ev:last-child::before{display:none}.okz-timeline .okz-ev .okz-dot{
  width:27px;height:27px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  font-size:11px;background:var(--brand-050);color:var(--brand);position:relative;z-index:2;
}.okz-timeline .okz-ev .okz-dot.okz-g{background:#E7F8F0;color:var(--green)}.okz-timeline .okz-ev .okz-dot.okz-r{background:#FDECEC;color:var(--red)}.okz-timeline .okz-ev .okz-dot.okz-a{background:#FFF4E0;color:#B54708}.okz-timeline .okz-ev .okz-tx{font-size:12.5px;color:var(--ink-2);line-height:1.5;flex:1;min-width:0;padding-top:3px}.okz-timeline .okz-ev .okz-tx b{color:var(--ink);font-weight:700}.okz-timeline .okz-ev .okz-tm{font-size:11px;color:var(--ink-3);margin-top:2px;display:block}/* --- Note de conception : variante "bas gauche" (admin-liste/formulaire) ---
   Les maquettes publiques utilisent .note-btn a droite ; ici on la
   deplace a gauche pour ne jamais masquer le bouton d'action du
   formulaire (colonne laterale). */.okz-adm .okz-note-left.okz-note-btn{inset-inline-start:18px;inset-inline-end:auto}.okz-adm .okz-note-left.okz-note{inset-inline-start:18px;inset-inline-end:auto}/* --- Sidenav mobile : bouton d'ouverture + drawer ---
   Les selecteurs sont prefixes par .adm : le design system a scope
   ses regles admin sous .adm (specificite 0,2,0). Sans ce prefixe,
   mes regles (0,1,0) perdraient la cascade et le bouton de menu
   resterait visible sur desktop. */.okz-adm .okz-nav-toggle{display:none}@media (max-width:980px){.okz-adm .okz-nav-toggle{display:grid}.okz-adm .okz-sidenav{display:none;position:static}.okz-adm .okz-sidenav.okz-open{display:block}.okz-adm .okz-shell{grid-template-columns:minmax(0,1fr)}
}/* ============ SIDENAV ADMIN : NE JAMAIS SOUS LE BOUTON DE NOTE ============
   Le bouton flottant de note de conception est en bas a gauche (38 px),
   exactement dans la colonne de la sidenav, et le panneau .note
   s'ouvre juste au-dessus de lui. Pour qu'aucun ne masque un lien de
   navigation, la sidenav s'arrete AVANT la zone du bouton.
   - liens et groupes legerement resserres pour que la nav complete
     tienne sans scroll a 900 px de haut ;
   - au-dela, la nav scroll en interne (jamais de debordement). */.okz-adm .okz-sidenav.okz-adm-nav{max-height:calc(100vh - 160px);overflow-y:auto;overscroll-behavior:contain}.okz-adm .okz-sidenav.okz-adm-nav a{padding:8px 12px}.okz-adm .okz-sidenav.okz-adm-nav .okz-grp{padding:10px 12px 6px}@media (max-width:980px){.okz-adm .okz-sidenav.okz-adm-nav{max-height:none;overflow:visible}.okz-adm .okz-sidenav.okz-adm-nav a{padding:9px 12px}.okz-adm .okz-sidenav.okz-adm-nav .okz-grp{padding:12px 12px 7px}
}/* Le panneau de note reste compact : il ne monte pas dans la colonne
   de navigation. */.okz-adm .okz-note-left.okz-note{max-width:280px}/* ============ BARRE ADMIN RESPONSIVE ============
   A 375 px, le cluster droit de la barre (recherche + 3 boutons +
   carte "Admin") deborde de la page. On le retrecit par etapes :
   d'abord la recherche, puis le bloc identite, enfin les libelles. */.okz-adm .okz-admin-bar{padding:0 16px;gap:12px}.okz-adm .okz-admin-bar .okz-right{min-width:0}@media (max-width:900px){.okz-adm .okz-admin-bar .okz-search{display:none}.okz-adm .okz-admin-bar .okz-ctx{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}@media (max-width:560px){.okz-adm .okz-admin-bar{padding:0 12px;gap:8px}.okz-adm .okz-admin-bar .okz-sep{display:none}.okz-adm .okz-admin-bar .okz-ctx{display:none}.okz-adm .okz-admin-bar .okz-logo .okz-badge{display:none}.okz-adm .okz-admin-bar .okz-brand-txt{font-size:14px}.okz-adm .okz-admin-bar .okz-me .okz-t,.okz-adm .okz-admin-bar .okz-me .okz-r{display:none}.okz-adm .okz-admin-bar .okz-me{padding-inline-start:0}.okz-adm .okz-admin-bar .okz-right{gap:6px}.okz-adm .okz-icon-btn{width:32px;height:32px}
}/* Le tableau a une largeur de travail superieure au viewport :
   c'est voulu, il scrolle DANS .tbl-wrap (overflow-x:auto). *//* ============ CORRECTIONS / COMPLEMENTS PATRON EDITORIAL ============ *//* Les 3 en-tetes de page d'une meme maquette ne doivent pas s'empiler
   en position sticky (ils se chevaucheraient au scroll). Seul le
   premier reste colle ; les suivants sont en flux normal. */.okz-hdr.okz-static{position:relative}/* Page head sur une seule ligne (titre + actions a droite) */.okz-page-head.okz-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}/* 3 tuiles KPI (profil public) */.okz-kpis.okz-k3{grid-template-columns:repeat(3,1fr)}@media (max-width:900px){.okz-kpis.okz-k3{grid-template-columns:1fr 1fr}}@media (max-width:560px){.okz-kpis.okz-k3{grid-template-columns:1fr 1fr}}/* Media des cartes article compactes : image qui remplit la cellule */.okz-post-mini .okz-media{position:relative;min-height:158px}.okz-post-mini .okz-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}/* Les petites variantes d'alerte ne doivent pas heriter du halo
   decoratif du grand bandeau monetisation. */.okz-alert.okz-ok::after,.okz-alert.okz-warn::after,.okz-alert.okz-err::after,.okz-alert.okz-info::after{display:none}/* Espacement des cases a cocher empilees */.okz-chk + .okz-chk{margin-top:11px}/* Sommaire : liens un peu plus aeres dans la colonne laterale */.okz-toc a{margin-bottom:3px}/* ============ CORRECTIONS LECTURE + MOBILE (2026-10-29) ============ *//* 1) Les pages "contenu long" (article, CGU) doivent rester lisibles :
   on borne la colonne de texte et on augmente le corps de texte.
   Sans cela, a 1440px la ligne depasse 100 caracteres. */.okz-wrap.okz-read{max-width:780px}.okz-prose.okz-long{font-size:16px;line-height:1.8}/* Page legale : sommaire + carte de contenu calibrees, calees au centre.
   IMPORTANT : cette regle ne s'applique qu'au-dela de 980px. Elle doit
   rester DANS une media query, sinon elle ecrase (source order) la regle
   mobile du design system et la colonne de contenu se retrouve a 0px. */@media (min-width:981px){.okz-legal-layout{grid-template-columns:250px minmax(0,760px);justify-content:center}.okz-legal-layout .okz-page-card{max-width:760px;margin:0}
}/* 2) Au mobile, les grilles de cartes passent en 1 colonne.
   La regle .grid du design system reste a 2 colonnes (motif liste
   public) ; ces deux grilles editoriales/utilisateur suivent
   l'instruction "1 colonne sur mobile". */.okz-grid.okz-g2{grid-template-columns:repeat(2,1fr)}@media (max-width:560px){.okz-grid.okz-g2{grid-template-columns:1fr}.okz-grid.okz-stack-m{grid-template-columns:1fr}
}/* ================================================================
   CORRECTIONS FINALES (2026-10-29, verifiees au navigateur)
   Ces regles sont volontairement en FIN de fichier : a specificite
   egale, la derniere declaration gagne (cascade).
   ================================================================ *//* Grille de 3 articles (liste blog "Tous les articles") */.okz-grid.okz-g3{grid-template-columns:repeat(3,1fr)}@media (max-width:980px){.okz-grid.okz-g3{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.okz-grid.okz-g3{grid-template-columns:1fr}}/* KPI : 1 colonne sous 560px.
   Les regles .kpis.k3 / .kpis.k4 du design system etaient declarees
   PLUS TARD dans le fichier et ecrasaient la regle mobile : les
   tuiles restaient a 2 colonnes (montants "195 000 DH" tronques). */@media (max-width:560px){.okz-kpis{grid-template-columns:1fr}.okz-kpis.okz-k3{grid-template-columns:1fr}.okz-kpis.okz-k4{grid-template-columns:1fr}
}