/* ===== temps.css ===== */
/* Temps : semaine, saisie, équipe.
   Feuille de domaine du lot V2-E (vague 1), créée et importée par assets/app.js au lot T0.
   Seul ce lot l'écrit ; app.css reste réservé aux jetons et composants (docs/DESIGN-SYSTEM.md §9.9).
   Les règles .grille-temps* d'app.css restent la base ; elles sont complétées ou surchargées ici. */

/* ---------- 1. En-tête des pages de temps (G3) ---------- */

.temps-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.temps-entete > h1 { margin: 0; }
.temps-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-4); margin-bottom: var(--e-4); }
.temps-barre > nav.actions { margin: 0; }

/* Onglets communs Mes temps · Temps de l'équipe · Budgets (recette DS-B N°2, c6, partial temps/_vues) :
   sur leur propre ligne en tête de page, colonnes de largeur égale, donc même place et même largeur
   sur les trois pages quel que soit le titre. */
nav.actions.vues-temps { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0 0 var(--e-3); }
nav.actions.vues-temps > * { text-align: center; white-space: nowrap; }

/* Semaine (recette DS-B N°2, a2) : ‹ S44  lun. 26 oct. au dim. 1 novembre 2026 ›, puis un calendrier. */
.semainier { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-3); }
.semainier__navigation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); min-width: 0; }
.semainier__fleche {
    display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px;
    border: 1px solid var(--trait); border-radius: var(--rayon-champ); background: var(--surface);
    color: var(--encre); font-size: var(--t-lg); line-height: 1; text-decoration: none;
    transition: background-color var(--duree-rapide, .12s) var(--courbe), border-color var(--duree-rapide, .12s) var(--courbe);
}
.semainier__fleche:hover { background: var(--surface-4); border-color: var(--trait); color: var(--encre); }
.semainier__libelle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e-2); min-width: 0; margin: 0; font-variant-numeric: tabular-nums; }
.semainier__numero { color: var(--encre); font-size: var(--t-lg); font-weight: 600; line-height: 1.2; }
.semainier__dates { color: var(--encre-douce); font-size: var(--t-sm); }
.semainier__calendrier { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; font-size: var(--t-sm); }
.semainier__calendrier label { color: var(--encre-douce); }
.semainier__calendrier input { min-height: 36px; }

/* ---------- 2. Grille de la semaine (G4, G5, G7) ---------- */

.grille-temps__case { position: relative; }
/* Week-end plus étroit (G7) : la saisie y reste possible. */
.grille-temps__case--repos input { width: 52px; }
.grille-temps__case--repos { background: var(--surface-2); }
/* Case illisible signalée à la frappe (le serveur refuse de toute façon). */
.grille-temps__case input.grille-temps__illisible { border-color: var(--danger-texte); background: var(--danger-fond); color: var(--danger-texte); }
/* Plusieurs saisies ce jour-là (G5) : pastille avec leur nombre, lien vers le détail. */
.grille-temps__nombre {
    position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--rayon-pilule); background: var(--encre); color: var(--surface);
    font: 600 10px/16px var(--police); text-align: center; text-decoration: none;
}
.grille-temps__nombre:hover, .grille-temps__nombre:focus-visible { background: var(--primaire); color: var(--surface); }
.grille-temps__total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.grille-temps tfoot td { font-variant-numeric: tabular-nums; }

/* Barre d'enregistrement collante : état « non enregistré » en couleur d'attention. */
.grille-temps__actions { margin-top: var(--e-4); }
.grille-temps__etat:not(:empty) { color: var(--attention-texte); font-weight: 500; }
.grille-temps__etat:not(:empty)::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--attention-trait); vertical-align: 1px; }

/* Suppression d'une saisie du détail : couleur d'erreur (action destructive). */
.grille-temps__supprimer { color: var(--danger-texte); }

@media (prefers-reduced-motion: reduce) {
    .semainier__fleche { transition: none; }
}

/* ---------- 3. Saisie détaillée (S2, S3) ---------- */

.temps-formulaire { max-width: 820px; }
.temps-formulaire .actions-collantes__supprimer { margin-left: auto; }

