/*
  Application de pointage : piste graphique A « Carnet de chantier » (décision D-M du 2026-11-01).
  Complète la charte ADG (tokens.css, base.css, composants.css) : fond papier chaud, bandeau encre avec le logo
  sur plaque blanche, titres en capitales condensées, rouge du logo réservé au jour actif et au bouton « Rendre ».
  Polices Barlow et Barlow Condensed hébergées en local (fonts/, licence SIL OFL 1.1).
*/
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-400-normal.2bc763014449.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-600-normal.8074c760fbdd.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-600-normal.16cc9e59e14c.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-700-normal.936740600377.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Jetons propres au carnet de chantier ; les autres viennent de tokens.css */
  --carnet-papier: #F4F1EA;
  --carnet-encre: #12263A;
  --carnet-ombre: #E2DCCF;
  --carnet-papier-fonce: #FBF9F4;
  --carnet-ocre: #D98E04;
  --carnet-ocre-texte: #8A5A00;
  --carnet-ocre-clair: #FFF4D6;
  --carnet-jaune: #F2B705;
  --police-base: Barlow, Carlito, Calibri, "Segoe UI", Arial, sans-serif;
  --police-titre: "Barlow Condensed", Barlow, Arial Narrow, sans-serif;
  --couleur-fond: var(--carnet-papier);
  --couleur-texte: var(--carnet-encre);
  --rayon-carte: 14px;
  --largeur-laterale: 232px;
}
body { font-family: var(--police-base); font-weight: 400; background: var(--carnet-papier); color: var(--carnet-encre); }
strong, b { font-weight: 600; }
h1, h2, h3, .titre { font-family: var(--police-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
h1 { font-size: 1.75rem; margin: 0 0 var(--espace-3); }
h2 { font-size: 1.35rem; margin: var(--espace-4) 0 var(--espace-2); }
.petit, .texte-doux { color: var(--couleur-texte-doux); }
.surtitre { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--couleur-texte-doux); font-weight: 600; }

/* ---------- Coque : bandeau (téléphone) ou barre latérale (PC) ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.lateral { display: none; }
.bandeau { background: var(--fond-sombre); color: var(--texte-sur-sombre); padding: var(--espace-3) var(--espace-4); display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); border-bottom: var(--epaisseur-entete) solid var(--couleur-bleu-logo); }
.plaque { background: var(--couleur-blanc); border-radius: 6px; padding: 5px 9px; display: inline-flex; align-items: center; text-decoration: none; }
.plaque img { height: 26px; width: auto; display: block; }
.bandeau__qui { text-align: right; }
.bandeau__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; }
.bandeau__role { font-size: var(--taille-petite); opacity: .8; }
.contenu { flex: 1; width: 100%; max-width: var(--largeur-contenu); margin: 0 auto; padding: var(--espace-4); box-sizing: border-box; }
.nav-bas { position: sticky; bottom: 0; background: var(--couleur-blanc); border-top: var(--epaisseur-filet) solid var(--carnet-ombre); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: var(--espace-2) 0 var(--espace-3); z-index: 5; }
.nav-bas a { text-decoration: none; text-align: center; font-size: .75rem; font-weight: 600; color: var(--couleur-texte-doux); display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: var(--cible-min); justify-content: center; }
.nav-bas a svg { width: 24px; height: 24px; }
.nav-bas a[aria-current="page"] { color: var(--couleur-bleu-action); }
@media (min-width: 821px) {
  .app { flex-direction: row; }
  .lateral { display: flex; flex-direction: column; gap: var(--espace-1); width: var(--largeur-laterale); flex: 0 0 var(--largeur-laterale); background: var(--fond-sombre); color: var(--texte-sur-sombre); padding: var(--espace-5) var(--espace-4); position: sticky; top: 0; height: 100vh; box-sizing: border-box; }
  .lateral .plaque { margin-bottom: var(--espace-5); width: fit-content; }
  .lateral .plaque img { height: 34px; }
  .lateral a.menu { color: var(--texte-sur-sombre); opacity: .85; text-decoration: none; padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-controle); font-weight: 600; min-height: var(--cible-min); display: flex; align-items: center; gap: var(--espace-2); }
  .lateral a.menu:hover { opacity: 1; background: rgba(255,255,255,.08); }
  .lateral a.menu[aria-current="page"] { opacity: 1; color: var(--carnet-encre); background: var(--couleur-blanc); border-left: 6px solid var(--couleur-rouge-logo); font-weight: 700; }
  .lateral .menu__compteur { margin-left: auto; background: var(--couleur-rouge-logo); color: var(--texte-sur-sombre); border-radius: var(--rayon-pastille); padding: 1px 10px; font-size: var(--taille-petite); }
  .lateral .lateral__qui { margin-top: auto; font-size: var(--taille-petite); opacity: .7; }
  .page { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .bandeau { display: none; }
  .nav-bas { display: none; }
  .contenu { padding: var(--espace-6) var(--espace-6); max-width: none; }
}

/* ---------- Tuiles de l'accueil ---------- */
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-3); }
.tuile { display: flex; flex-direction: column; justify-content: space-between; gap: var(--espace-2); min-height: 120px; padding: var(--espace-4); background: var(--couleur-blanc); border-radius: var(--rayon-carte); box-shadow: 0 2px 0 var(--carnet-ombre); text-decoration: none; color: inherit; }
.tuile svg { width: 26px; height: 26px; color: var(--couleur-bleu-action); }
.tuile h2 { margin: 0; font-size: 1.25rem; }
.tuile p { margin: 0; font-size: var(--taille-petite); color: var(--couleur-texte-doux); }
.tuile-principale { grid-column: 1 / -1; border-left: 10px solid var(--couleur-bleu-logo); padding: var(--espace-4) var(--espace-4) var(--espace-4); }
.tuile-principale h2 { font-size: 1.6rem; }
.tuile p.tuile__chiffre { font-family: var(--police-titre); font-weight: 700; font-size: 3.6rem; line-height: 1; color: var(--couleur-bleu-action); margin: 0; }
.tuile__chiffre small { font-size: 1.6rem; }
.tuile__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espace-3); flex-wrap: wrap; }
.jauge-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: var(--espace-3); }
.jauge-jours span { height: 10px; border-radius: 5px; background: var(--carnet-ombre); }
.jauge-jours span.plein { background: var(--couleur-bleu-action); }
.jauge-jours span.absence { background: var(--carnet-ocre); }
.jauge-jours__lettres { display: flex; justify-content: space-between; font-size: .75rem; color: var(--couleur-texte-doux); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.bouton-encre { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible-min); padding: 0 var(--espace-4); background: var(--fond-sombre); color: var(--texte-sur-sombre); border: 0; border-radius: var(--rayon-controle); font-family: var(--police-titre); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; cursor: pointer; }
.bouton-rouge { background: var(--couleur-rouge-logo); }
.bouton-rouge:hover { background: var(--couleur-rouge-danger); }
.bouton-contour { background: transparent; color: var(--carnet-encre); border: 2px solid var(--carnet-encre); }
.pastilles { display: flex; gap: var(--espace-2); flex-wrap: wrap; }
.pastille { border: 2px solid var(--couleur-bleu-action); color: var(--couleur-bleu-action); border-radius: var(--rayon-pastille); padding: 5px 12px; font-weight: 600; font-size: var(--taille-petite); text-decoration: none; }
@media (min-width: 821px) { .tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tuile-principale { grid-column: span 2; } }

