/* =====================================================================
   Horodateur360 — feuille de style commune

   DEUX CONTEXTES, DEUX THÈMES. Ce n'est pas une hésitation, c'est la
   conclusion d'une contrainte réelle :

     · Le TÉLÉPHONE et le KIOSQUE vivent dans un tracteur, la nuit, avec
       des gants. Fond sombre — un écran blanc à 3 h du matin éblouit et
       détruit la vision de nuit — boutons hauts, contrastes forts,
       aucun menu déroulant.
     · Le BUREAU vit sous les néons, le jour, devant un grand écran, et
       il affiche des tableaux et des chiffres pendant des heures. Fond
       clair : c'est plus lisible, moins fatigant, et c'est la maquette
       qui a été approuvée.

   Le sombre est donc la valeur par défaut, et les pages du bureau
   demandent le clair avec data-theme="clair" sur <html>. Les deux
   thèmes définissent EXACTEMENT les mêmes variables : aucune règle plus
   bas n'a besoin de savoir dans lequel elle tourne.
   =====================================================================

   HABILLAGE APPLE, le 4 septembre 2026. Anthony a demandé « le style
   d'Apple, ses couleurs, sa police, avec un ton éclatant limite glacé ».
   Ce sont les VRAIES valeurs d'Apple, pas des approximations : #1D1D1F
   l'encre d'apple.com, #86868B son gris de texte (foncé ici pour le contraste), #0071E3 le bleu de
   ses boutons, et les couleurs sémantiques d'iOS pour les états.

   CE QUI N'A PAS CHANGÉ, ET POURQUOI. Le téléphone et le kiosque
   RESTENT SOMBRES. « Éclatant » sur un écran tenu dans un tracteur à
   3 h du matin détruit la vision de nuit du chauffeur, et il conduit
   après. On leur a donc donné le thème sombre d'APPLE — noir vrai,
   surfaces élevées, bleu #0A84FF qui tient sur du noir — plutôt que
   l'ancien gris-bleu. C'est le même langage, appliqué à la contrainte
   réelle. Le bureau, lui, est passé au clair glacé au complet.

   LES GRIS SONT TIRÉS VERS LE BLEU. C'est ce qui fait la différence
   entre gris souris et givre, et c'est là que vit le « limite glacé ».
   ===================================================================== */

:root {
  /* Sombre — téléphone, kiosque, connexion. Le thème sombre d'Apple. */
  --fond:        #000000;
  --fond-2:      #14181F;
  --fond-3:      #1C2028;
  --bord:        #2A303A;
  --bord-doux:   #20262F;
  --texte:       #F5F5F7;
  --texte-2:     #AEAEB2;
  --texte-faible:#8E8E93;

  /* L'orange gyrophare reste la couleur d'action de la nuit : c'est ce
     qui se voit le plus vite sur du noir, et les gars le connaissent. */
  --accent:      #FF9F0A;
  --accent-2:    #FFB340;
  --sur-accent:  #1A1200;

  --teal:        #0A84FF;  --teal-doux:   #0A2540;
  --beacon:      #FF9F0A;  --beacon-doux: #33240A;
  --ok:          #30D158;  --ok-doux:     #0D2E18;
  --warn:        #FFD60A;  --warn-doux:   #322D08;
  --crit:        #FF453A;  --crit-doux:   #3A1310;

  /* Anciens noms, gardés : du code les utilise encore. */
  --vert: var(--ok); --rouge: var(--crit); --jaune: var(--warn); --bleu: var(--teal);

  --rayon:       14px;
  --survol:      #262C36;
  --ombre:       0 1px 2px rgb(0 0 0 / 50%), 0 8px 24px rgb(0 0 0 / 45%);
}

:root[data-theme="clair"] {
  /* Clair — le bureau. Le blanc glacé d'Apple, gris tirés vers le bleu. */
  --fond:        #FBFDFF;
  --fond-2:      #FFFFFF;
  --fond-3:      #F0F5FB;
  --bord:        rgba(0, 92, 175, 0.14);
  --bord-doux:   rgba(0, 92, 175, 0.09);
  --texte:       #1D1D1F;
  --texte-2:     #6E6E73;
  --texte-faible:#757579;

  /* Au bureau, la couleur d'action est le bleu d'Apple. L'orange reste
     réservé à ce qui presse : c'est ce qui rend « Mode tempête »
     repérable au milieu d'un écran où tout le reste est bleu. */
  --accent:      #0071E3;
  --accent-2:    #0071E3;
  --sur-accent:  #FFFFFF;

  --teal:        #0071E3;  --teal-doux:   #E8F2FE;
  --beacon:      #B25000;  --beacon-doux: #FFF0DC;
  /*  Le vert d'iOS (#34C759) et son gris secondaire (#86868B) sont
      superbes sur les grands titres d'Apple et ratent le contraste
      minimal en petit texte sur blanc : 3,0 et 3,6 pour 1, alors qu'il
      en faut 4,5. Ici on lit des colonnes de chiffres pendant des
      heures. On garde donc la teinte d'Apple, foncée juste assez pour
      passer : 5,2 pour le vert, 4,6 pour le gris. */
  --ok:          #1F7D35;  --ok-doux:     #E3F6E8;
  --warn:        #B25000;  --warn-doux:   #FFF0DC;
  --crit:        #C9241B;  --crit-doux:   #FEE7E5;

  --survol:      #E4EDF7;
  --ombre: 0 1px 2px rgb(0 45 90 / 5%), 0 6px 20px rgb(0 45 90 / 7%);
}

* { box-sizing: border-box; }

/*  SF Pro quand l'appareil l'a — c'est le cas sur un iPhone et un iPad,
    donc sur le téléphone des employés et sur les tablettes du garage.
    Apple ne distribue pas SF Pro ailleurs, alors sur un PC Windows on
    retombe sur Segoe UI, qui est la police système et qui va bien. */
