/*
 * La bibliotheque du socle (audit 05, section 3) : le rendu des composants
 * <x-ui.*>, consommes par les quatre univers, panneaux Filament compris.
 * Charge apres socle.css, dont elle consomme les jetons, et avant les feuilles
 * d'univers, qui peuvent poser leurs assemblages par dessus.
 *
 * La regle qui rend la bibliotheque durable : on ne dessine plus jamais un
 * bouton. Un ecran qui a besoin d'une commande, d'une carte, d'un champ, d'une
 * pastille, passe par le composant. Le gendarme (tests/Browser/GendarmeTest)
 * echoue quand un univers depasse ses budgets de signatures.
 */

/* ----- Le bouton : trois variantes, trois tailles ----- */
.ui-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    border: 2px solid transparent;
    border-radius: var(--rayon-bouton);
    font-family: inherit;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.2;
    padding: var(--e3) var(--e6);
    min-height: 44px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--duree-courte), background-color var(--duree-courte);
}

.ui-bouton:hover { transform: translateY(-1px); }

.ui-bouton:focus-visible { outline: none; box-shadow: var(--anneau-focus); }

.ui-bouton.primaire {
    background: var(--action);
    color: var(--sur-action);
}

.ui-bouton.primaire:hover { background: var(--action-fonce); }

.ui-bouton.secondaire {
    background: var(--surface);
    color: var(--texte);
    border-color: var(--texte);
}

.ui-bouton.secondaire:hover { background: var(--surface-2); }

.ui-bouton.discret {
    background: transparent;
    color: var(--action-texte);
}

.ui-bouton.discret:hover { background: var(--surface-2); transform: none; }

.ui-bouton.petite { font-size: .82rem; padding: var(--e2) var(--e4); min-height: 36px; }

.ui-bouton.grande { font-size: 1.18rem; padding: var(--e4) var(--e7); min-height: 52px; }

.ui-bouton[disabled], .ui-bouton[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* ----- La carte ----- */
.ui-carte {
    background: var(--surface);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-carte);
    box-shadow: var(--ombre-douce);
    padding: var(--e6);
}

.ui-carte.forte { box-shadow: var(--ombre-franche); border: 2px solid var(--texte); }

.ui-carte.plate { box-shadow: none; }

/* ----- La carte de sante (studio, 03b) : un objet, son etat, son geste ----- */
.ui-carte-de-sante {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
}

.ui-carte-de-sante .sante-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); }

.ui-carte-de-sante .sante-titre { font-weight: 800; font-size: 1.18rem; margin: 0; }

.ui-carte-de-sante .sante-corps { color: var(--texte-2); font-size: .94rem; }

.ui-carte-de-sante .sante-pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: auto; }

/* ----- La carte d'intention (flux de gestes, 02c et 03b) ----- */
.ui-carte-d-intention {
    display: flex;
    align-items: center;
    gap: var(--e4);
    text-decoration: none;
    color: var(--texte);
}

.ui-carte-d-intention:hover { border-color: var(--texte); }

.ui-carte-d-intention .intention-icone {
    flex: 0 0 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--rayon-pastille);
    background: var(--action-pastel);
    color: var(--action-texte);
}

.ui-carte-d-intention .intention-titre { font-weight: 800; display: block; }

/* Le sous-titre porte souvent un titre saisi (lecon, direct, quiz), a
   l'ecriture imprevisible : plaintext regle son sens par le contenu, dans les
   deux langues de page (trouve par l'auditeur du rendu, phase C). */
.ui-carte-d-intention .intention-titre,
.ui-carte-d-intention .intention-sous { unicode-bidi: plaintext; }

.ui-carte-d-intention .intention-sous { color: var(--texte-2); font-size: .82rem; }

.ui-carte-d-intention .intention-fleche { margin-inline-start: auto; color: var(--texte-2); }