/* ---------- 4. Temps de l'équipe (Q1, Q2) ---------- */

/* Synthèse en blocs (DS-B) : la part facturable est un blocs.avancement ; les blocs viennent de composants.css. */

.temps-groupe { border-top: 1px solid var(--trait-2); }
.temps-groupe:first-of-type { margin-top: var(--e-2); }
.temps-groupe > summary {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3);
    padding: var(--e-3) 0; cursor: pointer; list-style: none; font-weight: 500;
}
.temps-groupe > summary::-webkit-details-marker { display: none; }
.temps-groupe > summary::before {
    content: ''; align-self: center; width: 6px; height: 6px; margin: 0 4px 0 2px;
    border-right: 1.5px solid var(--encre-douce); border-bottom: 1.5px solid var(--encre-douce);
    transform: rotate(-45deg); transition: transform var(--duree, .16s) var(--courbe);
}
.temps-groupe[open] > summary::before { transform: rotate(45deg); }
.temps-groupe__detail { color: var(--encre-douce); font-size: var(--t-sm); font-weight: 400; font-variant-numeric: tabular-nums; }
.temps-groupe > .tableau-conteneur { margin: 0 0 var(--e-3); }
@media (prefers-reduced-motion: reduce) { .temps-groupe > summary::before { transition: none; } }

/* Lot W2B : choix unique avec recherche dans la grille. Le conteneur du tableau rogne la liste ouverte :
   il gagne de la place sous le tableau tant qu'une liste est ouverte. */
.grille-temps td .champ { margin-bottom: 0; }
.grille-temps td .choix-recherche__saisie { min-width: 160px; }

/* ===== budgets.css ===== */
/* Budgets et coûts de revient.
   Feuille de domaine du lot V2-F (vague 1), créée et importée par assets/app.js au lot T0.
   Seul ce lot l'écrit ; app.css reste réservé aux jetons et composants (docs/DESIGN-SYSTEM.md §9.9). */

/* ---------- Budgets : aide repliée « Comment c'est calculé » (U2) ---------- */

