/* COPIE de la visu validée (etats.css, sha256 133fce9188e0da66) — importer-maquette.mjs ; ne pas éditer. */
/* ÉTATS DE L'INTERFACE — vide, chargement, erreur (boutique et catalogue).
   Uniquement des couleurs de prisma-palette.css ; le rouge d'erreur est une couleur « ajoutée »,
   retenue par Hamza le 27/10 (D11), et n'est jamais seul : pictogramme + phrase. */
.e-page{padding-top:24px;padding-bottom:64px}
.e-section{margin-bottom:40px}
.e-titre{font-size:22px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--p-bord);padding-bottom:10px;margin-bottom:18px}
.e-titre small{font-size:14px;font-weight:500;color:var(--p-texte-2)}
.e-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.e-carte{border:1px solid var(--p-bord-2);border-radius:6px;background:var(--p-blanc);display:flex;flex-direction:column}
.e-carte>header{padding:16px 18px 12px;border-bottom:1px solid var(--p-bord);background:var(--p-grisbleu-pale);border-radius:6px 6px 0 0}
.e-carte h2{font-size:16px}
.e-quand{font-size:13px;color:var(--p-texte-2);margin-top:4px}
.e-demo{padding:18px;display:flex;flex-direction:column;gap:14px;flex:1;justify-content:center}
.e-pile{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.e-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.e-note{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--p-texte-2)}
.t-vide p span{display:block;font-size:14px;color:var(--p-texte-2);margin-top:6px}
.rs-volet.e-statique{position:static;border-radius:6px;border-top:2px solid var(--p-grisbleu-fonce);box-shadow:none;padding:0}

/* Bouton occupé : verrouillé, avec un rouet (aucune autre couleur que la charte). */
.e-occupe{opacity:1;cursor:progress}
.e-occupe[disabled]{background:var(--p-grisbleu-fonce);border-color:var(--p-grisbleu-fonce);color:var(--p-blanc)}
.e-rouet{width:18px;height:18px;border-radius:50%;border:2px solid var(--p-grisbleu-voile);border-top-color:var(--p-blanc);animation:e-tourne .8s linear infinite;flex:none}
.rs-vide .e-rouet{border-color:var(--p-grisbleu-voile);border-top-color:var(--p-grisbleu-fonce);margin-top:2px}
@keyframes e-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.e-rouet{animation-duration:3s}}

/* Squelettes de chargement. */
.e-squelettes{display:flex;flex-direction:column;gap:10px}
.e-sq-ligne{display:grid;grid-template-columns:56px minmax(0,1fr) 80px;gap:14px;align-items:center;padding:10px;border:1px solid var(--p-bord);border-radius:6px}
.e-sq-ligne span{display:flex;flex-direction:column;gap:8px}
.e-sq-img,.e-sq{display:block;border-radius:4px;background:linear-gradient(90deg,var(--p-grisbleu-pale),var(--p-bord),var(--p-grisbleu-pale));background-size:200% 100%;animation:e-luit 1.4s ease-in-out infinite}
.e-sq-img{width:56px;height:56px}
.e-sq{height:12px}
.e-sq.l70{width:70%}.e-sq.l40{width:40%}.e-sq.l20{width:100%}
@keyframes e-luit{from{background-position:100% 0}to{background-position:-100% 0}}

/* Bandeaux : confirmation (vert foncé), attente, erreur (rouge retenu, D11). Toujours picto + titre + phrase. */
.e-bandeau{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:6px;border:1px solid var(--p-bord-2);border-left-width:4px;background:var(--p-blanc);flex-wrap:wrap}
.e-bandeau>.ico{margin-top:2px;flex:none}
.e-bandeau>div{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.e-bandeau b{color:var(--p-encre)}
.e-bandeau .btn{min-height:44px}
.e-ok{border-left-color:var(--p-vert-fonce)}
.e-ok>.ico{color:var(--p-vert-fonce)}
.e-attente{border-left-color:var(--p-grisbleu-fonce)}
.e-erreur{border-color:var(--p-erreur);border-left-color:var(--p-erreur);background:var(--p-erreur-pale)}
.e-erreur>.ico{color:var(--p-erreur)}

/* Champ en erreur (aussi dans la commande refusée). */
.t-erreur input,.t-erreur select{border:2px solid var(--p-erreur)}
.t-erreur label{color:var(--p-encre)}
.t-msg-err{display:flex;align-items:flex-start;gap:6px;font-size:14px;font-weight:500;color:var(--p-erreur)}
.t-msg-err .ico{margin-top:2px}
.t-bandeau-err{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--p-erreur);border-left-width:4px;border-radius:6px;background:var(--p-erreur-pale)}
.t-bandeau-err>.ico{color:var(--p-erreur);flex:none;margin-top:2px}
.t-bandeau-err b{color:var(--p-encre)}
.t-bandeau-err ul{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.t-bandeau-err a{color:var(--p-erreur);text-decoration:underline;font-size:14px;font-weight:500}

@media (max-width:900px){
  .e-grille{grid-template-columns:minmax(0,1fr);gap:14px}
  .e-page{padding-top:12px}
  .e-sq-ligne{grid-template-columns:48px minmax(0,1fr) 56px}
  .e-sq-img{width:48px;height:48px}
}