/* ══════════════════════════════════════════════════════════════════════
   MAKTOUB MAGHREB — COMPOSANTS COMMUNS                css/mk-components.css
   Dépend de mk-design-system.css. Préfixe mk- (noms choisis pour ne pas
   entrer en collision avec l'existant : mk-card/mk-badge/mk-tag/mk-tab/
   mk-toast existaient déjà et restent intacts).
   Sommaire : 1 mise en page · 2 boutons · 3 formulaires · 4 cartes ·
   5 badges · 6 alertes · 7 modales · 8 onglets · 9 chargement/vide ·
   10 tableaux · 11 fil d'Ariane · 12 classes historiques alignées ·
   13 navigation (barre du haut, sidebar) · 14 pied de page
   ══════════════════════════════════════════════════════════════════════ */

/* 1 ── Mise en page ─────────────────────────────────────────────────── */
.mk-container{width:100%;max-width:var(--mk-w);margin-inline:auto;padding-inline:var(--mk-gutter)}
.mk-container--narrow{max-width:var(--mk-w-narrow)}
.mk-container--wide{max-width:var(--mk-w-wide)}
.mk-page{padding-block:var(--mk-s8) var(--mk-s12)}
.mk-page-head{margin-bottom:var(--mk-s6)}
.mk-page-head--center{text-align:center}
.mk-h1,.mk-h2,.mk-h3{font-family:var(--mk-font-display);color:var(--mk-primary-dark);font-weight:600;line-height:var(--mk-lh-tight);margin:0}
.mk-h1{font-size:var(--mk-fs-3xl)} .mk-h2{font-size:var(--mk-fs-2xl)} .mk-h3{font-size:var(--mk-fs-xl)}
[data-theme="dark"] .mk-h1,[data-theme="dark"] .mk-h2,[data-theme="dark"] .mk-h3{color:var(--mk-gold-light)}
.mk-lead{color:var(--mk-text-2);font-size:var(--mk-fs-md);max-width:60ch;margin:var(--mk-s2) 0 0}
.mk-page-head--center .mk-lead{margin-inline:auto}
.mk-ornament{color:var(--mk-gold);letter-spacing:.5em;font-size:.85rem;opacity:.85}
.mk-stack{display:flex;flex-direction:column;gap:var(--mk-s4)}
.mk-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mk-s3)}
.mk-grid{display:grid;gap:var(--mk-s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.mk-divider{border:0;border-top:1px solid var(--mk-border);margin:var(--mk-s6) 0}
.mk-muted{color:var(--mk-text-muted)}
.mk-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mk-zellige-bg{position:relative;isolation:isolate}
.mk-zellige-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--mk-zellige-faint) 0 0/48px 48px repeat;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 70%)}

/* 2 ── Boutons ──────────────────────────────────────────────────────── */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:var(--mk-tap);padding:.6rem 1.15rem;
  border:1.5px solid transparent;border-radius:var(--mk-r-md);font-family:var(--mk-font-body);font-size:var(--mk-fs-base);font-weight:var(--mk-fw-bold);line-height:1.2;
  text-decoration:none;cursor:pointer;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--mk-dur),border-color var(--mk-dur),color var(--mk-dur),box-shadow var(--mk-dur),transform .08s}
.mk-btn:active{transform:scale(.98)}
.mk-btn:focus-visible{outline:none;box-shadow:var(--mk-focus)}
.mk-btn[disabled],.mk-btn.is-disabled{opacity:.55;cursor:not-allowed;transform:none}
.mk-btn--primary{background:var(--mk-primary);color:var(--mk-on-primary)}
.mk-btn--primary:hover{background:var(--mk-primary-hover)}
.mk-btn--secondary{background:transparent;color:var(--mk-primary-ink);border-color:var(--mk-primary)}
.mk-btn--secondary:hover{background:var(--mk-primary-pale)}
.mk-btn--ghost{background:transparent;color:var(--mk-text-2);border-color:var(--mk-border)}
.mk-btn--ghost:hover{border-color:var(--mk-primary);color:var(--mk-primary-ink)}
.mk-btn--gold{background:var(--mk-gold);color:#2E2312}
.mk-btn--gold:hover{background:var(--mk-gold-light)}
.mk-btn--danger{background:var(--mk-error);color:#fff}
.mk-btn--danger:hover{filter:brightness(.92)}
.mk-btn--link{background:none;border:none;min-height:auto;padding:0;color:var(--mk-primary-ink);text-decoration:underline;text-underline-offset:3px}
.mk-btn--sm{min-height:36px;padding:.4rem .8rem;font-size:var(--mk-fs-sm);border-radius:var(--mk-r-sm)}
.mk-btn--lg{min-height:52px;padding:.8rem 1.5rem;font-size:var(--mk-fs-md)}
.mk-btn--block{display:flex;width:100%}
.mk-btn--icon{width:var(--mk-tap);padding:0}
.mk-btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.mk-btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-color:var(--mk-on-primary) var(--mk-on-primary) transparent transparent;animation:mk-spin .7s linear infinite}
.mk-btn--secondary.is-loading::after,.mk-btn--ghost.is-loading::after{border-color:var(--mk-primary) var(--mk-primary) transparent transparent}
[data-theme="dark"] .mk-btn--secondary{color:var(--mk-primary-ink);border-color:var(--mk-primary-ink)}

/* 3 ── Formulaires ──────────────────────────────────────────────────── */
.mk-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:var(--mk-s4)}
.mk-label{font-size:var(--mk-fs-sm);font-weight:var(--mk-fw-bold);color:var(--mk-text-2)}
.mk-label .req,.mk-req{color:var(--mk-error);margin-inline-start:.15rem}
.mk-hint{font-size:var(--mk-fs-xs);color:var(--mk-text-muted)}
.mk-input,.mk-select,.mk-textarea{width:100%;min-height:var(--mk-tap);padding:.6rem .85rem;border:1.5px solid var(--mk-border-strong);border-radius:var(--mk-r-md);
  background:var(--mk-surface);color:var(--mk-text);font-family:var(--mk-font-body);font-size:var(--mk-fs-base);line-height:1.4;
  transition:border-color var(--mk-dur),box-shadow var(--mk-dur);appearance:none;-webkit-appearance:none}
