/* Stockage : l'état visible dans l'interface (CDC_STOCKAGE, lot S4, assets/js/04d-stockage.js).
   La pastille porte sa couleur par le POINT et le filet, jamais par le texte : --ok (#1a7f37) et --warn
   (#9a6700) sur blanc sont à peine au-dessus de 4,5:1, et un fond teinté les ferait passer dessous (alternative
   écartée) ; le texte reste en --txt, lisible dans les trois états du thème sans bloc sombre à garder (N20).
   Couleurs par jetons seulement. */
@layer modules{
  .stk-pas:not([hidden]){display:inline-flex;align-items:center;gap:var(--sp-6);flex:0 1 auto;min-width:0;max-width:100%;
    padding:1px var(--sp-8);border-radius:var(--radius-pill);border:1px solid color-mix(in srgb,var(--stk-k) 45%,var(--line));
    background:color-mix(in srgb,var(--stk-k) 9%,var(--card));color:var(--txt);font-size:var(--fs-2xs);font-weight:var(--fw-strong);
    line-height:1.5;white-space:nowrap}
  /* La teinte par défaut sur la classe seule : posée sur `:not([hidden])` (0,2,0), elle battait .stk-ok (0,1,0)
     et toutes les pastilles sortaient grises (vu sur la première capture du banc, 2026-10-11). */
  .stk-pas{--stk-k:var(--mut2)}
  .stk-pas .stk-mot{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .stk-point{flex:none;width:7px;height:7px;border-radius:50%;background:var(--stk-k)}
  .stk-ok{--stk-k:var(--ok)}
  .stk-actif{--stk-k:var(--accent)}
  .stk-actif .stk-point{animation:stk-pouls 1.4s ease-in-out infinite}
  .stk-attention{--stk-k:var(--warn)}
  .stk-erreur{--stk-k:var(--err)}
  .stk-neutre{--stk-k:var(--mut2)}
  @keyframes stk-pouls{50%{opacity:.35}}
  @media (prefers-reduced-motion:reduce){.stk-actif .stk-point{animation:none}}

  /* La rangée d'accueil : la pastille cède avant le nom (le nom se tronque déjà, la pastille aussi). */
  .prow-txt .stk-pas{flex:0 1 auto}

  /* La fiche : sous la cible et les compléments, une ligne d'état puis l'interrupteur. */
  /* 2026-10-15 : la fiche est une carte (état en tête, puis une ligne par réglage, séparées d'un filet), sous l'identité. */
  /* Le dessin (proprio, 2026-10-15 : « revoir l'esthétique ») : une surface légère sans cadre lourd, l'état en tête, puis des
     lignes de réglage au même gabarit que les Paramètres (libellé sobre, description discrète, commande à droite), un filet
     fin entre elles, les boutons au format mini. */
  .stk-fiche:not([hidden]){display:flex;flex-direction:column;gap:0;margin-top:0;min-width:0;max-width:none;padding:var(--sp-6) var(--sp-16);border:0;border-radius:var(--radius);background:var(--card)}   /* fond blanc, sans bordure, toute la largeur (proprio, 2026-10-15) */
  .stk-fiche-tete{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;min-width:0;padding:var(--sp-8) 0;border-bottom:1px solid var(--line2)}
  .stk-dit{font-size:var(--fs-sm);color:var(--txt);min-width:0;overflow-wrap:anywhere;line-height:1.45}
  .stk-fiche .stk-garder{padding:var(--sp-10) 0;border:0;border-bottom:1px solid var(--line2);gap:var(--sp-16);max-width:none;min-height:0}
  .stk-fiche .stk-garder:last-child{border-bottom:0}
  .stk-fiche-tete .stk-pas{border:0;box-shadow:none} .stk-fiche-tete .stk-point{display:none}   /* le badge d'état en tête de fiche : ni cercle ni bordure (proprio, 2026-10-15) */
  .stk-fiche .set-k{font-size:var(--fs-sm);font-weight:var(--fw-medium);gap:var(--sp-2);line-height:1.35} .stk-fiche .set-d{font-size:var(--fs-xs);color:var(--mut);font-weight:var(--fw-regular)}
  .stk-fiche .stk-main > .stk-dit{color:var(--mut)} .stk-fiche .stk-main{padding:var(--sp-10) 0}
  .stk-fiche .stk-main-actions button, .stk-fiche .stk-recup button{padding:var(--sp-6) var(--sp-12);font-size:var(--fs-sm);font-weight:var(--fw-medium);border-radius:var(--radius);white-space:nowrap}

  /* Paramètres › Application › Stockage. */
  .set-page #stk-sec .stk-tete{border-bottom:0;padding-bottom:0}
  .set-page #stk-sec .stk-sous{margin-top:var(--sp-14)}
  .set-page #stk-sec .stk-val{flex:none;font-variant-numeric:tabular-nums;color:var(--txt)}
  .set-page #stk-sec .stk-svc .stk-pas{flex:none}
  .set-page #stk-sec .set-select{max-width:100%}
  .set-page #stk-sec .stk-alerte{margin:var(--sp-6) 0;padding:var(--sp-8) var(--sp-12);border-radius:var(--radius-sm);
    border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--card);color:var(--txt);font-size:var(--fs-sm)}
  .set-page #stk-sec .stk-msg{margin:var(--sp-4) 0 0;font-size:var(--fs-sm);color:var(--txt)}
  .set-page #stk-sec .stk-msg.dc-msg-ko{color:var(--err)}
  /* Le stockage global (2026-10-25) : le total en tête, puis une carte par support, les serveurs Hdplio et les applications de
     bureau (une ligne par ordinateur, « Cet appareil » marqué). */
  .stk-global{display:flex;flex-direction:column;gap:var(--sp-10);margin:var(--sp-10) 0 var(--sp-6)}
  .stk-total{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-12)}
  .stk-total-k{font-size:var(--fs-sm);color:var(--mut)}
  .stk-total-v{font-size:var(--fs-xl);font-weight:var(--fw-strong);color:var(--txt);font-variant-numeric:tabular-nums}
  .stk-bloc{padding:var(--sp-12) var(--sp-14);border:.5px solid var(--line);border-radius:var(--radius);background:var(--card)}
  .stk-bloc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-12)}
  .stk-bloc-t{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--txt)}
  .stk-bloc-d{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--mut2)}
  .stk-apps{display:flex;flex-direction:column;margin-top:var(--sp-8)}
  .stk-app{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) 0}
  .stk-app+.stk-app{border-top:.5px solid var(--line2)}
  .stk-app-ic{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--card2);color:var(--mut)}
  .stk-app-ic svg{width:16px;height:16px}
  .stk-app.ici .stk-app-ic{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .stk-app-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
  .stk-app-n{font-size:var(--fs-sm);color:var(--txt);display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap}
  .stk-app-ici{font-size:var(--fs-2xs);font-weight:var(--fw-strong);color:var(--accent);padding:var(--sp-1) var(--sp-6);border-radius:var(--radius-pill);
    background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .stk-app-d{font-size:var(--fs-xs);color:var(--mut2)}
  .stk-app .stk-val{flex:none;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--txt)}
  .stk-jauge{height:6px;border-radius:var(--radius-pill);background:var(--line2);overflow:hidden;margin:var(--sp-4) 0 var(--sp-8)}
  .stk-jauge i{display:block;height:100%;background:var(--accent)}
  @media (max-width:480px){
    /* À 375 px la pastille tronquée disait « Sur cet ordinateur · … » : le mot entier passe sous le nom. */
    .prow-txt:has(.stk-pas:not([hidden])){flex-wrap:wrap;row-gap:var(--sp-4)}
    .prow-txt .stk-pas{flex-basis:auto}
    .set-page #stk-sec .set-row{flex-wrap:wrap}
    .set-page #stk-sec .stk-debit .set-select{width:100%}
  }
}