html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- l'échelle typographique ----------------------------------------
 *
 *  LA RÈGLE D'APPLE, EN UNE PHRASE : plus le texte est gros, plus les
 *  lettres se rapprochent. Plus il est petit, plus elles s'écartent.
 *
 *  C'est de l'optique, pas du goût. Un grand corps a déjà assez d'air
 *  entre ses lettres et paraît lâche si on n'en enlève pas ; un petit
 *  corps se referme sur lui-même et devient illisible si on n'en ajoute
 *  pas. SF Pro fait ça automatiquement chez Apple, avec deux tailles
 *  optiques (Display et Text). Sur le web, il faut l'écrire à la main.
 *
 *      3 rem et plus   -0.032em     la minuterie du téléphone
 *      1,5 à 2 rem     -0.021em     h1, gros boutons
 *      1,2 rem         -0.014em     h2
 *      1 rem           0            le texte courant, on n'y touche pas
 *      0,8 rem et -    +0.02em      les petites étiquettes
 *      MAJUSCULES      +0.04em      toujours, quelle que soit la taille
 *
 *  Les majuscules sont la seule exception au sens de la règle : elles
 *  n'ont pas de jambages pour créer du rythme, alors elles ont besoin
 *  d'air à toutes les tailles.
 *
 *  LES GRAISSES. SF Pro n'existe qu'en 400, 500, 600 et 700. Le dépôt
 *  demandait du 650 et du 800, que le navigateur fabriquait en épaissant
 *  les traits lui-même : ça donne des bords sales et ça ne ressemble à
 *  aucune vraie graisse. Tout est ramené sur les quatre qui existent.
 * ------------------------------------------------------------------- */

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; font-weight: 600; text-wrap: balance; }
h1 { font-size: 1.5rem; letter-spacing: -.021em; }
h2 { font-size: 1.2rem; letter-spacing: -.014em; }
h3 {
  font-size: .8rem; font-weight: 600;
  color: var(--texte-faible);
  text-transform: uppercase; letter-spacing: .04em;
}
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;
}
/*  Le survol passait par une couleur écrite en dur, #2a3745, qui est
 *  l'ancien gris-bleu du thème sombre. Au bureau, en clair, un bouton
 *  survolé virait donc au bleu nuit : illisible, et personne ne l'avait
 *  vu parce qu'on ne survole pas en testant sur un téléphone.
 *
 *  Il a maintenant son propre jeton, `--survol`, plutôt que de réutiliser
 *  `--fond-3` qui est déjà le fond du bouton au repos : survoler
 *  n'aurait alors rien changé du tout. */
button:hover, .bouton:hover { background: var(--survol); border-color: var(--bord); }
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;
}

/* Le texte du bouton principal suit le thème : noir sur l'orange du
   téléphone, blanc sur le teal du bureau. En dur, il devenait illisible
   dès qu'on changeait de fond. */
.principal { background: var(--accent); color: var(--sur-accent); 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; }

/*  Le verre dépoli, au BUREAU seulement.
 *
 *  C'est ce qui donne le « limite glacé » demandé le 4 septembre 2026.
 *  Il est réservé au thème clair pour deux raisons : la translucidité
 *  n'a rien à donner sur du noir, et un flou coûte du travail au
 *  processeur graphique. Une tablette de garage ne doit pas dépenser sa
 *  batterie à flouter des fonds.
 *
 *  `backdrop-filter` est ignoré en silence par les vieux navigateurs :
 *  la carte reste alors simplement blanche, ce qui est correct. C'est
 *  une amélioration, pas une dépendance. */
:root[data-theme="clair"] .carte {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/*  L'aurore glacée : trois halos très pâles derrière tout le bureau.
 *
 *  Fixe et sous la page, donc elle ne bouge pas au défilement et
 *  n'attrape aucun clic. Aucune animation : un fond qui bouge tout seul
 *  derrière un tableau de chiffres qu'on lit pendant des heures finit
 *  par fatiguer, et c'est le contraire du but. */
:root[data-theme="clair"] body::before {
  content: "";
  position: fixed;
  inset: -20vh -15vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45vw 45vw at 16% 10%, rgba(0, 122, 255, 0.10), transparent 62%),
    radial-gradient(38vw 38vw at 88% 6%, rgba(90, 200, 250, 0.11), transparent 60%),
    radial-gradient(50vw 50vw at 60% 94%, rgba(0, 113, 227, 0.07), transparent 65%);
}

.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: -.01em; }
.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: 244px 1fr; min-height: 100vh; }

/*  POURQUOI CE `min-width: 0`, ET POURQUOI IL COMPTE.
 *
 *  Une case de grille vaut `min-width: auto` par défaut, ce qui veut
 *  dire « je ne rétrécis pas sous la largeur de mon plus gros enfant ».
 *  La colonne de contenu tenait donc un tableau de paie large, refusait
 *  de rétrécir, et TOUTE la page devenait plus large que l'écran.
 *
 *  Ce qu'on voyait, sur un téléphone : le bouton « Ouvrir » coupé à
 *  droite, l'entrée active du menu qui débordait par-dessus le bord, et
 *  la page qui défilait de côté. Trois symptômes, une seule cause.
 *
 *  Avec `min-width: 0`, la colonne rétrécit, et c'est le `.defile`
 *  autour du tableau qui fait défiler le tableau tout seul, ce pour quoi
 *  il avait été écrit. Sans cette ligne, il ne servait à rien.
 */
.bureau > * { min-width: 0; }

/*  Même raison, à l'intérieur d'une rangée : deux champs de date et un
 *  bouton doivent pouvoir passer à la ligne au lieu de pousser. */
.rangee > * { min-width: 0; }
.defile { max-width: 100%; }
.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; }
}

/* ---- le bureau sur un téléphone ---------------------------------------- */
/*
   Le menu du bureau est devenu un rail de groupes repliables. La règle
   ci-dessus le mettait en rangée : sur un téléphone, les groupes se
   retrouvaient côte à côte, chacun avec son contenu déplié, et il
   fallait défiler horizontalement pour trouver une entrée.

   Ça compte plus qu'une question d'allure. Le geste « Je suis ici »,
   qui relève le périmètre d'un site, se fait DEBOUT DANS LA COUR, avec
   un téléphone — c'est tout son intérêt. Un menu illisible à ce
   moment-là, c'est la fonction qui ne sert à rien.

   Sur téléphone : les groupes s'empilent, tout est ouvert, pleine
   largeur. Rien à replier d'une main quand l'autre tient la porte.
*/
/* ---- la barre du téléphone -------------------------------------------- */
/*
   Elle n'existe que sous 820 px. Au-dessus, le rail de gauche est
   toujours visible et une barre ne servirait à rien.
*/
.barre-mobile { display: none; }

/*  LE VOILE, ET LA FAUTE QU'IL M'A COÛTÉE.
 *
 *  Il était caché par l'attribut `hidden` du HTML, et affiché par une
 *  règle `display: block` dans le bloc téléphone plus bas. Une règle
 *  d'auteur bat toujours le `[hidden]` du navigateur : le voile restait
 *  donc affiché en permanence, un rectangle fixe par-dessus tout
 *  l'écran, et PLUS RIEN NE RÉPONDAIT AU DOIGT. Livré comme ça pendant
 *  quelques minutes le 4 septembre 2026.
 *
 *  La leçon, écrite pour la prochaine fois : ne jamais mélanger
 *  `hidden` et une règle de `display` sur le même élément. On choisit
 *  l'un des deux. Ici c'est une classe, parce qu'elle ne se fait battre
 *  par rien et qu'elle se lit dans l'inspecteur.
 */
.voile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 45;
  background: rgb(0 0 0 / 35%);
}

