/*
  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(--carnet-encre); color: var(--couleur-blanc); 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(4, 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(--carnet-encre); color: var(--couleur-blanc); 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(--couleur-blanc); 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(--couleur-blanc); 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(--carnet-encre); color: var(--couleur-blanc); 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(--carnet-encre); color: var(--couleur-blanc); 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(--couleur-blanc); }
.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); }