/* Maquette v4 : le bureau. Repris de la v3 (structure, décisions, projets, clients, sécurité, « Lancer un projet ») ;
   la rangée « L'équipe » devient une scène en pixel : un poste par agent, la salle de réunion, le café, le coin « La chine ». */
@font-face { font-family: "Archivo"; src: url("/statique/polices/archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("/statique/polices/pixelify.woff") format("woff"); font-display: swap; }
:root {
  --encre: #171a2e; --douce: #50566f; --fond: #eef0f4; --blanc: #fff; --filet: #dadee7; --filet-2: #c4c9d6;
  --vert: #1d6b45; --vert-clair: #8cc2a3; --vert-fond: #e3f2e9; --ambre: #8a5208; --ambre-fond: #fdf0d8; --rouge: #a12a1c; --rouge-fond: #fbe9e6;
  --bleu: #2a56c6; --bleu-fond: #e7ecfb; --attente: #b06f12;
  --mur: #2b2f45; --marge: 16px; --rayon: 8px;
  --texte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --courbe: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 1rem/1.4 var(--texte); overflow-wrap: break-word; }
button, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
::selection { background: #c9d6f7; }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* En-tête : le nom, « Figer » ; sur ordinateur, l'heure et le geste principal */
.haut { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: calc(6px + env(safe-area-inset-top)) var(--marge) 6px; background: var(--fond); border-bottom: 1px solid var(--filet); }
.logo { font: 400 1.25rem/1 "Pixelify Sans", var(--texte); letter-spacing: .02em; }
.logo b { font-weight: 400; color: var(--rouge); }
.haut .jour { display: none; color: var(--douce); }
.haut .lancer { display: none; }
.figer { margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-2); font: 600 .9375rem var(--texte); color: var(--encre); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.figer svg { width: 14px; height: 14px; }
.figer[aria-pressed="true"] .i-pause, .figer[aria-pressed="false"] .i-lire { display: none; }
.figer:disabled { color: var(--douce); cursor: default; }

main { padding: 12px var(--marge) calc(104px + env(safe-area-inset-bottom)); display: grid; gap: 20px; max-width: 640px; margin: 0 auto; }
.gauche { display: grid; gap: 12px; min-width: 0; }
section { display: grid; gap: 8px; min-width: 0; }
h2 { margin: 0; display: flex; align-items: baseline; gap: 8px; font: 700 1.25rem/1.2 var(--texte); }
h2 .compte { color: var(--douce); }
h2 .note { margin-left: auto; font: 400 1rem var(--texte); color: var(--douce); }
.panneau { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); }

/* L'alerte, en une ligne : quoi, depuis quand */
.etat { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 18px; gap: 8px; align-items: center; min-height: 48px; padding: 6px 8px 6px 12px; border-radius: var(--rayon); text-decoration: none; }
.etat.alerte { background: var(--rouge-fond); color: var(--rouge); border: 1px solid #efc3bc; }
.etat b { color: var(--encre); font-size: 1rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etat .duree { color: var(--rouge); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.etat .fl { width: 18px; height: 18px; color: var(--douce); }

.ic { width: 22px; height: 22px; flex: none; }
.encours { color: var(--bleu); } .attente { color: var(--attente); } .fini { color: var(--vert); }

/* Petits portraits (décisions, projets) : le visage pixel, plus de lettre dans un rond */
.tete-px { width: 28px; height: 28px; flex: none; border-radius: 6px; background: #efe6d4; display: block; }
.tete-px svg { width: 100%; height: 100%; display: block; }

/* Maisons : un client, sa couleur = son état */
.maison { display: inline-block; width: 18px; height: 16px; background: var(--vert); clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%); flex: none; }
.maison.ambre { background: #c98410; } .maison.rouge { background: var(--rouge); } .maison.gris { background: #7a8099; }

/* ——— LE BUREAU ——— */
#bureau { gap: 6px; }
/* Au téléphone, la scène se passe de titre (le premier écran garde « À toi ») ; le titre reste pour les lecteurs d'écran */
@media (max-width: 999px) { #bureau > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.cadre { container-type: inline-size; }
.scene {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--mur); border-radius: 10px;
  grid-template-areas: "salle salle cafe chine" "p1 p1 p2 p2" "p3 p3 p4 p4";
}
.scene svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.zone { position: relative; min-width: 0; border: 0; padding: 0; margin: 0; border-radius: 6px; overflow: clip; text-align: left; color: var(--encre); text-decoration: none; font: inherit; }
button.zone, a.zone { cursor: pointer; }
.salle { grid-area: salle; background: #dfe8ef; display: grid; align-items: end; }
.cafe { grid-area: cafe; background: #f1dfcb; display: grid; align-items: end; }
.chine { grid-area: chine; background: #ece1d0; display: grid; align-items: end; }
.salle::after { content: ""; position: absolute; inset: 0; border: 3px solid #9fb6c8; border-radius: 6px; pointer-events: none; } /* la vitre */
.plaque-zone { position: absolute; left: 4px; top: 4px; z-index: 1; max-width: calc(100% - 8px); padding: 1px 6px; border-radius: 3px; background: #fffaf0; box-shadow: 0 0 0 1px var(--encre); font: 700 .8125rem/1.35 var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.salle.occupee .plaque-zone { background: var(--bleu-fond); }

.poste { background: #efe6d4; display: grid; grid-template-rows: auto auto; align-content: end; gap: 2px; padding: 4px 4px 0; }
.p1 { grid-area: p1; } .p2 { grid-area: p2; } .p3 { grid-area: p3; } .p4 { grid-area: p4; }
.poste svg { margin: 0 -4px; width: calc(100% + 8px); }

/* La bulle : sur quoi (2 lignes au plus), chez qui et depuis quand */
.bulle { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 5px; align-items: center; min-height: 50px; padding: 3px 6px; border-radius: 6px; background: var(--blanc); box-shadow: 0 0 0 2px var(--encre); line-height: 1.15; }
.bulle::after { content: ""; position: absolute; left: calc(57% - 4px); bottom: -6px; width: 8px; height: 6px; background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bulle::before { content: ""; position: absolute; left: calc(57% - 6px); bottom: -9px; width: 12px; height: 8px; background: var(--encre); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bulle .bi { width: 16px; height: 16px; grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
.bulle .b1, .bulle .b2 { min-width: 0; overflow: hidden; }
.bulle .b1 { font-weight: 700; font-size: .875rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.bulle .b2 { font-size: .8125rem; color: var(--douce); white-space: nowrap; text-overflow: ellipsis; }
.t-attend .bulle, .t-part .bulle { background: var(--ambre-fond); }
.t-attend .bulle .b1, .t-part .bulle .b1 { color: var(--ambre); }
.t-libre .bulle { background: var(--vert-fond); }
.t-libre .bulle .b1 { color: var(--vert); }
.t-reunion .bulle { background: var(--bleu-fond); }
.t-reunion .bulle .b1 { color: var(--bleu); }
/* La plaque de laiton = une personne : sur son bureau, à la table, au café */
.plaque-nom { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); max-width: calc(100% - 8px); padding: 0 8px; border-radius: 3px; background: #f0d68a; box-shadow: 0 0 0 1px #5d3a24; font: 700 .875rem/1.45 var(--texte); color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.salle .plaque-nom, .cafe .plaque-nom { font-size: .8125rem; padding: 0 6px; }

/* États de chaque endroit qu'on touche */
.zone:focus-visible { outline: 3px solid #8fb0ff; outline-offset: -3px; }
.zone:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .poste:hover, .salle:hover, .chine:hover { filter: brightness(1.04); }
  .poste:hover .plaque-nom { background: #f7e3a6; }
}

/* Le mouvement : il dit ce qui est vivant. Tout s'arrête : mouvement réduit, bouton « Figer », capture. */
.f2 { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fige) .anim .f1 { animation: image1 .5s steps(1, end) infinite; }
  html:not(.fige) .anim .f2 { animation: image2 .5s steps(1, end) infinite; }
  html:not(.fige) .anim.lent .f1 { animation-duration: 1.8s; }
  html:not(.fige) .anim.lent .f2 { animation-duration: 1.8s; }
  html:not(.fige) .curseur { animation: clignote 1s steps(1, end) infinite; }
  html:not(.fige) .pt { animation: point 1.5s steps(1, end) infinite; }
  html:not(.fige) .pt2 { animation-delay: .25s; } html:not(.fige) .pt3 { animation-delay: .5s; }
  html:not(.fige) .vapeur { animation: clignote 1.4s steps(1, end) infinite; }
  dialog[open] { animation: monte .24s var(--courbe); }
  .nouveau { animation: arrive .6s ease-out; }
}
@keyframes image1 { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes image2 { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes clignote { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes point { 0% { opacity: .25; } 33% { opacity: 1; } }
@keyframes monte { from { transform: translateY(24px); opacity: 0; } }
@keyframes arrive { from { background: var(--vert-fond); } }

/* Décisions */
.decisions { display: grid; gap: 10px; }
.a-toi { padding: 14px; display: grid; gap: 8px; }
.a-toi .chez { display: flex; align-items: center; gap: 8px; color: var(--douce); margin: 0; }
.a-toi h3 { margin: 0; font: 700 1.125rem/1.25 var(--texte); }
.a-toi .avis { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--douce); }
.plan { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; }
.boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.boutons button, .annuler { min-height: 48px; border-radius: 6px; border: 0; font-weight: 700; font-size: 1.0625rem; cursor: pointer; }
.boutons button:active, .lancer:active, .envoyer:active { transform: scale(.97); }
.oui { background: var(--encre); color: #fff; }
.non { background: var(--fond); color: var(--encre); box-shadow: inset 0 0 0 1px var(--filet-2); }
.tranche { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--vert); font-weight: 600; }
.tranche.refus { color: var(--douce); }
.annuler { margin-left: auto; min-height: 44px; padding: 0 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-2); font-size: 1rem; color: var(--encre); flex: none; }

/* Listes */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li + li { border-top: 1px solid var(--filet); }
.pas { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--douce); }
.pas time { display: inline-block; min-width: 3.4em; font-variant-numeric: tabular-nums; color: var(--encre); }

/* Projets : 5 étapes */
.projet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; text-decoration: none; min-height: 64px; }
.projet b { font-size: 1.0625rem; }
.projet .chez { grid-column: 1; color: var(--douce); display: flex; align-items: center; gap: 6px; }
.projet .tete-px { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.barre { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.barre i { height: 6px; border-radius: 2px; background: var(--filet); }
.barre i.f { background: var(--vert); } .barre i.ici { background: var(--vert-clair); }
.suite { grid-column: 1 / -1; margin: 0; }
.suite .etape { color: var(--douce); font-variant-numeric: tabular-nums; }
.suite .toi, .suite .tiers { color: var(--ambre); font-weight: 600; }

/* Clients */
.client { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 12px 14px; min-height: 56px; }
.client b { font-size: 1.0625rem; }
.client p { grid-column: 2; margin: 0; }
.client .r { color: var(--rouge); font-weight: 600; } .client .a { color: var(--ambre); font-weight: 600; }
.repondent { display: flex; flex-wrap: wrap; gap: 6px 14px; grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; color: var(--douce); }
.repondent li { display: inline-flex; align-items: center; gap: 6px; }

/* Sécurité */
.secu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.secu .panneau { padding: 12px 14px; display: grid; gap: 4px; align-content: start; margin: 0; text-decoration: none; }
.secu .chiffre { font: 700 1.5rem/1.1 var(--texte); font-variant-numeric: tabular-nums; }
.secu .chiffre small { font-size: 1rem; font-weight: 600; color: var(--douce); }
.secu p { margin: 0; color: var(--douce); }
.secu .grave { color: var(--rouge); font-weight: 600; }
.secu .moyenne { color: var(--ambre); font-weight: 600; }
.secu .large { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--vert); font-weight: 600; }

.pied { margin: 0; color: var(--douce); text-align: center; display: grid; gap: 10px; justify-items: center; }
.pied p { margin: 0; }
.essai { min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet-2); font-weight: 600; cursor: pointer; }

/* Le geste principal, sous le pouce */
.lanceur { position: fixed; inset: auto 0 0 0; z-index: 6; padding: 12px var(--marge) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--fond) 70%, rgba(238, 240, 244, 0)); }
.lancer { width: 100%; min-height: 56px; border: 0; border-radius: 10px; background: var(--encre); color: #fff; font: 700 1.125rem var(--texte); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; white-space: nowrap; }
.lancer svg { width: 22px; height: 22px; }

/* Les feuilles (Lancer un projet, un collègue, la salle, La chine) : bas d'écran au téléphone */
dialog { border: 0; padding: 0; color: var(--encre); background: var(--blanc); width: 100%; max-width: 100%; height: fit-content; max-height: 88svh; margin: auto 0 0; border-radius: 14px 14px 0 0; overflow: auto; overscroll-behavior: contain; }
dialog::backdrop { background: rgba(23, 26, 46, .45); }
.feuille { display: grid; gap: 12px; padding: 14px var(--marge) 0; }
.feuille .tete { display: flex; align-items: center; gap: 12px; }
.feuille h2 { font-size: 1.375rem; display: block; }
.feuille h2:focus { outline: none; }
.feuille h3 { margin: 0; font: 700 1rem/1.3 var(--texte); }
.feuille .metier { margin: 2px 0 0; color: var(--douce); }
.portrait { width: 52px; height: 72px; flex: none; border-radius: 8px; background: #efe6d4; display: grid; place-items: end center; overflow: hidden; }
.portrait svg { width: 40px; height: auto; shape-rendering: crispEdges; display: block; }
.fermer { margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--fond); display: grid; place-items: center; cursor: pointer; flex: none; align-self: start; }
.f-etat { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; padding: 10px 12px; border-radius: var(--rayon); background: var(--fond); font-weight: 600; }
.f-etat .bi { width: 22px; height: 22px; }
.f-etat.t-attend, .f-etat.t-part { background: var(--ambre-fond); }
.f-etat.t-libre { background: var(--vert-fond); }
.f-etat.t-reunion { background: var(--bleu-fond); }
.f-bloc { display: grid; gap: 6px; }
.f-bloc p { margin: 0; }
.f-aide { margin: 0; color: var(--douce); }
.f-decision { padding: 12px; border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--filet-2); display: grid; gap: 8px; }
.f-decision b { font-size: 1.0625rem; }
.qui-la { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.qui-la li { display: inline-flex; align-items: center; gap: 6px; }

/* Le fil : on parle à un collègue */
.fil { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fil li { max-width: 86%; padding: 8px 12px; border-radius: 14px; overflow-wrap: anywhere; }
.fil .eux { background: var(--fond); border-bottom-left-radius: 4px; }
.fil .moi { justify-self: end; background: var(--encre); color: #fff; border-bottom-right-radius: 4px; }
.fil small { display: block; font-size: .8125rem; color: var(--douce); margin-bottom: 2px; }
.fil .moi small { color: #c9cde0; }
.fil .ecrit { color: var(--douce); font-style: italic; }
.parler { position: sticky; bottom: 0; background: var(--blanc); display: grid; gap: 6px; padding: 10px 0 calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--filet); }
.parler label { font-weight: 700; }
.saisie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.feuille textarea { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid var(--filet-2); border-radius: 8px; font-size: 1rem; line-height: 1.4; resize: vertical; background: #fff; }
.feuille textarea:focus-visible { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.feuille textarea[aria-invalid="true"] { border-color: var(--rouge); box-shadow: 0 0 0 1px var(--rouge); }
.envoyer { min-height: 48px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--encre); color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; }
.erreur { margin: 0; color: var(--rouge); font-weight: 600; }
.erreur:empty { display: none; }
.lien-fort { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; background: var(--encre); color: #fff; font-weight: 700; text-decoration: none; }

/* « Lancer un projet » (v3) */
.feuille label.titre { font-weight: 700; }
#demande { min-height: 132px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix label { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 22px; background: var(--fond); box-shadow: inset 0 0 0 1px var(--filet-2); cursor: pointer; }
.choix input:checked + label { background: var(--encre); color: #fff; box-shadow: none; }
.choix input:focus-visible + label { outline: 3px solid var(--bleu); outline-offset: 2px; }
.feuille .aide { margin: 0; color: var(--douce); }
.feuille .bas { position: sticky; bottom: 0; background: var(--blanc); padding: 10px 0 calc(14px + env(safe-area-inset-bottom)); }

/* Le retour d'un geste : en haut au téléphone (il ne cache ni « À toi » ni « Lancer un projet ») */
.toast { position: fixed; left: var(--marge); right: var(--marge); top: calc(64px + env(safe-area-inset-top)); z-index: 7; margin: 0 auto; max-width: 480px; padding: 12px 14px; border-radius: 8px; background: var(--encre); color: #fff; font-weight: 600; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .2s; transform: none; } }

/* Ordinateur : le bureau en grand (postes en 2 × 2, les salles à gauche), le reste autour */
@media (min-width: 1000px) {
  .haut { padding: 10px max(32px, calc((100vw - 1360px) / 2 + 32px)); gap: 16px; }
  .haut .jour { display: block; margin-left: auto; }
  .haut .figer { margin-left: 0; }
  .haut .lancer { display: flex; width: auto; min-height: 48px; padding: 0 20px; font-size: 1.0625rem; }
  .lanceur { display: none; }
  main { max-width: 1360px; padding: 20px 32px 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "gauche gauche toi" "projets clients secu" "pied pied pied"; align-items: start; column-gap: 28px; }
  .gauche { grid-area: gauche; } #toi { grid-area: toi; } #projets { grid-area: projets; } #clients { grid-area: clients; } #secu { grid-area: secu; } .pied { grid-area: pied; }
  .scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); grid-template-areas: "salle salle p1 p2" "cafe chine p3 p4"; padding: 6px; gap: 6px; }
  .plaque-zone { font-size: .875rem; }
  .bulle { min-height: 56px; padding: 4px 8px; }
  .bulle .b1 { font-size: 1rem; } .bulle .b2 { font-size: .9375rem; }
  .plaque-nom { font-size: 1rem; }
  .salle .plaque-nom, .cafe .plaque-nom { font-size: .9375rem; }
  dialog { margin: auto; max-width: 560px; border-radius: 14px; }
  .toast { top: auto; bottom: 24px; transform: translateY(8px); }
  .toast.vu { transform: none; }
}

/* 30/10 (lot 19) : ce que la production ajoute à la maquette d'Alex */
.logo { color: inherit; text-decoration: none; }
/* relecture du lot 21 : un lien en « display: contents » ne prend pas le focus (Chromium) : au clavier, la fiche d'un client ne s'ouvrait pas */
.client:has(> a) { padding: 0; }
.client > a { grid-column: 1 / -1; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 12px 14px; min-height: 56px; color: inherit; text-decoration: none; border-radius: var(--rayon); }
.pause-bande { display: block; min-height: 0; background: var(--ambre-fond); color: var(--encre); border: 1px solid #f0d9a8; padding: 10px 12px; }
.decisions .vide, .liste .vide { padding: 14px; color: var(--douce); margin: 0; }
.decisions .plus { margin: 4px 0 0; }
.decisions .plus a, .pied a, .secu a { color: inherit; }
.boutons a.oui { display: grid; place-items: center; grid-column: 1 / -1; min-height: 48px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.tranche.erreur { color: var(--rouge); }
.f-suivre { display: inline-block; margin-top: 6px; color: var(--encre); font-weight: 600; }
.fil .eux .corps-md p { margin: 0 0 6px; } .fil .eux .corps-md p:last-child { margin: 0; }
.fil .etape { color: var(--douce); font-style: italic; }
@media (min-width: 1000px) {
  /* 30/10 (lot 19) : la vraie file est plus longue que celle de la maquette : « À toi » prend la hauteur de la colonne de droite */
  main { grid-template-areas: "gauche gauche toi" "projets clients toi" "secu secu toi" "pied pied pied"; }
}
.f-detail { margin: 0; font-size: .9375rem; } .f-detail a { color: var(--douce); }

/* ——— 30/10 (lot 21, « une seule interface ») : les fiches du serveur dans la feuille du bureau ———
   Un client, une décision entière, Chez nous, Fait, la réserve, un projet (_fiches.html) : les blocs et les gestes des fiches du quartier (lots 12 à 17),
   dans le style du bureau. Sans JavaScript, une fiche s'ouvre par son ancre, dans la page. */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .fiches-srv { display: none; }
.fiches-srv { max-width: 640px; margin: 0 auto; padding: 0 var(--marge); }
.feuille-srv:not(:target):not(:has(:target)) { display: none; }
.fiches-srv .feuille-srv { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 14px var(--marge); margin-bottom: 20px; }
#fiche .feuille-srv { display: grid !important; gap: 14px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.feuille-srv h3 { font: 700 1.0625rem/1.3 var(--texte); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.feuille-srv h3 small, .feuille-srv h4 small { font: 400 .9375rem var(--texte); color: var(--douce); }
.feuille-srv h4 { margin: 6px 0 0; font: 700 .9375rem/1.3 var(--texte); }
.feuille-srv .f-bloc { gap: 8px; padding-top: 12px; border-top: 1px solid var(--filet); scroll-margin-top: 12px; }
.feuille-srv a:not(.lien-fort):not(.oui):not(.bouton) { color: var(--encre); }
.feuille-srv pre { margin: 4px 0; padding: 10px; background: var(--fond); border-radius: 6px; font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.p-lieu { width: 52px; height: 52px; place-items: center; background: var(--c); color: #fff; font: 400 1.75rem/1 "Pixelify Sans", var(--texte); }
.f-retour { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px 0 4px; border: 0; border-radius: 20px; background: var(--fond); font-weight: 600; cursor: pointer; }
.f-retour .ic { width: 18px; height: 18px; }
.f-etat.t-alerte { background: var(--rouge-fond); } .f-etat.t-surveiller { background: var(--ambre-fond); } .f-etat.t-ok { background: var(--vert-fond); }
.feuille-srv > .f-etat { grid-template-columns: minmax(0, 1fr); }
.f-parler { display: grid; gap: 6px; }
.rien { margin: 0; color: var(--douce); }
.sous { color: var(--encre); } .s-alerte { color: var(--rouge); }
.q-dit { margin: 0; padding: 10px 12px; border-radius: 6px; font-weight: 600; background: var(--vert-fond); color: var(--vert); }
.q-dit.r-alerte, .q-dit.r-erreur { background: var(--rouge-fond); color: var(--rouge); }
.f-pied { margin: 0; text-align: center; color: var(--douce); } .f-pied a { color: var(--douce); }
.f-calme h3 small { color: var(--vert); }
.fermer { text-decoration: none; }

/* Une ligne qui mène ailleurs (une décision, Fait, la réserve) */
.ligne-lien { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--filet-2); text-decoration: none; }
.ligne-lien > span { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ligne-lien small { color: var(--douce); font-size: .9375rem; }
.ligne-lien .fl { width: 18px; height: 18px; color: var(--douce); }
.ligne-lien.faite { opacity: .55; } .ligne-lien.faite b { text-decoration: line-through; }
.liens-decisions { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

/* La supervision */
.alerte-ouverte { padding: 10px 12px; border-radius: 6px; background: var(--rouge-fond); display: grid; gap: 4px; }
.alerte-ouverte b { color: var(--rouge); }
.a-surveiller { padding: 10px 12px; border-radius: 6px; background: var(--ambre-fond); display: grid; gap: 4px; }
.a-surveiller ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.etats { margin: 0; padding: 0; list-style: none; display: grid; }
.etats li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0 8px 14px; border-top: 1px solid var(--filet); position: relative; }
.etats li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--filet-2); }
.etats li.ok::before { background: var(--vert); } .etats li.ko::before { background: var(--rouge); } .etats li.attente::before { background: var(--attente); }
.etats li > span:first-child { display: flex; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
.e-mot { color: var(--douce); } .e-quand { color: var(--douce); white-space: nowrap; font-variant-numeric: tabular-nums; }
details.releves > summary, details.plus-tot > summary, details.l-plus > summary, details.l-message > summary, details.l-preuve > summary, .d-detail > summary, .d-exemple > summary, .d-lire > summary, .d-tri > summary, .encore > summary, .reunions summary { cursor: pointer; color: var(--douce); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.essentiel { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; }
.essentiel dt { color: var(--douce); } .essentiel dd { margin: 0; }

/* Les dépliants d'une fiche (mise en production, qui attend quoi, ce que l'équipe fait seule, messages de routine) */
details.plus { border-top: 1px solid var(--filet); scroll-margin-top: 12px; }
details.plus > summary { list-style: none; cursor: pointer; padding: 12px 28px 12px 0; position: relative; }
details.plus > summary::-webkit-details-marker { display: none; }
details.plus > summary::after { content: ""; position: absolute; right: 6px; top: 22px; width: 8px; height: 8px; border-right: 2px solid var(--douce); border-bottom: 2px solid var(--douce); transform: rotate(45deg); }
details.plus[open] > summary::after { transform: rotate(-135deg); top: 26px; }
details.plus > summary > span { display: grid; gap: 2px; } details.plus > summary > span > span { color: var(--douce); }
.plus-corps { display: grid; gap: 10px; padding-bottom: 14px; }
.plus-corps form { display: grid; gap: 8px; }
.attentes { grid-template-columns: 1fr; } .attentes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.attentes li { display: grid; gap: 2px; } .attentes li small { color: var(--douce); }
.declares { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .declares li { display: grid; }

/* Les boutons des fiches */
.bouton, .bouton-doux, .l-bouton, .cocher { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--encre); color: #fff; font-weight: 700; cursor: pointer; text-decoration: none; }
.bouton-clair, .bouton-doux, .l-bouton, .cocher { background: var(--fond); color: var(--encre); box-shadow: inset 0 0 0 1px var(--filet-2); }
.bouton-petit, .l-bouton, .cocher { min-height: 40px; padding: 0 12px; font-size: .9375rem; }
.bouton:disabled, .cocher:disabled, .d-boutons button:disabled { opacity: .55; cursor: default; }
.tour-pied { display: flex; gap: 8px; justify-content: flex-start; }
.tour-repoussee, .repoussee { margin: 0; color: var(--attente); font-weight: 600; font-size: .9375rem; }

/* Une décision entière (_ecrans.html : decision, groupe) */
.decision, .decision-groupe { display: grid; gap: 8px; overflow-wrap: anywhere; scroll-margin-top: 12px; }
.d-tete { display: grid; gap: 6px; } .d-tete p { margin: 0; }
.d-client { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.d-sujet { padding: 2px 8px; border-radius: 4px; background: var(--fond); font-size: .875rem; font-weight: 600; color: var(--douce); }
.d-qui { display: flex; gap: 8px; align-items: center; }
.avatar { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--a, var(--encre)); color: #fff; font: 700 .9375rem/1 var(--texte); }
.puce-client, .client-simple { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.puce-client i, .client-simple i { width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--filet-2)); }
.d-titre { margin: 0; font: 700 1.1875rem/1.3 var(--texte); }
.d-reco { margin: 0; font-weight: 600; } .d-note, .d-equipe, .d-prealable { margin: 0; color: var(--douce); }
.d-sinon { margin: 0; display: flex; gap: 8px; align-items: start; color: var(--douce); }
.d-sinon .ic { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; }
.d-boutons, .g-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d-boutons > *, .g-boutons > * { min-width: 0; }
.d-boutons button, .d-boutons a, .g-boutons button, .d-form button { width: 100%; min-height: 48px; border-radius: 6px; border: 0; font-weight: 700; font-size: 1rem; cursor: pointer; display: grid; place-items: center; text-decoration: none; padding: 6px 10px; }
.d-form { margin: 0; }
.g-boutons { grid-template-columns: 1fr; }
.d-boutons .choix-q { grid-column: 1 / -1; background: var(--fond); box-shadow: inset 0 0 0 1px var(--filet-2); }
.d-raisons { display: grid; gap: 8px; } .d-raisons p { margin: 0; font-weight: 600; }
.d-raisons > div { display: flex; flex-wrap: wrap; gap: 6px; }
.d-raisons button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--fond); box-shadow: inset 0 0 0 1px var(--filet-2); font-weight: 600; cursor: pointer; }
.d-detail-corps { display: grid; gap: 8px; padding: 6px 0; } .d-detail-corps p { margin: 0; }
.d-legende { color: var(--douce); font-size: .9375rem; }
.d-resultat, .l-resultat { margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--vert-fond); color: var(--vert); font-weight: 600; }
.d-resultat.r-alerte, .l-resultat.r-alerte { background: var(--rouge-fond); color: var(--rouge); }
.decision.tranchee > :not(.d-resultat):not(.d-tete):not(.d-titre) { display: none; }
.d-texte { display: grid; gap: 6px; padding: 10px 12px; border-radius: 6px; background: var(--fond); }
.d-texte-tete { margin: 0; display: flex; justify-content: space-between; gap: 8px; color: var(--douce); font-size: .9375rem; }
.d-lettre { background: #fff; border-radius: 6px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--filet); }
.lt-objet { margin: 0 0 8px; display: flex; gap: 8px; } .lt-mot { color: var(--douce); }
.lt-corps { white-space: pre-wrap; }
.champ { padding: 0 4px; border-radius: 4px; background: var(--bleu-fond); color: var(--bleu); font-weight: 600; }
.valeur { background: var(--ambre-fond); color: inherit; padding: 0 2px; border-radius: 3px; }
.d-champs { margin: 0; display: grid; gap: 8px; } .d-champ dd { margin: 2px 0 0; } .d-champ dd p { margin: 0; }
.d-valeurs { margin: 2px 0; padding-left: 1.1em; } .d-controle, .d-ex { color: var(--douce); font-size: .9375rem; }
.d-serie { margin: 0; padding: 0; list-style: none; display: flex; gap: 4px; }
.d-serie .ic { width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: var(--vert); fill: none; stroke: #fff; stroke-width: 2.6; }
.d-tri ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.decision-groupe .g-ou { margin: 4px 0 0; color: var(--douce); font-weight: 600; }
.g-lignes { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.g-ligne .decision { padding: 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--filet-2); }
.g-ligne .d-titre { font-size: 1.0625rem; }
.g-tout { margin: 0; color: var(--douce); }
.repondue .decision:not(.tranchee) .d-boutons { display: none; }

/* Fait : une ligne comme un relevé de compte (_ecrans.html : ligne, file, file_routine) */
.releve { margin: 0; padding: 0; list-style: none; display: grid; }
.ligne { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--filet); }
.releve > .ligne:first-child { border-top: 0; }
.ligne > .avatar { grid-row: 1 / span 2; }
.l-corps { display: grid; gap: 4px; min-width: 0; } .l-corps p { margin: 0; }
.l-titre { font-weight: 600; } .l-phrase, .l-note { color: var(--douce); }
.l-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--douce); font-size: .9375rem; }
.l-heure { margin: 0; color: var(--douce); white-space: nowrap; font-variant-numeric: tabular-nums; }
.l-heure-bas { display: none; }
.l-etat { color: var(--douce); }
.t-alerte .l-titre, .t-echec .l-titre { color: var(--rouge); }
.l-avis { display: flex; gap: 8px; align-items: start; }
.l-gestes { display: flex; flex-wrap: wrap; gap: 8px; } .l-gestes button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; font-weight: 600; cursor: pointer; }
.l-revenir, .l-reprendre, .l-annuler { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.l-confirmer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .l-confirmer p { margin: 0; width: 100%; }
.l-confirmer button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; }
.mc-texte { white-space: pre-wrap; }
.l-range { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 6px; }
.reserve .idee { grid-template-columns: 28px minmax(0, 1fr); }

/* Le créneau, changé sur place (_ecrans.html : creneau) */
.creneau { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--filet-2); }
.creneau > summary { list-style: none; cursor: pointer; padding: 10px 12px; }
.creneau > summary::-webkit-details-marker { display: none; }
.cr-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cr-mot { color: var(--douce); } .cr-valeur { font-variant-numeric: tabular-nums; }
.cr-ouvert { padding: 1px 8px; border-radius: 10px; background: var(--fond); font-weight: 600; } .cr-ouvert.ouvert { background: var(--vert-fond); color: var(--vert); }
.cr-changer { margin-left: auto; font-weight: 600; text-decoration: underline; }
.creneau[open] .cr-changer { visibility: hidden; }
.cr-form { display: grid; gap: 10px; padding: 0 12px 12px; }
.cr-barre { display: block; width: 100%; height: 14px; } .cr-jour { fill: var(--fond); } .cr-plage { fill: var(--encre); } .cr-repere { fill: #fff; } .cr-maintenant { fill: var(--rouge); }
.cr-heures-axe { display: flex; justify-content: space-between; color: var(--douce); font-size: .875rem; font-variant-numeric: tabular-nums; }
.cr-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.cr-form legend { font-weight: 600; margin-bottom: 4px; }
.cr-choix { display: flex; gap: 8px; align-items: center; min-height: 40px; }
.cr-heures { display: flex; flex-wrap: wrap; gap: 8px 14px; } .cr-heures select { min-height: 44px; font: inherit; padding: 0 8px; border-radius: 6px; border: 1px solid var(--filet-2); background: #fff; }
.cr-erreur { margin: 0; color: var(--rouge); font-weight: 600; }
.cr-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cr-boutons button { min-height: 48px; border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; }

/* Messages préparés, contact, tâches */
.message-client { padding: 10px 12px; border-radius: 8px; background: var(--fond); display: grid; gap: 6px; } .message-client p { margin: 0; }
.mc-client { font-weight: 700; } .mc-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; color: var(--douce); font-size: .9375rem; }
.contact-champs { display: grid; gap: 10px; }
.champ-saisie { display: grid; gap: 4px; } .cs-mot { font-weight: 700; } .cs-aide { color: var(--douce); font-size: .9375rem; }
.champ-saisie input { min-height: 48px; padding: 0 12px; border: 1px solid var(--filet-2); border-radius: 8px; font: inherit; background: #fff; }
.champ-saisie input:focus-visible { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.case { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.case input { width: 22px; height: 22px; margin: 2px 0 0; } .case span { display: grid; gap: 2px; } .case small { color: var(--douce); }
.toi, .toi-maisons { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.toi li, .toi-maisons li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--filet); }
.toi li > a, .toi li > span, .toi li > small { grid-column: 1; } .toi li > small { color: var(--douce); }
.toi li > .cocher, .toi li > .coche { grid-column: 2; grid-row: 1 / span 3; }
.attentes li .cocher, .etapes li .cocher { justify-self: start; margin-top: 4px; }
.coche { color: var(--vert); font-weight: 700; }
li.faite > span:not(.coche), li.faite { color: var(--douce); }
.etapes { gap: 8px; } .etapes li { display: grid; gap: 2px; color: var(--encre); } .etapes small { color: var(--douce); }
.etapes .e-mot { font-weight: 700; } .etapes .e-faite .e-mot { color: var(--vert); } .etapes .e-abandonnee { opacity: .55; }

/* La salle : les dernières réunions ; la conversation : les photos jointes */
.reunions { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.reunions li { border-top: 1px solid var(--filet); padding-top: 6px; }
.reunions summary { display: grid; gap: 2px; padding: 4px 0; color: var(--encre); } .reunions summary small { color: var(--douce); font-weight: 400; }
.reunions p { margin: 4px 0; }
.qui-la { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.qui-la li { display: flex; gap: 6px; align-items: center; }
.vide-fil { color: var(--douce); font-style: italic; }
.saisie:has(.photo) { grid-template-columns: auto minmax(0, 1fr) auto; }
.photo { min-width: 48px; min-height: 48px; border: 0; border-radius: 8px; background: var(--fond); box-shadow: inset 0 0 0 1px var(--filet-2); display: grid; place-items: center; cursor: pointer; }
.photos { display: flex; gap: 8px; flex-wrap: wrap; }
.vignette { position: relative; } .vignette img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; display: block; }
.vignette button { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--encre); color: #fff; font-weight: 700; cursor: pointer; }
.fil .corps-md img { max-width: 100%; }

/* Le bureau : ce qui a été fait depuis hier sous la scène, « Pour toi » sous les décisions, les décisions en plus repliées */
.sous-scene { margin: 0; color: var(--douce); } .sous-scene a { color: var(--douce); } .sous-scene a.r { color: var(--rouge); font-weight: 600; }
.pour-toi { display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-decoration: none; }
.pour-toi b { white-space: nowrap; } .pour-toi span { color: var(--douce); flex: 1; } .pour-toi .fl { width: 18px; height: 18px; color: var(--douce); }
.plus-toi > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.plus-toi[open] > summary { margin-bottom: 10px; }
.a-toi .repoussee { margin-bottom: -2px; }
@media (min-width: 1000px) { dialog { max-width: 640px; } }

/* L'entrée (lot 1), dans le style du bureau */
.entree { max-width: 420px; margin: 12vh auto 0; padding: 24px var(--marge); display: grid; gap: 12px; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); }
.entree .logo { margin: 0 0 8px; }
.entree h1 { margin: 0; font: 700 1.5rem/1.2 var(--texte); }
.entree .aide, .entree .secours { margin: 0; color: var(--douce); }
.entree form { display: grid; gap: 8px; }
.entree label { font-weight: 700; }
.entree input { min-height: 48px; padding: 0 12px; border: 1px solid var(--filet-2); border-radius: 8px; font: inherit; font-size: 1.0625rem; background: #fff; }
.entree input:focus-visible { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.entree .principal { min-height: 48px; border: 0; border-radius: 6px; background: var(--encre); color: #fff; font-weight: 700; font-size: 1.0625rem; cursor: pointer; }
.entree .erreur { margin: 0; color: var(--rouge); font-weight: 600; }
.entree code { overflow-wrap: anywhere; font-size: .875rem; }
/* La tête d'une feuille reste en haut (le nom et la croix) quand une ancre ouvre la fiche plus bas */
#fiche .tete { position: sticky; top: 0; z-index: 2; background: var(--blanc); margin: -14px 0 0; padding: 14px 0 8px; }
#fiche .feuille-srv .f-bloc, #fiche .feuille-srv details.plus, #fiche .decision { scroll-margin-top: 96px; }
details.l-plus > summary, details.l-message > summary { font-weight: 500; font-size: .9375rem; min-height: 28px; }

/* La conversation : noter une réponse, arrêter un tour, repartir d'une conversation neuve ; ses missions en file ; réunir chez un client ; le stade */
.noter, .note-dite { display: flex; gap: 6px; margin-top: 6px; }
.noter button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet-2); font-size: .875rem; font-weight: 600; cursor: pointer; }
.note-dite { color: var(--douce); font-size: .875rem; }
.noter-raison { display: flex; gap: 6px; margin-top: 6px; } .noter-raison input { flex: 1; min-height: 36px; padding: 0 8px; border: 1px solid var(--filet-2); border-radius: 6px; font: inherit; }
.f-gestes { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0; }
.arreter { min-height: 40px; padding: 0 14px; border: 0; border-radius: 6px; background: var(--rouge-fond); color: var(--rouge); font-weight: 700; cursor: pointer; }
.lien-doux { min-height: 40px; padding: 0; border: 0; background: none; color: var(--douce); text-decoration: underline; cursor: pointer; font: inherit; }
.file-missions { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.file-missions li { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-top: 1px solid var(--filet); padding-top: 4px; }
.chez-reunion { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.chez-reunion select { min-height: 44px; font: inherit; padding: 0 8px; border-radius: 6px; border: 1px solid var(--filet-2); background: #fff; }
.stade { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--filet); }
.stade button { justify-self: start; }
/* Le lien d'évitement (clavier) : caché jusqu'au focus */
.aller { position: absolute; left: 8px; top: -60px; z-index: 9; padding: 10px 14px; border-radius: 6px; background: var(--encre); color: #fff; font-weight: 700; }
.aller:focus { top: 8px; }