@media (max-width: 820px) {
  /*
     LE PROBLÈME QU'ON RÈGLE ICI, mesuré le 4 septembre 2026.

     Le menu s'affichait entièrement déplié au-dessus du contenu : cinq
     en-têtes de groupe, dix pages et le lien du garage, seize rangées à
     46 pixels. Ça fait 736 pixels de menu à défiler AVANT le premier
     chiffre, sur un écran qui en a 800. Autrement dit : ouvrir le
     bureau sur un téléphone montrait un écran de menu, chaque fois.

     Le menu devient donc une feuille par-dessus le contenu, ouverte par
     un bouton, comme le fait iOS. Le contenu commence en haut de
     l'écran, là où il doit être.

     Ce que ça ne change pas : le geste « Je suis ici », qui se fait
     debout dans la cour, reste à DEUX touches au lieu d'un défilement à
     l'aveugle. Une main suffit toujours.
  */
  .barre-mobile {
    display: flex; align-items: center; justify-content: space-between;
    gap: .8rem;
    position: sticky; top: 0; z-index: 40;
    width: 100%;
    min-height: 52px;
    padding: .55rem .9rem;
    border: 0; border-bottom: 1px solid var(--bord);
    border-radius: 0;
    background: var(--fond-2);
    color: var(--texte);
    text-align: left;
  }
  .barre-mobile .ou {
    font-weight: 600; font-size: 1.05rem; letter-spacing: -.014em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .barre-mobile .mot {
    flex: none;
    font-size: .82rem; font-weight: 600;
    color: var(--accent);
  }
  .barre-mobile[aria-expanded="true"] .mot { color: var(--texte-faible); }

  /*  Le voile ferme la feuille quand on tape à côté, ce que tout le
      monde essaie en premier. Sans lui, il faut viser le bouton.
      Il n'apparaît QUE si la feuille est ouverte. */
  .voile-menu.ouvert { display: block; }

  /*  `grid-template-rows: auto 1fr` et pas seulement une colonne.
   *
   *  Sans les rangées, la grille partageait les 812 pixels de l'écran
   *  entre ses deux cases : la barre du haut s'étirait à 305 pixels de
   *  haut, avec un grand vide sous son texte, et le contenu commençait
   *  au tiers de l'écran. Exactement le problème qu'on venait de régler,
   *  refait autrement.
   *
   *  Vu à l'écran le 7 septembre 2026, en regardant pour la première
   *  fois. La barre mesurait 305 pixels au lieu de 52. */
  .bureau {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-content: start;
  }

  .menu.rail {
    position: fixed; inset: 52px 0 0 0; z-index: 50;
    flex-direction: column; overflow-x: visible; overflow-y: auto;
    padding: .6rem .5rem 2rem;
    background: var(--fond-2);
    border-right: 0; border-bottom: 1px solid var(--bord);
    /*  Fermée par défaut. `display: none` et pas une translation :
        une feuille qui glisse est jolie une fois et coûte une attente à
        chaque ouverture, vingt fois par jour. */
    display: none;
  }
  .menu.rail.ouverte { display: flex; }

  .menu.rail .groupe { width: 100%; }
  .menu.rail .groupe .corps-groupe { display: block; }   /* tout ouvert */
  .menu.rail .titre-groupe .fleche { display: none; }
  .menu.rail .groupe button { width: 100%; text-align: left; white-space: normal; }
  .menu.rail .groupe.autres { margin-top: 6px; }

  /* Une cible de doigt, pas de curseur. */
  .menu.rail .corps-groupe > button,
  .menu.rail a.lien-service { min-height: 46px; }

  /* La barre d'outils d'un écran : les boutons passent à la ligne au
     lieu de sortir de l'écran par la droite. */
  .rangee { flex-wrap: wrap; }
  .rangee input.rayon { width: 90px; }

  .tete-page { flex-direction: column; align-items: stretch; }
  .tete-page h1 { font-size: 1.35rem; }

  /* Un tableau large défile dans sa boîte, jamais la page entière. */
  .defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- 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: 700; letter-spacing: -.012em;
  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: 700; font-variant-numeric: tabular-nums; letter-spacing: -.032em; }

/* ---- 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; }
/* La pastille « obligatoire » collait au libellé : un mot de plus, pas
   une étiquette. Un peu d'air, et elle redevient lisible d'un coup
   d'œil — ce qui est tout son travail. */
.point .nom .pastille { margin-left: .5em; vertical-align: middle; }

.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;
}
/*  L'onglet choisi, quand il n'a pas de couleur à lui.
 *
 *  Les trois règles ci-dessous habillaient les segments d'une ronde de
 *  sécurité : conforme, mineur, majeur. Un groupe d'onglets ordinaire,
 *  comme les périodes du relevé d'heures, n'a aucune de ces classes :
 *  les trois boutons restaient donc identiques et RIEN ne disait lequel
 *  était choisi.
 *
 *  Vu à l'écran le 7 septembre 2026, en cliquant dedans pour la
 *  première fois. Aucune vérification de syntaxe ne montre ça. */
.segments button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}

.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: 600; 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: 700; 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; }

/*  Visible seulement sur le papier : un titre et une date. À l'écran
 *  ils feraient doublon avec la barre du haut ; sur une feuille, la
 *  barre n'existe plus et un rapport sans date ne vaut rien. */
.a-imprimer { display: none; }