/* ---------- Listes (Mes semaines), formulaires, synthèse ---------- */
.liste-semaines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
.liste-semaines li a { display: grid; grid-template-columns: 1fr auto; gap: var(--espace-1) var(--espace-3); padding: var(--espace-3) var(--espace-4); background: var(--couleur-blanc); border-left: 8px solid var(--carnet-ombre); border-radius: var(--rayon-carte); box-shadow: 0 2px 0 var(--carnet-ombre); text-decoration: none; color: inherit; min-height: var(--cible-mobile); }
.liste-semaines li a.retard { border-left-color: var(--couleur-rouge-danger); }
.liste-semaines li a.rendue { border-left-color: var(--carnet-ocre); }
.liste-semaines li a.validee { border-left-color: var(--couleur-succes); }
.liste-semaines .semaine__titre { font-family: var(--police-titre); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; }
.liste-semaines .semaine__dates { color: var(--couleur-texte-doux); font-size: var(--taille-petite); grid-column: 1 / -1; }
.liste-semaines .semaine__total { font-family: var(--police-titre); font-weight: 700; font-size: 1.4rem; text-align: right; color: var(--couleur-bleu-action); }
.formulaire { max-width: 520px; }
.case { display: flex; align-items: center; gap: var(--espace-3); min-height: var(--cible-min); font-size: var(--taille-texte); }
.case input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--couleur-bleu-action); }
.formulaire .bouton { width: 100%; min-height: var(--cible-mobile); font-size: var(--taille-bouton-mobile); margin-top: var(--espace-3); font-family: var(--police-titre); text-transform: uppercase; letter-spacing: .03em; }
.synthese table { width: 100%; border-collapse: collapse; background: var(--couleur-blanc); font-size: var(--taille-petite); border-radius: var(--rayon-carte); overflow: hidden; }
.synthese th, .synthese td { border-bottom: var(--epaisseur-filet) solid var(--carnet-ombre); padding: var(--espace-2) var(--espace-3); text-align: left; }
.synthese thead th { background: var(--fond-sombre); color: var(--texte-sur-sombre); font-family: var(--police-titre); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.ecarts { padding-left: 1.2em; margin: var(--espace-2) 0 0; }
.message { font-family: var(--police-base); }
@media (min-width: 821px) { .formulaire .bouton { width: auto; min-width: 240px; } }

/* Bandeaux de version (docs/10_MISE_A_JOUR.md) */
.message--info { background: var(--couleur-bleu-glacier); border-left-color: var(--couleur-bleu-action); }
.message .bouton--petit { margin-left: var(--espace-2); vertical-align: middle; }

/* Vue « comme » (E-18) */
.vue-comme { display: grid; gap: var(--espace-1); padding: var(--espace-2) var(--espace-3); margin-top: auto; }
.lateral .vue-comme { color: var(--texte-sur-sombre); }
.lateral .vue-comme .champ { min-height: 36px; font-size: var(--taille-petite); }
.vue-comme--bas { margin-top: var(--espace-5); padding-top: var(--espace-3); border-top: 1px dashed var(--couleur-bordure); }
@media (min-width: 821px) { .vue-comme--bas { display: none; } }

/* Installation sur téléphone (D-AC) */
.installer { margin-top: var(--espace-4); border-left: 6px solid var(--couleur-bleu-logo); }
.installer .bouton-encre { margin-top: var(--espace-2); }

/* D-AG : messages d'accueil qu'on ferme (×) ou qui partent seuls après 30 s */
.ephemere { position: relative; padding-right: calc(var(--cible-min) + var(--espace-2)); transition: opacity .3s; }
.ephemere--sortie { opacity: 0; }
.ephemere__fermer { position: absolute; top: 50%; right: var(--espace-1); transform: translateY(-50%); width: var(--cible-min); height: var(--cible-min); border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: inherit; }
.carte.ephemere .ephemere__fermer, .installer.ephemere .ephemere__fermer { top: var(--espace-2); transform: none; }

/* D-AG : écran « Rendre » étroit sur téléphone */
.synthese--etroite table { table-layout: auto; }
.synthese--etroite th, .synthese--etroite td { padding: var(--espace-2) 6px; white-space: nowrap; }
.synthese--etroite thead th { font-size: .85rem; }
.synthese__commentaire td { white-space: normal; font-size: .8rem; color: var(--couleur-texte-doux); border-top: 0; padding-top: 0; }
.liste-simple { list-style: none; padding: 0; margin: 0 0 var(--espace-3); }
.liste-simple li { padding: var(--espace-2) 0; border-bottom: var(--epaisseur-filet) solid var(--carnet-ombre); }
.connexion-empreinte { margin-bottom: var(--espace-4); }
.connexion-empreinte .bouton { width: 100%; }

/* D-AH : onglet « Chantiers » du salarié */
.liste-chantiers { list-style: none; padding: 0; margin: var(--espace-3) 0; display: grid; gap: var(--espace-2); }
.liste-chantiers__item { background: var(--couleur-blanc); border-radius: 10px; padding: var(--espace-3); box-shadow: 0 2px 0 var(--carnet-ombre); display: grid; gap: 2px; }
.liste-chantiers__tete { display: flex; align-items: baseline; gap: var(--espace-2); }
.liste-chantiers__numero { font-family: var(--police-titre); font-size: 1.15rem; }
.liste-chantiers__type { margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--couleur-texte-doux); }

