/* com.css — socle : états globaux et composants réutilisables — propriétaire : core (chargé en dernier) */
/* ============================ Bannière / hors ligne ============================ */
.banner{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600;line-height:1.35;background:var(--c-info-soft);color:var(--c-ink)}
.banner+.banner{margin-top:8px}
.banner>.ic{flex:none;color:var(--c-info)}
.banner .btn{flex:none;background:var(--c-surface)}
.banner-warn{background:var(--c-mimoza-soft)}.banner-warn>.ic{color:var(--c-mimoza-text)}
.banner-error{background:var(--c-shega-soft)}.banner-error>.ic{color:var(--c-shega-text)}
.banner-success{background:var(--c-primary-soft)}.banner-success>.ic{color:var(--c-on-primary-soft)}
.com-offwrap{margin:8px var(--gutter)}
.sheet-body .com-offwrap,.pad .com-offwrap{margin:0 0 12px}
/* Erreurs inline des domaines (cpt/dec/res/pub) : même rendu que .fld-err du core */
.cpt-err,.dec-err,.res-ferr,.pub-err{display:flex;gap:6px;align-items:flex-start;color:var(--c-danger);font-size:var(--fs-sm);font-weight:600;margin-top:6px;line-height:1.35}
.cpt-err[hidden],.dec-err[hidden],.res-ferr[hidden],.pub-err[hidden]{display:none}
.cpt-err .ic,.dec-err .ic,.res-ferr .ic,.pub-err .ic{width:16px;height:16px;flex:none;margin-top:1px}
.netbar{flex:none;border-radius:0;padding:8px var(--gutter);position:relative;z-index:6;animation:rise var(--dur-base) var(--ease-out) both}

/* ============================ Champ de formulaire (COM-01) ============================ */
.fld+.fld{margin-top:4px}
.fld .lbl{margin-top:16px}
.fld .req{color:var(--c-shega-text)}
.fld-sub{display:flex;gap:8px;align-items:flex-start;min-height:20px}
.fld-sub .help{display:block}
.fld-err{display:flex;gap:6px;align-items:flex-start;color:var(--c-danger);font-size:var(--fs-sm);font-weight:600;margin-top:6px;line-height:1.35}
.fld-err:empty{display:none}
.fld-err .ic{margin-top:1px}
.fld-cnt{font-size:var(--fs-xs);color:var(--c-ink-2);margin-top:6px;flex:none}
.fld.has-err .input,.input[aria-invalid="true"]{border-color:var(--c-danger);background:var(--c-surface)}

/* ============================ Squelettes (COM-02) ============================ */
.sk-wrap{pointer-events:none}
.skel.sk-line{display:block;height:14px;margin-top:8px}
.skel.sk-line:first-child{margin-top:0}
.sk-card{display:flex;gap:14px;align-items:flex-start;padding:16px;background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.skel.sk-av{width:56px;height:56px;border-radius:50%;flex:none}
.skel.sk-hero{display:block;height:200px;border-radius:0;margin-bottom:16px}
.sk-detail .list{margin-top:24px}
.skel{border-radius:8px;background:var(--c-skeleton);animation:skel 1.2s var(--ease-in-out) infinite}
@keyframes skel{0%,100%{opacity:.6}50%{opacity:1}}
/* Squelettes locaux restants (formes spécifiques) : même rendu que .skel */
.dec-sk,.cpt-sk,.res-sk{background:var(--c-skeleton);animation:skel 1.2s var(--ease-in-out) infinite}
@media (prefers-reduced-motion:reduce){.skel,.dec-sk,.cpt-sk,.res-sk{animation:none}}

/* ============================ Erreur (COM-04/06/07) ============================ */
.errstate{padding-top:48px}
.errstate .btn-ghost{margin-top:8px}
.errmini .errstate{padding:8px 0;background:var(--c-surface);border-radius:var(--r-lg)}

/* ============================ Boutons : danger, occupé (COM-09) ============================ */
.btn-danger{background:var(--c-danger);color:#fff}
:root[data-theme="dark"] .btn-danger{color:#2A0805}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-danger{color:#2A0805}}
.btn.is-busy{opacity:.8;cursor:progress}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================ Dialogue (COM-10) ============================ */
.com-dlg{position:absolute;inset:0;z-index:75;pointer-events:auto}
.com-dlg.in .scrim{opacity:1}
.com-dlg .sheet{max-height:80%}
.com-dlg.in .sheet{transform:none;transition:transform var(--dur-slow) var(--ease-sheet)}
.dlg .sheet-body{padding-top:8px}
.dlg-ic{width:48px;height:48px;border-radius:14px 14px 5px 5px;display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-on-primary-soft);margin-bottom:12px}
.dlg-ic.danger{background:var(--c-shega-soft);color:var(--c-shega-text)}
.dlg-foot{display:flex;gap:10px}
.dlg-foot .btn{flex:1;min-width:0}
.dlg-foot.dlg-3{flex-direction:column-reverse}
.dlg-list{margin:12px 0 0;padding-left:20px;display:grid;gap:6px;font-size:var(--fs-sm);color:var(--c-ink-2)}

/* ============================ Photo + repli (COM-17) ============================ */
.photo{aspect-ratio:4/3;border-radius:var(--r-window);overflow:hidden;background:var(--c-skeleton)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================ Tirer pour rafraîchir (COM-20) ============================ */
.ptr{display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;color:var(--c-ink-2);font-size:var(--fs-sm);font-weight:600}
.ptr.busy .ic{animation:spin .8s linear infinite}

/* ============================ Accessibilité (COM-12/22) ============================ */
[data-com-focus]:focus{outline:none;box-shadow:none}
.badge{font-size:12px}

/* ============================ Panneau : mode simulation ============================ */
.simbox{margin-top:16px;border:1px solid var(--c-line);border-radius:var(--r-md);padding:8px 12px 10px;display:grid;gap:4px;font-size:var(--fs-sm);color:var(--c-ink-2)}
.simbox legend{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3);padding:0 4px}
.simbox label{display:flex;align-items:center;gap:8px;min-height:30px;cursor:pointer}
.simbox select{border:1px solid var(--c-line);border-radius:var(--r-xs);background:var(--c-surface);padding:2px 6px}
.simbox p{font-size:var(--fs-xs);color:var(--c-ink-3);line-height:1.4}
/* T1-52 : texte informatif ≥ 14 px (onglets 13 px) ; réglage « Tekst më i madh » (Cilësimet) */
.t-xs,.meta,.help,.lvl,.kind,.chip .cnt{font-size:var(--fs-sm)}
.tab{font-size:var(--fs-xs)}
:root[data-fs="l"]{font-size:112.5%}
.is-off #phone .btn-primary:not([data-offline-ok]),.is-off #phone .btn-mimoza:not([data-offline-ok]){opacity:.5;filter:grayscale(.6)}
.dec-repbtn{flex:none}