/* S5, S6 et la retouche « Se connecter » (assets/js/04e-stockage-gestes.js). Mêmes jetons, mêmes règles de
   contraste : le texte reste en --txt ou --err, la couleur passe par le filet et la jauge (N20). */
@layer modules{
  .stk-recup{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;min-width:0}
  .stk-recup .stk-jauge{flex:1 1 160px;min-width:120px;margin:0}
  .stk-recup .set-d{color:var(--mut);font-size:var(--fs-xs);min-width:0;overflow-wrap:anywhere}
  .stk-recup-ko{flex-basis:100%;margin:0;font-size:var(--fs-sm);color:var(--err);overflow-wrap:anywhere}
  .set-page #stk-sec .stk-seule .stk-recup{flex:0 1 auto;justify-content:flex-end}
  .set-page #stk-sec .stk-seule .stk-recup .set-d{display:none}
  .set-page #stk-sec .stk-admises .stk-val{max-width:55%;text-align:right;overflow-wrap:anywhere;white-space:normal}
  .stk-cnx{display:flex;flex-direction:column;gap:var(--sp-10);max-width:420px;margin:var(--sp-8) 0 var(--sp-12)}
  .stk-cnx[hidden]{display:none}
  .stk-champ{display:flex;flex-direction:column;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--txt)}
  .stk-champ[hidden]{display:none}
  .stk-champ input{width:100%;box-sizing:border-box;min-height:36px;padding:var(--sp-6) var(--sp-10);border:1px solid var(--line);
    border-radius:var(--radius-sm);background:var(--card);color:var(--txt);font:inherit}
  .stk-champ input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .stk-cnx-actions{display:flex;gap:var(--sp-8);flex-wrap:wrap}
  @media (max-width:480px){
    .set-page #stk-sec .stk-admises .stk-val{max-width:100%;text-align:left}
    .stk-recup button{width:100%}
  }
}