@media print {
  /*  LA RÈGLE D'ORIGINE, ET POURQUOI ELLE NE POUVAIT PAS RESTER SEULE.
   *
   *  `body > *:not(#impression) { display: none }` servait la fiche
   *  d'inspection, qui vit dans un bloc `#impression` à part. Appliquée
   *  telle quelle au relevé d'heures, elle cachait toute la page :
   *  imprimer donnait une feuille blanche.
   *
   *  On garde donc le comportement pour la fiche d'inspection, et on
   *  ouvre l'impression du reste de la page quand `#impression` est
   *  absent. Le sélecteur `:has()` répond exactement à cette question :
   *  « est-ce que cette page contient un bloc d'impression dédié ? »
   */
  body:has(#impression) > *:not(#impression) { display: none !important; }
  #impression, #impression * { visibility: visible; }
  #impression { position: absolute; inset: 0; padding: 0; }

  .fiche { box-shadow: none; border-radius: 0; }

  /*  Ce qui ne va pas sur du papier : les menus, les onglets, les
   *  boutons. Une feuille imprimée n'a pas de bouton à cliquer, et
   *  chacun mange une ligne. */
  .sans-impression,
  .menu, .barre-mobile, .voile-menu, .entete .rangee, .segments,
  button, .bouton { display: none !important; }

  .a-imprimer { display: block; }

  /*  Du papier, c'est blanc, et l'encre coûte cher. On force le fond
   *  clair même si l'écran était en sombre : sans ça, une page sombre
   *  s'imprime en aplats gris qui vident une cartouche. */
  html, body {
    background: #fff !important;
    color: #111 !important;
  }
  .bureau { display: block !important; }
  .carte {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    /*  Une journée ne se coupe pas en deux entre deux pages : on la
     *  garde entière, quitte à laisser du blanc en bas d'une feuille. */
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .chiffre { background: #fff !important; border: 1px solid #ccc !important; }
  table { font-size: 11pt; }
  a { color: #111 !important; text-decoration: none; }
}

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

/* =====================================================================
   L'OSSATURE DU BUREAU — reprise de la maquette approuvée
   ===================================================================== */

/* ---- la barre latérale, groupée -------------------------------------
   Neuf entrées à plat, c'est une liste qu'on relit chaque fois. Groupées
   par moment de la journée — le quotidien, mon monde, l'argent — on sait
   où regarder sans lire. Les groupes se replient : celui qui ne fait pas
   la paie ferme la section et ne la revoit plus.                        */

.rail { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; }

.rail .titre-groupe {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 9px; margin: 0; border: 0; background: none; border-radius: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--texte-faible); text-align: left;
  min-height: 0; cursor: pointer;
}
.rail .titre-groupe:hover { background: var(--bord-doux); color: var(--texte-2); }
.rail .titre-groupe .fleche { transition: transform .16s; opacity: .7; flex: none; }
.rail .groupe.ouvert .titre-groupe .fleche { transform: rotate(90deg); }
.rail .titre-groupe .compte { margin-left: auto; }
.rail .corps-groupe { display: none; padding: 2px 0 6px; }
.rail .groupe.ouvert .corps-groupe { display: block; }

.rail .corps-groupe button { white-space: nowrap;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: .55em .7em; min-height: 40px; margin: 1px 0;
  background: none; border: 0; border-radius: 9px;
  color: var(--texte-2); font-size: .93rem; font-weight: 600; text-align: left;
}
.rail .corps-groupe button:hover { background: var(--bord-doux); color: var(--texte); }
.rail .corps-groupe button.actif {
  background: var(--teal); color: var(--sur-accent); border-color: var(--teal);
}
.rail .corps-groupe button.actif svg { color: var(--sur-accent); }
.rail .corps-groupe button svg { flex: none; opacity: .85; }

/* La pastille de compte : un nombre, pas une couleur criarde. */
.compte {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  font-size: .72rem; font-weight: 700; line-height: 1;
  background: var(--crit); color: #fff;
}
.compte.calme { background: var(--bord); color: var(--texte-faible); }
/* Une classe qui pose « display » l'emporte sur [hidden] : il faut le dire. */
.compte[hidden] { display: none; }

/* ---- l'en-tête d'une page ------------------------------------------- */

.tete-page {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.tete-page h1 { margin: 0; font-size: 1.85rem; letter-spacing: -.022em; }
.tete-page .contexte { color: var(--texte-faible); font-size: .92rem; margin: 2px 0 0; }

/* ---- les cartes de chiffres ----------------------------------------- */

.chiffres { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 18px; }

.chiffre {
  background: var(--fond-3); border: 1px solid var(--bord-doux);
  border-radius: var(--rayon); padding: 12px 14px;
}
.chiffre .etiquette {
  display: block; margin-bottom: 4px; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-faible);
}
.chiffre .valeur {
  font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.chiffre .valeur small { font-size: .8rem; font-weight: 500; color: var(--texte-faible); margin-left: 3px; }
.chiffre .sous { font-size: .74rem; color: var(--texte-faible); margin-top: 2px; }

.chiffre.argent { border-color: color-mix(in srgb, var(--teal) 40%, transparent); background: var(--teal-doux); }
.chiffre.argent .valeur { color: var(--teal); }
.chiffre.alerte { border-color: color-mix(in srgb, var(--crit) 38%, transparent); background: var(--crit-doux); }
.chiffre.alerte .valeur { color: var(--crit); }

/* ---- un panneau ------------------------------------------------------ */

.panneau {
  background: var(--fond-2); border: 1px solid var(--bord);
  border-radius: var(--rayon); overflow: hidden; margin-bottom: 16px;
}
.panneau > .tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--bord-doux);
}
.panneau > .tete h2 { margin: 0; font-size: 1.05rem; }
.panneau > .tete .note {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-faible);
}
.panneau > .corps { padding: 5px 0; }
.panneau > .corps.rembourre { padding: 15px; }

.deux-colonnes { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; } }

/* ---- une ligne de liste ---------------------------------------------- */