.mk-textarea{min-height:110px;resize:vertical}
.mk-select{padding-inline-end:2.2rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2377717A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center}
[dir="rtl"] .mk-select{background-position:left .85rem center}
.mk-input::placeholder,.mk-textarea::placeholder{color:var(--mk-text-muted);opacity:1}
.mk-input:focus,.mk-select:focus,.mk-textarea:focus{outline:none;border-color:var(--mk-primary);box-shadow:var(--mk-focus)}
.mk-input:disabled,.mk-select:disabled,.mk-textarea:disabled{background:var(--mk-surface-2);color:var(--mk-text-muted);cursor:not-allowed}
.mk-field.is-invalid .mk-input,.mk-field.is-invalid .mk-select,.mk-field.is-invalid .mk-textarea,
.mk-input[aria-invalid="true"],.mk-select[aria-invalid="true"],.mk-textarea[aria-invalid="true"]{border-color:var(--mk-error)}
.mk-field.is-valid .mk-input{border-color:var(--mk-success)}
.mk-field-error{display:flex;gap:.3rem;align-items:flex-start;font-size:var(--mk-fs-sm);color:var(--mk-error);font-weight:var(--mk-fw-medium)}
.mk-field-error::before{content:"⚠";font-size:.85em;line-height:1.5}
.mk-search{position:relative}
.mk-search .mk-input{padding-inline-start:2.4rem;border-radius:var(--mk-r-pill)}
.mk-search::before{content:"";position:absolute;inset-inline-start:.95rem;top:50%;width:15px;height:15px;transform:translateY(-50%);pointer-events:none;opacity:.6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377717A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
/* Cases et boutons radio */
.mk-check{display:inline-flex;align-items:center;gap:.55rem;min-height:var(--mk-tap);cursor:pointer;font-size:var(--mk-fs-base);color:var(--mk-text)}
.mk-check input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;margin:0;border:1.5px solid var(--mk-border-strong);border-radius:6px;background:var(--mk-surface);display:inline-grid;place-content:center;cursor:pointer;transition:background var(--mk-dur),border-color var(--mk-dur)}
.mk-check input[type="radio"]{border-radius:50%}
.mk-check input::after{content:"";width:10px;height:10px;transform:scale(0);transition:transform .12s;background:var(--mk-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.mk-check input[type="radio"]::after{clip-path:none;border-radius:50%;width:8px;height:8px}
.mk-check input:checked{background:var(--mk-primary);border-color:var(--mk-primary)}
.mk-check input:checked::after{transform:scale(1)}
.mk-check input:focus-visible{outline:none;box-shadow:var(--mk-focus)}
/* Interrupteur */
.mk-switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto}
.mk-switch input{opacity:0;width:0;height:0;position:absolute}
.mk-switch span{position:absolute;inset:0;border-radius:26px;background:var(--mk-border-strong);cursor:pointer;transition:background var(--mk-dur)}
.mk-switch span::before{content:"";position:absolute;width:20px;height:20px;inset-inline-start:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--mk-dur)}
.mk-switch input:checked+span{background:var(--mk-primary)}
.mk-switch input:checked+span::before{transform:translateX(20px)}
[dir="rtl"] .mk-switch input:checked+span::before{transform:translateX(-20px)}
.mk-switch input:focus-visible+span{box-shadow:var(--mk-focus)}
/* Téléversement de fichiers */
.mk-file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:var(--mk-s6);border:1.5px dashed var(--mk-border-strong);border-radius:var(--mk-r-lg);background:var(--mk-surface-2);text-align:center;color:var(--mk-text-2);cursor:pointer;transition:border-color var(--mk-dur),background var(--mk-dur)}
.mk-file:hover,.mk-file.is-drag{border-color:var(--mk-primary);background:var(--mk-primary-pale)}
.mk-file input[type="file"]{position:absolute;width:1px;height:1px;opacity:0}
/* Indicateur de progression */
.mk-progress{height:8px;border-radius:var(--mk-r-pill);background:var(--mk-surface-2);overflow:hidden}
.mk-progress>i{display:block;height:100%;border-radius:inherit;background:var(--mk-primary);transition:width .35s var(--mk-ease)}
.mk-steps{display:flex;gap:.35rem}.mk-steps>i{flex:1;height:4px;border-radius:4px;background:var(--mk-border)}.mk-steps>i.is-done{background:var(--mk-primary)}.mk-steps>i.is-current{background:var(--mk-gold)}

