/* Page vivante : en-tête de lecture. Tout état est doublé d'un signe et d'un mot ; aucune animation. */
.pv-entete { display: flex; flex-direction: column; gap: var(--espace-3); padding: var(--espace-3); margin-bottom: var(--espace-3); background: var(--bg-hover); border: 1px solid var(--border-subtle); border-radius: var(--rayon-case, 12px); }
.pv-titre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
.pv-titre h2 { margin: 0; font-size: var(--t-titre-case, 16px); font-weight: var(--g-gras, 600); color: var(--text-primary); }
.pv-pastille { padding: 2px var(--espace-2); border: 1px solid var(--border-controle); border-radius: 999px; font-size: var(--t-aide, 12px); color: var(--text-primary); }
.pv-puces { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin: 0; padding: 0; list-style: none; }
.pv-puces li { padding: 2px var(--espace-2); border: 1px solid var(--border-subtle); border-radius: var(--rayon-controle); font-size: var(--t-aide, 12px); color: var(--text-secondary); overflow-wrap: anywhere; }
.pv-puces .pv-ton[data-ton=reussi] { color: var(--etat-reussi); border-color: currentColor; }
.pv-puces .pv-ton[data-ton=attention] { color: var(--etat-attention); border-color: currentColor; background: var(--etat-attention-fond); }
.pv-puces .pv-ton[data-ton=echec] { color: var(--etat-echec); border-color: currentColor; }
.pv-echec { padding: var(--espace-2) var(--espace-3); border: 1px solid var(--etat-echec); border-left-width: 4px; border-radius: var(--rayon-controle); color: var(--text-primary); font-size: var(--t-aide, 12px); }
.pv-echec p { margin: 0; } .pv-echec strong, .pv-echec p > span { color: var(--etat-echec); } .pv-echec ul { margin: var(--espace-2) 0 0; padding-left: var(--espace-4); }
.pv-gestes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--espace-2); }
.pv-menu > summary { list-style: none; cursor: pointer; min-height: var(--cible-min, 44px); display: inline-flex; align-items: center; }
.pv-menu > summary::-webkit-details-marker { display: none; }
.pv-menu__corps { display: flex; flex-direction: column; gap: var(--espace-1); margin-top: var(--espace-1); padding: var(--espace-2); background: var(--bg-surface); border: 1px solid var(--border-controle); border-radius: var(--rayon-controle); align-items: flex-start; }
.pv-menu[open] { flex-basis: 100%; }
.pv-etat { margin: 0; min-height: 1em; font-size: var(--t-aide, 12px); color: var(--text-secondary); }
.pv-panneau { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-2); padding: var(--espace-3); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--rayon-controle); color: var(--text-primary); }
.pv-panneau h3 { margin: 0; font-size: var(--t-titre-case, 16px); } .pv-panneau p { margin: 0; } .pv-panneau label { display: flex; flex-direction: column; gap: var(--espace-1); width: 100%; font-size: var(--t-aide, 12px); color: var(--text-secondary); }
.pv-panneau input, .pv-panneau select { min-height: var(--cible-min, 44px); padding: 0 var(--espace-2); background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border-controle); border-radius: var(--rayon-controle); font: inherit; }
.pv-panneau ul { margin: 0; padding-left: var(--espace-4); }
.pv-erreur { color: var(--etat-echec); font-size: var(--t-aide, 12px); }
.pv-creer { margin-bottom: var(--espace-3); }
@media (max-width: 600px) { .pv-gestes .bouton { flex: 1 1 100%; } .pv-menu { width: 100%; } .pv-menu__corps .bouton { width: 100%; } }