/* ----- La pastille d'etat : le vocabulaire couleur unique (04c) -----
   Ambre attend, rouge bloque, vert regle, gris terminal, menthe informe. */
.ui-pastille {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    border-radius: var(--rayon-pastille);
    padding: var(--e1) var(--e3);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}

.ui-pastille.attente { background: var(--attention-pastel); color: var(--attention); }

.ui-pastille.bloque { background: var(--danger-pastel); color: var(--danger); }

.ui-pastille.regle { background: var(--ok-pastel); color: var(--ok); }

.ui-pastille.termine { background: var(--surface-2); color: var(--texte-2); }

.ui-pastille.info { background: var(--info-pastel); color: var(--info); }

/* ----- Le champ : etiquette, aide, erreur, dans le composant ----- */
.ui-champ { display: block; margin-bottom: var(--e5); }

.ui-champ .champ-etiquette {
    display: block;
    font-weight: 700;
    font-size: .94rem;
    margin-bottom: var(--e2);
}

.ui-champ .champ-aide {
    color: var(--texte-2);
    font-size: .82rem;
    margin: var(--e1) 0 0;
}

.ui-champ .champ-erreur {
    color: var(--danger);
    font-size: .82rem;
    font-weight: 700;
    margin: var(--e1) 0 0;
}

.ui-champ input, .ui-champ select, .ui-champ textarea {
    display: block;
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--texte);
    background: var(--surface);
    border: 1.5px solid var(--ligne);
    border-radius: var(--rayon-champ);
    padding: var(--e3) var(--e4);
    min-height: 44px;
}

.ui-champ input:focus-visible, .ui-champ select:focus-visible, .ui-champ textarea:focus-visible {
    outline: none;
    border-color: var(--action);
    box-shadow: var(--anneau-focus);
}

.ui-champ.en-erreur input, .ui-champ.en-erreur select, .ui-champ.en-erreur textarea {
    border-color: var(--danger);
}

/* ----- La donnee technique : mono, gauche-droite, copiable -----
   La reponse structurelle a la classe entiere des defauts bidi : un numero de
   compte, une reference, un telephone ne se rendent JAMAIS sans elle. */
.ui-donnee {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--police-donnees);
}

.ui-donnee .donnee-copier {
    font: inherit;
    font-family: var(--police-latin);
    font-size: .82rem;
    font-weight: 700;
    color: var(--action-texte);
    background: var(--surface-2);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-pastille);
    padding: var(--e1) var(--e3);
    min-height: 32px;
    cursor: pointer;
}

.ui-donnee .donnee-copier:hover { background: var(--action-pastel); }

/* ----- Le bandeau : un etat de page, jamais un cri ----- */
.ui-bandeau {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    border-radius: var(--rayon-champ);
    padding: var(--e4) var(--e5);
    font-size: .94rem;
    border: 1px solid transparent;
}

.ui-bandeau.info { background: var(--info-pastel); color: var(--info); }

.ui-bandeau.ok { background: var(--ok-pastel); color: var(--ok); }

.ui-bandeau.attention { background: var(--attention-pastel); color: var(--attention); }

.ui-bandeau.danger { background: var(--danger-pastel); color: var(--danger); }

/* ----- Le toast : la confirmation qui ne bloque pas ----- */
.ui-toasts {
    position: fixed;
    bottom: calc(20px + var(--sure-bas));
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    width: min(92vw, 420px);
}

[dir="rtl"] .ui-toasts { transform: translateX(50%); }

.ui-toast {
    background: var(--texte);
    color: var(--surface);
    border-radius: var(--rayon-champ);
    padding: var(--e3) var(--e5);
    font-size: .94rem;
    font-weight: 700;
    box-shadow: var(--ombre-douce);
    animation: ui-toast-entree var(--duree-moyenne) ease-out;
}

@keyframes ui-toast-entree {
    from { opacity: 0; transform: translateY(8px); }
}

