/**
 * Shared styling for the candidate app and the client portal.
 *
 * Pulled out of index.html when the single page was split into tabs: two
 * screens copying the same rules is how they start to look like two products.
 */

:root{
  --ink:#122220; --muted:#4f6260; --faint:#7c8f8d; --line:#dde6e4;
  --surface:#fff; --bg:#f2f7f6;
  --accent:#0f766e; --accent-soft:#e4f2ef; --accent-fonce:#0b5a54;
  --good:#0a7d55; --good-bg:#dcf1e8;
  --warn:#b8620a; --warn-bg:#fbeddb;
  --stop:#a3242b; --stop-bg:#fbe3e4;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:ui-monospace,Consolas,monospace;
  --tabbar:64px;

  /* ── L'OMBRE, ET POURQUOI TROIS NIVEAUX SEULEMENT ──────────────────
     Une ombre par element finit par en donner douze legerement
     differentes, et l'ecran perd sa profondeur au lieu d'en gagner.
     Trois suffisent : ce qui est POSE (une carte), ce qui est SOULEVE
     (un panneau par-dessus), ce qui FLOTTE (la barre d'onglets).

     Elles sont teintees de vert plutot que noires : une ombre noire sur
     un fond legerement vert grise la couleur autour d'elle. */
  --pose:0 1px 2px rgba(10,52,48,.05), 0 2px 8px rgba(10,52,48,.05);
  --souleve:0 4px 10px rgba(10,52,48,.08), 0 12px 28px rgba(10,52,48,.10);
  --flotte:0 -1px 3px rgba(10,52,48,.04), 0 -6px 20px rgba(10,52,48,.06);
  /* Largeur au-dela du telephone. Chaque espace la reajuste : un tableau de
     bord respire sur un ecran large, une liste de vacations non. */
  --large:640px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  line-height:1.5;-webkit-font-smoothing:antialiased;
}

/* ── LA BANDE DE MARQUE, IDENTIQUE DANS LES TROIS ESPACES ────────────
   Elle n'existait que sur les ecrans d'entree : passe la porte, l'application
   cessait de dire a qui elle appartient, et les trois espaces se lisaient
   comme trois outils differents.

   Elle prend aussi en charge l'encoche du telephone (« safe-area-inset-top ») :
   la barre de titre n'a plus a le faire, sinon on paye le decalage deux fois et
   le titre descend d'un centimetre sur un iPhone. */
.marque-barre{
  background:var(--accent);
  padding:calc(env(safe-area-inset-top) + 9px) 16px 9px;
  display:flex;align-items:center;justify-content:center;
}
.marque-barre img{width:100%;max-width:132px;height:auto;display:block}

/* ── Top bar ─────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px 11px;
  max-width:520px;margin:0 auto;
}
/* LE TITRE EST CENTRE, ET IL A DU POIDS.
   ─────────────────────────────────────────────────────────────────────
   Il etait aligne a gauche, a la taille d'un intitule de carte : rien ne
   disait ou l'on se trouvait, et « New jobs » se lisait comme un libelle
   parmi d'autres. Centre et plus gros, il devient le repere de l'ecran —
   c'est ce qu'on cherche des yeux en arrivant.

   Le sous-titre passe en petites capitales espacees : il porte QUI l'on est,
   information de second rang qu'on relit rarement, et qui n'a donc pas a
   concurrencer le titre. */
.titre{text-align:center;min-width:0;flex:1 1 auto}
h1{font-size:1.32rem;margin:0;letter-spacing:-.02em;font-weight:800}
.sub{
  font-size:.68rem;color:var(--muted);margin:3px 0 0;
  text-transform:uppercase;letter-spacing:.07em;font-weight:600;
}
.topbar .pill{font-size:.66rem;padding:3px 8px;flex:0 0 auto}
.topbar .ghost.mini{padding:7px 11px;font-size:.73rem;flex:0 0 auto}

/* Un titre centre a besoin d'un contrepoids a DROITE, sinon il glisse des que
   le burger apparait a gauche. On reserve la meme largeur des deux cotes. */
.topbar .menu-btn{min-width:40px}
.topbar::after{content:'';flex:0 0 0}

main{
  max-width:520px;margin:0 auto;
  /* Room for the tab bar, plus the home indicator on iPhone. */
  padding:0 16px calc(var(--tabbar) + env(safe-area-inset-bottom) + 24px);
}

/* ── Panels ──────────────────────────────────────────────────────── */
.panel{display:none;flex-direction:column;gap:14px}
.panel.on{display:flex}
.section-head{margin:6px 2px 0}

/* ── Cards and pieces ──────────────────────────────────────────────
   UNE OMBRE PLUTOT QU'UN TRAIT.
   Sur un fond a peine plus fonce que le blanc, une bordure grise est le seul
   trait de l'ecran et attire l'oeil autant que le contenu. Une ombre douce
   POSE la carte sans se faire voir — et l'on regarde ce qui est ecrit dessus.
   Le liseré reste, tres pale, pour que la carte tienne encore sur un ecran ou
   les ombres ne rendent pas (mode contraste eleve, impression). */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px;
  box-shadow:var(--pose);
}
.lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.val{font-weight:650;font-size:.95rem;margin-top:3px}
.meta{font-size:.83rem;color:var(--muted);margin-top:2px}
.row{display:flex;align-items:center;gap:9px}

/* « wrap » : quand les deux cotes ne tiennent plus ensemble, le second passe
   DESSOUS plutot que de se faire hacher. « demo-carer@btghealthcaresolutions
   .co.uk » se coupait en trois morceaux au milieu de « .co.uk » ; il occupe
   maintenant sa propre ligne, entier. */
.row.sb{justify-content:space-between;flex-wrap:wrap}

/* ⚠️ UNE VALEUR LONGUE SORTAIT DU CADRE — ET TOUT NE DOIT PAS CEDER.
   Un item de flex refuse par defaut de retrecir sous la largeur de son
   contenu ; « demo-carer@btghealthcaresolutions.co.uk » n'a aucun espace ou se
   couper, et depassait donc le bord de l'ecran sur un telephone de 390 px —
   dans le profil, c'est-a-dire l'ecran ou l'on vient verifier son adresse.

   Premier jet : « min-width:0 » sur TOUS les enfants. Le defaut s'est deplace
   — les ecussons se comprimaient et debordaient a leur tour, et le libelle
   « Email » se coupait au lieu de la valeur. Dans une ligne, il y a toujours
   une partie qui doit ceder et une qui ne doit pas : l'ecusson et le libelle
   sont courts et se lisent d'un bloc, la valeur est longue et peut se couper. */
.val,
.quand,
.ou{min-width:0;overflow-wrap:anywhere}
.row > .pill,
.row > .meta,
.row > .lbl{flex:none}
.pile{display:flex;flex-direction:column;gap:10px}
.footnote{font-size:.78rem;color:var(--faint);padding:2px 4px;margin:2px 0 0;line-height:1.5}

/* Le titre de section respire davantage : c'est lui qui decoupe l'ecran en
   parties, et colle a la carte precedente il ne decoupe plus rien. */
.section-head .lbl{font-size:.72rem}

