/**
 * skolsuite-ui.css — v1 (révision 2)
 * Kit UI partagé SkolSuite. Servi depuis login.skolsuite.net,
 * référencé par toutes les applis de la suite.
 *
 * Révision 2 : ajout arrondis/ombres/dégradés sur les composants,
 * ajout du composant .ss-topbar (menu du haut, rétractable, avec
 * emplacement Profil/Paramétrage) en remplacement du menu latéral
 * fixe de la V1. Pas encore déployé en prod — pas de contrainte de
 * compatibilité, révision directe du fichier v1.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap');

/**
 * Thème "Akkhor" — palette bleue/ardoise claire, appliquée à partir de
 * la maquette akkhor-admin.html fournie par l'utilisateur. Remplace la
 * palette papier/ochre. Les noms de variables --ss-* sont conservés
 * pour ne rien casser dans les deux applis qui consomment ce fichier ;
 * seules les valeurs (et, plus bas, .ss-topbar/.ss-sidebar) changent.
 */
:root{
  --ss-paper:      #F4F6FB;
  --ss-paper-line: #E8EDF4;
  --ss-slate:      #2A6FDB;
  --ss-slate-soft: #4E8BEC;
  --ss-ink:        #1B2438;
  --ss-ochre:      #C98A00;
  --ss-ochre-deep: #9C6C00;
  --ss-ochre-soft: #FCF2DD;
  --ss-error:      #C4443C;
  --ss-success:    #1F9D6B;
  --ss-muted:      #7A8AA0;
  --ss-chalk:      #F1F4F9;

  --ss-font-display: 'Plus Jakarta Sans', 'Cairo', system-ui, sans-serif;
  --ss-font-body:    'Plus Jakarta Sans', 'Cairo', system-ui, -apple-system, sans-serif;

  --ss-radius:    16px;
  --ss-radius-sm: 11px;

  --ss-shadow:    0 8px 24px rgba(27,36,56,.08);
  --ss-shadow-sm: 0 2px 10px rgba(27,36,56,.06);

  --ss-gradient-primary: linear-gradient(135deg, var(--ss-slate) 0%, var(--ss-slate-soft) 100%);
  --ss-gradient-accent:  linear-gradient(135deg, var(--ss-slate) 0%, #6D4AD6 100%);
}

.ss-scope, .ss-scope *{ box-sizing:border-box; }
.ss-scope{ font-family:var(--ss-font-body); color:var(--ss-ink); }
.ss-scope h1,.ss-scope h2,.ss-scope h3{ font-family:var(--ss-font-display); margin:0; }

.ss-card{
  background:#fff;
  border-radius:var(--ss-radius);
  box-shadow:var(--ss-shadow);
  padding:1.75rem;
}
.ss-card h1{ font-size:1.5rem; font-weight:500; margin-bottom:1.4rem; }
.ss-card h2{ font-size:1.15rem; font-weight:500; margin-bottom:1rem; }

.ss-tabs{ display:flex; gap:1.6rem; border-bottom:1px solid var(--ss-paper-line); margin-bottom:1.4rem; }
.ss-tabs button{ background:none; border:none; cursor:pointer; font-family:inherit; font-size:.92rem; color:var(--ss-muted); padding:0 0 .7rem; position:relative; top:1px; }
.ss-tabs button.active{ color:var(--ss-ink); background:var(--ss-ochre-soft); border-bottom:2px solid var(--ss-ochre); font-weight:500; border-radius:var(--ss-radius-sm) var(--ss-radius-sm) 0 0; padding-left:.5rem; padding-right:.5rem; }

.ss-field{ display:block; margin-bottom:1.05rem; }
.ss-field label{ font-size:.82rem; color:var(--ss-muted); display:block; margin-bottom:.35rem; }
.ss-field input,
.ss-field select{
  display:block; width:100%;
  padding:.6rem .75rem;
  border:1px solid var(--ss-paper-line);
  border-radius:var(--ss-radius-sm);
  background:var(--ss-chalk);
  font-family:inherit; font-size:.98rem; color:var(--ss-ink);
  box-shadow:inset 0 1px 2px rgba(27,36,56,.04);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ss-field input:focus,
.ss-field select:focus{
  outline:none;
  border-color:var(--ss-slate);
  background:#fff;
  box-shadow:0 0 0 3px rgba(42,111,219,.15);
}
[data-ss-theme="dark"] .ss-field input:focus,
[data-ss-theme="dark"] .ss-field select:focus{ background:#131C2E; }
.ss-hint{ margin:.35rem 0 0; font-size:.78rem; color:var(--ss-muted); line-height:1.4; }

.ss-btn{
  display:inline-block;
  padding:.65rem 1.1rem;
  border-radius:var(--ss-radius-sm);
  font-family:inherit; font-size:.92rem;
  border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:filter .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ss-btn:disabled{ opacity:.55; cursor:default; }
.ss-btn-primary{ background:var(--ss-gradient-primary); color:var(--ss-chalk); box-shadow:var(--ss-shadow-sm); }
.ss-btn-primary:hover:not(:disabled){ filter:brightness(1.08); }
.ss-btn-full{ width:100%; text-align:center; }
.ss-btn-secondary{ background:#fff; border-color:var(--ss-paper-line); color:var(--ss-ink); }
.ss-btn-secondary:hover:not(:disabled){ border-color:var(--ss-slate); }
.ss-btn-danger{ background:#fff; border-color:var(--ss-error); color:var(--ss-error); }
.ss-btn-danger:hover:not(:disabled){ background:var(--ss-error); color:#fff; }
.ss-btn-link{ background:none; border:none; color:var(--ss-ochre-deep); font-family:inherit; font-size:.82rem; cursor:pointer; padding:0; text-decoration:none; transition:color .15s; }
.ss-btn-link:hover{ color:var(--ss-slate); text-decoration:underline; }

.ss-alert{ font-size:.85rem; margin:0 0 1rem; padding:.65rem .9rem; border-radius:var(--ss-radius-sm); }
.ss-alert-error{ color:var(--ss-error); background:#FCEFED; }
.ss-alert-info{ color:var(--ss-success); background:#E4F6EE; }

.ss-code-display{
  background:var(--ss-chalk);
  border-radius:var(--ss-radius-sm);
  box-shadow:var(--ss-shadow-sm);
  padding:.9rem 1rem;
  margin-bottom:1rem;
}
.ss-code-display p{ margin:0 0 .5rem; font-size:.85rem; color:var(--ss-muted); }
.ss-code-row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.ss-code-row code{
  font-family:ui-monospace, 'SF Mono', Consolas, monospace;
  font-size:1.05rem; letter-spacing:.03em;
  background:#fff; border:1px solid var(--ss-paper-line);
  padding:.35rem .6rem; border-radius:var(--ss-radius-sm);
}
.ss-code-row button{ font-size:.78rem; padding:.35rem .7rem; }

.ss-list{ list-style:none; margin:0; padding:0; }
.ss-list-row{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:.8rem .9rem;
  border-radius:var(--ss-radius-sm);
  font-size:.9rem;
}
.ss-list-row:hover{ background:var(--ss-paper); }
.ss-list-row-main{ display:flex; flex-direction:column; gap:.2rem; }
.ss-list-row-meta{ font-size:.78rem; color:var(--ss-muted); }
.ss-list-row-actions{ display:flex; gap:.4rem; flex-shrink:0; align-items:center; }

.ss-badge{ display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.ss-badge-active{ background:#E4F6EE; color:var(--ss-success); }
.ss-badge-pending{ background:var(--ss-ochre-soft); color:var(--ss-ochre-deep); }
.ss-badge-revoked{ background:var(--ss-paper); color:var(--ss-muted); }

/* ---- Barre de menu du haut, rétractable ----
   Chrome clair (fond surface + bordure), comme le tableau de bord
   Akkhor, plutôt que la barre sombre en dégradé de la V1. */
.ss-topbar{
  background:#fff;
  color:var(--ss-ink);
  border:1px solid var(--ss-paper-line);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.7rem 1.25rem;
  border-radius:var(--ss-radius);
  box-shadow:var(--ss-shadow-sm);
  flex-wrap:wrap;
}
.ss-topbar-brand{ font-family:var(--ss-font-display); font-weight:800; letter-spacing:-.02em; font-size:1.1rem; white-space:nowrap; color:var(--ss-ink); }
.ss-topbar-toggle{
  display:none;
  background:var(--ss-paper); border:none; color:var(--ss-ink);
  width:34px; height:34px; border-radius:999px; cursor:pointer; font-size:1rem;
}
.ss-topbar-links{
  display:flex; gap:.4rem; flex-wrap:wrap; align-items:center;
  transition:opacity .15s ease;
}
.ss-topbar-links.collapsed{ display:none; }
.ss-topbar-links button,
.ss-topbar-links a{
  background:transparent; border:none; color:var(--ss-muted); text-decoration:none;
  font-family:inherit; font-size:.85rem; font-weight:500; padding:.45rem .95rem;
  border-radius:999px; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.ss-topbar-links button:hover:not(.active),
.ss-topbar-links a:hover:not(.active){ background:var(--ss-paper); color:var(--ss-ink); }
.ss-topbar-links button.active,
.ss-topbar-links a.active{ background:#EAF1FC; color:var(--ss-slate); font-weight:700; }
.ss-topbar-right{ display:flex; align-items:center; gap:.5rem; }
.ss-topbar-icon-btn{
  background:#fff; border:1px solid var(--ss-paper-line); color:var(--ss-muted);
  width:36px; height:36px; border-radius:var(--ss-radius-sm); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
  transition:background .15s ease, color .15s ease;
}
.ss-topbar-icon-btn:hover{ background:var(--ss-paper); color:var(--ss-ink); }

@media (max-width:760px){
  .ss-topbar-toggle{ display:flex; align-items:center; justify-content:center; }
  .ss-topbar-links{
    order:3; width:100%;
    flex-direction:column; align-items:stretch;
    padding-top:.5rem; border-top:1px solid var(--ss-paper-line); margin-top:.5rem;
  }
  .ss-topbar-links button,
  .ss-topbar-links a{ border-radius:var(--ss-radius-sm); text-align:left; }
}

/* ---- Menu vertical rétractable (survol pour déplier), avec sous-menus ---- */
/* Remplace .ss-topbar comme navigation principale recommandée depuis la
   révision 3 ; .ss-topbar reste disponible si une appli préfère un menu
   du haut. Rail d'icônes par défaut (64px), déplié au survol (220px). */
.ss-sidebar{
  position:fixed; top:1rem; left:1rem; bottom:1rem;
  width:64px;
  background:#fff;
  border:1px solid var(--ss-paper-line);
  border-radius:var(--ss-radius);
  box-shadow:var(--ss-shadow-sm);
  display:flex; flex-direction:column;
  padding:1rem .5rem;
  gap:.2rem;
  overflow:hidden;
  transition:width .18s ease, background .2s ease, border-color .2s ease;
  z-index:50;
}
.ss-sidebar.expanded{ width:230px; overflow:visible; }
.ss-sidebar-scroll{ display:flex; flex-direction:column; gap:.2rem; flex:1; overflow-y:auto; }
.ss-sidebar-bottom{ display:flex; flex-direction:column; gap:.2rem; border-top:1px solid var(--ss-paper-line); padding-top:.6rem; margin-top:.4rem; }

.ss-sidebar-item{
  display:flex; align-items:center; gap:.8rem;
  padding:.6rem; border-radius:var(--ss-radius-sm);
  color:var(--ss-muted); background:none; border:none; cursor:pointer;
  white-space:nowrap; width:100%; text-align:left;
  font-family:var(--ss-font-body); font-size:.85rem; font-weight:500;
}
.ss-sidebar-item svg{ flex-shrink:0; width:20px; height:20px; }
.ss-sidebar-item .ss-sidebar-label{
  opacity:0; transition:opacity .12s ease; overflow:hidden;
}
.ss-sidebar.expanded .ss-sidebar-label{ opacity:1; }
.ss-sidebar-item:hover{ background:var(--ss-paper); color:var(--ss-ink); }
.ss-sidebar-item.active{ background:#EAF1FC; color:var(--ss-slate); font-weight:700; }

.ss-sidebar-group-toggle{ position:relative; }
.ss-sidebar-group-toggle .chevron{ margin-left:auto; transition:transform .15s ease; opacity:0; }
.ss-sidebar.expanded .ss-sidebar-group-toggle .chevron{ opacity:1; }
.ss-sidebar-group.open .ss-sidebar-group-toggle .chevron{ transform:rotate(90deg); }

.ss-sidebar-submenu{
  display:none; flex-direction:column; gap:.1rem;
  padding-left:2rem; margin-top:.1rem;
}
.ss-sidebar.expanded .ss-sidebar-group.open .ss-sidebar-submenu{ display:flex; }
.ss-sidebar-submenu .ss-sidebar-item{ font-size:.82rem; padding:.5rem .6rem; }

.ss-main-with-sidebar{ margin-left:88px; }
@media (max-width:760px){
  .ss-sidebar{ width:56px; }
  .ss-sidebar.expanded{ width:220px; }
  .ss-main-with-sidebar{ margin-left:76px; }
}

/* ---- Mode sombre (bascule via [data-ss-theme="dark"] sur <html>) ---- */
[data-ss-theme="dark"]{
  --ss-paper:      #0B1220;
  --ss-paper-line: #243352;
  --ss-ink:        #EAF0FB;
  --ss-chalk:      #1B2740;
  --ss-slate:      #4E8BEC;
  --ss-slate-soft: #6FA1EF;
  --ss-muted:      #8FA0BE;
}
[data-ss-theme="dark"] .ss-card,
[data-ss-theme="dark"] .ss-modal-box{ background:#131C2E; }
[data-ss-theme="dark"] .ss-field input,
[data-ss-theme="dark"] .ss-field select{ background:#131C2E; color:var(--ss-ink); border-color:var(--ss-paper-line); }
[data-ss-theme="dark"] .ss-code-row code{ background:#131C2E; border-color:var(--ss-paper-line); }
[data-ss-theme="dark"] .ss-btn-secondary{ background:#131C2E; color:var(--ss-ink); }
[data-ss-theme="dark"] .ss-fsize-btns button{ background:#131C2E; color:var(--ss-ink); border-color:var(--ss-paper-line); }
[data-ss-theme="dark"] .ss-mode-toggle{ background:#101827; }
[data-ss-theme="dark"] .ss-topbar,
[data-ss-theme="dark"] .ss-sidebar{ background:#131C2E; border-color:var(--ss-paper-line); }
[data-ss-theme="dark"] .ss-topbar-icon-btn{ background:#131C2E; border-color:var(--ss-paper-line); color:var(--ss-muted); }
[data-ss-theme="dark"] .ss-topbar-links a.active,
[data-ss-theme="dark"] .ss-topbar-links button.active,
[data-ss-theme="dark"] .ss-sidebar-item.active{ background:rgba(78,139,236,.20); color:var(--ss-slate); }
[data-ss-theme="dark"] .ss-lang-btn{ background:#131C2E; color:var(--ss-ink); }
[data-ss-theme="dark"] .ss-lang-code{ background:#101827; }

/* ---- Taille de texte ---- */
/* La quasi-totalité du kit est en rem (relatif à la racine <html>), donc
   l'échelle s'applique en changeant directement html.style.fontSize en
   JS (voir ssApplyFsizeIndex) — un facteur posé sur un simple wrapper
   en em n'a aucun effet sur du rem, c'est le bug corrigé ici. */

/* ---- Modale générique + panneau Apparence ---- */
.ss-modal-overlay{
  position:fixed; inset:0; background:rgba(15,20,32,.45);
  display:none; align-items:center; justify-content:center;
  z-index:200; padding:1rem;
}
.ss-modal-overlay.open{ display:flex; }
.ss-modal-box{
  background:#fff; border-radius:var(--ss-radius); box-shadow:var(--ss-shadow);
  padding:1.75rem; width:100%; max-width:360px;
}
.ss-modal-box h2{ font-size:1.15rem; font-weight:500; margin-bottom:1.2rem; }

.ss-appearance-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 0; border-bottom:1px solid var(--ss-paper-line);
  font-size:.88rem;
}
.ss-appearance-row:last-of-type{ border-bottom:none; }

.ss-mode-toggle{ display:flex; gap:.25rem; background:var(--ss-paper); border-radius:999px; padding:.2rem; }
.ss-mode-toggle button{
  border:none; background:none; width:34px; height:34px; border-radius:999px;
  cursor:pointer; font-size:.95rem; color:var(--ss-muted); display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.ss-mode-toggle button:hover:not(.active){ background:#fff; color:var(--ss-ink); }
[data-ss-theme="dark"] .ss-mode-toggle button:hover:not(.active){ background:#131C2E; color:var(--ss-ink); }
.ss-mode-toggle button.active{ background:var(--ss-gradient-primary); color:#fff; }

.ss-swatches{ display:flex; gap:.5rem; flex-wrap:wrap; max-width:190px; justify-content:flex-end; }
.ss-swatch{ width:26px; height:26px; border-radius:999px; border:2px solid transparent; cursor:pointer; padding:0; transition:transform .1s, border-color .15s; }
.ss-swatch:hover{ transform:scale(1.12); }
.ss-swatch.active{ border-color:var(--ss-ink); }

.ss-fsize-btns{ display:flex; align-items:center; gap:.6rem; }
.ss-fsize-btns button{
  width:30px; height:30px; border-radius:var(--ss-radius-sm); border:1px solid var(--ss-paper-line);
  background:#fff; cursor:pointer; font-size:.78rem; color:var(--ss-ink); transition:background .15s, border-color .15s;
}
.ss-fsize-btns button:hover{ background:var(--ss-paper); border-color:var(--ss-slate); }
[data-ss-theme="dark"] .ss-fsize-btns button:hover{ background:#101827; }
.ss-fsize-label{ font-size:.85rem; min-width:1.4rem; text-align:center; }

.ss-modal-actions{ margin-top:1.2rem; display:flex; justify-content:flex-end; }

.ss-intensity-row input[type="range"]{
  width:120px; accent-color:var(--ss-ochre); cursor:pointer;
}

/* ---- Sélecteur de langue (data-ss-lang, géré par ss-i18n.js) ---- */
/* Même famille visuelle que .ss-mode-toggle / .ss-swatches, pensée pour
   vivre dans une modale générique (.ss-modal-box), comme le panneau
   Apparence — même bouton .ss-topbar-icon-btn pour l'ouvrir. */
.ss-lang-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
}
.ss-lang-btn{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem;
  border:1px solid var(--ss-paper-line); border-radius:var(--ss-radius-sm);
  background:#fff; cursor:pointer;
  font-family:inherit; font-size:.85rem; color:var(--ss-ink);
  text-align:start;
  transition:border-color .15s ease, background .15s ease;
}
.ss-lang-btn:hover{ border-color:var(--ss-slate); }
.ss-lang-btn.active{ border-color:var(--ss-slate); background:#EAF1FC; }
.ss-lang-code{
  width:30px; height:22px; border-radius:6px; flex-shrink:0;
  background:var(--ss-paper); color:var(--ss-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700; letter-spacing:.02em;
}
.ss-lang-btn.active .ss-lang-code{ background:var(--ss-slate); color:#fff; }
.ss-lang-btn .ss-lang-check{ margin-inline-start:auto; opacity:0; flex-shrink:0; }
.ss-lang-btn.active .ss-lang-check{ opacity:1; color:var(--ss-slate); }



/* ---- Support RTL (bascule automatique via dir="rtl" sur <html>, posé
   par ss-i18n.js) : propriétés physiques -> logiques là où le kit fixait
   un côté en dur. Le reste (flex, texte, formulaires) suit dir="" tout
   seul, sans rien à faire ici. ---- */
.ss-sidebar{ inset-inline-start:1rem; inset-inline-end:auto; }
.ss-main-with-sidebar{ margin-inline-start:88px; margin-inline-end:0; }
@media (max-width:760px){
  .ss-main-with-sidebar{ margin-inline-start:76px; margin-inline-end:0; }
}
.ss-sidebar-submenu{ padding-inline-start:2rem; padding-inline-end:0; }
.ss-sidebar-group-toggle .chevron{ margin-inline-start:auto; }
[dir="rtl"] .ss-sidebar-group-toggle .chevron{ transform:scaleX(-1); }
[dir="rtl"] .ss-sidebar.expanded .ss-sidebar-group.open .ss-sidebar-group-toggle .chevron{ transform:scaleX(-1) rotate(90deg); }
@media (max-width:760px){
  .ss-topbar-links{ text-align:start; }
}

/* =====================================================================
   ---- "Shell" applicatif façon Akkhor (révision 3) ----
   Menu latéral repliable AU CLIC (pas au survol) + bandeau du haut
   pleine largeur, calqués sur la maquette akkhor-admin.html fournie.
   Composants distincts de .ss-sidebar/.ss-topbar (V1, réservés aux
   écrans de connexion à carte unique) : les apps avec un vrai tableau
   de bord utilisent .ss-shell-*.
   ===================================================================== */
.ss-shell{ height:100vh; display:flex; overflow:hidden; background:var(--ss-paper); }

/* ---- Colonne latérale ---- */
.ss-shell-sidebar{
  flex-shrink:0; width:266px;
  display:flex; flex-direction:column;
  background:#fff; border-inline-end:1px solid var(--ss-paper-line);
  transition:width .2s ease, background .2s ease, border-color .2s ease;
}
.ss-shell-sidebar.ss-collapsed{ width:80px; }
.ss-shell-sidebar.ss-collapsed:hover{ width:266px; }

.ss-shell-brand{
  display:flex; align-items:center; gap:.75rem;
  height:72px; padding-inline:1.25rem; flex-shrink:0;
  border-bottom:1px solid var(--ss-paper-line);
}
.ss-shell-brand-icon{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  background:var(--ss-gradient-primary);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(42,111,219,.28);
}
.ss-shell-brand-icon svg{ width:22px; height:22px; color:#fff; }
.ss-shell-brand-name{ font-family:var(--ss-font-display); font-size:1.05rem; font-weight:800; letter-spacing:-.01em; color:var(--ss-ink); white-space:nowrap; overflow:hidden; flex:1; }
.ss-shell-brand-name em{ color:var(--ss-ochre); font-style:normal; }
.ss-shell-sidebar.ss-collapsed .ss-shell-brand-name{ display:none; }
.ss-shell-sidebar.ss-collapsed:hover .ss-shell-brand-name{ display:block; }

.ss-shell-pin-btn{
  width:24px; height:24px; border-radius:5px; border:1px solid var(--ss-paper-line);
  background:var(--ss-paper); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ss-muted); flex-shrink:0; opacity:0; pointer-events:none;
  transition:opacity .15s, background .15s, color .15s;
}
.ss-shell-pin-btn svg{ width:13px; height:13px; }
.ss-shell-sidebar.ss-collapsed:hover .ss-shell-pin-btn{ opacity:1; pointer-events:all; }
.ss-shell-sidebar:not(.ss-collapsed) .ss-shell-pin-btn{ opacity:1; pointer-events:all; color:var(--ss-ochre); }
.ss-shell-pin-btn:hover{ background:var(--ss-ochre-soft); color:var(--ss-ochre-deep); }

.ss-shell-navscroll{ flex:1; overflow-y:auto; padding:.5rem .75rem 1rem; }
.ss-shell-group-label{
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ss-muted); padding:.9rem .6rem .4rem; min-height:.9rem;
}
.ss-shell-sidebar.ss-collapsed .ss-shell-group-label{ opacity:0; }
.ss-shell-sidebar.ss-collapsed:hover .ss-shell-group-label{ opacity:1; }

.ss-shell-nav{ display:flex; flex-direction:column; gap:.15rem; }
.ss-shell-nav a, .ss-shell-nav button{
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .65rem; border-radius:var(--ss-radius-sm);
  font-family:var(--ss-font-body); font-size:.85rem; font-weight:500;
  color:var(--ss-muted); background:none; border:none; cursor:pointer; text-decoration:none;
  text-align:start; width:100%; white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
.ss-shell-nav a svg, .ss-shell-nav button svg{ width:19px; height:19px; flex-shrink:0; }
.ss-shell-sidebar.ss-collapsed .ss-shell-nav a, .ss-shell-sidebar.ss-collapsed .ss-shell-nav button{ justify-content:center; }
.ss-shell-sidebar.ss-collapsed:hover .ss-shell-nav a, .ss-shell-sidebar.ss-collapsed:hover .ss-shell-nav button{ justify-content:flex-start; }
.ss-shell-nav-label{ overflow:hidden; }
.ss-shell-sidebar.ss-collapsed .ss-shell-nav-label{ display:none; }
.ss-shell-sidebar.ss-collapsed:hover .ss-shell-nav-label{ display:inline; }
.ss-shell-nav a:hover, .ss-shell-nav button:hover{ background:var(--ss-paper); color:var(--ss-ink); }
.ss-shell-nav a.active, .ss-shell-nav button.active{ background:#EAF1FC; color:var(--ss-slate); font-weight:700; }

.ss-shell-bottom{ border-top:1px solid var(--ss-paper-line); padding:.75rem; flex-shrink:0; }

/* ---- Colonne principale + bandeau du haut ---- */
.ss-shell-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ss-shell-topbar{
  height:72px; flex-shrink:0; background:#fff; border-bottom:1px solid var(--ss-paper-line);
  display:flex; align-items:center; gap:.85rem; padding-inline:1.35rem;
  transition:background .2s ease, border-color .2s ease;
}
.ss-shell-topbar .ss-spacer{ flex:1; }
.ss-shell-collapse-btn{
  width:40px; height:40px; border-radius:var(--ss-radius-sm); border:1px solid var(--ss-paper-line);
  background:#fff; color:var(--ss-muted); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:background .15s ease, color .15s ease;
}
.ss-shell-collapse-btn:hover{ background:var(--ss-paper); color:var(--ss-ink); }
.ss-shell-topbar-title{ font-family:var(--ss-font-display); font-weight:800; font-size:1.02rem; color:var(--ss-ink); white-space:nowrap; }
.ss-shell-user{ font-size:.82rem; color:var(--ss-muted); white-space:nowrap; }
.ss-shell-user strong{ color:var(--ss-ink); font-weight:700; }

.ss-shell-content{ flex:1; overflow-y:auto; padding:1.75rem 2rem 2.5rem; }

[data-ss-theme="dark"] .ss-shell{ background:var(--ss-paper); }
[data-ss-theme="dark"] .ss-shell-sidebar,
[data-ss-theme="dark"] .ss-shell-topbar,
[data-ss-theme="dark"] .ss-shell-collapse-btn{ background:#131C2E; border-color:var(--ss-paper-line); }
[data-ss-theme="dark"] .ss-shell-nav a.active,
[data-ss-theme="dark"] .ss-shell-nav button.active{ background:rgba(78,139,236,.20); color:var(--ss-slate); }

@media (max-width:760px){
  .ss-shell-sidebar{ position:fixed; top:0; bottom:0; inset-inline-start:0; z-index:80; width:80px; }
  .ss-shell-sidebar.ss-collapsed{ width:0; border:none; overflow:hidden; }
  .ss-shell-main{ margin-inline-start:80px; }
  .ss-shell-content{ padding:1.1rem 1rem 2rem; }
}

/* RTL */
.ss-shell-sidebar{ border-inline-end:1px solid var(--ss-paper-line); border-inline-start:none; }

/* =====================================================================
   ---- Bouton + menu Profil (topbar) ----
   Absent des révisions précédentes de ce squelette -- ajouté après
   avoir construit une vraie appli dessus (voir docs/LESSONS_LEARNED.md
   #7). Réutilise les modales Langue/Apparence déjà câblées
   (data-ss-modal-open) plutôt que de dupliquer leur logique.
   ===================================================================== */
.ss-avatar-btn{
  width:34px; height:34px; border-radius:50%; background:var(--ss-ochre-soft); color:var(--ss-ochre-deep);
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700;
  cursor:pointer; border:2px solid transparent; flex-shrink:0; font-family:var(--ss-font-display);
  transition:border-color .15s;
}
.ss-avatar-btn:hover, .ss-avatar-btn.open{ border-color:var(--ss-slate); }
[data-ss-theme="dark"] .ss-avatar-btn{ background:var(--ss-slate); color:#fff; }

.ss-avatar-menu{
  position:fixed; top:64px; inset-inline-end:1.35rem; width:230px;
  background:#fff; border:1px solid var(--ss-paper-line); border-radius:var(--ss-radius);
  box-shadow:var(--ss-shadow); z-index:210; display:none;
}
.ss-avatar-menu.open{ display:block; }
[data-ss-theme="dark"] .ss-avatar-menu{ background:#131C2E; }
.ss-ava-head{ padding:.85rem 1rem; border-bottom:1px solid var(--ss-paper-line); display:flex; align-items:center; gap:.65rem; }
.ss-ava-av{
  width:36px; height:36px; border-radius:50%; background:var(--ss-ochre-soft); color:var(--ss-ochre-deep);
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0;
  font-family:var(--ss-font-display);
}
[data-ss-theme="dark"] .ss-ava-av{ background:var(--ss-slate); color:#fff; }
.ss-ava-name{ font-size:.85rem; font-weight:700; color:var(--ss-ink); }
.ss-ava-role{ font-size:.72rem; color:var(--ss-muted); }
.ss-ava-divider{ height:1px; background:var(--ss-paper-line); margin:.25rem 0; }
.ss-ava-item{
  display:flex; align-items:center; gap:.65rem; padding:.6rem 1rem; font-size:.85rem; color:var(--ss-ink);
  cursor:pointer; text-decoration:none; background:none; border:none; width:100%; text-align:start;
  font-family:inherit; transition:background .12s;
}
.ss-ava-item:hover{ background:var(--ss-paper); }
.ss-ava-item svg{ width:16px; height:16px; color:var(--ss-muted); flex-shrink:0; }
.ss-ava-item.danger{ color:var(--ss-error); }
.ss-ava-item.danger svg{ color:var(--ss-error); }

/* =====================================================================
   ---- Notifications "toast" (bas de l'écran, transitoires) ----
   Complètent (ne remplacent pas) les .ss-alert dans le contenu : pour
   les actions hors du flux de la page, un simple bandeau inline n'a
   pas d'endroit naturel où s'afficher. Usage : ssToast('success'|
   'error', message) -- voir assets/js/app.js.
   ===================================================================== */
.ss-toast{
  position:fixed; bottom:1.25rem; inset-inline-end:1.25rem; z-index:300;
  background:var(--ss-ink); color:#fff; padding:.75rem 1.1rem; border-radius:var(--ss-radius-sm);
  font-size:.85rem; box-shadow:var(--ss-shadow); display:flex; align-items:center; gap:.6rem;
  opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s, transform .2s;
}
.ss-toast.show{ opacity:1; transform:translateY(0); }
.ss-toast.success{ background:var(--ss-success); }
.ss-toast.error{ background:var(--ss-error); }

/* =====================================================================
   ---- Petits boutons d'action de ligne (tableaux) ----
   4 nuances sémantiques distinctes (primaire/ambre/neutre/danger)
   plutôt que de tout ramener à 2 couleurs -- voir docs/COMPONENTS.md.
   ===================================================================== */
.ss-btn-xs{
  display:inline-flex; align-items:center; gap:.25rem; padding:.28rem .55rem; border-radius:5px;
  font-size:.72rem; font-weight:600; cursor:pointer; border:1px solid var(--ss-paper-line);
  background:#fff; color:var(--ss-ink); font-family:inherit; transition:all .15s; white-space:nowrap;
  text-decoration:none;
}
[data-ss-theme="dark"] .ss-btn-xs{ background:#131C2E; }
.ss-btn-xs:hover{ background:var(--ss-paper); }
[data-ss-theme="dark"] .ss-btn-xs:hover{ background:#1B2740; }
.ss-btn-xs.primary{ background:var(--ss-slate); color:#fff; border-color:var(--ss-slate); }
.ss-btn-xs.primary:hover{ filter:brightness(1.1); }
.ss-btn-xs.amber{ background:var(--ss-ochre); color:#fff; border-color:var(--ss-ochre); }
.ss-btn-xs.amber:hover{ filter:brightness(1.1); }
.ss-btn-xs.danger{ border-color:var(--ss-error); color:var(--ss-error); }
.ss-btn-xs.danger:hover{ background:var(--ss-error); color:#fff; }

/* =====================================================================
   ---- Encadrés d'info colorés (au lieu de simples bordures grises) ----
   ===================================================================== */
.ss-tip-box{ background:#E4F6EE; border:1px solid var(--ss-success); border-radius:var(--ss-radius-sm); padding:.7rem .9rem; font-size:.8rem; color:var(--ss-ink); line-height:1.6; margin:.5rem 0; }
.ss-warn-box{ background:var(--ss-ochre-soft); border:1px solid var(--ss-ochre); border-radius:var(--ss-radius-sm); padding:.7rem .9rem; font-size:.8rem; color:var(--ss-ink); line-height:1.6; margin:.5rem 0; }
[data-ss-theme="dark"] .ss-tip-box{ background:rgba(31,157,107,.15); }
[data-ss-theme="dark"] .ss-warn-box{ background:rgba(201,138,0,.15); }

/* =====================================================================
   ---- Cartes "système" avec icône + couleur (voir pages/systeme.php) ----
   ===================================================================== */
.ss-system-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.9rem; margin:1rem 0 1.4rem; }
.ss-system-item{
  background:#fff; border:1px solid var(--ss-paper-line); border-radius:var(--ss-radius-sm);
  padding:.9rem 1rem; box-shadow:var(--ss-shadow-sm); border-top:3px solid var(--sys-c, var(--ss-paper-line));
  display:flex; gap:.7rem; align-items:flex-start;
}
[data-ss-theme="dark"] .ss-system-item{ background:#131C2E; }
.ss-system-item .icon{
  width:34px; height:34px; border-radius:var(--ss-radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--sys-c, var(--ss-muted)) 14%, white); color:var(--sys-c, var(--ss-muted));
}
.ss-system-item .icon svg{ width:18px; height:18px; }
.ss-system-item .label{ font-size:.72rem; color:var(--ss-muted); margin-bottom:.25rem; }
.ss-system-item .value{ font-weight:700; font-size:.98rem; color:var(--sys-c, var(--ss-ink)); }

/* =====================================================================
   ---- Journal des erreurs (voir pages/erreurs.php) ----
   ===================================================================== */
.ss-badge.ss-sev-error{ background:#FCEBEB; color:#C0392B; }
.ss-badge.ss-sev-critical{ background:#FCEBEB; color:#7B1616; font-weight:700; }
[data-ss-theme="dark"] .ss-badge.ss-sev-error{ background:rgba(192,57,43,.18); }
[data-ss-theme="dark"] .ss-badge.ss-sev-critical{ background:rgba(123,22,22,.28); }

.ss-sev-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; margin-bottom:1.1rem; }
.ss-sev-card{
  display:block; text-decoration:none; background:#fff; border:1px solid var(--ss-paper-line);
  border-radius:var(--ss-radius-sm); padding:.85rem .9rem; box-shadow:var(--ss-shadow-sm);
  border-top:3px solid currentColor; transition:box-shadow .15s, transform .1s;
}
.ss-sev-card:hover{ transform:translateY(-1px); box-shadow:var(--ss-shadow); }
[data-ss-theme="dark"] .ss-sev-card{ background:#131C2E; }
.ss-sev-card.on{ box-shadow:0 0 0 2px currentColor; }
.ss-sev-card .label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:inherit; margin-bottom:.25rem; font-weight:700; }
.ss-sev-card .value{ font-family:var(--ss-font-display); font-size:1.4rem; font-weight:700; color:inherit; }
.ss-sev-card.ss-badge-revoked{ color:var(--ss-muted); }
.ss-sev-card.ss-badge-active{ color:var(--ss-success); }
.ss-sev-card.ss-badge-pending{ color:var(--ss-ochre-deep); }
.ss-sev-card.ss-sev-error{ color:#C0392B; }
.ss-sev-card.ss-sev-critical{ color:#7B1616; }
@media (max-width:760px){ .ss-sev-grid{ grid-template-columns:repeat(2,1fr); } }

.ss-errors-filters{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.8rem; }
.ss-errors-filters select, .ss-errors-filters input[type=text],
.ss-errors-actions select{
  border:1px solid var(--ss-paper-line); border-radius:var(--ss-radius-sm); padding:.5rem .65rem;
  font-size:.85rem; background:#fff; color:var(--ss-ink); font-family:inherit; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.ss-errors-filters input[type=text]{ cursor:text; }
.ss-errors-filters select:hover, .ss-errors-filters input[type=text]:hover,
.ss-errors-actions select:hover{ border-color:var(--ss-slate); }
.ss-errors-filters select:focus, .ss-errors-filters input[type=text]:focus,
.ss-errors-actions select:focus{ outline:none; border-color:var(--ss-slate); box-shadow:0 0 0 3px rgba(42,111,219,.12); }
[data-ss-theme="dark"] .ss-errors-filters select, [data-ss-theme="dark"] .ss-errors-filters input[type=text],
[data-ss-theme="dark"] .ss-errors-actions select{ background:#131C2E; }
.ss-errors-filters input[name="q"]{
  padding-inline-start:2.1rem; background-repeat:no-repeat; background-position:.65rem center; background-size:15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8AA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
[dir="rtl"] .ss-errors-filters input[name="q"]{ padding-inline-start:.6rem; padding-inline-end:2.1rem; background-position:right .65rem center; }

.ss-errors-actions{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.9rem; }
.ss-errors-msg-cell{ max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-errors-detail{ display:none; }
.ss-errors-detail.show{ display:table-row; }
.ss-errors-detail td{ background:var(--ss-chalk); padding:.9rem 1rem !important; border-bottom:1px solid var(--ss-paper-line); }
.ss-errors-meta{ font-size:.72rem; color:var(--ss-muted); font-family:ui-monospace,monospace; margin:0; }
.ss-errors-trace{
  background:#1A2433; color:#DEE8F2; padding:.8rem; border-radius:8px; font-size:.72rem;
  font-family:ui-monospace,monospace; white-space:pre-wrap; overflow:auto; max-height:220px; margin-top:.4rem;
}
.ss-errors-pagination{ display:flex; gap:.3rem; justify-content:flex-end; margin-top:.9rem; }
.ss-errors-pagination a{
  padding:.3rem .65rem; border:1px solid var(--ss-paper-line); border-radius:var(--ss-radius-sm);
  font-size:.78rem; color:var(--ss-ink); background:#fff; text-decoration:none; transition:all .15s;
}
[data-ss-theme="dark"] .ss-errors-pagination a{ background:#131C2E; }
.ss-errors-pagination a.on, .ss-errors-pagination a:hover{ background:var(--ss-slate); color:#fff; border-color:var(--ss-slate); }

/* Tableaux -- zébrures, boutons icône avec info-bulle, survol de ligne */
.ss-table{ width:100%; border-collapse:collapse; margin-bottom:.9rem; font-size:.85rem; }
.ss-table th, .ss-table td{ padding:.5rem .7rem; text-align:start; border-bottom:1px solid var(--ss-paper-line); }
.ss-table th{ font-weight:600; color:var(--ss-muted); }
.ss-table tbody tr:nth-child(even){ background:var(--ss-paper); }
.ss-table tbody tr{ transition:background .12s; }
.ss-table tbody tr:hover{ background:var(--ss-chalk) !important; }
.ss-table td.ss-td-actions{ text-align:end; white-space:nowrap; }
.ss-table th.ss-th-actions{ text-align:end; }
.ss-table td.ss-td-center, .ss-table th.ss-th-center{ text-align:center; }
.ss-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; margin-inline-start:.25rem;
  border:1px solid var(--ss-paper-line); border-radius:var(--ss-radius-sm);
  background:#fff; color:var(--ss-ink); cursor:pointer; text-decoration:none;
  transition:background .15s, border-color .15s;
}
[data-ss-theme="dark"] .ss-icon-btn{ background:#131C2E; }
.ss-icon-btn:hover{ background:var(--ss-paper); border-color:var(--ss-slate); color:var(--ss-slate); }
.ss-icon-btn svg{ width:15px; height:15px; }
.ss-icon-btn.ss-icon-danger{ color:#DC2626; }
.ss-icon-btn.ss-icon-danger:hover{ background:#FEE2E2; border-color:#DC2626; }
.ss-icon-btn.ss-icon-success{ color:#16A34A; }
.ss-icon-btn.ss-icon-success:hover{ background:#DCFCE7; border-color:#16A34A; }

/* Formulaires multilingues -- grille FR/EN/DE/ES/AR sous un même champ */
.ss-lang-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.3rem; }
.ss-lang-item{ flex:1; min-width:110px; }
.ss-lang-tag{ font-size:.7rem; color:var(--ss-muted); display:block; margin-bottom:.2rem; }

/* Champs courts (select/nombre/couleur) : ne pas les étirer sur toute
   la largeur de leur conteneur flex -- voir docs/LESSONS_LEARNED.md #9. */
.ss-field-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.ss-field-row .ss-field{ flex:1 1 220px; }
.ss-field select{ max-width:15rem; }