/* 4 ── Cartes / panneaux ────────────────────────────────────────────── */
.mk-panel{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-lg);padding:var(--mk-s5);box-shadow:var(--mk-shadow-sm)}
.mk-panel--raised{box-shadow:var(--mk-shadow-md)}
.mk-panel--accent{position:relative;overflow:hidden}
.mk-panel--accent::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--mk-primary),var(--mk-gold))}
.mk-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-s3);margin-bottom:var(--mk-s4)}
.mk-panel__title{font-family:var(--mk-font-display);font-size:var(--mk-fs-xl);font-weight:600;color:var(--mk-primary-dark);margin:0}
[data-theme="dark"] .mk-panel__title{color:var(--mk-gold-light)}
a.mk-panel,.mk-panel--link{text-decoration:none;color:inherit;transition:border-color var(--mk-dur),box-shadow var(--mk-dur)}
a.mk-panel:hover,.mk-panel--link:hover{border-color:var(--mk-gold);box-shadow:var(--mk-shadow-md)}

/* 5 ── Badges / pastilles ───────────────────────────────────────────── */
.mk-pill{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .6rem;border-radius:var(--mk-r-pill);font-size:var(--mk-fs-xs);font-weight:var(--mk-fw-bold);line-height:1.5;white-space:nowrap;background:var(--mk-surface-2);color:var(--mk-text-2)}
.mk-pill--primary{background:var(--mk-primary-pale);color:var(--mk-primary-ink)}
.mk-pill--gold{background:var(--mk-gold-pale);color:var(--mk-gold-ink)}
.mk-pill--success{background:var(--mk-success-pale);color:var(--mk-success)}
.mk-pill--warning{background:var(--mk-warning-pale);color:var(--mk-warning)}
.mk-pill--error{background:var(--mk-error-pale);color:var(--mk-error)}
.mk-pill--info{background:var(--mk-info-pale);color:var(--mk-info)}
.mk-status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mk-text-muted)}
.mk-status-dot--online{background:var(--mk-success);box-shadow:0 0 0 2px var(--mk-surface)}

/* 6 ── Alertes ──────────────────────────────────────────────────────── */
.mk-alert{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1rem;border-radius:var(--mk-r-md);border:1px solid transparent;font-size:var(--mk-fs-sm);line-height:1.5;margin-bottom:var(--mk-s4)}
.mk-alert__icon{flex:0 0 auto;font-size:1.05rem;line-height:1.3}
.mk-alert__body{flex:1;min-width:0}.mk-alert__body b,.mk-alert__title{display:block;font-weight:var(--mk-fw-bold);margin-bottom:.1rem}
.mk-alert__close{flex:0 0 auto;background:none;border:none;cursor:pointer;color:inherit;opacity:.6;font-size:1rem;width:28px;height:28px;border-radius:50%}
.mk-alert__close:hover{opacity:1;background:rgba(0,0,0,.06)}
.mk-alert--info{background:var(--mk-info-pale);color:var(--mk-info);border-color:color-mix(in srgb,var(--mk-info) 25%,transparent)}
.mk-alert--success{background:var(--mk-success-pale);color:var(--mk-success);border-color:color-mix(in srgb,var(--mk-success) 25%,transparent)}
.mk-alert--warning{background:var(--mk-warning-pale);color:var(--mk-warning);border-color:color-mix(in srgb,var(--mk-warning) 25%,transparent)}
.mk-alert--error{background:var(--mk-error-pale);color:var(--mk-error);border-color:color-mix(in srgb,var(--mk-error) 25%,transparent)}
.mk-alert--brand{background:var(--mk-primary-pale);color:var(--mk-primary-ink);border-color:color-mix(in srgb,var(--mk-primary) 22%,transparent)}