.budgets-aide { margin: var(--e-2) 0 0; font-size: var(--t-sm); color: var(--encre-douce); }
.budgets-aide > summary {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
    font-weight: 500; color: var(--primaire); border-radius: var(--rayon-xs);
}
.budgets-aide > summary::-webkit-details-marker { display: none; }
.budgets-aide > summary::before {
    content: ''; width: 6px; height: 6px; flex-shrink: 0;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); transition: transform var(--duree) var(--courbe);
}
.budgets-aide[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.budgets-aide > summary:hover { color: var(--primaire-survol); text-decoration: underline; }
.budgets-aide ul { margin: var(--e-2) 0 0; padding-left: 20px; max-width: 72ch; display: grid; gap: var(--e-1); }

/* ---------- Budgets : tableau à groupes de colonnes (U1, U4, U5) ---------- */

/* Colonne figée « Dossier » : largeur bornée pour laisser voir les chiffres à 375 px. */
.tableau-budgets tbody > tr > td:first-child .cellule-titre { min-width: 160px; max-width: 260px; }
@media (max-width: 560px) {
    /* Trois onglets sur toute la largeur, une ligne (le motif générique passe à deux colonnes). */
    nav.actions.vues-temps { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
    nav.actions.vues-temps > * { white-space: normal; }
    /* ‹ S44 et dates › sur une ligne, flèches aux deux bouts ; « Cette semaine » dessous. */
    .semainier__navigation { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; width: 100%; }
    .semainier__navigation > :nth-child(n+4) { grid-column: 1 / -1; justify-self: start; }
    .semainier__libelle { flex-direction: column; align-items: center; gap: 0; text-align: center; }
    .semainier__calendrier { width: 100%; }
    .semainier__calendrier input { flex: 1; min-width: 0; }
}

@media (max-width: 720px) {
    .tableau-budgets tbody > tr > td:first-child .cellule-titre { min-width: 0; width: 132px; }
}
.tableau-budgets td.nombre, .tableau-budgets th.nombre { white-space: nowrap; }

/* Groupe replié en synthèse : « Temps » garde l'alerte, « Marge » garde la marge.
   Le contrôleur commun masque toutes les cellules du groupe et ajoute une colonne étroite ;
   ici la cellule de synthèse reste affichée et prend la place de cette colonne étroite. */
.tableau-budgets .colonnes-repliables__masquee.budgets__synthese { display: table-cell; }
.tableau-budgets .colonnes-repliables__repli:is([data-groupe='temps'], [data-groupe='marge']) { display: none; }
.tableau-budgets .colonnes-repliables__masquee.budgets__synthese { border-left: 1px solid var(--trait-2); }
.tableau-budgets th[data-groupe] .aide { font-weight: 400; }

/* ---------- Budgets : temps passé et avancement sur le budget de l'exercice (U3, DS-B) ---------- */

/* Durée à gauche, jauge fine (blocs.avancement) à droite ; ton « erreur » au-delà de 125 %. */
.budgets-passe-cellule { display: flex; align-items: center; justify-content: flex-end; gap: var(--e-3); }
.budgets-passe .avancement { min-width: 96px; }

/* ---------- Coûts de revient (K1, K3) ---------- */

/* Tableau « En vigueur » en colonne principale, formulaire en colonne latérale. */
.couts-mise-en-page { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
@media (max-width: 960px) {
    .couts-mise-en-page { grid-template-columns: minmax(0, 1fr); }
}
.couts-formulaire .grille-champs { grid-template-columns: minmax(0, 1fr); }

/* Suppression : lien d'action en couleur d'erreur, confirmation par le contrôleur commun. */
.lien-bouton.couts-supprimer { color: var(--danger-texte); }
.lien-bouton.couts-supprimer:hover { color: var(--danger-texte); text-decoration: underline; }

/* ===== facturation.css ===== */
/* Facturation et CA réel.
   Feuille de domaine du lot F (vague 1), créée et importée par assets/app.js au lot T0.
   Seul ce lot l'écrit ; app.css reste réservé aux jetons et composants (docs/DESIGN-SYSTEM.md §9.9). */

/* ---------- Commun : aide repliée, cartes empilées ---------- */

.facturation__details { margin: 0 0 var(--e-4); font-size: var(--t-sm); }
.facturation__details > summary { width: fit-content; color: var(--primaire); font-weight: 500; cursor: pointer; }
.facturation__details > summary:hover { color: var(--primaire-survol); text-decoration: underline; }
.facturation__details[open] > summary { margin-bottom: var(--e-2); }
.facturation__details > .aide { margin: 0; max-width: 72ch; }
.champ .facturation__details { margin: 0; }
.facturation__carte-suivante { margin-top: var(--e-3); }
.facturation__sous-titre { font-size: var(--t-sm); margin: var(--e-3) 0 var(--e-2); }

/* ---------- À facturer ---------- */

/* Indicateurs : quatre petites cartes sur une ligne au bureau, deux par ligne au téléphone. */
.facturation__indicateurs { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); margin-top: var(--e-4); }
.facturation__indicateurs > .carte { padding: var(--e-4); }
.facturation__indicateurs > .carte > h2:first-child { margin-bottom: 0; }

/* Tri par colonne : l'en-tête reste un libellé gris, le lien n'apparaît qu'au survol. */
.facturation__tri { color: inherit; text-decoration: none; white-space: nowrap; }
.facturation__tri:hover { color: var(--encre); text-decoration: underline; }
th[aria-sort] .facturation__tri { color: var(--encre); }

.facturation__tableau th, .facturation__tableau td { padding: 8px 8px; }
.facturation__tableau td:first-child { min-width: 120px; }
/* Colonnage : le libellé absorbe la place libre (plus de grand vide avant les actions), l'entité tient sur une ligne,
   le suivi et le montant restent serrés, les actions forment une colonne compacte alignée à droite. */
.facturation__tableau .facturation__col-libelle { width: 100%; }
.facturation__tableau td.facturation__libelle { min-width: 180px; }
.facturation__tableau td.facturation__libelle .etiquette { margin-right: var(--e-1); }
.facturation__tableau td.facturation__entite { white-space: nowrap; }
.facturation__tableau td.facturation__prix { white-space: nowrap; }
.facturation__tableau td.facturation__suivi { min-width: 110px; max-width: 240px; overflow-wrap: anywhere; }
/* Lot W3H : une longue référence de facture est coupée (texte complet au survol) plutôt que d'élargir la colonne. */
.facturation__tableau td.facturation__suivi .etiquette { display: inline-block; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.facturation__tableau .facturation__col-actions { width: 1%; padding-left: var(--e-3); }
/* Groupe « Détail facturation » replié : colonne étroite, l'intitulé passe sur plusieurs lignes au lieu de garder sa largeur d'une ligne. */
.facturation__tableau .colonnes-repliables__groupe--replie { width: 1%; }
.facturation__tableau .colonnes-repliables__groupe--replie .colonnes-repliables__bouton { padding: 4px 8px; white-space: normal; }
.facturation__tableau .colonnes-repliables__repli { width: 12px; }
/* Actions AGO : deux liens d'action espacés de 12 px, cibles de 40 px sous 720 px. */
.facturation__actions { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--e-1); white-space: nowrap; }

.facturation__entites { margin-top: var(--e-4); }
.facturation__entites .bloc__tete > .aide { margin: 0; }

/* ---------- CA réel ---------- */

/* Année à côté du titre : champ compact et bouton secondaire alignés. */
.facturation__annee { display: flex; align-items: flex-end; gap: var(--e-2); }
.facturation__annee .champ { flex-direction: row; align-items: center; gap: var(--e-2); margin: 0; }
.facturation__annee .champ select { min-width: 96px; }

.facturation__onglets { margin-top: var(--e-2); }
/* Lot W3G : onglets et première carte resserrés pour que le tableau de synthèse remonte. */
.facturation__onglets > .onglets__liste { margin-bottom: var(--e-2); }
.facturation__onglets .onglets__onglet { height: 34px; }
.facturation__onglets .onglets__panneau > .carte:not(.bloc):first-of-type { padding: var(--e-3); }
.facturation__titre-aide { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2) !important; }
.facturation__bloc-titre { display: flex; align-items: center; gap: var(--e-2); }

/* Recherche dans les lignes. */
.facturation__recherche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-2) var(--e-3); margin-top: var(--e-3); }
.facturation__recherche .champ { flex: 1 1 260px; max-width: 420px; margin: 0; }