.ligne {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 15px; border-bottom: 1px solid var(--bord-doux);
}
.ligne:last-child { border-bottom: 0; }
.ligne .qui { flex: 1 1 190px; min-width: 150px; }
.ligne .qui b { display: block; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.ligne .qui span { font-size: .8rem; color: var(--texte-faible); }
.ligne > :not(.qui) { flex: none; }

/* ---- la pastille d'initiales a été retirée --------------------------- */
/*  Elle vivait ici sous `.av` : deux lettres sur un rond de couleur,
 *  devant chaque nom. Retirée le 4 septembre 2026, demandé par Anthony.
 *
 *  Avec vingt employés, les couleurs se ressemblaient toutes et deux
 *  personnes aux mêmes initiales portaient le même rond. Ce qui
 *  distingue quelqu'un dans une liste, c'est son nom. Sans le rond, la
 *  colonne des noms s'aligne enfin avec le reste de l'écran.
 *
 *  La colonne `employe.avatar_couleur` reste en base : elle ne coûte
 *  rien et pourrait resservir. */

/* ---- pastilles et étiquettes ----------------------------------------- */

.puce {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 20px; font-size: .76rem; font-weight: 600;
  background: var(--fond-3); border: 1px solid var(--bord-doux);
  color: var(--texte-2); white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.puce i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.puce.source { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; }
.puce.lieu   { color: var(--teal); background: var(--teal-doux); border-color: color-mix(in srgb, var(--teal) 32%, transparent); }
.puce.lieu.dehors { color: var(--crit); background: var(--crit-doux); border-color: color-mix(in srgb, var(--crit) 35%, transparent); }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- la barre horizontale d'un graphique ------------------------------ */

.jauge { height: 8px; border-radius: 4px; background: var(--bord-doux); overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: 4px; background: var(--teal); }

.repartition { display: grid; gap: 9px; }
.repartition .item {
  display: grid; gap: 10px; align-items: center;
  grid-template-columns: minmax(120px, 1.1fr) 3fr auto auto;
}
.repartition .nom { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.repartition .nom i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.repartition .heures { font-variant-numeric: tabular-nums; color: var(--texte-faible); font-size: .88rem; text-align: right; }
.repartition .sous-total { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; min-width: 74px; }
@media (max-width: 700px) {
  .repartition .item { grid-template-columns: 1fr auto; }
  .repartition .jauge { grid-column: 1 / -1; }
}

/* ---- le pied de totaux ------------------------------------------------ */

.totaux {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 14px 15px; border-top: 1px solid var(--bord-doux);
}
.totaux .bloc .etiquette {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-faible); margin-bottom: 3px;
}
.totaux .bloc .h { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.totaux .bloc .d { font-size: .95rem; color: var(--teal); font-variant-numeric: tabular-nums; }
.totaux .bloc.fort { background: var(--teal-doux); border-radius: 9px; padding: 8px 11px; margin: -8px -3px; }

/* ---- une chose à régler ----------------------------------------------- */

.a-regler { display: grid; gap: 0; }
.a-regler .cas {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 15px; border-bottom: 1px solid var(--bord-doux);
}
.a-regler .cas:last-child { border-bottom: 0; }
.a-regler .cas::before {
  content: ''; width: 3px; align-self: stretch; border-radius: 2px;
  background: var(--warn); flex: none;
}
.a-regler .cas.grave::before { background: var(--crit); }
.a-regler .cas .quoi { flex: 1; }
.a-regler .cas .quoi b { display: block; font-size: .93rem; font-weight: 600; }
.a-regler .cas .quoi span { font-size: .82rem; color: var(--texte-faible); }

/* ---- bouton d'urgence -------------------------------------------------- */

button.tempete, .bouton.tempete {
  background: var(--beacon); border-color: var(--beacon); color: #fff;
}
button.tempete:hover { opacity: .9; }

/* ---- le bloc de marque, comme la maquette ---------------------------- */
/*  Un flocon, le nom en capitales condensées, et le nom de l'entreprise
    dessous en tout petit. C'est ce qui distingue une application d'une
    page web : on sait à qui elle appartient sans lire.                   */

.marque { display: flex; align-items: center; gap: 9px; }
.marque img { flex: none; }
.marque b {
  display: block; font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.008em; line-height: 1.1;
}
.marque span {
  display: block; font-size: .62rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--texte-faible);
}

.enseigne .sous-marque {
  font-size: .68rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--texte-faible); margin: .3rem 0 0;
}

/* ---- bascule à deux positions ---------------------------------------- */
/*  Deux lectures du même chiffre. Pas un menu déroulant : deux boutons
    côte à côte, on voit d'un coup lequel est actif et l'autre est à un
    clic — un déroulant cache la moitié de l'information.               */

.bascule { display: inline-flex; gap: 2px; padding: 2px; background: var(--fond-3);
           border: 1px solid var(--bord-doux); border-radius: 9px; }
.bascule button {
  min-height: 0; padding: .32em .8em; border: 0; border-radius: 7px;
  background: none; color: var(--texte-faible);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}
.bascule button:hover { color: var(--texte); }
.bascule button.actif { background: var(--fond-2); color: var(--texte); box-shadow: var(--ombre); }

/* ---- demandes d'approbation -------------------------------------------- */
/*  Un dossier personnel qui attend une signature. La barre de gauche est
    la même grammaire que « à régler » : jaune tant que ça attend, éteinte
    une fois décidé — pour qu'on voie d'un coup d'œil ce qui reste.        */

.demandes { display: grid; gap: 10px; }

.demande {
  position: relative;
  background: var(--fond-3); border: 1px solid var(--bord-doux);
  border-radius: var(--rayon); padding: 13px 15px 13px 18px;
}
.demande::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 2px; background: var(--bord);
}
.demande.attente::before { background: var(--warn); }

.demande .entre { margin-bottom: 4px; }
.demande b { font-size: .95rem; font-weight: 600; }
.demande p { margin: 3px 0 0; font-size: .84rem; }
.demande .motif {
  margin-top: 7px; padding: 7px 10px;
  background: var(--fond-2); border-radius: 7px;
  font-size: .86rem; font-style: italic; color: var(--texte-faible);
}
.demande .rangee { margin-top: 11px; align-items: center; }
.demande input.motif-refus { flex: 1; min-width: 160px; }

.puce.ok    { color: var(--ok);   background: var(--ok-doux);   border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.puce.alerte{ color: var(--crit); background: var(--crit-doux); border-color: color-mix(in srgb, var(--crit) 32%, transparent); }

/* ---- les autres services, au bas du menu ------------------------------- */
/*  Le garage n'est pas un écran du bureau : c'est une autre application.
    Il est donc dans le menu, mais visiblement à part — un vrai lien,
    ouvrable dans un autre onglet comme n'importe quel lien.              */

.groupe.autres { margin-top: 10px; border-top: 1px solid var(--bord-doux); padding-top: 8px; }
.titre-groupe.inerte {
  display: block; width: 100%; padding: 6px 12px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-faible);
}
a.lien-service {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--texte); text-decoration: none; font-size: .9rem;
}
a.lien-service:hover { background: var(--fond-3); }
/*  Une réponse de Claude à lire : la ligne du menu passe au rouge, comme
    la pastille des approbations, et disparaît quand tout est lu.       */
.rail .corps-groupe button#reponses-signal.attention { color: var(--rouge); }

/* =====================================================================
   Palette catégorielle — les départements dans les rapports
   =====================================================================
   Huit teintes, dans CET ordre. L'ordre n'est pas décoratif : c'est lui
   qui garantit que deux départements voisins dans un graphique restent
   distinguables, y compris pour un daltonisme protan ou deutan — environ
   un homme sur douze. Réordonner sans revalider casse ça en silence.

   Chaque thème a ses propres pas. Le sombre n'est pas le clair inversé :
   la même teinte demande une luminosité différente sur fond foncé.

   Vérifié : écart CVD minimal entre voisins 9,1 (clair) / 8,4 (sombre)
   sur 8 visé ; écart en vision normale 19,6 / 19,3 sur 15 exigé.

   Quatre de ces teintes passent sous 3:1 de contraste avec le fond. Le
   nom du département et son montant sont donc TOUJOURS écrits en clair
   à côté de la barre — la couleur ne porte jamais l'information seule.
   ===================================================================== */

:root {
  --serie-1: #3987e5;  /* bleu     */
  --serie-2: #d95926;  /* orange   */
  --serie-3: #199e70;  /* aqua     */
  --serie-4: #c98500;  /* jaune    */
  --serie-5: #d55181;  /* magenta  */
  --serie-6: #008300;  /* vert     */
  --serie-7: #9085e9;  /* violet   */
  --serie-8: #e66767;  /* rouge    */
}

:root[data-theme="clair"] {
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  --serie-6: #008300;
  --serie-7: #4a3aa7;
  --serie-8: #e34948;
}

.s1 { --serie: var(--serie-1); }
.s2 { --serie: var(--serie-2); }
.s3 { --serie: var(--serie-3); }
.s4 { --serie: var(--serie-4); }
.s5 { --serie: var(--serie-5); }
.s6 { --serie: var(--serie-6); }
.s7 { --serie: var(--serie-7); }
.s8 { --serie: var(--serie-8); }