/* 7 ── Modales (comportement : js/mk-ui.js) ─────────────────────────── */
.mk-modal{position:fixed;inset:0;z-index:var(--mk-z-modal);display:none;align-items:center;justify-content:center;padding:var(--mk-s4);background:var(--mk-overlay)}
.mk-modal.is-open{display:flex;animation:mk-fade .16s ease}
.mk-modal__dialog{position:relative;width:100%;max-width:520px;max-height:calc(100dvh - 2rem);overflow:auto;background:var(--mk-surface);border-radius:var(--mk-r-lg);box-shadow:var(--mk-shadow-lg);padding:var(--mk-s6);animation:mk-rise .18s var(--mk-ease)}
.mk-modal__title{font-family:var(--mk-font-display);font-size:var(--mk-fs-xl);font-weight:600;color:var(--mk-primary-dark);margin:0 2rem var(--mk-s4) 0}
[data-theme="dark"] .mk-modal__title{color:var(--mk-gold-light)}
.mk-modal__close{position:absolute;top:.75rem;inset-inline-end:.75rem;width:36px;height:36px;border-radius:50%;border:none;background:var(--mk-surface-2);color:var(--mk-text-2);cursor:pointer;font-size:1rem}
.mk-modal__close:hover{background:var(--mk-border)}
.mk-modal__foot{display:flex;flex-wrap:wrap;gap:var(--mk-s2);justify-content:flex-end;margin-top:var(--mk-s5)}
body.mk-modal-open{overflow:hidden}

/* 8 ── Onglets ──────────────────────────────────────────────────────── */
.mk-tabset{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--mk-border);margin-bottom:var(--mk-s5)}
.mk-tabset::-webkit-scrollbar{display:none}
.mk-tabset [role="tab"],.mk-tabset__tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;min-height:var(--mk-tap);padding:.55rem .95rem;border:none;background:none;cursor:pointer;
  font-family:var(--mk-font-body);font-size:var(--mk-fs-sm);font-weight:var(--mk-fw-bold);color:var(--mk-text-2);border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none}
.mk-tabset [role="tab"]:hover,.mk-tabset__tab:hover{color:var(--mk-primary-ink)}
.mk-tabset [aria-selected="true"],.mk-tabset__tab.is-active{color:var(--mk-primary-ink);border-bottom-color:var(--mk-primary)}
.mk-tabset--pills{border-bottom:none;gap:.4rem}
.mk-tabset--pills [role="tab"],.mk-tabset--pills .mk-tabset__tab{border:1.5px solid var(--mk-border);border-radius:var(--mk-r-pill);margin:0;min-height:38px}
.mk-tabset--pills [aria-selected="true"],.mk-tabset--pills .mk-tabset__tab.is-active{background:var(--mk-primary);border-color:var(--mk-primary);color:var(--mk-on-primary)}
[role="tabpanel"][hidden]{display:none}

/* 9 ── Chargement / vide ────────────────────────────────────────────── */
.mk-spinner{display:inline-block;width:22px;height:22px;border-radius:50%;border:2.5px solid var(--mk-border);border-top-color:var(--mk-primary);animation:mk-spin .7s linear infinite;vertical-align:middle}
.mk-spinner--lg{width:36px;height:36px;border-width:3px}
.mk-loading{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:var(--mk-s8);color:var(--mk-text-muted)}
.mk-shimmer{background:linear-gradient(90deg,var(--mk-surface-2) 25%,var(--mk-border) 37%,var(--mk-surface-2) 63%);background-size:400% 100%;animation:mk-shimmer 1.3s ease infinite;border-radius:var(--mk-r-sm)}
.mk-empty{text-align:center;padding:var(--mk-s10) var(--mk-s5);background:var(--mk-surface);border:1px dashed var(--mk-border-strong);border-radius:var(--mk-r-lg);color:var(--mk-text-2)}
.mk-empty__icon{font-size:2.2rem;line-height:1;margin-bottom:var(--mk-s2)}
.mk-empty__title{font-family:var(--mk-font-display);font-size:var(--mk-fs-xl);color:var(--mk-primary-dark);margin:0 0 .3rem}
[data-theme="dark"] .mk-empty__title{color:var(--mk-gold-light)}
.mk-empty p{margin:0 auto var(--mk-s4);max-width:46ch}
@keyframes mk-spin{to{transform:rotate(360deg)}}
@keyframes mk-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes mk-fade{from{opacity:0}to{opacity:1}}
@keyframes mk-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 10 ── Tableaux ────────────────────────────────────────────────────── */
.mk-tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--mk-border);border-radius:var(--mk-r-md);background:var(--mk-surface)}
.mk-tbl{width:100%;border-collapse:collapse;font-size:var(--mk-fs-sm)}
.mk-tbl th{text-align:start;font-size:var(--mk-fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--mk-text-muted);font-weight:var(--mk-fw-bold);background:var(--mk-surface-2);padding:.65rem .85rem;white-space:nowrap}
.mk-tbl td{padding:.7rem .85rem;border-top:1px solid var(--mk-border);color:var(--mk-text);vertical-align:middle}
.mk-tbl tbody tr:hover td{background:var(--mk-primary-pale)}