/* Rapport d'import en blocs (DS-B) : titre au-dessus de la grille, le bloc de contrôles suit la grille. */
.rapport-import { margin-bottom: var(--e-4); }
.rapport-import__titre { margin: 0 0 var(--e-3); }
.rapport-import > .blocs + .blocs { margin-top: var(--e-3); }
.rapport-import > .blocs + .bloc { margin-top: var(--e-3); }
#rapport-import .facturation__details { margin: var(--e-3) 0 0; }
#rapport-import .facturation__details summary .etiquette { margin-left: var(--e-1); }

/* Zone de dépôt du fichier CSV : cadre pointillé, bouton de choix au style secondaire. */
.facturation__depot input[type='file'] {
    height: auto; padding: var(--e-4); cursor: pointer;
    border: 1px dashed var(--trait); border-radius: var(--rayon-champ); background: var(--surface-2);
    font-size: var(--t-sm); color: var(--encre-douce); max-width: 100%;
}
.facturation__depot input[type='file']:hover { border-color: var(--encre-douce); background: var(--surface-4); }
.facturation__depot input[type='file']::file-selector-button {
    height: 32px; margin-right: var(--e-3); padding: 0 var(--e-3);
    border: 1px solid var(--trait); border-radius: var(--rayon-champ); background: var(--surface);
    font: 500 var(--t-sm) var(--police); color: var(--encre); cursor: pointer;
}
.facturation__depot input[type='file']::file-selector-button:hover { background: var(--surface-4); }