/* ---- le tableau des départements -------------------------------------- */
/*  Une ligne par département, le montant au bout. La barre est dans la
    ligne, pas à côté : elle donne la proportion d'un coup d'œil sans
    voler la place du chiffre, qui est ce qu'on vient lire.              */

.depenses { width: 100%; border-collapse: collapse; }

.depenses th {
  text-align: left; padding: 7px 10px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-faible);
  border-bottom: 1px solid var(--bord-doux); white-space: nowrap;
}
.depenses th.nombre, .depenses td.nombre { text-align: right; }

.depenses td {
  padding: 9px 10px; border-bottom: 1px solid var(--bord-doux);
  font-size: .92rem; vertical-align: middle;
}
.depenses tbody tr:last-child td { border-bottom: 0; }

/* Le nom, avec sa pastille de couleur. La pastille accompagne le nom ;
   elle ne le remplace pas. */
.depenses .quoi { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.depenses .pastille {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
  background: var(--serie, var(--teal));
}

/* La barre : 8 px, coins arrondis au bout des données seulement, et un
   fond de piste qui dit ce que 100 % vaut. */
.depenses .piste {
  min-width: 90px; height: 8px; border-radius: 4px;
  background: var(--bord-doux); overflow: hidden;
}
.depenses .part {
  height: 100%; border-radius: 0 4px 4px 0;
  background: var(--serie, var(--teal));
  transition: width .4s ease;
}
.depenses td.jauge-cell { width: 40%; }

.depenses .montant { font-weight: 700; font-variant-numeric: tabular-nums; }
.depenses .heures  { color: var(--texte-2); font-variant-numeric: tabular-nums; }
.depenses .gens    { color: var(--texte-faible); font-variant-numeric: tabular-nums; }

.depenses tfoot td {
  padding-top: 11px; border-top: 2px solid var(--bord);
  font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---- l'horloge du temps réel ------------------------------------------ */
/*  « Temps réel » sans dire de quand datent les chiffres, c'est une
    promesse qu'on ne peut pas vérifier. On affiche l'heure du dernier
    rafraîchissement, et on la met à jour tout seul.                     */

.frais {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; color: var(--texte-faible);
}
.frais i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  animation: pouls 2.6s ease-in-out infinite;
}
.frais.fige i { background: var(--texte-faible); animation: none; }

@keyframes pouls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .frais i { animation: none; }
  .depenses .part { transition: none; }
}

/* La pastille d'une puce suit la palette de sa série. */
.puce > i { background: var(--serie, var(--teal)); }

/* =====================================================================
   Le kiosque — le clavier au mur
   =====================================================================
   Un écran utilisé debout, avec des mitaines, à quatre heures du matin.
   Les dimensions ici ne sont pas des goûts : une touche de 84 px se
   frappe du premier coup avec un gant de travail, une de 48 px se rate
   une fois sur cinq. Et une touche ratée à cette heure-là, c'est un gars
   qui abandonne et qui ne punche pas.

   Le thème reste sombre quoi qu'il arrive : un écran blanc éblouit
   quelqu'un qui vient de dehors, et il lui faut trente secondes pour
   revoir clair.
   ===================================================================== */

body.kiosque {
  margin: 0; min-height: 100dvh;
  background: var(--fond); color: var(--texte);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

.kio {
  min-height: 100dvh; display: flex; flex-direction: column;
  max-width: 560px; margin: 0 auto; padding: 16px 18px env(safe-area-inset-bottom);
}

.kio-tete {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 0 16px; border-bottom: 1px solid var(--bord-doux);
}
.kio-tete b {
  display: block; font-size: .84rem; font-weight: 700; letter-spacing: .12em;
}
.kio-tete span {
  display: block; font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-faible);
}
.kio-heure {
  margin-left: auto; font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--texte-2);
}

.kio-scene {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 18px 0;
}

.kio-demande { text-align: center; }
.kio-demande h1 { margin: 0; font-size: 1.6rem; }
.kio-demande p { margin: 6px 0 0; color: var(--texte-faible); font-size: .88rem; }

/* ---- les cases ------------------------------------------------------- */
/*  On voit combien de chiffres il reste à taper. Sans ça, on ne sait pas
    si la machine a enregistré la touche — surtout avec un gant.        */

.kio-cases { display: flex; gap: 12px; align-items: center; }
.kio-case {
  width: 52px; height: 64px; border-radius: 12px;
  background: var(--fond-2); border: 2px solid var(--bord);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.kio-case.plein { border-color: var(--teal); color: var(--teal); }

/*  Quand le chiffre est masqué, ce sont des POINTS, pas des cases.
 *
 *  Anthony, le 8 septembre 2026 : « ça doit être un clavier comme un
 *  téléphone ». C'est l'écran de déverrouillage d'un téléphone qu'il a
 *  en tête, et tout le monde l'a déjà fait mille fois : quatre points
 *  qui se remplissent, des touches rondes. Une machine qui ressemble à
 *  quelque chose qu'on connaît déjà ne demande aucune explication à
 *  quatre heures du matin.
 *
 *  Les cases carrées restent pour le jour où un clavier montrerait ses
 *  chiffres : un point ne peut pas afficher un « 7 ».                  */
.kio-cases.points { gap: 22px; }
.kio-cases.points .kio-case {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--texte-faible); background: none;
  font-size: 0; /* le chiffre n'a jamais à sortir d'un point */
}
.kio-cases.points .kio-case.plein {
  background: var(--texte); border-color: var(--texte);
}

.kio-erreur {
  max-width: 420px; text-align: center;
  color: var(--crit); font-size: .95rem; font-weight: 600;
}

/* ---- le clavier ------------------------------------------------------ */
/*  Rond, comme sur un téléphone. Les 84 px ne bougent pas : un doigt
    ganté fait environ 25 mm, et une touche ratée à quatre heures du
    matin, c'est un gars qui abandonne et qui ne punche pas.           */

.kio-grille {
  display: grid; grid-template-columns: repeat(3, 84px);
  gap: 20px; justify-content: center;
}

.kio-touche {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--fond-3); border: 1px solid var(--bord);
  color: var(--texte); font-size: 2rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation;
  font-variant-numeric: tabular-nums;
}
.kio-touche:active { background: var(--teal-doux); border-color: var(--teal); }

/*  « Retour » et « ⌫ » n'ont pas de rond : sur un téléphone non plus.
    Le rond dit « chiffre » ; leur en donner un les ferait chercher.   */
.kio-touche.mot {
  font-size: 1.05rem; font-weight: 600; color: var(--texte-2);
  background: none; border-color: transparent;
}
.kio-touche.mot:active { background: var(--survol); border-color: transparent; }

/*  Sauf le bouton « Recommencer » de l'écran d'échec, qui est une vraie
    barre : lui, il faut le voir.                                       */
.kio-touche.large {
  width: 100%; max-width: 340px; height: 60px; margin-top: 8px;
  border-radius: 14px; background: var(--fond-3);
  border: 1px solid var(--bord); color: var(--texte);
}

