/* Feuille de temps (recette du 27/10/2026) : écrans des usages (components/usages/_feuille-de-temps.html.twig) et
   « À vous d'essayer » (components/essai/_feuille-de-temps.html.twig) : une semaine d'exemple complétée ligne par ligne
   (projet et activité), une case par heure, puis la soumission au responsable. Cadre commun : solution-sections.css ;
   briques : solution.css. Couleurs unies de la solution (--v3-brique*). */

/* Écrans des usages */
[data-vitrine-v3] .v3-feuille-de-temps-semaine { grid-template-columns: minmax(0, 2.4fr) repeat(6, minmax(0, 1fr)); }
[data-vitrine-v3] .v3-feuille-de-temps-puce--choisie { border-color: var(--v3-brique-trait); background: var(--v3-brique-doux); color: var(--v3-brique-texte); font-weight: 650; }
[data-vitrine-v3] .v3-feuille-de-temps-export { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 5px 10px; padding: 8px 9px; border: 1px solid #e2e8ef; border-radius: 6px; background: #fafbfd; font-variant-numeric: tabular-nums; }
[data-vitrine-v3] .v3-feuille-de-temps-export > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-vitrine-v3] .v3-feuille-de-temps-export-entete { color: var(--v3-muted); font-size: 0.5625rem; font-weight: 600; }
[data-vitrine-v3] .v3-feuille-de-temps-export-heures { font-weight: 650; text-align: right; }
/* Fenêtre étroite (téléphone) : les intitulés passent à la ligne plutôt que d'être coupés. */
@container (max-width: 400px) {
    [data-vitrine-v3] .v3-feuille-de-temps-semaine .v3-ap-temps-activite { white-space: normal; }
    [data-vitrine-v3] .v3-feuille-de-temps-feuilles .v3-ap-personne > span { white-space: normal; }
    [data-vitrine-v3] .v3-feuille-de-temps-export { gap: 4px 6px; font-size: 0.625rem; }
}

/* À vous d'essayer : une ligne par imputation, avec ses boutons − et +. */
[data-vitrine-v3] .v3-feuille-de-temps-lignes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
[data-vitrine-v3] .v3-feuille-de-temps-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 10px 8px 12px; border: 1px solid #dce2e8; border-radius: 8px; background: var(--v3-white); }
[data-vitrine-v3] .v3-feuille-de-temps-imputation { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--v3-muted); font-size: 0.8125rem; line-height: 1.4; }
[data-vitrine-v3] .v3-feuille-de-temps-imputation strong { color: var(--v3-ink); font-size: 0.875rem; font-weight: 650; }
[data-vitrine-v3] .v3-feuille-de-temps-imputation > span:last-child { display: grid; min-width: 0; }
[data-vitrine-v3] .v3-feuille-de-temps-cle { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: var(--v3-feuille-de-temps-couleur); }
[data-vitrine-v3] .v3-feuille-de-temps-pas { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; }
[data-vitrine-v3] .v3-feuille-de-temps-bouton { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #c8d2dc; border-radius: 8px; background: var(--v3-white); color: var(--v3-ink); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
[data-vitrine-v3] .v3-feuille-de-temps-bouton .lucide { width: 16px; height: 16px; }
[data-vitrine-v3] .v3-feuille-de-temps-bouton:hover { border-color: var(--v3-brique); background: var(--v3-brique-doux); }
[data-vitrine-v3] .v3-feuille-de-temps-bouton:focus-visible { outline: 2px solid var(--v3-blue); outline-offset: 2px; }
[data-vitrine-v3] .v3-feuille-de-temps-bouton:disabled { border-color: #e2e8ef; background: #f7f9fb; color: #8a97a6; cursor: default; }
[data-vitrine-v3] .v3-feuille-de-temps-heures { min-width: 3.25rem; color: var(--v3-ink); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }

/* Une case par heure : 35 cases pour la semaine attendue de l'exemple, colorées ligne par ligne. */
[data-vitrine-v3] :is(.v3-feuille-de-temps-ligne--1, .v3-feuille-de-temps-case--1) { --v3-feuille-de-temps-couleur: var(--v3-brique); }
[data-vitrine-v3] :is(.v3-feuille-de-temps-ligne--2, .v3-feuille-de-temps-case--2) { --v3-feuille-de-temps-couleur: #f59e0b; }
[data-vitrine-v3] :is(.v3-feuille-de-temps-ligne--3, .v3-feuille-de-temps-case--3) { --v3-feuille-de-temps-couleur: #64748b; }
[data-vitrine-v3] .v3-feuille-de-temps-bilan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; margin-top: 12px; }
[data-vitrine-v3] .v3-feuille-de-temps-cases { display: grid; grid-template-columns: repeat(35, minmax(0, 1fr)); gap: 2px; }
[data-vitrine-v3] .v3-feuille-de-temps-cases > span { height: 14px; border-radius: 2px; background: #e7ecf2; transition: background-color 160ms ease; }
[data-vitrine-v3] .v3-feuille-de-temps-cases > :is(.v3-feuille-de-temps-case--1, .v3-feuille-de-temps-case--2, .v3-feuille-de-temps-case--3) { background: var(--v3-feuille-de-temps-couleur); }
[data-vitrine-v3] .v3-feuille-de-temps-total { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--v3-muted); font-size: 0.8125rem; white-space: nowrap; }
[data-vitrine-v3] .v3-feuille-de-temps-total strong { color: var(--v3-brique-texte); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
[data-vitrine-v3] .v3-feuille-de-temps-depasse { padding: 1px 6px; border: 1px solid #efdfbf; border-radius: 4px; background: #fcf5e9; color: #805312; font-size: 0.75rem; font-weight: 650; }
[data-vitrine-v3] .v3-feuille-de-temps-depasse[hidden] { display: none; }

/* Résultat : le détail de la dernière ligne modifiée, puis le circuit une fois la feuille soumise. */
[data-vitrine-v3] .v3-feuille-de-temps-detail { margin: 0; color: var(--v3-muted); font-size: 0.8125rem; }
[data-vitrine-v3] .v3-feuille-de-temps-detail:empty { display: none; }
[data-vitrine-v3] .v3-feuille-de-temps-circuit { padding: 4px 0 2px; font-size: 0.75rem; }
[data-vitrine-v3] .v3-feuille-de-temps-circuit[hidden] { display: none; }
[data-vitrine-v3] .v3-feuille-de-temps-circuit .v3-ap-jalons li > span:last-child { font-size: 0.6875rem; }
[data-vitrine-v3] [data-v3-essai="feuille-de-temps"] .v3-button:disabled { opacity: 0.5; }
[data-vitrine-v3] [data-v3-essai="feuille-de-temps"] .v3-button-primary:disabled:hover { background: var(--v3-blue); border-color: var(--v3-blue); }

@media (max-width: 47.999rem) {
    [data-vitrine-v3] .v3-feuille-de-temps-ligne { padding: 8px; }
    [data-vitrine-v3] .v3-feuille-de-temps-pas { gap: 4px; }
    [data-vitrine-v3] .v3-feuille-de-temps-heures { min-width: 2.75rem; font-size: 0.9375rem; }
    [data-vitrine-v3] .v3-feuille-de-temps-bilan { grid-template-columns: minmax(0, 1fr); }
    [data-vitrine-v3] .v3-feuille-de-temps-cases { gap: 1px; }
}