/* =====================================================================
   Punch DTR — feuille de style commune

   Deux contraintes ont dicté à peu près tout ce qui suit :

     · Un gars avec des gants, dans le noir, dans un tracteur qui vibre.
       D'où les boutons hauts (56 px minimum), les contrastes forts et
       l'absence totale de menus déroulants sur le mobile.
     · Un écran allumé à 3 h du matin dans une cabine. D'où le fond
       sombre : un écran blanc éblouit et détruit la vision de nuit.
   ===================================================================== */

:root {
  --fond:        #10151c;
  --fond-2:      #182029;
  --fond-3:      #212c38;
  --bord:        #2c3947;
  --texte:       #e8eef5;
  --texte-faible:#93a3b5;
  --accent:      #ff9f1c;   /* orange gyrophare */
  --accent-2:    #ffb84d;
  --vert:        #35c47f;
  --rouge:       #ef4b4b;
  --jaune:       #f2c14e;
  --bleu:        #4a9dd6;
  --rayon:       12px;
  --ombre:       0 2px 10px rgb(0 0 0 / 40%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; font-weight: 650; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; color: var(--texte-faible); text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
p  { margin: 0 0 .8em; }
a  { color: var(--accent-2); }

/* ---- boutons ------------------------------------------------------- */

button, .bouton {
  font: inherit;
  font-weight: 600;
  color: var(--texte);
  background: var(--fond-3);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: .7em 1.1em;
  min-height: 48px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  text-decoration: none;
  transition: background .12s ease, transform .06s ease;
}
button:hover, .bouton:hover { background: #2a3745; }
button:active, .bouton:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.principal { background: var(--accent); color: #1a1200; border-color: var(--accent); }
.principal:hover { background: var(--accent-2); }
.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.discret { background: transparent; border-color: transparent; color: var(--texte-faible); }
.pleine { width: 100%; }

/* ---- champs -------------------------------------------------------- */

label { display: block; font-size: .85rem; color: var(--texte-faible); margin-bottom: .3em; }
input, select, textarea {
  font: inherit;
  width: 100%;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: .65em .8em;
  min-height: 48px;
}
textarea { min-height: 96px; resize: vertical; }
.champ { margin-bottom: 1em; }

/* ---- structure ----------------------------------------------------- */

.page { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.etroit { max-width: 460px; }

.carte {
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--ombre);
}
.carte > h2 { margin-top: 0; }

.rangee { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.entre  { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Deux colonnes de formulaire sur un écran de bureau, une seule sur un
   téléphone. Le formulaire d'embauche a dix champs : en une colonne il
   faut défiler pour voir le bouton, et on finit par créer des fiches à
   moitié remplies. */
.deux { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .deux { grid-template-columns: 1fr; } }

/* Une ligne d'employé parti : lisible, mais visiblement au repos. */
tr.eteint td { opacity: .55; }
tr.eteint td a { text-decoration: line-through; }

.faible { color: var(--texte-faible); }
.petit  { font-size: .85rem; }
.gros   { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chiffre{ font-variant-numeric: tabular-nums; }
.centre { text-align: center; }

/* ---- pastilles ----------------------------------------------------- */

.pastille {
  display: inline-block;
  padding: .18em .6em;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.p-vert  { background: rgb(53 196 127 / 18%); color: var(--vert);  border-color: rgb(53 196 127 / 40%); }
.p-rouge { background: rgb(239 75 75 / 18%);  color: var(--rouge); border-color: rgb(239 75 75 / 40%); }
.p-jaune { background: rgb(242 193 78 / 18%); color: var(--jaune); border-color: rgb(242 193 78 / 40%); }
.p-bleu  { background: rgb(74 157 214 / 18%); color: var(--bleu);  border-color: rgb(74 157 214 / 40%); }
.p-gris  { background: var(--fond-3); color: var(--texte-faible); border-color: var(--bord); }

/* ---- tableaux ------------------------------------------------------ */

.defile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55em .6em; border-bottom: 1px solid var(--bord); white-space: nowrap; }
th { color: var(--texte-faible); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
tbody tr:hover { background: var(--fond-3); }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- messages ------------------------------------------------------ */

.avis {
  border-radius: var(--rayon);
  padding: .8em 1em;
  margin-bottom: 1rem;
  border: 1px solid var(--bord);
  background: var(--fond-2);
}
.avis.erreur  { border-color: var(--rouge); background: rgb(239 75 75 / 12%); }
.avis.succes  { border-color: var(--vert);  background: rgb(53 196 127 / 12%); }
.avis.attention { border-color: var(--jaune); background: rgb(242 193 78 / 12%); }

/* Bandeau hors ligne : il colle en haut et ne se cache pas tout seul. */
#horsligne {
  position: sticky; top: 0; z-index: 50;
  background: var(--rouge); color: #fff;
  padding: .5em 1em; text-align: center; font-weight: 600;
  display: none;
}
body.horsligne #horsligne { display: block; }

/* ---- en-tête ------------------------------------------------------- */

.entete {
  position: sticky; top: 0; z-index: 40;
  background: var(--fond-2);
  border-bottom: 1px solid var(--bord);
  padding: .6rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.entete .marque { font-weight: 700; letter-spacing: .02em; }
.entete .marque span { color: var(--accent); }

/* ---- onglets du bas (mobile) --------------------------------------- */

.barre-bas {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: grid; grid-auto-flow: column;
  background: var(--fond-2);
  border-top: 1px solid var(--bord);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-bas button {
  background: transparent; border: none; border-radius: 0;
  flex-direction: column; gap: .15em;
  font-size: .7rem; font-weight: 600;
  color: var(--texte-faible);
  min-height: 60px;
  padding: .4em 0;
}
.barre-bas button.actif { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.barre-bas .pip {
  position: absolute; transform: translate(14px, -14px);
  background: var(--rouge); color: #fff;
  border-radius: 999px; font-size: .65rem; padding: 0 .4em; min-width: 1.2em;
}

/* ---- menu latéral (bureau) ----------------------------------------- */

.bureau { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.menu {
  background: var(--fond-2);
  border-right: 1px solid var(--bord);
  padding: 1rem .6rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.menu button {
  justify-content: flex-start;
  background: transparent; border-color: transparent;
  min-height: 44px; font-weight: 600;
}
.menu button.actif { background: var(--fond-3); border-color: var(--bord); color: var(--accent); }
.menu .sep { height: 1px; background: var(--bord); margin: .6rem .4rem; }

@media (max-width: 820px) {
  .bureau { grid-template-columns: 1fr; }
  .menu { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--bord); }
  .menu .sep { display: none; }
  .menu button { white-space: nowrap; }
}

/* ---- tuiles du portail --------------------------------------------- */

.tuile {
  display: block; text-decoration: none; color: inherit;
  background: var(--fond-2); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 1.1rem;
  transition: border-color .12s ease, transform .08s ease;
}
.tuile:hover { border-color: var(--accent); transform: translateY(-2px); }
.tuile .titre { font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; }
.tuile .resume { color: var(--texte-faible); font-size: .88rem; }
.tuile .rond {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--fond-3); border: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .7rem; font-size: 1.3rem;
}

/* ---- gros bouton de punch ------------------------------------------ */

.punch {
  width: 100%; min-height: 140px;
  font-size: 1.5rem; font-weight: 800; letter-spacing: .02em;
  border-radius: 20px;
}
.punch.entrer { background: var(--vert); border-color: var(--vert); color: #04180e; }
.punch.sortir { background: var(--rouge); border-color: var(--rouge); color: #fff; }

.minuterie { font-size: 3rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---- fenêtre modale ------------------------------------------------ */

dialog {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond-2);
  color: var(--texte);
  max-width: 620px; width: calc(100% - 2rem);
  padding: 1.2rem;

  /* Une fenêtre plus haute que l'écran cache son propre bouton. Le
     formulaire d'embauche fait dix champs : sur un portable, « Créer le
     compte » tombait sous le bord et on croyait le formulaire brisé.
     Elle défile maintenant à l'intérieur d'elle-même. */
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog::backdrop { background: rgb(0 0 0 / 65%); }

/* ---- divers -------------------------------------------------------- */

.liste-nue { list-style: none; margin: 0; padding: 0; }
.liste-nue li { border-bottom: 1px solid var(--bord); padding: .7em 0; }
.liste-nue li:last-child { border-bottom: none; }

.chargement { color: var(--texte-faible); padding: 2rem; text-align: center; }

.pied { color: var(--texte-faible); font-size: .8rem; text-align: center; padding: 2rem 1rem 6rem; }

/* ---- petites classes utilitaires -----------------------------------
   Elles existent pour une raison de sécurité, pas de commodité : la
   politique de contenu est `style-src 'self'`, donc aucun attribut
   style= n'est autorisé dans les pages. Ce qui aurait été un style en
   ligne devient une classe ici.
   -------------------------------------------------------------------- */

.connexion   { padding-top: 8vh; }
.enseigne    { margin-bottom: 1.6rem; }
.enseigne h1 { margin-top: .6rem; }
.accent      { color: var(--accent); }
.avec-barre  { padding-bottom: 76px; }
.espace-haut { margin-top: .8rem; }
.espace-bas  { margin-bottom: .5rem; }
.a-gauche    { justify-content: flex-start; }
.case        { width: auto; min-height: auto; }

/* ---- ronde de sécurité ----------------------------------------------
   Trois segments par point, assez gros pour un pouce ganté. Le vert, le
   jaune et le rouge sont les seules couleurs que quelqu'un lit sans
   réfléchir à 4 h du matin.
   -------------------------------------------------------------------- */

.section-ronde { border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: .7rem; overflow: hidden; }
.section-ronde > summary {
  padding: .8em 1em; cursor: pointer; font-weight: 700;
  background: var(--fond-2); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
}
.section-ronde > summary::-webkit-details-marker { display: none; }
.section-ronde[open] > summary { border-bottom: 1px solid var(--bord); }
.section-ronde .dedans { padding: .6rem .8rem; }

.point { padding: .6rem 0; border-bottom: 1px solid var(--bord); }
.point:last-child { border-bottom: none; }
.point .nom { margin-bottom: .45em; }

.segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.segments button {
  min-height: 52px; font-size: .82rem; font-weight: 700;
  padding: .4em .2em; border-radius: 10px;
}
.segments button[aria-pressed="true"].seg-ok   { background: var(--vert);  border-color: var(--vert);  color: #04180e; }
.segments button[aria-pressed="true"].seg-min  { background: var(--jaune); border-color: var(--jaune); color: #201800; }
.segments button[aria-pressed="true"].seg-maj  { background: var(--rouge); border-color: var(--rouge); color: #fff; }

.progression {
  position: sticky; top: 56px; z-index: 30;
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: .6rem .9rem; margin-bottom: .8rem;
}
.jauge { height: 8px; border-radius: 999px; background: var(--fond-3); overflow: hidden; margin-top: .4em; }
.jauge > i { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }

.bandeau {
  border-radius: var(--rayon); padding: .9em 1em; margin-bottom: .9rem;
  font-weight: 650; border: 1px solid transparent;
}
.bandeau.ok   { background: rgb(53 196 127 / 16%); border-color: var(--vert);  color: var(--vert); }
.bandeau.min  { background: rgb(242 193 78 / 16%); border-color: var(--jaune); color: var(--jaune); }
.bandeau.maj  { background: rgb(239 75 75 / 18%);  border-color: var(--rouge); color: var(--rouge); }

/* ---- fiche du contrôleur routier ------------------------------------
   Gros caractères, fond clair, et surtout : imprimable seule. Le
   contrôleur regarde un téléphone tenu à bout de bras, dehors, l'hiver.
   -------------------------------------------------------------------- */

.fiche {
  background: #fff; color: #111; border-radius: var(--rayon);
  padding: 1.2rem; font-size: 1.05rem;
}
.fiche h1 { font-size: 1.5rem; margin-bottom: .2em; }
.fiche .verdict { font-size: 1.15rem; font-weight: 800; padding: .7em 1em; border-radius: 10px; margin: .8rem 0; }
.fiche .verdict.ok  { background: #d6f3e4; color: #054f2c; }
.fiche .verdict.min { background: #ffe9c6; color: #763c00; }
.fiche .verdict.maj { background: #ffdfdc; color: #8a100b; }
.fiche table { color: #111; }
.fiche th, .fiche td { border-color: #d5dae4; white-space: normal; }
.fiche th { color: #444; }
.fiche .paire { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1rem; margin: .8rem 0; }
.fiche .paire b { display: block; font-size: .75rem; color: #555; text-transform: uppercase; letter-spacing: .03em; }
.fiche .declaration { border-top: 2px solid #111; margin-top: 1.2rem; padding-top: .8rem; font-size: .9rem; }

@media print {
  body > *:not(#impression) { display: none !important; }
  #impression, #impression * { visibility: visible; }
  #impression { position: absolute; inset: 0; padding: 0; }
  .fiche { box-shadow: none; border-radius: 0; }
  .sans-impression { display: none !important; }
}

.rouge { color: var(--rouge); }
.vert  { color: var(--vert); }