/* 11 ── Fil d'Ariane ────────────────────────────────────────────────── */
.mk-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:var(--mk-fs-sm);color:var(--mk-text-muted);margin:0 0 var(--mk-s4);padding:0;list-style:none}
.mk-breadcrumb a{color:var(--mk-text-2);text-decoration:none}
.mk-breadcrumb a:hover{color:var(--mk-primary-ink);text-decoration:underline}
.mk-breadcrumb li+li::before{content:"›";margin-inline-end:.35rem;color:var(--mk-border-strong)}
.mk-breadcrumb [aria-current="page"]{color:var(--mk-text);font-weight:var(--mk-fw-medium)}

/* 12 ── Classes historiques alignées sur la charte (pages non encore migrées) ── */
.section-title{font-family:var(--mk-font-display);color:var(--mk-primary-dark)}
[data-theme="dark"] .section-title{color:var(--mk-gold-light)}
.section-sub{color:var(--mk-text-muted)}
.ornament{color:var(--mk-gold)}
.btn-primary{background:var(--mk-gold);color:#2E2312;border-radius:var(--mk-r-md);box-shadow:var(--mk-shadow-sm);min-height:var(--mk-tap)}
.btn-primary:hover{background:var(--mk-gold-light);transform:none;box-shadow:var(--mk-shadow-md)}
.btn-submit{background:var(--mk-primary);border-radius:var(--mk-r-md);box-shadow:none;min-height:var(--mk-tap)}
.btn-submit:hover{background:var(--mk-primary-hover);transform:none;box-shadow:none}
.form-label{color:var(--mk-text-2)}
.form-control,.filter-control{border-color:var(--mk-border-strong);border-radius:var(--mk-r-md);background:var(--mk-surface);color:var(--mk-text)}
.form-control:focus,.filter-control:focus{border-color:var(--mk-primary);box-shadow:var(--mk-focus);background:var(--mk-surface)}
.modal-overlay{background:var(--mk-overlay);z-index:var(--mk-z-modal)}
.modal{border-radius:var(--mk-r-lg);box-shadow:var(--mk-shadow-lg);max-height:calc(100dvh - 2rem);overflow:auto}
.modal-title{color:var(--mk-primary-dark)}
[data-theme="dark"] .modal-title{color:var(--mk-gold-light)}
.modal-close{width:36px;height:36px}
.toast{background:var(--mk-primary-dark);border-radius:var(--mk-r-md);z-index:var(--mk-z-toast)}
.toast.err{background:var(--mk-error)} .toast.info{background:var(--mk-info)}
.tag{background:var(--mk-primary-pale);color:var(--mk-primary-ink)}
[data-theme="dark"] .tag{background:var(--mk-primary-pale);color:var(--mk-primary-ink)}
.empty-state,.no-profiles{color:var(--mk-text-muted)}
.status-box.validated{background:var(--mk-success-pale);border-color:color-mix(in srgb,var(--mk-success) 35%,transparent)}

/* 13 ── Navigation : barre du haut + sidebar ───────────────────────── */
#main-nav{border-bottom:1px solid var(--mk-border)}
#main-nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;opacity:.5;
  background:linear-gradient(90deg,transparent,var(--mk-primary) 20%,var(--mk-gold) 50%,var(--mk-primary) 80%,transparent)}
body.mk-has-sidebar #nav-links{background:linear-gradient(180deg,var(--mk-surface) 55%,transparent 100%),var(--mk-zellige-faint) 0 0/48px 48px repeat,var(--mk-surface-2);border-inline-end:1px solid var(--mk-border);box-shadow:4px 0 24px rgba(41,37,42,.05)}
body.mk-has-sidebar #nav-links a{color:var(--mk-text-2);min-height:42px}
body.mk-has-sidebar #nav-links a:hover{background:var(--mk-primary-pale);color:var(--mk-primary-ink)}
body.mk-has-sidebar #nav-links a:hover .nav-ic{background:var(--mk-gold-pale)}
body.mk-has-sidebar #nav-links a.active{background:var(--mk-primary);color:var(--mk-on-primary);box-shadow:inset 3px 0 0 var(--mk-gold),var(--mk-shadow-md)}
[dir="rtl"] body.mk-has-sidebar #nav-links a.active{box-shadow:inset -3px 0 0 var(--mk-gold),var(--mk-shadow-md)}
body.mk-has-sidebar #nav-links .mk-sb-sec{color:var(--mk-gold-ink);letter-spacing:.08em}
#nav-links a.mk-sb-user{background:linear-gradient(135deg,var(--mk-primary-pale),var(--mk-surface));border-color:var(--mk-border)}
.mk-sb-name{color:var(--mk-primary-dark)}
[data-theme="dark"] .mk-sb-name{color:var(--mk-gold-light)}
#nav-links a.mk-sb-user .mk-sb-avatar{box-shadow:0 0 0 2px var(--mk-surface),0 0 0 4px var(--mk-gold)}
body.mk-has-sidebar #nav-links a.nav-cta{background:var(--mk-gold);color:#2E2312!important;justify-content:center}
body.mk-has-sidebar #nav-links a.nav-cta:hover{background:var(--mk-gold-light)!important}
#nav-links a.mk-sb-logout{color:var(--mk-error)}
#nav-links a.mk-sb-logout:hover{background:var(--mk-error-pale);color:var(--mk-error)}

