/* Charte graphique Pointa (ADR-0007) : bleu dominant, vert réservé aux validations et états positifs, titres en
   bleu nuit, fond clair, police Inter — grandes zones tactiles. Les logos (icône, logo de l'entreprise) ne changent pas.
   Nuances dérivées (survol, fonds pâles, états, dégradé de la tuile de pointage) prises dans la même gamme que la palette
   officielle. Finitions du 2026-10-30 (ADR-0020) : formes, profondeur, mouvements discrets, mise en page mobile. */
/* Inter (SIL OFL 1.1, fonts/OFL.txt), hébergée localement : la CSP n'autorise aucune ressource externe. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  /* palette officielle : bleu nuit, bleu principal, bleu clair, vert validation, fond clair, textes */
  --navy: #0B1457; --primary: #2563EB; --primary-light: #3B82F6; --green: #22C55E; --bg: #F3F6FB; --text: #1F2937; --muted: #6B7280;
  --surface: #fff; --surface-2: #F8FAFD; --line: #E5E7EB; --line-strong: #D1D5DB; --line-hover: #9CA3AF;
  --primary-hover: #1D4ED8; --primary-press: #1E40AF; --primary-soft: #EFF6FF; --primary-soft-2: #DBEAFE; --on-primary: #fff;
  /* pastille neutre : un ton plus soutenu que le fond, pour rester visible posée sur la page */
  --chip: #E8EDF5; --chip-text: #475569;
  /* états : le vert officiel (#22C55E) est trop clair pour du texte, d'où une nuance foncée pour le texte des états positifs */
  --ok: #15803D; --ok-soft: #F0FDF4; --warn: #B45309; --warn-soft: #FFFBEB; --warn-line: #F59E0B; --danger: #DC2626; --danger-soft: #FEF2F2;
  /* tuile de pointage : bleu nuit → bleu principal */
  --hero: linear-gradient(135deg, #0B1457 0%, #1A3BB8 58%, #2563EB 100%);
  --radius-sm: 10px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --edge: 1px solid rgba(11,20,87,.06); /* liseré très léger des cartes, qui les détache du fond sans les alourdir */
  --shadow: 0 1px 2px rgba(11,20,87,.05), 0 2px 8px rgba(11,20,87,.05);
  --shadow-md: 0 2px 4px rgba(11,20,87,.05), 0 10px 28px rgba(11,20,87,.09);
  --shadow-lg: 0 20px 48px rgba(11,20,87,.20);
  --ring: 0 0 0 3px rgba(37,99,235,.22);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tap: 48px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font: 400 16px/1.5 var(--font); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* halo bleu très léger en haut de page */
  background: radial-gradient(1100px 420px at 50% -160px, rgba(37,99,235,.09), transparent 70%) no-repeat, var(--bg); }
::selection { background: rgba(37,99,235,.18); }
a { color: var(--primary); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .tile:focus-visible, summary:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
/* Typographie de la charte : titres Inter Bold 700 en bleu nuit, sous-titres SemiBold 600, interface Medium 500. */
h1 { font-size: 1.625rem; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: var(--navy); margin: 0 0 1rem; }
h2 { font-size: 1.125rem; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--navy); margin: 1.75rem 0 .75rem; }
p { margin: .5rem 0; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
/* chiffres alignés (heures, dates, montants) */
td, .kpi b, .punch-total, .punch-summary, #toast { font-variant-numeric: tabular-nums; }
/* en-tête du tableau de bord : salutation et date du jour */
.hello { margin-bottom: 1.25rem; }
.hello h1 { margin-bottom: .125rem; }
.hello p { margin: 0; color: var(--muted); font-weight: 500; }

/* ---------- bandeau ---------- */
#topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 60px; padding: 0 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(170%) blur(14px); backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 1px solid rgba(11,20,87,.07); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); text-decoration: none; border-radius: var(--radius-sm); }
.brand img { max-height: 32px; max-width: 120px; object-fit: contain; }
#page-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#brand-name { font-weight: 700; color: var(--navy); white-space: nowrap; padding-right: 12px; border-right: 1px solid var(--line); }
@media (max-width: 480px) { #brand-name { display: none; } }
.avatar-wrap { position: relative; flex: none; }
/* Pastille ronde : taille, marge interne et hauteur minimale fixées ici (sinon la règle générale des boutons l'étire). */
.avatar { flex: none; width: 40px; height: 40px; min-height: 0; padding: 0; aspect-ratio: 1; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, var(--primary-light), var(--navy)); color: var(--on-primary); font: 650 .875rem/1 var(--font); letter-spacing: .03em;
  cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(37,99,235,.22), 0 2px 6px rgba(11,20,87,.18); transition: transform .15s var(--ease), box-shadow .15s; }
.avatar:hover { background: linear-gradient(135deg, var(--primary-light), var(--navy)); transform: scale(1.05); }
.avatar[aria-expanded=true] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37,99,235,.45), 0 2px 6px rgba(11,20,87,.18); }
.avatar:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 3px; }
.menu { position: absolute; right: 0; top: 52px; min-width: 248px; background: var(--surface); border: var(--edge); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 30; transform-origin: top right; animation: pop-in .16s var(--ease); }
.menu .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu .who strong { display: block; color: var(--navy); }
.menu a, .menu button { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0;
  border-radius: var(--radius-sm); background: none; color: var(--text); font: 500 15px var(--font); text-decoration: none; text-align: left; cursor: pointer; box-shadow: none; }