/* ---- l'attente et le résultat ---------------------------------------- */

.kio-attente { text-align: center; color: var(--texte-faible); }
.kio-rond {
  width: 44px; height: 44px; margin: 0 auto 14px;
  border: 4px solid var(--bord); border-top-color: var(--teal);
  border-radius: 50%; animation: tourne 900ms linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

.kio-resultat { text-align: center; max-width: 420px; }
.kio-resultat h1 { margin: 12px 0 0; font-size: 2rem; }
.kio-gros {
  margin: 10px 0 0; font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kio-note { margin: 8px 0 0; color: var(--texte-2); font-size: 1rem; }
.kio-note.faible { color: var(--texte-faible); font-size: .9rem; }

.kio-coche {
  width: 88px; height: 88px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 700;
}
.kio-resultat.entree .kio-coche { background: var(--ok-doux);   color: var(--ok); }
.kio-resultat.sortie .kio-coche { background: var(--teal-doux); color: var(--teal); }
.kio-resultat.echec  .kio-coche { background: var(--crit-doux); color: var(--crit); }
.kio-resultat.entree .kio-gros  { color: var(--ok); }
.kio-resultat.sortie .kio-gros  { color: var(--teal); }

/* ---- le pied : où on est --------------------------------------------- */
/*  Discret, mais toujours là. Le jour où les punchs se font refuser, la
    réponse est écrite au bas de l'écran plutôt qu'au téléphone.        */

.kio-pied {
  padding: 12px 0 16px; border-top: 1px solid var(--bord-doux);
  text-align: center;
}
.kio-lieu { font-size: .78rem; color: var(--texte-faible); }
.kio-lieu.bon { color: var(--ok); }
.kio-lieu.mauvais { color: var(--warn); }

@media (prefers-reduced-motion: reduce) {
  .kio-rond { animation: none; }
}

/* Un écran de tablette couché : le clavier reste à portée du pouce. */
@media (orientation: landscape) and (min-width: 720px) {
  .kio-scene { flex-direction: row; justify-content: center; gap: 46px; }
  .kio-scene > .kio-demande { align-self: center; text-align: left; max-width: 280px; }
  .kio-grille { gap: 22px; }
}

/* Un champ de NIP : quatre chiffres, espacés, lisibles d'un coup d'œil. */
input.nip {
  font-size: 1.6rem; letter-spacing: .5em; text-align: center;
  font-variant-numeric: tabular-nums; padding-left: .5em;
}

/* ---- de l'air sur les côtés, au téléphone ------------------------------ */
/*
   Anthony : « le format sur le mobile est un peu serré dans les côtés. »

   Deux causes, et il faut les deux :

   1. Une marge de 16 px, c'est ce qu'on met sur un écran d'ordinateur.
      Sur un téléphone tenu à une main, le pouce couvre le bord et le
      texte commence trop tôt — on lit en biais.

   2. Les téléphones à encoche ont une zone morte sur les côtés en mode
      paysage, et un coin arrondi en portrait. Sans `safe-area-inset`,
      le premier et le dernier caractère de chaque ligne passent dessous.
      C'est invisible sur un simulateur et évident dans un tracteur.
*/
@media (max-width: 700px) {
  .page {
    padding: 1rem calc(1.15rem + env(safe-area-inset-right))
             1rem calc(1.15rem + env(safe-area-inset-left));
  }

  /* Une carte respire aussi à l'intérieur : du texte collé à sa bordure
     se lit moins vite qu'un texte avec de l'air autour. */
  .carte { padding: 1.05rem; }

  /* Le titre de page n'a pas besoin d'être aussi gros qu'au bureau ;
     l'espace gagné va au contenu. */
  .page > h1 { font-size: 1.45rem; }
}

/* ---- les listes nues dans une fiche ---------------------------------- */
/*
 *  Chaque entrée d'une liste nue est séparée de la suivante par un
 *  filet, et les entrées ont de l'air entre elles. Sans ça, deux cartes
 *  de carburant ou deux permissions se collent et se lisent comme une
 *  seule. Vu à l'écran le 7 septembre 2026.
 */
/*  Les boutons d une entree passent sous son texte, jamais a cote :
    dans une fenetre de 390 px, un numero de carte et trois boutons sur
    la meme ligne coupaient le numero en deux. Vu le 7 septembre 2026. */
.liste-nue > li > div > .rangee { margin-top: .5rem; }

/*  Le punch pris loin du garage. Un avis, pas une alarme : depuis le
    8 septembre 2026 ça ne refuse plus rien, alors du rouge mentirait
    sur ce qui vient de se passer.                                   */
.kio-note.loin { color: var(--warn); }

/* ---- le relevé d'heures, punch par punch ------------------------------ */
/*  Anthony, le 8 septembre 2026 : « j'aimerais ça voir les punchs de la
    journée, mettons de 6 h à midi ». Les heures prennent la place qui
    reste entre le jour et le total ; sans ça, `.ligne > :not(.qui)`
    les empêche de grandir et une journée à quatre punchs déborde.     */
.ligne .puces { flex: 1 1 auto; min-width: 0; }
.ligne > strong { margin-left: auto; font-variant-numeric: tabular-nums; }

/*  Le nom d'une personne est un titre ET un lien : il garde sa taille,
    il prend juste la couleur d'un lien.                                */
.carte > .entre h3 a { color: inherit; }

/* ---- la grille de la semaine ------------------------------------------ */
/*  Anthony, le 8 septembre 2026 : « la vue de la semaine style
    Progression », puis « comme Progression mais améliorée ».

    Ce qu'on garde de Progression : le monde en lignes, les jours en
    colonnes, un total par personne. Ce qu'on ajoute : les heures
    punchées écrites dans la case, et le total de l'équipe par jour.

    LA PREMIÈRE COLONNE COLLE. Douze jours de large, ça défile
    horizontalement, et une grille où le nom sort de l'écran pendant
    qu'on lit une case ne se lit plus du tout : on ne sait plus de qui
    on parle.                                                          */

.grille-heures { border-collapse: separate; border-spacing: 0; width: auto; min-width: 100%; }

.grille-heures th,
.grille-heures td {
  border-bottom: 1px solid var(--bord-doux);
  padding: 7px 10px; vertical-align: top; text-align: left;
}
.grille-heures thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--fond-2); color: var(--texte-2);
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.grille-heures .colle {
  position: sticky; left: 0; z-index: 3;
  background: var(--fond-2); min-width: 170px;
  border-right: 1px solid var(--bord);
}
.grille-heures thead .colle { z-index: 4; }
.grille-heures tbody .colle a { font-weight: 600; display: block; }
.grille-heures tbody .colle span { display: block; font-size: .74rem; }
.grille-heures .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grille-heures tbody tr:hover td { background: var(--survol); }

.grille-heures .case-jour { min-width: 108px; }

/*  Le bloc d'une journée. La barre de couleur de Progression, mais qui
    porte une information au lieu d'une seule couleur.                 */
.bloc-jour {
  border-radius: 8px; padding: 5px 8px;
  background: var(--teal-doux);
  border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent);
}
.bloc-jour b {
  display: block; font-size: .9rem; color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.bloc-jour span {
  display: block; font-size: .72rem; color: var(--texte-2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/*  Chaque quart est cliquable. Anthony, le 10 septembre 2026 : « pis que
    je puisse cliquer directement sur les quarts de travail que je veux
    modifier ». Exactement la même apparence que le texte qu'il
    remplace : un quart qui change de look selon qu'il est cliquable ou
    non se cherche à chaque coup d'œil. C'est le survol qui le dit.   */
.bloc-jour a {
  display: block; font-size: .72rem; color: var(--texte-2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  text-decoration: none; cursor: pointer;
}
.bloc-jour a:hover,
.bloc-jour a:focus-visible { text-decoration: underline; color: var(--texte); }

.bloc-jour.encours {
  background: var(--warn-doux);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.bloc-jour.encours b { color: var(--warn); }

.grille-heures tr.total th,
.grille-heures tr.total td {
  border-top: 2px solid var(--bord);
  border-bottom: 0; font-weight: 700; background: var(--fond-2);
}

/*  Le compte des demandes en attente, collé au bout de son bouton dans
    le menu. Il doit se voir sans crier : c'est un rappel, pas une
    alarme — mais un rappel qu'on ne voit pas ne rappelle rien.       */
.corps-groupe button .compte { margin-left: auto; }

/*  Les faits d'une demande d'approbation : ce que le serveur a calculé,
    visuellement séparé du motif écrit par la personne. Les deux ne
    doivent jamais se lire comme la même sorte d'information.        */
.faits { margin: 8px 0; border-top: 1px solid var(--bord-doux); }
.faits li { padding: 4px 0; border-bottom: 1px solid var(--bord-doux); font-size: .88rem; }
.faits li strong { font-variant-numeric: tabular-nums; text-align: right; }

/* ---- la page d'aperçu d'une demande ----------------------------------- */
/*  Ouverte depuis un texto, sur un téléphone, souvent debout. Une seule
    colonne, du gros texte, et rien à chercher.                        */
.apercu { background: var(--fond); color: var(--texte); }
.apercu main { max-width: 560px; margin: 0 auto; padding: 20px 18px 48px; }
.apercu header { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.apercu header b { display: block; font-size: .82rem; letter-spacing: .1em; }
.apercu header span { font-size: .7rem; color: var(--texte-faible); letter-spacing: .06em; }
.apercu h1 { margin: 6px 0 4px; font-size: 1.5rem; }
.apercu h2 { margin: 24px 0 8px; font-size: .78rem; letter-spacing: .08em;
             text-transform: uppercase; color: var(--texte-2); }
.apercu .objet { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.45; }
.apercu .qui { color: var(--texte-2); font-size: .9rem; line-height: 1.5; }
.apercu .rien { color: var(--texte-faible); font-size: .82rem; }
.apercu table { width: 100%; border-collapse: collapse; }
.apercu th, .apercu td { padding: 9px 0; border-bottom: 1px solid var(--bord-doux);
                         text-align: left; vertical-align: top; font-size: .95rem; }
.apercu th { color: var(--texte-2); font-weight: 500; width: 45%; }
.apercu td { font-weight: 600; font-variant-numeric: tabular-nums; }
.apercu .motif { font-style: italic; line-height: 1.5; }
.apercu .etat { display: inline-block; padding: 4px 11px; border-radius: 20px;
                font-size: .76rem; font-weight: 700; }
.apercu .etat.attente { background: var(--warn-doux); color: var(--warn); }
.apercu .etat.ok      { background: var(--ok-doux);   color: var(--ok); }
.apercu .etat.refus   { background: var(--crit-doux); color: var(--crit); }
.apercu .quoi-faire { margin-top: 26px; padding: 14px 16px; border-radius: 12px;
                      background: var(--fond-2); border: 1px solid var(--bord); }
.apercu .quoi-faire p { margin: 8px 0 0; line-height: 1.5; }
.apercu code { padding: 2px 7px; border-radius: 6px; background: var(--fond-3);
               font-weight: 700; }

/* ---- avant → après, dans une demande d'approbation -------------------- */
/*  La colonne « après » est celle qu'on décide : elle porte le poids.  */
.avant-apres { width: 100%; border-collapse: collapse; margin: 8px 0; }
.avant-apres th, .avant-apres td { padding: 7px 10px; text-align: left;
  border-bottom: 1px solid var(--bord-doux); font-size: .9rem; }
.avant-apres thead th { font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texte-faible); }
.avant-apres tbody th { font-weight: 500; color: var(--texte-2); }
.avant-apres .av { color: var(--texte-faible); text-decoration: line-through;
  font-variant-numeric: tabular-nums; }
.avant-apres .ap { font-weight: 700; color: var(--teal);
  font-variant-numeric: tabular-nums; }

.apercu .nature { padding: 12px 14px; border-radius: 10px;
  background: var(--fond-2); border: 1px solid var(--bord); }
.apercu .nature b { font-size: 1rem; }
.apercu .nature .ou { margin: 2px 0 8px; font-size: .8rem; color: var(--texte-faible); }
.apercu .nature p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--texte-2); }

/* ---- Horaire (5 oct. 2026) : la grille du bureau ---- */
.grille-horaire td.case-jour { vertical-align: top; }
.grille-horaire .aujourdhui { background: rgb(74 157 214 / 8%); }
button.quart-puce {
  display: block; width: 100%; margin: 0 0 .25rem; padding: .25rem .4rem;
  border-radius: 6px; font-size: .78rem; line-height: 1.25; text-align: left;
  white-space: nowrap; min-height: 0; cursor: pointer;
  background: rgb(74 157 214 / 18%); color: var(--bleu); border: 1px solid rgb(74 157 214 / 40%);
}
button.quart-puce.brouillon { background: transparent; color: var(--texte-faible); border-style: dashed; border-color: var(--bord); }
button.quart-puce:disabled { cursor: default; opacity: 1; }
.quart-puce .quart-note { display: block; font-size: .7rem; opacity: .85; white-space: normal; }
button.quart-plus {
  display: block; width: 100%; padding: .1rem; min-height: 0; font-size: .85rem;
  background: transparent; color: var(--texte-faible); border: 1px dashed transparent; border-radius: 6px;
}
button.quart-plus:hover { border-color: var(--bord); color: var(--texte); }
/* La carte « Mon horaire » de l'appli : la durée ne se coupe jamais en deux. */
.carte-horaire .chiffre { white-space: nowrap; flex-shrink: 0; }