/* 14 ── Pied de page commun (footer.php) ───────────────────────────── */
.mk-footer{margin-top:var(--mk-s12);background:var(--mk-primary-dark);color:rgba(255,255,255,.82);font-size:var(--mk-fs-sm)}
[data-theme="dark"] .mk-footer{background:#120d10;border-top:1px solid var(--mk-border)}
.mk-footer__in{max-width:var(--mk-w);margin:0 auto;padding:var(--mk-s10) var(--mk-gutter) var(--mk-s6);display:grid;gap:var(--mk-s8);grid-template-columns:1.4fr repeat(2,1fr)}
.mk-footer__brand b{display:block;font-family:var(--mk-font-display);font-size:1.6rem;color:var(--mk-gold-light);font-weight:600;margin-bottom:.3rem}
.mk-footer h2{font-size:var(--mk-fs-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--mk-gold-light);margin:0 0 .7rem;font-family:var(--mk-font-body);font-weight:var(--mk-fw-bold)}
.mk-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.mk-footer a{color:rgba(255,255,255,.82);text-decoration:none;display:inline-flex;min-height:36px;align-items:center}
.mk-footer a:hover{color:#fff;text-decoration:underline}
.mk-footer__bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:var(--mk-s4) var(--mk-gutter);color:rgba(255,255,255,.6);font-size:var(--mk-fs-xs)}
@media (max-width:720px){.mk-footer__in{grid-template-columns:1fr 1fr}.mk-footer__brand{grid-column:1/-1}}

/* 15 ── Fond décoratif des pages membres (.mk-deco, header.php) : ivoire + zellige TRÈS discret ── */
.mk-deco{background:var(--mk-ivory)!important}
.mk-deco::before{opacity:.10!important;-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)}
[data-theme="dark"] .mk-deco{background:var(--mk-ivory)!important}
[data-theme="dark"] .mk-deco::before{opacity:.06!important}

/* 16 ── Pied de page : neutralise la règle historique footer{padding} + version compacte membre ── */
.mk-footer{padding:0}
.mk-footer__bottom a{display:inline;min-height:0;color:inherit;text-decoration:underline;text-underline-offset:2px}
.mk-footer--mini{margin-top:var(--mk-s10);background:transparent;color:var(--mk-text-muted);border-top:1px solid var(--mk-border)}
[data-theme="dark"] .mk-footer--mini{background:transparent;border-top-color:var(--mk-border)}
.mk-footer--mini .mk-footer__bottom{border-top:none;color:var(--mk-text-muted);padding-block:var(--mk-s5)}
.mk-footer--mini a{color:var(--mk-text-2)}

/* 17 ── Cibles tactiles des contrôles de l'en-tête ── */
#main-nav .lang-btn{min-height:40px}
.mk-sb-collapse{min-width:36px;min-height:36px}

/* 18 ── Authentification (connexion, inscription, mot de passe oublié, réinitialisation, vérification) ──
   Source unique : les 5 pages n'ont plus de <style> propre. */