.pill{font-family:var(--mono);font-size:.66rem;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap}
.pill.ok{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.stop{background:var(--stop-bg);color:var(--stop)}
.pill.muted{background:var(--bg);color:var(--muted)}

.actions{display:flex;gap:9px;margin-top:12px}
button{
  flex:1;font:inherit;font-size:.9rem;font-weight:650;padding:13px 10px;border-radius:11px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;min-height:48px;
}
button.ghost{background:transparent;color:var(--accent)}
/* Un lien deguise en bouton : meme cible tactile, et il reste un LIEN — on peut
   l'ouvrir dans un onglet, le partager, ou le laisser au systeme (« mailto: »),
   ce qu'un bouton n'offrirait pas.

   ⚠️ CE COMMENTAIRE EXISTAIT SANS SA REGLE. La declaration avait disparu — ou
   n'avait jamais ete ecrite — et le commentaire pendait au-dessus d'autre chose.
   Le premier lien-bouton pose (l'aide) se serait affiche en texte souligne au
   milieu de vrais boutons. */
a.bouton-lien{
  flex:1;display:flex;align-items:center;justify-content:center;
  font:inherit;font-size:.9rem;font-weight:650;padding:13px 10px;min-height:48px;
  border-radius:11px;border:1px solid var(--accent);background:var(--accent);
  color:#fff;text-decoration:none;cursor:pointer;
}
a.bouton-lien:hover{background:var(--accent-fonce);border-color:var(--accent-fonce)}

/* Tant qu'on ne sait pas A QUI l'on parle, on ne montre l'espace de personne.
   Sans cela la coque du soignant — « New jobs », ses onglets — s'affichait
   derriere l'ecran d'accueil : un gestionnaire de service voyait d'abord
   l'application de quelqu'un d'autre, et pouvait croire s'etre trompe de lien. */
body.avant-choix .marque-barre,
body.avant-choix .topbar,
body.avant-choix main,
body.avant-choix .tabbar{visibility:hidden}

/* ── L'accueil du premier lancement ───────────────────────────────────
   C'est le tout premier ecran de l'application, et pendant longtemps le seul
   qu'on ait vu d'elle. Il etait pose dans une feuille du bas, comme une boite
   de dialogue posee sur autre chose — alors qu'il n'y a rien derriere, et que
   c'est LUI l'application a cet instant. Il occupe donc l'ecran entier. */
/* ── LES ECRANS D'ENTREE ─────────────────────────────────────────────
   L'accueil, l'inscription, la connexion et le mot de passe oublie sont les
   seuls ecrans qu'on voit AVANT d'avoir un compte. Ils etaient blancs sur gris
   pale, comme le reste de l'application — ce qui est juste pour une liste de
   vacations qu'on consulte vingt fois par jour, et faux ici : on n'y passe
   qu'une fois, et c'est la premiere impression.

   LA COULEUR VIENT DU LOGO, pas d'ailleurs. Le teal de BTG en fond, la carte
   posee dessus : personne n'a a se demander de quelle entreprise il s'agit.
   On ne l'etend PAS aux ecrans de travail — un fond colore sous une liste
   qu'on relit sans arret fatigue, et rend les etats (couvert, decouvert)
   moins lisibles. */
.entree{
  position:fixed;inset:0;z-index:60;overflow-y:auto;
  background:
    radial-gradient(120% 80% at 50% 0%, #12857c 0%, var(--accent) 45%, #0b5a54 100%);
}
/* Une trame discrete : sans elle, un grand aplat de couleur sur un ecran de
   telephone fait « page qui n'a pas fini de charger ». */
.entree::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at 15% 12%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(50% 35% at 85% 8%, rgba(255,255,255,.07), transparent 70%);
}

.accueil{
  position:relative;z-index:1;
  min-height:100%;
  padding:calc(env(safe-area-inset-top) + 30px) 20px calc(env(safe-area-inset-bottom) + 26px);
  display:flex;flex-direction:column;justify-content:center;gap:22px;
  max-width:520px;margin:0 auto;
}
@media(min-width:700px){ .accueil{max-width:var(--large);padding-left:40px;padding-right:40px} }

.accueil-entete{display:flex;flex-direction:column;gap:6px}

/* LE BANDEAU DE MARQUE.
   ─────────────────────────────────────────────────────────────────────
   Le logo de BTG est BLANC : il est dessine pour un fond sombre, et c'est
   ainsi qu'il figure sur leur propre site. On lui donne donc son fond plutot
   que de le recolorer — retoucher une marque pour l'accorder a notre fond
   reviendrait a livrer une marque qui n'est pas la leur, et un logo blanc pose
   tel quel sur notre fond clair serait simplement invisible.

   Les dimensions sont donnees sur la balise (495x114) : sans elles, le
   navigateur ne reserve pas la place, et le titre saute vers le bas au moment
   ou l'image arrive. */
.bandeau{
  display:flex;align-items:center;justify-content:center;padding:4px 0 2px;
}
.bandeau img{width:100%;max-width:250px;height:auto;display:block}
/* Au-dessus d'un formulaire, il annonce sans prendre la place du champ que
   l'on vient remplir. */
.bandeau.mini{margin-bottom:16px}
.bandeau.mini img{max-width:180px}

/* Sur l'accueil, le logo pose sur le fond teal n'a plus besoin de son propre
   cartouche : le fond EST son fond. Dans les formulaires, la carte est
   blanche — il lui faut donc le sien, sinon un logo blanc sur blanc
   disparait. C'est la meme regle qu'au depart, appliquee a deux fonds. */
.feuille-corps .bandeau{
  background:var(--accent);border-radius:13px;padding:13px 16px;
}

.accueil h2{
  font-size:2.05rem;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.1;
  color:#fff;
}
.accueil-sous{margin:0;color:rgba(255,255,255,.82);font-size:.94rem;max-width:34ch;line-height:1.5}
.accueil-pied{margin:0;color:rgba(255,255,255,.62);font-size:.76rem;line-height:1.5}

/* Trois cibles pleine largeur : c'est la premiere chose que quelqu'un touche,
   parfois d'une main, parfois sans savoir ce qu'est cette application. Une
   liste deroulante y serait une devinette. */
.roles{display:flex;flex-direction:column;gap:11px}
.role{
  flex:none;display:flex;align-items:center;gap:14px;text-align:left;
  padding:16px 14px;border-radius:15px;min-height:auto;
  border:1px solid transparent;background:var(--surface);color:var(--ink);
  /* Une ombre portee, et non un liseré : sur un fond colore, une bordure claire
     se lit comme un trait de plus, l'ombre comme une carte posee dessus. */
  box-shadow:0 6px 18px rgba(6,48,44,.18);
  transition:transform .12s, box-shadow .12s;
}
.role-icone{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  background:var(--accent-soft);display:flex;align-items:center;justify-content:center;
}
.role-icone svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.role-texte{display:flex;flex-direction:column;gap:3px;min-width:0}
.role .qui{font-size:1.02rem;font-weight:700;line-height:1.2}
.role .detail{font-size:.81rem;color:var(--muted);font-weight:400;line-height:1.4}
.role-fleche{flex:0 0 auto;margin-left:auto;opacity:.35}
.role-fleche svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.role:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(6,48,44,.24)}
.role:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(6,48,44,.20)}
.role:hover .role-fleche,.role:active .role-fleche{opacity:.7}

/* Chaque carte porte SA teinte, tiree de la palette deja utilisee ailleurs
   dans l'application pour dire la meme chose : le vert des etats couverts, le
   teal de la marque, l'ambre des choses a traiter. Trois pastilles identiques
   obligeaient a lire les trois titres pour trouver la sienne. */
.role[data-role="candidate"] .role-icone{background:var(--accent-soft)}
.role[data-role="candidate"] .role-icone svg{stroke:var(--accent)}
.role[data-role="client"] .role-icone{background:var(--good-bg)}
.role[data-role="client"] .role-icone svg{stroke:var(--good)}
.role[data-role="admin"] .role-icone{background:var(--warn-bg)}
.role[data-role="admin"] .role-icone svg{stroke:var(--warn)}

/* ── Le fil d'activite, identique dans les trois espaces ──────────────
   Les styles vivaient dans la feuille du gestionnaire, ou lui seul avait ce
   bloc. Recopies dans les deux autres, ils auraient diverge a la premiere
   retouche — et trois ecrans qui se ressemblent « a peu pres » se remarquent
   plus que trois qui different franchement. */
.fil{display:flex;flex-direction:column}
.fil .fait{border-top:1px solid var(--line);padding:10px 0}
.fil .fait:first-child{border-top:none}
.fil .entete{display:flex;align-items:center;gap:8px}
.fil .titre{font-weight:650;font-size:.88rem}
.fil .detail{font-size:.82rem;color:var(--muted);margin-top:2px}

