/* =====================================================================================
 *  /js/po_vie.css, « chaque action donne signe de vie », style commun à tout le PO
 * =====================================================================================
 *
 *  Le seul style des signes de vie (/js/po_vie.js, qui le pose lui-même) : bouton occupé et
 *  son indicateur, messages près du bouton, confirmation dans la page, boutons impossibles
 *  grisés dans les DEUX thèmes, bandeau violet de la répétition. Il n'utilise que ses propres
 *  variables --vie-*, et ne touche à aucun élément qui ne porte pas une de ses classes, sauf
 *  l'état grisé des boutons, et seulement sur une page couverte (<html data-vie="couvert">).
 *  Thème sombre : classe dark-mode du PO, ou <html data-vie-theme="sombre"> (IA Studio).
 * ===================================================================================== */

:root
{
    --vie-ok: #047857; --vie-ok-doux: #d1fae5;
    --vie-echec: #b91c1c; --vie-echec-doux: #fee2e2;
    --vie-info: #1e40af; --vie-info-doux: #dbeafe;
    --vie-attente: #92400e; --vie-attente-doux: #fef3c7;
    --vie-repet: #6d28d9; --vie-repet-doux: #ede9fe; --vie-repet-fort: #5b21b6;
    --vie-fond: #ffffff; --vie-bord: rgba(15, 23, 42, .16); --vie-txt: #0f172a;
}
html.dark-mode, html[data-vie-theme="sombre"]
{
    --vie-ok: #34d399; --vie-ok-doux: rgba(52, 211, 153, .14);
    --vie-echec: #fca5a5; --vie-echec-doux: rgba(248, 113, 113, .16);
    --vie-info: #93c5fd; --vie-info-doux: rgba(96, 165, 250, .16);
    --vie-attente: #fcd34d; --vie-attente-doux: rgba(251, 191, 36, .14);
    --vie-repet: #c4b5fd; --vie-repet-doux: rgba(167, 139, 250, .18); --vie-repet-fort: #7c3aed;
    --vie-fond: #131c30; --vie-bord: rgba(255, 255, 255, .16); --vie-txt: #e6edf3;
}

/* ----- Bouton occupé ----- */
.vie-occupe { cursor: progress !important; opacity: .75; }
.vie-roue
{
    display: inline-block; width: .95em; height: .95em; margin-right: .45em; vertical-align: -.12em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: vie-tourne .7s linear infinite;
}
@keyframes vie-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vie-roue { animation-duration: 2.4s; } }

/* ----- Bouton impossible : grisé dans les deux thèmes, raison à côté ----- */
html[data-vie="couvert"] button:disabled:not(.vie-occupe),
html[data-vie="couvert"] input[type=submit]:disabled,
html[data-vie="couvert"] input[type=button]:disabled,
html[data-vie="couvert"] .bouton[aria-disabled="true"],
[aria-disabled="true"][data-vie-raison]
{
    opacity: .42 !important; cursor: not-allowed !important; filter: grayscale(1);
    box-shadow: none !important;
}
html.dark-mode[data-vie="couvert"] button:disabled:not(.vie-occupe),
html.dark-mode [aria-disabled="true"][data-vie-raison]
{
    opacity: .35 !important;
}
.vie-raison { margin-left: 8px; font-size: 12.5px; color: var(--vie-txt); }
.vie-occupe-lien { pointer-events: none; }

/* ----- Messages près du bouton ----- */
.vie-zone:empty { display: none; }
.vie-zone { margin: 6px 0; }
.vie-msg
{
    display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; line-height: 1.4;
    border: 1px solid transparent; max-width: 70ch;
}
.vie-msg a { margin-left: 4px; font-weight: 600; }
.vie-ok { color: var(--vie-ok); background: var(--vie-ok-doux); }
.vie-echec { color: var(--vie-echec); background: var(--vie-echec-doux); }
.vie-info { color: var(--vie-info); background: var(--vie-info-doux); }
.vie-attente { color: var(--vie-attente); background: var(--vie-attente-doux); }
.vie-repet { color: var(--vie-repet); background: var(--vie-repet-doux); border-color: var(--vie-repet); }

/* Une ancre de retour ne se cache jamais sous la barre du haut (hauteur tenue par portail_hote_barre). */
html[data-vie="couvert"] [id] { scroll-margin-top: calc(var(--pb-hauteur, 56px) + 16px); }

/* Le message ramené près du formulaire après un envoi. */
.vie-eclair { outline: 3px solid var(--vie-info); outline-offset: 3px; transition: outline-color 2s; border-radius: 8px; }

/* ----- Confirmation dans la page ----- */
.vie-confirmer
{
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; max-width: 70ch;
    border: 1px solid var(--vie-bord); border-radius: 10px; background: var(--vie-fond); color: var(--vie-txt);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.vie-confirmer p { margin: 0 8px 0 0; flex: 1 1 260px; font-size: 13.5px; }
.vie-confirmer button
{
    padding: 6px 12px; border-radius: 8px; border: 1px solid var(--vie-bord); background: var(--vie-fond);
    color: var(--vie-txt); font: inherit; font-weight: 600; cursor: pointer;
}
.vie-confirmer button.vie-oui { background: var(--vie-info); border-color: var(--vie-info); color: var(--vie-fond); }
.vie-confirmer button.vie-rouge { background: var(--vie-echec); border-color: var(--vie-echec); color: var(--vie-fond); }

/* ----- Marque « dangereux » : visible en répétition seulement ----- */
html.vie-en-repetition [data-vie-danger] button[type=submit],
html.vie-en-repetition button[data-vie-danger],
html.vie-en-repetition a[data-vie-danger]
{
    outline: 2px dashed var(--vie-repet); outline-offset: 2px;
}

/* ----- Bandeau violet de la répétition ----- */
.vie-bandeau
{
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 16px;
    background: var(--vie-repet-fort); color: #ffffff; font: 500 13px/1.4 'Inter', -apple-system, sans-serif;
}
.vie-bandeau b { font-weight: 700; }
.vie-bandeau .vie-bandeau-note { opacity: .9; font-style: italic; }
.vie-bandeau button
{
    margin-left: auto; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .6);
    background: transparent; color: #ffffff; font: inherit; font-weight: 600; cursor: pointer;
}