.auth-wrap{min-height:calc(100vh - 68px);display:flex;align-items:center;justify-content:center;padding:var(--mk-s8) var(--mk-gutter);margin-top:68px}
.auth-card{position:relative;overflow:hidden;width:100%;max-width:440px;background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-lg);padding:var(--mk-s8) var(--mk-s6);box-shadow:var(--mk-shadow-md)}
.auth-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--mk-primary),var(--mk-gold))}
.auth-card--center{text-align:center}
.auth-logo{text-align:center;margin-bottom:var(--mk-s6)}
.auth-logo .icon,.auth-icon{font-size:2.3rem;line-height:1}
.auth-logo h1,.auth-logo h2,.auth-title{font-family:var(--mk-font-display);color:var(--mk-primary-dark);font-size:var(--mk-fs-2xl);font-weight:600;line-height:var(--mk-lh-tight);margin:.5rem 0 .25rem}
[data-theme="dark"] .auth-logo h1,[data-theme="dark"] .auth-logo h2,[data-theme="dark"] .auth-title{color:var(--mk-gold-light)}
.auth-logo p,.auth-text{color:var(--mk-text-muted);font-size:var(--mk-fs-sm);margin:0}
.auth-group{margin-bottom:var(--mk-s4)}
.auth-label{display:block;font-size:var(--mk-fs-sm);font-weight:var(--mk-fw-bold);color:var(--mk-text-2);margin-bottom:.35rem}
.auth-label .req{color:var(--mk-error);margin-inline-start:.15rem}
.auth-input{width:100%;min-height:var(--mk-tap);padding:.6rem .85rem;border:1.5px solid var(--mk-border-strong);border-radius:var(--mk-r-md);background:var(--mk-surface);color:var(--mk-text);font-family:var(--mk-font-body);font-size:var(--mk-fs-base);transition:border-color var(--mk-dur),box-shadow var(--mk-dur)}
.auth-input::placeholder{color:var(--mk-text-muted)}
.auth-input:focus{outline:none;border-color:var(--mk-primary);box-shadow:var(--mk-focus)}
.auth-input[aria-invalid="true"]{border-color:var(--mk-error)}
.auth-hint{font-size:var(--mk-fs-xs);color:var(--mk-text-muted);margin-top:.3rem}
.auth-btn{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;min-height:48px;margin-top:var(--mk-s2);padding:.7rem 1.2rem;border:none;border-radius:var(--mk-r-md);background:var(--mk-primary);color:var(--mk-on-primary);font-family:var(--mk-font-body);font-size:var(--mk-fs-base);font-weight:var(--mk-fw-bold);text-decoration:none;cursor:pointer;transition:background-color var(--mk-dur),transform .08s}
.auth-btn:hover{background:var(--mk-primary-hover)}
.auth-btn:active{transform:scale(.98)}
.auth-btn:focus-visible{outline:none;box-shadow:var(--mk-focus)}
.auth-btn[disabled]{opacity:.6;cursor:not-allowed}
a.auth-btn{display:inline-flex;width:auto;margin-top:var(--mk-s5)}
.auth-err,.auth-ok{display:none;border-radius:var(--mk-r-md);padding:.7rem .9rem;font-size:var(--mk-fs-sm);line-height:1.5;margin-top:var(--mk-s3);border:1px solid transparent}
.auth-err{background:var(--mk-error-pale);color:var(--mk-error);border-color:color-mix(in srgb,var(--mk-error) 25%,transparent)}
.auth-ok{background:var(--mk-success-pale);color:var(--mk-success);border-color:color-mix(in srgb,var(--mk-success) 25%,transparent)}
.auth-footer{text-align:center;margin-top:var(--mk-s5);font-size:var(--mk-fs-sm);color:var(--mk-text-muted);line-height:2.1}
.auth-footer a{color:var(--mk-primary-ink);font-weight:var(--mk-fw-bold);text-decoration:none}
.auth-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.auth-note{font-size:var(--mk-fs-xs);color:var(--mk-text-muted);margin:.6rem 0 0;text-align:center}
@media (max-width:600px){.auth-wrap{align-items:flex-start;padding-top:var(--mk-s6)}.auth-card{padding:var(--mk-s6) var(--mk-s5)}}

/* 19 ── Carte profil (.pfc) — composant commun : profiles.php, accueil (index.php), favoris…
   Ordre : photo/avatar · prénom & âge · badge de vérification réel · ville & situation · profession/études/langues ·
   présentation · Voir le profil · favori · signalement. Les valeurs vides ne sont jamais affichées. */