/* La feuille se lit en entier : elle est large et le telephone est etroit. */
.feuille-corps.large{max-width:100%;padding:14px}
#sheet-view-frame{
  width:100%;height:62vh;border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:10px;
}
/* Ni « a.lien » ni « button.lien » : la feuille signee s'ouvre maintenant dans
   un panneau, donc par un BOUTON, alors qu'elle s'ouvrait par un lien. Un
   selecteur attache a la balise aurait laisse ce bouton sans style — visible
   seulement en regardant, jamais en echouant. */
.lien{
  flex:1;font:inherit;font-size:.9rem;font-weight:650;padding:13px 10px;border-radius:11px;
  border:1px solid var(--accent);background:transparent;color:var(--accent);
  min-height:48px;display:flex;align-items:center;justify-content:center;text-decoration:none;
}
button:active{transform:translateY(1px)}
button[disabled]{opacity:.5;cursor:not-allowed}

.note{font-size:.8rem;border-radius:10px;padding:9px 12px;border:1px solid var(--line)}
.note.ok{background:var(--good-bg);color:var(--good);border-color:transparent}
.note.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.note.stop{background:var(--stop-bg);color:var(--stop);border-color:transparent}
.note.install{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.note.install strong{font-weight:700}

ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.86rem;border-top:1px solid var(--line);padding-top:7px}
li:first-child{border-top:none;padding-top:0}

.queue{background:var(--warn-bg);border-color:transparent}
.queue .val{color:var(--warn)}

/* ── Shift and document rows ─────────────────────────────────────── */
.groupe{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:650;margin:6px 2px 1px}
.mission{border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:var(--surface);
  display:flex;flex-direction:column;gap:5px}
.mission.offre{border-left:3px solid var(--accent)}
.mission.passee{opacity:.72}
.mission .quand{font-weight:650;font-size:.88rem}
.mission .ou{font-size:.83rem;color:var(--muted)}
.mission .actions{margin-top:4px}
/* UN ECRAN VIDE DOIT AVOIR L'AIR VIDE, PAS CASSE.
   Une phrase grise seule au milieu d'une page blanche se lit comme un
   chargement qui n'a pas abouti. Un cadre pointille dit « il n'y a rien ICI »,
   ce qui est une information et non une panne. */
.vide{
  font-size:.86rem;color:var(--muted);padding:22px 16px;text-align:center;
  border:1px dashed var(--line);border-radius:14px;background:rgba(255,255,255,.5);
  line-height:1.5;
}
.perime{color:var(--warn);font-weight:650}

.doc{border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:var(--surface);
  display:flex;flex-direction:column;gap:6px}
/* ── TROIS COULEURS, ET LA TROISIEME COMPTE AUTANT QUE LES DEUX AUTRES ──
   Demande de BTG : « en rouge ceux qui manquent ou expires, en orange ceux
   qui expirent bientot et en vert ceux qui sont bons ».

   Le vert manquait. Sans lui, un dossier ou tout va bien s'affiche en gris
   uni : on ne distingue plus « verifie » de « pas encore regarde », et il
   faut lire les douze ecussons un par un pour s'en assurer. La couleur ne
   sert pas a decorer ce qui va bien — elle sert a le RECONNAITRE sans lire.

   Le liseré seul, jamais un fond teinté : douze lignes de fond colore
   redonneraient le mur qu'on vient d'enlever de la liste. */
.doc.bon{border-left:3px solid var(--good)}
.doc.attention{border-left:3px solid var(--warn)}
.doc.bloquant{border-left:3px solid var(--stop)}
.doc .nom{font-weight:650;font-size:.88rem}
.doc .quoi{font-size:.82rem;color:var(--muted)}
.doc button{min-height:40px;padding:9px;font-size:.8rem}

/* LE DOCUMENT, EN GRAND ET SUR FOND CLAIR.
   Un scan de certificat est de l'encre sombre sur du papier : rendu sur la
   carte en theme sombre, il devient illisible — et l'on tamponnerait
   « verified » sur ce qu'on n'a pas pu lire. La hauteur est bornee pour que les
   boutons du verdict restent atteignables sans faire defiler tout le panneau. */
.piece-apercu{
  margin-top:12px;border:1px solid var(--line);border-radius:12px;background:#fbfdfc;
  display:flex;align-items:center;justify-content:center;overflow:auto;
  min-height:180px;max-height:52vh;padding:8px;
}
.piece-apercu img{max-width:100%;max-height:50vh;object-fit:contain}
.piece-apercu iframe{width:100%;height:50vh;border:0;background:#fff}

/* Refuser n'est pas le geste ordinaire : il se distingue sans crier.

   ⚠️ LES DEUX CAS SONT ECRITS, parce que la regle seule etait un piege : le
   bouton par defaut est PLEIN et vert, et « .danger » ne changeait que la
   couleur du texte. Pose sur un bouton principal, il donnait du rouge sur du
   vert — illisible. Il ne l'a jamais ete parce que le seul usage etait
   « .ghost.danger » ; la feuille de confirmation en a un principal. */
button.danger{background:var(--stop);border-color:var(--stop);color:#fff}
button.ghost.danger{background:transparent;color:var(--stop);border-color:var(--stop)}

/* La piece deposee, DANS la ligne de l'exigence a laquelle elle repond.
   Posee a cote, elle formerait une seconde liste, et l'on chercherait quel
   fichier repond a quelle demande. Le retrait et le fond la rattachent. */
.doc .piece{
  margin-top:2px;padding:8px 10px;border-radius:9px;
  background:var(--fond, #f4f7f6);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;
}

/* ── Profile ─────────────────────────────────────────────────────── */
.champs{display:flex;flex-direction:column}
.champ{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-top:1px solid var(--line);font-size:.87rem}
.champ:first-child{border-top:none}
.champ .k{color:var(--muted)}
.champ .v{font-weight:600;text-align:right}
.tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tag{font-size:.72rem;background:var(--accent-soft);color:var(--accent);
  border-radius:20px;padding:3px 10px;font-weight:650}

/* ── Tab bar ─────────────────────────────────────────────────────── */
/* LA BARRE FLOTTE, elle n'est pas collee.
   Un trait de 1 px separait la barre du contenu ; sur un ecran ou l'on fait
   defiler, le contenu passait dessous sans qu'on voie la limite. Une ombre
   VERS LE HAUT dit qu'il y a quelque chose derriere, et la barre cesse d'etre
   un bandeau pour devenir une couche. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:var(--flotte);
  padding-bottom:env(safe-area-inset-bottom);z-index:20;
}
.tab{
  flex:1;background:none;border:none;color:var(--muted);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px 8px;min-height:var(--tabbar);font-size:.68rem;font-weight:650;
  position:relative;border-radius:0;transition:color .14s;
}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* L'ONGLET COURANT PORTE UNE MARQUE, pas seulement une couleur.
   Un simple changement de teinte se perd pour qui distingue mal le vert du
   gris — et sur un ecran au soleil, pour tout le monde. Un trait au-dessus de
   l'icone se voit sans avoir a comparer. */
.tab.on{color:var(--accent)}
.tab.on::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--accent);
}
.tab:active{transform:none}
.badge{
  position:absolute;top:6px;right:calc(50% - 20px);
  background:var(--warn);color:#fff;font-family:var(--mono);
  font-size:.6rem;font-weight:700;border-radius:20px;padding:1px 6px;
}

/* ── Message strip ───────────────────────────────────────────────── */
#message{margin:0 0 2px}

/* ── LE MESSAGE SE VOIT AUSSI AVANT LA PORTE ──────────────────────────
   Le retour du lien d'activation — « confirmed », « expired », « not valid » —
   se dit AVANT le choix du role et avant la connexion : celui a qui le lien a
   expire est precisement celui qui ne peut pas entrer.

   Or « body.avant-choix main » est en visibility:hidden, et la zone de message
   vit dans le main : le message etait donc ecrit, puis invisible. On le remonte
   au-dessus des ecrans d'entree (z-index 60, comme eux) et on lui rend sa
   visibilite — « visibility » s'herite, mais un enfant peut la reprendre. */
body.avant-choix #message:not([hidden]){
  visibility:visible;position:fixed;left:14px;right:14px;top:14px;z-index:70;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}