/* Synchronisation Pennylane : mois, simulation et bouton sur une ligne, repliés au besoin. */
.facturation__synchro { flex-wrap: wrap; margin-left: 0; gap: var(--e-2) var(--e-3); }
.facturation__case { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); white-space: nowrap; }
.facturation__case input { width: 16px; height: 16px; accent-color: var(--primaire); }

@media (max-width: 720px) {
    .facturation__indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .facturation__actions { gap: var(--e-4); }
    .facturation__actions .lien-bouton { min-height: 40px; }
    .facturation__tableau td:first-child { min-width: 140px; }
    .facturation__annee { width: 100%; }
    .facturation__annee .champ { flex: 1; }
    .facturation__annee .champ select { flex: 1; }
}

/* ---------- Débours : total dans la bande d'indicateurs (DS-B) ---------- */
.indicateur .compteur { margin: 0; min-width: 0; padding: 0; background: none; font: inherit; color: inherit; }

/* ---------- Lot P1-1a : statut de la semaine, validation et verrous des temps ---------- */
.statut-semaine { display: grid; gap: var(--e-2); margin: var(--e-3) 0; padding: var(--e-3) var(--e-4); border: 1px solid var(--trait-2); border-left-width: 4px; border-radius: var(--rayon-carte); background: var(--surface); }
.statut-semaine p { margin: 0; }
.statut-semaine__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); }
.statut-semaine__titre { margin: 0; font-size: var(--t-lg); }
.statut-semaine__motifs { margin: 0; padding-left: 1.2em; color: var(--encre-douce); font-size: var(--t-sm); }
.statut-semaine__commentaire { margin: 0; padding: var(--e-2) var(--e-3); border-left: 3px solid var(--trait); color: var(--encre); white-space: pre-line; }
.statut-semaine--brouillon { border-left-color: var(--trait); }
.statut-semaine--soumise { border-left-color: var(--primaire); }
.statut-semaine--approuvee { border-left-color: var(--succes-texte); }
.statut-semaine--renvoyee { border-left-color: var(--attention-texte); }
.statut-semaine--brouillon .statut-semaine__etiquette, .statut-semaine__etiquette.statut-semaine--brouillon { --point: var(--neutre); background: var(--neutre-fond); color: var(--neutre-texte); }
.statut-semaine--soumise .statut-semaine__etiquette, .statut-semaine__etiquette.statut-semaine--soumise { --point: var(--primaire); background: var(--primaire-pale); color: var(--primaire); }
.statut-semaine--approuvee .statut-semaine__etiquette, .statut-semaine__etiquette.statut-semaine--approuvee { --point: var(--succes); background: var(--succes-fond); color: var(--succes-texte); }
.statut-semaine--renvoyee .statut-semaine__etiquette, .statut-semaine__etiquette.statut-semaine--renvoyee { --point: var(--attention); background: var(--attention-fond); color: var(--attention-texte); }
.grille-temps__case--verrouillee input { background: var(--surface-2); color: var(--encre-douce); cursor: not-allowed; }
.verrous-temps__cloture { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.verrous-temps__nouvelle { margin-top: var(--e-3); }

/* ---------- Intégration P1-1 : motif d'une semaine incomplète (H3) et part facturable (décision 5) ---------- */
.statut-semaine form.en-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-2); }
.statut-semaine__motif { margin: 0; min-width: min(100%, 18rem); }
.statut-semaine__manque { color: var(--attention-texte); font-size: var(--t-sm); }
.etiquette--facturable { margin-left: var(--e-1); font-size: var(--t-xs); vertical-align: middle; }
.grille-temps__facturable :is(th, td) { color: var(--encre-douce); font-weight: 400; }

/* ---------- Complétude et relances (lot P1-1c) ---------- */

/* Bandeau « semaine précédente incomplète » (temps/_bandeau_semaine_precedente). */
.bandeau-semaine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); }
.bandeau-semaine > span { min-width: 0; }
.bandeau-semaine .bouton { flex: none; }

/* Relance en masse : bouton dans l en-tête du bloc. */
.relances-masse { margin: 0; }