/* Audit & Revues 360° (recette du 27/10/2026) : écrans des usages et du parcours (components/usages|parcours/
   _audit.html.twig), puis « À vous d'essayer » : composer le cercle d'un Feedback 360, le faire valider et lire ce que
   la restitution montre de chaque cercle (components/essai/_audit.html.twig, js/vitrine-v3/essais/audit.js). Cadre
   commun : solution-sections.css ; briques des aperçus (cercle, jauges) : solution.css. Couleurs unies : ardoise pour
   les regards identifiables (auto-évaluation, manager), couleur de la solution pour les pairs et les externes. */

/* Écrans des usages et du parcours */
[data-vitrine-v3] .v3-audit-statut { margin-left: auto; }
[data-vitrine-v3] .v3-audit-questions li { padding-bottom: 7px; border-bottom: 1px solid #eef1f5; }
[data-vitrine-v3] .v3-audit-questions li:last-child { padding-bottom: 0; border-bottom: 0; }
[data-vitrine-v3] .v3-audit-designation .v3-ap-personne strong { font-weight: 650; }
[data-vitrine-v3] .v3-ap-avatar.v3-audit-identifie { border-color: #64748b; background: #64748b; color: var(--v3-white); }
[data-vitrine-v3] .v3-ap-avatar:is(.v3-audit-propose, .v3-audit-membre--propose) { border: 1.5px dashed var(--v3-brique); background: var(--v3-white); color: var(--v3-brique-texte); }
[data-vitrine-v3] .v3-ap-avatar.v3-audit-membre--valide { border-color: var(--v3-brique-texte); background: var(--v3-brique-texte); color: var(--v3-white); }

/* À vous d'essayer */
[data-vitrine-v3] [data-v3-essai="audit"] [hidden] { display: none; }
[data-vitrine-v3] .v3-audit-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-vitrine-v3] .v3-audit-options .v3-essai-option-valeur { font-size: 0.8125rem; }
[data-vitrine-v3] .v3-audit-note { margin: 8px 0 0; color: var(--v3-muted); font-size: 0.75rem; line-height: 1.5; }
[data-vitrine-v3] .v3-audit-validation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
[data-vitrine-v3] .v3-audit-validation-titre { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--v3-ink); font-size: 0.875rem; font-weight: 650; }
[data-vitrine-v3] .v3-audit-valider[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
[data-vitrine-v3] .v3-audit-valider[aria-disabled="true"]:hover { border-color: #bdc8d3; background: var(--v3-white); }

/* Lecture : le cercle qui se dessine, et à côté le verdict puis ce que la restitution montre de chaque cercle. */
[data-vitrine-v3] .v3-audit-lecture { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: center; gap: 20px; }
[data-vitrine-v3] .v3-audit-texte { display: grid; gap: 12px; min-width: 0; }
[data-vitrine-v3] .v3-audit-dessin { width: 176px; gap: 6px; }
[data-vitrine-v3] .v3-audit-dessin .v3-ap-legende { justify-content: center; font-size: 0.625rem; }
[data-vitrine-v3] .v3-ap-cercle.v3-audit-cercle { width: 168px; height: 168px; margin: 0 auto; }
[data-vitrine-v3] .v3-audit-cercle .v3-ap-orbite { inset: 13.64%; }
[data-vitrine-v3] .v3-audit-cercle .v3-ap-avatar { min-width: 30px; height: 30px; font-size: 0.625rem; }
[data-vitrine-v3] .v3-audit-cercle .v3-ap-cercle-centre { width: 54px; height: 54px; font-size: 0.75rem; }
[data-vitrine-v3] .v3-audit-cercle .v3-ap-cercle-1 { top: 13.64%; left: 50%; }
[data-vitrine-v3] .v3-audit-cercle .v3-ap-cercle-2 { top: 31.82%; left: 81.82%; }
[data-vitrine-v3] .v3-audit-cercle .v3-ap-cercle-3 { top: 68.18%; left: 81.82%; }
[data-vitrine-v3] .v3-audit-cercle .v3-ap-cercle-4 { top: 86.36%; left: 50%; }
[data-vitrine-v3] .v3-audit-cercle .v3-ap-cercle-5 { top: 68.18%; left: 18.18%; }
[data-vitrine-v3] .v3-audit-cercle .v3-ap-cercle-6 { top: 31.82%; left: 18.18%; }
[data-vitrine-v3] .v3-audit-restitution { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid #e2e8ef; }
[data-vitrine-v3] .v3-audit-restitution-titre { margin: 0; color: var(--v3-ink); font-size: 0.8125rem; font-weight: 650; }
[data-vitrine-v3] .v3-audit-cercles { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-audit-cercles li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin: 0; color: var(--v3-ink); font-size: 0.8125rem; line-height: 1.5; }
[data-vitrine-v3] .v3-audit-cercles .v3-ap-pastille { font-size: 0.6875rem; }
[data-vitrine-v3] .v3-audit-cercle-detail { color: var(--v3-muted); }
[data-vitrine-v3] .v3-audit-alerte { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border: 1px solid #efdfbf; border-radius: 6px; background: #fcf5e9; color: #805312; font-size: 0.75rem; line-height: 1.5; }
[data-vitrine-v3] .v3-audit-alerte .lucide { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }

@media (max-width: 47.999rem) {
    [data-vitrine-v3] .v3-audit-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-vitrine-v3] .v3-audit-lecture { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
    [data-vitrine-v3] .v3-audit-texte { justify-self: stretch; }
    [data-vitrine-v3] .v3-audit-validation .v3-button { flex: 1 1 100%; }
}

/* Composition : un évaluateur proposé se pose dans le cercle ; à la validation, il prend sa couleur pleine. Dans l'écran
   des cercles, la personne qui passe de « Proposé » à « Validé » change en même temps que sa pastille (v3-ap-d16). */
@media (prefers-reduced-motion: no-preference) {
    [data-vitrine-v3] .v3-ap-cercle .v3-audit-valide-ensuite { animation: v3-ap-tampon 420ms cubic-bezier(0.3, 1.5, 0.5, 1) 600ms both, v3-audit-proposition 320ms ease 2400ms both; }
    [data-vitrine-v3] .v3-audit-cercle .v3-audit-membre { animation: v3-ap-tampon 420ms cubic-bezier(0.3, 1.5, 0.5, 1) both; }
    [data-vitrine-v3] .v3-audit-cercle .v3-audit-membre--valide { animation: v3-audit-valide 460ms cubic-bezier(0.3, 1.5, 0.5, 1) both; }
}
@keyframes v3-audit-proposition { from { border-style: dashed; border-color: var(--v3-brique); background-color: var(--v3-white); color: var(--v3-brique-texte); } }
@keyframes v3-audit-valide { 45% { transform: scale(1.25); } }