/* ── Top bar with menu ───────────────────────────────────────────── */
.menu-btn{
  flex:0 0 auto;background:none;border:none;color:var(--ink);cursor:pointer;
  padding:8px;min-height:auto;border-radius:10px;
}
.menu-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
/* Cette regle REDUISAIT le titre a 1,05 rem, plus haut dans la feuille — elle
   annulait exactement ce qu'on vient de faire. Elle datait du temps ou seul
   l'espace du soignant avait un burger. Retirée : la taille se decide en un
   seul endroit. */

/* ── Shift and job cards ─────────────────────────────────────────── */
/* UNE VACATION SE LIT EN DIAGONALE.
   Ce qu'on cherche d'abord est QUAND, puis OU : la date passe donc en tete et
   en gras, le reste s'efface. Une carte ou tout a le meme poids oblige a tout
   lire pour trouver la seule ligne qui compte. */
.job{
  border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:var(--surface);
  display:flex;flex-direction:column;gap:6px;box-shadow:var(--pose);
  transition:box-shadow .14s, transform .14s;
}
.job:hover{box-shadow:var(--souleve);transform:translateY(-1px)}
/* Assignee : adressee a CETTE personne, pas une annonce. Le fond teint et la
   bande le disent avant la moindre lecture. */
.job.assignee{border-left:3px solid var(--accent);background:var(--accent-soft)}
.job.prise{opacity:.55}
/* Une vacation annulee reste LISIBLE : on la cherche pour verifier qu'elle
   l'est bien, et une carte a demi effacee se lit comme un defaut d'affichage.
   Seule la bande rouge dit ce qui s'est passe. */
.job.annulee{border-left:3px solid var(--stop)}
.job.annulee .quand{text-decoration:line-through;text-decoration-color:var(--stop)}
.job .quand{font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.job .ou{font-size:.84rem;color:var(--muted)}
.job .loin{font-family:var(--mono);font-size:.74rem;color:var(--muted)}

/* ── Timesheet rows ──────────────────────────────────────────────── */
.ts{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface);
  display:flex;flex-direction:column;gap:6px}
.ts.a-signer{border-left:3px solid var(--warn)}
.ts .heures{font-family:var(--mono);font-size:.8rem;color:var(--muted)}

/* ── CINQ ONGLETS SUR UN TELEPHONE ────────────────────────────────────
   L'accueil ajoute un onglet partout, et l'espace de BTG en porte donc
   CINQ. Sur 390 px cela fait 78 px chacun : « Compliance » debordait de
   sa colonne et passait sous le bord de l'ecran.

   On ne raccourcit pas les libelles — « Compl. » ne se lit pas, et l'on
   ne renomme pas un ecran parce que le telephone est etroit. On serre le
   texte, ce qui est reversible et ne change rien a ce qui est dit.

   « min-width:0 » EST INDISPENSABLE : un enfant de flex refuse par defaut
   de descendre sous la largeur de son contenu, et sans lui le cinquieme
   onglet pousse la barre au-dela de l'ecran au lieu de se serrer. */
@media (max-width: 460px){
  .tab{min-width:0;padding-left:2px;padding-right:2px;font-size:.63rem;letter-spacing:-.01em}
  .tab span:not(.badge){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab svg{width:20px;height:20px}
  .tab .badge{right:calc(50% - 18px)}

  /* Le titre passait sur DEUX lignes, et son sous-titre sur trois : entre le
     burger, la cloche et « Sign out », il reste peu de place. Il se serre
     lui aussi plutot que de repousser le contenu vers le bas. */
  h1{font-size:1.12rem}
  .sub{font-size:.62rem;letter-spacing:.05em}
  .topbar{gap:6px;padding:11px 12px 9px}
  .topbar .ghost.mini{padding:7px 9px;font-size:.7rem}
}

/* ══ L'ACCUEIL ═══════════════════════════════════════════════════════
   Demande de BTG : « un onglet accueil sur chacune des pages permettant
   d'acceder a leurs onglets principaux », puis, apres l'avoir vu : « la page
   d'accueil n'est pas tres esthetique, revois le design total ».

   CE QUI N'ALLAIT PAS, ET CE QUE CHAQUE REGLE REPARE :

   · Quatre tuiles identiques, sans rien devant : l'ecran repondait « 5 », pas
     « lundi 20h a Telford ». → la UNE, en tete, nomme la chose qui vient.
   · Une etiquette de section grise (« HELLO, JOY ») en guise d'accueil, alors
     que le nom est deja dans le bandeau. → une vraie salutation, et une phrase
     d'etat calculee.
   · Sur grand ecran, quatre tuiles serrees en haut et 500 px de vide dessous.
     → la grille respire, et l'ensemble se centre sur une largeur lisible.
   · Tout en blanc sur gris pale : rien n'appelait le regard. → la une prend la
     couleur de ce qu'elle annonce, et les tuiles portent une pastille.

   Le dessin est ICI, donc le meme partout : trois accueils styles chacun de
   leur cote se ressembleraient le premier jour, puis divergeraient. */

/* ── La salutation et la phrase d'etat ───────────────────────────────
   Elle remplace « Up to date », qui etait ecrit en dur : sur l'ecran de BTG il
   s'affichait au-dessus de quatre postes a pourvoir. Un resume qui contredit
   les chiffres poses sous lui apprend a ne plus lire le resume. */
.accueil-tete{margin:2px 0 14px}
.accueil-tete h2{
  font-size:1.45rem;font-weight:700;line-height:1.15;letter-spacing:-.02em;
  margin:0;color:var(--ink);
}
.accueil-resume{
  margin:5px 0 0;font-size:.88rem;line-height:1.45;color:var(--muted);
}
.accueil-resume:empty{display:none}

/* ── LA UNE ──────────────────────────────────────────────────────────
   La chose qui vient ensuite, ecrite en toutes lettres. Une tuile dit « 3 » ;
   la une dit « Mon 10 Aug · 20:00–08:00, Telford ». On ouvre l'application
   pour cela, pas pour un nombre.

   Elle porte un LISERE plutot qu'un fond plein : un bloc colore pleine largeur
   se lit comme une alerte, et cet ecran s'ouvre tous les matins — une alerte
   quotidienne cesse d'en etre une au bout de trois jours. */
.accueil-une{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:14px 16px;margin:0 0 14px;
  background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:14px;
  box-shadow:var(--pose);
}
.accueil-une[hidden]{display:none}
.accueil-une.warn{border-left-color:var(--warn)}
.accueil-une.stop{border-left-color:var(--stop)}

.une-etiquette{
  font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);
}
.accueil-une.warn .une-etiquette{color:var(--warn)}
.accueil-une.stop .une-etiquette{color:var(--stop)}

.une-titre{font-size:1.02rem;font-weight:680;line-height:1.3;color:var(--ink)}
.une-detail{font-size:.84rem;line-height:1.45;color:var(--muted)}
.une-actions{margin-top:9px}
.une-bouton{
  padding:9px 16px;min-height:40px;border:none;border-radius:11px;
  background:var(--accent);color:#fff;font-size:.85rem;font-weight:650;
}
.une-bouton:hover{filter:brightness(1.08)}
.une-bouton:active{transform:scale(.985)}

/* ── Les tuiles ──────────────────────────────────────────────────────
   DEUX COLONNES, MEME SUR UN TELEPHONE. Une colonne unique donne quatre tuiles
   empilees qu'il faut faire defiler pour compter — or l'interet de cet ecran
   est de tout voir d'un coup. Deux colonnes tiennent sur 320 px, la limite
   basse d'un telephone. */
.tuiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

.tuile{
  flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  text-align:left;padding:14px;min-height:0;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  color:var(--ink);box-shadow:var(--pose);
  transition:border-color .12s ease, transform .12s ease;
}
.tuile:hover{border-color:var(--accent);background:var(--surface)}
.tuile:active{transform:scale(.985)}

.tuile-haut{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:9px}