.pfc,.pfc-body{min-width:0}
.pfc{position:relative;display:flex;flex-direction:column;background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:18px;overflow:hidden;box-shadow:var(--mk-shadow-md);transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s}
.pfc:hover{transform:translateY(-3px);border-color:var(--mk-gold);box-shadow:var(--mk-shadow-md)}
.pfc.is-featured{border-color:var(--mk-gold)}
.pfc-media{position:relative;display:block;aspect-ratio:4/5;background:linear-gradient(150deg,var(--mk-primary-pale),var(--mk-gold-pale));overflow:hidden}
.pfc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pfc:hover .pfc-media img{transform:scale(1.03)}
.pfc-av{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;color:var(--mk-primary);font-family:'Cormorant Garamond',serif}
.pfc-av b{font-size:3.6rem;line-height:1;font-weight:700}
.pfc-av span{font-family:inherit;font-size:.8rem;color:var(--mk-text-muted);font-family:system-ui,sans-serif}
.pfc-av::after{content:"";position:absolute;inset:0;opacity:.12;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%237b1e34' stroke-width='1.1'%3E%3Crect x='14' y='14' width='20' height='20'/%3E%3Crect x='14' y='14' width='20' height='20' transform='rotate(45 24 24)'/%3E%3C/g%3E%3C/svg%3E")}
.pfc-tl{position:absolute;top:.55rem;left:.55rem;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;z-index:2}
.pfc-pill{font-size:.68rem;font-weight:800;padding:.18rem .55rem;border-radius:20px;color:#fff;background:rgba(20,10,10,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pfc-pill.on{background:var(--mk-success)}
.pfc-pill.gold{background:var(--mk-gold)}
.pfc-br{position:absolute;bottom:.5rem;left:.55rem;right:.55rem;display:flex;justify-content:space-between;gap:.4rem;z-index:2}
.pfc-body{display:flex;flex-direction:column;gap:.4rem;padding:.9rem 1rem 1rem;flex:1}
.pfc-name{margin:0;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.45rem;line-height:1.1;color:var(--mk-text);display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .35rem}
.pfc-name a{color:inherit;text-decoration:none}
.pfc-name a:hover{color:var(--mk-primary)}
.pfc-name .ag{font-family:system-ui,-apple-system,'Tajawal',sans-serif;font-size:.92rem;font-weight:600;color:var(--mk-text-2)}
.pfc .mk-vbadge{font-family:system-ui,-apple-system,'Tajawal',sans-serif;font-size:.68rem;font-weight:800;padding:.12rem .5rem;border-radius:20px;align-self:center}
.pfc .mk-vbadge-id{background:var(--mk-success-pale);color:var(--mk-success)}
.pfc .mk-vbadge-wa{background:var(--mk-info-pale);color:var(--mk-info)}
.pfc-chips{display:flex;gap:.3rem;flex-wrap:wrap}
.pfc-chip{font-size:.68rem;font-weight:800;padding:.12rem .5rem;border-radius:20px;background:var(--mk-gold-pale);color:var(--mk-gold-ink)}
.pfc-chip.cp{background:var(--mk-success-pale);color:var(--mk-success)}
[data-theme="dark"] .pfc-chip{color:var(--mk-gold)}
.pfc-loc{font-size:.88rem;font-weight:700;color:var(--mk-primary)}
.pfc-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem;font-size:.84rem;color:var(--mk-text-2)}
.pfc-facts li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfc-desc{margin:.15rem 0 0;font-size:.86rem;line-height:1.5;color:var(--mk-text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pfc-foot{display:flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.6rem}
.pfc-cta{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:12px;background:var(--mk-primary);color:#fff;font-weight:800;font-size:.88rem;text-decoration:none;transition:background .15s}
.pfc-cta:hover{background:var(--mk-primary-dark)}
.pfc-ib{width:42px;height:42px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1.5px solid var(--mk-border);background:transparent;cursor:pointer;font-size:1.05rem;transition:border-color .15s,background .15s}
.pfc-ib:hover{border-color:var(--mk-primary);background:var(--mk-primary-pale)}
.pfc-ib.active{border-color:var(--mk-primary);background:var(--mk-primary-pale)}
.pfc-ib.rep{font-size:.9rem;opacity:.75}
.pfc-ib.rep:hover{opacity:1}
@media(max-width:600px){
  .pfc{border-radius:16px}
  .pfc-body{padding:.65rem .7rem .75rem;gap:.3rem}
  .pfc-name{font-size:1.15rem}
  .pfc-name .ag{font-size:.8rem}
  .pfc-loc{font-size:.78rem}
  .pfc-facts{font-size:.76rem}
  .pfc-facts li:nth-child(n+2){display:none}
  .pfc-desc{font-size:.78rem;-webkit-line-clamp:2}
  .pfc-cta{font-size:.78rem;min-height:38px;border-radius:10px}
  .pfc-ib{width:38px;height:38px;border-radius:10px;font-size:.95rem}
  .pfc-ib.rep{font-size:.8rem}
  .pfc-cta .xl{display:none}
  .pfc-pill{font-size:.62rem;padding:.14rem .45rem}
}
@media(max-width:350px){.pfc-cta .xl{display:inline}}
@media(prefers-reduced-motion:reduce){.pfc,.pfc-media img{transition:none}.pfc:hover{transform:none}.pfc:hover .pfc-media img{transform:none}}

/* 20 ── Grille de cartes profil commune (.mk-pgrid) : 2 colonnes compactes sur mobile, 1 sous 350 px */
.mk-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:var(--mk-s5);perspective:none}
.mk-pgrid>*{min-width:0}
@media(max-width:600px){.mk-pgrid{grid-template-columns:1fr 1fr;gap:.7rem}}
@media(max-width:350px){.mk-pgrid{grid-template-columns:1fr}}

/* 21 ── Compteurs du menu : aucune pastille vide quand le compteur est à zéro */
#fav-count-badge:empty,#mk-msg-badge:empty,#mk-notif-badge:empty{display:none!important}