.menu a:hover, .menu button:hover { background: var(--primary-soft); color: var(--navy); }
.menu svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.menu a:hover svg, .menu button:hover svg { color: var(--primary); }

main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 96px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); outline: none; }
main.narrow { max-width: 720px; }

/* ---------- tuiles ---------- */
/* grid-auto-rows: 1fr : toutes les tuiles ont la même taille, celle de la plus haute (la pointeuse). */
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); grid-auto-rows: 1fr; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 150px; padding: 20px;
  border-radius: var(--radius-xl); background: var(--surface); border: var(--edge); box-shadow: var(--shadow); color: var(--text); text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
/* tuiles-liens : titre juste sous l'icône, alignés d'une tuile à l'autre quelle que soit la longueur du texte */
a.tile { justify-content: flex-start; }
a.tile .ico { margin-bottom: 4px; }
a.tile:hover { transform: translateY(-2px); border-color: rgba(37,99,235,.35); box-shadow: var(--shadow-md); }
a.tile:active { transform: translateY(0) scale(.99); }
.tile .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--primary-soft), var(--primary-soft-2)); color: var(--primary); }
.tile .ico svg { width: 26px; height: 26px; }
.tile strong { font-size: 1.15rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--navy); }
.tile span { color: var(--muted); font-size: .9rem; line-height: 1.4; }
/* pointeuse : la tuile vedette (l'action de chaque jour), un seul bouton à la fois, badge de clôture en haut */
.tile.punch { overflow: hidden; border: 0; background: var(--hero); color: #fff; box-shadow: 0 2px 4px rgba(11,20,87,.12), 0 14px 34px rgba(26,59,184,.30); }
.tile.punch::before { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%); pointer-events: none; }
.tile.punch > * { position: relative; }
.tile.punch .ico { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.tile.punch span, .tile.punch .small { color: rgba(255,255,255,.80); }
.tile.punch strong, .tile.punch .punch-summary { color: #fff; }
.tile.punch .punch-summary { font-weight: 600; }
.tile.punch button.primary { background: #fff; border-color: #fff; color: var(--navy); box-shadow: 0 6px 16px rgba(5,10,48,.25); }
.tile.punch button.primary:hover { background: var(--primary-soft); border-color: var(--primary-soft); }
.tile.punch button.primary:active { background: var(--primary-soft-2); }
.tile.punch .badge.ok { background: rgba(34,197,94,.22); color: #DCFCE7; box-shadow: inset 0 0 0 1px rgba(134,239,172,.35); }
.tile .punch-body { display: flex; flex-direction: column; gap: 6px; }
.tile .punch-body > button { margin-bottom: 6px; }
.tile .punch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tile .punch-total { font-size: 1.05rem; }

/* ---------- cartes / formulaires ---------- */
.card { background: var(--surface); border: var(--edge); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
/* minmax(0, 1fr) : un contenu trop large (barre de boutons) ne peut plus élargir le formulaire au-delà de l'écran */
.form { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* align-content: start : un champ ne s'étire pas quand son voisin de ligne est plus haut (texte d'aide) */
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field > label, .field > .label { font-weight: 600; font-size: .925rem; color: #111827; }
.field .hint { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.field .hint.warn { color: var(--warn); }
.field .error { color: var(--danger); font-size: .875rem; }
input, select, textarea { width: 100%; min-height: var(--tap); padding: 10px 12px; font: 16px var(--font); color: var(--text); background-color: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s, background-color .15s; }
/* liste déroulante : même flèche sur tous les appareils */
select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
::placeholder { color: #9CA3AF; opacity: 1; }
input:hover:not(:disabled):not([readonly]), select:hover:not(:disabled), textarea:hover:not(:disabled):not([readonly]) { border-color: var(--line-hover); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
input[readonly], input:disabled, select:disabled, textarea:disabled, textarea[readonly] { background-color: var(--bg); color: var(--muted); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 0; accent-color: var(--primary); }
.invalid { border-color: var(--danger) !important; }
.invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.18); }

/* interrupteur */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--tap); cursor: pointer; font-weight: 600; }
.switch input { appearance: none; -webkit-appearance: none; width: 52px; height: 30px; min-height: 0; border-radius: 15px; background: #8B93A1; position: relative; border: 0;
  cursor: pointer; flex: none; transition: background-color .18s; }
.switch input::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(22px); }
.switch input:focus-visible { box-shadow: var(--ring); }
.switch input:disabled { opacity: .45; }

/* choix segmentés (radios) */
.segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented label { flex: 1 1 120px; display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-weight: 600; text-align: center; line-height: 1.25;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.segmented label:hover { border-color: var(--line-hover); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.segmented label:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---------- boutons ---------- */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 600 16px var(--font); line-height: 1.2; cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; }
button:hover, .btn:hover { background: var(--surface-2); border-color: var(--line-hover); }
button:active:not(:disabled), .btn:active { transform: translateY(1px); }
button.primary, .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px rgba(37,99,235,.25), 0 4px 12px rgba(37,99,235,.20); }
button.primary:hover, .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button.primary:active, .btn.primary:active { background: var(--primary-press); border-color: var(--primary-press); }
button.danger, .btn.danger { color: var(--danger); border-color: rgba(220,38,38,.55); }
button.danger:hover, .btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
button.danger.solid { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 4px 12px rgba(220,38,38,.22); }
button.danger.solid:hover { background: #B91C1C; border-color: #B91C1C; }
button.link { border: 0; background: none; color: var(--primary); padding: 0 4px; min-height: 36px; text-decoration: underline; font-weight: 400; box-shadow: none; }
button.link:hover { background: none; color: var(--primary-hover); }
button:disabled, .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; box-shadow: none; }
button.block, .btn.block { width: 100%; }
button svg, .btn svg { width: 20px; height: 20px; flex: none; }
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row input { flex: 1; min-width: 0; }
.input-row .btn-icon { flex: none; width: var(--tap); padding: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
/* barre d'actions fixe en bas (Envoyer / Annuler toujours accessibles) ; les boutons peuvent rétrécir et passer à la ligne */
.action-bar { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0 12px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(243,246,251,0), var(--bg) 26%); }
.action-bar > * { flex: 1 1 0; min-width: 0; }
.action-bar button, .action-bar .btn { padding: 0 14px; text-align: center; }

/* ---------- listes, tableaux → cartes sur mobile ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.toolbar .grow { flex: 1 1 220px; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; background: var(--surface-2); }
tbody tr { transition: background-color .12s; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--primary-soft); }
.table-wrap { overflow-x: auto; border-radius: var(--radius-xl); border: var(--edge); box-shadow: var(--shadow); background: var(--surface); }
.row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.row-actions button, .row-actions .btn { min-height: 38px; padding: 0 12px; font-size: 14px; gap: 6px; }
.row-actions svg { width: 17px; height: 17px; }
/* Grand écran : boutons d'une ligne côte à côte, colonne ajustée à son contenu (lignes moins hautes). */
@media (min-width: 1001px) {
  td.actions-cell { width: 1%; white-space: nowrap; }
  td.actions-cell .row-actions { flex-wrap: nowrap; }
  .row-actions .icon-only { width: 38px; padding: 0; }
  .row-actions .icon-only .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 720px) {
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive tr { margin: 0 0 12px; border-radius: var(--radius-lg); border: var(--edge); box-shadow: var(--shadow); background: var(--surface); padding: 8px 4px; }
  table.responsive td { border: 0; padding: 6px 12px; display: flex; justify-content: space-between; gap: 12px; }
  table.responsive td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
  table.responsive td.actions-cell { justify-content: flex-end; padding-top: 10px; }
  table.responsive td.actions-cell::before { content: none; }
  .table-wrap { box-shadow: none; border: 0; background: none; overflow: visible; }
}

/* badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; line-height: 1.35; font-weight: 600; letter-spacing: .01em;
  background: var(--chip); color: var(--chip-text); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(21,128,61,.14); }
.badge.warn { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(180,83,9,.16); }
.badge.danger { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px rgba(220,38,38,.14); }
.badge.info { background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px rgba(37,99,235,.14); }
.badge.lock { background: #FFFBEB; color: #92400E; box-shadow: inset 0 0 0 1px rgba(146,64,14,.14); }
.type-FC { background: var(--primary-soft); color: var(--primary-hover); } .type-FT { background: var(--ok-soft); color: var(--ok); }
.type-PT { background: #F5F3FF; color: #6D28D9; } /* ancien pointage retiré : badge conservé pour les entrées antérieures du journal d'audit */
.type-PU { background: #E8EAF6; color: var(--navy); }
.type-AB { background: #FFF1F2; color: #BE123C; }
.notice { padding: 14px 16px; border-radius: var(--radius); background: var(--primary-soft); border: 1px solid rgba(37,99,235,.12); border-left: 4px solid var(--primary); margin-bottom: 16px; line-height: 1.5; }
.notice.warn { background: var(--warn-soft); border-color: rgba(245,158,11,.28); border-left-color: var(--warn-line); }
.notice.danger { background: var(--danger-soft); border-color: rgba(220,38,38,.18); border-left-color: var(--danger); }
.notice .toolbar { margin: 8px 0 0; }
.notice .toolbar .btn, .notice .toolbar button { min-height: 40px; background: rgba(255,255,255,.75); }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; }

/* ---------- autocomplétion ---------- */
.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 15; max-height: 320px; overflow-y: auto; background: var(--surface);
  border: var(--edge); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; margin: 0; list-style: none; animation: pop-in .14s var(--ease); }
.ac-list li { min-height: var(--tap); padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; justify-content: center; }
.ac-list li small { color: var(--muted); }
.ac-list li[aria-selected=true], .ac-list li:hover { background: var(--primary-soft); }
.ac-list li.add { color: var(--primary); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 4px;
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
.ac-list li svg { width: 20px; height: 20px; flex: none; }
.selected-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--primary-soft); border: 1px solid rgba(37,99,235,.18); }

/* ---------- connexion ---------- */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
/* halo des écrans de connexion : sur toute la page (pas seulement le cadre du contenu) */
body:has(.auth-page) { background: radial-gradient(900px 520px at 50% -12%, rgba(37,99,235,.16), transparent 62%) no-repeat,
  radial-gradient(720px 420px at 100% 105%, rgba(11,20,87,.10), transparent 60%) no-repeat, var(--bg); background-attachment: fixed; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: var(--edge); border-radius: 24px; box-shadow: var(--shadow-md); padding: 36px 28px 30px;
  animation: rise-in .3s var(--ease); }
.auth-card .logo { display: flex; justify-content: center; margin-bottom: 20px; min-height: 48px; }
.auth-card .logo img { max-height: 64px; max-width: 220px; object-fit: contain; }
.auth-card .logo .company { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.auth-card h1 { font-size: 1.3rem; text-align: center; }
.lang-switch { display: flex; justify-content: center; gap: 4px; margin-bottom: 20px; }
.lang-switch button { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 999px; }
.lang-switch button[aria-pressed=true] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.qr { display: flex; justify-content: center; margin: 12px 0; }
.qr img { width: 220px; height: 220px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.code-input { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.secret { font-family: ui-monospace, Menlo, Consolas, monospace; text-align: center; word-break: break-all; background: var(--bg); padding: 8px; border-radius: var(--radius-sm); }

/* ---------- toasts / modales ---------- */
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; max-width: min(92vw, 480px);
  padding: 14px 20px; border-radius: var(--radius); background: var(--navy); color: #fff; box-shadow: var(--shadow-lg); font-weight: 600; animation: toast-in .24s var(--ease); }
#toast.ok { background: var(--ok); }
#toast.error { background: var(--danger); }
.modal-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(11,20,87,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 16px; animation: fade-in .16s ease-out; }
.modal { width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: 24px; animation: pop-in .2s var(--ease); }
.modal h2 { margin-top: 0; }
/* Téléphone : les fenêtres montent du bas de l'écran, à portée de pouce. */
@media (max-width: 560px) {
  .modal-backdrop { place-items: end center; padding: 0; }
  .modal { max-width: none; max-height: 92vh; border-radius: 22px 22px 0 0; padding: 26px 20px; padding-bottom: max(24px, env(safe-area-inset-bottom)); animation: sheet-in .26s var(--ease); }
  .modal::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: -14px auto 14px; }
}

.badge svg { width: 14px; height: 14px; flex: none; }
#toast.warn { background: var(--warn); }
.wrap-anywhere { overflow-wrap: anywhere; }
table.top td { vertical-align: top; }
details > summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; padding: 4px 0; }
.logo-preview { max-height: 96px; max-width: 100%; object-fit: contain; }
@media (max-width: 720px) { .row-actions button, .row-actions .btn { min-height: var(--tap); } }
/* Tableaux larges (administration) : cartes aussi sur tablette en portrait. */
@media (max-width: 1000px) {
  table.responsive.wide thead { display: none; }
  table.responsive.wide, table.responsive.wide tbody, table.responsive.wide tr, table.responsive.wide td { display: block; width: 100%; }
  table.responsive.wide tr { margin: 0 0 12px; border-radius: var(--radius-lg); border: var(--edge); box-shadow: var(--shadow); background: var(--surface); padding: 8px 4px; }
  table.responsive.wide td { border: 0; padding: 6px 12px; display: flex; justify-content: space-between; gap: 12px; }
  table.responsive.wide td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
  table.responsive.wide td.actions-cell { justify-content: flex-end; padding-top: 10px; }
  table.responsive.wide td.actions-cell::before { content: none; }
}

/* ---------- signature / photos (feuille de travail) ---------- */
.signature { position: relative; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: #fff; touch-action: none; }
.signature canvas { display: block; width: 100%; height: 220px; touch-action: none; }
.thumbs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button { position: absolute; top: 4px; right: 4px; min-height: 36px; width: 36px; padding: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 0; box-shadow: none; }
.thumb button:hover { background: rgba(0,0,0,.75); }
.thumb.pending::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.55); }
.thumb.error { outline: 2px solid var(--danger); }
.photo-viewer img { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; object-fit: contain; }
.sig-view { display: block; max-width: 100%; max-height: 160px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }

.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-bottom: 16px; }
.kpi { background: var(--surface); border: var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 14px 16px; }
.kpi b { display: block; font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.spinner { width: 20px; height: 20px; border: 3px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px) scale(.97); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (max-width: 720px) {
  main { padding: 16px 12px 96px; }
  .tile { min-height: 120px; }
  h1 { font-size: 1.375rem; }
}
/* Téléphone : la pointeuse en pleine largeur, les autres tuiles par deux (moins de défilement). */
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(148px, auto); gap: 12px; }
  .tiles > .tile.punch { grid-column: 1 / -1; }
  .tile { padding: 16px; border-radius: 18px; gap: 10px; }
  .tile .ico { width: 44px; height: 44px; border-radius: 13px; }
  .tile .ico svg { width: 24px; height: 24px; }
  .tile strong { font-size: 1rem; }
  .tile span { font-size: .8125rem; }
  .tile.punch strong.punch-total { font-size: 1.05rem; }
  /* trois boutons (Annuler, Enregistrer, Clôturer et envoyer) : l'action principale passe sur sa propre ligne */
  .action-bar > .primary:last-child:nth-child(3) { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { #topbar, .action-bar, .toolbar, button { display: none !important; } body { background: #fff; } }

/* Facturation (ADR-0027) : bouton « ! » du commentaire facture, commentaire déplié, case « Facturée ». */
.note-btn { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); font-weight: 800; font-size: 16px; line-height: 1; box-shadow: none; }
.note-btn[aria-expanded="true"] { background: var(--warn-line); color: #fff; }
.bill-note { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--warn-line); background: var(--warn-soft); border-radius: 8px; white-space: pre-wrap; font-size: .9rem; }
.bill-info { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bill-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.note-row td { padding-top: 0; }