/* L'ICONE DANS UNE PASTILLE. Icone et chiffre etaient cote a cote, de meme
   taille et de meme couleur : rien ne disait lequel etait la donnee. La
   pastille tient l'icone — un repere, pas une information — et laisse le
   chiffre seul a porter la couleur. */
.tuile-pastille{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 auto;border-radius:11px;
  background:var(--accent-soft);
}
.tuile-pastille svg{
  width:19px;height:19px;
  fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.tuile.warn .tuile-pastille{background:var(--warn-bg)}
.tuile.warn .tuile-pastille svg{stroke:var(--warn)}
.tuile.stop .tuile-pastille{background:var(--stop-bg)}
.tuile.stop .tuile-pastille svg{stroke:var(--stop)}

/* LE CHIFFRE EST CE QUI FAIT OUVRIR LA TUILE : il est plus gros que le
   libelle, et porte la couleur de ce qu'il annonce. Un chiffre et un mot de
   meme taille obligent a lire les deux — meme raisonnement que les trois
   compteurs en tete de l'espace de BTG. */
.tuile-compte{
  font-family:var(--mono);font-size:1.5rem;font-weight:700;line-height:1;
  color:var(--accent);letter-spacing:-.03em;
}
.tuile.warn .tuile-compte{color:var(--warn)}
.tuile.stop .tuile-compte{color:var(--stop)}
.tuile-compte[hidden]{display:none}

.tuile-titre{font-weight:650;font-size:.95rem;line-height:1.25}
.tuile-detail{font-size:.79rem;color:var(--muted);line-height:1.4;margin-top:3px}

/* ── La seconde rangee ────────────────────────────────────────────────
   Documents, conges, historique, profil : ils comptent, mais pas tous les
   jours. Leur donner le meme poids ferait chercher les deux tuiles utiles
   au milieu de six. */
.raccourcis{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.raccourci{
  flex:1 1 auto;min-width:132px;
  display:flex;align-items:center;gap:8px;
  padding:11px 12px;min-height:46px;
  background:transparent;border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font-size:.85rem;font-weight:600;
}
.raccourci:hover{background:var(--accent-soft);border-color:var(--accent-soft)}
.raccourci svg{
  width:17px;height:17px;flex:0 0 auto;
  fill:none;stroke:var(--muted);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.raccourci .badge{margin-left:auto}

/* ── SUR UN ECRAN LARGE ──────────────────────────────────────────────
   Quatre tuiles s'alignaient en haut et laissaient 500 px de vide dessous —
   l'ecran paraissait inachevE. La une passe donc a cote des tuiles, sur deux
   colonnes : l'ensemble occupe sa largeur sans qu'aucune tuile ne s'etire au
   point de cesser de se lire comme un bouton. */
@media (min-width: 700px){
  .accueil-tete h2{font-size:1.7rem}
  .tuiles{grid-template-columns:repeat(4,1fr);gap:12px}
  .tuile{padding:16px}
  .raccourci{flex:0 1 auto}
}

/* ⚠️ LA GRILLE A DEUX COLONNES NE COMMENCE QU'A 1100 px, PAS A 700.
   Entre les deux, la barre laterale prend 280 px : la une et quatre tuiles
   devaient tenir dans 700, ce qui donnait des tuiles de 160 px ou « Shifts
   open to you right now » passait sur trois lignes. Une tuile qu'il faut
   dechiffrer cesse d'etre un raccourci.

   Le point de bascule porte donc sur la largeur REELLEMENT disponible, pas sur
   celle de la fenetre — c'est le meme piege que la barre d'onglets. */
@media (min-width: 1100px){
  .accueil-large.avec-une{
    display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.7fr);
    gap:18px;align-items:start;
  }
  /* Elle s'aligne EN HAUT, elle ne s'etire pas : etiree sur la hauteur des
     tuiles, elle laissait 250 px de blanc sous son bouton — le vide qu'on
     venait de chasser du bas de l'ecran, remis dans la carte. */
  .accueil-large.avec-une .accueil-une{margin:0;align-self:start}
  .accueil-large.avec-une .tuiles{grid-template-columns:repeat(2,1fr)}
}

/* ── Bottom sheet (signing, menu) ────────────────────────────────── */
.feuille{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end}

/* ── LA QUESTION QUI PRECEDE UN GESTE ─────────────────────────────
   Elle se pose AU MILIEU, pas en bas : elle interrompt, elle ne propose
   pas. Et la page reste lisible dessous — c'est le tableau dont on retire
   une garde, ou la liste ou l'on vient d'appuyer. Sans lui, « Cancel this
   shift? » flotte sur du vide et il n'y a plus rien pour verifier qu'on
   parle bien de la bonne.

   Elle est ETROITE : trois lignes de texte sur 900 px se lisent en
   balayant la tete, et l'on manque celle du milieu — qui est justement
   celle qui nomme la garde. */
.feuille.confirmation{align-items:center;justify-content:center;padding:16px 14px;z-index:60}
.feuille.confirmation .feuille-corps{
  max-width:420px;width:100%;border-radius:18px;
}
.feuille.confirmation .actions{margin-top:14px}

/* LES QUATRE ECRANS D'ENTREE, POSES SUR LA COULEUR DE LA MARQUE.
   ─────────────────────────────────────────────────────────────────────
   Inscription, connexion, mot de passe oublie, nouveau mot de passe : on ne
   les voit qu'AVANT d'avoir un compte, et ils remontaient du bas sur un ecran
   gris vide. Un tiroir suppose qu'il y a quelque chose derriere ; ici il n'y a
   rien. Ils occupent donc l'ecran, centres, sur le meme fond que l'accueil —
   la continuite dit qu'on est toujours au meme endroit, en train d'entrer.

   Les panneaux du travail (feuille signee, menu, assignation) gardent le
   tiroir : eux s'ouvrent bel et bien PAR-DESSUS quelque chose. */
.feuille.entree{align-items:center;justify-content:center;padding:16px 14px}
.feuille.entree .feuille-fond{display:none}
.feuille.entree .feuille-corps{
  border-radius:20px;max-width:440px;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 18px 44px rgba(4,36,33,.34);
  max-height:calc(100vh - 32px);
}
.feuille.entree .feuille-corps h2{font-size:1.32rem;letter-spacing:-.01em}

/* UN SEUL BOUTON A L'AIR D'UN BOUTON.
   ─────────────────────────────────────────────────────────────────────
   Ces ecrans alignaient jusqu'a quatre cadres identiques : « Sign in », « I
   forgot my password », « Create an account instead », « Back to the start ».
   Quatre propositions de meme poids, c'est une decision a prendre au lieu d'un
   geste a faire. Le principal garde le plein, les autres redeviennent du
   texte — ils restent des cibles de 44 px, seule leur apparence change. */
.feuille.entree .ghost{
  border-color:transparent;background:transparent;
  font-weight:600;font-size:.88rem;min-height:44px;
}
.feuille.entree .ghost:hover{background:var(--accent-soft)}
.feuille.entree .actions{margin-top:2px}
.feuille.entree .actions + .actions{margin-top:-6px}
/* Le retour a l'accueil est le moins engageant des trois : il ne fait rien
   perdre, mais il ne fait rien avancer non plus. */
.feuille.entree #reg-retour,
.feuille.entree #log-retour{color:var(--muted);font-weight:500}
/* « display:flex » l'emporte sur l'attribut hidden : sans cette ligne, un
   panneau ferme reste etendu sur tout l'ecran et intercepte chaque clic.
   L'application parait alors morte, sans rien afficher d'anormal. */
.feuille[hidden]{display:none}
.feuille-fond{position:absolute;inset:0;background:rgba(10,22,21,.45)}
.feuille-corps,.menu-corps{
  position:relative;width:100%;max-width:520px;margin:0 auto;
  background:var(--surface);border-radius:18px 18px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  max-height:92vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;
}
.feuille-corps h2{font-size:1.05rem;margin:0}
.btn.mini,button.mini{flex:0 0 auto;min-height:auto;padding:6px 12px;font-size:.76rem}

.sig-bloc{display:flex;flex-direction:column;gap:6px}
.sig{
  width:100%;height:130px;border:1px dashed var(--wire,#c4d0cf);border-radius:10px;
  background:#fbfdfc;touch-action:none;
}
/* La signature qu'on a DEJA donnee, relue avant de decider de la refaire.
   Fond clair impose : une signature est tracee en encre sombre, et elle
   disparaitrait sur la carte en theme sombre — on remplacerait alors une
   signature qu'on croit absente. */
.sig-apercu{
  margin-top:10px;min-height:96px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:12px;background:#fbfdfc;padding:8px;
}
.sig-apercu img{max-width:100%;max-height:120px}
.sig-apercu .vide{margin:0;text-align:center}

.saisie{
  font:inherit;font-size:.9rem;padding:11px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%;
}
/* ⚠️ « wrap », ET NON « column » — l'ETOILE TOMBAIT A LA LIGNE.
   En colonne, le libelle et son asterisque sont DEUX items empiles : on lisait
   « FROM » puis, seule sur la ligne suivante, une etoile rouge. Cela touchait
   les quatorze champs obligatoires — c'est-a-dire tous ceux que le client
   avait demande de marquer, et le marquage lui-meme etait illisible.
   En ligne avec retour, le texte et l'etoile restent ensemble ; la saisie passe
   dessous parce qu'elle occupe toute la largeur (regle suivante). */
.bloc-champ{
  flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 0;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;
}
.bloc-champ > .saisie,
.bloc-champ > select,
.bloc-champ > textarea{flex:1 0 100%}
/* « display:flex » L'EMPORTE SUR L'ATTRIBUT « hidden ».
   C'est la meme regle que pour « .feuille[hidden] », et le meme oubli : les
   champs reserves au service — nom de l'etablissement, type, telephone du
   service — etaient poses « hidden » par le code et RESTAIENT AFFICHES a un
   soignant. Personne ne l'avait vu : le serveur ignore ces champs pour un
   candidat, donc rien n'echouait. Seul un cas qui REGARDE l'ecran l'a montre. */
.bloc-champ[hidden]{display:none}
/* Une case a cocher se rate au doigt si seule la case repond. On rend TOUTE la
   ligne cliquable, et on lui donne la hauteur d'un bouton : c'est la meme
   cible que partout ailleurs dans l'application. */
.case{
  display:flex;align-items:center;gap:10px;min-height:44px;
  font-size:.95rem;color:var(--ink);cursor:pointer;
}
.case input{width:20px;height:20px;accent-color:var(--accent);flex:none}

/* L'ASTERISQUE DES CHAMPS OBLIGATOIRES.
   Un seul mecanisme, une seule couleur, dans les trois espaces : trois copies
   finiraient par ne plus se ressembler, et l'on ne saurait plus si un champ
   sans etoile est facultatif ou simplement oublie. */
.requis{color:var(--stop);margin-left:2px;font-weight:700}

/* Une indisponibilite qui recoupe une vacation AVERTIT, elle ne barre pas.
   La carte reste entiere et son bouton actif — seule une bande ambre sur le
   cote dit qu'il y a quelque chose a relire. Griser la carte la ferait lire
   comme « bloquee », ce qu'elle n'est pas. */
.job.chevauche{border-left:3px solid var(--warn)}
.rappel-off{margin:8px 0 0;font-size:.82rem}
.pill.indispo{margin-left:6px}
.indispo-detail{color:var(--warn)}
.card.off.passee{opacity:.55}

/* LES FILTRES PAR STATUT.
   Ils defilent horizontalement plutot que de passer a la ligne : cinq statuts
   sur deux lignes repoussent la liste hors de l'ecran, et c'est la liste qu'on
   vient voir. Le compteur est DANS la pastille — « Cancelled » vide et
   « Cancelled 3 » se ressemblent trop, et l'on ne clique pas sur le premier. */
.filtres{
  display:flex;gap:7px;overflow-x:auto;padding:2px 2px 6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.filtres::-webkit-scrollbar{display:none}
.filtre{
  flex:0 0 auto;min-height:36px;padding:7px 13px;border-radius:20px;
  font-size:.79rem;font-weight:650;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
}
.filtre[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.filtre .compte{
  font-family:var(--mono);font-size:.72rem;opacity:.75;margin-left:3px;
}

.choix{display:flex;gap:8px;flex-wrap:wrap}
.choix button{
  flex:1 1 auto;min-width:110px;min-height:44px;
  border:1px solid var(--accent);border-radius:10px;font-size:.85rem;
}
.choix button[aria-pressed="true"]{background:var(--accent);color:#fff}
.choix button[aria-pressed="false"]{background:transparent;color:var(--accent)}

/* ── Menu ────────────────────────────────────────────────────────── */
/* ── LE TIROIR LATERAL ───────────────────────────────────────────────
   Il remplace la feuille du bas, dans LES TROIS espaces.

   POURQUOI, ET CE QUE CA COUTE. Sur un telephone, une feuille du bas est plus
   facile a atteindre du pouce qu'un tiroir dont le haut est loin — ce n'est
   donc pas un gain partout. Deux choses le justifient quand meme :

     · une icone « burger » qui ouvre une feuille par le bas surprend : le
       geste attendu vient du cote ;
     · le service et BTG travaillent sur un ECRAN LARGE toute la journee, et
       la le tiroir peut rester DEPLIE. Un clic disparait a chaque navigation.

   Les entrees sont donc rangees vers le BAS du tiroir sur telephone, la ou le
   pouce arrive — c'est ce qui rattrape le seul defaut du format. */
.tiroir{position:fixed;inset:0;z-index:40;display:flex}
.tiroir[hidden]{display:none}
.tiroir-fond{position:absolute;inset:0;background:rgba(10,22,21,.45)}
/* 320 px etaient trop larges pour cinq entrees : le tiroir mangeait les
   quatre cinquiemes d'un telephone et l'on ne voyait plus ou l'on revenait.
   272 px suffisent au plus long libelle, et laissent l'ecran derriere
   reconnaissable. */
/* LE TIROIR VA JUSQU'EN BAS — ET IL EST MEUBLE.
   ─────────────────────────────────────────────────────────────────────
   « Trop d'espace vide », trois fois. Les deux premieres corrections
   deplacaient le blanc ; la troisieme a fait EPOUSER LE CONTENU au panneau,
   ce qui supprimait le vide mais donnait une barre qui s'arrete a mi-ecran.
   Demande : « la barre laterale doit prendre le long de l'appli, mais design
   les onglets et cette section pour que ce soit beau et pas vide ».

   Les deux ne s'opposent que si la colonne n'a rien a montrer. Elle porte
   donc, de haut en bas : la MARQUE, le COMPTE, les entrees GROUPEES par
   nature, et le pied. Chaque bande a une fonction — ce n'est pas du
   remplissage, c'est ce qu'on allait chercher ailleurs. */
.tiroir-corps{
  position:relative;width:min(80vw, 288px);background:var(--surface);
  padding:0 0 calc(12px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
  box-shadow:var(--souleve);
  height:100%;overflow-y:auto;
  animation:glisse .18s ease-out;
}

/* La bande de marque donne une TETE a la colonne, dans la couleur de
   l'application — a la place du blanc qui la commencait. */
.tiroir-marque{
  flex:0 0 auto;background:var(--accent);
  padding:calc(env(safe-area-inset-top) + 13px) 14px 13px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.tiroir-marque img{height:28px;width:auto;display:block}
.tiroir-marque .menu-fermer{color:rgba(255,255,255,.85)}
.tiroir-marque .menu-fermer:hover{background:rgba(255,255,255,.14);color:#fff}

/* Les entrees sont GROUPEES, et chaque groupe porte son intitule.
   Quatre lignes nues dans une colonne haute se lisent comme une liste
   inachevee ; deux groupes titres se lisent comme un plan. */
.menu-groupe{
  font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:700;
  padding:15px 12px 4px;
}
@keyframes glisse{from{transform:translateX(-100%)}to{transform:translateX(0)}}

/* LES ENTREES SUIVENT L'ENTETE, ELLES NE SONT PAS POUSSEES EN BAS.
   ─────────────────────────────────────────────────────────────────────
   Je les avais collees au bas du tiroir en pensant au pouce. Le resultat
   etait un grand vide de plusieurs centimetres entre le nom et la premiere
   entree : le tiroir avait l'air casse, et l'on cherchait ou cliquer.
   Le confort du pouce ne valait pas cela — et sur un tiroir qui occupe toute
   la hauteur, la derniere entree reste de toute facon atteignable. */
.tiroir-entrees{display:flex;flex-direction:column;gap:2px;padding:0 8px}

/* L'ENTETE PORTE UN MONOGRAMME, ET SA FERMETURE.
   « Close » etait une LIGNE DE LA LISTE : une entree qui ne mene nulle part,
   au milieu de quatre qui menent quelque part. Elle se lisait comme une
   destination et se touchait par erreur. C'est une croix, en haut a droite,
   la ou toute fenetre se ferme. */
.menu-entete{
  display:flex;align-items:center;gap:11px;
  padding:14px 14px 13px;border-bottom:1px solid var(--line);
}
.menu-entete .val{font-size:1rem;font-weight:700;line-height:1.25}
.menu-entete .meta{font-size:.78rem;line-height:1.35}
/* LE NOM PEUT PRENDRE DEUX LIGNES.
   Coupe a l'ellipse, « BTG Healthcare Solutions » devenait « BTG Healthcar… » :
   deux etablissements du meme groupe s'y ressemblent, et c'est precisement la
   question a laquelle l'entete repond. Deux lignes suffisent aux noms reels ;
   au-dela seulement, on coupe. */
.menu-qui{min-width:0;flex:1}
.menu-qui .val{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
}
.menu-qui .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.menu-monogramme{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.92rem;letter-spacing:.02em;
}

.menu-fermer{
  flex:0 0 auto;background:none;border:none;padding:6px;min-height:auto;
  border-radius:9px;color:var(--muted);line-height:0;
}
.menu-fermer svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.menu-fermer:hover{background:var(--accent-soft);color:var(--ink)}

/* LE PIED SUIT LES ENTREES, il n'est pas repousse en bas.
   Un pied epingle au bas d'une colonne pleine hauteur ne remplit pas le vide :
   il le deplace entre la derniere entree et lui. Ici le tiroir s'arrete apres
   le pied — voir « .tiroir-corps ».
   Ce qu'il porte REPOND A UNE QUESTION : sous quel compte suis-je, quelle
   version tourne ici. Les deux se lisaient en ouvrant le profil. */
.menu-pied{
  margin-top:auto;padding:12px 14px 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;
}
.menu-pied[hidden]{display:none}
.menu-pied .meta{font-size:.74rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis}
.menu-pied .version{font-family:var(--mono);opacity:.65}

/* Des entrees SERREES, sans trait entre elles : cinq lignes separees par cinq
   filets font une grille, pas une liste. Le contraste vient du survol et de la
   selection, pas d'un cadre par entree. */
.menu-item{
  background:none;border:none;color:var(--ink);text-align:left;font-size:.93rem;font-weight:600;
  padding:11px 10px;border:none;border-radius:10px;min-height:auto;
  display:flex;align-items:center;gap:11px;
}
/* UNE ICONE PAR ENTREE, comme dans la barre d'onglets.
   Une colonne de texte nu, large de 272 px, se lit comme une liste inachevee —
   et rien n'aide a retrouver « Time off » du coin de l'oeil. Les onglets en
   avaient depuis le debut ; le tiroir, qui porte les MEMES destinations, n'en
   avait aucune. */
.menu-item svg{
  flex:0 0 auto;width:19px;height:19px;fill:none;stroke:var(--muted);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.menu-item:hover{background:var(--accent-soft)}
.menu-item:hover svg{stroke:var(--accent)}
/* L'ecran OUVERT se voit dans le tiroir : sans cela on l'ouvre pour retrouver
   ou l'on est, et il ne le dit pas. */
.menu-item.ici{background:var(--accent-soft);color:var(--accent)}
.menu-item.ici svg{stroke:var(--accent)}
.badge.inline{position:static;margin-left:auto}

/* AU-DELA DE 1000 px, LE TIROIR RESTE OUVERT.
   C'est le vrai gain du format : sur l'ecran d'un bureau, la navigation n'a
   aucune raison de se replier — et un clic disparait a chaque fois. Le fond
   sombre s'efface, le contenu se decale, et le bouton « Close » n'a plus de
   sens : il se cache. */
@media(min-width:1000px){
  .tiroir{inset:auto 0 0 0;top:0;width:280px;right:auto}
  .tiroir[hidden]{display:flex}
  .tiroir-fond{display:none}
  /* ICI, EN REVANCHE, LA COLONNE VA JUSQU'EN BAS.
     Elle n'est plus un panneau pose sur l'ecran mais un BORD de la fenetre :
     s'arreter a mi-hauteur laisserait une marche dans la mise en page. Le pied
     retrouve donc le bas, ou il ne gene personne. */
  .tiroir-corps{
    width:280px;border-right:1px solid var(--line);box-shadow:none;animation:none;
    height:100%;align-self:stretch;border-radius:0;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .tiroir-entrees{margin-top:0}
  .menu-pied{margin-top:auto}
  #menu-close,#menu-close-c,#menu-close-a{display:none}
  body{padding-left:280px}
  .menu-btn{display:none}
}

/* ── Au-dela d'un telephone, les onglets passent EN HAUT ──────────────
   La regle vivait, recopiee, dans le gestionnaire et le service ; l'espace
   candidat ne l'avait pas du tout. Sur un ordinateur, deux applications
   affichaient donc leurs onglets en tete et la troisieme les gardait collees
   en bas — une barre fixee au bas d'un grand ecran est loin du contenu et se
   lit comme un reste de telephone.

   EN FIN DE FEUILLE, ET CE N'EST PAS UN DETAIL DE RANGEMENT : posee plus haut,
   elle etait reecrasee par « .tabbar{position:fixed} » qui vient apres. A
   specificite egale, c'est la derniere qui gagne — la regle existait et ne
   s'appliquait pas. */
@media(min-width:700px){
  .tabbar{
    position:static;border-top:none;border-bottom:1px solid var(--line);
    max-width:var(--large);margin:0 auto;background:transparent;
  }
  .tab{flex-direction:row;gap:8px;min-height:auto;padding:10px 16px;font-size:.85rem}
  .tab.on{border-bottom:2px solid var(--accent)}
  /* La pastille est posee en absolu pour coiffer une icone empilee. Les onglets
     passant en ligne, elle retombait SUR le libelle — « New jobs » barre d'un
     « 4 ». En ligne, elle se range a la suite. */
  .tab .badge{position:static;top:auto;right:auto;margin-left:2px}
  .topbar, main{max-width:var(--large)}
  /* La reserve pour la barre du bas n'a plus lieu d'etre : elle laissait un
     vide de la hauteur d'une barre absente. */
  main{padding-bottom:40px}
}

/* ── LA CLOCHE, REPRISE ───────────────────────────────────────────────
   Constat : « ce n'est pas du tout bien visible » cote candidat, et « pas tres
   esthetique » a cote de « Sign out ».

   Deux defauts, pas un. Elle etait POSEE a cote d'un bouton borde, sans forme
   a elle : deux objets de poids differents colles l'un a l'autre. Et son
   ecusson reprenait celui des onglets — concu pour s'appuyer sur le bord d'une
   icone large, il flottait ici a cote du dessin.

   Elle a maintenant sa forme — un cercle qui repond au bouton voisin — et son
   ecusson est ancre sur elle. Quand quelque chose attend, elle prend la
   couleur de l'application : c'est ce qui la rend visible sans clignoter. */
.cloche-btn{
  position:relative;flex:0 0 auto;
  width:40px;height:40px;padding:0;min-height:auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;
  background:var(--surface);color:var(--muted);line-height:0;
  transition:background .14s, color .14s, border-color .14s;
}
.cloche-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.cloche-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft)}

/* QUAND QUELQUE CHOSE ATTEND, ELLE LE PORTE.
   Une cloche qui a la meme allure pleine ou vide oblige a lire son ecusson —
   or c'est justement ce qu'on ne fait pas en traversant un ecran. */
.cloche-btn.pleine{
  background:var(--accent-soft);color:var(--accent);border-color:var(--accent);
}

/* L'ECUSSON EST ANCRE SUR LE CERCLE, pas pose a cote.
   Celui des onglets s'appuie sur le bord d'une icone large ; repris tel quel
   ici, il flottait. Le liseré de la couleur du fond le detache du dessin. */
.cloche-btn .badge{
  position:absolute;top:-3px;right:-3px;
  min-width:18px;height:18px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;line-height:1;
  border:2px solid var(--bg);
}
/* ⚠️ CINQUIEME FOIS QUE « display » L'EMPORTE SUR L'ATTRIBUT « hidden ».
   Voir « .feuille[hidden] », « .bloc-champ[hidden] », « .tiroir[hidden] »,
   « .menu-pied[hidden] », « .cloche-panneau[hidden] » : meme oubli a chaque
   fois. La regle du navigateur — « [hidden]{display:none} » — a une
   specificite de (0,1,0) ; le moindre selecteur de classe la bat.

   Ce qu'il en coutait ici : le compteur de la cloche portait bien « hidden »
   et RESTAIT AFFICHE, plante sur « 0 », dans les trois espaces. Ce que le
   client a decrit — « les notifications ne fonctionnent pas cote client et
   admin » — c'etait cela : un compteur qui n'a jamais bouge.

   La garde ESP-60 balaie desormais les trois espaces et refuse tout element
   pose « hidden » qui reste visible : la prochaine fois, elle rougira. */
.badge[hidden]{display:none}

.cloche-panneau{position:fixed;inset:0;z-index:45;display:flex;justify-content:flex-end}
.cloche-panneau[hidden]{display:none}
.cloche-fond{position:absolute;inset:0;background:rgba(10,22,21,.35)}

/* Elle DESCEND DU COIN OU L'ON A TOUCHE — pas du bas, pas du cote. Un panneau
   qui arrive d'ailleurs que du bouton fait perdre le lien entre les deux. */
.cloche-corps{
  position:relative;margin:calc(env(safe-area-inset-top) + 58px) 10px 0;
  width:min(94vw, 380px);max-height:70vh;overflow-y:auto;
  background:var(--surface);border-radius:16px;box-shadow:var(--souleve);
  padding:13px 13px 6px;
  animation:tombe .16s ease-out;
}
@keyframes tombe{from{transform:translateY(-8px);opacity:.4}to{transform:none;opacity:1}}

.alerte{
  width:100%;display:flex;align-items:flex-start;gap:10px;text-align:left;
  background:none;border:none;border-top:1px solid var(--line);
  padding:11px 4px;min-height:auto;color:var(--ink);font:inherit;
}
.alerte:first-of-type{border-top:none}
.alerte:hover{background:var(--accent-soft)}

/* Ce qui n'a pas ete lu se voit SANS compter : une pastille pleine d'un cote,
   eteinte de l'autre. Le gras seul ne se distingue pas sur trois lignes. */
.alerte .pastille{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:6px;
  background:var(--line);
}
.alerte.neuve .pastille.warn{background:var(--warn)}
.alerte.neuve .pastille.stop{background:var(--stop)}
.alerte.neuve .pastille.ok{background:var(--good)}
.alerte.neuve .pastille.muted{background:var(--muted)}
.alerte.neuve .quoi{font-weight:650}
.alerte-corps{display:flex;flex-direction:column;gap:2px;min-width:0}
.alerte .quoi{font-size:.86rem;line-height:1.4}

/* L'OEIL SUR LES CHAMPS DE MOT DE PASSE.

   Le bouton vit DANS le champ, a droite : dehors, il passerait pour une action
   du formulaire — on a deja vu quelqu'un le prendre pour « valider ».

   La zone touchable fait 44 px : c'est le minimum tenable au pouce, et ce champ
   se remplit debout, dans un couloir. Plus petit, on touche a cote et l'on
   efface ce qu'on venait de taper. */
.champ-oeil{position:relative;display:block}
.champ-oeil .saisie{padding-right:46px}
.oeil{
  /* Centre par « top/bottom + margin:auto » plutot que par une TRANSFORMATION.
     Le rendu est le meme ; la difference est que le point de contact se calcule
     alors sur la position reelle du bouton, sans passer par une matrice — ce
     qui evite qu'un clic vise le champ situe dessous. */
  position:absolute;right:4px;top:0;bottom:0;margin:auto 0;
  width:44px;height:44px;min-height:auto;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:var(--muted);
  /* ⚠️ SANS CE « z-index », LE CHAMP RECOUVRE LE BOUTON.
     Le champ occupe toute la largeur et se dessine au-dessus : le clic lui
     arrive a lui, le bouton ne recoit rien. A l'oeil, tout paraissait normal —
     c'est un cas de campagne qui l'a dit, « input intercepts pointer events ».
     C'est exactement le genre de defaut qu'une capture d'ecran ne montre pas. */
  z-index:2;
}
.oeil svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  /* L'icone ne recoit rien : c'est le BOUTON qu'on touche. Sans cela, le point
     de contact tombe sur le dessin, et la couche de plus brouille le calcul de
     ce qui est reellement touche. */
  pointer-events:none;
}
/* Ouvert, il prend la couleur de l'application : on doit voir d'un coup d'oeil
   que le mot de passe est LISIBLE a l'ecran. */
.oeil[aria-pressed="true"]{color:var(--accent)}
.oeil:hover{color:var(--ink)}
.oeil:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px}

/* OU L'ON SE TROUVE — sur les trois ecrans d'entree.

   Les trois roles se connectent sur le MEME ecran, et rien ne le disait. Ce
   bandeau doit se lire AVANT le formulaire, sans le dominer : c'est un repere,
   pas un titre. Il porte donc la couleur de l'application et reste discret. */
.ou-suis-je{
  display:inline-block;margin:0 0 10px;padding:5px 11px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent);
  font-size:.76rem;font-weight:650;letter-spacing:.01em;
}

/* LES QUATRE CHIFFRES DE LA REMISE DES COURRIELS.

   En grille et non en liste : ils se lisent d'un coup d'oeil ou ils ne servent
   a rien. Celui qui compte — ce qu'il reste sur le plafond du jour — change de
   couleur quand il se resserre, parce qu'un nombre seul ne dit pas s'il est
   bon. */
.cartes-chiffres{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin:10px 0 4px;
}
.carte-chiffre{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 13px;display:flex;flex-direction:column;gap:3px;
}
.carte-chiffre .chiffre{font-size:1.5rem;font-weight:700;line-height:1.1}
.carte-chiffre.souci{border-color:var(--stop);background:var(--stop-bg)}
.carte-chiffre.souci .chiffre{color:var(--stop)}
.carte-chiffre.attente{border-color:var(--warn);background:var(--warn-bg)}
.carte-chiffre.attente .chiffre{color:var(--warn)}

/* LE REGLAGE DES NOTIFICATIONS, AU BAS DU PANNEAU.

   Sous la liste et non au-dessus : ce qui vous attend passe avant la facon
   dont on vous previent. Mais DANS le panneau — c'est le seul endroit ou l'on
   se demande comment on est prevenu, et range ailleurs il ne serait jamais
   trouve, donc jamais allume. */
.push-reglage{
  border-top:1px solid var(--line);margin-top:6px;padding:10px 4px 4px;
}
.push-reglage .row{align-items:flex-start;gap:10px}
.push-quoi{display:flex;flex-direction:column;gap:2px;min-width:0}
.push-quoi strong{font-size:.82rem;font-weight:650}
.push-etat{font-size:.76rem;color:var(--faint);line-height:1.45}
/* Un motif de refus n'est pas une information de fond : il appelle un geste,
   et doit se distinguer de l'etat courant. */
.push-etat.push-souci{color:var(--stop)}
#push-bouton{flex:0 0 auto;font-size:.78rem;padding:7px 12px;min-height:auto}