/* ---------- Retours du 2026-11-03 (D-AI) ---------- */
/* PC : la barre latérale ne dépasse jamais la hauteur de l'écran (plus de défilement à vide sur l'accueil). */
@media (min-width: 821px) { .lateral { overflow-y: auto; } }
.app { overflow-x: clip; } /* téléphone : rien ne déborde sur le côté ; les tableaux défilent dans leur cadre */
.accueil__bonjour { margin: 0 0 var(--espace-3); text-transform: none; letter-spacing: 0; }
.vue-comme { margin-top: 0; max-width: 420px; padding: 0; }
.carte--epargne { border-left: 8px solid var(--carnet-ocre, #C98A1B); }
.champ--court { max-width: 8rem; }
.cloture { margin-bottom: var(--espace-4); }
.cloture--figee { border-left: 8px solid var(--couleur-vert, #2E7D32); }
.comparer-barre { margin-bottom: var(--espace-3); }
.liste-semaines--cochable li { display: flex; align-items: stretch; gap: var(--espace-2); }
.liste-semaines--cochable li > a { flex: 1; min-width: 0; }
.liste-semaines__case { display: flex; align-items: center; padding: 0 var(--espace-2); }
.liste-semaines__case input { width: 24px; height: 24px; accent-color: var(--couleur-bleu-action); }
.comparatif td, .comparatif th { vertical-align: top; }
.comparatif--different th[scope="row"] { color: var(--couleur-rouge-logo); }
.fiche-pointages { max-height: 420px; overflow-y: auto; }

/* D-AJ : comparatif sur téléphone : colonne « jour » étroite (Lun, Mar…), les salariés côte à côte sans défilement. */
.comparatif__jour-court { display: none; }
.comparatif__diff { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: var(--carnet-ocre-clair); color: var(--carnet-ocre-texte); font-family: var(--police-texte, inherit); }
@media (max-width: 820px) {
  .tableau-statuts.comparatif { min-width: 0; table-layout: fixed; }
  .tableau-statuts.comparatif th, .tableau-statuts.comparatif td { padding: 8px 6px; white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
  .tableau-statuts.comparatif thead th { font-size: .85rem; }
  .comparatif thead th:first-child, .comparatif th[scope="row"] { width: 3.4rem; font-size: .9rem; }
  .comparatif__jour-long { display: none; }
  .comparatif__jour-court { display: inline; }
  .comparatif__diff { display: block; width: fit-content; margin: 4px 0 0; }
}