/* Entretiens RH (recette du 27/10/2026) : écrans des usages (components/usages/_entretiens-rh.html.twig) et « À vous
   d'essayer » (components/essai/_entretiens-rh.html.twig) : le contrôle de lancement d'une campagne, ses trois points à
   corriger, puis le lancement. Cadre commun : solution-sections.css ; briques des aperçus : solution.css. Couleurs
   unies : celles de la solution (--v3-brique*) et celles des pastilles « à corriger » et « corrigé ». */

/* Écrans des usages : groupes d'une campagne, conversation avec Upikat, lignes du pilotage. */
[data-vitrine-v3] .v3-entretiens-rh-groupes { display: grid; gap: 6px; }
[data-vitrine-v3] .v3-entretiens-rh-groupes li { display: grid; gap: 5px; padding: 7px 9px; border: 1px solid #e2e8ef; border-radius: 6px; background: #fafbfd; }
[data-vitrine-v3] .v3-entretiens-rh-bulle { display: grid; justify-items: start; gap: 3px; max-width: 88%; padding: 7px 10px; border-radius: 8px; }
[data-vitrine-v3] .v3-entretiens-rh-bulle--ia { justify-self: start; border: 1px solid var(--v3-brique-trait); background: var(--v3-brique-doux); color: var(--v3-ink); }
[data-vitrine-v3] .v3-entretiens-rh-bulle--personne { justify-self: end; border: 1px solid #e2e8ef; background: #f7f9fb; color: #263a54; }
[data-vitrine-v3] .v3-entretiens-rh-bulle-nom { display: inline-flex; align-items: center; gap: 5px; color: var(--v3-brique-texte); font-weight: 700; }
[data-vitrine-v3] .v3-entretiens-rh-personne { display: flex; align-items: center; gap: 7px; min-width: 0; }
[data-vitrine-v3] .v3-entretiens-rh-personne strong { font-weight: 650; white-space: nowrap; }
[data-vitrine-v3] .v3-entretiens-rh-personne > span:last-child { overflow: hidden; color: var(--v3-muted); text-overflow: ellipsis; white-space: nowrap; }

@container (max-width: 400px) {
    [data-vitrine-v3] .v3-entretiens-rh-personne > span:last-child { display: none; }
    [data-vitrine-v3] .v3-entretiens-rh-bulle { max-width: 100%; }
}

/* À vous d'essayer : les points signalés par le contrôle de lancement. Chaque « Corriger » est une case à cocher qui
   couvre son bouton (atteignable au clavier) ; cochée, le point passe à « Corrigé ». */
[data-vitrine-v3] .v3-entretiens-rh-alertes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-entretiens-rh-alerte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid #efdfbf; border-radius: 8px; background: #fffbf4; transition: border-color 200ms ease, background-color 200ms ease; }
[data-vitrine-v3] .v3-entretiens-rh-alerte:has(input:checked) { border-color: #bfe3cf; background: #f4fbf7; }
[data-vitrine-v3] .v3-entretiens-rh-alerte-icone { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: #fcf1dc; color: #805312; }
[data-vitrine-v3] .v3-entretiens-rh-alerte:has(input:checked) .v3-entretiens-rh-alerte-icone { background: #e2f4ea; color: #1f6b47; }
[data-vitrine-v3] .v3-entretiens-rh-alerte-icone .lucide { width: 16px; height: 16px; }
[data-vitrine-v3] .v3-entretiens-rh-alerte-titre { margin: 0; color: var(--v3-ink); font-size: 0.875rem; font-weight: 650; line-height: 1.4; }
[data-vitrine-v3] .v3-entretiens-rh-alerte-detail { margin: 2px 0 0; color: var(--v3-muted); font-size: 0.8125rem; line-height: 1.5; }
/* Avant et après la correction : le texte, l'icône et le bouton changent ensemble. */
[data-vitrine-v3] .v3-entretiens-rh-alerte:not(:has(input:checked)) .v3-entretiens-rh-apres,
[data-vitrine-v3] .v3-entretiens-rh-alerte:has(input:checked) .v3-entretiens-rh-avant { display: none; }
[data-vitrine-v3] .v3-entretiens-rh-corriger { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 104px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--v3-brique-trait); border-radius: 6px; background: var(--v3-white); color: var(--v3-brique-texte); font-size: 0.8125rem; font-weight: 650; line-height: 1.3; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; }
[data-vitrine-v3] .v3-entretiens-rh-corriger > span { display: inline-flex; align-items: center; gap: 6px; }
[data-vitrine-v3] .v3-entretiens-rh-corriger .lucide { width: 14px; height: 14px; }
[data-vitrine-v3] .v3-entretiens-rh-corriger input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
[data-vitrine-v3] .v3-entretiens-rh-corriger:hover { border-color: var(--v3-brique); background: var(--v3-brique-doux); }
[data-vitrine-v3] .v3-entretiens-rh-corriger:has(input:focus-visible) { outline: 2px solid var(--v3-blue); outline-offset: 2px; }
[data-vitrine-v3] .v3-entretiens-rh-corriger:has(input:checked) { border-color: #bfe3cf; background: #eef8f2; color: #1f6b47; }
[data-vitrine-v3] .v3-entretiens-rh-corriger:has(input:disabled),
[data-vitrine-v3] .v3-entretiens-rh-corriger input:disabled { cursor: default; }

/* Lancer la campagne : inactif (aria-disabled, toujours atteignable au clavier) tant qu'un point reste à corriger. */
[data-vitrine-v3] .v3-entretiens-rh-lancer { min-height: 44px; border-color: var(--v3-brique-texte); background: var(--v3-brique-texte); color: var(--v3-white); }
[data-vitrine-v3] .v3-entretiens-rh-lancer:hover { border-color: color-mix(in srgb, var(--v3-brique-texte) 82%, #000); background: color-mix(in srgb, var(--v3-brique-texte) 82%, #000); }
[data-vitrine-v3] .v3-entretiens-rh-lancer:focus-visible { outline: 2px solid var(--v3-blue); outline-offset: 2px; }
[data-vitrine-v3] .v3-entretiens-rh-lancer[aria-disabled="true"] { border-color: #dce2e8; background: #f0f3f6; color: #5d6c7e; cursor: not-allowed; }
[data-vitrine-v3] .v3-entretiens-rh-lancer[data-v3-lancee] { border-color: #bfe3cf; background: #eef8f2; color: #1f6b47; cursor: default; }

/* Résultat : trois segments, un par point corrigé. */
[data-vitrine-v3] .v3-entretiens-rh-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-width: 220px; }
[data-vitrine-v3] .v3-entretiens-rh-segments > span { height: 8px; border-radius: 3px; background: #e2e8ef; }
[data-vitrine-v3] .v3-entretiens-rh-segments--1 > span:nth-child(-n + 1),
[data-vitrine-v3] .v3-entretiens-rh-segments--2 > span:nth-child(-n + 2),
[data-vitrine-v3] .v3-entretiens-rh-segments--3 > span { background: var(--v3-brique); }

@media (prefers-reduced-motion: no-preference) {
    [data-vitrine-v3] .v3-entretiens-rh-segments > span { transform-origin: left center; animation: v3-ap-remplit 320ms ease-out both; }
    [data-vitrine-v3] .v3-entretiens-rh-segments > span:nth-child(2) { animation-delay: 80ms; }
    [data-vitrine-v3] .v3-entretiens-rh-segments > span:nth-child(3) { animation-delay: 160ms; }
}

@media (max-width: 47.999rem) {
    [data-vitrine-v3] .v3-entretiens-rh-alerte { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px 12px; padding: 12px; }
    [data-vitrine-v3] .v3-entretiens-rh-corriger { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    [data-vitrine-v3] :is(.v3-entretiens-rh-alerte, .v3-entretiens-rh-corriger) { transition: none; }
}