/* ----- La modale : dialog natif, jamais un div flottant ----- */
.ui-modale {
    border: none;
    border-radius: var(--rayon-carte);
    box-shadow: var(--ombre-douce);
    background: var(--surface);
    color: var(--texte);
    padding: var(--e7);
    width: min(92vw, 480px);
}

.ui-modale::backdrop { background: rgba(23, 20, 16, .45); }

/* ----- Le panneau lateral : le geste standard du studio (03b) ----- */
.ui-panneau-lateral {
    border: none;
    background: var(--surface);
    color: var(--texte);
    box-shadow: var(--ombre-douce);
    width: min(94vw, 440px);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    margin-inline-start: auto;
    padding: var(--e6);
}

.ui-panneau-lateral::backdrop { background: rgba(23, 20, 16, .35); }

/* ----- Le squelette : l'attente qui a une forme ----- */
.ui-squelette {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--ligne) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    border-radius: var(--rayon-champ);
    animation: ui-squelette-va var(--duree-longue) linear infinite alternate;
    min-height: 16px;
}

@keyframes ui-squelette-va {
    to { background-position: -100% 0; }
}

/* ----- L'etat vide : jamais un ecran nu, toujours un geste ----- */
.ui-etat-vide {
    text-align: center;
    padding: var(--e8) var(--e6);
    color: var(--texte-2);
}

.ui-etat-vide .vide-icone { margin: 0 auto var(--e3); width: 48px; height: 48px; color: var(--texte-2); opacity: .6; }

.ui-etat-vide .vide-titre { font-weight: 800; font-size: 1.18rem; color: var(--texte); margin: 0 0 var(--e1); }

.ui-etat-vide .vide-geste { margin-top: var(--e4); }

/* ----- L'en-tete d'ecran : titre, sous-titre, gestes ----- */
.ui-en-tete-ecran {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e4);
    flex-wrap: wrap;
    margin-bottom: var(--e6);
}

.ui-en-tete-ecran .ecran-titre { margin: 0; font-size: 1.47rem; font-weight: 800; }

.ui-en-tete-ecran .ecran-sous { margin: var(--e1) 0 0; color: var(--texte-2); font-size: .94rem; }

.ui-en-tete-ecran .ecran-gestes { display: flex; gap: var(--e2); align-items: center; }

/* ----- La barre d'onglets (eleve mobile, 02c) ----- */
.ui-barre-onglets {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 100;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--ligne);
    padding-bottom: var(--sure-bas);
}

.ui-barre-onglets a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e1);
    padding: var(--e2) var(--e1) var(--e2);
    min-height: 52px;
    text-decoration: none;
    color: var(--texte-2);
    font-size: .75rem;
    font-weight: 700;
}

.ui-barre-onglets a.actif { color: var(--action-texte); }

.ui-barre-onglets a svg { width: 22px; height: 22px; }

/* ----- Le tableau de file (04c) : age visible, tri impose, gestes en ligne ----- */
.ui-tableau-de-file { width: 100%; border-collapse: collapse; }

.ui-tableau-de-file th {
    text-align: start;
    font-size: .82rem;
    font-weight: 700;
    color: var(--texte-2);
    padding: var(--e3) var(--e3);
    border-bottom: 1.5px solid var(--ligne);
}

.ui-tableau-de-file td {
    padding: var(--e3);
    border-bottom: 1px solid var(--ligne);
    vertical-align: middle;
}

.ui-tableau-de-file .file-age { white-space: nowrap; color: var(--texte-2); font-size: .82rem; }

.ui-tableau-de-file .file-age.en-retard { color: var(--danger); font-weight: 700; }

.ui-tableau-de-file tr:hover td { background: var(--surface-2); }

/* Le sprite des doodles : hors flux, invisible, reference par <use>. */
.sprite-doodles { position: absolute; }

/* Le conteneur qui laisse defiler un tableau large sans faire defiler la page. */
.ui-tableau-defile { overflow-x: auto; }