/* S7 bis : la main et « Mettre à jour » sur la fiche (assets/js/04e-stockage-gestes.js). Même règle : le texte reste en
   --txt (ou --err pour un refus), la couleur passe par le filet ; un bouton grisé reste lisible (on lit pourquoi il
   attend juste en dessous, en --mut comme les autres aides). */
@layer modules{
  .stk-main{display:flex;align-items:center;gap:var(--sp-6) var(--sp-12);flex-wrap:wrap;min-width:0;max-width:none;
    padding:var(--sp-8) 0 var(--sp-4);border-top:0}
  .stk-main + .stk-main, .stk-maj{border-top:1px solid var(--line2);padding-top:var(--sp-8)}
  .stk-main > .stk-dit{flex:1 1 220px}
  .stk-main-actions{display:flex;gap:var(--sp-8);flex:none}
  .stk-main .set-d{flex-basis:100%;margin:0;color:var(--mut);font-size:var(--fs-xs);min-width:0;overflow-wrap:anywhere}
  .stk-main button[disabled]{cursor:not-allowed}
  .stk-maj{display:flex;flex-direction:column;gap:var(--sp-6);min-width:0;max-width:none}
  .stk-maj > .stk-dit{margin:0}
  .stk-maj-cote{padding:var(--sp-6) var(--sp-10);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--radius-sm);background:var(--card)}
  @media (max-width:480px){
    .stk-main-actions{flex:1 1 100%}
    .stk-main-actions button{width:100%}
  }
}

/* ── Paramètres › Créations du compte (CDC_COMPTE_BUREAU B4, 2026-10-20, 04g-compte-creations.js) ──
   La pastille du stockage (.stk-pas) dit l'état de chaque création pour CET ordinateur ; le geste à sa droite. */
@layer modules{
  .cc-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-10);margin-top:var(--sp-14)}
  .cc-tete .set-label{margin:0}
  .cc-droite{display:flex;align-items:center;gap:var(--sp-10);flex-shrink:0}
  .cc-sans{margin-top:var(--sp-14)}
  .cc-msg{margin-top:var(--sp-12)}
  .cc-msg-ko{color:var(--err)}
  @media (max-width:640px){ .cc-ligne{flex-wrap:wrap} .cc-droite{width:100%;justify-content:space-between} }
}